@tresjs/core 4.3.6 → 5.0.0-alpha.0

package/dist/src/composables/useCreateRafLoop/index.d.ts

@@ -0,0 +1,14 @@
+export interface RafLoopContext {
+    delta: number;
+    elapsed: number;
+}
+/**
+ * @param cycleFn the function that is called before the after event hook is triggered and after the before event hook is triggered.
+ */
+export declare const useCreateRafLoop: (cycleFn: () => void) => {
+    start: () => void;
+    stop: () => void;
+    isActive: Readonly<import('vue').ShallowRef<boolean>>;
+    onBeforeLoop: import('@vueuse/core').EventHookOn<RafLoopContext>;
+    onLoop: import('@vueuse/core').EventHookOn<RafLoopContext>;
+};

package/dist/src/composables/useEventManager/index.d.ts

@@ -0,0 +1,10 @@
+import { PointerEvent, PointerEventsMap } from '@pmndrs/pointer-events';
+import { Event, Object3D, Object3DEventMap } from 'three';
+import { MaybeRef } from 'vue';
+import { TresContext } from '../useTresContextProvider';
+export declare function useEventManager({ canvas, contextParts: { scene, camera, renderer }, }: {
+    canvas: MaybeRef<HTMLCanvasElement>;
+    contextParts: Pick<TresContext, 'scene' | 'camera' | 'renderer'>;
+}): {
+    onPointerMissed: import('@vueuse/core').EventHookOn<PointerEvent<MouseEvent> & Event<"click", Object3D<Object3DEventMap & PointerEventsMap>>>;
+};

package/dist/src/composables/useGraph/index.d.ts

@@ -0,0 +1,3 @@
+import { MaybeRef } from '@vueuse/core';
+import { TresObject } from '../../types';
+export declare const useGraph: (object: MaybeRef<TresObject | undefined>) => import('vue').ComputedRef<import('../..').TresObjectMap | undefined>;

package/dist/src/composables/useLoader/component.vue.d.ts

@@ -1,24 +1,38 @@
+import { LoadingManager } from 'three';
 import { LoaderProto } from './index';
-type __VLS_Props = {
-    loader: LoaderProto<unknown>;
-    url: string | string[];
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
+import { TresObjectMap } from '../../utils/graph';
+declare const _default: <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<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onLoaded?: ((result: T) => any) | undefined;
+        readonly onError?: ((error: unknown) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onError" | "onLoaded"> & {
+        /**
+         * The THREE.js loader to use
+         */
+        loader: LoaderProto<T>;
+        /**
+         * Path to resource
+         */
+        path: string;
+        /**
+         * Optional THREE.js LoadingManager
+         */
+        manager?: LoadingManager;
+    } & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
     slots: {
         default?(_: {
-            data: unknown;
+            state: import('vue').UnwrapRef<T>;
+            isLoading: boolean;
+            error: unknown;
         }): any;
     };
-    refs: {};
-    rootEl: any;
+    emit: ((evt: "loaded", result: T) => void) & ((evt: "error", error: unknown) => void);
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/src/composables/useLoader/index.d.ts

@@ -1,44 +1,51 @@
-import { Loader, LoadingManager, Object3D } from 'three';
-export interface TresLoader<T> extends Loader {
-    load: (url: string | string[], onLoad: (result: T) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void) => void;
-    loadAsync: (url: string, onProgress?: (event: ProgressEvent) => void) => Promise<T>;
+import { UseAsyncStateOptions, UseAsyncStateReturn } from '@vueuse/core';
+import { Loader, LoadingManager } from 'three';
+import { MaybeRef } from 'vue';
+export interface LoaderMethods {
+    setDRACOLoader: (dracoLoader: any) => void;
+    setMeshoptDecoder: (meshoptDecoder: any) => void;
+    setKTX2Loader: (ktx2Loader: any) => void;
 }
+export type TresLoader<T> = Loader & Partial<LoaderMethods> & {
+    load: (url: string, onLoad: (result: T) => void, onProgress?: (event: ProgressEvent<EventTarget>) => void, onError?: (err: unknown) => void) => void;
+    loadAsync: (url: string, onProgress?: (event: ProgressEvent) => void) => Promise<T>;
+};
 export type LoaderProto<T> = new (manager?: LoadingManager) => TresLoader<T>;
-export type LoaderReturnType<T, L extends LoaderProto<T>> = T extends unknown ? Awaited<ReturnType<InstanceType<L>['loadAsync']>> : T;
+export interface TresLoaderOptions<T, Shallow extends boolean> {
+    manager?: LoadingManager;
+    extensions?: (loader: TresLoader<T>) => void;
+    initialValue?: T;
+    asyncOptions?: UseAsyncStateOptions<Shallow, any | null>;
+}
 /**
- * Traverse an object and return all the nodes and materials
- *
- * @export
- * @param {Object3D} object
- * @return { [key: string]: any }
+ * Return type for the useLoader composable
+ * @template T - The type of the loaded asset (e.g., GLTF, Texture, etc.)
+ * @template Shallow - Whether to use shallow reactivity for better performance
+ * @extends {UseAsyncStateReturn<T, [string], Shallow>} - Extends VueUse's useAsyncState return type
  */
-export declare function traverseObjects(object: Object3D): {
-    [key: string]: any;
+export type UseLoaderReturn<T, Shallow extends boolean> = UseAsyncStateReturn<T, [string], Shallow> & {
+    /**
+     * Loads a new asset from the given path
+     * @param path - The URL or path to the asset to load
+     */
+    load: (path: string) => void;
+    /**
+     * Progress of the loading process
+     * @property loaded - The number of bytes loaded
+     * @property total - The total number of bytes to load
+     * @property percentage - The percentage of the loading process
+     */
+    progress: {
+        loaded: number;
+        total: number;
+        percentage: number;
+    };
 };
-export type Extensions<T extends {
-    prototype: LoaderProto<any>;
-}> = (loader: T['prototype']) => void;
 /**
- * Load resources using THREE loaders and return the result as a promise
- *
- * @see https://tresjs.org/api/composables.html#useloader
- * @see https://threejs.org/docs/index.html?q=loader#api/en/loaders/Loader
- *
- * ```ts
- * import { useLoader } from '@tresjs/core'
- * import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
- *
- * const { scene } = await useLoader(THREE.GLTFLoader, 'path/to/asset.gltf')
- * ```
- *
- * @export
- * @template LoaderProto<T>
- * @template string | string[],
- * @param {LoaderProto<T>} Loader
- * @param {string | string[],} url
- * @param {Extensions<TresLoader<T>>} [extensions]
- * @param {(event: ProgressEvent<EventTarget>) => void} [onProgress]
- * @param {(proto: TresLoader<T>) => void} [cb]
- * @return {*}
+ * Vue composable for loading 3D models using Three.js loaders
+ * @param Loader - The Three.js loader constructor
+ * @param path - The path to the model file
+ * @param options - Optional configuration for the loader
+ * @returns UseAsyncState composable with the loaded model
  */
-export declare function useLoader<T>(Loader: LoaderProto<T>, url: string | string[], extensions?: (loader: TresLoader<T>) => void, onProgress?: (event: ProgressEvent<EventTarget>) => void, cb?: (proto: TresLoader<T>) => void): Promise<T | T[]>;
+export declare function useLoader<T, Shallow extends boolean = false>(Loader: LoaderProto<T>, path: MaybeRef<string>, options?: TresLoaderOptions<T, Shallow>): UseLoaderReturn<T, Shallow>;

package/dist/src/composables/useLoop/index.d.ts

@@ -1,17 +1,14 @@
-import { LoopCallbackFn } from './../../core/loop';
-export declare function useLoop(): {
-    pause: import('@vueuse/core').Fn;
-    resume: import('@vueuse/core').Fn;
-    pauseRender: import('@vueuse/core').Fn;
-    resumeRender: import('@vueuse/core').Fn;
-    isActive: import('vue').Ref<boolean, boolean>;
-    onBeforeRender: (cb: LoopCallbackFn, index?: number) => {
-        off: import('@vueuse/core').Fn;
-    };
-    render: (cb: LoopCallbackFn) => {
-        off: import('@vueuse/core').Fn;
-    };
-    onAfterRender: (cb: LoopCallbackFn, index?: number) => {
-        off: import('@vueuse/core').Fn;
-    };
+import { RafLoopContext } from '../useCreateRafLoop';
+import { TresPartialContext } from '../useTres';
+export type LoopContext = RafLoopContext & TresPartialContext;
+/**
+ * Composable that provides control over the render loop and animation lifecycle.
+ */
+export declare const useLoop: () => {
+    stop: () => void;
+    start: () => void;
+    isActive: Readonly<import('vue').ShallowRef<boolean>>;
+    onBeforeRender: import('../../utils/createPriorityEventHook').PriorityEventHookOn<LoopContext>;
+    onRender: import('../../utils/createPriorityEventHook').PriorityEventHookOn<LoopContext>;
+    render: (fn: import('..').RenderFunction) => void;
 };

package/dist/src/composables/useRenderer/pixelRatio.d.ts

@@ -0,0 +1,4 @@
+export declare const setPixelRatio: (renderer: {
+    setPixelRatio?: (dpr: number) => void;
+    getPixelRatio?: () => number;
+}, systemDpr: number, userDpr?: number | [number, number]) => void;

package/dist/src/composables/useRenderer/useRendererManager.d.ts

@@ -0,0 +1,194 @@
+import { ColorRepresentation, ColorSpace, ShadowMapType, ToneMapping, WebGLRenderer } from 'three';
+import { TresContext } from '../useTresContextProvider';
+import { MaybeRef, Reactive, ShallowRef } from 'vue';
+import { Renderer } from 'three/webgpu';
+import { SizesType } from '../useSizes';
+import { UseCameraReturn } from '../useCamera';
+import { TresScene } from '../../types';
+/**
+ * If set to 'on-demand', the scene will only be rendered when the current frame is invalidated
+ * If set to 'manual', the scene will only be rendered when advance() is called
+ * If set to 'always', the scene will be rendered every frame
+ */
+export type RenderMode = 'always' | 'on-demand' | 'manual';
+export type RenderFunction = (notifySuccess: () => void) => void;
+export type TresRenderer = WebGLRenderer | Renderer;
+export interface RendererOptions {
+    /**
+     * WebGL Context options (Readonly because they are passed to the renderer constructor)
+     * They can't be changed after the renderer is created because they are passed to the canvas context
+     */
+    antialias?: boolean;
+    /**
+     * Enables stencil buffer with 8 bits.
+     * Required for stencil-based operations like shadow volumes or post-processing effects.
+     * @readonly
+     * @default true
+     */
+    stencil?: boolean;
+    /**
+     * Enables depth buffer with at least 16 bits.
+     * Required for proper 3D rendering and depth testing.
+     * @readonly
+     * @default true
+     */
+    depth?: boolean;
+    /**
+     * Sets the shader precision of the renderer.
+     * @see {@link https://threejs.org/docs/#api/en/renderers/WebGLRenderer}
+     * @default 'highp'
+     */
+    precision?: 'highp' | 'mediump' | 'lowp';
+    /**
+     * Enables logarithmic depth buffer. Useful for scenes with large differences in scale.
+     * Helps prevent z-fighting in scenes with objects very close and very far from the camera.
+     * @readonly
+     * @default false
+     */
+    logarithmicDepthBuffer?: boolean;
+    /**
+     * Preserves the buffers until manually cleared or overwritten.
+     * Needed for screenshots or when reading pixels from the canvas.
+     * Warning: This may impact performance.
+     * @readonly
+     * @default false
+     */
+    preserveDrawingBuffer?: boolean;
+    /**
+     * Power preference for the renderer.
+      * Power preference for the renderer.
+      * - `default`: Automatically chooses the most suitable power setting.
+      * - `high-performance`: Prioritizes rendering performance.
+      * - `low-power`: Tries to reduce power usage.
+     * @see {@link https://threejs.org/docs/#api/en/renderers/WebGLRenderer}
+     * @default 'default'
+     * @readonly
+     */
+    powerPreference?: WebGLPowerPreference;
+    /**
+       * Whether to create the WebGL context with an alpha buffer.
+       * This is a WebGL context option that must be set during context creation and cannot be changed later.
+       * When true, the canvas can be transparent, showing content behind it.
+       * @readonly
+       * @default false
+       */
+    alpha?: boolean;
+    /**
+     * Whether to premultiply the alpha of the canvas.
+     * @see {@link https://threejs.org/docs/#api/en/renderers/WebGLRenderer}
+     * @default true
+     */
+    premultipliedAlpha?: boolean;
+    /**
+     * Whether to fail if the major performance caveat is detected.
+     * @see {@link https://threejs.org/docs/#api/en/renderers/WebGLRenderer}
+     * @default false
+     */
+    failIfMajorPerformanceCaveat?: boolean;
+    /**
+     * WebGL options with set methods
+     * @see {@link https://threejs.org/docs/#api/en/renderers/WebGLRenderer}
+     */
+    /**
+     * Clear color for the canvas
+     * Can include alpha value (e.g. '#00808000' for fully transparent teal)
+     */
+    clearColor?: ColorRepresentation;
+    /**
+     * The opacity of the clear color (0-1)
+     * Controls the transparency of the clear color
+     * @default 1
+     */
+    clearAlpha?: number;
+    /**
+     * Enable shadow rendering in the scene
+     * @default false
+     */
+    shadows?: boolean;
+    /**
+     * Tone mapping technique to use for the scene
+     * - `NoToneMapping`: No tone mapping is applied.
+     * - `LinearToneMapping`: Linear tone mapping.
+     * - `ReinhardToneMapping`: Reinhard tone mapping.
+     * - `CineonToneMapping`: Cineon tone mapping.
+     * - `ACESFilmicToneMapping`: ACES Filmic tone mapping.
+     * - `AgXToneMapping`: AgX tone mapping.
+     * - `NeutralToneMapping`: Neutral tone mapping.
+     * @see {@link https://threejs.org/docs/#api/en/constants/Renderer}
+     * @default ACESFilmicToneMapping (Opinionated default by TresJS)
+     */
+    toneMapping?: ToneMapping;
+    /**
+     * Type of shadow map to use for shadow calculations
+     * - `BasicShadowMap`: Basic shadow map.
+     * - `PCFShadowMap`: Percentage-Closer Filtering shadow map.
+     * - `PCFSoftShadowMap`: Percentage-Closer Filtering soft shadow map.
+     * - `VSMShadowMap`: Variance shadow map.
+     * @see {@link https://threejs.org/docs/#api/en/constants/Renderer}
+     * @default PCFSoftShadowMap (Opinionated default by TresJS)
+     */
+    shadowMapType?: ShadowMapType;
+    /**
+     * Whether to use legacy lights system instead of the new one
+     * @deprecated Use `useLegacyLights: false` for the new lighting system
+     */
+    useLegacyLights?: boolean;
+    /**
+     * Color space for the output render
+     * @see {@link https://threejs.org/docs/#api/en/constants/Renderer}
+     */
+    outputColorSpace?: ColorSpace;
+    /**
+     * Exposure level of tone mapping
+     * @default 1
+     */
+    toneMappingExposure?: number;
+    /**
+     * Rendering mode for the canvas
+     * - 'always': Renders every frame
+     * - 'on-demand': Renders only when changes are detected
+     * - 'manual': Renders only when explicitly called
+     * @default 'always'
+     */
+    renderMode?: 'always' | 'on-demand' | 'manual';
+    /**
+     * Device Pixel Ratio for the renderer
+     * Can be a single number or a tuple defining a range [min, max]
+     */
+    dpr?: number | [number, number];
+    /**
+     * Custom WebGL renderer instance
+     * Allows using a pre-configured renderer instead of creating a new one
+     */
+    renderer?: (ctx: TresRendererSetupContext) => TresRenderer;
+}
+export interface TresRendererSetupContext {
+    sizes: SizesType;
+    scene: ShallowRef<TresScene>;
+    camera: UseCameraReturn;
+    canvas: MaybeRef<HTMLCanvasElement>;
+}
+export interface UseRendererOptions {
+    scene: ShallowRef<TresScene>;
+    canvas: MaybeRef<HTMLCanvasElement>;
+    options: Reactive<RendererOptions>;
+    contextParts: Pick<TresContext, 'sizes' | 'camera'>;
+}
+export declare function useRendererManager({ scene, canvas, options, contextParts: { sizes, camera }, }: UseRendererOptions): {
+    loop: {
+        start: () => void;
+        stop: () => void;
+        isActive: Readonly<ShallowRef<boolean>>;
+        onBeforeLoop: import('@vueuse/core').EventHookOn<import('../useCreateRafLoop').RafLoopContext>;
+        onLoop: import('@vueuse/core').EventHookOn<import('../useCreateRafLoop').RafLoopContext>;
+    };
+    instance: TresRenderer;
+    advance: () => void;
+    onReady: import('@vueuse/core').EventHookOn<TresRenderer>;
+    onRender: import('@vueuse/core').EventHookOn<TresRenderer>;
+    invalidate: (amountOfFramesToInvalidate?: number) => void;
+    canBeInvalidated: import('vue').ComputedRef<boolean>;
+    mode: "always" | "on-demand" | "manual" | undefined;
+    replaceRenderFunction: (fn: RenderFunction) => void;
+};
+export type UseRendererManagerReturn = ReturnType<typeof useRendererManager>;

package/dist/src/composables/useTres/index.d.ts

@@ -0,0 +1,37 @@
+import { ComputedRef } from 'vue';
+import { TresContext } from '../useTresContextProvider';
+import { Camera } from 'three';
+import { TresRenderer } from '..';
+export interface TresPartialContext extends Omit<TresContext, 'renderer' | 'camera'> {
+    /**
+     * The renderer instance
+     *
+     * @type {TresRenderer}
+     * @memberof TresPartialContext
+     */
+    renderer: TresRenderer;
+    /**
+     * The current active camera
+     *
+     * @type {ComputedRef<Camera | undefined>}
+     * @memberof TresPartialContext
+     */
+    camera: ComputedRef<Camera | undefined>;
+    /**
+     * Marks the scene as needing an update in the next frame.
+     * This is used in on-demand rendering mode to schedule a render.
+     *
+     * @type {() => void}
+     * @memberof TresPartialContext
+     */
+    invalidate: () => void;
+    /**
+     * Manually advances the render loop by one frame.
+     * This is particularly useful in manual rendering mode where you want explicit control over when frames are rendered.
+     *
+     * @type {() => void}
+     * @memberof TresPartialContext
+     */
+    advance: () => void;
+}
+export declare function useTres(): TresPartialContext;

package/dist/src/composables/useTresContextProvider/index.d.ts

@@ -1,74 +1,24 @@
-import { Camera, WebGLRenderer, Raycaster } from 'three';
-import { ComputedRef, DeepReadonly, MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';
-import { RendererLoop } from '../../core/loop';
-import { EmitEventFn, TresControl, TresObject, TresScene } from '../../types';
-import { UseRendererOptions } from '../useRenderer';
+import { MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';
+import { TresControl, TresScene } from '../../types';
+import { RendererOptions, UseRendererManagerReturn } from '../useRenderer/useRendererManager';
+import { UseCameraReturn } from '../useCamera/';
 import { SizesType } from '../useSizes';
-import { TresEventManager } from '../useTresEventManager';
-export interface InternalState {
-    priority: Ref<number>;
-    frames: Ref<number>;
-    maxFrames: number;
-}
-export interface RenderState {
-    /**
-     * If set to 'on-demand', the scene will only be rendered when the current frame is invalidated
-     * If set to 'manual', the scene will only be rendered when advance() is called
-     * If set to 'always', the scene will be rendered every frame
-     */
-    mode: Ref<'always' | 'on-demand' | 'manual'>;
-    priority: Ref<number>;
-    frames: Ref<number>;
-    maxFrames: number;
-    canBeInvalidated: ComputedRef<boolean>;
-}
-export interface PerformanceState {
-    maxFrames: number;
-    fps: {
-        value: number;
-        accumulator: number[];
-    };
-    memory: {
-        currentMem: number;
-        allocatedMem: number;
-        accumulator: number[];
-    };
-}
+import { useEventManager } from '../useEventManager';
 export interface TresContext {
     scene: ShallowRef<TresScene>;
     sizes: SizesType;
     extend: (objects: any) => void;
-    camera: ComputedRef<Camera | undefined>;
-    cameras: DeepReadonly<Ref<Camera[]>>;
+    camera: UseCameraReturn;
     controls: Ref<TresControl | null>;
-    renderer: ShallowRef<WebGLRenderer>;
-    raycaster: ShallowRef<Raycaster>;
-    perf: PerformanceState;
-    render: RenderState;
-    loop: RendererLoop;
-    /**
-     * Invalidates the current frame when renderMode === 'on-demand'
-     */
-    invalidate: () => void;
-    /**
-     * Advance one frame when renderMode === 'manual'
-     */
-    advance: () => void;
-    registerCamera: (maybeCamera: unknown) => void;
-    setCameraActive: (cameraOrUuid: Camera | string) => void;
-    deregisterCamera: (maybeCamera: unknown) => void;
-    eventManager?: TresEventManager;
-    registerObjectAtPointerEventHandler?: (object: TresObject) => void;
-    deregisterObjectAtPointerEventHandler?: (object: TresObject) => void;
-    registerBlockingObjectAtPointerEventHandler?: (object: TresObject) => void;
-    deregisterBlockingObjectAtPointerEventHandler?: (object: TresObject) => void;
+    renderer: UseRendererManagerReturn;
+    events: ReturnType<typeof useEventManager>;
 }
-export declare function useTresContextProvider({ scene, canvas, windowSize, rendererOptions, emit, }: {
+export declare const INJECTION_KEY = "useTres";
+declare const useTresContextProvider: (args_0: {
     scene: TresScene;
     canvas: MaybeRef<HTMLCanvasElement>;
     windowSize: MaybeRefOrGetter<boolean>;
-    rendererOptions: UseRendererOptions;
-    emit: EmitEventFn;
-}): TresContext;
-export declare function useTresContext(): TresContext;
-export declare const useTres: typeof useTresContext;
+    rendererOptions: RendererOptions;
+}) => TresContext;
+declare const useTresContext: () => TresContext;
+export { useTresContext, useTresContextProvider };

package/dist/src/devtools/inspectorHandlers.d.ts

@@ -0,0 +1,60 @@
+import { Mesh } from 'three';
+import { TresObject } from '../types';
+import { SceneGraphObject } from './types';
+import { TresContext } from '../composables/useTresContextProvider';
+/**
+ * Creates a node representation of a Three.js object for the inspector tree
+ * @param object - The Three.js object to create a node for
+ * @returns A SceneGraphObject representing the Three.js object with relevant metadata
+ */
+export declare const createNode: (object: TresObject) => SceneGraphObject;
+/**
+ * Creates a context node for the inspector tree
+ * @param key - The key identifier for the context node
+ * @param uuid - The unique identifier for the context
+ * @param parentKey - Optional parent key for nested context nodes
+ * @returns A SceneGraphObject representing the context node
+ */
+export declare function createContextNode(key: string, uuid: string, parentKey?: string): SceneGraphObject;
+/**
+ * Recursively builds a graph representation of Three.js objects for the inspector
+ * @param object - The root Three.js object to build the graph from
+ * @param node - The current node in the graph being built
+ * @param filter - Optional filter string to filter objects by type or name
+ */
+export declare function buildGraph(object: TresObject, node: SceneGraphObject, filter?: string): void;
+/**
+ * Recursively builds a graph representation of context objects for the inspector
+ * @param object - The root object to build the context graph from
+ * @param node - The current node in the graph being built
+ * @param visited - WeakSet to track visited objects and prevent circular references
+ * @param depth - Current depth in the object tree
+ * @param maxDepth - Maximum depth to traverse
+ * @param contextUuid - Optional UUID for the context
+ * @param parentKey - Optional parent key for nested objects
+ */
+export declare function buildContextGraph(object: any, node: SceneGraphObject, visited?: WeakSet<WeakKey>, depth?: number, maxDepth?: number, contextUuid?: string, parentKey?: string): void;
+/**
+ * Handler for inspector tree updates
+ * @param tres - The TresContext instance
+ * @returns A function that handles inspector tree payload updates
+ */
+export declare const inspectorTreeHandler: (tres: TresContext) => (payload: any) => void;
+/**
+ * Handler for inspector state updates
+ * @param tres - The TresContext instance
+ * @param options - Options for the handler
+ * @param options.highlightMesh - The currently highlighted mesh
+ * @param options.prevInstance - The previously selected instance
+ * @returns A function that handles inspector state payload updates
+ */
+export declare const inspectorStateHandler: (tres: TresContext, { highlightMesh, prevInstance }: {
+    highlightMesh: Mesh | null;
+    prevInstance: TresObject | null;
+}) => (payload: any) => void;
+/**
+ * Handler for inspector state edits
+ * @param tres - The TresContext instance
+ * @returns A function that handles inspector state edit payload updates
+ */
+export declare const inspectorEditStateHandler: (tres: TresContext) => (payload: any) => void;

package/dist/src/devtools/plugin.d.ts

@@ -1,15 +1,10 @@
-import { App as DevtoolsApp } from '@vue/devtools-api';
 import { TresContext } from '../composables';
+import { App } from 'vue';
 export interface Tags {
     label: string;
     textColor: number;
     backgroundColor: number;
     tooltip?: string;
 }
-export interface SceneGraphObject {
-    id: string;
-    label: string;
-    children: SceneGraphObject[];
-    tags: Tags[];
-}
-export declare function registerTresDevtools(app: DevtoolsApp, tres: TresContext): void;
+export declare const INSPECTOR_ID = "tres:inspector";
+export declare function registerTresDevtools(app: App, tres: TresContext): void;

package/dist/src/devtools/setupDevtools.d.ts

@@ -0,0 +1,14 @@
+import { TresContext } from '../composables';
+export interface PerformanceState {
+    maxFrames: number;
+    fps: {
+        value: number;
+        accumulator: number[];
+    };
+    memory: {
+        currentMem: number;
+        allocatedMem: number;
+        accumulator: number[];
+    };
+}
+export declare function setupTresDevtools(ctx: TresContext): void;