react-three-game 0.0.67 → 0.0.69

package/README.md

@@ -1,197 +1,118 @@
 # react-three-game
 
-JSON-first 3D game engine. React Three Fiber + WebGPU + Rapier Physics.
+![Scene Editor](assets/editor.gif)
 
-```bash
-npm i react-three-game @react-three/drei @react-three/fiber @react-three/rapier three
-```
+JSON-first 3D game engine for React Three Fiber.
 
-![Prefab Editor](assets/editor.gif)
-![Architecture](assets/architecture.png)
+Built on top of [three.js](https://github.com/mrdoob/three.js), [@react-three/fiber](https://github.com/pmndrs/react-three-fiber), and [@react-three/rapier](https://github.com/pmndrs/react-three-rapier).
 
-## Agent Skill
-```bash
-npx skills add https://github.com/prnthh/react-three-game-skill
-```
+* **🧱 Prefabs** - Save scenes as serializable JSON and load them on their own or inside other scenes.
+* **🎬 Scene Editor** - Edit prefabs visually with hierarchy, inspector, transform gizmos, and play mode.
+* **⚛️ Physics** - Author rigid bodies directly in prefab data and run them through Rapier.
+* **🧩 Components** - Build scenes from reusable `GameObject` + component composition.
+* **🔧 Runtime Scene API** - Mutate the live world through `Scene`, `Entity`, and `EntityComponent` handles.
+* **⚡ R3F Native** - Use normal React Three Fiber components whenever runtime behavior is clearer in code.
+
+## Documentation
 
-## Usage Modes
+* Website: https://prnth.com/react-three-game
+* Editor: https://prnth.com/react-three-game/editor
 
-**PrefabRoot**: Pure renderer for embedding prefab data in standard R3F applications. Render it inside a regular `@react-three/fiber` `Canvas`. `GameCanvas` provides the WebGPU canvas setup. Add a `Physics` wrapper to enable physics. Use this to integrate prefabs into larger R3F scenes.
+## Install
 
-**PrefabEditor**: Managed scene with editor UI and play/pause controls for physics. Full authoring tool for level design and prototyping. Includes canvas, physics, transform gizmos, and inspector. Physics only runs in play mode. Can pass R3F components as children.
+```bash
+npm install react-three-game @react-three/drei @react-three/fiber @react-three/rapier three
+```
+
+## Usage
 
-## Basic Usage
+Here is a minimal example that renders a prefab inside a normal R3F app:
 
-```jsx
+```tsx
 import { Physics } from "@react-three/rapier";
-import { GameCanvas, PrefabRoot } from "react-three-game";
+import { GameCanvas, PrefabRoot, ground } from "react-three-game";
 
-const sceneData = {
+const prefab = {
+  id: "starter-scene",
+  name: "Starter Scene",
   root: {
-    id: "scene",
+    id: "root",
     children: [
-      {
-        id: "ground",
-        components: {
-          transform: { type: "Transform", properties: { position: [0, 0, 0], rotation: [-1.57, 0, 0] } },
-          geometry: { type: "Geometry", properties: { geometryType: "plane", args: [50, 50] } },
-          material: { type: "Material", properties: { color: "#3a3" } },
-          physics: { type: "Physics", properties: { type: "fixed" } }
-        }
-      },
+      ground({ size: 50, color: "#3a3" }),
       {
         id: "ball",
         components: {
-          transform: { type: "Transform", properties: { position: [0, 5, 0] } },
-          geometry: { type: "Geometry", properties: { geometryType: "sphere" } },
-          material: { type: "Material", properties: { color: "#f66" } },
-          physics: { type: "Physics", properties: { type: "dynamic" } }
-        }
-      }
-    ]
-  }
+          transform: {
+            type: "Transform",
+            properties: {
+              position: [0, 5, 0],
+              rotation: [0, 0, 0],
+              scale: [1, 1, 1],
+            },
+          },
+          geometry: {
+            type: "Geometry",
+            properties: { geometryType: "sphere", args: [0.5, 32, 32] },
+          },
+          material: {
+            type: "Material",
+            properties: { color: "#f66" },
+          },
+          physics: {
+            type: "Physics",
+            properties: { type: "dynamic" },
+          },
+        },
+      },
+    ],
+  },
 };
 
-export default function Home() {
+export default function App() {
   return (
-    <main className="flex h-screen w-screen">
-      <GameCanvas>
-        <Physics>
-          <ambientLight intensity={0.8} />
-          <PrefabRoot data={sceneData} />
-        </Physics>
-      </GameCanvas>
-    </main>
+    <GameCanvas>
+      <Physics>
+        <ambientLight intensity={0.8} />
+        <PrefabRoot data={prefab} />
+      </Physics>
+    </GameCanvas>
   );
 }
 ```
 
-`GameCanvas` provides the library's WebGPU canvas setup.
+This example renders a falling sphere above a ground plane.
 
 ## Prefab Editor
 
-```jsx
-import { useRef } from 'react';
-import { PrefabEditor } from 'react-three-game';
-
-// Standalone editor
-<PrefabEditor initialPrefab={sceneData} onPrefabChange={setSceneData} />
-
-// Canvas-only editing mode (keeps canvas selection/gizmos, hides hierarchy + inspector + toolbar)
-<PrefabEditor initialPrefab={sceneData} showUI={false} />
-
-// With custom R3F components
-<PrefabEditor initialPrefab={sceneData}>
-  <CustomComponent />
-</PrefabEditor>
-```
-
-### Embedded / Headless Editor
+In addition to the runtime renderer, there is a visual editor for authoring prefabs.
 
 ```tsx
-import { useRef } from 'react';
-import type { Object3D } from 'three';
-import { PrefabEditor, type PrefabEditorRef } from 'react-three-game';
-
-export function EmbeddedEditor({ prefab, onPrefabChange }: {
-  prefab: any;
-  onPrefabChange: (nextPrefab: any) => void;
-}) {
-  const editorRef = useRef<PrefabEditorRef>(null);
-
-  function loadScene(nextPrefab: any) {
-    editorRef.current?.replacePrefab(nextPrefab);
-  }
-
-  function importRuntimeModel(model: Object3D) {
-    editorRef.current?.addModel('models/runtime/chair.glb', model, {
-      name: 'Chair',
-      parentId: 'root',
-    });
-  }
+import { PrefabEditor } from "react-three-game";
 
-  return (
-    <div style={{ position: 'relative', height: 600 }}>
-      <div style={{ position: 'absolute', top: 12, left: 12, zIndex: 10 }}>
-        <button onClick={() => loadScene(prefab)}>Reload Scene</button>
-        <button onClick={() => editorRef.current?.exportGLBData()}>Export GLB Data</button>
-      </div>
-
-      <PrefabEditor
-        ref={editorRef}
-        initialPrefab={prefab}
-        onPrefabChange={onPrefabChange}
-        showUI={false}
-        physics={false}
-        enableWindowDrop={false}
-        canvasProps={{ style: { height: '100%', width: '100%' } }}
-      />
-    </div>
-  );
+export default function App() {
+  return <PrefabEditor initialPrefab={prefab} onChange={console.log} />;
 }
 ```
 
-`showUI={false}` hides the built-in editor chrome but keeps canvas selection, transform controls, and scene interaction. For embedded tools, use the editor ref instead of reaching through `rootRef`:
-
-- `replacePrefab(prefab)` replaces the current scene through the editor state pipeline and resets editor history/selection.
-- `setPrefab(prefab)` updates the current prefab in place and preserves selection when the selected node ID still exists.
-- `addModel(path, model, options?)` creates a model node and injects the runtime asset in one step.
-- `addTexture(path, texture, options?)` creates a textured plane node and injects the runtime texture in one step.
-- `exportGLBData()` returns the GLB `ArrayBuffer` without triggering a download.
-- `canvasProps` forwards canvas-level sizing, camera, event, and style props to `GameCanvas`.
-
-### Editor State Bridge
-
-Compose small helper components inside `PrefabEditor` when custom UI needs to control the editor.
-
-```tsx
-import { useEffect } from 'react';
-import {
-  PrefabEditor,
-  useEditorContext,
-  type EditorContextType,
-} from 'react-three-game';
+Open the hosted editor here:
 
-function EditorStateBridge({ onReady }: { onReady: (editorState: EditorContextType) => void }) {
-  const editorState = useEditorContext();
-
-  useEffect(() => {
-    onReady(editorState);
-  }, [editorState, onReady]);
-
-  return null;
-}
-
-function CustomEditor() {
-  return (
-    <PrefabEditor initialPrefab={sceneData} showUI={false}>
-      <EditorStateBridge onReady={({ setTransformMode }) => setTransformMode('translate')} />
-    </PrefabEditor>
-  );
-}
-```
+* https://prnth.com/react-three-game/editor
 
-- `useEditorContext()` is available to children rendered inside `PrefabEditor`.
-- Use it for editor state: transform mode, edit/play checks, focus actions, and export buttons.
-- Keep bridge components small and focused on one editor concern.
+## Prefabs And Scenes
 
-### Edit Mode vs Play Mode
+`Prefab` is the serializable pure data format.
 
-- edit mode: selection, inspector, transform gizmos, editor shortcuts
-- play mode: physics and runtime behavior
-- skip editor-only code when `editMode` is `false`
-- use `showUI={false}` for custom shells
-- use `enableWindowDrop={false}` when the host app owns drag/drop
+`Scene` is the live runtime/editor world handle.
 
-Keys: **T**ranslate / **R**otate / **S**cale. Drag tree nodes to reparent. Physics only runs in play mode.
+That means a saved scene is just a prefab, and the same prefab can be:
 
-Editor menu structure:
-- `Menu > File`: new scene, load/save prefab JSON, load prefab into scene
-- `Menu > Export`: `GLB`, `PNG`
+* edited directly in `PrefabEditor`
+* rendered directly with `PrefabRoot`
+* loaded inside another scene as reusable content
 
-## GameObject Schema
+## Prefab Format
 
-```typescript
+```ts
 interface Prefab {
   id?: string;
   name?: string;
@@ -202,176 +123,60 @@ interface GameObject {
   id: string;
   name?: string;
   disabled?: boolean;
+  locked?: boolean;
   components?: Record<string, { type: string; properties: any }>;
   children?: GameObject[];
 }
 ```
 
-`disabled` is the canonical visibility toggle in the current schema. Transforms are local to the parent node.
+## Runtime Mutation
 
-## Built-in Components
-
-| Component | Key Properties |
-|-----------|----------------|
-| Transform | `position`, `rotation`, `scale` — all `[x,y,z]` arrays, rotation in radians |
-| Geometry | `geometryType`: box/sphere/plane/cylinder, `args`: dimension array |
-| Material | `color`, `texture?`, `metalness?`, `roughness?` |
-| Physics | `type`: dynamic/fixed/kinematicPosition/kinematicVelocity, `mass?`, `restitution?` (bounciness), `friction?`, `linearVelocity?`, `angularVelocity?`, plus any Rapier props |
-| Model | `filename` (GLB/FBX path), `instanced?` for GPU batching |
-| SpotLight | `color`, `intensity`, `angle`, `penumbra` |
-
-## Tree Utilities
-
-```typescript
-import { findNode, updateNode, updateNodeById, deleteNode, cloneNode, exportGLBData } from 'react-three-game';
-
-const node = findNode(root, nodeId);
-const updated = updateNode(root, nodeId, n => ({ ...n, disabled: true }));  // or updateNodeById
-const afterDelete = deleteNode(root, nodeId);
-const cloned = cloneNode(node);
-const glbData = await exportGLBData(sceneRoot);  // export scene to GLB ArrayBuffer
-```
-
-### Scene State Updates
+When you need to change the live world, use the `Scene` API from `PrefabEditorRef`.
 
 ```tsx
-function VisibilityToggle({
-  editorRef,
-  visible,
-}: {
-  editorRef: React.RefObject<PrefabEditorRef | null>;
-  visible: boolean;
-}) {
-  useEffect(() => {
-    const editor = editorRef.current;
-    if (!editor) return;
-
-    const prefab = editor.prefab;
-    const root = updateNodeById(prefab.root, 'helper-grid', node => ({
-      ...node,
-      disabled: !visible,
-    }));
-
-    editor.setPrefab({ ...prefab, root });
-  }, [editorRef, visible]);
-
-  return null;
-}
-```
-
-- Use `updateNode(...)` or `updateNodeById(...)` for scene state changes inside the prefab tree.
-- For sensor and collision event patterns, see advanced physics examples.
-
-## Custom Components
-
-```tsx
-import { useRef } from 'react';
-import { Component, registerComponent, FieldRenderer, FieldDefinition } from 'react-three-game';
-import { useFrame } from '@react-three/fiber';
-import type { Group } from 'three';
-
-const rotatorFields: FieldDefinition[] = [
-  { name: 'speed', type: 'number', label: 'Speed', step: 0.1 },
-  { name: 'axis', type: 'select', label: 'Axis', options: [
-    { value: 'x', label: 'X' },
-    { value: 'y', label: 'Y' },
-    { value: 'z', label: 'Z' },
-  ]},
-];
-
-const Rotator: Component = {
-  name: 'Rotator',
-  Editor: ({ component, onUpdate }) => (
-    <FieldRenderer fields={rotatorFields} values={component.properties} onChange={onUpdate} />
-  ),
-  View: ({ properties, children }) => {
-    const ref = useRef<Group>(null);
-    useFrame((_, dt) => { ref.current!.rotation.y += dt * properties.speed });
-    return <group ref={ref}>{children}</group>;
-  },
-  defaultProperties: { speed: 1, axis: 'y' }
-};
-
-registerComponent(Rotator); // before rendering PrefabEditor
-```
-
-Components may render visible content, wrap child content, or contribute runtime behavior. Keep those semantics explicit in the component `View` rather than relying on hidden tree rules.
+import { useEffect, useRef } from "react";
+import { PrefabEditor, type PrefabEditorRef } from "react-three-game";
 
-### Schema-Driven Field Types
+function RaiseBall() {
+  const editorRef = useRef<PrefabEditorRef>(null);
 
-The `FieldRenderer` component auto-generates editor UI from a field schema:
+  useEffect(() => {
+    const transform = editorRef.current
+      ?.scene
+      .find("ball")
+      ?.getComponent<{ position: [number, number, number] }>("Transform");
 
-| Type | Description | Options |
-|------|-------------|---------|
-| `vector3` | X/Y/Z inputs with drag-to-scrub | `snap?: number` |
-| `number` | Numeric input | `min?`, `max?`, `step?` |
-| `string` | Text input | `placeholder?` |
-| `color` | Color picker + hex input | — |
-| `boolean` | Checkbox | — |
-| `select` | Dropdown | `options: { value, label }[]` |
-| `custom` | Render function for one-off UI | `render: (props) => ReactNode` |
+    transform?.set("position", [0, 8, 0]);
+  }, []);
 
-```tsx
-// Custom field example for complex one-off UI
-{
-  name: 'gradient',
-  type: 'custom',
-  label: 'Gradient',
-  render: ({ value, onChange, values, onChangeMultiple }) => (
-    <GradientPicker value={value} onChange={onChange} />
-  ),
+  return <PrefabEditor ref={editorRef} initialPrefab={prefab} />;
 }
 ```
 
-## Internals
-
-- **Transforms**: Local in JSON, world computed via matrix multiplication
-- **Instancing**: `model.properties.instanced = true` switches the node to the batched instance path (`<Merged>` / `<InstancedRigidBodies>`) instead of the standard model render path
-- **Models**: GLB/GLTF (Draco) and FBX auto-load from `filename`
+## Useful Exports
+
+* `GameCanvas`
+* `PrefabRoot`
+* `PrefabEditor`
+* `Prefab`
+* `GameObject`
+* `Scene`
+* `Entity`
+* `EntityComponent`
+* `registerComponent`
+* `ground(...)`
+* `loadJson()` / `saveJson()`
+* `loadModel()` / `loadTexture()`
+* `exportGLB()` / `exportGLBData()`
 
 ## Development
 
 ```bash
-npm run dev     # tsc --watch + docs site (localhost:3000)
-npm run build   # → /dist
-npm run release # build + publish
-```
-
+npm run dev
+npm run build
+npm run release
 ```
-/src                 → library (published)
-/docs                → Next.js demo site
-```
-
----
-
-React 19 · Three.js WebGPU · TypeScript 5 · Rapier WASM · MIT License
-
-## Manifest generation script
-
-A small helper script is included to auto-generate asset manifests from the `public` folder. See `docs/generate-manifests.sh`.
-
-- **What it does:**
-  Searches `public/models` for `.glb`/`.fbx`, `public/textures` for `.jpg`/`.png`, and `public/sound` for `.mp3`/`.wav`, then writes JSON arrays to:
-  - `public/models/manifest.json`
-  - `public/textures/manifest.json`
-  - `public/sound/manifest.json`
-  
-  These manifest files are used to populate the Asset Viewer in the Editor.
-
-- **How to run:**
-
-  1. Make it executable (once):
-
-     ```sh
-     chmod +x docs/generate-manifests.sh
-     ```
-
-  2. Run the script from the repo root (zsh/bash):
-
-     ```sh
-     ./docs/generate-manifests.sh
-     ```
 
+## License
 
-The script is intentionally simple and portable (uses `find`/`sed`).
-If you need different file types or output formatting, edit `docs/generate-manifests.sh`.
+VPL

package/dist/index.d.ts

@@ -1,22 +1,29 @@
 export { default as GameCanvas } from './shared/GameCanvas';
-export * from './helpers';
+export type { GameCanvasProps } from './shared/GameCanvas';
+export { ground } from './helpers';
+export type { GroundOptions, Vec3 } from './helpers';
 export { sound as soundManager } from './helpers/SoundManager';
 export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
 export { useEditorContext } from './tools/prefabeditor/EditorContext';
 export type { EditorContextType } from './tools/prefabeditor/EditorContext';
+export { createPrefabStore, prefabStoreToPrefab } from './tools/prefabeditor/prefabStore';
+export type { PrefabStoreApi, PrefabStoreState } from './tools/prefabeditor/prefabStore';
+export { createScene } from './tools/prefabeditor/sceneApi';
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
 export { FieldRenderer, FieldGroup, Label, Vector3Input, Vector3Field, NumberField, ColorInput, ColorField, StringInput, StringField, BooleanInput, BooleanField, SelectInput, SelectField, } from './tools/prefabeditor/components/Input';
-export * from './tools/prefabeditor/utils';
+export { loadJson, saveJson, exportGLB, exportGLBData, regenerateIds, computeParentWorldMatrix, createModelNode, createImageNode, } from './tools/prefabeditor/utils';
 export type { ExportGLBOptions } from './tools/prefabeditor/utils';
-export type { PrefabEditorAssetOptions, PrefabEditorProps, PrefabEditorRef } from './tools/prefabeditor/PrefabEditor';
-export type { PrefabRootRef } from './tools/prefabeditor/PrefabRoot';
+export type { PrefabEditorProps, PrefabEditorRef, } from './tools/prefabeditor/PrefabEditor';
+export type { SpawnOptions, Scene, Entity, EntityComponent, EntityData, EntityUpdate, PropertyPath, SceneUpdates, } from './tools/prefabeditor/sceneApi';
+export type { PrefabRootProps, PrefabRootRef } from './tools/prefabeditor/PrefabRoot';
 export type { Component } from './tools/prefabeditor/components/ComponentRegistry';
 export type { FieldDefinition, FieldType } from './tools/prefabeditor/components/Input';
-export type { Prefab, GameObject, ComponentData } from './tools/prefabeditor/types';
+export type { Prefab, GameObject, ComponentData as ComponentDefinition } from './tools/prefabeditor/types';
 export { gameEvents, useGameEvent, getEntityIdFromRigidBody } from './tools/prefabeditor/GameEvents';
 export type { GameEventType, GameEventMap, GameEventPayload, PhysicsEventType, InteractionEventType, PhysicsEventPayload, ClickEventPayload } from './tools/prefabeditor/GameEvents';
-export { entityEvents, useEntityEvent } from './tools/prefabeditor/GameEvents';
-export type { EntityEventType, EntityEventPayload } from './tools/prefabeditor/GameEvents';
-export * from './tools/dragdrop';
+export { loadFiles } from './tools/dragdrop/DragDropLoader';
+export type { AssetLoadOptions } from './tools/dragdrop/DragDropLoader';
+export { loadModel, loadTexture } from './tools/dragdrop/modelLoader';
+export type { LoadedModel, LoadedTexture, LoadedModels, LoadedTextures, ModelLoadResult, ProgressCallback, TextureLoadResult } from './tools/dragdrop/modelLoader';
 export { TextureListViewer, ModelListViewer, SoundListViewer, TexturePicker, ModelPicker, SingleTextureViewer, SingleModelViewer, SingleSoundViewer, SharedCanvas, } from './tools/assetviewer/page';

package/dist/index.js

@@ -1,22 +1,25 @@
 // Core
 export { default as GameCanvas } from './shared/GameCanvas';
 // Helpers
-export * from './helpers';
+export { ground } from './helpers';
 export { sound as soundManager } from './helpers/SoundManager';
-// Prefab Editor - Components
+// Prefab Editor
 export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
 export { useEditorContext } from './tools/prefabeditor/EditorContext';
+// Prefab Editor - Store & Scene API
+export { createPrefabStore, prefabStoreToPrefab } from './tools/prefabeditor/prefabStore';
+export { createScene } from './tools/prefabeditor/sceneApi';
 // Prefab Editor - Component Registry
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
 // Prefab Editor - Input Components
 export { FieldRenderer, FieldGroup, Label, Vector3Input, Vector3Field, NumberField, ColorInput, ColorField, StringInput, StringField, BooleanInput, BooleanField, SelectInput, SelectField, } from './tools/prefabeditor/components/Input';
-// Prefab Editor - Styles & Utils
-export * from './tools/prefabeditor/utils';
+// Prefab Editor - Utils
+export { loadJson, saveJson, exportGLB, exportGLBData, regenerateIds, computeParentWorldMatrix, createModelNode, createImageNode, } from './tools/prefabeditor/utils';
 // Game Events (physics + custom events)
 export { gameEvents, useGameEvent, getEntityIdFromRigidBody } from './tools/prefabeditor/GameEvents';
-// Backward compatibility aliases
-export { entityEvents, useEntityEvent } from './tools/prefabeditor/GameEvents';
-// Asset Tools
-export * from './tools/dragdrop';
+// Asset Loading
+export { loadFiles } from './tools/dragdrop/DragDropLoader';
+export { loadModel, loadTexture } from './tools/dragdrop/modelLoader';
+// Asset Viewer
 export { TextureListViewer, ModelListViewer, SoundListViewer, TexturePicker, ModelPicker, SingleTextureViewer, SingleModelViewer, SingleSoundViewer, SharedCanvas, } from './tools/assetviewer/page';

package/dist/shared/GameCanvas.d.ts

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

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

@@ -2,8 +2,8 @@ export interface EditorContextType {
     editMode: boolean;
     transformMode: "translate" | "rotate" | "scale";
     setTransformMode: (mode: "translate" | "rotate" | "scale") => void;
-    snapResolution: number;
-    setSnapResolution: (resolution: number) => void;
+    scaleSnap: number;
+    setScaleSnap: (resolution: number) => void;
     positionSnap: number;
     setPositionSnap: (resolution: number) => void;
     rotationSnap: number;

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

@@ -1,12 +1,12 @@
-import { Dispatch, SetStateAction } from 'react';
 import { Prefab } from "./types";
-export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId, onUndo, onRedo, canUndo, canRedo }: {
-    prefabData?: Prefab;
-    setPrefabData?: Dispatch<SetStateAction<Prefab>>;
+export default function EditorTree({ selectedId, setSelectedId, getPrefab, onReplacePrefab, onImportPrefab, onUndo, onRedo, canUndo, canRedo }: {
     selectedId: string | null;
-    setSelectedId: Dispatch<SetStateAction<string | null>>;
+    setSelectedId: (id: string | null) => void;
+    getPrefab: () => Prefab;
+    onReplacePrefab: (prefab: Prefab) => void;
+    onImportPrefab: (prefab: Prefab) => void;
     onUndo?: () => void;
     onRedo?: () => void;
     canUndo?: boolean;
     canRedo?: boolean;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element;