react-three-game 0.0.65 → 0.0.66

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { gameEvents } from '../GameEvents';
+import { FieldGroup } from './Input';
+function ClickComponentEditor() {
+    return (_jsx(FieldGroup, { children: _jsx("div", { style: { fontSize: 12, opacity: 0.8 }, children: "Emits a click game event in play mode when this entity is clicked." }) }));
+}
+function ClickComponentView({ children, editMode, nodeId }) {
+    const clickValid = useRef(false);
+    const emitClick = (event) => {
+        if (!nodeId)
+            return;
+        gameEvents.emit('click', {
+            sourceEntityId: nodeId,
+            point: [event.point.x, event.point.y, event.point.z],
+            button: event.button,
+            altKey: event.nativeEvent.altKey,
+            ctrlKey: event.nativeEvent.ctrlKey,
+            metaKey: event.nativeEvent.metaKey,
+            shiftKey: event.nativeEvent.shiftKey,
+        });
+    };
+    if (editMode) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx("group", { onPointerDown: (event) => {
+            event.stopPropagation();
+            clickValid.current = true;
+        }, onPointerMove: () => {
+            clickValid.current = false;
+        }, onPointerUp: (event) => {
+            if (!clickValid.current)
+                return;
+            event.stopPropagation();
+            emitClick(event);
+            clickValid.current = false;
+        }, children: children }));
+}
+const ClickComponent = {
+    name: 'Click',
+    Editor: ClickComponentEditor,
+    View: ClickComponentView,
+    defaultProperties: {},
+};
+export default ClickComponent;

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

@@ -1,8 +1,5 @@
 const REGISTRY = {};
 export function registerComponent(component) {
-    if (REGISTRY[component.name]) {
-        throw new Error(`Component with name ${component.name} already registered.`);
-    }
     REGISTRY[component.name] = component;
 }
 export function getComponent(name) {

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useRef, useEffect, useMemo, useState } from "react";
 import { useFrame } from "@react-three/fiber";
 import { CameraHelper, Vector3 } from "three";
-import { FieldRenderer, Input } from "./Input";
+import { FieldRenderer, NumberInput } from "./Input";
 const smallLabel = { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 };
 const directionalLightDefaults = {
     color: '#ffffff',
@@ -28,7 +28,7 @@ const directionalLightFields = [
         label: 'Shadow Camera',
         render: ({ values, onChangeMultiple }) => {
             var _a, _b, _c, _d, _e, _f;
-            return (_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Near" }), _jsx(Input, { step: 0.1, value: (_a = values.shadowCameraNear) !== null && _a !== void 0 ? _a : 0.1, onChange: v => onChangeMultiple({ shadowCameraNear: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Far" }), _jsx(Input, { step: 1, value: (_b = values.shadowCameraFar) !== null && _b !== void 0 ? _b : 100, onChange: v => onChangeMultiple({ shadowCameraFar: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Top" }), _jsx(Input, { step: 1, value: (_c = values.shadowCameraTop) !== null && _c !== void 0 ? _c : 30, onChange: v => onChangeMultiple({ shadowCameraTop: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Bottom" }), _jsx(Input, { step: 1, value: (_d = values.shadowCameraBottom) !== null && _d !== void 0 ? _d : -30, onChange: v => onChangeMultiple({ shadowCameraBottom: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Left" }), _jsx(Input, { step: 1, value: (_e = values.shadowCameraLeft) !== null && _e !== void 0 ? _e : -30, onChange: v => onChangeMultiple({ shadowCameraLeft: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Right" }), _jsx(Input, { step: 1, value: (_f = values.shadowCameraRight) !== null && _f !== void 0 ? _f : 30, onChange: v => onChangeMultiple({ shadowCameraRight: v }) })] })] }));
+            return (_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Near" }), _jsx(NumberInput, { step: 0.1, value: (_a = values.shadowCameraNear) !== null && _a !== void 0 ? _a : 0.1, onChange: v => onChangeMultiple({ shadowCameraNear: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Far" }), _jsx(NumberInput, { step: 1, value: (_b = values.shadowCameraFar) !== null && _b !== void 0 ? _b : 100, onChange: v => onChangeMultiple({ shadowCameraFar: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Top" }), _jsx(NumberInput, { step: 1, value: (_c = values.shadowCameraTop) !== null && _c !== void 0 ? _c : 30, onChange: v => onChangeMultiple({ shadowCameraTop: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Bottom" }), _jsx(NumberInput, { step: 1, value: (_d = values.shadowCameraBottom) !== null && _d !== void 0 ? _d : -30, onChange: v => onChangeMultiple({ shadowCameraBottom: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Left" }), _jsx(NumberInput, { step: 1, value: (_e = values.shadowCameraLeft) !== null && _e !== void 0 ? _e : -30, onChange: v => onChangeMultiple({ shadowCameraLeft: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Right" }), _jsx(NumberInput, { step: 1, value: (_f = values.shadowCameraRight) !== null && _f !== void 0 ? _f : 30, onChange: v => onChangeMultiple({ shadowCameraRight: v }) })] })] }));
         },
     },
     {
@@ -37,7 +37,7 @@ const directionalLightFields = [
         label: 'Target Offset',
         render: ({ value, onChange }) => {
             const offset = value !== null && value !== void 0 ? value : [0, -5, 0];
-            return (_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "X" }), _jsx(Input, { step: 0.5, value: offset[0], onChange: v => onChange([v, offset[1], offset[2]]) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Y" }), _jsx(Input, { step: 0.5, value: offset[1], onChange: v => onChange([offset[0], v, offset[2]]) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Z" }), _jsx(Input, { step: 0.5, value: offset[2], onChange: v => onChange([offset[0], offset[1], v]) })] })] }));
+            return (_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "X" }), _jsx(NumberInput, { step: 0.5, value: offset[0], onChange: v => onChange([v, offset[1], offset[2]]) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Y" }), _jsx(NumberInput, { step: 0.5, value: offset[1], onChange: v => onChange([offset[0], v, offset[2]]) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Z" }), _jsx(NumberInput, { step: 0.5, value: offset[2], onChange: v => onChange([offset[0], offset[1], v]) })] })] }));
         },
     },
 ];

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

@@ -52,12 +52,15 @@ interface InputProps {
     min?: number;
     max?: number;
     style?: React.CSSProperties;
-    label?: string;
 }
-export declare function Input({ value, onChange, step, min, max, style, label }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumberInput({ value, onChange, step, min, max, style }: InputProps): import("react/jsx-runtime").JSX.Element;
 export declare function Label({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function FieldRow({ label, children, }: {
+    label: string;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function Vector3Input({ label, value, onChange, snap, labelExtra }: {
     label: string;
     value: [number, number, number];

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

@@ -49,23 +49,59 @@ function getStepPrecision(step) {
     const decimal = stepString.split('.')[1];
     return (_a = decimal === null || decimal === void 0 ? void 0 : decimal.length) !== null && _a !== void 0 ? _a : 0;
 }
-export function Input({ value, onChange, step, min, max, style, label }) {
+function clampNumber(value, min, max) {
+    if (min !== undefined && value < min)
+        return min;
+    if (max !== undefined && value > max)
+        return max;
+    return value;
+}
+function normalizeNumber(value, step, min, max) {
+    const clampedValue = clampNumber(value, min, max);
+    const normalizedStep = getNumericStep(step, 0);
+    if (!Number.isFinite(normalizedStep) || normalizedStep <= 0)
+        return clampedValue;
+    const precision = getStepPrecision(normalizedStep);
+    const stepBase = min !== null && min !== void 0 ? min : 0;
+    const steppedValue = stepBase + Math.round((clampedValue - stepBase) / normalizedStep) * normalizedStep;
+    return Number(steppedValue.toFixed(precision));
+}
+function isIncompleteNumber(value) {
+    return value === '' || value === '-' || value === '.' || value === '-.';
+}
+export function NumberInput({ value, onChange, step, min, max, style }) {
     const [draft, setDraft] = useState(() => value.toString());
+    const [isFocused, setIsFocused] = useState(false);
     useEffect(() => {
-        setDraft(value.toString());
-    }, [value]);
+        if (!isFocused) {
+            setDraft(value.toString());
+        }
+    }, [value, isFocused]);
     const handleChange = (e) => {
         const inputValue = e.target.value;
         setDraft(inputValue);
-        const num = parseFloat(inputValue);
+        if (isIncompleteNumber(inputValue))
+            return;
+        const num = Number(inputValue);
         if (Number.isFinite(num)) {
-            onChange(num);
+            onChange(clampNumber(num, min, max));
         }
     };
     const handleBlur = () => {
-        const num = parseFloat(draft);
+        setIsFocused(false);
+        if (isIncompleteNumber(draft)) {
+            setDraft(value.toString());
+            return;
+        }
+        const num = Number(draft);
         if (!Number.isFinite(num)) {
             setDraft(value.toString());
+            return;
+        }
+        const normalized = normalizeNumber(num, step, min, max);
+        setDraft(normalized.toString());
+        if (normalized !== value) {
+            onChange(normalized);
         }
     };
     const dragState = useRef(null);
@@ -88,15 +124,10 @@ export function Input({ value, onChange, step, min, max, style, label }) {
             scrubStep /= 10;
         if (e.altKey)
             scrubStep *= 10;
-        const precision = getStepPrecision(scrubStep);
         const deltaSteps = Math.round(dx / 8);
-        let nextValue = startValue + deltaSteps * scrubStep;
-        // Apply min/max constraints
-        if (min !== undefined && nextValue < min)
-            nextValue = min;
-        if (max !== undefined && nextValue > max)
-            nextValue = max;
-        setDraft(nextValue.toFixed(precision));
+        const rawValue = startValue + deltaSteps * scrubStep;
+        const nextValue = normalizeNumber(rawValue, scrubStep, min, max);
+        setDraft(nextValue.toString());
         onChange(nextValue);
     };
     const endScrub = (e) => {
@@ -106,26 +137,23 @@ export function Input({ value, onChange, step, min, max, style, label }) {
         document.body.style.cursor = "";
         e.currentTarget.releasePointerCapture(e.pointerId);
     };
-    if (label) {
-        return (_jsxs("div", { style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-            }, children: [_jsx("span", { style: Object.assign(Object.assign({}, styles.label), { marginBottom: 0, userSelect: 'none', flex: '0 0 auto', minWidth: 20 }), children: label }), _jsx("input", { type: "text", value: draft, onChange: handleChange, onBlur: handleBlur, onKeyDown: e => {
-                        if (e.key === 'Enter') {
-                            e.target.blur();
-                        }
-                    }, step: step, min: min, max: max, style: Object.assign(Object.assign(Object.assign({}, styles.input), { cursor: 'ew-resize' }), style), onPointerDown: startScrub, onPointerMove: onScrubMove, onPointerUp: endScrub })] }));
-    }
-    return (_jsx("input", { type: "text", value: draft, onChange: handleChange, onBlur: handleBlur, onKeyDown: e => {
+    return (_jsx("input", { type: "number", inputMode: "decimal", value: draft, onChange: handleChange, onFocus: () => setIsFocused(true), onBlur: handleBlur, onKeyDown: e => {
             if (e.key === 'Enter') {
                 e.target.blur();
             }
-        }, step: step, min: min, max: max, style: Object.assign(Object.assign(Object.assign({}, styles.input), { cursor: 'ew-resize' }), style), onPointerDown: startScrub, onPointerMove: onScrubMove, onPointerUp: endScrub }));
+        }, step: step !== null && step !== void 0 ? step : 'any', min: min, max: max, style: Object.assign(Object.assign(Object.assign({}, styles.input), { cursor: 'ew-resize' }), style), onPointerDown: startScrub, onPointerMove: onScrubMove, onPointerUp: endScrub }));
 }
 export function Label({ children }) {
     return _jsx("label", { style: styles.label, children: children });
 }
+export function FieldRow({ label, children, }) {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 8,
+        }, children: [_jsx("span", { style: Object.assign(Object.assign({}, styles.label), { marginBottom: 0, userSelect: 'none', flex: '0 0 auto', minWidth: 20 }), children: label }), children] }));
+}
 export function Vector3Input({ label, value, onChange, snap, labelExtra }) {
     const snapValue = (num) => {
         if (!snap)
@@ -133,18 +161,23 @@ export function Vector3Input({ label, value, onChange, snap, labelExtra }) {
         return Math.round(num / snap) * snap;
     };
     const [draft, setDraft] = useState(() => value.map(v => v.toString()));
-    // Sync external changes (gizmo, undo, etc.)
     useEffect(() => {
         setDraft(value.map(v => v.toString()));
-    }, [value[0], value[1], value[2]]);
+    }, [value]);
     const dragState = useRef(null);
     const commit = (index) => {
-        const num = parseFloat(draft[index]);
-        if (Number.isFinite(num)) {
-            const next = [...value];
-            next[index] = snapValue(num);
-            onChange(next);
+        if (isIncompleteNumber(draft[index])) {
+            setDraft(value.map(v => v.toString()));
+            return;
         }
+        const num = Number(draft[index]);
+        if (!Number.isFinite(num)) {
+            setDraft(value.map(v => v.toString()));
+            return;
+        }
+        const next = [...value];
+        next[index] = snapValue(num);
+        onChange(next);
     };
     const startScrub = (e, index) => {
         dragState.current = {
@@ -171,7 +204,7 @@ export function Vector3Input({ label, value, onChange, snap, labelExtra }) {
         next[index] = nextValue;
         setDraft(d => {
             const copy = [...d];
-            copy[index] = nextValue.toFixed(3);
+            copy[index] = nextValue.toString();
             return copy;
         });
         onChange(next);
@@ -216,7 +249,7 @@ export function Vector3Input({ label, value, onChange, snap, labelExtra }) {
                                 width: '100%',
                                 minWidth: 0,
                                 cursor: 'inherit',
-                            }, type: "text", value: draft[index], onChange: e => {
+                            }, type: "number", inputMode: "decimal", step: snap !== null && snap !== void 0 ? snap : 'any', value: draft[index], onChange: e => {
                                 const next = [...draft];
                                 next[index] = e.target.value;
                                 setDraft(next);
@@ -263,7 +296,7 @@ export function FieldGroup({ children }) {
 }
 export function NumberField({ name, label, values, onChange, fallback = 0, step, min, max, style, }) {
     var _a;
-    return (_jsx(Input, { label: label, value: (_a = values[name]) !== null && _a !== void 0 ? _a : fallback, onChange: bindFieldChange(name, onChange), step: step, min: min, max: max, style: style }));
+    return (_jsx(FieldRow, { label: label, children: _jsx(NumberInput, { value: (_a = values[name]) !== null && _a !== void 0 ? _a : fallback, onChange: bindFieldChange(name, onChange), step: step, min: min, max: max, style: style }) }));
 }
 export function StringField({ name, label, values, onChange, fallback = '', placeholder, }) {
     var _a;
@@ -296,7 +329,7 @@ export function FieldRenderer({ fields, values, onChange }) {
                 case 'vector3':
                     return (_jsx(Vector3Input, { label: field.label, value: value !== null && value !== void 0 ? value : [0, 0, 0], onChange: v => updateField(field.name, v), snap: field.snap }, field.name));
                 case 'number':
-                    return (_jsx(Input, { label: field.label, value: value !== null && value !== void 0 ? value : 0, onChange: v => updateField(field.name, v), min: field.min, max: field.max, step: field.step }, field.name));
+                    return (_jsx(FieldRow, { label: field.label, children: _jsx(NumberInput, { value: value !== null && value !== void 0 ? value : 0, onChange: v => updateField(field.name, v), min: field.min, max: field.max, step: field.step }) }, field.name));
                 case 'string':
                     return (_jsx(StringInput, { label: field.label, value: value !== null && value !== void 0 ? value : '', onChange: v => updateField(field.name, v), placeholder: field.placeholder }, field.name));
                 case 'color':

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

@@ -14,7 +14,7 @@ import { SingleTextureViewer, TextureListViewer } from '../../assetviewer/page';
 import { extend } from '@react-three/fiber';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { FieldRenderer, Input } from './Input';
+import { FieldRenderer, Label, NumberInput } from './Input';
 import { colors } from '../styles';
 import { useMemo } from 'react';
 import { MeshBasicNodeMaterial, MeshStandardNodeMaterial } from 'three/webgpu';
@@ -138,7 +138,7 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
                     label: 'Repeat (X, Y)',
                     render: ({ value, onChange }) => {
                         var _a, _b;
-                        return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx(Input, { label: "X", value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, onChange: v => { var _a; return onChange([v, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 1]); }, min: 0.01, max: 100, step: 0.1 }), _jsx(Input, { label: "Y", value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 1, onChange: v => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, v]); }, min: 0.01, max: 100, step: 0.1 })] }));
+                        return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx(Label, { children: "X" }), _jsx(NumberInput, { value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, onChange: v => { var _a; return onChange([v, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 1]); }, min: 0.01, max: 100, step: 0.1, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] }), _jsxs("div", { style: { flex: 1 }, children: [_jsx(Label, { children: "Y" }), _jsx(NumberInput, { value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 1, onChange: v => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, v]); }, min: 0.01, max: 100, step: 0.1, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] })] }));
                     },
                 }] : []),
             {
@@ -153,7 +153,7 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
                     label: 'Normal Scale (X, Y)',
                     render: ({ value, onChange }) => {
                         var _a, _b;
-                        return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx(Input, { label: "X", value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, onChange: v => { var _a; return onChange([v, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 1]); }, min: 0, max: 5, step: 0.01 }), _jsx(Input, { label: "Y", value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 1, onChange: v => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, v]); }, min: 0, max: 5, step: 0.01 })] }));
+                        return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx(Label, { children: "X" }), _jsx(NumberInput, { value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, onChange: v => { var _a; return onChange([v, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 1]); }, min: 0, max: 5, step: 0.01, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] }), _jsxs("div", { style: { flex: 1 }, children: [_jsx(Label, { children: "Y" }), _jsx(NumberInput, { value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 1, onChange: v => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, v]); }, min: 0, max: 5, step: 0.01, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] })] }));
                     },
                 }] : []),
             { name: 'generateMipmaps', type: 'boolean', label: 'Generate Mipmaps' },

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ModelListViewer, SingleModelViewer } from '../../assetviewer/page';
 import { useContext, useEffect, useLayoutEffect, useState, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { BooleanField, FieldGroup, Input, Label, SelectInput } from './Input';
+import { BooleanField, FieldGroup, Label, NumberInput, SelectInput } from './Input';
 import { EditorContext } from '../EditorContext';
 import { DEFAULT_REPEAT_AXES, getRepeatAxesFromModelProperties, normalizeRepeatAxes } from '../InstanceProvider';
 import { colors } from '../styles';
@@ -68,7 +68,7 @@ function RepeatAxisEditor({ axes, onChange, positionSnap, }) {
                                         cursor: 'pointer',
                                         padding: 0,
                                         flexShrink: 0,
-                                    }, title: "Remove repeat axis", children: "\u00D7" })) : null] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx(Input, { label: "Count", 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' } }), _jsx(Input, { label: "Offset", 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}`));
+                                    }, 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}`));
             })] }));
 }
 function ModelPicker({ value, onChange, basePath, nodeId }) {

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

@@ -2,6 +2,8 @@ import type { RigidBodyOptions } from "@react-three/rapier";
 import { Component } from "./ComponentRegistry";
 export type PhysicsProps = RigidBodyOptions & {
     activeCollisionTypes?: 'all' | undefined;
+    linearVelocity?: [number, number, number];
+    angularVelocity?: [number, number, number];
 };
 declare const PhysicsComponent: Component;
 export default PhysicsComponent;

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

@@ -12,8 +12,50 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RigidBody, useRapier } from "@react-three/rapier";
 import { useRef, useEffect, useCallback } from 'react';
-import { BooleanField, FieldGroup, NumberField, SelectField } from "./Input";
+import { BooleanField, FieldGroup, NumberField, SelectField, Vector3Field } from "./Input";
 import { gameEvents, getEntityIdFromRigidBody } from "../GameEvents";
+import { colors } from "../styles";
+const enabledAxesFallback = [true, true, true];
+function LockedAxisField({ label, values, onChange, }) {
+    const enabledTranslations = Array.isArray(values.enabledTranslations)
+        ? values.enabledTranslations
+        : enabledAxesFallback;
+    const axisLabels = ['X', 'Y', 'Z'];
+    const toggleAxisLock = (index) => {
+        const nextEnabledTranslations = [...enabledTranslations];
+        nextEnabledTranslations[index] = !nextEnabledTranslations[index];
+        onChange({ enabledTranslations: nextEnabledTranslations });
+    };
+    return (_jsxs("div", { children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginBottom: 4,
+                }, children: [_jsx("span", { style: {
+                            display: 'block',
+                            fontSize: '10px',
+                            color: colors.textMuted,
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.05em',
+                            fontWeight: 500,
+                        }, children: label }), _jsx("span", { style: {
+                            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];
+                    return (_jsx("button", { type: "button", onClick: () => toggleAxisLock(index), style: {
+                            flex: 1,
+                            backgroundColor: isLocked ? colors.dangerBg : colors.bgInput,
+                            border: `1px solid ${isLocked ? colors.dangerBorder : colors.border}`,
+                            borderRadius: 3,
+                            padding: '6px 8px',
+                            color: isLocked ? colors.danger : colors.textMuted,
+                            fontSize: '11px',
+                            fontFamily: 'monospace',
+                            cursor: 'pointer',
+                        }, children: axisLabel }, axisLabel));
+                }) })] }));
+}
 function PhysicsComponentEditor({ component, onUpdate }) {
     return (_jsxs(FieldGroup, { children: [_jsx(SelectField, { name: "type", label: "Type", values: component.properties, onChange: onUpdate, options: [
                     { value: 'dynamic', label: 'Dynamic' },
@@ -25,15 +67,20 @@ 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(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: [
+                ] }), _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: '', 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 } = properties, otherProps = __rest(properties, ["type", "colliders", "sensor", "activeCollisionTypes"]);
+    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 colliderType = colliders || (type === 'fixed' ? 'trimesh' : 'hull');
     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}`;
     // Try to get rapier context - will be null if not inside <Physics>
     let rapier = null;
     try {
@@ -67,6 +114,25 @@ function PhysicsComponentView({ properties, children, position, rotation, scale,
             }
         }
     }, [activeCollisionTypes, rapier, type, colliders]);
+    // Seed authored velocities when the body instance changes or the authored values change.
+    useEffect(() => {
+        if (!rigidBodyRef.current)
+            return;
+        rigidBodyRef.current.setLinvel({
+            x: linearVelocity[0],
+            y: linearVelocity[1],
+            z: linearVelocity[2],
+        }, true);
+    }, [rbKey, linearVelocityKey]);
+    useEffect(() => {
+        if (!rigidBodyRef.current)
+            return;
+        rigidBodyRef.current.setAngvel({
+            x: angularVelocity[0],
+            y: angularVelocity[1],
+            z: angularVelocity[2],
+        }, true);
+    }, [rbKey, angularVelocityKey]);
     // Event handlers for physics interactions
     const handleIntersectionEnter = useCallback((payload) => {
         if (!nodeId)
@@ -104,18 +170,19 @@ function PhysicsComponentView({ properties, children, position, rotation, scale,
             targetRigidBody: payload.other.rigidBody,
         });
     }, [nodeId]);
-    // In edit mode, include position/rotation in key to force remount when transform changes
-    // This ensures the RigidBody debug visualization updates even when physics is paused
-    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}`;
-    return (_jsx(RigidBody, Object.assign({ ref: rigidBodyRef, type: type, colliders: colliderType, position: position, rotation: rotation, scale: scale, sensor: sensor, userData: { entityId: nodeId }, onIntersectionEnter: handleIntersectionEnter, onIntersectionExit: handleIntersectionExit, onCollisionEnter: handleCollisionEnter, onCollisionExit: handleCollisionExit }, otherProps, { children: children }), rbKey));
+    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));
 }
 const PhysicsComponent = {
     name: 'Physics',
     Editor: PhysicsComponentEditor,
     View: PhysicsComponentView,
     nonComposable: true,
-    defaultProperties: { type: 'dynamic', colliders: 'hull' }
+    defaultProperties: {
+        type: 'dynamic',
+        colliders: 'hull',
+        linearVelocity: [0, 0, 0],
+        angularVelocity: [0, 0, 0],
+        enabledTranslations: [true, true, true],
+    }
 };
 export default PhysicsComponent;

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

@@ -9,6 +9,7 @@ import ModelComponent from './ModelComponent';
 import TextComponent from './TextComponent';
 import EnvironmentComponent from './EnvironmentComponent';
 import CameraComponent from './CameraComponent';
+import ClickComponent from './ClickComponent';
 export default [
     GeometryComponent,
     TransformComponent,
@@ -21,4 +22,5 @@ export default [
     TextComponent,
     EnvironmentComponent,
     CameraComponent,
+    ClickComponent,
 ];

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

@@ -7,6 +7,7 @@ export interface GameObject {
     id: string;
     name?: string;
     disabled?: boolean;
+    locked?: boolean;
     children?: GameObject[];
     components?: {
         [key: string]: ComponentData | undefined;

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

@@ -1,5 +1,5 @@
 import { GameObject, Prefab } from "./types";
-import { Object3D, Vector3 } from 'three';
+import { Matrix4, Object3D, Vector3 } from 'three';
 export interface ExportGLBOptions {
     filename?: string;
     binary?: boolean;
@@ -24,6 +24,12 @@ export declare function exportGLB(sceneRoot: Object3D, options?: ExportGLBOption
  */
 export declare function exportGLBData(sceneRoot: Object3D): Promise<ArrayBuffer>;
 export declare function focusCameraOnObject(object: Object3D, camera: Object3D, target: Vector3, update?: () => void): void;
+export declare function decompose(m: Matrix4): {
+    position: [number, number, number];
+    rotation: [number, number, number];
+    scale: [number, number, number];
+};
+export declare function computeParentWorldMatrix(root: GameObject, targetId: string): Matrix4;
 /** Find a node by ID in the tree */
 export declare function findNode(root: GameObject, id: string): GameObject | null;
 /** Find the parent of a node by ID */

package/dist/tools/prefabeditor/utils.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
-import { Box3, PerspectiveCamera, Quaternion, Vector3 } from 'three';
+import { Box3, Euler, Matrix4, PerspectiveCamera, Quaternion, Vector3 } from 'three';
 /** Save a prefab as JSON file, showing a Save As dialog when supported */
 export function saveJson(data, filename) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -133,6 +133,39 @@ export function focusCameraOnObject(object, camera, target, update) {
     target.copy(center);
     update === null || update === void 0 ? void 0 : update();
 }
+export function decompose(m) {
+    const p = new Vector3(), q = new Quaternion(), s = new Vector3();
+    m.decompose(p, q, s);
+    const e = new Euler().setFromQuaternion(q);
+    return {
+        position: [p.x, p.y, p.z],
+        rotation: [e.x, e.y, e.z],
+        scale: [s.x, s.y, s.z],
+    };
+}
+function compose(node) {
+    var _a, _b, _c, _d, _e;
+    const t = (_b = (_a = node === null || node === void 0 ? void 0 : node.components) === null || _a === void 0 ? void 0 : _a.transform) === null || _b === void 0 ? void 0 : _b.properties;
+    const position = (_c = t === null || t === void 0 ? void 0 : t.position) !== null && _c !== void 0 ? _c : [0, 0, 0];
+    const rotation = (_d = t === null || t === void 0 ? void 0 : t.rotation) !== null && _d !== void 0 ? _d : [0, 0, 0];
+    const scale = (_e = t === null || t === void 0 ? void 0 : t.scale) !== null && _e !== void 0 ? _e : [1, 1, 1];
+    return new Matrix4().compose(new Vector3(...position), new Quaternion().setFromEuler(new Euler(...rotation)), new Vector3(...scale));
+}
+export function computeParentWorldMatrix(root, targetId) {
+    const identity = new Matrix4();
+    let result = null;
+    const visit = (node, parent) => {
+        var _a;
+        if (node.id === targetId) {
+            result = parent.clone();
+            return;
+        }
+        const world = parent.clone().multiply(compose(node));
+        (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(child => !result && visit(child, world));
+    };
+    visit(root, identity);
+    return result !== null && result !== void 0 ? result : identity;
+}
 /** Find a node by ID in the tree */
 export function findNode(root, id) {
     var _a;

package/package.json

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