react-three-game 0.0.65 → 0.0.66

package/README.md

@@ -68,6 +68,127 @@ export default function Home() {
 
 `GameCanvas` provides the library's WebGPU canvas setup.
 
+## 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
+
+```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',
+    });
+  }
+
+  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>
+  );
+}
+```
+
+`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';
+
+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>
+  );
+}
+```
+
+- `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.
+
+### Edit Mode vs Play Mode
+
+- 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
+
+Keys: **T**ranslate / **R**otate / **S**cale. Drag tree nodes to reparent. Physics only runs in play mode.
+
+Editor menu structure:
+- `Menu > File`: new scene, load/save prefab JSON, load prefab into scene
+- `Menu > Export`: `GLB`, `PNG`
+
 ## GameObject Schema
 
 ```typescript
@@ -95,10 +216,52 @@ interface GameObject {
 | 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?`, plus any Rapier props |
+| 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
+
+```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
@@ -160,102 +323,12 @@ The `FieldRenderer` component auto-generates editor UI from a field schema:
 }
 ```
 
-## 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
-
-```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',
-    });
-  }
-
-  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>
-  );
-}
-```
-
-`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.
-- `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`.
-- `setPrefab(prefab)` remains as a backward-compatible alias for `replacePrefab(prefab)`.
-
-Keys: **T**ranslate / **R**otate / **S**cale. Drag tree nodes to reparent. Physics only runs in play mode.
-
-Editor menu structure:
-- `Menu > File`: new scene, load/save prefab JSON, load prefab into scene
-- `Menu > Export`: `GLB`, `PNG`
-
 ## 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`
 
-## 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
-```
-
 ## Development
 
 ```bash

package/dist/index.d.ts

@@ -3,8 +3,10 @@ export * 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 { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
-export { FieldRenderer, FieldGroup, Input, Label, Vector3Input, Vector3Field, NumberField, ColorInput, ColorField, StringInput, StringField, BooleanInput, BooleanField, SelectInput, SelectField, } from './tools/prefabeditor/components/Input';
+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 type { ExportGLBOptions } from './tools/prefabeditor/utils';
 export type { PrefabEditorAssetOptions, PrefabEditorProps, PrefabEditorRef } from './tools/prefabeditor/PrefabEditor';
@@ -13,7 +15,7 @@ export type { Component } from './tools/prefabeditor/components/ComponentRegistr
 export type { FieldDefinition, FieldType } from './tools/prefabeditor/components/Input';
 export type { Prefab, GameObject, ComponentData } from './tools/prefabeditor/types';
 export { gameEvents, useGameEvent, getEntityIdFromRigidBody } from './tools/prefabeditor/GameEvents';
-export type { GameEventType, GameEventMap, GameEventPayload, PhysicsEventType, PhysicsEventPayload } 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';

package/dist/index.js

@@ -6,10 +6,11 @@ export { sound as soundManager } from './helpers/SoundManager';
 // Prefab Editor - Components
 export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
+export { useEditorContext } from './tools/prefabeditor/EditorContext';
 // Prefab Editor - Component Registry
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
 // Prefab Editor - Input Components
-export { FieldRenderer, FieldGroup, Input, Label, Vector3Input, Vector3Field, NumberField, ColorInput, ColorField, StringInput, StringField, BooleanInput, BooleanField, SelectInput, SelectField, } from './tools/prefabeditor/components/Input';
+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';
 // Game Events (physics + custom events)

package/dist/tools/assetviewer/page.js

@@ -93,9 +93,9 @@ function TextureCard({ file, onSelect, basePath = "" }) {
     const { ref, isInView } = useInView();
     const fullPath = basePath ? `/${basePath}${file}` : file;
     if (error) {
-        return (_jsx("div", { ref: ref, style: { aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onClick: () => onSelect(file), children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }));
+        return (_jsx("div", { ref: ref, style: { aspectRatio: '1 / 1', backgroundColor: '#c30000', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onClick: () => onSelect(file), children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }));
     }
-    return (_jsxs("div", { ref: ref, style: { maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#1f2937', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("div", { style: { flex: 1, position: 'relative' }, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 0, 2.5], fov: 50 }), _jsx("ambientLight", { intensity: 0.8 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(TextureSphere, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false, enablePan: false, autoRotate: isHovered, autoRotateSpeed: 2 })] })) : null }), _jsx("div", { style: styles.bottomLabel, children: file.split('/').pop() })] }));
+    return (_jsxs("div", { ref: ref, style: { maxWidth: 60, aspectRatio: '1 / 1', backgroundColor: '#aeaeae', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx("div", { style: { flex: 1, position: 'relative' }, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 0, 2.5], fov: 50 }), _jsx("ambientLight", { intensity: 0.8 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(TextureSphere, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false, enablePan: false, autoRotate: isHovered, autoRotateSpeed: 2 })] })) : null }), _jsx("div", { style: styles.bottomLabel, children: file.split('/').pop() })] }));
 }
 function TextureSphere({ url, onError }) {
     const [texture, setTexture] = useState(null);
@@ -119,9 +119,9 @@ function ModelCard({ file, onSelect, basePath = "", size = 60, }) {
     const { ref, isInView } = useInView();
     const fullPath = basePath ? `/${basePath}${file}` : file;
     if (error) {
-        return (_jsx("div", { ref: ref, style: { aspectRatio: '1 / 1', backgroundColor: '#374151', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onClick: () => onSelect(file), children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }));
+        return (_jsx("div", { ref: ref, style: { aspectRatio: '1 / 1', backgroundColor: '#c30000', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onClick: () => onSelect(file), children: _jsx("div", { style: styles.errorIcon, children: "\u2717" }) }));
     }
-    return (_jsxs("div", { ref: ref, style: { width: size, aspectRatio: '1 / 1', backgroundColor: '#111827', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), children: [_jsx("div", { style: styles.flexFillRelative, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 1, 3], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx("ambientLight", { intensity: 1 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(ModelPreview, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false })] })] })) : null }), _jsx("div", { style: styles.bottomLabel, children: file.split('/').pop() })] }));
+    return (_jsxs("div", { ref: ref, style: { width: size, aspectRatio: '1 / 1', backgroundColor: '#aeaeae', color: '#f9fafb', cursor: 'pointer', display: 'flex', flexDirection: 'column' }, onClick: () => onSelect(file), children: [_jsx("div", { style: styles.flexFillRelative, children: isInView ? (_jsxs(View, { style: { width: '100%', height: '100%' }, children: [_jsx(PerspectiveCamera, { makeDefault: true, position: [0, 1, 3], fov: 50 }), _jsxs(Suspense, { fallback: null, children: [_jsx("ambientLight", { intensity: 1 }), _jsx("pointLight", { position: [5, 5, 5], intensity: 0.5 }), _jsx(ModelPreview, { url: fullPath, onError: () => setError(true) }), _jsx(OrbitControls, { enableZoom: false })] })] })) : null }), _jsx("div", { style: styles.bottomLabel, children: file.split('/').pop() })] }));
 }
 function ModelPreview({ url, onError }) {
     const [model, setModel] = useState(null);

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

@@ -1,4 +1,5 @@
-interface EditorContextType {
+export interface EditorContextType {
+    editMode: boolean;
     transformMode: "translate" | "rotate" | "scale";
     setTransformMode: (mode: "translate" | "rotate" | "scale") => void;
     snapResolution: number;
@@ -13,4 +14,3 @@ interface EditorContextType {
 }
 export declare const EditorContext: import("react").Context<EditorContextType | null>;
 export declare function useEditorContext(): EditorContextType;
-export {};

package/dist/tools/prefabeditor/EditorTree.js

@@ -118,8 +118,19 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         if (selectedId === nodeId)
             setSelectedId(null);
     };
+    const toggleNodeFlag = (nodeId, key) => {
+        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, nodeId, node => (Object.assign(Object.assign({}, node), { [key]: !node[key] }))) })));
+    };
     const handleToggleDisabled = (nodeId) => {
-        setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, nodeId, node => (Object.assign(Object.assign({}, node), { disabled: !node.disabled }))) })));
+        toggleNodeFlag(nodeId, 'disabled');
+    };
+    const handleToggleLocked = (nodeId) => {
+        var _a;
+        const willLock = !((_a = findNode(prefabData.root, nodeId)) === null || _a === void 0 ? void 0 : _a.locked);
+        toggleNodeFlag(nodeId, 'locked');
+        if (willLock && selectedId === nodeId) {
+            setSelectedId(null);
+        }
     };
     const closeContextMenu = () => setContextMenu(null);
     const openContextMenu = (nodeId, x, y) => {
@@ -130,7 +141,10 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         setSelectedId(nodeId);
         onFocusNode === null || onFocusNode === void 0 ? void 0 : onFocusNode(nodeId);
     };
-    const renderTreeNodeMenu = (nodeId, isRoot, onClose) => (_jsx(TreeNodeMenu, { isRoot: isRoot, nodeId: nodeId, onAddChild: handleAddChild, onFocus: handleFocus, onDuplicate: isRoot ? undefined : handleDuplicate, onDelete: isRoot ? undefined : handleDelete, onClose: onClose }));
+    const renderTreeNodeMenu = (nodeId, isRoot, onClose) => {
+        var _a;
+        return (_jsx(TreeNodeMenu, { isRoot: isRoot, nodeId: nodeId, locked: (_a = findNode(prefabData.root, nodeId)) === null || _a === void 0 ? void 0 : _a.locked, onAddChild: handleAddChild, onFocus: handleFocus, onToggleLock: isRoot ? undefined : handleToggleLocked, onDuplicate: isRoot ? undefined : handleDuplicate, onDelete: isRoot ? undefined : handleDelete, onClose: onClose }));
+    };
     const handleDragStart = (e, id) => {
         if (id === prefabData.root.id)
             return e.preventDefault();
@@ -203,7 +217,7 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
                                         marginRight: 4,
                                         cursor: 'pointer',
                                         visibility: hasChildren ? 'visible' : 'hidden'
-                                    }, onClick: (e) => hasChildren && toggleCollapse(e, node.id), children: isCollapsed ? '▶' : '▼' }), !isRoot && _jsx("span", { style: { marginRight: 4, opacity: 0.4 }, children: "\u22EE\u22EE" }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: (_a = node.name) !== null && _a !== void 0 ? _a : node.id })] }), !isRoot && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx(MenuTriggerButton, { buttonRef: ref, onToggle: toggle, title: "Node Actions", style: {
+                                    }, onClick: (e) => hasChildren && toggleCollapse(e, node.id), children: isCollapsed ? '▶' : '▼' }), !isRoot && _jsx("span", { style: { marginRight: 4, opacity: 0.4 }, children: "\u22EE\u22EE" }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: (_a = node.name) !== null && _a !== void 0 ? _a : node.id }), node.locked && _jsx("span", { style: { marginLeft: 6, opacity: 0.6 }, children: "\uD83D\uDD12" })] }), !isRoot && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Dropdown, { placement: "bottom-end", trigger: ({ ref, toggle }) => (_jsx(MenuTriggerButton, { buttonRef: ref, onToggle: toggle, title: "Node Actions", style: {
                                             background: 'none',
                                             border: 'none',
                                             cursor: 'pointer',

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

@@ -12,11 +12,13 @@ export declare function MenuTriggerButton({ buttonRef, onToggle, title, style, c
     style: React.CSSProperties;
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function TreeNodeMenu({ isRoot, nodeId, onAddChild, onFocus, onDuplicate, onDelete, onClose, }: {
+export declare function TreeNodeMenu({ isRoot, nodeId, locked, onAddChild, onFocus, onToggleLock, onDuplicate, onDelete, onClose, }: {
     isRoot: boolean;
     nodeId: string;
+    locked?: boolean;
     onAddChild: (parentId: string) => void;
     onFocus: (nodeId: string) => void;
+    onToggleLock?: (nodeId: string) => void;
     onDuplicate?: (nodeId: string) => void;
     onDelete?: (nodeId: string) => void;
     onClose: () => void;

package/dist/tools/prefabeditor/EditorTreeMenus.js

@@ -53,8 +53,8 @@ export function MenuTriggerButton({ buttonRef, onToggle, title, style, children,
             onToggle();
         }, title: title, children: children }));
 }
-export function TreeNodeMenu({ isRoot, nodeId, onAddChild, onFocus, onDuplicate, onDelete, onClose, }) {
-    return (_jsxs(MenuPanel, { children: [_jsx(MenuItemButton, { onClick: () => { onAddChild(nodeId); onClose(); }, children: "Add Child" }), _jsx(MenuItemButton, { onClick: () => { onFocus(nodeId); onClose(); }, children: "Focus Camera" }), !isRoot && onDuplicate && (_jsx(MenuItemButton, { onClick: () => { onDuplicate(nodeId); onClose(); }, children: "Duplicate" })), !isRoot && onDelete && (_jsx(MenuItemButton, { danger: true, onClick: () => { onDelete(nodeId); onClose(); }, children: "Delete" }))] }));
+export function TreeNodeMenu({ isRoot, nodeId, locked, onAddChild, onFocus, onToggleLock, onDuplicate, onDelete, onClose, }) {
+    return (_jsxs(MenuPanel, { children: [_jsx(MenuItemButton, { onClick: () => { onAddChild(nodeId); onClose(); }, children: "Add Child" }), _jsx(MenuItemButton, { onClick: () => { onFocus(nodeId); onClose(); }, children: "Focus Camera" }), !isRoot && onToggleLock && (_jsx(MenuItemButton, { onClick: () => { onToggleLock(nodeId); onClose(); }, children: locked ? 'Unlock' : 'Lock' })), !isRoot && onDuplicate && (_jsx(MenuItemButton, { onClick: () => { onDuplicate(nodeId); onClose(); }, children: "Duplicate" })), !isRoot && onDelete && (_jsx(MenuItemButton, { danger: true, onClick: () => { onDelete(nodeId); onClose(); }, children: "Delete" }))] }));
 }
 export function TreeContextMenu({ contextMenu, onClose, children, }) {
     var _a, _b;
@@ -84,18 +84,17 @@ export function TreeContextMenu({ contextMenu, onClose, children, }) {
         };
     }, [contextMenu, onClose]);
     useEffect(() => {
-        if (!contextMenu || !panelRef.current || typeof window === 'undefined')
+        if (!contextMenu) {
+            setPosition(null);
+            return;
+        }
+        if (!panelRef.current || typeof window === 'undefined')
             return;
         const panelRect = panelRef.current.getBoundingClientRect();
         const left = Math.max(8, Math.min(contextMenu.x, window.innerWidth - panelRect.width - 8));
         const top = Math.max(8, Math.min(contextMenu.y, window.innerHeight - panelRect.height - 8));
         setPosition({ left, top });
     }, [contextMenu]);
-    useEffect(() => {
-        if (!contextMenu) {
-            setPosition(null);
-        }
-    }, [contextMenu]);
     if (!contextMenu || typeof document === 'undefined')
         return null;
     return createPortal(_jsx("div", { ref: panelRef, style: {

package/dist/tools/prefabeditor/EditorUI.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import EditorTree from './EditorTree';
 import { getAllComponents } from './components/ComponentRegistry';
 import { base, colors, inspector, scrollbarCSS, componentCard } from './styles';
@@ -36,12 +36,8 @@ function NodeInspector({ node, updateNode, deleteNode, basePath }) {
     const ALL_COMPONENTS = getAllComponents();
     const allKeys = Object.keys(ALL_COMPONENTS);
     const available = allKeys.filter(k => { var _a; return !((_a = node.components) === null || _a === void 0 ? void 0 : _a[k.toLowerCase()]); });
-    const [addType, setAddType] = useState(available[0] || "");
-    useEffect(() => {
-        const newAvailable = allKeys.filter(k => { var _a; return !((_a = node.components) === null || _a === void 0 ? void 0 : _a[k.toLowerCase()]); });
-        if (!newAvailable.includes(addType))
-            setAddType(newAvailable[0] || "");
-    }, [Object.keys(node.components || {}).join(',')]);
+    const [preferredAddType, setAddType] = useState(available[0] || "");
+    const addType = available.includes(preferredAddType) ? preferredAddType : (available[0] || "");
     return _jsxs("div", { style: inspector.content, className: "prefab-scroll", children: [_jsxs("div", { style: base.section, children: [_jsxs("div", { style: { display: "flex", marginBottom: 8, alignItems: 'center', gap: 8 }, children: [_jsx("div", { style: { fontSize: 10, color: colors.textDim, wordBreak: 'break-all', border: `1px solid ${colors.border}`, padding: '2px 6px', borderRadius: 3, flex: 1, fontFamily: 'monospace' }, children: node.id }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), base.btnDanger), title: "Delete Node", onClick: deleteNode, children: "\u274C" })] }), _jsx("input", { style: base.input, value: (_a = node.name) !== null && _a !== void 0 ? _a : "", placeholder: 'Node name', onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { name: e.target.value }))) })] }), _jsxs("div", { style: base.section, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }, children: _jsx("div", { style: base.label, children: "Components" }) }), node.components && Object.entries(node.components).map(([key, comp]) => {
                         if (!comp)
                             return null;

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

@@ -1,12 +1,23 @@
 import type { RapierRigidBody } from '@react-three/rapier';
 /** Physics event types (built-in) */
 export type PhysicsEventType = 'sensor:enter' | 'sensor:exit' | 'collision:enter' | 'collision:exit';
+export type InteractionEventType = 'click';
 /** Payload for physics events */
 export interface PhysicsEventPayload {
     sourceEntityId: string;
     targetEntityId: string | null;
     targetRigidBody: RapierRigidBody | null | undefined;
 }
+export interface ClickEventPayload {
+    sourceEntityId: string;
+    instanceEntityId?: string;
+    point: [number, number, number];
+    button: number;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+}
 /**
  * Register your custom event types here by extending this interface:
  *
@@ -22,6 +33,7 @@ export interface GameEventMap {
     'sensor:exit': PhysicsEventPayload;
     'collision:enter': PhysicsEventPayload;
     'collision:exit': PhysicsEventPayload;
+    'click': ClickEventPayload;
 }
 /** All registered event types */
 export type GameEventType = keyof GameEventMap | (string & {});
@@ -31,11 +43,12 @@ type EventHandler<T = unknown> = (payload: T) => void;
 /**
  * Game event system for all game interactions.
  *
- * Built-in physics events:
+ * Built-in events:
  * - sensor:enter - Something entered a sensor collider
  * - sensor:exit - Something exited a sensor collider
  * - collision:enter - A collision started
  * - collision:exit - A collision ended
+ * - click - A prefab entity with a Click component was clicked in play mode
  *
  * Custom events:
  * - Emit any event type with any payload

package/dist/tools/prefabeditor/GameEvents.js

@@ -4,11 +4,12 @@ const subscribers = new Map();
 /**
  * Game event system for all game interactions.
  *
- * Built-in physics events:
+ * Built-in events:
  * - sensor:enter - Something entered a sensor collider
  * - sensor:exit - Something exited a sensor collider
  * - collision:enter - A collision started
  * - collision:exit - A collision ended
+ * - click - A prefab entity with a Click component was clicked in play mode
  *
  * Custom events:
  * - Emit any event type with any payload

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

@@ -12,6 +12,8 @@ export declare function getRepeatAxesFromModelProperties(properties: Record<stri
 export type InstanceData = {
     id: string;
     sourceId: string;
+    clickable?: boolean;
+    locked?: boolean;
     position: [number, number, number];
     rotation: [number, number, number];
     scale: [number, number, number];
@@ -32,7 +34,9 @@ export declare function useInstanceCheck(id: string): boolean;
 export declare const GameInstance: React.ForwardRefExoticComponent<{
     id: string;
     sourceId?: string;
+    clickable?: boolean;
     modelUrl: string;
+    locked?: boolean;
     position: [number, number, number];
     rotation: [number, number, number];
     scale: [number, number, number];