react-three-game 0.0.67 → 0.0.69

package/dist/tools/prefabeditor/EditorTree.js

@@ -1,79 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 import { getComponent } from './components/ComponentRegistry';
 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 }) {
+import { FileMenu, TreeContextMenu, TreeNodeMenu } from './EditorTreeMenus';
+import { usePrefabChildIds, usePrefabNode, usePrefabRootId, usePrefabStore, usePrefabStoreApi } from './prefabStore';
+export default function EditorTree({ selectedId, setSelectedId, getPrefab, onReplacePrefab, onImportPrefab, onUndo, onRedo, canUndo, canRedo }) {
     const { onFocusNode } = useEditorContext();
+    const rootId = usePrefabRootId();
+    const store = usePrefabStoreApi();
+    const addChild = usePrefabStore(state => state.addChild);
+    const duplicateNode = usePrefabStore(state => state.duplicateNode);
+    const deleteNode = usePrefabStore(state => state.deleteNode);
+    const toggleNodeFlag = usePrefabStore(state => state.toggleNodeFlag);
+    const moveNode = usePrefabStore(state => state.moveNode);
     const [draggedId, setDraggedId] = useState(null);
     const [dropTarget, setDropTarget] = useState(null);
     const [collapsedIds, setCollapsedIds] = useState(new Set());
     const [collapsed, setCollapsed] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
     const [contextMenu, setContextMenu] = useState(null);
-    if (!prefabData || !setPrefabData)
-        return null;
     const toggleCollapse = (e, id) => {
         e.stopPropagation();
         setCollapsedIds(prev => {
@@ -94,43 +41,32 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
                 }
             }
         };
-        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] }));
-            }) })));
+        addChild(parentId, newNode);
         setSelectedId(newNode.id);
     };
     const handleDuplicate = (nodeId) => {
-        if (nodeId === prefabData.root.id)
+        if (nodeId === rootId)
             return;
-        setPrefabData(prev => {
-            const result = duplicateNodeBelow(prev.root, nodeId);
-            if (!result)
-                return prev;
-            setSelectedId(result.duplicatedId);
-            return Object.assign(Object.assign({}, prev), { root: result.root });
-        });
+        const duplicatedId = duplicateNode(nodeId);
+        if (duplicatedId)
+            setSelectedId(duplicatedId);
     };
     const handleDelete = (nodeId) => {
-        if (nodeId === prefabData.root.id)
+        if (nodeId === rootId)
             return;
-        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: deleteNode(prev.root, nodeId) })));
+        deleteNode(nodeId);
         if (selectedId === nodeId)
             setSelectedId(null);
     };
-    const toggleNodeFlag = (nodeId, key) => {
-        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, nodeId, node => (Object.assign(Object.assign({}, node), { [key]: !node[key] }))) })));
-    };
     const handleToggleDisabled = (nodeId) => {
         toggleNodeFlag(nodeId, 'disabled');
     };
     const handleToggleLocked = (nodeId) => {
         var _a;
-        const willLock = !((_a = findNode(prefabData.root, nodeId)) === null || _a === void 0 ? void 0 : _a.locked);
+        const willLock = !((_a = store.getState().nodesById[nodeId]) === null || _a === void 0 ? void 0 : _a.locked);
         toggleNodeFlag(nodeId, 'locked');
-        if (willLock && selectedId === nodeId) {
+        if (willLock && selectedId === nodeId)
             setSelectedId(null);
-        }
     };
     const closeContextMenu = () => setContextMenu(null);
     const openContextMenu = (nodeId, x, y) => {
@@ -143,10 +79,10 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
     };
     const renderTreeNodeMenu = (nodeId, isRoot, onClose) => {
         var _a;
-        return (_jsx(TreeNodeMenu, { isRoot: isRoot, nodeId: nodeId, locked: (_a = findNode(prefabData.root, nodeId)) === null || _a === void 0 ? void 0 : _a.locked, onAddChild: handleAddChild, onFocus: handleFocus, onToggleLock: isRoot ? undefined : handleToggleLocked, onDuplicate: isRoot ? undefined : handleDuplicate, onDelete: isRoot ? undefined : handleDelete, onClose: onClose }));
+        return (_jsx(TreeNodeMenu, { isRoot: isRoot, nodeId: nodeId, locked: (_a = store.getState().nodesById[nodeId]) === null || _a === void 0 ? void 0 : _a.locked, onAddChild: handleAddChild, onFocus: handleFocus, onToggleLock: isRoot ? undefined : handleToggleLocked, onDuplicate: isRoot ? undefined : handleDuplicate, onDelete: isRoot ? undefined : handleDelete, onClose: onClose }));
     };
     const handleDragStart = (e, id) => {
-        if (id === prefabData.root.id)
+        if (id === rootId)
             return e.preventDefault();
         e.dataTransfer.effectAllowed = "move";
         setDraggedId(id);
@@ -160,9 +96,6 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
     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) });
     };
@@ -176,75 +109,92 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         if (!draggedId || draggedId === targetId)
             return;
         e.preventDefault();
-        const dropPosition = getDropPosition(e, isRoot);
-        setPrefabData(prev => {
-            const root = moveNode(prev.root, draggedId, targetId, dropPosition);
-            return root === prev.root ? prev : Object.assign(Object.assign({}, prev), { root });
-        });
+        moveNode(draggedId, targetId, getDropPosition(e, isRoot));
         setDraggedId(null);
         setDropTarget(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;
-        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 }), node.locked && _jsx("span", { style: { marginLeft: 6, opacity: 0.6 }, children: "\uD83D\uDD12" })] }), !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: {
+    const visibleIds = usePrefabStore(useCallback(state => searchQuery ? buildVisibleIds(state, rootId, searchQuery) : null, [rootId, searchQuery]));
+    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("button", { ref: ref, title: "Menu", style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10 }), onClick: (e) => {
+                                                e.stopPropagation();
+                                                toggle();
+                                            }, children: "\u22EE" })), children: (close) => (_jsx(FileMenu, { getPrefab: getPrefab, onReplacePrefab: onReplacePrefab, onImportPrefab: onImportPrefab, 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", { style: tree.scroll, children: _jsx(TreeNode, { nodeId: rootId, depth: 0, rootId: rootId, visibleIds: visibleIds, collapsedIds: collapsedIds, dropTarget: dropTarget, selectedNodeId: selectedId, onToggleCollapse: toggleCollapse, onOpenContextMenu: openContextMenu, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onDragEnd: () => { setDraggedId(null); setDropTarget(null); }, renderTreeNodeMenu: renderTreeNodeMenu, onToggleDisabled: handleToggleDisabled, setSelectedId: setSelectedId }) })] }))] }), _jsx(TreeContextMenu, { contextMenu: contextMenu, onClose: closeContextMenu, children: (nodeId, close) => renderTreeNodeMenu(nodeId, nodeId === rootId, close) })] }));
+}
+const TreeNode = memo(function TreeNode({ nodeId, depth, rootId, visibleIds, collapsedIds, dropTarget, selectedNodeId, onToggleCollapse, onOpenContextMenu, onDragStart, onDragOver, onDragLeave, onDrop, onDragEnd, renderTreeNodeMenu, onToggleDisabled, setSelectedId, }) {
+    var _a;
+    const node = usePrefabNode(nodeId);
+    const childIds = usePrefabChildIds(nodeId);
+    const isSelected = selectedNodeId === nodeId;
+    if (!node || (visibleIds && !visibleIds.has(nodeId)))
+        return null;
+    const isCollapsed = collapsedIds.has(nodeId);
+    const hasChildren = childIds.length > 0;
+    const isRoot = nodeId === rootId;
+    const isDropTarget = (dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.id) === nodeId;
+    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(nodeId); }, onContextMenu: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onOpenContextMenu(nodeId, e.clientX, e.clientY);
+                }, onDragStart: (e) => onDragStart(e, nodeId), onDragEnd: onDragEnd, onDragOver: (e) => onDragOver(e, nodeId, isRoot), onDragLeave: (e) => onDragLeave(e, nodeId), onDrop: (e) => onDrop(e, nodeId, 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 && onToggleCollapse(e, nodeId), 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 }), node.locked && _jsx("span", { style: { marginLeft: 6, opacity: 0.6 }, children: "\uD83D\uDD12" })] }), !isRoot && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx("button", { ref: ref, title: "Node Actions", style: {
                                         background: 'none',
                                         border: 'none',
                                         cursor: 'pointer',
                                         padding: '0 4px',
                                         fontSize: 14,
-                                        opacity: node.disabled ? 0.5 : 0.7,
+                                        opacity: 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: {
+                                        toggle();
+                                    }, children: "\u22EF" })), children: (close) => renderTreeNodeMenu(nodeId, false, close) }), _jsx("button", { style: {
                                     background: 'none',
                                     border: 'none',
                                     cursor: 'pointer',
                                     padding: '0 4px',
                                     fontSize: 14,
-                                    opacity: 0.7,
+                                    opacity: node.disabled ? 0.5 : 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));
+                                }, onClick: (e) => {
+                                    e.stopPropagation();
+                                    onToggleDisabled(nodeId);
+                                }, title: node.disabled ? 'Enable' : 'Disable', children: node.disabled ? '◎' : '◉' })] })), isRoot && (_jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx("button", { ref: ref, title: "Scene Actions", style: {
+                                background: 'none',
+                                border: 'none',
+                                cursor: 'pointer',
+                                padding: '0 4px',
+                                fontSize: 14,
+                                opacity: 0.7,
+                                color: 'inherit',
+                            }, onClick: (e) => {
+                                e.stopPropagation();
+                                toggle();
+                            }, children: "\u22EF" })), children: (close) => renderTreeNodeMenu(nodeId, true, close) }))] }), !isCollapsed && childIds.map(childId => (_jsx(TreeNode, { nodeId: childId, depth: depth + 1, rootId: rootId, visibleIds: visibleIds, collapsedIds: collapsedIds, dropTarget: dropTarget, selectedNodeId: selectedNodeId, onToggleCollapse: onToggleCollapse, onOpenContextMenu: onOpenContextMenu, onDragStart: onDragStart, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, onDragEnd: onDragEnd, renderTreeNodeMenu: renderTreeNodeMenu, onToggleDisabled: onToggleDisabled, setSelectedId: setSelectedId }, childId)))] }));
+});
+function buildVisibleIds(state, rootId, query) {
+    if (!query)
+        return null;
+    const visibleIds = new Set();
+    const lowerQuery = query.toLowerCase();
+    const visit = (nodeId) => {
+        var _a, _b;
+        const node = state.nodesById[nodeId];
+        if (!node)
+            return false;
+        const selfMatches = ((_a = node.name) !== null && _a !== void 0 ? _a : node.id).toLowerCase().includes(lowerQuery);
+        const childMatches = ((_b = state.childIdsById[nodeId]) !== null && _b !== void 0 ? _b : []).some(visit);
+        if (selfMatches || childMatches) {
+            visibleIds.add(nodeId);
+            return true;
+        }
+        return false;
     };
-    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) })] }));
+    visit(rootId);
+    return visibleIds;
 }

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

@@ -1,17 +1,9 @@
-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, locked, onAddChild, onFocus, onToggleLock, onDuplicate, onDelete, onClose, }: {
     isRoot: boolean;
     nodeId: string;
@@ -28,8 +20,9 @@ export declare function TreeContextMenu({ contextMenu, onClose, children, }: {
     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>>;
+export declare function FileMenu({ getPrefab, onReplacePrefab, onImportPrefab, onClose }: {
+    getPrefab: () => Prefab;
+    onReplacePrefab: (prefab: Prefab) => void;
+    onImportPrefab: (prefab: Prefab) => void;
     onClose: () => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/tools/prefabeditor/EditorTreeMenus.js

@@ -13,15 +13,15 @@ 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';
+import { loadJson, saveJson } from './utils';
 function createEmptyPrefab() {
     var _a;
     return {
         id: crypto.randomUUID(),
-        name: 'New Scene',
+        name: 'New Prefab',
         root: {
             id: crypto.randomUUID(),
-            name: 'Scene',
+            name: 'Root',
             components: {
                 transform: {
                     type: 'Transform',
@@ -47,12 +47,6 @@ function MenuSubmenu({ label, children, }) {
                     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, locked, onAddChild, onFocus, onToggleLock, 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 && onToggleLock && (_jsx(MenuItemButton, { onClick: () => { onToggleLock(nodeId); onClose(); }, children: locked ? 'Unlock' : 'Lock' })), !isRoot && onDuplicate && (_jsx(MenuItemButton, { onClick: () => { onDuplicate(nodeId); onClose(); }, children: "Duplicate" })), !isRoot && onDelete && (_jsx(MenuItemButton, { danger: true, onClick: () => { onDelete(nodeId); onClose(); }, children: "Delete" }))] }));
 }
@@ -104,32 +98,29 @@ export function TreeContextMenu({ contextMenu, onClose, children, }) {
             zIndex: 1000,
         }, onMouseLeave: onClose, onContextMenu: (e) => e.preventDefault(), children: children(contextMenu.nodeId, onClose) }), document.body);
 }
-export function FileMenu({ prefabData, setPrefabData, onClose }) {
+export function FileMenu({ getPrefab, onReplacePrefab, onImportPrefab, onClose }) {
     const { onScreenshot, onExportGLB } = useEditorContext();
-    const handleNewScene = () => {
-        setPrefabData(createEmptyPrefab());
+    const handleNew = () => {
+        onReplacePrefab(createEmptyPrefab());
         onClose();
     };
-    const handleNewSceneFromPrefab = () => __awaiter(this, void 0, void 0, function* () {
-        const loadedPrefab = yield loadJson();
-        if (!loadedPrefab)
+    const handleOpen = () => __awaiter(this, void 0, void 0, function* () {
+        const loaded = yield loadJson();
+        if (!loaded)
             return;
-        setPrefabData(loadedPrefab);
+        onReplacePrefab(loaded);
         onClose();
     });
     const handleSave = () => {
-        saveJson(prefabData, 'prefab');
+        saveJson(getPrefab(), 'prefab');
         onClose();
     };
-    const handleLoadIntoScene = () => __awaiter(this, void 0, void 0, function* () {
-        const loadedPrefab = yield loadJson();
-        if (!loadedPrefab)
+    const handleImport = () => __awaiter(this, void 0, void 0, function* () {
+        const loaded = yield loadJson();
+        if (!loaded)
             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)] }));
-            }) })));
+        onImportPrefab(loaded);
         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" })] })] }));
+    return (_jsxs(MenuPanel, { style: { overflow: 'visible' }, children: [_jsxs(MenuSubmenu, { label: "File", children: [_jsx(MenuItemButton, { onClick: handleNew, children: "New Prefab" }), _jsx(MenuItemButton, { onClick: handleOpen, children: "Open Prefab" }), _jsx(MenuItemButton, { onClick: handleImport, children: "Import Prefab" }), _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.d.ts

@@ -1,10 +1,10 @@
-import { Dispatch, SetStateAction } from 'react';
 import { Prefab } from "./types";
-declare function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, basePath, onUndo, onRedo, canUndo, canRedo }: {
-    prefabData?: Prefab;
-    setPrefabData?: Dispatch<SetStateAction<Prefab>>;
+declare function EditorUI({ selectedId, setSelectedId, getPrefab, onReplacePrefab, onImportPrefab, basePath, onUndo, onRedo, canUndo, canRedo }: {
     selectedId: string | null;
-    setSelectedId: Dispatch<SetStateAction<string | null>>;
+    setSelectedId: (id: string | null) => void;
+    getPrefab: () => Prefab;
+    onReplacePrefab: (prefab: Prefab) => void;
+    onImportPrefab: (prefab: Prefab) => void;
     basePath?: string;
     onUndo?: () => void;
     onRedo?: () => void;

package/dist/tools/prefabeditor/EditorUI.js

@@ -13,23 +13,26 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import EditorTree from './EditorTree';
 import { getAllComponents } from './components/ComponentRegistry';
-import { base, colors, inspector, scrollbarCSS, componentCard } from './styles';
-import { findNode, updateNode, deleteNode } from './utils';
-function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, basePath, onUndo, onRedo, canUndo, canRedo }) {
+import { base, colors, inspector, componentCard } from './styles';
+import { usePrefabStore } from './prefabStore';
+function EditorUI({ selectedId, setSelectedId, getPrefab, onReplacePrefab, onImportPrefab, basePath, onUndo, onRedo, canUndo, canRedo }) {
     const [collapsed, setCollapsed] = useState(false);
-    const updateNodeHandler = (updater) => {
-        if (!prefabData || !setPrefabData || !selectedId)
+    const rootId = usePrefabStore(state => state.rootId);
+    const selectedNode = usePrefabStore(state => { var _a; return selectedId ? (_a = state.nodesById[selectedId]) !== null && _a !== void 0 ? _a : null : null; });
+    const updateNode = usePrefabStore(state => state.updateNode);
+    const deleteNode = usePrefabStore(state => state.deleteNode);
+    const updateNodeHandler = (update) => {
+        if (!selectedId)
             return;
-        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNode(prev.root, selectedId, updater) })));
+        updateNode(selectedId, update);
     };
     const deleteNodeHandler = () => {
-        if (!prefabData || !setPrefabData || !selectedId || selectedId === prefabData.root.id)
+        if (!selectedId || selectedId === rootId)
             return;
-        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: deleteNode(prev.root, selectedId) })));
+        deleteNode(selectedId);
         setSelectedId(null);
     };
-    const selectedNode = selectedId && prefabData ? findNode(prefabData.root, selectedId) : null;
-    return _jsxs(_Fragment, { children: [_jsx("style", { children: scrollbarCSS }), _jsxs("div", { style: inspector.panel, children: [_jsxs("div", { style: base.header, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { children: "Inspector" }), _jsx("span", { children: collapsed ? '◀' : '▼' })] }), !collapsed && selectedNode && (_jsx(NodeInspector, { node: selectedNode, updateNode: updateNodeHandler, deleteNode: deleteNodeHandler, basePath: basePath }))] }), _jsx("div", { style: { position: 'absolute', top: 8, left: 8, zIndex: 20 }, children: _jsx(EditorTree, { prefabData: prefabData, setPrefabData: setPrefabData, selectedId: selectedId, setSelectedId: setSelectedId, onUndo: onUndo, onRedo: onRedo, canUndo: canUndo, canRedo: canRedo }) })] });
+    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, basePath: basePath }))] }), _jsx("div", { style: { position: 'absolute', top: 8, left: 8, zIndex: 20 }, children: _jsx(EditorTree, { selectedId: selectedId, setSelectedId: setSelectedId, getPrefab: getPrefab, onReplacePrefab: onReplacePrefab, onImportPrefab: onImportPrefab, onUndo: onUndo, onRedo: onRedo, canUndo: canUndo, canRedo: canRedo }) })] });
 }
 function NodeInspector({ node, updateNode, deleteNode, basePath }) {
     var _a;
@@ -38,7 +41,7 @@ function NodeInspector({ node, updateNode, deleteNode, basePath }) {
     const available = allKeys.filter(k => { var _a; return !((_a = node.components) === null || _a === void 0 ? void 0 : _a[k.toLowerCase()]); });
     const [preferredAddType, setAddType] = useState(available[0] || "");
     const addType = available.includes(preferredAddType) ? preferredAddType : (available[0] || "");
-    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]) => {
+    return _jsxs("div", { style: inspector.content, 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/GameEvents.d.ts

@@ -106,34 +106,4 @@ export declare function useGameEvent<T extends string>(type: T, handler: EventHa
  * Entity IDs are stored in RigidBody userData.
  */
 export declare function getEntityIdFromRigidBody(rigidBody: RapierRigidBody | null | undefined): string | null;
-/** @deprecated Use gameEvents instead */
-export declare const entityEvents: {
-    /**
-     * Emit an event to all subscribers
-     */
-    emit<T extends string>(type: T, payload: GameEventPayload<T>): void;
-    /**
-     * Subscribe to an event type
-     * @returns Unsubscribe function
-     */
-    on<T extends string>(type: T, handler: EventHandler<GameEventPayload<T>>): () => void;
-    /**
-     * Unsubscribe from an event type
-     */
-    off<T extends string>(type: T, handler: EventHandler<GameEventPayload<T>>): void;
-    /**
-     * Remove all subscribers (useful for cleanup/reset)
-     */
-    clear(): void;
-    /**
-     * Check if an event type has any subscribers
-     */
-    hasListeners(type: string): boolean;
-};
-/** @deprecated Use useGameEvent instead */
-export declare const useEntityEvent: typeof useGameEvent;
-/** @deprecated Use GameEventType instead */
-export type EntityEventType = PhysicsEventType;
-/** @deprecated Use PhysicsEventPayload instead */
-export type EntityEventPayload = PhysicsEventPayload;
 export {};

package/dist/tools/prefabeditor/GameEvents.js

@@ -111,10 +111,3 @@ export function getEntityIdFromRigidBody(rigidBody) {
     const userData = rigidBody.userData;
     return (_a = userData === null || userData === void 0 ? void 0 : userData.entityId) !== null && _a !== void 0 ? _a : null;
 }
-// ============================================================================
-// Backward Compatibility Aliases
-// ============================================================================
-/** @deprecated Use gameEvents instead */
-export const entityEvents = gameEvents;
-/** @deprecated Use useGameEvent instead */
-export const useEntityEvent = useGameEvent;

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

@@ -3,28 +3,27 @@ import { Object3D, Texture } from "three";
 import { GameObject, Prefab } from "./types";
 import { PrefabRootRef } from "./PrefabRoot";
 import type { ExportGLBOptions } from "./utils";
-export interface PrefabEditorAssetOptions {
-    name?: string;
-    parentId?: string;
-    select?: boolean;
-}
+import { type Scene, type SpawnOptions } from "./sceneApi";
 export interface PrefabEditorRef {
     screenshot: () => void;
-    exportGLB: (options?: ExportGLBOptions) => Promise<ArrayBuffer | object | undefined>;
+    exportGLB: (options?: ExportGLBOptions) => Promise<ArrayBuffer | undefined>;
     exportGLBData: () => Promise<ArrayBuffer | undefined>;
     clearSelection: () => Promise<void>;
-    prefab: Prefab;
-    setPrefab: (prefab: Prefab) => void;
-    replacePrefab: (prefab: Prefab) => void;
-    addModel: (path: string, model: Object3D, options?: PrefabEditorAssetOptions) => GameObject;
-    addTexture: (path: string, texture: Texture, options?: PrefabEditorAssetOptions) => GameObject;
-    rootRef: React.RefObject<PrefabRootRef | null>;
+    save: () => Prefab;
+    scene: Scene;
+    load: (prefab: Prefab, options?: {
+        resetHistory?: boolean;
+        notifyChange?: boolean;
+    }) => void;
+    addModel: (path: string, model: Object3D, options?: SpawnOptions) => GameObject;
+    addTexture: (path: string, texture: Texture, options?: SpawnOptions) => GameObject;
+    viewRef: React.RefObject<PrefabRootRef | null>;
 }
 export interface PrefabEditorProps {
     basePath?: string;
     initialPrefab?: Prefab;
     physics?: boolean;
-    onPrefabChange?: (prefab: Prefab) => void;
+    onChange?: (prefab: Prefab) => void;
     showUI?: boolean;
     enableWindowDrop?: boolean;
     canvasProps?: Omit<React.ComponentProps<typeof GameCanvas>, 'children' | 'canvasRef'>;