react-three-game 0.0.57 → 0.0.58

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

@@ -1,33 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useMemo, useState } from "react";
 import { BooleanField, ColorField, FieldGroup, NumberField } from "./Input";
-import { useHelper } from "@react-three/drei";
 import { SpotLightHelper } from "three";
+import { useFrame } from "@react-three/fiber";
+const spotLightDefaults = {
+    color: '#ffffff',
+    intensity: 1,
+    angle: Math.PI / 6,
+    penumbra: 0.5,
+    distance: 100,
+    castShadow: true,
+};
 function SpotLightComponentEditor({ component, onUpdate }) {
-    return (_jsxs(FieldGroup, { children: [_jsx(ColorField, { name: "color", label: "Color", values: component.properties, onChange: onUpdate }), _jsx(NumberField, { name: "intensity", label: "Intensity", values: component.properties, onChange: onUpdate, min: 0, step: 0.1, fallback: 1 }), _jsx(NumberField, { name: "angle", label: "Angle", values: component.properties, onChange: onUpdate, min: 0, max: Math.PI, step: 0.05, fallback: Math.PI / 6 }), _jsx(NumberField, { name: "penumbra", label: "Penumbra", values: component.properties, onChange: onUpdate, min: 0, max: 1, step: 0.05, fallback: 0.5 }), _jsx(NumberField, { name: "distance", label: "Distance", values: component.properties, onChange: onUpdate, min: 0, step: 1, fallback: 100 }), _jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: component.properties, onChange: onUpdate, fallback: true })] }));
+    const values = Object.assign(Object.assign({}, spotLightDefaults), component.properties);
+    return (_jsxs(FieldGroup, { children: [_jsx(ColorField, { name: "color", label: "Color", values: values, onChange: onUpdate }), _jsx(NumberField, { name: "intensity", label: "Intensity", values: values, onChange: onUpdate, min: 0, step: 0.1, fallback: 1 }), _jsx(NumberField, { name: "angle", label: "Angle", values: values, onChange: onUpdate, min: 0, max: Math.PI, step: 0.05, fallback: Math.PI / 6 }), _jsx(NumberField, { name: "penumbra", label: "Penumbra", values: values, onChange: onUpdate, min: 0, max: 1, step: 0.05, fallback: 0.5 }), _jsx(NumberField, { name: "distance", label: "Distance", values: values, onChange: onUpdate, min: 0, step: 1, fallback: 100 }), _jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: values, onChange: onUpdate, fallback: true })] }));
 }
 function SpotLightView({ properties, editMode, isSelected }) {
-    var _a, _b, _c, _d, _e, _f;
-    const color = (_a = properties.color) !== null && _a !== void 0 ? _a : '#ffffff';
-    const intensity = (_b = properties.intensity) !== null && _b !== void 0 ? _b : 1.0;
-    const angle = (_c = properties.angle) !== null && _c !== void 0 ? _c : Math.PI / 6;
-    const penumbra = (_d = properties.penumbra) !== null && _d !== void 0 ? _d : 0.5;
-    const distance = (_e = properties.distance) !== null && _e !== void 0 ? _e : 100;
-    const castShadow = (_f = properties.castShadow) !== null && _f !== void 0 ? _f : true;
+    const merged = Object.assign(Object.assign({}, spotLightDefaults), properties);
+    const color = merged.color;
+    const intensity = merged.intensity;
+    const angle = merged.angle;
+    const penumbra = merged.penumbra;
+    const distance = merged.distance;
+    const castShadow = merged.castShadow;
     const spotLightRef = useRef(null);
     const targetRef = useRef(null);
-    useHelper(editMode && isSelected ? spotLightRef : null, SpotLightHelper, color);
+    const [spotLight, setSpotLight] = useState(null);
+    const spotLightHelper = useMemo(() => spotLight ? new SpotLightHelper(spotLight, color) : null, [spotLight, color]);
+    useEffect(() => {
+        return () => {
+            spotLightHelper === null || spotLightHelper === void 0 ? void 0 : spotLightHelper.dispose();
+        };
+    }, [spotLightHelper]);
     useEffect(() => {
         if (spotLightRef.current && targetRef.current) {
             spotLightRef.current.target = targetRef.current;
+            setSpotLight(spotLightRef.current);
         }
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, castShadow: castShadow, "shadow-mapSize-width": 1024, "shadow-mapSize-height": 1024, "shadow-bias": -0.0001, "shadow-normalBias": 0.02 }), _jsx("object3D", { ref: targetRef, position: [0, -5, 0] }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: [0, -5, 0], children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] }))] }));
+    useFrame(() => {
+        if (spotLightHelper && editMode && isSelected) {
+            spotLightHelper.update();
+        }
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, castShadow: castShadow, "shadow-mapSize-width": 1024, "shadow-mapSize-height": 1024, "shadow-bias": -0.0001, "shadow-normalBias": 0.02 }), editMode && isSelected && spotLightHelper && (_jsx("primitive", { object: spotLightHelper })), _jsx("object3D", { ref: targetRef, position: [0, -5, 0] }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: [0, -5, 0], children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] }))] }));
 }
 const SpotLightComponent = {
     name: 'SpotLight',
     Editor: SpotLightComponentEditor,
     View: SpotLightView,
-    defaultProperties: {}
+    defaultProperties: spotLightDefaults
 };
 export default SpotLightComponent;

package/package.json

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

package/react-three-game-skill/react-three-game/SKILL.md

@@ -81,12 +81,15 @@ Every game object follows this schema:
 ```typescript
 interface GameObject {
   id: string;
+  name?: string;
   disabled?: boolean;
   components?: Record<string, { type: string; properties: any }>;
   children?: GameObject[];
 }
 ```
 
+`disabled` is the canonical visibility toggle. Transforms are local to the parent node.
+
 ### Prefab JSON Format
 
 Scenes are defined as JSON prefabs with a root node containing children:
@@ -178,7 +181,7 @@ import { GameCanvas, PrefabRoot } from 'react-three-game';
 </GameCanvas>
 ```
 
-**PrefabEditor**: Managed scene with editor UI and play/pause controls for physics. Full authoring tool for level design and prototyping. Includes canvas, physics, transform gizmos, and inspector. Physics only runs in play mode. Can pass R3F components as children.
+**PrefabEditor**: Managed scene with editor UI and play/pause controls for physics. Full authoring tool for level design and prototyping. Includes canvas, physics, transform gizmos, and inspector. Physics only runs in play mode. Can pass R3F components as children. Editor actions live under `Menu > File`, and exports under `Menu > Export`.
 
 ```jsx
 import { PrefabEditor } from 'react-three-game';

package/src/tools/prefabeditor/EditorTree.tsx

@@ -1,10 +1,11 @@
 import { Dispatch, SetStateAction, useState, MouseEvent } from 'react';
 import { Prefab, GameObject } from "./types";
 import { getComponent } from './components/ComponentRegistry';
-import { base, colors, tree, menu } from './styles';
-import { findNode, findParent, deleteNode, cloneNode, updateNodeById, loadJson, saveJson, regenerateIds } from './utils';
+import { base, colors, tree } from './styles';
+import { findNode, findParent, deleteNode, cloneNode, updateNodeById } from './utils';
 import { useEditorContext } from './EditorContext';
 import { Dropdown } from './Dropdown';
+import { FileMenu, MenuTriggerButton, TreeContextMenu, TreeContextMenuState, TreeNodeMenu } from './EditorTreeMenus';
 
 type DropPosition = 'before' | 'inside';
 
@@ -100,6 +101,7 @@ export default function EditorTree({
     const [collapsedIds, setCollapsedIds] = useState<Set<string>>(new Set());
     const [collapsed, setCollapsed] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
+    const [contextMenu, setContextMenu] = useState<TreeContextMenuState>(null);
 
     if (!prefabData || !setPrefabData) return null;
 
@@ -165,6 +167,30 @@ export default function EditorTree({
         }));
     };
 
+    const closeContextMenu = () => setContextMenu(null);
+
+    const openContextMenu = (nodeId: string, x: number, y: number) => {
+        setSelectedId(nodeId);
+        setContextMenu({ nodeId, x, y });
+    };
+
+    const handleFocus = (nodeId: string) => {
+        setSelectedId(nodeId);
+        onFocusNode?.(nodeId);
+    };
+
+    const renderTreeNodeMenu = (nodeId: string, isRoot: boolean, onClose: () => void) => (
+        <TreeNodeMenu
+            isRoot={isRoot}
+            nodeId={nodeId}
+            onAddChild={handleAddChild}
+            onFocus={handleFocus}
+            onDuplicate={isRoot ? undefined : handleDuplicate}
+            onDelete={isRoot ? undefined : handleDelete}
+            onClose={onClose}
+        />
+    );
+
     const handleDragStart = (e: React.DragEvent, id: string) => {
         if (id === prefabData.root.id) return e.preventDefault();
         e.dataTransfer.effectAllowed = "move";
@@ -240,6 +266,11 @@ export default function EditorTree({
                     }}
                     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)}
@@ -269,8 +300,10 @@ export default function EditorTree({
                             <Dropdown
                                 placement="bottom-end"
                                 trigger={({ ref, toggle }) => (
-                                    <button
-                                        ref={ref}
+                                    <MenuTriggerButton
+                                        buttonRef={ref}
+                                        onToggle={toggle}
+                                        title="Node Actions"
                                         style={{
                                             background: 'none',
                                             border: 'none',
@@ -280,32 +313,12 @@ export default function EditorTree({
                                             opacity: 0.7,
                                             color: 'inherit',
                                         }}
-                                        onClick={(e) => {
-                                            e.stopPropagation();
-                                            toggle();
-                                        }}
-                                        title="Node Actions"
                                     >
                                         ⋯
-                                    </button>
+                                    </MenuTriggerButton>
                                 )}
                             >
-                                {(close) => (
-                                    <div style={{ ...menu.container, position: 'static' }} onClick={(e) => e.stopPropagation()}>
-                                        <button style={menu.item} onClick={() => { handleAddChild(node.id); close(); }}>
-                                            Add Child
-                                        </button>
-                                        <button style={menu.item} onClick={() => { setSelectedId(node.id); onFocusNode?.(node.id); close(); }}>
-                                            Focus Camera
-                                        </button>
-                                        <button style={menu.item} onClick={() => { handleDuplicate(node.id); close(); }}>
-                                            Duplicate
-                                        </button>
-                                        <button style={{ ...menu.item, ...menu.danger }} onClick={() => { handleDelete(node.id); close(); }}>
-                                            Delete
-                                        </button>
-                                    </div>
-                                )}
+                                {(close) => renderTreeNodeMenu(node.id, false, close)}
                             </Dropdown>
                             <button
                                 style={{
@@ -331,8 +344,10 @@ export default function EditorTree({
                         <Dropdown
                             placement="bottom-end"
                             trigger={({ ref, toggle }) => (
-                                <button
-                                    ref={ref}
+                                <MenuTriggerButton
+                                    buttonRef={ref}
+                                    onToggle={toggle}
+                                    title="Scene Actions"
                                     style={{
                                         background: 'none',
                                         border: 'none',
@@ -342,26 +357,12 @@ export default function EditorTree({
                                         opacity: 0.7,
                                         color: 'inherit',
                                     }}
-                                    onClick={(e) => {
-                                        e.stopPropagation();
-                                        toggle();
-                                    }}
-                                    title="Scene Actions"
                                 >
                                     ⋯
-                                </button>
+                                </MenuTriggerButton>
                             )}
                         >
-                            {(close) => (
-                                <div style={{ ...menu.container, position: 'static' }} onClick={(e) => e.stopPropagation()}>
-                                    <button style={menu.item} onClick={() => { handleAddChild(node.id); close(); }}>
-                                        Add Child
-                                    </button>
-                                    <button style={menu.item} onClick={() => { setSelectedId(node.id); onFocusNode?.(node.id); close(); }}>
-                                        Focus Camera
-                                    </button>
-                                </div>
-                            )}
+                            {(close) => renderTreeNodeMenu(node.id, true, close)}
                         </Dropdown>
                     )}
                 </div>
@@ -399,14 +400,14 @@ export default function EditorTree({
                             <Dropdown
                                 placement="bottom-end"
                                 trigger={({ ref, toggle }) => (
-                                    <button
-                                        ref={ref}
+                                    <MenuTriggerButton
+                                        buttonRef={ref}
+                                        onToggle={toggle}
+                                        title="Menu"
                                         style={{ ...base.btn, padding: '2px 6px', fontSize: 10 }}
-                                        onClick={(e) => { e.stopPropagation(); toggle(); }}
-                                        title="File"
                                     >
                                         ⋮
-                                    </button>
+                                    </MenuTriggerButton>
                                 )}
                             >
                                 {(close) => (
@@ -439,83 +440,13 @@ export default function EditorTree({
                     </>
                 )}
             </div>
+            <TreeContextMenu
+                contextMenu={contextMenu}
+                onClose={closeContextMenu}
+            >
+                {(nodeId, close) => renderTreeNodeMenu(nodeId, nodeId === prefabData.root.id, close)}
+            </TreeContextMenu>
 
         </>
     );
 }
-
-function FileMenu({
-    prefabData,
-    setPrefabData,
-    onClose
-}: {
-    prefabData: Prefab;
-    setPrefabData: Dispatch<SetStateAction<Prefab>>;
-    onClose: () => void;
-}) {
-    const { onScreenshot, onExportGLB } = useEditorContext();
-
-    const handleLoad = async () => {
-        const loadedPrefab = await loadJson();
-        if (!loadedPrefab) return;
-        setPrefabData(loadedPrefab);
-        onClose();
-    };
-
-    const handleSave = () => {
-        saveJson(prefabData, "prefab");
-        onClose();
-    };
-
-    const handleLoadIntoScene = async () => {
-        const loadedPrefab = await loadJson();
-        if (!loadedPrefab) return;
-
-        setPrefabData(prev => ({
-            ...prev,
-            root: updateNodeById(prev.root, prev.root.id, root => ({
-                ...root,
-                children: [...(root.children ?? []), regenerateIds(loadedPrefab.root)]
-            }))
-        }));
-        onClose();
-    };
-
-    return (
-        <div
-            style={{ ...menu.container, position: 'static' }}
-            onClick={(e) => e.stopPropagation()}
-        >
-            <button
-                style={menu.item}
-                onClick={handleLoad}
-            >
-                📥 Load Prefab JSON
-            </button>
-            <button
-                style={menu.item}
-                onClick={handleSave}
-            >
-                💾 Save Prefab JSON
-            </button>
-            <button
-                style={menu.item}
-                onClick={handleLoadIntoScene}
-            >
-                📂 Load into Scene
-            </button>
-            <button
-                style={menu.item}
-                onClick={() => { onScreenshot?.(); onClose(); }}
-            >
-                📸 Screenshot
-            </button>
-            <button
-                style={menu.item}
-                onClick={() => { onExportGLB?.(); onClose(); }}
-            >
-                📦 Export GLB
-            </button>
-        </div>
-    );
-}

package/src/tools/prefabeditor/EditorTreeMenus.tsx

@@ -0,0 +1,307 @@
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Prefab } from './types';
+import { menu } from './styles';
+import { useEditorContext } from './EditorContext';
+import { getComponent } from './components/ComponentRegistry';
+import { loadJson, saveJson, regenerateIds, updateNodeById } from './utils';
+
+export type TreeContextMenuState = { nodeId: string; x: number; y: number } | null;
+
+function createEmptyPrefab(): Prefab {
+    return {
+        id: crypto.randomUUID(),
+        name: 'New Scene',
+        root: {
+            id: crypto.randomUUID(),
+            name: 'Scene',
+            components: {
+                transform: {
+                    type: 'Transform',
+                    properties: { ...getComponent('Transform')?.defaultProperties }
+                }
+            },
+            children: []
+        }
+    };
+}
+
+function MenuPanel({
+    children,
+    style,
+}: {
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}) {
+    return (
+        <div style={{ ...menu.container, position: 'static', ...style }} onClick={(e) => e.stopPropagation()}>
+            {children}
+        </div>
+    );
+}
+
+function MenuItemButton({
+    children,
+    onClick,
+    danger = false,
+    style,
+}: {
+    children: React.ReactNode;
+    onClick: () => void;
+    danger?: boolean;
+    style?: React.CSSProperties;
+}) {
+    return (
+        <button
+            style={danger ? { ...menu.item, ...menu.danger, ...style } : { ...menu.item, ...style }}
+            onClick={onClick}
+        >
+            {children}
+        </button>
+    );
+}
+
+function MenuSubmenu({
+    label,
+    children,
+}: {
+    label: string;
+    children: React.ReactNode;
+}) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <div
+            style={{ position: 'relative' }}
+            onMouseEnter={() => setIsOpen(true)}
+            onMouseLeave={() => setIsOpen(false)}
+        >
+            <MenuItemButton
+                onClick={() => setIsOpen(open => !open)}
+                style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}
+            >
+                <span>{label}</span>
+                <span aria-hidden="true">›</span>
+            </MenuItemButton>
+            {isOpen && (
+                <div
+                    style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: '100%',
+                        zIndex: 1,
+                    }}
+                >
+                    <MenuPanel>{children}</MenuPanel>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export function MenuTriggerButton({
+    buttonRef,
+    onToggle,
+    title,
+    style,
+    children,
+}: {
+    buttonRef: React.RefObject<HTMLButtonElement | null>;
+    onToggle: () => void;
+    title: string;
+    style: React.CSSProperties;
+    children: React.ReactNode;
+}) {
+    return (
+        <button
+            ref={buttonRef}
+            style={style}
+            onClick={(e) => {
+                e.stopPropagation();
+                onToggle();
+            }}
+            title={title}
+        >
+            {children}
+        </button>
+    );
+}
+
+export function TreeNodeMenu({
+    isRoot,
+    nodeId,
+    onAddChild,
+    onFocus,
+    onDuplicate,
+    onDelete,
+    onClose,
+}: {
+    isRoot: boolean;
+    nodeId: string;
+    onAddChild: (parentId: string) => void;
+    onFocus: (nodeId: string) => void;
+    onDuplicate?: (nodeId: string) => void;
+    onDelete?: (nodeId: string) => void;
+    onClose: () => void;
+}) {
+    return (
+        <MenuPanel>
+            <MenuItemButton onClick={() => { onAddChild(nodeId); onClose(); }}>
+                Add Child
+            </MenuItemButton>
+            <MenuItemButton onClick={() => { onFocus(nodeId); onClose(); }}>
+                Focus Camera
+            </MenuItemButton>
+            {!isRoot && onDuplicate && (
+                <MenuItemButton onClick={() => { onDuplicate(nodeId); onClose(); }}>
+                    Duplicate
+                </MenuItemButton>
+            )}
+            {!isRoot && onDelete && (
+                <MenuItemButton danger onClick={() => { onDelete(nodeId); onClose(); }}>
+                    Delete
+                </MenuItemButton>
+            )}
+        </MenuPanel>
+    );
+}
+
+export function TreeContextMenu({
+    contextMenu,
+    onClose,
+    children,
+}: {
+    contextMenu: TreeContextMenuState;
+    onClose: () => void;
+    children: (nodeId: string, onClose: () => void) => React.ReactNode;
+}) {
+    const panelRef = useRef<HTMLDivElement>(null);
+    const [position, setPosition] = useState<{ left: number; top: number } | null>(null);
+
+    useEffect(() => {
+        if (!contextMenu) return;
+
+        const handlePointerDown = (event: PointerEvent) => {
+            const target = event.target as Node | null;
+            if (!target) return;
+            if (panelRef.current?.contains(target)) return;
+            onClose();
+        };
+
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') onClose();
+        };
+
+        document.addEventListener('pointerdown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            document.removeEventListener('pointerdown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [contextMenu, onClose]);
+
+    useEffect(() => {
+        if (!contextMenu || !panelRef.current || typeof window === 'undefined') return;
+
+        const panelRect = panelRef.current.getBoundingClientRect();
+        const left = Math.max(8, Math.min(contextMenu.x, window.innerWidth - panelRect.width - 8));
+        const top = Math.max(8, Math.min(contextMenu.y, window.innerHeight - panelRect.height - 8));
+        setPosition({ left, top });
+    }, [contextMenu]);
+
+    useEffect(() => {
+        if (!contextMenu) {
+            setPosition(null);
+        }
+    }, [contextMenu]);
+
+    if (!contextMenu || typeof document === 'undefined') return null;
+
+    return createPortal(
+        <div
+            ref={panelRef}
+            style={{
+                position: 'fixed',
+                left: position?.left ?? contextMenu.x,
+                top: position?.top ?? contextMenu.y,
+                zIndex: 1000,
+            }}
+            onMouseLeave={onClose}
+            onContextMenu={(e) => e.preventDefault()}
+        >
+            {children(contextMenu.nodeId, onClose)}
+        </div>,
+        document.body
+    );
+}
+
+export function FileMenu({
+    prefabData,
+    setPrefabData,
+    onClose
+}: {
+    prefabData: Prefab;
+    setPrefabData: Dispatch<SetStateAction<Prefab>>;
+    onClose: () => void;
+}) {
+    const { onScreenshot, onExportGLB } = useEditorContext();
+
+    const handleNewScene = () => {
+        setPrefabData(createEmptyPrefab());
+        onClose();
+    };
+
+    const handleNewSceneFromPrefab = async () => {
+        const loadedPrefab = await loadJson();
+        if (!loadedPrefab) return;
+        setPrefabData(loadedPrefab);
+        onClose();
+    };
+
+    const handleSave = () => {
+        saveJson(prefabData, 'prefab');
+        onClose();
+    };
+
+    const handleLoadIntoScene = async () => {
+        const loadedPrefab = await loadJson();
+        if (!loadedPrefab) return;
+
+        setPrefabData(prev => ({
+            ...prev,
+            root: updateNodeById(prev.root, prev.root.id, root => ({
+                ...root,
+                children: [...(root.children ?? []), regenerateIds(loadedPrefab.root)]
+            }))
+        }));
+        onClose();
+    };
+
+    return (
+        <MenuPanel style={{ overflow: 'visible' }}>
+            <MenuSubmenu label="File">
+                <MenuItemButton onClick={handleNewScene}>
+                    New Scene
+                </MenuItemButton>
+                <MenuItemButton onClick={handleNewSceneFromPrefab}>
+                    New Scene from Prefab
+                </MenuItemButton>
+                <MenuItemButton onClick={handleLoadIntoScene}>
+                    Load Prefab into Scene
+                </MenuItemButton>
+                <MenuItemButton onClick={handleSave}>
+                    Save Prefab
+                </MenuItemButton>
+            </MenuSubmenu>
+            <MenuSubmenu label="Export">
+                <MenuItemButton onClick={() => { onExportGLB?.(); onClose(); }}>
+                    GLB
+                </MenuItemButton>
+                <MenuItemButton onClick={() => { onScreenshot?.(); onClose(); }}>
+                    PNG
+                </MenuItemButton>
+            </MenuSubmenu>
+        </MenuPanel>
+    );
+}