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

package/core/core/index.mjs

@@ -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 { HorizontalBlurShader } from "three/examples/jsm/shaders/HorizontalBlurShader";
@@ -75,14 +75,14 @@ import { SelectionBox } from "three/examples/jsm/interactive/SelectionBox";
 * <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);
 	width = width * (Array.isArray(scale$2) ? scale$2[0] : scale$2 || 1);
 	height = 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 WebGLRenderTarget$1(resolution, resolution);
 		const renderTargetBlur$1 = new WebGLRenderTarget$1(resolution, resolution);
 		renderTargetBlur$1.texture.generateMipmaps = renderTarget$1.texture.generateMipmaps = false;
@@ -154,7 +154,7 @@ const ContactShadows = /* @__PURE__ */ React$1.forwardRef(({ scale: scale$2 = 10
 			scene.background = initialBackground;
 		}
 	});
-	React$1.useImperativeHandle(fref, () => ref.current, []);
+	React.useImperativeHandle(fref, () => ref.current, []);
 	return /* @__PURE__ */ jsxs("group", {
 		"rotation-x": Math.PI / 2,
 		...props,
@@ -257,7 +257,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,
@@ -280,19 +280,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),
@@ -334,11 +334,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();
@@ -375,15 +375,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 = 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];
@@ -400,9 +400,9 @@ const RandomizedLight = /* @__PURE__ */ React$1.forwardRef(({ castShadow = true,
 		length,
 		...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);
@@ -551,7 +551,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$1,
 			magFilter: LinearFilter$1,
@@ -562,7 +562,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;
 	}, [
@@ -571,7 +571,7 @@ function useFBO(width, height, settings) {
 		_width,
 		_height
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		return () => target$1.dispose();
 	}, []);
 	return target$1;
@@ -615,9 +615,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) {
@@ -650,9 +650,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);
@@ -681,11 +681,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,
@@ -693,9 +693,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;
@@ -731,17 +731,17 @@ const Edges = /* @__PURE__ */ React$1.forwardRef(({ threshold = 15, geometry: ex
 */
 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" });
@@ -759,7 +759,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;
@@ -774,11 +774,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$1,
@@ -796,7 +796,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;
@@ -805,7 +805,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);
 	}, [
@@ -814,7 +814,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();
@@ -823,10 +823,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$1());
-	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$1());
+	const uvCompute = React.useCallback((event, state, previous) => {
 		let parent = fboA.texture?.__r3f?.parent?.object;
 		while (parent && !(parent instanceof Object3D)) parent = parent.__r3f?.parent?.object;
 		if (!parent) return false;
@@ -837,7 +837,7 @@ const RenderTexture = /* @__PURE__ */ React$1.forwardRef(({ children, compute, w
 		if (!uv) return false;
 		state.raycaster.setFromCamera(state.pointer.set(uv.x * 2 - 1, uv.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,
@@ -926,7 +926,7 @@ function RenderHud$1({ defaultScene, defaultCamera, renderPriority = 1 }) {
 }
 function Hud$1({ children, renderPriority = 1 }) {
 	const { scene: defaultScene, camera: defaultCamera } = useThree();
-	const [hudScene] = React$1.useState(() => new Scene$1());
+	const [hudScene] = React.useState(() => new Scene$1());
 	return /* @__PURE__ */ jsx(Fragment$1, { children: createPortal(/* @__PURE__ */ jsxs(Fragment$1, { children: [children, /* @__PURE__ */ jsx(RenderHud$1, {
 		defaultScene,
 		defaultCamera,
@@ -952,12 +952,12 @@ function Hud$1({ 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 LineMaterial(), []);
+	const line2 = React.useMemo(() => segments ? new LineSegments2() : new Line2(), [segments]);
+	const lineMaterial = React.useMemo(() => new LineMaterial(), []);
 	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);
@@ -1005,15 +1005,15 @@ 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;
 	}, [dashed, lineMaterial]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const geom = lineGeom;
 		const mat = lineMaterial;
 		return () => {
@@ -1173,21 +1173,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 }));
@@ -1259,18 +1259,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;
@@ -1289,7 +1289,7 @@ const PerspectiveCamera = /* @__PURE__ */ React$1.forwardRef(({ envMap, resoluti
 			count++;
 		}
 	});
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (makeDefault) {
 			const oldCam = camera;
 			set(() => ({ camera: cameraRef.current }));
@@ -1388,15 +1388,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);
@@ -1409,12 +1409,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 });
@@ -1458,10 +1458,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 }) => {
@@ -1525,8 +1525,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]);
@@ -1551,15 +1551,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 });
@@ -1587,7 +1587,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);
@@ -1596,8 +1596,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();
 	}, [
@@ -1605,7 +1605,7 @@ const FlyControls = /* @__PURE__ */ React$1.forwardRef(({ domElement, ...props }
 		controls,
 		invalidate
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const callback = (e) => {
 			invalidate();
 			if (onChange) onChange(e);
@@ -1613,7 +1613,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 });
@@ -1631,7 +1631,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.
@@ -1672,19 +1672,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,
@@ -1728,7 +1728,7 @@ function KeyboardControls({ map, children, onChange, domElement }) {
 	});
 }
 function useKeyboardControls(sel) {
-	const [sub, get, store] = React$1.useContext(context$9);
+	const [sub, get, store] = React.useContext(context$9);
 	if (sel) return store(sel);
 	else return [sub, get];
 }
@@ -1744,7 +1744,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);
@@ -1754,8 +1754,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();
@@ -1778,7 +1778,7 @@ const MapControls = /* @__PURE__ */ React$1.forwardRef((props = { enableDamping:
 		invalidate,
 		explDomElement
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (makeDefault) {
 			const old = get().controls;
 			set({ controls });
@@ -1798,19 +1798,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;
-const MotionContext = /* @__PURE__ */ React$1.createContext(null);
+const MotionContext = /* @__PURE__ */ React.createContext(null);
 function useMotion() {
-	const context$10 = React$1.useContext(MotionContext);
+	const context$10 = React.useContext(MotionContext);
 	if (!context$10) throw new Error("useMotion hook must be used in a MotionPathControls component.");
 	return context$10;
 }
 function Debug({ points = 50, color = "black" }) {
 	const { path } = useMotion();
-	const [dots, setDots] = React$1.useState([]);
-	const material = React$1.useMemo(() => new MeshBasicMaterial$1({ 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$1({ 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;
@@ -1853,12 +1853,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 ? object : { current: camera },
 		path,
@@ -1869,7 +1869,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);
@@ -1880,11 +1880,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);
@@ -1924,7 +1924,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);
@@ -1935,11 +1935,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();
@@ -1950,7 +1950,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();
@@ -1978,7 +1978,7 @@ const OrbitControls = /* @__PURE__ */ React$1.forwardRef(({ makeDefault, camera,
 		invalidate,
 		setEvents
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (makeDefault) {
 			const old = get().controls;
 			set({ controls });
@@ -2004,7 +2004,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);
@@ -2015,8 +2015,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;
@@ -2032,7 +2032,7 @@ const PointerLockControls = /* @__PURE__ */ React$1.forwardRef(({ domElement, se
 			};
 		}
 	}, [enabled, controls]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const callback = (e) => {
 			invalidate();
 			if (onChange) onChange(e);
@@ -2057,7 +2057,7 @@ const PointerLockControls = /* @__PURE__ */ React$1.forwardRef(({ domElement, se
 		controls,
 		invalidate
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (makeDefault) {
 			const old = get().controls;
 			set({ controls });
@@ -2105,17 +2105,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]
@@ -2126,7 +2126,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 = "";
@@ -2141,12 +2141,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);
@@ -2178,12 +2178,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.
@@ -2210,12 +2210,12 @@ function useScroll() {
 */
 function ScrollControls({ eps: eps$1 = 1e-5, enabled = true, infinite, horizontal, pages = 1, distance = 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,
@@ -2247,7 +2247,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%";
@@ -2294,7 +2294,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"];
@@ -2355,9 +2355,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(() => {
@@ -2369,13 +2369,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)`;
 	});
@@ -2399,7 +2399,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
@@ -2417,15 +2417,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();
 	}, [
@@ -2434,7 +2434,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();
@@ -2455,10 +2455,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 });
@@ -2493,25 +2493,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);
@@ -2600,7 +2600,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.
@@ -2613,18 +2613,18 @@ const context$7 = /* @__PURE__ */ React$1.createContext(null);
 * </Clouds>
 * ```
 */
-const Clouds = /* @__PURE__ */ React$1.forwardRef(({ children, material = MeshLambertMaterial, materialFactory, texture = 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 = 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);
 	const MaterialFn = materialFactory ?? CloudMaterial;
-	const cloudMaterial = React$1.useMemo(() => {
+	const cloudMaterial = React.useMemo(() => {
 		const cloudMat = MaterialFn(material);
 		cloudMat.map = cloudTexture;
 		cloudMat.transparent = true;
@@ -2665,7 +2665,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, {
@@ -2716,7 +2716,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
@@ -2725,10 +2725,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),
@@ -2742,7 +2742,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,
@@ -2783,14 +2783,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
@@ -2807,8 +2807,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
 	});
@@ -2835,9 +2835,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,
@@ -2847,8 +2847,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));
@@ -2883,10 +2883,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);
@@ -2935,18 +2935,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$1());
-	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$1());
+	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 })] });
 });
 
@@ -3007,16 +3007,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$1)) throw new Error("Decal must have a Mesh as parent or specify its \"mesh\" prop");
@@ -3073,7 +3073,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", {
@@ -3110,10 +3110,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({
@@ -3183,22 +3183,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(() => {
@@ -3218,7 +3218,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]);
@@ -3264,12 +3264,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,
@@ -3278,9 +3278,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;
@@ -3327,7 +3327,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
@@ -3354,7 +3354,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
@@ -3364,10 +3364,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);
@@ -3377,7 +3377,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());
@@ -3385,7 +3385,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,
@@ -3429,7 +3429,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,
@@ -3447,13 +3447,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,
@@ -3468,8 +3468,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);
@@ -3479,7 +3479,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],
@@ -3514,10 +3514,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
@@ -3538,10 +3538,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,
@@ -3621,7 +3621,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);
 	});
@@ -3660,9 +3660,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 {
@@ -3696,14 +3696,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,
@@ -3884,21 +3884,21 @@ function setWireframeOverride(material, uniforms) {
 	material.transparent = true;
 }
 function useWireframeUniforms(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
@@ -3957,8 +3957,8 @@ function setBarycentricCoordinates(geometry$1, simplify) {
 }
 function WireframeWithCustomGeo({ geometry: customGeometry, simplify = false, ...props }) {
 	extend({ MeshWireframeMaterial: WireframeMaterial });
-	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(geom, simplify);
@@ -3978,10 +3978,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.uniforms]);
+	const objectRef = React.useRef(null);
+	const uniforms = React.useMemo(() => getUniforms(), [WireframeMaterialShaders.uniforms]);
 	useWireframeUniforms(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();
@@ -3991,7 +3991,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(parentMesh.material, uniforms);
@@ -4024,13 +4024,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();
@@ -4061,17 +4061,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);
@@ -4106,7 +4106,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;
@@ -4265,7 +4265,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;
@@ -4296,7 +4296,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);
@@ -4322,7 +4322,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);
@@ -4407,7 +4407,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 = React$1.useMemo(() => {
+	const texture = React.useMemo(() => {
 		const canvas = document.createElement("canvas");
 		canvas.width = 64;
 		canvas.height = 64;
@@ -4430,7 +4430,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();
@@ -4703,22 +4703,22 @@ function isRefObject(ref) {
 * </Html>
 * ```
 */
-const Html = /* @__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 = /* @__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)}`;
@@ -4730,7 +4730,7 @@ const Html = /* @__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();
@@ -4747,10 +4747,10 @@ const Html = /* @__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,
@@ -4778,11 +4778,11 @@ const Html = /* @__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,
@@ -4805,7 +4805,7 @@ const Html = /* @__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();
@@ -4883,7 +4883,7 @@ const Html = /* @__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.
@@ -4942,7 +4942,7 @@ const Html = /* @__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
@@ -4960,14 +4960,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";
@@ -4998,7 +4998,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) {
@@ -5020,7 +5020,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;
@@ -5032,11 +5032,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;
@@ -5182,15 +5182,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";
@@ -5227,7 +5227,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) {
@@ -5268,7 +5268,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;
@@ -5281,17 +5281,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++) {
@@ -5374,15 +5374,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";
@@ -5419,7 +5419,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) {
@@ -5450,7 +5450,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;
@@ -5462,11 +5462,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));
@@ -5474,7 +5474,7 @@ const PlaneSlider = ({ dir1, dir2, axis }) => {
 	const pos1 = fixed ? 1 / 7 : scale$2 / 7;
 	const length = 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, 0),
 		new Vector3$2(length, length, 0),
@@ -5596,18 +5596,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";
@@ -5643,7 +5643,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) {
@@ -5671,7 +5671,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;
@@ -5686,11 +5686,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 {
@@ -5800,7 +5800,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
@@ -5819,18 +5819,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();
@@ -5850,7 +5850,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);
@@ -5924,7 +5924,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", {
@@ -6024,7 +6024,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);
@@ -6034,9 +6034,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 ? object : object.current);
 		else if (group.current instanceof Object3D) controls.attach(group.current);
 		return () => void controls.detach();
@@ -6045,22 +6045,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);
@@ -6079,7 +6079,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 });
@@ -6140,8 +6140,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,
@@ -6166,13 +6166,13 @@ const PointMaterial = /* @__PURE__ */ React$1.forwardRef((props, ref) => {
 * />
 * ```
 */
-const PositionalAudio = /* @__PURE__ */ React$1.forwardRef(({ url, distance = 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 = 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);
@@ -6186,7 +6186,7 @@ const PositionalAudio = /* @__PURE__ */ React$1.forwardRef(({ url, distance = 1,
 		distance,
 		loop
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const _sound = sound.current;
 		camera.add(listener);
 		return () => {
@@ -6249,7 +6249,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();
@@ -6261,12 +6261,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$10, 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$10 || globalContext);
-	React$1.useLayoutEffect(() => subscribe(group), []);
+const Instance = /* @__PURE__ */ React.forwardRef(({ context: context$10, children, ...props }, ref) => {
+	React.useMemo(() => extend({ PositionMesh }), []);
+	const group = React.useRef(null);
+	React.useImperativeHandle(ref, () => group.current, []);
+	const { subscribe, getParent } = React.useContext(context$10 || globalContext);
+	React.useLayoutEffect(() => subscribe(group), []);
 	return /* @__PURE__ */ jsx("positionMesh", {
 		instance: getParent(),
 		instanceKey: group,
@@ -6289,33 +6289,33 @@ const Instance = /* @__PURE__ */ React$1.forwardRef(({ context: context$10, chil
 * </Instances>
 * ```
 */
-const Instances = /* @__PURE__ */ React$1.forwardRef(({ context: context$10, 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$10, 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(() => {
@@ -6346,7 +6346,7 @@ const Instances = /* @__PURE__ */ React$1.forwardRef(({ context: context$10, chi
 			iterations++;
 		}
 	});
-	const api = React$1.useMemo(() => ({
+	const api = React.useMemo(() => ({
 		getParent: () => parentRef,
 		subscribe: (ref$1) => {
 			setInstances((instances$1) => [...instances$1, ref$1]);
@@ -6392,7 +6392,7 @@ const Instances = /* @__PURE__ */ React$1.forwardRef(({ context: context$10, 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];
@@ -6418,7 +6418,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
@@ -6441,12 +6441,12 @@ function renderRecursive(render, components, results = []) {
 * ```
 */
 function createInstances() {
-	const context$10 = React$1.createContext(null);
-	return [React$1.forwardRef((props, fref) => /* @__PURE__ */ jsx(Instances, {
+	const context$10 = React.createContext(null);
+	return [React.forwardRef((props, fref) => /* @__PURE__ */ jsx(Instances, {
 		ref: fref,
 		context: context$10,
 		...props
-	})), React$1.forwardRef((props, fref) => /* @__PURE__ */ jsx(Instance, {
+	})), React.forwardRef((props, fref) => /* @__PURE__ */ jsx(Instance, {
 		ref: fref,
 		context: context$10,
 		...props
@@ -6466,10 +6466,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];
@@ -6532,9 +6532,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;
@@ -6547,7 +6547,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,
@@ -6577,18 +6577,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$2());
-	const textureLoader = React$1.useMemo(() => new TextureLoader(), []);
+	const [spriteTexture, setSpriteTexture] = React.useState(new Texture$2());
+	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;
@@ -6601,7 +6601,7 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad, ca
 		}
 		return new Vector3$2(finalMaxScaleW, finalMaxScaleH, 1);
 	}, []);
-	const getRowsAndColumns = React$1.useCallback((texture, totalFrames$1) => {
+	const getRowsAndColumns = React.useCallback((texture, totalFrames$1) => {
 		if (texture.image) {
 			const canvas = document.createElement("canvas");
 			const ctx = canvas.getContext("2d", canvasRenderingContext2DSettings);
@@ -6646,7 +6646,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) {
@@ -6675,7 +6675,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;
@@ -6744,7 +6744,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 = new Vector3$2(1, 1, 1);
 		if (json$1 === null) {
 			if (_spriteTexture && numberOfFrames) {
@@ -6822,7 +6822,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);
@@ -6831,13 +6831,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) => parseSpriteData(null, texture));
 	}, [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);
 	}, [
@@ -6845,7 +6845,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;
@@ -6857,7 +6857,7 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad, ca
 		loadStandaloneSprite,
 		parseSpriteData
 	]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		onLoad?.(spriteTexture, spriteData ?? null);
 	}, [
 		spriteTexture,
@@ -6874,9 +6874,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;
@@ -6897,29 +6897,29 @@ const geometry = /* @__PURE__ */ new PlaneGeometry$1(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$2());
-	const totalFrames = React$1.useRef(0);
-	const [aspect, setAspect] = React$1.useState(new Vector3$2(1, 1, 1));
+	const [spriteTexture, setSpriteTexture] = React.useState(new Texture$2());
+	const totalFrames = React.useRef(0);
+	const [aspect, 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;
@@ -6938,7 +6938,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 : {
@@ -6967,15 +6967,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) => {
@@ -6985,7 +6985,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);
 	}, [
@@ -6995,25 +6995,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;
@@ -7194,15 +7194,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 ? { 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 ? { current: root } : root : ref);
+	const [mixer] = React.useState(() => new AnimationMixer(void 0));
+	React.useLayoutEffect(() => {
 		if (root) actualRef.current = root instanceof Object3D ? 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,
@@ -7220,7 +7220,7 @@ function useAnimations(clips, root) {
 		};
 	}, [clips]);
 	useFrame((state, delta) => mixer.update(delta));
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const currentRoot = actualRef.current;
 		return () => {
 			lazyActions.current = {};
@@ -7253,9 +7253,9 @@ function useAnimations(clips, root) {
 * ```
 */
 function useContextBridge(...contexts) {
-	const cRef = React$1.useRef([]);
-	cRef.current = contexts.map((context$10) => React$1.useContext(context$10));
-	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$10) => React.useContext(context$10));
+	return React.useMemo(() => ({ children }) => contexts.reduceRight((acc, Context$1, i$1) => /* @__PURE__ */ jsx(Context$1.Provider, {
 		value: cRef.current[i$1],
 		children: acc
 	}), children), []);
@@ -7301,7 +7301,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
 	};
@@ -7344,7 +7344,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,
@@ -7352,7 +7352,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) => {
@@ -7414,9 +7414,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);
@@ -7451,14 +7451,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;
@@ -7502,7 +7502,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,
@@ -7521,18 +7521,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,
@@ -7554,7 +7554,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,
@@ -7575,7 +7575,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);
@@ -7648,10 +7648,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");
 	}, [
@@ -7729,7 +7729,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;
@@ -7835,23 +7835,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]);
@@ -7937,7 +7937,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) {
@@ -8306,7 +8306,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,
@@ -8411,14 +8411,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]);
@@ -8440,11 +8440,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;
 }
 
@@ -8620,8 +8620,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);
@@ -8643,7 +8643,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);
@@ -8678,13 +8678,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);
@@ -8738,11 +8738,11 @@ const StatsGl = /* @__PURE__ */ React$1.forwardRef(function StatsGl$1({ classNam
 * </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,
@@ -8766,9 +8766,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);
@@ -8797,7 +8797,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();
@@ -8807,8 +8807,8 @@ const RenderCubeTexture = /* @__PURE__ */ React$1.forwardRef(({ children, comput
 			cameraRef.current = null;
 		};
 	}, []);
-	const [vScene] = React$1.useState(() => new Scene$1());
-	React$1.useImperativeHandle(forwardRef$1, () => ({
+	const [vScene] = React.useState(() => new Scene$1());
+	React.useImperativeHandle(forwardRef$1, () => ({
 		scene: vScene,
 		get fbo() {
 			return readBufferIndex.current === 0 ? fboA : fboB;
@@ -8841,9 +8841,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");
@@ -8911,11 +8911,11 @@ function Container$1({ frames, renderPriority, children, camera, fboA, fboB, rea
 * ```
 */
 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$2());
-	React$1.useLayoutEffect(() => {
+	const [orthoC] = React.useState(() => new OrthographicCamera$2());
+	React.useLayoutEffect(() => {
 		orthoC.position.set(0, 0, 100);
 		orthoC.zoom = 100;
 		orthoC.left = width / -2;
@@ -8928,7 +8928,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;
@@ -9016,7 +9016,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$1());
+	const [hudScene] = React.useState(() => new Scene$1());
 	return /* @__PURE__ */ jsx(Fragment$1, { children: createPortal(/* @__PURE__ */ jsxs(Fragment$1, { children: [children, /* @__PURE__ */ jsx(RenderHud, {
 		defaultScene,
 		defaultCamera,
@@ -9049,13 +9049,13 @@ function Hud({ children, renderPriority = 1 }) {
 * <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;
@@ -9132,7 +9132,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) {
@@ -9201,9 +9201,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;
@@ -9235,7 +9235,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);
@@ -9252,7 +9252,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;
@@ -9278,12 +9278,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$1());
-	const [ready, toggle] = React$1.useReducer(() => true, false);
-	const compute = React$1.useCallback((event, state) => {
+	const [virtualScene] = React.useState(() => new Scene$1());
+	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;
@@ -9292,7 +9292,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]);
@@ -9322,10 +9322,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,
@@ -9361,8 +9361,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
 		});
@@ -9389,8 +9389,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;
@@ -9438,9 +9438,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);
@@ -9472,7 +9472,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.
@@ -9485,27 +9485,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());
@@ -9627,7 +9627,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) {
@@ -9644,8 +9644,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();
@@ -9698,7 +9698,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
@@ -9907,7 +9907,7 @@ function setEnvProps(background, scene, defaultScene, texture, 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;
@@ -9940,7 +9940,7 @@ function EnvironmentMap({ scene, background = false, map, ...config }) {
 function EnvironmentCube({ background = false, scene, blur, backgroundBlurriness, backgroundIntensity, backgroundRotation, environmentIntensity, environmentRotation, ...rest }) {
 	const texture = useEnvironment(rest);
 	const defaultScene = useThree((state) => state.scene);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		return setEnvProps(background, scene, defaultScene, texture, {
 			backgroundBlurriness: blur ?? backgroundBlurriness,
 			backgroundIntensity,
@@ -9949,7 +9949,7 @@ function EnvironmentCube({ background = false, scene, blur, backgroundBlurriness
 			environmentRotation
 		});
 	});
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		return () => {
 			texture.dispose();
 		};
@@ -9990,19 +9990,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$1());
-	const fbo = React$1.useMemo(() => {
+	const camera = React.useRef(null);
+	const [virtualScene] = React.useState(() => new Scene$1());
+	const fbo = React.useMemo(() => {
 		const fbo$1 = new WebGLCubeRenderTarget(resolution);
 		fbo$1.texture.type = HalfFloatType$1;
 		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;
@@ -10083,8 +10083,8 @@ function EnvironmentPortal({ children, near = .1, far = 1e3, resolution = 256, f
 function EnvironmentGround(props) {
 	const textureDefault = useEnvironment(props);
 	const texture = props.map || textureDefault;
-	React$1.useMemo(() => extend({ GroundProjectedEnvImpl: GroundedSkybox }), []);
-	React$1.useEffect(() => {
+	React.useMemo(() => extend({ GroundProjectedEnvImpl: GroundedSkybox }), []);
+	React.useEffect(() => {
 		return () => {
 			textureDefault.dispose();
 		};
@@ -10092,7 +10092,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,
 		height,
 		radius
@@ -10220,10 +10220,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();
@@ -10257,14 +10257,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);
@@ -10275,7 +10275,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]);
@@ -10327,11 +10327,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;
@@ -10349,7 +10349,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,
@@ -10378,7 +10378,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;
@@ -10401,8 +10401,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;
@@ -10457,9 +10457,9 @@ function toVector3(value) {
 * <Sky sunPosition={[0, 1, 0]} />
 * ```
 */
-const Sky = /* @__PURE__ */ React$1.forwardRef(({ inclination = .6, azimuth = .1, distance = 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 = 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);
@@ -10470,10 +10470,10 @@ const Sky = /* @__PURE__ */ React$1.forwardRef(({ inclination = .6, azimuth = .1
 			return skyInstance;
 		}
 	}, [isLegacy, distance]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		sky.scale.setScalar(distance);
 	}, [sky, distance]);
-	React$1.useLayoutEffect(() => {
+	React.useLayoutEffect(() => {
 		if (!sky) return;
 		if (isLegacy) applyProps(sky.material, {
 			mieCoefficient,
@@ -10571,7 +10571,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;
@@ -10589,7 +10589,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,
@@ -10603,7 +10603,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,
@@ -10710,8 +10710,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;
@@ -10744,11 +10744,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]);
@@ -10793,11 +10793,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;
@@ -10892,7 +10892,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);
@@ -10912,9 +10912,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);
@@ -10931,7 +10931,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.
@@ -10949,30 +10949,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");
@@ -11075,7 +11075,7 @@ function Select({ box, multiple, children, onChange, onChangePointerUp, border =
 	});
 }
 function useSelect() {
-	return React$1.useContext(context$1);
+	return React.useContext(context$1);
 }
 
 //#endregion