react-three-game 0.0.37 → 0.0.39

package/dist/helpers/SoundManager.d.ts

@@ -0,0 +1,35 @@
+declare class SoundManager {
+    private static _instance;
+    context: AudioContext;
+    private buffers;
+    private masterGain;
+    private sfxGain;
+    private musicGain;
+    private constructor();
+    /** Singleton accessor */
+    static get instance(): SoundManager;
+    /** Required once after user gesture (browser) */
+    resume(): void;
+    /** Preload a sound from URL */
+    load(path: string, url: string): Promise<void>;
+    /** Play from already-loaded buffer (fails silently if not loaded) */
+    playSync(path: string, { volume, playbackRate, detune, pitch, }?: {
+        volume?: number;
+        playbackRate?: number;
+        detune?: number;
+        pitch?: number;
+    }): void;
+    /** Load and play SFX - accepts file path directly */
+    play(path: string, options?: {
+        volume?: number;
+        playbackRate?: number;
+        detune?: number;
+        pitch?: number;
+    }): Promise<void>;
+    /** Volume controls */
+    setMasterVolume(v: number): void;
+    setSfxVolume(v: number): void;
+    setMusicVolume(v: number): void;
+}
+export declare const sound: SoundManager;
+export {};

package/dist/helpers/SoundManager.js

@@ -0,0 +1,93 @@
+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());
+    });
+};
+class SoundManager {
+    constructor() {
+        this.buffers = new Map();
+        const AudioCtx = window.AudioContext || window.webkitAudioContext;
+        this.context = new AudioCtx();
+        this.masterGain = this.context.createGain();
+        this.sfxGain = this.context.createGain();
+        this.musicGain = this.context.createGain();
+        this.sfxGain.connect(this.masterGain);
+        this.musicGain.connect(this.masterGain);
+        this.masterGain.connect(this.context.destination);
+        this.masterGain.gain.value = 1;
+        this.sfxGain.gain.value = 1;
+        this.musicGain.gain.value = 1;
+    }
+    /** Singleton accessor */
+    static get instance() {
+        if (typeof window === 'undefined') {
+            // Return a dummy instance for SSR
+            return new Proxy({}, {
+                get: () => () => { }
+            });
+        }
+        if (!SoundManager._instance) {
+            SoundManager._instance = new SoundManager();
+        }
+        return SoundManager._instance;
+    }
+    /** Required once after user gesture (browser) */
+    resume() {
+        if (this.context.state !== "running") {
+            this.context.resume();
+        }
+    }
+    /** Preload a sound from URL */
+    load(path, url) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.buffers.has(path))
+                return;
+            const res = yield fetch(url);
+            const arrayBuffer = yield res.arrayBuffer();
+            const buffer = yield this.context.decodeAudioData(arrayBuffer);
+            this.buffers.set(path, buffer);
+        });
+    }
+    /** Play from already-loaded buffer (fails silently if not loaded) */
+    playSync(path, { volume = 1, playbackRate = 1, detune = 0, pitch = 1, } = {}) {
+        this.resume();
+        const buffer = this.buffers.get(path);
+        if (!buffer)
+            return;
+        const src = this.context.createBufferSource();
+        const gain = this.context.createGain();
+        src.buffer = buffer;
+        src.playbackRate.value = playbackRate * pitch;
+        src.detune.value = detune;
+        gain.gain.value = volume;
+        src.connect(gain);
+        gain.connect(this.sfxGain);
+        src.start();
+    }
+    /** Load and play SFX - accepts file path directly */
+    play(path, options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Auto-load from path if not already loaded
+            if (!this.buffers.has(path)) {
+                yield this.load(path, path);
+            }
+            this.playSync(path, options);
+        });
+    }
+    /** Volume controls */
+    setMasterVolume(v) {
+        this.masterGain.gain.value = v;
+    }
+    setSfxVolume(v) {
+        this.sfxGain.gain.value = v;
+    }
+    setMusicVolume(v) {
+        this.musicGain.gain.value = v;
+    }
+}
+SoundManager._instance = null;
+export const sound = SoundManager.instance;

package/dist/index.d.ts

@@ -1,11 +1,14 @@
 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 { sound as soundManager } from './helpers/SoundManager';
 export * from './helpers';
-export type { Prefab, GameObject, ComponentData } from './tools/prefabeditor/types';

package/dist/index.js

@@ -1,13 +1,14 @@
-// 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';
+export { sound as soundManager } from './helpers/SoundManager';
 // Helpers
 export * from './helpers';

package/dist/shared/GameCanvas.d.ts

@@ -1,6 +1,9 @@
+import { CanvasProps } from "@react-three/fiber";
 import { WebGPURendererParameters } from "three/src/renderers/webgpu/WebGPURenderer.Nodes.js";
-export default function GameCanvas({ loader, children, ...props }: {
+interface GameCanvasProps extends Omit<CanvasProps, 'children'> {
     loader?: boolean;
     children: React.ReactNode;
-    props?: WebGPURendererParameters;
-}): import("react/jsx-runtime").JSX.Element;
+    glConfig?: WebGPURendererParameters;
+}
+export default function GameCanvas({ loader, children, glConfig, ...props }: GameCanvasProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/GameCanvas.js

@@ -32,17 +32,17 @@ extend({
     SpriteNodeMaterial: SpriteNodeMaterial,
 });
 export default function GameCanvas(_a) {
-    var { loader = false, children } = _a, props = __rest(_a, ["loader", "children"]);
+    var { loader = false, children, glConfig } = _a, props = __rest(_a, ["loader", "children", "glConfig"]);
     const [frameloop, setFrameloop] = useState("never");
-    return _jsx(_Fragment, { children: _jsxs(Canvas, { style: { touchAction: 'none' }, shadows: { type: PCFShadowMap, }, frameloop: frameloop, gl: (_a) => __awaiter(this, [_a], void 0, function* ({ canvas }) {
+    return _jsx(_Fragment, { children: _jsxs(Canvas, Object.assign({ style: { touchAction: 'none' }, shadows: { type: PCFShadowMap, }, frameloop: frameloop, gl: (_a) => __awaiter(this, [_a], void 0, function* ({ canvas }) {
                 const renderer = new WebGPURenderer(Object.assign({ canvas: canvas, 
                     // @ts-expect-error futuristic
-                    shadowMap: true, antialias: true }, props));
+                    shadowMap: true, antialias: true }, glConfig));
                 yield renderer.init().then(() => {
                     setFrameloop("always");
                 });
                 return renderer;
             }), camera: {
                 position: [0, 1, 5],
-            }, children: [_jsx(Suspense, { children: children }), loader ? _jsx(Loader, {}) : null] }) });
+            } }, props, { children: [_jsx(Suspense, { children: children }), loader ? _jsx(Loader, {}) : null] })) });
 }

package/dist/tools/loading/GameWithLoader.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+export default function GameWithLoader({ children }: {
+    children: ReactElement<{
+        onCanvasReady?: () => void;
+    }>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/tools/loading/GameWithLoader.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useState } from "react";
+import LoadingSpinner from "../../sketches/loading/loading";
+export default function GameWithLoader({ children }) {
+    const [isCanvasReady, setIsCanvasReady] = useState(false);
+    return (_jsxs(_Fragment, { children: [!isCanvasReady && _jsx(LoadingSpinner, {}), cloneElement(children, { onCanvasReady: () => setIsCanvasReady(true) })] }));
+}

package/dist/tools/loading/loading.d.ts

@@ -0,0 +1,2 @@
+declare const LoadingSpinner: () => import("react/jsx-runtime").JSX.Element;
+export default LoadingSpinner;

package/dist/tools/loading/loading.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+const lines = [
+    "$ initializing...",
+    "✓ loading scene",
+    "✓ ready"
+];
+const LoadingSpinner = () => {
+    const [index, setIndex] = useState(0);
+    useEffect(() => {
+        if (index < lines.length) {
+            const timer = setTimeout(() => setIndex(index + 1), 300);
+            return () => clearTimeout(timer);
+        }
+    }, [index]);
+    return (_jsxs("div", { className: "terminal-loading", children: [lines.slice(0, index).map((line, i) => (_jsx("div", { children: line }, i))), _jsx("div", { className: "cursor", children: "\u2588" }), _jsx("style", { jsx: true, children: `
+                .terminal-loading {
+                    position: fixed;
+                    inset: 0;
+                    z-index: 50;
+                    background: #0a0a0a;
+                    color: #00ff00;
+                    font-family: monospace;
+                    padding: 2rem;
+                    font-size: 14px;
+                }
+
+                .cursor {
+                    animation: blink 1s infinite;
+                }
+
+                @keyframes blink {
+                    50% { opacity: 0; }
+                }
+            ` })] }));
+};
+export default LoadingSpinner;

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;
@@ -47,23 +49,23 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
         if (!newAvailable.includes(addType))
             setAddType(newAvailable[0] || "");
     }, [Object.keys(node.components || {}).join(',')]);
-    return _jsxs("div", { style: inspector.content, className: "prefab-scroll", children: [_jsxs("div", { style: base.section, children: [_jsx("div", { style: base.label, children: "Node ID" }), _jsx("input", { style: base.input, value: (_a = node.name) !== null && _a !== void 0 ? _a : "", onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { name: e.target.value }))) })] }), _jsxs("div", { style: base.section, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }, children: [_jsx("div", { style: base.label, children: "Components" }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), base.btnDanger), onClick: deleteNode, children: "Delete Node" })] }), node.components && Object.entries(node.components).map(([key, comp]) => {
+    return _jsxs("div", { style: inspector.content, className: "prefab-scroll", children: [_jsxs("div", { style: base.section, children: [_jsxs("div", { style: { display: "flex", marginBottom: 8, alignItems: 'center', gap: 8 }, children: [_jsx("div", { style: { fontSize: 10, color: '#888', wordBreak: 'break-all', border: '1px solid rgba(255,255,255,0.1)', padding: '2px 4px', borderRadius: 4, flex: 1 }, children: node.id }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), base.btnDanger), title: "Delete Node", onClick: deleteNode, children: "\u274C" })] }), _jsx("input", { style: base.input, value: (_a = node.name) !== null && _a !== void 0 ? _a : "", placeholder: 'Node name', onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { name: e.target.value }))) })] }), _jsxs("div", { style: base.section, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }, children: _jsx("div", { style: base.label, children: "Components" }) }), node.components && Object.entries(node.components).map(([key, comp]) => {
                         if (!comp)
                             return null;
                         const def = ALL_COMPONENTS[comp.type];
                         if (!def)
                             return _jsxs("div", { style: { color: '#ff8888', fontSize: 11 }, children: ["Unknown: ", comp.type] }, key);
-                        return (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }, children: [_jsx("div", { style: { fontSize: 11, fontWeight: 500 }, children: key }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px' }), onClick: () => updateNode(n => {
+                        return (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }, children: [_jsx("div", { style: { fontSize: 11, fontWeight: 500 }, children: key }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px' }), title: "Remove Component", onClick: () => updateNode(n => {
                                                 const _a = n.components || {}, _b = key, _ = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
                                                 return Object.assign(Object.assign({}, n), { components: rest });
-                                            }), children: "\u2715" })] }), def.Editor && (_jsx(def.Editor, { component: comp, onUpdate: (newProps) => updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: Object.assign(Object.assign({}, comp), { properties: Object.assign(Object.assign({}, comp.properties), newProps) }) }) }))), basePath: basePath, transformMode: transformMode, setTransformMode: setTransformMode }))] }, key));
-                    })] }), available.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: base.label, children: "Add Component" }), _jsxs("div", { style: base.row, children: [_jsx("select", { style: Object.assign(Object.assign({}, base.input), { flex: 1 }), value: addType, onChange: e => setAddType(e.target.value), children: available.map(k => _jsx("option", { value: k, children: k }, k)) }), _jsx("button", { style: base.btn, disabled: !addType, onClick: () => {
-                                    if (!addType)
-                                        return;
-                                    const def = ALL_COMPONENTS[addType];
-                                    if (def) {
-                                        updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [addType.toLowerCase()]: { type: def.name, properties: def.defaultProperties } }) })));
-                                    }
-                                }, children: "+" })] })] }))] });
+                                            }), children: "\u2715" })] }), def.Editor && (_jsx(def.Editor, { component: comp, node: node, onUpdate: (newProps) => updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: Object.assign(Object.assign({}, comp), { properties: Object.assign(Object.assign({}, comp.properties), newProps) }) }) }))), basePath: basePath, transformMode: transformMode, setTransformMode: setTransformMode }))] }, key));
+                    })] }), available.length > 0 && (_jsx("div", { children: _jsxs("div", { style: base.row, children: [_jsx("select", { style: Object.assign(Object.assign({}, base.input), { flex: 1 }), value: addType, onChange: e => setAddType(e.target.value), children: available.map(k => _jsx("option", { value: k, children: k }, k)) }), _jsx("button", { style: base.btn, disabled: !addType, onClick: () => {
+                                if (!addType)
+                                    return;
+                                const def = ALL_COMPONENTS[addType];
+                                if (def) {
+                                    updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [addType.toLowerCase()]: { type: def.name, properties: def.defaultProperties } }) })));
+                                }
+                            }, title: "Add Component", children: "+" })] }) }))] });
 }
 export default EditorUI;

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;