react-three-game 0.0.107 → 0.0.109

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -1,3 +1,12 @@
+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)
@@ -10,25 +19,22 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 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 { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Euler, Matrix4 } from "three";
+import { useThree } from "@react-three/fiber";
 import { useStore } from "zustand";
 import { useClickValid } from "./useClickValid";
 import { findComponent, getNodeUserData } from "./types";
-import { getComponentDef, registerComponent } from "./components/ComponentRegistry";
-import { builtinComponents } from "./components";
+import { getComponentDef } from "./components/ComponentRegistry";
 import { loadModel, loadSound, loadTexture } from "../dragdrop";
 import { GameInstance, GameInstanceProvider, getRepeatAxesFromModelProperties } from "./InstanceProvider";
-import { composeTransform, decompose } from "./utils";
+import { composeTransform, decompose, withBasePath } from "./runtimeUtils";
 import { createPrefabStore, PrefabStoreProvider, usePrefabChildIds, usePrefabNode, usePrefabRootId } from "./prefabStore";
 import { AssetRuntimeContext, NodeScope } from "./assetRuntime";
 import { gameEvents } from "./GameEvents";
 import { sound as soundManager } from "../../helpers/SoundManager";
-builtinComponents.forEach(registerComponent);
+import { PrefabEditorMode, SceneContext } from "./SceneContext";
 const IDENTITY = new Matrix4();
-const EMPTY_MODELS = {};
-const EMPTY_TEXTURES = {};
-const EMPTY_SOUNDS = {};
 const EMPTY_NODE_COMPONENTS = {
     geometry: undefined,
     materials: [],
@@ -37,13 +43,19 @@ const EMPTY_NODE_COMPONENTS = {
     clickEventName: null,
     composition: [],
 };
-/** Resolve a relative or absolute asset file path against a base path. */
-function resolveAssetPath(basePath, file) {
-    if (file.startsWith("data:"))
-        return file;
-    if (file.startsWith("http://") || file.startsWith("https://"))
-        return file;
-    return file.startsWith("/") ? `${basePath}${file}` : `${basePath}/${file}`;
+function precompileModel(model, renderer, camera) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            if (typeof renderer.compileAsync === "function") {
+                yield renderer.compileAsync(model, camera);
+                return;
+            }
+            renderer.compile(model, camera);
+        }
+        catch (error) {
+            console.warn("Failed to precompile model before adding it to the scene", error);
+        }
+    });
 }
 /** Check if a model component's assets are loaded. */
 function isNodeReady(model, loadedModels) {
@@ -60,30 +72,19 @@ function getNodeMetadataProps(node) {
         userData: Object.assign(Object.assign({ prefabNodeId: node.id }, (nodeName ? { prefabNodeName: nodeName } : {})), getNodeUserData(node)),
     };
 }
-export var PrefabEditorMode;
-(function (PrefabEditorMode) {
-    PrefabEditorMode["Edit"] = "edit";
-    PrefabEditorMode["Play"] = "play";
-})(PrefabEditorMode || (PrefabEditorMode = {}));
-export const SceneContext = createContext(null);
-export function useScene() {
-    const scene = useContext(SceneContext);
-    if (!scene) {
-        throw new Error("useScene must be used within a PrefabRoot or PrefabEditor scene provider");
-    }
-    return scene;
-}
 export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSelect, onClick, onEditNodeClick, basePath = "", children }, ref) => {
+    const parentScene = useContext(SceneContext);
+    const parentAssetRuntime = useContext(AssetRuntimeContext);
+    const renderer = useThree(state => state.gl);
+    const camera = useThree(state => state.camera);
     const [models, setModels] = useState({});
     const [textures, setTextures] = useState({});
     const [sounds, setSounds] = useState({});
-    const [injectedModels, setInjectedModels] = useState(EMPTY_MODELS);
-    const [injectedTextures, setInjectedTextures] = useState(EMPTY_TEXTURES);
-    const [injectedSounds, setInjectedSounds] = useState(EMPTY_SOUNDS);
     const loading = useRef(new Set());
     const failedModels = useRef(new Set());
     const failedTextures = useRef(new Set());
     const failedSounds = useRef(new Set());
+    const injectedModelVersions = useRef({});
     const objectRefs = useRef({});
     const nodeHandles = useRef(new Map());
     const [ownedStore] = useState(() => {
@@ -100,19 +101,18 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
     const usesOwnedStore = resolvedStore === ownedStore;
     const rootId = useStore(resolvedStore, state => state.rootId);
     const assetRefCounts = useStore(resolvedStore, state => state.assetRefCounts);
-    const availableModels = useMemo(() => (Object.assign(Object.assign({}, models), injectedModels)), [models, injectedModels]);
-    const getModel = useCallback((path) => { var _a; return (_a = availableModels[path]) !== null && _a !== void 0 ? _a : null; }, [availableModels]);
-    const getTexture = useCallback((path) => { var _a, _b; return (_b = (_a = injectedTextures[path]) !== null && _a !== void 0 ? _a : textures[path]) !== null && _b !== void 0 ? _b : null; }, [injectedTextures, textures]);
-    const getSound = useCallback((path) => { var _a, _b; return (_b = (_a = injectedSounds[path]) !== null && _a !== void 0 ? _a : sounds[path]) !== null && _b !== void 0 ? _b : null; }, [injectedSounds, sounds]);
-    const assetRevision = useMemo(() => `${Object.keys(textures).concat(Object.keys(injectedTextures)).sort().join('|')}::${Object.keys(availableModels).sort().join('|')}`, [availableModels, injectedTextures, textures]);
+    const getModel = useCallback((path) => { var _a, _b; return (_b = (_a = models[path]) !== null && _a !== void 0 ? _a : parentAssetRuntime === null || parentAssetRuntime === void 0 ? void 0 : parentAssetRuntime.getModel(path)) !== null && _b !== void 0 ? _b : null; }, [models, parentAssetRuntime]);
+    const getTexture = useCallback((path) => { var _a, _b; return (_b = (_a = textures[path]) !== null && _a !== void 0 ? _a : parentAssetRuntime === null || parentAssetRuntime === void 0 ? void 0 : parentAssetRuntime.getTexture(path)) !== null && _b !== void 0 ? _b : null; }, [parentAssetRuntime, textures]);
+    const getSound = useCallback((path) => { var _a, _b; return (_b = (_a = sounds[path]) !== null && _a !== void 0 ? _a : parentAssetRuntime === null || parentAssetRuntime === void 0 ? void 0 : parentAssetRuntime.getSound(path)) !== null && _b !== void 0 ? _b : null; }, [parentAssetRuntime, sounds]);
+    const assetRevision = useMemo(() => { var _a; return `${(_a = parentAssetRuntime === null || parentAssetRuntime === void 0 ? void 0 : parentAssetRuntime.getAssetRevision()) !== null && _a !== void 0 ? _a : ""}::${Object.keys(textures).sort().join('|')}::${Object.keys(models).sort().join('|')}`; }, [models, parentAssetRuntime, textures]);
     const getObject = useCallback((id) => {
-        var _a;
-        return (_a = objectRefs.current[id]) !== null && _a !== void 0 ? _a : null;
-    }, []);
-    const getHandle = useCallback((id, kind) => {
         var _a, _b;
-        return (_b = (_a = nodeHandles.current.get(id)) === null || _a === void 0 ? void 0 : _a.get(kind)) !== null && _b !== void 0 ? _b : null;
-    }, []);
+        return (_b = (_a = objectRefs.current[id]) !== null && _a !== void 0 ? _a : parentAssetRuntime === null || parentAssetRuntime === void 0 ? void 0 : parentAssetRuntime.getObject(id)) !== null && _b !== void 0 ? _b : null;
+    }, [parentAssetRuntime]);
+    const getHandle = useCallback((id, kind) => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = nodeHandles.current.get(id)) === null || _a === void 0 ? void 0 : _a.get(kind)) !== null && _b !== void 0 ? _b : parentAssetRuntime === null || parentAssetRuntime === void 0 ? void 0 : parentAssetRuntime.getHandle(id, kind)) !== null && _c !== void 0 ? _c : null;
+    }, [parentAssetRuntime]);
     const getNode = useCallback((nodeId) => {
         var _a;
         return (_a = resolvedStore.getState().nodesById[nodeId]) !== null && _a !== void 0 ? _a : null;
@@ -120,6 +120,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
     const registerHandle = useCallback((id, kind, handle) => {
         const current = nodeHandles.current.get(id);
         if (handle == null) {
+            parentAssetRuntime === null || parentAssetRuntime === void 0 ? void 0 : parentAssetRuntime.registerHandle(id, kind, null);
             if (!current)
                 return;
             current.delete(kind);
@@ -130,16 +131,41 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
         }
         if (current) {
             current.set(kind, handle);
+            parentAssetRuntime === null || parentAssetRuntime === void 0 ? void 0 : parentAssetRuntime.registerHandle(id, kind, handle);
             return;
         }
         nodeHandles.current.set(id, new Map([[kind, handle]]));
-    }, []);
+        parentAssetRuntime === null || parentAssetRuntime === void 0 ? void 0 : parentAssetRuntime.registerHandle(id, kind, handle);
+    }, [parentAssetRuntime]);
+    const registerObject = useCallback((id, obj) => {
+        if (obj) {
+            objectRefs.current[id] = obj;
+        }
+        else {
+            delete objectRefs.current[id];
+        }
+        parentAssetRuntime === null || parentAssetRuntime === void 0 ? void 0 : parentAssetRuntime.registerObject(id, obj);
+    }, [parentAssetRuntime]);
+    const registerModel = useCallback((path, model) => {
+        parentAssetRuntime === null || parentAssetRuntime === void 0 ? void 0 : parentAssetRuntime.registerModel(path, model);
+        setModels(prev => prev[path] === model ? prev : Object.assign(Object.assign({}, prev), { [path]: model }));
+    }, [parentAssetRuntime]);
+    const registerTexture = useCallback((path, texture) => {
+        parentAssetRuntime === null || parentAssetRuntime === void 0 ? void 0 : parentAssetRuntime.registerTexture(path, texture);
+        setTextures(prev => prev[path] === texture ? prev : Object.assign(Object.assign({}, prev), { [path]: texture }));
+    }, [parentAssetRuntime]);
+    const registerSound = useCallback((path, sound) => {
+        parentAssetRuntime === null || parentAssetRuntime === void 0 ? void 0 : parentAssetRuntime.registerSound(path, sound);
+        soundManager.setBuffer(path, sound);
+        setSounds(prev => prev[path] === sound ? prev : Object.assign(Object.assign({}, prev), { [path]: sound }));
+    }, [parentAssetRuntime]);
     const sceneValue = useMemo(() => ({
         get root() {
             var _a;
             return (_a = objectRefs.current[rootId]) !== null && _a !== void 0 ? _a : null;
         },
         mode: editMode ? PrefabEditorMode.Edit : PrefabEditorMode.Play,
+        basePath,
         get: getNode,
         getObject,
         getHandle,
@@ -155,28 +181,31 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
         duplicate: (id) => resolvedStore.getState().duplicateNode(id),
         move: (draggedId, targetId, position) => resolvedStore.getState().moveNode(draggedId, targetId, position),
         replace: (prefab) => resolvedStore.getState().replacePrefab(prefab),
-        addModel: (path, model) => setInjectedModels(prev => (Object.assign(Object.assign({}, prev), { [path]: model }))),
-        addTexture: (path, texture) => setInjectedTextures(prev => (Object.assign(Object.assign({}, prev), { [path]: texture }))),
-        addSound: (path, sound) => {
-            soundManager.setBuffer(path, sound);
-            setInjectedSounds(prev => (Object.assign(Object.assign({}, prev), { [path]: sound })));
+        addModel: (path, model) => {
+            var _a;
+            const version = ((_a = injectedModelVersions.current[path]) !== null && _a !== void 0 ? _a : 0) + 1;
+            injectedModelVersions.current[path] = version;
+            void precompileModel(model, renderer, camera).then(() => {
+                if (injectedModelVersions.current[path] !== version)
+                    return;
+                registerModel(path, model);
+            });
         },
-    }), [editMode, getHandle, getModel, getNode, getObject, resolvedStore, rootId]);
+        addTexture: registerTexture,
+        addSound: registerSound,
+    }), [basePath, camera, editMode, getHandle, getModel, getNode, getObject, registerModel, registerSound, registerTexture, renderer, resolvedStore, rootId]);
     useImperativeHandle(ref, () => sceneValue, [sceneValue]);
-    const registerRef = useCallback((id, obj) => {
-        objectRefs.current[id] = obj;
-    }, []);
     useEffect(() => {
         if (usesOwnedStore && data) {
             resolvedStore.getState().replacePrefab(data);
         }
     }, [data, resolvedStore, usesOwnedStore]);
     useEffect(() => {
-        const loadAsset = (file, loaded, injected, failed, loader) => {
-            if (loaded[file] || injected[file] || loading.current.has(file) || failed.has(file))
+        const loadAsset = (file, loaded, failed, loader) => {
+            if (loaded[file] || loading.current.has(file) || failed.has(file))
                 return;
             loading.current.add(file);
-            void loader(resolveAssetPath(basePath, file)).then(result => {
+            void loader(withBasePath(basePath, file)).then(result => {
                 loading.current.delete(file);
                 if (!result.success) {
                     console.warn(`Failed to load asset: ${file}`, result.error);
@@ -189,44 +218,63 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
             const type = entry.slice(0, separator);
             const file = entry.slice(separator + 1);
             if (type === 'model') {
-                loadAsset(file, models, injectedModels, failedModels.current, path => loadModel(path).then(result => {
+                const inheritedModel = models[file] ? null : parentAssetRuntime === null || parentAssetRuntime === void 0 ? void 0 : parentAssetRuntime.getModel(file);
+                if (inheritedModel) {
+                    registerModel(file, inheritedModel);
+                    return;
+                }
+                loadAsset(file, models, failedModels.current, path => loadModel(path).then((result) => __awaiter(void 0, void 0, void 0, function* () {
                     const loadedModel = result.model;
                     if (result.success && loadedModel) {
-                        setModels(currentModels => (Object.assign(Object.assign({}, currentModels), { [file]: loadedModel })));
+                        yield precompileModel(loadedModel, renderer, camera);
+                        registerModel(file, loadedModel);
                     }
                     return result;
-                }));
+                })));
             }
             else if (type === 'texture') {
-                loadAsset(file, textures, injectedTextures, failedTextures.current, path => loadTexture(path).then(result => {
+                const inheritedTexture = textures[file] ? null : parentAssetRuntime === null || parentAssetRuntime === void 0 ? void 0 : parentAssetRuntime.getTexture(file);
+                if (inheritedTexture) {
+                    registerTexture(file, inheritedTexture);
+                    return;
+                }
+                loadAsset(file, textures, failedTextures.current, path => loadTexture(path).then(result => {
                     const loadedTexture = result.texture;
                     if (result.success && loadedTexture) {
-                        setTextures(currentTextures => (Object.assign(Object.assign({}, currentTextures), { [file]: loadedTexture })));
+                        registerTexture(file, loadedTexture);
                     }
                     return result;
                 }));
             }
             else if (type === 'sound') {
-                loadAsset(file, sounds, injectedSounds, failedSounds.current, path => loadSound(path).then(result => {
+                const inheritedSound = sounds[file] ? null : parentAssetRuntime === null || parentAssetRuntime === void 0 ? void 0 : parentAssetRuntime.getSound(file);
+                if (inheritedSound) {
+                    registerSound(file, inheritedSound);
+                    return;
+                }
+                loadAsset(file, sounds, 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 })));
+                        registerSound(file, loadedSound);
                     }
                     return result;
                 }));
             }
         });
-    }, [assetRefCounts, basePath, injectedModels, injectedSounds, injectedTextures, models, sounds, textures]);
+    }, [assetRefCounts, basePath, camera, models, parentAssetRuntime, registerModel, registerSound, registerTexture, renderer, sounds, textures]);
     const assetRuntime = useMemo(() => ({
+        registerObject,
         registerHandle,
+        registerModel,
+        registerTexture,
+        registerSound,
         getHandle,
         getObject,
         getModel,
         getTexture,
         getSound,
         getAssetRevision: () => assetRevision,
-    }), [registerHandle, getHandle, getObject, getModel, getTexture, getSound, assetRevision]);
+    }), [registerObject, registerHandle, registerModel, registerTexture, registerSound, getHandle, getObject, getModel, getTexture, getSound, assetRevision]);
     const handleNodeClick = useCallback((event, nodeId, fallbackObject) => {
         const node = resolvedStore.getState().nodesById[nodeId];
         if (!node)
@@ -235,9 +283,10 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
         emitNodePointerEvent(clickEventName, event, nodeId, node, fallbackObject);
         onClick === null || onClick === void 0 ? void 0 : onClick(event, node);
     }, [onClick, resolvedStore]);
-    const content = (_jsxs(GameInstanceProvider, { models: availableModels, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, onClick: editMode ? undefined : handleNodeClick, registerRef: registerRef, children: [_jsx(StoreRootNode, { selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: editMode ? undefined : handleNodeClick, onEditNodeClick: editMode ? onEditNodeClick : undefined, registerRef: registerRef, loadedModels: availableModels, editMode: editMode, parentMatrix: IDENTITY }), children] }));
-    const runtimeContent = (_jsx(SceneContext.Provider, { value: sceneValue, children: _jsx(AssetRuntimeContext.Provider, { value: assetRuntime, children: content }) }));
-    return _jsx(PrefabStoreProvider, { store: resolvedStore, children: runtimeContent });
+    const content = (_jsxs(GameInstanceProvider, { models: models, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, onClick: editMode ? undefined : handleNodeClick, registerRef: registerObject, children: [_jsx(StoreRootNode, { selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: editMode ? undefined : handleNodeClick, onEditNodeClick: editMode ? onEditNodeClick : undefined, registerRef: registerObject, loadedModels: models, editMode: editMode, parentMatrix: IDENTITY, basePath: basePath }), children] }));
+    const runtimeContent = parentAssetRuntime ? content : (_jsx(AssetRuntimeContext.Provider, { value: assetRuntime, children: content }));
+    const sceneContent = parentScene ? runtimeContent : (_jsx(SceneContext.Provider, { value: sceneValue, children: runtimeContent }));
+    return _jsx(PrefabStoreProvider, { store: resolvedStore, children: sceneContent });
 });
 function StoreRootNode(props) {
     const rootId = usePrefabRootId();
@@ -303,10 +352,7 @@ function analyzeNodeComponents(node) {
 }
 function emitNodePointerEvent(eventName, event, nodeId, node, fallbackObject) {
     var _a;
-    const trimmedEventName = eventName === null || eventName === void 0 ? void 0 : eventName.trim();
-    if (!trimmedEventName)
-        return;
-    gameEvents.emit(trimmedEventName, {
+    const payload = {
         sourceEntityId: nodeId,
         sourceNodeId: nodeId,
         nodeId,
@@ -319,7 +365,12 @@ function emitNodePointerEvent(eventName, event, nodeId, node, fallbackObject) {
         metaKey: event.nativeEvent.metaKey,
         shiftKey: event.nativeEvent.shiftKey,
         r3fEvent: event,
-    });
+    };
+    gameEvents.emit('click', payload);
+    const trimmedEventName = eventName === null || eventName === void 0 ? void 0 : eventName.trim();
+    if (!trimmedEventName)
+        return;
+    gameEvents.emit(trimmedEventName, payload);
 }
 export function GameObjectRenderer(props) {
     var _a, _b;
@@ -374,7 +425,7 @@ function InstancedNode({ nodeId, parentMatrix = IDENTITY, editMode, registerRef,
     }
     return _jsx(_Fragment, { children: renderedInstances });
 }
-function StandardNode({ nodeId, selectedId, onSelect, onClick, onEditNodeClick, registerRef, loadedModels, editMode, parentMatrix = IDENTITY, isVisible = true, }) {
+function StandardNode({ nodeId, selectedId, onSelect, onClick, onEditNodeClick, registerRef, loadedModels, editMode, parentMatrix = IDENTITY, isVisible = true, basePath = "", }) {
     const gameObject = usePrefabNode(nodeId);
     const childIds = usePrefabChildIds(nodeId);
     const analyzedComponents = useMemo(() => gameObject ? analyzeNodeComponents(gameObject) : EMPTY_NODE_COMPONENTS, [gameObject]);
@@ -410,9 +461,13 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, onEditNodeClick,
         rotation: transform.rotation,
         scale: transform.scale,
     };
+    const worldTransform = decompose(world);
     const groupProps = Object.assign(Object.assign({}, metadataProps), transformProps);
-    const childNodes = _jsx(ChildNodes, { childIds: childIds, parentMatrix: world, selectedId: selectedId, onSelect: onSelect, onClick: onClick, onEditNodeClick: onEditNodeClick, registerRef: registerRef, loadedModels: loadedModels, editMode: editMode, isVisible: nodeVisible });
-    const inner = renderNodeContent(analyzedComponents, loadedModels, primaryClickHandlers, childNodes);
+    const childNodes = _jsx(ChildNodes, { childIds: childIds, parentMatrix: world, selectedId: selectedId, onSelect: onSelect, onClick: onClick, onEditNodeClick: onEditNodeClick, registerRef: registerRef, loadedModels: loadedModels, editMode: editMode, isVisible: nodeVisible, basePath: basePath });
+    const nodeInteractionHandlers = editMode ? editClickHandlers : primaryClickHandlers;
+    const componentRuntimeProps = Object.assign(Object.assign({ editMode,
+        nodeInteractionHandlers }, transformProps), { worldPosition: worldTransform.position });
+    const inner = renderNodeContent(analyzedComponents, loadedModels, primaryClickHandlers, childNodes, basePath, componentRuntimeProps);
     const editAnchor = editMode ? (_jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) })) : null;
     const standardNode = (_jsxs("group", Object.assign({ ref: handleGroupRef }, groupProps, { visible: nodeVisible }, (editMode ? editClickHandlers : undefined), { children: [editAnchor, inner] })));
     return (_jsx(NodeScope, { nodeId: nodeId, editMode: editMode, isSelected: isSelected, children: standardNode }));
@@ -485,7 +540,7 @@ function getNodeTransformProps(node) {
         scale: (_d = t === null || t === void 0 ? void 0 : t.scale) !== null && _d !== void 0 ? _d : [1, 1, 1],
     };
 }
-function renderNodeContent(analyzedComponents, loadedModels, primaryClickHandlers, childNodes) {
+function renderNodeContent(analyzedComponents, loadedModels, primaryClickHandlers, childNodes, basePath = "", componentRuntimeProps) {
     var _a, _b, _c, _d, _e, _f;
     const geometry = analyzedComponents.geometry;
     const models = analyzedComponents.models;
@@ -550,7 +605,7 @@ function renderNodeContent(analyzedComponents, loadedModels, primaryClickHandler
     }
     let content = _jsxs(_Fragment, { children: [primaryContent, contentChildren] });
     for (const { key, View, properties } of analyzedComponents.composition) {
-        content = (_jsx(View, { properties: properties, children: content }, key));
+        content = (_jsx(View, Object.assign({ properties: properties, basePath: basePath }, componentRuntimeProps, { children: content }), key));
     }
     return content;
 }

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

@@ -0,0 +1,28 @@
+import type { Object3D, Texture } from "three";
+import type { GameObject, Prefab } from "./types";
+export declare enum PrefabEditorMode {
+    Edit = "edit",
+    Play = "play"
+}
+export type PrefabNode = Omit<GameObject, "children">;
+export interface Scene {
+    root: Object3D | null;
+    mode: PrefabEditorMode;
+    basePath: string;
+    get(id: string): GameObject | null;
+    getObject(id: string): Object3D | null;
+    getHandle<T = unknown>(id: string, kind: string): T | null;
+    getModel(path: string): Object3D | null;
+    add(node: GameObject, parentId?: string): GameObject;
+    update(id: string, fn: (node: PrefabNode) => PrefabNode): void;
+    replaceNode(id: string, node: GameObject): void;
+    remove(id: string): void;
+    duplicate(id: string): string | null;
+    move(draggedId: string, targetId: string, position: "before" | "inside"): void;
+    replace(prefab: Prefab): void;
+    addModel(path: string, model: Object3D): void;
+    addTexture(path: string, texture: Texture): void;
+    addSound(path: string, sound: AudioBuffer): void;
+}
+export declare const SceneContext: import("react").Context<Scene | null>;
+export declare function useScene(): Scene;

package/dist/tools/prefabeditor/SceneContext.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+export var PrefabEditorMode;
+(function (PrefabEditorMode) {
+    PrefabEditorMode["Edit"] = "edit";
+    PrefabEditorMode["Play"] = "play";
+})(PrefabEditorMode || (PrefabEditorMode = {}));
+export const SceneContext = createContext(null);
+export function useScene() {
+    const scene = useContext(SceneContext);
+    if (!scene) {
+        throw new Error("useScene must be used within a PrefabRoot or PrefabEditor scene provider");
+    }
+    return scene;
+}

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

@@ -1,7 +1,11 @@
 import { type ReactNode } from "react";
 import type { Object3D, Texture } from "three";
 export interface AssetRuntime {
+    registerObject: (id: string, object: Object3D | null) => void;
     registerHandle: (id: string, kind: string, handle: unknown) => void;
+    registerModel: (path: string, model: Object3D) => void;
+    registerTexture: (path: string, texture: Texture) => void;
+    registerSound: (path: string, sound: AudioBuffer) => void;
     getHandle: <T = unknown>(id: string, kind: string) => T | null;
     getModel: (path: string) => Object3D | null;
     getTexture: (path: string) => Texture | null;

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

@@ -1,4 +1,5 @@
 import type { FC } from "react";
+import type { ThreeEvent } from "@react-three/fiber";
 import type { ComponentData, GameObject } from "../types";
 export type AssetRef = {
     type: "model" | "texture" | "sound";
@@ -12,18 +13,32 @@ export interface ComponentViewProps<P = Record<string, unknown>> {
     properties: P;
     /** Children to render for components that wrap the current subtree. */
     children?: React.ReactNode;
+    /** Whether this node is currently rendered in editor mode. */
+    editMode?: boolean;
+    /** Node-level pointer/click handlers for custom components that render their own pickable objects. */
+    nodeInteractionHandlers?: NodeInteractionHandlers;
     /** Current node local position for wrapper components. */
     position?: [number, number, number];
     /** Current node local rotation in radians for wrapper components. */
     rotation?: [number, number, number];
     /** Current node local scale for wrapper components. */
     scale?: [number, number, number];
+    /** Current node world position. Components that create world-space resources should prefer this. */
+    worldPosition?: [number, number, number];
+    /** Public asset URL prefix, such as a Next.js basePath. */
+    basePath?: string;
 }
+export type NodeInteractionHandlers = {
+    onClick?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerDown?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerMove?: (event: ThreeEvent<PointerEvent>) => void;
+    onPointerUp?: (event: ThreeEvent<PointerEvent>) => void;
+};
 export interface Component {
     name: string;
     /** Set when this component occupies a single slot on a node. Use a string to share a slot across component types. */
     disableSiblingComposition?: boolean | string;
-    Editor: FC<{
+    Editor?: FC<{
         node?: GameObject;
         component: ComponentData;
         onUpdate: (newComp: Record<string, unknown>) => void;

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

@@ -5,7 +5,7 @@ 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, useEditorRef } from '../PrefabEditor';
+import { useEditorContext, useEditorRef } from '../EditorContext';
 import { getRepeatAxesFromModelProperties, normalizeRepeatAxes } from '../InstanceProvider';
 import { base, colors, ui } from '../styles';
 import { decomposeModelToPrefabNodes } from '../modelPrefab';

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

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

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

@@ -0,0 +1,72 @@
+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());
+    });
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy, Suspense, useEffect, useState } from 'react';
+import { useEditorRef } from '../EditorContext';
+import { withBasePath } from '../utils';
+import { base, colors } from '../styles';
+import { FieldGroup, Label } from './Input';
+const PrefabRoot = lazy(() => import('../PrefabRoot'));
+function PrefabRefView({ properties, children, basePath = '' }) {
+    var _a;
+    const [loadedPrefab, setLoadedPrefab] = useState(null);
+    const url = (_a = properties.url) !== null && _a !== void 0 ? _a : '';
+    const resolvedUrl = url ? withBasePath(basePath, url) : '';
+    useEffect(() => {
+        if (!resolvedUrl)
+            return;
+        let cancelled = false;
+        fetch(resolvedUrl)
+            .then(r => r.json())
+            .then(data => { if (!cancelled)
+            setLoadedPrefab(data); })
+            .catch(err => console.warn('[PrefabRef] Failed to load:', resolvedUrl, err));
+        return () => { cancelled = true; };
+    }, [resolvedUrl]);
+    return (_jsxs(_Fragment, { children: [loadedPrefab && (_jsx(Suspense, { fallback: null, children: _jsx(PrefabRoot, { data: loadedPrefab, editMode: false, basePath: basePath }) })), children] }));
+}
+function PrefabRefEditor({ node, component, onUpdate, basePath = '', }) {
+    var _a, _b;
+    const url = (_b = (_a = component.properties) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '';
+    const [manifest, setManifest] = useState([]);
+    const [unpacking, setUnpacking] = useState(false);
+    const editor = useEditorRef();
+    useEffect(() => {
+        fetch(withBasePath(basePath, '/prefabs/manifest.json'))
+            .then(r => r.json())
+            .then(data => setManifest(data))
+            .catch(() => setManifest([]));
+    }, []);
+    const handleUnpack = () => __awaiter(this, void 0, void 0, function* () {
+        if (!node || !url)
+            return;
+        setUnpacking(true);
+        try {
+            const prefab = yield fetch(withBasePath(basePath, url)).then(r => r.json());
+            editor.replaceNode(node.id, prefab.root);
+        }
+        catch (err) {
+            console.error('[PrefabRef] Unpack failed:', err);
+        }
+        finally {
+            setUnpacking(false);
+        }
+    });
+    return (_jsxs(FieldGroup, { children: [_jsxs("div", { children: [_jsx(Label, { children: "Prefab URL" }), _jsx("input", { type: "text", style: Object.assign(Object.assign({}, base.input), { width: '100%', boxSizing: 'border-box', fontFamily: 'monospace' }), value: url, onChange: e => onUpdate({ url: e.target.value }), placeholder: "/prefabs/my-prefab.json" }), manifest.length > 0 && (_jsxs("select", { style: Object.assign(Object.assign({}, base.input), { width: '100%', marginTop: 4, background: colors.bgInput, boxSizing: 'border-box' }), value: url, onChange: e => onUpdate({ url: e.target.value }), children: [_jsx("option", { value: "", children: "\u2014 pick from manifest \u2014" }), manifest.map(entry => (_jsx("option", { value: entry, children: entry.replace(/^.*\//, '') }, entry)))] }))] }), _jsx("button", { type: "button", style: Object.assign(Object.assign({}, base.btn), { width: '100%', opacity: unpacking || !url ? 0.5 : 1 }), disabled: unpacking || !url, onClick: handleUnpack, children: unpacking ? 'Unpacking…' : 'Unpack' })] }));
+}
+const PrefabRefComponent = {
+    name: 'PrefabRef',
+    Editor: PrefabRefEditor,
+    View: PrefabRefView,
+    defaultProperties: {
+        url: '',
+    },
+};
+export default PrefabRefComponent;

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ColorField, FieldGroup, NumberField, SelectField, StringField } from "./Input";
 import { Text } from 'three-text/three/react';
-import { useRef, useState, useCallback } from 'react';
-// Initialize HarfBuzz path for font shaping
-Text.setHarfBuzzPath('/fonts/hb.wasm');
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { withBasePath } from "../utils";
 function TextComponentEditor({ component, onUpdate, }) {
     return (_jsxs(FieldGroup, { children: [_jsx(StringField, { name: "text", label: "Text", values: component.properties, onChange: onUpdate, placeholder: "Enter text..." }), _jsx(ColorField, { name: "color", label: "Color", values: component.properties, onChange: onUpdate }), _jsx(StringField, { name: "font", label: "Font", values: component.properties, onChange: onUpdate, placeholder: "/fonts/NotoSans-Regular.ttf" }), _jsx(NumberField, { name: "size", label: "Size", values: component.properties, onChange: onUpdate, min: 0.01, step: 0.1 }), _jsx(NumberField, { name: "depth", label: "Depth", values: component.properties, onChange: onUpdate, min: 0, step: 0.1 }), _jsx(NumberField, { name: "width", label: "Width", values: component.properties, onChange: onUpdate, min: 0, step: 0.5 }), _jsx(SelectField, { name: "align", label: "Align", values: component.properties, onChange: onUpdate, options: [
                     { value: 'left', label: 'Left' },
@@ -11,11 +10,15 @@ function TextComponentEditor({ component, onUpdate, }) {
                     { value: 'right', label: 'Right' },
                 ] })] }));
 }
-function TextComponentView({ properties, children }) {
+function TextComponentView({ properties, children, basePath = "" }) {
     const { text = '', font, size, depth, width, align, color } = properties;
     const textContent = String(text || '');
+    const resolvedFont = font ? withBasePath(basePath, font) : font;
     const meshRef = useRef(null);
     const [offset, setOffset] = useState([0, 0, 0]);
+    useEffect(() => {
+        Text.setHarfBuzzPath(withBasePath(basePath, '/fonts/hb.wasm'));
+    }, [basePath]);
     const handleLoad = useCallback((_geometry, info) => {
         if (info === null || info === void 0 ? void 0 : info.planeBounds) {
             const bounds = info.planeBounds;
@@ -37,7 +40,7 @@ function TextComponentView({ properties, children }) {
     }, [align]);
     if (!textContent)
         return null;
-    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] }));
+    return (_jsxs("group", { position: offset, children: [_jsx(Text, { ref: meshRef, font: resolvedFont, size: size, depth: depth, layout: { align, width }, color: color, onLoad: handleLoad, children: textContent }), children] }));
 }
 const TextComponent = {
     name: 'Text',

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Label, Vector3Input } from "./Input";
-import { useEditorContext } from "../PrefabEditor";
+import { useEditorContext } from "../EditorContext";
 import { colors } from "../styles";
 const buttonStyle = {
     padding: '2px 6px',

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

@@ -1 +1,2 @@
 export declare const builtinComponents: import("./ComponentRegistry").Component[];
+export declare function registerBuiltinComponents(): void;