react-three-game 0.0.68 → 0.0.70

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

@@ -198,7 +198,7 @@ const MaterialComponent = {
     name: 'Material',
     Editor: MaterialComponentEditor,
     View: MaterialComponentView,
-    nonComposable: true,
+    isWrapper: true,
     defaultProperties: {
         materialType: 'standard',
         color: '#ffffff',
@@ -208,6 +208,14 @@ const MaterialComponent = {
         opacity: 1,
         metalness: 0,
         roughness: 1
-    }
+    },
+    getAssetRefs: (properties) => {
+        const refs = [];
+        if (properties.texture)
+            refs.push({ type: 'texture', path: properties.texture });
+        if (properties.normalMapTexture)
+            refs.push({ type: 'texture', path: properties.normalMapTexture });
+        return refs;
+    },
 };
 export default MaterialComponent;

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ModelPicker } from '../../assetviewer/page';
 import { useContext, useMemo } from 'react';
-import { BooleanField, FieldGroup, Label, NumberInput, SelectInput } from './Input';
-import { EditorContext } from '../EditorContext';
+import { BooleanField, FieldGroup, Label, ListEditor, NumberInput, SelectInput } from './Input';
+import { EditorContext } from '../PrefabEditor';
 import { DEFAULT_REPEAT_AXES, getRepeatAxesFromModelProperties, normalizeRepeatAxes } from '../InstanceProvider';
 import { colors } from '../styles';
 const AXIS_OPTIONS = [
@@ -18,12 +18,10 @@ function quantize(value, step) {
     return Math.round(value / step) * step;
 }
 function RepeatAxisEditor({ axes, onChange, positionSnap, }) {
-    const addAxis = () => {
-        const used = new Set(axes.map(axis => axis.axis));
-        const nextAxis = AXIS_OPTIONS.find(option => !used.has(option.value));
-        if (!nextAxis)
+    const addAxis = (axisValue) => {
+        if (!axisValue)
             return;
-        onChange([...axes, { axis: nextAxis.value, count: 1, offset: 1 }]);
+        onChange([...axes, { axis: axisValue, count: 1, offset: 1 }]);
     };
     const updateAxis = (index, patch) => {
         const nextAxes = axes.map((axis, axisIndex) => axisIndex === index ? Object.assign(Object.assign({}, axis), patch) : axis);
@@ -32,41 +30,30 @@ function RepeatAxisEditor({ axes, onChange, positionSnap, }) {
     const removeAxis = (index) => {
         onChange(axes.filter((_, axisIndex) => axisIndex !== index));
     };
-    const canAddAxis = axes.length < AXIS_OPTIONS.length;
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx(Label, { children: "Repeat Axes" }), _jsx("button", { type: "button", onClick: addAxis, disabled: !canAddAxis, style: {
-                            width: 22,
-                            height: 22,
-                            borderRadius: 3,
-                            border: `1px solid ${canAddAxis ? colors.accentBorder : colors.border}`,
-                            background: canAddAxis ? colors.accentBg : colors.bgSurface,
-                            color: canAddAxis ? colors.accent : colors.textMuted,
-                            cursor: canAddAxis ? 'pointer' : 'not-allowed',
-                            fontSize: 14,
-                            lineHeight: 1,
-                            padding: 0,
-                        }, title: canAddAxis ? 'Add repeat axis' : 'All axes already in use', children: "+" })] }), axes.map((axisConfig, index) => {
-                const usedByOthers = new Set(axes.filter((_, axisIndex) => axisIndex !== index).map(axis => axis.axis));
-                const axisOptions = AXIS_OPTIONS.filter(option => option.value === axisConfig.axis || !usedByOthers.has(option.value));
-                return (_jsxs("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: 6,
-                        padding: 8,
-                        border: `1px solid ${colors.border}`,
-                        borderRadius: 4,
-                        background: colors.bgSurface,
-                    }, children: [_jsxs("div", { style: { display: 'flex', gap: 6, alignItems: 'end' }, children: [_jsx("div", { style: { flex: 1, minWidth: 0 }, children: _jsx(SelectInput, { label: "Axis", value: axisConfig.axis, onChange: (axis) => updateAxis(index, { axis: axis }), options: axisOptions }) }), index > 0 ? (_jsx("button", { type: "button", onClick: () => removeAxis(index), style: {
-                                        height: 24,
-                                        width: 28,
-                                        borderRadius: 3,
-                                        border: `1px solid ${colors.border}`,
-                                        background: colors.bgInput,
-                                        color: colors.text,
-                                        cursor: 'pointer',
-                                        padding: 0,
-                                        flexShrink: 0,
-                                    }, title: "Remove repeat axis", children: "\u00D7" })) : null] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Count" }), _jsx(NumberInput, { value: axisConfig.count, onChange: (count) => updateAxis(index, { count: Math.max(1, Math.floor(count)) }), step: 1, min: 1, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] }), _jsxs("div", { children: [_jsx(Label, { children: "Offset" }), _jsx(NumberInput, { value: axisConfig.offset, onChange: (offset) => updateAxis(index, { offset: quantize(offset, positionSnap) }), step: positionSnap > 0 ? positionSnap : 0.1, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] })] })] }, `${axisConfig.axis}-${index}`));
-            })] }));
+    const availableAxisOptions = AXIS_OPTIONS.filter(option => !axes.some(axis => axis.axis === option.value));
+    return (_jsx(ListEditor, { label: "Repeat Axes", items: axes, onAdd: addAxis, addOptions: availableAxisOptions, canAdd: availableAxisOptions.length > 0, emptyMessage: "No repeat axes added.", addButtonTitle: "Add repeat axis", addDisabledTitle: "All axes already in use", renderItem: (axisConfig, index) => {
+            const usedByOthers = new Set(axes.filter((_, axisIndex) => axisIndex !== index).map(axis => axis.axis));
+            const axisOptions = AXIS_OPTIONS.filter(option => option.value === axisConfig.axis || !usedByOthers.has(option.value));
+            return (_jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 6,
+                    padding: 8,
+                    border: `1px solid ${colors.border}`,
+                    borderRadius: 4,
+                    background: colors.bgSurface,
+                }, children: [_jsxs("div", { style: { display: 'flex', gap: 6, alignItems: 'end' }, children: [_jsx("div", { style: { flex: 1, minWidth: 0 }, children: _jsx(SelectInput, { label: "Axis", value: axisConfig.axis, onChange: (axis) => updateAxis(index, { axis: axis }), options: axisOptions }) }), _jsx("button", { type: "button", onClick: () => removeAxis(index), style: {
+                                    height: 24,
+                                    width: 28,
+                                    borderRadius: 3,
+                                    border: `1px solid ${colors.border}`,
+                                    background: colors.bgInput,
+                                    color: colors.text,
+                                    cursor: 'pointer',
+                                    padding: 0,
+                                    flexShrink: 0,
+                                }, title: "Remove repeat axis", children: "\u00D7" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Count" }), _jsx(NumberInput, { value: axisConfig.count, onChange: (count) => updateAxis(index, { count: Math.max(1, Math.floor(count)) }), step: 1, min: 1, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] }), _jsxs("div", { children: [_jsx(Label, { children: "Offset" }), _jsx(NumberInput, { value: axisConfig.offset, onChange: (offset) => updateAxis(index, { offset: quantize(offset, positionSnap) }), step: positionSnap > 0 ? positionSnap : 0.1, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] })] })] }, `${axisConfig.axis}-${index}`));
+        } }));
 }
 function ModelComponentEditor({ component, node, onUpdate, basePath = "" }) {
     var _a;
@@ -107,6 +94,11 @@ const ModelComponent = {
         instanced: false,
         repeat: false,
         repeatAxes: DEFAULT_REPEAT_AXES
-    }
+    },
+    getAssetRefs: (properties) => {
+        if (properties.filename)
+            return [{ type: 'model', path: properties.filename }];
+        return [];
+    },
 };
 export default ModelComponent;

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

@@ -1,9 +1,18 @@
 import type { RigidBodyOptions } from "@react-three/rapier";
 import { Component } from "./ComponentRegistry";
-export type PhysicsProps = RigidBodyOptions & {
+type PhysicsColliderType = NonNullable<RigidBodyOptions['colliders']> | 'capsule';
+export type PhysicsProps = Omit<RigidBodyOptions, 'colliders'> & {
+    colliders?: PhysicsColliderType;
     activeCollisionTypes?: 'all' | undefined;
     linearVelocity?: [number, number, number];
     angularVelocity?: [number, number, number];
+    capsuleRadius?: number;
+    capsuleHalfHeight?: number;
+    sensorEnterEventName?: string;
+    sensorExitEventName?: string;
+    collisionEnterEventName?: string;
+    collisionExitEventName?: string;
 };
+export declare function isPhysicsProps(v: any): v is PhysicsProps;
 declare const PhysicsComponent: Component;
 export default PhysicsComponent;

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

@@ -9,22 +9,111 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RigidBody, useRapier } from "@react-three/rapier";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CapsuleCollider, RigidBody, useRapier } from "@react-three/rapier";
 import { useRef, useEffect, useCallback } from 'react';
-import { BooleanField, FieldGroup, NumberField, SelectField, Vector3Field } from "./Input";
+import { BooleanField, FieldGroup, ListEditor, NumberField, SelectField, SelectInput, StringInput, Vector3Field } from "./Input";
 import { gameEvents, getEntityIdFromRigidBody } from "../GameEvents";
 import { colors } from "../styles";
+export function isPhysicsProps(v) {
+    return (v === null || v === void 0 ? void 0 : v.type) === "fixed" || (v === null || v === void 0 ? void 0 : v.type) === "dynamic" || (v === null || v === void 0 ? void 0 : v.type) === "kinematicPosition" || (v === null || v === void 0 ? void 0 : v.type) === "kinematicVelocity";
+}
 const enabledAxesFallback = [true, true, true];
-function LockedAxisField({ label, values, onChange, }) {
-    const enabledTranslations = Array.isArray(values.enabledTranslations)
-        ? values.enabledTranslations
+const capsuleRadiusFallback = 0.35;
+const capsuleHalfHeightFallback = 0.45;
+const PHYSICS_EVENT_OPTIONS = [
+    {
+        key: 'sensorEnterEventName',
+        label: 'Sensor Enter',
+        defaultName: 'sensor:enter',
+        requiresSensor: true,
+    },
+    {
+        key: 'sensorExitEventName',
+        label: 'Sensor Exit',
+        defaultName: 'sensor:exit',
+        requiresSensor: true,
+    },
+    {
+        key: 'collisionEnterEventName',
+        label: 'Collision Enter',
+        defaultName: 'collision:enter',
+        requiresSensor: false,
+    },
+    {
+        key: 'collisionExitEventName',
+        label: 'Collision Exit',
+        defaultName: 'collision:exit',
+        requiresSensor: false,
+    },
+];
+function getPhysicsEventOption(key) {
+    return PHYSICS_EVENT_OPTIONS.find(option => option.key === key);
+}
+function getConfiguredPhysicsEvents(values) {
+    return PHYSICS_EVENT_OPTIONS.filter(option => typeof values[option.key] === 'string' && values[option.key].trim().length > 0);
+}
+function getAvailablePhysicsEvents(values, currentKey) {
+    const configuredKeys = new Set(getConfiguredPhysicsEvents(values).map(option => option.key));
+    return PHYSICS_EVENT_OPTIONS
+        .filter(option => option.key === currentKey || !configuredKeys.has(option.key))
+        .map(option => ({ value: option.key, label: option.label }));
+}
+function PhysicsEventBindingsEditor({ values, onChange, }) {
+    const configuredEvents = getConfiguredPhysicsEvents(values);
+    const nextEventOptions = getAvailablePhysicsEvents(values);
+    const addEvent = (eventKey) => {
+        if (!eventKey)
+            return;
+        const option = getPhysicsEventOption(eventKey);
+        if (!option)
+            return;
+        onChange(Object.assign({ [option.key]: option.defaultName }, (option.requiresSensor ? { sensor: true } : null)));
+    };
+    const updateEventKey = (currentKey, nextKey) => {
+        const nextOption = getPhysicsEventOption(nextKey);
+        if (!nextOption)
+            return;
+        onChange(Object.assign({ [currentKey]: undefined, [nextOption.key]: values[currentKey] || nextOption.defaultName }, (nextOption.requiresSensor ? { sensor: true } : null)));
+    };
+    const updateEventName = (key, eventName) => {
+        onChange({ [key]: eventName });
+    };
+    const removeEvent = (key) => {
+        onChange({ [key]: undefined });
+    };
+    return (_jsx(ListEditor, { label: "Events", items: configuredEvents, onAdd: addEvent, addOptions: nextEventOptions, canAdd: nextEventOptions.length > 0, emptyMessage: "No physics events configured.", addButtonTitle: "Add physics event", addDisabledTitle: "All physics events already added", renderItem: (option) => {
+            var _a;
+            return (_jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 6,
+                    padding: 8,
+                    border: `1px solid ${colors.border}`,
+                    borderRadius: 4,
+                    background: colors.bgSurface,
+                }, children: [_jsxs("div", { style: { display: 'flex', gap: 6, alignItems: 'end' }, children: [_jsx("div", { style: { flex: 1, minWidth: 0 }, children: _jsx(SelectInput, { label: "Type", value: option.key, onChange: (nextKey) => updateEventKey(option.key, nextKey), options: getAvailablePhysicsEvents(values, option.key) }) }), _jsx("button", { type: "button", onClick: () => removeEvent(option.key), style: {
+                                    height: 24,
+                                    width: 28,
+                                    borderRadius: 3,
+                                    border: `1px solid ${colors.border}`,
+                                    background: colors.bgInput,
+                                    color: colors.text,
+                                    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));
+        } }));
+}
+function LockedAxisField({ label, name, values, onChange, }) {
+    const enabledAxes = Array.isArray(values[name])
+        ? values[name]
         : enabledAxesFallback;
     const axisLabels = ['X', 'Y', 'Z'];
     const toggleAxisLock = (index) => {
-        const nextEnabledTranslations = [...enabledTranslations];
-        nextEnabledTranslations[index] = !nextEnabledTranslations[index];
-        onChange({ enabledTranslations: nextEnabledTranslations });
+        const nextEnabledAxes = [...enabledAxes];
+        nextEnabledAxes[index] = !nextEnabledAxes[index];
+        onChange({ [name]: nextEnabledAxes });
     };
     return (_jsxs("div", { children: [_jsxs("div", { style: {
                     display: 'flex',
@@ -42,7 +131,7 @@ function LockedAxisField({ label, values, onChange, }) {
                             fontSize: '10px',
                             color: colors.textDim,
                         }, children: "Active means locked" })] }), _jsx("div", { style: { display: 'flex', gap: 4 }, children: axisLabels.map((axisLabel, index) => {
-                    const isLocked = !enabledTranslations[index];
+                    const isLocked = !enabledAxes[index];
                     return (_jsx("button", { type: "button", onClick: () => toggleAxisLock(index), style: {
                             flex: 1,
                             backgroundColor: isLocked ? colors.dangerBg : colors.bgInput,
@@ -67,20 +156,22 @@ function PhysicsComponentEditor({ component, onUpdate }) {
                     { value: 'trimesh', label: 'Trimesh (exact)' },
                     { value: 'cuboid', label: 'Cuboid (box)' },
                     { value: 'ball', label: 'Ball (sphere)' },
-                ] }), _jsx(NumberField, { name: "mass", label: "Mass", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.1, min: 0 }), _jsx(NumberField, { name: "restitution", label: "Restitution (Bounciness)", values: component.properties, onChange: onUpdate, fallback: 0, min: 0, max: 1, step: 0.1 }), _jsx(NumberField, { name: "friction", label: "Friction", values: component.properties, onChange: onUpdate, fallback: 0.5, min: 0, step: 0.1 }), _jsx(NumberField, { name: "linearDamping", label: "Linear Damping", values: component.properties, onChange: onUpdate, fallback: 0, min: 0, step: 0.1 }), _jsx(NumberField, { name: "angularDamping", label: "Angular Damping", values: component.properties, onChange: onUpdate, fallback: 0, min: 0, step: 0.1 }), _jsx(NumberField, { name: "gravityScale", label: "Gravity Scale", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.1 }), _jsx(Vector3Field, { name: "linearVelocity", label: "Linear Velocity", values: component.properties, onChange: onUpdate, fallback: [0, 0, 0] }), _jsx(Vector3Field, { name: "angularVelocity", label: "Angular Velocity", values: component.properties, onChange: onUpdate, fallback: [0, 0, 0] }), _jsx(LockedAxisField, { label: "Lock Movement", values: component.properties, onChange: onUpdate }), _jsx(BooleanField, { name: "sensor", label: "Sensor (Trigger Only)", values: component.properties, onChange: onUpdate, fallback: false }), _jsx(SelectField, { name: "activeCollisionTypes", label: "Collision Detection", values: component.properties, onChange: onUpdate, options: [
+                    { value: 'capsule', label: 'Capsule' },
+                ] }), component.properties.colliders === 'capsule' ? (_jsxs(_Fragment, { children: [_jsx(NumberField, { name: "capsuleRadius", label: "Capsule Radius", values: component.properties, onChange: onUpdate, fallback: capsuleRadiusFallback, min: 0.01, step: 0.01 }), _jsx(NumberField, { name: "capsuleHalfHeight", label: "Capsule Half Height", values: component.properties, onChange: onUpdate, fallback: capsuleHalfHeightFallback, min: 0.01, step: 0.01 })] })) : null, _jsx(NumberField, { name: "mass", label: "Mass", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.1, min: 0 }), _jsx(NumberField, { name: "restitution", label: "Restitution (Bounciness)", values: component.properties, onChange: onUpdate, fallback: 0, min: 0, max: 1, step: 0.1 }), _jsx(NumberField, { name: "friction", label: "Friction", values: component.properties, onChange: onUpdate, fallback: 0.5, min: 0, step: 0.1 }), _jsx(NumberField, { name: "linearDamping", label: "Linear Damping", values: component.properties, onChange: onUpdate, fallback: 0, min: 0, step: 0.1 }), _jsx(NumberField, { name: "angularDamping", label: "Angular Damping", values: component.properties, onChange: onUpdate, fallback: 0, min: 0, step: 0.1 }), _jsx(NumberField, { name: "gravityScale", label: "Gravity Scale", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.1 }), _jsx(Vector3Field, { name: "linearVelocity", label: "Linear Velocity", values: component.properties, onChange: onUpdate, fallback: [0, 0, 0] }), _jsx(Vector3Field, { name: "angularVelocity", label: "Angular Velocity", values: component.properties, onChange: onUpdate, fallback: [0, 0, 0] }), _jsx(LockedAxisField, { label: "Lock Movement", name: "enabledTranslations", values: component.properties, onChange: onUpdate }), _jsx(LockedAxisField, { label: "Lock Rotations", name: "enabledRotations", values: component.properties, onChange: onUpdate }), _jsx(BooleanField, { name: "sensor", label: "Sensor (Trigger Only)", values: component.properties, onChange: onUpdate, fallback: false }), _jsx(PhysicsEventBindingsEditor, { values: component.properties, onChange: onUpdate }), _jsx(SelectField, { name: "activeCollisionTypes", label: "Collision Detection", values: component.properties, onChange: onUpdate, options: [
                     { value: '', label: 'Default (Dynamic only)' },
                     { value: 'all', label: 'All (includes kinematic & fixed)' },
                 ] })] }));
 }
 function PhysicsComponentView({ properties, children, position, rotation, scale, editMode, nodeId, registerRigidBodyRef }) {
-    const { type, colliders, sensor, activeCollisionTypes, linearVelocity = [0, 0, 0], angularVelocity = [0, 0, 0], enabledTranslations = enabledAxesFallback } = properties, otherProps = __rest(properties, ["type", "colliders", "sensor", "activeCollisionTypes", "linearVelocity", "angularVelocity", "enabledTranslations"]);
+    const { type, colliders, sensor, activeCollisionTypes, linearVelocity = [0, 0, 0], angularVelocity = [0, 0, 0], capsuleRadius = capsuleRadiusFallback, capsuleHalfHeight = capsuleHalfHeightFallback, sensorEnterEventName, sensorExitEventName, collisionEnterEventName, collisionExitEventName, enabledTranslations = enabledAxesFallback, enabledRotations = enabledAxesFallback } = properties, otherProps = __rest(properties, ["type", "colliders", "sensor", "activeCollisionTypes", "linearVelocity", "angularVelocity", "capsuleRadius", "capsuleHalfHeight", "sensorEnterEventName", "sensorExitEventName", "collisionEnterEventName", "collisionExitEventName", "enabledTranslations", "enabledRotations"]);
     const colliderType = colliders || (type === 'fixed' ? 'trimesh' : 'hull');
+    const usesManualCapsuleCollider = colliderType === 'capsule';
     const rigidBodyRef = useRef(null);
     const linearVelocityKey = linearVelocity.join(',');
     const angularVelocityKey = angularVelocity.join(',');
     const rbKey = editMode
-        ? `${type || 'dynamic'}_${colliderType}_${position === null || position === void 0 ? void 0 : position.join(',')}_${rotation === null || rotation === void 0 ? void 0 : rotation.join(',')}`
-        : `${type || 'dynamic'}_${colliderType}`;
+        ? `${type || 'dynamic'}_${colliderType}_${capsuleRadius}_${capsuleHalfHeight}_${position === null || position === void 0 ? void 0 : position.join(',')}_${rotation === null || rotation === void 0 ? void 0 : rotation.join(',')}`
+        : `${type || 'dynamic'}_${colliderType}_${capsuleRadius}_${capsuleHalfHeight}`;
     // Try to get rapier context - will be null if not inside <Physics>
     let rapier = null;
     try {
@@ -135,54 +226,57 @@ function PhysicsComponentView({ properties, children, position, rotation, scale,
     }, [rbKey, angularVelocityKey]);
     // Event handlers for physics interactions
     const handleIntersectionEnter = useCallback((payload) => {
-        if (!nodeId)
+        if (!nodeId || !sensorEnterEventName)
             return;
-        gameEvents.emit('sensor:enter', {
+        gameEvents.emit(sensorEnterEventName, {
             sourceEntityId: nodeId,
             targetEntityId: getEntityIdFromRigidBody(payload.other.rigidBody),
             targetRigidBody: payload.other.rigidBody,
         });
-    }, [nodeId]);
+    }, [nodeId, sensorEnterEventName]);
     const handleIntersectionExit = useCallback((payload) => {
-        if (!nodeId)
+        if (!nodeId || !sensorExitEventName)
             return;
-        gameEvents.emit('sensor:exit', {
+        gameEvents.emit(sensorExitEventName, {
             sourceEntityId: nodeId,
             targetEntityId: getEntityIdFromRigidBody(payload.other.rigidBody),
             targetRigidBody: payload.other.rigidBody,
         });
-    }, [nodeId]);
+    }, [nodeId, sensorExitEventName]);
     const handleCollisionEnter = useCallback((payload) => {
-        if (!nodeId)
+        if (!nodeId || !collisionEnterEventName)
             return;
-        gameEvents.emit('collision:enter', {
+        gameEvents.emit(collisionEnterEventName, {
             sourceEntityId: nodeId,
             targetEntityId: getEntityIdFromRigidBody(payload.other.rigidBody),
             targetRigidBody: payload.other.rigidBody,
         });
-    }, [nodeId]);
+    }, [collisionEnterEventName, nodeId]);
     const handleCollisionExit = useCallback((payload) => {
-        if (!nodeId)
+        if (!nodeId || !collisionExitEventName)
             return;
-        gameEvents.emit('collision:exit', {
+        gameEvents.emit(collisionExitEventName, {
             sourceEntityId: nodeId,
             targetEntityId: getEntityIdFromRigidBody(payload.other.rigidBody),
             targetRigidBody: payload.other.rigidBody,
         });
-    }, [nodeId]);
-    return (_jsx(RigidBody, Object.assign({ ref: rigidBodyRef, type: type, colliders: colliderType, position: position, rotation: rotation, scale: scale, sensor: sensor, enabledTranslations: enabledTranslations, userData: { entityId: nodeId }, onIntersectionEnter: handleIntersectionEnter, onIntersectionExit: handleIntersectionExit, onCollisionEnter: handleCollisionEnter, onCollisionExit: handleCollisionExit }, otherProps, { children: children }), rbKey));
+    }, [collisionExitEventName, nodeId]);
+    return (_jsxs(RigidBody, Object.assign({ ref: rigidBodyRef, type: type, colliders: usesManualCapsuleCollider ? false : colliderType, position: position, rotation: rotation, scale: scale, sensor: sensor, enabledTranslations: enabledTranslations, enabledRotations: enabledRotations, userData: { entityId: nodeId }, onIntersectionEnter: handleIntersectionEnter, onIntersectionExit: handleIntersectionExit, onCollisionEnter: handleCollisionEnter, onCollisionExit: handleCollisionExit }, otherProps, { children: [usesManualCapsuleCollider ? _jsx(CapsuleCollider, { args: [capsuleHalfHeight, capsuleRadius], sensor: sensor }) : null, children] }), rbKey));
 }
 const PhysicsComponent = {
     name: 'Physics',
     Editor: PhysicsComponentEditor,
     View: PhysicsComponentView,
-    nonComposable: true,
+    isWrapper: true,
     defaultProperties: {
         type: 'dynamic',
         colliders: 'hull',
+        capsuleRadius: capsuleRadiusFallback,
+        capsuleHalfHeight: capsuleHalfHeightFallback,
         linearVelocity: [0, 0, 0],
         angularVelocity: [0, 0, 0],
         enabledTranslations: [true, true, true],
+        enabledRotations: [true, true, true],
     }
 };
 export default PhysicsComponent;

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

@@ -0,0 +1,3 @@
+import { Component } from './ComponentRegistry';
+declare const SoundComponent: Component;
+export default SoundComponent;

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

@@ -0,0 +1,240 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { useThree } from '@react-three/fiber';
+import { SoundPicker } from '../../assetviewer/page';
+import { sound as soundManager } from '../../../helpers/SoundManager';
+import { gameEvents } from '../GameEvents';
+import { BooleanField, FieldGroup, FieldRenderer, ListEditor, NumberField, SelectField, StringField } from './Input';
+import { colors } from '../styles';
+import { AudioListener } from 'three';
+const CLIP_MODE_OPTIONS = [
+    { value: 'single', label: 'Single Clip' },
+    { value: 'random', label: 'Random Clip' },
+    { value: 'sequence', label: 'Sequence' },
+];
+let sharedAudioListener = null;
+function getSharedAudioListener() {
+    if (!sharedAudioListener) {
+        sharedAudioListener = new AudioListener();
+    }
+    return sharedAudioListener;
+}
+function normalizeClips(clips) {
+    return (clips !== null && clips !== void 0 ? clips : []).map(clip => clip.trim()).filter(Boolean);
+}
+function clampRange(min, max, fallbackMin, fallbackMax) {
+    const safeMin = Number.isFinite(min) ? Number(min) : fallbackMin;
+    const safeMax = Number.isFinite(max) ? Number(max) : fallbackMax;
+    return safeMin <= safeMax ? [safeMin, safeMax] : [safeMax, safeMin];
+}
+function sampleRange(min, max) {
+    return min + Math.random() * (max - min);
+}
+function getPitchValue(properties) {
+    if (properties.randomizePitch) {
+        const [pitchFloor, pitchCeiling] = clampRange(properties.minPitch, properties.maxPitch, 0.96, 1.04);
+        return sampleRange(pitchFloor, pitchCeiling);
+    }
+    return Number.isFinite(properties.pitch) ? Number(properties.pitch) : 1;
+}
+function getVolumeValue(properties) {
+    if (properties.randomizeVolume) {
+        const [volumeFloor, volumeCeiling] = clampRange(properties.minVolume, properties.maxVolume, 0.9, 1);
+        return sampleRange(volumeFloor, volumeCeiling);
+    }
+    return Number.isFinite(properties.volume) ? Number(properties.volume) : 1;
+}
+function resolveClipPaths({ path, clips, clipMode }) {
+    const normalizedClips = normalizeClips(clips);
+    if (normalizedClips.length > 0) {
+        return { paths: normalizedClips, mode: clipMode !== null && clipMode !== void 0 ? clipMode : 'random' };
+    }
+    return path ? { paths: [path], mode: 'single' } : { paths: [], mode: 'single' };
+}
+function pickClip(paths, mode, sequenceIndexRef) {
+    if (paths.length <= 1 || mode === 'single') {
+        return paths[0];
+    }
+    if (mode === 'sequence') {
+        const clip = paths[sequenceIndexRef.current % paths.length];
+        sequenceIndexRef.current += 1;
+        return clip;
+    }
+    return paths[Math.floor(Math.random() * paths.length)];
+}
+function SoundComponentEditor({ component, onUpdate, basePath = '' }) {
+    const clips = normalizeClips(component.properties.clips);
+    const randomizePitch = Boolean(component.properties.randomizePitch);
+    const randomizeVolume = Boolean(component.properties.randomizeVolume);
+    const positional = Boolean(component.properties.positional);
+    const addClip = () => {
+        onUpdate({ clips: [...clips, ''] });
+    };
+    const updateClip = (index, nextPath) => {
+        onUpdate({
+            clips: clips.map((clip, clipIndex) => clipIndex === index ? nextPath : clip),
+        });
+    };
+    const removeClip = (index) => {
+        onUpdate({ clips: clips.filter((_, clipIndex) => clipIndex !== index) });
+    };
+    return (_jsxs(FieldGroup, { children: [_jsx(SoundPicker, { value: component.properties.path, onChange: (path) => onUpdate({ path: path !== null && path !== void 0 ? path : '' }), basePath: basePath }), _jsx(StringField, { name: "eventName", label: "Listen Event", values: component.properties, onChange: onUpdate, placeholder: "click" }), _jsx(FieldRenderer, { fields: [
+                    {
+                        name: 'clipMode',
+                        label: 'Clip Mode',
+                        type: 'select',
+                        options: CLIP_MODE_OPTIONS.map(option => ({ value: option.value, label: option.label })),
+                    },
+                ], values: component.properties, onChange: onUpdate }), _jsx(ListEditor, { label: "Clips", items: clips, onAdd: addClip, emptyMessage: "No clips added.", addButtonTitle: "Add clip", addDisabledTitle: "Add clip", renderItem: (clip, index) => (_jsxs("div", { style: {
+                        display: 'flex',
+                        gap: 6,
+                        alignItems: 'end',
+                        padding: 8,
+                        border: `1px solid ${colors.border}`,
+                        borderRadius: 4,
+                        background: colors.bgSurface,
+                    }, children: [_jsx("div", { style: { flex: 1, minWidth: 0 }, children: _jsx(SoundPicker, { value: clip || undefined, onChange: (nextPath) => updateClip(index, nextPath !== null && nextPath !== void 0 ? nextPath : ''), basePath: basePath }) }), _jsx("button", { type: "button", onClick: () => removeClip(index), style: {
+                                height: 24,
+                                width: 28,
+                                borderRadius: 3,
+                                border: `1px solid ${colors.border}`,
+                                background: colors.bgInput,
+                                color: colors.text,
+                                cursor: 'pointer',
+                                padding: 0,
+                                flexShrink: 0,
+                            }, title: "Remove clip", children: "\u00D7" })] }, `${clip}-${index}`)) }), _jsx(BooleanField, { name: "positional", label: "Positional", values: component.properties, onChange: onUpdate, fallback: false }), positional ? (_jsxs(_Fragment, { children: [_jsx(NumberField, { name: "refDistance", label: "Ref Distance", values: component.properties, onChange: onUpdate, fallback: 1, min: 0.01, step: 0.1 }), _jsx(NumberField, { name: "maxDistance", label: "Max Distance", values: component.properties, onChange: onUpdate, fallback: 24, min: 0.01, step: 0.1 }), _jsx(NumberField, { name: "rolloffFactor", label: "Rolloff", values: component.properties, onChange: onUpdate, fallback: 1, min: 0, step: 0.1 }), _jsx(SelectField, { name: "distanceModel", label: "Distance Model", values: component.properties, onChange: onUpdate, fallback: "inverse", options: [
+                            { value: 'inverse', label: 'Inverse' },
+                            { value: 'linear', label: 'Linear' },
+                            { value: 'exponential', label: 'Exponential' },
+                        ] })] })) : null, _jsx(BooleanField, { name: "randomizePitch", label: "Random Pitch", values: component.properties, onChange: onUpdate, fallback: false }), randomizePitch ? (_jsxs(_Fragment, { children: [_jsx(NumberField, { name: "minPitch", label: "Min Pitch", values: component.properties, onChange: onUpdate, fallback: 0.96, step: 0.01, min: 0.1 }), _jsx(NumberField, { name: "maxPitch", label: "Max Pitch", values: component.properties, onChange: onUpdate, fallback: 1.04, step: 0.01, min: 0.1 })] })) : (_jsx(NumberField, { name: "pitch", label: "Pitch", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.01, min: 0.1 })), _jsx(BooleanField, { name: "randomizeVolume", label: "Random Volume", values: component.properties, onChange: onUpdate, fallback: false }), randomizeVolume ? (_jsxs(_Fragment, { children: [_jsx(NumberField, { name: "minVolume", label: "Min Volume", values: component.properties, onChange: onUpdate, fallback: 0.9, step: 0.01, min: 0 }), _jsx(NumberField, { name: "maxVolume", label: "Max Volume", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.01, min: 0 })] })) : (_jsx(NumberField, { name: "volume", label: "Volume", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.01, min: 0 }))] }));
+}
+function payloadMatchesNode(nodeId, payload) {
+    if (!nodeId || !payload || typeof payload !== 'object')
+        return true;
+    const eventPayload = payload;
+    const ids = [eventPayload.sourceEntityId, eventPayload.targetEntityId, eventPayload.instanceEntityId];
+    const hasEntityIds = ids.some(id => typeof id === 'string');
+    return hasEntityIds ? ids.includes(nodeId) : true;
+}
+function SoundComponentView({ properties, editMode, nodeId, children, loadedSounds }) {
+    const { camera } = useThree();
+    const { eventName, positional = false, refDistance = 1, maxDistance = 24, rolloffFactor = 1, distanceModel = 'inverse' } = properties;
+    const sequenceIndexRef = useRef(0);
+    const listenerRef = useRef(null);
+    const positionalAudioRef = useRef(null);
+    const { paths, mode } = resolveClipPaths(properties);
+    if (!listenerRef.current) {
+        listenerRef.current = getSharedAudioListener();
+    }
+    useEffect(() => {
+        var _a;
+        if (!positional) {
+            return;
+        }
+        const listener = listenerRef.current;
+        if (!listener) {
+            return;
+        }
+        if (listener.parent !== camera) {
+            (_a = listener.parent) === null || _a === void 0 ? void 0 : _a.remove(listener);
+            camera.add(listener);
+        }
+        return () => {
+            if (listener.parent === camera) {
+                camera.remove(listener);
+            }
+        };
+    }, [camera, positional]);
+    useEffect(() => {
+        const audio = positionalAudioRef.current;
+        if (!audio) {
+            return;
+        }
+        audio.setRefDistance(refDistance);
+        audio.setMaxDistance(maxDistance);
+        audio.setRolloffFactor(rolloffFactor);
+        audio.setDistanceModel(distanceModel);
+    }, [distanceModel, maxDistance, refDistance, rolloffFactor]);
+    useEffect(() => {
+        if (editMode || paths.length === 0 || !eventName) {
+            return;
+        }
+        return gameEvents.on(eventName, (payload) => {
+            if (!payloadMatchesNode(nodeId, payload)) {
+                return;
+            }
+            const clip = pickClip(paths, mode, sequenceIndexRef);
+            if (!clip)
+                return;
+            const pitch = getPitchValue(properties);
+            const volume = getVolumeValue(properties);
+            if (!positional) {
+                const loadedBuffer = loadedSounds === null || loadedSounds === void 0 ? void 0 : loadedSounds[clip];
+                if (loadedBuffer && !soundManager.hasBuffer(clip)) {
+                    soundManager.setBuffer(clip, loadedBuffer);
+                }
+                if (soundManager.hasBuffer(clip)) {
+                    soundManager.playSync(clip, { pitch, volume });
+                    return;
+                }
+                void soundManager.play(clip, { pitch, volume });
+                return;
+            }
+            const audio = positionalAudioRef.current;
+            const listener = listenerRef.current;
+            const buffer = loadedSounds === null || loadedSounds === void 0 ? void 0 : loadedSounds[clip];
+            if (!audio || !listener || !buffer) {
+                return;
+            }
+            void listener.context.resume();
+            if (audio.isPlaying) {
+                audio.stop();
+            }
+            audio.setBuffer(buffer);
+            audio.setLoop(false);
+            audio.setPlaybackRate(pitch);
+            audio.setVolume(volume);
+            audio.play();
+        });
+    }, [editMode, eventName, loadedSounds, mode, nodeId, paths, positional, properties]);
+    return (_jsxs(_Fragment, { children: [positional && listenerRef.current ? _jsx("positionalAudio", { ref: positionalAudioRef, args: [listenerRef.current] }) : null, children] }));
+}
+const SoundComponent = {
+    name: 'Sound',
+    Editor: SoundComponentEditor,
+    View: SoundComponentView,
+    defaultProperties: {
+        path: '',
+        eventName: '',
+        clips: [],
+        clipMode: 'single',
+        positional: false,
+        refDistance: 1,
+        maxDistance: 24,
+        rolloffFactor: 1,
+        distanceModel: 'inverse',
+        pitch: 1,
+        randomizePitch: false,
+        minPitch: 0.96,
+        maxPitch: 1.04,
+        volume: 1,
+        randomizeVolume: false,
+        minVolume: 0.9,
+        maxVolume: 1,
+    },
+    getAssetRefs: (properties) => {
+        const refs = [];
+        if (properties.path)
+            refs.push({ type: 'sound', path: properties.path });
+        if (Array.isArray(properties.clips)) {
+            properties.clips.forEach((clip) => {
+                if (typeof clip === 'string' && clip.trim().length > 0) {
+                    refs.push({ type: 'sound', path: clip });
+                }
+            });
+        }
+        return refs;
+    },
+};
+export default SoundComponent;