react-three-game 0.0.37 → 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/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, { debug: editMode, 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,6 +1,9 @@
 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;
@@ -8,9 +11,8 @@ export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     selectedId?: string | null;
     onSelect?: (id: string | null) => void;
     onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
-    transformMode?: "translate" | "rotate" | "scale";
     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;

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -10,50 +10,50 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { MapControls, TransformControls, useHelper } from "@react-three/drei";
-import { forwardRef, useCallback, useEffect, useRef, useState, } from "react";
+import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { BoxHelper, Euler, Matrix4, Quaternion, SRGBColorSpace, TextureLoader, Vector3, } from "three";
 import { getComponent, registerComponent } from "./components/ComponentRegistry";
 import components from "./components";
 import { loadModel } from "../dragdrop/modelLoader";
 import { GameInstance, GameInstanceProvider, useInstanceCheck } from "./InstanceProvider";
 import { updateNode } from "./utils";
-/* -------------------------------------------------- */
-/* Setup */
-/* -------------------------------------------------- */
+import { EditorContext } from "./EditorContext";
 components.forEach(registerComponent);
 const IDENTITY = new Matrix4();
-/* -------------------------------------------------- */
-/* PrefabRoot */
-/* -------------------------------------------------- */
-export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, onClick, transformMode, basePath = "" }, ref) => {
+export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, onClick, basePath = "" }, ref) => {
+    var _a, _b;
+    // optional editor context
+    const editorContext = useContext(EditorContext);
+    const transformMode = (_a = editorContext === null || editorContext === void 0 ? void 0 : editorContext.transformMode) !== null && _a !== void 0 ? _a : "translate";
+    const snapResolution = (_b = editorContext === null || editorContext === void 0 ? void 0 : editorContext.snapResolution) !== null && _b !== void 0 ? _b : 0;
+    // prefab root state
     const [models, setModels] = useState({});
     const [textures, setTextures] = useState({});
     const loading = useRef(new Set());
     const objectRefs = useRef({});
     const [selectedObject, setSelectedObject] = useState(null);
+    const rootRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        root: rootRef.current
+    }), []);
     const registerRef = useCallback((id, obj) => {
         objectRefs.current[id] = obj;
         if (id === selectedId)
             setSelectedObject(obj);
     }, [selectedId]);
-    // Suppress TransformControls scene graph warnings during transitions
     useEffect(() => {
         const originalError = console.error;
         console.error = (...args) => {
-            if (typeof args[0] === 'string' && args[0].includes('TransformControls') && args[0].includes('scene graph')) {
-                return; // Suppress this specific error
-            }
+            if (typeof args[0] === 'string' && args[0].includes('TransformControls') && args[0].includes('scene graph'))
+                return;
             originalError.apply(console, args);
         };
-        return () => {
-            console.error = originalError;
-        };
+        return () => { console.error = originalError; };
     }, []);
     useEffect(() => {
         var _a;
         setSelectedObject(selectedId ? (_a = objectRefs.current[selectedId]) !== null && _a !== void 0 ? _a : null : null);
     }, [selectedId]);
-    /* ---------------- Transform writeback ---------------- */
     const onTransformChange = () => {
         if (!selectedId || !onPrefabChange)
             return;
@@ -69,7 +69,6 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
                 } }) })));
         onPrefabChange(Object.assign(Object.assign({}, data), { root }));
     };
-    /* ---------------- Asset loading ---------------- */
     useEffect(() => {
         const modelsToLoad = new Set();
         const texturesToLoad = new Set();
@@ -105,12 +104,8 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
             });
         });
     }, [data, models, textures]);
-    /* ---------------- Render ---------------- */
-    return (_jsxs("group", { ref: ref, children: [_jsx(GameInstanceProvider, { models: models, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: onClick, registerRef: registerRef, loadedModels: models, loadedTextures: textures, editMode: editMode, parentMatrix: IDENTITY }) }), editMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { makeDefault: true }), selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: onTransformChange }))] }))] }));
+    return (_jsxs("group", { ref: rootRef, children: [_jsx(GameInstanceProvider, { models: models, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: onClick, registerRef: registerRef, loadedModels: models, loadedTextures: textures, editMode: editMode, parentMatrix: IDENTITY }) }), editMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { makeDefault: true }), selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: onTransformChange, translationSnap: snapResolution > 0 ? snapResolution : undefined, rotationSnap: snapResolution > 0 ? snapResolution : undefined, scaleSnap: snapResolution > 0 ? snapResolution : undefined }, `transform-${snapResolution}`))] }))] }));
 });
-/* -------------------------------------------------- */
-/* Renderer Switch */
-/* -------------------------------------------------- */
 export function GameObjectRenderer(props) {
     var _a, _b, _c;
     const node = props.gameObject;
@@ -120,16 +115,13 @@ export function GameObjectRenderer(props) {
     const prevInstancedRef = useRef(undefined);
     const [isTransitioning, setIsTransitioning] = useState(false);
     useEffect(() => {
-        // Detect instanced mode change
         if (prevInstancedRef.current !== undefined && prevInstancedRef.current !== isInstanced) {
             setIsTransitioning(true);
-            // Wait for cleanup, then allow new mode to render
             const timer = setTimeout(() => setIsTransitioning(false), 100);
             return () => clearTimeout(timer);
         }
         prevInstancedRef.current = isInstanced;
     }, [isInstanced]);
-    // Don't render during transition to avoid physics conflicts
     if (isTransitioning)
         return null;
     const key = `${node.id}_${isInstanced ? 'instanced' : 'standard'}`;
@@ -137,9 +129,6 @@ export function GameObjectRenderer(props) {
         ? _jsx(InstancedNode, Object.assign({}, props), key)
         : _jsx(StandardNode, Object.assign({}, props), key);
 }
-/* -------------------------------------------------- */
-/* InstancedNode (terminal) */
-/* -------------------------------------------------- */
 function isPhysicsProps(v) {
     return (v === null || v === void 0 ? void 0 : v.type) === "fixed" || (v === null || v === void 0 ? void 0 : v.type) === "dynamic";
 }
@@ -147,7 +136,6 @@ function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, register
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const world = parentMatrix.clone().multiply(compose(gameObject));
     const { position: worldPosition, rotation: worldRotation, scale: worldScale } = decompose(world);
-    // Get local transform for proxy group (used by transform controls)
     const localTransform = getNodeTransformProps(gameObject);
     const physicsProps = isPhysicsProps((_b = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.physics) === null || _b === void 0 ? void 0 : _b.properties)
         ? (_d = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.physics) === null || _d === void 0 ? void 0 : _d.properties
@@ -161,8 +149,6 @@ function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, register
         }
     }, [gameObject.id, registerRef, editMode]);
     const modelUrl = (_g = (_f = (_e = gameObject.components) === null || _e === void 0 ? void 0 : _e.model) === null || _f === void 0 ? void 0 : _f.properties) === null || _g === void 0 ? void 0 : _g.filename;
-    // In edit mode, create a proxy group at the same position for transform controls
-    // The GameInstance still needs the actual position so it renders correctly
     if (editMode) {
         return (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: localTransform.position, rotation: localTransform.rotation, scale: localTransform.scale, onPointerDown: (e) => { e.stopPropagation(); clickValid.current = true; }, onPointerMove: () => { clickValid.current = false; }, onPointerUp: (e) => {
                         if (clickValid.current) {
@@ -175,18 +161,13 @@ function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, register
     }
     return (_jsx(GameInstance, { id: gameObject.id, modelUrl: (_k = (_j = (_h = gameObject.components) === null || _h === void 0 ? void 0 : _h.model) === null || _j === void 0 ? void 0 : _j.properties) === null || _k === void 0 ? void 0 : _k.filename, position: worldPosition, rotation: worldRotation, scale: worldScale, physics: physicsProps }));
 }
-/* -------------------------------------------------- */
-/* StandardNode */
-/* -------------------------------------------------- */
 function StandardNode({ gameObject, selectedId, onSelect, onClick, registerRef, loadedModels, loadedTextures, editMode, parentMatrix = IDENTITY, }) {
     var _a, _b, _c, _d, _e, _f;
     const groupRef = useRef(null);
     const helperRef = useRef(null);
     const clickValid = useRef(false);
     const isSelected = selectedId === gameObject.id;
-    // Check if this object still exists as an instance (to prevent physics overlap)
     const stillInstanced = useInstanceCheck(gameObject.id);
-    // Use helperRef for BoxHelper (shows actual content bounds at correct position)
     useHelper(editMode && isSelected ? helperRef : null, BoxHelper, "cyan");
     useEffect(() => {
         registerRef(gameObject.id, groupRef.current);
@@ -210,16 +191,13 @@ function StandardNode({ gameObject, selectedId, onSelect, onClick, registerRef,
         loadedModels[gameObject.components.model.properties.filename];
     const hasPhysics = physics && ready && !stillInstanced;
     const transform = getNodeTransformProps(gameObject);
-    // Prepare physics wrapper if needed
     const physicsDef = hasPhysics ? getComponent("Physics") : null;
     const isInstanced = (_e = (_d = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.model) === null || _d === void 0 ? void 0 : _d.properties) === null || _e === void 0 ? void 0 : _e.instanced;
     const physicsKey = `physics_${gameObject.id}_${isInstanced ? 'instanced' : 'standard'}`;
-    const inner = (_jsxs("group", { onPointerDown: editMode ? onDown : undefined, onPointerMove: editMode ? () => (clickValid.current = false) : undefined, onPointerUp: editMode ? onUp : undefined, children: [renderCoreNode(gameObject, { loadedModels, loadedTextures, editMode, registerRef }, parentMatrix), (_f = gameObject.children) === null || _f === void 0 ? void 0 : _f.map(child => (_jsx(GameObjectRenderer, { child, gameObject: child, selectedId: selectedId, onSelect: onSelect, onClick: onClick, registerRef: registerRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: world }, child.id)))] }));
-    // In edit mode, use proxy group pattern
+    const inner = (_jsxs("group", { onPointerDown: editMode ? onDown : undefined, onPointerMove: editMode ? () => (clickValid.current = false) : undefined, onPointerUp: editMode ? onUp : undefined, children: [renderCoreNode(gameObject, { loadedModels, loadedTextures, editMode, registerRef }, parentMatrix), (_f = gameObject.children) === null || _f === void 0 ? void 0 : _f.map(child => (_jsx(GameObjectRenderer, { gameObject: child, selectedId: selectedId, onSelect: onSelect, onClick: onClick, registerRef: registerRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: world }, child.id)))] }));
     if (editMode) {
         return (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), _jsx("group", { ref: helperRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }), hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, editMode: editMode, children: inner }, physicsKey)) : null] }));
     }
-    // In play mode, apply transform directly to content
     if (hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View)) {
         return (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, editMode: editMode, children: inner }, physicsKey));
     }
@@ -293,7 +271,6 @@ function renderCoreNode(gameObject, ctx, parentMatrix) {
             const def = getComponent(comp.type);
             if (!(def === null || def === void 0 ? void 0 : def.View))
                 return;
-            // crude but works with your existing component API
             if (def.View.toString().includes("children")) {
                 wrappers.push({ key, View: def.View, properties: comp.properties });
             }