react-three-game 0.0.67 → 0.0.69

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -7,19 +7,33 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 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 { useStore } from "zustand";
 import { getComponent, registerComponent } from "./components/ComponentRegistry";
 import components from "./components";
 import { loadModel, loadTexture } from "../dragdrop";
 import { GameInstance, GameInstanceProvider, getRepeatAxesFromModelProperties, useInstanceCheck } from "./InstanceProvider";
 import { decompose } from "./utils";
+import { createPrefabStore, PrefabStoreProvider, prefabStoreToPrefab, usePrefabChildIds, usePrefabNode, usePrefabRootId } from "./prefabStore";
 components.forEach(registerComponent);
 const IDENTITY = new Matrix4();
-export const PrefabRoot = forwardRef(({ editMode, data, selectedId, onSelect, onClick, onSelectedObjectChange, onFocusNode, basePath = "", injectedModels = {}, injectedTextures = {} }, ref) => {
-    // prefab root state
+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 [models, setModels] = useState({});
     const [textures, setTextures] = useState({});
     const loading = useRef(new Set());
@@ -27,6 +41,9 @@ export const PrefabRoot = forwardRef(({ editMode, data, selectedId, onSelect, on
     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 availableModels = useMemo(() => (Object.assign(Object.assign({}, models), injectedModels)), [models, injectedModels]);
     const availableTextures = useMemo(() => (Object.assign(Object.assign({}, textures), injectedTextures)), [textures, injectedTextures]);
     useImperativeHandle(ref, () => ({
@@ -54,68 +71,78 @@ export const PrefabRoot = forwardRef(({ editMode, data, selectedId, onSelect, on
         return () => { console.error = originalError; };
     }, []);
     useEffect(() => {
-        const modelsToLoad = new Set();
-        const texturesToLoad = new Set();
-        walk(data.root, node => {
-            var _a;
-            Object.values((_a = node.components) !== null && _a !== void 0 ? _a : {}).forEach(component => {
-                var _a, _b, _c, _d;
-                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);
-                }
+        if (!store && data) {
+            prefabStore.getState().replacePrefab(data);
+        }
+    }, [data, prefabStore, store]);
+    useEffect(() => {
+        const syncAssets = (snapshot = prefabStore.getState()) => {
+            const modelsToLoad = new Set();
+            const texturesToLoad = 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;
+                    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);
+                    }
+                });
             });
-        });
-        modelsToLoad.forEach((file) => __awaiter(void 0, void 0, void 0, function* () {
-            if (availableModels[file] || loading.current.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) {
-                setModels(m => (Object.assign(Object.assign({}, m), { [file]: model })));
-            }
-        }));
-        texturesToLoad.forEach(file => {
-            if (availableTextures[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("/")
+            modelsToLoad.forEach((file) => __awaiter(void 0, void 0, void 0, function* () {
+                if (models[file] || injectedModels[file] || loading.current.has(file))
+                    return;
+                loading.current.add(file);
+                const path = 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;
+                const res = yield loadModel(path);
+                const model = res.model;
+                if (res.success && model) {
+                    setModels(m => (Object.assign(Object.assign({}, m), { [file]: model })));
                 }
-                console.warn(`Failed to load texture: ${path}`, result.error);
-                loading.current.delete(file);
-                failedTextures.current.add(file);
+            }));
+            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);
+                    loading.current.delete(file);
+                    failedTextures.current.add(file);
+                });
             });
-        });
-    }, [data, availableModels, availableTextures, basePath]);
-    return (_jsx("group", { ref: rootRef, children: _jsx(GameInstanceProvider, { models: availableModels, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: onClick, registerRef: registerRef, registerRigidBodyRef: registerRigidBodyRef, loadedModels: availableModels, loadedTextures: availableTextures, editMode: editMode, parentMatrix: IDENTITY }) }) }));
+        };
+        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 }) }) }) }));
 });
+function StoreRootNode(props) {
+    const rootId = usePrefabRootId();
+    return _jsx(GameObjectRenderer, Object.assign({}, props, { nodeId: rootId }));
+}
 export function GameObjectRenderer(props) {
     var _a, _b, _c;
-    const node = props.gameObject;
-    if (!node || node.disabled)
-        return null;
-    const isInstanced = (_c = (_b = (_a = 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 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 prevInstancedRef = useRef(undefined);
     const [isTransitioning, setIsTransitioning] = useState(false);
     useEffect(() => {
@@ -126,9 +153,9 @@ export function GameObjectRenderer(props) {
         }
         prevInstancedRef.current = isInstanced;
     }, [isInstanced]);
-    if (isTransitioning)
+    if (!node || node.disabled || isTransitioning)
         return null;
-    const key = `${node.id}_${isInstanced ? 'instanced' : 'standard'}`;
+    const key = `${props.nodeId}_${isInstanced ? 'instanced' : 'standard'}`;
     return isInstanced
         ? _jsx(InstancedNode, Object.assign({}, props), key)
         : _jsx(StandardNode, Object.assign({}, props), key);
@@ -136,8 +163,11 @@ export function GameObjectRenderer(props) {
 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({ gameObject, parentMatrix = IDENTITY, editMode, registerRef, selectedId: _selectedId, onSelect, onClick }) {
+function InstancedNode({ nodeId, parentMatrix = IDENTITY, editMode, registerRef, onSelect, onClick }) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
+    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');
@@ -150,15 +180,15 @@ function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, register
     const clickValid = useRef(false);
     useEffect(() => {
         if (editMode) {
-            registerRef(gameObject.id, groupRef.current);
-            return () => registerRef(gameObject.id, null);
+            registerRef(nodeId, groupRef.current);
+            return () => registerRef(nodeId, null);
         }
-    }, [gameObject.id, registerRef, editMode]);
+    }, [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(gameObject.id);
+                            onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeId);
                             onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
                         }
                         clickValid.current = false;
@@ -166,19 +196,23 @@ function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, register
     }
     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))) }));
 }
-function StandardNode({ gameObject, selectedId, onSelect, onClick, registerRef, registerRigidBodyRef, loadedModels, loadedTextures, editMode, parentMatrix = IDENTITY, }) {
+function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, registerRigidBodyRef, loadedModels, loadedTextures, editMode, parentMatrix = IDENTITY, }) {
     var _a, _b, _c, _d, _e;
+    const gameObject = usePrefabNode(nodeId);
+    const childIds = usePrefabChildIds(nodeId);
+    const isSelected = selectedId === nodeId;
+    if (!gameObject)
+        return null;
     const groupRef = useRef(null);
     const helperRef = useRef(null);
     const clickValid = useRef(false);
     const isLocked = Boolean(gameObject.locked);
-    const isSelected = selectedId === gameObject.id;
-    const stillInstanced = useInstanceCheck(gameObject.id);
+    const stillInstanced = useInstanceCheck(nodeId);
     useHelper(editMode && isSelected ? helperRef : null, BoxHelper, "cyan");
     useEffect(() => {
-        registerRef(gameObject.id, groupRef.current);
-        return () => registerRef(gameObject.id, null);
-    }, [gameObject.id, registerRef]);
+        registerRef(nodeId, groupRef.current);
+        return () => registerRef(nodeId, null);
+    }, [nodeId, registerRef]);
     const world = parentMatrix.clone().multiply(compose(gameObject));
     const onDown = (e) => {
         e.stopPropagation();
@@ -187,7 +221,7 @@ function StandardNode({ gameObject, selectedId, onSelect, onClick, registerRef,
     const onUp = (e) => {
         if (clickValid.current) {
             e.stopPropagation();
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(gameObject.id);
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeId);
             onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
         }
         clickValid.current = false;
@@ -199,51 +233,35 @@ function StandardNode({ gameObject, selectedId, onSelect, onClick, registerRef,
     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 physicsKey = `physics_${gameObject.id}_${isInstanced ? 'instanced' : 'standard'}`;
-    const renderCtx = createRenderContext(loadedModels, loadedTextures, editMode, selectedId, registerRef);
+    const physicsKey = `physics_${nodeId}_${isInstanced ? 'instanced' : 'standard'}`;
+    const renderCtx = { loadedModels, loadedTextures, editMode, registerRef };
     const childNodes = getChildHostComponents(gameObject).length > 0
-        ? renderHostedChildren(gameObject, renderCtx, world)
-        : renderSceneChildren(gameObject, world, {
-            selectedId,
-            onSelect,
-            onClick,
-            registerRef,
-            registerRigidBodyRef,
-            loadedModels,
-            loadedTextures,
-            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, parentMatrix, childNodes) }));
+        ? _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) }));
     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: gameObject.id, registerRigidBodyRef: registerRigidBodyRef, children: inner }, physicsKey)) : null] }));
+        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] }));
     }
     if (hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View)) {
-        return (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, editMode: editMode, nodeId: gameObject.id, registerRigidBodyRef: registerRigidBodyRef, children: inner }, physicsKey));
+        return (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, editMode: editMode, nodeId: nodeId, registerRigidBodyRef: registerRigidBodyRef, children: inner }, physicsKey));
     }
     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]) => {
         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) || def.nonComposable)
+        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 };
     });
 }
-function createRenderContext(loadedModels, loadedTextures, editMode, selectedId, registerRef) {
-    return { loadedModels, loadedTextures, editMode, selectedId, registerRef };
-}
-function renderSceneChildren(gameObject, parentMatrix, props) {
-    var _a;
-    return (_a = gameObject.children) === null || _a === void 0 ? void 0 : _a.map(child => _jsx(GameObjectRenderer, { gameObject: child, selectedId: props.selectedId, onSelect: props.onSelect, onClick: props.onClick, registerRef: props.registerRef, registerRigidBodyRef: props.registerRigidBodyRef, loadedModels: props.loadedModels, loadedTextures: props.loadedTextures, editMode: props.editMode, parentMatrix: parentMatrix }, child.id));
-}
-function walk(node, fn) {
-    var _a;
-    fn(node);
-    (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(c => walk(c, fn));
+function ChildNodes(_a) {
+    var { childIds, parentMatrix } = _a, props = __rest(_a, ["childIds", "parentMatrix"]);
+    return childIds.map(childId => _jsx(GameObjectRenderer, Object.assign({ nodeId: childId, parentMatrix: parentMatrix }, props), childId));
 }
 function compose(node) {
     const { position, rotation, scale } = getNodeTransformProps(node);
@@ -310,62 +328,59 @@ function getNodeTransformProps(node) {
         scale: (_e = t === null || t === void 0 ? void 0 : t.scale) !== null && _e !== void 0 ? _e : [1, 1, 1],
     };
 }
-function renderCompositionSubtree(gameObject, ctx, parentMatrix = IDENTITY) {
+function renderCompositionSubtree(gameObject, ctx, isSelected, childIds, parentMatrix = IDENTITY) {
     if (!gameObject || gameObject.disabled)
         return null;
     const transform = getNodeTransformProps(gameObject);
     const world = parentMatrix.clone().multiply(compose(gameObject));
-    const childNodes = renderHostedChildren(gameObject, ctx, world);
-    return (_jsx("group", { position: transform.position, rotation: transform.rotation, scale: transform.scale, children: renderCompositionNode(gameObject, ctx, parentMatrix, childNodes) }, gameObject.id));
+    const childNodes = _jsx(CompositionChildren, { childIds: childIds, ctx: ctx, parentMatrix: world });
+    return (_jsx("group", { position: transform.position, rotation: transform.rotation, scale: transform.scale, children: renderCompositionNode(gameObject, ctx, isSelected, parentMatrix, childNodes) }, gameObject.id));
 }
-function renderHostedChildren(gameObject, ctx, parentMatrix) {
-    var _a;
-    return (_a = gameObject.children) === null || _a === void 0 ? void 0 : _a.map(child => renderCompositionSubtree(child, ctx, parentMatrix));
+function CompositionChildren({ childIds, selectedId, ctx, parentMatrix, }) {
+    return childIds.map(childId => (_jsx(CompositionSubtree, { nodeId: childId, selectedId: selectedId, ctx: ctx, parentMatrix: parentMatrix }, childId)));
+}
+function CompositionSubtree({ nodeId, selectedId, ctx, parentMatrix, }) {
+    const gameObject = usePrefabNode(nodeId);
+    const childIds = usePrefabChildIds(nodeId);
+    const isSelected = selectedId === nodeId;
+    if (!gameObject)
+        return null;
+    return renderCompositionSubtree(gameObject, ctx, isSelected, childIds, parentMatrix);
 }
-function renderCompositionNode(gameObject, ctx, parentMatrix, childNodes) {
-    const ownContent = renderNodeOwnContent(gameObject, ctx, parentMatrix);
-    return wrapWithChildHosts(gameObject, ctx, parentMatrix, _jsxs(_Fragment, { children: [ownContent, childNodes] }));
+function renderCompositionNode(gameObject, ctx, isSelected, parentMatrix, childNodes) {
+    const ownContent = renderNodeOwnContent(gameObject, ctx, isSelected, parentMatrix);
+    return wrapWithChildHosts(gameObject, ctx, isSelected, parentMatrix, _jsxs(_Fragment, { children: [ownContent, childNodes] }));
 }
-function renderNodeOwnContent(gameObject, ctx, parentMatrix) {
-    var _a, _b, _c, _d;
+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 model = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.model;
-    const text = (_d = gameObject.components) === null || _d === void 0 ? void 0 : _d.text;
     const geometryDef = geometry && getComponent("Geometry");
     const materialDef = material && getComponent("Material");
-    const modelDef = model && getComponent("Model");
-    const textDef = text && getComponent("Text");
     const contextProps = {
         loadedModels: ctx.loadedModels,
         loadedTextures: ctx.loadedTextures,
         editMode: ctx.editMode,
-        isSelected: ctx.selectedId === gameObject.id,
+        isSelected,
         nodeId: gameObject.id,
         parentMatrix,
         registerRef: ctx.registerRef,
     };
     let core;
-    if (model && (modelDef === null || modelDef === void 0 ? void 0 : modelDef.View)) {
-        core = (_jsx(modelDef.View, Object.assign({ properties: model.properties }, contextProps, { children: material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, Object.assign({ properties: material.properties }, contextProps), "material")) })));
-    }
-    else if (geometry && (geometryDef === null || geometryDef === void 0 ? void 0 : geometryDef.View)) {
+    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 if (text && (textDef === null || textDef === void 0 ? void 0 : textDef.View)) {
-        core = (_jsx(_Fragment, { children: _jsx(textDef.View, Object.assign({ properties: text.properties }, contextProps)) }));
-    }
     else {
         core = null;
     }
     return core;
 }
-function wrapWithChildHosts(gameObject, ctx, parentMatrix, subtree) {
+function wrapWithChildHosts(gameObject, ctx, isSelected, parentMatrix, subtree) {
     const contextProps = {
         loadedModels: ctx.loadedModels,
         loadedTextures: ctx.loadedTextures,
         editMode: ctx.editMode,
-        isSelected: ctx.selectedId === gameObject.id,
+        isSelected,
         nodeId: gameObject.id,
         parentMatrix,
         registerRef: ctx.registerRef,
@@ -374,3 +389,6 @@ function wrapWithChildHosts(gameObject, ctx, parentMatrix, subtree) {
     return childHosts.reduce((acc, { key, View, properties }) => (_jsx(View, Object.assign({ properties: properties }, contextProps, { children: acc }), key)), subtree);
 }
 export default PrefabRoot;
+function missingStoreState() {
+    throw new Error("PrefabRoot requires either data or store");
+}

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

@@ -1,11 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ColorField, FieldGroup, NumberField } from "./Input";
 function AmbientLightComponentEditor({ component, onUpdate, }) {
     return (_jsxs(FieldGroup, { children: [_jsx(ColorField, { name: "color", label: "Color", values: component.properties, onChange: onUpdate }), _jsx(NumberField, { name: "intensity", label: "Intensity", values: component.properties, onChange: onUpdate, min: 0, step: 0.1, fallback: 1 })] }));
 }
-function AmbientLightComponentView({ properties }) {
+function AmbientLightComponentView({ properties, children }) {
     const { color = '#ffffff', intensity = 1 } = properties;
-    return _jsx("ambientLight", { color: color, intensity: intensity });
+    return (_jsxs(_Fragment, { children: [_jsx("ambientLight", { color: color, intensity: intensity }), children] }));
 }
 const AmbientLightComponent = {
     name: 'AmbientLight',

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

@@ -14,7 +14,7 @@ function CameraComponentEditor({ component, onUpdate }) {
     const values = Object.assign(Object.assign({}, cameraDefaults), component.properties);
     return (_jsxs(FieldGroup, { children: [_jsx(NumberField, { name: "fov", label: "FOV", values: values, onChange: onUpdate, fallback: 50, min: 1, max: 179, step: 1 }), _jsx(NumberField, { name: "near", label: "Near", values: values, onChange: onUpdate, fallback: 0.1, min: 0.001, step: 0.1 }), _jsx(NumberField, { name: "zoom", label: "Zoom", values: values, onChange: onUpdate, fallback: 1, min: 0.01, step: 0.1 }), _jsx(NumberField, { name: "far", label: "Far", values: values, onChange: onUpdate, fallback: 1000, min: 0.1, step: 1 })] }));
 }
-function CameraComponentView({ properties, editMode, isSelected }) {
+function CameraComponentView({ properties, children, editMode, isSelected }) {
     const merged = Object.assign(Object.assign({}, cameraDefaults), properties);
     const fov = merged.fov;
     const near = merged.near;
@@ -34,7 +34,7 @@ function CameraComponentView({ properties, editMode, isSelected }) {
             cameraHelper.update();
         }
     });
-    return (_jsxs(_Fragment, { children: [_jsx(PerspectiveCamera, { ref: (instance) => setCamera(instance), makeDefault: !editMode, fov: fov, near: near, zoom: zoom, far: far }), editMode && isSelected && cameraHelper && (_jsx("primitive", { object: cameraHelper })), editMode ? (_jsxs("group", { children: [_jsxs("mesh", { children: [_jsx("boxGeometry", { args: [0.3, 0.3, 0.5] }), _jsx("meshBasicMaterial", { color: '#22d3ee', wireframe: true })] }), _jsxs("mesh", { position: [0, 0, -0.25], rotation: [Math.PI / 2, 0, 0], children: [_jsx("coneGeometry", { args: [0.08, 0.16, 16] }), _jsx("meshBasicMaterial", { color: '#22d3ee', wireframe: true })] })] })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsx(PerspectiveCamera, { ref: (instance) => setCamera(instance), makeDefault: !editMode, fov: fov, near: near, zoom: zoom, far: far }), editMode && isSelected && cameraHelper && (_jsx("primitive", { object: cameraHelper })), editMode ? (_jsxs("group", { children: [_jsxs("mesh", { children: [_jsx("boxGeometry", { args: [0.3, 0.3, 0.5] }), _jsx("meshBasicMaterial", { color: '#22d3ee', wireframe: true })] }), _jsxs("mesh", { position: [0, 0, -0.25], rotation: [Math.PI / 2, 0, 0], children: [_jsx("coneGeometry", { args: [0.08, 0.16, 16] }), _jsx("meshBasicMaterial", { color: '#22d3ee', wireframe: true })] })] })) : null, children] }));
 }
 const CameraComponent = {
     name: 'Camera',

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

@@ -48,7 +48,7 @@ function DirectionalLightComponentEditor({ component, onUpdate }) {
         : directionalLightFields.filter(field => field.name !== '_shadowCamera');
     return (_jsx(FieldRenderer, { fields: fields, values: values, onChange: onUpdate }));
 }
-function DirectionalLightView({ properties, editMode, isSelected }) {
+function DirectionalLightView({ properties, children, editMode, isSelected }) {
     const merged = Object.assign(Object.assign({}, directionalLightDefaults), properties);
     const color = merged.color;
     const intensity = merged.intensity;
@@ -93,7 +93,7 @@ function DirectionalLightView({ properties, editMode, isSelected }) {
                                         new Vector3(targetOffset[0], targetOffset[1], targetOffset[2])
                                     ];
                                     geo.setFromPoints(points);
-                                } }), _jsx("lineBasicMaterial", { color: color, opacity: 0.6, transparent: true })] })] }))] }));
+                                } }), _jsx("lineBasicMaterial", { color: color, opacity: 0.6, transparent: true })] })] })), children] }));
 }
 const DirectionalLightComponent = {
     name: 'DirectionalLight',

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

@@ -102,7 +102,6 @@ const ModelComponent = {
     name: 'Model',
     Editor: ModelComponentEditor,
     View: ModelComponentView,
-    nonComposable: true,
     defaultProperties: {
         filename: '',
         instanced: false,

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

@@ -16,7 +16,7 @@ function SpotLightComponentEditor({ component, onUpdate, basePath = "" }) {
     const values = Object.assign(Object.assign({}, spotLightDefaults), component.properties);
     return (_jsxs(FieldGroup, { children: [_jsx(ColorField, { name: "color", label: "Color", values: values, onChange: onUpdate }), _jsx(NumberField, { name: "intensity", label: "Intensity", values: values, onChange: onUpdate, min: 0, step: 1, fallback: 200 }), _jsx(NumberField, { name: "angle", label: "Angle", values: values, onChange: onUpdate, min: 0, max: Math.PI, step: 0.05, fallback: 0.5 }), _jsx(NumberField, { name: "penumbra", label: "Penumbra", values: values, onChange: onUpdate, min: 0, max: 1, step: 0.05, fallback: 0.5 }), _jsx(NumberField, { name: "distance", label: "Distance", values: values, onChange: onUpdate, min: 0, step: 1, fallback: 100 }), _jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: values, onChange: onUpdate, fallback: true }), _jsxs("div", { children: [_jsx(Label, { children: "Texture Map" }), _jsx(TexturePicker, { value: values.map, onChange: (map) => onUpdate({ map }), basePath: basePath })] })] }));
 }
-function SpotLightView({ properties, editMode, isSelected, loadedTextures }) {
+function SpotLightView({ properties, children, editMode, isSelected, loadedTextures }) {
     const merged = Object.assign(Object.assign({}, spotLightDefaults), properties);
     const color = merged.color;
     const intensity = merged.intensity;
@@ -45,7 +45,7 @@ function SpotLightView({ properties, editMode, isSelected, loadedTextures }) {
             spotLightHelper.update();
         }
     });
-    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, map: textureMap, castShadow: castShadow, "shadow-mapSize-width": 1024, "shadow-mapSize-height": 1024, "shadow-bias": -0.0001, "shadow-normalBias": 0.02 }), editMode && isSelected && spotLightHelper && (_jsx("primitive", { object: spotLightHelper })), _jsx("object3D", { ref: targetRef, position: [0, -5, 0] }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: [0, -5, 0], children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, map: textureMap, castShadow: castShadow, "shadow-mapSize-width": 1024, "shadow-mapSize-height": 1024, "shadow-bias": -0.0001, "shadow-normalBias": 0.02 }), editMode && isSelected && spotLightHelper && (_jsx("primitive", { object: spotLightHelper })), _jsx("object3D", { ref: targetRef, position: [0, -5, 0] }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: [0, -5, 0], children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] })), children] }));
 }
 const SpotLightComponent = {
     name: 'SpotLight',

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

@@ -11,7 +11,7 @@ function TextComponentEditor({ component, onUpdate, }) {
                     { value: 'right', label: 'Right' },
                 ] })] }));
 }
-function TextComponentView({ properties }) {
+function TextComponentView({ properties, children }) {
     const { text = '', font, size, depth, width, align, color } = properties;
     const textContent = String(text || '');
     const meshRef = useRef(null);
@@ -37,13 +37,12 @@ function TextComponentView({ properties }) {
     }, [align]);
     if (!textContent)
         return null;
-    return (_jsx("group", { position: offset, children: _jsx(Text, { ref: meshRef, font: font, size: size, depth: depth, layout: { align, width }, color: color, onLoad: handleLoad, children: textContent }) }));
+    return (_jsxs("group", { position: offset, children: [_jsx(Text, { ref: meshRef, font: font, size: size, depth: depth, layout: { align, width }, color: color, onLoad: handleLoad, children: textContent }), children] }));
 }
 const TextComponent = {
     name: 'Text',
     Editor: TextComponentEditor,
     View: TextComponentView,
-    nonComposable: true,
     defaultProperties: {
         text: 'Hello World',
         color: '#888888',

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

@@ -1,5 +1,5 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Label, Vector3Field, Vector3Input } from "./Input";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label, Vector3Input } from "./Input";
 import { useEditorContext } from "../EditorContext";
 import { colors } from "../styles";
 const buttonStyle = {
@@ -13,8 +13,8 @@ const buttonStyle = {
     fontSize: 11,
     flex: 1,
 };
-function TransformModeSelector({ transformMode, setTransformMode, snapResolution, setSnapResolution }) {
-    return (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsxs(Label, { children: ["Transform Mode ", snapResolution > 0 && `(Snap: ${snapResolution})`] }), _jsx("div", { style: { display: 'flex', gap: 6 }, children: ["translate", "rotate", "scale"].map(mode => {
+function TransformModeSelector({ transformMode, setTransformMode }) {
+    return (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsx(Label, { children: "Transform Mode" }), _jsx("div", { style: { display: 'flex', gap: 6 }, children: ["translate", "rotate", "scale"].map(mode => {
                     const isActive = transformMode === mode;
                     return (_jsx("button", { onClick: () => setTransformMode(mode), style: Object.assign(Object.assign({}, buttonStyle), { background: isActive ? colors.accentBg : colors.bgSurface, borderColor: isActive ? colors.accentBorder : colors.border, color: isActive ? colors.accent : colors.text }), onPointerEnter: (e) => {
                             if (!isActive)
@@ -23,13 +23,7 @@ function TransformModeSelector({ transformMode, setTransformMode, snapResolution
                             if (!isActive)
                                 e.currentTarget.style.background = colors.bgSurface;
                         }, children: mode }, mode));
-                }) }), _jsx("div", { style: { marginTop: 6 }, children: _jsxs("button", { onClick: () => setSnapResolution(snapResolution > 0 ? 0 : 0.1), style: Object.assign(Object.assign({}, buttonStyle), { background: snapResolution > 0 ? colors.accentBg : colors.bgSurface, borderColor: snapResolution > 0 ? colors.accentBorder : colors.border, color: snapResolution > 0 ? colors.accent : colors.text, width: '100%' }), onPointerEnter: (e) => {
-                        if (snapResolution === 0)
-                            e.currentTarget.style.background = colors.bgHover;
-                    }, onPointerLeave: (e) => {
-                        if (snapResolution === 0)
-                            e.currentTarget.style.background = colors.bgSurface;
-                    }, children: ["Snap: ", snapResolution > 0 ? `ON (${snapResolution})` : 'OFF'] }) })] }));
+                }) })] }));
 }
 const snapLockBtnStyle = {
     background: 'none',
@@ -44,11 +38,12 @@ function SnapLockButton({ locked, onToggle, title }) {
     return (_jsx("button", { style: snapLockBtnStyle, onClick: onToggle, title: title, children: locked ? '🔒' : '🔓' }));
 }
 function TransformComponentEditor({ component, onUpdate }) {
-    var _a, _b;
-    const { transformMode, setTransformMode, snapResolution, setSnapResolution, positionSnap, setPositionSnap, rotationSnap, setRotationSnap } = useEditorContext();
+    var _a, _b, _c;
+    const { transformMode, setTransformMode, scaleSnap, setScaleSnap, positionSnap, setPositionSnap, rotationSnap, setRotationSnap } = useEditorContext();
+    const scaleSnapped = scaleSnap > 0;
     const positionSnapped = positionSnap > 0;
     const rotationSnapped = rotationSnap > 0;
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(TransformModeSelector, { transformMode: transformMode, setTransformMode: setTransformMode, snapResolution: snapResolution, setSnapResolution: setSnapResolution }), _jsx(Vector3Input, { label: "Position", value: (_a = component.properties.position) !== null && _a !== void 0 ? _a : [0, 0, 0], onChange: v => onUpdate({ position: v }), snap: positionSnap, labelExtra: _jsx(SnapLockButton, { locked: positionSnapped, onToggle: () => setPositionSnap(positionSnapped ? 0 : 0.5), title: positionSnapped ? `Snap ON (0.5) — click to disable` : `Snap OFF — click to enable (0.5)` }) }), _jsx(Vector3Input, { label: "Rotation", value: (_b = component.properties.rotation) !== null && _b !== void 0 ? _b : [0, 0, 0], onChange: v => onUpdate({ rotation: v }), snap: rotationSnap, labelExtra: _jsx(SnapLockButton, { locked: rotationSnapped, onToggle: () => setRotationSnap(rotationSnapped ? 0 : Math.PI / 4), title: rotationSnapped ? `Snap ON (π/4) — click to disable` : `Snap OFF — click to enable (π/4)` }) }), _jsx(Vector3Field, { name: "scale", label: "Scale", values: component.properties, onChange: onUpdate, fallback: [1, 1, 1] })] }));
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(TransformModeSelector, { transformMode: transformMode, setTransformMode: setTransformMode }), _jsx(Vector3Input, { label: "Position", value: (_a = component.properties.position) !== null && _a !== void 0 ? _a : [0, 0, 0], onChange: v => onUpdate({ position: v }), snap: positionSnap, labelExtra: _jsx(SnapLockButton, { locked: positionSnapped, onToggle: () => setPositionSnap(positionSnapped ? 0 : 0.5), title: positionSnapped ? `Snap ON (0.5) — click to disable` : `Snap OFF — click to enable (0.5)` }) }), _jsx(Vector3Input, { label: "Rotation", value: (_b = component.properties.rotation) !== null && _b !== void 0 ? _b : [0, 0, 0], onChange: v => onUpdate({ rotation: v }), snap: rotationSnap, labelExtra: _jsx(SnapLockButton, { locked: rotationSnapped, onToggle: () => setRotationSnap(rotationSnapped ? 0 : Math.PI / 4), title: rotationSnapped ? `Snap ON (π/4) — click to disable` : `Snap OFF — click to enable (π/4)` }) }), _jsx(Vector3Input, { label: "Scale", value: (_c = component.properties.scale) !== null && _c !== void 0 ? _c : [1, 1, 1], onChange: v => onUpdate({ scale: v }), snap: scaleSnap, labelExtra: _jsx(SnapLockButton, { locked: scaleSnapped, onToggle: () => setScaleSnap(scaleSnapped ? 0 : 0.1), title: scaleSnapped ? `Snap ON (0.1) — click to disable` : `Snap OFF — click to enable (0.1)` }) })] }));
 }
 const TransformComponent = {
     name: 'Transform',