react-three-game 0.0.18 → 0.0.19

package/dist/tools/prefabeditor/EditorTree.js

@@ -1,110 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { getComponent } from './components/ComponentRegistry';
+import { base, tree, menu } from './styles';
+import { findNode, findParent, deleteNode, cloneNode } from './utils';
 export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId }) {
     const [contextMenu, setContextMenu] = useState(null);
     const [draggedId, setDraggedId] = useState(null);
     const [collapsedIds, setCollapsedIds] = useState(new Set());
-    const [isTreeCollapsed, setIsTreeCollapsed] = useState(false);
-    const styles = {
-        panel: {
-            background: "rgba(0,0,0,0.55)",
-            color: "rgba(255,255,255,0.9)",
-            border: "1px solid rgba(255,255,255,0.12)",
-            borderRadius: 6,
-            overflow: "hidden",
-            maxHeight: "85vh",
-            display: "flex",
-            flexDirection: "column",
-            backdropFilter: "blur(6px)",
-            WebkitBackdropFilter: "blur(6px)",
-            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-            fontSize: 11,
-            lineHeight: 1.2,
-            userSelect: "none",
-            WebkitUserSelect: "none",
-        },
-        panelHeader: {
-            padding: "4px 6px",
-            borderBottom: "1px solid rgba(255,255,255,0.10)",
-            display: "flex",
-            gap: 8,
-            alignItems: "center",
-            justifyContent: "space-between",
-            cursor: "pointer",
-            background: "rgba(255,255,255,0.05)",
-            textTransform: "uppercase",
-            letterSpacing: "0.08em",
-            fontSize: 10,
-            color: "rgba(255,255,255,0.7)",
-        },
-        scroll: {
-            overflowY: "auto",
-        },
-        row: {
-            display: "flex",
-            alignItems: "center",
-            padding: "2px 6px",
-            borderBottom: "1px solid rgba(255,255,255,0.07)",
-            cursor: "pointer",
-            whiteSpace: "nowrap",
-        },
-        rowSelected: {
-            background: "rgba(255,255,255,0.10)",
-        },
-        chevron: {
-            width: 12,
-            textAlign: "center",
-            opacity: 0.55,
-            fontSize: 10,
-            marginRight: 4,
-            cursor: "pointer",
-        },
-        idText: {
-            fontSize: 11,
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-        },
-        dragHandle: {
-            width: 14,
-            height: 14,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            marginRight: 4,
-            opacity: 0.4,
-            cursor: "grab",
-            fontSize: 10,
-        },
-        contextMenu: {
-            position: "fixed",
-            zIndex: 50,
-            minWidth: 120,
-            background: "rgba(0,0,0,0.82)",
-            border: "1px solid rgba(255,255,255,0.16)",
-            borderRadius: 6,
-            overflow: "hidden",
-            boxShadow: "0 12px 32px rgba(0,0,0,0.45)",
-            backdropFilter: "blur(6px)",
-            WebkitBackdropFilter: "blur(6px)",
-        },
-        menuItem: {
-            width: "100%",
-            textAlign: "left",
-            padding: "6px 8px",
-            background: "transparent",
-            border: "none",
-            color: "rgba(255,255,255,0.9)",
-            font: "inherit",
-            cursor: "pointer",
-        },
-        menuItemDanger: {
-            color: "rgba(255,120,120,0.95)",
-        },
-        menuDivider: {
-            borderTop: "1px solid rgba(255,255,255,0.10)",
-        }
-    };
+    const [collapsed, setCollapsed] = useState(false);
     if (!prefabData || !setPrefabData)
         return null;
     const handleContextMenu = (e, nodeId) => {
@@ -112,15 +15,11 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         e.stopPropagation();
         setContextMenu({ x: e.clientX, y: e.clientY, nodeId });
     };
-    const closeContextMenu = () => setContextMenu(null);
     const toggleCollapse = (e, id) => {
         e.stopPropagation();
         setCollapsedIds(prev => {
             const next = new Set(prev);
-            if (next.has(id))
-                next.delete(id);
-            else
-                next.add(id);
+            next.has(id) ? next.delete(id) : next.add(id);
             return next;
         });
     };
@@ -137,7 +36,7 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
             }
         };
         setPrefabData(prev => {
-            const newRoot = JSON.parse(JSON.stringify(prev.root)); // Deep clone for safety
+            const newRoot = JSON.parse(JSON.stringify(prev.root));
             const parent = findNode(newRoot, parentId);
             if (parent) {
                 parent.children = parent.children || [];
@@ -145,11 +44,11 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
             }
             return Object.assign(Object.assign({}, prev), { root: newRoot });
         });
-        closeContextMenu();
+        setContextMenu(null);
     };
     const handleDuplicate = (nodeId) => {
         if (nodeId === prefabData.root.id)
-            return; // Cannot duplicate root
+            return;
         setPrefabData(prev => {
             const newRoot = JSON.parse(JSON.stringify(prev.root));
             const parent = findParent(newRoot, nodeId);
@@ -161,18 +60,15 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
             }
             return Object.assign(Object.assign({}, prev), { root: newRoot });
         });
-        closeContextMenu();
+        setContextMenu(null);
     };
     const handleDelete = (nodeId) => {
         if (nodeId === prefabData.root.id)
-            return; // Cannot delete root
-        setPrefabData(prev => {
-            const newRoot = deleteNodeFromTree(JSON.parse(JSON.stringify(prev.root)), nodeId);
-            return Object.assign(Object.assign({}, prev), { root: newRoot });
-        });
+            return;
+        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: deleteNode(prev.root, nodeId) })));
         if (selectedId === nodeId)
             setSelectedId(null);
-        closeContextMenu();
+        setContextMenu(null);
     };
     // Drag and Drop
     const handleDragStart = (e, id) => {
@@ -181,12 +77,8 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
             return;
         }
         e.dataTransfer.effectAllowed = "move";
-        e.dataTransfer.setData("text/plain", id);
         setDraggedId(id);
     };
-    const handleDragEnd = () => {
-        setDraggedId(null);
-    };
     const handleDragOver = (e, targetId) => {
         if (!draggedId || draggedId === targetId)
             return;
@@ -194,7 +86,6 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         if (draggedNode && findNode(draggedNode, targetId))
             return;
         e.preventDefault();
-        e.dataTransfer.dropEffect = "move";
     };
     const handleDrop = (e, targetId) => {
         if (!draggedId || draggedId === targetId)
@@ -228,79 +119,14 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         const isSelected = node.id === selectedId;
         const isCollapsed = collapsedIds.has(node.id);
         const hasChildren = node.children && node.children.length > 0;
-        return (_jsxs("div", { children: [_jsxs("div", { style: Object.assign(Object.assign(Object.assign({}, styles.row), (isSelected ? styles.rowSelected : null)), { paddingLeft: `${depth * 10 + 6}px`, cursor: node.id !== prefabData.root.id ? "grab" : "pointer" }), draggable: node.id !== prefabData.root.id, onClick: (e) => { e.stopPropagation(); setSelectedId(node.id); }, onContextMenu: (e) => handleContextMenu(e, node.id), onDragStart: (e) => handleDragStart(e, node.id), onDragEnd: handleDragEnd, onDragOver: (e) => handleDragOver(e, node.id), onDrop: (e) => handleDrop(e, node.id), onPointerEnter: (e) => {
-                        if (!isSelected)
-                            e.currentTarget.style.background = "rgba(255,255,255,0.06)";
-                    }, onPointerLeave: (e) => {
-                        if (!isSelected)
-                            e.currentTarget.style.background = "transparent";
-                    }, children: [_jsx("span", { style: Object.assign(Object.assign({}, styles.chevron), { visibility: hasChildren ? 'visible' : 'hidden' }), onClick: (e) => hasChildren && toggleCollapse(e, node.id), onPointerEnter: (e) => {
-                                e.currentTarget.style.opacity = "0.9";
-                            }, onPointerLeave: (e) => {
-                                e.currentTarget.style.opacity = "0.55";
-                            }, children: isCollapsed ? '▶' : '▼' }), node.id !== prefabData.root.id && (_jsx("span", { style: styles.dragHandle, onPointerEnter: (e) => {
-                                e.currentTarget.style.opacity = "0.9";
-                            }, onPointerLeave: (e) => {
-                                e.currentTarget.style.opacity = "0.4";
-                            }, children: "\u22EE\u22EE" })), _jsx("span", { style: styles.idText, children: node.id })] }), !isCollapsed && node.children && (_jsx("div", { children: node.children.map(child => renderNode(child, depth + 1)) }))] }, node.id));
+        const isRoot = node.id === prefabData.root.id;
+        return (_jsxs("div", { children: [_jsxs("div", { style: Object.assign(Object.assign(Object.assign({}, tree.row), (isSelected ? tree.selected : {})), { paddingLeft: `${depth * 12 + 6}px` }), draggable: !isRoot, onClick: (e) => { e.stopPropagation(); setSelectedId(node.id); }, onContextMenu: (e) => handleContextMenu(e, node.id), onDragStart: (e) => handleDragStart(e, node.id), onDragEnd: () => setDraggedId(null), onDragOver: (e) => handleDragOver(e, node.id), onDrop: (e) => handleDrop(e, node.id), children: [_jsx("span", { style: {
+                                width: 12,
+                                opacity: 0.6,
+                                marginRight: 4,
+                                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));
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: Object.assign(Object.assign({}, styles.panel), { width: isTreeCollapsed ? 'auto' : '14rem' }), onClick: closeContextMenu, children: [_jsxs("div", { style: styles.panelHeader, onClick: (e) => { e.stopPropagation(); setIsTreeCollapsed(!isTreeCollapsed); }, onPointerEnter: (e) => {
-                            e.currentTarget.style.background = "rgba(255,255,255,0.08)";
-                        }, onPointerLeave: (e) => {
-                            e.currentTarget.style.background = "rgba(255,255,255,0.05)";
-                        }, children: [_jsx("span", { children: "Prefab Graph" }), _jsx("span", { style: { fontSize: 10, opacity: 0.8 }, children: isTreeCollapsed ? '▶' : '◀' })] }), !isTreeCollapsed && (_jsx("div", { style: Object.assign(Object.assign({}, styles.scroll), { padding: 2 }), children: renderNode(prefabData.root) }))] }), contextMenu && (_jsxs("div", { style: Object.assign(Object.assign({}, styles.contextMenu), { top: contextMenu.y, left: contextMenu.x }), onClick: (e) => e.stopPropagation(), onPointerLeave: closeContextMenu, children: [_jsx("button", { style: Object.assign(Object.assign({}, styles.menuItem), styles.menuDivider), onClick: () => handleAddChild(contextMenu.nodeId), onPointerEnter: (e) => {
-                            e.currentTarget.style.background = "rgba(255,255,255,0.08)";
-                        }, onPointerLeave: (e) => {
-                            e.currentTarget.style.background = "transparent";
-                        }, children: "Add Child" }), contextMenu.nodeId !== prefabData.root.id && (_jsxs(_Fragment, { children: [_jsx("button", { style: Object.assign(Object.assign({}, styles.menuItem), styles.menuDivider), onClick: () => handleDuplicate(contextMenu.nodeId), onPointerEnter: (e) => {
-                                    e.currentTarget.style.background = "rgba(255,255,255,0.08)";
-                                }, onPointerLeave: (e) => {
-                                    e.currentTarget.style.background = "transparent";
-                                }, children: "Duplicate" }), _jsx("button", { style: Object.assign(Object.assign({}, styles.menuItem), styles.menuItemDanger), onClick: () => handleDelete(contextMenu.nodeId), onPointerEnter: (e) => {
-                                    e.currentTarget.style.background = "rgba(255,255,255,0.08)";
-                                }, onPointerLeave: (e) => {
-                                    e.currentTarget.style.background = "transparent";
-                                }, children: "Delete" })] }))] }))] }));
-}
-// --- Helpers ---
-function findNode(root, id) {
-    if (root.id === id)
-        return root;
-    if (root.children) {
-        for (const child of root.children) {
-            const found = findNode(child, id);
-            if (found)
-                return found;
-        }
-    }
-    return null;
-}
-function findParent(root, id) {
-    if (!root.children)
-        return null;
-    for (const child of root.children) {
-        if (child.id === id)
-            return root;
-        const found = findParent(child, id);
-        if (found)
-            return found;
-    }
-    return null;
-}
-function deleteNodeFromTree(root, id) {
-    if (root.id === id)
-        return null;
-    if (root.children) {
-        root.children = root.children
-            .map(child => deleteNodeFromTree(child, id))
-            .filter((child) => child !== null);
-    }
-    return root;
-}
-function cloneNode(node) {
-    const newNode = Object.assign(Object.assign({}, node), { id: crypto.randomUUID() });
-    if (newNode.children) {
-        newNode.children = newNode.children.map(child => cloneNode(child));
-    }
-    return newNode;
+    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

@@ -1,244 +1,63 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import EditorTree from './EditorTree';
 import { getAllComponents } from './components/ComponentRegistry';
+import { base, inspector } from './styles';
+import { findNode, updateNode, deleteNode } from './utils';
 function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transformMode, setTransformMode, basePath }) {
-    const [isInspectorCollapsed, setIsInspectorCollapsed] = useState(false);
-    const ui = {
-        panel: {
-            position: 'absolute',
-            top: 8,
-            right: 8,
-            zIndex: 20,
-            width: 260,
-            background: 'rgba(0,0,0,0.55)',
-            color: 'rgba(255,255,255,0.9)',
-            border: '1px solid rgba(255,255,255,0.12)',
-            borderRadius: 6,
-            overflow: 'hidden',
-            backdropFilter: 'blur(6px)',
-            WebkitBackdropFilter: 'blur(6px)',
-            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-            fontSize: 11,
-            lineHeight: 1.2,
-        },
-        header: {
-            padding: '4px 6px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            cursor: 'pointer',
-            background: 'rgba(255,255,255,0.05)',
-            borderBottom: '1px solid rgba(255,255,255,0.10)',
-            textTransform: 'uppercase',
-            letterSpacing: '0.08em',
-            fontSize: 10,
-            color: 'rgba(255,255,255,0.7)',
-            userSelect: 'none',
-            WebkitUserSelect: 'none',
-        },
-        left: {
-            position: 'absolute',
-            top: 8,
-            left: 8,
-            zIndex: 20,
-        },
-    };
-    const updateNode = (updater) => {
+    const [collapsed, setCollapsed] = useState(false);
+    const updateNodeHandler = (updater) => {
         if (!prefabData || !setPrefabData || !selectedId)
             return;
-        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updatePrefabNode(prev.root, selectedId, updater) })));
+        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNode(prev.root, selectedId, updater) })));
     };
-    const deleteNode = () => {
-        if (!prefabData || !setPrefabData || !selectedId)
-            return;
-        if (selectedId === prefabData.root.id) {
-            alert("Cannot delete root node");
+    const deleteNodeHandler = () => {
+        if (!prefabData || !setPrefabData || !selectedId || selectedId === prefabData.root.id)
             return;
-        }
-        setPrefabData(prev => {
-            const newRoot = deletePrefabNode(prev.root, selectedId);
-            return Object.assign(Object.assign({}, prev), { root: newRoot });
-        });
+        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: deleteNode(prev.root, selectedId) })));
         setSelectedId(null);
     };
     const selectedNode = selectedId && prefabData ? findNode(prefabData.root, selectedId) : null;
-    // if (!selectedNode) return null;
-    return _jsxs(_Fragment, { children: [_jsxs("div", { style: ui.panel, children: [_jsxs("div", { style: ui.header, onClick: () => setIsInspectorCollapsed(!isInspectorCollapsed), onPointerEnter: (e) => {
-                            e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
-                        }, onPointerLeave: (e) => {
-                            e.currentTarget.style.background = 'rgba(255,255,255,0.05)';
-                        }, children: [_jsx("span", { children: "Inspector" }), _jsx("span", { style: { fontSize: 10, opacity: 0.8 }, children: isInspectorCollapsed ? '◀' : '▶' })] }), !isInspectorCollapsed && selectedNode && (_jsx(NodeInspector, { node: selectedNode, updateNode: updateNode, deleteNode: deleteNode, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath }))] }), _jsx("div", { style: ui.left, children: _jsx(EditorTree, { prefabData: prefabData, setPrefabData: setPrefabData, selectedId: selectedId, setSelectedId: setSelectedId }) })] });
+    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 }) {
     const ALL_COMPONENTS = getAllComponents();
-    const allComponentKeys = Object.keys(ALL_COMPONENTS);
-    const [addComponentType, setAddComponentType] = useState(allComponentKeys[0]);
-    const s = {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 6,
-            padding: 6,
-            maxHeight: '80vh',
-            overflowY: 'auto',
-        },
-        section: {
-            paddingBottom: 6,
-            borderBottom: '1px solid rgba(255,255,255,0.10)',
-        },
-        label: {
-            display: 'block',
-            fontSize: 10,
-            opacity: 0.7,
-            textTransform: 'uppercase',
-            letterSpacing: '0.08em',
-            marginBottom: 4,
-        },
-        input: {
-            width: '100%',
-            background: 'rgba(255,255,255,0.06)',
-            border: '1px solid rgba(255,255,255,0.14)',
-            borderRadius: 4,
-            padding: '4px 6px',
-            color: 'rgba(255,255,255,0.92)',
-            font: 'inherit',
-            outline: 'none',
-        },
-        row: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            gap: 8,
-        },
-        button: {
-            padding: '2px 6px',
-            background: 'transparent',
-            color: 'rgba(255,255,255,0.9)',
-            border: '1px solid rgba(255,255,255,0.14)',
-            borderRadius: 4,
-            cursor: 'pointer',
-            font: 'inherit',
-        },
-        buttonActive: {
-            background: 'rgba(255,255,255,0.10)',
-        },
-        smallDanger: {
-            background: 'transparent',
-            border: 'none',
-            cursor: 'pointer',
-            color: 'rgba(255,120,120,0.95)',
-            font: 'inherit',
-            padding: '2px 4px',
-        },
-        componentHeader: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            padding: '4px 0',
-            borderBottom: '1px solid rgba(255,255,255,0.08)',
-            marginBottom: 4,
-        },
-        componentTitle: {
-            fontSize: 10,
-            textTransform: 'uppercase',
-            letterSpacing: '0.08em',
-            opacity: 0.8,
-        },
-        select: {
-            flex: 1,
-            background: 'rgba(255,255,255,0.06)',
-            border: '1px solid rgba(255,255,255,0.14)',
-            borderRadius: 4,
-            padding: '4px 6px',
-            color: 'rgba(255,255,255,0.92)',
-            font: 'inherit',
-            outline: 'none',
-        },
-        addButton: {
-            width: 28,
-            padding: '4px 0',
-            background: 'rgba(255,255,255,0.08)',
-            color: 'rgba(255,255,255,0.92)',
-            border: '1px solid rgba(255,255,255,0.14)',
-            borderRadius: 4,
-            cursor: 'pointer',
-            font: 'inherit',
-        },
-        disabled: {
-            opacity: 0.35,
-            cursor: 'not-allowed',
-        },
-    };
-    const componentKeys = Object.keys(node.components || {}).join(',');
+    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()]); });
+    const [addType, setAddType] = useState(available[0] || "");
     useEffect(() => {
-        // Components stored on nodes use lowercase keys (e.g. 'geometry'),
-        // while the registry keys are the component names (e.g. 'Geometry').
-        const available = allComponentKeys.filter(k => { var _a; return !((_a = node.components) === null || _a === void 0 ? void 0 : _a[k.toLowerCase()]); });
-        if (!available.includes(addComponentType)) {
-            setAddComponentType(available[0] || "");
-        }
-    }, [componentKeys, addComponentType, node.components, allComponentKeys]);
-    return _jsxs("div", { style: s.root, children: [_jsx("div", { style: s.section, children: _jsx("input", { style: s.input, value: node.id, onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { id: e.target.value }))) }) }), _jsxs("div", { style: Object.assign(Object.assign(Object.assign({}, s.row), s.section), { paddingBottom: 6 }), children: [_jsx("label", { style: Object.assign(Object.assign({}, s.label), { marginBottom: 0 }), children: "Components" }), _jsx("button", { onClick: deleteNode, style: s.smallDanger, title: "Delete node", children: "\u2715" })] }), node.components && Object.entries(node.components).map(([key, comp]) => {
-                if (!comp)
-                    return null;
-                const componentDef = ALL_COMPONENTS[comp.type];
-                if (!componentDef)
-                    return _jsxs("div", { style: { padding: '4px 0', color: 'rgba(255,120,120,0.95)', fontSize: 11 }, children: ["Unknown component type: ", comp.type, _jsx("textarea", { defaultValue: JSON.stringify(comp) })] }, key);
-                const EditorComp = componentDef.Editor;
-                return (_jsxs("div", { style: { padding: '0 2px' }, children: [_jsxs("div", { style: s.componentHeader, children: [_jsx("span", { style: s.componentTitle, children: key }), _jsx("button", { onClick: () => updateNode(n => {
-                                        const components = Object.assign({}, n.components);
-                                        delete components[key];
-                                        return Object.assign(Object.assign({}, n), { components });
-                                    }), style: s.smallDanger, title: "Remove component", children: "\u2715" })] }), EditorComp ? (_jsx(EditorComp, { component: comp, onUpdate: (newProps) => updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: Object.assign(Object.assign({}, comp), { properties: Object.assign(Object.assign({}, comp.properties), newProps) }) }) }))), basePath: basePath, transformMode: transformMode, setTransformMode: setTransformMode })) : null] }, key));
-            }), _jsxs("div", { style: Object.assign(Object.assign({}, s.section), { borderBottom: 'none', paddingBottom: 0 }), children: [_jsx("label", { style: s.label, children: "Add Component" }), _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx("select", { style: s.select, value: addComponentType, onChange: e => setAddComponentType(e.target.value), children: allComponentKeys.filter(k => { var _a; return !((_a = node.components) === null || _a === void 0 ? void 0 : _a[k.toLowerCase()]); }).map(k => (_jsx("option", { value: k, children: k }, k))) }), _jsx("button", { style: Object.assign(Object.assign({}, s.addButton), (!addComponentType ? s.disabled : null)), disabled: !addComponentType, onClick: () => {
-                                    var _a;
-                                    if (!addComponentType)
+        const newAvailable = allKeys.filter(k => { var _a; return !((_a = node.components) === null || _a === void 0 ? void 0 : _a[k.toLowerCase()]); });
+        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]) => {
+                        if (!comp)
+                            return null;
+                        const def = ALL_COMPONENTS[comp.type];
+                        if (!def)
+                            return _jsxs("div", { style: { color: '#ff8888', fontSize: 11 }, children: ["Unknown: ", comp.type] }, key);
+                        return (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }, children: [_jsx("div", { style: { fontSize: 11, fontWeight: 500 }, children: key }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px' }), onClick: () => updateNode(n => {
+                                                const _a = n.components || {}, _b = key, _ = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+                                                return Object.assign(Object.assign({}, n), { components: rest });
+                                            }), children: "\u2715" })] }), def.Editor && (_jsx(def.Editor, { component: comp, onUpdate: (newProps) => updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: Object.assign(Object.assign({}, comp), { properties: Object.assign(Object.assign({}, comp.properties), newProps) }) }) }))), basePath: basePath, transformMode: transformMode, setTransformMode: setTransformMode }))] }, key));
+                    })] }), available.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: base.label, children: "Add Component" }), _jsxs("div", { style: base.row, children: [_jsx("select", { style: Object.assign(Object.assign({}, base.input), { flex: 1 }), value: addType, onChange: e => setAddType(e.target.value), children: available.map(k => _jsx("option", { value: k, children: k }, k)) }), _jsx("button", { style: base.btn, disabled: !addType, onClick: () => {
+                                    if (!addType)
                                         return;
-                                    const def = ALL_COMPONENTS[addComponentType];
-                                    if (def && !((_a = node.components) === null || _a === void 0 ? void 0 : _a[addComponentType.toLowerCase()])) {
-                                        const key = addComponentType.toLowerCase();
-                                        updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: { type: def.name, properties: def.defaultProperties } }) })));
+                                    const def = ALL_COMPONENTS[addType];
+                                    if (def) {
+                                        updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [addType.toLowerCase()]: { type: def.name, properties: def.defaultProperties } }) })));
                                     }
-                                }, onPointerEnter: (e) => {
-                                    if (!addComponentType)
-                                        return;
-                                    e.currentTarget.style.background = 'rgba(255,255,255,0.12)';
-                                }, onPointerLeave: (e) => {
-                                    if (!addComponentType)
-                                        return;
-                                    e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
-                                }, children: "+" })] })] })] });
-}
-function findNode(root, id) {
-    if (root.id === id)
-        return root;
-    if (root.children) {
-        for (const child of root.children) {
-            const found = findNode(child, id);
-            if (found)
-                return found;
-        }
-    }
-    return null;
-}
-function updatePrefabNode(root, id, update) {
-    if (root.id === id) {
-        return update(root);
-    }
-    if (root.children) {
-        return Object.assign(Object.assign({}, root), { children: root.children.map(child => updatePrefabNode(child, id, update)) });
-    }
-    return root;
-}
-function deletePrefabNode(root, id) {
-    if (root.id === id)
-        return null;
-    if (root.children) {
-        return Object.assign(Object.assign({}, root), { children: root.children
-                .map(child => deletePrefabNode(child, id))
-                .filter((child) => child !== null) });
-    }
-    return root;
+                                }, children: "+" })] })] }))] });
 }
 export default EditorUI;