@tresjs/core 5.9.1 → 5.9.3

package/dist/tres.js

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.9.1
+  * version: v5.9.3
   * (c) 2026
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
@@ -8,15 +8,13 @@
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createRenderer, defineComponent, getCurrentInstance, h, isRef, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, shallowRef, toValue, triggerRef, unref, useSlots, watch, watchEffect, withCtx } from "vue";
 import * as THREE from "three";
 import { ACESFilmicToneMapping, ArrowHelper, BufferAttribute, Color, DirectionalLightHelper, DoubleSide, HemisphereLightHelper, Layers, Material, MathUtils, Mesh, MeshBasicMaterial, PCFShadowMap, PCFSoftShadowMap, PerspectiveCamera, PointLightHelper, REVISION, Scene, SpotLightHelper, Vector3, WebGLRenderer } from "three";
-import { createEventHook, createInjectionState, promiseTimeout, refDebounced, tryOnScopeDispose, unrefElement, useAsyncState, useDevicePixelRatio, useElementSize, useFps, useMemory, useRafFn, useTimeout, useWindowSize, whenever } from "@vueuse/core";
+import { createEventHook, createInjectionState, promiseTimeout, refDebounced, tryOnScopeDispose, unrefElement, useAsyncState, useDevicePixelRatio, useElementSize, useFps, useIntervalFn, useMemory, useRafFn, useTimeout, useWindowSize, whenever } from "@vueuse/core";
 import { camel, isEqual, isFunction, isNumber, isObject, isString, isUndefined } from "radashi";
 import { forwardHtmlEvents, getVoidObject } from "@pmndrs/pointer-events";
 import { setupDevtoolsPlugin } from "@vue/devtools-api";
 import { RectAreaLightHelper } from "three/examples/jsm/helpers/RectAreaLightHelper.js";
-
 //#region package.json
-var version = "5.9.1";
-
+var version = "5.9.3";
 //#endregion
 //#region src/utils/makeMap.ts
 /**
@@ -32,16 +30,10 @@ function makeMap(str) {
 	for (const key of str.split(",")) map[key] = 1;
 	return (val) => val in map;
 }
-
-//#endregion
-//#region src/utils/is/dom.ts
-const HTML_TAGS = "html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot";
-const isHTMLTag = /* @__PURE__ */ makeMap(HTML_TAGS);
-
+const isHTMLTag = /* #__PURE__ */ makeMap("html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot");
 //#endregion
 //#region src/utils/is/util.ts
 const createTypeGuard = (property) => (value) => isObject(value) && property in value && !!value[property];
-
 //#endregion
 //#region src/utils/is/three.ts
 /**
@@ -205,7 +197,6 @@ const isScene = createTypeGuard("isScene");
 * ```
 */
 const isGroup = createTypeGuard("isGroup");
-
 //#endregion
 //#region src/utils/is/tres.ts
 const isVectorLike = (value) => value !== null && typeof value === "object" && "set" in value && typeof value.set === "function";
@@ -291,7 +282,6 @@ const isWebGPURenderer = createTypeGuard("isRenderer");
 * @see {@link isWebGPURenderer}
 */
 const isWebGLRenderer = createTypeGuard("isWebGLRenderer");
-
 //#endregion
 //#region src/utils/array.ts
 /**
@@ -308,7 +298,6 @@ const filterInPlace = (array, callbackFn) => {
 	array.length = i;
 	return array;
 };
-
 //#endregion
 //#region src/utils/logger.ts
 /**
@@ -317,7 +306,7 @@ const filterInPlace = (array, callbackFn) => {
 */
 function resolveRuntimeMode() {
 	try {
-		const modeFromImportMeta = import.meta?.env?.MODE;
+		const modeFromImportMeta = import.meta.env?.MODE;
 		if (modeFromImportMeta) return modeFromImportMeta;
 	} catch {}
 	return typeof process !== "undefined" && process.env && process.env.NODE_ENV ? process.env.NODE_ENV : "production";
@@ -350,11 +339,10 @@ function logWarning(...args) {
 function logMessage(name, value) {
 	if (!isProd) console.log(`${logPrefix} - ${name}:`, value);
 }
-
 //#endregion
 //#region src/utils/index.ts
 function disposeMaterial(material) {
-	const hasMap = (material$1) => "map" in material$1 && !!material$1.map;
+	const hasMap = (material) => "map" in material && !!material.map;
 	if (hasMap(material)) material.map.dispose();
 	material.dispose();
 }
@@ -396,14 +384,14 @@ function attach(parent, child, type) {
 	const INDEX_REGEX = /-\d+$/;
 	if (isString(type)) {
 		if (INDEX_REGEX.test(type)) {
-			const { target: target$1, key: key$1 } = resolve(parent, type.replace(INDEX_REGEX, ""));
-			if (!Array.isArray(target$1[key$1])) {
-				const previousAttach = target$1[key$1];
+			const { target, key } = resolve(parent, type.replace(INDEX_REGEX, ""));
+			if (!Array.isArray(target[key])) {
+				const previousAttach = target[key];
 				const augmentedArray = [];
 				augmentedArray.__tresDetach = () => {
-					if (augmentedArray.every((v) => isUndefined(v))) target$1[key$1] = previousAttach;
+					if (augmentedArray.every((v) => isUndefined(v))) target[key] = previousAttach;
 				};
-				target$1[key$1] = augmentedArray;
+				target[key] = augmentedArray;
 			}
 		}
 		const { target, key } = resolve(parent, type);
@@ -489,7 +477,6 @@ function doRemoveDeregister(node, context) {
 	if (isTresCamera(node)) context.camera.deregisterCamera(node);
 	invalidateInstance(node);
 }
-
 //#endregion
 //#region src/composables/useLoader/index.ts
 /**
@@ -499,8 +486,8 @@ function doRemoveDeregister(node, context) {
 * @param options - Optional configuration for the loader
 * @returns UseAsyncState composable with the loaded model
 */
-function useLoader(Loader$1, path, options) {
-	const proto = new Loader$1(options?.manager);
+function useLoader(Loader, path, options) {
+	const proto = new Loader(options?.manager);
 	const progress = reactive({
 		loaded: 0,
 		total: 0,
@@ -508,10 +495,10 @@ function useLoader(Loader$1, path, options) {
 	});
 	if (options?.extensions) options.extensions(proto);
 	const initialPath = toValue(path);
-	const result = useAsyncState((path$1) => new Promise((resolve$1, reject) => {
-		const assetPath = path$1 || initialPath || "";
-		proto.load(assetPath, (result$1) => {
-			resolve$1(result$1);
+	const result = useAsyncState((path) => new Promise((resolve, reject) => {
+		const assetPath = path || initialPath || "";
+		proto.load(assetPath, (result) => {
+			resolve(result);
 		}, (event) => {
 			progress.loaded = event.loaded;
 			progress.total = event.total;
@@ -537,16 +524,15 @@ function useLoader(Loader$1, path, options) {
 	});
 	return {
 		...result,
-		load: (path$1) => {
-			result.execute(0, path$1);
+		load: (path) => {
+			result.execute(0, path);
 		},
 		progress
 	};
 }
-
 //#endregion
-//#region src/composables/useLoader/component.vue?vue&type=script&setup=true&lang.ts
-var component_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+//#region src/composables/useLoader/component.vue
+var component_default = /* @__PURE__ */ defineComponent({
 	__name: "component",
 	props: {
 		loader: {
@@ -589,11 +575,6 @@ var component_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		};
 	}
 });
-
-//#endregion
-//#region src/composables/useLoader/component.vue
-var component_default = component_vue_vue_type_script_setup_true_lang_default;
-
 //#endregion
 //#region src/composables/useCamera/index.ts
 /**
@@ -610,9 +591,10 @@ const useCameraManager = ({ sizes }) => {
 	* @param cameraOrUuid - The camera or its UUID to set as active
 	*/
 	const setActiveCamera = (cameraOrUuid) => {
-		const camera = isCamera(cameraOrUuid) ? cameraOrUuid : cameras.value.find((camera$1) => camera$1.uuid === cameraOrUuid);
+		const camera = isCamera(cameraOrUuid) ? cameraOrUuid : cameras.value.find((camera) => camera.uuid === cameraOrUuid);
 		if (!camera) return;
-		cameras.value = [camera, ...cameras.value.filter(({ uuid }) => uuid !== camera.uuid)];
+		const otherCameras = cameras.value.filter(({ uuid }) => uuid !== camera.uuid);
+		cameras.value = [camera, ...otherCameras];
 	};
 	/**
 	* Register a camera
@@ -651,7 +633,6 @@ const useCameraManager = ({ sizes }) => {
 		setActiveCamera
 	};
 };
-
 //#endregion
 //#region src/utils/graph.ts
 function buildGraph(object) {
@@ -671,7 +652,6 @@ function buildGraph(object) {
 	});
 	return data;
 }
-
 //#endregion
 //#region src/composables/useGraph/index.ts
 const useGraph = (object) => {
@@ -681,7 +661,6 @@ const useGraph = (object) => {
 		return buildGraph(obj);
 	});
 };
-
 //#endregion
 //#region src/utils/createPriorityEventHook.ts
 function createPriorityEventHook() {
@@ -732,12 +711,10 @@ function createPriorityEventHook() {
 		}
 	};
 }
-
 //#endregion
 //#region src/core/catalogue.ts
 const catalogue = ref({});
 const extend = (objects) => Object.assign(catalogue.value, objects);
-
 //#endregion
 //#region src/composables/useRenderer/pixelRatio.ts
 const setPixelRatio = (renderer, systemDpr, userDpr) => {
@@ -750,11 +727,9 @@ const setPixelRatio = (renderer, systemDpr, userDpr) => {
 	else newDpr = systemDpr;
 	if (newDpr !== renderer.getPixelRatio?.()) renderer.setPixelRatio(newDpr);
 };
-
 //#endregion
 //#region src/core/revision.ts
 const revision = Number.parseInt(REVISION.replace("dev", ""));
-
 //#endregion
 //#region src/utils/createTimer.ts
 /**
@@ -792,7 +767,6 @@ function createTimer() {
 		};
 	}
 }
-
 //#endregion
 //#region src/composables/useCreateRafLoop/index.ts
 /**
@@ -833,19 +807,22 @@ const useCreateRafLoop = (cycleFn, { fpsLimit } = {}) => {
 		onLoop: eventHooks.after.on
 	};
 };
-
 //#endregion
 //#region src/utils/error.ts
 var TresRendererError = class extends Error {
+	code;
 	name = "TresRendererError";
 	constructor(message, code, options) {
 		super(message, options);
 		this.code = code;
 	}
 };
-
 //#endregion
 //#region src/composables/useRenderer/useRendererManager.ts
+/**
+* Three.js revision where `WebGPURenderer` removed `PCFSoftShadowMap`.
+*/
+const WEBGPU_PCF_SOFT_REMOVED_REVISION = 186;
 function useRendererManager({ scene, canvas, options, fpsLimit, contextParts: { sizes, camera } }) {
 	const getRenderer = () => {
 		if (isFunction(options.renderer)) return options.renderer({
@@ -990,7 +967,7 @@ Error details: ${rendererError.message}`, rendererError);
 	});
 	watchEffect(() => {
 		if (!isInitialized.value) return;
-		const fallback = isWebGPURenderer(renderer) ? PCFSoftShadowMap : PCFShadowMap;
+		const fallback = isWebGPURenderer(renderer) && revision < WEBGPU_PCF_SOFT_REMOVED_REVISION ? PCFSoftShadowMap : PCFShadowMap;
 		renderer.shadowMap.type = options.shadowMapType ?? fallback;
 		forceMaterialUpdate();
 	});
@@ -1013,7 +990,6 @@ Error details: ${rendererError.message}`, rendererError);
 		error
 	};
 }
-
 //#endregion
 //#region src/composables/useSizes/index.ts
 function useSizes(windowSize, canvas, debounceMs = 10) {
@@ -1028,7 +1004,6 @@ function useSizes(windowSize, canvas, debounceMs = 10) {
 		aspectRatio: computed(() => debouncedReactiveWidth.value / debouncedReactiveHeight.value)
 	};
 }
-
 //#endregion
 //#region src/composables/useEventManager/index.ts
 function useEventManager({ canvas, contextParts: { scene, camera, renderer } }) {
@@ -1041,7 +1016,6 @@ function useEventManager({ canvas, contextParts: { scene, camera, renderer } })
 	voidObject.addEventListener("click", pointerMissedEventHook.trigger);
 	return { onPointerMissed: pointerMissedEventHook.on };
 }
-
 //#endregion
 //#region src/composables/useTresContextProvider/index.ts
 const INJECTION_KEY = "useTres";
@@ -1089,25 +1063,23 @@ const useTresContext = () => {
 	if (!ctx) throw new Error("useTresContext must be used together with useTresContextProvider.\n You probably tried to use it above or on the same level as a TresCanvas component.\n It should be used in child components of a TresCanvas instance.");
 	return ctx;
 };
-
 //#endregion
 //#region src/composables/useTres/index.ts
 function useTres() {
-	const { scene, renderer, camera, sizes, controls, extend: extend$1, events, isWebGPU } = useTresContext();
+	const { scene, renderer, camera, sizes, controls, extend, events, isWebGPU } = useTresContext();
 	return {
 		scene,
 		renderer: renderer.instance,
 		camera: camera.activeCamera,
 		sizes,
 		controls,
-		extend: extend$1,
+		extend,
 		events,
 		isWebGPU,
 		invalidate: renderer.invalidate,
 		advance: renderer.advance
 	};
 }
-
 //#endregion
 //#region src/composables/useLoop/index.ts
 /**
@@ -1140,7 +1112,6 @@ const useLoop = () => {
 		render
 	};
 };
-
 //#endregion
 //#region src/utils/primitive/createRetargetingProxy.ts
 function createRetargetingProxy(target, getters = {}, setters = {}) {
@@ -1165,7 +1136,6 @@ function createRetargetingProxy(target, getters = {}, setters = {}) {
 	});
 	return proxy;
 }
-
 //#endregion
 //#region src/utils/pointerEvents.ts
 const supportedPointerEvents = [
@@ -1199,7 +1169,6 @@ const pointerEventsMapVueToThree = {
 	onWheel: "wheel"
 };
 const isSupportedPointerEvent = (event) => supportedPointerEvents.includes(event);
-
 //#endregion
 //#region src/core/nodeOps.ts
 const textNodeSymbol = Symbol("tresTextNode");
@@ -1269,12 +1238,12 @@ const nodeOps = ({ context, options = { primitivePrefix: "" } }) => {
 		if (!child) return;
 		parent = parent || scene;
 		if (isTextNode(child) || isCommentNode(child)) {
-			const parentInstance$1 = parent.__tres ? parent : prepareTresInstance(parent, {}, context);
-			child.__tres.parent = parentInstance$1;
-			if (parentInstance$1.__tres.objects) {
-				const insertIndex = anchor ? parentInstance$1.__tres.objects.findIndex((obj) => obj === anchor) : -1;
-				if (insertIndex >= 0) parentInstance$1.__tres.objects.splice(insertIndex, 0, child);
-				else parentInstance$1.__tres.objects.push(child);
+			const parentInstance = parent.__tres ? parent : prepareTresInstance(parent, {}, context);
+			child.__tres.parent = parentInstance;
+			if (parentInstance.__tres.objects) {
+				const insertIndex = anchor ? parentInstance.__tres.objects.findIndex((obj) => obj === anchor) : -1;
+				if (insertIndex >= 0) parentInstance.__tres.objects.splice(insertIndex, 0, child);
+				else parentInstance.__tres.objects.push(child);
 			}
 			return;
 		}
@@ -1309,8 +1278,10 @@ const nodeOps = ({ context, options = { primitivePrefix: "" } }) => {
 		}
 		dispose = isUndefined(dispose) ? "default" : dispose;
 		const userDispose = node.__tres?.dispose;
-		if (!isUndefined(userDispose)) if (userDispose === null) dispose = false;
-		else dispose = userDispose;
+		if (!isUndefined(userDispose)) {
+			if (userDispose === null) dispose = false;
+			else dispose = userDispose;
+		}
 		const isPrimitive = node.__tres?.primitive;
 		const shouldDispose = dispose === "default" ? !isPrimitive : !!dispose;
 		if (node.__tres && "objects" in node.__tres) [...node.__tres.objects].forEach((obj) => remove(obj, dispose));
@@ -1355,12 +1326,12 @@ const nodeOps = ({ context, options = { primitivePrefix: "" } }) => {
 			if (instanceName && prevArgs.length && !isEqual(prevArgs, args)) {
 				const newInstance = new catalogue.value[instanceName](...nextValue);
 				const descriptors = Object.getOwnPropertyDescriptors(newInstance);
-				Object.entries(descriptors).forEach(([key$1, descriptor]) => {
+				Object.entries(descriptors).forEach(([key, descriptor]) => {
 					if (!descriptor.writable && !descriptor.set) return;
-					if (key$1 in prevNode) try {
-						prevNode[key$1] = newInstance[key$1];
+					if (key in prevNode) try {
+						prevNode[key] = newInstance[key];
 					} catch (e) {
-						console.warn(`Could not set property ${key$1} on ${instanceName}:`, e);
+						console.warn(`Could not set property ${key} on ${instanceName}:`, e);
 					}
 				});
 				root = prevNode;
@@ -1387,19 +1358,23 @@ const nodeOps = ({ context, options = { primitivePrefix: "" } }) => {
 		let value = nextValue;
 		if (value === "") value = true;
 		if (isFunction(target)) {
-			if (!isSupportedPointerEvent(prop)) if (Array.isArray(value)) node[finalKey](...value);
-			else node[finalKey](value);
+			if (!isSupportedPointerEvent(prop)) {
+				if (Array.isArray(value)) node[finalKey](...value);
+				else node[finalKey](value);
+			}
 			if (finalKey.startsWith("on") && isFunction(value)) root[finalKey] = value;
 			return;
 		}
 		if (isLayers(target) && isLayers(value)) target.mask = value.mask;
 		else if (isColor(target) && isColorRepresentation(value)) target.set(value);
 		else if (isCopyable(target) && isClassInstance(value) && target.constructor === value.constructor) target.copy(value);
-		else if (isVectorLike(target) && Array.isArray(value)) if ("fromArray" in target && typeof target.fromArray === "function") target.fromArray(value);
-		else target.set(...value);
-		else if (isVectorLike(target) && typeof value === "number") if ("setScalar" in target && typeof target.setScalar === "function") target.setScalar(value);
-		else target.set(value);
-		else root[finalKey] = value;
+		else if (isVectorLike(target) && Array.isArray(value)) {
+			if ("fromArray" in target && typeof target.fromArray === "function") target.fromArray(value);
+			else target.set(...value);
+		} else if (isVectorLike(target) && typeof value === "number") {
+			if ("setScalar" in target && typeof target.setScalar === "function") target.setScalar(value);
+			else target.set(value);
+		} else root[finalKey] = value;
 		if (isTresCamera(node)) node.updateProjectionMatrix();
 		invalidateInstance(node);
 	}
@@ -1431,7 +1406,6 @@ const nodeOps = ({ context, options = { primitivePrefix: "" } }) => {
 		insertStaticContent: noop
 	};
 };
-
 //#endregion
 //#region src/core/roots.ts
 const _roots = /* @__PURE__ */ new Map();
@@ -1440,7 +1414,6 @@ const setRoot = (canvas, root) => {
 	_roots.set(canvas, root);
 };
 const deleteRoot = (canvas) => _roots.delete(canvas);
-
 //#endregion
 //#region src/devtools/DevtoolsMessenger.ts
 const QUEUEABLE_MESSAGE_TYPES = ["asset-load"];
@@ -1512,7 +1485,6 @@ var DevtoolsMessenger = class {
 		this.messageQueue = [];
 	}
 };
-
 //#endregion
 //#region src/devtools/utils.ts
 /**
@@ -1531,7 +1503,6 @@ function toastMessage(message, type) {
 function __VUE_DEVTOOLS_TOAST__(tresMessage, type) {
 	throw new Error(tresMessage + type);
 }
-
 //#endregion
 //#region src/utils/perf.ts
 function calculateMemoryUsage(object) {
@@ -1556,7 +1527,6 @@ function boundedPush(arr, value, max) {
 function bytesToKB(bytes) {
 	return (bytes / 1024).toFixed(2);
 }
-
 //#endregion
 //#region src/devtools/setupDevtools.ts
 function setupTresDevtools(ctx) {
@@ -1576,7 +1546,7 @@ function setupTresDevtools(ctx) {
 	};
 	const updateInterval = 100;
 	const fps = useFps({ every: updateInterval });
-	const { isSupported, memory } = useMemory({ interval: updateInterval });
+	const { isSupported, memory } = useMemory({ scheduler: (cb) => useIntervalFn(cb, updateInterval) });
 	const maxFrames = 160;
 	let lastUpdateTime = performance.now();
 	let accumulatedTime = 0;
@@ -1607,7 +1577,6 @@ function setupTresDevtools(ctx) {
 		pause();
 	});
 }
-
 //#endregion
 //#region src/utils/three.ts
 /**
@@ -1624,7 +1593,6 @@ const getObjectByUuid = (node, uuid) => {
 		if (found) return found;
 	}
 };
-
 //#endregion
 //#region src/devtools/highlight.ts
 var HightlightMesh = class extends THREE.Mesh {
@@ -1640,7 +1608,6 @@ var HightlightMesh = class extends THREE.Mesh {
 		this.scale.set(scaleFactor, scaleFactor, scaleFactor);
 	}
 };
-
 //#endregion
 //#region src/devtools/inspectorHandlers.ts
 /**
@@ -1754,14 +1721,16 @@ function buildContextGraph(object, node, visited = /* @__PURE__ */ new WeakSet()
 			});
 			if (value.value && typeof value.value === "object") buildContextGraph(value.value, childNode, visited, depth + 1, maxDepth, uuid, chainedKey);
 			else childNode.label = `${key}: ${JSON.stringify(value.value)}`;
-		} else if (value && typeof value === "object" && !Array.isArray(value)) if (Object.keys(value).length > 0) if (visited.has(value)) childNode.tags.push({
-			label: "Circular",
-			textColor: 16711680,
-			backgroundColor: 16773360
-		});
-		else buildContextGraph(value, childNode, visited, depth + 1, maxDepth, uuid, chainedKey);
-		else childNode.label = `${key}: {}`;
-		else if (Array.isArray(value)) {
+		} else if (value && typeof value === "object" && !Array.isArray(value)) {
+			if (Object.keys(value).length > 0) {
+				if (visited.has(value)) childNode.tags.push({
+					label: "Circular",
+					textColor: 16711680,
+					backgroundColor: 16773360
+				});
+				else buildContextGraph(value, childNode, visited, depth + 1, maxDepth, uuid, chainedKey);
+			} else childNode.label = `${key}: {}`;
+		} else if (Array.isArray(value)) {
 			childNode.label = `${key}: Array(${value.length})`;
 			childNode.tags.push({
 				label: `length: ${value.length}`,
@@ -1778,7 +1747,7 @@ function buildContextGraph(object, node, visited = /* @__PURE__ */ new WeakSet()
 * @returns A function that handles inspector tree payload updates
 */
 const inspectorTreeHandler = (tres) => (payload) => {
-	if (payload.inspectorId === INSPECTOR_ID) {
+	if (payload.inspectorId === "tres:inspector") {
 		const root = createNode(tres.scene.value);
 		buildGraph$1(tres.scene.value, root, payload.filter);
 		const rootContext = {
@@ -1800,7 +1769,7 @@ const inspectorTreeHandler = (tres) => (payload) => {
 * @returns A function that handles inspector state payload updates
 */
 const inspectorStateHandler = (tres, { highlightMesh, prevInstance }) => (payload) => {
-	if (payload.inspectorId !== INSPECTOR_ID) return;
+	if (payload.inspectorId !== "tres:inspector") return;
 	const highlightMaterial = new MeshBasicMaterial({
 		color: 11003607,
 		transparent: true,
@@ -1862,9 +1831,9 @@ const inspectorStateHandler = (tres, { highlightMesh, prevInstance }) => (payloa
 		const match = payload.nodeId.match(/^context-([^-]+(?:-[^-]+)*)-(.+)$/);
 		const chainedKey = match ? match[2] : "context";
 		if (!chainedKey || chainedKey === "context") {
-			payload.state = { object: Object.entries(tres).filter(([key]) => !key.startsWith("_") && key !== "parent").map(([key, value$1]) => ({
+			payload.state = { object: Object.entries(tres).filter(([key]) => !key.startsWith("_") && key !== "parent").map(([key, value]) => ({
 				key,
-				value: isRef(value$1) ? value$1.value : value$1,
+				value: isRef(value) ? value.value : value,
 				editable: false
 			})) };
 			return;
@@ -1921,7 +1890,7 @@ const editSceneObject = (scene, objectUuid, propertyPath, value) => {
 * @returns A function that handles inspector state edit payload updates
 */
 const inspectorEditStateHandler = (tres) => (payload) => {
-	if (payload.inspectorId === INSPECTOR_ID) {
+	if (payload.inspectorId === "tres:inspector") {
 		if (payload.nodeId.includes("scene")) {
 			const match = payload.nodeId.match(/^scene-(.+)$/);
 			const uuid = match ? match[1] : null;
@@ -1930,7 +1899,6 @@ const inspectorEditStateHandler = (tres) => (payload) => {
 		}
 	}
 };
-
 //#endregion
 //#region src/devtools/plugin.ts
 const INSPECTOR_ID = "tres:inspector";
@@ -1968,10 +1936,9 @@ function registerTresDevtools(app, tres) {
 		api.on.editInspectorState(inspectorEditStateHandler(tres));
 	});
 }
-
 //#endregion
-//#region src/components/Context.vue?vue&type=script&setup=true&lang.ts
-var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+//#region src/components/Context.vue
+var Context_default = /* @__PURE__ */ defineComponent({
 	__name: "Context",
 	props: {
 		camera: {
@@ -2115,14 +2082,14 @@ var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		const scene = shallowRef(new Scene());
 		const instance = getCurrentInstance();
 		extend(THREE);
-		const createInternalComponent = (context$1, hmrTick) => defineComponent({ setup() {
+		const createInternalComponent = (context, hmrTick) => defineComponent({ setup() {
 			const ctx = getCurrentInstance()?.appContext;
 			if (ctx) ctx.app = instance?.appContext.app;
 			const provides = {};
-			function mergeProvides(currentInstance$1) {
-				if (!currentInstance$1) return;
-				if (currentInstance$1.parent) mergeProvides(currentInstance$1.parent);
-				if (currentInstance$1.provides) Object.assign(provides, currentInstance$1.provides);
+			function mergeProvides(currentInstance) {
+				if (!currentInstance) return;
+				if (currentInstance.parent) mergeProvides(currentInstance.parent);
+				if (currentInstance.provides) Object.assign(provides, currentInstance.provides);
 			}
 			if (instance?.parent && props.enableProvideBridge) {
 				mergeProvides(instance.parent);
@@ -2130,42 +2097,42 @@ var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					provide(key, provides[key]);
 				});
 			}
-			provide(INJECTION_KEY, context$1);
+			provide(INJECTION_KEY, context);
 			provide("extend", extend);
-			if (typeof window !== "undefined" && ctx?.app) registerTresDevtools(ctx?.app, context$1);
+			if (typeof window !== "undefined" && ctx?.app) registerTresDevtools(ctx?.app, context);
 			return () => {
 				hmrTick.value;
 				return h(Fragment, null, slots.default?.() ?? []);
 			};
 		} });
-		const mountCustomRenderer = (context$1) => {
+		const mountCustomRenderer = (context) => {
 			const canvas = props.canvas;
 			if (getRoot(canvas)) return;
 			const hmrTick = ref(0);
-			const internalComponent = createInternalComponent(context$1, hmrTick);
-			const renderer$1 = createRenderer(nodeOps({
-				context: context$1,
+			const internalComponent = createInternalComponent(context, hmrTick);
+			const renderer = createRenderer(nodeOps({
+				context,
 				options: props.customRendererOptions
 			}));
-			renderer$1.render(h(internalComponent), scene.value);
+			renderer.render(h(internalComponent), scene.value);
 			setRoot(canvas, {
-				renderer: renderer$1,
+				renderer,
 				internalComponent,
 				hmrTick,
-				context: context$1
+				context
 			});
 		};
-		const dispose = (context$1, force = false) => {
-			disposeObject3D(context$1.scene.value);
+		const dispose = (context, force = false) => {
+			disposeObject3D(context.scene.value);
 			if (force) {
-				context$1.renderer.instance.dispose();
-				if (context$1.renderer.instance instanceof WebGLRenderer) {
-					context$1.renderer.instance.renderLists.dispose();
-					context$1.renderer.instance.forceContextLoss();
+				context.renderer.instance.dispose();
+				if (context.renderer.instance instanceof WebGLRenderer) {
+					context.renderer.instance.renderLists.dispose();
+					context.renderer.instance.forceContextLoss();
 				}
 			}
 			scene.value.__tres = {
-				root: context$1,
+				root: context,
 				objects: [],
 				isUnmounting: true
 			};
@@ -2197,14 +2164,14 @@ var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		const { camera, renderer } = context.value;
 		const { registerCamera, cameras, activeCamera, deregisterCamera } = camera;
 		const addDefaultCamera = () => {
-			const camera$1 = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, .1, 1e3);
-			camera$1.position.set(3, 3, 3);
-			camera$1.lookAt(0, 0, 0);
-			registerCamera(camera$1);
+			const camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, .1, 1e3);
+			camera.position.set(3, 3, 3);
+			camera.lookAt(0, 0, 0);
+			registerCamera(camera);
 			const unwatch = watchEffect(() => {
 				if (cameras.value.length >= 2) {
-					camera$1.removeFromParent();
-					deregisterCamera(camera$1);
+					camera.removeFromParent();
+					deregisterCamera(camera);
 					unwatch?.();
 				}
 			});
@@ -2257,15 +2224,12 @@ var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		return () => {};
 	}
 });
-
-//#endregion
-//#region src/components/Context.vue
-var Context_default = Context_vue_vue_type_script_setup_true_lang_default;
-
 //#endregion
 //#region src/components/TresCanvas.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1 = ["data-scene", "data-tres"];
-var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+//#endregion
+//#region src/components/TresCanvas.vue
+var TresCanvas_default = /* @__PURE__ */ defineComponent({
 	__name: "TresCanvas",
 	props: {
 		camera: {
@@ -2476,11 +2440,6 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		};
 	}
 });
-
-//#endregion
-//#region src/components/TresCanvas.vue
-var TresCanvas_default = TresCanvas_vue_vue_type_script_setup_true_lang_default;
-
 //#endregion
 //#region src/utils/normalize.ts
 function normalizeVectorFlexibleParam(value) {
@@ -2501,7 +2460,6 @@ function normalizeColor(value) {
 	if (Array.isArray(value)) return new Color(...value);
 	return new Color(value);
 }
-
 //#endregion
 //#region src/utils/template-compiler-options.ts
 const whitelist = [
@@ -2512,11 +2470,9 @@ const whitelist = [
 	"TresPortal"
 ];
 const templateCompilerOptions = { template: { compilerOptions: { isCustomElement: (tag) => (/^Tres[A-Z]/.test(tag) || tag.startsWith("tres-")) && !whitelist.includes(tag) || tag === "primitive" } } };
-var template_compiler_options_default = templateCompilerOptions;
-
 //#endregion
-//#region src/components/TresPortal.vue?vue&type=script&setup=true&lang.ts
-var TresPortal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+//#region src/components/TresPortal.vue
+var TresPortal_default = /* @__PURE__ */ defineComponent({
 	__name: "TresPortal",
 	props: {
 		to: {
@@ -2537,21 +2493,16 @@ var TresPortal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		};
 	}
 });
-
-//#endregion
-//#region src/components/TresPortal.vue
-var TresPortal_default = TresPortal_vue_vue_type_script_setup_true_lang_default;
-
 //#endregion
 //#region src/directives/vDistanceTo.ts
 let arrowHelper = null;
 const vDistanceTo = {
 	updated: (el, binding) => {
-		const extractBindingPosition = (binding$1) => {
-			let observer$1 = binding$1.value;
-			if (binding$1.value && isMesh(binding$1.value)) observer$1 = binding$1.value.position;
-			if (Array.isArray(binding$1.value)) observer$1 = new Vector3(...observer$1);
-			return observer$1;
+		const extractBindingPosition = (binding) => {
+			let observer = binding.value;
+			if (binding.value && isMesh(binding.value)) observer = binding.value.position;
+			if (Array.isArray(binding.value)) observer = new Vector3(...observer);
+			return observer;
 		};
 		const observer = extractBindingPosition(binding);
 		if (!observer) {
@@ -2577,7 +2528,6 @@ const vDistanceTo = {
 		if (el.parent) el.parent.remove(arrowHelper);
 	}
 };
-
 //#endregion
 //#region src/directives/vLightHelper.ts
 let CurrentHelper;
@@ -2613,7 +2563,6 @@ const vLightHelper = {
 		if (el.parent) el.parent.remove(currentInstance);
 	}
 };
-
 //#endregion
 //#region src/directives/vLog.ts
 const vLog = { mounted: (el, binding) => {
@@ -2623,13 +2572,10 @@ const vLog = { mounted: (el, binding) => {
 	}
 	console.log("v-log", el);
 } };
-
 //#endregion
 //#region src/index.ts
 const plugin = { install(app) {
 	app.component("TresCanvas", TresCanvas_default);
 } };
-var src_default = plugin;
-
 //#endregion
-export { DevtoolsMessenger, INJECTION_KEY, TresCanvas_default as TresCanvas, Context_default as TresCanvasContext, TresPortal_default as TresPortal, TresRendererError, component_default as UseLoader, buildGraph, catalogue, createTimer, src_default as default, disposeObject3D as dispose, extend, isBufferGeometry, isCamera, isClassInstance, isColor, isColorRepresentation, isCopyable, isFog, isGroup, isLayers, isLight, isMaterial, isMesh, isObject3D, isOrthographicCamera, isPerspectiveCamera, isProd, isScene, isTresCamera, isTresInstance, isTresObject, isTresPrimitive, isVectorLike, isWebGLRenderer, isWebGPURenderer, logError, logMessage, logWarning, normalizeColor, normalizeVectorFlexibleParam, registerTresDevtools, template_compiler_options_default as templateCompilerOptions, useCameraManager, useGraph, useLoader, useLoop, useRendererManager, useTres, useTresContext, useTresContextProvider, vDistanceTo, vLightHelper, vLog };
+export { DevtoolsMessenger, INJECTION_KEY, TresCanvas_default as TresCanvas, Context_default as TresCanvasContext, TresPortal_default as TresPortal, TresRendererError, component_default as UseLoader, buildGraph, catalogue, createTimer, plugin as default, disposeObject3D as dispose, extend, isBufferGeometry, isCamera, isClassInstance, isColor, isColorRepresentation, isCopyable, isFog, isGroup, isLayers, isLight, isMaterial, isMesh, isObject3D, isOrthographicCamera, isPerspectiveCamera, isProd, isScene, isTresCamera, isTresInstance, isTresObject, isTresPrimitive, isVectorLike, isWebGLRenderer, isWebGPURenderer, logError, logMessage, logWarning, normalizeColor, normalizeVectorFlexibleParam, registerTresDevtools, templateCompilerOptions, useCameraManager, useGraph, useLoader, useLoop, useRendererManager, useTres, useTresContext, useTresContextProvider, vDistanceTo, vLightHelper, vLog };