react-three-game 0.0.4 → 0.0.6

package/dist/index.d.ts

@@ -2,3 +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 type { Prefab, GameObject } from './tools/prefabeditor/types';

package/dist/index.js

@@ -1,4 +1,6 @@
+// Components
 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';

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

@@ -1,21 +1,26 @@
-export default function AssetViewerPage(): import("react/jsx-runtime").JSX.Element;
+export default function AssetViewerPage({ basePath }?: {
+    basePath?: string;
+}): import("react/jsx-runtime").JSX.Element;
 interface TextureListViewerProps {
     files: string[];
     selected?: string;
     onSelect: (file: string) => void;
+    basePath?: string;
 }
-export declare function TextureListViewer({ files, selected, onSelect }: TextureListViewerProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextureListViewer({ files, selected, onSelect, basePath }: TextureListViewerProps): import("react/jsx-runtime").JSX.Element;
 interface ModelListViewerProps {
     files: string[];
     selected?: string;
     onSelect: (file: string) => void;
+    basePath?: string;
 }
-export declare function ModelListViewer({ files, selected, onSelect }: ModelListViewerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ModelListViewer({ files, selected, onSelect, basePath }: ModelListViewerProps): import("react/jsx-runtime").JSX.Element;
 interface SoundListViewerProps {
     files: string[];
     selected?: string;
     onSelect: (file: string) => void;
+    basePath?: string;
 }
-export declare function SoundListViewer({ files, selected, onSelect }: SoundListViewerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SoundListViewer({ files, selected, onSelect, basePath }: SoundListViewerProps): import("react/jsx-runtime").JSX.Element;
 export declare function SharedCanvas(): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/tools/assetviewer/page.js

@@ -49,27 +49,28 @@ function useInView() {
     }, []);
     return { ref, isInView };
 }
-export default function AssetViewerPage() {
+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('/textures/manifest.json').then(r => r.json()),
-            fetch('/models/manifest.json').then(r => r.json()),
-            fetch('/sound/manifest.json').then(r => r.json()).catch(() => [])
+            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, 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, 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, onSelect: (file) => console.log('Selected sound:', file) })] }))] }), _jsx(SharedCanvas, {})] }));
+    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('');
@@ -89,17 +90,18 @@ function AssetListViewer({ files, selected, onSelect, renderCard }) {
                                 setShowPicker(false);
                         }) }, file)))] })] }));
 }
-export function TextureListViewer({ files, selected, onSelect }) {
-    return (_jsxs(_Fragment, { children: [_jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(TextureCard, { file: file, onSelect: onSelectHandler })) }), _jsx(SharedCanvas, {})] }));
+export function TextureListViewer({ files, selected, onSelect, basePath = "" }) {
+    return (_jsxs(_Fragment, { children: [_jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(TextureCard, { file: file, basePath: basePath, onSelect: onSelectHandler })) }), _jsx(SharedCanvas, {})] }));
 }
-function TextureCard({ file, onSelect }) {
+function TextureCard({ file, onSelect, basePath = "" }) {
     const [error, setError] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
     const { ref, isInView } = useInView();
+    const fullPath = basePath ? `/${basePath}${file}` : file;
     if (error) {
         return (_jsx("div", { ref: ref, className: "aspect-square bg-gray-700 cursor-pointer hover:bg-gray-600 flex items-center justify-center", onClick: () => onSelect(file), children: _jsx("div", { className: "text-red-400 text-xs", children: "\u2717" }) }));
     }
-    return (_jsxs("div", { ref: ref, className: "aspect-square bg-gray-800 cursor-pointer hover:bg-gray-700 flex flex-col", onClick: () => onSelect(file), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("div", { className: "flex-1 relative", children: isInView ? (_jsxs(View, { className: "w-full h-full", children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 0, 2.5], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx("ambientLight", { intensity: 0.8 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(TextureSphere, { url: file, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false, enablePan: false, autoRotate: isHovered, autoRotateSpeed: 2 })] })] })) : null }), _jsx("div", { className: "bg-black/60 text-[10px] px-1 truncate text-center", children: file.split('/').pop() })] }));
+    return (_jsxs("div", { ref: ref, className: "aspect-square bg-gray-800 cursor-pointer hover:bg-gray-700 flex flex-col", onClick: () => onSelect(file), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("div", { className: "flex-1 relative", children: isInView ? (_jsxs(View, { className: "w-full h-full", children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 0, 2.5], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx("ambientLight", { intensity: 0.8 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(TextureSphere, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false, enablePan: false, autoRotate: isHovered, autoRotateSpeed: 2 })] })] })) : null }), _jsx("div", { className: "bg-black/60 text-[10px] px-1 truncate text-center", children: file.split('/').pop() })] }));
 }
 function TextureSphere({ url, onError }) {
     const texture = useLoader(TextureLoader, url, undefined, (error) => {
@@ -108,16 +110,17 @@ function TextureSphere({ url, onError }) {
     });
     return (_jsxs("mesh", { position: [0, 0, 0], children: [_jsx("sphereGeometry", { args: [1, 32, 32] }), _jsx("meshStandardMaterial", { map: texture })] }));
 }
-export function ModelListViewer({ files, selected, onSelect }) {
-    return (_jsxs(_Fragment, { children: [_jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(ModelCard, { file: file, onSelect: onSelectHandler })) }), _jsx(SharedCanvas, {})] }));
+export function ModelListViewer({ files, selected, onSelect, basePath = "" }) {
+    return (_jsxs(_Fragment, { children: [_jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(ModelCard, { file: file, basePath: basePath, onSelect: onSelectHandler })) }), _jsx(SharedCanvas, {})] }));
 }
-function ModelCard({ file, onSelect }) {
+function ModelCard({ file, onSelect, basePath = "" }) {
     const [error, setError] = useState(false);
     const { ref, isInView } = useInView();
+    const fullPath = basePath ? `/${basePath}${file}` : file;
     if (error) {
         return (_jsx("div", { ref: ref, className: "aspect-square bg-gray-700 cursor-pointer hover:bg-gray-600 flex items-center justify-center", onClick: () => onSelect(file), children: _jsx("div", { className: "text-red-400 text-xs", children: "\u2717" }) }));
     }
-    return (_jsxs("div", { ref: ref, className: "aspect-square bg-gray-900 cursor-pointer hover:bg-gray-800 flex flex-col", onClick: () => onSelect(file), children: [_jsx("div", { className: "flex-1 relative", children: isInView ? (_jsxs(View, { className: "w-full h-full", children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 1, 3], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx(Stage, { intensity: 0.5, environment: "city", children: _jsx(ModelPreview, { url: file, onError: () => setError(true) }) }), _jsx(OrbitControls, { enableZoom: false })] })] })) : null }), _jsx("div", { className: "bg-black/60 text-[10px] px-1 truncate text-center", children: file.split('/').pop() })] }));
+    return (_jsxs("div", { ref: ref, className: "aspect-square bg-gray-900 cursor-pointer hover:bg-gray-800 flex flex-col", onClick: () => onSelect(file), children: [_jsx("div", { className: "flex-1 relative", children: isInView ? (_jsxs(View, { className: "w-full h-full", children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 1, 3], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx(Stage, { intensity: 0.5, environment: "city", children: _jsx(ModelPreview, { url: fullPath, onError: () => setError(true) }) }), _jsx(OrbitControls, { enableZoom: false })] })] })) : null }), _jsx("div", { className: "bg-black/60 text-[10px] px-1 truncate text-center", children: file.split('/').pop() })] }));
 }
 function ModelPreview({ url, onError }) {
     const isFbx = url.toLowerCase().endsWith('.fbx');
@@ -133,11 +136,12 @@ function FBXModel({ url, onError }) {
     const fbx = useFBX(url);
     return _jsx("primitive", { object: fbx, scale: 0.01 });
 }
-export function SoundListViewer({ files, selected, onSelect }) {
-    return (_jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(SoundCard, { file: file, onSelect: onSelectHandler })) }));
+export function SoundListViewer({ files, selected, onSelect, basePath = "" }) {
+    return (_jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(SoundCard, { file: file, basePath: basePath, onSelect: onSelectHandler })) }));
 }
-function SoundCard({ file, onSelect }) {
+function SoundCard({ file, onSelect, basePath = "" }) {
     const fileName = file.split('/').pop() || '';
+    const fullPath = basePath ? `/${basePath}${file}` : file;
     return (_jsxs("div", { onClick: () => onSelect(file), className: "aspect-square bg-gray-700 cursor-pointer hover:bg-gray-600 flex flex-col items-center justify-center", children: [_jsx("div", { className: "text-2xl", children: "\uD83D\uDD0A" }), _jsx("div", { className: "text-[10px] px-1 mt-1 truncate text-center w-full", children: fileName })] }));
 }
 // Shared Canvas Component - can be used independently in any viewer

package/dist/tools/dragdrop/modelLoader.js

@@ -17,9 +17,8 @@ const fbxLoader = new FBXLoader();
 export function loadModel(filename_1) {
     return __awaiter(this, arguments, void 0, function* (filename, resourcePath = "", onProgress) {
         try {
-            // Construct full path - always prepend resourcePath if provided (even if empty string)
-            // This allows loading from root with resourcePath=""
-            const fullPath = `${resourcePath}/${filename}`;
+            // Construct full path - handle empty resourcePath to avoid double slashes
+            const fullPath = resourcePath ? `${resourcePath}/${filename}` : 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/EditorUI.d.ts

@@ -1,11 +1,12 @@
 import { Dispatch, SetStateAction } from 'react';
 import { Prefab } from "./types";
-declare function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transformMode, setTransformMode }: {
+declare function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transformMode, setTransformMode, basePath }: {
     prefabData?: Prefab;
     setPrefabData?: Dispatch<SetStateAction<Prefab>>;
     selectedId: string | null;
     setSelectedId: Dispatch<SetStateAction<string | null>>;
     transformMode: "translate" | "rotate" | "scale";
     setTransformMode: (m: "translate" | "rotate" | "scale") => void;
+    basePath?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export default EditorUI;

package/dist/tools/prefabeditor/EditorUI.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect } from 'react';
 import EditorTree from './EditorTree';
 import { getAllComponents } from './components/ComponentRegistry';
-function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transformMode, setTransformMode }) {
+function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transformMode, setTransformMode, basePath }) {
     const [isInspectorCollapsed, setIsInspectorCollapsed] = useState(false);
     const updateNode = (updater) => {
         if (!prefabData || !setPrefabData || !selectedId)
@@ -24,9 +24,9 @@ function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transf
     };
     const selectedNode = selectedId && prefabData ? findNode(prefabData.root, selectedId) : null;
     // if (!selectedNode) return null;
-    return _jsxs(_Fragment, { children: [_jsxs("div", { style: { position: 'absolute', top: "0.5rem", right: "0.5rem", zIndex: 20, backgroundColor: "rgba(0,0,0,0.7)", backdropFilter: "blur(4px)", color: "white", border: "1px solid rgba(0,255,255,0.3)" }, 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: () => setIsInspectorCollapsed(!isInspectorCollapsed), children: [_jsx("span", { children: "Inspector" }), _jsx("span", { className: "text-[8px]", children: isInspectorCollapsed ? '◀' : '▶' })] }), !isInspectorCollapsed && selectedNode && (_jsx(NodeInspector, { node: selectedNode, updateNode: updateNode, deleteNode: deleteNode, transformMode: transformMode, setTransformMode: setTransformMode }))] }), _jsx("div", { style: { position: 'absolute', top: "0.5rem", left: "0.5rem", zIndex: 20 }, children: _jsx(EditorTree, { prefabData: prefabData, setPrefabData: setPrefabData, selectedId: selectedId, setSelectedId: setSelectedId }) })] });
+    return _jsxs(_Fragment, { children: [_jsxs("div", { style: { position: 'absolute', top: "0.5rem", right: "0.5rem", zIndex: 20, backgroundColor: "rgba(0,0,0,0.7)", backdropFilter: "blur(4px)", color: "white", border: "1px solid rgba(0,255,255,0.3)" }, 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: () => setIsInspectorCollapsed(!isInspectorCollapsed), children: [_jsx("span", { children: "Inspector" }), _jsx("span", { className: "text-[8px]", children: isInspectorCollapsed ? '◀' : '▶' })] }), !isInspectorCollapsed && selectedNode && (_jsx(NodeInspector, { node: selectedNode, updateNode: updateNode, deleteNode: deleteNode, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath }))] }), _jsx("div", { style: { position: 'absolute', top: "0.5rem", left: "0.5rem", zIndex: 20 }, children: _jsx(EditorTree, { prefabData: prefabData, setPrefabData: setPrefabData, selectedId: selectedId, setSelectedId: setSelectedId }) })] });
 }
-function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransformMode }) {
+function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransformMode, basePath }) {
     const ALL_COMPONENTS = getAllComponents();
     const allComponentKeys = Object.keys(ALL_COMPONENTS);
     const [addComponentType, setAddComponentType] = useState(allComponentKeys[0]);
@@ -50,7 +50,7 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
                                         const components = Object.assign({}, n.components);
                                         delete components[key];
                                         return Object.assign(Object.assign({}, n), { components });
-                                    }), className: "text-[9px] text-red-400/60 hover:text-red-400", children: "\u2715" })] }), EditorComp ? (_jsx(EditorComp, { component: comp, onUpdate: (newProps) => updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: Object.assign(Object.assign({}, comp), { properties: Object.assign(Object.assign({}, comp.properties), newProps) }) }) }))) })) : null] }, key));
+                                    }), className: "text-[9px] text-red-400/60 hover:text-red-400", children: "\u2715" })] }), EditorComp ? (_jsx(EditorComp, { component: comp, onUpdate: (newProps) => updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: Object.assign(Object.assign({}, comp), { properties: Object.assign(Object.assign({}, comp.properties), newProps) }) }) }))), basePath: basePath })) : null] }, key));
             }), _jsxs("div", { className: "px-1.5 py-1 border-t border-cyan-500/20", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Add Component" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("select", { className: "bg-black/40 border border-cyan-500/30 px-1 py-0.5 flex-1 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: addComponentType, onChange: e => setAddComponentType(e.target.value), children: allComponentKeys.filter(k => { var _a; return !((_a = node.components) === null || _a === void 0 ? void 0 : _a[k.toLowerCase()]); }).map(k => (_jsx("option", { value: k, children: k }, k))) }), _jsx("button", { className: "bg-cyan-500/20 hover:bg-cyan-500/30 border border-cyan-500/30 px-2 py-0.5 text-[10px] text-cyan-300 font-mono disabled:opacity-30", disabled: !addComponentType, onClick: () => {
                                     var _a;
                                     if (!addComponentType)

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

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

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -13,11 +13,10 @@ import GameCanvas from "../../shared/GameCanvas";
 import { useState, useRef, } from "react";
 import PrefabRoot from "./PrefabRoot";
 import { Physics } from "@react-three/rapier";
-// import testPrefab from "./samples/test.json";
 import EditorUI from "./EditorUI";
-const PrefabEditor = ({ children }) => {
+const PrefabEditor = ({ basePath, initialPrefab, children }) => {
     const [editMode, setEditMode] = useState(true);
-    const [loadedPrefab, setLoadedPrefab] = useState({
+    const [loadedPrefab, setLoadedPrefab] = useState(initialPrefab !== null && initialPrefab !== void 0 ? initialPrefab : {
         "id": "prefab-default",
         "name": "New Prefab",
         "root": {
@@ -41,11 +40,11 @@ const PrefabEditor = ({ children }) => {
     const prefabRef = useRef(null);
     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 }), 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: 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* () {
                             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 })] });
+                        }), 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 })] });
 };
 const saveJson = (data, filename) => {
     const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));

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

@@ -8,5 +8,6 @@ export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     onSelect?: (id: string | null) => void;
     transformMode?: "translate" | "rotate" | "scale";
     setTransformMode?: (mode: "translate" | "rotate" | "scale") => void;
+    basePath?: string;
 } & import("react").RefAttributes<Group<import("three").Object3DEventMap>>>;
 export default PrefabRoot;

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -28,7 +28,7 @@ function updatePrefabNode(root, id, update) {
     }
     return root;
 }
-export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, transformMode, setTransformMode }, ref) => {
+export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, transformMode, setTransformMode, basePath = "" }, ref) => {
     const [loadedModels, setLoadedModels] = useState({});
     const [loadedTextures, setLoadedTextures] = useState({});
     // const [prefabRoot, setPrefabRoot] = useState<Prefab>(data); // Removed local state
@@ -108,7 +108,7 @@ 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, "");
+                    const result = yield loadModel(filename, basePath);
                     if (result.success && result.model) {
                         setLoadedModels(prev => (Object.assign(Object.assign({}, prev), { [filename]: result.model })));
                     }
@@ -118,7 +118,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);
-                    textureLoader.load(filename, (texture) => {
+                    const texturePath = basePath ? `${basePath}/${filename}` : filename;
+                    textureLoader.load(texturePath, (texture) => {
                         texture.colorSpace = SRGBColorSpace;
                         setLoadedTextures(prev => (Object.assign(Object.assign({}, prev), { [filename]: texture })));
                     });

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

@@ -4,6 +4,7 @@ export interface Component {
     Editor: FC<{
         component: any;
         onUpdate: (newComp: any) => void;
+        basePath?: string;
     }>;
     defaultProperties: any;
     View?: FC<any>;

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

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TextureListViewer } from '../../assetviewer/page';
 import { useEffect, useState } from 'react';
-function MaterialComponentEditor({ component, onUpdate }) {
+function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
     var _a, _b, _c, _d;
     const [textureFiles, setTextureFiles] = useState([]);
     useEffect(() => {
-        fetch('/textures/manifest.json')
+        const base = basePath ? `${basePath}/` : '';
+        fetch(`/${base}textures/manifest.json`)
             .then(r => r.json())
             .then(data => setTextureFiles(Array.isArray(data) ? data : data.files || []))
             .catch(console.error);
-    }, []);
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "mb-1", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Color" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("input", { type: "color", className: "h-5 w-5 bg-transparent border-none cursor-pointer", value: component.properties.color, onChange: e => onUpdate({ 'color': e.target.value }) }), _jsx("input", { type: "text", className: "flex-1 bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: component.properties.color, onChange: e => onUpdate({ 'color': e.target.value }) })] })] }), _jsxs("div", { className: "flex items-center gap-1 mb-1", children: [_jsx("input", { type: "checkbox", className: "w-3 h-3", checked: component.properties.wireframe || false, onChange: e => onUpdate({ 'wireframe': e.target.checked }) }), _jsx("label", { className: "text-[9px] text-cyan-400/60", children: "Wireframe" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Texture" }), _jsx("div", { className: "max-h-32 overflow-y-auto", children: _jsx(TextureListViewer, { files: textureFiles, selected: component.properties.texture || undefined, onSelect: (file) => onUpdate({ 'texture': file }) }) })] }), component.properties.texture && (_jsxs("div", { className: "border-t border-cyan-500/20 pt-1 mt-1", children: [_jsxs("div", { className: "flex items-center gap-1 mb-1", children: [_jsx("input", { type: "checkbox", className: "w-3 h-3", checked: component.properties.repeat || false, onChange: e => onUpdate({ 'repeat': e.target.checked }) }), _jsx("label", { className: "text-[9px] text-cyan-400/60", children: "Repeat Texture" })] }), component.properties.repeat && (_jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Repeat (X, Y)" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("input", { type: "number", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: (_b = (_a = component.properties.repeatCount) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 1, onChange: e => {
+    }, [basePath]);
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "mb-1", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Color" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("input", { type: "color", className: "h-5 w-5 bg-transparent border-none cursor-pointer", value: component.properties.color, onChange: e => onUpdate({ 'color': e.target.value }) }), _jsx("input", { type: "text", className: "flex-1 bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: component.properties.color, onChange: e => onUpdate({ 'color': e.target.value }) })] })] }), _jsxs("div", { className: "flex items-center gap-1 mb-1", children: [_jsx("input", { type: "checkbox", className: "w-3 h-3", checked: component.properties.wireframe || false, onChange: e => onUpdate({ 'wireframe': e.target.checked }) }), _jsx("label", { className: "text-[9px] text-cyan-400/60", children: "Wireframe" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Texture" }), _jsx("div", { className: "max-h-32 overflow-y-auto", children: _jsx(TextureListViewer, { files: textureFiles, selected: component.properties.texture || undefined, onSelect: (file) => onUpdate({ 'texture': file }), basePath: basePath }) })] }), component.properties.texture && (_jsxs("div", { className: "border-t border-cyan-500/20 pt-1 mt-1", children: [_jsxs("div", { className: "flex items-center gap-1 mb-1", children: [_jsx("input", { type: "checkbox", className: "w-3 h-3", checked: component.properties.repeat || false, onChange: e => onUpdate({ 'repeat': e.target.checked }) }), _jsx("label", { className: "text-[9px] text-cyan-400/60", children: "Repeat Texture" })] }), component.properties.repeat && (_jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Repeat (X, Y)" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("input", { type: "number", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: (_b = (_a = component.properties.repeatCount) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 1, onChange: e => {
                                             var _a, _b;
                                             const y = (_b = (_a = component.properties.repeatCount) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : 1;
                                             onUpdate({ 'repeatCount': [parseFloat(e.target.value), y] });

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

@@ -1,20 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ModelListViewer } from '../../assetviewer/page';
 import { useEffect, useState } from 'react';
-function ModelComponentEditor({ component, onUpdate }) {
+function ModelComponentEditor({ component, onUpdate, basePath = "" }) {
     const [modelFiles, setModelFiles] = useState([]);
     useEffect(() => {
-        fetch('/models/manifest.json')
+        const base = basePath ? `${basePath}/` : '';
+        fetch(`/${base}models/manifest.json`)
             .then(r => r.json())
             .then(data => setModelFiles(Array.isArray(data) ? data : data.files || []))
             .catch(console.error);
-    }, []);
+    }, [basePath]);
     const handleModelSelect = (file) => {
         // Remove leading slash for prefab compatibility
         const filename = file.startsWith('/') ? file.slice(1) : file;
         onUpdate({ 'filename': filename });
     };
-    return _jsxs("div", { children: [_jsxs("div", { className: "mb-1", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Model" }), _jsx("div", { className: "max-h-32 overflow-y-auto", children: _jsx(ModelListViewer, { files: modelFiles, selected: component.properties.filename ? `/${component.properties.filename}` : undefined, onSelect: handleModelSelect }) })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("input", { type: "checkbox", id: "instanced-checkbox", checked: component.properties.instanced || false, onChange: e => onUpdate({ 'instanced': e.target.checked }), className: "w-3 h-3" }), _jsx("label", { htmlFor: "instanced-checkbox", className: "text-[9px] text-cyan-400/60", children: "Instanced" })] })] });
+    return _jsxs("div", { children: [_jsxs("div", { className: "mb-1", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Model" }), _jsx("div", { className: "max-h-32 overflow-y-auto", children: _jsx(ModelListViewer, { files: modelFiles, selected: component.properties.filename ? `/${component.properties.filename}` : undefined, onSelect: handleModelSelect, basePath: basePath }) })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("input", { type: "checkbox", id: "instanced-checkbox", checked: component.properties.instanced || false, onChange: e => onUpdate({ 'instanced': e.target.checked }), className: "w-3 h-3" }), _jsx("label", { htmlFor: "instanced-checkbox", className: "text-[9px] text-cyan-400/60", children: "Instanced" })] })] });
 }
 // View for Model component
 function ModelComponentView({ properties, loadedModels, children }) {

package/package.json

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