react-three-game 0.0.64 → 0.0.66

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

@@ -1,10 +1,76 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ModelListViewer, SingleModelViewer } from '../../assetviewer/page';
-import { useEffect, useLayoutEffect, useState, useMemo, useRef } from 'react';
+import { useContext, useEffect, useLayoutEffect, useState, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { FieldRenderer } 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';
 const PICKER_POPUP_WIDTH = 260;
 const PICKER_POPUP_HEIGHT = 360;
+const AXIS_OPTIONS = [
+    { value: 'x', label: 'X' },
+    { value: 'y', label: 'Y' },
+    { value: 'z', label: 'Z' },
+];
+function quantize(value, step) {
+    if (!Number.isFinite(value))
+        return 0;
+    if (!Number.isFinite(step) || step <= 0)
+        return value;
+    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)
+            return;
+        onChange([...axes, { axis: nextAxis.value, count: 1, offset: 1 }]);
+    };
+    const updateAxis = (index, patch) => {
+        const nextAxes = axes.map((axis, axisIndex) => axisIndex === index ? Object.assign(Object.assign({}, axis), patch) : axis);
+        onChange(normalizeRepeatAxes(nextAxes));
+    };
+    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}`));
+            })] }));
+}
 function ModelPicker({ value, onChange, basePath, nodeId }) {
     const [modelFiles, setModelFiles] = useState([]);
     const [showPicker, setShowPicker] = useState(false);
@@ -57,21 +123,32 @@ function ModelPicker({ value, onChange, basePath, nodeId }) {
         onChange(filename);
         setShowPicker(false);
     };
-    return (_jsxs("div", { style: { maxHeight: 128, overflow: 'visible', position: 'relative', display: 'flex', alignItems: 'center' }, children: [_jsx(SingleModelViewer, { file: value ? `/${value}` : undefined, basePath: basePath }), _jsx("button", { ref: triggerRef, onClick: () => setShowPicker(!showPicker), style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4 }, children: showPicker ? 'Cancel' : 'Change' }), _jsx("button", { onClick: () => {
-                    onChange(undefined);
-                }, style: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4, marginLeft: 4 }, children: "Clear" }), showPicker && popupStyle && typeof document !== 'undefined' && createPortal(_jsx("div", { style: popupStyle, onMouseLeave: () => setShowPicker(false), children: _jsx(ModelListViewer, { files: modelFiles, selected: value ? `/${value}` : undefined, onSelect: handleModelSelect, basePath: basePath }, nodeId) }), document.body)] }));
+    return (_jsxs("div", { style: { maxHeight: 160, overflow: 'visible', position: 'relative', display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'center' }, children: [_jsx("div", { style: { flex: '0 0 auto' }, children: _jsx(SingleModelViewer, { file: value ? `/${value}` : undefined, basePath: basePath }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6, flex: '0 0 84px', minWidth: 84, justifyContent: 'flex-end' }, children: [_jsx("button", { ref: triggerRef, onClick: () => setShowPicker(!showPicker), style: {
+                            width: '100%',
+                            padding: '6px 8px',
+                            backgroundColor: '#1f2937',
+                            color: 'inherit',
+                            fontSize: 10,
+                            cursor: 'pointer',
+                            border: '1px solid rgba(34, 211, 238, 0.3)',
+                        }, children: showPicker ? 'Cancel' : 'Change' }), _jsx("button", { onClick: () => {
+                            onChange(undefined);
+                        }, style: {
+                            width: '100%',
+                            padding: '6px 8px',
+                            backgroundColor: '#1f2937',
+                            color: 'inherit',
+                            fontSize: 10,
+                            cursor: 'pointer',
+                            border: '1px solid rgba(34, 211, 238, 0.3)',
+                        }, children: "Clear" })] }), showPicker && popupStyle && typeof document !== 'undefined' && createPortal(_jsx("div", { style: popupStyle, onMouseLeave: () => setShowPicker(false), children: _jsx(ModelListViewer, { files: modelFiles, selected: value ? `/${value}` : undefined, onSelect: handleModelSelect, basePath: basePath }, nodeId) }), document.body)] }));
 }
 function ModelComponentEditor({ component, node, onUpdate, basePath = "" }) {
-    const fields = [
-        {
-            name: 'filename',
-            type: 'custom',
-            label: 'Model File',
-            render: ({ value, onChange }) => (_jsx(ModelPicker, { value: value, onChange: onChange, basePath: basePath, nodeId: node === null || node === void 0 ? void 0 : node.id })),
-        },
-        { name: 'instanced', type: 'boolean', label: 'Instanced' },
-    ];
-    return (_jsx(FieldRenderer, { fields: fields, values: component.properties, onChange: onUpdate }));
+    var _a;
+    const editorContext = useContext(EditorContext);
+    const positionSnap = (_a = editorContext === null || editorContext === void 0 ? void 0 : editorContext.positionSnap) !== null && _a !== void 0 ? _a : 0.5;
+    const repeatAxes = getRepeatAxesFromModelProperties(component.properties);
+    return (_jsxs(FieldGroup, { children: [_jsx(ModelPicker, { value: component.properties.filename, onChange: (filename) => onUpdate({ filename }), basePath: basePath, nodeId: node === null || node === void 0 ? void 0 : node.id }), _jsx(BooleanField, { name: "instanced", label: "Instanced", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.instanced && (_jsxs(_Fragment, { children: [_jsx(BooleanField, { name: "repeat", label: "Repeat", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.repeat && (_jsx(RepeatAxisEditor, { axes: repeatAxes, onChange: (nextAxes) => onUpdate({ repeatAxes: nextAxes }), positionSnap: positionSnap }))] }))] }));
 }
 // View for Model component
 function ModelComponentView({ properties, loadedModels, children }) {
@@ -103,7 +180,9 @@ const ModelComponent = {
     nonComposable: true,
     defaultProperties: {
         filename: '',
-        instanced: false
+        instanced: false,
+        repeat: false,
+        repeatAxes: DEFAULT_REPEAT_AXES
     }
 };
 export default ModelComponent;

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;
@@ -255,7 +288,12 @@ export function createModelNode(filename, name) {
             },
             model: {
                 type: 'Model',
-                properties: { filename, instanced: false }
+                properties: {
+                    filename,
+                    instanced: false,
+                    repeat: false,
+                    repeatAxes: [{ axis: 'x', count: 1, offset: 1 }]
+                }
             }
         }
     };

package/package.json

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