react-three-game 0.0.36 → 0.0.38

package/dist/index.d.ts

@@ -1,11 +1,13 @@
 export { default as GameCanvas } from './shared/GameCanvas';
 export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
+export type { PrefabEditorRef } 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 type { PrefabRootRef } from './tools/prefabeditor/PrefabRoot';
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
 export type { Component } from './tools/prefabeditor/components/ComponentRegistry';
+export type { Prefab, GameObject, ComponentData } from './tools/prefabeditor/types';
 export * as editorStyles from './tools/prefabeditor/styles';
 export * from './tools/prefabeditor/utils';
+export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
+export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
 export * from './helpers';
-export type { Prefab, GameObject, ComponentData } from './tools/prefabeditor/types';

package/dist/index.js

@@ -1,13 +1,13 @@
-// Components
+// Core Components
 export { default as GameCanvas } from './shared/GameCanvas';
+// Prefab Editor
 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';
-// Editor Styles & Utils
 export * as editorStyles from './tools/prefabeditor/styles';
 export * from './tools/prefabeditor/utils';
+// Asset Tools
+export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
+export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
 // Helpers
 export * from './helpers';

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

@@ -0,0 +1,11 @@
+interface EditorContextType {
+    transformMode: "translate" | "rotate" | "scale";
+    setTransformMode: (mode: "translate" | "rotate" | "scale") => void;
+    snapResolution: number;
+    setSnapResolution: (resolution: number) => void;
+    onScreenshot?: () => void;
+    onExportGLB?: () => void;
+}
+export declare const EditorContext: import("react").Context<EditorContextType | null>;
+export declare function useEditorContext(): EditorContextType;
+export {};

package/dist/tools/prefabeditor/EditorContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+export const EditorContext = createContext(null);
+export function useEditorContext() {
+    const context = useContext(EditorContext);
+    if (!context) {
+        throw new Error("useEditorContext must be used within EditorContext.Provider");
+    }
+    return context;
+}

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

@@ -1,12 +1,10 @@
 import { Dispatch, SetStateAction } from 'react';
 import { Prefab } from "./types";
-export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId, onSave, onLoad, onUndo, onRedo, canUndo, canRedo }: {
+export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId, onUndo, onRedo, canUndo, canRedo }: {
     prefabData?: Prefab;
     setPrefabData?: Dispatch<SetStateAction<Prefab>>;
     selectedId: string | null;
     setSelectedId: Dispatch<SetStateAction<string | null>>;
-    onSave?: () => void;
-    onLoad?: () => void;
     onUndo?: () => void;
     onRedo?: () => void;
     canUndo?: boolean;

package/dist/tools/prefabeditor/EditorTree.js

@@ -1,9 +1,19 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { getComponent } from './components/ComponentRegistry';
 import { base, tree, menu } from './styles';
-import { findNode, findParent, deleteNode, cloneNode, updateNodeById } from './utils';
-export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId, onSave, onLoad, onUndo, onRedo, canUndo, canRedo }) {
+import { findNode, findParent, deleteNode, cloneNode, updateNodeById, loadJson, saveJson, regenerateIds } from './utils';
+import { useEditorContext } from './EditorContext';
+export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId, onUndo, onRedo, canUndo, canRedo }) {
     const [contextMenu, setContextMenu] = useState(null);
     const [draggedId, setDraggedId] = useState(null);
     const [collapsedIds, setCollapsedIds] = useState(new Set());
@@ -111,5 +121,30 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
                                 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 })] }), !isCollapsed && node.children && node.children.map(child => renderNode(child, depth + 1))] }, node.id));
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: Object.assign(Object.assign({}, tree.panel), { width: collapsed ? 'auto' : 224 }), onClick: () => { setContextMenu(null); setFileMenuOpen(false); }, children: [_jsxs("div", { style: base.header, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { children: collapsed ? '▶' : '▼' }), _jsx("span", { children: "Scene" })] }), !collapsed && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [_jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10, opacity: canUndo ? 1 : 0.4 }), onClick: (e) => { e.stopPropagation(); onUndo === null || onUndo === void 0 ? void 0 : onUndo(); }, disabled: !canUndo, title: "Undo", children: "\u21B6" }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10, opacity: canRedo ? 1 : 0.4 }), onClick: (e) => { e.stopPropagation(); onRedo === null || onRedo === void 0 ? void 0 : onRedo(); }, disabled: !canRedo, title: "Redo", children: "\u21B7" }), _jsxs("div", { style: { position: 'relative' }, children: [_jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10 }), onClick: (e) => { e.stopPropagation(); setFileMenuOpen(!fileMenuOpen); }, title: "File", children: "\u22EE" }), fileMenuOpen && (_jsxs("div", { style: Object.assign(Object.assign({}, menu.container), { top: 28, right: 0 }), onClick: (e) => e.stopPropagation(), children: [_jsx("button", { style: menu.item, onClick: () => { onLoad === null || onLoad === void 0 ? void 0 : onLoad(); setFileMenuOpen(false); }, children: "\uD83D\uDCE5 Load" }), _jsx("button", { style: menu.item, onClick: () => { onSave === null || onSave === void 0 ? void 0 : onSave(); setFileMenuOpen(false); }, children: "\uD83D\uDCBE Save" })] }))] })] }))] }), !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" })] }))] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: Object.assign(Object.assign({}, tree.panel), { width: collapsed ? 'auto' : 224 }), onClick: () => { setContextMenu(null); setFileMenuOpen(false); }, children: [_jsxs("div", { style: base.header, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { children: collapsed ? '▶' : '▼' }), _jsx("span", { children: "Scene" })] }), !collapsed && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [_jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10, opacity: canUndo ? 1 : 0.4 }), onClick: (e) => { e.stopPropagation(); onUndo === null || onUndo === void 0 ? void 0 : onUndo(); }, disabled: !canUndo, title: "Undo", children: "\u21B6" }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10, opacity: canRedo ? 1 : 0.4 }), onClick: (e) => { e.stopPropagation(); onRedo === null || onRedo === void 0 ? void 0 : onRedo(); }, disabled: !canRedo, title: "Redo", children: "\u21B7" }), _jsxs("div", { style: { position: 'relative' }, children: [_jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10 }), onClick: (e) => { e.stopPropagation(); setFileMenuOpen(!fileMenuOpen); }, title: "File", children: "\u22EE" }), fileMenuOpen && (_jsx(FileMenu, { prefabData: prefabData, setPrefabData: setPrefabData, onClose: () => setFileMenuOpen(false) }))] })] }))] }), !collapsed && _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" })] }))] }))] }));
+}
+function FileMenu({ prefabData, setPrefabData, onClose }) {
+    const { onScreenshot, onExportGLB } = useEditorContext();
+    const handleLoad = () => __awaiter(this, void 0, void 0, function* () {
+        const loadedPrefab = yield loadJson();
+        if (!loadedPrefab)
+            return;
+        setPrefabData(loadedPrefab);
+        onClose();
+    });
+    const handleSave = () => {
+        saveJson(prefabData, "prefab");
+        onClose();
+    };
+    const handleLoadIntoScene = () => __awaiter(this, void 0, void 0, function* () {
+        const loadedPrefab = yield loadJson();
+        if (!loadedPrefab)
+            return;
+        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, prev.root.id, root => {
+                var _a;
+                return (Object.assign(Object.assign({}, root), { children: [...((_a = root.children) !== null && _a !== void 0 ? _a : []), regenerateIds(loadedPrefab.root)] }));
+            }) })));
+        onClose();
+    });
+    return (_jsxs("div", { style: Object.assign(Object.assign({}, menu.container), { top: 28, right: 0 }), onClick: (e) => e.stopPropagation(), children: [_jsx("button", { style: menu.item, onClick: handleLoad, children: "\uD83D\uDCE5 Load Prefab JSON" }), _jsx("button", { style: menu.item, onClick: handleSave, children: "\uD83D\uDCBE Save Prefab JSON" }), _jsx("button", { style: menu.item, onClick: handleLoadIntoScene, children: "\uD83D\uDCC2 Load into Scene" }), _jsx("button", { style: menu.item, onClick: () => { onScreenshot === null || onScreenshot === void 0 ? void 0 : onScreenshot(); onClose(); }, children: "\uD83D\uDCF8 Screenshot" }), _jsx("button", { style: menu.item, onClick: () => { onExportGLB === null || onExportGLB === void 0 ? void 0 : onExportGLB(); onClose(); }, children: "\uD83D\uDCE6 Export GLB" })] }));
 }

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

@@ -1,15 +1,11 @@
 import { Dispatch, SetStateAction } from 'react';
 import { Prefab } from "./types";
-declare function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transformMode, setTransformMode, basePath, onSave, onLoad, onUndo, onRedo, canUndo, canRedo }: {
+declare function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, basePath, onUndo, onRedo, canUndo, canRedo }: {
     prefabData?: Prefab;
     setPrefabData?: Dispatch<SetStateAction<Prefab>>;
     selectedId: string | null;
     setSelectedId: Dispatch<SetStateAction<string | null>>;
-    transformMode: "translate" | "rotate" | "scale";
-    setTransformMode: (m: "translate" | "rotate" | "scale") => void;
     basePath?: string;
-    onSave?: () => void;
-    onLoad?: () => void;
     onUndo?: () => void;
     onRedo?: () => void;
     canUndo?: boolean;

package/dist/tools/prefabeditor/EditorUI.js

@@ -15,8 +15,10 @@ 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, onSave, onLoad, onUndo, onRedo, canUndo, canRedo }) {
+import { useEditorContext } from './EditorContext';
+function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, basePath, onUndo, onRedo, canUndo, canRedo }) {
     const [collapsed, setCollapsed] = useState(false);
+    const { transformMode, setTransformMode } = useEditorContext();
     const updateNodeHandler = (updater) => {
         if (!prefabData || !setPrefabData || !selectedId)
             return;
@@ -34,7 +36,7 @@ function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transf
 .prefab-scroll::-webkit-scrollbar-track { background: transparent; }
 .prefab-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }
 .prefab-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent; }
-        ` }), _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, onSave: onSave, onLoad: onLoad, onUndo: onUndo, onRedo: onRedo, canUndo: canUndo, canRedo: canRedo }) })] });
+        ` }), _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, onUndo: onUndo, onRedo: onRedo, canUndo: canUndo, canRedo: canRedo }) })] });
 }
 function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransformMode, basePath }) {
     var _a;

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

@@ -0,0 +1,7 @@
+export declare const SCREENSHOT_EVENT = "prefab-editor-screenshot";
+export declare const EXPORT_GLB_EVENT = "prefab-editor-export-glb";
+export declare function ExportHelper({ prefabName }: {
+    prefabName: string;
+}): null;
+export declare function triggerScreenshot(): void;
+export declare function triggerExportGLB(): void;

package/dist/tools/prefabeditor/ExportHelper.js

@@ -0,0 +1,55 @@
+import { useEffect, useRef } from "react";
+import { useThree } from "@react-three/fiber";
+import { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter.js";
+// Custom events for triggering exports
+export const SCREENSHOT_EVENT = "prefab-editor-screenshot";
+export const EXPORT_GLB_EVENT = "prefab-editor-export-glb";
+export function ExportHelper({ prefabName }) {
+    const { gl, scene } = useThree();
+    const sceneRef = useRef(scene);
+    useEffect(() => {
+        sceneRef.current = scene;
+    }, [scene]);
+    useEffect(() => {
+        const handleScreenshot = () => {
+            const canvas = gl.domElement;
+            canvas.toBlob((blob) => {
+                if (!blob)
+                    return;
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `${prefabName || 'screenshot'}.png`;
+                a.click();
+                URL.revokeObjectURL(url);
+            });
+        };
+        const handleExportGLB = () => {
+            const exporter = new GLTFExporter();
+            exporter.parse(sceneRef.current, (result) => {
+                const blob = new Blob([result], { type: 'application/octet-stream' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `${prefabName || 'scene'}.glb`;
+                a.click();
+                URL.revokeObjectURL(url);
+            }, (error) => {
+                console.error('Error exporting GLB:', error);
+            }, { binary: true });
+        };
+        window.addEventListener(SCREENSHOT_EVENT, handleScreenshot);
+        window.addEventListener(EXPORT_GLB_EVENT, handleExportGLB);
+        return () => {
+            window.removeEventListener(SCREENSHOT_EVENT, handleScreenshot);
+            window.removeEventListener(EXPORT_GLB_EVENT, handleExportGLB);
+        };
+    }, [gl, prefabName]);
+    return null;
+}
+export function triggerScreenshot() {
+    window.dispatchEvent(new Event(SCREENSHOT_EVENT));
+}
+export function triggerExportGLB() {
+    window.dispatchEvent(new Event(EXPORT_GLB_EVENT));
+}

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

@@ -19,6 +19,7 @@ export declare function GameInstanceProvider({ children, models, onSelect, regis
     selectedId?: string | null;
     editMode?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function useInstanceCheck(id: string): boolean;
 export declare const GameInstance: React.ForwardRefExoticComponent<{
     id: string;
     modelUrl: string;

package/dist/tools/prefabeditor/InstanceProvider.js

@@ -50,6 +50,9 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef,
             return prev.filter(i => i.id !== id);
         });
     }, []);
+    const hasInstance = useCallback((id) => {
+        return instances.some(i => i.id === id);
+    }, [instances]);
     // Flatten all model meshes once (models → flat mesh parts)
     // Note: Geometry is cloned with baked transforms for instancing
     const { flatMeshes, modelParts } = useMemo(() => {
@@ -97,7 +100,8 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef,
             removeInstance,
             instances,
             meshes: flatMeshes,
-            modelParts
+            modelParts,
+            hasInstance
         }, children: [children, Object.entries(grouped).map(([key, group]) => {
                 if (group.physicsType === 'none')
                     return null;
@@ -105,7 +109,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef,
                 const partCount = modelParts[modelKey] || 0;
                 if (partCount === 0)
                     return null;
-                return (_jsx(InstancedRigidGroup, { group: group, modelKey: modelKey, partCount: partCount, flatMeshes: flatMeshes }, key));
+                return (_jsx(InstancedRigidGroup, { group: group, modelKey: modelKey, partCount: partCount, flatMeshes: flatMeshes, onSelect: onSelect, editMode: editMode }, key));
             }), Object.entries(grouped).map(([key, group]) => {
                 if (group.physicsType !== 'none')
                     return null;
@@ -123,8 +127,9 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef,
             })] }));
 }
 // Render physics-enabled instances using InstancedRigidBodies
-function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes }) {
+function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes, onSelect, editMode }) {
     const meshRefs = useRef([]);
+    const rigidBodiesRef = useRef(null);
     const instances = useMemo(() => group.instances.map(inst => ({
         key: inst.id,
         position: inst.position,
@@ -151,14 +156,47 @@ function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes }) {
             });
             mesh.instanceMatrix.needsUpdate = true;
         });
+        // Update rigid body positions when instances change
+        if (rigidBodiesRef.current) {
+            try {
+                group.instances.forEach((inst, i) => {
+                    var _a;
+                    const body = (_a = rigidBodiesRef.current) === null || _a === void 0 ? void 0 : _a.at(i);
+                    if (body && body.setTranslation && body.setRotation) {
+                        pos.set(...inst.position);
+                        euler.set(...inst.rotation);
+                        quat.setFromEuler(euler);
+                        body.setTranslation(pos, false);
+                        body.setRotation(quat, false);
+                    }
+                });
+            }
+            catch (error) {
+                // Ignore errors when switching between instanced/non-instanced states
+                console.warn('Failed to update rigidbody positions:', error);
+            }
+        }
     }, [group.instances]);
     const colliders = group.physicsType === 'fixed' ? 'trimesh' : 'hull';
-    return (_jsx(InstancedRigidBodies, { instances: instances, colliders: colliders, type: group.physicsType, children: Array.from({ length: partCount }).map((_, i) => {
+    // Handle click on instanced mesh in edit mode
+    const handleClick = (e) => {
+        if (!editMode || !onSelect)
+            return;
+        e.stopPropagation();
+        // Get the instance index from the intersection
+        const instanceId = e.instanceId;
+        if (instanceId !== undefined && group.instances[instanceId]) {
+            onSelect(group.instances[instanceId].id);
+        }
+    };
+    // Add key to force remount when instance count changes significantly (helps with cleanup)
+    const rigidBodyKey = `rb_${modelKey}_${group.physicsType}_${group.instances.length}`;
+    return (_jsx(InstancedRigidBodies, { ref: rigidBodiesRef, instances: instances, colliders: colliders, type: group.physicsType, children: Array.from({ length: partCount }).map((_, i) => {
             const mesh = flatMeshes[`${modelKey}__${i}`];
             if (!mesh)
                 return null;
-            return (_jsx("instancedMesh", { ref: el => { meshRefs.current[i] = el; }, args: [mesh.geometry, mesh.material, group.instances.length], castShadow: true, receiveShadow: true, frustumCulled: false }, i));
-        }) }));
+            return (_jsx("instancedMesh", { ref: el => { meshRefs.current[i] = el; }, args: [mesh.geometry, mesh.material, group.instances.length], castShadow: true, receiveShadow: true, frustumCulled: false, onClick: editMode ? handleClick : undefined }, i));
+        }) }, rigidBodyKey));
 }
 // Render non-physics instances using Merged (instancing without rigid bodies)
 function NonPhysicsInstancedGroup({ modelKey, group, partCount, instancesMap, onSelect, registerRef, selectedId, editMode }) {
@@ -184,6 +222,12 @@ function InstanceGroupItem({ instance, InstanceComponents, onSelect, registerRef
             clickValid.current = false;
         }, children: InstanceComponents.map((Instance, i) => _jsx(Instance, {}, i)) }));
 }
+// Hook to check if an instance exists
+export function useInstanceCheck(id) {
+    var _a;
+    const ctx = useContext(GameInstanceContext);
+    return (_a = ctx === null || ctx === void 0 ? void 0 : ctx.hasInstance(id)) !== null && _a !== void 0 ? _a : false;
+}
 // GameInstance component: registers an instance for batch rendering (renders nothing itself)
 export const GameInstance = React.forwardRef(({ id, modelUrl, position, rotation, scale, physics = undefined, }, ref) => {
     const ctx = useContext(GameInstanceContext);
@@ -196,7 +240,7 @@ export const GameInstance = React.forwardRef(({ id, modelUrl, position, rotation
         rotation,
         scale,
         physics,
-    }), [id, modelUrl, position, rotation, scale, physics]);
+    }), [id, modelUrl, JSON.stringify(position), JSON.stringify(rotation), JSON.stringify(scale), JSON.stringify(physics)]);
     useEffect(() => {
         if (!addInstance || !removeInstance)
             return;

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

@@ -1,8 +1,16 @@
 import { Prefab } from "./types";
-declare const PrefabEditor: ({ basePath, initialPrefab, onPrefabChange, children }: {
+import { PrefabRootRef } from "./PrefabRoot";
+export interface PrefabEditorRef {
+    screenshot: () => void;
+    exportGLB: () => void;
+    prefab: Prefab;
+    setPrefab: (prefab: Prefab) => void;
+    rootRef: React.RefObject<PrefabRootRef | null>;
+}
+declare const PrefabEditor: import("react").ForwardRefExoticComponent<{
     basePath?: string;
     initialPrefab?: Prefab;
     onPrefabChange?: (prefab: Prefab) => void;
     children?: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+} & import("react").RefAttributes<PrefabEditorRef>>;
 export default PrefabEditor;

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -1,20 +1,13 @@
 "use client";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import GameCanvas from "../../shared/GameCanvas";
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
 import PrefabRoot from "./PrefabRoot";
 import { Physics } from "@react-three/rapier";
 import EditorUI from "./EditorUI";
 import { base, toolbar } from "./styles";
+import { EditorContext } from "./EditorContext";
+import { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter.js";
 const DEFAULT_PREFAB = {
     id: "prefab-default",
     name: "New Prefab",
@@ -28,15 +21,18 @@ const DEFAULT_PREFAB = {
         }
     }
 };
-const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }) => {
+const PrefabEditor = forwardRef(({ basePath, initialPrefab, onPrefabChange, children }, ref) => {
     const [editMode, setEditMode] = useState(true);
     const [loadedPrefab, setLoadedPrefab] = useState(initialPrefab !== null && initialPrefab !== void 0 ? initialPrefab : DEFAULT_PREFAB);
     const [selectedId, setSelectedId] = useState(null);
     const [transformMode, setTransformMode] = useState("translate");
+    const [snapResolution, setSnapResolution] = useState(0);
     const [history, setHistory] = useState([loadedPrefab]);
     const [historyIndex, setHistoryIndex] = useState(0);
     const throttleRef = useRef(null);
     const lastDataRef = useRef(JSON.stringify(loadedPrefab));
+    const prefabRootRef = useRef(null);
+    const canvasRef = useRef(null);
     useEffect(() => {
         if (initialPrefab)
             setLoadedPrefab(initialPrefab);
@@ -87,48 +83,59 @@ const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }) =>
         return () => { if (throttleRef.current)
             clearTimeout(throttleRef.current); };
     }, [loadedPrefab]);
-    const handleLoad = () => __awaiter(void 0, void 0, void 0, function* () {
-        const prefab = yield loadJson();
-        if (prefab) {
-            setLoadedPrefab(prefab);
-            onPrefabChange === null || onPrefabChange === void 0 ? void 0 : onPrefabChange(prefab);
-            setHistory([prefab]);
-            setHistoryIndex(0);
-            lastDataRef.current = JSON.stringify(prefab);
-        }
-    });
-    return _jsxs(_Fragment, { children: [_jsx(GameCanvas, { children: _jsxs(Physics, { paused: editMode, children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { data: loadedPrefab, editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, transformMode: transformMode, basePath: basePath }), children] }) }), _jsx("div", { style: toolbar.panel, children: _jsx("button", { style: base.btn, onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }) }), editMode && _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath, onSave: () => saveJson(loadedPrefab, "prefab"), onLoad: handleLoad, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 })] });
-};
-const saveJson = (data, filename) => {
-    const a = document.createElement('a');
-    a.href = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));
-    a.download = `${filename || 'prefab'}.json`;
-    a.click();
-};
-const loadJson = () => new Promise(resolve => {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = '.json,application/json';
-    input.onchange = e => {
+    const handleScreenshot = () => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        canvas.toBlob((blob) => {
+            if (!blob)
+                return;
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `${loadedPrefab.name || 'screenshot'}.png`;
+            a.click();
+            URL.revokeObjectURL(url);
+        });
+    };
+    const handleExportGLB = () => {
         var _a;
-        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (!file)
-            return resolve(undefined);
-        const reader = new FileReader();
-        reader.onload = e => {
-            var _a;
-            try {
-                const text = (_a = e.target) === null || _a === void 0 ? void 0 : _a.result;
-                if (typeof text === 'string')
-                    resolve(JSON.parse(text));
-            }
-            catch (err) {
-                console.error('Error parsing prefab JSON:', err);
-                resolve(undefined);
-            }
-        };
-        reader.readAsText(file);
+        const sceneRoot = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.root;
+        if (!sceneRoot)
+            return;
+        const exporter = new GLTFExporter();
+        exporter.parse(sceneRoot, (result) => {
+            const blob = new Blob([result], { type: 'application/octet-stream' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `${loadedPrefab.name || 'scene'}.glb`;
+            a.click();
+            URL.revokeObjectURL(url);
+        }, (error) => {
+            console.error('Error exporting GLB:', error);
+        }, { binary: true });
     };
-    input.click();
+    useEffect(() => {
+        const canvas = document.querySelector('canvas');
+        if (canvas)
+            canvasRef.current = canvas;
+    }, []);
+    useImperativeHandle(ref, () => ({
+        screenshot: handleScreenshot,
+        exportGLB: handleExportGLB,
+        prefab: loadedPrefab,
+        setPrefab: setLoadedPrefab,
+        rootRef: prefabRootRef
+    }), [loadedPrefab]);
+    return _jsxs(EditorContext.Provider, { value: {
+            transformMode,
+            setTransformMode,
+            snapResolution,
+            setSnapResolution,
+            onScreenshot: handleScreenshot,
+            onExportGLB: handleExportGLB
+        }, children: [_jsx(GameCanvas, { children: _jsxs(Physics, { debug: editMode, paused: editMode, children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { ref: prefabRootRef, data: loadedPrefab, editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, basePath: basePath }), children] }) }), _jsx("div", { style: toolbar.panel, children: _jsx("button", { style: base.btn, onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }) }), editMode && _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedId, basePath: basePath, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 })] });
 });
+PrefabEditor.displayName = "PrefabEditor";
 export default PrefabEditor;

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

@@ -1,19 +1,24 @@
 import { Group, Matrix4, Object3D, Texture } from "three";
+import { ThreeEvent } from "@react-three/fiber";
 import { Prefab, GameObject as GameObjectType } from "./types";
+export interface PrefabRootRef {
+    root: Group | null;
+}
 export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     editMode?: boolean;
     data: Prefab;
     onPrefabChange?: (data: Prefab) => void;
     selectedId?: string | null;
     onSelect?: (id: string | null) => void;
-    transformMode?: "translate" | "rotate" | "scale";
+    onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
     basePath?: string;
-} & import("react").RefAttributes<Group<import("three").Object3DEventMap>>>;
+} & import("react").RefAttributes<PrefabRootRef>>;
 export declare function GameObjectRenderer(props: RendererProps): import("react/jsx-runtime").JSX.Element | null;
 interface RendererProps {
     gameObject: GameObjectType;
     selectedId?: string | null;
     onSelect?: (id: string) => void;
+    onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
     registerRef: (id: string, obj: Object3D | null) => void;
     loadedModels: Record<string, Object3D>;
     loadedTextures: Record<string, Texture>;