react-three-game 0.0.80 → 0.0.82

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { default as GameCanvas } from './shared/GameCanvas';
 export type { GameCanvasProps } from './shared/GameCanvas';
+export { useBeforePhysicsStep, useAfterPhysicsStep, useRapier } from '@react-three/rapier';
 export { ground } from './helpers';
 export type { GroundOptions, Vec3 } from './helpers';
 export { sound as soundManager } from './helpers/SoundManager';
@@ -26,10 +27,11 @@ export type { Component, ComponentViewProps } from './tools/prefabeditor/compone
 export type { FieldDefinition, FieldType } from './tools/prefabeditor/components/Input';
 export type { Prefab, GameObject, ComponentData } from './tools/prefabeditor/types';
 export { findComponent, findComponentEntry, hasComponent } from './tools/prefabeditor/types';
-export { gameEvents, useGameEvent, getEntityIdFromRigidBody } from './tools/prefabeditor/GameEvents';
+export { gameEvents, useGameEvent, usePhysicsEvent, useClickEvent, getEntityIdFromRigidBody } from './tools/prefabeditor/GameEvents';
 export type { GameEventType, GameEventMap, GameEventPayload, PhysicsEventType, InteractionEventType, PhysicsEventPayload, ClickEventPayload } from './tools/prefabeditor/GameEvents';
 export { loadFiles } from './tools/dragdrop/DragDropLoader';
 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

@@ -1,5 +1,6 @@
 // Core
 export { default as GameCanvas } from './shared/GameCanvas';
+export { useBeforePhysicsStep, useAfterPhysicsStep, useRapier } from '@react-three/rapier';
 // Helpers
 export { ground } from './helpers';
 export { sound as soundManager } from './helpers/SoundManager';
@@ -22,7 +23,7 @@ export { createModelNode, createImageNode, } from './tools/prefabeditor/prefab';
 export { useAssetRuntime, useEntityRuntime, useEntityObjectRef, useEntityRigidBodyRef } from './tools/prefabeditor/runtimeContext';
 export { findComponent, findComponentEntry, hasComponent } from './tools/prefabeditor/types';
 // Game Events (physics + custom events)
-export { gameEvents, useGameEvent, getEntityIdFromRigidBody } from './tools/prefabeditor/GameEvents';
+export { gameEvents, useGameEvent, usePhysicsEvent, useClickEvent, getEntityIdFromRigidBody } from './tools/prefabeditor/GameEvents';
 // Asset Loading
 export { loadFiles } from './tools/dragdrop/DragDropLoader';
 export { loadModel, loadSound, loadTexture } from './tools/dragdrop/modelLoader';

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

@@ -40,6 +40,13 @@ export type GameEventType = keyof GameEventMap | (string & {});
 /** Get payload type for an event, or fallback to generic */
 export type GameEventPayload<T extends string> = T extends keyof GameEventMap ? GameEventMap[T] : Record<string, unknown>;
 type EventHandler<T = unknown> = (payload: T) => void;
+type UnknownEventPayload = Record<string, unknown>;
+declare function emitGameEvent<TType extends keyof GameEventMap>(type: TType, payload: GameEventMap[TType]): void;
+declare function emitGameEvent(type: string, payload: UnknownEventPayload): void;
+declare function onGameEvent<TType extends keyof GameEventMap>(type: TType, handler: EventHandler<GameEventMap[TType]>): () => void;
+declare function onGameEvent(type: string, handler: EventHandler<UnknownEventPayload>): () => void;
+declare function offGameEvent<TType extends keyof GameEventMap>(type: TType, handler: EventHandler<GameEventMap[TType]>): void;
+declare function offGameEvent(type: string, handler: EventHandler<UnknownEventPayload>): void;
 /**
  * Game event system for all game interactions.
  *
@@ -66,16 +73,16 @@ export declare const gameEvents: {
     /**
      * Emit an event to all subscribers
      */
-    emit<T extends string>(type: T, payload: GameEventPayload<T>): void;
+    emit: typeof emitGameEvent;
     /**
      * Subscribe to an event type
      * @returns Unsubscribe function
      */
-    on<T extends string>(type: T, handler: EventHandler<GameEventPayload<T>>): () => void;
+    on: typeof onGameEvent;
     /**
      * Unsubscribe from an event type
      */
-    off<T extends string>(type: T, handler: EventHandler<GameEventPayload<T>>): void;
+    off: typeof offGameEvent;
     /**
      * Remove all subscribers (useful for cleanup/reset)
      */
@@ -97,10 +104,22 @@ export declare const gameEvents: {
  *
  * // Custom event
  * useGameEvent('player:death', (payload) => {
- *   showGameOver(payload.cause);
+ *   const cause = typeof payload.cause === 'string' ? payload.cause : 'unknown';
+ *   showGameOver(cause);
  * }, []);
  */
-export declare function useGameEvent<T extends string>(type: T, handler: EventHandler<GameEventPayload<T>>, deps?: unknown[]): void;
+export declare function useGameEvent<TType extends keyof GameEventMap>(type: TType, handler: EventHandler<GameEventMap[TType]>, deps?: unknown[]): void;
+export declare function useGameEvent(type: string, handler: EventHandler<UnknownEventPayload>, deps?: unknown[]): void;
+/**
+ * React hook to subscribe to any physics event payload.
+ * Use this when the event name is dynamic but the payload comes from PhysicsComponent.
+ */
+export declare function usePhysicsEvent(type: string, handler: EventHandler<PhysicsEventPayload>, deps?: unknown[]): void;
+/**
+ * React hook to subscribe to click event payloads.
+ * Use this when the event name is dynamic but the payload comes from ClickComponent.
+ */
+export declare function useClickEvent(type: string, handler: EventHandler<ClickEventPayload>, deps?: unknown[]): void;
 /**
  * Helper to extract entity ID from Rapier collision data.
  * Entity IDs are stored in RigidBody userData.

package/dist/tools/prefabeditor/GameEvents.js

@@ -1,6 +1,40 @@
 import { useEffect, useCallback } from 'react';
 // Internal subscriber storage
 const subscribers = new Map();
+function emitGameEvent(type, payload) {
+    const handlers = subscribers.get(type);
+    if (handlers) {
+        handlers.forEach(handler => {
+            try {
+                handler(payload);
+            }
+            catch (e) {
+                console.error(`Error in gameEvents handler for ${type}:`, e);
+            }
+        });
+    }
+}
+function onGameEvent(type, handler) {
+    if (!subscribers.has(type)) {
+        subscribers.set(type, new Set());
+    }
+    subscribers.get(type).add(handler);
+    return () => {
+        var _a;
+        (_a = subscribers.get(type)) === null || _a === void 0 ? void 0 : _a.delete(handler);
+    };
+}
+function offGameEvent(type, handler) {
+    var _a;
+    (_a = subscribers.get(type)) === null || _a === void 0 ? void 0 : _a.delete(handler);
+}
+function useTypedGameEvent(type, handler, deps = []) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const stableHandler = useCallback(handler, deps);
+    useEffect(() => {
+        return onGameEvent(type, stableHandler);
+    }, [type, stableHandler]);
+}
 /**
  * Game event system for all game interactions.
  *
@@ -27,40 +61,16 @@ export const gameEvents = {
     /**
      * Emit an event to all subscribers
      */
-    emit(type, payload) {
-        const handlers = subscribers.get(type);
-        if (handlers) {
-            handlers.forEach(handler => {
-                try {
-                    handler(payload);
-                }
-                catch (e) {
-                    console.error(`Error in gameEvents handler for ${type}:`, e);
-                }
-            });
-        }
-    },
+    emit: emitGameEvent,
     /**
      * Subscribe to an event type
      * @returns Unsubscribe function
      */
-    on(type, handler) {
-        if (!subscribers.has(type)) {
-            subscribers.set(type, new Set());
-        }
-        subscribers.get(type).add(handler);
-        return () => {
-            var _a;
-            (_a = subscribers.get(type)) === null || _a === void 0 ? void 0 : _a.delete(handler);
-        };
-    },
+    on: onGameEvent,
     /**
      * Unsubscribe from an event type
      */
-    off(type, handler) {
-        var _a;
-        (_a = subscribers.get(type)) === null || _a === void 0 ? void 0 : _a.delete(handler);
-    },
+    off: offGameEvent,
     /**
      * Remove all subscribers (useful for cleanup/reset)
      */
@@ -75,27 +85,22 @@ export const gameEvents = {
         return ((_b = (_a = subscribers.get(type)) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 0) > 0;
     }
 };
+export function useGameEvent(type, handler, deps = []) {
+    useTypedGameEvent(type, handler, deps);
+}
 /**
- * React hook to subscribe to game events.
- * Automatically cleans up on unmount.
- *
- * @example
- * // Physics event
- * useGameEvent('sensor:enter', (payload) => {
- *   if (payload.sourceEntityId === 'coin') collectCoin();
- * }, []);
- *
- * // Custom event
- * useGameEvent('player:death', (payload) => {
- *   showGameOver(payload.cause);
- * }, []);
+ * React hook to subscribe to any physics event payload.
+ * Use this when the event name is dynamic but the payload comes from PhysicsComponent.
  */
-export function useGameEvent(type, handler, deps = []) {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const stableHandler = useCallback(handler, deps);
-    useEffect(() => {
-        return gameEvents.on(type, stableHandler);
-    }, [type, stableHandler]);
+export function usePhysicsEvent(type, handler, deps = []) {
+    useTypedGameEvent(type, handler, deps);
+}
+/**
+ * React hook to subscribe to click event payloads.
+ * Use this when the event name is dynamic but the payload comes from ClickComponent.
+ */
+export function useClickEvent(type, handler, deps = []) {
+    useTypedGameEvent(type, handler, deps);
 }
 // ============================================================================
 // Helpers

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -373,17 +373,21 @@ function renderCompositionNode(gameObject, ctx, childNodes) {
     return applyNodeComposition(gameObject, _jsxs(_Fragment, { children: [primaryContent, childNodes] }));
 }
 function renderNodePrimaryContent(gameObject, ctx) {
-    var _a;
+    var _a, _b;
     const geometry = findComponent(gameObject, "Geometry");
     const material = findComponent(gameObject, "Material");
     const model = findComponent(gameObject, "Model");
     const geometryDef = geometry && getComponentDef(geometry.type);
     const materialDef = material && getComponentDef(material.type);
     const modelDef = model && getComponentDef(model.type);
+    const geometryProperties = (_a = geometry === null || geometry === void 0 ? void 0 : geometry.properties) !== null && _a !== void 0 ? _a : {};
+    const meshVisible = geometryProperties.visible !== false;
+    const meshCastShadow = meshVisible && geometryProperties.castShadow !== false;
+    const meshReceiveShadow = meshVisible && geometryProperties.receiveShadow !== false;
     if ((geometry === null || geometry === void 0 ? void 0 : geometry.type) && (geometryDef === null || geometryDef === void 0 ? void 0 : geometryDef.View)) {
-        return (_jsxs("mesh", { castShadow: true, receiveShadow: true, children: [_jsx(geometryDef.View, { properties: geometry.properties }), material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, { properties: material.properties }, "material"))] }));
+        return (_jsxs("mesh", { visible: meshVisible, castShadow: meshCastShadow, receiveShadow: meshReceiveShadow, children: [_jsx(geometryDef.View, { properties: geometry.properties }), material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, { properties: material.properties }, "material"))] }));
     }
-    if ((model === null || model === void 0 ? void 0 : model.type) && (modelDef === null || modelDef === void 0 ? void 0 : modelDef.View) && !((_a = model.properties) === null || _a === void 0 ? void 0 : _a.instanced) && isNodeReady(gameObject, ctx.loadedModels)) {
+    if ((model === null || model === void 0 ? void 0 : model.type) && (modelDef === null || modelDef === void 0 ? void 0 : modelDef.View) && !((_b = model.properties) === null || _b === void 0 ? void 0 : _b.instanced) && isNodeReady(gameObject, ctx.loadedModels)) {
         return _jsx(modelDef.View, { properties: model.properties });
     }
     return null;

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

@@ -1,36 +1,66 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PerspectiveCamera, useHelper } from '@react-three/drei';
+import { OrthographicCamera, PerspectiveCamera, useHelper } from '@react-three/drei';
 import { useRef } from 'react';
 import { CameraHelper } from 'three';
-import { useFrame } from '@react-three/fiber';
+import { useFrame, useThree } from '@react-three/fiber';
 import { useEntityRuntime } from '../runtimeContext';
-import { FieldGroup, NumberField } from './Input';
+import { FieldGroup, NumberField, SelectField } from './Input';
+const CAMERA_PROJECTION_OPTIONS = [
+    { value: 'perspective', label: 'Perspective' },
+    { value: 'orthographic', label: 'Orthographic' },
+];
 const cameraDefaults = {
+    projection: 'perspective',
     fov: 50,
     near: 0.1,
     zoom: 1,
     far: 1000,
+    orthographicSize: 10,
 };
 function CameraComponentEditor({ component, onUpdate }) {
+    var _a;
     const values = Object.assign(Object.assign({}, cameraDefaults), component.properties);
-    return (_jsxs(FieldGroup, { children: [_jsx(NumberField, { name: "fov", label: "FOV", values: values, onChange: onUpdate, fallback: 50, min: 1, max: 179, step: 1 }), _jsx(NumberField, { name: "near", label: "Near", values: values, onChange: onUpdate, fallback: 0.1, min: 0.001, step: 0.1 }), _jsx(NumberField, { name: "zoom", label: "Zoom", values: values, onChange: onUpdate, fallback: 1, min: 0.01, step: 0.1 }), _jsx(NumberField, { name: "far", label: "Far", values: values, onChange: onUpdate, fallback: 1000, min: 0.1, step: 1 })] }));
+    const projection = (_a = values.projection) !== null && _a !== void 0 ? _a : cameraDefaults.projection;
+    return (_jsxs(FieldGroup, { children: [_jsx(SelectField, { name: "projection", label: "Projection", values: values, onChange: onUpdate, fallback: cameraDefaults.projection, options: [...CAMERA_PROJECTION_OPTIONS] }), projection === 'perspective' ? (_jsx(NumberField, { name: "fov", label: "FOV", values: values, onChange: onUpdate, fallback: 50, min: 1, max: 179, step: 1 })) : null, projection === 'orthographic' ? (_jsx(NumberField, { name: "orthographicSize", label: "Ortho Size", values: values, onChange: onUpdate, fallback: cameraDefaults.orthographicSize, min: 0.01, step: 0.1 })) : null, _jsx(NumberField, { name: "near", label: "Near", values: values, onChange: onUpdate, fallback: 0.1, min: 0.001, step: 0.1 }), _jsx(NumberField, { name: "zoom", label: "Zoom", values: values, onChange: onUpdate, fallback: 1, min: 0.01, step: 0.1 }), _jsx(NumberField, { name: "far", label: "Far", values: values, onChange: onUpdate, fallback: 1000, min: 0.1, step: 1 })] }));
 }
 function CameraComponentView({ properties, children }) {
+    var _a;
     const { editMode, isSelected } = useEntityRuntime();
+    const { size } = useThree();
     const merged = Object.assign(Object.assign({}, cameraDefaults), properties);
+    const projection = (_a = merged.projection) !== null && _a !== void 0 ? _a : cameraDefaults.projection;
     const fov = merged.fov;
     const near = merged.near;
     const zoom = merged.zoom;
     const far = merged.far;
-    const cameraRef = useRef(null);
-    useHelper(editMode && isSelected ? cameraRef : null, CameraHelper);
+    const orthographicSize = merged.orthographicSize;
+    const aspect = size.height > 0 ? size.width / size.height : 1;
+    const halfHeight = orthographicSize / 2;
+    const halfWidth = halfHeight * aspect;
+    const perspectiveCameraRef = useRef(null);
+    const orthographicCameraRef = useRef(null);
+    const activeCameraRef = projection === 'orthographic'
+        ? orthographicCameraRef
+        : perspectiveCameraRef;
+    useHelper(editMode && isSelected ? activeCameraRef : null, CameraHelper);
     useFrame(() => {
-        if (cameraRef.current && editMode && isSelected) {
-            cameraRef.current.updateProjectionMatrix();
-            cameraRef.current.updateMatrixWorld();
+        if (!editMode || !isSelected)
+            return;
+        if (projection === 'orthographic' && orthographicCameraRef.current) {
+            orthographicCameraRef.current.updateProjectionMatrix();
+            orthographicCameraRef.current.updateMatrixWorld();
+            return;
+        }
+        if (perspectiveCameraRef.current) {
+            perspectiveCameraRef.current.updateProjectionMatrix();
+            perspectiveCameraRef.current.updateMatrixWorld();
         }
     });
-    return (_jsxs(PerspectiveCamera, { ref: cameraRef, makeDefault: !editMode, fov: fov, near: near, zoom: zoom, far: far, children: [editMode ? (_jsxs("group", { children: [_jsxs("mesh", { children: [_jsx("boxGeometry", { args: [0.3, 0.3, 0.5] }), _jsx("meshBasicMaterial", { color: '#22d3ee', wireframe: true })] }), _jsxs("mesh", { position: [0, 0, -0.25], rotation: [Math.PI / 2, 0, 0], children: [_jsx("coneGeometry", { args: [0.08, 0.16, 16] }), _jsx("meshBasicMaterial", { color: '#22d3ee', wireframe: true })] })] })) : null, children] }));
+    const helperContent = editMode ? (_jsxs("group", { children: [_jsxs("mesh", { children: [_jsx("boxGeometry", { args: [0.3, 0.3, 0.5] }), _jsx("meshBasicMaterial", { color: '#22d3ee', wireframe: true })] }), _jsxs("mesh", { position: [0, 0, -0.25], rotation: [Math.PI / 2, 0, 0], children: [_jsx("coneGeometry", { args: [0.08, 0.16, 16] }), _jsx("meshBasicMaterial", { color: '#22d3ee', wireframe: true })] })] })) : null;
+    if (projection === 'orthographic') {
+        return (_jsxs(OrthographicCamera, { ref: orthographicCameraRef, makeDefault: !editMode, near: near, zoom: zoom, far: far, left: -halfWidth, right: halfWidth, top: halfHeight, bottom: -halfHeight, children: [helperContent, children] }));
+    }
+    return (_jsxs(PerspectiveCamera, { ref: perspectiveCameraRef, makeDefault: !editMode, fov: fov, near: near, zoom: zoom, far: far, children: [helperContent, children] }));
 }
 const CameraComponent = {
     name: 'Camera',

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

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useRef } from 'react';
 import { gameEvents } from '../GameEvents';
 import { useEntityRuntime } from '../runtimeContext';
-import { FieldGroup, StringField } from './Input';
+import { EventField, FieldGroup } from './Input';
 function ClickComponentEditor({ component, onUpdate }) {
-    return (_jsxs(FieldGroup, { children: [_jsx("div", { style: { fontSize: 12, opacity: 0.8 }, children: "Emits a game event in play mode when this entity is clicked." }), _jsx(StringField, { name: "eventName", label: "Emit Event", values: component.properties, onChange: onUpdate, placeholder: "click" })] }));
+    return (_jsxs(FieldGroup, { children: [_jsx("div", { style: { fontSize: 12, opacity: 0.8 }, children: "Emits a game event in play mode when this entity is clicked." }), _jsx(EventField, { name: "eventName", label: "Emit Event", values: component.properties, onChange: onUpdate, placeholder: "click" })] }));
 }
 function ClickComponentView({ children, properties }) {
     const clickValid = useRef(false);

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FieldGroup, NumberField, SelectField } from "./Input";
+import { BooleanField, FieldGroup, NumberField, SelectField } from "./Input";
 const GEOMETRY_ARGS = {
     box: {
         fields: [
@@ -61,7 +61,7 @@ function GeometryComponentEditor({ component, onUpdate, }) {
                 ] }), schema.fields.map((field, index) => {
                 var _a;
                 return (_jsx(NumberField, { name: field.name, label: field.label, values: { [field.name]: (_a = args[index]) !== null && _a !== void 0 ? _a : field.defaultValue }, onChange: (next) => updateArg(index, next[field.name]), fallback: field.defaultValue, min: field.min, step: field.step }, field.name));
-            })] }));
+            }), _jsx(BooleanField, { name: "visible", label: "Visible", values: component.properties, onChange: handleChange, fallback: true }), _jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: component.properties, onChange: handleChange, fallback: true }), _jsx(BooleanField, { name: "receiveShadow", label: "Receive Shadow", values: component.properties, onChange: handleChange, fallback: true })] }));
 }
 // View for Geometry component
 function GeometryComponentView({ properties, children }) {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export type FieldType = 'vector3' | 'number' | 'string' | 'color' | 'boolean' | 'select';
+export type FieldType = 'vector3' | 'number' | 'string' | 'color' | 'boolean' | 'select' | 'node' | 'event';
 interface BaseFieldDefinition {
     name: string;
     label: string;
@@ -31,6 +31,15 @@ interface SelectFieldDefinition extends BaseFieldDefinition {
         label: string;
     }[];
 }
+interface NodeFieldDefinition extends BaseFieldDefinition {
+    type: 'node';
+    placeholder?: string;
+    includeRoot?: boolean;
+}
+interface EventFieldDefinition extends BaseFieldDefinition {
+    type: 'event';
+    placeholder?: string;
+}
 interface CustomFieldDefinition extends BaseFieldDefinition {
     type: 'custom';
     render: (props: {
@@ -40,7 +49,7 @@ interface CustomFieldDefinition extends BaseFieldDefinition {
         onChangeMultiple: (values: Record<string, any>) => void;
     }) => React.ReactNode;
 }
-export type FieldDefinition = Vector3FieldDefinition | NumberFieldDefinition | StringFieldDefinition | ColorFieldDefinition | BooleanFieldDefinition | SelectFieldDefinition | CustomFieldDefinition;
+export type FieldDefinition = Vector3FieldDefinition | NumberFieldDefinition | StringFieldDefinition | ColorFieldDefinition | BooleanFieldDefinition | SelectFieldDefinition | NodeFieldDefinition | EventFieldDefinition | CustomFieldDefinition;
 declare const styles: {
     input: React.CSSProperties;
     label: React.CSSProperties;
@@ -79,6 +88,19 @@ export declare function StringInput({ label, value, onChange, placeholder }: {
     onChange: (value: string) => void;
     placeholder?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function NodeInput({ label, value, onChange, placeholder, includeRoot, }: {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    includeRoot?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function EventInput({ label, value, onChange, placeholder, }: {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function BooleanInput({ label, value, onChange }: {
     label?: string;
     value: boolean;
@@ -157,6 +179,10 @@ export declare function StringField({ name, label, values, onChange, fallback, p
 export declare function ColorField({ name, label, values, onChange, fallback, }: BoundColorFieldProps): import("react/jsx-runtime").JSX.Element;
 export declare function BooleanField({ name, label, values, onChange, fallback, }: BoundBooleanFieldProps): import("react/jsx-runtime").JSX.Element;
 export declare function SelectField({ name, label, values, onChange, fallback, options, }: BoundSelectFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function NodeField({ name, label, values, onChange, fallback, }: BoundStringFieldProps & {
+    fallback?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function EventField({ name, label, values, onChange, fallback, placeholder, }: BoundStringFieldProps): import("react/jsx-runtime").JSX.Element;
 export declare function Vector3Field({ name, label, values, onChange, fallback, snap, labelExtra, }: BoundVector3FieldProps): import("react/jsx-runtime").JSX.Element;
 interface FieldRendererProps {
     fields: FieldDefinition[];

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { colors } from '../styles';
+import { useOptionalPrefabStoreApi } from '../prefabStore';
 // ============================================================================
 // Shared Styles (derived from shared color tokens)
 // ============================================================================
@@ -277,6 +278,124 @@ export function ColorInput({ label, value, onChange }) {
 export function StringInput({ label, value, onChange, placeholder }) {
     return (_jsxs("div", { children: [label && _jsx(Label, { children: label }), _jsx("input", { type: "text", style: styles.input, value: value, onChange: e => onChange(e.target.value), placeholder: placeholder })] }));
 }
+function useOptionalPrefabSnapshot() {
+    const store = useOptionalPrefabStoreApi();
+    const [state, setState] = useState(() => { var _a; return (_a = store === null || store === void 0 ? void 0 : store.getState()) !== null && _a !== void 0 ? _a : null; });
+    useEffect(() => {
+        if (!store) {
+            setState(null);
+            return;
+        }
+        setState(store.getState());
+        return store.subscribe(nextState => setState(nextState));
+    }, [store]);
+    return state;
+}
+function SearchSuggestionList({ query, options, onSelect, emptyMessage, }) {
+    const normalizedQuery = query.trim().toLowerCase();
+    const filtered = useMemo(() => {
+        if (!normalizedQuery)
+            return options.slice(0, 8);
+        return options.filter(option => option.searchText.includes(normalizedQuery)).slice(0, 8);
+    }, [normalizedQuery, options]);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsx("input", { type: "text", style: Object.assign(Object.assign({}, styles.input), { width: '100%', textAlign: 'left' }), value: query, onChange: () => undefined, readOnly: true, "aria-hidden": true, tabIndex: -1, hidden: true }), _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 4,
+                    maxHeight: 160,
+                    overflowY: 'auto',
+                    border: `1px solid ${colors.border}`,
+                    borderRadius: 3,
+                    background: colors.bgSurface,
+                    padding: 4,
+                }, children: filtered.length === 0 ? (_jsx("div", { style: { fontSize: 11, color: colors.textMuted, padding: '4px 6px' }, children: emptyMessage })) : filtered.map(option => (_jsxs("button", { type: "button", onClick: () => onSelect(option.value), style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'flex-start',
+                        gap: 2,
+                        border: `1px solid ${colors.border}`,
+                        borderRadius: 3,
+                        background: colors.bgInput,
+                        color: colors.text,
+                        padding: '6px 8px',
+                        cursor: 'pointer',
+                        textAlign: 'left',
+                    }, children: [_jsx("span", { style: { fontSize: 11, fontWeight: 500 }, children: option.label }), option.description ? (_jsx("span", { style: { fontSize: 10, color: colors.textMuted, fontFamily: 'monospace' }, children: option.description })) : null] }, option.value))) })] }));
+}
+export function NodeInput({ label, value, onChange, placeholder, includeRoot = true, }) {
+    const prefabState = useOptionalPrefabSnapshot();
+    const [query, setQuery] = useState('');
+    const options = useMemo(() => {
+        var _a;
+        const nodesById = (_a = prefabState === null || prefabState === void 0 ? void 0 : prefabState.nodesById) !== null && _a !== void 0 ? _a : {};
+        const rootId = prefabState === null || prefabState === void 0 ? void 0 : prefabState.rootId;
+        return Object.values(nodesById)
+            .filter(node => includeRoot || node.id !== rootId)
+            .map(node => {
+            const nodeName = typeof node.name === 'string' && node.name.trim().length > 0 ? node.name.trim() : '(unnamed)';
+            return {
+                value: node.id,
+                label: nodeName,
+                description: node.id,
+                searchText: `${nodeName} ${node.id}`.toLowerCase(),
+            };
+        })
+            .sort((left, right) => left.label.localeCompare(right.label) || left.value.localeCompare(right.value));
+    }, [includeRoot, prefabState === null || prefabState === void 0 ? void 0 : prefabState.nodesById, prefabState === null || prefabState === void 0 ? void 0 : prefabState.rootId]);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx(StringInput, { label: label, value: value, onChange: onChange, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Node id' }), options.length > 0 ? (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsx("input", { type: "text", style: Object.assign(Object.assign({}, styles.input), { width: '100%', textAlign: 'left' }), value: query, onChange: e => setQuery(e.target.value), placeholder: "Search nodes by name or id" }), _jsx(SearchSuggestionList, { query: query, options: options, onSelect: (nextValue) => {
+                            onChange(nextValue);
+                            setQuery('');
+                        }, emptyMessage: "No matching nodes." })] })) : null] }));
+}
+const BUILT_IN_EVENT_OPTIONS = [
+    'sensor:enter',
+    'sensor:exit',
+    'collision:enter',
+    'collision:exit',
+    'click',
+].map(eventName => ({
+    value: eventName,
+    label: eventName,
+    searchText: eventName.toLowerCase(),
+}));
+export function EventInput({ label, value, onChange, placeholder, }) {
+    const prefabState = useOptionalPrefabSnapshot();
+    const [query, setQuery] = useState('');
+    const options = useMemo(() => {
+        var _a;
+        const authoredEvents = new Map();
+        Object.values((_a = prefabState === null || prefabState === void 0 ? void 0 : prefabState.nodesById) !== null && _a !== void 0 ? _a : {}).forEach(node => {
+            var _a;
+            Object.values((_a = node.components) !== null && _a !== void 0 ? _a : {}).forEach(component => {
+                var _a;
+                Object.entries((_a = component === null || component === void 0 ? void 0 : component.properties) !== null && _a !== void 0 ? _a : {}).forEach(([key, entry]) => {
+                    var _a, _b;
+                    if (typeof entry !== 'string')
+                        return;
+                    if (!(key === 'eventName' || key.endsWith('EventName')))
+                        return;
+                    const eventName = entry.trim();
+                    if (!eventName)
+                        return;
+                    authoredEvents.set(eventName, {
+                        value: eventName,
+                        label: eventName,
+                        description: `${(_a = component === null || component === void 0 ? void 0 : component.type) !== null && _a !== void 0 ? _a : 'Component'} -> ${key}`,
+                        searchText: `${eventName} ${(_b = component === null || component === void 0 ? void 0 : component.type) !== null && _b !== void 0 ? _b : ''} ${key}`.toLowerCase(),
+                    });
+                });
+            });
+        });
+        const merged = new Map();
+        BUILT_IN_EVENT_OPTIONS.forEach(option => merged.set(option.value, option));
+        authoredEvents.forEach((option, key) => merged.set(key, option));
+        return [...merged.values()].sort((left, right) => left.value.localeCompare(right.value));
+    }, [prefabState === null || prefabState === void 0 ? void 0 : prefabState.nodesById]);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx(StringInput, { label: label, value: value, onChange: onChange, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Event name' }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsx("input", { type: "text", style: Object.assign(Object.assign({}, styles.input), { width: '100%', textAlign: 'left' }), value: query, onChange: e => setQuery(e.target.value), placeholder: "Search built-in and authored events" }), _jsx(SearchSuggestionList, { query: query, options: options, onSelect: (nextValue) => {
+                            onChange(nextValue);
+                            setQuery('');
+                        }, emptyMessage: "No matching events." })] })] }));
+}
 export function BooleanInput({ label, value, onChange }) {
     return (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [label && _jsx(Label, { children: label }), _jsx("input", { type: "checkbox", style: {
                     height: 16,
@@ -347,6 +466,14 @@ export function SelectField({ name, label, values, onChange, fallback, options,
     var _a, _b, _c, _d;
     return (_jsx(SelectInput, { label: label, value: (_d = (_b = (_a = values[name]) !== null && _a !== void 0 ? _a : fallback) !== null && _b !== void 0 ? _b : (_c = options[0]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '', onChange: bindFieldChange(name, onChange), options: options }));
 }
+export function NodeField({ name, label, values, onChange, fallback = '', }) {
+    var _a;
+    return (_jsx(NodeInput, { label: label, value: (_a = values[name]) !== null && _a !== void 0 ? _a : fallback, onChange: bindFieldChange(name, onChange) }));
+}
+export function EventField({ name, label, values, onChange, fallback = '', placeholder, }) {
+    var _a;
+    return (_jsx(EventInput, { label: label, value: (_a = values[name]) !== null && _a !== void 0 ? _a : fallback, onChange: bindFieldChange(name, onChange), placeholder: placeholder }));
+}
 export function Vector3Field({ name, label, values, onChange, fallback = [0, 0, 0], snap, labelExtra, }) {
     var _a;
     return (_jsx(Vector3Input, { label: label, value: (_a = values[name]) !== null && _a !== void 0 ? _a : fallback, onChange: bindFieldChange(name, onChange), snap: snap, labelExtra: labelExtra }));
@@ -371,6 +498,10 @@ export function FieldRenderer({ fields, values, onChange }) {
                     return (_jsx(BooleanInput, { label: field.label, value: value !== null && value !== void 0 ? value : false, onChange: v => updateField(field.name, v) }, field.name));
                 case 'select':
                     return (_jsx(SelectInput, { label: field.label, value: (_b = value !== null && value !== void 0 ? value : (_a = field.options[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '', onChange: v => updateField(field.name, v), options: field.options }, field.name));
+                case 'node':
+                    return (_jsx(NodeInput, { label: field.label, value: value !== null && value !== void 0 ? value : '', onChange: v => updateField(field.name, v), placeholder: field.placeholder, includeRoot: field.includeRoot }, field.name));
+                case 'event':
+                    return (_jsx(EventInput, { label: field.label, value: value !== null && value !== void 0 ? value : '', onChange: v => updateField(field.name, v), placeholder: field.placeholder }, field.name));
                 case 'custom':
                     return (_jsxs("div", { children: [field.label && _jsx(Label, { children: field.label }), field.render({
                                 value,

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

@@ -4,7 +4,7 @@ import { useContext, useMemo } from 'react';
 import { BooleanField, FieldGroup, Label, ListEditor, NumberInput, SelectInput } from './Input';
 import { useAssetRuntime } from '../runtimeContext';
 import { EditorContext } from '../PrefabEditor';
-import { DEFAULT_REPEAT_AXES, getRepeatAxesFromModelProperties, normalizeRepeatAxes } from '../InstanceProvider';
+import { getRepeatAxesFromModelProperties, normalizeRepeatAxes } from '../InstanceProvider';
 import { colors } from '../styles';
 const AXIS_OPTIONS = [
     { value: 'x', label: 'X' },
@@ -91,12 +91,7 @@ const ModelComponent = {
     name: 'Model',
     Editor: ModelComponentEditor,
     View: ModelComponentView,
-    defaultProperties: {
-        filename: '',
-        instanced: false,
-        repeat: false,
-        repeatAxes: DEFAULT_REPEAT_AXES
-    },
+    defaultProperties: {},
     getAssetRefs: (properties) => {
         if (properties.filename)
             return [{ type: 'model', path: properties.filename }];

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

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { CapsuleCollider, RigidBody, useRapier } from "@react-three/rapier";
 import { useRef, useEffect, useCallback } from 'react';
 import { useAssetRuntime, useEntityRuntime } from "../runtimeContext";
-import { BooleanField, FieldGroup, ListEditor, NumberField, SelectField, SelectInput, StringInput, Vector3Field } from "./Input";
+import { BooleanField, EventInput, FieldGroup, ListEditor, NumberField, SelectField, SelectInput, Vector3Field } from "./Input";
 import { gameEvents, getEntityIdFromRigidBody } from "../GameEvents";
 import { colors } from "../styles";
 export function isPhysicsProps(v) {
@@ -103,7 +103,7 @@ function PhysicsEventBindingsEditor({ values, onChange, }) {
                                     cursor: 'pointer',
                                     padding: 0,
                                     flexShrink: 0,
-                                }, title: "Remove physics event", children: "\u00D7" })] }), _jsx(StringInput, { label: "Event Name", value: (_a = values[option.key]) !== null && _a !== void 0 ? _a : option.defaultName, onChange: (eventName) => updateEventName(option.key, eventName), placeholder: option.defaultName })] }, option.key));
+                                }, title: "Remove physics event", children: "\u00D7" })] }), _jsx(EventInput, { label: "Event Name", value: (_a = values[option.key]) !== null && _a !== void 0 ? _a : option.defaultName, onChange: (eventName) => updateEventName(option.key, eventName), placeholder: option.defaultName })] }, option.key));
         } }));
 }
 function LockedAxisField({ label, name, values, onChange, }) {

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

@@ -5,7 +5,7 @@ import { SoundPicker } from '../../assetviewer/page';
 import { sound as soundManager } from '../../../helpers/SoundManager';
 import { gameEvents } from '../GameEvents';
 import { useAssetRuntime, useEntityRuntime } from '../runtimeContext';
-import { BooleanField, FieldGroup, FieldRenderer, ListEditor, NumberField, SelectField, StringField } from './Input';
+import { BooleanField, EventField, FieldGroup, FieldRenderer, ListEditor, NumberField, SelectField } from './Input';
 import { colors } from '../styles';
 import { AudioListener } from 'three';
 const CLIP_MODE_OPTIONS = [
@@ -84,7 +84,7 @@ function SoundComponentEditor({ component, onUpdate, basePath = '' }) {
     const removeClip = (index) => {
         setClips(clips.filter((_, clipIndex) => clipIndex !== index));
     };
-    return (_jsxs(FieldGroup, { children: [_jsx(StringField, { name: "eventName", label: "Listen Event", values: component.properties, onChange: onUpdate, placeholder: "click" }), _jsx(FieldRenderer, { fields: [
+    return (_jsxs(FieldGroup, { children: [_jsx(EventField, { name: "eventName", label: "Listen Event", values: component.properties, onChange: onUpdate, placeholder: "click" }), _jsx(FieldRenderer, { fields: [
                     {
                         name: 'clipMode',
                         label: 'Clip Mode',

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

@@ -48,10 +48,6 @@ function TransformComponentEditor({ component, onUpdate }) {
 const TransformComponent = {
     name: 'Transform',
     Editor: TransformComponentEditor,
-    defaultProperties: {
-        position: [0, 0, 0],
-        rotation: [0, 0, 0],
-        scale: [1, 1, 1]
-    }
+    defaultProperties: {}
 };
 export default TransformComponent;

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

@@ -12,11 +12,11 @@ export interface AssetRuntime {
     getTexture: (path: string) => Texture | null;
     getSound: (path: string) => AudioBuffer | null;
     getAssetRevision: () => string;
-}
-export interface AssetRuntimeContextValue extends AssetRuntime {
     getObject: (id: string) => Object3D | null;
     getRigidBody: (id: string) => any;
 }
+export interface AssetRuntimeContextValue extends AssetRuntime {
+}
 export interface EntityRuntime {
     nodeId: string;
     editMode?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.80",
+  "version": "0.0.82",
   "description": "high performance 3D game engine built in React",
   "main": "dist/index.js",
   "module": "dist/index.js",