react-three-game 0.0.36 → 0.0.38

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 } from "./InstanceProvider";
+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, 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,45 +104,70 @@ 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, 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;
     if (!node || node.hidden || node.disabled)
         return null;
-    return ((_c = (_b = (_a = node.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.instanced)
-        ? _jsx(InstancedNode, Object.assign({}, props))
-        : _jsx(StandardNode, Object.assign({}, props));
+    const isInstanced = (_c = (_b = (_a = node.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.instanced;
+    const prevInstancedRef = useRef(undefined);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    useEffect(() => {
+        if (prevInstancedRef.current !== undefined && prevInstancedRef.current !== isInstanced) {
+            setIsTransitioning(true);
+            const timer = setTimeout(() => setIsTransitioning(false), 100);
+            return () => clearTimeout(timer);
+        }
+        prevInstancedRef.current = isInstanced;
+    }, [isInstanced]);
+    if (isTransitioning)
+        return null;
+    const key = `${node.id}_${isInstanced ? 'instanced' : 'standard'}`;
+    return isInstanced
+        ? _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";
 }
-function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, registerRef, selectedId: _selectedId, onSelect, onClick }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const world = parentMatrix.clone().multiply(compose(gameObject));
-    const { position, rotation, scale } = decompose(world);
+    const { position: worldPosition, rotation: worldRotation, scale: worldScale } = decompose(world);
+    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
         : undefined;
-    return (_jsx(GameInstance, { id: gameObject.id, 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, position: position, rotation: rotation, scale: scale, physics: editMode ? undefined : physicsProps }));
+    const groupRef = useRef(null);
+    const clickValid = useRef(false);
+    useEffect(() => {
+        if (editMode) {
+            registerRef(gameObject.id, groupRef.current);
+            return () => registerRef(gameObject.id, null);
+        }
+    }, [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;
+    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) {
+                            e.stopPropagation();
+                            onSelect === null || onSelect === void 0 ? void 0 : onSelect(gameObject.id);
+                            onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
+                        }
+                        clickValid.current = false;
+                    }, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), _jsx(GameInstance, { id: gameObject.id, modelUrl: modelUrl, position: worldPosition, rotation: worldRotation, scale: worldScale, physics: physicsProps })] }));
+    }
+    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, registerRef, loadedModels, loadedTextures, editMode, parentMatrix = IDENTITY, }) {
-    var _a, _b, _c;
+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;
-    const helperRef = groupRef;
+    const stillInstanced = useInstanceCheck(gameObject.id);
     useHelper(editMode && isSelected ? helperRef : null, BoxHelper, "cyan");
     useEffect(() => {
         registerRef(gameObject.id, groupRef.current);
@@ -158,20 +182,26 @@ function StandardNode({ gameObject, selectedId, onSelect, registerRef, loadedMod
         if (clickValid.current) {
             e.stopPropagation();
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(gameObject.id);
+            onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
         }
         clickValid.current = false;
     };
-    const inner = (_jsxs("group", Object.assign({ ref: groupRef }, getNodeTransformProps(gameObject), { onPointerDown: onDown, onPointerMove: () => (clickValid.current = false), onPointerUp: onUp, children: [renderCoreNode(gameObject, { loadedModels, loadedTextures, editMode, registerRef }, parentMatrix), (_a = gameObject.children) === null || _a === void 0 ? void 0 : _a.map(child => (_jsx(GameObjectRenderer, { child, gameObject: child, selectedId: selectedId, onSelect: onSelect, registerRef: registerRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: world }, child.id)))] })));
-    const physics = (_b = gameObject.components) === null || _b === void 0 ? void 0 : _b.physics;
-    const ready = !((_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.model) ||
+    const physics = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.physics;
+    const ready = !((_b = gameObject.components) === null || _b === void 0 ? void 0 : _b.model) ||
         loadedModels[gameObject.components.model.properties.filename];
-    if (physics && !editMode && ready) {
-        const def = getComponent("Physics");
-        return (def === null || def === void 0 ? void 0 : def.View)
-            ? _jsx(def.View, { properties: physics.properties, children: inner })
-            : inner;
+    const hasPhysics = physics && ready && !stillInstanced;
+    const transform = getNodeTransformProps(gameObject);
+    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, { 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] }));
+    }
+    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));
     }
-    return inner;
+    return (_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, onPointerDown: onDown, onPointerMove: () => (clickValid.current = false), onPointerUp: onUp, children: inner }));
 }
 function walk(node, fn) {
     var _a;
@@ -241,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 });
             }

package/dist/tools/prefabeditor/components/Input.d.ts

@@ -11,9 +11,10 @@ export declare function Input({ value, onChange, step, min, max, style }: InputP
 export declare function Label({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function Vector3Input({ label, value, onChange }: {
+export declare function Vector3Input({ label, value, onChange, snap }: {
     label: string;
     value: [number, number, number];
     onChange: (v: [number, number, number]) => void;
+    snap?: number;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -27,7 +27,12 @@ export function Input({ value, onChange, step, min, max, style }) {
 export function Label({ children }) {
     return _jsx("label", { style: styles.label, children: children });
 }
-export function Vector3Input({ label, value, onChange }) {
+export function Vector3Input({ label, value, onChange, snap }) {
+    const snapValue = (num) => {
+        if (!snap)
+            return num;
+        return Math.round(num / snap) * snap;
+    };
     const [draft, setDraft] = useState(() => value.map(v => v.toString()));
     // Sync external changes (gizmo, undo, etc.)
     useEffect(() => {
@@ -38,7 +43,7 @@ export function Vector3Input({ label, value, onChange }) {
         const num = parseFloat(draft[index]);
         if (Number.isFinite(num)) {
             const next = [...value];
-            next[index] = num;
+            next[index] = snapValue(num);
             onChange(next);
         }
     };
@@ -62,7 +67,8 @@ export function Vector3Input({ label, value, onChange }) {
             speed *= 0.1; // fine
         if (e.altKey)
             speed *= 5; // coarse
-        const nextValue = startValue + dx * speed;
+        const rawValue = startValue + dx * speed;
+        const nextValue = snapValue(rawValue);
         const next = [...value];
         next[index] = nextValue;
         setDraft(d => {

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

@@ -1,4 +1,4 @@
-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 { RigidBody } from "@react-three/rapier";
 import { Label } from "./Input";
 function PhysicsComponentEditor({ component, onUpdate }) {
@@ -15,13 +15,14 @@ function PhysicsComponentEditor({ component, onUpdate }) {
     };
     return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Type" }), _jsxs("select", { style: selectStyle, value: type, onChange: e => onUpdate({ type: e.target.value }), children: [_jsx("option", { value: "dynamic", children: "Dynamic" }), _jsx("option", { value: "fixed", children: "Fixed" })] })] }), _jsxs("div", { children: [_jsx(Label, { children: "Collider" }), _jsxs("select", { style: selectStyle, value: collider, onChange: e => onUpdate({ collider: e.target.value }), children: [_jsx("option", { value: "hull", children: "Hull (convex)" }), _jsx("option", { value: "trimesh", children: "Trimesh (exact)" }), _jsx("option", { value: "cuboid", children: "Cuboid (box)" }), _jsx("option", { value: "ball", children: "Ball (sphere)" })] })] })] }));
 }
-function PhysicsComponentView({ properties, editMode, children }) {
-    if (editMode)
-        return _jsx(_Fragment, { children: children });
+function PhysicsComponentView({ properties, children, position, rotation, scale, editMode }) {
     const colliders = properties.collider || (properties.type === 'fixed' ? 'trimesh' : 'hull');
-    // Remount RigidBody when collider/type changes to avoid Rapier hook dependency warnings
-    const rbKey = `${properties.type || 'dynamic'}_${colliders}`;
-    return (_jsx(RigidBody, { type: properties.type, colliders: colliders, children: children }, rbKey));
+    // In edit mode, include position/rotation in key to force remount when transform changes
+    // This ensures the RigidBody debug visualization updates even when physics is paused
+    const rbKey = editMode
+        ? `${properties.type || 'dynamic'}_${colliders}_${position === null || position === void 0 ? void 0 : position.join(',')}_${rotation === null || rotation === void 0 ? void 0 : rotation.join(',')}`
+        : `${properties.type || 'dynamic'}_${colliders}`;
+    return (_jsx(RigidBody, { type: properties.type, colliders: colliders, position: position, rotation: rotation, scale: scale, children: children }, rbKey));
 }
 const PhysicsComponent = {
     name: 'Physics',

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

@@ -1,5 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Vector3Input, Label } from "./Input";
+import { useEditorContext } from "../EditorContext";
 const buttonStyle = {
     padding: '2px 6px',
     background: 'transparent',
@@ -11,7 +12,8 @@ const buttonStyle = {
     flex: 1,
 };
 function TransformComponentEditor({ component, onUpdate, transformMode, setTransformMode }) {
-    return _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [transformMode && setTransformMode && (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsx(Label, { children: "Transform Mode" }), _jsx("div", { style: { display: 'flex', gap: 6 }, children: ["translate", "rotate", "scale"].map(mode => {
+    const { snapResolution, setSnapResolution } = useEditorContext();
+    return _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [transformMode && setTransformMode && (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsxs(Label, { children: ["Transform Mode ", snapResolution > 0 && `(Snap: ${snapResolution})`] }), _jsx("div", { style: { display: 'flex', gap: 6 }, children: ["translate", "rotate", "scale"].map(mode => {
                             const isActive = transformMode === mode;
                             return (_jsx("button", { onClick: () => setTransformMode(mode), style: Object.assign(Object.assign({}, buttonStyle), { background: isActive ? 'rgba(255,255,255,0.10)' : 'transparent' }), onPointerEnter: (e) => {
                                     if (!isActive)
@@ -20,7 +22,13 @@ function TransformComponentEditor({ component, onUpdate, transformMode, setTrans
                                     if (!isActive)
                                         e.currentTarget.style.background = 'transparent';
                                 }, children: mode }, mode));
-                        }) })] })), _jsx(Vector3Input, { label: "Position", value: component.properties.position, onChange: v => onUpdate({ position: v }) }), _jsx(Vector3Input, { label: "Rotation", value: component.properties.rotation, onChange: v => onUpdate({ rotation: v }) }), _jsx(Vector3Input, { label: "Scale", value: component.properties.scale, onChange: v => onUpdate({ scale: v }) })] });
+                        }) }), _jsx("div", { style: { marginTop: 6 }, children: _jsxs("button", { onClick: () => setSnapResolution(snapResolution > 0 ? 0 : 0.1), style: Object.assign(Object.assign({}, buttonStyle), { background: snapResolution > 0 ? 'rgba(255,255,255,0.10)' : 'transparent', width: '100%' }), onPointerEnter: (e) => {
+                                if (snapResolution === 0)
+                                    e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+                            }, onPointerLeave: (e) => {
+                                if (snapResolution === 0)
+                                    e.currentTarget.style.background = 'transparent';
+                            }, children: ["Snap: ", snapResolution > 0 ? `ON (${snapResolution})` : 'OFF'] }) })] })), _jsx(Vector3Input, { label: "Position", value: component.properties.position, onChange: v => onUpdate({ position: v }), snap: snapResolution }), _jsx(Vector3Input, { label: "Rotation", value: component.properties.rotation, onChange: v => onUpdate({ rotation: v }), snap: snapResolution }), _jsx(Vector3Input, { label: "Scale", value: component.properties.scale, onChange: v => onUpdate({ scale: v }), snap: snapResolution })] });
 }
 const TransformComponent = {
     name: 'Transform',

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

@@ -1,4 +1,8 @@
-import { GameObject } from "./types";
+import { GameObject, Prefab } from "./types";
+/** Save a prefab as JSON file */
+export declare function saveJson(data: Prefab, filename: string): void;
+/** Load a prefab from JSON file */
+export declare function loadJson(): Promise<Prefab | undefined>;
 /** Find a node by ID in the tree */
 export declare function findNode(root: GameObject, id: string): GameObject | null;
 /** Find the parent of a node by ID */
@@ -15,6 +19,8 @@ export declare function updateNode(root: GameObject, id: string, update: (node:
 export declare function deleteNode(root: GameObject, id: string): GameObject | null;
 /** Deep clone a node with new IDs */
 export declare function cloneNode(node: GameObject): GameObject;
+/** Recursively update all IDs in a node tree */
+export declare function regenerateIds(node: GameObject): GameObject;
 /** Get component data from a node */
 export declare function getComponent<T = any>(node: GameObject, type: string): T | undefined;
 export declare function updateNodeById(root: GameObject, id: string, updater: (node: GameObject) => GameObject): GameObject;

package/dist/tools/prefabeditor/utils.js

@@ -1,3 +1,39 @@
+/** Save a prefab as JSON file */
+export function 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();
+}
+/** Load a prefab from JSON file */
+export function loadJson() {
+    return new Promise(resolve => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.json,application/json';
+        input.onchange = e => {
+            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);
+        };
+        input.click();
+    });
+}
 /** Find a node by ID in the tree */
 export function findNode(root, id) {
     var _a;
@@ -64,6 +100,11 @@ export function cloneNode(node) {
     var _a, _b;
     return Object.assign(Object.assign({}, node), { id: crypto.randomUUID(), name: `${(_a = node.name) !== null && _a !== void 0 ? _a : "Node"} Copy`, children: (_b = node.children) === null || _b === void 0 ? void 0 : _b.map(cloneNode) });
 }
+/** Recursively update all IDs in a node tree */
+export function regenerateIds(node) {
+    var _a;
+    return Object.assign(Object.assign({}, node), { id: crypto.randomUUID(), children: (_a = node.children) === null || _a === void 0 ? void 0 : _a.map(regenerateIds) });
+}
 /** Get component data from a node */
 export function getComponent(node, type) {
     var _a;

package/package.json

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

package/src/index.ts

@@ -1,7 +1,18 @@
-// Components
+// Core Components
 export { default as GameCanvas } from './shared/GameCanvas';
+
+// Prefab Editor
 export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
+export type { PrefabEditorRef } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
+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';
+
+// Asset Tools
 export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
 export {
   TextureListViewer,
@@ -10,16 +21,5 @@ export {
   SharedCanvas,
 } from './tools/assetviewer/page';
 
-// Component Registry
-export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
-export type { Component } from './tools/prefabeditor/components/ComponentRegistry';
-
-// Editor Styles & Utils
-export * as editorStyles from './tools/prefabeditor/styles';
-export * from './tools/prefabeditor/utils';
-
 // Helpers
 export * from './helpers';
-
-// Types
-export type { Prefab, GameObject, ComponentData } from './tools/prefabeditor/types';

package/src/tools/prefabeditor/EditorContext.tsx

@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react";
+
+interface EditorContextType {
+    transformMode: "translate" | "rotate" | "scale";
+    setTransformMode: (mode: "translate" | "rotate" | "scale") => void;
+    snapResolution: number;
+    setSnapResolution: (resolution: number) => void;
+    onScreenshot?: () => void;
+    onExportGLB?: () => void;
+}
+
+export const EditorContext = createContext<EditorContextType | null>(null);
+
+export function useEditorContext() {
+    const context = useContext(EditorContext);
+    if (!context) {
+        throw new Error("useEditorContext must be used within EditorContext.Provider");
+    }
+    return context;
+}

package/src/tools/prefabeditor/EditorTree.tsx

@@ -2,15 +2,14 @@ import { Dispatch, SetStateAction, useState, MouseEvent } from 'react';
 import { Prefab, GameObject } from "./types";
 import { getComponent } from './components/ComponentRegistry';
 import { base, tree, menu } from './styles';
-import { findNode, findParent, deleteNode, cloneNode, updateNodeById } from './utils';
+import { findNode, findParent, deleteNode, cloneNode, updateNodeById, loadJson, saveJson, regenerateIds } from './utils';
+import { useEditorContext } from './EditorContext';
 
 export default function EditorTree({
     prefabData,
     setPrefabData,
     selectedId,
     setSelectedId,
-    onSave,
-    onLoad,
     onUndo,
     onRedo,
     canUndo,
@@ -20,8 +19,6 @@ export default function EditorTree({
     setPrefabData?: Dispatch<SetStateAction<Prefab>>;
     selectedId: string | null;
     setSelectedId: Dispatch<SetStateAction<string | null>>;
-    onSave?: () => void;
-    onLoad?: () => void;
     onUndo?: () => void;
     onRedo?: () => void;
     canUndo?: boolean;
@@ -212,23 +209,11 @@ export default function EditorTree({
                                     ⋮
                                 </button>
                                 {fileMenuOpen && (
-                                    <div
-                                        style={{ ...menu.container, top: 28, right: 0 }}
-                                        onClick={(e) => e.stopPropagation()}
-                                    >
-                                        <button
-                                            style={menu.item}
-                                            onClick={() => { onLoad?.(); setFileMenuOpen(false); }}
-                                        >
-                                            📥 Load
-                                        </button>
-                                        <button
-                                            style={menu.item}
-                                            onClick={() => { onSave?.(); setFileMenuOpen(false); }}
-                                        >
-                                            💾 Save
-                                        </button>
-                                    </div>
+                                    <FileMenu
+                                        prefabData={prefabData}
+                                        setPrefabData={setPrefabData}
+                                        onClose={() => setFileMenuOpen(false)}
+                                    />
                                 )}
                             </div>
                         </div>
@@ -261,3 +246,79 @@ export default function EditorTree({
         </>
     );
 }
+
+function FileMenu({
+    prefabData,
+    setPrefabData,
+    onClose
+}: {
+    prefabData: Prefab;
+    setPrefabData: Dispatch<SetStateAction<Prefab>>;
+    onClose: () => void;
+}) {
+    const { onScreenshot, onExportGLB } = useEditorContext();
+
+    const handleLoad = async () => {
+        const loadedPrefab = await loadJson();
+        if (!loadedPrefab) return;
+        setPrefabData(loadedPrefab);
+        onClose();
+    };
+
+    const handleSave = () => {
+        saveJson(prefabData, "prefab");
+        onClose();
+    };
+
+    const handleLoadIntoScene = async () => {
+        const loadedPrefab = await loadJson();
+        if (!loadedPrefab) return;
+
+        setPrefabData(prev => ({
+            ...prev,
+            root: updateNodeById(prev.root, prev.root.id, root => ({
+                ...root,
+                children: [...(root.children ?? []), regenerateIds(loadedPrefab.root)]
+            }))
+        }));
+        onClose();
+    };
+
+    return (
+        <div
+            style={{ ...menu.container, top: 28, right: 0 }}
+            onClick={(e) => e.stopPropagation()}
+        >
+            <button
+                style={menu.item}
+                onClick={handleLoad}
+            >
+                📥 Load Prefab JSON
+            </button>
+            <button
+                style={menu.item}
+                onClick={handleSave}
+            >
+                💾 Save Prefab JSON
+            </button>
+            <button
+                style={menu.item}
+                onClick={handleLoadIntoScene}
+            >
+                📂 Load into Scene
+            </button>
+            <button
+                style={menu.item}
+                onClick={() => { onScreenshot?.(); onClose(); }}
+            >
+                📸 Screenshot
+            </button>
+            <button
+                style={menu.item}
+                onClick={() => { onExportGLB?.(); onClose(); }}
+            >
+                📦 Export GLB
+            </button>
+        </div>
+    );
+}