react-three-game 0.0.41 → 0.0.42

package/dist/shared/GameCanvas.d.ts

@@ -0,0 +1,9 @@
+import { CanvasProps } from "@react-three/fiber";
+import { WebGPURendererParameters } from "three/src/renderers/webgpu/WebGPURenderer.Nodes.js";
+interface GameCanvasProps extends Omit<CanvasProps, 'children'> {
+    loader?: boolean;
+    children: React.ReactNode;
+    glConfig?: WebGPURendererParameters;
+}
+export default function GameCanvas({ loader, children, glConfig, ...props }: GameCanvasProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/GameCanvas.js

@@ -0,0 +1,47 @@
+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, jsxs as _jsxs, Fragment as _Fragment } 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, glConfig } = _a, props = __rest(_a, ["loader", "children", "glConfig"]);
+    const [frameloop, setFrameloop] = useState("never");
+    return _jsx(_Fragment, { children: _jsxs(Canvas, Object.assign({ style: { touchAction: 'none' }, 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 }, glConfig));
+                yield renderer.init().then(() => {
+                    setFrameloop("always");
+                });
+                return renderer;
+            }), camera: {
+                position: [0, 1, 5],
+            } }, props, { children: [_jsx(Suspense, { children: children }), loader ? _jsx(Loader, {}) : null] })) });
+}

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

@@ -0,0 +1,35 @@
+interface TextureListViewerProps {
+    files: string[];
+    selected?: string;
+    onSelect: (file: string) => void;
+    basePath?: string;
+}
+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, 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, basePath }: SoundListViewerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SingleTextureViewer({ file, basePath }: {
+    file?: string;
+    basePath?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function SingleModelViewer({ file, basePath }: {
+    file?: string;
+    basePath?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function SingleSoundViewer({ file, basePath }: {
+    file?: string;
+    basePath?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function SharedCanvas(): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/tools/assetviewer/page.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Canvas, useLoader } from "@react-three/fiber";
+import { OrbitControls, Stage, View, PerspectiveCamera } from "@react-three/drei";
+import { Suspense, useEffect, useState, useRef } from "react";
+import { TextureLoader } from "three";
+import { loadModel } from "../dragdrop/modelLoader";
+// view models and textures in manifest, onselect callback
+const styles = {
+    errorIcon: { color: '#fca5a5', fontSize: 12 }, // text-red-400 text-xs
+    flexFillRelative: { flex: 1, position: 'relative' },
+    bottomLabel: { backgroundColor: 'rgba(0,0,0,0.6)', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' },
+    iconLarge: { fontSize: 20 }
+};
+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, style: {
+            maxWidth: 60,
+            aspectRatio: '1 / 1',
+            backgroundColor: '#1f2937', /* gray-800 */
+            cursor: 'pointer',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center'
+        }, children: [_jsx("div", { style: { fontSize: 24 }, children: "\uD83D\uDCC1" }), _jsx("div", { style: { fontSize: 10, textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '100%', padding: '0 4px', marginTop: 4 }, 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 };
+}
+function AssetListViewer({ files, selected, onSelect, renderCard }) {
+    const [currentPath, setCurrentPath] = useState('');
+    const { folders, filesInCurrentPath } = getItemsInPath(files, currentPath);
+    return (_jsxs("div", { children: [currentPath && (_jsx("button", { onClick: () => {
+                    const pathParts = currentPath.split('/').filter(Boolean);
+                    pathParts.pop();
+                    setCurrentPath(pathParts.join('/'));
+                }, style: { marginBottom: 4, padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 12, cursor: 'pointer', border: 'none' }, children: "\u2190 Back" })), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }, children: [folders.map((folder) => (_jsx(FolderTile, { name: folder, onClick: () => setCurrentPath(currentPath ? `${currentPath}/${folder}` : folder) }, folder))), filesInCurrentPath.map((file) => (_jsx("div", { children: renderCard(file, onSelect) }, file)))] })] }));
+}
+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, 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, style: { aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onClick: () => onSelect(file), children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }));
+    }
+    return (_jsxs("div", { ref: ref, style: { maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#1f2937', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("div", { style: { flex: 1, position: 'relative' }, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, 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", { style: { backgroundColor: 'rgba(0,0,0,0.6)', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: '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, 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, basePath = "" }) {
+    const [error, setError] = useState(false);
+    const { ref, isInView } = useInView();
+    const fullPath = basePath ? `/${basePath}${file}` : file;
+    if (error) {
+        return (_jsx("div", { ref: ref, style: { aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onClick: () => onSelect(file), children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }));
+    }
+    return (_jsxs("div", { ref: ref, style: { maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#111827', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), children: [_jsx("div", { style: styles.flexFillRelative, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, 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", { style: { backgroundColor: 'rgba(0,0,0,0.6)', fontSize: 10, padding: '0 4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' }, children: file.split('/').pop() })] }));
+}
+function ModelPreview({ url, onError }) {
+    const [model, setModel] = useState(null);
+    const onErrorRef = useRef(onError);
+    onErrorRef.current = onError;
+    useEffect(() => {
+        let cancelled = false;
+        setModel(null);
+        loadModel(url).then((result) => {
+            var _a;
+            if (cancelled)
+                return;
+            if (result.success && result.model) {
+                setModel(result.model);
+            }
+            else {
+                (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef);
+            }
+        });
+        return () => { cancelled = true; };
+    }, [url]);
+    if (!model)
+        return null;
+    return _jsx("primitive", { object: model });
+}
+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, basePath = "" }) {
+    const fileName = file.split('/').pop() || '';
+    const fullPath = basePath ? `/${basePath}${file}` : file;
+    return (_jsxs("div", { onClick: () => onSelect(file), style: { aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }, children: [_jsx("div", { style: styles.iconLarge, children: "\uD83D\uDD0A" }), _jsx("div", { style: { fontSize: 12, padding: '0 4px', marginTop: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center', width: '100%' }, children: fileName })] }));
+}
+// Single Asset Viewer Components - display only one selected asset
+export function SingleTextureViewer({ file, basePath = "" }) {
+    if (!file)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(TextureCard, { file: file, basePath: basePath, onSelect: () => { } }), _jsx(SharedCanvas, {})] }));
+}
+export function SingleModelViewer({ file, basePath = "" }) {
+    if (!file)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(ModelCard, { file: file, basePath: basePath, onSelect: () => { } }), _jsx(SharedCanvas, {})] }));
+}
+export function SingleSoundViewer({ file, basePath = "" }) {
+    if (!file)
+        return null;
+    return _jsx(SoundCard, { file: file, basePath: basePath, onSelect: () => { } });
+}
+// 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: 'absolute',
+            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, onProgress?: ProgressCallback): Promise<ModelLoadResult>;

package/dist/tools/dragdrop/modelLoader.js

@@ -0,0 +1,52 @@
+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, onProgress) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            // 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) => {
+                        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/EditorContext.d.ts

@@ -0,0 +1,11 @@
+interface EditorContextType {
+    transformMode: "translate" | "rotate" | "scale";
+    setTransformMode: (mode: "translate" | "rotate" | "scale") => void;
+    snapResolution: number;
+    setSnapResolution: (resolution: number) => void;
+    onScreenshot?: () => void;
+    onExportGLB?: () => void;
+}
+export declare const EditorContext: import("react").Context<EditorContextType | null>;
+export declare function useEditorContext(): EditorContextType;
+export {};

package/dist/tools/prefabeditor/EditorContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+export const EditorContext = createContext(null);
+export function useEditorContext() {
+    const context = useContext(EditorContext);
+    if (!context) {
+        throw new Error("useEditorContext must be used within EditorContext.Provider");
+    }
+    return context;
+}

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

@@ -0,0 +1,12 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Prefab } from "./types";
+export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId, onUndo, onRedo, canUndo, canRedo }: {
+    prefabData?: Prefab;
+    setPrefabData?: Dispatch<SetStateAction<Prefab>>;
+    selectedId: string | null;
+    setSelectedId: Dispatch<SetStateAction<string | null>>;
+    onUndo?: () => void;
+    onRedo?: () => void;
+    canUndo?: boolean;
+    canRedo?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/tools/prefabeditor/EditorTree.js

@@ -0,0 +1,150 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { getComponent } from './components/ComponentRegistry';
+import { base, tree, menu } from './styles';
+import { findNode, findParent, deleteNode, cloneNode, updateNodeById, loadJson, saveJson, regenerateIds } from './utils';
+import { useEditorContext } from './EditorContext';
+export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId, onUndo, onRedo, canUndo, canRedo }) {
+    const [contextMenu, setContextMenu] = useState(null);
+    const [draggedId, setDraggedId] = useState(null);
+    const [collapsedIds, setCollapsedIds] = useState(new Set());
+    const [collapsed, setCollapsed] = useState(false);
+    const [fileMenuOpen, setFileMenuOpen] = useState(false);
+    if (!prefabData || !setPrefabData)
+        return null;
+    const handleContextMenu = (e, nodeId) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setContextMenu({ x: e.clientX, y: e.clientY, nodeId });
+    };
+    const toggleCollapse = (e, id) => {
+        e.stopPropagation();
+        setCollapsedIds(prev => {
+            const next = new Set(prev);
+            next.has(id) ? next.delete(id) : next.add(id);
+            return next;
+        });
+    };
+    const handleAddChild = (parentId) => {
+        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, parentId, parent => {
+                var _a, _b;
+                return (Object.assign(Object.assign({}, parent), { children: [...((_a = parent.children) !== null && _a !== void 0 ? _a : []), {
+                            id: crypto.randomUUID(),
+                            name: "New Node",
+                            components: {
+                                transform: {
+                                    type: "Transform",
+                                    properties: Object.assign({}, (_b = getComponent('Transform')) === null || _b === void 0 ? void 0 : _b.defaultProperties)
+                                }
+                            }
+                        }] }));
+            }) })));
+        setContextMenu(null);
+    };
+    const handleDuplicate = (nodeId) => {
+        if (nodeId === prefabData.root.id)
+            return;
+        setPrefabData(prev => {
+            const node = findNode(prev.root, nodeId);
+            const parent = findParent(prev.root, nodeId);
+            if (!node || !parent)
+                return prev;
+            return Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, parent.id, p => {
+                    var _a;
+                    return (Object.assign(Object.assign({}, p), { children: [...((_a = p.children) !== null && _a !== void 0 ? _a : []), cloneNode(node)] }));
+                }) });
+        });
+        setContextMenu(null);
+    };
+    const handleDelete = (nodeId) => {
+        if (nodeId === prefabData.root.id)
+            return;
+        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: deleteNode(prev.root, nodeId) })));
+        if (selectedId === nodeId)
+            setSelectedId(null);
+        setContextMenu(null);
+    };
+    const handleDragStart = (e, id) => {
+        if (id === prefabData.root.id)
+            return e.preventDefault();
+        e.dataTransfer.effectAllowed = "move";
+        setDraggedId(id);
+    };
+    const handleDragOver = (e, targetId) => {
+        if (!draggedId || draggedId === targetId)
+            return;
+        const draggedNode = findNode(prefabData.root, draggedId);
+        if (draggedNode && findNode(draggedNode, targetId))
+            return;
+        e.preventDefault();
+    };
+    const handleDrop = (e, targetId) => {
+        if (!draggedId || draggedId === targetId)
+            return;
+        e.preventDefault();
+        setPrefabData(prev => {
+            const draggedNode = findNode(prev.root, draggedId);
+            const oldParent = findParent(prev.root, draggedId);
+            if (!draggedNode || !oldParent || findNode(draggedNode, targetId))
+                return prev;
+            let root = updateNodeById(prev.root, oldParent.id, p => (Object.assign(Object.assign({}, p), { children: p.children.filter(c => c.id !== draggedId) })));
+            root = updateNodeById(root, targetId, t => {
+                var _a;
+                return (Object.assign(Object.assign({}, t), { children: [...((_a = t.children) !== null && _a !== void 0 ? _a : []), draggedNode] }));
+            });
+            return Object.assign(Object.assign({}, prev), { root });
+        });
+        setDraggedId(null);
+    };
+    const renderNode = (node, depth = 0) => {
+        var _a;
+        if (!node)
+            return null;
+        const isSelected = node.id === selectedId;
+        const isCollapsed = collapsedIds.has(node.id);
+        const hasChildren = node.children && node.children.length > 0;
+        const isRoot = node.id === prefabData.root.id;
+        return (_jsxs("div", { children: [_jsxs("div", { style: Object.assign(Object.assign(Object.assign({}, tree.row), (isSelected ? tree.selected : {})), { paddingLeft: `${depth * 12 + 6}px` }), draggable: !isRoot, onClick: (e) => { e.stopPropagation(); setSelectedId(node.id); }, onContextMenu: (e) => handleContextMenu(e, node.id), onDragStart: (e) => handleDragStart(e, node.id), onDragEnd: () => setDraggedId(null), onDragOver: (e) => handleDragOver(e, node.id), onDrop: (e) => handleDrop(e, node.id), children: [_jsx("span", { style: {
+                                width: 12,
+                                opacity: 0.6,
+                                marginRight: 4,
+                                cursor: 'pointer',
+                                visibility: hasChildren ? 'visible' : 'hidden'
+                            }, onClick: (e) => hasChildren && toggleCollapse(e, node.id), children: isCollapsed ? '▶' : '▼' }), !isRoot && _jsx("span", { style: { marginRight: 4, opacity: 0.4 }, children: "\u22EE\u22EE" }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: (_a = node.name) !== null && _a !== void 0 ? _a : node.id })] }), !isCollapsed && node.children && node.children.map(child => renderNode(child, depth + 1))] }, node.id));
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: Object.assign(Object.assign({}, tree.panel), { width: collapsed ? 'auto' : 224 }), onClick: () => { setContextMenu(null); setFileMenuOpen(false); }, children: [_jsxs("div", { style: base.header, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { children: collapsed ? '▶' : '▼' }), _jsx("span", { children: "Scene" })] }), !collapsed && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [_jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10, opacity: canUndo ? 1 : 0.4 }), onClick: (e) => { e.stopPropagation(); onUndo === null || onUndo === void 0 ? void 0 : onUndo(); }, disabled: !canUndo, title: "Undo", children: "\u21B6" }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10, opacity: canRedo ? 1 : 0.4 }), onClick: (e) => { e.stopPropagation(); onRedo === null || onRedo === void 0 ? void 0 : onRedo(); }, disabled: !canRedo, title: "Redo", children: "\u21B7" }), _jsxs("div", { style: { position: 'relative' }, children: [_jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10 }), onClick: (e) => { e.stopPropagation(); setFileMenuOpen(!fileMenuOpen); }, title: "File", children: "\u22EE" }), fileMenuOpen && (_jsx(FileMenu, { prefabData: prefabData, setPrefabData: setPrefabData, onClose: () => setFileMenuOpen(false) }))] })] }))] }), !collapsed && _jsx("div", { style: tree.scroll, children: renderNode(prefabData.root) })] }), contextMenu && (_jsxs("div", { style: Object.assign(Object.assign({}, menu.container), { top: contextMenu.y, left: contextMenu.x }), onClick: (e) => e.stopPropagation(), onPointerLeave: () => setContextMenu(null), children: [_jsx("button", { style: menu.item, onClick: () => handleAddChild(contextMenu.nodeId), children: "Add Child" }), contextMenu.nodeId !== prefabData.root.id && (_jsxs(_Fragment, { children: [_jsx("button", { style: menu.item, onClick: () => handleDuplicate(contextMenu.nodeId), children: "Duplicate" }), _jsx("button", { style: Object.assign(Object.assign({}, menu.item), menu.danger), onClick: () => handleDelete(contextMenu.nodeId), children: "Delete" })] }))] }))] }));
+}
+function FileMenu({ prefabData, setPrefabData, onClose }) {
+    const { onScreenshot, onExportGLB } = useEditorContext();
+    const handleLoad = () => __awaiter(this, void 0, void 0, function* () {
+        const loadedPrefab = yield loadJson();
+        if (!loadedPrefab)
+            return;
+        setPrefabData(loadedPrefab);
+        onClose();
+    });
+    const handleSave = () => {
+        saveJson(prefabData, "prefab");
+        onClose();
+    };
+    const handleLoadIntoScene = () => __awaiter(this, void 0, void 0, function* () {
+        const loadedPrefab = yield loadJson();
+        if (!loadedPrefab)
+            return;
+        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, prev.root.id, root => {
+                var _a;
+                return (Object.assign(Object.assign({}, root), { children: [...((_a = root.children) !== null && _a !== void 0 ? _a : []), regenerateIds(loadedPrefab.root)] }));
+            }) })));
+        onClose();
+    });
+    return (_jsxs("div", { style: Object.assign(Object.assign({}, menu.container), { top: 28, right: 0 }), onClick: (e) => e.stopPropagation(), children: [_jsx("button", { style: menu.item, onClick: handleLoad, children: "\uD83D\uDCE5 Load Prefab JSON" }), _jsx("button", { style: menu.item, onClick: handleSave, children: "\uD83D\uDCBE Save Prefab JSON" }), _jsx("button", { style: menu.item, onClick: handleLoadIntoScene, children: "\uD83D\uDCC2 Load into Scene" }), _jsx("button", { style: menu.item, onClick: () => { onScreenshot === null || onScreenshot === void 0 ? void 0 : onScreenshot(); onClose(); }, children: "\uD83D\uDCF8 Screenshot" }), _jsx("button", { style: menu.item, onClick: () => { onExportGLB === null || onExportGLB === void 0 ? void 0 : onExportGLB(); onClose(); }, children: "\uD83D\uDCE6 Export GLB" })] }));
+}

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

@@ -0,0 +1,14 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Prefab } from "./types";
+declare function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, basePath, onUndo, onRedo, canUndo, canRedo }: {
+    prefabData?: Prefab;
+    setPrefabData?: Dispatch<SetStateAction<Prefab>>;
+    selectedId: string | null;
+    setSelectedId: Dispatch<SetStateAction<string | null>>;
+    basePath?: string;
+    onUndo?: () => void;
+    onRedo?: () => void;
+    canUndo?: boolean;
+    canRedo?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export default EditorUI;