react-three-game 0.0.1 → 0.0.3

package/dist/tools/prefabeditor/EditorUI.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import EditorTree from './EditorTree';
+import { getAllComponents } from './components/ComponentRegistry';
+function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transformMode, setTransformMode }) {
+    const [isInspectorCollapsed, setIsInspectorCollapsed] = useState(false);
+    const updateNode = (updater) => {
+        if (!prefabData || !setPrefabData || !selectedId)
+            return;
+        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updatePrefabNode(prev.root, selectedId, updater) })));
+    };
+    const deleteNode = () => {
+        if (!prefabData || !setPrefabData || !selectedId)
+            return;
+        if (selectedId === prefabData.root.id) {
+            alert("Cannot delete root node");
+            return;
+        }
+        setPrefabData(prev => {
+            const newRoot = deletePrefabNode(prev.root, selectedId);
+            return Object.assign(Object.assign({}, prev), { root: newRoot });
+        });
+        setSelectedId(null);
+    };
+    const selectedNode = selectedId && prefabData ? findNode(prefabData.root, selectedId) : null;
+    // if (!selectedNode) return null;
+    return _jsxs(_Fragment, { children: [_jsxs("div", { style: { position: 'absolute', top: "0.5rem", right: "0.5rem", zIndex: 20, backgroundColor: "rgba(0,0,0,0.7)", backdropFilter: "blur(4px)", color: "white", border: "1px solid rgba(0,255,255,0.3)" }, children: [_jsxs("div", { className: "px-1.5 py-1 font-mono text-[10px] bg-cyan-500/10 border-b border-cyan-500/30 sticky top-0 uppercase tracking-wider text-cyan-400/80 cursor-pointer hover:bg-cyan-500/20 flex items-center justify-between", onClick: () => setIsInspectorCollapsed(!isInspectorCollapsed), children: [_jsx("span", { children: "Inspector" }), _jsx("span", { className: "text-[8px]", children: isInspectorCollapsed ? '◀' : '▶' })] }), !isInspectorCollapsed && selectedNode && (_jsx(NodeInspector, { node: selectedNode, updateNode: updateNode, deleteNode: deleteNode, transformMode: transformMode, setTransformMode: setTransformMode }))] }), _jsx("div", { style: { position: 'absolute', top: "0.5rem", left: "0.5rem", zIndex: 20 }, children: _jsx(EditorTree, { prefabData: prefabData, setPrefabData: setPrefabData, selectedId: selectedId, setSelectedId: setSelectedId }) })] });
+}
+function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransformMode }) {
+    const ALL_COMPONENTS = getAllComponents();
+    const allComponentKeys = Object.keys(ALL_COMPONENTS);
+    const [addComponentType, setAddComponentType] = useState(allComponentKeys[0]);
+    const componentKeys = Object.keys(node.components || {}).join(',');
+    useEffect(() => {
+        // Components stored on nodes use lowercase keys (e.g. 'geometry'),
+        // while the registry keys are the component names (e.g. 'Geometry').
+        const available = allComponentKeys.filter(k => { var _a; return !((_a = node.components) === null || _a === void 0 ? void 0 : _a[k.toLowerCase()]); });
+        if (!available.includes(addComponentType)) {
+            setAddComponentType(available[0] || "");
+        }
+    }, [componentKeys, addComponentType, node.components, allComponentKeys]);
+    return _jsxs("div", { className: "flex flex-col gap-1 text-[11px] max-w-[250px] max-h-[80vh] overflow-y-auto", children: [_jsx("div", { className: "border-b border-cyan-500/20 pb-1 px-1.5 pt-1", children: _jsx("input", { className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[11px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: node.id, onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { id: e.target.value }))) }) }), _jsxs("div", { className: "flex justify-between items-center px-1.5 py-0.5 border-b border-cyan-500/20", children: [_jsx("label", { className: "text-[10px] font-mono text-cyan-400/80 uppercase tracking-wider", children: "Components" }), _jsx("button", { onClick: deleteNode, className: "text-[10px] text-red-400/80 hover:text-red-400", children: "\u2715" })] }), _jsxs("div", { className: "px-1.5 py-1 border-b border-cyan-500/20", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Mode" }), _jsx("div", { className: "flex gap-0.5", children: ["translate", "rotate", "scale"].map(mode => (_jsx("button", { onClick: () => setTransformMode(mode), className: `flex-1 px-1 py-0.5 text-[10px] font-mono border ${transformMode === mode ? 'bg-cyan-500/30 border-cyan-400/50 text-cyan-200' : 'bg-black/30 border-cyan-500/20 text-cyan-400/60 hover:border-cyan-400/30'}`, children: mode[0].toUpperCase() }, mode))) })] }), node.components && Object.entries(node.components).map(([key, comp]) => {
+                if (!comp)
+                    return null;
+                const componentDef = ALL_COMPONENTS[comp.type];
+                if (!componentDef)
+                    return _jsxs("div", { className: "px-1 py-0.5 text-red-400 text-[10px]", children: ["Unknown component type: ", comp.type, _jsx("textarea", { defaultValue: JSON.stringify(comp) })] }, key);
+                const EditorComp = componentDef.Editor;
+                return (_jsxs("div", { className: 'px-1', children: [_jsxs("div", { className: "flex justify-between items-center py-0.5 border-b border-cyan-500/20 bg-cyan-500/5", children: [_jsx("span", { className: "font-mono text-[10px] text-cyan-300 uppercase", children: key }), _jsx("button", { onClick: () => updateNode(n => {
+                                        const components = Object.assign({}, n.components);
+                                        delete components[key];
+                                        return Object.assign(Object.assign({}, n), { components });
+                                    }), className: "text-[9px] text-red-400/60 hover:text-red-400", children: "\u2715" })] }), EditorComp ? (_jsx(EditorComp, { 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) }) }) }))) })) : null] }, key));
+            }), _jsxs("div", { className: "px-1.5 py-1 border-t border-cyan-500/20", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Add Component" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("select", { className: "bg-black/40 border border-cyan-500/30 px-1 py-0.5 flex-1 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: addComponentType, onChange: e => setAddComponentType(e.target.value), children: allComponentKeys.filter(k => { var _a; return !((_a = node.components) === null || _a === void 0 ? void 0 : _a[k.toLowerCase()]); }).map(k => (_jsx("option", { value: k, children: k }, k))) }), _jsx("button", { className: "bg-cyan-500/20 hover:bg-cyan-500/30 border border-cyan-500/30 px-2 py-0.5 text-[10px] text-cyan-300 font-mono disabled:opacity-30", disabled: !addComponentType, onClick: () => {
+                                    var _a;
+                                    if (!addComponentType)
+                                        return;
+                                    const def = ALL_COMPONENTS[addComponentType];
+                                    if (def && !((_a = node.components) === null || _a === void 0 ? void 0 : _a[addComponentType.toLowerCase()])) {
+                                        const key = addComponentType.toLowerCase();
+                                        updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: { type: def.name, properties: def.defaultProperties } }) })));
+                                    }
+                                }, children: "+" })] })] })] });
+}
+function findNode(root, id) {
+    if (root.id === id)
+        return root;
+    if (root.children) {
+        for (const child of root.children) {
+            const found = findNode(child, id);
+            if (found)
+                return found;
+        }
+    }
+    return null;
+}
+function updatePrefabNode(root, id, update) {
+    if (root.id === id) {
+        return update(root);
+    }
+    if (root.children) {
+        return Object.assign(Object.assign({}, root), { children: root.children.map(child => updatePrefabNode(child, id, update)) });
+    }
+    return root;
+}
+function deletePrefabNode(root, id) {
+    if (root.id === id)
+        return null;
+    if (root.children) {
+        return Object.assign(Object.assign({}, root), { children: root.children
+                .map(child => deletePrefabNode(child, id))
+                .filter((child) => child !== null) });
+    }
+    return root;
+}
+export default EditorUI;

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

@@ -0,0 +1,7 @@
+interface EventSystemRef {
+    fire: (eventType: string, data?: any) => void;
+}
+declare const EventSystemHook: import("react").ForwardRefExoticComponent<{
+    entityId: string;
+} & import("react").RefAttributes<EventSystemRef>>;
+export default EventSystemHook;

package/dist/tools/prefabeditor/EventSystem.js

@@ -0,0 +1,23 @@
+import { useRef, useImperativeHandle, forwardRef, useCallback } from 'react';
+const EventSystemHook = forwardRef(({ entityId }, ref) => {
+    const targetRef = useRef(typeof window !== 'undefined' ? window : null);
+    // Fire a global JS event with entityId as source
+    const fire = useCallback((eventType, data) => {
+        if (!targetRef.current)
+            return;
+        const event = new CustomEvent(eventType, {
+            detail: {
+                entityId,
+                data,
+            },
+        });
+        targetRef.current.dispatchEvent(event);
+    }, [entityId]);
+    // Expose ref API
+    useImperativeHandle(ref, () => ({
+        fire,
+    }), [fire]);
+    return null;
+});
+EventSystemHook.displayName = 'EventSystemHook';
+export default EventSystemHook;

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

@@ -0,0 +1,30 @@
+import React from "react";
+import * as THREE from 'three';
+export type InstanceData = {
+    id: string;
+    position: [number, number, number];
+    rotation: [number, number, number];
+    scale: [number, number, number];
+    meshPath: string;
+    physics?: {
+        type: 'dynamic' | 'fixed';
+    };
+};
+export declare function GameInstanceProvider({ children, models, onSelect, registerRef }: {
+    children: React.ReactNode;
+    models: {
+        [filename: string]: THREE.Object3D;
+    };
+    onSelect?: (id: string | null) => void;
+    registerRef?: (id: string, obj: THREE.Object3D | null) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const GameInstance: React.ForwardRefExoticComponent<{
+    id: string;
+    modelUrl: string;
+    position: [number, number, number];
+    rotation: [number, number, number];
+    scale: [number, number, number];
+    physics?: {
+        type: "dynamic" | "fixed";
+    };
+} & React.RefAttributes<THREE.Group<THREE.Object3DEventMap>>>;

package/dist/tools/prefabeditor/InstanceProvider.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { createContext, useContext, useMemo, useRef, useState, useEffect, useCallback } from "react";
+import { Merged } from '@react-three/drei';
+import * as THREE from 'three';
+import { InstancedRigidBodies } from "@react-three/rapier";
+function arrayEquals(a, b) {
+    if (a === b)
+        return true;
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
+}
+function instanceEquals(a, b) {
+    var _a, _b;
+    return a.id === b.id &&
+        a.meshPath === b.meshPath &&
+        arrayEquals(a.position, b.position) &&
+        arrayEquals(a.rotation, b.rotation) &&
+        arrayEquals(a.scale, b.scale) &&
+        ((_a = a.physics) === null || _a === void 0 ? void 0 : _a.type) === ((_b = b.physics) === null || _b === void 0 ? void 0 : _b.type);
+}
+const GameInstanceContext = createContext(null);
+export function GameInstanceProvider({ children, models, onSelect, registerRef }) {
+    const [instances, setInstances] = useState([]);
+    const addInstance = useCallback((instance) => {
+        setInstances(prev => {
+            const idx = prev.findIndex(i => i.id === instance.id);
+            if (idx !== -1) {
+                if (instanceEquals(prev[idx], instance)) {
+                    return prev;
+                }
+                const copy = [...prev];
+                copy[idx] = instance;
+                return copy;
+            }
+            return [...prev, instance];
+        });
+    }, []);
+    const removeInstance = useCallback((id) => {
+        setInstances(prev => {
+            if (!prev.find(i => i.id === id))
+                return prev;
+            return prev.filter(i => i.id !== id);
+        });
+    }, []);
+    // Flatten all model meshes once
+    const { flatMeshes, modelParts } = useMemo(() => {
+        const flatMeshes = {};
+        const modelParts = {};
+        Object.entries(models).forEach(([modelKey, model]) => {
+            const root = model;
+            root.updateWorldMatrix(false, true);
+            const rootInverse = new THREE.Matrix4().copy(root.matrixWorld).invert();
+            let partIndex = 0;
+            root.traverse((obj) => {
+                if (obj.isMesh) {
+                    const geom = obj.geometry.clone();
+                    const relativeTransform = obj.matrixWorld.clone().premultiply(rootInverse);
+                    geom.applyMatrix4(relativeTransform);
+                    const partKey = `${modelKey}__${partIndex}`;
+                    flatMeshes[partKey] = new THREE.Mesh(geom, obj.material);
+                    partIndex++;
+                }
+            });
+            modelParts[modelKey] = partIndex;
+        });
+        return { flatMeshes, modelParts };
+    }, [models]);
+    // Group instances by meshPath + physics type
+    const grouped = useMemo(() => {
+        var _a;
+        const groups = {};
+        for (const inst of instances) {
+            const type = ((_a = inst.physics) === null || _a === void 0 ? void 0 : _a.type) || 'none';
+            const key = `${inst.meshPath}__${type}`;
+            if (!groups[key])
+                groups[key] = { physicsType: type, instances: [] };
+            groups[key].instances.push(inst);
+        }
+        return groups;
+    }, [instances]);
+    return (_jsxs(GameInstanceContext.Provider, { value: {
+            addInstance,
+            removeInstance,
+            instances,
+            meshes: flatMeshes,
+            modelParts
+        }, children: [children, Object.entries(grouped).map(([key, group]) => {
+                if (group.physicsType === 'none')
+                    return null;
+                const modelKey = group.instances[0].meshPath;
+                const partCount = modelParts[modelKey] || 0;
+                if (partCount === 0)
+                    return null;
+                return (_jsx(InstancedRigidGroup, { group: group, modelKey: modelKey, partCount: partCount, flatMeshes: flatMeshes }, key));
+            }), Object.entries(grouped).map(([key, group]) => {
+                if (group.physicsType !== 'none')
+                    return null;
+                const modelKey = group.instances[0].meshPath;
+                const partCount = modelParts[modelKey] || 0;
+                if (partCount === 0)
+                    return null;
+                // Restrict meshes to just this model's parts for this Merged
+                const meshesForModel = {};
+                for (let i = 0; i < partCount; i++) {
+                    const partKey = `${modelKey}__${i}`;
+                    meshesForModel[partKey] = flatMeshes[partKey];
+                }
+                return (_jsx(Merged, { meshes: meshesForModel, castShadow: true, receiveShadow: true, children: (instancesMap) => (_jsx(NonPhysicsInstancedGroup, { modelKey: modelKey, group: group, partCount: partCount, instancesMap: instancesMap, onSelect: onSelect, registerRef: registerRef })) }, key));
+            })] }));
+}
+// Physics instancing stays the same
+function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes }) {
+    const instances = useMemo(() => group.instances.map(inst => ({
+        key: inst.id,
+        position: inst.position,
+        rotation: inst.rotation,
+        scale: inst.scale,
+    })), [group.instances]);
+    return (_jsx(InstancedRigidBodies, { instances: instances, colliders: group.physicsType === 'fixed' ? 'trimesh' : 'hull', type: group.physicsType, children: Array.from({ length: partCount }).map((_, i) => {
+            const mesh = flatMeshes[`${modelKey}__${i}`];
+            return (_jsx("instancedMesh", { args: [mesh.geometry, mesh.material, group.instances.length], castShadow: true, receiveShadow: true, frustumCulled: false }, i));
+        }) }));
+}
+// Non-physics instanced visuals: per-instance group using Merged's Instance components
+function NonPhysicsInstancedGroup({ modelKey, group, partCount, instancesMap, onSelect, registerRef }) {
+    const clickValid = useRef(false);
+    const handlePointerDown = (e) => { e.stopPropagation(); clickValid.current = true; };
+    const handlePointerMove = () => { if (clickValid.current)
+        clickValid.current = false; };
+    const handlePointerUp = (e, id) => {
+        if (clickValid.current) {
+            e.stopPropagation();
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(id);
+        }
+        clickValid.current = false;
+    };
+    return (_jsx(_Fragment, { children: group.instances.map(inst => (_jsx("group", { ref: (el) => { registerRef === null || registerRef === void 0 ? void 0 : registerRef(inst.id, el); }, position: inst.position, rotation: inst.rotation, scale: inst.scale, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: (e) => handlePointerUp(e, inst.id), children: Array.from({ length: partCount }).map((_, i) => {
+                const Instance = instancesMap[`${modelKey}__${i}`];
+                if (!Instance)
+                    return null;
+                return _jsx(Instance, {}, i);
+            }) }, inst.id))) }));
+}
+// --- GameInstance: just registers an instance, renders nothing ---
+export const GameInstance = React.forwardRef(({ id, modelUrl, position, rotation, scale, physics = undefined, }, ref) => {
+    const ctx = useContext(GameInstanceContext);
+    const addInstance = ctx === null || ctx === void 0 ? void 0 : ctx.addInstance;
+    const removeInstance = ctx === null || ctx === void 0 ? void 0 : ctx.removeInstance;
+    const instance = useMemo(() => ({
+        id,
+        meshPath: modelUrl,
+        position,
+        rotation,
+        scale,
+        physics,
+    }), [id, modelUrl, position, rotation, scale, physics]);
+    useEffect(() => {
+        if (!addInstance || !removeInstance)
+            return;
+        addInstance(instance);
+        return () => {
+            removeInstance(instance.id);
+        };
+    }, [addInstance, removeInstance, instance]);
+    // No visual here – provider will render visuals for all instances
+    return null;
+});

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

@@ -0,0 +1,4 @@
+declare const PrefabEditor: ({ children }: {
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default PrefabEditor;

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -0,0 +1,89 @@
+"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 GameCanvas from "../../shared/GameCanvas";
+import { useState, useRef, } from "react";
+import PrefabRoot from "./PrefabRoot";
+import { Physics } from "@react-three/rapier";
+// import testPrefab from "./samples/test.json";
+import EditorUI from "./EditorUI";
+const PrefabEditor = ({ children }) => {
+    const [editMode, setEditMode] = useState(true);
+    const [loadedPrefab, setLoadedPrefab] = useState({
+        "id": "prefab-default",
+        "name": "New Prefab",
+        "root": {
+            "id": "root",
+            "enabled": true,
+            "visible": true,
+            "components": {
+                "transform": {
+                    "type": "Transform",
+                    "properties": {
+                        "position": [0, 0, 0],
+                        "rotation": [0, 0, 0],
+                        "scale": [1, 1, 1]
+                    }
+                }
+            }
+        }
+    });
+    const [selectedId, setSelectedId] = useState(null);
+    const [transformMode, setTransformMode] = useState("translate");
+    const prefabRef = useRef(null);
+    return _jsxs(_Fragment, { children: [_jsx(GameCanvas, { children: _jsxs(Physics, { paused: editMode, children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { data: loadedPrefab, ref: prefabRef, 
+                            // props for edit mode
+                            editMode: editMode, onPrefabChange: setLoadedPrefab, selectedId: selectedId, onSelect: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode }), children] }) }), _jsxs("div", { style: { position: "absolute", top: "0.5rem", left: "50%", transform: "translateX(-50%)" }, className: "bg-black/70 backdrop-blur-sm border border-cyan-500/30 px-2 py-1 flex items-center gap-1", children: [_jsx("button", { className: "px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30", onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }), _jsx("span", { className: "text-cyan-500/30 text-[10px]", children: "|" }), _jsx("button", { className: "px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30", onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                            const prefab = yield loadJson();
+                            if (prefab)
+                                setLoadedPrefab(prefab);
+                        }), children: "\uD83D\uDCE5" }), _jsx("button", { className: "px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30", onClick: () => saveJson(loadedPrefab, "prefab"), children: "\uD83D\uDCBE" })] }), editMode && _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: setLoadedPrefab, selectedId: selectedId, setSelectedId: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode })] });
+};
+const saveJson = (data, filename) => {
+    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));
+    const downloadAnchorNode = document.createElement('a');
+    downloadAnchorNode.setAttribute("href", dataStr);
+    downloadAnchorNode.setAttribute("download", (filename || 'prefab') + ".json");
+    document.body.appendChild(downloadAnchorNode);
+    downloadAnchorNode.click();
+    downloadAnchorNode.remove();
+};
+const loadJson = () => __awaiter(void 0, void 0, void 0, function* () {
+    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') {
+                        const json = JSON.parse(text);
+                        resolve(json);
+                    }
+                }
+                catch (err) {
+                    console.error('Error parsing prefab JSON:', err);
+                    resolve(undefined);
+                }
+            };
+            reader.readAsText(file);
+        };
+        input.click();
+    });
+});
+export default PrefabEditor;

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

@@ -0,0 +1,12 @@
+import { Group } from "three";
+import { Prefab } from "./types";
+export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
+    editMode?: boolean;
+    data: Prefab;
+    onPrefabChange?: (data: Prefab) => void;
+    selectedId?: string | null;
+    onSelect?: (id: string | null) => void;
+    transformMode?: "translate" | "rotate" | "scale";
+    setTransformMode?: (mode: "translate" | "rotate" | "scale") => void;
+} & import("react").RefAttributes<Group<import("three").Object3DEventMap>>>;
+export default PrefabRoot;