react-three-game 0.0.92 → 0.0.94

package/README.md

@@ -1,16 +1,15 @@
 # react-three-game
 
-![Scene Editor](assets/editor.gif)
+![Prefab Editor](assets/editor.gif)
 
-JSON-first scene mounting and authoring for React Three Fiber.
+JSON-first prefab mounting and authoring for React Three Fiber.
 
-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).
+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/drei](https://github.com/pmndrs/drei).
 
-* **🧱 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.
-* **🔧 Direct Runtime Access** - Get native `Object3D`, Rapier rigid body, and prefab store access without a parallel engine API.
+* **🧱 Prefabs** - Save prefabs as serializable JSON and load them on their own or inside larger app worlds.
+* **🎬 Prefab Editor** - Edit prefabs visually with hierarchy, inspector, transform gizmos, and play mode.
+* **🧩 Components** - Build prefabs from reusable `GameObject` + component composition.
+* **🔧 Direct Runtime Access** - Get native `Object3D`, runtime handles, and authored prefab mutation APIs without a parallel engine API.
 * **⚡ R3F Native** - Use normal React Three Fiber components whenever runtime behavior is clearer in code.
 
 ## Documentation
@@ -21,7 +20,7 @@ Built on top of [three.js](https://github.com/mrdoob/three.js), [@react-three/fi
 ## Install
 
 ```bash
-npm install react-three-game @react-three/drei @react-three/fiber @react-three/rapier three
+npm install react-three-game @react-three/drei @react-three/fiber three
 ```
 
 ## Usage
@@ -29,12 +28,11 @@ npm install react-three-game @react-three/drei @react-three/fiber @react-three/r
 Here is a minimal example that renders a prefab inside a normal R3F app:
 
 ```tsx
-import { Physics } from "@react-three/rapier";
 import { GameCanvas, PrefabRoot, ground } from "react-three-game";
 
 const prefab = {
   id: "starter-scene",
-  name: "Starter Scene",
+  name: "Starter Prefab",
   root: {
     id: "root",
     children: [
@@ -58,10 +56,6 @@ const prefab = {
             type: "Material",
             properties: { color: "#f66" },
           },
-          physics: {
-            type: "Physics",
-            properties: { type: "dynamic" },
-          },
         },
       },
     ],
@@ -71,16 +65,14 @@ const prefab = {
 export default function App() {
   return (
     <GameCanvas>
-      <Physics>
-        <ambientLight intensity={0.8} />
-        <PrefabRoot data={prefab} />
-      </Physics>
+      <ambientLight intensity={0.8} />
+      <PrefabRoot data={prefab} />
     </GameCanvas>
   );
 }
 ```
 
-This example renders a falling sphere above a ground plane.
+This example renders a simple authored prefab with a ground plane and mesh content.
 
 ## Prefab Editor
 
@@ -98,22 +90,21 @@ Open the hosted editor here:
 
 * https://prnth.com/react-three-game/editor
 
-## Prefabs And Mounted Scenes
+## Prefabs And Mounted Objects
 
 `Prefab` is the serializable pure data format.
 
-That means a saved scene is just a prefab, and the same prefab can be:
+That means authored content stays as a prefab, and the same prefab can be:
 
 * edited directly in `PrefabEditor`
 * rendered directly with `PrefabRoot`
-* loaded inside another scene as reusable content
+* loaded inside another prefab or app scene as reusable content
 
 `PrefabRoot` keeps the rendering model narrow and compositional:
 
 * `Transform` is the renderer-owned outer transform
 * `Geometry` or `BufferGeometry` + `Material` become the primary mesh content
 * non-instanced `Model` becomes the node's primary content
-* `Physics` is a renderer-owned outer wrapper
 * every other component `View` wraps the current subtree
 
 Custom component `View`s use normal React Three Fiber composition with `children`.
@@ -161,7 +152,7 @@ interface GameObject {
 
 ## Runtime Mutation
 
-Use native object access for Three.js behavior and the prefab store for authored data changes.
+Use the editor or root ref for scene-native object access, and the `Scene` mutation methods for authored data changes.
 
 ```tsx
 import { useEffect, useRef } from "react";
@@ -171,7 +162,7 @@ function RaiseBall() {
   const editorRef = useRef<PrefabEditorRef>(null);
 
   useEffect(() => {
-    editorRef.current?.store.getState().updateNode("ball", (node) => ({
+    editorRef.current?.update("ball", (node) => ({
       ...node,
       components: {
         ...node.components,
@@ -197,6 +188,55 @@ const ball = editorRef.current?.getObject("ball");
 ball?.rotateY(0.5);
 ```
 
+For runtime integrations that need to react to authored scene changes, subscribe through the prefab store:
+
+```tsx
+import { usePrefabStoreApi } from "react-three-game";
+
+const store = usePrefabStoreApi();
+const stop = store.subscribe(
+  (s) => s.nodesById,
+  (next, prev) => console.log("scene changed", next, prev),
+);
+
+stop();
+```
+
+For runtime-owned imperative state, register node-local handles instead of reaching for ad hoc globals:
+
+```tsx
+import { useEffect } from "react";
+import { useAssetRuntime, useNode, useNodeHandle } from "react-three-game";
+
+function SpinnerView({ children }: { children?: React.ReactNode }) {
+  const { nodeId } = useNode();
+  const { registerHandle } = useAssetRuntime();
+
+  useEffect(() => {
+    const handle = {
+      setSpeed(next: number) {
+        console.log("speed", next);
+      },
+    };
+
+    registerHandle(nodeId, "spinner", handle);
+    return () => registerHandle(nodeId, "spinner", null);
+  }, [nodeId, registerHandle]);
+
+  return <>{children}</>;
+}
+
+function SpinnerStatus() {
+  const spinnerRef = useNodeHandle<{ setSpeed: (next: number) => void }>("spinner");
+
+  useEffect(() => {
+    spinnerRef.current?.setSpeed(2);
+  }, [spinnerRef]);
+
+  return null;
+}
+```
+
 Mounted node metadata is mirrored onto the canonical Three.js wrapper object:
 
 * `GameObject.id` -> `object.userData.prefabNodeId`
@@ -210,11 +250,11 @@ const playerByName = editorRef.current?.root?.getObjectByName("Player");
 const playerById = editorRef.current?.root?.getObjectByProperty("userData.prefabNodeId", "player");
 ```
 
-Treat names as a convenience surface, not the primary lookup key:
+Treat names as a convenience surface, with stable ids as the primary lookup key:
 
+* `editorRef.current?.getObject(id)` is the clearest stable authored-node lookup
 * names are not guaranteed unique
-* `getObject(id)` is still the stable authored-node lookup
-* traversal metadata is applied to the prefab node transform object, not necessarily the inner mesh or model child
+* traversal metadata is applied to the prefab node transform object — the inner mesh or model child is one level deeper
 
 You can author extra `userData` from the editor with a `Data` component:
 
@@ -228,68 +268,21 @@ You can author extra `userData` from the editor with a `Data` component:
 }
 ```
 
-For batched authored updates, write through the store once:
-
-```tsx
-editorRef.current?.store.getState().updateNodes([
-  {
-    id: "orb1",
-    update: (node) => ({
-      ...node,
-      components: {
-        ...node.components,
-        transform: {
-          ...node.components?.transform,
-          type: "Transform",
-          properties: {
-            ...node.components?.transform?.properties,
-            position: [1, 0, 0],
-          },
-        },
-      },
-    }),
-  },
-  {
-    id: "orb2",
-    update: (node) => ({
-      ...node,
-      components: {
-        ...node.components,
-        transform: {
-          ...node.components?.transform,
-          type: "Transform",
-          properties: {
-            ...node.components?.transform?.properties,
-            position: [-1, 0, 0],
-          },
-        },
-      },
-    }),
-  },
-]);
-```
-
-Custom component `View`s should use normal React and R3F behavior, such as `useFrame`, refs, and native Three.js APIs.
+Custom component `View`s use normal React and R3F behavior — `useFrame`, refs, and native Three.js APIs.
 
 ## Useful Exports
 
-* `GameCanvas`
-* `PrefabRoot`
-* `PrefabEditor`
-* `PrefabEditorMode`
-* `Prefab`
-* `GameObject`
-* `registerComponent`
-* `createPrefabStore`
-* `usePrefabStoreApi`
-* `useAssetRuntime()` / `useEntityRuntime()`
-* `useEntityObjectRef()` / `useEntityRigidBodyRef()`
-* `ground(...)`
-* `loadJson()` / `saveJson()`
-* `loadModel()` / `loadTexture()`
-* `loadSound()` / `loadFiles()`
-* `exportGLB()`
-* `computeParentWorldMatrix()`
+* `GameCanvas`, `PrefabRoot`, `PrefabEditor`, `PrefabEditorMode`
+* `Prefab`, `GameObject`, `ComponentData`, `PrefabNode`, `PrefabEditorRef`, `Scene`
+* `registerComponent`, `Component`, `ComponentViewProps`, `FieldDefinition`
+* `useScene`, `useEditorRef`, `useEditorContext`
+* `useNode`, `useNodeObject`, `useNodeHandle`, `useAssetRuntime`
+* `usePrefabStore`, `usePrefabStoreApi`
+* `gameEvents`, `useGameEvent`, `useClickEvent`
+* `loadJson`, `saveJson`, `loadFiles`, `loadModel`, `loadTexture`, `loadSound`
+* `exportGLB`, `exportGLBData`, `regenerateIds`, `computeParentWorldMatrix`
+* `ground`, `soundManager`
+* `FieldRenderer`, `Vector3Field`, `NumberField`, `StringField`, `BooleanField`, `SelectField`, `ColorField`
 
 ## Development
 

package/dist/helpers/index.d.ts

@@ -16,8 +16,6 @@ export interface GroundOptions {
     repeat?: boolean;
     /** Texture repeat counts when repeat=true. Defaults to [25,25]. */
     repeatCount?: [number, number];
-    /** Physics body type. Defaults to "fixed". */
-    physicsType?: "fixed" | "dynamic" | "kinematic";
     /** Set true to disable the node. */
     disabled?: boolean;
 }
@@ -28,6 +26,5 @@ export interface GroundOptions {
  * - Transform (rotated to lie flat)
  * - Geometry (plane)
  * - Material (optional texture + repeat)
- * - Physics (fixed by default)
  */
 export declare function ground(options?: GroundOptions): GameObject;

package/dist/helpers/index.js

@@ -5,10 +5,9 @@
  * - Transform (rotated to lie flat)
  * - Geometry (plane)
  * - Material (optional texture + repeat)
- * - Physics (fixed by default)
  */
 export function ground(options = {}) {
-    const { id = "ground", size = 50, position = [0, 0, 0], rotation = [-Math.PI / 2, 0, 0], scale = [1, 1, 1], color = "#eeeeee", texture, repeat = texture ? true : false, repeatCount = [25, 25], physicsType = "fixed", disabled = false, } = options;
+    const { id = "ground", size = 50, position = [0, 0, 0], rotation = [-Math.PI / 2, 0, 0], scale = [1, 1, 1], color = "#eeeeee", texture, repeat = texture ? true : false, repeatCount = [25, 25], disabled = false, } = options;
     return {
         id,
         disabled,
@@ -32,12 +31,6 @@ export function ground(options = {}) {
                 type: "Material",
                 properties: Object.assign(Object.assign({ color }, (texture ? { texture } : {})), (repeat ? { repeat: true, repeatCount } : {})),
             },
-            physics: {
-                type: "Physics",
-                properties: {
-                    type: physicsType,
-                },
-            },
         },
     };
 }

package/dist/index.d.ts

@@ -4,25 +4,26 @@ 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 { PrefabEditorMode } from './tools/prefabeditor/PrefabEditor';
+export { PrefabEditorMode } from './tools/prefabeditor/PrefabRoot';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
-export { useEditorContext } from './tools/prefabeditor/PrefabEditor';
+export { useEditorContext, useEditorRef } from './tools/prefabeditor/PrefabEditor';
 export type { EditorContextType } from './tools/prefabeditor/PrefabEditor';
-export { createPrefabStore, prefabStoreToPrefab, usePrefabStoreApi } from './tools/prefabeditor/prefabStore';
+export { usePrefabStore, usePrefabStoreApi } from './tools/prefabeditor/prefabStore';
 export type { PrefabStoreApi, PrefabStoreState } from './tools/prefabeditor/prefabStore';
 export { denormalizePrefab } from './tools/prefabeditor/prefab';
-export { gameEvents, getEntityIdFromRigidBody, useClickEvent, useGameEvent, usePhysicsEvent } from './tools/prefabeditor/GameEvents';
-export type { ClickEventPayload, GameEventHandler, GameEventMap, PhysicsEventPayload } from './tools/prefabeditor/GameEvents';
+export { gameEvents, useClickEvent, useGameEvent } from './tools/prefabeditor/GameEvents';
+export type { ClickEventPayload, ContactEventPayload, GameEventHandler, GameEventMap } from './tools/prefabeditor/GameEvents';
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
 export { FieldRenderer, FieldGroup, ListEditor, Label, Vector3Input, Vector3Field, NumberField, ColorInput, ColorField, StringInput, StringField, BooleanInput, BooleanField, SelectInput, SelectField, } from './tools/prefabeditor/components/Input';
 export { loadJson, saveJson, exportGLB, exportGLBData, regenerateIds, computeParentWorldMatrix, } from './tools/prefabeditor/utils';
 export type { ExportGLBOptions } from './tools/prefabeditor/utils';
 export { createModelNode, createImageNode, } from './tools/prefabeditor/prefab';
-export type { PrefabEditorProps, PrefabEditorRef, } from './tools/prefabeditor/PrefabEditor';
-export type { Entity, EntityComponent, EntityData, EntityUpdate, PropertyPath, Scene, SceneUpdates, SpawnOptions, } from './tools/prefabeditor/scene';
+export type { PrefabEditorProps, PrefabNode, PrefabEditorRef, } from './tools/prefabeditor/PrefabEditor';
 export type { PrefabRootProps } from './tools/prefabeditor/PrefabRoot';
-export type { AssetRuntime, EntityRuntime, LiveObjectRef, LiveRigidBodyRef } from './tools/prefabeditor/assetRuntime';
-export { useAssetRuntime, useEntityRuntime, useEntityObjectRef, useEntityRigidBodyRef } from './tools/prefabeditor/assetRuntime';
+export type { AssetRuntime, NodeApi, LiveRef } from './tools/prefabeditor/assetRuntime';
+export { useAssetRuntime, useNode, useNodeHandle, useNodeObject } from './tools/prefabeditor/assetRuntime';
+export type { Scene } from './tools/prefabeditor/PrefabRoot';
+export { useScene } from './tools/prefabeditor/PrefabRoot';
 export type { Component, ComponentViewProps } from './tools/prefabeditor/components/ComponentRegistry';
 export type { FieldDefinition, FieldType } from './tools/prefabeditor/components/Input';
 export { MaterialOverridesProvider, useMaterialOverrides } from './tools/prefabeditor/components/MaterialComponent';
@@ -35,4 +36,3 @@ export type { AssetLoadOptions } from './tools/dragdrop/DragDropLoader';
 export { loadModel, loadSound, loadTexture } from './tools/dragdrop/modelLoader';
 export type { LoadedModel, LoadedModels, ModelLoadResult, LoadedSound, LoadedSounds, SoundLoadResult, LoadedTexture, LoadedTextures, TextureLoadResult, ProgressCallback, } from './tools/dragdrop/modelLoader';
 export { ModelListViewer, SoundListViewer, ModelPicker, SoundPicker, TextureListViewer, TexturePicker, SingleModelViewer, SingleSoundViewer, SingleTextureViewer, SharedCanvas, } from './tools/assetviewer/page';
-export type { PrefabRootRef } from './tools/prefabeditor/PrefabRoot';

package/dist/index.js

@@ -5,13 +5,13 @@ export { ground } from './helpers';
 export { sound as soundManager } from './helpers/SoundManager';
 // Prefab Editor
 export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
-export { PrefabEditorMode } from './tools/prefabeditor/PrefabEditor';
+export { PrefabEditorMode } from './tools/prefabeditor/PrefabRoot';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
-export { useEditorContext } from './tools/prefabeditor/PrefabEditor';
-// Prefab Editor - Store & Scene API
-export { createPrefabStore, prefabStoreToPrefab, usePrefabStoreApi } from './tools/prefabeditor/prefabStore';
+export { useEditorContext, useEditorRef } from './tools/prefabeditor/PrefabEditor';
+export { usePrefabStore, usePrefabStoreApi } from './tools/prefabeditor/prefabStore';
+// Prefab Editor - Data API
 export { denormalizePrefab } from './tools/prefabeditor/prefab';
-export { gameEvents, getEntityIdFromRigidBody, useClickEvent, useGameEvent, usePhysicsEvent } from './tools/prefabeditor/GameEvents';
+export { gameEvents, useClickEvent, useGameEvent } from './tools/prefabeditor/GameEvents';
 // Prefab Editor - Component Registry
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
 // Prefab Editor - Input Components
@@ -19,7 +19,8 @@ export { FieldRenderer, FieldGroup, ListEditor, Label, Vector3Input, Vector3Fiel
 // Prefab Editor - Utils
 export { loadJson, saveJson, exportGLB, exportGLBData, regenerateIds, computeParentWorldMatrix, } from './tools/prefabeditor/utils';
 export { createModelNode, createImageNode, } from './tools/prefabeditor/prefab';
-export { useAssetRuntime, useEntityRuntime, useEntityObjectRef, useEntityRigidBodyRef } from './tools/prefabeditor/assetRuntime';
+export { useAssetRuntime, useNode, useNodeHandle, useNodeObject } from './tools/prefabeditor/assetRuntime';
+export { useScene } from './tools/prefabeditor/PrefabRoot';
 export { MaterialOverridesProvider, useMaterialOverrides } from './tools/prefabeditor/components/MaterialComponent';
 export { findComponent, findComponentEntry, hasComponent } from './tools/prefabeditor/types';
 export { float, positionLocal, sin, time, uniform, vec3, } from 'three/tsl';

package/dist/tools/prefabeditor/EditorTree.js

@@ -1,20 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo, useCallback, useState } from 'react';
 import { base, colors, tree } from './styles';
-import { useEditorContext } from './PrefabEditor';
+import { useEditorContext, useEditorRef } from './PrefabEditor';
 import { Dropdown } from './Dropdown';
 import { FileMenu, TreeContextMenu, TreeNodeMenu } from './EditorTreeMenus';
 import { createEmptyNode } from './prefab';
 import { usePrefabChildIds, usePrefabNode, usePrefabRootId, usePrefabStore, usePrefabStoreApi } from './prefabStore';
 export default function EditorTree({ selectedId, setSelectedId, getPrefab, onReplacePrefab, onImportPrefab, onUndo, onRedo, canUndo, canRedo }) {
     const { onFocusNode } = useEditorContext();
+    const editor = useEditorRef();
     const rootId = usePrefabRootId();
     const store = usePrefabStoreApi();
-    const addChild = usePrefabStore(state => state.addChild);
-    const duplicateNode = usePrefabStore(state => state.duplicateNode);
-    const deleteNode = usePrefabStore(state => state.deleteNode);
-    const toggleNodeFlag = usePrefabStore(state => state.toggleNodeFlag);
-    const moveNode = usePrefabStore(state => state.moveNode);
     const [draggedId, setDraggedId] = useState(null);
     const [dropTarget, setDropTarget] = useState(null);
     const [collapsedIds, setCollapsedIds] = useState(new Set());
@@ -31,30 +27,30 @@ export default function EditorTree({ selectedId, setSelectedId, getPrefab, onRep
     };
     const handleAddChild = (parentId) => {
         const newNode = createEmptyNode();
-        addChild(parentId, newNode);
+        editor.add(newNode, parentId);
         setSelectedId(newNode.id);
     };
     const handleDuplicate = (nodeId) => {
         if (nodeId === rootId)
             return;
-        const duplicatedId = duplicateNode(nodeId);
+        const duplicatedId = editor.duplicate(nodeId);
         if (duplicatedId)
             setSelectedId(duplicatedId);
     };
     const handleDelete = (nodeId) => {
         if (nodeId === rootId)
             return;
-        deleteNode(nodeId);
+        editor.remove(nodeId);
         if (selectedId === nodeId)
             setSelectedId(null);
     };
     const handleToggleDisabled = (nodeId) => {
-        toggleNodeFlag(nodeId, 'disabled');
+        editor.update(nodeId, n => (Object.assign(Object.assign({}, n), { disabled: !n.disabled })));
     };
     const handleToggleLocked = (nodeId) => {
         var _a;
         const willLock = !((_a = store.getState().nodesById[nodeId]) === null || _a === void 0 ? void 0 : _a.locked);
-        toggleNodeFlag(nodeId, 'locked');
+        editor.update(nodeId, n => (Object.assign(Object.assign({}, n), { locked: !n.locked })));
         if (willLock && selectedId === nodeId)
             setSelectedId(null);
     };
@@ -99,12 +95,12 @@ export default function EditorTree({ selectedId, setSelectedId, getPrefab, onRep
         if (!draggedId || draggedId === targetId)
             return;
         e.preventDefault();
-        moveNode(draggedId, targetId, getDropPosition(e, isRoot));
+        editor.move(draggedId, targetId, getDropPosition(e, isRoot));
         setDraggedId(null);
         setDropTarget(null);
     };
     const visibleIds = usePrefabStore(useCallback(state => searchQuery ? buildVisibleIds(state, rootId, searchQuery) : null, [rootId, searchQuery]));
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: Object.assign(Object.assign({}, tree.panel), { width: collapsed ? 'auto' : 224 }), 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" }), _jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx("button", { ref: ref, title: "Menu", style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10 }), onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: Object.assign(Object.assign({}, tree.panel), { width: collapsed ? 'auto' : 224 }), 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: "Prefab" })] }), !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" }), _jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx("button", { ref: ref, title: "Menu", style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10 }), onClick: (e) => {
                                                 e.stopPropagation();
                                                 toggle();
                                             }, children: "\u22EE" })), children: (close) => (_jsx(FileMenu, { getPrefab: getPrefab, onReplacePrefab: onReplacePrefab, onImportPrefab: onImportPrefab, onClose: close })) })] }))] }), !collapsed && (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: '4px 4px', borderBottom: `1px solid ${colors.borderLight}` }, children: _jsx("input", { type: "text", placeholder: "Search nodes...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onClick: (e) => e.stopPropagation(), style: Object.assign(Object.assign({}, base.input), { padding: '4px 8px' }) }) }), _jsx("div", { style: tree.scroll, children: _jsx(TreeNode, { nodeId: rootId, depth: 0, rootId: rootId, visibleIds: visibleIds, collapsedIds: collapsedIds, dropTarget: dropTarget, selectedNodeId: selectedId, onToggleCollapse: toggleCollapse, onOpenContextMenu: openContextMenu, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onDragEnd: () => { setDraggedId(null); setDropTarget(null); }, renderTreeNodeMenu: renderTreeNodeMenu, onToggleDisabled: handleToggleDisabled, setSelectedId: setSelectedId }) })] }))] }), _jsx(TreeContextMenu, { contextMenu: contextMenu, onClose: closeContextMenu, children: (nodeId, close) => renderTreeNodeMenu(nodeId, nodeId === rootId, close) })] }));
@@ -138,7 +134,7 @@ const TreeNode = memo(function TreeNode({ nodeId, depth, rootId, visibleIds, col
                                     }, children: "\u22EF" })), children: (close) => renderTreeNodeMenu(nodeId, false, close) }), _jsx("button", { style: Object.assign(Object.assign({}, tree.iconButton), { opacity: node.disabled ? 0.5 : 0.7 }), onClick: (e) => {
                                     e.stopPropagation();
                                     onToggleDisabled(nodeId);
-                                }, title: node.disabled ? 'Enable' : 'Disable', children: node.disabled ? '◎' : '◉' })] })), isRoot && (_jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx("button", { ref: ref, title: "Scene Actions", style: tree.iconButton, onClick: (e) => {
+                                }, title: node.disabled ? 'Enable' : 'Disable', children: node.disabled ? '◎' : '◉' })] })), isRoot && (_jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx("button", { ref: ref, title: "Prefab Actions", style: tree.iconButton, onClick: (e) => {
                                 e.stopPropagation();
                                 toggle();
                             }, children: "\u22EF" })), children: (close) => renderTreeNodeMenu(nodeId, true, close) }))] }), !isCollapsed && childIds.map(childId => (_jsx(TreeNode, { nodeId: childId, depth: depth + 1, rootId: rootId, visibleIds: visibleIds, collapsedIds: collapsedIds, dropTarget: dropTarget, selectedNodeId: selectedNodeId, onToggleCollapse: onToggleCollapse, onOpenContextMenu: onOpenContextMenu, onDragStart: onDragStart, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, onDragEnd: onDragEnd, renderTreeNodeMenu: renderTreeNodeMenu, onToggleDisabled: onToggleDisabled, setSelectedId: setSelectedId }, childId)))] }));

package/dist/tools/prefabeditor/EditorUI.js

@@ -15,23 +15,23 @@ import { hasComponent } from "./types";
 import EditorTree from './EditorTree';
 import { getAllComponentDefs } from './components/ComponentRegistry';
 import { createComponentData } from './prefab';
+import { useEditorRef } from './PrefabEditor';
 import { base, colors, inspector, componentCard } from './styles';
 import { usePrefabStore } from './prefabStore';
 function EditorUI({ selectedId, setSelectedId, getPrefab, onReplacePrefab, onImportPrefab, basePath, onUndo, onRedo, canUndo, canRedo }) {
     const [collapsed, setCollapsed] = useState(false);
     const rootId = usePrefabStore(state => state.rootId);
     const selectedNode = usePrefabStore(state => { var _a; return selectedId ? (_a = state.nodesById[selectedId]) !== null && _a !== void 0 ? _a : null : null; });
-    const updateNode = usePrefabStore(state => state.updateNode);
-    const deleteNode = usePrefabStore(state => state.deleteNode);
+    const editor = useEditorRef();
     const updateNodeHandler = (update) => {
         if (!selectedId)
             return;
-        updateNode(selectedId, update);
+        editor.update(selectedId, update);
     };
     const deleteNodeHandler = () => {
         if (!selectedId || selectedId === rootId)
             return;
-        deleteNode(selectedId);
+        editor.remove(selectedId);
         setSelectedId(null);
     };
     return _jsxs(_Fragment, { children: [_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, basePath: basePath }))] }), _jsx("div", { style: { position: 'absolute', top: 8, left: 8, zIndex: 20 }, children: _jsx(EditorTree, { selectedId: selectedId, setSelectedId: setSelectedId, getPrefab: getPrefab, onReplacePrefab: onReplacePrefab, onImportPrefab: onImportPrefab, onUndo: onUndo, onRedo: onRedo, canUndo: canUndo, canRedo: canRedo }) })] });

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

@@ -1,14 +1,12 @@
 export type GameEventHandler<TPayload = unknown> = (payload: TPayload) => void;
-export type PhysicsEventPayload = {
+export type ContactEventPayload = {
     sourceEntityId?: string;
     sourceNodeId?: string;
     sourceObject?: unknown;
-    sourceRigidBody?: unknown;
     targetEntityId?: string | null;
     targetNodeId?: string | null;
     targetObject?: unknown;
-    targetRigidBody?: unknown;
-    rapierEvent?: unknown;
+    event?: unknown;
 };
 export type ClickEventPayload = {
     sourceEntityId?: string;
@@ -26,10 +24,10 @@ export type ClickEventPayload = {
     r3fEvent?: unknown;
 };
 export interface GameEventMap {
-    'sensor:enter': PhysicsEventPayload;
-    'sensor:exit': PhysicsEventPayload;
-    'collision:enter': PhysicsEventPayload;
-    'collision:exit': PhysicsEventPayload;
+    'sensor:enter': ContactEventPayload;
+    'sensor:exit': ContactEventPayload;
+    'collision:enter': ContactEventPayload;
+    'collision:exit': ContactEventPayload;
     click: ClickEventPayload;
     [eventType: string]: unknown;
 }
@@ -40,8 +38,4 @@ export declare const gameEvents: {
     hasListeners(type: string): boolean;
 };
 export declare function useGameEvent<TType extends string>(type: TType, handler: GameEventHandler<TType extends keyof GameEventMap ? GameEventMap[TType] : unknown>, deps?: React.DependencyList): void;
-export declare function usePhysicsEvent<TType extends string>(type: TType, handler: GameEventHandler<TType extends keyof GameEventMap ? GameEventMap[TType] : unknown>, deps?: React.DependencyList): void;
 export declare function useClickEvent<TType extends string>(type: TType, handler: GameEventHandler<TType extends keyof GameEventMap ? GameEventMap[TType] : unknown>, deps?: React.DependencyList): void;
-export declare function getEntityIdFromRigidBody(rigidBody: {
-    userData?: unknown;
-} | null | undefined): string | null;

package/dist/tools/prefabeditor/GameEvents.js

@@ -53,14 +53,6 @@ export function useGameEvent(type, handler, deps = []) {
         return gameEvents.on(type, stableHandler);
     }, [type, stableHandler]);
 }
-export function usePhysicsEvent(type, handler, deps = []) {
-    useGameEvent(type, handler, deps);
-}
 export function useClickEvent(type, handler, deps = []) {
     useGameEvent(type, handler, deps);
 }
-export function getEntityIdFromRigidBody(rigidBody) {
-    var _a;
-    const entityId = (_a = rigidBody === null || rigidBody === void 0 ? void 0 : rigidBody.userData) === null || _a === void 0 ? void 0 : _a.entityId;
-    return typeof entityId === 'string' ? entityId : null;
-}

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

@@ -1,6 +1,6 @@
 import React from "react";
+import { ThreeEvent } from '@react-three/fiber';
 import { Object3D, Group } from "three";
-import { PhysicsProps } from "./components/PhysicsComponent";
 export type RepeatAxisConfig = {
     axis: 'x' | 'y' | 'z';
     count: number;
@@ -13,18 +13,19 @@ export type InstanceData = {
     id: string;
     sourceId: string;
     locked?: boolean;
+    visible?: boolean;
     position: [number, number, number];
     rotation: [number, number, number];
     scale: [number, number, number];
     meshPath: string;
-    physics?: PhysicsProps | undefined;
 };
-export declare function GameInstanceProvider({ children, models, onSelect, registerRef, selectedId, editMode }: {
+export declare function GameInstanceProvider({ children, models, onSelect, onClick, registerRef, selectedId, editMode }: {
     children: React.ReactNode;
     models: {
         [filename: string]: Object3D;
     };
     onSelect?: (id: string | null) => void;
+    onClick?: (event: ThreeEvent<PointerEvent>, nodeId: string, object: Object3D | null) => void;
     registerRef?: (id: string, obj: Object3D | null) => void;
     selectedId?: string | null;
     editMode?: boolean;
@@ -38,5 +39,6 @@ export declare const GameInstance: React.ForwardRefExoticComponent<{
     position: [number, number, number];
     rotation: [number, number, number];
     scale: [number, number, number];
-    physics?: PhysicsProps | undefined;
+    visible?: boolean;
+    onClick?: (event: ThreeEvent<PointerEvent>, nodeId: string, object: Object3D | null) => void;
 } & React.RefAttributes<Group<import("three").Object3DEventMap>>>;