react-three-game 0.0.54 → 0.0.56

package/dist/shared/ContactShadow.d.ts

@@ -0,0 +1,8 @@
+interface ContactShadowProps {
+    opacity?: number;
+    blur?: number;
+    scale?: number;
+    yOffset?: number;
+}
+declare const ContactShadow: ({ opacity, blur, scale, yOffset, }: ContactShadowProps) => import("react/jsx-runtime").JSX.Element;
+export default ContactShadow;

package/dist/shared/ContactShadow.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import * as THREE from "three/webgpu";
+import { float, uv, vec3, smoothstep, uniform, length, } from "three/tsl";
+const ContactShadow = ({ opacity = 0.4, blur = 2.5, scale = 1.2, yOffset = 0.05, }) => {
+    const material = useMemo(() => {
+        const mat = new THREE.MeshBasicNodeMaterial();
+        mat.transparent = true;
+        mat.depthWrite = false;
+        mat.depthTest = true;
+        mat.side = THREE.DoubleSide;
+        mat.polygonOffset = true;
+        mat.polygonOffsetFactor = -1;
+        mat.polygonOffsetUnits = -1;
+        const uOpacity = uniform(opacity);
+        const uBlur = uniform(blur);
+        // UVs centered around origin
+        const centeredUV = uv().sub(0.5).mul(2.0);
+        // IMPORTANT: use functional length(), not .length()
+        const dist = length(centeredUV);
+        const innerRadius = float(0.0);
+        const outerRadius = float(1.0);
+        const blurAmount = uBlur.div(10.0);
+        const alpha = smoothstep(outerRadius, innerRadius.add(blurAmount), dist).mul(uOpacity);
+        mat.colorNode = vec3(0.0, 0.0, 0.0);
+        mat.opacityNode = alpha;
+        return mat;
+    }, [opacity, blur]);
+    return (_jsx("mesh", { rotation: [-Math.PI / 2, 0, 0], position: [0, yOffset, 0], material: material, renderOrder: 1, children: _jsx("planeGeometry", { args: [scale, scale] }) }));
+};
+export default ContactShadow;

package/dist/tools/assetviewer/page.js

@@ -156,7 +156,7 @@ export function SingleSoundViewer({ file, basePath = "" }) {
 // 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',
+            position: 'fixed',
             top: 0,
             left: 0,
             width: '100vw',

package/dist/tools/dragdrop/DragDropLoader.js

@@ -1,49 +1,26 @@
+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, 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
+import { parseModelFromFile } from "./modelLoader";
 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);
-            });
+    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);
         }
-    };
-    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);
+        else {
+            console.error("Model parse error:", result.error);
         }
-    };
-    reader.readAsArrayBuffer(file);
+    }));
 }
 export function DragDropLoader({ onModelLoaded }) {
     useEffect(() => {

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

@@ -4,4 +4,9 @@ export type ModelLoadResult = {
     error?: any;
 };
 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 parseModelFromFile(file: File): Promise<ModelLoadResult>;
 export declare function loadModel(filename: string, onProgress?: ProgressCallback): Promise<ModelLoadResult>;

package/dist/tools/dragdrop/modelLoader.js

@@ -14,6 +14,45 @@ 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.
+ */
+export function parseModelFromFile(file) {
+    return new Promise((resolve) => {
+        const reader = new FileReader();
+        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') });
+                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}`) });
+            }
+        };
+        reader.onerror = () => resolve({ success: false, error: reader.error });
+        reader.readAsArrayBuffer(file);
+    });
+}
 export function loadModel(filename, onProgress) {
     return __awaiter(this, void 0, void 0, function* () {
         try {

package/dist/tools/prefabeditor/EditorTree.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { getComponent } from './components/ComponentRegistry';
-import { base, tree, menu } from './styles';
+import { base, colors, 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 }) {
@@ -149,20 +149,7 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
                                 handleToggleDisabled(node.id);
                             }, title: node.disabled ? 'Enable' : 'Disable', children: node.disabled ? '◎' : '◉' }))] }), !isCollapsed && node.children && node.children.map(child => renderNode(child, depth + 1))] }, node.id));
     };
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
-.tree-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
-.tree-scroll::-webkit-scrollbar-track { background: transparent; }
-.tree-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }
-            ` }), _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 && (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: '4px 4px', borderBottom: '1px solid rgba(255,255,255,0.1)' }, children: _jsx("input", { type: "text", placeholder: "Search nodes...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onClick: (e) => e.stopPropagation(), style: {
-                                        width: '100%',
-                                        padding: '4px 8px',
-                                        background: 'rgba(255,255,255,0.05)',
-                                        border: '1px solid rgba(255,255,255,0.1)',
-                                        borderRadius: 3,
-                                        color: 'inherit',
-                                        fontSize: 11,
-                                        outline: 'none',
-                                    } }) }), _jsx("div", { className: "tree-scroll", 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" })] }))] }))] }));
+    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 && (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: '4px 4px', borderBottom: `1px solid ${colors.borderLight}` }, children: _jsx("input", { type: "text", placeholder: "Search nodes...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onClick: (e) => e.stopPropagation(), style: Object.assign(Object.assign({}, base.input), { padding: '4px 8px' }) }) }), _jsx("div", { className: "tree-scroll", 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();
@@ -187,5 +174,5 @@ function FileMenu({ prefabData, setPrefabData, onClose }) {
             }) })));
         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" })] }));
+    return (_jsxs("div", { style: Object.assign(Object.assign({}, menu.container), { position: 'absolute', 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.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect } from 'react';
 import EditorTree from './EditorTree';
 import { getAllComponents } from './components/ComponentRegistry';
-import { base, inspector } from './styles';
+import { base, colors, inspector, scrollbarCSS, componentCard } from './styles';
 import { findNode, updateNode, deleteNode } from './utils';
 function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, basePath, onUndo, onRedo, canUndo, canRedo }) {
     const [collapsed, setCollapsed] = useState(false);
@@ -29,12 +29,7 @@ function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, basePa
         setSelectedId(null);
     };
     const selectedNode = selectedId && prefabData ? findNode(prefabData.root, selectedId) : null;
-    return _jsxs(_Fragment, { children: [_jsx("style", { children: `
-.prefab-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
-.prefab-scroll::-webkit-scrollbar-track { background: transparent; }
-.prefab-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }
-.prefab-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent; }
-        ` }), _jsxs("div", { style: inspector.panel, children: [_jsxs("div", { style: base.header, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { children: "Inspector" }), _jsx("span", { children: collapsed ? '◀' : '▼' })] }), !collapsed && selectedNode && (_jsx(NodeInspector, { node: selectedNode, updateNode: updateNodeHandler, deleteNode: deleteNodeHandler, basePath: basePath }))] }), _jsx("div", { style: { position: 'absolute', top: 8, left: 8, zIndex: 20 }, children: _jsx(EditorTree, { prefabData: prefabData, setPrefabData: setPrefabData, selectedId: selectedId, setSelectedId: setSelectedId, onUndo: onUndo, onRedo: onRedo, canUndo: canUndo, canRedo: canRedo }) })] });
+    return _jsxs(_Fragment, { children: [_jsx("style", { children: scrollbarCSS }), _jsxs("div", { style: inspector.panel, children: [_jsxs("div", { style: base.header, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { children: "Inspector" }), _jsx("span", { children: collapsed ? '◀' : '▼' })] }), !collapsed && selectedNode && (_jsx(NodeInspector, { node: selectedNode, updateNode: updateNodeHandler, deleteNode: deleteNodeHandler, basePath: basePath }))] }), _jsx("div", { style: { position: 'absolute', top: 8, left: 8, zIndex: 20 }, children: _jsx(EditorTree, { prefabData: prefabData, setPrefabData: setPrefabData, selectedId: selectedId, setSelectedId: setSelectedId, onUndo: onUndo, onRedo: onRedo, canUndo: canUndo, canRedo: canRedo }) })] });
 }
 function NodeInspector({ node, updateNode, deleteNode, basePath }) {
     var _a;
@@ -47,13 +42,13 @@ function NodeInspector({ node, updateNode, deleteNode, basePath }) {
         if (!newAvailable.includes(addType))
             setAddType(newAvailable[0] || "");
     }, [Object.keys(node.components || {}).join(',')]);
-    return _jsxs("div", { style: Object.assign(Object.assign({}, inspector.content), { paddingRight: 2 }), className: "prefab-scroll", children: [_jsxs("div", { style: base.section, children: [_jsxs("div", { style: { display: "flex", marginBottom: 8, alignItems: 'center', gap: 8 }, children: [_jsx("div", { style: { fontSize: 10, color: '#888', wordBreak: 'break-all', border: '1px solid rgba(255,255,255,0.1)', padding: '2px 4px', borderRadius: 4, flex: 1 }, children: node.id }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), base.btnDanger), title: "Delete Node", onClick: deleteNode, children: "\u274C" })] }), _jsx("input", { style: base.input, value: (_a = node.name) !== null && _a !== void 0 ? _a : "", placeholder: 'Node name', onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { name: e.target.value }))) })] }), _jsxs("div", { style: base.section, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }, children: _jsx("div", { style: base.label, children: "Components" }) }), node.components && Object.entries(node.components).map(([key, comp]) => {
+    return _jsxs("div", { style: Object.assign(Object.assign({}, inspector.content), { paddingRight: 2 }), className: "prefab-scroll", children: [_jsxs("div", { style: base.section, children: [_jsxs("div", { style: { display: "flex", marginBottom: 8, alignItems: 'center', gap: 8 }, children: [_jsx("div", { style: { fontSize: 10, color: colors.textDim, wordBreak: 'break-all', border: `1px solid ${colors.border}`, padding: '2px 6px', borderRadius: 3, flex: 1, fontFamily: 'monospace' }, children: node.id }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), base.btnDanger), title: "Delete Node", onClick: deleteNode, children: "\u274C" })] }), _jsx("input", { style: base.input, value: (_a = node.name) !== null && _a !== void 0 ? _a : "", placeholder: 'Node name', onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { name: e.target.value }))) })] }), _jsxs("div", { style: base.section, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }, children: _jsx("div", { style: base.label, children: "Components" }) }), node.components && Object.entries(node.components).map(([key, comp]) => {
                         if (!comp)
                             return null;
                         const def = ALL_COMPONENTS[comp.type];
                         if (!def)
-                            return _jsxs("div", { style: { color: '#ff8888', fontSize: 11 }, children: ["Unknown: ", comp.type] }, key);
-                        return (_jsxs("div", { style: { marginBottom: 8, backgroundColor: 'rgba(255, 255, 255, 0.1)', padding: 8, borderRadius: 4 }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }, children: [_jsx("div", { style: { fontSize: 11, fontWeight: 500 }, children: key }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px' }), title: "Remove Component", onClick: () => updateNode(n => {
+                            return _jsxs("div", { style: { color: colors.danger, fontSize: 11 }, children: ["Unknown: ", comp.type] }, key);
+                        return (_jsxs("div", { style: componentCard.container, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }, children: [_jsx("div", { style: { fontSize: 11, fontWeight: 500 }, children: key }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px' }), title: "Remove Component", onClick: () => updateNode(n => {
                                                 const _a = n.components || {}, _b = key, _ = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
                                                 return Object.assign(Object.assign({}, n), { components: rest });
                                             }), children: "\u2715" })] }), def.Editor && (_jsx(def.Editor, { component: comp, node: node, onUpdate: (newProps) => updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: Object.assign(Object.assign({}, comp), { properties: Object.assign(Object.assign({}, comp.properties), newProps) }) }) }))), basePath: basePath }))] }, key));

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -6,7 +6,8 @@ import { Physics } from "@react-three/rapier";
 import EditorUI from "./EditorUI";
 import { base, toolbar } from "./styles";
 import { EditorContext } from "./EditorContext";
-import { exportGLB } from "./utils";
+import { exportGLB, createModelNode, createImageNode } from "./utils";
+import { parseModelFromFile } from "../dragdrop/modelLoader";
 const DEFAULT_PREFAB = {
     id: "prefab-default",
     name: "New Prefab",
@@ -111,6 +112,61 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
         if (canvas)
             canvasRef.current = canvas;
     }, []);
+    // --- 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();
+        }
+        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) : [];
+            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}`;
+                    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}`;
+                    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);
+                }
+            });
+        }
+        window.addEventListener('dragover', handleDragOver);
+        window.addEventListener('drop', handleDrop);
+        return () => {
+            window.removeEventListener('dragover', handleDragOver);
+            window.removeEventListener('drop', handleDrop);
+        };
+    }, [loadedPrefab]);
     useImperativeHandle(ref, () => ({
         screenshot: handleScreenshot,
         exportGLB: handleExportGLB,

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

@@ -4,6 +4,8 @@ import { Prefab, GameObject as GameObjectType } from "./types";
 export interface PrefabRootRef {
     root: Group | null;
     rigidBodyRefs: Map<string, any>;
+    injectModel: (filename: string, model: Object3D) => void;
+    injectTexture: (filename: string, file: File) => void;
 }
 export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     editMode?: boolean;

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -33,10 +33,25 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
     const rigidBodyRefs = useRef(new Map());
     const [selectedObject, setSelectedObject] = useState(null);
     const rootRef = useRef(null);
+    const injectModel = useCallback((filename, model) => {
+        setModels(m => (Object.assign(Object.assign({}, m), { [filename]: model })));
+    }, []);
+    const injectTexture = useCallback((filename, file) => {
+        loading.current.add(filename);
+        const url = URL.createObjectURL(file);
+        const loader = new TextureLoader();
+        loader.load(url, tex => {
+            tex.colorSpace = SRGBColorSpace;
+            setTextures(t => (Object.assign(Object.assign({}, t), { [filename]: tex })));
+            URL.revokeObjectURL(url);
+        }, undefined, () => URL.revokeObjectURL(url));
+    }, []);
     useImperativeHandle(ref, () => ({
         root: rootRef.current,
-        rigidBodyRefs: rigidBodyRefs.current
-    }), []);
+        rigidBodyRefs: rigidBodyRefs.current,
+        injectModel,
+        injectTexture
+    }), [injectModel, injectTexture]);
     const registerRef = useCallback((id, obj) => {
         objectRefs.current[id] = obj;
         if (id === selectedId)

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

@@ -1,28 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
+import { colors } from '../styles';
 // ============================================================================
-// Shared Styles
+// Shared Styles (derived from shared color tokens)
 // ============================================================================
-// Shared styles
 const styles = {
     input: {
         width: '80px',
-        backgroundColor: 'rgba(0, 0, 0, 0.4)',
-        border: '1px solid rgba(34, 211, 238, 0.3)',
-        padding: '2px 4px',
-        fontSize: '10px',
-        color: 'rgba(165, 243, 252, 1)',
+        backgroundColor: colors.bgInput,
+        border: `1px solid ${colors.border}`,
+        padding: '3px 6px',
+        fontSize: '11px',
+        color: colors.text,
         fontFamily: 'monospace',
         outline: 'none',
         textAlign: 'right',
+        borderRadius: 3,
     },
     label: {
         display: 'block',
-        fontSize: '9px',
-        color: 'rgba(34, 211, 238, 0.9)',
+        fontSize: '10px',
+        color: colors.textMuted,
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
         marginBottom: 2,
+        fontWeight: 500,
     },
 };
 export function Input({ value, onChange, step, min, max, style, label }) {
@@ -161,23 +163,23 @@ export function Vector3Input({ label, value, onChange, snap }) {
         e.target.releasePointerCapture(e.pointerId);
     };
     const axes = [
-        { key: "x", color: 'rgba(248, 113, 113, 1)', index: 0 },
-        { key: "y", color: 'rgba(134, 239, 172, 1)', index: 1 },
-        { key: "z", color: 'rgba(96, 165, 250, 1)', index: 2 }
+        { key: "x", color: '#e06c75', index: 0 },
+        { key: "y", color: '#98c379', index: 1 },
+        { key: "z", color: '#61afef', index: 2 }
     ];
     return (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsx("label", { style: Object.assign(Object.assign({}, styles.label), { marginBottom: 4 }), children: label }), _jsx("div", { style: { display: 'flex', gap: 4 }, children: axes.map(({ key, color, index }) => (_jsxs("div", { style: {
                         flex: 1,
                         display: 'flex',
                         alignItems: 'center',
                         gap: 4,
-                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                        border: '1px solid rgba(34, 211, 238, 0.2)',
-                        borderRadius: 4,
+                        backgroundColor: colors.bgInput,
+                        border: `1px solid ${colors.border}`,
+                        borderRadius: 3,
                         padding: '4px 6px',
-                        minHeight: 32,
+                        minHeight: 28,
                     }, children: [_jsx("span", { style: {
-                                fontSize: '12px',
-                                fontWeight: 'bold',
+                                fontSize: 11,
+                                fontWeight: 600,
                                 color,
                                 width: 12,
                                 cursor: 'ew-resize',
@@ -186,8 +188,8 @@ export function Vector3Input({ label, value, onChange, snap }) {
                                 flex: 1,
                                 backgroundColor: 'transparent',
                                 border: 'none',
-                                fontSize: '12px',
-                                color: 'rgba(165, 243, 252, 1)',
+                                fontSize: 11,
+                                color: colors.text,
                                 fontFamily: 'monospace',
                                 outline: 'none',
                                 width: '100%',
@@ -209,11 +211,11 @@ export function ColorInput({ label, value, onChange }) {
     return (_jsxs("div", { children: [label && _jsx(Label, { children: label }), _jsxs("div", { style: { display: 'flex', gap: 4, justifyContent: 'space-between' }, children: [_jsx("input", { type: "color", style: {
                             height: 32,
                             width: 48,
-                            backgroundColor: 'transparent',
-                            border: '1px solid rgba(34, 211, 238, 0.3)',
-                            borderRadius: 4,
+                            backgroundColor: colors.bgInput,
+                            border: `1px solid ${colors.border}`,
+                            borderRadius: 3,
                             cursor: 'pointer',
-                            padding: 0,
+                            padding: 2,
                             flexShrink: 0,
                         }, value: value, onChange: e => onChange(e.target.value) }), _jsx("input", { type: "text", style: Object.assign({}, styles.input), value: value, onChange: e => onChange(e.target.value) })] })] }));
 }
@@ -224,8 +226,7 @@ export function BooleanInput({ label, value, onChange }) {
     return (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [label && _jsx(Label, { children: label }), _jsx("input", { type: "checkbox", style: {
                     height: 16,
                     width: 16,
-                    backgroundColor: 'rgba(0, 0, 0, 0.4)',
-                    border: '1px solid rgba(34, 211, 238, 0.3)',
+                    accentColor: colors.accent,
                     cursor: 'pointer',
                 }, checked: value, onChange: e => onChange(e.target.checked) })] }));
 }

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

@@ -13,6 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SingleTextureViewer, TextureListViewer } from '../../assetviewer/page';
 import { useEffect, useState } from 'react';
 import { FieldRenderer, Input } from './Input';
+import { colors } from '../styles';
 import { useMemo } from 'react';
 import { RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace, NearestFilter, LinearFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearMipmapNearestFilter, LinearMipmapLinearFilter } from 'three';
 function TexturePicker({ value, onChange, basePath }) {
@@ -24,9 +25,15 @@ function TexturePicker({ value, onChange, basePath }) {
             .then(data => setTextureFiles(Array.isArray(data) ? data : data.files || []))
             .catch(console.error);
     }, [basePath]);
-    return (_jsxs("div", { style: { maxHeight: 128, overflowY: 'auto', position: 'relative', display: 'flex', alignItems: 'center' }, children: [_jsx(SingleTextureViewer, { file: value || undefined, basePath: basePath }), _jsx("button", { onClick: () => setShowPicker(!showPicker), style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4 }, children: showPicker ? 'Cancel' : 'Change' }), _jsx("button", { onClick: () => {
+    // Only show 3D preview for server-hosted textures (starting with / or http)
+    const canPreview = value && (value.startsWith('/') || value.startsWith('http'));
+    return (_jsxs("div", { style: { maxHeight: 128, overflow: 'visible', position: 'relative', display: 'flex', alignItems: 'center' }, children: [canPreview
+                ? _jsx(SingleTextureViewer, { file: value, basePath: basePath })
+                : value
+                    ? _jsx("span", { style: { fontSize: 10, opacity: 0.6, maxWidth: 100, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: value })
+                    : null, _jsx("button", { onClick: () => setShowPicker(!showPicker), style: { padding: '4px 8px', backgroundColor: colors.bgLight, color: 'inherit', fontSize: 10, cursor: 'pointer', border: `1px solid ${colors.border}`, borderRadius: 3, marginTop: 4 }, children: showPicker ? 'Cancel' : 'Change' }), _jsx("button", { onClick: () => {
                     onChange(undefined);
-                }, style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4, marginLeft: 4 }, children: "Clear" }), showPicker && (_jsx("div", { style: { position: 'fixed', left: '-10px', top: '50%', transform: 'translate(-100%, -50%)', background: 'rgba(0,0,0,0.9)', padding: 16, border: '1px solid rgba(34, 211, 238, 0.3)', maxHeight: '80vh', overflowY: 'auto', zIndex: 1000 }, children: _jsx(TextureListViewer, { files: textureFiles, selected: value || undefined, onSelect: (file) => {
+                }, style: { padding: '4px 8px', backgroundColor: colors.bgLight, color: 'inherit', fontSize: 10, cursor: 'pointer', border: `1px solid ${colors.border}`, borderRadius: 3, marginTop: 4, marginLeft: 4 }, children: "Clear" }), showPicker && (_jsx("div", { style: { position: 'fixed', right: 60, top: 60, transform: 'translate(-100%,0%)', background: colors.bg, padding: 16, border: `1px solid ${colors.border}`, borderRadius: 4, maxHeight: '80vh', overflowY: 'auto', overflowX: 'hidden', width: 220, zIndex: 1000, boxShadow: '0 4px 16px rgba(0,0,0,0.6)' }, children: _jsx(TextureListViewer, { files: textureFiles, selected: value || undefined, onSelect: (file) => {
                         onChange(file);
                         setShowPicker(false);
                     }, basePath: basePath }) }))] }));

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

@@ -16,9 +16,9 @@ function ModelPicker({ value, onChange, basePath, nodeId }) {
         onChange(filename);
         setShowPicker(false);
     };
-    return (_jsxs("div", { style: { maxHeight: 128, overflowY: 'auto', position: 'relative', display: 'flex', alignItems: 'center' }, children: [_jsx(SingleModelViewer, { file: value ? `/${value}` : undefined, basePath: basePath }), _jsx("button", { onClick: () => setShowPicker(!showPicker), style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4 }, children: showPicker ? 'Cancel' : 'Change' }), _jsx("button", { onClick: () => {
+    return (_jsxs("div", { style: { maxHeight: 128, overflow: 'visible', position: 'relative', display: 'flex', alignItems: 'center' }, children: [_jsx(SingleModelViewer, { file: value ? `/${value}` : undefined, basePath: basePath }), _jsx("button", { onClick: () => setShowPicker(!showPicker), style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4 }, children: showPicker ? 'Cancel' : 'Change' }), _jsx("button", { onClick: () => {
                     onChange(undefined);
-                }, style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4, marginLeft: 4 }, children: "Clear" }), showPicker && (_jsx("div", { style: { position: 'fixed', left: '-10px', top: '50%', transform: 'translate(-100%, -50%)', background: 'rgba(0,0,0,0.9)', padding: 16, border: '1px solid rgba(34, 211, 238, 0.3)', maxHeight: '80vh', overflowY: 'auto', zIndex: 1000 }, children: _jsx(ModelListViewer, { files: modelFiles, selected: value ? `/${value}` : undefined, onSelect: handleModelSelect, basePath: basePath }, nodeId) }))] }));
+                }, style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4, marginLeft: 4 }, children: "Clear" }), showPicker && (_jsx("div", { style: { position: 'fixed', right: 60, top: 60, transform: 'translate(-100%,0%)', background: 'rgba(0,0,0,0.9)', padding: 16, border: '1px solid rgba(34, 211, 238, 0.3)', maxHeight: '80vh', overflowY: 'auto', overflowX: 'hidden', width: 220, zIndex: 1000 }, children: _jsx(ModelListViewer, { files: modelFiles, selected: value ? `/${value}` : undefined, onSelect: handleModelSelect, basePath: basePath }, nodeId) }))] }));
 }
 function ModelComponentEditor({ component, node, onUpdate, basePath = "" }) {
     const fields = [

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

@@ -93,7 +93,7 @@ const physicsFields = [
     },
 ];
 function PhysicsComponentEditor({ component, onUpdate }) {
-    return (_jsx(FieldRenderer, { fields: physicsFields, values: component.properties, onChange: (props) => onUpdate(Object.assign(Object.assign({}, component), { properties: Object.assign(Object.assign({}, component.properties), props) })) }));
+    return (_jsx(FieldRenderer, { fields: physicsFields, values: component.properties, onChange: onUpdate }));
 }
 function PhysicsComponentView({ properties, children, position, rotation, scale, editMode, nodeId, registerRigidBodyRef }) {
     const { type, colliders, sensor, activeCollisionTypes } = properties, otherProps = __rest(properties, ["type", "colliders", "sensor", "activeCollisionTypes"]);

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

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 import { FieldRenderer } from "./Input";
+import { useHelper } from "@react-three/drei";
+import { SpotLightHelper } from "three";
 const spotLightFields = [
     { name: 'color', type: 'color', label: 'Color' },
     { name: 'intensity', type: 'number', label: 'Intensity', step: 0.1, min: 0 },
@@ -22,6 +24,7 @@ function SpotLightView({ properties, editMode }) {
     const castShadow = (_f = properties.castShadow) !== null && _f !== void 0 ? _f : true;
     const spotLightRef = useRef(null);
     const targetRef = useRef(null);
+    useHelper(editMode ? spotLightRef : null, SpotLightHelper, color);
     useEffect(() => {
         if (spotLightRef.current && targetRef.current) {
             spotLightRef.current.target = targetRef.current;