npm - @react-three/drei - Versions diffs - 10.8.0-alpha.1 → 11.0.0-alpha.1 - Mend

@react-three/drei 10.8.0-alpha.1 → 11.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/core/_chunks/libs/tunnel-rat.mjs +11 -11
package/core/_chunks/libs/zustand.mjs +3 -3
package/core/core/index.d.mts +150 -150
package/core/core/index.mjs +646 -646
package/index.d.mts +5 -5
package/native/_chunks/libs/tunnel-rat.mjs +11 -11
package/native/_chunks/libs/zustand.mjs +3 -3
package/native/native/index.d.mts +164 -164
package/native/native/index.mjs +765 -765
package/package.json +1 -1
package/webgpu/webgpu/index.d.mts +1 -1

package/native/native/index.mjs CHANGED Viewed

@@ -10,7 +10,7 @@ import { t as require_stats_min } from "../_chunks/libs/stats.js.mjs";
 import { t as Stats$1 } from "../_chunks/libs/stats-gl.mjs";
 import { t as require_index_cjs$1 } from "../_chunks/libs/tunnel-rat.mjs";
 import { n as HDRJPGLoader, t as GainMapLoader } from "../_chunks/libs/@monogrid/gainmap-js.mjs";
-import * as React$1 from "react";
+import * as React from "react";
 import { Fragment, createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { addAfterEffect, addEffect, applyProps, context, createPortal, extend, useFrame, useInstanceHandle, useLoader, useThree } from "@react-three/fiber";
 import * as THREE from "three/webgpu";
@@ -142,14 +142,14 @@ var BlurNodeMaterial = class extends MeshBasicNodeMaterial {
 * <ContactShadows frames={1} />
 * ```
 */
-const ContactShadows = /* @__PURE__ */ React$1.forwardRef(({ scale: scale$2 = 10, frames = Infinity, opacity = 1, width = 1, height = 1, blur = 1, near = 0, far = 10, resolution = 512, smooth = true, color = "#000000", depthWrite = false, renderOrder, ...props }, fref) => {
-	const ref = React$1.useRef(null);
+const ContactShadows = /* @__PURE__ */ React.forwardRef(({ scale: scale$2 = 10, frames = Infinity, opacity = 1, width = 1, height = 1, blur = 1, near = 0, far = 10, resolution = 512, smooth = true, color = "#000000", depthWrite = false, renderOrder, ...props }, fref) => {
+	const ref = React.useRef(null);
 	const scene = useThree((state) => state.scene);
 	const gl = useThree((state) => state.gl);
-	const shadowCamera = React$1.useRef(null);
+	const shadowCamera = React.useRef(null);
 	const actualWidth = width * (Array.isArray(scale$2) ? scale$2[0] : scale$2 || 1);
 	const actualHeight = height * (Array.isArray(scale$2) ? scale$2[1] : scale$2 || 1);
-	const [renderTarget, planeGeometry, depthMaterial, blurPlane, horizontalBlurMaterial, verticalBlurMaterial, renderTargetBlur] = React$1.useMemo(() => {
+	const [renderTarget, planeGeometry, depthMaterial, blurPlane, horizontalBlurMaterial, verticalBlurMaterial, renderTargetBlur] = React.useMemo(() => {
 		const renderTarget$1 = new THREE.RenderTarget(resolution, resolution, {
 			format: THREE.RGBAFormat,
 			type: THREE.HalfFloatType
@@ -179,7 +179,7 @@ const ContactShadows = /* @__PURE__ */ React$1.forwardRef(({ scale: scale$2 = 10
 		near,
 		far
 	]);
-	const blurShadows = React$1.useCallback((blurAmount) => {
+	const blurShadows = React.useCallback((blurAmount) => {
 		blurPlane.visible = true;
 		blurPlane.material = horizontalBlurMaterial;
 		horizontalBlurMaterial.inputTexture = renderTarget.texture;
@@ -223,11 +223,11 @@ const ContactShadows = /* @__PURE__ */ React$1.forwardRef(({ scale: scale$2 = 10
 			scene.background = initialBackground;
 		}
 	});
-	React$1.useImperativeHandle(fref, () => ref.current, []);
-	React$1.useEffect(() => {
+	React.useImperativeHandle(fref, () => ref.current, []);
+	React.useEffect(() => {
 		depthMaterial.shadowOpacity = opacity;
 	}, [opacity, depthMaterial]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		return () => {
 			renderTarget.dispose();
 			renderTargetBlur.dispose();
@@ -346,7 +346,7 @@ function isLight(object) {
 function isGeometry$1(object) {
 	return !!object.geometry;
 }
-const accumulativeContext = /* @__PURE__ */ React$1.createContext(null);
+const accumulativeContext = /* @__PURE__ */ React.createContext(null);
 const SoftShadowMaterial = /* @__PURE__ */ shaderMaterial({
 	color: /* @__PURE__ */ new Color$2(),
 	blend: 2,
@@ -369,19 +369,19 @@ const SoftShadowMaterial = /* @__PURE__ */ shaderMaterial({
      #include <tonemapping_fragment>
      #include <${version >= 154 ? "colorspace_fragment" : "encodings_fragment"}>
    }`);
-const AccumulativeShadows = /* @__PURE__ */ React$1.forwardRef(({ children, temporal, frames = 40, limit = Infinity, blend = 20, scale: scale$2 = 10, opacity = 1, alphaTest = .75, color = "black", colorBlend = 2, resolution = 1024, toneMapped = true, ...props }, forwardRef$1) => {
+const AccumulativeShadows = /* @__PURE__ */ React.forwardRef(({ children, temporal, frames = 40, limit = Infinity, blend = 20, scale: scale$2 = 10, opacity = 1, alphaTest = .75, color = "black", colorBlend = 2, resolution = 1024, toneMapped = true, ...props }, forwardRef$1) => {
 	extend({ SoftShadowMaterial });
 	const gl = useThree((state) => state.gl);
 	const scene = useThree((state) => state.scene);
 	const camera = useThree((state) => state.camera);
 	const invalidate = useThree((state) => state.invalidate);
-	const gPlane = React$1.useRef(null);
-	const gLights = React$1.useRef(null);
-	const [plm] = React$1.useState(() => new ProgressiveLightMap(gl, scene, resolution));
-	React$1.useLayoutEffect(() => {
+	const gPlane = React.useRef(null);
+	const gLights = React.useRef(null);
+	const [plm] = React.useState(() => new ProgressiveLightMap(gl, scene, resolution));
+	React.useLayoutEffect(() => {
 		plm.configure(gPlane.current);
 	}, []);
-	const api = React$1.useMemo(() => ({
+	const api = React.useMemo(() => ({
 		lights: /* @__PURE__ */ new Map(),
 		temporal: !!temporal,
 		frames: Math.max(2, frames),
@@ -423,11 +423,11 @@ const AccumulativeShadows = /* @__PURE__ */ React$1.forwardRef(({ children, temp
 		opacity,
 		alphaTest
 	]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		api.reset();
 		if (!api.temporal && api.frames !== Infinity) api.update(api.blend);
 	});
-	React$1.useImperativeHandle(forwardRef$1, () => api, [api]);
+	React.useImperativeHandle(forwardRef$1, () => api, [api]);
 	useFrame(() => {
 		if ((api.temporal || api.frames === Infinity) && api.count < api.frames && api.count < limit) {
 			invalidate();
@@ -464,15 +464,15 @@ const AccumulativeShadows = /* @__PURE__ */ React$1.forwardRef(({ children, temp
 		})]
 	});
 });
-const RandomizedLight = /* @__PURE__ */ React$1.forwardRef(({ castShadow = true, bias = .001, mapSize = 512, size = 5, near = .5, far = 500, frames = 1, position: position$1 = [
+const RandomizedLight = /* @__PURE__ */ React.forwardRef(({ castShadow = true, bias = .001, mapSize = 512, size = 5, near = .5, far = 500, frames = 1, position: position$1 = [
 	0,
 	0,
 	0
 ], radius = 1, amount = 8, intensity = version >= 155 ? Math.PI : 1, ambient = .5, ...props }, forwardRef$1) => {
-	const gLights = React$1.useRef(null);
+	const gLights = React.useRef(null);
 	const length$1 = new Vector3$2(...position$1).length();
-	const parent = React$1.useContext(accumulativeContext);
-	const update = React$1.useCallback(() => {
+	const parent = React.useContext(accumulativeContext);
+	const update = React.useCallback(() => {
 		let light;
 		if (gLights.current) for (let l = 0; l < gLights.current.children.length; l++) {
 			light = gLights.current.children[l];
@@ -489,9 +489,9 @@ const RandomizedLight = /* @__PURE__ */ React$1.forwardRef(({ castShadow = true,
 		length$1,
 		...position$1
 	]);
-	const api = React$1.useMemo(() => ({ update }), [update]);
-	React$1.useImperativeHandle(forwardRef$1, () => api, [api]);
-	React$1.useLayoutEffect(() => {
+	const api = React.useMemo(() => ({ update }), [update]);
+	React.useImperativeHandle(forwardRef$1, () => api, [api]);
+	React.useLayoutEffect(() => {
 		const group = gLights.current;
 		if (parent) parent.lights?.set(group.uuid, api);
 		return () => void parent?.lights?.delete(group.uuid);
@@ -640,7 +640,7 @@ function useFBO(width, height, settings) {
 	const _settings = (typeof width === "number" ? settings : width) || {};
 	const { samples = 0, depth, ...targetSettings } = _settings;
 	const depthBuffer = depth ?? _settings.depthBuffer;
-	const target$1 = React$1.useMemo(() => {
+	const target$1 = React.useMemo(() => {
 		const target$2 = new RenderTarget(_width, _height, {
 			minFilter: LinearFilter,
 			magFilter: LinearFilter,
@@ -651,7 +651,7 @@ function useFBO(width, height, settings) {
 		target$2.samples = samples;
 		return target$2;
 	}, []);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		target$1.setSize(_width, _height);
 		if (samples) target$1.samples = samples;
 	}, [
@@ -660,7 +660,7 @@ function useFBO(width, height, settings) {
 		_width,
 		_height
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		return () => target$1.dispose();
 	}, []);
 	return target$1;
@@ -704,9 +704,9 @@ const Fbo = /* @__PURE__ */ forwardRef(({ children, width, height, ...settings }
 * ```
 */
 function useHelper(object3D, helperConstructor, ...args) {
-	const helper = React$1.useRef(null);
+	const helper = React.useRef(null);
 	const scene = useThree((state) => state.scene);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		let currentHelper = void 0;
 		if (object3D && object3D?.current && helperConstructor) helper.current = currentHelper = new helperConstructor(object3D.current, ...args);
 		if (currentHelper) {
@@ -739,9 +739,9 @@ function useHelper(object3D, helperConstructor, ...args) {
 * ```
 */
 const Helper = ({ type: helperConstructor, args = [] }) => {
-	const thisRef = React$1.useRef(null);
-	const parentRef = React$1.useRef(null);
-	React$1.useLayoutEffect(() => {
+	const thisRef = React.useRef(null);
+	const parentRef = React.useRef(null);
+	React.useLayoutEffect(() => {
 		parentRef.current = thisRef.current.parent;
 	});
 	useHelper(parentRef, helperConstructor, ...args);
@@ -770,11 +770,11 @@ const Helper = ({ type: helperConstructor, args = [] }) => {
 * </mesh>
 * ```
 */
-const Edges = /* @__PURE__ */ React$1.forwardRef(({ threshold = 15, geometry: explicitGeometry, LineComponent, ...props }, fref) => {
+const Edges = /* @__PURE__ */ React.forwardRef(({ threshold = 15, geometry: explicitGeometry, LineComponent, ...props }, fref) => {
 	const LineComp = LineComponent ?? Line;
-	const ref = React$1.useRef(null);
-	React$1.useImperativeHandle(fref, () => ref.current, []);
-	const tmpPoints = React$1.useMemo(() => [
+	const ref = React.useRef(null);
+	React.useImperativeHandle(fref, () => ref.current, []);
+	const tmpPoints = React.useMemo(() => [
 		0,
 		0,
 		0,
@@ -782,9 +782,9 @@ const Edges = /* @__PURE__ */ React$1.forwardRef(({ threshold = 15, geometry: ex
 		0,
 		0
 	], []);
-	const memoizedGeometry = React$1.useRef(null);
-	const memoizedThreshold = React$1.useRef(null);
-	React$1.useLayoutEffect(() => {
+	const memoizedGeometry = React.useRef(null);
+	const memoizedThreshold = React.useRef(null);
+	React.useLayoutEffect(() => {
 		const parent = ref.current.parent;
 		const geometry$1 = explicitGeometry ?? parent?.geometry;
 		if (!geometry$1) return;
@@ -1342,10 +1342,10 @@ var MeshTransmissionMaterialImpl = class extends MeshPhysicalNodeMaterial {
 		this._attenuationColor.value = v$1;
 	}
 };
-const MeshTransmissionMaterial = /* @__PURE__ */ React$1.forwardRef(({ buffer, transmissionSampler = false, backside = false, side = THREE.FrontSide, transmission = 1, thickness = 0, backsideThickness = 0, backsideEnvMapIntensity = 1, samples = 10, resolution, backsideResolution, background, anisotropy, anisotropicBlur, ...props }, fref) => {
+const MeshTransmissionMaterial = /* @__PURE__ */ React.forwardRef(({ buffer, transmissionSampler = false, backside = false, side = THREE.FrontSide, transmission = 1, thickness = 0, backsideThickness = 0, backsideEnvMapIntensity = 1, samples = 10, resolution, backsideResolution, background, anisotropy, anisotropicBlur, ...props }, fref) => {
 	extend({ MeshTransmissionMaterial: MeshTransmissionMaterialImpl });
-	const ref = React$1.useRef(null);
-	const [discardMaterial] = React$1.useState(() => DiscardMaterial);
+	const ref = React.useRef(null);
+	const [discardMaterial] = React.useState(() => DiscardMaterial);
 	const fboBack = useFBO(backsideResolution || resolution);
 	const fboMain = useFBO(resolution);
 	let oldBg;
@@ -1385,7 +1385,7 @@ const MeshTransmissionMaterial = /* @__PURE__ */ React$1.forwardRef(({ buffer, t
 			}
 		}
 	});
-	React$1.useImperativeHandle(fref, () => ref.current, []);
+	React.useImperativeHandle(fref, () => ref.current, []);
 	return /* @__PURE__ */ jsx("meshTransmissionMaterial", {
 		args: [samples, transmissionSampler],
 		ref,
@@ -1546,12 +1546,12 @@ var MeshReflectorMaterial$1 = class extends THREE.MeshStandardNodeMaterial {
 * </mesh>
 * ```
 */
-const MeshReflectorMaterial = /* @__PURE__ */ React$1.forwardRef(({ mixBlur = 0, mixStrength = 1, resolution = 256, blur = [0, 0], minDepthThreshold = .9, maxDepthThreshold = 1, depthScale = 0, depthToBlurRatioBias = .25, mirror = 0, distortion = 1, mixContrast = 1, reflectorOffset = 0, ...props }, ref) => {
+const MeshReflectorMaterial = /* @__PURE__ */ React.forwardRef(({ mixBlur = 0, mixStrength = 1, resolution = 256, blur = [0, 0], minDepthThreshold = .9, maxDepthThreshold = 1, depthScale = 0, depthToBlurRatioBias = .25, mirror = 0, distortion = 1, mixContrast = 1, reflectorOffset = 0, ...props }, ref) => {
 	const scene = useThree(({ scene: scene$1 }) => scene$1);
 	const blurArray = Array.isArray(blur) ? blur : [blur, blur];
 	blurArray[0] + blurArray[1];
 	const blurRadius = Math.min(1, (blurArray[0] + blurArray[1]) / 1e3);
-	const [material] = React$1.useState(() => new MeshReflectorMaterial$1({
+	const [material] = React.useState(() => new MeshReflectorMaterial$1({
 		resolution,
 		mixBlur,
 		mixStrength,
@@ -1564,9 +1564,9 @@ const MeshReflectorMaterial = /* @__PURE__ */ React$1.forwardRef(({ mixBlur = 0,
 		mixContrast,
 		reflectorOffset
 	}, props));
-	React$1.useImperativeHandle(ref, () => material, [material]);
-	const parentMeshRef = React$1.useRef(null);
-	React$1.useEffect(() => {
+	React.useImperativeHandle(ref, () => material, [material]);
+	const parentMeshRef = React.useRef(null);
+	React.useEffect(() => {
 		const target$1 = material.reflectorTarget;
 		if (target$1) scene.add(target$1);
 		return () => {
@@ -1592,7 +1592,7 @@ const MeshReflectorMaterial = /* @__PURE__ */ React$1.forwardRef(({ mixBlur = 0,
 			target$1.matrix.copy(parentMesh.matrixWorld);
 		}
 	});
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		material.mirror = mirror;
 		material.mixBlur = mixBlur;
 		material.mixStrength = mixStrength;
@@ -1781,17 +1781,17 @@ var MeshRefractionMaterialImpl = class extends MeshPhysicalNodeMaterial {
 		this._thickness.value = v$1;
 	}
 };
-const MeshRefractionMaterial = /* @__PURE__ */ React$1.forwardRef(({ envMap, bounces = 3, ior = 2.4, fresnel = 0, aberrationStrength = .01, fastChroma = true, tintColor = "white", opacity = 1, ...props }, fref) => {
+const MeshRefractionMaterial = /* @__PURE__ */ React.forwardRef(({ envMap, bounces = 3, ior = 2.4, fresnel = 0, aberrationStrength = .01, fastChroma = true, tintColor = "white", opacity = 1, ...props }, fref) => {
 	extend({ MeshRefractionMaterial: MeshRefractionMaterialImpl });
-	const ref = React$1.useRef(null);
+	const ref = React.useRef(null);
 	const size = useThree((state) => state.size);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (ref.current) ref.current.resolution = new THREE.Vector2(size.width, size.height);
 	}, [size]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (ref.current && envMap) ref.current.envMap = envMap;
 	}, [envMap]);
-	React$1.useImperativeHandle(fref, () => ref.current, []);
+	React.useImperativeHandle(fref, () => ref.current, []);
 	return /* @__PURE__ */ jsx("meshRefractionMaterial", {
 		args: [fastChroma],
 		ref,
@@ -1819,17 +1819,17 @@ const MeshRefractionMaterial = /* @__PURE__ */ React$1.forwardRef(({ envMap, bou
 */
 function useIntersect(onChange) {
 	const { isLegacy } = useThree();
-	const ref = React$1.useRef(null);
-	const currentStatus = React$1.useRef(false);
-	const previousStatus = React$1.useRef(false);
-	const callback = React$1.useRef(onChange);
-	const { frustum, projScreenMatrix } = React$1.useMemo(() => {
+	const ref = React.useRef(null);
+	const currentStatus = React.useRef(false);
+	const previousStatus = React.useRef(false);
+	const callback = React.useRef(onChange);
+	const { frustum, projScreenMatrix } = React.useMemo(() => {
 		return {
 			frustum: new Frustum(),
 			projScreenMatrix: new Matrix4()
 		};
 	}, []);
-	React$1.useLayoutEffect(() => void (callback.current = onChange), [onChange]);
+	React.useLayoutEffect(() => void (callback.current = onChange), [onChange]);
 	useFrame(() => {
 		if (ref.current) currentStatus.current = false;
 	}, { phase: "start" });
@@ -1847,7 +1847,7 @@ function useIntersect(onChange) {
 		previousStatus.current = visibleNow;
 		callback.current?.(visibleNow);
 	}, { phase: "end" });
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const obj = ref.current;
 		if (obj && isLegacy) {
 			const oldOnRender = obj.onBeforeRender;
@@ -1862,11 +1862,11 @@ function useIntersect(onChange) {
 //#endregion
 //#region src/core/Portal/RenderTexture/RenderTexture.tsx
-const RenderTexture = /* @__PURE__ */ React$1.forwardRef(({ children, compute, width, height, samples = 4, renderPriority = 0, eventPriority = 0, frames = Infinity, stencilBuffer = false, depthBuffer = true, generateMipmaps = false, ...props }, forwardRef$1) => {
+const RenderTexture = /* @__PURE__ */ React.forwardRef(({ children, compute, width, height, samples = 4, renderPriority = 0, eventPriority = 0, frames = Infinity, stencilBuffer = false, depthBuffer = true, generateMipmaps = false, ...props }, forwardRef$1) => {
 	const { size, viewport, isLegacy } = useThree();
 	const fboWidth = (width || size.width) * viewport.dpr;
 	const fboHeight = (height || size.height) * viewport.dpr;
-	const fboRef = React$1.useRef(null);
+	const fboRef = React.useRef(null);
 	if (!fboRef.current) {
 		const settings = {
 			minFilter: LinearFilter,
@@ -1884,7 +1884,7 @@ const RenderTexture = /* @__PURE__ */ React$1.forwardRef(({ children, compute, w
 	}
 	const fboA = fboRef.current.a;
 	const fboB = fboRef.current.b;
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		const needsFlip = !isLegacy;
 		fboA.texture.flipY = !needsFlip;
 		fboB.texture.flipY = !needsFlip;
@@ -1893,7 +1893,7 @@ const RenderTexture = /* @__PURE__ */ React$1.forwardRef(({ children, compute, w
 		fboB,
 		isLegacy
 	]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		fboA.setSize(fboWidth, fboHeight);
 		fboB.setSize(fboWidth, fboHeight);
 	}, [
@@ -1902,7 +1902,7 @@ const RenderTexture = /* @__PURE__ */ React$1.forwardRef(({ children, compute, w
 		fboWidth,
 		fboHeight
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		return () => {
 			if (fboRef.current) {
 				fboRef.current.a.dispose();
@@ -1911,10 +1911,10 @@ const RenderTexture = /* @__PURE__ */ React$1.forwardRef(({ children, compute, w
 			}
 		};
 	}, []);
-	const readBufferIndex = React$1.useRef(0);
-	const displayTextureRef = React$1.useRef(fboA.texture);
-	const [vScene] = React$1.useState(() => new Scene());
-	const uvCompute = React$1.useCallback((event, state, previous) => {
+	const readBufferIndex = React.useRef(0);
+	const displayTextureRef = React.useRef(fboA.texture);
+	const [vScene] = React.useState(() => new Scene());
+	const uvCompute = React.useCallback((event, state, previous) => {
 		let parent = fboA.texture?.__r3f?.parent?.object;
 		while (parent && !(parent instanceof Object3D$1)) parent = parent.__r3f?.parent?.object;
 		if (!parent) return false;
@@ -1925,7 +1925,7 @@ const RenderTexture = /* @__PURE__ */ React$1.forwardRef(({ children, compute, w
 		if (!uv$1) return false;
 		state.raycaster.setFromCamera(state.pointer.set(uv$1.x * 2 - 1, uv$1.y * 2 - 1), state.camera);
 	}, [fboA]);
-	React$1.useImperativeHandle(forwardRef$1, () => displayTextureRef.current, []);
+	React.useImperativeHandle(forwardRef$1, () => displayTextureRef.current, []);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [createPortal(/* @__PURE__ */ jsxs(Container$2, {
 		renderPriority,
 		frames,
@@ -2330,25 +2330,25 @@ const makeSDFGenerator = (clientWidth, clientHeight, renderer) => {
 		return finalTarget;
 	};
 };
-const MeshPortalMaterial = /* @__PURE__ */ React$1.forwardRef(({ children, events = void 0, blur = 0, eventPriority = 0, renderPriority = 0, worldUnits = false, resolution = 512, ...props }, fref) => {
+const MeshPortalMaterial = /* @__PURE__ */ React.forwardRef(({ children, events = void 0, blur = 0, eventPriority = 0, renderPriority = 0, worldUnits = false, resolution = 512, ...props }, fref) => {
 	extend({ PortalMaterialImpl });
-	const ref = React$1.useRef(null);
+	const ref = React.useRef(null);
 	const { scene, gl, size, viewport, setEvents } = useThree();
 	const maskRenderTarget = useFBO(resolution, resolution);
-	const [priority, setPriority] = React$1.useState(0);
+	const [priority, setPriority] = React.useState(0);
 	useFrame(() => {
 		const p = ref.current.blend > 0 ? Math.max(1, renderPriority) : 0;
 		if (priority !== p) setPriority(p);
 	});
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (events !== void 0) setEvents({ enabled: !events });
 	}, [events]);
-	const [visible, setVisible] = React$1.useState(true);
+	const [visible, setVisible] = React.useState(true);
 	const parent = useIntersect(setVisible);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		parent.current = ref.current?.__r3f?.parent?.object;
 	}, []);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (!parent.current) return;
 		if (blur && ref.current.sdf === null) {
 			const tempMesh = new THREE.Mesh(parent.current.geometry, new THREE.MeshBasicMaterial());
@@ -2369,8 +2369,8 @@ const MeshPortalMaterial = /* @__PURE__ */ React$1.forwardRef(({ children, event
 			gl.setRenderTarget(null);
 		}
 	}, [resolution, blur]);
-	React$1.useImperativeHandle(fref, () => ref.current);
-	const compute = React$1.useCallback((event, state, _previous) => {
+	React.useImperativeHandle(fref, () => ref.current);
+	const compute = React.useCallback((event, state, _previous) => {
 		if (!parent.current) return false;
 		state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
 		state.raycaster.setFromCamera(state.pointer, state.camera);
@@ -2410,13 +2410,13 @@ function ManagePortalScene({ events = void 0, rootScene, material, priority, wor
 	const setEvents = useThree((state) => state.setEvents);
 	const buffer1 = useFBO();
 	const buffer2 = useFBO();
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		scene.matrixAutoUpdate = false;
 	}, []);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (events !== void 0) setEvents({ enabled: events });
 	}, [events]);
-	const [quad, blendMat] = React$1.useMemo(() => {
+	const [quad, blendMat] = React.useMemo(() => {
 		const mat = new BlendMaterial();
 		mat.textureA = buffer1.texture;
 		mat.textureB = buffer2.texture;
@@ -2495,8 +2495,8 @@ var DistortMaterialImplWebGPU = class extends THREE.MeshPhysicalNodeMaterial {
 * </mesh>
 * ```
 */
-const MeshDistortMaterial = /* @__PURE__ */ React$1.forwardRef(({ speed = 1, ...props }, ref) => {
-	const [material] = React$1.useState(() => new DistortMaterialImplWebGPU());
+const MeshDistortMaterial = /* @__PURE__ */ React.forwardRef(({ speed = 1, ...props }, ref) => {
+	const [material] = React.useState(() => new DistortMaterialImplWebGPU());
 	useFrame(({ elapsed }) => material && (material.time = elapsed * speed));
 	return /* @__PURE__ */ jsx("primitive", {
 		object: material,
@@ -2547,8 +2547,8 @@ var WobbleMaterialImpl = class extends THREE.MeshStandardNodeMaterial {
 		this.factorUniform.value = v$1;
 	}
 };
-const MeshWobbleMaterial = /* @__PURE__ */ React$1.forwardRef(({ speed = 1, ...props }, ref) => {
-	const [material] = React$1.useState(() => new WobbleMaterialImpl());
+const MeshWobbleMaterial = /* @__PURE__ */ React.forwardRef(({ speed = 1, ...props }, ref) => {
+	const [material] = React.useState(() => new WobbleMaterialImpl());
 	useFrame((state) => material && (material.time = state.elapsed * speed));
 	return /* @__PURE__ */ jsx("primitive", {
 		object: material,
@@ -2647,14 +2647,14 @@ var OutlinesMaterial = class extends MeshBasicNodeMaterial {
 	}
 };
 function Outlines({ color = "black", opacity = 1, transparent = false, screenspace = false, toneMapped = true, polygonOffset = false, polygonOffsetFactor = 0, renderOrder = 0, thickness = .05, angle = Math.PI, clippingPlanes, ...props }) {
-	const ref = React$1.useRef(null);
-	const [material] = React$1.useState(() => new OutlinesMaterial());
+	const ref = React.useRef(null);
+	const [material] = React.useState(() => new OutlinesMaterial());
 	const { gl } = useThree();
 	const contextSize = gl.getDrawingBufferSize(new THREE.Vector2());
-	React$1.useMemo(() => extend({ OutlinesMaterial }), []);
-	const oldAngle = React$1.useRef(0);
-	const oldGeometry = React$1.useRef(null);
-	React$1.useLayoutEffect(() => {
+	React.useMemo(() => extend({ OutlinesMaterial }), []);
+	const oldAngle = React.useRef(0);
+	const oldGeometry = React.useRef(null);
+	React.useLayoutEffect(() => {
 		const group = ref.current;
 		if (!group) return;
 		const parent = group.parent;
@@ -2687,7 +2687,7 @@ function Outlines({ color = "black", opacity = 1, transparent = false, screenspa
 			}
 		}
 	});
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		const group = ref.current;
 		if (!group) return;
 		const mesh = group.children[0];
@@ -2713,7 +2713,7 @@ function Outlines({ color = "black", opacity = 1, transparent = false, screenspa
 			});
 		}
 	});
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		return () => {
 			const group = ref.current;
 			if (!group) return;
@@ -2748,11 +2748,11 @@ function Outlines({ color = "black", opacity = 1, transparent = false, screenspa
 * </mesh>
 * ```
 */
-const RenderCubeTexture = /* @__PURE__ */ React$1.forwardRef(({ children, compute, renderPriority = -1, eventPriority = 0, frames = Infinity, stencilBuffer = false, depthBuffer = true, generateMipmaps = false, resolution = 896, near = .1, far = 1e3, flip = false, position: position$1, rotation: rotation$2, scale: scale$2, quaternion, matrix: matrix$1, matrixAutoUpdate, ...props }, forwardRef$1) => {
+const RenderCubeTexture = /* @__PURE__ */ React.forwardRef(({ children, compute, renderPriority = -1, eventPriority = 0, frames = Infinity, stencilBuffer = false, depthBuffer = true, generateMipmaps = false, resolution = 896, near = .1, far = 1e3, flip = false, position: position$1, rotation: rotation$2, scale: scale$2, quaternion, matrix: matrix$1, matrixAutoUpdate, ...props }, forwardRef$1) => {
 	const { size, viewport } = useThree();
 	const fboSize = Math.max((resolution || size.width) * viewport.dpr, (resolution || size.height) * viewport.dpr);
-	const fboRef = React$1.useRef(null);
-	const cameraRef = React$1.useRef(null);
+	const fboRef = React.useRef(null);
+	const cameraRef = React.useRef(null);
 	if (!fboRef.current) {
 		const settings = {
 			stencilBuffer,
@@ -2776,9 +2776,9 @@ const RenderCubeTexture = /* @__PURE__ */ React$1.forwardRef(({ children, comput
 	const fboA = fboRef.current.a;
 	const fboB = fboRef.current.b;
 	const camera = cameraRef.current;
-	const readBufferIndex = React$1.useRef(0);
-	const displayTextureRef = React$1.useRef(fboA.texture);
-	React$1.useLayoutEffect(() => {
+	const readBufferIndex = React.useRef(0);
+	const displayTextureRef = React.useRef(fboA.texture);
+	React.useLayoutEffect(() => {
 		if (position$1) {
 			if (Array.isArray(position$1)) camera.position.set(...position$1);
 			else if (position$1 instanceof Vector3$2) camera.position.copy(position$1);
@@ -2807,7 +2807,7 @@ const RenderCubeTexture = /* @__PURE__ */ React$1.forwardRef(({ children, comput
 		matrix$1,
 		matrixAutoUpdate
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		return () => {
 			if (fboRef.current) {
 				fboRef.current.a.dispose();
@@ -2817,8 +2817,8 @@ const RenderCubeTexture = /* @__PURE__ */ React$1.forwardRef(({ children, comput
 			cameraRef.current = null;
 		};
 	}, []);
-	const [vScene] = React$1.useState(() => new Scene());
-	React$1.useImperativeHandle(forwardRef$1, () => ({
+	const [vScene] = React.useState(() => new Scene());
+	React.useImperativeHandle(forwardRef$1, () => ({
 		scene: vScene,
 		get fbo() {
 			return readBufferIndex.current === 0 ? fboA : fboB;
@@ -2851,9 +2851,9 @@ const RenderCubeTexture = /* @__PURE__ */ React$1.forwardRef(({ children, comput
 	})] });
 });
 function DynamicTexture({ displayTextureRef, fboA, fboB, readBufferIndex, ...props }) {
-	const materialRef = React$1.useRef(null);
+	const materialRef = React.useRef(null);
 	const attachKey = typeof props.attach === "string" ? props.attach : "envMap";
-	const customAttach = React$1.useCallback((parent, self) => {
+	const customAttach = React.useCallback((parent, self) => {
 		const material = parent?.isMaterial ? parent : parent?.object;
 		if (!material) {
 			console.warn("RenderCubeTexture: Could not find parent material for attach");
@@ -2941,7 +2941,7 @@ function RenderHud({ defaultScene, defaultCamera, renderPriority = 1 }) {
 */
 function Hud({ children, renderPriority = 1 }) {
 	const { scene: defaultScene, camera: defaultCamera } = useThree();
-	const [hudScene] = React$1.useState(() => new Scene());
+	const [hudScene] = React.useState(() => new Scene());
 	return /* @__PURE__ */ jsx(Fragment$1, { children: createPortal(/* @__PURE__ */ jsxs(Fragment$1, { children: [children, /* @__PURE__ */ jsx(RenderHud, {
 		defaultScene,
 		defaultCamera,
@@ -2967,12 +2967,12 @@ function Hud({ children, renderPriority = 1 }) {
 * />
 * ```
 */
-const Line = /* @__PURE__ */ React$1.forwardRef(function Line$1({ points, color = 16777215, vertexColors, linewidth, lineWidth, segments, dashed, ...rest }, ref) {
+const Line = /* @__PURE__ */ React.forwardRef(function Line$1({ points, color = 16777215, vertexColors, linewidth, lineWidth, segments, dashed, ...rest }, ref) {
 	const size = useThree((state) => state.size);
-	const line2 = React$1.useMemo(() => segments ? new LineSegments2() : new Line2(), [segments]);
-	const lineMaterial = React$1.useMemo(() => new Line2NodeMaterial({ vertexColors: Boolean(vertexColors) }), [Boolean(vertexColors)]);
+	const line2 = React.useMemo(() => segments ? new LineSegments2() : new Line2(), [segments]);
+	const lineMaterial = React.useMemo(() => new Line2NodeMaterial({ vertexColors: Boolean(vertexColors) }), [Boolean(vertexColors)]);
 	const itemSize = (vertexColors?.[0])?.length === 4 ? 4 : 3;
-	const lineGeom = React$1.useMemo(() => {
+	const lineGeom = React.useMemo(() => {
 		const geom = segments ? new LineSegmentsGeometry() : new LineGeometry();
 		const pValues = points.map((p) => {
 			const isArray$1 = Array.isArray(p);
@@ -3020,10 +3020,10 @@ const Line = /* @__PURE__ */ React$1.forwardRef(function Line$1({ points, color
 		vertexColors,
 		itemSize
 	]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		line2.computeLineDistances();
 	}, [points, line2]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (dashed) lineMaterial.dashed = true;
 		else lineMaterial.dashed = false;
 		lineMaterial.needsUpdate = true;
@@ -3050,7 +3050,7 @@ const Line = /* @__PURE__ */ React$1.forwardRef(function Line$1({ points, color
 //#endregion
 //#region src/webgpu/Geometry/Segments/Segments.tsx
-const context$10 = /* @__PURE__ */ React$1.createContext(null);
+const context$10 = /* @__PURE__ */ React.createContext(null);
 /**
 * High-performance line segments renderer.
 * WebGPU version using Line2NodeMaterial.
@@ -3063,23 +3063,23 @@ const context$10 = /* @__PURE__ */ React$1.createContext(null);
 * </Segments>
 * ```
 */
-const Segments = /* @__PURE__ */ React$1.forwardRef((props, forwardedRef) => {
-	React$1.useMemo(() => extend({ SegmentObject }), []);
+const Segments = /* @__PURE__ */ React.forwardRef((props, forwardedRef) => {
+	React.useMemo(() => extend({ SegmentObject }), []);
 	const { limit = 1e3, lineWidth = 1, children, ...rest } = props;
-	const [segments, setSegments] = React$1.useState([]);
-	const line = React$1.useMemo(() => new LineSegments2(), []);
-	const [geometry$1] = React$1.useState(() => new LineSegmentsGeometry());
-	const [resolution] = React$1.useState(() => new THREE.Vector2(512, 512));
-	const [positions] = React$1.useState(() => Array(limit * 6).fill(0));
-	const [colors$1] = React$1.useState(() => Array(limit * 6).fill(0));
-	const material = React$1.useMemo(() => new THREE.Line2NodeMaterial({
+	const [segments, setSegments] = React.useState([]);
+	const line = React.useMemo(() => new LineSegments2(), []);
+	const [geometry$1] = React.useState(() => new LineSegmentsGeometry());
+	const [resolution] = React.useState(() => new THREE.Vector2(512, 512));
+	const [positions] = React.useState(() => Array(limit * 6).fill(0));
+	const [colors$1] = React.useState(() => Array(limit * 6).fill(0));
+	const material = React.useMemo(() => new THREE.Line2NodeMaterial({
 		color: 16777215,
 		linewidth: 1,
 		worldUnits: false,
 		vertexColors: true,
 		alphaToCoverage: true
 	}), []);
-	const api = React$1.useMemo(() => ({ subscribe: (ref) => {
+	const api = React.useMemo(() => ({ subscribe: (ref) => {
 		setSegments((segments$1) => [...segments$1, ref]);
 		return () => setSegments((segments$1) => segments$1.filter((item) => item.current !== ref.current));
 	} }), []);
@@ -3143,12 +3143,12 @@ const normPos = (pos) => pos instanceof THREE.Vector3 ? pos : new THREE.Vector3(
 	pos,
 	pos
 ] : pos);
-const Segment = /* @__PURE__ */ React$1.forwardRef(({ color, start, end }, forwardedRef) => {
-	const api = React$1.useContext(context$10);
+const Segment = /* @__PURE__ */ React.forwardRef(({ color, start, end }, forwardedRef) => {
+	const api = React.useContext(context$10);
 	if (!api) throw "Segment must used inside Segments component.";
-	const ref = React$1.useRef(null);
-	React$1.useImperativeHandle(forwardedRef, () => ref.current, []);
-	React$1.useLayoutEffect(() => api.subscribe(ref), []);
+	const ref = React.useRef(null);
+	React.useImperativeHandle(forwardedRef, () => ref.current, []);
+	React.useLayoutEffect(() => api.subscribe(ref), []);
 	return /* @__PURE__ */ jsx("segmentObject", {
 		ref,
 		color,
@@ -3185,16 +3185,16 @@ function useTrail(target$1, settings, pointCount) {
 		...defaults,
 		...settings
 	};
-	const points = React$1.useRef(null);
-	const [worldPosition] = React$1.useState(() => new Vector3$1());
-	React$1.useLayoutEffect(() => {
+	const points = React.useRef(null);
+	const [worldPosition] = React.useState(() => new Vector3$1());
+	React.useLayoutEffect(() => {
 		if (target$1) {
 			const pos = target$1.position;
 			points.current = Float32Array.from({ length: pointCount * 3 }, (_, i$1) => pos.getComponent(i$1 % 3));
 		}
 	}, [pointCount, target$1]);
-	const prevPosition = React$1.useRef(new Vector3$1());
-	const frameCount = React$1.useRef(0);
+	const prevPosition = React.useRef(new Vector3$1());
+	const frameCount = React.useRef(0);
 	useFrame(() => {
 		if (!target$1) return;
 		if (!points.current) return;
@@ -3222,7 +3222,7 @@ function useTrail(target$1, settings, pointCount) {
 * A declarative trail effect using Line2.
 * WebGPU version using Line2NodeMaterial.
 */
-const Trail = /* @__PURE__ */ React$1.forwardRef((props, forwardRef$1) => {
+const Trail = /* @__PURE__ */ React.forwardRef((props, forwardRef$1) => {
 	const { children } = props;
 	const { width, length: length$1, decay, local, stride, interval } = {
 		...defaults,
@@ -3231,8 +3231,8 @@ const Trail = /* @__PURE__ */ React$1.forwardRef((props, forwardRef$1) => {
 	const { color = "hotpink", attenuation, target: target$1 } = props;
 	const size = useThree((s) => s.size);
 	const scene = useThree((s) => s.scene);
-	const ref = React$1.useRef(null);
-	const [anchor, setAnchor] = React$1.useState(null);
+	const ref = React.useRef(null);
+	const [anchor, setAnchor] = React.useState(null);
 	const pointCount = length$1 * 10;
 	const points = useTrail(anchor, {
 		decay,
@@ -3240,12 +3240,12 @@ const Trail = /* @__PURE__ */ React$1.forwardRef((props, forwardRef$1) => {
 		stride,
 		interval
 	}, pointCount);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const t = target$1?.current || ref.current.children.find((o) => o instanceof Object3D);
 		if (t) setAnchor(t);
 	}, [points, target$1]);
-	const line = React$1.useMemo(() => new Line2(), []);
-	const geo = React$1.useMemo(() => {
+	const line = React.useMemo(() => new Line2(), []);
+	const geo = React.useMemo(() => {
 		const geometry$1 = new LineGeometry();
 		const initialPositions = new Float32Array(pointCount * 3).fill(0);
 		const initialColors = new Float32Array(pointCount * 3).fill(1);
@@ -3253,10 +3253,10 @@ const Trail = /* @__PURE__ */ React$1.forwardRef((props, forwardRef$1) => {
 		geometry$1.setColors(initialColors);
 		return geometry$1;
 	}, [pointCount]);
-	const [resolution] = React$1.useState(() => new Vector2$1(size.width, size.height));
-	const colorsRef = React$1.useRef(new Float32Array(pointCount * 3));
-	const baseColor = React$1.useMemo(() => new THREE.Color(color), [color]);
-	const mat = React$1.useMemo(() => new Line2NodeMaterial({
+	const [resolution] = React.useState(() => new Vector2$1(size.width, size.height));
+	const colorsRef = React.useRef(new Float32Array(pointCount * 3));
+	const baseColor = React.useMemo(() => new THREE.Color(color), [color]);
+	const mat = React.useMemo(() => new Line2NodeMaterial({
 		color: 16777215,
 		linewidth: width,
 		worldUnits: false,
@@ -3264,7 +3264,7 @@ const Trail = /* @__PURE__ */ React$1.forwardRef((props, forwardRef$1) => {
 		transparent: true,
 		alphaToCoverage: true
 	}), [width]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		resolution.set(size.width, size.height);
 		if ("resolution" in mat && mat.resolution?.set) mat.resolution.set(size.width, size.height);
 	}, [
@@ -3287,7 +3287,7 @@ const Trail = /* @__PURE__ */ React$1.forwardRef((props, forwardRef$1) => {
 		geo.setColors(colors$1);
 		line.computeLineDistances();
 	});
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		line.geometry = geo;
 		line.material = mat;
 	}, [
@@ -3435,21 +3435,21 @@ const isFunction$1 = (node) => typeof node === "function";
 * </OrthographicCamera>
 * ```
 */
-const OrthographicCamera = /* @__PURE__ */ React$1.forwardRef(({ envMap, resolution = 256, frames = Infinity, children, makeDefault, ...props }, ref) => {
+const OrthographicCamera = /* @__PURE__ */ React.forwardRef(({ envMap, resolution = 256, frames = Infinity, children, makeDefault, ...props }, ref) => {
 	const set = useThree(({ set: set$1 }) => set$1);
 	const camera = useThree(({ camera: camera$1 }) => camera$1);
 	const size = useThree(({ size: size$1 }) => size$1);
-	const cameraRef = React$1.useRef(null);
-	React$1.useImperativeHandle(ref, () => cameraRef.current, []);
-	const groupRef = React$1.useRef(null);
+	const cameraRef = React.useRef(null);
+	React.useImperativeHandle(ref, () => cameraRef.current, []);
+	const groupRef = React.useRef(null);
 	const fbo = useFBO(resolution);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (!props.manual) cameraRef.current.updateProjectionMatrix();
 	}, [size, props]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		cameraRef.current.updateProjectionMatrix();
 	});
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (makeDefault) {
 			const oldCam = camera;
 			set(() => ({ camera: cameraRef.current }));
@@ -3521,18 +3521,18 @@ const isFunction = (node) => typeof node === "function";
 * </PerspectiveCamera>
 * ```
 */
-const PerspectiveCamera = /* @__PURE__ */ React$1.forwardRef(({ envMap, resolution = 256, frames = Infinity, makeDefault, children, ...props }, ref) => {
+const PerspectiveCamera = /* @__PURE__ */ React.forwardRef(({ envMap, resolution = 256, frames = Infinity, makeDefault, children, ...props }, ref) => {
 	const set = useThree(({ set: set$1 }) => set$1);
 	const camera = useThree(({ camera: camera$1 }) => camera$1);
 	const size = useThree(({ size: size$1 }) => size$1);
-	const cameraRef = React$1.useRef(null);
-	React$1.useImperativeHandle(ref, () => cameraRef.current, []);
-	const groupRef = React$1.useRef(null);
+	const cameraRef = React.useRef(null);
+	React.useImperativeHandle(ref, () => cameraRef.current, []);
+	const groupRef = React.useRef(null);
 	const fbo = useFBO(resolution);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (!props.manual) cameraRef.current.aspect = size.width / size.height;
 	}, [size, props]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		cameraRef.current.updateProjectionMatrix();
 	});
 	let count = 0;
@@ -3551,7 +3551,7 @@ const PerspectiveCamera = /* @__PURE__ */ React$1.forwardRef(({ envMap, resoluti
 			count++;
 		}
 	});
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (makeDefault) {
 			const oldCam = camera;
 			set(() => ({ camera: cameraRef.current }));
@@ -3650,15 +3650,15 @@ const ArcballControls = /* @__PURE__ */ forwardRef(({ camera, makeDefault, regre
 * <DeviceOrientationControls />
 * ```
 */
-const DeviceOrientationControls = /* @__PURE__ */ React$1.forwardRef((props, ref) => {
+const DeviceOrientationControls = /* @__PURE__ */ React.forwardRef((props, ref) => {
 	const { camera, onChange, makeDefault, ...rest } = props;
 	const defaultCamera = useThree((state) => state.camera);
 	const invalidate = useThree((state) => state.invalidate);
 	const get = useThree((state) => state.get);
 	const set = useThree((state) => state.set);
 	const explCamera = camera || defaultCamera;
-	const controls = React$1.useMemo(() => new DeviceOrientationControls$1(explCamera), [explCamera]);
-	React$1.useEffect(() => {
+	const controls = React.useMemo(() => new DeviceOrientationControls$1(explCamera), [explCamera]);
+	React.useEffect(() => {
 		const callback = (e) => {
 			invalidate();
 			if (onChange) onChange(e);
@@ -3671,12 +3671,12 @@ const DeviceOrientationControls = /* @__PURE__ */ React$1.forwardRef((props, ref
 		invalidate
 	]);
 	useFrame(() => controls?.update(), -1);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const current = controls;
 		current?.connect();
 		return () => current?.dispose();
 	}, [controls]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (makeDefault) {
 			const old = get().controls;
 			set({ controls });
@@ -3720,10 +3720,10 @@ const dragPlane = /* @__PURE__ */ new Plane$1();
 * />
 * ```
 */
-const DragControls = React$1.forwardRef(({ autoTransform = true, matrix: matrix$1, axisLock, dragLimits, onHover, onDragStart, onDrag, onDragEnd, children, dragConfig, ...props }, fRef) => {
+const DragControls = React.forwardRef(({ autoTransform = true, matrix: matrix$1, axisLock, dragLimits, onHover, onDragStart, onDrag, onDragEnd, children, dragConfig, ...props }, fRef) => {
 	const defaultControls = useThree((state) => state.controls);
 	const { camera, size, raycaster, invalidate } = useThree();
-	const ref = React$1.useRef(null);
+	const ref = React.useRef(null);
 	const bind = (0, import_use_gesture_react_cjs.useGesture)({
 		onHover: ({ hovering }) => onHover && onHover(hovering ?? false),
 		onDragStart: ({ event }) => {
@@ -3787,8 +3787,8 @@ const DragControls = React$1.forwardRef(({ autoTransform = true, matrix: matrix$
 		threshold: 1,
 		...typeof dragConfig === "object" ? dragConfig : {}
 	} });
-	React$1.useImperativeHandle(fRef, () => ref.current, []);
-	React$1.useLayoutEffect(() => {
+	React.useImperativeHandle(fRef, () => ref.current, []);
+	React.useLayoutEffect(() => {
 		if (!matrix$1) return;
 		ref.current.matrix = matrix$1;
 	}, [matrix$1]);
@@ -3813,15 +3813,15 @@ const DragControls = React$1.forwardRef(({ autoTransform = true, matrix: matrix$
 * <FirstPersonControls />
 * ```
 */
-const FirstPersonControls = /* @__PURE__ */ React$1.forwardRef(({ domElement, makeDefault, ...props }, ref) => {
+const FirstPersonControls = /* @__PURE__ */ React.forwardRef(({ domElement, makeDefault, ...props }, ref) => {
 	const camera = useThree((state) => state.camera);
 	const gl = useThree((state) => state.gl);
 	const events = useThree((state) => state.events);
 	const get = useThree((state) => state.get);
 	const set = useThree((state) => state.set);
 	const explDomElement = domElement || events.connected || gl.domElement;
-	const [controls] = React$1.useState(() => new FirstPersonControls$1(camera, explDomElement));
-	React$1.useEffect(() => {
+	const [controls] = React.useState(() => new FirstPersonControls$1(camera, explDomElement));
+	React.useEffect(() => {
 		if (makeDefault) {
 			const old = get().controls;
 			set({ controls });
@@ -3849,7 +3849,7 @@ const FirstPersonControls = /* @__PURE__ */ React$1.forwardRef(({ domElement, ma
 * <FlyControls movementSpeed={2} rollSpeed={Math.PI / 6} />
 * ```
 */
-const FlyControls = /* @__PURE__ */ React$1.forwardRef(({ domElement, ...props }, fref) => {
+const FlyControls = /* @__PURE__ */ React.forwardRef(({ domElement, ...props }, fref) => {
 	const { onChange, makeDefault, ...rest } = props;
 	const invalidate = useThree((state) => state.invalidate);
 	const camera = useThree((state) => state.camera);
@@ -3858,8 +3858,8 @@ const FlyControls = /* @__PURE__ */ React$1.forwardRef(({ domElement, ...props }
 	const get = useThree((state) => state.get);
 	const set = useThree((state) => state.set);
 	const explDomElement = domElement || events.connected || gl.domElement;
-	const controls = React$1.useMemo(() => new FlyControls$1(camera), [camera]);
-	React$1.useEffect(() => {
+	const controls = React.useMemo(() => new FlyControls$1(camera), [camera]);
+	React.useEffect(() => {
 		controls.connect(explDomElement);
 		return () => void controls.dispose();
 	}, [
@@ -3867,7 +3867,7 @@ const FlyControls = /* @__PURE__ */ React$1.forwardRef(({ domElement, ...props }
 		controls,
 		invalidate
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const callback = (e) => {
 			invalidate();
 			if (onChange) onChange(e);
@@ -3875,7 +3875,7 @@ const FlyControls = /* @__PURE__ */ React$1.forwardRef(({ domElement, ...props }
 		controls.addEventListener?.("change", callback);
 		return () => controls.removeEventListener?.("change", callback);
 	}, [onChange, invalidate]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (makeDefault) {
 			const old = get().controls;
 			set({ controls });
@@ -3893,7 +3893,7 @@ const FlyControls = /* @__PURE__ */ React$1.forwardRef(({ domElement, ...props }
 //#endregion
 //#region src/core/Controls/KeyboardControls/KeyboardControls.tsx
-const context$9 = /* @__PURE__ */ React$1.createContext(null);
+const context$9 = /* @__PURE__ */ React.createContext(null);
 /**
 * A rudimentary keyboard controller which distributes your defined data-model
 * to the `useKeyboardControls` hook. It's a rather simple way to get started with keyboard input.
@@ -3934,19 +3934,19 @@ const context$9 = /* @__PURE__ */ React$1.createContext(null);
 */
 function KeyboardControls({ map, children, onChange, domElement }) {
 	const key = map.map((item) => item.name + item.keys).join("-");
-	const useControls = React$1.useMemo(() => {
+	const useControls = React.useMemo(() => {
 		return create$1(subscribeWithSelector(() => map.reduce((prev, cur) => ({
 			...prev,
 			[cur.name]: false
 		}), {})));
 	}, [key]);
-	const api = React$1.useMemo(() => [
+	const api = React.useMemo(() => [
 		useControls.subscribe,
 		useControls.getState,
 		useControls
 	], [key]);
 	const set = useControls.setState;
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const keyMap = map.map(({ name, keys, up }) => ({
 			keys,
 			up,
@@ -3990,7 +3990,7 @@ function KeyboardControls({ map, children, onChange, domElement }) {
 	});
 }
 function useKeyboardControls(sel) {
-	const [sub$1, get, store] = React$1.useContext(context$9);
+	const [sub$1, get, store] = React.useContext(context$9);
 	if (sel) return store(sel);
 	else return [sub$1, get];
 }
@@ -4006,7 +4006,7 @@ function useKeyboardControls(sel) {
 * <MapControls enableDamping dampingFactor={0.05} />
 * ```
 */
-const MapControls = /* @__PURE__ */ React$1.forwardRef((props = { enableDamping: true }, ref) => {
+const MapControls = /* @__PURE__ */ React.forwardRef((props = { enableDamping: true }, ref) => {
 	const { domElement, camera, makeDefault, onChange, onStart, onEnd, ...rest } = props;
 	const invalidate = useThree((state) => state.invalidate);
 	const defaultCamera = useThree((state) => state.camera);
@@ -4016,8 +4016,8 @@ const MapControls = /* @__PURE__ */ React$1.forwardRef((props = { enableDamping:
 	const get = useThree((state) => state.get);
 	const explDomElement = domElement || events.connected || gl.domElement;
 	const explCamera = camera || defaultCamera;
-	const controls = React$1.useMemo(() => new MapControls$1(explCamera), [explCamera]);
-	React$1.useEffect(() => {
+	const controls = React.useMemo(() => new MapControls$1(explCamera), [explCamera]);
+	React.useEffect(() => {
 		controls.connect(explDomElement);
 		const callback = (e) => {
 			invalidate();
@@ -4040,7 +4040,7 @@ const MapControls = /* @__PURE__ */ React$1.forwardRef((props = { enableDamping:
 		invalidate,
 		explDomElement
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (makeDefault) {
 			const old = get().controls;
 			set({ controls });
@@ -4060,19 +4060,19 @@ const MapControls = /* @__PURE__ */ React$1.forwardRef((props = { enableDamping:
 //#region src/core/Controls/MotionPathControls/MotionPathControls.tsx
 var import_maath_cjs = require_maath_cjs();
 const isObject3DRef = (ref) => ref?.current instanceof Object3D$1;
-const MotionContext = /* @__PURE__ */ React$1.createContext(null);
+const MotionContext = /* @__PURE__ */ React.createContext(null);
 function useMotion() {
-	const context$11 = React$1.useContext(MotionContext);
+	const context$11 = React.useContext(MotionContext);
 	if (!context$11) throw new Error("useMotion hook must be used in a MotionPathControls component.");
 	return context$11;
 }
 function Debug({ points = 50, color = "black" }) {
 	const { path } = useMotion();
-	const [dots, setDots] = React$1.useState([]);
-	const material = React$1.useMemo(() => new MeshBasicMaterial({ color }), [color]);
-	const geometry$1 = React$1.useMemo(() => new SphereGeometry(.025, 16, 16), []);
-	const last = React$1.useRef([]);
-	React$1.useEffect(() => {
+	const [dots, setDots] = React.useState([]);
+	const material = React.useMemo(() => new MeshBasicMaterial({ color }), [color]);
+	const geometry$1 = React.useMemo(() => new SphereGeometry(.025, 16, 16), []);
+	const last = React.useRef([]);
+	React.useEffect(() => {
 		if (path.curves !== last.current) {
 			setDots(path.getPoints(points));
 			last.current = path.curves;
@@ -4115,12 +4115,12 @@ function Debug({ points = 50, color = "black" }) {
 * }
 * ```
 */
-const MotionPathControls = /* @__PURE__ */ React$1.forwardRef(({ children, curves = [], debug = false, debugColor = "black", object, focus, loop = true, offset = void 0, smooth = false, eps: eps$1 = 1e-5, damping = .1, focusDamping = .1, maxSpeed = Infinity, ...props }, fref) => {
+const MotionPathControls = /* @__PURE__ */ React.forwardRef(({ children, curves = [], debug = false, debugColor = "black", object, focus, loop = true, offset = void 0, smooth = false, eps: eps$1 = 1e-5, damping = .1, focusDamping = .1, maxSpeed = Infinity, ...props }, fref) => {
 	const { camera } = useThree();
-	const ref = React$1.useRef(null);
-	const pos = React$1.useRef(offset ?? 0);
-	const path = React$1.useMemo(() => new CurvePath(), []);
-	const state = React$1.useMemo(() => ({
+	const ref = React.useRef(null);
+	const pos = React.useRef(offset ?? 0);
+	const path = React.useMemo(() => new CurvePath(), []);
+	const state = React.useMemo(() => ({
 		focus,
 		object: object?.current instanceof Object3D$1 ? object : { current: camera },
 		path,
@@ -4131,7 +4131,7 @@ const MotionPathControls = /* @__PURE__ */ React$1.forwardRef(({ children, curve
 		next: new Vector3$2()
 	}), [focus, object]);
 	const instanceRef = useInstanceHandle(ref);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		const instance = instanceRef.current;
 		path.curves = [];
 		const _curves = curves.length > 0 ? curves : instance.children.map((instance$1) => instance$1.object);
@@ -4142,11 +4142,11 @@ const MotionPathControls = /* @__PURE__ */ React$1.forwardRef(({ children, curve
 		}
 		path.updateArcLengths();
 	});
-	React$1.useImperativeHandle(fref, () => Object.assign(ref.current, { motion: state }), [state]);
-	React$1.useLayoutEffect(() => {
+	React.useImperativeHandle(fref, () => Object.assign(ref.current, { motion: state }), [state]);
+	React.useLayoutEffect(() => {
 		pos.current = import_maath_cjs.misc.repeat(pos.current, 1);
 	}, [offset]);
-	const vec = React$1.useMemo(() => new Vector3$2(), []);
+	const vec = React.useMemo(() => new Vector3$2(), []);
 	useFrame((_state, delta) => {
 		const lastOffset = state.offset;
 		import_maath_cjs.easing.damp(pos, "current", offset !== void 0 ? offset : state.current, damping, delta, maxSpeed, void 0, eps$1);
@@ -4186,7 +4186,7 @@ const MotionPathControls = /* @__PURE__ */ React$1.forwardRef(({ children, curve
 * <OrbitControls makeDefault enableDamping dampingFactor={0.05} />
 * ```
 */
-const OrbitControls = /* @__PURE__ */ React$1.forwardRef(({ makeDefault, camera, regress, domElement, enableDamping = true, keyEvents = false, onChange, onStart, onEnd, ...restProps }, ref) => {
+const OrbitControls = /* @__PURE__ */ React.forwardRef(({ makeDefault, camera, regress, domElement, enableDamping = true, keyEvents = false, onChange, onStart, onEnd, ...restProps }, ref) => {
 	const invalidate = useThree((state) => state.invalidate);
 	const defaultCamera = useThree((state) => state.camera);
 	const gl = useThree((state) => state.gl);
@@ -4197,11 +4197,11 @@ const OrbitControls = /* @__PURE__ */ React$1.forwardRef(({ makeDefault, camera,
 	const performance$1 = useThree((state) => state.performance);
 	const explCamera = camera || defaultCamera;
 	const explDomElement = domElement || events.connected || gl.domElement;
-	const controls = React$1.useMemo(() => new OrbitControls$1(explCamera), [explCamera]);
+	const controls = React.useMemo(() => new OrbitControls$1(explCamera), [explCamera]);
 	useFrame(() => {
 		if (controls.enabled) controls.update();
 	}, -1);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (keyEvents) controls.connect(keyEvents === true ? explDomElement : keyEvents);
 		controls.connect(explDomElement);
 		return () => void controls.dispose();
@@ -4212,7 +4212,7 @@ const OrbitControls = /* @__PURE__ */ React$1.forwardRef(({ makeDefault, camera,
 		controls,
 		invalidate
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const callback = (e) => {
 			invalidate();
 			if (regress) performance$1.regress();
@@ -4240,7 +4240,7 @@ const OrbitControls = /* @__PURE__ */ React$1.forwardRef(({ makeDefault, camera,
 		invalidate,
 		setEvents
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (makeDefault) {
 			const old = get().controls;
 			set({ controls });
@@ -4266,7 +4266,7 @@ const OrbitControls = /* @__PURE__ */ React$1.forwardRef(({ makeDefault, camera,
 * <PointerLockControls selector="#button" />
 * ```
 */
-const PointerLockControls = /* @__PURE__ */ React$1.forwardRef(({ domElement, selector, onChange, onLock, onUnlock, enabled = true, makeDefault, ...props }, ref) => {
+const PointerLockControls = /* @__PURE__ */ React.forwardRef(({ domElement, selector, onChange, onLock, onUnlock, enabled = true, makeDefault, ...props }, ref) => {
 	const { camera, ...rest } = props;
 	const setEvents = useThree((state) => state.setEvents);
 	const gl = useThree((state) => state.gl);
@@ -4277,8 +4277,8 @@ const PointerLockControls = /* @__PURE__ */ React$1.forwardRef(({ domElement, se
 	const set = useThree((state) => state.set);
 	const explCamera = camera || defaultCamera;
 	const explDomElement = domElement || events.connected || gl.domElement;
-	const controls = React$1.useMemo(() => new PointerLockControls$1(explCamera), [explCamera]);
-	React$1.useEffect(() => {
+	const controls = React.useMemo(() => new PointerLockControls$1(explCamera), [explCamera]);
+	React.useEffect(() => {
 		if (enabled) {
 			controls.connect(explDomElement);
 			const oldComputeOffsets = get().events.compute;
@@ -4294,7 +4294,7 @@ const PointerLockControls = /* @__PURE__ */ React$1.forwardRef(({ domElement, se
 			};
 		}
 	}, [enabled, controls]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const callback = (e) => {
 			invalidate();
 			if (onChange) onChange(e);
@@ -4319,7 +4319,7 @@ const PointerLockControls = /* @__PURE__ */ React$1.forwardRef(({ domElement, se
 		controls,
 		invalidate
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (makeDefault) {
 			const old = get().controls;
 			set({ controls });
@@ -4367,17 +4367,17 @@ function PresentationControls({ enabled = true, snap, global, domElement, cursor
 	const gl = useThree((state) => state.gl);
 	const explDomElement = domElement || events.connected || gl.domElement;
 	const { size } = useThree();
-	const rPolar = React$1.useMemo(() => [rotation$2[0] + polar[0], rotation$2[0] + polar[1]], [
+	const rPolar = React.useMemo(() => [rotation$2[0] + polar[0], rotation$2[0] + polar[1]], [
 		rotation$2[0],
 		polar[0],
 		polar[1]
 	]);
-	const rAzimuth = React$1.useMemo(() => [rotation$2[1] + azimuth[0], rotation$2[1] + azimuth[1]], [
+	const rAzimuth = React.useMemo(() => [rotation$2[1] + azimuth[0], rotation$2[1] + azimuth[1]], [
 		rotation$2[1],
 		azimuth[0],
 		azimuth[1]
 	]);
-	const rInitial = React$1.useMemo(() => [
+	const rInitial = React.useMemo(() => [
 		MathUtils.clamp(rotation$2[0], ...rPolar),
 		MathUtils.clamp(rotation$2[1], ...rAzimuth),
 		rotation$2[2]
@@ -4388,7 +4388,7 @@ function PresentationControls({ enabled = true, snap, global, domElement, cursor
 		rPolar,
 		rAzimuth
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (global && cursor && enabled) {
 			explDomElement.style.cursor = "grab";
 			gl.domElement.style.cursor = "";
@@ -4403,12 +4403,12 @@ function PresentationControls({ enabled = true, snap, global, domElement, cursor
 		explDomElement,
 		enabled
 	]);
-	const [animation] = React$1.useState({
+	const [animation] = React.useState({
 		scale: 1,
 		rotation: rInitial,
 		damping
 	});
-	const ref = React$1.useRef(null);
+	const ref = React.useRef(null);
 	useFrame((state, delta) => {
 		import_maath_cjs.easing.damp3(ref.current.scale, animation.scale, animation.damping, delta);
 		import_maath_cjs.easing.dampE(ref.current.rotation, animation.rotation, animation.damping, delta);
@@ -4440,12 +4440,12 @@ function PresentationControls({ enabled = true, snap, global, domElement, cursor
 //#endregion
 //#region src/core/Controls/ScrollControls/ScrollControls.tsx
-const context$8 = /* @__PURE__ */ React$1.createContext(null);
+const context$8 = /* @__PURE__ */ React.createContext(null);
 /**
 * Hook to access scroll state: offset (0-1), delta, range(), curve(), visible().
 */
 function useScroll() {
-	return React$1.useContext(context$8);
+	return React.useContext(context$8);
 }
 /**
 * Scroll controls create an HTML scroll container in front of the canvas.
@@ -4472,12 +4472,12 @@ function useScroll() {
 */
 function ScrollControls({ eps: eps$1 = 1e-5, enabled = true, infinite, horizontal, pages = 1, distance: distance$1 = 1, damping = .25, maxSpeed = Infinity, prepend = false, style = {}, children }) {
 	const { get, setEvents, gl, size, invalidate, events } = useThree();
-	const [el] = React$1.useState(() => document.createElement("div"));
-	const [fill] = React$1.useState(() => document.createElement("div"));
-	const [fixed] = React$1.useState(() => document.createElement("div"));
+	const [el] = React.useState(() => document.createElement("div"));
+	const [fill] = React.useState(() => document.createElement("div"));
+	const [fixed] = React.useState(() => document.createElement("div"));
 	const target$1 = gl.domElement.parentNode;
-	const scroll = React$1.useRef(0);
-	const state = React$1.useMemo(() => {
+	const scroll = React.useRef(0);
+	const state = React.useMemo(() => {
 		return {
 			el,
 			eps: eps$1,
@@ -4509,7 +4509,7 @@ function ScrollControls({ eps: eps$1 = 1e-5, enabled = true, infinite, horizonta
 		horizontal,
 		pages
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		el.style.position = "absolute";
 		el.style.width = "100%";
 		el.style.height = "100%";
@@ -4556,7 +4556,7 @@ function ScrollControls({ eps: eps$1 = 1e-5, enabled = true, infinite, horizonta
 		fixed,
 		target$1
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (events.connected === el) {
 			const containerLength = size[horizontal ? "width" : "height"];
 			const scrollLength = el[horizontal ? "scrollWidth" : "scrollHeight"];
@@ -4617,9 +4617,9 @@ function ScrollControls({ eps: eps$1 = 1e-5, enabled = true, infinite, horizonta
 		children
 	});
 }
-const ScrollCanvas = /* @__PURE__ */ React$1.forwardRef(({ children }, ref) => {
-	const group = React$1.useRef(null);
-	React$1.useImperativeHandle(ref, () => group.current, []);
+const ScrollCanvas = /* @__PURE__ */ React.forwardRef(({ children }, ref) => {
+	const group = React.useRef(null);
+	React.useImperativeHandle(ref, () => group.current, []);
 	const state = useScroll();
 	const { width, height } = useThree((state$1) => state$1.viewport);
 	useFrame(() => {
@@ -4631,13 +4631,13 @@ const ScrollCanvas = /* @__PURE__ */ React$1.forwardRef(({ children }, ref) => {
 		children
 	});
 });
-const ScrollHtml = React$1.forwardRef(({ children, style, ...props }, ref) => {
+const ScrollHtml = React.forwardRef(({ children, style, ...props }, ref) => {
 	const state = useScroll();
-	const group = React$1.useRef(null);
-	React$1.useImperativeHandle(ref, () => group.current, []);
+	const group = React.useRef(null);
+	React.useImperativeHandle(ref, () => group.current, []);
 	const { width, height } = useThree((state$1) => state$1.size);
-	const fiberState = React$1.useContext(context);
-	const root = React$1.useMemo(() => ReactDOM.createRoot(state.fixed), [state.fixed]);
+	const fiberState = React.useContext(context);
+	const root = React.useMemo(() => ReactDOM.createRoot(state.fixed), [state.fixed]);
 	useFrame(() => {
 		if (state.delta > state.eps) group.current.style.transform = `translate3d(${state.horizontal ? -width * (state.pages - 1) * state.offset : 0}px,${state.horizontal ? 0 : height * (state.pages - 1) * -state.offset}px,0)`;
 	});
@@ -4661,7 +4661,7 @@ const ScrollHtml = React$1.forwardRef(({ children, style, ...props }, ref) => {
 	}));
 	return null;
 });
-const Scroll = /* @__PURE__ */ React$1.forwardRef(({ html, ...props }, ref) => {
+const Scroll = /* @__PURE__ */ React.forwardRef(({ html, ...props }, ref) => {
 	return /* @__PURE__ */ jsx(html ? ScrollHtml : ScrollCanvas, {
 		ref,
 		...props
@@ -4679,15 +4679,15 @@ const Scroll = /* @__PURE__ */ React$1.forwardRef(({ html, ...props }, ref) => {
 * <TrackballControls />
 * ```
 */
-const TrackballControls = /* @__PURE__ */ React$1.forwardRef(({ makeDefault, camera, domElement, regress, onChange, onStart, onEnd, ...restProps }, ref) => {
+const TrackballControls = /* @__PURE__ */ React.forwardRef(({ makeDefault, camera, domElement, regress, onChange, onStart, onEnd, ...restProps }, ref) => {
 	const { invalidate, camera: defaultCamera, gl, events, set, get, performance: performance$1, viewport } = useThree();
 	const explCamera = camera || defaultCamera;
 	const explDomElement = domElement || events.connected || gl.domElement;
-	const controls = React$1.useMemo(() => new TrackballControls$1(explCamera), [explCamera]);
+	const controls = React.useMemo(() => new TrackballControls$1(explCamera), [explCamera]);
 	useFrame(() => {
 		if (controls.enabled) controls.update();
 	}, -1);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		controls.connect(explDomElement);
 		return () => void controls.dispose();
 	}, [
@@ -4696,7 +4696,7 @@ const TrackballControls = /* @__PURE__ */ React$1.forwardRef(({ makeDefault, cam
 		controls,
 		invalidate
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const callback = (e) => {
 			invalidate();
 			if (regress) performance$1.regress();
@@ -4717,10 +4717,10 @@ const TrackballControls = /* @__PURE__ */ React$1.forwardRef(({ makeDefault, cam
 		controls,
 		invalidate
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		controls.handleResize();
 	}, [viewport]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (makeDefault) {
 			const old = get().controls;
 			set({ controls });
@@ -4755,25 +4755,25 @@ const TrackballControls = /* @__PURE__ */ React$1.forwardRef(({ makeDefault, cam
 * <CameraShake ref={shakeRef} decay decayRate={0.65} intensity={0} />
 * ```
 */
-const CameraShake = /* @__PURE__ */ React$1.forwardRef(({ intensity = 1, decay, decayRate = .65, maxYaw = .1, maxPitch = .1, maxRoll = .1, yawFrequency = .1, pitchFrequency = .1, rollFrequency = .1 }, ref) => {
+const CameraShake = /* @__PURE__ */ React.forwardRef(({ intensity = 1, decay, decayRate = .65, maxYaw = .1, maxPitch = .1, maxRoll = .1, yawFrequency = .1, pitchFrequency = .1, rollFrequency = .1 }, ref) => {
 	const camera = useThree((state) => state.camera);
 	const defaultControls = useThree((state) => state.controls);
-	const intensityRef = React$1.useRef(intensity);
-	const initialRotation = React$1.useRef(camera.rotation.clone());
-	const [yawNoise] = React$1.useState(() => new SimplexNoise());
-	const [pitchNoise] = React$1.useState(() => new SimplexNoise());
-	const [rollNoise] = React$1.useState(() => new SimplexNoise());
+	const intensityRef = React.useRef(intensity);
+	const initialRotation = React.useRef(camera.rotation.clone());
+	const [yawNoise] = React.useState(() => new SimplexNoise());
+	const [pitchNoise] = React.useState(() => new SimplexNoise());
+	const [rollNoise] = React.useState(() => new SimplexNoise());
 	const constrainIntensity = () => {
 		if (intensityRef.current < 0 || intensityRef.current > 1) intensityRef.current = intensityRef.current < 0 ? 0 : 1;
 	};
-	React$1.useImperativeHandle(ref, () => ({
+	React.useImperativeHandle(ref, () => ({
 		getIntensity: () => intensityRef.current,
 		setIntensity: (val) => {
 			intensityRef.current = val;
 			constrainIntensity();
 		}
 	}), []);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (defaultControls) {
 			const callback = () => void (initialRotation.current = camera.rotation.clone());
 			defaultControls.addEventListener("change", callback);
@@ -4862,7 +4862,7 @@ const rotation$1 = /* @__PURE__ */ new Quaternion();
 const cpos = /* @__PURE__ */ new Vector3$2();
 const cquat = /* @__PURE__ */ new Quaternion();
 const scale$1 = /* @__PURE__ */ new Vector3$2();
-const context$7 = /* @__PURE__ */ React$1.createContext(null);
+const context$7 = /* @__PURE__ */ React.createContext(null);
 /**
 * Provider component that groups all Cloud children into a single instanced draw call.
 * Wrap your Cloud components with this for better performance.
@@ -4875,18 +4875,18 @@ const context$7 = /* @__PURE__ */ React$1.createContext(null);
 * </Clouds>
 * ```
 */
-const Clouds = /* @__PURE__ */ React$1.forwardRef(({ children, material = MeshLambertMaterial, materialFactory, texture: texture$1 = CLOUD_URL, range, limit = 200, frustumCulled, ...props }, fref) => {
-	const instance = React$1.useRef(null);
-	const clouds = React$1.useRef([]);
-	const opacities = React$1.useMemo(() => new Float32Array(Array.from({ length: limit }, () => 1)), [limit]);
-	const colors$1 = React$1.useMemo(() => new Float32Array(Array.from({ length: limit }, () => [
+const Clouds = /* @__PURE__ */ React.forwardRef(({ children, material = MeshLambertMaterial, materialFactory, texture: texture$1 = CLOUD_URL, range, limit = 200, frustumCulled, ...props }, fref) => {
+	const instance = React.useRef(null);
+	const clouds = React.useRef([]);
+	const opacities = React.useMemo(() => new Float32Array(Array.from({ length: limit }, () => 1)), [limit]);
+	const colors$1 = React.useMemo(() => new Float32Array(Array.from({ length: limit }, () => [
 		1,
 		1,
 		1
 	]).flat()), [limit]);
 	const cloudTexture = useTexture(texture$1);
 	const MaterialFn = materialFactory ?? FakeCloudMaterial;
-	const cloudMaterial = React$1.useMemo(() => {
+	const cloudMaterial = React.useMemo(() => {
 		const cloudMat = MaterialFn(material);
 		cloudMat.map = cloudTexture;
 		cloudMat.transparent = true;
@@ -4927,7 +4927,7 @@ const Clouds = /* @__PURE__ */ React$1.forwardRef(({ children, material = MeshLa
 		instance.current.instanceMatrix.needsUpdate = true;
 		if (instance.current.instanceColor) instance.current.instanceColor.needsUpdate = true;
 	});
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		const count = Math.min(limit, range !== void 0 ? range : limit, clouds.current.length);
 		instance.current.count = count;
 		setUpdateRange(instance.current.instanceMatrix, {
@@ -4978,7 +4978,7 @@ const Clouds = /* @__PURE__ */ React$1.forwardRef(({ children, material = MeshLa
 		})
 	});
 });
-const CloudInstance = /* @__PURE__ */ React$1.forwardRef(({ opacity = 1, speed = 0, bounds = [
+const CloudInstance = /* @__PURE__ */ React.forwardRef(({ opacity = 1, speed = 0, bounds = [
 	5,
 	1,
 	1
@@ -4987,10 +4987,10 @@ const CloudInstance = /* @__PURE__ */ React$1.forwardRef(({ opacity = 1, speed =
 		const x = Math.sin(seed++) * 1e4;
 		return x - Math.floor(x);
 	}
-	const parent = React$1.useContext(context$7);
-	const ref = React$1.useRef(null);
-	const uuid = React$1.useId();
-	const clouds = React$1.useMemo(() => {
+	const parent = React.useContext(context$7);
+	const ref = React.useRef(null);
+	const uuid = React.useId();
+	const clouds = React.useMemo(() => {
 		return [...new Array(segments)].map((_, index) => ({
 			segments,
 			bounds: new Vector3$2(1, 1, 1),
@@ -5004,7 +5004,7 @@ const CloudInstance = /* @__PURE__ */ React$1.forwardRef(({ opacity = 1, speed =
 			rotation: index * (Math.PI / segments)
 		}));
 	}, [segments, uuid]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		clouds.forEach((cloud, index) => {
 			applyProps(cloud, {
 				volume,
@@ -5045,14 +5045,14 @@ const CloudInstance = /* @__PURE__ */ React$1.forwardRef(({ opacity = 1, speed =
 		segments,
 		speed
 	]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		const temp = clouds;
 		parent.current = [...parent.current, ...temp];
 		return () => {
 			parent.current = parent.current.filter((item) => item.uuid !== uuid);
 		};
 	}, [clouds]);
-	React$1.useImperativeHandle(fref, () => ref.current, []);
+	React.useImperativeHandle(fref, () => ref.current, []);
 	return /* @__PURE__ */ jsx("group", {
 		ref,
 		...props
@@ -5069,8 +5069,8 @@ const CloudInstance = /* @__PURE__ */ React$1.forwardRef(({ opacity = 1, speed =
 * <Cloud segments={40} bounds={[10, 2, 2]} volume={10} color="white" />
 * ```
 */
-const Cloud = /* @__PURE__ */ React$1.forwardRef((props, fref) => {
-	if (React$1.useContext(context$7)) return /* @__PURE__ */ jsx(CloudInstance, {
+const Cloud = /* @__PURE__ */ React.forwardRef((props, fref) => {
+	if (React.useContext(context$7)) return /* @__PURE__ */ jsx(CloudInstance, {
 		ref: fref,
 		...props
 	});
@@ -5097,9 +5097,9 @@ const Cloud = /* @__PURE__ */ React$1.forwardRef((props, fref) => {
 * />
 * ```
 */
-const CatmullRomLine = /* @__PURE__ */ React$1.forwardRef(function CatmullRomLine$1({ points, closed = false, curveType = "centripetal", tension = .5, segments = 20, vertexColors, LineComponent, ...rest }, ref) {
+const CatmullRomLine = /* @__PURE__ */ React.forwardRef(function CatmullRomLine$1({ points, closed = false, curveType = "centripetal", tension = .5, segments = 20, vertexColors, LineComponent, ...rest }, ref) {
 	const LineComp = LineComponent ?? Line;
-	const curve = React$1.useMemo(() => {
+	const curve = React.useMemo(() => {
 		return new CatmullRomCurve3(points.map((pt) => pt instanceof Vector3$2 ? pt : new Vector3$2(...pt)), closed, curveType, tension);
 	}, [
 		points,
@@ -5109,8 +5109,8 @@ const CatmullRomLine = /* @__PURE__ */ React$1.forwardRef(function CatmullRomLin
 	]);
 	return /* @__PURE__ */ jsx(LineComp, {
 		ref,
-		points: React$1.useMemo(() => curve.getPoints(segments), [curve, segments]),
-		vertexColors: React$1.useMemo(() => {
+		points: React.useMemo(() => curve.getPoints(segments), [curve, segments]),
+		vertexColors: React.useMemo(() => {
 			if (!vertexColors || vertexColors.length < 2) return void 0;
 			if (vertexColors.length === segments + 1) return vertexColors;
 			const mappedColors = vertexColors.map((color) => color instanceof Color$2 ? color : new Color$2(...color));
@@ -5145,10 +5145,10 @@ const CatmullRomLine = /* @__PURE__ */ React$1.forwardRef(function CatmullRomLin
 * />
 * ```
 */
-const CubicBezierLine = /* @__PURE__ */ React$1.forwardRef(function CubicBezierLine$1({ start, end, midA, midB, segments = 20, LineComponent, ...rest }, ref) {
+const CubicBezierLine = /* @__PURE__ */ React.forwardRef(function CubicBezierLine$1({ start, end, midA, midB, segments = 20, LineComponent, ...rest }, ref) {
 	return /* @__PURE__ */ jsx(LineComponent ?? Line, {
 		ref,
-		points: React$1.useMemo(() => {
+		points: React.useMemo(() => {
 			const startV = start instanceof Vector3$2 ? start : new Vector3$2(...start);
 			const endV = end instanceof Vector3$2 ? end : new Vector3$2(...end);
 			return new CubicBezierCurve3(startV, midA instanceof Vector3$2 ? midA : new Vector3$2(...midA), midB instanceof Vector3$2 ? midB : new Vector3$2(...midB), endV).getPoints(segments);
@@ -5197,18 +5197,18 @@ const CubicBezierLine = /* @__PURE__ */ React$1.forwardRef(function CubicBezierL
 * </CurveModifier>
 * ```
 */
-const CurveModifier = /* @__PURE__ */ React$1.forwardRef(({ children, curve }, ref) => {
-	const [scene] = React$1.useState(() => new Scene());
-	const [obj, set] = React$1.useState();
-	const modifier = React$1.useRef(null);
-	React$1.useLayoutEffect(() => {
+const CurveModifier = /* @__PURE__ */ React.forwardRef(({ children, curve }, ref) => {
+	const [scene] = React.useState(() => new Scene());
+	const [obj, set] = React.useState();
+	const modifier = React.useRef(null);
+	React.useLayoutEffect(() => {
 		modifier.current = new Flow(scene.children[0]);
 		set(modifier.current.object3D);
 	}, [children]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (curve) modifier.current?.updateCurve(0, curve);
 	}, [curve]);
-	React$1.useImperativeHandle(ref, () => modifier.current);
+	React.useImperativeHandle(ref, () => modifier.current);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [createPortal(children, scene), obj && /* @__PURE__ */ jsx("primitive", { object: obj })] });
 });
@@ -5269,16 +5269,16 @@ function vecToArray(vec = [
 * </Decal>
 * ```
 */
-const Decal = /* @__PURE__ */ React$1.forwardRef(function Decal$1({ debug, depthTest = false, polygonOffsetFactor = -10, map, mesh, children, position: position$1, rotation: rotation$2, scale: scale$2, ...props }, forwardRef$1) {
-	const ref = React$1.useRef(null);
-	React$1.useImperativeHandle(forwardRef$1, () => ref.current);
-	const helper = React$1.useRef(null);
-	const state = React$1.useRef({
+const Decal = /* @__PURE__ */ React.forwardRef(function Decal$1({ debug, depthTest = false, polygonOffsetFactor = -10, map, mesh, children, position: position$1, rotation: rotation$2, scale: scale$2, ...props }, forwardRef$1) {
+	const ref = React.useRef(null);
+	React.useImperativeHandle(forwardRef$1, () => ref.current);
+	const helper = React.useRef(null);
+	const state = React.useRef({
 		position: new Vector3$2(),
 		rotation: new Euler$1(),
 		scale: new Vector3$2(1, 1, 1)
 	});
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		const parent = mesh?.current || ref.current.parent;
 		const target$1 = ref.current;
 		if (!(parent instanceof Mesh)) throw new Error("Decal must have a Mesh as parent or specify its \"mesh\" prop");
@@ -5335,7 +5335,7 @@ const Decal = /* @__PURE__ */ React$1.forwardRef(function Decal$1({ debug, depth
 		...vecToArray(scale$2),
 		...vecToArray(rotation$2)
 	]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (helper.current) helper.current.traverse((child) => child.raycast = () => null);
 	}, [debug]);
 	return /* @__PURE__ */ jsxs("mesh", {
@@ -5372,10 +5372,10 @@ const Decal = /* @__PURE__ */ React$1.forwardRef(function Decal$1({ debug, depth
 * </Detailed>
 * ```
 */
-const Detailed = /* @__PURE__ */ React$1.forwardRef(({ children, hysteresis = 0, distances, ...props }, ref) => {
-	const lodRef = React$1.useRef(null);
-	React$1.useImperativeHandle(ref, () => lodRef.current, []);
-	React$1.useLayoutEffect(() => {
+const Detailed = /* @__PURE__ */ React.forwardRef(({ children, hysteresis = 0, distances, ...props }, ref) => {
+	const lodRef = React.useRef(null);
+	React.useImperativeHandle(ref, () => lodRef.current, []);
+	React.useLayoutEffect(() => {
 		const { current: lod } = lodRef;
 		lod.levels.length = 0;
 		lod.children.forEach((object, index) => lod.levels.push({
@@ -5445,22 +5445,22 @@ var PositionPoint = class extends Group {
 	}
 };
 let i, positionRef;
-const context$6 = /* @__PURE__ */ React$1.createContext(null);
+const context$6 = /* @__PURE__ */ React.createContext(null);
 const parentMatrix$1 = /* @__PURE__ */ new Matrix4();
 const position = /* @__PURE__ */ new Vector3$2();
 /**
 * Instance implementation, relies on react + context to update the attributes based on the children of this component
 */
-const PointsInstances = /* @__PURE__ */ React$1.forwardRef(({ children, range, limit = 1e3, ...props }, ref) => {
-	const parentRef = React$1.useRef(null);
-	React$1.useImperativeHandle(ref, () => parentRef.current, []);
-	const [refs, setRefs] = React$1.useState([]);
-	const [[positions, colors$1, sizes]] = React$1.useState(() => [
+const PointsInstances = /* @__PURE__ */ React.forwardRef(({ children, range, limit = 1e3, ...props }, ref) => {
+	const parentRef = React.useRef(null);
+	React.useImperativeHandle(ref, () => parentRef.current, []);
+	const [refs, setRefs] = React.useState([]);
+	const [[positions, colors$1, sizes]] = React.useState(() => [
 		new Float32Array(limit * 3),
 		Float32Array.from({ length: limit * 3 }, () => 1),
 		Float32Array.from({ length: limit }, () => 1)
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		parentRef.current.geometry.attributes.position.needsUpdate = true;
 	});
 	useFrame(() => {
@@ -5480,7 +5480,7 @@ const PointsInstances = /* @__PURE__ */ React$1.forwardRef(({ children, range, l
 			parentRef.current.geometry.attributes.size.needsUpdate = true;
 		}
 	});
-	const api = React$1.useMemo(() => ({
+	const api = React.useMemo(() => ({
 		getParent: () => parentRef,
 		subscribe: (ref$1) => {
 			setRefs((refs$1) => [...refs$1, ref$1]);
@@ -5526,12 +5526,12 @@ const PointsInstances = /* @__PURE__ */ React$1.forwardRef(({ children, range, l
 * </Points>
 * ```
 */
-const Point = /* @__PURE__ */ React$1.forwardRef(({ children, ...props }, ref) => {
-	React$1.useMemo(() => extend({ PositionPoint }), []);
-	const group = React$1.useRef(null);
-	React$1.useImperativeHandle(ref, () => group.current, []);
-	const { subscribe, getParent } = React$1.useContext(context$6);
-	React$1.useLayoutEffect(() => subscribe(group), []);
+const Point = /* @__PURE__ */ React.forwardRef(({ children, ...props }, ref) => {
+	React.useMemo(() => extend({ PositionPoint }), []);
+	const group = React.useRef(null);
+	React.useImperativeHandle(ref, () => group.current, []);
+	const { subscribe, getParent } = React.useContext(context$6);
+	React.useLayoutEffect(() => subscribe(group), []);
 	return /* @__PURE__ */ jsx("positionPoint", {
 		instance: getParent(),
 		instanceKey: group,
@@ -5540,9 +5540,9 @@ const Point = /* @__PURE__ */ React$1.forwardRef(({ children, ...props }, ref) =
 		children
 	});
 });
-const PointsBuffer = /* @__PURE__ */ React$1.forwardRef(({ children, positions, colors: colors$1, sizes, stride = 3, ...props }, forwardedRef) => {
-	const pointsRef = React$1.useRef(null);
-	React$1.useImperativeHandle(forwardedRef, () => pointsRef.current, []);
+const PointsBuffer = /* @__PURE__ */ React.forwardRef(({ children, positions, colors: colors$1, sizes, stride = 3, ...props }, forwardedRef) => {
+	const pointsRef = React.useRef(null);
+	React.useImperativeHandle(forwardedRef, () => pointsRef.current, []);
 	useFrame(() => {
 		const attr = pointsRef.current.geometry.attributes;
 		attr.position.needsUpdate = true;
@@ -5589,7 +5589,7 @@ const PointsBuffer = /* @__PURE__ */ React$1.forwardRef(({ children, positions,
 * </Points>
 * ```
 */
-const Points = /* @__PURE__ */ React$1.forwardRef((props, forwardedRef) => {
+const Points = /* @__PURE__ */ React.forwardRef((props, forwardedRef) => {
 	if (props.positions instanceof Float32Array) return /* @__PURE__ */ jsx(PointsBuffer, {
 		...props,
 		ref: forwardedRef
@@ -5616,7 +5616,7 @@ const v = /* @__PURE__ */ new Vector3$2();
 * />
 * ```
 */
-const QuadraticBezierLine = /* @__PURE__ */ React$1.forwardRef(function QuadraticBezierLine$1({ start = [
+const QuadraticBezierLine = /* @__PURE__ */ React.forwardRef(function QuadraticBezierLine$1({ start = [
 	0,
 	0,
 	0
@@ -5626,10 +5626,10 @@ const QuadraticBezierLine = /* @__PURE__ */ React$1.forwardRef(function Quadrati
 	0
 ], mid, segments = 20, LineComponent, ...rest }, forwardref) {
 	const LineComp = LineComponent ?? Line;
-	const ref = React$1.useRef(null);
-	React$1.useImperativeHandle(forwardref, () => ref.current);
-	const [curve] = React$1.useState(() => new QuadraticBezierCurve3(void 0, void 0, void 0));
-	const getPoints = React$1.useCallback((start$1, end$1, mid$1, segments$1 = 20) => {
+	const ref = React.useRef(null);
+	React.useImperativeHandle(forwardref, () => ref.current);
+	const [curve] = React.useState(() => new QuadraticBezierCurve3(void 0, void 0, void 0));
+	const getPoints = React.useCallback((start$1, end$1, mid$1, segments$1 = 20) => {
 		if (start$1 instanceof Vector3$2) curve.v0.copy(start$1);
 		else curve.v0.set(...start$1);
 		if (end$1 instanceof Vector3$2) curve.v2.copy(end$1);
@@ -5639,7 +5639,7 @@ const QuadraticBezierLine = /* @__PURE__ */ React$1.forwardRef(function Quadrati
 		else curve.v1.copy(curve.v0.clone().add(curve.v2.clone().sub(curve.v0)).add(v.set(0, curve.v0.y - curve.v2.y, 0)));
 		return curve.getPoints(segments$1);
 	}, []);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		ref.current.setPoints = (start$1, end$1, mid$1) => {
 			const points = getPoints(start$1, end$1, mid$1);
 			if (ref.current.geometry) ref.current.geometry.setPositions(points.map((p) => p.toArray()).flat());
@@ -5647,7 +5647,7 @@ const QuadraticBezierLine = /* @__PURE__ */ React$1.forwardRef(function Quadrati
 	}, []);
 	return /* @__PURE__ */ jsx(LineComp, {
 		ref,
-		points: React$1.useMemo(() => getPoints(start, end, mid, segments), [
+		points: React.useMemo(() => getPoints(start, end, mid, segments), [
 			start,
 			end,
 			mid,
@@ -5691,7 +5691,7 @@ function createShape(width, height, radius0) {
 * </RoundedBox>
 * ```
 */
-const RoundedBox = /* @__PURE__ */ React$1.forwardRef(function RoundedBox$1({ args: [width = 1, height = 1, depth = 1] = [], radius = .05, steps = 1, smoothness = 4, bevelSegments = 4, creaseAngle = .4, children, ...rest }, ref) {
+const RoundedBox = /* @__PURE__ */ React.forwardRef(function RoundedBox$1({ args: [width = 1, height = 1, depth = 1] = [], radius = .05, steps = 1, smoothness = 4, bevelSegments = 4, creaseAngle = .4, children, ...rest }, ref) {
 	return /* @__PURE__ */ jsxs("mesh", {
 		ref,
 		...rest,
@@ -5709,13 +5709,13 @@ const RoundedBox = /* @__PURE__ */ React$1.forwardRef(function RoundedBox$1({ ar
 		}), children]
 	});
 });
-const RoundedBoxGeometry = /* @__PURE__ */ React$1.forwardRef(function RoundedBoxGeometry$1({ args: [width = 1, height = 1, depth = 1] = [], radius = .05, steps = 1, smoothness = 4, bevelSegments = 4, creaseAngle = .4, ...rest }, ref) {
-	const shape = React$1.useMemo(() => createShape(width, height, radius), [
+const RoundedBoxGeometry = /* @__PURE__ */ React.forwardRef(function RoundedBoxGeometry$1({ args: [width = 1, height = 1, depth = 1] = [], radius = .05, steps = 1, smoothness = 4, bevelSegments = 4, creaseAngle = .4, ...rest }, ref) {
+	const shape = React.useMemo(() => createShape(width, height, radius), [
 		width,
 		height,
 		radius
 	]);
-	const params = React$1.useMemo(() => ({
+	const params = React.useMemo(() => ({
 		depth: depth - radius * 2,
 		bevelEnabled: true,
 		bevelSegments: bevelSegments * 2,
@@ -5730,8 +5730,8 @@ const RoundedBoxGeometry = /* @__PURE__ */ React$1.forwardRef(function RoundedBo
 		bevelSegments,
 		steps
 	]);
-	const geomRef = React$1.useRef(null);
-	React$1.useLayoutEffect(() => {
+	const geomRef = React.useRef(null);
+	React.useLayoutEffect(() => {
 		if (geomRef.current) {
 			geomRef.current.center();
 			toCreasedNormals(geomRef.current, creaseAngle);
@@ -5741,7 +5741,7 @@ const RoundedBoxGeometry = /* @__PURE__ */ React$1.forwardRef(function RoundedBo
 		params,
 		creaseAngle
 	]);
-	React$1.useImperativeHandle(ref, () => geomRef.current);
+	React.useImperativeHandle(ref, () => geomRef.current);
 	return /* @__PURE__ */ jsx("extrudeGeometry", {
 		ref: geomRef,
 		args: [shape, params],
@@ -5776,10 +5776,10 @@ function createScreenQuadGeometry() {
 * </ScreenQuad>
 * ```
 */
-const ScreenQuad = /* @__PURE__ */ React$1.forwardRef(function ScreenQuad$1({ children, ...restProps }, ref) {
+const ScreenQuad = /* @__PURE__ */ React.forwardRef(function ScreenQuad$1({ children, ...restProps }, ref) {
 	return /* @__PURE__ */ jsx("mesh", {
 		ref,
-		geometry: React$1.useMemo(createScreenQuadGeometry, []),
+		geometry: React.useMemo(createScreenQuadGeometry, []),
 		frustumCulled: false,
 		...restProps,
 		children
@@ -5800,10 +5800,10 @@ const ScreenQuad = /* @__PURE__ */ React$1.forwardRef(function ScreenQuad$1({ ch
 */
 function create(type, effect) {
 	const El = type + "Geometry";
-	return React$1.forwardRef(({ args, children, ...props }, fref) => {
-		const ref = React$1.useRef(null);
-		React$1.useImperativeHandle(fref, () => ref.current);
-		React$1.useLayoutEffect(() => void effect?.(ref.current));
+	return React.forwardRef(({ args, children, ...props }, fref) => {
+		const ref = React.useRef(null);
+		React.useImperativeHandle(fref, () => ref.current);
+		React.useLayoutEffect(() => void effect?.(ref.current));
 		return /* @__PURE__ */ jsxs("mesh", {
 			ref,
 			...props,
@@ -5883,7 +5883,7 @@ const types = ["string", "number"];
 const getTextFromChildren = (children) => {
 	let label = "";
 	const rest = [];
-	React$1.Children.forEach(children, (child) => {
+	React.Children.forEach(children, (child) => {
 		if (types.includes(typeof child)) label += child + "";
 		else rest.push(child);
 	});
@@ -5922,9 +5922,9 @@ const getTextFromChildren = (children) => {
 * <Text3D smooth={1} lineHeight={0.5} letterSpacing={-0.025}>{`hello\nworld`}</Text3D>
 * ```
 */
-const Text3D = /* @__PURE__ */ React$1.forwardRef(({ font: _font, letterSpacing = 0, lineHeight = 1, size = 1, height = .2, bevelThickness = .1, bevelSize = .01, bevelEnabled = false, bevelOffset = 0, bevelSegments = 4, curveSegments = 8, smooth, children, ...props }, fref) => {
-	React$1.useMemo(() => extend({ RenamedTextGeometry: TextGeometry }), []);
-	const ref = React$1.useRef(null);
+const Text3D = /* @__PURE__ */ React.forwardRef(({ font: _font, letterSpacing = 0, lineHeight = 1, size = 1, height = .2, bevelThickness = .1, bevelSize = .01, bevelEnabled = false, bevelOffset = 0, bevelSegments = 4, curveSegments = 8, smooth, children, ...props }, fref) => {
+	React.useMemo(() => extend({ RenamedTextGeometry: TextGeometry }), []);
+	const ref = React.useRef(null);
 	const font = useFont(_font);
 	const opts = useMemo(() => {
 		return {
@@ -5958,14 +5958,14 @@ const Text3D = /* @__PURE__ */ React$1.forwardRef(({ font: _font, letterSpacing
 	* need to be able to do `<Text3d>{state}</Text3d>`.
 	*/
 	const [label, ...rest] = useMemo(() => getTextFromChildren(children), [children]);
-	const args = React$1.useMemo(() => [label, opts], [label, opts]);
-	React$1.useLayoutEffect(() => {
+	const args = React.useMemo(() => [label, opts], [label, opts]);
+	React.useLayoutEffect(() => {
 		if (smooth) {
 			ref.current.geometry = mergeVertices(ref.current.geometry, smooth);
 			ref.current.geometry.computeVertexNormals();
 		}
 	}, [args, smooth]);
-	React$1.useImperativeHandle(fref, () => ref.current, []);
+	React.useImperativeHandle(fref, () => ref.current, []);
 	return /* @__PURE__ */ jsxs("mesh", {
 		...props,
 		ref,
@@ -6146,21 +6146,21 @@ function setWireframeOverride$1(material, uniforms) {
 	material.transparent = true;
 }
 function useWireframeUniforms$1(uniforms, props) {
-	React$1.useEffect(() => void (uniforms.fillOpacity.value = props.fillOpacity ?? uniforms.fillOpacity.value), [props.fillOpacity]);
-	React$1.useEffect(() => void (uniforms.fillMix.value = props.fillMix ?? uniforms.fillMix.value), [props.fillMix]);
-	React$1.useEffect(() => void (uniforms.strokeOpacity.value = props.strokeOpacity ?? uniforms.strokeOpacity.value), [props.strokeOpacity]);
-	React$1.useEffect(() => void (uniforms.thickness.value = props.thickness ?? uniforms.thickness.value), [props.thickness]);
-	React$1.useEffect(() => void (uniforms.colorBackfaces.value = !!props.colorBackfaces), [props.colorBackfaces]);
-	React$1.useEffect(() => void (uniforms.dash.value = !!props.dash), [props.dash]);
-	React$1.useEffect(() => void (uniforms.dashInvert.value = !!props.dashInvert), [props.dashInvert]);
-	React$1.useEffect(() => void (uniforms.dashRepeats.value = props.dashRepeats ?? uniforms.dashRepeats.value), [props.dashRepeats]);
-	React$1.useEffect(() => void (uniforms.dashLength.value = props.dashLength ?? uniforms.dashLength.value), [props.dashLength]);
-	React$1.useEffect(() => void (uniforms.squeeze.value = !!props.squeeze), [props.squeeze]);
-	React$1.useEffect(() => void (uniforms.squeezeMin.value = props.squeezeMin ?? uniforms.squeezeMin.value), [props.squeezeMin]);
-	React$1.useEffect(() => void (uniforms.squeezeMax.value = props.squeezeMax ?? uniforms.squeezeMax.value), [props.squeezeMax]);
-	React$1.useEffect(() => void (uniforms.stroke.value = props.stroke ? new Color$2(props.stroke) : uniforms.stroke.value), [props.stroke]);
-	React$1.useEffect(() => void (uniforms.fill.value = props.fill ? new Color$2(props.fill) : uniforms.fill.value), [props.fill]);
-	React$1.useEffect(() => void (uniforms.backfaceStroke.value = props.backfaceStroke ? new Color$2(props.backfaceStroke) : uniforms.backfaceStroke.value), [props.backfaceStroke]);
+	React.useEffect(() => void (uniforms.fillOpacity.value = props.fillOpacity ?? uniforms.fillOpacity.value), [props.fillOpacity]);
+	React.useEffect(() => void (uniforms.fillMix.value = props.fillMix ?? uniforms.fillMix.value), [props.fillMix]);
+	React.useEffect(() => void (uniforms.strokeOpacity.value = props.strokeOpacity ?? uniforms.strokeOpacity.value), [props.strokeOpacity]);
+	React.useEffect(() => void (uniforms.thickness.value = props.thickness ?? uniforms.thickness.value), [props.thickness]);
+	React.useEffect(() => void (uniforms.colorBackfaces.value = !!props.colorBackfaces), [props.colorBackfaces]);
+	React.useEffect(() => void (uniforms.dash.value = !!props.dash), [props.dash]);
+	React.useEffect(() => void (uniforms.dashInvert.value = !!props.dashInvert), [props.dashInvert]);
+	React.useEffect(() => void (uniforms.dashRepeats.value = props.dashRepeats ?? uniforms.dashRepeats.value), [props.dashRepeats]);
+	React.useEffect(() => void (uniforms.dashLength.value = props.dashLength ?? uniforms.dashLength.value), [props.dashLength]);
+	React.useEffect(() => void (uniforms.squeeze.value = !!props.squeeze), [props.squeeze]);
+	React.useEffect(() => void (uniforms.squeezeMin.value = props.squeezeMin ?? uniforms.squeezeMin.value), [props.squeezeMin]);
+	React.useEffect(() => void (uniforms.squeezeMax.value = props.squeezeMax ?? uniforms.squeezeMax.value), [props.squeezeMax]);
+	React.useEffect(() => void (uniforms.stroke.value = props.stroke ? new Color$2(props.stroke) : uniforms.stroke.value), [props.stroke]);
+	React.useEffect(() => void (uniforms.fill.value = props.fill ? new Color$2(props.fill) : uniforms.fill.value), [props.fill]);
+	React.useEffect(() => void (uniforms.backfaceStroke.value = props.backfaceStroke ? new Color$2(props.backfaceStroke) : uniforms.backfaceStroke.value), [props.backfaceStroke]);
 }
 //#endregion
@@ -6219,8 +6219,8 @@ function setBarycentricCoordinates$1(geometry$1, simplify) {
 }
 function WireframeWithCustomGeo({ geometry: customGeometry, simplify = false, ...props }) {
 	extend({ MeshWireframeMaterial: WireframeMaterial$1 });
-	const [geometry$1, setGeometry] = React$1.useState(null);
-	React$1.useLayoutEffect(() => {
+	const [geometry$1, setGeometry] = React.useState(null);
+	React.useLayoutEffect(() => {
 		const geom = getInputGeometry(customGeometry);
 		if (!geom) throw new Error("Wireframe: geometry prop must be a BufferGeometry or a ref to a BufferGeometry.");
 		setBarycentricCoordinates$1(geom, simplify);
@@ -6240,10 +6240,10 @@ function WireframeWithCustomGeo({ geometry: customGeometry, simplify = false, ..
 	}) });
 }
 function WireframeWithoutCustomGeo({ simplify = false, ...props }) {
-	const objectRef = React$1.useRef(null);
-	const uniforms = React$1.useMemo(() => getUniforms(), [WireframeMaterialShaders$1.uniforms]);
+	const objectRef = React.useRef(null);
+	const uniforms = React.useMemo(() => getUniforms(), [WireframeMaterialShaders$1.uniforms]);
 	useWireframeUniforms$1(uniforms, props);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		const geom = getInputGeometry(objectRef);
 		if (!geom) throw new Error("Wireframe: Must be a child of a Mesh, Line or Points object or specify a geometry prop.");
 		const og = geom.clone();
@@ -6253,7 +6253,7 @@ function WireframeWithoutCustomGeo({ simplify = false, ...props }) {
 			og.dispose();
 		};
 	}, [simplify]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		const parentMesh = objectRef.current.parent;
 		const og = parentMesh.material.clone();
 		setWireframeOverride$1(parentMesh.material, uniforms);
@@ -6286,13 +6286,13 @@ function Wireframe({ geometry: customGeometry, ...props }) {
 //#endregion
 //#region src/core/Gizmos/gizmo/GizmoHelper.tsx
-const Context = /* @__PURE__ */ React$1.createContext({});
+const Context = /* @__PURE__ */ React.createContext({});
 /**
 * Hook to access the GizmoHelper context for creating custom gizmos.
 * Provides `tweenCamera(direction)` to animate camera rotation.
 */
 const useGizmoContext = () => {
-	return React$1.useContext(Context);
+	return React.useContext(Context);
 };
 const turnRate = 2 * Math.PI;
 const dummy = /* @__PURE__ */ new Object3D$1();
@@ -6323,17 +6323,17 @@ const GizmoHelper = ({ alignment = "bottom-right", margin = [80, 80], renderPrio
 	const mainCamera = useThree((state) => state.camera);
 	const defaultControls = useThree((state) => state.controls);
 	const invalidate = useThree((state) => state.invalidate);
-	const gizmoRef = React$1.useRef(null);
-	const virtualCam = React$1.useRef(null);
-	const animating = React$1.useRef(false);
-	const radius = React$1.useRef(0);
-	const focusPoint = React$1.useRef(new Vector3$2(0, 0, 0));
-	const defaultUp = React$1.useRef(new Vector3$2(0, 0, 0));
-	React$1.useEffect(() => {
+	const gizmoRef = React.useRef(null);
+	const virtualCam = React.useRef(null);
+	const animating = React.useRef(false);
+	const radius = React.useRef(0);
+	const focusPoint = React.useRef(new Vector3$2(0, 0, 0));
+	const defaultUp = React.useRef(new Vector3$2(0, 0, 0));
+	React.useEffect(() => {
 		defaultUp.current.copy(mainCamera.up);
 		dummy.up.copy(mainCamera.up);
 	}, [mainCamera]);
-	const tweenCamera = React$1.useCallback((direction) => {
+	const tweenCamera = React.useCallback((direction) => {
 		animating.current = true;
 		if (defaultControls || onTarget) focusPoint.current = onTarget?.() || (isCameraControls(defaultControls) ? defaultControls.getTarget(focusPoint.current) : defaultControls?.target);
 		radius.current = mainCamera.position.distanceTo(target);
@@ -6368,7 +6368,7 @@ const GizmoHelper = ({ alignment = "bottom-right", margin = [80, 80], renderPrio
 			gizmoRef.current?.quaternion.setFromRotationMatrix(matrix);
 		}
 	});
-	const gizmoHelperContext = React$1.useMemo(() => ({ tweenCamera }), [tweenCamera]);
+	const gizmoHelperContext = React.useMemo(() => ({ tweenCamera }), [tweenCamera]);
 	const [marginX, marginY] = margin;
 	const x = alignment.endsWith("-center") ? 0 : alignment.endsWith("-left") ? -size.width / 2 + marginX : size.width / 2 - marginX;
 	const y = alignment.startsWith("center-") ? 0 : alignment.startsWith("top-") ? size.height / 2 - marginY : -size.height / 2 + marginY;
@@ -6527,7 +6527,7 @@ const edgeDimensions = /* @__PURE__ */ edges.map((edge) => edge.toArray().map((a
 const FaceMaterial = ({ hover, index, font = "20px Inter var, Arial, sans-serif", faces = defaultFaces, color = colors.bg, hoverColor = colors.hover, textColor = colors.text, strokeColor = colors.stroke, opacity = 1 }) => {
 	const renderer = useThree((state) => state.renderer);
 	return /* @__PURE__ */ jsx("meshBasicMaterial", {
-		map: React$1.useMemo(() => {
+		map: React.useMemo(() => {
 			const canvas = document.createElement("canvas");
 			canvas.width = 128;
 			canvas.height = 128;
@@ -6558,7 +6558,7 @@ const FaceMaterial = ({ hover, index, font = "20px Inter var, Arial, sans-serif"
 };
 const FaceCube = (props) => {
 	const { tweenCamera } = useGizmoContext();
-	const [hover, setHover] = React$1.useState(null);
+	const [hover, setHover] = React.useState(null);
 	const handlePointerOut = (e) => {
 		e.stopPropagation();
 		setHover(null);
@@ -6584,7 +6584,7 @@ const FaceCube = (props) => {
 };
 const EdgeCube = ({ onClick, dimensions, position: position$1, hoverColor = colors.hover }) => {
 	const { tweenCamera } = useGizmoContext();
-	const [hover, setHover] = React$1.useState(false);
+	const [hover, setHover] = React.useState(false);
 	const handlePointerOut = (e) => {
 		e.stopPropagation();
 		setHover(false);
@@ -6669,7 +6669,7 @@ function Axis({ scale: scale$2 = [
 }
 function AxisHead({ onClick, font, disabled, arcStyle, label, labelColor, axisHeadScale = 1, ...props }) {
 	const renderer = useThree((state) => state.renderer);
-	const texture$1 = React$1.useMemo(() => {
+	const texture$1 = React.useMemo(() => {
 		const canvas = document.createElement("canvas");
 		canvas.width = 64;
 		canvas.height = 64;
@@ -6692,7 +6692,7 @@ function AxisHead({ onClick, font, disabled, arcStyle, label, labelColor, axisHe
 		labelColor,
 		font
 	]);
-	const [active, setActive] = React$1.useState(false);
+	const [active, setActive] = React.useState(false);
 	const scale$2 = (label ? 1 : .75) * (active ? 1.2 : 1) * axisHeadScale;
 	const handlePointerOver = (e) => {
 		e.stopPropagation();
@@ -6965,22 +6965,22 @@ function isRefObject(ref) {
 * </Html>
 * ```
 */
-const Html$1 = /* @__PURE__ */ React$1.forwardRef(({ children, eps: eps$1 = .001, style, className, prepend, center, fullscreen, portal, distanceFactor, sprite = false, transform = false, occlude, onOcclude, castShadow, receiveShadow, material, geometry: geometry$1, zIndexRange = [16777271, 0], calculatePosition = defaultCalculatePosition, as = "div", wrapperClass, pointerEvents = "auto", ...props }, ref) => {
+const Html$1 = /* @__PURE__ */ React.forwardRef(({ children, eps: eps$1 = .001, style, className, prepend, center, fullscreen, portal, distanceFactor, sprite = false, transform = false, occlude, onOcclude, castShadow, receiveShadow, material, geometry: geometry$1, zIndexRange = [16777271, 0], calculatePosition = defaultCalculatePosition, as = "div", wrapperClass, pointerEvents = "auto", ...props }, ref) => {
 	const { gl, camera, scene, size, raycaster, events, viewport } = useThree();
-	const [el] = React$1.useState(() => document.createElement(as));
-	const root = React$1.useRef(null);
-	const group = React$1.useRef(null);
-	const oldZoom = React$1.useRef(0);
-	const oldPosition = React$1.useRef([0, 0]);
-	const transformOuterRef = React$1.useRef(null);
-	const transformInnerRef = React$1.useRef(null);
+	const [el] = React.useState(() => document.createElement(as));
+	const root = React.useRef(null);
+	const group = React.useRef(null);
+	const oldZoom = React.useRef(0);
+	const oldPosition = React.useRef([0, 0]);
+	const transformOuterRef = React.useRef(null);
+	const transformInnerRef = React.useRef(null);
 	const target$1 = portal?.current || events.connected || gl.domElement.parentNode;
-	const occlusionMeshRef = React$1.useRef(null);
-	const isMeshSizeSet = React$1.useRef(false);
-	const isRayCastOcclusion = React$1.useMemo(() => {
+	const occlusionMeshRef = React.useRef(null);
+	const isMeshSizeSet = React.useRef(false);
+	const isRayCastOcclusion = React.useMemo(() => {
 		return occlude && occlude !== "blending" || Array.isArray(occlude) && occlude.length && isRefObject(occlude[0]);
 	}, [occlude]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		const el$1 = gl.domElement;
 		if (occlude && occlude === "blending") {
 			el$1.style.zIndex = `${Math.floor(zIndexRange[0] / 2)}`;
@@ -6992,7 +6992,7 @@ const Html$1 = /* @__PURE__ */ React$1.forwardRef(({ children, eps: eps$1 = .001
 			el$1.style.pointerEvents = null;
 		}
 	}, [occlude]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (group.current) {
 			const currentRoot = root.current = ReactDOM.createRoot(el);
 			scene.updateMatrixWorld();
@@ -7009,10 +7009,10 @@ const Html$1 = /* @__PURE__ */ React$1.forwardRef(({ children, eps: eps$1 = .001
 			};
 		}
 	}, [target$1, transform]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (wrapperClass) el.className = wrapperClass;
 	}, [wrapperClass]);
-	const styles$1 = React$1.useMemo(() => {
+	const styles$1 = React.useMemo(() => {
 		if (transform) return {
 			position: "absolute",
 			top: 0,
@@ -7040,11 +7040,11 @@ const Html$1 = /* @__PURE__ */ React$1.forwardRef(({ children, eps: eps$1 = .001
 		size,
 		transform
 	]);
-	const transformInnerStyles = React$1.useMemo(() => ({
+	const transformInnerStyles = React.useMemo(() => ({
 		position: "absolute",
 		pointerEvents
 	}), [pointerEvents]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		isMeshSizeSet.current = false;
 		if (transform) root.current?.render(/* @__PURE__ */ jsx("div", {
 			ref: transformOuterRef,
@@ -7067,7 +7067,7 @@ const Html$1 = /* @__PURE__ */ React$1.forwardRef(({ children, eps: eps$1 = .001
 			children
 		}));
 	});
-	const visible = React$1.useRef(true);
+	const visible = React.useRef(true);
 	useFrame((gl$1) => {
 		if (group.current) {
 			camera.updateMatrixWorld();
@@ -7145,7 +7145,7 @@ const Html$1 = /* @__PURE__ */ React$1.forwardRef(({ children, eps: eps$1 = .001
 			occlusionMeshRef.current.lookAt(gl$1.camera.position);
 		}
 	});
-	const shaders = React$1.useMemo(() => ({
+	const shaders = React.useMemo(() => ({
 		vertexShader: !transform ? `
           /*
             This shader is from the THREE's SpriteMaterial.
@@ -7204,7 +7204,7 @@ const Html$1 = /* @__PURE__ */ React$1.forwardRef(({ children, eps: eps$1 = .001
 //#endregion
 //#region src/core/Gizmos/PivotControls/context.ts
-const context$5 = /* @__PURE__ */ React$1.createContext(null);
+const context$5 = /* @__PURE__ */ React.createContext(null);
 //#endregion
 //#region src/core/Gizmos/PivotControls/AxisArrow.tsx
@@ -7222,14 +7222,14 @@ const calculateOffset$1 = (clickPoint, normal, rayStart, rayDir) => {
 const upV$1 = /* @__PURE__ */ new Vector3$2(0, 1, 0);
 const offsetMatrix$1 = /* @__PURE__ */ new Matrix4();
 const AxisArrow = ({ direction, axis }) => {
-	const { translation: translation$2, translationLimits, annotations, annotationsClass, depthTest, scale: scale$2, lineWidth, fixed, axisColors, hoveredColor, opacity, renderOrder, onDragStart, onDrag, onDragEnd, userData, LineComponent: Line$1 } = React$1.useContext(context$5);
+	const { translation: translation$2, translationLimits, annotations, annotationsClass, depthTest, scale: scale$2, lineWidth, fixed, axisColors, hoveredColor, opacity, renderOrder, onDragStart, onDrag, onDragEnd, userData, LineComponent: Line$1 } = React.useContext(context$5);
 	const camControls = useThree((state) => state.controls);
-	const divRef = React$1.useRef(null);
-	const objRef = React$1.useRef(null);
-	const clickInfo = React$1.useRef(null);
-	const offset0 = React$1.useRef(0);
-	const [isHovered, setIsHovered] = React$1.useState(false);
-	const onPointerDown = React$1.useCallback((e) => {
+	const divRef = React.useRef(null);
+	const objRef = React.useRef(null);
+	const clickInfo = React.useRef(null);
+	const offset0 = React.useRef(0);
+	const [isHovered, setIsHovered] = React.useState(false);
+	const onPointerDown = React.useCallback((e) => {
 		if (annotations) {
 			divRef.current.innerText = `${translation$2.current[axis].toFixed(2)}`;
 			divRef.current.style.display = "block";
@@ -7260,7 +7260,7 @@ const AxisArrow = ({ direction, axis }) => {
 		translation$2,
 		axis
 	]);
-	const onPointerMove = React$1.useCallback((e) => {
+	const onPointerMove = React.useCallback((e) => {
 		e.stopPropagation();
 		if (!isHovered) setIsHovered(true);
 		if (clickInfo.current) {
@@ -7282,7 +7282,7 @@ const AxisArrow = ({ direction, axis }) => {
 		translationLimits,
 		axis
 	]);
-	const onPointerUp = React$1.useCallback((e) => {
+	const onPointerUp = React.useCallback((e) => {
 		if (annotations) divRef.current.style.display = "none";
 		e.stopPropagation();
 		clickInfo.current = null;
@@ -7294,11 +7294,11 @@ const AxisArrow = ({ direction, axis }) => {
 		camControls,
 		onDragEnd
 	]);
-	const onPointerOut = React$1.useCallback((e) => {
+	const onPointerOut = React.useCallback((e) => {
 		e.stopPropagation();
 		setIsHovered(false);
 	}, []);
-	const { cylinderLength, coneWidth, coneLength, matrixL } = React$1.useMemo(() => {
+	const { cylinderLength, coneWidth, coneLength, matrixL } = React.useMemo(() => {
 		const coneWidth$1 = fixed ? lineWidth / scale$2 * 1.6 : scale$2 / 20;
 		const coneLength$1 = fixed ? .2 : scale$2 / 5;
 		const cylinderLength$1 = fixed ? 1 - coneLength$1 : scale$2 - coneLength$1;
@@ -7444,15 +7444,15 @@ const posNew = /* @__PURE__ */ new Vector3$2();
 const ray$1 = /* @__PURE__ */ new Ray();
 const intersection$1 = /* @__PURE__ */ new Vector3$2();
 const AxisRotator = ({ dir1, dir2, axis }) => {
-	const { rotationLimits, annotations, annotationsClass, depthTest, scale: scale$2, lineWidth, fixed, axisColors, hoveredColor, renderOrder, opacity, onDragStart, onDrag, onDragEnd, userData, LineComponent: Line$1 } = React$1.useContext(context$5);
+	const { rotationLimits, annotations, annotationsClass, depthTest, scale: scale$2, lineWidth, fixed, axisColors, hoveredColor, renderOrder, opacity, onDragStart, onDrag, onDragEnd, userData, LineComponent: Line$1 } = React.useContext(context$5);
 	const camControls = useThree((state) => state.controls);
-	const divRef = React$1.useRef(null);
-	const objRef = React$1.useRef(null);
-	const angle0 = React$1.useRef(0);
-	const angle = React$1.useRef(0);
-	const clickInfo = React$1.useRef(null);
-	const [isHovered, setIsHovered] = React$1.useState(false);
-	const onPointerDown = React$1.useCallback((e) => {
+	const divRef = React.useRef(null);
+	const objRef = React.useRef(null);
+	const angle0 = React.useRef(0);
+	const angle = React.useRef(0);
+	const clickInfo = React.useRef(null);
+	const [isHovered, setIsHovered] = React.useState(false);
+	const onPointerDown = React.useCallback((e) => {
 		if (annotations) {
 			divRef.current.innerText = `${toDegrees(angle.current).toFixed(0)}º`;
 			divRef.current.style.display = "block";
@@ -7489,7 +7489,7 @@ const AxisRotator = ({ dir1, dir2, axis }) => {
 		onDragStart,
 		axis
 	]);
-	const onPointerMove = React$1.useCallback((e) => {
+	const onPointerMove = React.useCallback((e) => {
 		e.stopPropagation();
 		if (!isHovered) setIsHovered(true);
 		if (clickInfo.current) {
@@ -7530,7 +7530,7 @@ const AxisRotator = ({ dir1, dir2, axis }) => {
 		rotationLimits,
 		axis
 	]);
-	const onPointerUp = React$1.useCallback((e) => {
+	const onPointerUp = React.useCallback((e) => {
 		if (annotations) divRef.current.style.display = "none";
 		e.stopPropagation();
 		angle0.current = angle.current;
@@ -7543,17 +7543,17 @@ const AxisRotator = ({ dir1, dir2, axis }) => {
 		camControls,
 		onDragEnd
 	]);
-	const onPointerOut = React$1.useCallback((e) => {
+	const onPointerOut = React.useCallback((e) => {
 		e.stopPropagation();
 		setIsHovered(false);
 	}, []);
-	const matrixL = React$1.useMemo(() => {
+	const matrixL = React.useMemo(() => {
 		const dir1N = dir1.clone().normalize();
 		const dir2N = dir2.clone().normalize();
 		return new Matrix4().makeBasis(dir1N, dir2N, dir1N.clone().cross(dir2N));
 	}, [dir1, dir2]);
 	const r = fixed ? .65 : scale$2 * .65;
-	const arc = React$1.useMemo(() => {
+	const arc = React.useMemo(() => {
 		const segments = 32;
 		const points = [];
 		for (let j = 0; j <= segments; j++) {
@@ -7636,15 +7636,15 @@ const ray = /* @__PURE__ */ new Ray();
 const intersection = /* @__PURE__ */ new Vector3$2();
 const offsetMatrix = /* @__PURE__ */ new Matrix4();
 const PlaneSlider = ({ dir1, dir2, axis }) => {
-	const { translation: translation$2, translationLimits, annotations, annotationsClass, depthTest, scale: scale$2, lineWidth, fixed, axisColors, hoveredColor, opacity, renderOrder, onDragStart, onDrag, onDragEnd, userData, LineComponent: Line$1 } = React$1.useContext(context$5);
+	const { translation: translation$2, translationLimits, annotations, annotationsClass, depthTest, scale: scale$2, lineWidth, fixed, axisColors, hoveredColor, opacity, renderOrder, onDragStart, onDrag, onDragEnd, userData, LineComponent: Line$1 } = React.useContext(context$5);
 	const camControls = useThree((state) => state.controls);
-	const divRef = React$1.useRef(null);
-	const objRef = React$1.useRef(null);
-	const clickInfo = React$1.useRef(null);
-	const offsetX0 = React$1.useRef(0);
-	const offsetY0 = React$1.useRef(0);
-	const [isHovered, setIsHovered] = React$1.useState(false);
-	const onPointerDown = React$1.useCallback((e) => {
+	const divRef = React.useRef(null);
+	const objRef = React.useRef(null);
+	const clickInfo = React.useRef(null);
+	const offsetX0 = React.useRef(0);
+	const offsetY0 = React.useRef(0);
+	const [isHovered, setIsHovered] = React.useState(false);
+	const onPointerDown = React.useCallback((e) => {
 		if (annotations) {
 			divRef.current.innerText = `${translation$2.current[(axis + 1) % 3].toFixed(2)}, ${translation$2.current[(axis + 2) % 3].toFixed(2)}`;
 			divRef.current.style.display = "block";
@@ -7681,7 +7681,7 @@ const PlaneSlider = ({ dir1, dir2, axis }) => {
 		onDragStart,
 		axis
 	]);
-	const onPointerMove = React$1.useCallback((e) => {
+	const onPointerMove = React.useCallback((e) => {
 		e.stopPropagation();
 		if (!isHovered) setIsHovered(true);
 		if (clickInfo.current) {
@@ -7712,7 +7712,7 @@ const PlaneSlider = ({ dir1, dir2, axis }) => {
 		translationLimits,
 		axis
 	]);
-	const onPointerUp = React$1.useCallback((e) => {
+	const onPointerUp = React.useCallback((e) => {
 		if (annotations) divRef.current.style.display = "none";
 		e.stopPropagation();
 		clickInfo.current = null;
@@ -7724,11 +7724,11 @@ const PlaneSlider = ({ dir1, dir2, axis }) => {
 		camControls,
 		onDragEnd
 	]);
-	const onPointerOut = React$1.useCallback((e) => {
+	const onPointerOut = React.useCallback((e) => {
 		e.stopPropagation();
 		setIsHovered(false);
 	}, []);
-	const matrixL = React$1.useMemo(() => {
+	const matrixL = React.useMemo(() => {
 		const dir1N = dir1.clone().normalize();
 		const dir2N = dir2.clone().normalize();
 		return new Matrix4().makeBasis(dir1N, dir2N, dir1N.clone().cross(dir2N));
@@ -7736,7 +7736,7 @@ const PlaneSlider = ({ dir1, dir2, axis }) => {
 	const pos1 = fixed ? 1 / 7 : scale$2 / 7;
 	const length$1 = fixed ? .225 : scale$2 * .225;
 	const color = isHovered ? hoveredColor : axisColors[axis];
-	const points = React$1.useMemo(() => [
+	const points = React.useMemo(() => [
 		new Vector3$2(0, 0, 0),
 		new Vector3$2(0, length$1, 0),
 		new Vector3$2(length$1, length$1, 0),
@@ -7858,18 +7858,18 @@ const upV = /* @__PURE__ */ new Vector3$2(0, 1, 0);
 const scaleV = /* @__PURE__ */ new Vector3$2();
 const scaleMatrix = /* @__PURE__ */ new Matrix4();
 const ScalingSphere = ({ direction, axis }) => {
-	const { scaleLimits, annotations, annotationsClass, depthTest, scale: scale$2, lineWidth, fixed, axisColors, hoveredColor, opacity, renderOrder, onDragStart, onDrag, onDragEnd, userData } = React$1.useContext(context$5);
+	const { scaleLimits, annotations, annotationsClass, depthTest, scale: scale$2, lineWidth, fixed, axisColors, hoveredColor, opacity, renderOrder, onDragStart, onDrag, onDragEnd, userData } = React.useContext(context$5);
 	const size = useThree((state) => state.size);
 	const camControls = useThree((state) => state.controls);
-	const divRef = React$1.useRef(null);
-	const objRef = React$1.useRef(null);
-	const meshRef = React$1.useRef(null);
-	const scale0 = React$1.useRef(1);
-	const scaleCur = React$1.useRef(1);
-	const clickInfo = React$1.useRef(null);
-	const [isHovered, setIsHovered] = React$1.useState(false);
+	const divRef = React.useRef(null);
+	const objRef = React.useRef(null);
+	const meshRef = React.useRef(null);
+	const scale0 = React.useRef(1);
+	const scaleCur = React.useRef(1);
+	const clickInfo = React.useRef(null);
+	const [isHovered, setIsHovered] = React.useState(false);
 	const position$1 = fixed ? 1.2 : 1.2 * scale$2;
-	const onPointerDown = React$1.useCallback((e) => {
+	const onPointerDown = React.useCallback((e) => {
 		if (annotations) {
 			divRef.current.innerText = `${scaleCur.current.toFixed(2)}`;
 			divRef.current.style.display = "block";
@@ -7905,7 +7905,7 @@ const ScalingSphere = ({ direction, axis }) => {
 		scale$2,
 		size
 	]);
-	const onPointerMove = React$1.useCallback((e) => {
+	const onPointerMove = React.useCallback((e) => {
 		e.stopPropagation();
 		if (!isHovered) setIsHovered(true);
 		if (clickInfo.current) {
@@ -7933,7 +7933,7 @@ const ScalingSphere = ({ direction, axis }) => {
 		scaleLimits,
 		axis
 	]);
-	const onPointerUp = React$1.useCallback((e) => {
+	const onPointerUp = React.useCallback((e) => {
 		if (annotations) divRef.current.style.display = "none";
 		e.stopPropagation();
 		scale0.current = scaleCur.current;
@@ -7948,11 +7948,11 @@ const ScalingSphere = ({ direction, axis }) => {
 		onDragEnd,
 		position$1
 	]);
-	const onPointerOut = React$1.useCallback((e) => {
+	const onPointerOut = React.useCallback((e) => {
 		e.stopPropagation();
 		setIsHovered(false);
 	}, []);
-	const { radius, matrixL } = React$1.useMemo(() => {
+	const { radius, matrixL } = React.useMemo(() => {
 		const radius$1 = fixed ? lineWidth / scale$2 * 1.8 : scale$2 / 22.5;
 		const quaternion = new Quaternion().setFromUnitVectors(upV, direction.clone().normalize());
 		return {
@@ -8062,7 +8062,7 @@ const zDir = /* @__PURE__ */ new Vector3$2(0, 0, 1);
 * />
 * ```
 */
-const PivotControls = /* @__PURE__ */ React$1.forwardRef(({ enabled = true, matrix: matrix$1, onDragStart, onDrag, onDragEnd, autoTransform = true, anchor, disableAxes = false, disableSliders = false, disableRotations = false, disableScaling = false, activeAxes = [
+const PivotControls = /* @__PURE__ */ React.forwardRef(({ enabled = true, matrix: matrix$1, onDragStart, onDrag, onDragEnd, autoTransform = true, anchor, disableAxes = false, disableSliders = false, disableRotations = false, disableScaling = false, activeAxes = [
 	true,
 	true,
 	true
@@ -8081,18 +8081,18 @@ const PivotControls = /* @__PURE__ */ React$1.forwardRef(({ enabled = true, matr
 ], hoveredColor = "#ffff40", annotations = false, annotationsClass, opacity = 1, visible = true, userData, children, LineComponent, ...props }, fRef) => {
 	const LineComp = LineComponent ?? Line;
 	const invalidate = useThree((state) => state.invalidate);
-	const parentRef = React$1.useRef(null);
-	const ref = React$1.useRef(null);
-	const gizmoRef = React$1.useRef(null);
-	const childrenRef = React$1.useRef(null);
-	const translation$2 = React$1.useRef([
+	const parentRef = React.useRef(null);
+	const ref = React.useRef(null);
+	const gizmoRef = React.useRef(null);
+	const childrenRef = React.useRef(null);
+	const translation$2 = React.useRef([
 		0,
 		0,
 		0
 	]);
-	const cameraScale = React$1.useRef(new Vector3$2(1, 1, 1));
-	const gizmoScale = React$1.useRef(new Vector3$2(1, 1, 1));
-	React$1.useLayoutEffect(() => {
+	const cameraScale = React.useRef(new Vector3$2(1, 1, 1));
+	const gizmoScale = React.useRef(new Vector3$2(1, 1, 1));
+	React.useLayoutEffect(() => {
 		if (!anchor) return;
 		childrenRef.current.updateWorldMatrix(true, true);
 		mPInv.copy(childrenRef.current.matrixWorld).invert();
@@ -8112,7 +8112,7 @@ const PivotControls = /* @__PURE__ */ React$1.forwardRef(({ enabled = true, matr
 		gizmoRef.current.position.copy(vPosition);
 		invalidate();
 	});
-	const config = React$1.useMemo(() => ({
+	const config = React.useMemo(() => ({
 		onDragStart: (props$1) => {
 			mL0.copy(ref.current.matrix);
 			mW0.copy(ref.current.matrixWorld);
@@ -8186,7 +8186,7 @@ const PivotControls = /* @__PURE__ */ React$1.forwardRef(({ enabled = true, matr
 			state.invalidate();
 		}
 	});
-	React$1.useImperativeHandle(fRef, () => ref.current, []);
+	React.useImperativeHandle(fRef, () => ref.current, []);
 	return /* @__PURE__ */ jsx(context$5.Provider, {
 		value: config,
 		children: /* @__PURE__ */ jsx("group", {
@@ -8286,7 +8286,7 @@ const PivotControls = /* @__PURE__ */ React$1.forwardRef(({ enabled = true, matr
 * <mesh ref={meshRef} />
 * ```
 */
-const TransformControls = /* @__PURE__ */ React$1.forwardRef(({ children, domElement, onChange, onMouseDown, onMouseUp, onObjectChange, object, makeDefault, camera, enabled, axis, mode, translationSnap, rotationSnap, scaleSnap, space, size, showX, showY, showZ, ...props }, ref) => {
+const TransformControls = /* @__PURE__ */ React.forwardRef(({ children, domElement, onChange, onMouseDown, onMouseUp, onObjectChange, object, makeDefault, camera, enabled, axis, mode, translationSnap, rotationSnap, scaleSnap, space, size, showX, showY, showZ, ...props }, ref) => {
 	const defaultControls = useThree((state) => state.controls);
 	const gl = useThree((state) => state.gl);
 	const events = useThree((state) => state.events);
@@ -8296,9 +8296,9 @@ const TransformControls = /* @__PURE__ */ React$1.forwardRef(({ children, domEle
 	const set = useThree((state) => state.set);
 	const explCamera = camera || defaultCamera;
 	const explDomElement = domElement || events.connected || gl.domElement;
-	const controls = React$1.useMemo(() => new TransformControls$1(explCamera, explDomElement), [explCamera, explDomElement]);
-	const group = React$1.useRef(null);
-	React$1.useLayoutEffect(() => {
+	const controls = React.useMemo(() => new TransformControls$1(explCamera, explDomElement), [explCamera, explDomElement]);
+	const group = React.useRef(null);
+	React.useLayoutEffect(() => {
 		if (object) controls.attach(object instanceof Object3D$1 ? object : object.current);
 		else if (group.current instanceof Object3D$1) controls.attach(group.current);
 		return () => void controls.detach();
@@ -8307,22 +8307,22 @@ const TransformControls = /* @__PURE__ */ React$1.forwardRef(({ children, domEle
 		children,
 		controls
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (defaultControls) {
 			const callback = (event) => defaultControls.enabled = !event.value;
 			controls.addEventListener("dragging-changed", callback);
 			return () => controls.removeEventListener("dragging-changed", callback);
 		}
 	}, [controls, defaultControls]);
-	const onChangeRef = React$1.useRef(void 0);
-	const onMouseDownRef = React$1.useRef(void 0);
-	const onMouseUpRef = React$1.useRef(void 0);
-	const onObjectChangeRef = React$1.useRef(void 0);
-	React$1.useLayoutEffect(() => void (onChangeRef.current = onChange), [onChange]);
-	React$1.useLayoutEffect(() => void (onMouseDownRef.current = onMouseDown), [onMouseDown]);
-	React$1.useLayoutEffect(() => void (onMouseUpRef.current = onMouseUp), [onMouseUp]);
-	React$1.useLayoutEffect(() => void (onObjectChangeRef.current = onObjectChange), [onObjectChange]);
-	React$1.useEffect(() => {
+	const onChangeRef = React.useRef(void 0);
+	const onMouseDownRef = React.useRef(void 0);
+	const onMouseUpRef = React.useRef(void 0);
+	const onObjectChangeRef = React.useRef(void 0);
+	React.useLayoutEffect(() => void (onChangeRef.current = onChange), [onChange]);
+	React.useLayoutEffect(() => void (onMouseDownRef.current = onMouseDown), [onMouseDown]);
+	React.useLayoutEffect(() => void (onMouseUpRef.current = onMouseUp), [onMouseUp]);
+	React.useLayoutEffect(() => void (onObjectChangeRef.current = onObjectChange), [onObjectChange]);
+	React.useEffect(() => {
 		const onChange$1 = (e) => {
 			invalidate();
 			onChangeRef.current?.(e);
@@ -8341,7 +8341,7 @@ const TransformControls = /* @__PURE__ */ React$1.forwardRef(({ children, domEle
 			controls.removeEventListener("objectChange", onObjectChange$1);
 		};
 	}, [invalidate, controls]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (makeDefault) {
 			const old = get().controls;
 			set({ controls });
@@ -8402,8 +8402,8 @@ var PointMaterialImpl = class extends PointsMaterial {
 * </points>
 * ```
 */
-const PointMaterial = /* @__PURE__ */ React$1.forwardRef((props, ref) => {
-	const [material] = React$1.useState(() => new PointMaterialImpl(null));
+const PointMaterial = /* @__PURE__ */ React.forwardRef((props, ref) => {
+	const [material] = React.useState(() => new PointMaterialImpl(null));
 	return /* @__PURE__ */ jsx("primitive", {
 		...props,
 		object: material,
@@ -8428,13 +8428,13 @@ const PointMaterial = /* @__PURE__ */ React$1.forwardRef((props, ref) => {
 * />
 * ```
 */
-const PositionalAudio = /* @__PURE__ */ React$1.forwardRef(({ url, distance: distance$1 = 1, loop = true, autoplay, ...props }, ref) => {
-	const sound = React$1.useRef(null);
-	React$1.useImperativeHandle(ref, () => sound.current, []);
+const PositionalAudio = /* @__PURE__ */ React.forwardRef(({ url, distance: distance$1 = 1, loop = true, autoplay, ...props }, ref) => {
+	const sound = React.useRef(null);
+	React.useImperativeHandle(ref, () => sound.current, []);
 	const camera = useThree(({ camera: camera$1 }) => camera$1);
-	const [listener] = React$1.useState(() => new AudioListener());
+	const [listener] = React.useState(() => new AudioListener());
 	const buffer = useLoader(AudioLoader, url);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const _sound = sound.current;
 		if (_sound) {
 			_sound.setBuffer(Array.isArray(buffer) ? buffer[0] : buffer);
@@ -8448,7 +8448,7 @@ const PositionalAudio = /* @__PURE__ */ React$1.forwardRef(({ url, distance: dis
 		distance$1,
 		loop
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const _sound = sound.current;
 		camera.add(listener);
 		return () => {
@@ -8511,7 +8511,7 @@ var PositionMesh = class extends Group {
 		_instanceIntersects.length = 0;
 	}
 };
-const globalContext = /* @__PURE__ */ React$1.createContext(null);
+const globalContext = /* @__PURE__ */ React.createContext(null);
 const parentMatrix = /* @__PURE__ */ new Matrix4();
 const instanceMatrix = /* @__PURE__ */ new Matrix4();
 const tempMatrix = /* @__PURE__ */ new Matrix4();
@@ -8523,12 +8523,12 @@ const isInstancedBufferAttribute = (attr) => attr.isInstancedBufferAttribute;
 * A single instance within an Instances container.
 * Supports transform props, colors, and events.
 */
-const Instance = /* @__PURE__ */ React$1.forwardRef(({ context: context$11, children, ...props }, ref) => {
-	React$1.useMemo(() => extend({ PositionMesh }), []);
-	const group = React$1.useRef(null);
-	React$1.useImperativeHandle(ref, () => group.current, []);
-	const { subscribe, getParent } = React$1.useContext(context$11 || globalContext);
-	React$1.useLayoutEffect(() => subscribe(group), []);
+const Instance = /* @__PURE__ */ React.forwardRef(({ context: context$11, children, ...props }, ref) => {
+	React.useMemo(() => extend({ PositionMesh }), []);
+	const group = React.useRef(null);
+	React.useImperativeHandle(ref, () => group.current, []);
+	const { subscribe, getParent } = React.useContext(context$11 || globalContext);
+	React.useLayoutEffect(() => subscribe(group), []);
 	return /* @__PURE__ */ jsx("positionMesh", {
 		instance: getParent(),
 		instanceKey: group,
@@ -8551,33 +8551,33 @@ const Instance = /* @__PURE__ */ React$1.forwardRef(({ context: context$11, chil
 * </Instances>
 * ```
 */
-const Instances = /* @__PURE__ */ React$1.forwardRef(({ context: context$11, children, range, limit = 1e3, frames = Infinity, ...props }, ref) => {
-	const [{ localContext, instance }] = React$1.useState(() => {
-		const localContext$1 = React$1.createContext(null);
+const Instances = /* @__PURE__ */ React.forwardRef(({ context: context$11, children, range, limit = 1e3, frames = Infinity, ...props }, ref) => {
+	const [{ localContext, instance }] = React.useState(() => {
+		const localContext$1 = React.createContext(null);
 		return {
 			localContext: localContext$1,
-			instance: React$1.forwardRef((props$1, ref$1) => /* @__PURE__ */ jsx(Instance, {
+			instance: React.forwardRef((props$1, ref$1) => /* @__PURE__ */ jsx(Instance, {
 				context: localContext$1,
 				...props$1,
 				ref: ref$1
 			}))
 		};
 	});
-	const parentRef = React$1.useRef(null);
-	React$1.useImperativeHandle(ref, () => parentRef.current, []);
-	const [instances, setInstances] = React$1.useState([]);
-	const [[matrices, colors$1]] = React$1.useState(() => {
+	const parentRef = React.useRef(null);
+	React.useImperativeHandle(ref, () => parentRef.current, []);
+	const [instances, setInstances] = React.useState([]);
+	const [[matrices, colors$1]] = React.useState(() => {
 		const mArray = new Float32Array(limit * 16);
 		for (let i$1 = 0; i$1 < limit; i$1++) tempMatrix.identity().toArray(mArray, i$1 * 16);
 		return [mArray, new Float32Array([...new Array(limit * 3)].map(() => 1))];
 	});
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		parentRef.current.instanceMatrix.needsUpdate = true;
 	});
 	let iterations = 0;
 	let count = 0;
-	const attributes = React$1.useRef([]);
-	React$1.useLayoutEffect(() => {
+	const attributes = React.useRef([]);
+	React.useLayoutEffect(() => {
 		attributes.current = Object.entries(parentRef.current.geometry.attributes).filter(([_name, value]) => isInstancedBufferAttribute(value));
 	});
 	useFrame(() => {
@@ -8608,7 +8608,7 @@ const Instances = /* @__PURE__ */ React$1.forwardRef(({ context: context$11, chi
 			iterations++;
 		}
 	});
-	const api = React$1.useMemo(() => ({
+	const api = React.useMemo(() => ({
 		getParent: () => parentRef,
 		subscribe: (ref$1) => {
 			setInstances((instances$1) => [...instances$1, ref$1]);
@@ -8654,7 +8654,7 @@ const Instances = /* @__PURE__ */ React$1.forwardRef(({ context: context$11, chi
 		]
 	});
 });
-const Merged = /* @__PURE__ */ React$1.forwardRef(function Merged$1({ meshes, children, ...props }, ref) {
+const Merged = /* @__PURE__ */ React.forwardRef(function Merged$1({ meshes, children, ...props }, ref) {
 	const isArray$1 = Array.isArray(meshes);
 	if (!isArray$1) {
 		for (const key of Object.keys(meshes)) if (!meshes[key].isMesh) delete meshes[key];
@@ -8680,7 +8680,7 @@ function renderRecursive(render, components, results = []) {
 	return typeof components[0] === "function" ? components[0]({
 		results,
 		render: nextRender
-	}) : React$1.cloneElement(components[0], { children: nextRender });
+	}) : React.cloneElement(components[0], { children: nextRender });
 }
 /** Idea and implementation for global instances and instanced attributes by
 /*  Matias Gonzalez Fernandez https://x.com/matiNotFound
@@ -8703,12 +8703,12 @@ function renderRecursive(render, components, results = []) {
 * ```
 */
 function createInstances() {
-	const context$11 = React$1.createContext(null);
-	return [React$1.forwardRef((props, fref) => /* @__PURE__ */ jsx(Instances, {
+	const context$11 = React.createContext(null);
+	return [React.forwardRef((props, fref) => /* @__PURE__ */ jsx(Instances, {
 		ref: fref,
 		context: context$11,
 		...props
-	})), React$1.forwardRef((props, fref) => /* @__PURE__ */ jsx(Instance, {
+	})), React.forwardRef((props, fref) => /* @__PURE__ */ jsx(Instance, {
 		ref: fref,
 		context: context$11,
 		...props
@@ -8728,10 +8728,10 @@ function createInstances() {
 * </Instances>
 * ```
 */
-const InstancedAttribute = React$1.forwardRef(({ name, defaultValue, normalized, usage = DynamicDrawUsage }, fref) => {
-	const ref = React$1.useRef(null);
-	React$1.useImperativeHandle(fref, () => ref.current, []);
-	React$1.useLayoutEffect(() => {
+const InstancedAttribute = React.forwardRef(({ name, defaultValue, normalized, usage = DynamicDrawUsage }, fref) => {
+	const ref = React.useRef(null);
+	React.useImperativeHandle(fref, () => ref.current, []);
+	React.useLayoutEffect(() => {
 		const parent = ref.current.__r3f.parent.object;
 		parent.geometry.attributes[name] = ref.current;
 		const value = Array.isArray(defaultValue) ? defaultValue : [defaultValue];
@@ -8794,9 +8794,9 @@ const InstancedAttribute = React$1.forwardRef(({ name, defaultValue, normalized,
 * </group>
 * ```
 */
-const Billboard = /* @__PURE__ */ React$1.forwardRef(function Billboard$1({ children, follow = true, lockX = false, lockY = false, lockZ = false, ...props }, fref) {
-	const inner = React$1.useRef(null);
-	const localRef = React$1.useRef(null);
+const Billboard = /* @__PURE__ */ React.forwardRef(function Billboard$1({ children, follow = true, lockX = false, lockY = false, lockZ = false, ...props }, fref) {
+	const inner = React.useRef(null);
+	const localRef = React.useRef(null);
 	const q = new Quaternion();
 	useFrame(({ camera }) => {
 		if (!follow || !localRef.current) return;
@@ -8809,7 +8809,7 @@ const Billboard = /* @__PURE__ */ React$1.forwardRef(function Billboard$1({ chil
 		if (lockY) inner.current.rotation.y = prevRotation.y;
 		if (lockZ) inner.current.rotation.z = prevRotation.z;
 	});
-	React$1.useImperativeHandle(fref, () => localRef.current, []);
+	React.useImperativeHandle(fref, () => localRef.current, []);
 	return /* @__PURE__ */ jsx("group", {
 		ref: localRef,
 		...props,
@@ -8839,18 +8839,18 @@ const checkIfFrameIsEmpty = (frameData) => {
 * ```
 */
 function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad, canvasRenderingContext2DSettings) {
-	const viewportRef = React$1.useRef(useThree((state) => state.viewport));
-	const spriteDataRef = React$1.useRef(null);
-	const totalFrames = React$1.useRef(0);
+	const viewportRef = React.useRef(useThree((state) => state.viewport));
+	const spriteDataRef = React.useRef(null);
+	const totalFrames = React.useRef(0);
 	const aspectFactor = .1;
-	const inputRef = React$1.useRef(input);
-	const jsonRef = React$1.useRef(json);
-	const animationFramesRef = React$1.useRef(animationNames);
+	const inputRef = React.useRef(input);
+	const jsonRef = React.useRef(json);
+	const animationFramesRef = React.useRef(animationNames);
 	const [spriteData, setSpriteData] = useState(null);
-	const [spriteTexture, setSpriteTexture] = React$1.useState(new Texture$1());
-	const textureLoader = React$1.useMemo(() => new TextureLoader(), []);
+	const [spriteTexture, setSpriteTexture] = React.useState(new Texture$1());
+	const textureLoader = React.useMemo(() => new TextureLoader(), []);
 	const [spriteObj, setSpriteObj] = useState(null);
-	const calculateAspectRatio = React$1.useCallback((width, height, factor) => {
+	const calculateAspectRatio = React.useCallback((width, height, factor) => {
 		const adaptedHeight = height * (viewportRef.current.aspect > width / height ? viewportRef.current.width / width : viewportRef.current.height / height);
 		const scaleX = width * (viewportRef.current.aspect > width / height ? viewportRef.current.width / width : viewportRef.current.height / height) * factor;
 		const scaleY = adaptedHeight * factor;
@@ -8863,7 +8863,7 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad, ca
 		}
 		return new Vector3$2(finalMaxScaleW, finalMaxScaleH, 1);
 	}, []);
-	const getRowsAndColumns = React$1.useCallback((texture$1, totalFrames$1) => {
+	const getRowsAndColumns = React.useCallback((texture$1, totalFrames$1) => {
 		if (texture$1.image) {
 			const canvas = document.createElement("canvas");
 			const ctx = canvas.getContext("2d", canvasRenderingContext2DSettings);
@@ -8908,7 +8908,7 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad, ca
 			emptyFrames: []
 		};
 	}, [canvasRenderingContext2DSettings]);
-	const calculateScaleRatio = React$1.useCallback((frames) => {
+	const calculateScaleRatio = React.useCallback((frames) => {
 		const processFrameArray = (frameArray) => {
 			let largestFrame = null;
 			for (const frame of frameArray) {
@@ -8937,7 +8937,7 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad, ca
 			return result;
 		}
 	}, []);
-	const parseFrames = React$1.useCallback(() => {
+	const parseFrames = React.useCallback(() => {
 		const sprites = {};
 		const data = spriteDataRef.current;
 		const delimiters = animationFramesRef.current;
@@ -9006,7 +9006,7 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad, ca
 		}
 		return [];
 	}, [calculateScaleRatio, spriteDataRef]);
-	const parseSpriteData = React$1.useCallback((json$1, _spriteTexture) => {
+	const parseSpriteData = React.useCallback((json$1, _spriteTexture) => {
 		let aspect$1 = new Vector3$2(1, 1, 1);
 		if (json$1 === null) {
 			if (_spriteTexture && numberOfFrames) {
@@ -9084,7 +9084,7 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad, ca
 	/**
 	*
 	*/
-	const loadJsonAndTextureAndExecuteCallback = React$1.useCallback((jsonUrl, textureUrl, callback) => {
+	const loadJsonAndTextureAndExecuteCallback = React.useCallback((jsonUrl, textureUrl, callback) => {
 		const jsonPromise = fetch(jsonUrl).then((response) => response.json());
 		const texturePromise = new Promise((resolve) => {
 			textureLoader.load(textureUrl, resolve);
@@ -9093,13 +9093,13 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad, ca
 			callback(response[0], response[1]);
 		});
 	}, [textureLoader]);
-	const loadStandaloneSprite = React$1.useCallback((textureUrl) => {
+	const loadStandaloneSprite = React.useCallback((textureUrl) => {
 		if (!textureUrl && !inputRef.current) throw new Error("Either textureUrl or input must be provided");
 		const validUrl = textureUrl ?? inputRef.current;
 		if (!validUrl) throw new Error("A valid texture URL must be provided");
 		textureLoader.load(validUrl, (texture$1) => parseSpriteData(null, texture$1));
 	}, [textureLoader, parseSpriteData]);
-	const loadJsonAndTexture = React$1.useCallback((textureUrl, jsonUrl) => {
+	const loadJsonAndTexture = React.useCallback((textureUrl, jsonUrl) => {
 		if (jsonUrl && textureUrl) loadJsonAndTextureAndExecuteCallback(jsonUrl, textureUrl, parseSpriteData);
 		else loadStandaloneSprite(textureUrl);
 	}, [
@@ -9107,7 +9107,7 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad, ca
 		loadStandaloneSprite,
 		parseSpriteData
 	]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (jsonRef.current && inputRef.current) loadJsonAndTextureAndExecuteCallback(jsonRef.current, inputRef.current, parseSpriteData);
 		else if (inputRef.current) loadStandaloneSprite();
 		const _inputRef = inputRef.current;
@@ -9119,7 +9119,7 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad, ca
 		loadStandaloneSprite,
 		parseSpriteData
 	]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		onLoad?.(spriteTexture, spriteData ?? null);
 	}, [
 		spriteTexture,
@@ -9136,9 +9136,9 @@ useSpriteLoader.clear = (input) => useLoader.clear(TextureLoader, input);
 //#endregion
 //#region src/core/Helpers/SpriteAnimator/SpriteAnimator.tsx
-const context$4 = React$1.createContext(null);
+const context$4 = React.createContext(null);
 function useSpriteAnimator() {
-	return React$1.useContext(context$4);
+	return React.useContext(context$4);
 }
 function isSpriteData(data) {
 	return data !== null && "meta" in data && "frames" in data;
@@ -9159,29 +9159,29 @@ const geometry = /* @__PURE__ */ new PlaneGeometry(1, 1);
 * />
 * ```
 */
-const SpriteAnimator = /* @__PURE__ */ React$1.forwardRef(({ startFrame = 0, endFrame, fps = 30, frameName = "", textureDataURL, textureImageURL, loop = false, numberOfFrames = 1, autoPlay = true, animationNames, onStart, onEnd, onLoopEnd, onFrame, play, pause = false, flipX = false, alphaTest = 0, children, asSprite = false, offset, playBackwards = false, resetOnEnd = false, maxItems = 1, instanceItems = [[
+const SpriteAnimator = /* @__PURE__ */ React.forwardRef(({ startFrame = 0, endFrame, fps = 30, frameName = "", textureDataURL, textureImageURL, loop = false, numberOfFrames = 1, autoPlay = true, animationNames, onStart, onEnd, onLoopEnd, onFrame, play, pause = false, flipX = false, alphaTest = 0, children, asSprite = false, offset, playBackwards = false, resetOnEnd = false, maxItems = 1, instanceItems = [[
 	0,
 	0,
 	0
 ]], spriteDataset, canvasRenderingContext2DSettings, roundFramePosition = false, meshProps = {}, ...props }, fref) => {
-	const ref = React$1.useRef(new Group());
-	const spriteData = React$1.useRef(null);
-	const matRef = React$1.useRef(null);
-	const spriteRef = React$1.useRef(null);
-	const timerOffset = React$1.useRef(window.performance.now());
-	const currentFrame = React$1.useRef(startFrame);
-	const currentFrameName = React$1.useRef(frameName);
+	const ref = React.useRef(new Group());
+	const spriteData = React.useRef(null);
+	const matRef = React.useRef(null);
+	const spriteRef = React.useRef(null);
+	const timerOffset = React.useRef(window.performance.now());
+	const currentFrame = React.useRef(startFrame);
+	const currentFrameName = React.useRef(frameName);
 	const fpsInterval = fps > 0 ? 1e3 / fps : 0;
-	const [spriteTexture, setSpriteTexture] = React$1.useState(new Texture$1());
-	const totalFrames = React$1.useRef(0);
-	const [aspect$1, setAspect] = React$1.useState(new Vector3$2(1, 1, 1));
+	const [spriteTexture, setSpriteTexture] = React.useState(new Texture$1());
+	const totalFrames = React.useRef(0);
+	const [aspect$1, setAspect] = React.useState(new Vector3$2(1, 1, 1));
 	const flipOffset = flipX ? -1 : 1;
-	const pauseRef = React$1.useRef(pause);
-	const pos = React$1.useRef(offset);
-	const softEnd = React$1.useRef(false);
+	const pauseRef = React.useRef(pause);
+	const pos = React.useRef(offset);
+	const softEnd = React.useRef(false);
 	const { spriteObj, loadJsonAndTexture } = useSpriteLoader(null, null, animationNames, numberOfFrames, void 0, canvasRenderingContext2DSettings);
-	const frameNameRef = React$1.useRef(frameName);
-	const parseSpriteDataLite = React$1.useCallback((textureData, data) => {
+	const frameNameRef = React.useRef(frameName);
+	const parseSpriteDataLite = React.useCallback((textureData, data) => {
 		if (data === null) {
 			if (numberOfFrames) {
 				totalFrames.current = numberOfFrames;
@@ -9200,7 +9200,7 @@ const SpriteAnimator = /* @__PURE__ */ React$1.forwardRef(({ startFrame = 0, end
 		}
 		setSpriteTexture(textureData);
 	}, [numberOfFrames, playBackwards]);
-	const modifySpritePosition = React$1.useCallback(() => {
+	const modifySpritePosition = React.useCallback(() => {
 		if (!spriteData.current) return;
 		const { meta: { size: metaInfo }, frames } = spriteData.current;
 		const { w: frameW, h: frameH } = Array.isArray(frames) ? frames[0].sourceSize : frameName ? frames[frameName] ? frames[frameName][0].sourceSize : {
@@ -9229,15 +9229,15 @@ const SpriteAnimator = /* @__PURE__ */ React$1.forwardRef(({ startFrame = 0, end
 		frameName,
 		onStart
 	]);
-	const state = React$1.useMemo(() => ({
+	const state = React.useMemo(() => ({
 		current: pos.current,
 		offset: pos.current,
 		imageUrl: textureImageURL,
 		hasEnded: false,
 		ref: fref
 	}), [textureImageURL, fref]);
-	React$1.useImperativeHandle(fref, () => ref.current, []);
-	React$1.useLayoutEffect(() => {
+	React.useImperativeHandle(fref, () => ref.current, []);
+	React.useLayoutEffect(() => {
 		pos.current = offset;
 	}, [offset]);
 	const calculateAspectRatio = (width, height) => {
@@ -9247,7 +9247,7 @@ const SpriteAnimator = /* @__PURE__ */ React$1.forwardRef(({ startFrame = 0, end
 		spriteRef.current?.scale.copy(ret);
 		return ret;
 	};
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (spriteDataset) parseSpriteDataLite(spriteDataset?.spriteTexture?.clone(), spriteDataset.spriteData);
 		else if (textureImageURL && textureDataURL) loadJsonAndTexture(textureImageURL, textureDataURL);
 	}, [
@@ -9257,25 +9257,25 @@ const SpriteAnimator = /* @__PURE__ */ React$1.forwardRef(({ startFrame = 0, end
 		textureImageURL,
 		parseSpriteDataLite
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (spriteObj) parseSpriteDataLite(spriteObj?.spriteTexture?.clone(), spriteObj?.spriteData);
 	}, [spriteObj, parseSpriteDataLite]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		state.hasEnded = false;
 		if (spriteData.current && playBackwards === true) currentFrame.current = (spriteData.current.frames.length ?? 0) - 1;
 		else currentFrame.current = 0;
 	}, [playBackwards, state]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		modifySpritePosition();
 	}, [
 		spriteTexture,
 		flipX,
 		modifySpritePosition
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (autoPlay) pauseRef.current = false;
 	}, [autoPlay]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (currentFrameName.current !== frameName && frameName) {
 			currentFrame.current = 0;
 			currentFrameName.current = frameName;
@@ -9456,15 +9456,15 @@ const SpriteAnimator = /* @__PURE__ */ React$1.forwardRef(({ startFrame = 0, end
 * ```
 */
 function useAnimations(clips, root) {
-	const ref = React$1.useRef(null);
-	const [actualRef] = React$1.useState(() => root ? root instanceof Object3D$1 ? { current: root } : root : ref);
-	const [mixer] = React$1.useState(() => new AnimationMixer(void 0));
-	React$1.useLayoutEffect(() => {
+	const ref = React.useRef(null);
+	const [actualRef] = React.useState(() => root ? root instanceof Object3D$1 ? { current: root } : root : ref);
+	const [mixer] = React.useState(() => new AnimationMixer(void 0));
+	React.useLayoutEffect(() => {
 		if (root) actualRef.current = root instanceof Object3D$1 ? root : root.current;
 		mixer._root = actualRef.current;
 	});
-	const lazyActions = React$1.useRef({});
-	const api = React$1.useMemo(() => {
+	const lazyActions = React.useRef({});
+	const api = React.useMemo(() => {
 		const actions = {};
 		clips.forEach((clip) => Object.defineProperty(actions, clip.name, {
 			enumerable: true,
@@ -9482,7 +9482,7 @@ function useAnimations(clips, root) {
 		};
 	}, [clips]);
 	useFrame((state, delta) => mixer.update(delta));
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const currentRoot = actualRef.current;
 		return () => {
 			lazyActions.current = {};
@@ -9515,9 +9515,9 @@ function useAnimations(clips, root) {
 * ```
 */
 function useContextBridge(...contexts) {
-	const cRef = React$1.useRef([]);
-	cRef.current = contexts.map((context$11) => React$1.useContext(context$11));
-	return React$1.useMemo(() => ({ children }) => contexts.reduceRight((acc, Context$1, i$1) => /* @__PURE__ */ jsx(Context$1.Provider, {
+	const cRef = React.useRef([]);
+	cRef.current = contexts.map((context$11) => React.useContext(context$11));
+	return React.useMemo(() => ({ children }) => contexts.reduceRight((acc, Context$1, i$1) => /* @__PURE__ */ jsx(Context$1.Provider, {
 		value: cRef.current[i$1],
 		children: acc
 	}), children), []);
@@ -9563,7 +9563,7 @@ function createSpread(child, { keys = [
 		...spread,
 		children: inject(child)
 	};
-	else if (React$1.isValidElement(inject)) spread = {
+	else if (React.isValidElement(inject)) spread = {
 		...spread,
 		children: inject
 	};
@@ -9606,7 +9606,7 @@ function createSpread(child, { keys = [
 * } />
 * ```
 */
-const Clone = /* @__PURE__ */ React$1.forwardRef(({ isChild = false, object, children, deep, castShadow, receiveShadow, inject, keys, ...props }, forwardRef$1) => {
+const Clone = /* @__PURE__ */ React.forwardRef(({ isChild = false, object, children, deep, castShadow, receiveShadow, inject, keys, ...props }, forwardRef$1) => {
 	const config = {
 		keys,
 		deep,
@@ -9614,7 +9614,7 @@ const Clone = /* @__PURE__ */ React$1.forwardRef(({ isChild = false, object, chi
 		castShadow,
 		receiveShadow
 	};
-	object = React$1.useMemo(() => {
+	object = React.useMemo(() => {
 		if (isChild === false && !Array.isArray(object)) {
 			let isSkinned = false;
 			object.traverse((object$1) => {
@@ -9676,9 +9676,9 @@ const Clone = /* @__PURE__ */ React$1.forwardRef(({ isChild = false, object, chi
 * ```
 */
 const ComputedAttribute = ({ compute, name, ...props }) => {
-	const [bufferAttribute] = React$1.useState(() => new BufferAttribute(new Float32Array(0), 1));
-	const primitive = React$1.useRef(null);
-	React$1.useLayoutEffect(() => {
+	const [bufferAttribute] = React.useState(() => new BufferAttribute(new Float32Array(0), 1));
+	const primitive = React.useRef(null);
+	React.useLayoutEffect(() => {
 		if (primitive.current) {
 			const prim = primitive.current;
 			const attr = compute(prim.parent ?? prim.__r3f?.parent?.object);
@@ -9713,14 +9713,14 @@ const ComputedAttribute = ({ compute, name, ...props }) => {
 * </Center>
 * ```
 */
-const Center = /* @__PURE__ */ React$1.forwardRef(function Center$1({ children, object, disable, disableX, disableY, disableZ, left, right, top, bottom, front, back, onCentered, precise = true, cacheKey = 0, ...props }, fRef) {
-	const ref = React$1.useRef(null);
-	const outer = React$1.useRef(null);
-	const inner = React$1.useRef(null);
-	const [box3] = React$1.useState(() => new Box3());
-	const [center] = React$1.useState(() => new Vector3$2());
-	const [sphere] = React$1.useState(() => new Sphere$1());
-	React$1.useLayoutEffect(() => {
+const Center = /* @__PURE__ */ React.forwardRef(function Center$1({ children, object, disable, disableX, disableY, disableZ, left, right, top, bottom, front, back, onCentered, precise = true, cacheKey = 0, ...props }, fRef) {
+	const ref = React.useRef(null);
+	const outer = React.useRef(null);
+	const inner = React.useRef(null);
+	const [box3] = React.useState(() => new Box3());
+	const [center] = React.useState(() => new Vector3$2());
+	const [sphere] = React.useState(() => new Sphere$1());
+	React.useLayoutEffect(() => {
 		outer.current.matrixWorld.identity();
 		box3.setFromObject(object ?? inner.current, precise);
 		const width = box3.max.x - box3.min.x;
@@ -9764,7 +9764,7 @@ const Center = /* @__PURE__ */ React$1.forwardRef(function Center$1({ children,
 		center,
 		sphere
 	]);
-	React$1.useImperativeHandle(fRef, () => ref.current, []);
+	React.useImperativeHandle(fRef, () => ref.current, []);
 	return /* @__PURE__ */ jsx("group", {
 		ref,
 		...props,
@@ -9783,18 +9783,18 @@ const Center = /* @__PURE__ */ React$1.forwardRef(function Center$1({ children,
 /**
 * A simple counter example component. Click to increment, meta-click to decrement.
 */
-const Example = /* @__PURE__ */ React$1.forwardRef(({ font, color = "#cbcbcb", bevelSize = .04, debug = false, children, ...props }, fref) => {
-	const [counter, setCounter] = React$1.useState(0);
-	const incr = React$1.useCallback((x = 1) => setCounter(counter + x), [counter]);
-	const decr = React$1.useCallback((x = 1) => setCounter(counter - x), [counter]);
-	const api = React$1.useMemo(() => ({
+const Example = /* @__PURE__ */ React.forwardRef(({ font, color = "#cbcbcb", bevelSize = .04, debug = false, children, ...props }, fref) => {
+	const [counter, setCounter] = React.useState(0);
+	const incr = React.useCallback((x = 1) => setCounter(counter + x), [counter]);
+	const decr = React.useCallback((x = 1) => setCounter(counter - x), [counter]);
+	const api = React.useMemo(() => ({
 		incr,
 		decr
 	}), [incr, decr]);
-	React$1.useImperativeHandle(fref, () => api, [api]);
+	React.useImperativeHandle(fref, () => api, [api]);
 	return /* @__PURE__ */ jsxs("group", {
 		...props,
-		children: [/* @__PURE__ */ jsx(React$1.Suspense, {
+		children: [/* @__PURE__ */ jsx(React.Suspense, {
 			fallback: null,
 			children: /* @__PURE__ */ jsx(Center, {
 				top: true,
@@ -9816,7 +9816,7 @@ const Example = /* @__PURE__ */ React$1.forwardRef(({ font, color = "#cbcbcb", b
 //#endregion
 //#region src/core/Helpers/Sampler/Sampler.tsx
 function useSurfaceSampler(mesh, count = 16, transform, weight, instanceMesh) {
-	const [buffer, setBuffer] = React$1.useState(() => {
+	const [buffer, setBuffer] = React.useState(() => {
 		const arr = Array.from({ length: count }, () => [
 			1,
 			0,
@@ -9837,7 +9837,7 @@ function useSurfaceSampler(mesh, count = 16, transform, weight, instanceMesh) {
 		]).flat();
 		return new InstancedBufferAttribute(Float32Array.from(arr), 16);
 	});
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (typeof mesh.current === "undefined") return;
 		const sampler = new MeshSurfaceSampler(mesh.current);
 		if (weight) sampler.setWeightAttribute(weight);
@@ -9910,10 +9910,10 @@ function useSurfaceSampler(mesh, count = 16, transform, weight, instanceMesh) {
 * ```
 */
 function Sampler({ children, weight, transform, instances, mesh, count = 16, ...props }) {
-	const group = React$1.useRef(null);
-	const instancedRef = React$1.useRef(null);
-	const meshToSampleRef = React$1.useRef(null);
-	React$1.useLayoutEffect(() => {
+	const group = React.useRef(null);
+	const instancedRef = React.useRef(null);
+	const meshToSampleRef = React.useRef(null);
+	React.useLayoutEffect(() => {
 		instancedRef.current = instances?.current ?? group.current.children.find((c) => c.hasOwnProperty("instanceMatrix"));
 		meshToSampleRef.current = mesh?.current ?? group.current.children.find((c) => c.type === "Mesh");
 	}, [
@@ -9991,7 +9991,7 @@ function useDepthBuffer({ size = 256, frames = Infinity } = {}) {
 	const { width, height } = useThree((state) => state.size);
 	const w = size || width * dpr;
 	const h = size || height * dpr;
-	const depthConfig = React$1.useMemo(() => {
+	const depthConfig = React.useMemo(() => {
 		const depthTexture = new DepthTexture(w, h);
 		depthTexture.format = DepthFormat;
 		depthTexture.type = UnsignedShortType;
@@ -10097,23 +10097,23 @@ const defaultDataInterpolation = (p) => `Loading ${p.toFixed(2)}%`;
 */
 function Loader({ containerStyles, innerStyles, barStyles, dataStyles, dataInterpolation = defaultDataInterpolation, initialState = (active$1) => active$1 }) {
 	const { active, progress } = useProgress();
-	const progressRef = React$1.useRef(0);
-	const rafRef = React$1.useRef(0);
-	const progressSpanRef = React$1.useRef(null);
-	const [shown, setShown] = React$1.useState(initialState(active));
-	React$1.useEffect(() => {
+	const progressRef = React.useRef(0);
+	const rafRef = React.useRef(0);
+	const progressSpanRef = React.useRef(null);
+	const [shown, setShown] = React.useState(initialState(active));
+	React.useEffect(() => {
 		let t;
 		if (active !== shown) t = setTimeout(() => setShown(active), 300);
 		return () => clearTimeout(t);
 	}, [shown, active]);
-	const updateProgress = React$1.useCallback(() => {
+	const updateProgress = React.useCallback(() => {
 		if (!progressSpanRef.current) return;
 		progressRef.current += (progress - progressRef.current) / 2;
 		if (progressRef.current > .95 * progress || progress === 100) progressRef.current = progress;
 		progressSpanRef.current.innerText = dataInterpolation(progressRef.current);
 		if (progressRef.current < progress) rafRef.current = requestAnimationFrame(updateProgress);
 	}, [dataInterpolation, progress]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		updateProgress();
 		return () => cancelAnimationFrame(rafRef.current);
 	}, [updateProgress]);
@@ -10199,7 +10199,7 @@ function Preload({ all, scene, camera }) {
 	const gl = useThree(({ gl: gl$1 }) => gl$1);
 	const dCamera = useThree(({ camera: camera$1 }) => camera$1);
 	const dScene = useThree(({ scene: scene$1 }) => scene$1);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		const invisible = [];
 		if (all) (scene || dScene).traverse((object) => {
 			if (object.visible === false) {
@@ -10568,7 +10568,7 @@ useGLTF.setDecoderPath = (path) => {
 * <Gltf src="/model.glb" />
 * ```
 */
-const Gltf = /* @__PURE__ */ React$1.forwardRef(({ src, useDraco, useMeshOpt, extendLoader, ...props }, ref) => {
+const Gltf = /* @__PURE__ */ React.forwardRef(({ src, useDraco, useMeshOpt, extendLoader, ...props }, ref) => {
 	const { scene } = useGLTF(src, useDraco, useMeshOpt, extendLoader);
 	return /* @__PURE__ */ jsx(Clone, {
 		ref,
@@ -10673,14 +10673,14 @@ function AdaptiveDpr({ pixelated }) {
 	const current = useThree((state) => state.performance.current);
 	const initialDpr = useThree((state) => state.viewport.initialDpr);
 	const setDpr = useThree((state) => state.setDpr);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const domElement = gl.domElement;
 		return () => {
 			if (active) setDpr(initialDpr);
 			if (pixelated && domElement) domElement.style.imageRendering = "auto";
 		};
 	}, []);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		setDpr(current * initialDpr);
 		if (pixelated && gl.domElement) gl.domElement.style.imageRendering = current === 1 ? "auto" : "pixelated";
 	}, [current]);
@@ -10702,11 +10702,11 @@ function AdaptiveEvents() {
 	const get = useThree((state) => state.get);
 	const setEvents = useThree((state) => state.setEvents);
 	const current = useThree((state) => state.performance.current);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const enabled = get().events.enabled;
 		return () => setEvents({ enabled });
 	}, []);
-	React$1.useEffect(() => setEvents({ enabled: current === 1 }), [current]);
+	React.useEffect(() => setEvents({ enabled: current === 1 }), [current]);
 	return null;
 }
@@ -10882,8 +10882,8 @@ function call(ref, value) {
 	else if (ref != null) ref.current = value;
 }
 function useEffectfulState(fn, deps = [], cb) {
-	const [state, set] = React$1.useState();
-	React$1.useLayoutEffect(() => {
+	const [state, set] = React.useState();
+	React.useLayoutEffect(() => {
 		const value = fn();
 		set(value);
 		call(cb, value);
@@ -10905,7 +10905,7 @@ var import_stats_min = /* @__PURE__ */ __toESM(require_stats_min());
 */
 function Stats({ showPanel = 0, className, parent }) {
 	const stats = useEffectfulState(() => new import_stats_min.default(), []);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (stats) {
 			const node = parent && parent.current || document.body;
 			stats.showPanel(showPanel);
@@ -10940,13 +10940,13 @@ function Stats({ showPanel = 0, className, parent }) {
 * <Canvas><StatsGl /></Canvas>
 * ```
 */
-const StatsGl = /* @__PURE__ */ React$1.forwardRef(function StatsGl$1({ className, parent, id, clearStatsGlStyle, ...props }, fref) {
+const StatsGl = /* @__PURE__ */ React.forwardRef(function StatsGl$1({ className, parent, id, clearStatsGlStyle, ...props }, fref) {
 	const { renderer } = useThree();
-	const stats = React$1.useMemo(() => {
+	const stats = React.useMemo(() => {
 		return new Stats$1({ ...props });
 	}, [renderer]);
-	React$1.useImperativeHandle(fref, () => stats.domElement, [stats]);
-	React$1.useEffect(() => {
+	React.useImperativeHandle(fref, () => stats.domElement, [stats]);
+	React.useEffect(() => {
 		if (stats) {
 			const node = parent && parent.current || document.body;
 			node?.appendChild(stats.domElement);
@@ -11004,11 +11004,11 @@ const StatsGl = /* @__PURE__ */ React$1.forwardRef(function StatsGl$1({ classNam
 * ```
 */
 function Fisheye({ renderPriority = 1, zoom = 0, segments = 64, children, resolution = 896, ...props }) {
-	const sphere = React$1.useRef(null);
-	const cubeApi = React$1.useRef(null);
+	const sphere = React.useRef(null);
+	const cubeApi = React.useRef(null);
 	const { width, height } = useThree((state) => state.size);
-	const [orthoC] = React$1.useState(() => new OrthographicCamera$1());
-	React$1.useLayoutEffect(() => {
+	const [orthoC] = React.useState(() => new OrthographicCamera$1());
+	React.useLayoutEffect(() => {
 		orthoC.position.set(0, 0, 100);
 		orthoC.zoom = 100;
 		orthoC.left = width / -2;
@@ -11021,7 +11021,7 @@ function Fisheye({ renderPriority = 1, zoom = 0, segments = 64, children, resolu
 	const normal = new Vector3$2();
 	const sph = new Sphere$1(new Vector3$2(), radius);
 	const normalMatrix = new Matrix3();
-	const compute = React$1.useCallback((event, state, prev) => {
+	const compute = React.useCallback((event, state, prev) => {
 		state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
 		state.raycaster.setFromCamera(state.pointer, orthoC);
 		if (!state.raycaster.ray.intersectSphere(sph, normal)) return;
@@ -11092,13 +11092,13 @@ function UpdateCubeCamera({ api }) {
 * <Mask id={1} position={[1, 0, 0]}><circleGeometry /></Mask>
 * ```
 */
-const Mask = /* @__PURE__ */ React$1.forwardRef(({ id = 1, colorWrite = false, depthWrite = false, children, ...props }, fref) => {
-	const ref = React$1.useRef(null);
+const Mask = /* @__PURE__ */ React.forwardRef(({ id = 1, colorWrite = false, depthWrite = false, children, ...props }, fref) => {
+	const ref = React.useRef(null);
 	const renderer = useThree((state) => state.renderer);
-	const stencilReady = React$1.useRef(false);
-	const [ready, setReady] = React$1.useState(false);
-	React$1.useImperativeHandle(fref, () => ref.current, []);
-	React$1.useLayoutEffect(() => {
+	const stencilReady = React.useRef(false);
+	const [ready, setReady] = React.useState(false);
+	React.useImperativeHandle(fref, () => ref.current, []);
+	React.useLayoutEffect(() => {
 		if (stencilReady.current) return;
 		if ("backend" in renderer) {
 			renderer.stencil = true;
@@ -11175,7 +11175,7 @@ function useMask(id, inverse = false) {
 */
 function useCustomRaycast(camera, props) {
 	const pointer = useThree((state) => state.pointer);
-	const [raycast] = React$1.useState(() => {
+	const [raycast] = React.useState(() => {
 		const raycaster = new Raycaster();
 		if (props) applyProps(raycaster, props);
 		return function(_, intersects) {
@@ -11244,9 +11244,9 @@ function clear(renderer) {
 }
 function Container({ visible = true, canvasSize, scene, index, children, frames, rect, track }) {
 	const { scene: portalScene, camera: portalCamera, renderer, get, setEvents } = useThree();
-	const [isOffscreen, setOffscreen] = React$1.useState(false);
-	const mountedRef = React$1.useRef(true);
-	React$1.useEffect(() => {
+	const [isOffscreen, setOffscreen] = React.useState(false);
+	const mountedRef = React.useRef(true);
+	React.useEffect(() => {
 		mountedRef.current = true;
 		return () => {
 			mountedRef.current = false;
@@ -11278,7 +11278,7 @@ function Container({ visible = true, canvasSize, scene, index, children, frames,
 		after: "render",
 		priority: index
 	});
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		const curRect = rect.current;
 		if (curRect && (!visible || !isOffscreen)) {
 			const { position: position$1, isOffscreen: _isOffscreen } = computeContainerPosition(canvasSize, curRect);
@@ -11295,7 +11295,7 @@ function Container({ visible = true, canvasSize, scene, index, children, frames,
 		portalCamera,
 		canvasSize
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (!track) return;
 		const curRect = rect.current;
 		const old = get().events.connected;
@@ -11321,12 +11321,12 @@ function Container({ visible = true, canvasSize, scene, index, children, frames,
 	]);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, /* @__PURE__ */ jsx("group", { onPointerOver: () => null })] });
 }
-const CanvasView = /* @__PURE__ */ React$1.forwardRef(({ track, visible = true, index = 1, id, style, className, frames = Infinity, children, ...props }, fref) => {
-	const rect = React$1.useRef(null);
+const CanvasView = /* @__PURE__ */ React.forwardRef(({ track, visible = true, index = 1, id, style, className, frames = Infinity, children, ...props }, fref) => {
+	const rect = React.useRef(null);
 	const { size, scene } = useThree();
-	const [virtualScene] = React$1.useState(() => new Scene());
-	const [ready, toggle] = React$1.useReducer(() => true, false);
-	const compute = React$1.useCallback((event, state) => {
+	const [virtualScene] = React.useState(() => new Scene());
+	const [ready, toggle] = React.useReducer(() => true, false);
+	const compute = React.useCallback((event, state) => {
 		if (rect.current && track && track.current && event.target === track.current) {
 			const { width, height, left, top } = rect.current;
 			const x = event.clientX - left;
@@ -11335,7 +11335,7 @@ const CanvasView = /* @__PURE__ */ React$1.forwardRef(({ track, visible = true,
 			state.raycaster.setFromCamera(state.pointer, state.camera);
 		}
 	}, [rect, track]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (track) rect.current = track.current?.getBoundingClientRect();
 		toggle();
 	}, [track]);
@@ -11365,10 +11365,10 @@ const CanvasView = /* @__PURE__ */ React$1.forwardRef(({ track, visible = true,
 		})
 	});
 });
-const HtmlView = /* @__PURE__ */ React$1.forwardRef(({ as: El = "div", id, visible, className, style, index = 1, track, frames = Infinity, children, ...props }, fref) => {
-	const uuid = React$1.useId();
-	const ref = React$1.useRef(null);
-	React$1.useImperativeHandle(fref, () => ref.current);
+const HtmlView = /* @__PURE__ */ React.forwardRef(({ as: El = "div", id, visible, className, style, index = 1, track, frames = Infinity, children, ...props }, fref) => {
+	const uuid = React.useId();
+	const ref = React.useRef(null);
+	React.useImperativeHandle(fref, () => ref.current);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(El, {
 		ref,
 		id,
@@ -11404,8 +11404,8 @@ const HtmlView = /* @__PURE__ */ React$1.forwardRef(({ as: El = "div", id, visib
 * ```
 */
 const View = /* @__PURE__ */ (() => {
-	const _View = React$1.forwardRef((props, fref) => {
-		if (!React$1.useContext(context)) return /* @__PURE__ */ jsx(HtmlView, {
+	const _View = React.forwardRef((props, fref) => {
+		if (!React.useContext(context)) return /* @__PURE__ */ jsx(HtmlView, {
 			ref: fref,
 			...props
 		});
@@ -11432,8 +11432,8 @@ const easeInExpo = (x) => x === 0 ? 0 : Math.pow(2, 10 * x - 10);
 * ```
 */
 function Backdrop({ children, floor = .25, segments = 20, receiveShadow, ...props }) {
-	const ref = React$1.useRef(null);
-	React$1.useLayoutEffect(() => {
+	const ref = React.useRef(null);
+	React.useLayoutEffect(() => {
 		let i$1 = 0;
 		const offset = segments / segments / 2;
 		const position$1 = ref.current.attributes.position;
@@ -11481,9 +11481,9 @@ const boundingBoxSize = /* @__PURE__ */ new Vector3$2();
 * ```
 */
 const BBAnchor = ({ anchor, ...props }) => {
-	const ref = React$1.useRef(null);
-	const parentRef = React$1.useRef(null);
-	React$1.useEffect(() => {
+	const ref = React.useRef(null);
+	const parentRef = React.useRef(null);
+	React.useEffect(() => {
 		if (ref.current?.parent?.parent) {
 			parentRef.current = ref.current.parent;
 			ref.current.parent.parent.add(ref.current);
@@ -11515,7 +11515,7 @@ const isBox3 = (def) => def && def.isBox3;
 const interpolateFuncDefault = (t) => {
 	return 1 - Math.exp(-5 * t) + .007 * t;
 };
-const context$2 = React$1.createContext(null);
+const context$2 = React.createContext(null);
 /**
 * Calculates and provides the bounding box of children.
 * Useful for camera framing and object positioning.
@@ -11528,27 +11528,27 @@ const context$2 = React$1.createContext(null);
 * ```
 */
 function Bounds({ children, maxDuration = 1, margin = 1.2, observe, fit, clip, interpolateFunc = interpolateFuncDefault, onFit }) {
-	const ref = React$1.useRef(null);
+	const ref = React.useRef(null);
 	const { camera, size, invalidate } = useThree();
 	const controls = useThree((state) => state.controls);
-	const onFitRef = React$1.useRef(onFit);
+	const onFitRef = React.useRef(onFit);
 	onFitRef.current = onFit;
-	const origin = React$1.useRef({
+	const origin = React.useRef({
 		camPos: new Vector3$2(),
 		camRot: new Quaternion(),
 		camZoom: 1
 	});
-	const goal = React$1.useRef({
+	const goal = React.useRef({
 		camPos: void 0,
 		camRot: void 0,
 		camZoom: void 0,
 		camUp: void 0,
 		target: void 0
 	});
-	const animationState = React$1.useRef(AnimationState.NONE);
-	const t = React$1.useRef(0);
-	const [box] = React$1.useState(() => new Box3());
-	const api = React$1.useMemo(() => {
+	const animationState = React.useRef(AnimationState.NONE);
+	const t = React.useRef(0);
+	const [box] = React.useState(() => new Box3());
+	const api = React.useMemo(() => {
 		function getSize() {
 			const boxSize = box.getSize(new Vector3$2());
 			const center = box.getCenter(new Vector3$2());
@@ -11670,7 +11670,7 @@ function Bounds({ children, maxDuration = 1, margin = 1.2, observe, fit, clip, i
 		margin,
 		invalidate
 	]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (controls) {
 			const callback = () => {
 				if (controls && goal.current.target && animationState.current !== AnimationState.NONE) {
@@ -11687,8 +11687,8 @@ function Bounds({ children, maxDuration = 1, margin = 1.2, observe, fit, clip, i
 			return () => controls.removeEventListener("start", callback);
 		}
 	}, [controls]);
-	const count = React$1.useRef(0);
-	React$1.useLayoutEffect(() => {
+	const count = React.useRef(0);
+	React.useLayoutEffect(() => {
 		if (observe || count.current++ === 0) {
 			api.refresh();
 			if (fit) api.reset().fit();
@@ -11741,7 +11741,7 @@ function Bounds({ children, maxDuration = 1, margin = 1.2, observe, fit, clip, i
 	});
 }
 function useBounds() {
-	return React$1.useContext(context$2);
+	return React.useContext(context$2);
 }
 //#endregion
@@ -11950,7 +11950,7 @@ function setEnvProps(background, scene, defaultScene, texture$1, sceneProps = {}
 */
 function EnvironmentMap({ scene, background = false, map, ...config }) {
 	const defaultScene = useThree((state) => state.scene);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (map) return setEnvProps(background, scene, defaultScene, map, config);
 	});
 	return null;
@@ -11983,7 +11983,7 @@ function EnvironmentMap({ scene, background = false, map, ...config }) {
 function EnvironmentCube({ background = false, scene, blur, backgroundBlurriness, backgroundIntensity, backgroundRotation, environmentIntensity, environmentRotation, ...rest }) {
 	const texture$1 = useEnvironment(rest);
 	const defaultScene = useThree((state) => state.scene);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		return setEnvProps(background, scene, defaultScene, texture$1, {
 			backgroundBlurriness: blur ?? backgroundBlurriness,
 			backgroundIntensity,
@@ -11992,7 +11992,7 @@ function EnvironmentCube({ background = false, scene, blur, backgroundBlurriness
 			environmentRotation
 		});
 	});
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		return () => {
 			texture$1.dispose();
 		};
@@ -12033,19 +12033,19 @@ function EnvironmentCube({ background = false, scene, blur, backgroundBlurriness
 function EnvironmentPortal({ children, near = .1, far = 1e3, resolution = 256, frames = 1, map, background = false, blur, backgroundBlurriness, backgroundIntensity, backgroundRotation, environmentIntensity, environmentRotation, scene, files, path, preset = void 0, extensions: extensions$1 }) {
 	const gl = useThree((state) => state.gl);
 	const defaultScene = useThree((state) => state.scene);
-	const camera = React$1.useRef(null);
-	const [virtualScene] = React$1.useState(() => new Scene());
-	const fbo = React$1.useMemo(() => {
+	const camera = React.useRef(null);
+	const [virtualScene] = React.useState(() => new Scene());
+	const fbo = React.useMemo(() => {
 		const fbo$1 = new WebGLCubeRenderTarget(resolution);
 		fbo$1.texture.type = HalfFloatType;
 		return fbo$1;
 	}, [resolution]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		return () => {
 			fbo.dispose();
 		};
 	}, [fbo]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (frames === 1) {
 			const autoClear = gl.autoClear;
 			gl.autoClear = true;
@@ -12126,8 +12126,8 @@ function EnvironmentPortal({ children, near = .1, far = 1e3, resolution = 256, f
 function EnvironmentGround(props) {
 	const textureDefault = useEnvironment(props);
 	const texture$1 = props.map || textureDefault;
-	React$1.useMemo(() => extend({ GroundProjectedEnvImpl: GroundedSkybox }), []);
-	React$1.useEffect(() => {
+	React.useMemo(() => extend({ GroundProjectedEnvImpl: GroundedSkybox }), []);
+	React.useEffect(() => {
 		return () => {
 			textureDefault.dispose();
 		};
@@ -12135,7 +12135,7 @@ function EnvironmentGround(props) {
 	const height = props.ground?.height ?? 15;
 	const radius = props.ground?.radius ?? 60;
 	const scale$2 = props.ground?.scale ?? 1e3;
-	const args = React$1.useMemo(() => [
+	const args = React.useMemo(() => [
 		texture$1,
 		height,
 		radius
@@ -12263,10 +12263,10 @@ function Environment(props) {
 * </Float>
 * ```
 */
-const Float = /* @__PURE__ */ React$1.forwardRef(({ children, enabled = true, speed = 1, rotationIntensity = 1, floatIntensity = 1, floatingRange = [-.1, .1], autoInvalidate = false, ...props }, forwardRef$1) => {
-	const ref = React$1.useRef(null);
-	React$1.useImperativeHandle(forwardRef$1, () => ref.current, []);
-	const offset = React$1.useRef(Math.random() * 1e4);
+const Float = /* @__PURE__ */ React.forwardRef(({ children, enabled = true, speed = 1, rotationIntensity = 1, floatIntensity = 1, floatingRange = [-.1, .1], autoInvalidate = false, ...props }, forwardRef$1) => {
+	const ref = React.useRef(null);
+	React.useImperativeHandle(forwardRef$1, () => ref.current, []);
+	const offset = React.useRef(Math.random() * 1e4);
 	useFrame((state) => {
 		if (!enabled || speed === 0) return;
 		if (autoInvalidate) state.invalidate();
@@ -12300,14 +12300,14 @@ const Float = /* @__PURE__ */ React$1.forwardRef(({ children, enabled = true, sp
 * <Lightformer form="circle" intensity={2} position={[0, 5, -2]} />
 * ```
 */
-const Lightformer = /* @__PURE__ */ React$1.forwardRef(({ light, args, map, toneMapped = false, color = "white", form: Form = "rect", intensity = 1, scale: scale$2 = 1, target: target$1 = [
+const Lightformer = /* @__PURE__ */ React.forwardRef(({ light, args, map, toneMapped = false, color = "white", form: Form = "rect", intensity = 1, scale: scale$2 = 1, target: target$1 = [
 	0,
 	0,
 	0
 ], children, ...props }, forwardRef$1) => {
-	const ref = React$1.useRef(null);
-	React$1.useImperativeHandle(forwardRef$1, () => ref.current, []);
-	React$1.useLayoutEffect(() => {
+	const ref = React.useRef(null);
+	React.useImperativeHandle(forwardRef$1, () => ref.current, []);
+	React.useLayoutEffect(() => {
 		if (!children && !props.material) {
 			applyProps(ref.current.material, { color });
 			ref.current.material.color.multiplyScalar(intensity);
@@ -12318,7 +12318,7 @@ const Lightformer = /* @__PURE__ */ React$1.forwardRef(({ light, args, map, tone
 		children,
 		props.material
 	]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (!props.rotation) ref.current.quaternion.identity();
 		if (target$1 && !props.rotation) "boolean" === typeof target$1 ? ref.current.lookAt(0, 0, 0) : ref.current.lookAt(Array.isArray(target$1) ? new Vector3$2(...target$1) : target$1);
 	}, [target$1, props.rotation]);
@@ -12370,11 +12370,11 @@ const Lightformer = /* @__PURE__ */ React$1.forwardRef(({ light, args, map, tone
 * </Resize>
 * ```
 */
-const Resize = /* @__PURE__ */ React$1.forwardRef(({ children, width, height, depth, box3, precise = true, ...props }, fRef) => {
-	const ref = React$1.useRef(null);
-	const outer = React$1.useRef(null);
-	const inner = React$1.useRef(null);
-	React$1.useLayoutEffect(() => {
+const Resize = /* @__PURE__ */ React.forwardRef(({ children, width, height, depth, box3, precise = true, ...props }, fRef) => {
+	const ref = React.useRef(null);
+	const outer = React.useRef(null);
+	const inner = React.useRef(null);
+	React.useLayoutEffect(() => {
 		outer.current.matrixWorld.identity();
 		let box = box3 || new Box3().setFromObject(inner.current, precise);
 		const w = box.max.x - box.min.x;
@@ -12392,7 +12392,7 @@ const Resize = /* @__PURE__ */ React$1.forwardRef(({ children, width, height, de
 		box3,
 		precise
 	]);
-	React$1.useImperativeHandle(fRef, () => ref.current, []);
+	React.useImperativeHandle(fRef, () => ref.current, []);
 	return /* @__PURE__ */ jsx("group", {
 		ref,
 		...props,
@@ -12421,7 +12421,7 @@ const worldPos = /* @__PURE__ */ new Vector3$2();
 */
 const ScreenSizer = /* @__PURE__ */ forwardRef(({ scale: scale$2 = 1, ...props }, ref) => {
 	const container = useRef(null);
-	React$1.useImperativeHandle(ref, () => container.current, []);
+	React.useImperativeHandle(ref, () => container.current, []);
 	useFrame((state) => {
 		const obj = container.current;
 		if (!obj) return;
@@ -12444,8 +12444,8 @@ const ScreenSizer = /* @__PURE__ */ forwardRef(({ scale: scale$2 = 1, ...props }
 * <Shadow color="black" opacity={0.5} position={[0, 0, 0]} />
 * ```
 */
-const Shadow = /* @__PURE__ */ React$1.forwardRef(({ fog = false, renderOrder, depthWrite = false, colorStop = 0, color = "black", opacity = .5, ...props }, ref) => {
-	const canvas = React$1.useMemo(() => {
+const Shadow = /* @__PURE__ */ React.forwardRef(({ fog = false, renderOrder, depthWrite = false, colorStop = 0, color = "black", opacity = .5, ...props }, ref) => {
+	const canvas = React.useMemo(() => {
 		const canvas$1 = document.createElement("canvas");
 		canvas$1.width = 128;
 		canvas$1.height = 128;
@@ -12500,9 +12500,9 @@ function toVector3(value) {
 * <Sky sunPosition={[0, 1, 0]} />
 * ```
 */
-const Sky = /* @__PURE__ */ React$1.forwardRef(({ inclination = .6, azimuth = .1, distance: distance$1 = 1e3, mieCoefficient = .005, mieDirectionalG = .8, rayleigh = .5, turbidity = 10, sunPosition = calcPosFromAngles(inclination, azimuth), ...props }, ref) => {
+const Sky = /* @__PURE__ */ React.forwardRef(({ inclination = .6, azimuth = .1, distance: distance$1 = 1e3, mieCoefficient = .005, mieDirectionalG = .8, rayleigh = .5, turbidity = 10, sunPosition = calcPosFromAngles(inclination, azimuth), ...props }, ref) => {
 	const { isLegacy } = useThree();
-	const sky = React$1.useMemo(() => {
+	const sky = React.useMemo(() => {
 		if (isLegacy) {
 			const skyInstance = new Sky$1();
 			skyInstance.scale.setScalar(distance$1);
@@ -12513,10 +12513,10 @@ const Sky = /* @__PURE__ */ React$1.forwardRef(({ inclination = .6, azimuth = .1
 			return skyInstance;
 		}
 	}, [isLegacy, distance$1]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		sky.scale.setScalar(distance$1);
 	}, [sky, distance$1]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (!sky) return;
 		if (isLegacy) applyProps(sky.material, {
 			mieCoefficient,
@@ -12614,7 +12614,7 @@ const presets = {
 };
 function Refit({ radius, adjustCamera }) {
 	const api = useBounds();
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (adjustCamera) api.refresh().clip().fit();
 	}, [radius, adjustCamera]);
 	return null;
@@ -12632,7 +12632,7 @@ function Refit({ radius, adjustCamera }) {
 */
 function Stage({ children, center, adjustCamera = true, intensity = .5, shadows = "contact", environment = "city", preset = "rembrandt", ...props }) {
 	const config = typeof preset === "string" ? presets[preset] : preset;
-	const [{ radius, height }, set] = React$1.useState({
+	const [{ radius, height }, set] = React.useState({
 		radius: 0,
 		width: 0,
 		height: 0,
@@ -12646,7 +12646,7 @@ function Stage({ children, center, adjustCamera = true, intensity = .5, shadows
 	const accumulativeShadow = shadows === "accumulative" || shadows?.type === "accumulative";
 	const shadowSpread = { ...typeof shadows === "object" ? shadows : {} };
 	const environmentProps = !environment ? null : typeof environment === "string" ? { preset: environment } : environment;
-	const onCentered = React$1.useCallback((props$1) => {
+	const onCentered = React.useCallback((props$1) => {
 		const { width, height: height$1, depth, boundingSphere } = props$1;
 		set({
 			radius: boundingSphere.radius,
@@ -12753,8 +12753,8 @@ const MATCAP_ROOT = "https://rawcdn.githack.com/emmelleppi/matcaps/9b36ccaaf0a24
 function useMatcapTexture(id = 0, format = 1024, onLoad) {
 	const matcapList = (0, import_index_cjs$1.suspend)(() => fetch(LIST_URL$1).then((res) => res.json()), ["matcapList"]);
 	const DEFAULT_MATCAP = matcapList[0];
-	const numTot = React$1.useMemo(() => Object.keys(matcapList).length, []);
-	const url = `${MATCAP_ROOT}/${format}/${`${React$1.useMemo(() => {
+	const numTot = React.useMemo(() => Object.keys(matcapList).length, []);
+	const url = `${MATCAP_ROOT}/${format}/${`${React.useMemo(() => {
 		if (typeof id === "string") return id;
 		else if (typeof id === "number") return matcapList[id];
 		return null;
@@ -12787,11 +12787,11 @@ const LIST_URL = "https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/normals/
 function useNormalTexture(id = 0, settings = {}, onLoad) {
 	const { repeat = [1, 1], anisotropy = 1, offset = [0, 0] } = settings;
 	const normalsList = (0, import_index_cjs$1.suspend)(() => fetch(LIST_URL).then((res) => res.json()), ["normalsList"]);
-	const numTot = React$1.useMemo(() => Object.keys(normalsList).length, []);
+	const numTot = React.useMemo(() => Object.keys(normalsList).length, []);
 	const DEFAULT_NORMAL = normalsList[0];
 	const url = `${NORMAL_ROOT}/normals/${normalsList[id] || DEFAULT_NORMAL}`;
 	const normalTexture = useTexture(url, onLoad);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (!normalTexture) return;
 		normalTexture.wrapS = normalTexture.wrapT = RepeatWrapping;
 		normalTexture.repeat = new Vector2$2(repeat[0], repeat[1]);
@@ -12836,11 +12836,11 @@ const NormalTexture = ({ children, id, onLoad, ...settings }) => {
 * ```
 */
 function CycleRaycast({ onChanged, portal, preventDefault = true, scroll = true, keyCode = 9 }) {
-	const cycle = React$1.useRef(0);
+	const cycle = React.useRef(0);
 	const setEvents = useThree((state) => state.setEvents);
 	const get = useThree((state) => state.get);
 	const gl = useThree((state) => state.gl);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		let hits = [];
 		let lastEvent = void 0;
 		const prev = get().events.filter;
@@ -12935,7 +12935,7 @@ function useAspect(width, height, factor = 1) {
 * ```
 */
 function useCursor(hovered, onPointerOver = "pointer", onPointerOut = "auto", container = document.body) {
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (hovered) {
 			container.style.cursor = onPointerOver;
 			return () => void (container.style.cursor = onPointerOut);
@@ -12955,9 +12955,9 @@ function useCursor(hovered, onPointerOver = "pointer", onPointerOut = "auto", co
 * </ScreenSpace>
 * ```
 */
-const ScreenSpace = /* @__PURE__ */ React$1.forwardRef(({ children, depth = -1, ...rest }, ref) => {
-	const localRef = React$1.useRef(null);
-	React$1.useImperativeHandle(ref, () => localRef.current, []);
+const ScreenSpace = /* @__PURE__ */ React.forwardRef(({ children, depth = -1, ...rest }, ref) => {
+	const localRef = React.useRef(null);
+	React.useImperativeHandle(ref, () => localRef.current, []);
 	useFrame(({ camera }) => {
 		localRef.current.quaternion.copy(camera.quaternion);
 		localRef.current.position.copy(camera.position);
@@ -12974,7 +12974,7 @@ const ScreenSpace = /* @__PURE__ */ React$1.forwardRef(({ children, depth = -1,
 //#endregion
 //#region src/core/UI/Select/Select.tsx
-const context$1 = /* @__PURE__ */ React$1.createContext([]);
+const context$1 = /* @__PURE__ */ React.createContext([]);
 /**
 * Allows selecting/unselecting objects by clicking on them.
 * Supports multi-select (shift key) and box selection.
@@ -12992,30 +12992,30 @@ const context$1 = /* @__PURE__ */ React$1.createContext([]);
 * ```
 */
 function Select({ box, multiple, children, onChange, onChangePointerUp, border = "1px solid #55aaff", backgroundColor = "rgba(75, 160, 255, 0.1)", filter: customFilter = (item) => item, ...props }) {
-	const [downed, down] = React$1.useState(false);
+	const [downed, down] = React.useState(false);
 	const { setEvents, camera, raycaster, gl, controls, size, get } = useThree();
-	const [hovered, hover] = React$1.useState(false);
-	const [active, dispatch] = React$1.useReducer((state, { object, shift }) => {
+	const [hovered, hover] = React.useState(false);
+	const [active, dispatch] = React.useReducer((state, { object, shift }) => {
 		if (object === void 0) return [];
 		else if (Array.isArray(object)) return object;
 		else if (!shift) return state[0] === object ? [] : [object];
 		else if (state.includes(object)) return state.filter((o) => o !== object);
 		else return [object, ...state];
 	}, []);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (downed) onChange?.(active);
 		else onChangePointerUp?.(active);
 	}, [active, downed]);
-	const onClick = React$1.useCallback((e) => {
+	const onClick = React.useCallback((e) => {
 		e.stopPropagation();
 		dispatch({
 			object: customFilter([e.object])[0],
 			shift: multiple && e.shiftKey
 		});
 	}, []);
-	const onPointerMissed = React$1.useCallback((e) => !hovered && dispatch({}), [hovered]);
-	const ref = React$1.useRef(null);
-	React$1.useEffect(() => {
+	const onPointerMissed = React.useCallback((e) => !hovered && dispatch({}), [hovered]);
+	const ref = React.useRef(null);
+	React.useEffect(() => {
 		if (!box || !multiple) return;
 		const selBox = new SelectionBox(camera, ref.current);
 		const element = document.createElement("div");
@@ -13118,7 +13118,7 @@ function Select({ box, multiple, children, onChange, onChangePointerUp, border =
 	});
 }
 function useSelect() {
-	return React$1.useContext(context$1);
+	return React.useContext(context$1);
 }
 //#endregion
@@ -13519,7 +13519,7 @@ let GradientType = /* @__PURE__ */ function(GradientType$1) {
 }({});
 function GradientTexture({ stops, colors: colors$1, size = 1024, width = 16, type = GradientType.Linear, innerCircleRadius = 0, outerCircleRadius = "auto", ...props }) {
 	const gl = useThree((state) => state.gl);
-	const canvas = React$1.useMemo(() => {
+	const canvas = React.useMemo(() => {
 		const canvas$1 = document.createElement("canvas");
 		const context$11 = canvas$1.getContext("2d");
 		canvas$1.width = width;
@@ -13561,7 +13561,7 @@ const udRoundBox = /* @__PURE__ */ Fn(({ p, b, r }) => {
 	return length(max(abs(p).sub(b).add(r), float(0))).sub(r);
 });
 function useImageMaterial(tex, options) {
-	const uniforms = React$1.useMemo(() => ({
+	const uniforms = React.useMemo(() => ({
 		color: uniform(new THREE.Color("white")),
 		scale: uniform(new THREE.Vector2(1, 1)),
 		imageBounds: uniform(new THREE.Vector2(1, 1)),
@@ -13571,7 +13571,7 @@ function useImageMaterial(tex, options) {
 		grayscale: uniform(0),
 		opacity: uniform(1)
 	}), []);
-	const material = React$1.useMemo(() => {
+	const material = React.useMemo(() => {
 		const mat = new THREE.MeshBasicNodeMaterial();
 		mat.colorNode = Fn(() => {
 			const uvCoord = uv();
@@ -13600,7 +13600,7 @@ function useImageMaterial(tex, options) {
 		})();
 		return mat;
 	}, [tex, uniforms]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		uniforms.color.value.set(options.color);
 		uniforms.scale.value.set(options.scale[0], options.scale[1]);
 		uniforms.imageBounds.value.set(options.imageBounds[0], options.imageBounds[1]);
@@ -13622,7 +13622,7 @@ function useImageMaterial(tex, options) {
 		options.grayscale,
 		options.opacity
 	]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		material.toneMapped = options.toneMapped ?? true;
 		material.transparent = options.transparent ?? false;
 		if (options.side !== void 0) material.side = options.side;
@@ -13635,8 +13635,8 @@ function useImageMaterial(tex, options) {
 	]);
 	return material;
 }
-const ImageBase = /* @__PURE__ */ React$1.forwardRef(({ children, color = "white", segments = 1, scale: scale$2 = 1, zoom = 1, grayscale = 0, opacity = 1, radius = 0, texture: texture$1, toneMapped, transparent, side, ...props }, fref) => {
-	const ref = React$1.useRef(null);
+const ImageBase = /* @__PURE__ */ React.forwardRef(({ children, color = "white", segments = 1, scale: scale$2 = 1, zoom = 1, grayscale = 0, opacity = 1, radius = 0, texture: texture$1, toneMapped, transparent, side, ...props }, fref) => {
+	const ref = React.useRef(null);
 	const size = useThree((state) => state.size);
 	const planeBounds = Array.isArray(scale$2) ? [scale$2[0], scale$2[1]] : [scale$2, scale$2];
 	const img = texture$1.image;
@@ -13653,7 +13653,7 @@ const ImageBase = /* @__PURE__ */ React$1.forwardRef(({ children, color = "white
 		transparent,
 		side
 	});
-	React$1.useImperativeHandle(fref, () => ref.current, []);
+	React.useImperativeHandle(fref, () => ref.current, []);
 	return /* @__PURE__ */ jsxs("mesh", {
 		ref,
 		scale: Array.isArray(scale$2) ? [...scale$2, 1] : scale$2,
@@ -13673,7 +13673,7 @@ const ImageBase = /* @__PURE__ */ React$1.forwardRef(({ children, color = "white
 		]
 	});
 });
-const ImageWithUrl = /* @__PURE__ */ React$1.forwardRef(({ url, ...props }, ref) => {
+const ImageWithUrl = /* @__PURE__ */ React.forwardRef(({ url, ...props }, ref) => {
 	const texture$1 = useTexture(url);
 	return /* @__PURE__ */ jsx(ImageBase, {
 		...props,
@@ -13681,13 +13681,13 @@ const ImageWithUrl = /* @__PURE__ */ React$1.forwardRef(({ url, ...props }, ref)
 		ref
 	});
 });
-const ImageWithTexture = /* @__PURE__ */ React$1.forwardRef(({ url: _url, ...props }, ref) => {
+const ImageWithTexture = /* @__PURE__ */ React.forwardRef(({ url: _url, ...props }, ref) => {
 	return /* @__PURE__ */ jsx(ImageBase, {
 		...props,
 		ref
 	});
 });
-const Image = /* @__PURE__ */ React$1.forwardRef((props, ref) => {
+const Image = /* @__PURE__ */ React.forwardRef((props, ref) => {
 	if (props.url) return /* @__PURE__ */ jsx(ImageWithUrl, {
 		...props,
 		ref
@@ -13816,7 +13816,7 @@ function SoftShadows({ focus = 0, samples = 10, size = 25 }) {
 	const gl = useThree((state) => state.gl);
 	const scene = useThree((state) => state.scene);
 	const camera = useThree((state) => state.camera);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const original = (void 0).shadowmap_pars_fragment;
 		(void 0).shadowmap_pars_fragment = (void 0).shadowmap_pars_fragment.replace("#ifdef USE_SHADOWMAP", "#ifdef USE_SHADOWMAP\n" + pcss({
 			size,
@@ -14178,10 +14178,10 @@ function setBarycentricCoordinates(geometry$1) {
 	geometry$1.setAttribute("barycentric", new THREE.BufferAttribute(barycentricArray, 3));
 	return geometry$1;
 }
-const WireframeMaterial = /* @__PURE__ */ React$1.forwardRef(({ fillOpacity = .25, fillMix = 0, strokeOpacity = 1, thickness = .05, colorBackfaces = false, dashInvert = true, dash = false, dashRepeats = 4, dashLength = .5, squeeze = false, squeezeMin = .2, squeezeMax = 1, stroke = "#ff0000", backfaceStroke = "#0000ff", fill = "#00ff00", ...props }, fref) => {
+const WireframeMaterial = /* @__PURE__ */ React.forwardRef(({ fillOpacity = .25, fillMix = 0, strokeOpacity = 1, thickness = .05, colorBackfaces = false, dashInvert = true, dash = false, dashRepeats = 4, dashLength = .5, squeeze = false, squeezeMin = .2, squeezeMax = 1, stroke = "#ff0000", backfaceStroke = "#0000ff", fill = "#00ff00", ...props }, fref) => {
 	extend({ WireframeMaterial: WireframeMaterialImpl });
-	const ref = React$1.useRef(null);
-	React$1.useImperativeHandle(fref, () => ref.current, []);
+	const ref = React.useRef(null);
+	React.useImperativeHandle(fref, () => ref.current, []);
 	return /* @__PURE__ */ jsx("wireframeMaterial", {
 		ref,
 		...props,
@@ -14544,15 +14544,15 @@ var GridMaterialImpl = class extends MeshBasicNodeMaterial {
 * />
 * ```
 */
-const Grid = /* @__PURE__ */ React$1.forwardRef(({ args, cellColor = "#000000", sectionColor = "#2080ff", cellSize = .5, sectionSize = 1, followCamera = false, infiniteGrid = false, fadeDistance = 100, fadeStrength = 1, fadeFrom = 1, cellThickness = .5, sectionThickness = 1, side = THREE.BackSide, ...props }, fRef) => {
+const Grid = /* @__PURE__ */ React.forwardRef(({ args, cellColor = "#000000", sectionColor = "#2080ff", cellSize = .5, sectionSize = 1, followCamera = false, infiniteGrid = false, fadeDistance = 100, fadeStrength = 1, fadeFrom = 1, cellThickness = .5, sectionThickness = 1, side = THREE.BackSide, ...props }, fRef) => {
 	extend({ GridMaterial: GridMaterialImpl });
-	const ref = React$1.useRef(null);
-	const materialRef = React$1.useRef(null);
-	React$1.useImperativeHandle(fRef, () => ref.current, []);
-	const plane = React$1.useMemo(() => new THREE.Plane(), []);
-	const upVector = React$1.useMemo(() => new THREE.Vector3(0, 1, 0), []);
-	const zeroVector = React$1.useMemo(() => new THREE.Vector3(0, 0, 0), []);
-	const tempVec = React$1.useMemo(() => new THREE.Vector3(), []);
+	const ref = React.useRef(null);
+	const materialRef = React.useRef(null);
+	React.useImperativeHandle(fRef, () => ref.current, []);
+	const plane = React.useMemo(() => new THREE.Plane(), []);
+	const upVector = React.useMemo(() => new THREE.Vector3(0, 1, 0), []);
+	const zeroVector = React.useMemo(() => new THREE.Vector3(0, 0, 0), []);
+	const tempVec = React.useMemo(() => new THREE.Vector3(), []);
 	useFrame((state) => {
 		if (!materialRef.current) return;
 		plane.setFromNormalAndCoplanarPoint(upVector, zeroVector).applyMatrix4(ref.current.matrixWorld);
@@ -14588,16 +14588,16 @@ const Grid = /* @__PURE__ */ React$1.forwardRef(({ args, cellColor = "#000000",
 let spotlightIdCounter = 0;
 const generateSpotlightId = () => `spotlight_${spotlightIdCounter++}`;
 function VolumetricMesh({ opacity = 1, radiusTop, radiusBottom, depthBuffer, color = "white", distance: distance$1 = 5, angle = .15, attenuation = 5, anglePower = 5 }) {
-	const mesh = React$1.useRef(null);
+	const mesh = React.useRef(null);
 	const size = useThree((state) => state.size);
 	const camera = useThree((state) => state.camera);
 	const dpr = useThree((state) => state.viewport.dpr);
-	const [material] = React$1.useState(() => new SpotLightMaterial());
-	const [tempVec] = React$1.useState(() => new Vector3$2());
-	const [instanceId] = React$1.useState(() => generateSpotlightId());
+	const [material] = React.useState(() => new SpotLightMaterial());
+	const [tempVec] = React.useState(() => new Vector3$2());
+	const [instanceId] = React.useState(() => generateSpotlightId());
 	radiusTop = radiusTop === void 0 ? .1 : radiusTop;
 	radiusBottom = radiusBottom === void 0 ? angle * 7 : radiusBottom;
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		material.lightColor = typeof color === "string" || typeof color === "number" ? new Color$2(color) : color;
 		material.opacity = opacity;
 		material.attenuation = attenuation;
@@ -14647,7 +14647,7 @@ function VolumetricMesh({ opacity = 1, radiusTop, radiusBottom, depthBuffer, col
 	});
 	return /* @__PURE__ */ jsx("mesh", {
 		ref: mesh,
-		geometry: React$1.useMemo(() => {
+		geometry: React.useMemo(() => {
 			const geometry$1 = new CylinderGeometry(radiusTop, radiusBottom, distance$1, 128, 64, true);
 			geometry$1.applyMatrix4(new Matrix4().makeTranslation(0, -distance$1 / 2, 0));
 			geometry$1.applyMatrix4(new Matrix4().makeRotationX(-Math.PI / 2));
@@ -14661,9 +14661,9 @@ function VolumetricMesh({ opacity = 1, radiusTop, radiusBottom, depthBuffer, col
 		raycast: () => null
 	});
 }
-const SpotLight = /* @__PURE__ */ React$1.forwardRef(({ opacity = 1, radiusTop, radiusBottom, depthBuffer, color = "white", distance: distance$1 = 5, angle = .15, attenuation = 5, anglePower = 5, volumetric = true, debug = false, children, ...props }, ref) => {
-	const spotlight = React$1.useRef(null);
-	React$1.useImperativeHandle(ref, () => spotlight.current, []);
+const SpotLight = /* @__PURE__ */ React.forwardRef(({ opacity = 1, radiusTop, radiusBottom, depthBuffer, color = "white", distance: distance$1 = 5, angle = .15, attenuation = 5, anglePower = 5, volumetric = true, debug = false, children, ...props }, ref) => {
+	const spotlight = React.useRef(null);
+	React.useImperativeHandle(ref, () => spotlight.current, []);
 	return /* @__PURE__ */ jsxs("group", { children: [
 		debug && spotlight.current && /* @__PURE__ */ jsx("spotLightHelper", { args: [spotlight.current] }),
 		/* @__PURE__ */ jsx("spotLight", {
@@ -14703,10 +14703,10 @@ const genStar = (r) => {
 * <Stars radius={100} depth={50} count={5000} factor={4} fade />
 * ```
 */
-const Stars = /* @__PURE__ */ React$1.forwardRef(({ radius = 100, depth = 50, count = 5e3, saturation = 0, factor = 4, fade = false, speed = 1, children, ...props }, forwardRef$1) => {
-	React$1.useMemo(() => extend({ WebgpuStarfieldMaterial: StarfieldMaterial }), []);
-	const ref = React$1.useRef(null);
-	const { positions, colors: colors$1, sizes } = React$1.useMemo(() => {
+const Stars = /* @__PURE__ */ React.forwardRef(({ radius = 100, depth = 50, count = 5e3, saturation = 0, factor = 4, fade = false, speed = 1, children, ...props }, forwardRef$1) => {
+	React.useMemo(() => extend({ WebgpuStarfieldMaterial: StarfieldMaterial }), []);
+	const ref = React.useRef(null);
+	const { positions, colors: colors$1, sizes } = React.useMemo(() => {
 		const positions$1 = new Float32Array(count * 3);
 		const colors$2 = new Float32Array(count * 3);
 		const sizes$1 = new Float32Array(count);
@@ -14737,7 +14737,7 @@ const Stars = /* @__PURE__ */ React$1.forwardRef(({ radius = 100, depth = 50, co
 		radius,
 		saturation
 	]);
-	const geometry$1 = React$1.useMemo(() => {
+	const geometry$1 = React.useMemo(() => {
 		const geo = new PlaneGeometry(1, 1);
 		geo.deleteAttribute("normal");
 		geo.setAttribute("particlePosition", new InstancedBufferAttribute(positions, 3));
@@ -14753,10 +14753,10 @@ const Stars = /* @__PURE__ */ React$1.forwardRef(({ radius = 100, depth = 50, co
 	useFrame((state) => {
 		if (ref.current?.material) ref.current.material.setTime(state.elapsed * speed);
 	});
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (ref.current?.material) ref.current.material.setFade(fade ? 1 : 0);
 	}, [fade]);
-	React$1.useImperativeHandle(forwardRef$1, () => ref.current, []);
+	React.useImperativeHandle(forwardRef$1, () => ref.current, []);
 	return /* @__PURE__ */ jsx("instancedMesh", {
 		ref,
 		args: [
@@ -14788,7 +14788,7 @@ const normalizeVector = (v$1) => {
 	];
 };
 function usePropAsIsOrAsAttribute(count, prop, setDefault) {
-	return React$1.useMemo(() => {
+	return React.useMemo(() => {
 		if (prop !== void 0) if (isFloat32Array(prop)) return prop;
 		else {
 			if (prop instanceof Color$2) {
@@ -14803,18 +14803,18 @@ function usePropAsIsOrAsAttribute(count, prop, setDefault) {
 		return Float32Array.from({ length: count }, setDefault);
 	}, [prop]);
 }
-const Sparkles = /* @__PURE__ */ React$1.forwardRef(({ noise = 1, count = 100, speed = 1, opacity = 1, scale: scale$2 = 1, size, color, children, ...props }, forwardRef$1) => {
-	React$1.useMemo(() => extend({ WebgpuSparklesMaterial: SparklesMaterial }), []);
-	const ref = React$1.useRef(null);
+const Sparkles = /* @__PURE__ */ React.forwardRef(({ noise = 1, count = 100, speed = 1, opacity = 1, scale: scale$2 = 1, size, color, children, ...props }, forwardRef$1) => {
+	React.useMemo(() => extend({ WebgpuSparklesMaterial: SparklesMaterial }), []);
+	const ref = React.useRef(null);
 	const dpr = useThree((state) => state.viewport.dpr);
 	const _scale = normalizeVector(scale$2);
-	const positions = React$1.useMemo(() => Float32Array.from(Array.from({ length: count }, () => _scale.map((s) => MathUtils.randFloatSpread(s))).flat()), [count, ..._scale]);
+	const positions = React.useMemo(() => Float32Array.from(Array.from({ length: count }, () => _scale.map((s) => MathUtils.randFloatSpread(s))).flat()), [count, ..._scale]);
 	const sizes = usePropAsIsOrAsAttribute(count, size, Math.random);
 	const opacities = usePropAsIsOrAsAttribute(count, opacity);
 	const speeds = usePropAsIsOrAsAttribute(count, speed);
 	const noises = usePropAsIsOrAsAttribute(count * 3, noise);
 	const colors$1 = usePropAsIsOrAsAttribute(color === void 0 ? count * 3 : count, !isFloat32Array(color) ? new Color$2(color) : color, () => 1);
-	const geometry$1 = React$1.useMemo(() => {
+	const geometry$1 = React.useMemo(() => {
 		const geo = new PlaneGeometry(1, 1);
 		geo.deleteAttribute("normal");
 		geo.setAttribute("particlePosition", new InstancedBufferAttribute(positions, 3));
@@ -14836,7 +14836,7 @@ const Sparkles = /* @__PURE__ */ React$1.forwardRef(({ noise = 1, count = 100, s
 	useFrame((state) => {
 		if (ref.current && ref.current.material) ref.current.material.time = state.elapsed;
 	});
-	React$1.useImperativeHandle(forwardRef$1, () => ref.current, []);
+	React.useImperativeHandle(forwardRef$1, () => ref.current, []);
 	return /* @__PURE__ */ jsx("instancedMesh", {
 		ref,
 		args: [