react-three-game 0.0.68 → 0.0.70

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,35 +12,63 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useHelper } from "@react-three/drei";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { BoxHelper, Euler, Matrix4, Quaternion, Vector3, } from "three";
+import { BoxHelper, Euler, Matrix4, } from "three";
 import { useStore } from "zustand";
-import { getComponent, registerComponent } from "./components/ComponentRegistry";
+import { useClickValid } from "./useClickValid";
+import { findComponent } from "./types";
+import { getComponentDef, getComponentAssetRefs, registerComponent } from "./components/ComponentRegistry";
 import components from "./components";
-import { loadModel, loadTexture } from "../dragdrop";
+import { loadModel, loadSound, loadTexture } from "../dragdrop";
 import { GameInstance, GameInstanceProvider, getRepeatAxesFromModelProperties, useInstanceCheck } from "./InstanceProvider";
-import { decompose } from "./utils";
-import { createPrefabStore, PrefabStoreProvider, prefabStoreToPrefab, usePrefabChildIds, usePrefabNode, usePrefabRootId } from "./prefabStore";
+import { composeTransform, decompose } from "./utils";
+import { isPhysicsProps } from "./components/PhysicsComponent";
+import { createPrefabStore, PrefabStoreProvider, prefabStoreToPrefab, useOptionalPrefabStoreApi, usePrefabChildIds, usePrefabNode, usePrefabRootId } from "./prefabStore";
+import { sound as soundManager } from "../../helpers/SoundManager";
 components.forEach(registerComponent);
 const IDENTITY = new Matrix4();
 const EMPTY_MODELS = {};
 const EMPTY_TEXTURES = {};
-export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSelect, onClick, onSelectedObjectChange, onFocusNode, basePath = "", injectedModels = EMPTY_MODELS, injectedTextures = EMPTY_TEXTURES }, ref) => {
+const EMPTY_SOUNDS = {};
+/** Resolve a relative or absolute asset file path against a base path. */
+function resolveAssetPath(basePath, file) {
+    if (file.startsWith("http://") || file.startsWith("https://"))
+        return file;
+    return file.startsWith("/") ? `${basePath}${file}` : `${basePath}/${file}`;
+}
+/** Check if all model assets required by a node are loaded. */
+function isNodeReady(node, loadedModels) {
+    var _a;
+    const model = findComponent(node, "Model");
+    if (!((_a = model === null || model === void 0 ? void 0 : model.properties) === null || _a === void 0 ? void 0 : _a.filename))
+        return true;
+    return Boolean(loadedModels[model.properties.filename]);
+}
+export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSelect, onClick, onSelectedObjectChange, onFocusNode, basePath = "", injectedModels = EMPTY_MODELS, injectedTextures = EMPTY_TEXTURES, injectedSounds = EMPTY_SOUNDS }, ref) => {
+    var _a;
     const [models, setModels] = useState({});
     const [textures, setTextures] = useState({});
+    const [sounds, setSounds] = useState({});
     const loading = useRef(new Set());
+    const failedModels = useRef(new Set());
     const failedTextures = useRef(new Set());
+    const failedSounds = useRef(new Set());
     const objectRefs = useRef({});
     const rigidBodyRefs = useRef(new Map());
     const rootRef = useRef(null);
-    const [internalStore] = useState(() => { var _a; return createPrefabStore(data !== null && data !== void 0 ? data : prefabStoreToPrefab((_a = store === null || store === void 0 ? void 0 : store.getState()) !== null && _a !== void 0 ? _a : missingStoreState())); });
-    const prefabStore = store !== null && store !== void 0 ? store : internalStore;
-    const assetManifestKey = useStore(prefabStore, state => state.assetManifestKey);
+    const parentStore = useOptionalPrefabStoreApi();
+    const [ownedStore] = useState(() => { var _a, _b; return createPrefabStore(data !== null && data !== void 0 ? data : prefabStoreToPrefab((_b = (_a = store === null || store === void 0 ? void 0 : store.getState()) !== null && _a !== void 0 ? _a : parentStore === null || parentStore === void 0 ? void 0 : parentStore.getState()) !== null && _b !== void 0 ? _b : missingStoreState())); });
+    const resolvedStore = (_a = store !== null && store !== void 0 ? store : parentStore) !== null && _a !== void 0 ? _a : ownedStore;
+    const usesOwnedStore = resolvedStore === ownedStore;
+    const shouldProvideStoreContext = !parentStore || parentStore !== resolvedStore;
+    const assetManifestKey = useStore(resolvedStore, state => state.assetManifestKey);
     const availableModels = useMemo(() => (Object.assign(Object.assign({}, models), injectedModels)), [models, injectedModels]);
     const availableTextures = useMemo(() => (Object.assign(Object.assign({}, textures), injectedTextures)), [textures, injectedTextures]);
+    const availableSounds = useMemo(() => (Object.assign(Object.assign({}, sounds), injectedSounds)), [sounds, injectedSounds]);
     useImperativeHandle(ref, () => ({
         root: rootRef.current,
         rigidBodyRefs: rigidBodyRefs.current,
         getObject: (nodeId) => { var _a; return (_a = objectRefs.current[nodeId]) !== null && _a !== void 0 ? _a : null; },
+        getRigidBody: (nodeId) => { var _a; return (_a = rigidBodyRefs.current.get(nodeId)) !== null && _a !== void 0 ? _a : null; },
         focusNode: (nodeId) => onFocusNode === null || onFocusNode === void 0 ? void 0 : onFocusNode(nodeId),
     }), [onFocusNode]);
     const registerRef = useCallback((id, obj) => {
@@ -61,6 +80,10 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
     const registerRigidBodyRef = useCallback((id, rb) => {
         rigidBodyRefs.current.set(id, rb);
     }, []);
+    const getRigidBody = useCallback((id) => {
+        var _a;
+        return (_a = rigidBodyRefs.current.get(id)) !== null && _a !== void 0 ? _a : null;
+    }, []);
     useEffect(() => {
         const originalError = console.error;
         console.error = (...args) => {
@@ -71,78 +94,81 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
         return () => { console.error = originalError; };
     }, []);
     useEffect(() => {
-        if (!store && data) {
-            prefabStore.getState().replacePrefab(data);
+        if (usesOwnedStore && data) {
+            resolvedStore.getState().replacePrefab(data);
         }
-    }, [data, prefabStore, store]);
+    }, [data, resolvedStore, usesOwnedStore]);
     useEffect(() => {
-        const syncAssets = (snapshot = prefabStore.getState()) => {
+        const syncAssets = (snapshot = resolvedStore.getState()) => {
             const modelsToLoad = new Set();
             const texturesToLoad = new Set();
+            const soundsToLoad = new Set();
             Object.values(snapshot.nodesById).forEach(node => {
                 var _a;
                 Object.values((_a = node.components) !== null && _a !== void 0 ? _a : {}).forEach(component => {
-                    var _a, _b, _c, _d;
+                    var _a;
                     if (!(component === null || component === void 0 ? void 0 : component.type))
                         return;
-                    if (component.type === 'Model' && ((_a = component.properties) === null || _a === void 0 ? void 0 : _a.filename)) {
-                        modelsToLoad.add(component.properties.filename);
-                    }
-                    if (component.type === 'Material') {
-                        ((_b = component.properties) === null || _b === void 0 ? void 0 : _b.texture) && texturesToLoad.add(component.properties.texture);
-                        ((_c = component.properties) === null || _c === void 0 ? void 0 : _c.normalMapTexture) && texturesToLoad.add(component.properties.normalMapTexture);
-                    }
-                    if (component.type === 'SpotLight' && ((_d = component.properties) === null || _d === void 0 ? void 0 : _d.map)) {
-                        texturesToLoad.add(component.properties.map);
+                    for (const ref of getComponentAssetRefs(component.type, (_a = component.properties) !== null && _a !== void 0 ? _a : {})) {
+                        if (ref.type === 'model')
+                            modelsToLoad.add(ref.path);
+                        else if (ref.type === 'texture')
+                            texturesToLoad.add(ref.path);
+                        else if (ref.type === 'sound')
+                            soundsToLoad.add(ref.path);
                     }
                 });
             });
-            modelsToLoad.forEach((file) => __awaiter(void 0, void 0, void 0, function* () {
-                if (models[file] || injectedModels[file] || loading.current.has(file))
+            const loadAsset = (file, loaded, injected, failed, loader) => {
+                if (loaded[file] || injected[file] || loading.current.has(file) || failed.has(file))
                     return;
                 loading.current.add(file);
-                const path = file.startsWith("/")
-                    ? `${basePath}${file}`
-                    : `${basePath}/${file}`;
-                const res = yield loadModel(path);
-                const model = res.model;
-                if (res.success && model) {
+                void loader(resolveAssetPath(basePath, file)).then(result => {
+                    if (!result.success) {
+                        console.warn(`Failed to load asset: ${file}`, result.error);
+                        loading.current.delete(file);
+                        failed.add(file);
+                    }
+                });
+            };
+            modelsToLoad.forEach(file => loadAsset(file, models, injectedModels, failedModels.current, (path) => loadModel(path).then(result => {
+                const model = result.model;
+                if (result.success && model) {
                     setModels(m => (Object.assign(Object.assign({}, m), { [file]: model })));
                 }
-            }));
-            texturesToLoad.forEach(file => {
-                if (textures[file] || injectedTextures[file] || loading.current.has(file) || failedTextures.current.has(file))
-                    return;
-                loading.current.add(file);
-                // Handle full URLs (http/https) or regular paths
-                const path = file.startsWith("http://") || file.startsWith("https://")
-                    ? file
-                    : file.startsWith("/")
-                        ? `${basePath}${file}`
-                        : `${basePath}/${file}`;
-                void loadTexture(path).then(result => {
-                    if (result.success && result.texture) {
-                        setTextures(t => (Object.assign(Object.assign({}, t), { [file]: result.texture })));
-                        return;
-                    }
-                    console.warn(`Failed to load texture: ${path}`, result.error);
+                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(current => (Object.assign(Object.assign({}, current), { [file]: result.sound })));
                     loading.current.delete(file);
-                    failedTextures.current.add(file);
-                });
-            });
+                }
+                return result;
+            })));
         };
         syncAssets();
-    }, [prefabStore, assetManifestKey, basePath, injectedModels, injectedTextures]);
-    return (_jsx(PrefabStoreProvider, { store: prefabStore, children: _jsx("group", { ref: rootRef, children: _jsx(GameInstanceProvider, { models: availableModels, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(StoreRootNode, { selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: onClick, registerRef: registerRef, registerRigidBodyRef: registerRigidBodyRef, loadedModels: availableModels, loadedTextures: availableTextures, editMode: editMode, parentMatrix: IDENTITY }) }) }) }));
+    }, [resolvedStore, assetManifestKey, basePath, injectedModels, injectedSounds, injectedTextures, models, sounds, textures]);
+    const content = (_jsx("group", { ref: rootRef, children: _jsx(GameInstanceProvider, { models: availableModels, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(StoreRootNode, { selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: onClick, registerRef: registerRef, registerRigidBodyRef: registerRigidBodyRef, getRigidBody: getRigidBody, loadedModels: availableModels, loadedSounds: availableSounds, loadedTextures: availableTextures, editMode: editMode, parentMatrix: IDENTITY }) }) }));
+    if (!shouldProvideStoreContext) {
+        return content;
+    }
+    return _jsx(PrefabStoreProvider, { store: resolvedStore, children: content });
 });
 function StoreRootNode(props) {
     const rootId = usePrefabRootId();
     return _jsx(GameObjectRenderer, Object.assign({}, props, { nodeId: rootId }));
 }
 export function GameObjectRenderer(props) {
-    var _a, _b, _c;
+    var _a, _b;
     const node = usePrefabNode(props.nodeId);
-    const isInstanced = (_c = (_b = (_a = node === null || node === void 0 ? void 0 : node.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.instanced;
+    const isInstanced = (_b = (_a = findComponent(node, "Model")) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.instanced;
     const prevInstancedRef = useRef(undefined);
     const [isTransitioning, setIsTransitioning] = useState(false);
     useEffect(() => {
@@ -160,24 +186,27 @@ export function GameObjectRenderer(props) {
         ? _jsx(InstancedNode, Object.assign({}, props), key)
         : _jsx(StandardNode, Object.assign({}, props), key);
 }
-function isPhysicsProps(v) {
-    return (v === null || v === void 0 ? void 0 : v.type) === "fixed" || (v === null || v === void 0 ? void 0 : v.type) === "dynamic" || (v === null || v === void 0 ? void 0 : v.type) === "kinematicPosition" || (v === null || v === void 0 ? void 0 : v.type) === "kinematicVelocity";
-}
 function InstancedNode({ nodeId, parentMatrix = IDENTITY, editMode, registerRef, onSelect, onClick }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c;
     const gameObject = usePrefabNode(nodeId);
     if (!gameObject)
         return null;
     const localTransform = getNodeTransformProps(gameObject);
     const isLocked = Boolean(gameObject.locked);
-    const clickable = Object.values((_a = gameObject.components) !== null && _a !== void 0 ? _a : {}).some(component => (component === null || component === void 0 ? void 0 : component.type) === 'Click');
-    const physicsProps = isPhysicsProps((_c = (_b = gameObject.components) === null || _b === void 0 ? void 0 : _b.physics) === null || _c === void 0 ? void 0 : _c.properties)
-        ? (_e = (_d = gameObject.components) === null || _d === void 0 ? void 0 : _d.physics) === null || _e === void 0 ? void 0 : _e.properties
+    const clickComponent = findComponent(gameObject, "Click");
+    const clickable = Boolean(clickComponent);
+    const clickEventName = (_a = clickComponent === null || clickComponent === void 0 ? void 0 : clickComponent.properties) === null || _a === void 0 ? void 0 : _a.eventName;
+    const physicsData = findComponent(gameObject, "Physics");
+    const physicsProps = isPhysicsProps(physicsData === null || physicsData === void 0 ? void 0 : physicsData.properties)
+        ? physicsData === null || physicsData === void 0 ? void 0 : physicsData.properties
         : undefined;
-    const modelUrl = (_h = (_g = (_f = gameObject.components) === null || _f === void 0 ? void 0 : _f.model) === null || _g === void 0 ? void 0 : _g.properties) === null || _h === void 0 ? void 0 : _h.filename;
+    const modelUrl = (_c = (_b = findComponent(gameObject, "Model")) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.filename;
     const instances = useMemo(() => buildRepeatedInstances(gameObject, parentMatrix, modelUrl, physicsProps), [gameObject, modelUrl, parentMatrix, physicsProps]);
     const groupRef = useRef(null);
-    const clickValid = useRef(false);
+    const editClickHandlers = useClickValid(!!editMode && !isLocked, (e) => {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeId);
+        onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
+    });
     useEffect(() => {
         if (editMode) {
             registerRef(nodeId, groupRef.current);
@@ -185,19 +214,12 @@ function InstancedNode({ nodeId, parentMatrix = IDENTITY, editMode, registerRef,
         }
     }, [nodeId, registerRef, editMode]);
     if (editMode) {
-        return (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: localTransform.position, rotation: localTransform.rotation, scale: localTransform.scale, onPointerDown: isLocked ? undefined : (e) => { e.stopPropagation(); clickValid.current = true; }, onPointerMove: isLocked ? undefined : () => { clickValid.current = false; }, onPointerUp: isLocked ? undefined : (e) => {
-                        if (clickValid.current) {
-                            e.stopPropagation();
-                            onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeId);
-                            onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
-                        }
-                        clickValid.current = false;
-                    }, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), instances.map(instance => (_jsx(GameInstance, { id: instance.id, sourceId: gameObject.id, clickable: clickable, modelUrl: instance.modelUrl, position: instance.position, rotation: instance.rotation, scale: instance.scale, locked: isLocked, physics: instance.physics }, instance.id)))] }));
+        return (_jsxs(_Fragment, { children: [_jsx("group", Object.assign({ ref: groupRef, position: localTransform.position, rotation: localTransform.rotation, scale: localTransform.scale }, editClickHandlers, { children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) })), instances.map(instance => (_jsx(GameInstance, { id: instance.id, sourceId: gameObject.id, clickable: clickable, clickEventName: clickEventName, modelUrl: instance.modelUrl, position: instance.position, rotation: instance.rotation, scale: instance.scale, locked: isLocked, physics: instance.physics }, instance.id)))] }));
     }
-    return (_jsx(_Fragment, { children: instances.map(instance => (_jsx(GameInstance, { id: instance.id, sourceId: gameObject.id, clickable: clickable, modelUrl: instance.modelUrl, position: instance.position, rotation: instance.rotation, scale: instance.scale, locked: isLocked, physics: instance.physics }, instance.id))) }));
+    return (_jsx(_Fragment, { children: instances.map(instance => (_jsx(GameInstance, { id: instance.id, sourceId: gameObject.id, clickable: clickable, clickEventName: clickEventName, modelUrl: instance.modelUrl, position: instance.position, rotation: instance.rotation, scale: instance.scale, locked: isLocked, physics: instance.physics }, instance.id))) }));
 }
-function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, registerRigidBodyRef, loadedModels, loadedTextures, editMode, parentMatrix = IDENTITY, }) {
-    var _a, _b, _c, _d, _e;
+function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, registerRigidBodyRef, getRigidBody, loadedModels, loadedSounds, loadedTextures, editMode, parentMatrix = IDENTITY, }) {
+    var _a, _b;
     const gameObject = usePrefabNode(nodeId);
     const childIds = usePrefabChildIds(nodeId);
     const isSelected = selectedId === nodeId;
@@ -205,40 +227,30 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, regi
         return null;
     const groupRef = useRef(null);
     const helperRef = useRef(null);
-    const clickValid = useRef(false);
     const isLocked = Boolean(gameObject.locked);
     const stillInstanced = useInstanceCheck(nodeId);
+    const clickHandlers = useClickValid(!!editMode && !isLocked, (e) => {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeId);
+        onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
+    });
     useHelper(editMode && isSelected ? helperRef : null, BoxHelper, "cyan");
     useEffect(() => {
         registerRef(nodeId, groupRef.current);
         return () => registerRef(nodeId, null);
     }, [nodeId, registerRef]);
     const world = parentMatrix.clone().multiply(compose(gameObject));
-    const onDown = (e) => {
-        e.stopPropagation();
-        clickValid.current = true;
-    };
-    const onUp = (e) => {
-        if (clickValid.current) {
-            e.stopPropagation();
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeId);
-            onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
-        }
-        clickValid.current = false;
-    };
-    const physics = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.physics;
-    const ready = !((_b = gameObject.components) === null || _b === void 0 ? void 0 : _b.model) ||
-        loadedModels[gameObject.components.model.properties.filename];
+    const physics = findComponent(gameObject, "Physics");
+    const ready = isNodeReady(gameObject, loadedModels);
     const hasPhysics = physics && ready && !stillInstanced;
     const transform = getNodeTransformProps(gameObject);
-    const physicsDef = hasPhysics ? getComponent("Physics") : null;
-    const isInstanced = (_e = (_d = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.model) === null || _d === void 0 ? void 0 : _d.properties) === null || _e === void 0 ? void 0 : _e.instanced;
+    const physicsDef = hasPhysics ? getComponentDef(physics.type) : null;
+    const isInstanced = (_b = (_a = findComponent(gameObject, "Model")) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.instanced;
     const physicsKey = `physics_${nodeId}_${isInstanced ? 'instanced' : 'standard'}`;
-    const renderCtx = { loadedModels, loadedTextures, editMode, registerRef };
+    const renderCtx = { loadedModels, loadedSounds, loadedTextures, editMode, registerRef, getRigidBody };
     const childNodes = getChildHostComponents(gameObject).length > 0
         ? _jsx(CompositionChildren, { childIds: childIds, selectedId: selectedId, ctx: renderCtx, parentMatrix: world })
-        : _jsx(ChildNodes, { childIds: childIds, parentMatrix: world, selectedId: selectedId, onSelect: onSelect, onClick: onClick, registerRef: registerRef, registerRigidBodyRef: registerRigidBodyRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode });
-    const inner = (_jsx("group", { onPointerDown: editMode && !isLocked ? onDown : undefined, onPointerMove: editMode && !isLocked ? () => (clickValid.current = false) : undefined, onPointerUp: editMode && !isLocked ? onUp : undefined, children: renderCompositionNode(gameObject, renderCtx, isSelected, parentMatrix, childNodes) }));
+        : _jsx(ChildNodes, { childIds: childIds, parentMatrix: world, selectedId: selectedId, onSelect: onSelect, onClick: onClick, registerRef: registerRef, registerRigidBodyRef: registerRigidBodyRef, getRigidBody: getRigidBody, loadedModels: loadedModels, loadedSounds: loadedSounds, loadedTextures: loadedTextures, editMode: editMode });
+    const inner = (_jsx("group", Object.assign({}, clickHandlers, { children: renderCompositionNode(gameObject, renderCtx, isSelected, parentMatrix, childNodes) })));
     if (editMode) {
         return (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), _jsx("group", { ref: helperRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }), hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, editMode: editMode, nodeId: nodeId, registerRigidBodyRef: registerRigidBodyRef, children: inner }, physicsKey)) : null] }));
     }
@@ -247,17 +259,17 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, regi
     }
     return (_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }));
 }
-const LEAF_COMPONENT_TYPES = new Set(["Geometry", "Material", "Physics"]);
 function getChildHostComponents(gameObject) {
     var _a;
-    return Object.entries((_a = gameObject.components) !== null && _a !== void 0 ? _a : {}).flatMap(([key, comp]) => {
+    return Object.entries((_a = gameObject.components) !== null && _a !== void 0 ? _a : {}).reduce((result, [key, comp]) => {
         if (!(comp === null || comp === void 0 ? void 0 : comp.type))
-            return [];
-        const def = getComponent(comp.type);
-        if (!(def === null || def === void 0 ? void 0 : def.View) || LEAF_COMPONENT_TYPES.has(comp.type))
-            return [];
-        return { key, View: def.View, properties: comp.properties };
-    });
+            return result;
+        const def = getComponentDef(comp.type);
+        if (!(def === null || def === void 0 ? void 0 : def.View) || def.isWrapper)
+            return result;
+        result.push({ key, View: def.View, properties: comp.properties });
+        return result;
+    }, []);
 }
 function ChildNodes(_a) {
     var { childIds, parentMatrix } = _a, props = __rest(_a, ["childIds", "parentMatrix"]);
@@ -265,11 +277,11 @@ function ChildNodes(_a) {
 }
 function compose(node) {
     const { position, rotation, scale } = getNodeTransformProps(node);
-    return new Matrix4().compose(new Vector3(...position), new Quaternion().setFromEuler(new Euler(...rotation)), new Vector3(...scale));
+    return composeTransform(position, rotation, scale);
 }
 function getModelRepeatSettings(node) {
-    var _a, _b, _c;
-    const properties = (_c = (_b = (_a = node === null || node === void 0 ? void 0 : node.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) !== null && _c !== void 0 ? _c : {};
+    var _a, _b;
+    const properties = (_b = (_a = findComponent(node, "Model")) === null || _a === void 0 ? void 0 : _a.properties) !== null && _b !== void 0 ? _b : {};
     return {
         repeat: Boolean(properties.repeat),
         repeatAxes: getRepeatAxesFromModelProperties(properties),
@@ -320,12 +332,12 @@ function buildRepeatedInstances(gameObject, parentMatrix, modelUrl, physics) {
     return instances;
 }
 function getNodeTransformProps(node) {
-    var _a, _b, _c, _d, _e;
-    const t = (_b = (_a = node === null || node === void 0 ? void 0 : node.components) === null || _a === void 0 ? void 0 : _a.transform) === null || _b === void 0 ? void 0 : _b.properties;
+    var _a, _b, _c, _d;
+    const t = (_a = findComponent(node, "Transform")) === null || _a === void 0 ? void 0 : _a.properties;
     return {
-        position: (_c = t === null || t === void 0 ? void 0 : t.position) !== null && _c !== void 0 ? _c : [0, 0, 0],
-        rotation: (_d = t === null || t === void 0 ? void 0 : t.rotation) !== null && _d !== void 0 ? _d : [0, 0, 0],
-        scale: (_e = t === null || t === void 0 ? void 0 : t.scale) !== null && _e !== void 0 ? _e : [1, 1, 1],
+        position: (_b = t === null || t === void 0 ? void 0 : t.position) !== null && _b !== void 0 ? _b : [0, 0, 0],
+        rotation: (_c = t === null || t === void 0 ? void 0 : t.rotation) !== null && _c !== void 0 ? _c : [0, 0, 0],
+        scale: (_d = t === null || t === void 0 ? void 0 : t.scale) !== null && _d !== void 0 ? _d : [1, 1, 1],
     };
 }
 function renderCompositionSubtree(gameObject, ctx, isSelected, childIds, parentMatrix = IDENTITY) {
@@ -351,40 +363,31 @@ function renderCompositionNode(gameObject, ctx, isSelected, parentMatrix, childN
     const ownContent = renderNodeOwnContent(gameObject, ctx, isSelected, parentMatrix);
     return wrapWithChildHosts(gameObject, ctx, isSelected, parentMatrix, _jsxs(_Fragment, { children: [ownContent, childNodes] }));
 }
-function renderNodeOwnContent(gameObject, ctx, isSelected, parentMatrix) {
-    var _a, _b;
-    const geometry = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.geometry;
-    const material = (_b = gameObject.components) === null || _b === void 0 ? void 0 : _b.material;
-    const geometryDef = geometry && getComponent("Geometry");
-    const materialDef = material && getComponent("Material");
-    const contextProps = {
+function buildContextProps(gameObject, ctx, isSelected, parentMatrix) {
+    return {
         loadedModels: ctx.loadedModels,
+        loadedSounds: ctx.loadedSounds,
         loadedTextures: ctx.loadedTextures,
         editMode: ctx.editMode,
         isSelected,
         nodeId: gameObject.id,
         parentMatrix,
         registerRef: ctx.registerRef,
+        getRigidBody: ctx.getRigidBody,
     };
-    let core;
-    if (geometry && (geometryDef === null || geometryDef === void 0 ? void 0 : geometryDef.View)) {
-        core = (_jsxs("mesh", { castShadow: true, receiveShadow: true, children: [_jsx(geometryDef.View, Object.assign({ properties: geometry.properties }, contextProps)), material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, Object.assign({ properties: material.properties }, contextProps), "material"))] }));
-    }
-    else {
-        core = null;
-    }
-    return core;
+}
+function renderNodeOwnContent(gameObject, ctx, isSelected, parentMatrix) {
+    const geometry = findComponent(gameObject, "Geometry");
+    const material = findComponent(gameObject, "Material");
+    const geometryDef = geometry && getComponentDef(geometry.type);
+    const materialDef = material && getComponentDef(material.type);
+    if (!geometry || !(geometryDef === null || geometryDef === void 0 ? void 0 : geometryDef.View))
+        return null;
+    const contextProps = buildContextProps(gameObject, ctx, isSelected, parentMatrix);
+    return (_jsxs("mesh", { castShadow: true, receiveShadow: true, children: [_jsx(geometryDef.View, Object.assign({ properties: geometry.properties }, contextProps)), material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, Object.assign({ properties: material.properties }, contextProps), "material"))] }));
 }
 function wrapWithChildHosts(gameObject, ctx, isSelected, parentMatrix, subtree) {
-    const contextProps = {
-        loadedModels: ctx.loadedModels,
-        loadedTextures: ctx.loadedTextures,
-        editMode: ctx.editMode,
-        isSelected,
-        nodeId: gameObject.id,
-        parentMatrix,
-        registerRef: ctx.registerRef,
-    };
+    const contextProps = buildContextProps(gameObject, ctx, isSelected, parentMatrix);
     const childHosts = getChildHostComponents(gameObject);
     return childHosts.reduce((acc, { key, View, properties }) => (_jsx(View, Object.assign({ properties: properties }, contextProps, { children: acc }), key)), subtree);
 }

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

@@ -1,16 +1,17 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { gameEvents } from '../GameEvents';
-import { FieldGroup } from './Input';
-function ClickComponentEditor() {
-    return (_jsx(FieldGroup, { children: _jsx("div", { style: { fontSize: 12, opacity: 0.8 }, children: "Emits a click game event in play mode when this entity is clicked." }) }));
+import { FieldGroup, StringField } from './Input';
+function ClickComponentEditor({ component, onUpdate }) {
+    return (_jsxs(FieldGroup, { children: [_jsx("div", { style: { fontSize: 12, opacity: 0.8 }, children: "Emits a game event in play mode when this entity is clicked." }), _jsx(StringField, { name: "eventName", label: "Emit Event", values: component.properties, onChange: onUpdate, placeholder: "click" })] }));
 }
-function ClickComponentView({ children, editMode, nodeId }) {
+function ClickComponentView({ children, editMode, nodeId, properties }) {
     const clickValid = useRef(false);
+    const eventName = (properties === null || properties === void 0 ? void 0 : properties.eventName) || 'click';
     const emitClick = (event) => {
         if (!nodeId)
             return;
-        gameEvents.emit('click', {
+        gameEvents.emit(eventName, {
             sourceEntityId: nodeId,
             point: [event.point.x, event.point.y, event.point.z],
             button: event.button,
@@ -40,6 +41,8 @@ const ClickComponent = {
     name: 'Click',
     Editor: ClickComponentEditor,
     View: ClickComponentView,
-    defaultProperties: {},
+    defaultProperties: {
+        eventName: 'click',
+    },
 };
 export default ClickComponent;

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

@@ -1,5 +1,9 @@
 import { FC } from "react";
 import { ComponentData, GameObject } from "../types";
+export type AssetRef = {
+    type: "model" | "texture" | "sound";
+    path: string;
+};
 export interface Component {
     name: string;
     Editor: FC<{
@@ -10,9 +14,11 @@ export interface Component {
     }>;
     defaultProperties: any;
     View?: FC<any>;
-    nonComposable?: boolean;
+    /** When true, this component wraps child entities (e.g. Physics wraps children in RigidBody). */
+    isWrapper?: boolean;
+    getAssetRefs?: (properties: Record<string, any>) => AssetRef[];
 }
 export declare function registerComponent(component: Component): void;
-export declare function getComponent(name: string): Component | undefined;
-export declare function getAllComponents(): Record<string, Component>;
-export declare function getNonComposableKeys(): string[];
+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[];

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

@@ -2,14 +2,14 @@ const REGISTRY = {};
 export function registerComponent(component) {
     REGISTRY[component.name] = component;
 }
-export function getComponent(name) {
+export function getComponentDef(name) {
     return REGISTRY[name];
 }
-export function getAllComponents() {
+export function getAllComponentDefs() {
     return Object.assign({}, REGISTRY);
 }
-export function getNonComposableKeys() {
-    return Object.values(REGISTRY)
-        .filter(c => c.nonComposable)
-        .map(c => c.name.toLowerCase());
+export function getComponentAssetRefs(componentType, properties) {
+    var _a, _b;
+    const component = REGISTRY[componentType];
+    return (_b = (_a = component === null || component === void 0 ? void 0 : component.getAssetRefs) === null || _a === void 0 ? void 0 : _a.call(component, properties)) !== null && _b !== void 0 ? _b : [];
 }

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

@@ -84,7 +84,7 @@ const GeometryComponent = {
     name: 'Geometry',
     Editor: GeometryComponentEditor,
     View: GeometryComponentView,
-    nonComposable: true,
+    isWrapper: true,
     defaultProperties: {
         geometryType: 'box',
         args: getDefaultArgs('box'),

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

@@ -136,6 +136,22 @@ interface BoundVector3FieldProps extends BoundFieldProps {
 export declare function FieldGroup({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
+interface ListEditorOption {
+    value: string;
+    label: string;
+}
+interface ListEditorProps<T> {
+    label: string;
+    items: T[];
+    renderItem: (item: T, index: number) => React.ReactNode;
+    onAdd: (value: string) => void;
+    addOptions?: ListEditorOption[];
+    emptyMessage?: string;
+    canAdd?: boolean;
+    addButtonTitle?: string;
+    addDisabledTitle?: string;
+}
+export declare function ListEditor<T>({ label, items, renderItem, onAdd, addOptions, emptyMessage, canAdd, addButtonTitle, addDisabledTitle, }: ListEditorProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare function NumberField({ name, label, values, onChange, fallback, step, min, max, style, }: BoundNumberFieldProps): import("react/jsx-runtime").JSX.Element;
 export declare function StringField({ name, label, values, onChange, fallback, placeholder, }: BoundStringFieldProps): import("react/jsx-runtime").JSX.Element;
 export declare function ColorField({ name, label, values, onChange, fallback, }: BoundColorFieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -294,6 +294,39 @@ function bindFieldChange(name, onChange) {
 export function FieldGroup({ children }) {
     return _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: children });
 }
+export function ListEditor({ label, items, renderItem, onAdd, addOptions = [], emptyMessage = 'No items added.', canAdd = true, addButtonTitle = 'Add item', addDisabledTitle = 'No more items available', }) {
+    var _a;
+    const [selectedAddValue, setSelectedAddValue] = useState('');
+    const hasAddSelector = addOptions.length > 0;
+    const resolvedAddValue = hasAddSelector ? (selectedAddValue || ((_a = addOptions[0]) === null || _a === void 0 ? void 0 : _a.value) || '') : '';
+    const canAddItem = canAdd && (!hasAddSelector || resolvedAddValue !== '');
+    useEffect(() => {
+        var _a, _b;
+        if (!hasAddSelector) {
+            if (selectedAddValue !== '') {
+                setSelectedAddValue('');
+            }
+            return;
+        }
+        const stillAvailable = addOptions.some(option => option.value === selectedAddValue);
+        if (!stillAvailable) {
+            setSelectedAddValue((_b = (_a = addOptions[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '');
+        }
+    }, [addOptions, hasAddSelector, selectedAddValue]);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx(Label, { children: label }), _jsxs("div", { style: { display: 'flex', gap: 6, alignItems: 'center' }, children: [hasAddSelector ? (_jsx("div", { style: { minWidth: 140 }, children: _jsx(SelectInput, { value: resolvedAddValue, onChange: setSelectedAddValue, options: canAdd ? addOptions : [{ value: '', label: 'All items added' }] }) })) : null, _jsx("button", { type: "button", onClick: () => onAdd(resolvedAddValue), disabled: !canAddItem, style: {
+                                    width: 22,
+                                    height: 22,
+                                    borderRadius: 3,
+                                    border: `1px solid ${canAddItem ? colors.accentBorder : colors.border}`,
+                                    background: canAddItem ? colors.accentBg : colors.bgSurface,
+                                    color: canAddItem ? colors.accent : colors.textMuted,
+                                    cursor: canAddItem ? 'pointer' : 'not-allowed',
+                                    fontSize: 14,
+                                    lineHeight: 1,
+                                    padding: 0,
+                                    flexShrink: 0,
+                                }, title: canAddItem ? addButtonTitle : addDisabledTitle, children: "+" })] })] }), items.length === 0 ? (_jsx("div", { style: { fontSize: 11, color: colors.textMuted }, children: emptyMessage })) : null, items.map(renderItem)] }));
+}
 export function NumberField({ name, label, values, onChange, fallback = 0, step, min, max, style, }) {
     var _a;
     return (_jsx(FieldRow, { label: label, children: _jsx(NumberInput, { value: (_a = values[name]) !== null && _a !== void 0 ? _a : fallback, onChange: bindFieldChange(name, onChange), step: step, min: min, max: max, style: style }) }));