react-three-game 0.0.79 → 0.0.81

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,42 +1,72 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { PerspectiveCamera, useHelper } from '@react-three/drei';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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(_Fragment, { children: [_jsx(PerspectiveCamera, { ref: cameraRef, makeDefault: !editMode, fov: fov, near: near, zoom: zoom, far: far }), 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',
     Editor: CameraComponentEditor,
     View: CameraComponentView,
-    composition: 'sibling',
+    composition: 'wrap',
     defaultProperties: cameraDefaults,
 };
 export default CameraComponent;

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.79",
+  "version": "0.0.81",
   "description": "high performance 3D game engine built in React",
   "main": "dist/index.js",
   "module": "dist/index.js",