react-three-game 0.0.95 → 0.0.97

package/dist/tools/prefabeditor/InstanceProvider.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
-import { ThreeEvent } from '@react-three/fiber';
-import { Object3D, Group } from "three";
+import type { ReactNode } from "react";
+import type { ThreeEvent } from '@react-three/fiber';
+import type { Object3D } from "three";
 export type RepeatAxisConfig = {
     axis: 'x' | 'y' | 'z';
     count: number;
@@ -8,7 +8,7 @@ export type RepeatAxisConfig = {
 };
 export declare const DEFAULT_REPEAT_AXES: RepeatAxisConfig[];
 export declare function normalizeRepeatAxes(value: unknown): RepeatAxisConfig[];
-export declare function getRepeatAxesFromModelProperties(properties: Record<string, any>): RepeatAxisConfig[];
+export declare function getRepeatAxesFromModelProperties(properties: Record<string, unknown>): RepeatAxisConfig[];
 export type InstanceData = {
     id: string;
     sourceId: string;
@@ -20,7 +20,7 @@ export type InstanceData = {
     meshPath: string;
 };
 export declare function GameInstanceProvider({ children, models, onSelect, onClick, registerRef, selectedId, editMode }: {
-    children: React.ReactNode;
+    children: ReactNode;
     models: {
         [filename: string]: Object3D;
     };
@@ -31,7 +31,7 @@ export declare function GameInstanceProvider({ children, models, onSelect, onCli
     editMode?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function useInstanceCheck(id: string): boolean;
-export declare const GameInstance: React.ForwardRefExoticComponent<{
+export declare function GameInstance({ id, sourceId, modelUrl, locked, position, rotation, scale, visible, onClick: _onClick, }: {
     id: string;
     sourceId?: string;
     modelUrl: string;
@@ -41,4 +41,4 @@ export declare const GameInstance: React.ForwardRefExoticComponent<{
     scale: [number, number, number];
     visible?: boolean;
     onClick?: (event: ThreeEvent<PointerEvent>, nodeId: string, object: Object3D | null) => void;
-} & React.RefAttributes<Group<import("three").Object3DEventMap>>>;
+}): null;

package/dist/tools/prefabeditor/InstanceProvider.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { createContext, useContext, useMemo, useRef, useState, useEffect } from "react";
+import { createContext, useContext, useMemo, useRef, useState, useEffect } from "react";
 import { Merged, useHelper } from '@react-three/drei';
 import { Mesh, Matrix4, BoxHelper } from "three";
 import { useStore } from "zustand";
 import { createStore } from "zustand/vanilla";
 import { usePointerEvents } from "./usePointerEvents";
 export const DEFAULT_REPEAT_AXES = [{ axis: 'x', count: 1, offset: 1 }];
+const EMPTY_INSTANCE_STORE = createInstanceRegistryStore();
 export function normalizeRepeatAxes(value) {
     if (!Array.isArray(value)) {
         return DEFAULT_REPEAT_AXES;
@@ -14,14 +15,15 @@ export function normalizeRepeatAxes(value) {
     const normalized = value.reduce((result, entry) => {
         if (!entry || typeof entry !== 'object')
             return result;
-        const axisValue = entry.axis;
+        const record = entry;
+        const axisValue = record.axis;
         if (axisValue !== 'x' && axisValue !== 'y' && axisValue !== 'z')
             return result;
         if (seen.has(axisValue))
             return result;
         seen.add(axisValue);
-        const countValue = Number(entry.count);
-        const offsetValue = Number(entry.offset);
+        const countValue = Number(record.count);
+        const offsetValue = Number(record.offset);
         result.push({
             axis: axisValue,
             count: Number.isFinite(countValue) ? Math.max(1, Math.floor(countValue)) : 1,
@@ -31,32 +33,11 @@ export function normalizeRepeatAxes(value) {
     }, []);
     return normalized.length > 0 ? normalized : DEFAULT_REPEAT_AXES;
 }
-function toVector3Tuple(value, fallback) {
-    if (!Array.isArray(value) || value.length !== 3)
-        return fallback;
-    return value.map((entry, index) => {
-        const next = typeof entry === 'number' ? entry : Number(entry);
-        return Number.isFinite(next) ? next : fallback[index];
-    });
-}
 export function getRepeatAxesFromModelProperties(properties) {
-    var _a;
     if (Array.isArray(properties.repeatAxes)) {
         return normalizeRepeatAxes(properties.repeatAxes);
     }
-    const repeatCount = toVector3Tuple(properties.repeatCount, [1, 1, 1]).map(value => Math.max(1, Math.floor(value)));
-    const repeatOffset = toVector3Tuple(properties.repeatOffset, [1, 1, 1]);
-    const legacyAxes = [];
-    if ((_a = properties.repeatX) !== null && _a !== void 0 ? _a : true) {
-        legacyAxes.push({ axis: 'x', count: repeatCount[0], offset: repeatOffset[0] });
-    }
-    if (properties.repeatY) {
-        legacyAxes.push({ axis: 'y', count: repeatCount[1], offset: repeatOffset[1] });
-    }
-    if (properties.repeatZ) {
-        legacyAxes.push({ axis: 'z', count: repeatCount[2], offset: repeatOffset[2] });
-    }
-    return legacyAxes.length > 0 ? legacyAxes : DEFAULT_REPEAT_AXES;
+    return DEFAULT_REPEAT_AXES;
 }
 // Helper functions for comparison
 function arrayEquals(a, b) {
@@ -141,7 +122,7 @@ export function GameInstanceProvider({ children, models, onSelect, onClick, regi
             const rootInverse = new Matrix4().copy(model.matrixWorld).invert();
             let partIndex = 0;
             model.traverse((obj) => {
-                if (obj.isMesh) {
+                if (obj instanceof Mesh) {
                     // Clone geometry and bake relative transform
                     const geom = obj.geometry.clone();
                     geom.applyMatrix4(obj.matrixWorld.clone().premultiply(rootInverse));
@@ -157,7 +138,9 @@ export function GameInstanceProvider({ children, models, onSelect, onClick, regi
     // Cleanup geometries when models change
     useEffect(() => {
         return () => {
-            Object.values(flatMeshes).forEach(mesh => mesh.geometry.dispose());
+            Object.values(flatMeshes).forEach(mesh => {
+                mesh.geometry.dispose();
+            });
         };
     }, [flatMeshes]);
     const instances = useMemo(() => Object.values(instancesById), [instancesById]);
@@ -194,12 +177,16 @@ export function GameInstanceProvider({ children, models, onSelect, onClick, regi
             })] }));
 }
 function InstancedGroup({ modelKey, group, partCount, instancesMap, onSelect, onClick, registerRef, selectedId, editMode }) {
-    const InstanceComponents = useMemo(() => Array.from({ length: partCount }, (_, i) => instancesMap[`${modelKey}__${i}`]).filter(Boolean), [instancesMap, modelKey, partCount]);
+    const instanceEntries = useMemo(() => Array.from({ length: partCount }, (_, i) => {
+        const partKey = `${modelKey}__${i}`;
+        const Component = instancesMap[partKey];
+        return Component ? { partKey, Component } : null;
+    }).filter((entry) => Boolean(entry)), [instancesMap, modelKey, partCount]);
     const visibleInstances = useMemo(() => group.instances.filter(instance => instance.visible !== false), [group.instances]);
-    return (_jsx(_Fragment, { children: visibleInstances.map(inst => (_jsx(InstanceGroupItem, { instance: inst, InstanceComponents: InstanceComponents, onSelect: onSelect, onClick: onClick, registerRef: registerRef, selectedId: selectedId, editMode: editMode }, inst.id))) }));
+    return (_jsx(_Fragment, { children: visibleInstances.map(inst => (_jsx(InstanceGroupItem, { instance: inst, instanceEntries: instanceEntries, onSelect: onSelect, onClick: onClick, registerRef: registerRef, selectedId: selectedId, editMode: editMode }, inst.id))) }));
 }
 // Individual instance item with its own click state
-function InstanceGroupItem({ instance, InstanceComponents, onSelect, onClick, registerRef, selectedId, editMode }) {
+function InstanceGroupItem({ instance, instanceEntries, onSelect, onClick, registerRef, selectedId, editMode }) {
     const groupRef = useRef(null);
     const isLocked = Boolean(instance.locked);
     const isSelected = selectedId === instance.id || selectedId === instance.sourceId;
@@ -217,24 +204,26 @@ function InstanceGroupItem({ instance, InstanceComponents, onSelect, onClick, re
         },
     });
     // Use BoxHelper when object is selected in edit mode
-    useHelper(editMode && isSelected ? groupRef : null, BoxHelper, 'cyan');
+    const helperTarget = editMode && isSelected && groupRef.current
+        ? { current: groupRef.current }
+        : null;
+    useHelper(helperTarget, BoxHelper, 'cyan');
     useEffect(() => {
         if (editMode)
             return;
         registerRef === null || registerRef === void 0 ? void 0 : registerRef(instance.id, groupRef.current);
         return () => registerRef === null || registerRef === void 0 ? void 0 : registerRef(instance.id, null);
     }, [editMode, instance.id, registerRef]);
-    return (_jsx("group", Object.assign({ ref: groupRef, position: instance.position, rotation: instance.rotation, scale: instance.scale }, pointerHandlers, { children: InstanceComponents.map((Instance, i) => _jsx(Instance, {}, i)) })));
+    return (_jsx("group", Object.assign({ ref: groupRef, position: instance.position, rotation: instance.rotation, scale: instance.scale }, pointerHandlers, { children: instanceEntries.map(({ partKey, Component }) => _jsx(Component, {}, partKey)) })));
 }
 export function useInstanceCheck(id) {
+    var _a;
     const ctx = useContext(GameInstanceContext);
-    return ctx ? useStore(ctx.store, state => Boolean(state.instancesById[id] || state.sourceInstanceIdsById[id])) : false;
+    const store = (_a = ctx === null || ctx === void 0 ? void 0 : ctx.store) !== null && _a !== void 0 ? _a : EMPTY_INSTANCE_STORE;
+    return useStore(store, state => Boolean(state.instancesById[id] || state.sourceInstanceIdsById[id]));
 }
-export const GameInstance = React.forwardRef(({ id, sourceId, modelUrl, locked = false, position, rotation, scale, visible = true, onClick: _onClick, }, ref) => {
+export function GameInstance({ id, sourceId, modelUrl, locked = false, position, rotation, scale, visible = true, onClick: _onClick, }) {
     const ctx = useContext(GameInstanceContext);
-    const [positionX, positionY, positionZ] = position;
-    const [rotationX, rotationY, rotationZ] = rotation;
-    const [scaleX, scaleY, scaleZ] = scale;
     const instance = useMemo(() => ({
         id,
         sourceId: sourceId !== null && sourceId !== void 0 ? sourceId : id,
@@ -244,22 +233,7 @@ export const GameInstance = React.forwardRef(({ id, sourceId, modelUrl, locked =
         position,
         rotation,
         scale,
-    }), [
-        id,
-        sourceId,
-        locked,
-        visible,
-        modelUrl,
-        positionX,
-        positionY,
-        positionZ,
-        rotationX,
-        rotationY,
-        rotationZ,
-        scaleX,
-        scaleY,
-        scaleZ,
-    ]);
+    }), [id, sourceId, locked, visible, modelUrl, position, rotation, scale]);
     useEffect(() => {
         if (!ctx)
             return;
@@ -269,6 +243,6 @@ export const GameInstance = React.forwardRef(({ id, sourceId, modelUrl, locked =
         return () => {
             removeInstance(instance.id);
         };
-    }, [ctx === null || ctx === void 0 ? void 0 : ctx.store, instance]);
+    }, [ctx, instance]);
     return null;
-});
+}

package/dist/tools/prefabeditor/PrefabEditor.d.ts

@@ -1,5 +1,5 @@
 import GameCanvas from "../../shared/GameCanvas";
-import { Prefab } from "./types";
+import type { Prefab } from "./types";
 import { PrefabEditorMode, type Scene } from "./PrefabRoot";
 import type { ExportGLBOptions } from "./utils";
 export interface PrefabEditorRef extends Scene {

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -34,7 +34,10 @@ function isObjectAttachedToRoot(root, object) {
 function SelectionHelper({ object }) {
     const objectRef = useRef(null);
     objectRef.current = object;
-    useHelper(object ? objectRef : null, BoxHelper, "cyan");
+    const helperTarget = objectRef.current
+        ? { current: objectRef.current }
+        : null;
+    useHelper(helperTarget, BoxHelper, "cyan");
     return null;
 }
 export const EditorContext = createContext(null);
@@ -79,6 +82,10 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
     const transformControlsRef = useRef(null);
     const onChangeRef = useRef(onChange);
     const isEditMode = mode === PrefabEditorMode.Edit;
+    const detachTransformControls = useCallback(() => {
+        var _a;
+        (_a = transformControlsRef.current) === null || _a === void 0 ? void 0 : _a.detach();
+    }, []);
     const getPrefab = useCallback(() => denormalizePrefab(prefabStore.getState()), [prefabStore]);
     const getNode = useCallback((nodeId) => { var _a; return (_a = prefabStore.getState().nodesById[nodeId]) !== null && _a !== void 0 ? _a : null; }, [prefabStore]);
     const getRoot = useCallback(() => { var _a, _b; return (_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.root) !== null && _b !== void 0 ? _b : null; }, []);
@@ -158,13 +165,13 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
         updateMode(initialMode);
     }, [initialMode, updateMode]);
     const loadPrefab = useCallback((prefab, options) => {
-        var _a, _b;
-        (_a = transformControlsRef.current) === null || _a === void 0 ? void 0 : _a.detach();
+        var _a;
+        detachTransformControls();
         const before = prefabStore.getState();
         prefabStore.getState().replacePrefab(prefab);
         const after = prefabStore.getState();
         if (after !== before && (options === null || options === void 0 ? void 0 : options.notifyChange) !== false) {
-            (_b = onChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onChangeRef, prefab);
+            (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, prefab);
         }
         if (options === null || options === void 0 ? void 0 : options.resetHistory) {
             setSelectedId(null);
@@ -175,7 +182,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
         else {
             setSelectedId(prev => prev && prefabStore.getState().nodesById[prev] ? prev : null);
         }
-    }, [prefabStore]);
+    }, [detachTransformControls, prefabStore]);
     useEffect(() => {
         if (initialPrefab)
             loadPrefab(initialPrefab, { resetHistory: true, notifyChange: false });
@@ -205,17 +212,25 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
     const importPrefab = useCallback((prefab) => {
         add(regenerateIds(prefab.root));
     }, [add]);
-    const applyHistory = (index) => {
-        var _a, _b;
-        (_a = transformControlsRef.current) === null || _a === void 0 ? void 0 : _a.detach();
+    const applyHistory = useCallback((index) => {
+        var _a;
+        detachTransformControls();
         prefabStore.getState().replacePrefab(history[index]);
-        (_b = onChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onChangeRef, history[index]);
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, history[index]);
         historyIndexRef.current = index;
         setHistoryIndex(index);
         setSelectedId(prev => prev && prefabStore.getState().nodesById[prev] ? prev : null);
-    };
-    const undo = () => historyIndex > 0 && applyHistory(historyIndex - 1);
-    const redo = () => historyIndex < history.length - 1 && applyHistory(historyIndex + 1);
+    }, [detachTransformControls, history, prefabStore]);
+    const undo = useCallback(() => {
+        if (historyIndex > 0) {
+            applyHistory(historyIndex - 1);
+        }
+    }, [applyHistory, historyIndex]);
+    const redo = useCallback(() => {
+        if (historyIndex < history.length - 1) {
+            applyHistory(historyIndex + 1);
+        }
+    }, [applyHistory, history.length, historyIndex]);
     useEffect(() => {
         if (!isEditMode)
             return;
@@ -233,7 +248,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [isEditMode, historyIndex, history]);
+    }, [isEditMode, redo, undo]);
     const handleScreenshot = useCallback(() => {
         const canvas = canvasRef.current;
         if (!canvas)
@@ -383,7 +398,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
                                 }
                                 (_d = canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onPointerMissed) === null || _d === void 0 ? void 0 : _d.call(canvasProps, event);
                             }
-                            : canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onPointerMissed, children: [content, isEditMode ? _jsx(SelectionHelper, { object: transformObject }) : null, isEditMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, enableDamping: false, makeDefault: true }), transformObject && (_jsx(TransformControls, { ref: transformControlsRef, object: transformObject, mode: transformMode, space: "local", onObjectChange: handleTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: scaleSnap > 0 ? scaleSnap : undefined }, `transform-${selectedId}-${transformMode}-${positionSnap}-${rotationSnap}-${scaleSnap}`))] }))] })), showUI && (_jsxs(_Fragment, { children: [_jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: toggleMode, children: isEditMode ? "▶" : "⏸" }), uiPlugins] }), isEditMode && (_jsx(EditorUI, { selectedId: selectedId, setSelectedId: setSelection, getPrefab: getPrefab, onReplacePrefab: (prefab) => loadPrefab(prefab, { resetHistory: true }), onImportPrefab: importPrefab, basePath: basePath, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 }))] }))] }) }) });
+                            : canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onPointerMissed, children: [content, isEditMode ? _jsx(SelectionHelper, { object: transformObject }) : null, isEditMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, enableDamping: false, makeDefault: true }), transformObject && (_jsx(TransformControls, { ref: transformControlsRef, object: transformObject, mode: transformMode, space: transformMode === "translate" ? "world" : "local", onObjectChange: handleTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: scaleSnap > 0 ? scaleSnap : undefined }, `transform-${selectedId}-${transformMode}-${positionSnap}-${rotationSnap}-${scaleSnap}`))] }))] })), showUI && (_jsxs(_Fragment, { children: [_jsxs("div", { style: toolbar.panel, children: [_jsx("button", { type: "button", style: base.btn, onClick: toggleMode, children: isEditMode ? "▶" : "⏸" }), uiPlugins] }), isEditMode && (_jsx(EditorUI, { selectedId: selectedId, setSelectedId: setSelection, getPrefab: getPrefab, onReplacePrefab: (prefab) => loadPrefab(prefab, { resetHistory: true }), onImportPrefab: importPrefab, basePath: basePath, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 }))] }))] }) }) });
 });
 PrefabEditor.displayName = "PrefabEditor";
 export default PrefabEditor;

package/dist/tools/prefabeditor/PrefabRoot.d.ts

@@ -1,8 +1,9 @@
-import { Matrix4, Object3D, Texture } from "three";
-import { ThreeEvent } from "@react-three/fiber";
-import { GameObject as GameObjectType, Prefab } from "./types";
-import { LoadedModels } from "../dragdrop";
-import { PrefabStoreApi } from "./prefabStore";
+import { Matrix4 } from "three";
+import type { Object3D, Texture } from "three";
+import type { ThreeEvent } from "@react-three/fiber";
+import type { GameObject as GameObjectType, Prefab } from "./types";
+import type { LoadedModels } from "../dragdrop";
+import type { PrefabStoreApi } from "./prefabStore";
 export declare enum PrefabEditorMode {
     Edit = "edit",
     Play = "play"

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -11,14 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { Euler, Matrix4, } from "three";
+import { Euler, Matrix4 } from "three";
 import { useStore } from "zustand";
 import { useClickValid } from "./useClickValid";
 import { findComponent, getNodeUserData } from "./types";
 import { getComponentDef, getComponentAssetRefs, registerComponent } from "./components/ComponentRegistry";
 import { builtinComponents } from "./components";
 import { loadModel, loadSound, loadTexture } from "../dragdrop";
-import { GameInstance, GameInstanceProvider, getRepeatAxesFromModelProperties, useInstanceCheck } from "./InstanceProvider";
+import { GameInstance, GameInstanceProvider, getRepeatAxesFromModelProperties } from "./InstanceProvider";
 import { composeTransform, decompose } from "./utils";
 import { createPrefabStore, PrefabStoreProvider, usePrefabChildIds, usePrefabNode, usePrefabRootId } from "./prefabStore";
 import { AssetRuntimeContext, NodeScope } from "./assetRuntime";
@@ -29,6 +29,14 @@ const IDENTITY = new Matrix4();
 const EMPTY_MODELS = {};
 const EMPTY_TEXTURES = {};
 const EMPTY_SOUNDS = {};
+const EMPTY_NODE_COMPONENTS = {
+    geometry: undefined,
+    material: undefined,
+    model: undefined,
+    sprite: undefined,
+    clickEventName: null,
+    composition: [],
+};
 /** Resolve a relative or absolute asset file path against a base path. */
 function resolveAssetPath(basePath, file) {
     if (file.startsWith("http://") || file.startsWith("https://"))
@@ -84,6 +92,9 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
         throw new Error("PrefabRoot requires either a `data` or `store` prop");
     });
     const resolvedStore = store !== null && store !== void 0 ? store : ownedStore;
+    if (!resolvedStore) {
+        throw new Error("PrefabRoot requires either a `data` or `store` prop");
+    }
     const usesOwnedStore = resolvedStore === ownedStore;
     const rootId = useStore(resolvedStore, state => state.rootId);
     const assetManifestKey = useStore(resolvedStore, state => state.assetManifestKey);
@@ -155,6 +166,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
         }
     }, [data, resolvedStore, usesOwnedStore]);
     useEffect(() => {
+        void assetManifestKey;
         const syncAssets = (snapshot = resolvedStore.getState()) => {
             const modelsToLoad = new Set();
             const texturesToLoad = new Set();
@@ -187,23 +199,34 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
                     }
                 });
             };
-            modelsToLoad.forEach(file => loadAsset(file, models, injectedModels, failedModels.current, path => loadModel(path).then(result => {
-                if (result.success && result.model)
-                    setModels(m => (Object.assign(Object.assign({}, m), { [file]: result.model })));
-                return result;
-            })));
-            texturesToLoad.forEach(file => loadAsset(file, textures, injectedTextures, failedTextures.current, path => loadTexture(path).then(result => {
-                if (result.success && result.texture)
-                    setTextures(t => (Object.assign(Object.assign({}, t), { [file]: result.texture })));
-                return result;
-            })));
-            soundsToLoad.forEach(file => loadAsset(file, sounds, injectedSounds, failedSounds.current, path => loadSound(path).then(result => {
-                if (result.success && result.sound) {
-                    soundManager.setBuffer(file, result.sound);
-                    setSounds(s => (Object.assign(Object.assign({}, s), { [file]: result.sound })));
-                }
-                return result;
-            })));
+            modelsToLoad.forEach(file => {
+                loadAsset(file, models, injectedModels, failedModels.current, path => loadModel(path).then(result => {
+                    const loadedModel = result.model;
+                    if (result.success && loadedModel) {
+                        setModels(currentModels => (Object.assign(Object.assign({}, currentModels), { [file]: loadedModel })));
+                    }
+                    return result;
+                }));
+            });
+            texturesToLoad.forEach(file => {
+                loadAsset(file, textures, injectedTextures, failedTextures.current, path => loadTexture(path).then(result => {
+                    const loadedTexture = result.texture;
+                    if (result.success && loadedTexture) {
+                        setTextures(currentTextures => (Object.assign(Object.assign({}, currentTextures), { [file]: loadedTexture })));
+                    }
+                    return result;
+                }));
+            });
+            soundsToLoad.forEach(file => {
+                loadAsset(file, sounds, injectedSounds, failedSounds.current, path => loadSound(path).then(result => {
+                    const loadedSound = result.sound;
+                    if (result.success && loadedSound) {
+                        soundManager.setBuffer(file, loadedSound);
+                        setSounds(currentSounds => (Object.assign(Object.assign({}, currentSounds), { [file]: loadedSound })));
+                    }
+                    return result;
+                }));
+            });
         };
         syncAssets();
     }, [resolvedStore, assetManifestKey, basePath, injectedModels, injectedSounds, injectedTextures, models, sounds, textures]);
@@ -335,14 +358,9 @@ export function GameObjectRenderer(props) {
 function InstancedNode({ nodeId, parentMatrix = IDENTITY, editMode, registerRef, onSelect, onEditNodeClick, onClick, isVisible = true }) {
     var _a, _b;
     const gameObject = usePrefabNode(nodeId);
-    if (!gameObject)
-        return null;
-    const analyzedComponents = useMemo(() => analyzeNodeComponents(gameObject), [gameObject]);
+    const analyzedComponents = useMemo(() => gameObject ? analyzeNodeComponents(gameObject) : EMPTY_NODE_COMPONENTS, [gameObject]);
     const localTransform = getNodeTransformProps(gameObject);
-    const isLocked = Boolean(gameObject.locked);
-    const nodeVisible = isVisible && !gameObject.hidden;
-    const metadataProps = getNodeMetadataProps(gameObject);
-    const groupProps = Object.assign(Object.assign({}, metadataProps), { visible: nodeVisible, position: localTransform.position, rotation: localTransform.rotation, scale: localTransform.scale });
+    const isLocked = Boolean(gameObject === null || gameObject === void 0 ? void 0 : gameObject.locked);
     const modelUrl = (_b = (_a = analyzedComponents.model) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.filename;
     const instances = useMemo(() => buildRepeatedInstances(gameObject, parentMatrix, modelUrl), [gameObject, modelUrl, parentMatrix]);
     const groupRef = useRef(null);
@@ -353,9 +371,15 @@ function InstancedNode({ nodeId, parentMatrix = IDENTITY, editMode, registerRef,
         }
     }, [editMode, nodeId, registerRef]);
     const editClickHandlers = useClickValid(!!editMode && !isLocked, (event) => {
+        if (!gameObject)
+            return;
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeId);
         onEditNodeClick === null || onEditNodeClick === void 0 ? void 0 : onEditNodeClick(event, gameObject);
     });
+    if (!gameObject)
+        return null;
+    const nodeVisible = isVisible && !gameObject.hidden;
+    const groupProps = Object.assign(Object.assign({}, getNodeMetadataProps(gameObject)), { visible: nodeVisible, position: localTransform.position, rotation: localTransform.rotation, scale: localTransform.scale });
     const renderedInstances = instances.map(instance => (_jsx(GameInstance, { id: instance.id, sourceId: gameObject.id, modelUrl: instance.modelUrl, position: instance.position, rotation: instance.rotation, scale: instance.scale, visible: nodeVisible, locked: isLocked, onClick: onClick }, instance.id)));
     if (editMode) {
         return (_jsxs(_Fragment, { children: [_jsx("group", Object.assign({ ref: handleGroupRef }, groupProps, editClickHandlers, { children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) })), renderedInstances] }));
@@ -365,20 +389,17 @@ function InstancedNode({ nodeId, parentMatrix = IDENTITY, editMode, registerRef,
 function StandardNode({ nodeId, selectedId, onSelect, onClick, onEditNodeClick, registerRef, loadedModels, editMode, parentMatrix = IDENTITY, isVisible = true, }) {
     const gameObject = usePrefabNode(nodeId);
     const childIds = usePrefabChildIds(nodeId);
-    if (!gameObject)
-        return null;
-    const analyzedComponents = useMemo(() => analyzeNodeComponents(gameObject), [gameObject]);
+    const analyzedComponents = useMemo(() => gameObject ? analyzeNodeComponents(gameObject) : EMPTY_NODE_COMPONENTS, [gameObject]);
     const isSelected = selectedId === nodeId;
-    const isLocked = Boolean(gameObject.locked);
-    const nodeVisible = isVisible && !gameObject.hidden;
-    const stillInstanced = useInstanceCheck(nodeId);
-    const metadataProps = getNodeMetadataProps(gameObject);
+    const isLocked = Boolean(gameObject === null || gameObject === void 0 ? void 0 : gameObject.locked);
     const groupRef = useRef(null);
     const handleGroupRef = useCallback((object) => {
         groupRef.current = object;
         registerRef(nodeId, object);
     }, [nodeId, registerRef]);
     const editClickHandlers = useClickValid(!!editMode && !isLocked, (event) => {
+        if (!gameObject)
+            return;
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeId);
         onEditNodeClick === null || onEditNodeClick === void 0 ? void 0 : onEditNodeClick(event, gameObject);
     });
@@ -391,7 +412,10 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, onEditNodeClick,
         }
         : undefined;
     const world = parentMatrix.clone().multiply(compose(gameObject));
-    const ready = isNodeReady(analyzedComponents.model, loadedModels);
+    if (!gameObject)
+        return null;
+    const nodeVisible = isVisible && !gameObject.hidden;
+    const metadataProps = getNodeMetadataProps(gameObject);
     const transform = getNodeTransformProps(gameObject);
     const transformProps = {
         position: transform.position,
@@ -422,7 +446,7 @@ function getModelRepeatSettings(node) {
     };
 }
 function buildRepeatedInstances(gameObject, parentMatrix, modelUrl) {
-    if (!modelUrl)
+    if (!gameObject || !modelUrl)
         return [];
     const transform = getNodeTransformProps(gameObject);
     const repeat = getModelRepeatSettings(gameObject);

package/dist/tools/prefabeditor/components/CameraComponent.d.ts

@@ -1,3 +1,3 @@
-import { Component } from './ComponentRegistry';
+import type { Component } from './ComponentRegistry';
 declare const CameraComponent: Component;
 export default CameraComponent;

package/dist/tools/prefabeditor/components/CameraComponent.js

@@ -39,10 +39,13 @@ function CameraComponentView({ properties, children }) {
     const halfWidth = halfHeight * aspect;
     const perspectiveCameraRef = useRef(null);
     const orthographicCameraRef = useRef(null);
-    const activeCameraRef = projection === 'orthographic'
-        ? orthographicCameraRef
-        : perspectiveCameraRef;
-    useHelper(editMode && isSelected ? activeCameraRef : null, CameraHelper);
+    const activeCamera = projection === 'orthographic'
+        ? orthographicCameraRef.current
+        : perspectiveCameraRef.current;
+    const helperTarget = editMode && isSelected && activeCamera
+        ? { current: activeCamera }
+        : null;
+    useHelper(helperTarget, CameraHelper);
     useFrame(() => {
         if (!editMode || !isSelected)
             return;

package/dist/tools/prefabeditor/components/ComponentRegistry.d.ts

@@ -1,11 +1,13 @@
-import { FC } from "react";
-import { ComponentData, GameObject } from "../types";
+import type { FC } from "react";
+import type { ComponentData, GameObject } from "../types";
 export type AssetRef = {
     type: "model" | "texture" | "sound";
     path: string;
 };
+export declare function assetRef(type: AssetRef["type"], path: unknown): AssetRef | null;
+export declare function assetRefs(...refs: Array<AssetRef | null | undefined>): AssetRef[];
 /** Props every component View receives from the renderer. */
-export interface ComponentViewProps<P = Record<string, any>> {
+export interface ComponentViewProps<P = Record<string, unknown>> {
     /** This component's own data from the prefab JSON. */
     properties: P;
     /** Children to render for components that wrap the current subtree. */
@@ -22,15 +24,15 @@ export interface Component {
     Editor: FC<{
         node?: GameObject;
         component: ComponentData;
-        onUpdate: (newComp: any) => void;
+        onUpdate: (newComp: Record<string, unknown>) => void;
         basePath?: string;
     }>;
-    defaultProperties: any;
+    defaultProperties: Record<string, unknown>;
     View?: FC<ComponentViewProps>;
     /** Declare which asset paths this component references (for asset loading). */
-    getAssetRefs?: (properties: Record<string, any>) => AssetRef[];
+    getAssetRefs?: (properties: Record<string, unknown>) => AssetRef[];
 }
 export declare function registerComponent(component: Component): void;
 export declare function getComponentDef(name: string): Component | undefined;
 export declare function getAllComponentDefs(): Record<string, Component>;
-export declare function getComponentAssetRefs(componentType: string, properties: Record<string, any>): AssetRef[];
+export declare function getComponentAssetRefs(componentType: string, properties: Record<string, unknown>): AssetRef[];

package/dist/tools/prefabeditor/components/ComponentRegistry.js

@@ -1,3 +1,9 @@
+export function assetRef(type, path) {
+    return typeof path === "string" ? { type, path } : null;
+}
+export function assetRefs(...refs) {
+    return refs.filter((ref) => ref != null);
+}
 const REGISTRY = {};
 export function registerComponent(component) {
     REGISTRY[component.name] = component;

package/dist/tools/prefabeditor/components/DirectionalLightComponent.d.ts

@@ -1,3 +1,3 @@
-import { Component } from "./ComponentRegistry";
+import type { Component } from "./ComponentRegistry";
 declare const DirectionalLightComponent: Component;
 export default DirectionalLightComponent;

package/dist/tools/prefabeditor/components/DirectionalLightComponent.js

@@ -122,7 +122,10 @@ function DirectionalLightView({ properties, children }) {
     const targetRef = useRef(null);
     const shadowCameraRef = useRef(null);
     const [shadowCamera, setShadowCamera] = useState(null);
-    useHelper(editMode && isSelected && castShadow ? shadowCameraRef : null, CameraHelper);
+    const helperTarget = editMode && isSelected && castShadow && shadowCameraRef.current
+        ? { current: shadowCameraRef.current }
+        : null;
+    useHelper(helperTarget, CameraHelper);
     // Use a local target object so node transforms rotate the light direction naturally.
     useEffect(() => {
         if (directionalLightRef.current && targetRef.current) {
@@ -131,7 +134,7 @@ function DirectionalLightView({ properties, children }) {
             shadowCameraRef.current = nextShadowCamera;
             setShadowCamera(castShadow ? nextShadowCamera : null);
         }
-    }, [castShadow]);
+    });
     useEffect(() => {
         var _a;
         const shadow = (_a = directionalLightRef.current) === null || _a === void 0 ? void 0 : _a.shadow;
@@ -139,19 +142,7 @@ function DirectionalLightView({ properties, children }) {
             return;
         shadow.needsUpdate = true;
         shadow.camera.updateProjectionMatrix();
-    }, [
-        castShadow,
-        shadowMapSize,
-        shadowBias,
-        shadowNormalBias,
-        shadowAutoUpdate,
-        shadowCameraNear,
-        shadowCameraFar,
-        shadowCameraTop,
-        shadowCameraBottom,
-        shadowCameraLeft,
-        shadowCameraRight,
-    ]);
+    });
     useFrame(() => {
         if (!directionalLightRef.current || !targetRef.current)
             return;

package/dist/tools/prefabeditor/components/MaterialComponent.d.ts

@@ -1,8 +1,8 @@
 import { type ReactNode } from 'react';
 import type { ThreeElement } from '@react-three/fiber';
-import { Component } from './ComponentRegistry';
+import type { Component } from './ComponentRegistry';
 import { MeshBasicNodeMaterial, MeshStandardNodeMaterial, SpriteNodeMaterial } from 'three/webgpu';
-import { MeshBasicMaterialProperties, MeshStandardMaterialProperties } from 'three';
+import type { MeshBasicMaterialProperties, MeshStandardMaterialProperties } from 'three';
 declare module '@react-three/fiber' {
     interface ThreeElements {
         meshBasicNodeMaterial: ThreeElement<typeof MeshBasicNodeMaterial>;
@@ -10,7 +10,7 @@ declare module '@react-three/fiber' {
         spriteNodeMaterial: ThreeElement<typeof SpriteNodeMaterial>;
     }
 }
-export interface MaterialProps extends Omit<MeshStandardMaterialProperties & MeshBasicMaterialProperties, 'args' | 'normalScale'> {
+export interface MaterialProps extends Omit<MeshStandardMaterialProperties & MeshBasicMaterialProperties, 'args' | 'normalScale' | 'side'> {
     materialType?: 'standard' | 'basic' | 'sprite';
     transmission?: number;
     thickness?: number;
@@ -28,8 +28,14 @@ export interface MaterialProps extends Omit<MeshStandardMaterialProperties & Mes
     magFilter?: string;
     normalMapTexture?: string;
     normalScale?: [number, number];
+    side?: keyof typeof SIDE_MAP;
 }
 export type MaterialOverrides = Record<string, unknown>;
+declare const SIDE_MAP: {
+    readonly FrontSide: 0;
+    readonly BackSide: 1;
+    readonly DoubleSide: 2;
+};
 export declare function useMaterialOverrides(): MaterialOverrides;
 export declare function MaterialOverridesProvider({ overrides, children, }: {
     overrides: MaterialOverrides;

package/dist/tools/prefabeditor/components/MaterialComponent.js

@@ -13,6 +13,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo, useRef } from 'react';
 import { extend } from '@react-three/fiber';
 import { useFrame } from '@react-three/fiber';
+import { assetRef, assetRefs } from './ComponentRegistry';
 import { FieldRenderer, Label, NumberInput } from './Input';
 import { useAssetRuntime } from '../assetRuntime';
 import { MeshBasicNodeMaterial, MeshStandardNodeMaterial, SpriteNodeMaterial } from 'three/webgpu';
@@ -24,6 +25,39 @@ function Vector2Editor({ label, value, onChange, min, max, step, }) {
 }
 const EMPTY_MATERIAL_OVERRIDES = Object.freeze({});
 const MaterialOverridesContext = createContext(EMPTY_MATERIAL_OVERRIDES);
+const SIDE_MAP = { FrontSide, BackSide, DoubleSide };
+const MIN_FILTER_MAP = {
+    NearestFilter,
+    LinearFilter,
+    NearestMipmapNearestFilter,
+    NearestMipmapLinearFilter,
+    LinearMipmapNearestFilter,
+    LinearMipmapLinearFilter,
+};
+const MAG_FILTER_MAP = {
+    NearestFilter,
+    LinearFilter,
+};
+function cloneConfiguredTexture({ texture, repeat, repeatCount, offset, colorSpace, generateMipmaps, minFilter, magFilter, }) {
+    var _a, _b;
+    const clonedTexture = texture.clone();
+    if (repeat) {
+        clonedTexture.wrapS = clonedTexture.wrapT = RepeatWrapping;
+        if (repeatCount)
+            clonedTexture.repeat.set(repeatCount[0], repeatCount[1]);
+    }
+    else {
+        clonedTexture.wrapS = clonedTexture.wrapT = ClampToEdgeWrapping;
+        clonedTexture.repeat.set(1, 1);
+    }
+    clonedTexture.offset.set((_a = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _a !== void 0 ? _a : 0, (_b = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _b !== void 0 ? _b : 0);
+    clonedTexture.colorSpace = colorSpace;
+    clonedTexture.generateMipmaps = generateMipmaps;
+    clonedTexture.minFilter = minFilter;
+    clonedTexture.magFilter = magFilter;
+    clonedTexture.needsUpdate = true;
+    return clonedTexture;
+}
 export function useMaterialOverrides() {
     return useContext(MaterialOverridesContext);
 }
@@ -37,7 +71,7 @@ extend({
     MeshStandardNodeMaterial,
     SpriteNodeMaterial,
 });
-function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
+function MaterialComponentEditor({ component, onUpdate, basePath = "", }) {
     var _a;
     const materialType = (_a = component.properties.materialType) !== null && _a !== void 0 ? _a : 'standard';
     const hasTexture = !!component.properties.texture;
@@ -155,94 +189,83 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
 }
 // View for Material component
 function MaterialComponentView({ properties: rawProps }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     const { getTexture } = useAssetRuntime();
     const properties = rawProps;
-    const materialType = (_a = properties === null || properties === void 0 ? void 0 : properties.materialType) !== null && _a !== void 0 ? _a : 'standard';
-    const textureName = properties === null || properties === void 0 ? void 0 : properties.texture;
-    const offset = properties === null || properties === void 0 ? void 0 : properties.offset;
-    const repeat = properties === null || properties === void 0 ? void 0 : properties.repeat;
-    const repeatCount = properties === null || properties === void 0 ? void 0 : properties.repeatCount;
-    const animateOffset = properties === null || properties === void 0 ? void 0 : properties.animateOffset;
-    const offsetSpeed = properties === null || properties === void 0 ? void 0 : properties.offsetSpeed;
-    const generateMipmaps = (properties === null || properties === void 0 ? void 0 : properties.generateMipmaps) !== false;
-    const minFilter = (properties === null || properties === void 0 ? void 0 : properties.minFilter) || 'LinearMipmapLinearFilter';
-    const magFilter = (properties === null || properties === void 0 ? void 0 : properties.magFilter) || 'LinearFilter';
-    const texture = textureName ? (_b = getTexture(textureName)) !== null && _b !== void 0 ? _b : undefined : undefined;
-    const normalMapTextureName = properties === null || properties === void 0 ? void 0 : properties.normalMapTexture;
-    const normalScaleProp = properties === null || properties === void 0 ? void 0 : properties.normalScale;
-    const normalMapTexture = normalMapTextureName ? (_c = getTexture(normalMapTextureName)) !== null && _c !== void 0 ? _c : undefined : undefined;
     const materialSource = properties !== null && properties !== void 0 ? properties : {};
+    const materialType = (_a = materialSource.materialType) !== null && _a !== void 0 ? _a : 'standard';
+    const textureName = materialSource.texture;
+    const normalMapTextureName = materialSource.normalMapTexture;
+    const offset = materialSource.offset;
+    const repeat = materialSource.repeat;
+    const repeatCount = materialSource.repeatCount;
+    const animateOffset = materialSource.animateOffset;
+    const offsetSpeed = materialSource.offsetSpeed;
+    const generateMipmaps = materialSource.generateMipmaps !== false;
+    const minFilter = (_b = materialSource.minFilter) !== null && _b !== void 0 ? _b : 'LinearMipmapLinearFilter';
+    const magFilter = (_c = materialSource.magFilter) !== null && _c !== void 0 ? _c : 'LinearFilter';
+    const texture = textureName ? getTexture(textureName) : undefined;
+    const normalScaleProp = materialSource.normalScale;
+    const normalMapTexture = normalMapTextureName ? getTexture(normalMapTextureName) : undefined;
     // Destructure all material props and separate custom texture handling props
     const { texture: _texture, offset: _offset, repeat: _repeat, repeatCount: _repeatCount, animateOffset: _animateOffset, offsetSpeed: _offsetSpeed, generateMipmaps: _generateMipmaps, minFilter: _minFilter, magFilter: _magFilter, map: _map, materialType: _materialType, normalMapTexture: _normalMapTexture, normalScale: _normalScale, normalMap: _normalMap, rotation, sizeAttenuation, side: sideProp } = materialSource, materialProps = __rest(materialSource, ["texture", "offset", "repeat", "repeatCount", "animateOffset", "offsetSpeed", "generateMipmaps", "minFilter", "magFilter", "map", "materialType", "normalMapTexture", "normalScale", "normalMap", "rotation", "sizeAttenuation", "side"]);
-    const sideMap = { FrontSide, BackSide, DoubleSide };
-    const resolvedSide = sideProp ? ((_d = sideMap[sideProp]) !== null && _d !== void 0 ? _d : FrontSide) : FrontSide;
-    const minFilterMap = {
-        NearestFilter,
-        LinearFilter,
-        NearestMipmapNearestFilter,
-        NearestMipmapLinearFilter,
-        LinearMipmapNearestFilter,
-        LinearMipmapLinearFilter
-    };
-    const magFilterMap = {
-        NearestFilter,
-        LinearFilter
-    };
-    const animatedOffsetRef = useRef([(_e = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _e !== void 0 ? _e : 0, (_f = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _f !== void 0 ? _f : 0]);
+    const resolvedSide = sideProp ? (_d = SIDE_MAP[sideProp]) !== null && _d !== void 0 ? _d : FrontSide : FrontSide;
+    const resolvedMinFilter = (_e = MIN_FILTER_MAP[minFilter]) !== null && _e !== void 0 ? _e : LinearMipmapLinearFilter;
+    const resolvedMagFilter = (_f = MAG_FILTER_MAP[magFilter]) !== null && _f !== void 0 ? _f : LinearFilter;
+    const animatedOffsetRef = useRef([(_g = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _g !== void 0 ? _g : 0, (_h = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _h !== void 0 ? _h : 0]);
     const finalTexture = useMemo(() => {
-        var _a, _b, _c, _d;
         if (!texture)
             return undefined;
-        const t = texture.clone();
-        if (repeat) {
-            t.wrapS = t.wrapT = RepeatWrapping;
-            if (repeatCount)
-                t.repeat.set(repeatCount[0], repeatCount[1]);
-        }
-        else {
-            t.wrapS = t.wrapT = ClampToEdgeWrapping;
-            t.repeat.set(1, 1);
-        }
-        t.offset.set((_a = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _a !== void 0 ? _a : 0, (_b = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _b !== void 0 ? _b : 0);
-        t.colorSpace = SRGBColorSpace;
-        t.generateMipmaps = generateMipmaps;
-        t.minFilter = (_c = minFilterMap[minFilter]) !== null && _c !== void 0 ? _c : LinearMipmapLinearFilter;
-        t.magFilter = (_d = magFilterMap[magFilter]) !== null && _d !== void 0 ? _d : LinearFilter;
-        t.needsUpdate = true;
-        return t;
-    }, [texture, repeat, repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0], repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1], offset === null || offset === void 0 ? void 0 : offset[0], offset === null || offset === void 0 ? void 0 : offset[1], generateMipmaps, minFilter, magFilter]);
-    animatedOffsetRef.current = [(_g = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _g !== void 0 ? _g : 0, (_h = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _h !== void 0 ? _h : 0];
+        return cloneConfiguredTexture({
+            texture,
+            repeat,
+            repeatCount,
+            offset,
+            colorSpace: SRGBColorSpace,
+            generateMipmaps,
+            minFilter: resolvedMinFilter,
+            magFilter: resolvedMagFilter,
+        });
+    }, [texture, repeat, repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0], repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1], offset === null || offset === void 0 ? void 0 : offset[0], offset === null || offset === void 0 ? void 0 : offset[1], generateMipmaps, resolvedMinFilter, resolvedMagFilter]);
+    const finalNormalMap = useMemo(() => {
+        if (!normalMapTexture)
+            return undefined;
+        return cloneConfiguredTexture({
+            texture: normalMapTexture,
+            repeat,
+            repeatCount,
+            offset,
+            colorSpace: LinearSRGBColorSpace,
+            generateMipmaps,
+            minFilter: resolvedMinFilter,
+            magFilter: resolvedMagFilter,
+        });
+    }, [normalMapTexture, repeat, repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0], repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1], offset === null || offset === void 0 ? void 0 : offset[0], offset === null || offset === void 0 ? void 0 : offset[1], generateMipmaps, resolvedMinFilter, resolvedMagFilter]);
+    animatedOffsetRef.current = [(_j = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _j !== void 0 ? _j : 0, (_k = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _k !== void 0 ? _k : 0];
     useFrame((_, delta) => {
         var _a, _b;
-        if (!finalTexture || !animateOffset)
+        if ((!finalTexture && !finalNormalMap) || !animateOffset)
             return;
         const nextX = animatedOffsetRef.current[0] + ((_a = offsetSpeed === null || offsetSpeed === void 0 ? void 0 : offsetSpeed[0]) !== null && _a !== void 0 ? _a : 0) * delta;
         const nextY = animatedOffsetRef.current[1] + ((_b = offsetSpeed === null || offsetSpeed === void 0 ? void 0 : offsetSpeed[1]) !== null && _b !== void 0 ? _b : 0) * delta;
         animatedOffsetRef.current = [nextX, nextY];
-        finalTexture.offset.set(nextX, nextY);
+        finalTexture === null || finalTexture === void 0 ? void 0 : finalTexture.offset.set(nextX, nextY);
+        finalNormalMap === null || finalNormalMap === void 0 ? void 0 : finalNormalMap.offset.set(nextX, nextY);
     });
-    const finalNormalMap = useMemo(() => {
-        if (!normalMapTexture)
-            return undefined;
-        const t = normalMapTexture.clone();
-        t.colorSpace = LinearSRGBColorSpace;
-        t.needsUpdate = true;
-        return t;
-    }, [normalMapTexture]);
+    const overrides = useMaterialOverrides();
     if (!properties) {
         return _jsx("meshStandardNodeMaterial", { attach: "material", color: "red", wireframe: true });
     }
-    const overrides = useMaterialOverrides();
+    const materialKey = `${materialType}:${textureName !== null && textureName !== void 0 ? textureName : 'none'}:${normalMapTextureName !== null && normalMapTextureName !== void 0 ? normalMapTextureName : 'none'}`;
     const sharedProps = Object.assign(Object.assign({ map: finalTexture, side: resolvedSide }, materialProps), overrides);
     if (materialType === 'basic') {
-        return _jsx("meshBasicNodeMaterial", Object.assign({ attach: "material" }, sharedProps));
+        return _jsx("meshBasicNodeMaterial", Object.assign({ attach: "material" }, sharedProps), materialKey);
     }
     if (materialType === 'sprite') {
-        const spriteTransparent = properties.transparent !== false;
-        return (_jsx("spriteNodeMaterial", Object.assign({ attach: "material", map: finalTexture, color: (_j = properties.color) !== null && _j !== void 0 ? _j : '#ffffff', opacity: (_k = properties.opacity) !== null && _k !== void 0 ? _k : 1, transparent: spriteTransparent, alphaTest: (_l = properties.alphaTest) !== null && _l !== void 0 ? _l : 0, depthTest: (_m = properties.depthTest) !== null && _m !== void 0 ? _m : false, depthWrite: (_o = properties.depthWrite) !== null && _o !== void 0 ? _o : false, toneMapped: (_p = properties.toneMapped) !== null && _p !== void 0 ? _p : true }, overrides, { rotation: rotation !== null && rotation !== void 0 ? rotation : 0, sizeAttenuation: sizeAttenuation !== null && sizeAttenuation !== void 0 ? sizeAttenuation : true })));
+        const spriteTransparent = materialSource.transparent !== false;
+        return (_jsx("spriteNodeMaterial", Object.assign({ attach: "material", map: finalTexture, color: (_l = materialSource.color) !== null && _l !== void 0 ? _l : '#ffffff', opacity: (_m = materialSource.opacity) !== null && _m !== void 0 ? _m : 1, transparent: spriteTransparent, alphaTest: (_o = materialSource.alphaTest) !== null && _o !== void 0 ? _o : 0, depthTest: (_p = materialSource.depthTest) !== null && _p !== void 0 ? _p : false, depthWrite: (_q = materialSource.depthWrite) !== null && _q !== void 0 ? _q : false, toneMapped: (_r = materialSource.toneMapped) !== null && _r !== void 0 ? _r : true }, overrides, { rotation: rotation !== null && rotation !== void 0 ? rotation : 0, sizeAttenuation: sizeAttenuation !== null && sizeAttenuation !== void 0 ? sizeAttenuation : true }), materialKey));
     }
-    return (_jsx("meshStandardNodeMaterial", Object.assign({ attach: "material" }, sharedProps, { normalMap: finalNormalMap, normalScale: finalNormalMap ? [(_q = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0]) !== null && _q !== void 0 ? _q : 1, (_r = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]) !== null && _r !== void 0 ? _r : 1] : undefined })));
+    return (_jsx("meshStandardNodeMaterial", Object.assign({ attach: "material" }, sharedProps, { normalMap: finalNormalMap, normalScale: finalNormalMap ? [(_s = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0]) !== null && _s !== void 0 ? _s : 1, (_t = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]) !== null && _t !== void 0 ? _t : 1] : undefined }), materialKey));
 }
 const MaterialComponent = {
     name: 'Material',
@@ -262,13 +285,6 @@ const MaterialComponent = {
         metalness: 0,
         roughness: 1
     },
-    getAssetRefs: (properties) => {
-        const refs = [];
-        if (properties.texture)
-            refs.push({ type: 'texture', path: properties.texture });
-        if (properties.normalMapTexture)
-            refs.push({ type: 'texture', path: properties.normalMapTexture });
-        return refs;
-    },
+    getAssetRefs: (properties) => assetRefs(assetRef('texture', properties.texture), assetRef('texture', properties.normalMapTexture)),
 };
 export default MaterialComponent;

package/dist/tools/prefabeditor/components/ModelComponent.d.ts

@@ -1,3 +1,3 @@
-import { Component } from './ComponentRegistry';
+import type { Component } from './ComponentRegistry';
 declare const ModelComponent: Component;
 export default ModelComponent;

package/dist/tools/prefabeditor/components/ModelComponent.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ModelPicker } from '../../assetviewer/page';
 import { useMemo } from 'react';
+import { Mesh } from 'three';
+import { assetRef, assetRefs } from './ComponentRegistry';
 import { BooleanField, FieldGroup, Label, ListEditor, NumberInput, SelectInput, StringField } from './Input';
 import { useAssetRuntime } from '../assetRuntime';
 import { useEditorContext } from '../PrefabEditor';
@@ -46,23 +48,20 @@ function ModelComponentEditor({ component, node, onUpdate, basePath = "" }) {
 // View for Model component
 function ModelComponentView({ properties, children }) {
     const { getModel } = useAssetRuntime();
-    // Instanced models are handled elsewhere (GameInstance), so only render non-instanced here
-    if (!properties.filename || properties.instanced)
-        return _jsx(_Fragment, { children: children });
-    const sourceModel = getModel(properties.filename);
+    const sourceModel = properties.filename ? getModel(properties.filename) : null;
     // Clone model once and set up shadows - memoized to avoid cloning on every render
     const clonedModel = useMemo(() => {
-        if (!sourceModel)
+        if (!sourceModel || !properties.filename || properties.instanced)
             return null;
         const clone = sourceModel.clone();
         clone.traverse((obj) => {
-            if (obj.isMesh) {
+            if (obj instanceof Mesh) {
                 obj.castShadow = true;
                 obj.receiveShadow = true;
             }
         });
         return clone;
-    }, [sourceModel]);
+    }, [properties.filename, properties.instanced, sourceModel]);
     if (!clonedModel)
         return _jsx(_Fragment, { children: children });
     return _jsx("primitive", { object: clonedModel, children: children });
@@ -72,10 +71,6 @@ const ModelComponent = {
     Editor: ModelComponentEditor,
     View: ModelComponentView,
     defaultProperties: {},
-    getAssetRefs: (properties) => {
-        if (properties.filename)
-            return [{ type: 'model', path: properties.filename }];
-        return [];
-    },
+    getAssetRefs: (properties) => assetRefs(assetRef('model', properties.filename)),
 };
 export default ModelComponent;

package/dist/tools/prefabeditor/components/PointLightComponent.d.ts

@@ -1,3 +1,3 @@
-import { Component } from './ComponentRegistry';
+import type { Component } from './ComponentRegistry';
 declare const PointLightComponent: Component;
 export default PointLightComponent;

package/dist/tools/prefabeditor/components/PointLightComponent.js

@@ -37,7 +37,10 @@ function PointLightView({ properties, children }) {
     const shadowCameraNear = merged.shadowCameraNear;
     const shadowCameraFar = merged.shadowCameraFar;
     const lightRef = useRef(null);
-    useHelper(editMode && isSelected ? lightRef : null, PointLightHelper, 0.5, color);
+    const helperTarget = editMode && isSelected && lightRef.current
+        ? { current: lightRef.current }
+        : null;
+    useHelper(helperTarget, PointLightHelper, 0.5, color);
     useEffect(() => {
         var _a;
         const shadow = (_a = lightRef.current) === null || _a === void 0 ? void 0 : _a.shadow;
@@ -45,7 +48,7 @@ function PointLightView({ properties, children }) {
             return;
         shadow.needsUpdate = true;
         shadow.camera.updateProjectionMatrix();
-    }, [castShadow, shadowMapSize, shadowBias, shadowNormalBias, shadowAutoUpdate, shadowCameraNear, shadowCameraFar]);
+    });
     return (_jsxs(_Fragment, { children: [_jsx("pointLight", { ref: lightRef, color: color, intensity: intensity, distance: distance, decay: decay, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-bias": shadowBias, "shadow-normalBias": shadowNormalBias, "shadow-autoUpdate": shadowAutoUpdate, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar }), editMode && isSelected ? (_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 10, 8] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] })) : null, children] }));
 }
 const PointLightComponent = {

package/dist/tools/prefabeditor/components/SpotLightComponent.d.ts

@@ -1,3 +1,3 @@
-import { Component } from "./ComponentRegistry";
+import type { Component } from "./ComponentRegistry";
 declare const SpotLightComponent: Component;
 export default SpotLightComponent;

package/dist/tools/prefabeditor/components/SpotLightComponent.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { assetRef, assetRefs } from "./ComponentRegistry";
 import { useHelper } from "@react-three/drei";
 import { useRef, useEffect } from "react";
 import { BooleanField, ColorField, Label, NumberField, Vector3Input } from "./Input";
@@ -50,12 +51,15 @@ function SpotLightView({ properties, children }) {
     const textureMap = merged.map ? (_a = getTexture(merged.map)) !== null && _a !== void 0 ? _a : undefined : undefined;
     const spotLightRef = useRef(null);
     const targetRef = useRef(null);
-    useHelper(editMode && isSelected ? spotLightRef : null, SpotLightHelper, color);
+    const helperTarget = editMode && isSelected && spotLightRef.current
+        ? { current: spotLightRef.current }
+        : null;
+    useHelper(helperTarget, SpotLightHelper, color);
     useEffect(() => {
         if (spotLightRef.current && targetRef.current) {
             spotLightRef.current.target = targetRef.current;
         }
-    }, [castShadow]);
+    });
     useEffect(() => {
         var _a;
         const shadow = (_a = spotLightRef.current) === null || _a === void 0 ? void 0 : _a.shadow;
@@ -63,7 +67,7 @@ function SpotLightView({ properties, children }) {
             return;
         shadow.needsUpdate = true;
         shadow.camera.updateProjectionMatrix();
-    }, [castShadow, shadowMapSize, shadowBias, shadowNormalBias, shadowAutoUpdate, shadowCameraNear, shadowCameraFar]);
+    });
     useFrame(() => {
         var _a;
         if ((_a = spotLightRef.current) === null || _a === void 0 ? void 0 : _a.target) {
@@ -77,10 +81,6 @@ const SpotLightComponent = {
     Editor: SpotLightComponentEditor,
     View: SpotLightView,
     defaultProperties: {},
-    getAssetRefs: (properties) => {
-        if (properties.map)
-            return [{ type: 'texture', path: properties.map }];
-        return [];
-    },
+    getAssetRefs: (properties) => assetRefs(assetRef('texture', properties.map)),
 };
 export default SpotLightComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-three-game",
-	"version": "0.0.95",
+	"version": "0.0.97",
 	"description": "high performance 3D game engine built in React",
 	"main": "dist/index.js",
 	"module": "dist/index.js",