react-three-game 0.0.9 → 0.0.11

package/README.md

@@ -40,7 +40,7 @@ Add the library path to your CSS entry point using the `@source` directive:
 
 ```css
 @import "tailwindcss";
-@source "../node_modules/react-three-game/src";
+@source "../../node_modules/react-three-game/dist/**/*.{js,ts,jsx,tsx}";
 ```
 
 ### Tailwind v3
@@ -51,7 +51,7 @@ Add the library path to your `tailwind.config.js`:
 module.exports = {
   content: [
     // ...
-    "./node_modules/react-three-game/src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/react-three-game/dist/**/*.{js,ts,jsx,tsx}",
   ],
   // ...
 }

package/dist/index.d.ts

@@ -2,5 +2,5 @@ export { default as GameCanvas } from './shared/GameCanvas';
 export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
 export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
-export { default as AssetViewerPage, TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
+export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
 export type { Prefab, GameObject } from './tools/prefabeditor/types';

package/dist/index.js

@@ -3,4 +3,4 @@ export { default as GameCanvas } from './shared/GameCanvas';
 export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
 export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
-export { default as AssetViewerPage, TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
+export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';

package/dist/tools/assetviewer/page.d.ts

@@ -1,6 +1,3 @@
-export default function AssetViewerPage({ basePath }?: {
-    basePath?: string;
-}): import("react/jsx-runtime").JSX.Element;
 interface TextureListViewerProps {
     files: string[];
     selected?: string;

package/dist/tools/assetviewer/page.js

@@ -49,29 +49,6 @@ function useInView() {
     }, []);
     return { ref, isInView };
 }
-export default function AssetViewerPage({ basePath = "" } = {}) {
-    const [textures, setTextures] = useState([]);
-    const [models, setModels] = useState([]);
-    const [sounds, setSounds] = useState([]);
-    const [loading, setLoading] = useState(true);
-    useEffect(() => {
-        const base = basePath ? `${basePath}/` : '';
-        Promise.all([
-            fetch(`/${base}textures/manifest.json`).then(r => r.json()),
-            fetch(`/${base}models/manifest.json`).then(r => r.json()),
-            fetch(`/${base}sound/manifest.json`).then(r => r.json()).catch(() => [])
-        ]).then(([textureData, modelData, soundData]) => {
-            setTextures(textureData);
-            setModels(modelData);
-            setSounds(soundData);
-            setLoading(false);
-        });
-    }, [basePath]);
-    if (loading) {
-        return _jsx("div", { className: "p-4 text-gray-300", children: "Loading manifests..." });
-    }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "p-2 text-gray-300 overflow-y-auto h-screen text-sm", children: [_jsx("h1", { className: "text-lg mb-2 font-bold", children: "Asset Viewer" }), _jsxs("h2", { className: "text-sm mt-4 mb-1 font-semibold", children: ["Textures (", textures.length, ")"] }), _jsx(TextureListViewer, { files: textures, basePath: basePath, onSelect: (file) => console.log('Selected texture:', file) }), _jsxs("h2", { className: "text-sm mt-4 mb-1 font-semibold", children: ["Models (", models.length, ")"] }), _jsx(ModelListViewer, { files: models, basePath: basePath, onSelect: (file) => console.log('Selected model:', file) }), sounds.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("h2", { className: "text-sm mt-4 mb-1 font-semibold", children: ["Sounds (", sounds.length, ")"] }), _jsx(SoundListViewer, { files: sounds, basePath: basePath, onSelect: (file) => console.log('Selected sound:', file) })] }))] }), _jsx(SharedCanvas, {})] }));
-}
 function AssetListViewer({ files, selected, onSelect, renderCard }) {
     const [currentPath, setCurrentPath] = useState('');
     const [showPicker, setShowPicker] = useState(false);

package/dist/tools/dragdrop/modelLoader.d.ts

@@ -4,4 +4,4 @@ export type ModelLoadResult = {
     error?: any;
 };
 export type ProgressCallback = (filename: string, loaded: number, total: number) => void;
-export declare function loadModel(filename: string, resourcePath?: string, onProgress?: ProgressCallback): Promise<ModelLoadResult>;
+export declare function loadModel(filename: string, onProgress?: ProgressCallback): Promise<ModelLoadResult>;

package/dist/tools/dragdrop/modelLoader.js

@@ -14,11 +14,11 @@ dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
 const gltfLoader = new GLTFLoader();
 gltfLoader.setDRACOLoader(dracoLoader);
 const fbxLoader = new FBXLoader();
-export function loadModel(filename_1) {
-    return __awaiter(this, arguments, void 0, function* (filename, resourcePath = "", onProgress) {
+export function loadModel(filename, onProgress) {
+    return __awaiter(this, void 0, void 0, function* () {
         try {
-            // Construct full path - handle empty resourcePath to avoid double slashes
-            const fullPath = resourcePath ? `${resourcePath}/${filename}` : filename;
+            // Use filename directly (should already include leading /)
+            const fullPath = filename;
             if (filename.endsWith('.glb') || filename.endsWith('.gltf')) {
                 return new Promise((resolve) => {
                     gltfLoader.load(fullPath, (gltf) => resolve({ success: true, model: gltf.scene }), (progressEvent) => {

package/dist/tools/prefabeditor/EditorTree.js

@@ -136,7 +136,7 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         const hasChildren = node.children && node.children.length > 0;
         return (_jsxs("div", { className: "select-none", children: [_jsxs("div", { className: `flex items-center py-0.5 px-1 cursor-pointer border-b border-cyan-500/10 ${isSelected ? 'bg-cyan-500/30 hover:bg-cyan-500/40 border-cyan-400/30' : 'hover:bg-cyan-500/10'}`, style: { paddingLeft: `${depth * 8 + 4}px` }, onClick: (e) => { e.stopPropagation(); setSelectedId(node.id); }, onContextMenu: (e) => handleContextMenu(e, node.id), draggable: node.id !== prefabData.root.id, onDragStart: (e) => handleDragStart(e, node.id), onDragOver: (e) => handleDragOver(e, node.id), onDrop: (e) => handleDrop(e, node.id), children: [_jsx("span", { className: `mr-0.5 w-3 text-center text-cyan-400/50 hover:text-cyan-400 cursor-pointer text-[8px] ${hasChildren ? '' : 'invisible'}`, onClick: (e) => hasChildren && toggleCollapse(e, node.id), children: isCollapsed ? '▶' : '▼' }), _jsx("span", { className: "text-[10px] truncate font-mono text-cyan-300", children: node.id })] }), !isCollapsed && node.children && (_jsx("div", { children: node.children.map(child => renderNode(child, depth + 1)) }))] }, node.id));
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-black/70 backdrop-blur-sm text-white border border-cyan-500/30 max-h-[85vh] overflow-y-auto flex flex-col", style: { width: isTreeCollapsed ? 'auto' : '14rem' }, onClick: closeContextMenu, children: [_jsxs("div", { className: "px-1.5 py-1 font-mono text-[10px] bg-cyan-500/10 border-b border-cyan-500/30 sticky top-0 uppercase tracking-wider text-cyan-400/80 cursor-pointer hover:bg-cyan-500/20 flex items-center justify-between", onClick: (e) => { e.stopPropagation(); setIsTreeCollapsed(!isTreeCollapsed); }, children: [_jsx("span", { children: "Prefab Graph" }), _jsx("span", { className: "text-[8px]", children: isTreeCollapsed ? '▶' : '◀' })] }), !isTreeCollapsed && (_jsx("div", { className: "flex-1 py-0.5", children: renderNode(prefabData.root) }))] }), contextMenu && (_jsxs("div", { className: "fixed bg-black/90 backdrop-blur-sm border border-cyan-500/40 z-50 min-w-[100px]", style: { top: contextMenu.y, left: contextMenu.x }, onClick: (e) => e.stopPropagation(), children: [_jsx("button", { className: "w-full text-left px-2 py-1 hover:bg-cyan-500/20 text-[10px] text-cyan-300 font-mono border-b border-cyan-500/20", onClick: () => handleAddChild(contextMenu.nodeId), children: "Add Child" }), contextMenu.nodeId !== prefabData.root.id && (_jsxs(_Fragment, { children: [_jsx("button", { className: "w-full text-left px-2 py-1 hover:bg-cyan-500/20 text-[10px] text-cyan-300 font-mono border-b border-cyan-500/20", onClick: () => handleDuplicate(contextMenu.nodeId), children: "Duplicate" }), _jsx("button", { className: "w-full text-left px-2 py-1 hover:bg-red-500/20 text-[10px] text-red-400 font-mono", onClick: () => handleDelete(contextMenu.nodeId), children: "Delete" })] }))] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-black/70 backdrop-blur-sm text-white border border-cyan-500/30 max-h-[85vh] overflow-y-auto flex flex-col", style: { width: isTreeCollapsed ? 'auto' : '14rem' }, onClick: closeContextMenu, children: [_jsxs("div", { className: "px-1.5 py-1 font-mono text-[10px] bg-cyan-500/10 border-b border-cyan-500/30 sticky top-0 uppercase tracking-wider text-cyan-400/80 cursor-pointer hover:bg-cyan-500/20 flex items-center justify-between", onClick: (e) => { e.stopPropagation(); setIsTreeCollapsed(!isTreeCollapsed); }, children: [_jsx("span", { children: "Prefab Graph" }), _jsx("span", { className: "text-[8px]", children: isTreeCollapsed ? '▶' : '◀' })] }), !isTreeCollapsed && (_jsx("div", { className: "flex-1 py-0.5", children: renderNode(prefabData.root) }))] }), contextMenu && (_jsxs("div", { className: "fixed bg-black/90 backdrop-blur-sm border border-cyan-500/40 z-50 min-w-[100px]", style: { top: contextMenu.y, left: contextMenu.x }, onClick: (e) => e.stopPropagation(), children: [_jsx("button", { className: "w-full text-left px-2 py-1 hover:bg-cyan-500/20 text-[10px] text-cyan-300 font-mono border-b border-cyan-500/20", onClick: () => handleAddChild(contextMenu.nodeId), onPointerLeave: closeContextMenu, children: "Add Child" }), contextMenu.nodeId !== prefabData.root.id && (_jsxs(_Fragment, { children: [_jsx("button", { className: "w-full text-left px-2 py-1 hover:bg-cyan-500/20 text-[10px] text-cyan-300 font-mono border-b border-cyan-500/20", onClick: () => handleDuplicate(contextMenu.nodeId), children: "Duplicate" }), _jsx("button", { className: "w-full text-left px-2 py-1 hover:bg-red-500/20 text-[10px] text-red-400 font-mono", onClick: () => handleDelete(contextMenu.nodeId), children: "Delete" })] }))] }))] }));
 }
 // --- Helpers ---
 function findNode(root, id) {

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

@@ -1,7 +1,8 @@
 import { Prefab } from "./types";
-declare const PrefabEditor: ({ basePath, initialPrefab, children }: {
+declare const PrefabEditor: ({ basePath, initialPrefab, onPrefabChange, children }: {
     basePath?: string;
     initialPrefab?: Prefab;
+    onPrefabChange?: (prefab: Prefab) => void;
     children?: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export default PrefabEditor;

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -10,11 +10,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import GameCanvas from "../../shared/GameCanvas";
-import { useState, useRef, } from "react";
+import { useState, useRef, useEffect } from "react";
 import PrefabRoot from "./PrefabRoot";
 import { Physics } from "@react-three/rapier";
 import EditorUI from "./EditorUI";
-const PrefabEditor = ({ basePath, initialPrefab, children }) => {
+const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }) => {
     const [editMode, setEditMode] = useState(true);
     const [loadedPrefab, setLoadedPrefab] = useState(initialPrefab !== null && initialPrefab !== void 0 ? initialPrefab : {
         "id": "prefab-default",
@@ -38,13 +38,25 @@ const PrefabEditor = ({ basePath, initialPrefab, children }) => {
     const [selectedId, setSelectedId] = useState(null);
     const [transformMode, setTransformMode] = useState("translate");
     const prefabRef = useRef(null);
+    // Sync internal state with external initialPrefab prop
+    useEffect(() => {
+        if (initialPrefab) {
+            setLoadedPrefab(initialPrefab);
+        }
+    }, [initialPrefab]);
+    // Wrapper to update prefab and notify parent
+    const updatePrefab = (newPrefab) => {
+        setLoadedPrefab(newPrefab);
+        const resolved = typeof newPrefab === 'function' ? newPrefab(loadedPrefab) : newPrefab;
+        onPrefabChange === null || onPrefabChange === void 0 ? void 0 : onPrefabChange(resolved);
+    };
     return _jsxs(_Fragment, { children: [_jsx(GameCanvas, { children: _jsxs(Physics, { paused: editMode, children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { data: loadedPrefab, ref: prefabRef, 
                             // props for edit mode
-                            editMode: editMode, onPrefabChange: setLoadedPrefab, selectedId: selectedId, onSelect: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath }), children] }) }), _jsxs("div", { style: { position: "absolute", top: "0.5rem", left: "50%", transform: "translateX(-50%)" }, className: "bg-black/70 backdrop-blur-sm border border-cyan-500/30 px-2 py-1 flex items-center gap-1", children: [_jsx("button", { className: "px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30", onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }), _jsx("span", { className: "text-cyan-500/30 text-[10px]", children: "|" }), _jsx("button", { className: "px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30", onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                            editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath }), children] }) }), _jsxs("div", { style: { position: "absolute", top: "0.5rem", left: "50%", transform: "translateX(-50%)" }, className: "bg-black/70 backdrop-blur-sm border border-cyan-500/30 px-2 py-1 flex items-center gap-1", children: [_jsx("button", { className: "px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30", onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }), _jsx("span", { className: "text-cyan-500/30 text-[10px]", children: "|" }), _jsx("button", { className: "px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30", onClick: () => __awaiter(void 0, void 0, void 0, function* () {
                             const prefab = yield loadJson();
                             if (prefab)
                                 setLoadedPrefab(prefab);
-                        }), children: "\uD83D\uDCE5" }), _jsx("button", { className: "px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30", onClick: () => saveJson(loadedPrefab, "prefab"), children: "\uD83D\uDCBE" })] }), editMode && _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: setLoadedPrefab, selectedId: selectedId, setSelectedId: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath })] });
+                        }), children: "\uD83D\uDCE5" }), _jsx("button", { className: "px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30", onClick: () => saveJson(loadedPrefab, "prefab"), children: "\uD83D\uDCBE" })] }), editMode && _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath })] });
 };
 const saveJson = (data, filename) => {
     const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -108,7 +108,9 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
             for (const filename of modelsToLoad) {
                 if (!loadedModels[filename] && !loadingRefs.current.has(filename)) {
                     loadingRefs.current.add(filename);
-                    const result = yield loadModel(filename, basePath);
+                    // Load model directly from public root, prepend "/" if not present
+                    const modelPath = filename.startsWith('/') ? filename : `/${filename}`;
+                    const result = yield loadModel(modelPath);
                     if (result.success && result.model) {
                         setLoadedModels(prev => (Object.assign(Object.assign({}, prev), { [filename]: result.model })));
                     }
@@ -118,7 +120,8 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
             for (const filename of texturesToLoad) {
                 if (!loadedTextures[filename] && !loadingRefs.current.has(filename)) {
                     loadingRefs.current.add(filename);
-                    const texturePath = basePath ? `${basePath}/${filename}` : filename;
+                    // Load texture directly from public root, prepend "/" if not present
+                    const texturePath = filename.startsWith('/') ? filename : `/${filename}`;
                     textureLoader.load(texturePath, (texture) => {
                         texture.colorSpace = SRGBColorSpace;
                         setLoadedTextures(prev => (Object.assign(Object.assign({}, prev), { [filename]: texture })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/index.ts

@@ -4,7 +4,6 @@ export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
 export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
 export {
-  default as AssetViewerPage,
   TextureListViewer,
   ModelListViewer,
   SoundListViewer,

package/src/tools/assetviewer/page.tsx

@@ -3,7 +3,6 @@
 import { Canvas, useLoader } from "@react-three/fiber";
 import { OrbitControls, useGLTF, useFBX, Stage, View, PerspectiveCamera } from "@react-three/drei";
 import { Suspense, useEffect, useState, useRef } from "react";
-import * as React from "react";
 import { TextureLoader } from "three";
 
 // view models and textures in manifest, onselect callback
@@ -74,53 +73,6 @@ function useInView() {
     return { ref, isInView };
 }
 
-export default function AssetViewerPage({ basePath = "" }: { basePath?: string } = {}) {
-    const [textures, setTextures] = useState<string[]>([]);
-    const [models, setModels] = useState<string[]>([]);
-    const [sounds, setSounds] = useState<string[]>([]);
-    const [loading, setLoading] = useState(true);
-
-    useEffect(() => {
-        const base = basePath ? `${basePath}/` : '';
-        Promise.all([
-            fetch(`/${base}textures/manifest.json`).then(r => r.json()),
-            fetch(`/${base}models/manifest.json`).then(r => r.json()),
-            fetch(`/${base}sound/manifest.json`).then(r => r.json()).catch(() => [])
-        ]).then(([textureData, modelData, soundData]) => {
-            setTextures(textureData);
-            setModels(modelData);
-            setSounds(soundData);
-            setLoading(false);
-        });
-    }, [basePath]);
-
-    if (loading) {
-        return <div className="p-4 text-gray-300">Loading manifests...</div>;
-    }
-
-    return (
-        <>
-            <div className="p-2 text-gray-300 overflow-y-auto h-screen text-sm">
-                <h1 className="text-lg mb-2 font-bold">Asset Viewer</h1>
-
-                <h2 className="text-sm mt-4 mb-1 font-semibold">Textures ({textures.length})</h2>
-                <TextureListViewer files={textures} basePath={basePath} onSelect={(file) => console.log('Selected texture:', file)} />
-
-                <h2 className="text-sm mt-4 mb-1 font-semibold">Models ({models.length})</h2>
-                <ModelListViewer files={models} basePath={basePath} onSelect={(file) => console.log('Selected model:', file)} />
-
-                {sounds.length > 0 && (
-                    <>
-                        <h2 className="text-sm mt-4 mb-1 font-semibold">Sounds ({sounds.length})</h2>
-                        <SoundListViewer files={sounds} basePath={basePath} onSelect={(file) => console.log('Selected sound:', file)} />
-                    </>
-                )}
-            </div>
-            <SharedCanvas />
-        </>
-    );
-}
-
 interface AssetListViewerProps {
     files: string[];
     selected?: string;

package/src/tools/dragdrop/modelLoader.ts

@@ -19,12 +19,11 @@ const fbxLoader = new FBXLoader();
 
 export async function loadModel(
     filename: string,
-    resourcePath: string = "",
     onProgress?: ProgressCallback
 ): Promise<ModelLoadResult> {
     try {
-        // Construct full path - handle empty resourcePath to avoid double slashes
-        const fullPath = resourcePath ? `${resourcePath}/${filename}` : filename;
+        // Use filename directly (should already include leading /)
+        const fullPath = filename;
 
         if (filename.endsWith('.glb') || filename.endsWith('.gltf')) {
             return new Promise((resolve) => {

package/src/tools/prefabeditor/EditorTree.tsx

@@ -210,6 +210,7 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
                     <button
                         className="w-full text-left px-2 py-1 hover:bg-cyan-500/20 text-[10px] text-cyan-300 font-mono border-b border-cyan-500/20"
                         onClick={() => handleAddChild(contextMenu.nodeId)}
+                        onPointerLeave={closeContextMenu}
                     >
                         Add Child
                     </button>

package/src/tools/prefabeditor/PrefabEditor.tsx

@@ -1,14 +1,14 @@
 "use client";
 
 import GameCanvas from "../../shared/GameCanvas";
-import { useState, useRef, } from "react";
+import { useState, useRef, useEffect } from "react";
 import { Group, } from "three";
 import { Prefab, } from "./types";
 import PrefabRoot from "./PrefabRoot";
 import { Physics } from "@react-three/rapier";
 import EditorUI from "./EditorUI";
 
-const PrefabEditor = ({ basePath, initialPrefab, children }: { basePath?: string, initialPrefab?: Prefab, children?: React.ReactNode }) => {
+const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }: { basePath?: string, initialPrefab?: Prefab, onPrefabChange?: (prefab: Prefab) => void, children?: React.ReactNode }) => {
     const [editMode, setEditMode] = useState(true);
     const [loadedPrefab, setLoadedPrefab] = useState<Prefab>(initialPrefab ?? {
         "id": "prefab-default",
@@ -33,6 +33,20 @@ const PrefabEditor = ({ basePath, initialPrefab, children }: { basePath?: string
     const [transformMode, setTransformMode] = useState<"translate" | "rotate" | "scale">("translate");
     const prefabRef = useRef<Group>(null);
 
+    // Sync internal state with external initialPrefab prop
+    useEffect(() => {
+        if (initialPrefab) {
+            setLoadedPrefab(initialPrefab);
+        }
+    }, [initialPrefab]);
+
+    // Wrapper to update prefab and notify parent
+    const updatePrefab = (newPrefab: Prefab | ((prev: Prefab) => Prefab)) => {
+        setLoadedPrefab(newPrefab);
+        const resolved = typeof newPrefab === 'function' ? newPrefab(loadedPrefab) : newPrefab;
+        onPrefabChange?.(resolved);
+    };
+
     return <>
         <GameCanvas>
             <Physics paused={editMode}>
@@ -44,7 +58,7 @@ const PrefabEditor = ({ basePath, initialPrefab, children }: { basePath?: string
 
                     // props for edit mode
                     editMode={editMode}
-                    onPrefabChange={setLoadedPrefab}
+                    onPrefabChange={updatePrefab}
                     selectedId={selectedId}
                     onSelect={setSelectedId}
                     transformMode={transformMode}
@@ -81,7 +95,7 @@ const PrefabEditor = ({ basePath, initialPrefab, children }: { basePath?: string
         </div>
         {editMode && <EditorUI
             prefabData={loadedPrefab}
-            setPrefabData={setLoadedPrefab}
+            setPrefabData={updatePrefab}
             selectedId={selectedId}
             setSelectedId={setSelectedId}
             transformMode={transformMode}

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -133,7 +133,9 @@ export const PrefabRoot = forwardRef<Group, {
             for (const filename of modelsToLoad) {
                 if (!loadedModels[filename] && !loadingRefs.current.has(filename)) {
                     loadingRefs.current.add(filename);
-                    const result = await loadModel(filename, basePath);
+                    // Load model directly from public root, prepend "/" if not present
+                    const modelPath = filename.startsWith('/') ? filename : `/${filename}`;
+                    const result = await loadModel(modelPath);
                     if (result.success && result.model) {
                         setLoadedModels(prev => ({ ...prev, [filename]: result.model }));
                     }
@@ -144,7 +146,8 @@ export const PrefabRoot = forwardRef<Group, {
             for (const filename of texturesToLoad) {
                 if (!loadedTextures[filename] && !loadingRefs.current.has(filename)) {
                     loadingRefs.current.add(filename);
-                    const texturePath = basePath ? `${basePath}/${filename}` : filename;
+                    // Load texture directly from public root, prepend "/" if not present
+                    const texturePath = filename.startsWith('/') ? filename : `/${filename}`;
                     textureLoader.load(texturePath, (texture) => {
                         texture.colorSpace = SRGBColorSpace;
                         setLoadedTextures(prev => ({ ...prev, [filename]: texture }));