react-three-game 0.0.58 → 0.0.60

package/.github/copilot-instructions.md

@@ -44,7 +44,7 @@ const MyComponent: Component = {
 
 ## Usage Modes
 
-**GameCanvas + PrefabRoot**: Pure renderer for embedding prefab data in standard R3F applications. Minimal wrapper - just renders the prefab as Three.js objects. Requires manual `<Physics>` setup. Physics always active. Use this to integrate prefabs into larger R3F scenes.
+**PrefabRoot**: Pure renderer for embedding prefab data in standard R3F applications. Render it inside a regular `@react-three/fiber` `Canvas`. `GameCanvas` provides the WebGPU canvas setup. Add a `Physics` wrapper to enable physics. Use this to integrate prefabs into larger R3F scenes.
 
 **PrefabEditor**: Managed scene with editor UI and play/pause controls for physics. Full authoring tool for level design and prototyping. Includes canvas, physics, transform gizmos, and inspector. Physics only runs in play mode. Can pass R3F components as children.
 

package/README.md

@@ -16,47 +16,58 @@ npx skills add https://github.com/prnthh/react-three-game-skill
 
 ## Usage Modes
 
-**GameCanvas + PrefabRoot**: Pure renderer for embedding prefab data in standard R3F applications. Minimal wrapper - just renders the prefab as Three.js objects. Requires manual `<Physics>` setup. Physics always active. Use this to integrate prefabs into larger R3F scenes.
+**PrefabRoot**: Pure renderer for embedding prefab data in standard R3F applications. Render it inside a regular `@react-three/fiber` `Canvas`. `GameCanvas` provides the WebGPU canvas setup. Add a `Physics` wrapper to enable physics. Use this to integrate prefabs into larger R3F scenes.
 
 **PrefabEditor**: Managed scene with editor UI and play/pause controls for physics. Full authoring tool for level design and prototyping. Includes canvas, physics, transform gizmos, and inspector. Physics only runs in play mode. Can pass R3F components as children.
 
 ## Basic Usage
 
 ```jsx
-import { Physics } from '@react-three/rapier';
-import { GameCanvas, PrefabRoot } from 'react-three-game';
-
-<GameCanvas>
-  <Physics>
-    <PrefabRoot data={{
-      root: {
-        id: "scene",
-        children: [
-          {
-            id: "ground",
-            components: {
-              transform: { type: "Transform", properties: { position: [0, 0, 0], rotation: [-1.57, 0, 0] } },
-              geometry: { type: "Geometry", properties: { geometryType: "plane", args: [50, 50] } },
-              material: { type: "Material", properties: { color: "#3a3" } },
-              physics: { type: "Physics", properties: { type: "fixed" } }
-            }
-          },
-          {
-            id: "ball",
-            components: {
-              transform: { type: "Transform", properties: { position: [0, 5, 0] } },
-              geometry: { type: "Geometry", properties: { geometryType: "sphere" } },
-              material: { type: "Material", properties: { color: "#f66" } },
-              physics: { type: "Physics", properties: { type: "dynamic" } }
-            }
-          }
-        ]
+import { Physics } from "@react-three/rapier";
+import { GameCanvas, PrefabRoot } from "react-three-game";
+
+const sceneData = {
+  root: {
+    id: "scene",
+    children: [
+      {
+        id: "ground",
+        components: {
+          transform: { type: "Transform", properties: { position: [0, 0, 0], rotation: [-1.57, 0, 0] } },
+          geometry: { type: "Geometry", properties: { geometryType: "plane", args: [50, 50] } },
+          material: { type: "Material", properties: { color: "#3a3" } },
+          physics: { type: "Physics", properties: { type: "fixed" } }
+        }
+      },
+      {
+        id: "ball",
+        components: {
+          transform: { type: "Transform", properties: { position: [0, 5, 0] } },
+          geometry: { type: "Geometry", properties: { geometryType: "sphere" } },
+          material: { type: "Material", properties: { color: "#f66" } },
+          physics: { type: "Physics", properties: { type: "dynamic" } }
+        }
       }
-    }} />
-  </Physics>
-</GameCanvas>
+    ]
+  }
+};
+
+export default function Home() {
+  return (
+    <main className="flex h-screen w-screen">
+      <GameCanvas>
+        <Physics>
+          <ambientLight intensity={0.8} />
+          <PrefabRoot data={sceneData} />
+        </Physics>
+      </GameCanvas>
+    </main>
+  );
+}
 ```
 
+`GameCanvas` provides the library's WebGPU canvas setup.
+
 ## GameObject Schema
 
 ```typescript

package/dist/index.d.ts

@@ -16,5 +16,5 @@ export { gameEvents, useGameEvent, getEntityIdFromRigidBody } from './tools/pref
 export type { GameEventType, GameEventMap, GameEventPayload, PhysicsEventType, PhysicsEventPayload } from './tools/prefabeditor/GameEvents';
 export { entityEvents, useEntityEvent } from './tools/prefabeditor/GameEvents';
 export type { EntityEventType, EntityEventPayload } from './tools/prefabeditor/GameEvents';
-export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
+export * from './tools/dragdrop';
 export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';

package/dist/index.js

@@ -17,5 +17,5 @@ export { gameEvents, useGameEvent, getEntityIdFromRigidBody } from './tools/pref
 // Backward compatibility aliases
 export { entityEvents, useEntityEvent } from './tools/prefabeditor/GameEvents';
 // Asset Tools
-export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
+export * from './tools/dragdrop';
 export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';

package/dist/tools/assetviewer/page.js

@@ -3,7 +3,7 @@ import { Canvas } from "@react-three/fiber";
 import { OrbitControls, View, PerspectiveCamera } from "@react-three/drei";
 import { Component as ReactComponent, Suspense, useEffect, useState, useRef } from "react";
 import { TextureLoader } from "three";
-import { loadModel } from "../dragdrop/modelLoader";
+import { loadModel } from "../dragdrop";
 class ErrorBoundary extends ReactComponent {
     constructor(props) {
         super(props);

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

@@ -1,9 +1,22 @@
-interface DragDropLoaderProps {
-    onModelLoaded: (model: any, filename: string) => void;
+import type { HTMLAttributes, ReactNode } from "react";
+import type { LoadedModel, LoadedTexture } from "./modelLoader";
+export interface AssetLoadOptions {
+    onModelLoaded?: (model: LoadedModel, filename: string, file: File) => void | Promise<void>;
+    onTextureLoaded?: (texture: LoadedTexture, filename: string, file: File) => void | Promise<void>;
+    onUnhandledFile?: (file: File) => void | Promise<void>;
+    onFilesLoaded?: (files: File[]) => void | Promise<void>;
+    onLoadError?: (error: unknown, filename: string, file: File) => void | Promise<void>;
 }
-export declare function DragDropLoader({ onModelLoaded }: DragDropLoaderProps): null;
-interface FilePickerProps {
-    onModelLoaded: (model: any, filename: string) => void;
+type DivProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onDrop" | "onDragOver">;
+export interface DragDropLoaderProps extends AssetLoadOptions, DivProps {
+    children?: ReactNode;
 }
-export declare function FilePicker({ onModelLoaded }: FilePickerProps): import("react/jsx-runtime").JSX.Element;
+export interface FilePickerProps extends AssetLoadOptions, DivProps {
+    accept?: string;
+    children?: ReactNode;
+    multiple?: boolean;
+}
+export declare function loadFiles(files: File[], { onModelLoaded, onTextureLoaded, onUnhandledFile, onFilesLoaded, onLoadError }: AssetLoadOptions): Promise<void>;
+export declare function DragDropLoader({ children, ...divProps }: DragDropLoaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilePicker({ accept, children, multiple, ...divProps }: FilePickerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/tools/dragdrop/DragDropLoader.js

@@ -7,49 +7,104 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// DragDropLoader.tsx
-import { useEffect } from "react";
-import { parseModelFromFile } from "./modelLoader";
-function handleFiles(files, onModelLoaded) {
-    files.forEach((file) => __awaiter(this, void 0, void 0, function* () {
-        const result = yield parseModelFromFile(file);
-        if (result.success && result.model) {
-            onModelLoaded(result.model, file.name);
+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]];
         }
-        else {
-            console.error("Model parse error:", result.error);
-        }
-    }));
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { canParseModelFile, canParseTextureFile, parseModelFromFile, parseTextureFromFile } from "./modelLoader";
+const DEFAULT_ACCEPT = ".glb,.gltf,.fbx,.png,.jpg,.jpeg,.webp,.gif,.bmp,.svg";
+function getFiles(fileList) {
+    return fileList ? Array.from(fileList) : [];
 }
-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 loadFiles(files_1, _a) {
+    return __awaiter(this, arguments, void 0, function* (files, { onModelLoaded, onTextureLoaded, onUnhandledFile, onFilesLoaded, onLoadError }) {
+        yield Promise.all(files.map((file) => __awaiter(this, void 0, void 0, function* () {
+            const shouldParseModel = canParseModelFile(file);
+            const shouldParseTexture = canParseTextureFile(file);
+            if (shouldParseModel) {
+                const result = yield parseModelFromFile(file);
+                if (result.success && result.model) {
+                    yield (onModelLoaded === null || onModelLoaded === void 0 ? void 0 : onModelLoaded(result.model, file.name, file));
+                    return;
+                }
+                if (onLoadError) {
+                    yield onLoadError(result.error, file.name, file);
+                    return;
+                }
+                console.error("Model parse error:", result.error);
+                return;
+            }
+            if (shouldParseTexture) {
+                const result = yield parseTextureFromFile(file);
+                if (result.success && result.texture) {
+                    yield (onTextureLoaded === null || onTextureLoaded === void 0 ? void 0 : onTextureLoaded(result.texture, file.name, file));
+                    return;
+                }
+                if (onLoadError) {
+                    yield onLoadError(result.error, file.name, file);
+                    return;
+                }
+                console.error("Texture parse error:", result.error);
+                return;
+            }
+            if (onUnhandledFile) {
+                yield onUnhandledFile(file);
+            }
+        })));
+        yield (onFilesLoaded === null || onFilesLoaded === void 0 ? void 0 : onFilesLoaded(files));
+    });
+}
+function reportFileLoadError(error) {
+    console.error("File load error:", error);
 }
-export function FilePicker({ onModelLoaded }) {
-    function onChange(e) {
-        const files = e.target.files ? Array.from(e.target.files) : [];
-        handleFiles(files, onModelLoaded);
+function createLoadHandlers(options) {
+    return {
+        onFilesLoaded: options.onFilesLoaded,
+        onModelLoaded: options.onModelLoaded,
+        onTextureLoaded: options.onTextureLoaded,
+        onUnhandledFile: options.onUnhandledFile,
+        onLoadError: options.onLoadError,
+    };
+}
+export function DragDropLoader(_a) {
+    var { children } = _a, divProps = __rest(_a, ["children"]);
+    const loadOptions = createLoadHandlers(divProps);
+    function handleDrop(event) {
+        var _a;
+        event.preventDefault();
+        event.stopPropagation();
+        void loadFiles(getFiles((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files), loadOptions).catch(reportFileLoadError);
+    }
+    function handleDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    return (_jsx("div", Object.assign({}, divProps, { onDrop: handleDrop, onDragOver: handleDragOver, children: children })));
+}
+export function FilePicker(_a) {
+    var { accept = DEFAULT_ACCEPT, children, multiple = true } = _a, divProps = __rest(_a, ["accept", "children", "multiple"]);
+    const inputRef = useRef(null);
+    const { onClick } = divProps, wrapperProps = __rest(divProps, ["onClick"]);
+    const loadOptions = createLoadHandlers(divProps);
+    function onChange(event) {
+        void loadFiles(getFiles(event.target.files), loadOptions).catch(reportFileLoadError);
+        event.target.value = "";
+    }
+    function handleClick(event) {
+        var _a;
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (!event.defaultPrevented) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
     }
-    // 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" })] }));
+    return (_jsxs("div", Object.assign({}, wrapperProps, { onClick: handleClick, children: [_jsx("input", { ref: inputRef, type: "file", accept: accept, multiple: multiple, onChange: onChange, hidden: true }), children !== null && children !== void 0 ? children : "Select Files"] })));
 }

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

@@ -0,0 +1,4 @@
+export { DragDropLoader, FilePicker, loadFiles } from "./DragDropLoader";
+export type { AssetLoadOptions, DragDropLoaderProps, FilePickerProps } from "./DragDropLoader";
+export { loadModel, loadTexture, parseModelFromFile, parseTextureFromFile } from "./modelLoader";
+export type { LoadedModel, LoadedTexture, ModelLoadResult, ProgressCallback, TextureLoadResult } from "./modelLoader";

package/dist/tools/dragdrop/index.js

@@ -0,0 +1,2 @@
+export { DragDropLoader, FilePicker, loadFiles } from "./DragDropLoader";
+export { loadModel, loadTexture, parseModelFromFile, parseTextureFromFile } from "./modelLoader";

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

@@ -1,12 +1,20 @@
+import type { Object3D, Texture } from "three";
+export type LoadedModel = Object3D;
+export type LoadedTexture = Texture;
 export type ModelLoadResult = {
     success: boolean;
-    model?: any;
-    error?: any;
+    model?: LoadedModel;
+    error?: unknown;
+};
+export type TextureLoadResult = {
+    success: boolean;
+    texture?: LoadedTexture;
+    error?: unknown;
 };
 export type ProgressCallback = (filename: string, loaded: number, total: number) => void;
-/**
- * Parse a model from a File object (e.g. from drag-drop or file picker).
- * Returns the parsed Three.js Object3D scene.
- */
+export declare function canParseModelFile(file: File | string): boolean;
+export declare function canParseTextureFile(file: File | string): boolean;
 export declare function parseModelFromFile(file: File): Promise<ModelLoadResult>;
+export declare function parseTextureFromFile(file: File): Promise<TextureLoadResult>;
 export declare function loadModel(filename: string, onProgress?: ProgressCallback): Promise<ModelLoadResult>;
+export declare function loadTexture(filename: string): Promise<TextureLoadResult>;

package/dist/tools/dragdrop/modelLoader.js

@@ -7,82 +7,134 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { GLTFLoader, FBXLoader, DRACOLoader } from "three/examples/jsm/Addons.js";
-// Singleton loader instances
+import { SRGBColorSpace, TextureLoader } from "three";
+import { DRACOLoader, FBXLoader, GLTFLoader } from "three/examples/jsm/Addons.js";
 const dracoLoader = new DRACOLoader();
 dracoLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
 const gltfLoader = new GLTFLoader();
 gltfLoader.setDRACOLoader(dracoLoader);
 const fbxLoader = new FBXLoader();
-/**
- * Parse a model from a File object (e.g. from drag-drop or file picker).
- * Returns the parsed Three.js Object3D scene.
- */
+const textureLoader = new TextureLoader();
+const TEXTURE_FILE_EXTENSIONS = [".png", ".jpg", ".jpeg", ".webp", ".gif", ".bmp", ".svg"];
+function normalizeModelPath(name) {
+    return name.split(/[?#]/, 1)[0].toLowerCase();
+}
+function getModelFileKind(name) {
+    const normalizedName = normalizeModelPath(name);
+    if (normalizedName.endsWith(".glb") || normalizedName.endsWith(".gltf")) {
+        return "gltf";
+    }
+    if (normalizedName.endsWith(".fbx")) {
+        return "fbx";
+    }
+    return null;
+}
+export function canParseModelFile(file) {
+    const filename = typeof file === "string" ? file : file.name;
+    return getModelFileKind(filename) !== null;
+}
+export function canParseTextureFile(file) {
+    const filename = typeof file === "string" ? file : file.name;
+    const normalizedName = normalizeModelPath(filename);
+    return TEXTURE_FILE_EXTENSIONS.some(extension => normalizedName.endsWith(extension));
+}
+function parseModelBuffer(arrayBuffer, sourceName) {
+    const modelFileKind = getModelFileKind(sourceName);
+    if (modelFileKind === "gltf") {
+        return new Promise(resolve => {
+            gltfLoader.parse(arrayBuffer, "", gltf => {
+                resolve({ success: true, model: gltf.scene });
+            }, error => {
+                resolve({ success: false, error });
+            });
+        });
+    }
+    if (modelFileKind === "fbx") {
+        try {
+            const model = fbxLoader.parse(arrayBuffer, "");
+            return Promise.resolve({ success: true, model });
+        }
+        catch (error) {
+            return Promise.resolve({ success: false, error });
+        }
+    }
+    return Promise.resolve({ success: false, error: new Error(`Unsupported file format: ${sourceName}`) });
+}
 export function parseModelFromFile(file) {
-    return new Promise((resolve) => {
+    return new Promise(resolve => {
         const reader = new FileReader();
-        reader.onload = (event) => {
+        reader.onload = event => {
             var _a;
             const arrayBuffer = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
             if (!arrayBuffer) {
-                resolve({ success: false, error: new Error('Failed to read file') });
+                resolve({ success: false, error: new Error("Failed to read file") });
                 return;
             }
-            const name = file.name.toLowerCase();
-            if (name.endsWith('.glb') || name.endsWith('.gltf')) {
-                gltfLoader.parse(arrayBuffer, '', (gltf) => {
-                    resolve({ success: true, model: gltf.scene });
-                }, (error) => {
-                    resolve({ success: false, error });
-                });
-            }
-            else if (name.endsWith('.fbx')) {
-                try {
-                    const model = fbxLoader.parse(arrayBuffer, '');
-                    resolve({ success: true, model });
-                }
-                catch (error) {
-                    resolve({ success: false, error });
-                }
-            }
-            else {
-                resolve({ success: false, error: new Error(`Unsupported file format: ${file.name}`) });
-            }
+            void parseModelBuffer(arrayBuffer, file.name).then(resolve);
         };
         reader.onerror = () => resolve({ success: false, error: reader.error });
         reader.readAsArrayBuffer(file);
     });
 }
+export function parseTextureFromFile(file) {
+    return new Promise(resolve => {
+        const url = URL.createObjectURL(file);
+        textureLoader.load(url, texture => {
+            texture.colorSpace = SRGBColorSpace;
+            resolve({ success: true, texture });
+            URL.revokeObjectURL(url);
+        }, undefined, error => {
+            resolve({ success: false, error });
+            URL.revokeObjectURL(url);
+        });
+    });
+}
 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);
+            const modelFileKind = getModelFileKind(filename);
+            if (modelFileKind === "gltf") {
+                return new Promise(resolve => {
+                    gltfLoader.load(fullPath, gltf => resolve({ success: true, model: gltf.scene }), progressEvent => {
+                        if (!onProgress) {
+                            return;
                         }
-                    }, (error) => resolve({ success: false, error }));
+                        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);
+            if (modelFileKind === "fbx") {
+                return new Promise(resolve => {
+                    fbxLoader.load(fullPath, model => resolve({ success: true, model }), progressEvent => {
+                        if (!onProgress) {
+                            return;
                         }
-                    }, (error) => resolve({ success: false, error }));
+                        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 };
+        }
+    });
+}
+export function loadTexture(filename) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            if (!canParseTextureFile(filename)) {
                 return { success: false, error: new Error(`Unsupported file format: ${filename}`) };
             }
+            return yield new Promise(resolve => {
+                textureLoader.load(filename, texture => {
+                    texture.colorSpace = SRGBColorSpace;
+                    resolve({ success: true, texture });
+                }, undefined, error => resolve({ success: false, error }));
+            });
         }
         catch (error) {
             return { success: false, error };

package/dist/tools/dragdrop/page.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } 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 { DragDropLoader } from "./index";
 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, {})] }) }) })] }));
+    return (_jsx(DragDropLoader, { onModelLoaded: model => setModels(prev => [...prev, model]), className: "w-full items-center justify-items-center min-h-screen", style: { height: "100vh" }, children: _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/PrefabEditor.js

@@ -7,7 +7,7 @@ import EditorUI from "./EditorUI";
 import { base, toolbar } from "./styles";
 import { EditorContext } from "./EditorContext";
 import { exportGLB, createModelNode, createImageNode } from "./utils";
-import { parseModelFromFile } from "../dragdrop/modelLoader";
+import { loadFiles } from "../dragdrop";
 const DEFAULT_PREFAB = {
     id: "prefab-default",
     name: "New Prefab",
@@ -120,8 +120,6 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
     }, []);
     // --- Drag & drop files to add nodes ---
     useEffect(() => {
-        const IMAGE_EXTS = ['png', 'jpg', 'jpeg', 'webp', 'gif', 'bmp', 'svg'];
-        const MODEL_EXTS = ['glb', 'gltf', 'fbx'];
         function handleDragOver(e) {
             e.preventDefault();
             e.stopPropagation();
@@ -131,39 +129,32 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
             e.preventDefault();
             e.stopPropagation();
             const files = ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) ? Array.from(e.dataTransfer.files) : [];
-            files.forEach(file => {
-                var _a, _b;
-                const ext = (_a = file.name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-                if (!ext)
-                    return;
-                const baseName = file.name.replace(/\.[^.]+$/, '');
-                if (MODEL_EXTS.includes(ext)) {
-                    const modelPath = `models/${file.name}`;
+            void loadFiles(files, {
+                onModelLoaded: (model, filename) => {
+                    var _a;
+                    const modelPath = `models/${filename}`;
+                    const baseName = filename.replace(/\.[^.]+$/, '');
                     const newNode = createModelNode(modelPath, baseName);
                     updatePrefab(prev => {
                         var _a;
                         return (Object.assign(Object.assign({}, prev), { root: Object.assign(Object.assign({}, prev.root), { children: [...((_a = prev.root.children) !== null && _a !== void 0 ? _a : []), newNode] }) }));
                     });
-                    parseModelFromFile(file).then(result => {
-                        var _a;
-                        if (result.success && result.model) {
-                            (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.injectModel(modelPath, result.model);
-                        }
-                        else {
-                            console.error('Drop parse error:', result.error);
-                        }
-                    });
-                }
-                else if (IMAGE_EXTS.includes(ext)) {
-                    const texturePath = `textures/${file.name}`;
+                    (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.injectModel(modelPath, model);
+                },
+                onTextureLoaded: (texture, filename) => {
+                    var _a;
+                    const texturePath = `textures/${filename}`;
+                    const baseName = filename.replace(/\.[^.]+$/, '');
                     const newNode = createImageNode(texturePath, baseName);
                     updatePrefab(prev => {
                         var _a;
                         return (Object.assign(Object.assign({}, prev), { root: Object.assign(Object.assign({}, prev.root), { children: [...((_a = prev.root.children) !== null && _a !== void 0 ? _a : []), newNode] }) }));
                     });
-                    // Inject a blob URL texture so it renders immediately
-                    (_b = prefabRootRef.current) === null || _b === void 0 ? void 0 : _b.injectTexture(texturePath, file);
-                }
+                    (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.injectTexture(texturePath, texture);
+                },
+                onLoadError: error => {
+                    console.error('Drop asset error:', error);
+                },
             });
         }
         window.addEventListener('dragover', handleDragOver);

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

@@ -5,7 +5,7 @@ export interface PrefabRootRef {
     root: Group | null;
     rigidBodyRefs: Map<string, any>;
     injectModel: (filename: string, model: Object3D) => void;
-    injectTexture: (filename: string, file: File) => void;
+    injectTexture: (filename: string, texture: Texture) => void;
     focusNode: (nodeId: string) => void;
 }
 export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{