react-three-game 0.0.28 → 0.0.29

package/dist/tools/prefabeditor/EditorTree.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import { getComponent } from './components/ComponentRegistry';
 import { base, tree, menu } from './styles';
-import { findNode, findParent, deleteNode, cloneNode } from './utils';
+import { findNode, findParent, deleteNode, cloneNode, updateNodeById } from './utils';
 export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId }) {
     const [contextMenu, setContextMenu] = useState(null);
     const [draggedId, setDraggedId] = useState(null);
@@ -28,6 +28,7 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         var _a;
         const newNode = {
             id: crypto.randomUUID(),
+            name: "New Node",
             components: {
                 transform: {
                     type: "Transform",
@@ -35,30 +36,25 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
                 }
             }
         };
-        setPrefabData(prev => {
-            const newRoot = JSON.parse(JSON.stringify(prev.root));
-            const parent = findNode(newRoot, parentId);
-            if (parent) {
-                parent.children = parent.children || [];
-                parent.children.push(newNode);
-            }
-            return Object.assign(Object.assign({}, prev), { root: newRoot });
-        });
+        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, parentId, parent => {
+                var _a;
+                return (Object.assign(Object.assign({}, parent), { children: [...((_a = parent.children) !== null && _a !== void 0 ? _a : []), newNode] }));
+            }) })));
         setContextMenu(null);
     };
     const handleDuplicate = (nodeId) => {
         if (nodeId === prefabData.root.id)
             return;
         setPrefabData(prev => {
-            const newRoot = JSON.parse(JSON.stringify(prev.root));
-            const parent = findParent(newRoot, nodeId);
-            const node = findNode(newRoot, nodeId);
-            if (parent && node) {
-                const clone = cloneNode(node);
-                parent.children = parent.children || [];
-                parent.children.push(clone);
-            }
-            return Object.assign(Object.assign({}, prev), { root: newRoot });
+            const node = findNode(prev.root, nodeId);
+            const parent = findParent(prev.root, nodeId);
+            if (!node || !parent)
+                return prev;
+            const clone = cloneNode(node);
+            return Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, parent.id, p => {
+                    var _a;
+                    return (Object.assign(Object.assign({}, p), { children: [...((_a = p.children) !== null && _a !== void 0 ? _a : []), clone] }));
+                }) });
         });
         setContextMenu(null);
     };
@@ -92,28 +88,26 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
             return;
         e.preventDefault();
         setPrefabData(prev => {
-            var _a;
-            const newRoot = JSON.parse(JSON.stringify(prev.root));
-            const draggedNode = findNode(newRoot, draggedId);
-            if (draggedNode && findNode(draggedNode, targetId))
-                return prev;
-            const parent = findParent(newRoot, draggedId);
-            if (!parent)
+            const draggedNode = findNode(prev.root, draggedId);
+            const oldParent = findParent(prev.root, draggedId);
+            if (!draggedNode || !oldParent)
                 return prev;
-            const nodeToMove = (_a = parent.children) === null || _a === void 0 ? void 0 : _a.find(c => c.id === draggedId);
-            if (!nodeToMove)
+            // Prevent dropping into own subtree
+            if (findNode(draggedNode, targetId))
                 return prev;
-            parent.children = parent.children.filter(c => c.id !== draggedId);
-            const target = findNode(newRoot, targetId);
-            if (target) {
-                target.children = target.children || [];
-                target.children.push(nodeToMove);
-            }
-            return Object.assign(Object.assign({}, prev), { root: newRoot });
+            // 1. Remove from old parent
+            let root = updateNodeById(prev.root, oldParent.id, p => (Object.assign(Object.assign({}, p), { children: p.children.filter(c => c.id !== draggedId) })));
+            // 2. Add to new parent
+            root = updateNodeById(root, targetId, t => {
+                var _a;
+                return (Object.assign(Object.assign({}, t), { children: [...((_a = t.children) !== null && _a !== void 0 ? _a : []), draggedNode] }));
+            });
+            return Object.assign(Object.assign({}, prev), { root });
         });
         setDraggedId(null);
     };
     const renderNode = (node, depth = 0) => {
+        var _a;
         if (!node)
             return null;
         const isSelected = node.id === selectedId;
@@ -126,7 +120,7 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
                                 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: node.id })] }), !isCollapsed && node.children && node.children.map(child => renderNode(child, depth + 1))] }, node.id));
+                            }, onClick: (e) => hasChildren && toggleCollapse(e, node.id), children: isCollapsed ? '▶' : '▼' }), !isRoot && _jsx("span", { style: { marginRight: 4, opacity: 0.4 }, children: "\u22EE\u22EE" }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: (_a = node.name) !== null && _a !== void 0 ? _a : node.id })] }), !isCollapsed && node.children && node.children.map(child => renderNode(child, depth + 1))] }, node.id));
     };
     return (_jsxs(_Fragment, { children: [_jsxs("div", { style: Object.assign(Object.assign({}, tree.panel), { width: collapsed ? 'auto' : 224 }), onClick: () => setContextMenu(null), children: [_jsxs("div", { style: base.header, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { children: "Scene" }), _jsx("span", { children: collapsed ? '▶' : '◀' })] }), !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" })] }))] }))] }));
 }

package/dist/tools/prefabeditor/EditorUI.js

@@ -32,6 +32,7 @@ function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transf
     return _jsxs(_Fragment, { children: [_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, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath }))] }), _jsx("div", { style: { position: 'absolute', top: 8, left: 8, zIndex: 20 }, children: _jsx(EditorTree, { prefabData: prefabData, setPrefabData: setPrefabData, selectedId: selectedId, setSelectedId: setSelectedId }) })] });
 }
 function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransformMode, basePath }) {
+    var _a;
     const ALL_COMPONENTS = getAllComponents();
     const allKeys = Object.keys(ALL_COMPONENTS);
     const available = allKeys.filter(k => { var _a; return !((_a = node.components) === null || _a === void 0 ? void 0 : _a[k.toLowerCase()]); });
@@ -41,7 +42,7 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
         if (!newAvailable.includes(addType))
             setAddType(newAvailable[0] || "");
     }, [Object.keys(node.components || {}).join(',')]);
-    return _jsxs("div", { style: inspector.content, children: [_jsxs("div", { style: base.section, children: [_jsx("div", { style: base.label, children: "Node ID" }), _jsx("input", { style: base.input, value: node.id, onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { id: e.target.value }))) })] }), _jsxs("div", { style: base.section, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }, children: [_jsx("div", { style: base.label, children: "Components" }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), base.btnDanger), onClick: deleteNode, children: "Delete Node" })] }), node.components && Object.entries(node.components).map(([key, comp]) => {
+    return _jsxs("div", { style: inspector.content, children: [_jsxs("div", { style: base.section, children: [_jsx("div", { style: base.label, children: "Node ID" }), _jsx("input", { style: base.input, value: (_a = node.name) !== null && _a !== void 0 ? _a : "", onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { name: e.target.value }))) })] }), _jsxs("div", { style: base.section, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }, children: [_jsx("div", { style: base.label, children: "Components" }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), base.btnDanger), onClick: deleteNode, children: "Delete Node" })] }), node.components && Object.entries(node.components).map(([key, comp]) => {
                         if (!comp)
                             return null;
                         const def = ALL_COMPONENTS[comp.type];

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 function TransformComponentEditor({ component, onUpdate, transformMode, setTransformMode }) {
     const s = {
         button: {
@@ -33,15 +34,69 @@ const TransformComponent = {
 };
 export default TransformComponent;
 export function Vector3Input({ label, value, onChange }) {
-    const handleChange = (index, val) => {
-        const newValue = [...value];
-        newValue[index] = parseFloat(val) || 0;
-        onChange(newValue);
+    const [draft, setDraft] = useState(() => value.map(v => v.toString()));
+    // Sync external changes (gizmo, undo, etc.)
+    useEffect(() => {
+        setDraft(value.map(v => v.toString()));
+    }, [value[0], value[1], value[2]]);
+    const dragState = useRef(null);
+    const commit = (index) => {
+        const num = parseFloat(draft[index]);
+        if (Number.isFinite(num)) {
+            const next = [...value];
+            next[index] = num;
+            onChange(next);
+        }
+    };
+    const startScrub = (e, index) => {
+        e.preventDefault();
+        dragState.current = {
+            index,
+            startX: e.clientX,
+            startValue: value[index]
+        };
+        e.target.setPointerCapture(e.pointerId);
+        document.body.style.cursor = "ew-resize";
+    };
+    const onScrubMove = (e) => {
+        if (!dragState.current)
+            return;
+        const { index, 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
+        const nextValue = startValue + dx * speed;
+        const next = [...value];
+        next[index] = nextValue;
+        setDraft(d => {
+            const copy = [...d];
+            copy[index] = nextValue.toFixed(3);
+            return copy;
+        });
+        onChange(next);
+    };
+    const endScrub = (e) => {
+        if (!dragState.current)
+            return;
+        dragState.current = null;
+        document.body.style.cursor = "";
+        e.target.releasePointerCapture(e.pointerId);
     };
     const axes = [
-        { key: 'x', color: 'red', index: 0 },
-        { key: 'y', color: 'green', index: 1 },
-        { key: 'z', color: 'blue', index: 2 }
+        { key: "x", color: "red", index: 0 },
+        { key: "y", color: "green", index: 1 },
+        { key: "z", color: "blue", index: 2 }
     ];
-    return _jsxs("div", { className: "mb-2", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1", children: label }), _jsx("div", { className: "flex gap-1", children: axes.map(({ key, color, index }) => (_jsxs("div", { className: "flex-1 flex items-center gap-1 bg-black/30 border border-cyan-500/20 rounded px-1.5 py-1 min-h-[32px]", children: [_jsx("span", { className: `text-xs font-bold text-${color}-400 w-3`, children: key.toUpperCase() }), _jsx("input", { className: "flex-1 bg-transparent text-xs text-cyan-200 font-mono outline-none w-full min-w-0", type: "number", step: "0.1", value: value[index].toFixed(2), onChange: e => handleChange(index, e.target.value), onFocus: e => e.target.select() })] }, key))) })] });
+    return (_jsxs("div", { className: "mb-2", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1", children: label }), _jsx("div", { className: "flex gap-1", children: axes.map(({ key, color, index }) => (_jsxs("div", { className: "flex-1 flex items-center gap-1 bg-black/30 border border-cyan-500/20 rounded px-1.5 py-1 min-h-[32px]", children: [_jsx("span", { className: `text-xs font-bold text-${color}-400 w-3 cursor-ew-resize select-none`, onPointerDown: e => startScrub(e, index), onPointerMove: onScrubMove, onPointerUp: endScrub, children: key.toUpperCase() }), _jsx("input", { className: "flex-1 bg-transparent text-xs text-cyan-200 font-mono outline-none w-full min-w-0", type: "text", value: draft[index], onChange: e => {
+                                const next = [...draft];
+                                next[index] = e.target.value;
+                                setDraft(next);
+                            }, onBlur: () => commit(index), onKeyDown: e => {
+                                if (e.key === "Enter") {
+                                    e.target.blur();
+                                }
+                            } })] }, key))) })] }));
 }

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

@@ -5,6 +5,7 @@ export interface Prefab {
 }
 export interface GameObject {
     id: string;
+    name?: string;
     disabled?: boolean;
     hidden?: boolean;
     children?: GameObject[];

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

@@ -17,3 +17,4 @@ export declare function deleteNode(root: GameObject, id: string): GameObject | n
 export declare function cloneNode(node: GameObject): GameObject;
 /** Get component data from a node */
 export declare function getComponent<T = any>(node: GameObject, type: string): T | undefined;
+export declare function updateNodeById(root: GameObject, id: string, updater: (node: GameObject) => GameObject): GameObject;

package/dist/tools/prefabeditor/utils.js

@@ -61,8 +61,8 @@ export function deleteNode(root, id) {
 }
 /** Deep clone a node with new IDs */
 export function cloneNode(node) {
-    var _a;
-    return Object.assign(Object.assign({}, node), { id: crypto.randomUUID(), children: (_a = node.children) === null || _a === void 0 ? void 0 : _a.map(cloneNode) });
+    var _a, _b;
+    return Object.assign(Object.assign({}, node), { id: crypto.randomUUID(), name: `${(_a = node.name) !== null && _a !== void 0 ? _a : "Node"} Copy`, children: (_b = node.children) === null || _b === void 0 ? void 0 : _b.map(cloneNode) });
 }
 /** Get component data from a node */
 export function getComponent(node, type) {
@@ -70,3 +70,21 @@ export function getComponent(node, type) {
     const comp = Object.values((_a = node.components) !== null && _a !== void 0 ? _a : {}).find(c => (c === null || c === void 0 ? void 0 : c.type) === type);
     return comp === null || comp === void 0 ? void 0 : comp.properties;
 }
+export function updateNodeById(root, id, updater) {
+    if (root.id === id) {
+        return updater(root);
+    }
+    if (!root.children) {
+        return root;
+    }
+    let didChange = false;
+    const newChildren = root.children.map(child => {
+        const updated = updateNodeById(child, id, updater);
+        if (updated !== child)
+            didChange = true;
+        return updated;
+    });
+    if (!didChange)
+        return root;
+    return Object.assign(Object.assign({}, root), { children: newChildren });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/tools/prefabeditor/EditorTree.tsx

@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction, useState, MouseEvent } from 'react';
 import { Prefab, GameObject } from "./types";
 import { getComponent } from './components/ComponentRegistry';
 import { base, tree, menu } from './styles';
-import { findNode, findParent, deleteNode, cloneNode } from './utils';
+import { findNode, findParent, deleteNode, cloneNode, updateNodeById } from './utils';
 
 export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId }: {
     prefabData?: Prefab;
@@ -36,6 +36,7 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
     const handleAddChild = (parentId: string) => {
         const newNode: GameObject = {
             id: crypto.randomUUID(),
+            name: "New Node",
             components: {
                 transform: {
                     type: "Transform",
@@ -44,15 +45,13 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
             }
         };
 
-        setPrefabData(prev => {
-            const newRoot = JSON.parse(JSON.stringify(prev.root));
-            const parent = findNode(newRoot, parentId);
-            if (parent) {
-                parent.children = parent.children || [];
-                parent.children.push(newNode);
-            }
-            return { ...prev, root: newRoot };
-        });
+        setPrefabData(prev => ({
+            ...prev,
+            root: updateNodeById(prev.root, parentId, parent => ({
+                ...parent,
+                children: [...(parent.children ?? []), newNode]
+            }))
+        }));
         setContextMenu(null);
     };
 
@@ -60,20 +59,25 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         if (nodeId === prefabData.root.id) return;
 
         setPrefabData(prev => {
-            const newRoot = JSON.parse(JSON.stringify(prev.root));
-            const parent = findParent(newRoot, nodeId);
-            const node = findNode(newRoot, nodeId);
-
-            if (parent && node) {
-                const clone = cloneNode(node);
-                parent.children = parent.children || [];
-                parent.children.push(clone);
-            }
-            return { ...prev, root: newRoot };
+            const node = findNode(prev.root, nodeId);
+            const parent = findParent(prev.root, nodeId);
+            if (!node || !parent) return prev;
+
+            const clone = cloneNode(node);
+
+            return {
+                ...prev,
+                root: updateNodeById(prev.root, parent.id, p => ({
+                    ...p,
+                    children: [...(p.children ?? []), clone]
+                }))
+            };
         });
+
         setContextMenu(null);
     };
 
+
     const handleDelete = (nodeId: string) => {
         if (nodeId === prefabData.root.id) return;
 
@@ -104,29 +108,32 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         e.preventDefault();
 
         setPrefabData(prev => {
-            const newRoot = JSON.parse(JSON.stringify(prev.root));
-            const draggedNode = findNode(newRoot, draggedId);
-            if (draggedNode && findNode(draggedNode, targetId)) return prev;
-
-            const parent = findParent(newRoot, draggedId);
-            if (!parent) return prev;
-
-            const nodeToMove = parent.children?.find(c => c.id === draggedId);
-            if (!nodeToMove) return prev;
-
-            parent.children = parent.children!.filter(c => c.id !== draggedId);
-
-            const target = findNode(newRoot, targetId);
-            if (target) {
-                target.children = target.children || [];
-                target.children.push(nodeToMove);
-            }
-
-            return { ...prev, root: newRoot };
+            const draggedNode = findNode(prev.root, draggedId);
+            const oldParent = findParent(prev.root, draggedId);
+            if (!draggedNode || !oldParent) return prev;
+
+            // Prevent dropping into own subtree
+            if (findNode(draggedNode, targetId)) return prev;
+
+            // 1. Remove from old parent
+            let root = updateNodeById(prev.root, oldParent.id, p => ({
+                ...p,
+                children: p.children!.filter(c => c.id !== draggedId)
+            }));
+
+            // 2. Add to new parent
+            root = updateNodeById(root, targetId, t => ({
+                ...t,
+                children: [...(t.children ?? []), draggedNode]
+            }));
+
+            return { ...prev, root };
         });
+
         setDraggedId(null);
     };
 
+
     const renderNode = (node: GameObject, depth = 0): React.ReactNode => {
         if (!node) return null;
 
@@ -164,7 +171,9 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
                         {isCollapsed ? '▶' : '▼'}
                     </span>
                     {!isRoot && <span style={{ marginRight: 4, opacity: 0.4 }}>⋮⋮</span>}
-                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{node.id}</span>
+                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                        {node.name ?? node.id}
+                    </span>
                 </div>
                 {!isCollapsed && node.children && node.children.map(child => renderNode(child, depth + 1))}
             </div>

package/src/tools/prefabeditor/EditorUI.tsx

@@ -85,8 +85,10 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
             <div style={base.label}>Node ID</div>
             <input
                 style={base.input}
-                value={node.id}
-                onChange={e => updateNode(n => ({ ...n, id: e.target.value }))}
+                value={node.name ?? ""}
+                onChange={e =>
+                    updateNode(n => ({ ...n, name: e.target.value }))
+                }
             />
         </div>
 

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

@@ -1,4 +1,4 @@
-
+import { useEffect, useRef, useState } from "react";
 import { Component } from "./ComponentRegistry";
 
 function TransformComponentEditor({ component, onUpdate, transformMode, setTransformMode }: {
@@ -67,36 +67,131 @@ const TransformComponent: Component = {
 
 export default TransformComponent;
 
+export function Vector3Input({
+    label,
+    value,
+    onChange
+}: {
+    label: string;
+    value: [number, number, number];
+    onChange: (v: [number, number, number]) => void;
+}) {
+    const [draft, setDraft] = useState<[string, string, string]>(
+        () => value.map(v => v.toString()) as any
+    );
+
+    // Sync external changes (gizmo, undo, etc.)
+    useEffect(() => {
+        setDraft(value.map(v => v.toString()) as any);
+    }, [value[0], value[1], value[2]]);
+
+    const dragState = useRef<{
+        index: number;
+        startX: number;
+        startValue: number;
+    } | null>(null);
+
+    const commit = (index: number) => {
+        const num = parseFloat(draft[index]);
+        if (Number.isFinite(num)) {
+            const next = [...value] as [number, number, number];
+            next[index] = num;
+            onChange(next);
+        }
+    };
+
+    const startScrub = (e: React.PointerEvent, index: number) => {
+        e.preventDefault();
+
+        dragState.current = {
+            index,
+            startX: e.clientX,
+            startValue: value[index]
+        };
+
+        (e.target as HTMLElement).setPointerCapture(e.pointerId);
+        document.body.style.cursor = "ew-resize";
+    };
+
+    const onScrubMove = (e: React.PointerEvent) => {
+        if (!dragState.current) return;
+
+        const { index, 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
 
-export function Vector3Input({ label, value, onChange }: { label: string, value: [number, number, number], onChange: (v: [number, number, number]) => void }) {
-    const handleChange = (index: number, val: string) => {
-        const newValue = [...value] as [number, number, number];
-        newValue[index] = parseFloat(val) || 0;
-        onChange(newValue);
+        const nextValue = startValue + dx * speed;
+        const next = [...value] as [number, number, number];
+        next[index] = nextValue;
+
+        setDraft(d => {
+            const copy = [...d] as any;
+            copy[index] = nextValue.toFixed(3);
+            return copy;
+        });
+
+        onChange(next);
+    };
+
+    const endScrub = (e: React.PointerEvent) => {
+        if (!dragState.current) return;
+
+        dragState.current = null;
+        document.body.style.cursor = "";
+        (e.target as HTMLElement).releasePointerCapture(e.pointerId);
     };
 
     const axes = [
-        { key: 'x', color: 'red', index: 0 },
-        { key: 'y', color: 'green', index: 1 },
-        { key: 'z', color: 'blue', index: 2 }
+        { key: "x", color: "red", index: 0 },
+        { key: "y", color: "green", index: 1 },
+        { key: "z", color: "blue", index: 2 }
     ] as const;
 
-    return <div className="mb-2">
-        <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1">{label}</label>
-        <div className="flex gap-1">
-            {axes.map(({ key, color, index }) => (
-                <div key={key} className="flex-1 flex items-center gap-1 bg-black/30 border border-cyan-500/20 rounded px-1.5 py-1 min-h-[32px]">
-                    <span className={`text-xs font-bold text-${color}-400 w-3`}>{key.toUpperCase()}</span>
-                    <input
-                        className="flex-1 bg-transparent text-xs text-cyan-200 font-mono outline-none w-full min-w-0"
-                        type="number"
-                        step="0.1"
-                        value={value[index].toFixed(2)}
-                        onChange={e => handleChange(index, e.target.value)}
-                        onFocus={e => e.target.select()}
-                    />
-                </div>
-            ))}
+    return (
+        <div className="mb-2">
+            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1">
+                {label}
+            </label>
+
+            <div className="flex gap-1">
+                {axes.map(({ key, color, index }) => (
+                    <div
+                        key={key}
+                        className="flex-1 flex items-center gap-1 bg-black/30 border border-cyan-500/20 rounded px-1.5 py-1 min-h-[32px]"
+                    >
+                        {/* SCRUB HANDLE */}
+                        <span
+                            className={`text-xs font-bold text-${color}-400 w-3 cursor-ew-resize select-none`}
+                            onPointerDown={e => startScrub(e, index)}
+                            onPointerMove={onScrubMove}
+                            onPointerUp={endScrub}
+                        >
+                            {key.toUpperCase()}
+                        </span>
+
+                        {/* TEXT INPUT */}
+                        <input
+                            className="flex-1 bg-transparent text-xs text-cyan-200 font-mono outline-none w-full min-w-0"
+                            type="text"
+                            value={draft[index]}
+                            onChange={e => {
+                                const next = [...draft] as any;
+                                next[index] = e.target.value;
+                                setDraft(next);
+                            }}
+                            onBlur={() => commit(index)}
+                            onKeyDown={e => {
+                                if (e.key === "Enter") {
+                                    (e.target as HTMLInputElement).blur();
+                                }
+                            }}
+                        />
+                    </div>
+                ))}
+            </div>
         </div>
-    </div>
-}
+    );
+}

package/src/tools/prefabeditor/types.ts

@@ -6,6 +6,7 @@ export interface Prefab {
 
 export interface GameObject {
     id: string;
+    name?: string;
     disabled?: boolean;
     hidden?: boolean;
     children?: GameObject[];

package/src/tools/prefabeditor/utils.ts

@@ -69,6 +69,7 @@ export function cloneNode(node: GameObject): GameObject {
     return {
         ...node,
         id: crypto.randomUUID(),
+        name: `${node.name ?? "Node"} Copy`,
         children: node.children?.map(cloneNode)
     };
 }
@@ -78,3 +79,32 @@ export function getComponent<T = any>(node: GameObject, type: string): T | undef
     const comp = Object.values(node.components ?? {}).find(c => c?.type === type);
     return comp?.properties as T | undefined;
 }
+
+export function updateNodeById(
+  root: GameObject,
+  id: string,
+  updater: (node: GameObject) => GameObject
+): GameObject {
+  if (root.id === id) {
+    return updater(root);
+  }
+
+  if (!root.children) {
+    return root;
+  }
+
+  let didChange = false;
+
+  const newChildren = root.children.map(child => {
+    const updated = updateNodeById(child, id, updater);
+    if (updated !== child) didChange = true;
+    return updated;
+  });
+
+  if (!didChange) return root;
+
+  return {
+    ...root,
+    children: newChildren
+  };
+}