react-three-game 0.0.56 → 0.0.58

package/dist/tools/prefabeditor/EditorTree.js

@@ -1,32 +1,79 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { getComponent } from './components/ComponentRegistry';
-import { base, colors, tree, menu } from './styles';
-import { findNode, findParent, deleteNode, cloneNode, updateNodeById, loadJson, saveJson, regenerateIds } from './utils';
+import { base, colors, tree } from './styles';
+import { findNode, findParent, deleteNode, cloneNode, updateNodeById } from './utils';
 import { useEditorContext } from './EditorContext';
+import { Dropdown } from './Dropdown';
+import { FileMenu, MenuTriggerButton, TreeContextMenu, TreeNodeMenu } from './EditorTreeMenus';
+function moveNode(root, draggedId, targetId, position) {
+    const draggedNode = findNode(root, draggedId);
+    const oldParent = findParent(root, draggedId);
+    if (!draggedNode || !oldParent || findNode(draggedNode, targetId)) {
+        return root;
+    }
+    if (position === 'before') {
+        const targetParent = findParent(root, targetId);
+        if (!(targetParent === null || targetParent === void 0 ? void 0 : targetParent.children))
+            return root;
+        if (targetParent.id === oldParent.id) {
+            const siblings = targetParent.children.filter(child => child.id !== draggedId);
+            const targetIndex = siblings.findIndex(child => child.id === targetId);
+            if (targetIndex === -1)
+                return root;
+            siblings.splice(targetIndex, 0, draggedNode);
+            return updateNodeById(root, targetParent.id, parent => (Object.assign(Object.assign({}, parent), { children: siblings })));
+        }
+        const rootWithoutDragged = updateNodeById(root, oldParent.id, parent => {
+            var _a;
+            return (Object.assign(Object.assign({}, parent), { children: ((_a = parent.children) !== null && _a !== void 0 ? _a : []).filter(child => child.id !== draggedId) }));
+        });
+        return updateNodeById(rootWithoutDragged, targetParent.id, parent => {
+            var _a;
+            const children = [...((_a = parent.children) !== null && _a !== void 0 ? _a : [])];
+            const targetIndex = children.findIndex(child => child.id === targetId);
+            if (targetIndex === -1)
+                return parent;
+            children.splice(targetIndex, 0, draggedNode);
+            return Object.assign(Object.assign({}, parent), { children });
+        });
+    }
+    const rootWithoutDragged = updateNodeById(root, oldParent.id, parent => {
+        var _a;
+        return (Object.assign(Object.assign({}, parent), { children: ((_a = parent.children) !== null && _a !== void 0 ? _a : []).filter(child => child.id !== draggedId) }));
+    });
+    return updateNodeById(rootWithoutDragged, targetId, target => {
+        var _a;
+        return (Object.assign(Object.assign({}, target), { children: [...((_a = target.children) !== null && _a !== void 0 ? _a : []), draggedNode] }));
+    });
+}
+function duplicateNodeBelow(root, nodeId) {
+    const node = findNode(root, nodeId);
+    const parent = findParent(root, nodeId);
+    if (!node || !parent)
+        return null;
+    const duplicate = cloneNode(node);
+    const nextRoot = updateNodeById(root, parent.id, currentParent => (Object.assign(Object.assign({}, currentParent), { children: (() => {
+            var _a;
+            const children = [...((_a = currentParent.children) !== null && _a !== void 0 ? _a : [])];
+            const index = children.findIndex(child => child.id === nodeId);
+            if (index === -1)
+                return [...children, duplicate];
+            children.splice(index + 1, 0, duplicate);
+            return children;
+        })() })));
+    return { root: nextRoot, duplicatedId: duplicate.id };
+}
 export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId, onUndo, onRedo, canUndo, canRedo }) {
-    const [contextMenu, setContextMenu] = useState(null);
+    const { onFocusNode } = useEditorContext();
     const [draggedId, setDraggedId] = useState(null);
+    const [dropTarget, setDropTarget] = useState(null);
     const [collapsedIds, setCollapsedIds] = useState(new Set());
     const [collapsed, setCollapsed] = useState(false);
-    const [fileMenuOpen, setFileMenuOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
+    const [contextMenu, setContextMenu] = useState(null);
     if (!prefabData || !setPrefabData)
         return null;
-    const handleContextMenu = (e, nodeId) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setContextMenu({ x: e.clientX, y: e.clientY, nodeId });
-    };
     const toggleCollapse = (e, id) => {
         e.stopPropagation();
         setCollapsedIds(prev => {
@@ -36,35 +83,33 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         });
     };
     const handleAddChild = (parentId) => {
+        var _a;
+        const newNode = {
+            id: crypto.randomUUID(),
+            name: "New Node",
+            components: {
+                transform: {
+                    type: "Transform",
+                    properties: Object.assign({}, (_a = getComponent('Transform')) === null || _a === void 0 ? void 0 : _a.defaultProperties)
+                }
+            }
+        };
         setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, parentId, parent => {
-                var _a, _b;
-                return (Object.assign(Object.assign({}, parent), { children: [...((_a = parent.children) !== null && _a !== void 0 ? _a : []), {
-                            id: crypto.randomUUID(),
-                            name: "New Node",
-                            components: {
-                                transform: {
-                                    type: "Transform",
-                                    properties: Object.assign({}, (_b = getComponent('Transform')) === null || _b === void 0 ? void 0 : _b.defaultProperties)
-                                }
-                            }
-                        }] }));
+                var _a;
+                return (Object.assign(Object.assign({}, parent), { children: [...((_a = parent.children) !== null && _a !== void 0 ? _a : []), newNode] }));
             }) })));
-        setContextMenu(null);
+        setSelectedId(newNode.id);
     };
     const handleDuplicate = (nodeId) => {
         if (nodeId === prefabData.root.id)
             return;
         setPrefabData(prev => {
-            const node = findNode(prev.root, nodeId);
-            const parent = findParent(prev.root, nodeId);
-            if (!node || !parent)
+            const result = duplicateNodeBelow(prev.root, nodeId);
+            if (!result)
                 return prev;
-            return Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, parent.id, p => {
-                    var _a;
-                    return (Object.assign(Object.assign({}, p), { children: [...((_a = p.children) !== null && _a !== void 0 ? _a : []), cloneNode(node)] }));
-                }) });
+            setSelectedId(result.duplicatedId);
+            return Object.assign(Object.assign({}, prev), { root: result.root });
         });
-        setContextMenu(null);
     };
     const handleDelete = (nodeId) => {
         if (nodeId === prefabData.root.id)
@@ -72,43 +117,58 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: deleteNode(prev.root, nodeId) })));
         if (selectedId === nodeId)
             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 closeContextMenu = () => setContextMenu(null);
+    const openContextMenu = (nodeId, x, y) => {
+        setSelectedId(nodeId);
+        setContextMenu({ nodeId, x, y });
+    };
+    const handleFocus = (nodeId) => {
+        setSelectedId(nodeId);
+        onFocusNode === null || onFocusNode === void 0 ? void 0 : onFocusNode(nodeId);
+    };
+    const renderTreeNodeMenu = (nodeId, isRoot, onClose) => (_jsx(TreeNodeMenu, { isRoot: isRoot, nodeId: nodeId, onAddChild: handleAddChild, onFocus: handleFocus, onDuplicate: isRoot ? undefined : handleDuplicate, onDelete: isRoot ? undefined : handleDelete, onClose: onClose }));
     const handleDragStart = (e, id) => {
         if (id === prefabData.root.id)
             return e.preventDefault();
         e.dataTransfer.effectAllowed = "move";
         setDraggedId(id);
     };
-    const handleDragOver = (e, targetId) => {
+    const getDropPosition = (e, isRoot) => {
+        if (isRoot)
+            return 'inside';
+        const rect = e.currentTarget.getBoundingClientRect();
+        return e.clientY <= rect.top + rect.height * 0.35 ? 'before' : 'inside';
+    };
+    const handleDragOver = (e, targetId, isRoot) => {
         if (!draggedId || draggedId === targetId)
             return;
         const draggedNode = findNode(prefabData.root, draggedId);
         if (draggedNode && findNode(draggedNode, targetId))
             return;
         e.preventDefault();
+        setDropTarget({ id: targetId, position: getDropPosition(e, isRoot) });
+    };
+    const handleDragLeave = (e, targetId) => {
+        const relatedTarget = e.relatedTarget;
+        if (relatedTarget instanceof Node && e.currentTarget.contains(relatedTarget))
+            return;
+        setDropTarget(current => (current === null || current === void 0 ? void 0 : current.id) === targetId ? null : current);
     };
-    const handleDrop = (e, targetId) => {
+    const handleDrop = (e, targetId, isRoot) => {
         if (!draggedId || draggedId === targetId)
             return;
         e.preventDefault();
+        const dropPosition = getDropPosition(e, isRoot);
         setPrefabData(prev => {
-            const draggedNode = findNode(prev.root, draggedId);
-            const oldParent = findParent(prev.root, draggedId);
-            if (!draggedNode || !oldParent || findNode(draggedNode, targetId))
-                return prev;
-            let root = updateNodeById(prev.root, oldParent.id, p => (Object.assign(Object.assign({}, p), { children: p.children.filter(c => c.id !== draggedId) })));
-            root = updateNodeById(root, targetId, t => {
-                var _a;
-                return (Object.assign(Object.assign({}, t), { children: [...((_a = t.children) !== null && _a !== void 0 ? _a : []), draggedNode] }));
-            });
-            return Object.assign(Object.assign({}, prev), { root });
+            const root = moveNode(prev.root, draggedId, targetId, dropPosition);
+            return root === prev.root ? prev : Object.assign(Object.assign({}, prev), { root });
         });
         setDraggedId(null);
+        setDropTarget(null);
     };
     const matchesSearch = (node, query) => {
         var _a, _b, _c;
@@ -130,49 +190,47 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         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`, 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: {
+        const isDropTarget = (dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.id) === node.id;
+        const showDropBefore = isDropTarget && (dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.position) === 'before';
+        const showDropInside = isDropTarget && (dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.position) === 'inside';
+        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', borderTop: showDropBefore ? `2px solid ${colors.accent}` : undefined, boxShadow: showDropInside ? `inset 0 0 0 1px ${colors.accentBorder}` : undefined }), draggable: !isRoot, onClick: (e) => { e.stopPropagation(); setSelectedId(node.id); }, onContextMenu: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        openContextMenu(node.id, e.clientX, e.clientY);
+                    }, onDragStart: (e) => handleDragStart(e, node.id), onDragEnd: () => { setDraggedId(null); setDropTarget(null); }, onDragOver: (e) => handleDragOver(e, node.id, isRoot), onDragLeave: (e) => handleDragLeave(e, node.id), onDrop: (e) => handleDrop(e, node.id, isRoot), 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',
-                                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 && (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: '4px 4px', borderBottom: `1px solid ${colors.borderLight}` }, children: _jsx("input", { type: "text", placeholder: "Search nodes...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onClick: (e) => e.stopPropagation(), style: Object.assign(Object.assign({}, base.input), { padding: '4px 8px' }) }) }), _jsx("div", { className: "tree-scroll", style: tree.scroll, children: renderNode(prefabData.root) })] }))] }), contextMenu && (_jsxs("div", { style: Object.assign(Object.assign({}, menu.container), { top: contextMenu.y, left: contextMenu.x }), onClick: (e) => e.stopPropagation(), onPointerLeave: () => setContextMenu(null), children: [_jsx("button", { style: menu.item, onClick: () => handleAddChild(contextMenu.nodeId), children: "Add Child" }), contextMenu.nodeId !== prefabData.root.id && (_jsxs(_Fragment, { children: [_jsx("button", { style: menu.item, onClick: () => handleDuplicate(contextMenu.nodeId), children: "Duplicate" }), _jsx("button", { style: Object.assign(Object.assign({}, menu.item), menu.danger), onClick: () => handleDelete(contextMenu.nodeId), children: "Delete" })] }))] }))] }));
-}
-function FileMenu({ prefabData, setPrefabData, onClose }) {
-    const { onScreenshot, onExportGLB } = useEditorContext();
-    const handleLoad = () => __awaiter(this, void 0, void 0, function* () {
-        const loadedPrefab = yield loadJson();
-        if (!loadedPrefab)
-            return;
-        setPrefabData(loadedPrefab);
-        onClose();
-    });
-    const handleSave = () => {
-        saveJson(prefabData, "prefab");
-        onClose();
+                                    }, 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 && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx(MenuTriggerButton, { buttonRef: ref, onToggle: toggle, title: "Node Actions", style: {
+                                            background: 'none',
+                                            border: 'none',
+                                            cursor: 'pointer',
+                                            padding: '0 4px',
+                                            fontSize: 14,
+                                            opacity: 0.7,
+                                            color: 'inherit',
+                                        }, children: "\u22EF" })), children: (close) => renderTreeNodeMenu(node.id, false, close) }), _jsx("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', children: node.disabled ? '◎' : '◉' })] })), isRoot && (_jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx(MenuTriggerButton, { buttonRef: ref, onToggle: toggle, title: "Scene Actions", style: {
+                                    background: 'none',
+                                    border: 'none',
+                                    cursor: 'pointer',
+                                    padding: '0 4px',
+                                    fontSize: 14,
+                                    opacity: 0.7,
+                                    color: 'inherit',
+                                }, children: "\u22EF" })), children: (close) => renderTreeNodeMenu(node.id, true, close) }))] }), !isCollapsed && node.children && node.children.map(child => renderNode(child, depth + 1))] }, node.id));
     };
-    const handleLoadIntoScene = () => __awaiter(this, void 0, void 0, function* () {
-        const loadedPrefab = yield loadJson();
-        if (!loadedPrefab)
-            return;
-        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, prev.root.id, root => {
-                var _a;
-                return (Object.assign(Object.assign({}, root), { children: [...((_a = root.children) !== null && _a !== void 0 ? _a : []), regenerateIds(loadedPrefab.root)] }));
-            }) })));
-        onClose();
-    });
-    return (_jsxs("div", { style: Object.assign(Object.assign({}, menu.container), { position: 'absolute', top: 28, right: 0 }), onClick: (e) => e.stopPropagation(), children: [_jsx("button", { style: menu.item, onClick: handleLoad, children: "\uD83D\uDCE5 Load Prefab JSON" }), _jsx("button", { style: menu.item, onClick: handleSave, children: "\uD83D\uDCBE Save Prefab JSON" }), _jsx("button", { style: menu.item, onClick: handleLoadIntoScene, children: "\uD83D\uDCC2 Load into Scene" }), _jsx("button", { style: menu.item, onClick: () => { onScreenshot === null || onScreenshot === void 0 ? void 0 : onScreenshot(); onClose(); }, children: "\uD83D\uDCF8 Screenshot" }), _jsx("button", { style: menu.item, onClick: () => { onExportGLB === null || onExportGLB === void 0 ? void 0 : onExportGLB(); onClose(); }, children: "\uD83D\uDCE6 Export GLB" })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: Object.assign(Object.assign({}, tree.panel), { width: collapsed ? 'auto' : 224 }), 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" }), _jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx(MenuTriggerButton, { buttonRef: ref, onToggle: toggle, title: "Menu", style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10 }), children: "\u22EE" })), children: (close) => (_jsx(FileMenu, { prefabData: prefabData, setPrefabData: setPrefabData, onClose: close })) })] }))] }), !collapsed && (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: '4px 4px', borderBottom: `1px solid ${colors.borderLight}` }, children: _jsx("input", { type: "text", placeholder: "Search nodes...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onClick: (e) => e.stopPropagation(), style: Object.assign(Object.assign({}, base.input), { padding: '4px 8px' }) }) }), _jsx("div", { className: "tree-scroll", style: tree.scroll, children: renderNode(prefabData.root) })] }))] }), _jsx(TreeContextMenu, { contextMenu: contextMenu, onClose: closeContextMenu, children: (nodeId, close) => renderTreeNodeMenu(nodeId, nodeId === prefabData.root.id, close) })] }));
 }

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

@@ -0,0 +1,33 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Prefab } from './types';
+export type TreeContextMenuState = {
+    nodeId: string;
+    x: number;
+    y: number;
+} | null;
+export declare function MenuTriggerButton({ buttonRef, onToggle, title, style, children, }: {
+    buttonRef: React.RefObject<HTMLButtonElement | null>;
+    onToggle: () => void;
+    title: string;
+    style: React.CSSProperties;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TreeNodeMenu({ isRoot, nodeId, onAddChild, onFocus, onDuplicate, onDelete, onClose, }: {
+    isRoot: boolean;
+    nodeId: string;
+    onAddChild: (parentId: string) => void;
+    onFocus: (nodeId: string) => void;
+    onDuplicate?: (nodeId: string) => void;
+    onDelete?: (nodeId: string) => void;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TreeContextMenu({ contextMenu, onClose, children, }: {
+    contextMenu: TreeContextMenuState;
+    onClose: () => void;
+    children: (nodeId: string, onClose: () => void) => React.ReactNode;
+}): import("react").ReactPortal | null;
+export declare function FileMenu({ prefabData, setPrefabData, onClose }: {
+    prefabData: Prefab;
+    setPrefabData: Dispatch<SetStateAction<Prefab>>;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/tools/prefabeditor/EditorTreeMenus.js

@@ -0,0 +1,136 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { menu } from './styles';
+import { useEditorContext } from './EditorContext';
+import { getComponent } from './components/ComponentRegistry';
+import { loadJson, saveJson, regenerateIds, updateNodeById } from './utils';
+function createEmptyPrefab() {
+    var _a;
+    return {
+        id: crypto.randomUUID(),
+        name: 'New Scene',
+        root: {
+            id: crypto.randomUUID(),
+            name: 'Scene',
+            components: {
+                transform: {
+                    type: 'Transform',
+                    properties: Object.assign({}, (_a = getComponent('Transform')) === null || _a === void 0 ? void 0 : _a.defaultProperties)
+                }
+            },
+            children: []
+        }
+    };
+}
+function MenuPanel({ children, style, }) {
+    return (_jsx("div", { style: Object.assign(Object.assign(Object.assign({}, menu.container), { position: 'static' }), style), onClick: (e) => e.stopPropagation(), children: children }));
+}
+function MenuItemButton({ children, onClick, danger = false, style, }) {
+    return (_jsx("button", { style: danger ? Object.assign(Object.assign(Object.assign({}, menu.item), menu.danger), style) : Object.assign(Object.assign({}, menu.item), style), onClick: onClick, children: children }));
+}
+function MenuSubmenu({ label, children, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    return (_jsxs("div", { style: { position: 'relative' }, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), children: [_jsxs(MenuItemButton, { onClick: () => setIsOpen(open => !open), style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }, children: [_jsx("span", { children: label }), _jsx("span", { "aria-hidden": "true", children: "\u203A" })] }), isOpen && (_jsx("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: '100%',
+                    zIndex: 1,
+                }, children: _jsx(MenuPanel, { children: children }) }))] }));
+}
+export function MenuTriggerButton({ buttonRef, onToggle, title, style, children, }) {
+    return (_jsx("button", { ref: buttonRef, style: style, onClick: (e) => {
+            e.stopPropagation();
+            onToggle();
+        }, title: title, children: children }));
+}
+export function TreeNodeMenu({ isRoot, nodeId, onAddChild, onFocus, onDuplicate, onDelete, onClose, }) {
+    return (_jsxs(MenuPanel, { children: [_jsx(MenuItemButton, { onClick: () => { onAddChild(nodeId); onClose(); }, children: "Add Child" }), _jsx(MenuItemButton, { onClick: () => { onFocus(nodeId); onClose(); }, children: "Focus Camera" }), !isRoot && onDuplicate && (_jsx(MenuItemButton, { onClick: () => { onDuplicate(nodeId); onClose(); }, children: "Duplicate" })), !isRoot && onDelete && (_jsx(MenuItemButton, { danger: true, onClick: () => { onDelete(nodeId); onClose(); }, children: "Delete" }))] }));
+}
+export function TreeContextMenu({ contextMenu, onClose, children, }) {
+    var _a, _b;
+    const panelRef = useRef(null);
+    const [position, setPosition] = useState(null);
+    useEffect(() => {
+        if (!contextMenu)
+            return;
+        const handlePointerDown = (event) => {
+            var _a;
+            const target = event.target;
+            if (!target)
+                return;
+            if ((_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))
+                return;
+            onClose();
+        };
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('pointerdown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('pointerdown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [contextMenu, onClose]);
+    useEffect(() => {
+        if (!contextMenu || !panelRef.current || typeof window === 'undefined')
+            return;
+        const panelRect = panelRef.current.getBoundingClientRect();
+        const left = Math.max(8, Math.min(contextMenu.x, window.innerWidth - panelRect.width - 8));
+        const top = Math.max(8, Math.min(contextMenu.y, window.innerHeight - panelRect.height - 8));
+        setPosition({ left, top });
+    }, [contextMenu]);
+    useEffect(() => {
+        if (!contextMenu) {
+            setPosition(null);
+        }
+    }, [contextMenu]);
+    if (!contextMenu || typeof document === 'undefined')
+        return null;
+    return createPortal(_jsx("div", { ref: panelRef, style: {
+            position: 'fixed',
+            left: (_a = position === null || position === void 0 ? void 0 : position.left) !== null && _a !== void 0 ? _a : contextMenu.x,
+            top: (_b = position === null || position === void 0 ? void 0 : position.top) !== null && _b !== void 0 ? _b : contextMenu.y,
+            zIndex: 1000,
+        }, onMouseLeave: onClose, onContextMenu: (e) => e.preventDefault(), children: children(contextMenu.nodeId, onClose) }), document.body);
+}
+export function FileMenu({ prefabData, setPrefabData, onClose }) {
+    const { onScreenshot, onExportGLB } = useEditorContext();
+    const handleNewScene = () => {
+        setPrefabData(createEmptyPrefab());
+        onClose();
+    };
+    const handleNewSceneFromPrefab = () => __awaiter(this, void 0, void 0, function* () {
+        const loadedPrefab = yield loadJson();
+        if (!loadedPrefab)
+            return;
+        setPrefabData(loadedPrefab);
+        onClose();
+    });
+    const handleSave = () => {
+        saveJson(prefabData, 'prefab');
+        onClose();
+    };
+    const handleLoadIntoScene = () => __awaiter(this, void 0, void 0, function* () {
+        const loadedPrefab = yield loadJson();
+        if (!loadedPrefab)
+            return;
+        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, prev.root.id, root => {
+                var _a;
+                return (Object.assign(Object.assign({}, root), { children: [...((_a = root.children) !== null && _a !== void 0 ? _a : []), regenerateIds(loadedPrefab.root)] }));
+            }) })));
+        onClose();
+    });
+    return (_jsxs(MenuPanel, { style: { overflow: 'visible' }, children: [_jsxs(MenuSubmenu, { label: "File", children: [_jsx(MenuItemButton, { onClick: handleNewScene, children: "New Scene" }), _jsx(MenuItemButton, { onClick: handleNewSceneFromPrefab, children: "New Scene from Prefab" }), _jsx(MenuItemButton, { onClick: handleLoadIntoScene, children: "Load Prefab into Scene" }), _jsx(MenuItemButton, { onClick: handleSave, children: "Save Prefab" })] }), _jsxs(MenuSubmenu, { label: "Export", children: [_jsx(MenuItemButton, { onClick: () => { onExportGLB === null || onExportGLB === void 0 ? void 0 : onExportGLB(); onClose(); }, children: "GLB" }), _jsx(MenuItemButton, { onClick: () => { onScreenshot === null || onScreenshot === void 0 ? void 0 : onScreenshot(); onClose(); }, children: "PNG" })] })] }));
+}

package/dist/tools/prefabeditor/EditorUI.js

@@ -42,7 +42,7 @@ function NodeInspector({ node, updateNode, deleteNode, basePath }) {
         if (!newAvailable.includes(addType))
             setAddType(newAvailable[0] || "");
     }, [Object.keys(node.components || {}).join(',')]);
-    return _jsxs("div", { style: Object.assign(Object.assign({}, inspector.content), { paddingRight: 2 }), className: "prefab-scroll", children: [_jsxs("div", { style: base.section, children: [_jsxs("div", { style: { display: "flex", marginBottom: 8, alignItems: 'center', gap: 8 }, children: [_jsx("div", { style: { fontSize: 10, color: colors.textDim, wordBreak: 'break-all', border: `1px solid ${colors.border}`, padding: '2px 6px', borderRadius: 3, flex: 1, fontFamily: 'monospace' }, children: node.id }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), base.btnDanger), title: "Delete Node", onClick: deleteNode, children: "\u274C" })] }), _jsx("input", { style: base.input, value: (_a = node.name) !== null && _a !== void 0 ? _a : "", placeholder: 'Node name', onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { name: e.target.value }))) })] }), _jsxs("div", { style: base.section, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }, children: _jsx("div", { style: base.label, children: "Components" }) }), node.components && Object.entries(node.components).map(([key, comp]) => {
+    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: colors.textDim, wordBreak: 'break-all', border: `1px solid ${colors.border}`, padding: '2px 6px', borderRadius: 3, flex: 1, fontFamily: 'monospace' }, children: node.id }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), base.btnDanger), title: "Delete Node", onClick: deleteNode, children: "\u274C" })] }), _jsx("input", { style: base.input, value: (_a = node.name) !== null && _a !== void 0 ? _a : "", placeholder: 'Node name', onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { name: e.target.value }))) })] }), _jsxs("div", { style: base.section, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }, children: _jsx("div", { style: base.label, children: "Components" }) }), node.components && Object.entries(node.components).map(([key, comp]) => {
                         if (!comp)
                             return null;
                         const def = ALL_COMPONENTS[comp.type];

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

@@ -12,6 +12,7 @@ declare const PrefabEditor: import("react").ForwardRefExoticComponent<{
     initialPrefab?: Prefab;
     physics?: boolean;
     onPrefabChange?: (prefab: Prefab) => void;
+    uiPlugins?: React.ReactNode[] | React.ReactNode;
     children?: React.ReactNode;
 } & import("react").RefAttributes<PrefabEditorRef>>;
 export default PrefabEditor;

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -21,12 +21,14 @@ const DEFAULT_PREFAB = {
         }
     }
 };
-const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPrefabChange, children }, ref) => {
+const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPrefabChange, uiPlugins, children }, ref) => {
     const [editMode, setEditMode] = useState(true);
     const [loadedPrefab, setLoadedPrefab] = useState(initialPrefab !== null && initialPrefab !== void 0 ? initialPrefab : DEFAULT_PREFAB);
     const [selectedId, setSelectedId] = useState(null);
     const [transformMode, setTransformMode] = useState("translate");
     const [snapResolution, setSnapResolution] = useState(0);
+    const [positionSnap, setPositionSnap] = useState(0.5);
+    const [rotationSnap, setRotationSnap] = useState(Math.PI / 4);
     const [history, setHistory] = useState([loadedPrefab]);
     const [historyIndex, setHistoryIndex] = useState(0);
     const throttleRef = useRef(null);
@@ -107,6 +109,10 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
             filename: `${loadedPrefab.name || 'scene'}.glb`
         });
     };
+    const handleFocusNode = (nodeId) => {
+        var _a;
+        (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.focusNode(nodeId);
+    };
     useEffect(() => {
         const canvas = document.querySelector('canvas');
         if (canvas)
@@ -180,9 +186,14 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
             setTransformMode,
             snapResolution,
             setSnapResolution,
+            positionSnap,
+            setPositionSnap,
+            rotationSnap,
+            setRotationSnap,
+            onFocusNode: handleFocusNode,
             onScreenshot: handleScreenshot,
             onExportGLB: handleExportGLB
-        }, 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 })] });
+        }, children: [_jsx(GameCanvas, { camera: { position: [0, 5, 15] }, children: physics ? (_jsx(Physics, { debug: editMode, paused: editMode, children: content })) : content }), _jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }), uiPlugins] }), _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

@@ -6,6 +6,7 @@ export interface PrefabRootRef {
     rigidBodyRefs: Map<string, any>;
     injectModel: (filename: string, model: Object3D) => void;
     injectTexture: (filename: string, file: File) => void;
+    focusNode: (nodeId: string) => void;
 }
 export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     editMode?: boolean;