@tresjs/core 5.1.1 → 5.2.1

package/dist/{chunk-QpvadvMP.js → chunk-BRx1-uMz.js}

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.1.1
+  * version: v5.2.1
   * (c) 2025
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)

package/dist/template-compiler-options.d.mts

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.1.1
+  * version: v5.2.1
   * (c) 2025
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)

package/dist/template-compiler-options.mjs

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.1.1
+  * version: v5.2.1
   * (c) 2025
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)

package/dist/tres.d.ts

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/core
-  * version: v5.1.1
+  * version: v5.2.1
   * (c) 2025
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
@@ -72,8 +72,9 @@ interface RafLoopContext {
 //#endregion
 //#region src/composables/useSizes/index.d.ts
 interface SizesType {
-  height: Readonly<Ref<number>>;
   width: Readonly<Ref<number>>;
+  height: Readonly<Ref<number>>;
+  pixelRatio: Readonly<Ref<number>>;
   aspectRatio: ComputedRef<number>;
 }
 //#endregion
@@ -329,7 +330,7 @@ declare function useEventManager({
   canvas: MaybeRef<HTMLCanvasElement>;
   contextParts: Pick<TresContext, 'scene' | 'camera' | 'renderer'>;
 }): {
-  onPointerMissed: _vueuse_core0.EventHookOn<PointerEvent<MouseEvent> & Event<"click", Object3D<Object3DEventMap & PointerEventsMap>>>;
+  onPointerMissed: _vueuse_core0.EventHookOn<TresPointerEvent & Event<"click", Object3D<Object3DEventMap & PointerEventsMap>>>;
 };
 //#endregion
 //#region src/composables/useTresContextProvider/index.d.ts
@@ -353,6 +354,7 @@ declare const useTresContext: () => TresContext;
 //#region src/utils/pointerEvents.d.ts
 declare const supportedPointerEvents: readonly ["onClick", "onContextmenu", "onPointermove", "onPointerenter", "onPointerleave", "onPointerover", "onPointerout", "onDblclick", "onPointerdown", "onPointerup", "onPointercancel", "onLostpointercapture", "onWheel"];
 type SupportedVuePointerEvent = typeof supportedPointerEvents[number];
+type TresPointerEventName = 'click' | 'contextmenu' | 'pointermove' | 'pointerenter' | 'pointerleave' | 'pointerover' | 'pointerout' | 'dblclick' | 'pointerdown' | 'pointerup' | 'pointercancel' | 'lostpointercapture' | 'wheel';
 type TresPointerEvent = PointerEvent<MouseEvent>;
 type PointerEventHandlers = { [key in SupportedVuePointerEvent]: (event: TresPointerEvent) => void };
 //#endregion
@@ -361,10 +363,10 @@ type AttachFnType = (parent: any, self: TresInstance) => () => void;
 type AttachType = string | AttachFnType;
 type DisposeType = ((self: TresInstance) => void) | boolean | 'default';
 type ConstructorRepresentation = new (...args: any[]) => any;
-type NonFunctionKeys<P> = { [K in keyof P]-?: P[K] extends ((...args: any[]) => any) ? never : K }[keyof P];
-type Overwrite<P, O> = Omit<P, NonFunctionKeys<O>> & O;
+type NonFunctionKeys<P$1> = { [K in keyof P$1]-?: P$1[K] extends ((...args: any[]) => any) ? never : K }[keyof P$1];
+type Overwrite<P$1, O> = Omit<P$1, NonFunctionKeys<O>> & O;
 type Properties<T> = Pick<T, NonFunctionKeys<T>>;
-type Mutable<P> = { [K in keyof P]: P[K] | Readonly<P[K]> };
+type Mutable<P$1> = { [K in keyof P$1]: P$1[K] | Readonly<P$1[K]> };
 type Args<T> = T extends ConstructorRepresentation ? ConstructorParameters<T> : any[];
 interface TresCatalogue {
   [name: string]: ConstructorRepresentation;
@@ -376,8 +378,8 @@ type TresCamera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
  * @template T - The type of the object.
  * @template P - The type of the arguments.
  */
-interface InstanceProps<T = any, P = any> {
-  args?: Args<P>;
+interface InstanceProps<T = any, P$1 = any> {
+  args?: Args<P$1>;
   object?: T;
   visible?: boolean;
   dispose?: null;
@@ -454,17 +456,17 @@ type TresContextWithClock = TresContext & {
   delta: number;
   elapsed: number;
 };
-type WithMathProps<P> = { [K in keyof P]: P[K] extends MathRepresentation | THREE.Euler ? MathType<P[K]> : P[K] };
+type WithMathProps<P$1> = { [K in keyof P$1]: P$1[K] extends MathRepresentation | THREE.Euler ? MathType<P$1[K]> : P$1[K] };
 interface RaycastableRepresentation {
   raycast: (raycaster: THREE.Raycaster, intersects: THREE.Intersection[]) => void;
 }
-type EventProps<P> = P extends RaycastableRepresentation ? Partial<PointerEventHandlers> : unknown;
+type EventProps<P$1> = P$1 extends RaycastableRepresentation ? Partial<PointerEventHandlers> : unknown;
 interface VueProps {
   children?: VNode[];
   ref?: VNodeRef;
   key?: string | number | symbol;
 }
-type ElementProps<T extends ConstructorRepresentation, P = InstanceType<T>> = Partial<Overwrite<P, WithMathProps<P> & VueProps & EventProps<P>>>;
+type ElementProps<T extends ConstructorRepresentation, P$1 = InstanceType<T>> = Partial<Overwrite<P$1, WithMathProps<P$1> & VueProps & EventProps<P$1>>>;
 type ThreeElement<T extends ConstructorRepresentation> = Mutable<Overwrite<ElementProps<T>, Omit<InstanceProps<InstanceType<T>, T>, 'object'>>>;
 type ThreeExports = typeof THREE;
 type ThreeInstancesImpl = { [K in keyof ThreeExports as Uncapitalize<K>]: ThreeExports[K] extends ConstructorRepresentation ? ThreeElement<ThreeExports[K]> : never };
@@ -496,7 +498,7 @@ interface TresObjectMap {
 declare function buildGraph(object: Object3D | TresObject): TresObjectMap;
 //#endregion
 //#region src/composables/useLoader/component.vue.d.ts
-declare const __VLS_export$1: <T extends TresObjectMap>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const __VLS_export$1: <T extends TresObjectMap>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
   props: __VLS_PrettifyLocal<{
     /**
      * The THREE.js loader to use
@@ -513,7 +515,9 @@ declare const __VLS_export$1: <T extends TresObjectMap>(__VLS_props: NonNullable
   } & {
     onLoaded?: ((result: T) => any) | undefined;
     onError?: ((error: unknown) => any) | undefined;
-  }> & vue0.PublicProps;
+  }> & vue0.PublicProps & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
   expose: (exposed: {}) => void;
   attrs: any;
   slots: {
@@ -528,7 +532,7 @@ declare const __VLS_export$1: <T extends TresObjectMap>(__VLS_props: NonNullable
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default$1: typeof __VLS_export$1;
-type __VLS_PrettifyLocal<T> = { [K in keyof T as K]: T[K] } & {};
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
 //#endregion
 //#region src/composables/useGraph/index.d.ts
 declare const useGraph: (object: MaybeRef$1<TresObject | undefined>) => vue0.ComputedRef<TresObjectMap | undefined>;
@@ -660,44 +664,55 @@ interface TresCanvasProps extends RendererOptions {
    */
   enableProvideBridge?: boolean;
 }
-declare const __VLS_export: __VLS_WithSlots<vue0.DefineComponent<TresCanvasProps, {
-  context: vue0.ShallowRef<TresContext | null, TresContext | null>;
+type TresCanvasEmits = {
+  ready: [context: TresContext];
+  pointermissed: [event: TresPointerEvent];
+  render: [context: TresContext];
+  beforeLoop: [context: TresContextWithClock];
+  loop: [context: TresContextWithClock];
+} & { [key in TresPointerEventName]: [event: TresPointerEvent] };
+interface TresCanvasInstance {
+  get context(): TresContext | undefined;
   dispose: () => void;
-}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {
-  click: (event: PointerEvent<MouseEvent>) => any;
-  contextmenu: (event: PointerEvent<MouseEvent>) => any;
-  pointermove: (event: PointerEvent<MouseEvent>) => any;
-  pointerenter: (event: PointerEvent<MouseEvent>) => any;
-  pointerleave: (event: PointerEvent<MouseEvent>) => any;
-  pointerover: (event: PointerEvent<MouseEvent>) => any;
-  pointerout: (event: PointerEvent<MouseEvent>) => any;
-  dblclick: (event: PointerEvent<MouseEvent>) => any;
-  pointerdown: (event: PointerEvent<MouseEvent>) => any;
-  pointerup: (event: PointerEvent<MouseEvent>) => any;
-  pointercancel: (event: PointerEvent<MouseEvent>) => any;
-  lostpointercapture: (event: PointerEvent<MouseEvent>) => any;
-  wheel: (event: PointerEvent<MouseEvent>) => any;
+}
+type __VLS_Slots = {
+  default: () => any;
+};
+declare const __VLS_base: vue0.DefineComponent<TresCanvasProps, TresCanvasInstance, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {
+  click: (event: TresPointerEvent) => any;
+  contextmenu: (event: TresPointerEvent) => any;
+  pointermove: (event: TresPointerEvent) => any;
+  pointerenter: (event: TresPointerEvent) => any;
+  pointerleave: (event: TresPointerEvent) => any;
+  pointerover: (event: TresPointerEvent) => any;
+  pointerout: (event: TresPointerEvent) => any;
+  dblclick: (event: TresPointerEvent) => any;
+  pointerdown: (event: TresPointerEvent) => any;
+  pointerup: (event: TresPointerEvent) => any;
+  pointercancel: (event: TresPointerEvent) => any;
+  lostpointercapture: (event: TresPointerEvent) => any;
+  wheel: (event: TresPointerEvent) => any;
   ready: (context: TresContext) => any;
-  pointermissed: (event: PointerEvent<MouseEvent>) => any;
+  pointermissed: (event: TresPointerEvent) => any;
   render: (context: TresContext) => any;
   beforeLoop: (context: TresContextWithClock) => any;
   loop: (context: TresContextWithClock) => any;
 }, string, vue0.PublicProps, Readonly<TresCanvasProps> & Readonly<{
-  onClick?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
-  onContextmenu?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
-  onPointermove?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
-  onPointerenter?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
-  onPointerleave?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
-  onPointerover?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
-  onPointerout?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
-  onDblclick?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
-  onPointerdown?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
-  onPointerup?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
-  onPointercancel?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
-  onLostpointercapture?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
-  onWheel?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
+  onClick?: ((event: TresPointerEvent) => any) | undefined;
+  onContextmenu?: ((event: TresPointerEvent) => any) | undefined;
+  onPointermove?: ((event: TresPointerEvent) => any) | undefined;
+  onPointerenter?: ((event: TresPointerEvent) => any) | undefined;
+  onPointerleave?: ((event: TresPointerEvent) => any) | undefined;
+  onPointerover?: ((event: TresPointerEvent) => any) | undefined;
+  onPointerout?: ((event: TresPointerEvent) => any) | undefined;
+  onDblclick?: ((event: TresPointerEvent) => any) | undefined;
+  onPointerdown?: ((event: TresPointerEvent) => any) | undefined;
+  onPointerup?: ((event: TresPointerEvent) => any) | undefined;
+  onPointercancel?: ((event: TresPointerEvent) => any) | undefined;
+  onLostpointercapture?: ((event: TresPointerEvent) => any) | undefined;
+  onWheel?: ((event: TresPointerEvent) => any) | undefined;
   onReady?: ((context: TresContext) => any) | undefined;
-  onPointermissed?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
+  onPointermissed?: ((event: TresPointerEvent) => any) | undefined;
   onRender?: ((context: TresContext) => any) | undefined;
   onBeforeLoop?: ((context: TresContextWithClock) => any) | undefined;
   onLoop?: ((context: TresContextWithClock) => any) | undefined;
@@ -718,9 +733,8 @@ declare const __VLS_export: __VLS_WithSlots<vue0.DefineComponent<TresCanvasProps
   useLegacyLights: boolean;
   renderMode: "always" | "on-demand" | "manual";
   enableProvideBridge: boolean;
-}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>, {
-  default: () => any;
-}>;
+}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {
   new (): {
@@ -1053,4 +1067,4 @@ interface TresPlugin {
 }
 declare const plugin: TresPlugin;
 //#endregion
-export { Args, AssetLoadData, AttachFnType, AttachType, ConstructorRepresentation, DevtoolsMessage, DevtoolsMessageType, DevtoolsMessenger, DevtoolsSubscriber, DisposeType, ElementProps, InstanceProps, LoaderMethods, LoaderProto, LocalState, LoopContext, MathType, Mutable, NonFunctionKeys, Overwrite, Properties, RenderFunction, RenderMode, RendererOptions, ThreeElement, ThreeInstances, TresCamera, _default as TresCanvas, TresCatalogue, TresColor, TresColorArray, type TresContext, TresContextWithClock, TresControl, TresEuler, TresInstance, TresLayers, TresLoader, TresLoaderOptions, TresMaterial, TresObject, TresObject3D, TresObjectMap, TresOptions, TresPartialContext, TresPlugin, type TresPointerEvent, TresPrimitive, TresQuaternion, TresRenderer, TresRendererSetupContext, TresScene, TresVector2, TresVector3, TresVector4, UseCameraReturn, _default$1 as UseLoader, UseLoaderReturn, UseRendererManagerReturn, UseRendererOptions, VectorCoordinates, type VectorFlexibleParams, VueProps, WithMathProps, buildGraph, catalogue, 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, logError, logMessage, logWarning, normalizeColor, normalizeVectorFlexibleParam, registerTresDevtools, templateCompilerOptions, useCameraManager, useGraph, useLoader, useLoop, useRendererManager, useTres, useTresContext, useTresContextProvider, vDistanceTo, vLightHelper, vLog };
+export { Args, AssetLoadData, AttachFnType, AttachType, ConstructorRepresentation, DevtoolsMessage, DevtoolsMessageType, DevtoolsMessenger, DevtoolsSubscriber, DisposeType, ElementProps, InstanceProps, LoaderMethods, LoaderProto, LocalState, LoopContext, MathType, Mutable, NonFunctionKeys, Overwrite, Properties, RenderFunction, RenderMode, RendererOptions, ThreeElement, ThreeInstances, TresCamera, _default as TresCanvas, type TresCanvasEmits, type TresCanvasInstance, type TresCanvasProps, TresCatalogue, TresColor, TresColorArray, type TresContext, TresContextWithClock, TresControl, TresEuler, TresInstance, TresLayers, TresLoader, TresLoaderOptions, TresMaterial, TresObject, TresObject3D, TresObjectMap, TresOptions, TresPartialContext, TresPlugin, type TresPointerEvent, TresPrimitive, TresQuaternion, TresRenderer, TresRendererSetupContext, TresScene, TresVector2, TresVector3, TresVector4, UseCameraReturn, _default$1 as UseLoader, UseLoaderReturn, UseRendererManagerReturn, UseRendererOptions, VectorCoordinates, type VectorFlexibleParams, VueProps, WithMathProps, buildGraph, catalogue, 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, logError, logMessage, logWarning, normalizeColor, normalizeVectorFlexibleParam, registerTresDevtools, templateCompilerOptions, useCameraManager, useGraph, useLoader, useLoop, useRendererManager, useTres, useTresContext, useTresContextProvider, vDistanceTo, vLightHelper, vLog };

package/dist/tres.js

@@ -1,11 +1,11 @@
 /**
   * name: @tresjs/core
-  * version: v5.1.1
+  * version: v5.2.1
   * (c) 2025
   * description: Declarative ThreeJS using Vue Components
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
   */
-import { Fragment, computed, createElementBlock, createRenderer, defineComponent, getCurrentInstance, h, isRef, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, shallowRef, toValue, unref, useSlots, watch, watchEffect } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createRenderer, defineComponent, getCurrentInstance, h, isRef, mergeProps, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, shallowRef, toValue, unref, useSlots, watch, watchEffect, withCtx } from "vue";
 import * as THREE from "three";
 import { ACESFilmicToneMapping, ArrowHelper, BackSide, BufferAttribute, BufferGeometry, Clock, Color, DirectionalLightHelper, DoubleSide, Float32BufferAttribute, HemisphereLightHelper, Layers, Line, LineBasicMaterial, Material, MathUtils, Mesh, MeshBasicMaterial, Object3D, PCFSoftShadowMap, PerspectiveCamera, PointLightHelper, 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";
@@ -14,88 +14,7 @@ import { forwardHtmlEvents, getVoidObject } from "@pmndrs/pointer-events";
 import { setupDevtoolsPlugin } from "@vue/devtools-api";
 
 //#region package.json
-var package_default = {
-	name: "@tresjs/core",
-	type: "module",
-	version: "5.1.1",
-	description: "Declarative ThreeJS using Vue Components",
-	author: "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
-	license: "MIT",
-	repository: {
-		"type": "git",
-		"url": "git+https://github.com/Tresjs/tres.git",
-		"directory": "packages/core"
-	},
-	keywords: [
-		"vue",
-		"3d",
-		"threejs",
-		"three",
-		"threejs-vue"
-	],
-	sideEffects: false,
-	exports: {
-		".": "./dist/tres.js",
-		"./template-compiler-options": "./dist/template-compiler-options.mjs",
-		"./package.json": "./package.json"
-	},
-	main: "./dist/tres.js",
-	module: "./dist/tres.js",
-	types: "./dist/tres.d.ts",
-	typesVersions: { "*": { "template-compiler-options": ["dist/template-compiler-options.d.mts"] } },
-	files: ["*.d.ts", "dist"],
-	publishConfig: { "access": "public" },
-	scripts: {
-		"build": "tsdown",
-		"test": "vitest",
-		"test:ci": "vitest run",
-		"test:ui": "vitest --ui --coverage.enabled=true",
-		"coverage": "vitest run --coverage",
-		"lint": "eslint .",
-		"lint:fix": "eslint . --fix",
-		"typecheck": "vue-tsc --noEmit"
-	},
-	peerDependencies: {
-		"three": ">=0.133",
-		"vue": ">=3.4"
-	},
-	dependencies: {
-		"@pmndrs/pointer-events": "^6.6.17",
-		"@vue/devtools-api": "^7.7.2",
-		"@vueuse/core": "catalog:utils",
-		"radashi": "^12.6.2",
-		"typescript": "catalog:typescript"
-	},
-	devDependencies: {
-		"@tresjs/eslint-config": "workspace:*",
-		"@types/three": "catalog:three",
-		"@typescript-eslint/eslint-plugin": "catalog:eslint",
-		"@typescript-eslint/parser": "catalog:eslint",
-		"@vitejs/plugin-vue": "catalog:vite",
-		"@vitest/coverage-v8": "3.2.4",
-		"@vitest/ui": "catalog:testing",
-		"@vue/test-utils": "catalog:testing",
-		"eslint": "catalog:eslint",
-		"eslint-plugin-vue": "catalog:eslint",
-		"jsdom": "catalog:testing",
-		"kolorist": "catalog:utils",
-		"pathe": "catalog:utils",
-		"rollup-plugin-analyzer": "catalog:build",
-		"rollup-plugin-copy": "^3.5.0",
-		"rollup-plugin-visualizer": "catalog:build",
-		"three": "catalog:three",
-		"tsdown": "catalog:build",
-		"vite": "catalog:vite",
-		"vite-plugin-banner": "catalog:vite",
-		"vite-plugin-dts": "catalog:vite",
-		"vite-plugin-inspect": "^11.3.3",
-		"vitest": "catalog:testing",
-		"vue": "catalog:vue",
-		"vue-demi": "^0.14.10",
-		"vue-tsc": "catalog:typescript"
-	},
-	nx: { "implicitDependencies": ["!@tresjs/core-*"] }
-};
+var version = "5.2.1";
 
 //#endregion
 //#region src/utils/makeMap.ts
@@ -401,8 +320,8 @@ function logWarning(...args) {
 * @param name - Name of the message
 * @param value - Value to log
 */
-function logMessage(name$1, value) {
-	if (!isProd) console.log(`${logPrefix} - ${name$1}:`, value);
+function logMessage(name, value) {
+	if (!isProd) console.log(`${logPrefix} - ${name}:`, value);
 }
 
 //#endregion
@@ -446,11 +365,11 @@ function resolve(obj, key) {
 function joinAsCamelCase(...strings) {
 	return strings.map((s, i) => i === 0 ? s : s.charAt(0).toUpperCase() + s.slice(1)).join("");
 }
-function attach(parent, child, type$1) {
+function attach(parent, child, type) {
 	const INDEX_REGEX = /-\d+$/;
-	if (isString(type$1)) {
-		if (INDEX_REGEX.test(type$1)) {
-			const { target: target$1, key: key$1 } = resolve(parent, type$1.replace(INDEX_REGEX, ""));
+	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 augmentedArray = [];
@@ -460,14 +379,14 @@ function attach(parent, child, type$1) {
 				target$1[key$1] = augmentedArray;
 			}
 		}
-		const { target, key } = resolve(parent, type$1);
+		const { target, key } = resolve(parent, type);
 		child.__tres.previousAttach = target[key];
 		target[key] = unboxTresPrimitive(child);
-	} else child.__tres.previousAttach = type$1(parent, child);
+	} else child.__tres.previousAttach = type(parent, child);
 }
-function detach(parent, child, type$1) {
-	if (isString(type$1)) {
-		const { target, key } = resolve(parent, type$1);
+function detach(parent, child, type) {
+	if (isString(type)) {
+		const { target, key } = resolve(parent, type);
 		const previous = child.__tres.previousAttach;
 		if (previous === void 0) delete target[key];
 		else target[key] = previous;
@@ -907,9 +826,8 @@ function useRendererManager({ scene, canvas, options, contextParts: { sizes, cam
 		}
 		invalidateOnDemand();
 	}, { immediate: true });
-	const { pixelRatio } = useDevicePixelRatio();
 	watchEffect(() => {
-		setPixelRatio(renderer, pixelRatio.value, toValue(options.dpr));
+		setPixelRatio(renderer, sizes.pixelRatio.value, toValue(options.dpr));
 	});
 	if (toValue(options.renderMode) === "on-demand") invalidate();
 	if (toValue(options.renderMode) === "manual") useTimeout(100, { callback: advance });
@@ -976,12 +894,14 @@ function useRendererManager({ scene, canvas, options, contextParts: { sizes, cam
 //#endregion
 //#region src/composables/useSizes/index.ts
 function useSizes(windowSize, canvas, debounceMs = 10) {
+	const { pixelRatio } = useDevicePixelRatio();
 	const reactiveSize = toValue(windowSize) ? useWindowSize() : useElementSize(computed(() => toValue(canvas).parentElement));
 	const debouncedReactiveWidth = readonly(refDebounced(reactiveSize.width, debounceMs));
 	const debouncedReactiveHeight = readonly(refDebounced(reactiveSize.height, debounceMs));
 	return {
-		height: debouncedReactiveHeight,
 		width: debouncedReactiveWidth,
+		height: debouncedReactiveHeight,
+		pixelRatio,
 		aspectRatio: computed(() => debouncedReactiveWidth.value / debouncedReactiveHeight.value)
 	};
 }
@@ -1159,11 +1079,11 @@ const nodeOps = (context) => {
 		if (!props.args) props.args = [];
 		if (isHTMLTag(tag)) return null;
 		if (tag.includes("-")) tag = tag.replace(/-([a-z])/g, (_, c) => c.toUpperCase()).replace(/^[a-z]/, (c) => c.toUpperCase());
-		let name$1 = tag.replace("Tres", "");
+		let name = tag.replace("Tres", "");
 		let obj;
 		if (tag === "primitive") {
 			if (!isObject(props.object) || isRef(props.object)) logError("Tres primitives need an 'object' prop, whose value is an object or shallowRef<object>");
-			name$1 = props.object.type;
+			name = props.object.type;
 			const __tres = {};
 			obj = createRetargetingProxy(props.object, {
 				object: (t) => t,
@@ -1182,8 +1102,8 @@ const nodeOps = (context) => {
 				}
 			});
 		} else {
-			const target = catalogue.value[name$1];
-			if (!target) logError(`${name$1} is not defined on the THREE namespace. Use extend to add it to the catalog.`);
+			const target = catalogue.value[name];
+			if (!target) logError(`${name} is not defined on the THREE namespace. Use extend to add it to the catalog.`);
 			obj = new target(...props.args);
 		}
 		if (!obj) return null;
@@ -1193,7 +1113,7 @@ const nodeOps = (context) => {
 		}
 		obj = prepareTresInstance(obj, {
 			...isTresInstance(obj) ? obj.__tres : {},
-			type: name$1,
+			type: name,
 			memoizedProps: props,
 			primitive: tag === "primitive",
 			attach: props.attach
@@ -1375,14 +1295,14 @@ var DevtoolsMessenger = class {
 	* Send a message to devtools subscribers
 	* If no subscribers are available, only queueable message types are queued
 	*/
-	send(type$1, data) {
+	send(type, data) {
 		const message = {
-			type: type$1,
+			type,
 			data,
 			timestamp: Date.now()
 		};
 		if (this.subscribers.size > 0) this.subscribers.forEach((subscriber) => subscriber(message));
-		else if (QUEUEABLE_MESSAGE_TYPES.includes(type$1)) this.queueMessage(message);
+		else if (QUEUEABLE_MESSAGE_TYPES.includes(type)) this.queueMessage(message);
 	}
 	/**
 	* Queue a message for later delivery
@@ -1440,15 +1360,15 @@ var DevtoolsMessenger = class {
 * @param message - message to log
 * @param type - different color of the tooltip
 */
-function toastMessage(message, type$1) {
+function toastMessage(message, type) {
 	const tresMessage = `▲ ■ ●${message}`;
-	if (typeof __VUE_DEVTOOLS_TOAST__ === "function") __VUE_DEVTOOLS_TOAST__(tresMessage, type$1);
-	else if (type$1 === "error") console.error(tresMessage);
-	else if (type$1 === "warn") console.warn(tresMessage);
+	if (typeof __VUE_DEVTOOLS_TOAST__ === "function") __VUE_DEVTOOLS_TOAST__(tresMessage, type);
+	else if (type === "error") console.error(tresMessage);
+	else if (type === "warn") console.warn(tresMessage);
 	else console.log(tresMessage);
 }
-function __VUE_DEVTOOLS_TOAST__(tresMessage, type$1) {
-	throw new Error(tresMessage + type$1);
+function __VUE_DEVTOOLS_TOAST__(tresMessage, type) {
+	throw new Error(tresMessage + type);
 }
 
 //#endregion
@@ -1889,10 +1809,9 @@ function registerTresDevtools(app, tres) {
 }
 
 //#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({
-	__name: "TresCanvas",
+//#region src/components/Context.vue?vue&type=script&setup=true&lang.ts
+var Context_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Context",
 	props: {
 		camera: {
 			type: null,
@@ -1900,28 +1819,23 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		},
 		windowSize: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		enableProvideBridge: {
 			type: Boolean,
-			required: false,
-			default: true
+			required: false
 		},
 		antialias: {
 			type: Boolean,
-			required: false,
-			default: true
+			required: false
 		},
 		stencil: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		depth: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		precision: {
 			type: String,
@@ -1929,13 +1843,11 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		},
 		logarithmicDepthBuffer: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		preserveDrawingBuffer: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		powerPreference: {
 			type: null,
@@ -1943,8 +1855,7 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		},
 		alpha: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		premultipliedAlpha: {
 			type: Boolean,
@@ -1952,8 +1863,7 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		},
 		failIfMajorPerformanceCaveat: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		clearColor: {
 			type: [
@@ -1961,33 +1871,27 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				String,
 				Number
 			],
-			required: false,
-			default: "#000000"
+			required: false
 		},
 		clearAlpha: {
 			type: Number,
-			required: false,
-			default: 1
+			required: false
 		},
 		shadows: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		toneMapping: {
 			type: null,
-			required: false,
-			default: ACESFilmicToneMapping
+			required: false
 		},
 		shadowMapType: {
 			type: null,
-			required: false,
-			default: PCFSoftShadowMap
+			required: false
 		},
 		useLegacyLights: {
 			type: Boolean,
-			required: false,
-			default: void 0
+			required: false
 		},
 		outputColorSpace: {
 			type: null,
@@ -1999,8 +1903,7 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		},
 		renderMode: {
 			type: String,
-			required: false,
-			default: "always"
+			required: false
 		},
 		dpr: {
 			type: [Number, Array],
@@ -2009,6 +1912,10 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		renderer: {
 			type: Function,
 			required: false
+		},
+		canvas: {
+			type: null,
+			required: true
 		}
 	},
 	emits: [
@@ -2035,7 +1942,6 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
-		const canvasRef = ref();
 		const scene = shallowRef(new Scene());
 		const instance = getCurrentInstance();
 		extend(THREE);
@@ -2075,7 +1981,12 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			}
 			scene.value.__tres = { root: context$1 };
 		};
-		const context = shallowRef(null);
+		const context = shallowRef(useTresContextProvider({
+			scene: scene.value,
+			canvas: props.canvas,
+			windowSize: props.windowSize ?? false,
+			rendererOptions: props
+		}));
 		__expose({
 			context,
 			dispose: () => dispose(context.value, true)
@@ -2088,73 +1999,226 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			dispose(context.value);
 			mountCustomRenderer(context.value, true);
 		};
-		onMounted(() => {
-			const existingCanvas = canvasRef;
-			context.value = useTresContextProvider({
-				scene: scene.value,
-				canvas: existingCanvas,
-				windowSize: props.windowSize ?? false,
-				rendererOptions: props
-			});
-			const { camera, renderer } = context.value;
-			const { registerCamera, cameras, activeCamera, deregisterCamera } = camera;
-			mountCustomRenderer(context.value);
-			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 unwatch = watchEffect(() => {
-					if (cameras.value.length >= 2) {
-						camera$1.removeFromParent();
-						deregisterCamera(camera$1);
-						unwatch?.();
-					}
-				});
-			};
-			context.value.events.onPointerMissed((event) => {
-				emit("pointermissed", event);
-			});
-			watch(() => props.camera, (newCamera, oldCamera) => {
-				if (newCamera) registerCamera(toValue(newCamera), true);
-				if (oldCamera) {
-					toValue(oldCamera).removeFromParent();
-					deregisterCamera(toValue(oldCamera));
+		const { camera, renderer } = context.value;
+		const { registerCamera, cameras, activeCamera, deregisterCamera } = camera;
+		mountCustomRenderer(context.value);
+		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 unwatch = watchEffect(() => {
+				if (cameras.value.length >= 2) {
+					camera$1.removeFromParent();
+					deregisterCamera(camera$1);
+					unwatch?.();
 				}
-			}, { immediate: true });
-			if (!activeCamera.value) addDefaultCamera();
-			renderer.onRender(() => {
-				if (context.value) emit("render", context.value);
-			});
-			renderer.loop.onLoop((loopContext) => {
-				if (context.value) emit("loop", {
-					...context.value,
-					...loopContext
-				});
 			});
-			renderer.loop.onBeforeLoop((loopContext) => {
-				if (context.value) emit("beforeLoop", {
-					...context.value,
-					...loopContext
-				});
+		};
+		context.value.events.onPointerMissed((event) => {
+			emit("pointermissed", event);
+		});
+		watch(() => props.camera, (newCamera, oldCamera) => {
+			if (newCamera) registerCamera(toValue(newCamera), true);
+			if (oldCamera) {
+				toValue(oldCamera).removeFromParent();
+				deregisterCamera(toValue(oldCamera));
+			}
+		}, { immediate: true });
+		if (!activeCamera.value) addDefaultCamera();
+		renderer.onRender(() => {
+			if (context.value) emit("render", context.value);
+		});
+		renderer.loop.onLoop((loopContext) => {
+			if (context.value) emit("loop", {
+				...context.value,
+				...loopContext
 			});
-			renderer.onReady(() => {
-				emit("ready", context.value);
+		});
+		renderer.loop.onBeforeLoop((loopContext) => {
+			if (context.value) emit("beforeLoop", {
+				...context.value,
+				...loopContext
 			});
-			if (import.meta.hot && context.value) import.meta.hot.on("vite:afterUpdate", () => handleHMR(context.value));
 		});
+		renderer.onReady(() => {
+			emit("ready", context.value);
+		});
+		if (import.meta.hot) import.meta.hot.on("vite:afterUpdate", () => handleHMR(context.value));
 		onMounted(async () => {
 			await promiseTimeout(3e3);
-			if (context.value && (!context.value.sizes.width || !context.value.sizes.height.value)) console.warn(`TresCanvas: The canvas has no area, so nothing can be rendered. Set it manually on the parent element or use the prop windowSize.`);
+			if (!context.value.sizes.width || !context.value.sizes.height.value) console.warn(`TresCanvas: The canvas has no area, so nothing can be rendered. Set it manually on the parent element or use the prop windowSize.`);
 		});
 		onUnmounted(unmountCanvas);
+		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({
+	__name: "TresCanvas",
+	props: {
+		camera: {
+			type: null,
+			required: false
+		},
+		windowSize: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		enableProvideBridge: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		antialias: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		stencil: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		depth: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		precision: {
+			type: String,
+			required: false
+		},
+		logarithmicDepthBuffer: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		preserveDrawingBuffer: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		powerPreference: {
+			type: null,
+			required: false
+		},
+		alpha: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		premultipliedAlpha: {
+			type: Boolean,
+			required: false
+		},
+		failIfMajorPerformanceCaveat: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		clearColor: {
+			type: [
+				Object,
+				String,
+				Number
+			],
+			required: false,
+			default: "#000000"
+		},
+		clearAlpha: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		shadows: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		toneMapping: {
+			type: null,
+			required: false,
+			default: ACESFilmicToneMapping
+		},
+		shadowMapType: {
+			type: null,
+			required: false,
+			default: PCFSoftShadowMap
+		},
+		useLegacyLights: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		outputColorSpace: {
+			type: null,
+			required: false
+		},
+		toneMappingExposure: {
+			type: Number,
+			required: false
+		},
+		renderMode: {
+			type: String,
+			required: false,
+			default: "always"
+		},
+		dpr: {
+			type: [Number, Array],
+			required: false
+		},
+		renderer: {
+			type: Function,
+			required: false
+		}
+	},
+	emits: [
+		"ready",
+		"pointermissed",
+		"render",
+		"beforeLoop",
+		"loop",
+		"click",
+		"contextmenu",
+		"pointermove",
+		"pointerenter",
+		"pointerleave",
+		"pointerover",
+		"pointerout",
+		"dblclick",
+		"pointerdown",
+		"pointerup",
+		"pointercancel",
+		"lostpointercapture",
+		"wheel"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const canvasRef = ref();
+		const contextRef = shallowRef();
+		__expose({
+			get context() {
+				return contextRef.value?.context;
+			},
+			dispose: () => contextRef.value?.dispose()
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("canvas", {
 				ref_key: "canvasRef",
 				ref: canvasRef,
-				"data-scene": scene.value.uuid,
+				"data-scene": contextRef.value?.context?.scene.value.uuid,
 				class: normalizeClass(_ctx.$attrs.class),
-				"data-tres": `tresjs ${unref(package_default).version}`,
+				"data-tres": `tresjs ${unref(version)}`,
 				style: normalizeStyle({
 					display: "block",
 					width: "100%",
@@ -2166,7 +2230,34 @@ var TresCanvas_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					touchAction: "none",
 					..._ctx.$attrs.style
 				})
-			}, null, 14, _hoisted_1);
+			}, [canvasRef.value ? (openBlock(), createBlock(Context_default, mergeProps({
+				key: 0,
+				ref_key: "contextRef",
+				ref: contextRef,
+				canvas: canvasRef.value
+			}, props, {
+				onReady: _cache[0] || (_cache[0] = ($event) => emit("ready", $event)),
+				onPointermissed: _cache[1] || (_cache[1] = ($event) => emit("pointermissed", $event)),
+				onRender: _cache[2] || (_cache[2] = ($event) => emit("render", $event)),
+				onBeforeLoop: _cache[3] || (_cache[3] = ($event) => emit("beforeLoop", $event)),
+				onLoop: _cache[4] || (_cache[4] = ($event) => emit("loop", $event)),
+				onClick: _cache[5] || (_cache[5] = ($event) => emit("click", $event)),
+				onContextmenu: _cache[6] || (_cache[6] = ($event) => emit("contextmenu", $event)),
+				onPointermove: _cache[7] || (_cache[7] = ($event) => emit("pointermove", $event)),
+				onPointerenter: _cache[8] || (_cache[8] = ($event) => emit("pointerenter", $event)),
+				onPointerleave: _cache[9] || (_cache[9] = ($event) => emit("pointerleave", $event)),
+				onPointerover: _cache[10] || (_cache[10] = ($event) => emit("pointerover", $event)),
+				onPointerout: _cache[11] || (_cache[11] = ($event) => emit("pointerout", $event)),
+				onDblclick: _cache[12] || (_cache[12] = ($event) => emit("dblclick", $event)),
+				onPointerdown: _cache[13] || (_cache[13] = ($event) => emit("pointerdown", $event)),
+				onPointerup: _cache[14] || (_cache[14] = ($event) => emit("pointerup", $event)),
+				onPointercancel: _cache[15] || (_cache[15] = ($event) => emit("pointercancel", $event)),
+				onLostpointercapture: _cache[16] || (_cache[16] = ($event) => emit("lostpointercapture", $event)),
+				onWheel: _cache[17] || (_cache[17] = ($event) => emit("wheel", $event))
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["canvas"])) : createCommentVNode("v-if", true)], 14, _hoisted_1);
 		};
 	}
 });
@@ -2243,7 +2334,7 @@ const vDistanceTo = {
 };
 
 //#endregion
-//#region ../../node_modules/.pnpm/three-stdlib@2.36.0_three@0.180.0/node_modules/three-stdlib/helpers/RectAreaLightHelper.js
+//#region ../../node_modules/.pnpm/three-stdlib@2.36.1_three@0.180.0/node_modules/three-stdlib/helpers/RectAreaLightHelper.js
 var RectAreaLightHelper = class extends Line {
 	constructor(light, color) {
 		const positions = [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "type": "module",
-  "version": "5.1.1",
+  "version": "5.2.1",
   "description": "Declarative ThreeJS using Vue Components",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "license": "MIT",
@@ -48,8 +48,7 @@
     "@pmndrs/pointer-events": "^6.6.17",
     "@vue/devtools-api": "^7.7.2",
     "@vueuse/core": "^13.9.0",
-    "radashi": "^12.6.2",
-    "typescript": "^5.8.3"
+    "radashi": "^12.6.2"
   },
   "devDependencies": {
     "@types/three": "^0.180.0",
@@ -69,6 +68,7 @@
     "rollup-plugin-visualizer": "^6.0.3",
     "three": "^0.180.0",
     "tsdown": "0.16.1",
+    "typescript": "^5.8.3",
     "vite": "^7.1.9",
     "vite-plugin-banner": "^0.8.1",
     "vite-plugin-dts": "4.5.4",