react-three-game 0.0.52 → 0.0.53

package/dist/helpers/index.js

@@ -8,7 +8,7 @@
  * - Physics (fixed by default)
  */
 export function ground(options = {}) {
-    const { id = "ground", size = 50, position = [0, 0, 0], rotation = [-Math.PI / 2, 0, 0], scale = [1, 1, 1], color = "white", texture, repeat = texture ? true : false, repeatCount = [25, 25], physicsType = "fixed", disabled = false, } = options;
+    const { id = "ground", size = 50, position = [0, 0, 0], rotation = [-Math.PI / 2, 0, 0], scale = [1, 1, 1], color = "#eeeeee", texture, repeat = texture ? true : false, repeatCount = [25, 25], physicsType = "fixed", disabled = false, } = options;
     return {
         id,
         disabled,

package/dist/tools/prefabeditor/EditorTree.js

@@ -19,6 +19,7 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
     const [collapsedIds, setCollapsedIds] = useState(new Set());
     const [collapsed, setCollapsed] = useState(false);
     const [fileMenuOpen, setFileMenuOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
     if (!prefabData || !setPrefabData)
         return null;
     const handleContextMenu = (e, nodeId) => {
@@ -73,6 +74,10 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
             setSelectedId(null);
         setContextMenu(null);
     };
+    const handleToggleDisabled = (nodeId) => {
+        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, nodeId, node => (Object.assign(Object.assign({}, node), { disabled: !node.disabled }))) })));
+        setContextMenu(null);
+    };
     const handleDragStart = (e, id) => {
         if (id === prefabData.root.id)
             return e.preventDefault();
@@ -105,23 +110,59 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         });
         setDraggedId(null);
     };
+    const matchesSearch = (node, query) => {
+        var _a, _b, _c;
+        if (!query)
+            return true;
+        const lowerQuery = query.toLowerCase();
+        const nodeName = ((_a = node.name) !== null && _a !== void 0 ? _a : node.id).toLowerCase();
+        if (nodeName.includes(lowerQuery))
+            return true;
+        return (_c = (_b = node.children) === null || _b === void 0 ? void 0 : _b.some(child => matchesSearch(child, query))) !== null && _c !== void 0 ? _c : false;
+    };
     const renderNode = (node, depth = 0) => {
         var _a;
         if (!node)
             return null;
+        if (!matchesSearch(node, searchQuery))
+            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,
+        return (_jsxs("div", { children: [_jsxs("div", { style: Object.assign(Object.assign(Object.assign({}, tree.row), (isSelected ? tree.selected : {})), { paddingLeft: `${depth * 12 + 6}px`, opacity: node.disabled ? 0.4 : 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }), 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: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, 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 })] }), !isRoot && (_jsx("button", { style: {
+                                background: 'none',
+                                border: 'none',
                                 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));
+                                padding: '0 4px',
+                                fontSize: 14,
+                                opacity: node.disabled ? 0.5 : 0.7,
+                                color: 'inherit',
+                            }, onClick: (e) => {
+                                e.stopPropagation();
+                                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: [_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" })] }))] }))] }));
+    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 6px', 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" })] }))] }))] }));
 }
 function FileMenu({ prefabData, setPrefabData, onClose }) {
     const { onScreenshot, onExportGLB } = useEditorContext();

package/dist/tools/prefabeditor/EditorUI.js

@@ -47,13 +47,13 @@ function NodeInspector({ node, updateNode, deleteNode, basePath }) {
         if (!newAvailable.includes(addType))
             setAddType(newAvailable[0] || "");
     }, [Object.keys(node.components || {}).join(',')]);
-    return _jsxs("div", { style: inspector.content, 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: '#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]) => {
                         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 }, 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: { 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 => {
                                                 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.d.ts

@@ -10,6 +10,7 @@ export interface PrefabEditorRef {
 declare const PrefabEditor: import("react").ForwardRefExoticComponent<{
     basePath?: string;
     initialPrefab?: Prefab;
+    physics?: boolean;
     onPrefabChange?: (prefab: Prefab) => void;
     children?: React.ReactNode;
 } & import("react").RefAttributes<PrefabEditorRef>>;

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import GameCanvas from "../../shared/GameCanvas";
 import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
 import PrefabRoot from "./PrefabRoot";
@@ -20,7 +20,7 @@ const DEFAULT_PREFAB = {
         }
     }
 };
-const PrefabEditor = forwardRef(({ basePath, initialPrefab, onPrefabChange, children }, ref) => {
+const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPrefabChange, children }, ref) => {
     const [editMode, setEditMode] = useState(true);
     const [loadedPrefab, setLoadedPrefab] = useState(initialPrefab !== null && initialPrefab !== void 0 ? initialPrefab : DEFAULT_PREFAB);
     const [selectedId, setSelectedId] = useState(null);
@@ -118,6 +118,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, onPrefabChange, chil
         setPrefab: setLoadedPrefab,
         rootRef: prefabRootRef
     }), [loadedPrefab]);
+    const content = (_jsxs(_Fragment, { children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { ref: prefabRootRef, data: loadedPrefab, editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, basePath: basePath }), children] }));
     return _jsxs(EditorContext.Provider, { value: {
             transformMode,
             setTransformMode,
@@ -125,7 +126,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, onPrefabChange, chil
             setSnapResolution,
             onScreenshot: handleScreenshot,
             onExportGLB: handleExportGLB
-        }, children: [_jsx(GameCanvas, { children: _jsxs(Physics, { debug: editMode, paused: editMode, children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { ref: prefabRootRef, data: loadedPrefab, editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, basePath: basePath }), children] }) }), _jsx("div", { style: toolbar.panel, children: _jsx("button", { style: base.btn, onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }) }), editMode && _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedId, basePath: basePath, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 })] });
+        }, children: [_jsx(GameCanvas, { children: physics ? (_jsx(Physics, { debug: editMode, paused: editMode, children: content })) : content }), _jsx("div", { style: toolbar.panel, children: _jsx("button", { style: base.btn, onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }) }), editMode && _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedId, basePath: basePath, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 })] });
 });
 PrefabEditor.displayName = "PrefabEditor";
 export default PrefabEditor;

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

@@ -1,10 +1,9 @@
 import { Group, Matrix4, Object3D, Texture } from "three";
 import { ThreeEvent } from "@react-three/fiber";
 import { Prefab, GameObject as GameObjectType } from "./types";
-import type { RapierRigidBody } from "@react-three/rapier";
 export interface PrefabRootRef {
     root: Group | null;
-    rigidBodyRefs: Map<string, RapierRigidBody | null>;
+    rigidBodyRefs: Map<string, any>;
 }
 export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     editMode?: boolean;
@@ -22,7 +21,7 @@ interface RendererProps {
     onSelect?: (id: string) => void;
     onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
     registerRef: (id: string, obj: Object3D | null) => void;
-    registerRigidBodyRef: (id: string, rb: RapierRigidBody | null) => void;
+    registerRigidBodyRef: (id: string, rb: any) => void;
     loadedModels: Record<string, Object3D>;
     loadedTextures: Record<string, Texture>;
     editMode?: boolean;

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -99,12 +99,18 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
             if (textures[file] || loading.current.has(file))
                 return;
             loading.current.add(file);
-            const path = file.startsWith("/")
-                ? `${basePath}${file}`
-                : `${basePath}/${file}`;
+            // Handle full URLs (http/https) or regular paths
+            const path = file.startsWith("http://") || file.startsWith("https://")
+                ? file
+                : file.startsWith("/")
+                    ? `${basePath}${file}`
+                    : `${basePath}/${file}`;
             loader.load(path, tex => {
                 tex.colorSpace = SRGBColorSpace;
                 setTextures(t => (Object.assign(Object.assign({}, t), { [file]: tex })));
+            }, undefined, (err) => {
+                console.error(`Failed to load texture: ${path}`, err);
+                loading.current.delete(file);
             });
         });
     }, [data, models, textures]);

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

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FieldRenderer, Input, Label } from "./Input";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FieldRenderer, Input } from "./Input";
 const GEOMETRY_ARGS = {
     box: {
         labels: ["Width", "Height", "Depth"],
@@ -41,13 +41,13 @@ function GeometryComponentEditor({ component, onUpdate, }) {
                 const currentType = values.geometryType;
                 const currentSchema = GEOMETRY_ARGS[currentType];
                 const currentArgs = values.args || currentSchema.defaults;
-                return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: currentSchema.labels.map((label, i) => {
+                return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: currentSchema.labels.map((label, i) => {
                         var _a;
-                        return (_jsxs("div", { children: [_jsx(Label, { children: label }), _jsx(Input, { value: (_a = currentArgs[i]) !== null && _a !== void 0 ? _a : currentSchema.defaults[i], step: 0.1, onChange: value => {
-                                        const next = [...currentArgs];
-                                        next[i] = value;
-                                        onChangeMultiple({ args: next });
-                                    } })] }, label));
+                        return (_jsx(Input, { label: label, value: (_a = currentArgs[i]) !== null && _a !== void 0 ? _a : currentSchema.defaults[i], step: 0.1, min: 0.01, onChange: value => {
+                                const next = [...currentArgs];
+                                next[i] = value;
+                                onChangeMultiple({ args: next });
+                            } }, label));
                     }) }));
             },
         },

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

@@ -52,8 +52,9 @@ interface InputProps {
     min?: number;
     max?: number;
     style?: React.CSSProperties;
+    label?: string;
 }
-export declare function Input({ value, onChange, step, min, max, style }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ value, onChange, step, min, max, style, label }: InputProps): import("react/jsx-runtime").JSX.Element;
 export declare function Label({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -6,7 +6,7 @@ import { useEffect, useRef, useState } from 'react';
 // Shared styles
 const styles = {
     input: {
-        width: '100%',
+        width: '80px',
         backgroundColor: 'rgba(0, 0, 0, 0.4)',
         border: '1px solid rgba(34, 211, 238, 0.3)',
         padding: '2px 4px',
@@ -14,17 +14,18 @@ const styles = {
         color: 'rgba(165, 243, 252, 1)',
         fontFamily: 'monospace',
         outline: 'none',
+        textAlign: 'right',
     },
     label: {
         display: 'block',
         fontSize: '9px',
-        color: 'rgba(34, 211, 238, 0.6)',
+        color: 'rgba(34, 211, 238, 0.9)',
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
         marginBottom: 2,
     },
 };
-export function Input({ value, onChange, step, min, max, style }) {
+export function Input({ value, onChange, step, min, max, style, label }) {
     const [draft, setDraft] = useState(() => value.toString());
     useEffect(() => {
         setDraft(value.toString());
@@ -43,6 +44,55 @@ export function Input({ value, onChange, step, min, max, style }) {
             setDraft(value.toString());
         }
     };
+    const dragState = useRef(null);
+    const startScrub = (e) => {
+        if (!label)
+            return;
+        e.preventDefault();
+        dragState.current = {
+            startX: e.clientX,
+            startValue: value
+        };
+        e.target.setPointerCapture(e.pointerId);
+        document.body.style.cursor = "ew-resize";
+    };
+    const onScrubMove = (e) => {
+        if (!dragState.current)
+            return;
+        const { startX, startValue } = dragState.current;
+        const dx = e.clientX - startX;
+        let speed = 0.02;
+        if (e.shiftKey)
+            speed *= 0.1; // fine
+        if (e.altKey)
+            speed *= 5; // coarse
+        let nextValue = startValue + dx * speed;
+        // Apply min/max constraints
+        if (min !== undefined && nextValue < min)
+            nextValue = min;
+        if (max !== undefined && nextValue > max)
+            nextValue = max;
+        setDraft(nextValue.toFixed(3));
+        onChange(nextValue);
+    };
+    const endScrub = (e) => {
+        if (!dragState.current)
+            return;
+        dragState.current = null;
+        document.body.style.cursor = "";
+        e.target.releasePointerCapture(e.pointerId);
+    };
+    if (label) {
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }, children: [_jsx("span", { style: Object.assign(Object.assign({}, styles.label), { marginBottom: 0, cursor: 'ew-resize', userSelect: 'none', flex: '0 0 auto', minWidth: 20 }), onPointerDown: startScrub, onPointerMove: onScrubMove, onPointerUp: endScrub, children: label }), _jsx("input", { type: "text", value: draft, onChange: handleChange, onBlur: handleBlur, onKeyDown: e => {
+                        if (e.key === 'Enter') {
+                            e.target.blur();
+                        }
+                    }, step: step, min: min, max: max, style: Object.assign(Object.assign({}, styles.input), style) })] }));
+    }
     return (_jsx("input", { type: "text", value: draft, onChange: handleChange, onBlur: handleBlur, onKeyDown: e => {
             if (e.key === 'Enter') {
                 e.target.blur();
@@ -156,20 +206,22 @@ export function Vector3Input({ label, value, onChange, snap }) {
 // Additional Input Components
 // ============================================================================
 export function ColorInput({ label, value, onChange }) {
-    return (_jsxs("div", { children: [label && _jsx(Label, { children: label }), _jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx("input", { type: "color", style: {
-                            height: 20,
-                            width: 20,
+    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: 'none',
+                            border: '1px solid rgba(34, 211, 238, 0.3)',
+                            borderRadius: 4,
                             cursor: 'pointer',
                             padding: 0,
-                        }, value: value, onChange: e => onChange(e.target.value) }), _jsx("input", { type: "text", style: Object.assign(Object.assign({}, styles.input), { flex: 1 }), value: value, onChange: e => onChange(e.target.value) })] })] }));
+                            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) })] })] }));
 }
 export function StringInput({ label, value, onChange, placeholder }) {
     return (_jsxs("div", { children: [label && _jsx(Label, { children: label }), _jsx("input", { type: "text", style: styles.input, value: value, onChange: e => onChange(e.target.value), placeholder: placeholder })] }));
 }
 export function BooleanInput({ label, value, onChange }) {
-    return (_jsxs("div", { children: [label && _jsx(Label, { children: label }), _jsx("input", { type: "checkbox", style: {
+    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)',
@@ -178,7 +230,7 @@ export function BooleanInput({ label, value, onChange }) {
                 }, checked: value, onChange: e => onChange(e.target.checked) })] }));
 }
 export function SelectInput({ label, value, onChange, options }) {
-    return (_jsxs("div", { children: [label && _jsx(Label, { children: label }), _jsx("select", { style: styles.input, value: value, onChange: e => onChange(e.target.value), children: options.map(opt => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) })] }));
+    return (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [label && _jsx(Label, { children: label }), _jsx("select", { style: styles.input, value: value, onChange: e => onChange(e.target.value), children: options.map(opt => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) })] }));
 }
 export function FieldRenderer({ fields, values, onChange }) {
     const updateField = (name, value) => {
@@ -191,7 +243,7 @@ export function FieldRenderer({ fields, values, onChange }) {
                 case 'vector3':
                     return (_jsx(Vector3Input, { label: field.label, value: value !== null && value !== void 0 ? value : [0, 0, 0], onChange: v => updateField(field.name, v), snap: field.snap }, field.name));
                 case 'number':
-                    return (_jsxs("div", { children: [_jsx(Label, { children: field.label }), _jsx(Input, { value: value !== null && value !== void 0 ? value : 0, onChange: v => updateField(field.name, v), min: field.min, max: field.max, step: field.step })] }, field.name));
+                    return (_jsx(Input, { label: field.label, value: value !== null && value !== void 0 ? value : 0, onChange: v => updateField(field.name, v), min: field.min, max: field.max, step: field.step }, field.name));
                 case 'string':
                     return (_jsx(StringInput, { label: field.label, value: value !== null && value !== void 0 ? value : '', onChange: v => updateField(field.name, v), placeholder: field.placeholder }, field.name));
                 case 'color':

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

@@ -25,7 +25,9 @@ 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 ? 'Hide' : 'Change' }), 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) => {
+    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: () => {
+                    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) => {
                         onChange(file);
                         setShowPicker(false);
                     }, basePath: basePath }) }))] }));
@@ -58,7 +60,7 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
                     label: 'Repeat (X, Y)',
                     render: ({ value, onChange }) => {
                         var _a, _b;
-                        return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx(Input, { value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, onChange: v => { var _a; return onChange([v, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 1]); } }), _jsx(Input, { value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 1, onChange: v => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, v]); } })] }));
+                        return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx(Input, { label: "X", value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, onChange: v => { var _a; return onChange([v, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 1]); }, min: 0.01, max: 100, step: 0.1 }), _jsx(Input, { label: "Y", value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 1, onChange: v => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, v]); }, min: 0.01, max: 100, step: 0.1 })] }));
                     },
                 }] : []),
             { name: 'generateMipmaps', type: 'boolean', label: 'Generate Mipmaps' },

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

@@ -17,7 +17,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 ? 'Hide' : 'Change' }), 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) }))] }));
+    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: () => {
+                    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) }))] }));
 }
 function ModelComponentEditor({ component, node, onUpdate, basePath = "" }) {
     const fields = [

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

@@ -99,7 +99,15 @@ function PhysicsComponentView({ properties, children, position, rotation, scale,
     const { type, colliders, sensor, activeCollisionTypes } = properties, otherProps = __rest(properties, ["type", "colliders", "sensor", "activeCollisionTypes"]);
     const colliderType = colliders || (type === 'fixed' ? 'trimesh' : 'hull');
     const rigidBodyRef = useRef(null);
-    const { rapier } = useRapier();
+    // Try to get rapier context - will be null if not inside <Physics>
+    let rapier = null;
+    try {
+        const rapierContext = useRapier();
+        rapier = rapierContext.rapier;
+    }
+    catch (e) {
+        // Not inside Physics context - that's ok, just won't have rapier features
+    }
     // Register RigidBody ref when it's available
     useEffect(() => {
         if (nodeId && registerRigidBodyRef && rigidBodyRef.current) {
@@ -113,7 +121,7 @@ function PhysicsComponentView({ properties, children, position, rotation, scale,
     }, [nodeId, registerRigidBodyRef]);
     // Configure active collision types for kinematic/sensor bodies
     useEffect(() => {
-        if (activeCollisionTypes === 'all' && rigidBodyRef.current) {
+        if (activeCollisionTypes === 'all' && rigidBodyRef.current && rapier) {
             const rb = rigidBodyRef.current;
             // Apply to all colliders on this rigid body
             for (let i = 0; i < rb.numColliders(); i++) {

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

@@ -1755,10 +1755,7 @@ export declare const tree: {
         colorRendering?: import("csstype").Property.ColorRendering | undefined;
         glyphOrientationVertical?: import("csstype").Property.GlyphOrientationVertical | undefined;
     };
-    scroll: {
-        overflowY: "auto";
-        padding: number;
-    };
+    scroll: React.CSSProperties;
     row: React.CSSProperties;
     selected: {
         background: string;

package/dist/tools/prefabeditor/styles.js

@@ -99,6 +99,8 @@ export const tree = {
     scroll: {
         overflowY: 'auto',
         padding: 4,
+        scrollbarWidth: 'thin',
+        scrollbarColor: 'rgba(255,255,255,0.06) transparent',
     },
     row: {
         display: 'flex',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -29,19 +29,19 @@
   },
   "devDependencies": {
     "@react-three/drei": "^10.7.7",
-    "@react-three/fiber": "^9.4.2",
+    "@react-three/fiber": "^9.5.0",
     "@react-three/rapier": "^2.2.0",
-    "@types/react": "^19.2.6",
+    "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
-    "@types/three": "^0.181.0",
+    "@types/three": "^0.182.0",
     "concurrently": "^9.2.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "three": "^0.182.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1"
   },
   "dependencies": {
-    "react-error-boundary": "^6.0.0"
+    "react-error-boundary": "^6.1.0"
   }
 }

package/src/helpers/index.ts

@@ -45,7 +45,7 @@ export function ground(options: GroundOptions = {}): GameObject {
 		position = [0, 0, 0],
 		rotation = [-Math.PI / 2, 0, 0],
 		scale = [1, 1, 1],
-		color = "white",
+		color = "#eeeeee",
 		texture,
 		repeat = texture ? true : false,
 		repeatCount = [25, 25],

package/src/tools/prefabeditor/EditorTree.tsx

@@ -29,6 +29,7 @@ export default function EditorTree({
     const [collapsedIds, setCollapsedIds] = useState<Set<string>>(new Set());
     const [collapsed, setCollapsed] = useState(false);
     const [fileMenuOpen, setFileMenuOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
 
     if (!prefabData || !setPrefabData) return null;
 
@@ -91,6 +92,17 @@ export default function EditorTree({
         setContextMenu(null);
     };
 
+    const handleToggleDisabled = (nodeId: string) => {
+        setPrefabData(prev => ({
+            ...prev,
+            root: updateNodeById(prev.root, nodeId, node => ({
+                ...node,
+                disabled: !node.disabled
+            }))
+        }));
+        setContextMenu(null);
+    };
+
     const handleDragStart = (e: React.DragEvent, id: string) => {
         if (id === prefabData.root.id) return e.preventDefault();
         e.dataTransfer.effectAllowed = "move";
@@ -128,8 +140,17 @@ export default function EditorTree({
     };
 
 
+    const matchesSearch = (node: GameObject, query: string): boolean => {
+        if (!query) return true;
+        const lowerQuery = query.toLowerCase();
+        const nodeName = (node.name ?? node.id).toLowerCase();
+        if (nodeName.includes(lowerQuery)) return true;
+        return node.children?.some(child => matchesSearch(child, query)) ?? false;
+    };
+
     const renderNode = (node: GameObject, depth = 0): React.ReactNode => {
         if (!node) return null;
+        if (!matchesSearch(node, searchQuery)) return null;
 
         const isSelected = node.id === selectedId;
         const isCollapsed = collapsedIds.has(node.id);
@@ -143,6 +164,10 @@ export default function EditorTree({
                         ...tree.row,
                         ...(isSelected ? tree.selected : {}),
                         paddingLeft: `${depth * 12 + 6}px`,
+                        opacity: node.disabled ? 0.4 : 1,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
                     }}
                     draggable={!isRoot}
                     onClick={(e) => { e.stopPropagation(); setSelectedId(node.id); }}
@@ -152,22 +177,44 @@ export default function EditorTree({
                     onDragOver={(e) => handleDragOver(e, node.id)}
                     onDrop={(e) => handleDrop(e, node.id)}
                 >
-                    <span
-                        style={{
-                            width: 12,
-                            opacity: 0.6,
-                            marginRight: 4,
-                            cursor: 'pointer',
-                            visibility: hasChildren ? 'visible' : 'hidden'
-                        }}
-                        onClick={(e) => hasChildren && toggleCollapse(e, node.id)}
-                    >
-                        {isCollapsed ? '▶' : '▼'}
-                    </span>
-                    {!isRoot && <span style={{ marginRight: 4, opacity: 0.4 }}>⋮⋮</span>}
-                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                        {node.name ?? node.id}
-                    </span>
+                    <div style={{ display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }}>
+                        <span
+                            style={{
+                                width: 12,
+                                opacity: 0.6,
+                                marginRight: 4,
+                                cursor: 'pointer',
+                                visibility: hasChildren ? 'visible' : 'hidden'
+                            }}
+                            onClick={(e) => hasChildren && toggleCollapse(e, node.id)}
+                        >
+                            {isCollapsed ? '▶' : '▼'}
+                        </span>
+                        {!isRoot && <span style={{ marginRight: 4, opacity: 0.4 }}>⋮⋮</span>}
+                        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                            {node.name ?? node.id}
+                        </span>
+                    </div>
+                    {!isRoot && (
+                        <button
+                            style={{
+                                background: 'none',
+                                border: 'none',
+                                cursor: 'pointer',
+                                padding: '0 4px',
+                                fontSize: 14,
+                                opacity: node.disabled ? 0.5 : 0.7,
+                                color: 'inherit',
+                            }}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                handleToggleDisabled(node.id);
+                            }}
+                            title={node.disabled ? 'Enable' : 'Disable'}
+                        >
+                            {node.disabled ? '◎' : '◉'}
+                        </button>
+                    )}
                 </div>
                 {!isCollapsed && node.children && node.children.map(child => renderNode(child, depth + 1))}
             </div>
@@ -176,6 +223,11 @@ export default function EditorTree({
 
     return (
         <>
+            <style>{`
+.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; }
+            `}</style>
             <div style={{ ...tree.panel, width: collapsed ? 'auto' : 224 }} onClick={() => { setContextMenu(null); setFileMenuOpen(false); }}>
                 <div style={base.header}>
                     <div style={{ display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }} onClick={() => setCollapsed(!collapsed)}>
@@ -219,7 +271,30 @@ export default function EditorTree({
                         </div>
                     )}
                 </div>
-                {!collapsed && <div style={tree.scroll}>{renderNode(prefabData.root)}</div>}
+                {!collapsed && (
+                    <>
+                        <div style={{ padding: '4px 6px', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
+                            <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',
+                                }}
+                            />
+                        </div>
+                        <div className="tree-scroll" style={tree.scroll}>{renderNode(prefabData.root)}</div>
+                    </>
+                )}
             </div>
 
             {contextMenu && (

package/src/tools/prefabeditor/EditorUI.tsx

@@ -102,7 +102,7 @@ function NodeInspector({
         if (!newAvailable.includes(addType)) setAddType(newAvailable[0] || "");
     }, [Object.keys(node.components || {}).join(',')]);
 
-    return <div style={inspector.content} className="prefab-scroll">
+    return <div style={{ ...inspector.content, paddingRight: 2 }} className="prefab-scroll">
         {/* Node Name */}
         <div style={base.section}>
             <div style={{ display: "flex", marginBottom: 8, alignItems: 'center', gap: 8 }}>
@@ -136,7 +136,7 @@ function NodeInspector({
                 </div>;
 
                 return (
-                    <div key={key} style={{ marginBottom: 8 }}>
+                    <div key={key} style={{ marginBottom: 8, backgroundColor: 'rgba(255, 255, 255, 0.1)', padding: 8, borderRadius: 4 }}>
                         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                             <div style={{ fontSize: 11, fontWeight: 500 }}>{key}</div>
                             <button

package/src/tools/prefabeditor/PrefabEditor.tsx

@@ -33,9 +33,10 @@ const DEFAULT_PREFAB: Prefab = {
 const PrefabEditor = forwardRef<PrefabEditorRef, {
     basePath?: string;
     initialPrefab?: Prefab;
+    physics?: boolean;
     onPrefabChange?: (prefab: Prefab) => void;
     children?: React.ReactNode;
-}>(({ basePath, initialPrefab, onPrefabChange, children }, ref) => {
+}>(({ basePath, initialPrefab, physics = true, onPrefabChange, children }, ref) => {
     const [editMode, setEditMode] = useState(true);
     const [loadedPrefab, setLoadedPrefab] = useState<Prefab>(initialPrefab ?? DEFAULT_PREFAB);
     const [selectedId, setSelectedId] = useState<string | null>(null);
@@ -132,6 +133,23 @@ const PrefabEditor = forwardRef<PrefabEditorRef, {
         rootRef: prefabRootRef
     }), [loadedPrefab]);
 
+    const content = (
+        <>
+            <ambientLight intensity={1.5} />
+            <gridHelper args={[10, 10]} position={[0, -1, 0]} />
+            <PrefabRoot
+                ref={prefabRootRef}
+                data={loadedPrefab}
+                editMode={editMode}
+                onPrefabChange={updatePrefab}
+                selectedId={selectedId}
+                onSelect={setSelectedId}
+                basePath={basePath}
+            />
+            {children}
+        </>
+    );
+
     return <EditorContext.Provider value={{
         transformMode,
         setTransformMode,
@@ -141,20 +159,11 @@ const PrefabEditor = forwardRef<PrefabEditorRef, {
         onExportGLB: handleExportGLB
     }}>
         <GameCanvas>
-            <Physics debug={editMode} paused={editMode}>
-                <ambientLight intensity={1.5} />
-                <gridHelper args={[10, 10]} position={[0, -1, 0]} />
-                <PrefabRoot
-                    ref={prefabRootRef}
-                    data={loadedPrefab}
-                    editMode={editMode}
-                    onPrefabChange={updatePrefab}
-                    selectedId={selectedId}
-                    onSelect={setSelectedId}
-                    basePath={basePath}
-                />
-                {children}
-            </Physics>
+            {physics ? (
+                <Physics debug={editMode} paused={editMode}>
+                    {content}
+                </Physics>
+            ) : content}
         </GameCanvas>
 
         <div style={toolbar.panel}>

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -11,7 +11,9 @@ import { GameInstance, GameInstanceProvider, useInstanceCheck } from "./Instance
 import { updateNode } from "./utils";
 import { PhysicsProps } from "./components/PhysicsComponent";
 import { EditorContext } from "./EditorContext";
-import type { RapierRigidBody } from "@react-three/rapier";
+
+// Dynamic type to avoid requiring @react-three/rapier when not using physics
+type RapierRigidBody = any;
 
 components.forEach(registerComponent);
 
@@ -19,7 +21,7 @@ const IDENTITY = new Matrix4();
 
 export interface PrefabRootRef {
     root: Group | null;
-    rigidBodyRefs: Map<string, RapierRigidBody | null>;
+    rigidBodyRefs: Map<string, any>; // RigidBody refs only populated when using physics
 }
 
 export const PrefabRoot = forwardRef<PrefabRootRef, {
@@ -56,7 +58,7 @@ export const PrefabRoot = forwardRef<PrefabRootRef, {
         if (id === selectedId) setSelectedObject(obj);
     }, [selectedId]);
 
-    const registerRigidBodyRef = useCallback((id: string, rb: RapierRigidBody | null) => {
+    const registerRigidBodyRef = useCallback((id: string, rb: any) => {
         rigidBodyRefs.current.set(id, rb);
     }, []);
 
@@ -126,14 +128,20 @@ export const PrefabRoot = forwardRef<PrefabRootRef, {
         texturesToLoad.forEach(file => {
             if (textures[file] || loading.current.has(file)) return;
             loading.current.add(file);
-            const path =
-                file.startsWith("/")
+
+            // Handle full URLs (http/https) or regular paths
+            const path = file.startsWith("http://") || file.startsWith("https://")
+                ? file
+                : file.startsWith("/")
                     ? `${basePath}${file}`
                     : `${basePath}/${file}`;
 
             loader.load(path, tex => {
                 tex.colorSpace = SRGBColorSpace;
                 setTextures(t => ({ ...t, [file]: tex }));
+            }, undefined, (err) => {
+                console.error(`Failed to load texture: ${path}`, err);
+                loading.current.delete(file);
             });
         });
     }, [data, models, textures]);
@@ -434,7 +442,7 @@ interface RendererProps {
     onSelect?: (id: string) => void;
     onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
     registerRef: (id: string, obj: Object3D | null) => void;
-    registerRigidBodyRef: (id: string, rb: RapierRigidBody | null) => void;
+    registerRigidBodyRef: (id: string, rb: any) => void;
     loadedModels: Record<string, Object3D>;
     loadedTextures: Record<string, Texture>;
     editMode?: boolean;

package/src/tools/prefabeditor/components/GeometryComponent.tsx

@@ -55,20 +55,20 @@ function GeometryComponentEditor({
                 const currentArgs = values.args || currentSchema.defaults;
 
                 return (
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                         {currentSchema.labels.map((label, i) => (
-                            <div key={label}>
-                                <Label>{label}</Label>
-                                <Input
-                                    value={currentArgs[i] ?? currentSchema.defaults[i]}
-                                    step={0.1}
-                                    onChange={value => {
-                                        const next = [...currentArgs];
-                                        next[i] = value;
-                                        onChangeMultiple({ args: next });
-                                    }}
-                                />
-                            </div>
+                            <Input
+                                key={label}
+                                label={label}
+                                value={currentArgs[i] ?? currentSchema.defaults[i]}
+                                step={0.1}
+                                min={0.01}
+                                onChange={value => {
+                                    const next = [...currentArgs];
+                                    next[i] = value;
+                                    onChangeMultiple({ args: next });
+                                }}
+                            />
                         ))}
                     </div>
                 );

package/src/tools/prefabeditor/components/Input.tsx

@@ -67,7 +67,7 @@ export type FieldDefinition =
 // Shared styles
 const styles = {
     input: {
-        width: '100%',
+        width: '80px',
         backgroundColor: 'rgba(0, 0, 0, 0.4)',
         border: '1px solid rgba(34, 211, 238, 0.3)',
         padding: '2px 4px',
@@ -75,11 +75,12 @@ const styles = {
         color: 'rgba(165, 243, 252, 1)',
         fontFamily: 'monospace',
         outline: 'none',
+        textAlign: 'right',
     } as React.CSSProperties,
     label: {
         display: 'block',
         fontSize: '9px',
-        color: 'rgba(34, 211, 238, 0.6)',
+        color: 'rgba(34, 211, 238, 0.9)',
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
         marginBottom: 2,
@@ -93,9 +94,10 @@ interface InputProps {
     min?: number;
     max?: number;
     style?: React.CSSProperties;
+    label?: string;
 }
 
-export function Input({ value, onChange, step, min, max, style }: InputProps) {
+export function Input({ value, onChange, step, min, max, style, label }: InputProps) {
     const [draft, setDraft] = useState<string>(() => value.toString());
 
     useEffect(() => {
@@ -119,6 +121,93 @@ export function Input({ value, onChange, step, min, max, style }: InputProps) {
         }
     };
 
+    const dragState = useRef<{
+        startX: number;
+        startValue: number;
+    } | null>(null);
+
+    const startScrub = (e: React.PointerEvent) => {
+        if (!label) return;
+        e.preventDefault();
+
+        dragState.current = {
+            startX: e.clientX,
+            startValue: value
+        };
+
+        (e.target as HTMLElement).setPointerCapture(e.pointerId);
+        document.body.style.cursor = "ew-resize";
+    };
+
+    const onScrubMove = (e: React.PointerEvent) => {
+        if (!dragState.current) return;
+
+        const { startX, startValue } = dragState.current;
+        const dx = e.clientX - startX;
+
+        let speed = 0.02;
+        if (e.shiftKey) speed *= 0.1; // fine
+        if (e.altKey) speed *= 5;     // coarse
+
+        let nextValue = startValue + dx * speed;
+
+        // Apply min/max constraints
+        if (min !== undefined && nextValue < min) nextValue = min;
+        if (max !== undefined && nextValue > max) nextValue = max;
+
+        setDraft(nextValue.toFixed(3));
+        onChange(nextValue);
+    };
+
+    const endScrub = (e: React.PointerEvent) => {
+        if (!dragState.current) return;
+
+        dragState.current = null;
+        document.body.style.cursor = "";
+        (e.target as HTMLElement).releasePointerCapture(e.pointerId);
+    };
+
+    if (label) {
+        return (
+            <div style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }}>
+                <span
+                    style={{
+                        ...styles.label,
+                        marginBottom: 0,
+                        cursor: 'ew-resize',
+                        userSelect: 'none',
+                        flex: '0 0 auto',
+                        minWidth: 20,
+                    }}
+                    onPointerDown={startScrub}
+                    onPointerMove={onScrubMove}
+                    onPointerUp={endScrub}
+                >
+                    {label}
+                </span>
+                <input
+                    type="text"
+                    value={draft}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    onKeyDown={e => {
+                        if (e.key === 'Enter') {
+                            (e.target as HTMLInputElement).blur();
+                        }
+                    }}
+                    step={step}
+                    min={min}
+                    max={max}
+                    style={{ ...styles.input, ...style }}
+                />
+            </div>
+        );
+    }
+
     return (
         <input
             type="text"
@@ -316,23 +405,25 @@ export function ColorInput({
     return (
         <div>
             {label && <Label>{label}</Label>}
-            <div style={{ display: 'flex', gap: 2 }}>
+            <div style={{ display: 'flex', gap: 4, justifyContent: 'space-between' }}>
                 <input
                     type="color"
                     style={{
-                        height: 20,
-                        width: 20,
+                        height: 32,
+                        width: 48,
                         backgroundColor: 'transparent',
-                        border: 'none',
+                        border: '1px solid rgba(34, 211, 238, 0.3)',
+                        borderRadius: 4,
                         cursor: 'pointer',
                         padding: 0,
+                        flexShrink: 0,
                     }}
                     value={value}
                     onChange={e => onChange(e.target.value)}
                 />
                 <input
                     type="text"
-                    style={{ ...styles.input, flex: 1 }}
+                    style={{ ...styles.input, }}
                     value={value}
                     onChange={e => onChange(e.target.value)}
                 />
@@ -376,7 +467,7 @@ export function BooleanInput({
     onChange: (value: boolean) => void;
 }) {
     return (
-        <div>
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
             {label && <Label>{label}</Label>}
             <input
                 type="checkbox"
@@ -406,7 +497,7 @@ export function SelectInput({
     options: { value: string; label: string }[];
 }) {
     return (
-        <div>
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
             {label && <Label>{label}</Label>}
             <select
                 style={styles.input as React.CSSProperties}
@@ -457,16 +548,15 @@ export function FieldRenderer({ fields, values, onChange }: FieldRendererProps)
 
                     case 'number':
                         return (
-                            <div key={field.name}>
-                                <Label>{field.label}</Label>
-                                <Input
-                                    value={value ?? 0}
-                                    onChange={v => updateField(field.name, v)}
-                                    min={field.min}
-                                    max={field.max}
-                                    step={field.step}
-                                />
-                            </div>
+                            <Input
+                                key={field.name}
+                                label={field.label}
+                                value={value ?? 0}
+                                onChange={v => updateField(field.name, v)}
+                                min={field.min}
+                                max={field.max}
+                                step={field.step}
+                            />
                         );
 
                     case 'string':

package/src/tools/prefabeditor/components/MaterialComponent.tsx

@@ -55,7 +55,15 @@ function TexturePicker({
                 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 }}
             >
-                {showPicker ? 'Hide' : 'Change'}
+                {showPicker ? 'Cancel' : 'Change'}
+            </button>
+            <button
+                onClick={() => {
+                    onChange(undefined as any);
+                }}
+                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 }}
+            >
+                Clear
             </button>
             {showPicker && (
                 <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 }}>
@@ -106,12 +114,20 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }: { compo
                 render: ({ value, onChange }: { value: [number, number] | undefined; onChange: (v: [number, number]) => void }) => (
                     <div style={{ display: 'flex', gap: 2 }}>
                         <Input
+                            label="X"
                             value={value?.[0] ?? 1}
                             onChange={v => onChange([v, value?.[1] ?? 1])}
+                            min={0.01}
+                            max={100}
+                            step={0.1}
                         />
                         <Input
+                            label="Y"
                             value={value?.[1] ?? 1}
                             onChange={v => onChange([value?.[0] ?? 1, v])}
+                            min={0.01}
+                            max={100}
+                            step={0.1}
                         />
                     </div>
                 ),
@@ -162,15 +178,15 @@ function MaterialComponentView({ properties, loadedTextures }: { properties: Mat
     const texture = textureName && loadedTextures ? loadedTextures[textureName] : undefined;
 
     // Destructure all material props and separate custom texture handling props
-    const { 
-        texture: _texture, 
-        repeat: _repeat, 
-        repeatCount: _repeatCount, 
+    const {
+        texture: _texture,
+        repeat: _repeat,
+        repeatCount: _repeatCount,
         generateMipmaps: _generateMipmaps,
         minFilter: _minFilter,
         magFilter: _magFilter,
         map: _map, // Filter out map since we set it explicitly
-        ...materialProps 
+        ...materialProps
     } = properties || {};
 
     const minFilterMap: Record<string, MinificationTextureFilter> = {

package/src/tools/prefabeditor/components/ModelComponent.tsx

@@ -39,7 +39,15 @@ function ModelPicker({
                 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 }}
             >
-                {showPicker ? 'Hide' : 'Change'}
+                {showPicker ? 'Cancel' : 'Change'}
+            </button>
+            <button
+                onClick={() => {
+                    onChange(undefined as any);
+                }}
+                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 }}
+            >
+                Clear
             </button>
             {showPicker && (
                 <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 }}>

package/src/tools/prefabeditor/components/PhysicsComponent.tsx

@@ -115,7 +115,15 @@ function PhysicsComponentView({ properties, children, position, rotation, scale,
     const { type, colliders, sensor, activeCollisionTypes, ...otherProps } = properties;
     const colliderType = colliders || (type === 'fixed' ? 'trimesh' : 'hull');
     const rigidBodyRef = useRef<RapierRigidBody>(null);
-    const { rapier } = useRapier();
+
+    // Try to get rapier context - will be null if not inside <Physics>
+    let rapier: any = null;
+    try {
+        const rapierContext = useRapier();
+        rapier = rapierContext.rapier;
+    } catch (e) {
+        // Not inside Physics context - that's ok, just won't have rapier features
+    }
 
     // Register RigidBody ref when it's available
     useEffect(() => {
@@ -131,7 +139,7 @@ function PhysicsComponentView({ properties, children, position, rotation, scale,
 
     // Configure active collision types for kinematic/sensor bodies
     useEffect(() => {
-        if (activeCollisionTypes === 'all' && rigidBodyRef.current) {
+        if (activeCollisionTypes === 'all' && rigidBodyRef.current && rapier) {
             const rb = rigidBodyRef.current;
             // Apply to all colliders on this rigid body
             for (let i = 0; i < rb.numColliders(); i++) {

package/src/tools/prefabeditor/styles.ts

@@ -124,7 +124,9 @@ export const tree = {
     scroll: {
         overflowY: 'auto' as const,
         padding: 4,
-    },
+        scrollbarWidth: 'thin' as const,
+        scrollbarColor: 'rgba(255,255,255,0.06) transparent',
+    } as React.CSSProperties,
     row: {
         display: 'flex',
         alignItems: 'center',