react-three-game 0.0.15 → 0.0.17

package/README.md

@@ -17,44 +17,17 @@ npm i react-three-game @react-three/fiber three
 Scenes are JSON prefabs. Components are registered modules. Hierarchy is declarative.
 
 ```jsx
-<PrefabRoot data={{
-  root: {
-    id: "cube",
-    components: {
-      transform: { type: "Transform", properties: { position: [0, 1, 0] } },
-      geometry: { type: "Geometry", properties: { geometryType: "box" } },
-      material: { type: "Material", properties: { color: "green" } },
-      physics: { type: "Physics", properties: { type: "dynamic" } }
-    }
-  }
-}} />
-```
-
-## Tailwind CSS Support
-
-This library uses Tailwind CSS for styling its editor components. To ensure styles are correctly applied in your application, you need to configure Tailwind to scan the library's source files.
-
-### Tailwind v4
-
-Add the library path to your CSS entry point using the `@source` directive:
-
-```css
-@import "tailwindcss";
-@source "../../node_modules/react-three-game/dist/**/*.{js,ts,jsx,tsx}";
-```
-
-### Tailwind v3
-
-Add the library path to your `tailwind.config.js`:
-
-```js
-module.exports = {
-  content: [
-    // ...
-    "./node_modules/react-three-game/dist/**/*.{js,ts,jsx,tsx}",
-  ],
-  // ...
-}
+  <PrefabRoot data={{
+      root: {
+          id: "cube",
+          components: {
+              transform: { type: "Transform", properties: { position: [0, 1, 0] } },
+              geometry: { type: "Geometry", properties: { geometryType: "box" } },
+              material: { type: "Material", properties: { color: "green" } },
+              physics: { type: "Physics", properties: { type: "dynamic" } }
+          }
+      }
+  }} />
 ```
 
 ## Quick Start
@@ -64,39 +37,44 @@ npm install react-three-game @react-three/fiber @react-three/rapier three
 ```
 
 ```jsx
-import { GameCanvas, PrefabRoot, ground } from 'react-three-game';
+import { Physics } from '@react-three/rapier';
+import { GameCanvas, PrefabRoot } from 'react-three-game';
 
 export default function App() {
   return (
     <GameCanvas>
-      <ambientLight intensity={0.5} />
-      <PrefabRoot data={{
-        id: "scene",
-        root: {
-          id: "root",
-          components: {
-            transform: { type: "Transform", properties: { position: [0, 0, 0] } }
-          },
-          children: [
-            ground({
-              id: "floor",
-              position: [0, -1, 0],
-              size: 50,
-              texture: "/textures/GreyboxTextures/greybox_light_grid.png",
-              repeatCount: [25, 25]
-            }),
-            {
-              id: "player",
-              components: {
-                transform: { type: "Transform", properties: { position: [0, 2, 0] } },
-                geometry: { type: "Geometry", properties: { geometryType: "sphere" } },
-                material: { type: "Material", properties: { color: "#ff6b6b" } },
-                physics: { type: "Physics", properties: { type: "dynamic" } }
+      <Physics>
+        <ambientLight intensity={0.8} />
+        <PrefabRoot
+          data={{
+              id: "scene",
+              name: "scene",
+              root: {
+                  id: "root",
+                  children: [
+                      {
+                          id: "ground",
+                          components: {
+                              transform: { type: "Transform", properties: { position: [0, 0, 0], rotation: [-1.57, 0, 0] } },
+                              geometry: { type: "Geometry", properties: { geometryType: "plane", args: [50, 50] } },
+                              material: { type: "Material", properties: { color: "green" } },
+                              physics: { type: "Physics", properties: { type: "fixed" } }
+                          }
+                      },
+                      {
+                          id: "player",
+                          components: {
+                              transform: { type: "Transform", properties: { position: [0, 2, 0] } },
+                              geometry: { type: "Geometry", properties: { geometryType: "sphere" } },
+                              material: { type: "Material", properties: { color: "#ff6b6b" } },
+                              physics: { type: "Physics", properties: { type: "dynamic" } }
+                          }
+                      }
+                  ]
               }
-            }
-          ]
-        }
-      }} />
+          }}
+      />
+      </Physics>
     </GameCanvas>
   );
 }
@@ -122,28 +100,100 @@ interface GameObject {
 
 ## Custom Components
 
-```tsx
+Extend the engine by registering your own components. Components have two parts:
+- **Editor**: UI for inspector panel (edit mode)
+- **View**: Three.js runtime renderer (play mode)
+
+### Component Interface
+
+```typescript
 import { Component } from 'react-three-game';
 
-const LaserComponent: Component = {
-  name: 'Laser',
+interface Component {
+  name: string;
+  Editor: FC<{ component: any; onUpdate: (newComp: any) => void }>;
+  View?: FC<{ properties: any; children?: React.ReactNode }>;
+  defaultProperties: any;
+}
+```
+
+### Example: Rotator Component
+
+```tsx
+import { Component, registerComponent } from 'react-three-game';
+import { useFrame } from '@react-three/fiber';
+import { useRef } from 'react';
+
+const RotatorComponent: Component = {
+  name: 'Rotator',
+  
   Editor: ({ component, onUpdate }) => (
-    <input 
-      value={component.properties.damage} 
-      onChange={e => onUpdate({ damage: +e.target.value })}
-    />
+    <div>
+      <label>Speed</label>
+      <input 
+        type="number"
+        value={component.properties.speed ?? 1.0}
+        onChange={e => onUpdate({ ...component.properties, speed: parseFloat(e.target.value) })}
+      />
+      <label>Axis</label>
+      <select 
+        value={component.properties.axis ?? 'y'}
+        onChange={e => onUpdate({ ...component.properties, axis: e.target.value })}
+      >
+        <option value="x">X</option>
+        <option value="y">Y</option>
+        <option value="z">Z</option>
+      </select>
+    </div>
   ),
-  View: ({ properties }) => (
-    <pointLight color="red" intensity={properties.damage} />
-  ),
-  defaultProperties: { damage: 10 }
+  
+  View: ({ properties, children }) => {
+    const ref = useRef();
+    const speed = properties.speed ?? 1.0;
+    const axis = properties.axis ?? 'y';
+    
+    useFrame((state, delta) => {
+      if (ref.current) {
+        ref.current.rotation[axis] += delta * speed;
+      }
+    });
+    
+    return <group ref={ref}>{children}</group>;
+  },
+  
+  defaultProperties: { speed: 1.0, axis: 'y' }
 };
 
-// Register
-import { registerComponent } from 'react-three-game';
-registerComponent(LaserComponent);
+// Register before using PrefabEditor
+registerComponent(RotatorComponent);
+```
+
+### Usage in Prefab JSON
+
+```json
+{
+  "id": "spinning-cube",
+  "components": {
+    "transform": { "type": "Transform", "properties": { "position": [0, 1, 0] } },
+    "geometry": { "type": "Geometry", "properties": { "geometryType": "box" } },
+    "material": { "type": "Material", "properties": { "color": "#ff6b6b" } },
+    "rotator": { "type": "Rotator", "properties": { "speed": 2.0, "axis": "y" } }
+  }
+}
 ```
 
+### Wrapper vs Leaf Components
+
+**Wrapper components** (accept `children`) wrap the rendered content:
+- Use for behaviors that need to manipulate the scene graph (animations, controllers)
+- Example: Rotator wraps mesh to apply rotation
+
+**Leaf components** (no `children`) render as siblings:
+- Use for standalone effects (lights, particles, audio sources)
+- Example: SpotLight renders a `<spotLight>` element
+
+The engine automatically detects component type by checking if `View` accepts `children` prop.
+
 ## Built-in Components
 
 | Component | Properties |
@@ -172,41 +222,13 @@ Transform gizmos (T/R/S keys), drag-to-reorder tree, import/export JSON, edit/pl
 ### Transform Hierarchy
 - Local transforms stored in JSON (relative to parent)
 - World transforms computed at runtime via matrix multiplication
-- `computeParentWorldMatrix(root, targetId)` traverses tree for parent's world matrix
 - TransformControls extract world matrix → compute parent inverse → derive new local transform
 
 ### GPU Instancing
-Enable with `model.properties.instanced = true`:
-```json
-{
-  "components": {
-    "model": { 
-      "type": "Model", 
-      "properties": { 
-        "filename": "tree.glb",
-        "instanced": true
-      }
-    }
-  }
-}
-```
-Uses drei's `<Merged>` + `<InstancedRigidBodies>` for physics. World-space transforms, terminal nodes.
+Enable with `model.properties.instanced = true` for optimized repeated geometry. Uses drei's `<Merged>` + `<InstancedRigidBodies>`.
 
 ### Model Loading
-- Supports GLB/GLTF (Draco compression) and FBX
-- Singleton loaders in `modelLoader.ts`
-- Draco decoder from `https://www.gstatic.com/draco/v1/decoders/`
-- Auto-loads when `model.properties.filename` detected
-
-### WebGPU Renderer
-```tsx
-<Canvas gl={async ({ canvas }) => {
-  const renderer = new WebGPURenderer({ canvas, shadowMap: true });
-  await renderer.init(); // Required
-  return renderer;
-}}>
-```
-Use `MeshStandardNodeMaterial` not `MeshStandardMaterial`.
+Supports GLB/GLTF (with Draco compression) and FBX. Models auto-load when `model.properties.filename` is detected.
 
 ## Patterns
 
@@ -216,15 +238,6 @@ import levelData from './prefabs/arena.json';
 <PrefabRoot data={levelData} />
 ```
 
-### Mix with React Components
-```jsx
-<Physics>
-  <PrefabRoot data={environment} />
-  <Player />
-  <AIEnemies />
-</Physics>
-```
-
 ### Update Prefab Nodes
 ```typescript
 function updatePrefabNode(root: GameObject, id: string, update: (node: GameObject) => GameObject): GameObject {
@@ -236,58 +249,6 @@ function updatePrefabNode(root: GameObject, id: string, update: (node: GameObjec
 }
 ```
 
-## AI Agent Reference
-
-### Prefab JSON Schema
-```typescript
-{
-  "id": "unique-id",
-  "root": {
-    "id": "root-id",
-    "components": {
-      "transform": {
-        "type": "Transform",
-        "properties": {
-          "position": [x, y, z],      // world units
-          "rotation": [x, y, z],      // radians
-          "scale": [x, y, z]          // multipliers
-        }
-      },
-      "geometry": {
-        "type": "Geometry",
-        "properties": {
-          "geometryType": "box" | "sphere" | "plane" | "cylinder" | "cone" | "torus",
-          "args": [/* geometry-specific */]
-        }
-      },
-      "material": {
-        "type": "Material",
-        "properties": {
-          "color": "#rrggbb",
-          "texture": "/path/to/texture.jpg",
-          "metalness": 0.0-1.0,
-          "roughness": 0.0-1.0
-        }
-      },
-      "physics": {
-        "type": "Physics",
-        "properties": {
-          "type": "dynamic" | "fixed"
-        }
-      },
-      "model": {
-        "type": "Model",
-        "properties": {
-          "filename": "/models/asset.glb",
-          "instanced": true
-        }
-      }
-    },
-    "children": [/* recursive GameObjects */]
-  }
-}
-```
-
 ## Development
 
 ```bash

package/dist/index.d.ts

@@ -3,5 +3,7 @@ export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
 export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
 export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
+export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
+export type { Component } from './tools/prefabeditor/components/ComponentRegistry';
 export * from './helpers';
 export type { Prefab, GameObject } from './tools/prefabeditor/types';

package/dist/index.js

@@ -4,5 +4,7 @@ export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
 export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
 export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
+// Component Registry
+export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
 // Helpers
 export * from './helpers';

package/dist/tools/dragdrop/DragDropLoader.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // DragDropLoader.tsx
 import { useEffect } from "react";

package/dist/tools/prefabeditor/EditorTree.js

@@ -6,6 +6,105 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
     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)",
+        }
+    };
     if (!prefabData || !setPrefabData)
         return null;
     const handleContextMenu = (e, nodeId) => {
@@ -77,38 +176,36 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
     };
     // Drag and Drop
     const handleDragStart = (e, id) => {
-        e.stopPropagation();
         if (id === prefabData.root.id) {
-            e.preventDefault(); // Cannot drag root
+            e.preventDefault();
             return;
         }
-        setDraggedId(id);
         e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/plain", id);
+        setDraggedId(id);
+    };
+    const handleDragEnd = () => {
+        setDraggedId(null);
     };
     const handleDragOver = (e, targetId) => {
-        e.preventDefault();
-        e.stopPropagation();
         if (!draggedId || draggedId === targetId)
             return;
-        // Check for cycles: target cannot be a descendant of dragged node
         const draggedNode = findNode(prefabData.root, draggedId);
         if (draggedNode && findNode(draggedNode, targetId))
             return;
+        e.preventDefault();
         e.dataTransfer.dropEffect = "move";
     };
     const handleDrop = (e, targetId) => {
-        e.preventDefault();
-        e.stopPropagation();
         if (!draggedId || draggedId === targetId)
             return;
+        e.preventDefault();
         setPrefabData(prev => {
             var _a;
             const newRoot = JSON.parse(JSON.stringify(prev.root));
-            // Check cycle again on the fresh tree
-            const draggedNodeRef = findNode(newRoot, draggedId);
-            if (draggedNodeRef && findNode(draggedNodeRef, targetId))
+            const draggedNode = findNode(newRoot, draggedId);
+            if (draggedNode && findNode(draggedNode, targetId))
                 return prev;
-            // Remove from old parent
             const parent = findParent(newRoot, draggedId);
             if (!parent)
                 return prev;
@@ -116,7 +213,6 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
             if (!nodeToMove)
                 return prev;
             parent.children = parent.children.filter(c => c.id !== draggedId);
-            // Add to new parent
             const target = findNode(newRoot, targetId);
             if (target) {
                 target.children = target.children || [];
@@ -132,9 +228,39 @@ 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", { className: "select-none", children: [_jsxs("div", { className: `flex items-center py-0.5 px-1 cursor-pointer border-b border-cyan-500/10 ${isSelected ? 'bg-cyan-500/30 hover:bg-cyan-500/40 border-cyan-400/30' : 'hover:bg-cyan-500/10'}`, style: { paddingLeft: `${depth * 8 + 4}px` }, onClick: (e) => { e.stopPropagation(); setSelectedId(node.id); }, onContextMenu: (e) => handleContextMenu(e, node.id), draggable: node.id !== prefabData.root.id, onDragStart: (e) => handleDragStart(e, node.id), onDragOver: (e) => handleDragOver(e, node.id), onDrop: (e) => handleDrop(e, node.id), children: [_jsx("span", { className: `mr-0.5 w-3 text-center text-cyan-400/50 hover:text-cyan-400 cursor-pointer text-[8px] ${hasChildren ? '' : 'invisible'}`, onClick: (e) => hasChildren && toggleCollapse(e, node.id), children: isCollapsed ? '▶' : '▼' }), _jsx("span", { className: "text-[10px] truncate font-mono text-cyan-300", children: node.id })] }), !isCollapsed && node.children && (_jsx("div", { children: node.children.map(child => renderNode(child, depth + 1)) }))] }, node.id));
+        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));
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-black/70 backdrop-blur-sm text-white border border-cyan-500/30 max-h-[85vh] overflow-y-auto flex flex-col", style: { width: isTreeCollapsed ? 'auto' : '14rem' }, onClick: closeContextMenu, children: [_jsxs("div", { className: "px-1.5 py-1 font-mono text-[10px] bg-cyan-500/10 border-b border-cyan-500/30 sticky top-0 uppercase tracking-wider text-cyan-400/80 cursor-pointer hover:bg-cyan-500/20 flex items-center justify-between", onClick: (e) => { e.stopPropagation(); setIsTreeCollapsed(!isTreeCollapsed); }, children: [_jsx("span", { children: "Prefab Graph" }), _jsx("span", { className: "text-[8px]", children: isTreeCollapsed ? '▶' : '◀' })] }), !isTreeCollapsed && (_jsx("div", { className: "flex-1 py-0.5", children: renderNode(prefabData.root) }))] }), contextMenu && (_jsxs("div", { className: "fixed bg-black/90 backdrop-blur-sm border border-cyan-500/40 z-50 min-w-[100px]", style: { top: contextMenu.y, left: contextMenu.x }, onClick: (e) => e.stopPropagation(), onPointerLeave: closeContextMenu, children: [_jsx("button", { className: "w-full text-left px-2 py-1 hover:bg-cyan-500/20 text-[10px] text-cyan-300 font-mono border-b border-cyan-500/20", onClick: () => handleAddChild(contextMenu.nodeId), children: "Add Child" }), contextMenu.nodeId !== prefabData.root.id && (_jsxs(_Fragment, { children: [_jsx("button", { className: "w-full text-left px-2 py-1 hover:bg-cyan-500/20 text-[10px] text-cyan-300 font-mono border-b border-cyan-500/20", onClick: () => handleDuplicate(contextMenu.nodeId), children: "Duplicate" }), _jsx("button", { className: "w-full text-left px-2 py-1 hover:bg-red-500/20 text-[10px] text-red-400 font-mono", onClick: () => handleDelete(contextMenu.nodeId), children: "Delete" })] }))] }))] }));
+    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) {