react-three-game 0.0.1 → 0.0.2

package/dist/shared/GameCanvas.js

@@ -0,0 +1,48 @@
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Canvas, extend } from "@react-three/fiber";
+import { WebGPURenderer, MeshBasicNodeMaterial, MeshStandardNodeMaterial, SpriteNodeMaterial, PCFShadowMap } from "three/webgpu";
+import { Suspense, useState } from "react";
+import { Loader } from "@react-three/drei";
+// generic version
+// extend(THREE as any)
+extend({
+    MeshBasicNodeMaterial: MeshBasicNodeMaterial,
+    MeshStandardNodeMaterial: MeshStandardNodeMaterial,
+    SpriteNodeMaterial: SpriteNodeMaterial,
+});
+export default function GameCanvas(_a) {
+    var { loader = false, children } = _a, props = __rest(_a, ["loader", "children"]);
+    const [frameloop, setFrameloop] = useState("never");
+    const [loading, setLoading] = useState(true);
+    return _jsxs(_Fragment, { children: [_jsx(Canvas, { shadows: { type: PCFShadowMap, }, frameloop: frameloop, gl: (_a) => __awaiter(this, [_a], void 0, function* ({ canvas }) {
+                    const renderer = new WebGPURenderer(Object.assign({ canvas: canvas, 
+                        // @ts-expect-error futuristic
+                        shadowMap: true, antialias: true }, props));
+                    yield renderer.init().then(() => {
+                        setFrameloop("always");
+                    });
+                    return renderer;
+                }), camera: {
+                    position: [0, 1, 5],
+                }, children: _jsx(Suspense, { children: children }) }), loader ? _jsx(Loader, {}) : null] });
+}

package/dist/shared/extend-three.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/shared/extend-three.js

@@ -0,0 +1,13 @@
+import { extend } from "@react-three/fiber";
+import * as THREE from "three";
+import * as WEBGPU from "three/webgpu";
+console.log('EXTENDING THREE NAMESPACE');
+console.log('THREE keys:', Object.keys(THREE).length);
+console.log('Has Canvas?', 'Canvas' in THREE);
+console.log('Has AmbientLight?', 'AmbientLight' in THREE);
+console.log('Has GridHelper?', 'GridHelper' in THREE);
+// Extend entire THREE namespace to support all THREE objects in JSX
+// This must happen before any Canvas components are created
+extend(THREE);
+extend(WEBGPU);
+console.log('THREE NAMESPACE EXTENDED');

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

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

package/dist/tools/assetviewer/page.js

@@ -0,0 +1,153 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 { TextureLoader } from "three";
+// view models and textures in manifest, onselect callback
+function getItemsInPath(files, currentPath) {
+    // Remove the leading category folder (e.g., /textures/, /models/, /sounds/)
+    const filesWithoutCategory = files.map(file => {
+        const parts = file.split('/').filter(Boolean);
+        return parts.length > 1 ? '/' + parts.slice(1).join('/') : '';
+    }).filter(Boolean);
+    const prefix = currentPath ? `/${currentPath}/` : '/';
+    const relevantFiles = filesWithoutCategory.filter(file => file.startsWith(prefix));
+    const folders = new Set();
+    const filesInCurrentPath = [];
+    relevantFiles.forEach((file, index) => {
+        const relativePath = file.slice(prefix.length);
+        const parts = relativePath.split('/').filter(Boolean);
+        if (parts.length > 1) {
+            folders.add(parts[0]);
+        }
+        else if (parts[0]) {
+            // Return the original file path
+            filesInCurrentPath.push(files[filesWithoutCategory.indexOf(file)]);
+        }
+    });
+    return { folders: Array.from(folders), filesInCurrentPath };
+}
+function FolderTile({ name, onClick }) {
+    return (_jsxs("div", { onClick: onClick, className: "aspect-square bg-gray-800 cursor-pointer hover:bg-gray-700 flex flex-col items-center justify-center", children: [_jsx("div", { className: "text-3xl", children: "\uD83D\uDCC1" }), _jsx("div", { className: "text-xs text-center truncate w-full px-1 mt-1", children: name })] }));
+}
+function useInView() {
+    const [isInView, setIsInView] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        const observer = new IntersectionObserver(([entry]) => {
+            setIsInView(entry.isIntersecting);
+        }, { rootMargin: '100px' });
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => {
+            if (ref.current) {
+                observer.unobserve(ref.current);
+            }
+        };
+    }, []);
+    return { ref, isInView };
+}
+export default function AssetViewerPage() {
+    const [textures, setTextures] = useState([]);
+    const [models, setModels] = useState([]);
+    const [sounds, setSounds] = useState([]);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        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(() => [])
+        ]).then(([textureData, modelData, soundData]) => {
+            setTextures(textureData);
+            setModels(modelData);
+            setSounds(soundData);
+            setLoading(false);
+        });
+    }, []);
+    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, {})] }));
+}
+function AssetListViewer({ files, selected, onSelect, renderCard }) {
+    const [currentPath, setCurrentPath] = useState('');
+    const [showPicker, setShowPicker] = useState(false);
+    const { folders, filesInCurrentPath } = getItemsInPath(files, currentPath);
+    const showCompactView = selected && !showPicker;
+    if (showCompactView) {
+        return (_jsxs("div", { className: "flex gap-1 items-center", children: [renderCard(selected, onSelect), _jsx("button", { onClick: () => setShowPicker(true), className: "px-2 py-1 bg-gray-800 hover:bg-gray-700 text-xs", children: "Change" })] }));
+    }
+    return (_jsxs("div", { children: [currentPath && (_jsx("button", { onClick: () => {
+                    const pathParts = currentPath.split('/').filter(Boolean);
+                    pathParts.pop();
+                    setCurrentPath(pathParts.join('/'));
+                }, className: "mb-1 px-2 py-1 bg-gray-800 hover:bg-gray-700 text-xs", children: "\u2190 Back" })), _jsxs("div", { className: "grid grid-cols-3 gap-1", children: [folders.map((folder) => (_jsx(FolderTile, { name: folder, onClick: () => setCurrentPath(currentPath ? `${currentPath}/${folder}` : folder) }, folder))), filesInCurrentPath.map((file) => (_jsx("div", { children: renderCard(file, (f) => {
+                            onSelect(f);
+                            if (selected)
+                                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, {})] }));
+}
+function TextureCard({ file, onSelect }) {
+    const [error, setError] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const { ref, isInView } = useInView();
+    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() })] }));
+}
+function TextureSphere({ url, onError }) {
+    const texture = useLoader(TextureLoader, url, undefined, (error) => {
+        console.error('Failed to load texture:', url, error);
+        onError === null || onError === void 0 ? void 0 : 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, {})] }));
+}
+function ModelCard({ file, onSelect }) {
+    const [error, setError] = useState(false);
+    const { ref, isInView } = useInView();
+    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() })] }));
+}
+function ModelPreview({ url, onError }) {
+    const isFbx = url.toLowerCase().endsWith('.fbx');
+    if (isFbx)
+        return _jsx(FBXModel, { url: url, onError: onError });
+    return _jsx(GLTFModel, { url: url, onError: onError });
+}
+function GLTFModel({ url, onError }) {
+    const { scene } = useGLTF(url);
+    return _jsx("primitive", { object: scene });
+}
+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 })) }));
+}
+function SoundCard({ file, onSelect }) {
+    const fileName = file.split('/').pop() || '';
+    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
+export function SharedCanvas() {
+    return (_jsx(Canvas, { shadows: true, dpr: [1, 1.5], camera: { position: [0, 0, 3], fov: 45, near: 0.1, far: 1000 }, style: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100vw',
+            height: '100vh',
+            pointerEvents: 'none',
+        }, eventSource: typeof document !== 'undefined' ? document.getElementById('root') || undefined : undefined, eventPrefix: "client", children: _jsx(View.Port, {}) }));
+}

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

@@ -0,0 +1,9 @@
+interface DragDropLoaderProps {
+    onModelLoaded: (model: any, filename: string) => void;
+}
+export declare function DragDropLoader({ onModelLoaded }: DragDropLoaderProps): null;
+interface FilePickerProps {
+    onModelLoaded: (model: any, filename: string) => void;
+}
+export declare function FilePicker({ onModelLoaded }: FilePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/tools/dragdrop/DragDropLoader.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// DragDropLoader.tsx
+import { useEffect } from "react";
+import { DRACOLoader, FBXLoader, GLTFLoader } from "three/examples/jsm/Addons.js";
+// Shared file handling logic
+function handleFiles(files, onModelLoaded) {
+    files.forEach((file) => {
+        if (file.name.endsWith(".glb") || file.name.endsWith(".gltf")) {
+            loadGLTFFile(file, onModelLoaded);
+        }
+        else if (file.name.endsWith(".fbx")) {
+            loadFBXFile(file, onModelLoaded);
+        }
+    });
+}
+function loadGLTFFile(file, onModelLoaded) {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+        var _a;
+        const arrayBuffer = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
+        if (arrayBuffer) {
+            const loader = new GLTFLoader();
+            const dracoLoader = new DRACOLoader();
+            dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
+            loader.setDRACOLoader(dracoLoader);
+            loader.parse(arrayBuffer, "", (gltf) => {
+                onModelLoaded(gltf.scene, file.name);
+            }, (error) => {
+                console.error("GLTFLoader parse error", error);
+            });
+        }
+    };
+    reader.readAsArrayBuffer(file);
+}
+function loadFBXFile(file, onModelLoaded) {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+        var _a;
+        const arrayBuffer = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
+        if (arrayBuffer) {
+            const loader = new FBXLoader();
+            const model = loader.parse(arrayBuffer, "");
+            onModelLoaded(model, file.name);
+        }
+    };
+    reader.readAsArrayBuffer(file);
+}
+export function DragDropLoader({ onModelLoaded }) {
+    useEffect(() => {
+        function handleDrop(e) {
+            var _a;
+            e.preventDefault();
+            e.stopPropagation();
+            const files = ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) ? Array.from(e.dataTransfer.files) : [];
+            handleFiles(files, onModelLoaded);
+        }
+        function handleDragOver(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        window.addEventListener("drop", handleDrop);
+        window.addEventListener("dragover", handleDragOver);
+        return () => {
+            window.removeEventListener("drop", handleDrop);
+            window.removeEventListener("dragover", handleDragOver);
+        };
+    }, [onModelLoaded]);
+    return null;
+}
+export function FilePicker({ onModelLoaded }) {
+    function onChange(e) {
+        const files = e.target.files ? Array.from(e.target.files) : [];
+        handleFiles(files, onModelLoaded);
+    }
+    // Ref for the hidden input
+    const inputId = "file-picker-input";
+    return (_jsxs(_Fragment, { children: [_jsx("input", { id: inputId, type: "file", accept: ".glb,.gltf,.fbx", multiple: true, onChange: onChange, className: "hidden" }), _jsx("button", { className: "px-3 py-1 bg-blue-500/20 hover:bg-blue-500/30 border border-blue-400/40 hover:border-blue-400/60 text-blue-200 hover:text-blue-100 text-xs font-medium transition-all", type: "button", onClick: () => { var _a; return (_a = document.getElementById(inputId)) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Select Files" })] }));
+}

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

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

package/dist/tools/dragdrop/modelLoader.js

@@ -0,0 +1,53 @@
+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 { GLTFLoader, FBXLoader, DRACOLoader } from "three/examples/jsm/Addons.js";
+// Singleton loader instances
+const dracoLoader = new DRACOLoader();
+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) {
+        try {
+            // Construct full path - always prepend resourcePath if provided (even if empty string)
+            // This allows loading from root with resourcePath=""
+            const fullPath = `${resourcePath}/${filename}`;
+            if (filename.endsWith('.glb') || filename.endsWith('.gltf')) {
+                return new Promise((resolve) => {
+                    gltfLoader.load(fullPath, (gltf) => resolve({ success: true, model: gltf.scene }), (progressEvent) => {
+                        if (onProgress) {
+                            // Use loaded as total if total is not available
+                            const total = progressEvent.total || progressEvent.loaded;
+                            onProgress(filename, progressEvent.loaded, total);
+                        }
+                    }, (error) => resolve({ success: false, error }));
+                });
+            }
+            else if (filename.endsWith('.fbx')) {
+                return new Promise((resolve) => {
+                    fbxLoader.load(fullPath, (model) => resolve({ success: true, model }), (progressEvent) => {
+                        if (onProgress) {
+                            // Use loaded as total if total is not available
+                            const total = progressEvent.total || progressEvent.loaded;
+                            onProgress(filename, progressEvent.loaded, total);
+                        }
+                    }, (error) => resolve({ success: false, error }));
+                });
+            }
+            else {
+                return { success: false, error: new Error(`Unsupported file format: ${filename}`) };
+            }
+        }
+        catch (error) {
+            return { success: false, error };
+        }
+    });
+}

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

@@ -0,0 +1 @@
+export default function Home(): import("react/jsx-runtime").JSX.Element;

package/dist/tools/dragdrop/page.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Physics, RigidBody } from "@react-three/rapier";
+import { OrbitControls } from "@react-three/drei";
+import { useState } from "react";
+import { DragDropLoader } from "./DragDropLoader";
+import GameCanvas from "../../shared/GameCanvas";
+export default function Home() {
+    const [models, setModels] = useState([]);
+    return (_jsxs(_Fragment, { children: [_jsx(DragDropLoader, { onModelLoaded: model => setModels(prev => [...prev, model]) }), _jsx("div", { className: "w-full items-center justify-items-center min-h-screen", style: { height: "100vh" }, children: _jsx(GameCanvas, { children: _jsxs(Physics, { children: [_jsx(RigidBody, { children: _jsxs("mesh", { castShadow: true, children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx("meshStandardMaterial", { color: "orange" })] }) }), _jsx(RigidBody, { type: "fixed", children: _jsxs("mesh", { position: [0, -2, 0], scale: [10, 0.1, 10], receiveShadow: true, children: [_jsx("boxGeometry", {}), _jsx("meshStandardMaterial", { color: "gray" })] }) }), models.map((model, idx) => (_jsx("primitive", { object: model, position: [0, 0, 0] }, idx))), _jsx("ambientLight", { intensity: 0.5 }), _jsx("pointLight", { position: [10, 10, 10], castShadow: true, intensity: 1000 }), _jsx(OrbitControls, {})] }) }) })] }));
+}

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

@@ -0,0 +1,10 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Prefab } from "./types";
+interface EditorTreeProps {
+    prefabData?: Prefab;
+    setPrefabData?: Dispatch<SetStateAction<Prefab>>;
+    selectedId: string | null;
+    setSelectedId: Dispatch<SetStateAction<string | null>>;
+}
+export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId }: EditorTreeProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/tools/prefabeditor/EditorTree.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { getComponent } from './components/ComponentRegistry';
+export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId }) {
+    const [contextMenu, setContextMenu] = useState(null);
+    const [draggedId, setDraggedId] = useState(null);
+    const [collapsedIds, setCollapsedIds] = useState(new Set());
+    const [isTreeCollapsed, setIsTreeCollapsed] = useState(false);
+    if (!prefabData || !setPrefabData)
+        return null;
+    const handleContextMenu = (e, nodeId) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setContextMenu({ x: e.clientX, y: e.clientY, nodeId });
+    };
+    const closeContextMenu = () => setContextMenu(null);
+    const toggleCollapse = (e, id) => {
+        e.stopPropagation();
+        setCollapsedIds(prev => {
+            const next = new Set(prev);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    };
+    // Actions
+    const handleAddChild = (parentId) => {
+        var _a;
+        const newNode = {
+            id: crypto.randomUUID(),
+            enabled: true,
+            visible: true,
+            components: {
+                transform: {
+                    type: "Transform",
+                    properties: Object.assign({}, (_a = getComponent('Transform')) === null || _a === void 0 ? void 0 : _a.defaultProperties)
+                }
+            }
+        };
+        setPrefabData(prev => {
+            const newRoot = JSON.parse(JSON.stringify(prev.root)); // Deep clone for safety
+            const parent = findNode(newRoot, parentId);
+            if (parent) {
+                parent.children = parent.children || [];
+                parent.children.push(newNode);
+            }
+            return Object.assign(Object.assign({}, prev), { root: newRoot });
+        });
+        closeContextMenu();
+    };
+    const handleDuplicate = (nodeId) => {
+        if (nodeId === prefabData.root.id)
+            return; // Cannot duplicate root
+        setPrefabData(prev => {
+            const newRoot = JSON.parse(JSON.stringify(prev.root));
+            const parent = findParent(newRoot, nodeId);
+            const node = findNode(newRoot, nodeId);
+            if (parent && node) {
+                const clone = cloneNode(node);
+                parent.children = parent.children || [];
+                parent.children.push(clone);
+            }
+            return Object.assign(Object.assign({}, prev), { root: newRoot });
+        });
+        closeContextMenu();
+    };
+    const handleDelete = (nodeId) => {
+        if (nodeId === prefabData.root.id)
+            return; // Cannot delete root
+        setPrefabData(prev => {
+            const newRoot = deleteNodeFromTree(JSON.parse(JSON.stringify(prev.root)), nodeId);
+            return Object.assign(Object.assign({}, prev), { root: newRoot });
+        });
+        if (selectedId === nodeId)
+            setSelectedId(null);
+        closeContextMenu();
+    };
+    // Drag and Drop
+    const handleDragStart = (e, id) => {
+        e.stopPropagation();
+        if (id === prefabData.root.id) {
+            e.preventDefault(); // Cannot drag root
+            return;
+        }
+        setDraggedId(id);
+        e.dataTransfer.effectAllowed = "move";
+    };
+    const handleDragOver = (e, targetId) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!draggedId || draggedId === targetId)
+            return;
+        // Check for cycles: target cannot be a descendant of dragged node
+        const draggedNode = findNode(prefabData.root, draggedId);
+        if (draggedNode && findNode(draggedNode, targetId))
+            return;
+        e.dataTransfer.dropEffect = "move";
+    };
+    const handleDrop = (e, targetId) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!draggedId || draggedId === targetId)
+            return;
+        setPrefabData(prev => {
+            var _a;
+            const newRoot = JSON.parse(JSON.stringify(prev.root));
+            // Check cycle again on the fresh tree
+            const draggedNodeRef = findNode(newRoot, draggedId);
+            if (draggedNodeRef && findNode(draggedNodeRef, targetId))
+                return prev;
+            // Remove from old parent
+            const parent = findParent(newRoot, draggedId);
+            if (!parent)
+                return prev;
+            const nodeToMove = (_a = parent.children) === null || _a === void 0 ? void 0 : _a.find(c => c.id === draggedId);
+            if (!nodeToMove)
+                return prev;
+            parent.children = parent.children.filter(c => c.id !== draggedId);
+            // Add to new parent
+            const target = findNode(newRoot, targetId);
+            if (target) {
+                target.children = target.children || [];
+                target.children.push(nodeToMove);
+            }
+            return Object.assign(Object.assign({}, prev), { root: newRoot });
+        });
+        setDraggedId(null);
+    };
+    const renderNode = (node, depth = 0) => {
+        if (!node)
+            return null;
+        const isSelected = node.id === selectedId;
+        const isCollapsed = collapsedIds.has(node.id);
+        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" })] }))] }))] }));
+}
+// --- Helpers ---
+function findNode(root, id) {
+    if (root.id === id)
+        return root;
+    if (root.children) {
+        for (const child of root.children) {
+            const found = findNode(child, id);
+            if (found)
+                return found;
+        }
+    }
+    return null;
+}
+function findParent(root, id) {
+    if (!root.children)
+        return null;
+    for (const child of root.children) {
+        if (child.id === id)
+            return root;
+        const found = findParent(child, id);
+        if (found)
+            return found;
+    }
+    return null;
+}
+function deleteNodeFromTree(root, id) {
+    if (root.id === id)
+        return null;
+    if (root.children) {
+        root.children = root.children
+            .map(child => deleteNodeFromTree(child, id))
+            .filter((child) => child !== null);
+    }
+    return root;
+}
+function cloneNode(node) {
+    const newNode = Object.assign(Object.assign({}, node), { id: crypto.randomUUID() });
+    if (newNode.children) {
+        newNode.children = newNode.children.map(child => cloneNode(child));
+    }
+    return newNode;
+}

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

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