react-three-game 0.0.89 → 0.0.91

package/dist/tools/prefabeditor/EditorUI.js

@@ -43,18 +43,18 @@ function NodeInspector({ node, updateNode, deleteNode, basePath }) {
     const available = allKeys.filter(k => !hasComponent(node, k));
     const [preferredAddType, setAddType] = useState(available[0] || "");
     const addType = available.includes(preferredAddType) ? preferredAddType : (available[0] || "");
-    return _jsxs("div", { style: inspector.content, children: [_jsxs("div", { style: base.section, children: [_jsxs("div", { style: { display: "flex", marginBottom: 8, alignItems: 'center', gap: 8 }, children: [_jsx("div", { style: { fontSize: 10, color: colors.textDim, wordBreak: 'break-all', border: `1px solid ${colors.border}`, padding: '2px 6px', borderRadius: 3, flex: 1, fontFamily: 'monospace' }, children: node.id }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), base.btnDanger), title: "Delete Node", onClick: deleteNode, children: "\u274C" })] }), _jsx("input", { style: base.input, value: (_a = node.name) !== null && _a !== void 0 ? _a : "", placeholder: 'Node name', onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { name: e.target.value }))) })] }), _jsxs("div", { style: base.section, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }, children: _jsx("div", { style: base.label, children: "Components" }) }), node.components && Object.entries(node.components).map(([key, comp]) => {
+    return _jsxs("div", { style: inspector.content, children: [_jsxs("div", { style: base.section, children: [_jsxs("div", { style: { display: "flex", marginBottom: 4, alignItems: 'center', gap: 4 }, children: [_jsx("div", { style: { fontSize: 10, color: colors.textDim, wordBreak: 'break-all', background: colors.bgLight, padding: '2px 4px', flex: 1, fontFamily: 'monospace', minHeight: 18, boxSizing: 'border-box' }, children: node.id }), _jsx("button", { style: Object.assign(Object.assign(Object.assign({}, base.btn), base.btnDanger), { minWidth: 22, padding: '2px 4px' }), title: "Delete Node", onClick: deleteNode, children: "\u2715" })] }), _jsx("input", { style: base.input, value: (_a = node.name) !== null && _a !== void 0 ? _a : "", placeholder: 'Node name', onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { name: e.target.value }))) })] }), _jsxs("div", { style: base.section, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }, children: _jsx("div", { style: base.label, children: "Components" }) }), node.components && Object.entries(node.components).map(([key, comp]) => {
                         if (!comp)
                             return null;
                         const def = ALL_COMPONENTS[comp.type];
                         if (!def)
                             return _jsxs("div", { style: { color: colors.danger, fontSize: 11 }, children: ["Unknown: ", comp.type] }, key);
-                        return (_jsxs("div", { style: componentCard.container, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }, children: [_jsx("div", { style: { fontSize: 11, fontWeight: 500 }, children: key }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px' }), title: "Remove Component", onClick: () => updateNode(n => {
+                        return (_jsxs("div", { style: componentCard.container, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 3 }, children: [_jsx("div", { style: { fontSize: 11, fontWeight: 500 }, children: key }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 4px', minWidth: 20 }), title: "Remove Component", onClick: () => updateNode(n => {
                                                 var _a;
                                                 const _b = (_a = n.components) !== null && _a !== void 0 ? _a : {}, _c = key, _ = _b[_c], rest = __rest(_b, [typeof _c === "symbol" ? _c : _c + ""]);
                                                 return Object.assign(Object.assign({}, n), { components: rest });
                                             }), children: "\u2715" })] }), def.Editor && (_jsx(def.Editor, { component: comp, node: node, onUpdate: (newProps) => updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: Object.assign(Object.assign({}, comp), { properties: Object.assign(Object.assign({}, comp.properties), newProps) }) }) }))), basePath: basePath }))] }, key));
-                    })] }), available.length > 0 && (_jsx("div", { children: _jsxs("div", { style: base.row, children: [_jsx("select", { style: Object.assign(Object.assign({}, base.input), { flex: 1 }), value: addType, onChange: e => setAddType(e.target.value), children: available.map(k => _jsx("option", { value: k, children: k }, k)) }), _jsx("button", { style: base.btn, disabled: !addType, onClick: () => {
+                    })] }), available.length > 0 && (_jsx("div", { children: _jsxs("div", { style: base.row, children: [_jsx("select", { style: Object.assign(Object.assign({}, base.input), { flex: 1, background: colors.bgInput, border: `1px solid ${colors.border}`, minHeight: 22 }), value: addType, onChange: e => setAddType(e.target.value), children: available.map(k => _jsx("option", { value: k, children: k }, k)) }), _jsx("button", { style: base.btn, disabled: !addType, onClick: () => {
                                 if (!addType)
                                     return;
                                 const def = ALL_COMPONENTS[addType];

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -370,7 +370,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
                             }
                             (_d = canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onPointerMissed) === null || _d === void 0 ? void 0 : _d.call(canvasProps, event);
                         }
-                        : canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onPointerMissed, children: [physics ? (_jsx(Physics, { debug: isEditMode, paused: isEditMode, children: content })) : content, isEditMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, enableDamping: false, makeDefault: true }), transformObject && (_jsx(TransformControls, { object: transformObject, mode: transformMode, space: "local", onObjectChange: handleTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: scaleSnap > 0 ? scaleSnap : undefined }, `transform-${selectedId}-${transformMode}-${positionSnap}-${rotationSnap}-${scaleSnap}`))] }))] })), showUI && (_jsxs(_Fragment, { children: [_jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: toggleMode, children: isEditMode ? "▶" : "⏸" }), uiPlugins] }), isEditMode && (_jsx(EditorUI, { selectedId: selectedId, setSelectedId: setSelection, getPrefab: getPrefab, onReplacePrefab: (prefab) => loadPrefab(prefab, { resetHistory: true }), onImportPrefab: importPrefab, basePath: basePath, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 }))] }))] }) });
+                        : canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onPointerMissed, children: [physics ? (_jsx(Physics, { colliders: false, debug: isEditMode, paused: isEditMode, children: content })) : content, isEditMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, enableDamping: false, makeDefault: true }), transformObject && (_jsx(TransformControls, { object: transformObject, mode: transformMode, space: "local", onObjectChange: handleTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: scaleSnap > 0 ? scaleSnap : undefined }, `transform-${selectedId}-${transformMode}-${positionSnap}-${rotationSnap}-${scaleSnap}`))] }))] })), showUI && (_jsxs(_Fragment, { children: [_jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: toggleMode, children: isEditMode ? "▶" : "⏸" }), uiPlugins] }), isEditMode && (_jsx(EditorUI, { selectedId: selectedId, setSelectedId: setSelection, getPrefab: getPrefab, onReplacePrefab: (prefab) => loadPrefab(prefab, { resetHistory: true }), onImportPrefab: importPrefab, basePath: basePath, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 }))] }))] }) });
 });
 PrefabEditor.displayName = "PrefabEditor";
 export default PrefabEditor;

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -336,8 +336,10 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, load
     const renderCtx = { loadedModels, editMode, registerRef };
     const childNodes = _jsx(ChildNodes, { childIds: childIds, parentMatrix: world, selectedId: selectedId, onSelect: onSelect, onClick: onClick, registerRef: registerRef, loadedModels: loadedModels, editMode: editMode });
     const inner = renderCompositionNode(gameObject, renderCtx, primaryClickHandlers, childNodes);
-    const physicsInner = editMode ? _jsx("group", { visible: false, children: inner }) : inner;
-    return (_jsx(EntityRuntimeScope, { nodeId: nodeId, editMode: editMode, isSelected: isSelected, children: editMode ? (_jsxs(_Fragment, { children: [_jsxs("group", Object.assign({ ref: handleEditGroupRef }, groupProps, editClickHandlers, { children: [_jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }), inner] })), hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, Object.assign({ properties: physics.properties }, transformProps, { children: physicsInner }), physicsKey)) : null] })) : hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, Object.assign({ properties: physics.properties }, transformProps, { children: _jsx("group", Object.assign({ ref: handleGroupRef }, metadataProps, { children: inner })) }), physicsKey)) : (_jsx("group", Object.assign({ ref: handleGroupRef }, groupProps, { children: inner }))) }));
+    const editAnchor = editMode ? (_jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) })) : null;
+    const standardNode = (_jsxs("group", Object.assign({ ref: editMode ? handleEditGroupRef : handleGroupRef }, groupProps, (editMode ? editClickHandlers : undefined), { children: [editAnchor, inner] })));
+    const physicsNode = hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, Object.assign({ properties: physics.properties }, transformProps, { children: _jsxs("group", Object.assign({ ref: editMode ? handleEditGroupRef : handleGroupRef }, metadataProps, (editMode ? editClickHandlers : undefined), { children: [editAnchor, inner] })) }), physicsKey)) : null;
+    return (_jsx(EntityRuntimeScope, { nodeId: nodeId, editMode: editMode, isSelected: isSelected, children: physicsNode !== null && physicsNode !== void 0 ? physicsNode : standardNode }));
 }
 function isRendererHandledComponent(componentType) {
     return componentType === "Transform"

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BooleanField, FieldGroup, StringField } from "./Input";
+import { base, ui } from "../styles";
 const DEFAULT_TRIANGLE_POSITIONS = [
     0, 0, 0,
     1, 0, 0,
@@ -37,7 +38,7 @@ function getIndexArray(indices) {
     return maxIndex > 65535 ? new Uint32Array(indices) : new Uint16Array(indices);
 }
 function BufferArrayField({ label, value, fallback, onChange, rows = 4, }) {
-    return (_jsxs("label", { style: { display: 'grid', gap: 4 }, children: [_jsx("span", { style: { fontSize: '10px', color: '#888', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 500 }, children: label }), _jsx("textarea", { rows: rows, spellCheck: false, defaultValue: toAttributeText(value, fallback), onBlur: (event) => {
+    return (_jsxs("label", { style: { display: 'grid', gap: 4 }, children: [_jsx("span", { style: Object.assign(Object.assign({}, base.label), { textTransform: 'uppercase', letterSpacing: '0.05em' }), children: label }), _jsx("textarea", { rows: rows, spellCheck: false, defaultValue: toAttributeText(value, fallback), onBlur: (event) => {
                     try {
                         onChange(parseArrayInput(event.target.value));
                         event.target.setCustomValidity('');
@@ -46,19 +47,7 @@ function BufferArrayField({ label, value, fallback, onChange, rows = 4, }) {
                         event.target.setCustomValidity('Expected a JSON array of numbers');
                         event.target.reportValidity();
                     }
-                }, style: {
-                    width: '100%',
-                    backgroundColor: '#171717',
-                    border: '1px solid #333',
-                    padding: '6px 8px',
-                    fontSize: '11px',
-                    color: '#eee',
-                    fontFamily: 'monospace',
-                    outline: 'none',
-                    borderRadius: 3,
-                    resize: 'vertical',
-                    boxSizing: 'border-box',
-                } })] }));
+                }, style: Object.assign(Object.assign({}, ui.monoTextInput), { width: '100%', minHeight: rows * 18, padding: '4px 6px', outline: 'none', resize: 'vertical', boxSizing: 'border-box' }) })] }));
 }
 function BufferGeometryComponentEditor({ component, onUpdate, }) {
     var _a;

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

@@ -1,22 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { colors } from "../styles";
+import { colors, ui } from "../styles";
 const RESERVED_USER_DATA_KEYS = new Set([
     'prefabNodeId',
     'prefabNodeName',
 ]);
-const inputStyle = {
-    width: '100%',
-    backgroundColor: colors.bgInput,
-    border: `1px solid ${colors.border}`,
-    padding: '6px 8px',
-    fontSize: '11px',
-    color: colors.text,
-    fontFamily: 'monospace',
-    outline: 'none',
-    borderRadius: 3,
-    boxSizing: 'border-box',
-};
+const inputStyle = Object.assign(Object.assign({}, ui.monoTextInput), { width: '100%', padding: '4px 6px', fontSize: '11px', outline: 'none', boxSizing: 'border-box' });
 function isRecord(value) {
     return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { colors } from '../styles';
+import { colors, ui } from '../styles';
 import { useOptionalPrefabStoreApi } from '../prefabStore';
 // ============================================================================
 // Shared Styles (derived from shared color tokens)
@@ -10,13 +10,13 @@ const styles = {
         width: '80px',
         backgroundColor: colors.bgInput,
         border: `1px solid ${colors.border}`,
-        padding: '3px 6px',
+        padding: '2px 4px',
         fontSize: '11px',
         color: colors.text,
         fontFamily: 'monospace',
         outline: 'none',
         textAlign: 'right',
-        borderRadius: 3,
+        borderRadius: 0,
     },
     label: {
         display: 'block',
@@ -229,9 +229,9 @@ export function Vector3Input({ label, value, onChange, snap, labelExtra }) {
                         gap: 4,
                         backgroundColor: colors.bgInput,
                         border: `1px solid ${colors.border}`,
-                        borderRadius: 3,
-                        padding: '4px 6px',
-                        minHeight: 28,
+                        borderRadius: 0,
+                        padding: '2px 4px',
+                        minHeight: 22,
                         cursor: 'ew-resize',
                     }, onPointerDown: e => startScrub(e, index), onPointerMove: onScrubMove, onPointerUp: endScrub, children: [_jsx("span", { style: {
                                 fontSize: 11,
@@ -265,13 +265,13 @@ export function Vector3Input({ label, value, onChange, snap, labelExtra }) {
 // ============================================================================
 export function ColorInput({ label, value, onChange }) {
     return (_jsxs("div", { children: [label && _jsx(Label, { children: label }), _jsxs("div", { style: { display: 'flex', gap: 4, justifyContent: 'space-between' }, children: [_jsx("input", { type: "color", style: {
-                            height: 32,
+                            height: 22,
                             width: 48,
                             backgroundColor: colors.bgInput,
                             border: `1px solid ${colors.border}`,
-                            borderRadius: 3,
+                            borderRadius: 0,
                             cursor: 'pointer',
-                            padding: 2,
+                            padding: 1,
                             flexShrink: 0,
                         }, value: value, onChange: e => onChange(e.target.value) }), _jsx("input", { type: "text", style: Object.assign({}, styles.input), value: value, onChange: e => onChange(e.target.value) })] })] }));
 }
@@ -304,20 +304,20 @@ function SearchSuggestionList({ query, options, onSelect, emptyMessage, }) {
                     gap: 4,
                     maxHeight: 160,
                     overflowY: 'auto',
-                    border: `1px solid ${colors.border}`,
-                    borderRadius: 3,
+                    border: 'none',
+                    borderRadius: 0,
                     background: colors.bgSurface,
-                    padding: 4,
+                    padding: 2,
                 }, children: filtered.length === 0 ? (_jsx("div", { style: { fontSize: 11, color: colors.textMuted, padding: '4px 6px' }, children: emptyMessage })) : filtered.map(option => (_jsxs("button", { type: "button", onClick: () => onSelect(option.value), style: {
                         display: 'flex',
                         flexDirection: 'column',
                         alignItems: 'flex-start',
                         gap: 2,
-                        border: `1px solid ${colors.border}`,
-                        borderRadius: 3,
-                        background: colors.bgInput,
+                        border: 'none',
+                        borderRadius: 0,
+                        background: colors.bgSurface,
                         color: colors.text,
-                        padding: '6px 8px',
+                        padding: '4px 6px',
                         cursor: 'pointer',
                         textAlign: 'left',
                     }, children: [_jsx("span", { style: { fontSize: 11, fontWeight: 500 }, children: option.label }), option.description ? (_jsx("span", { style: { fontSize: 10, color: colors.textMuted, fontFamily: 'monospace' }, children: option.description })) : null] }, option.value))) })] }));
@@ -383,19 +383,7 @@ export function ListEditor({ label, items, renderItem, onAdd, addOptions = [], e
             setSelectedAddValue((_b = (_a = addOptions[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '');
         }
     }, [addOptions, hasAddSelector, selectedAddValue]);
-    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: label }), _jsxs("div", { style: { display: 'flex', gap: 6, alignItems: 'center' }, children: [hasAddSelector ? (_jsx("div", { style: { minWidth: 140 }, children: _jsx(SelectInput, { value: resolvedAddValue, onChange: setSelectedAddValue, options: canAdd ? addOptions : [{ value: '', label: 'All items added' }] }) })) : null, _jsx("button", { type: "button", onClick: () => onAdd(resolvedAddValue), disabled: !canAddItem, style: {
-                                    width: 22,
-                                    height: 22,
-                                    borderRadius: 3,
-                                    border: `1px solid ${canAddItem ? colors.accentBorder : colors.border}`,
-                                    background: canAddItem ? colors.accentBg : colors.bgSurface,
-                                    color: canAddItem ? colors.accent : colors.textMuted,
-                                    cursor: canAddItem ? 'pointer' : 'not-allowed',
-                                    fontSize: 14,
-                                    lineHeight: 1,
-                                    padding: 0,
-                                    flexShrink: 0,
-                                }, title: canAddItem ? addButtonTitle : addDisabledTitle, children: "+" })] })] }), items.length === 0 ? (_jsx("div", { style: { fontSize: 11, color: colors.textMuted }, children: emptyMessage })) : null, items.map(renderItem)] }));
+    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: label }), _jsxs("div", { style: { display: 'flex', gap: 6, alignItems: 'center' }, children: [hasAddSelector ? (_jsx("div", { style: { minWidth: 140 }, children: _jsx(SelectInput, { value: resolvedAddValue, onChange: setSelectedAddValue, options: canAdd ? addOptions : [{ value: '', label: 'All items added' }] }) })) : null, _jsx("button", { type: "button", onClick: () => onAdd(resolvedAddValue), disabled: !canAddItem, style: Object.assign(Object.assign({}, ui.compactActionButton), { width: 22, minWidth: 22, height: 22, border: `1px solid ${canAddItem ? colors.accentBorder : colors.border}`, background: canAddItem ? colors.accentBg : colors.bgSurface, color: canAddItem ? colors.accent : colors.textMuted, cursor: canAddItem ? 'pointer' : 'not-allowed', fontSize: 14, lineHeight: 1 }), title: canAddItem ? addButtonTitle : addDisabledTitle, children: "+" })] })] }), items.length === 0 ? (_jsx("div", { style: { fontSize: 11, color: colors.textMuted }, children: emptyMessage })) : null, items.map(renderItem)] }));
 }
 export function NumberField({ name, label, values, onChange, fallback = 0, step, min, max, style, }) {
     var _a;

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

@@ -5,7 +5,7 @@ import { BooleanField, FieldGroup, Label, ListEditor, NumberInput, SelectInput,
 import { useAssetRuntime } from '../assetRuntime';
 import { EditorContext } from '../PrefabEditor';
 import { getRepeatAxesFromModelProperties, normalizeRepeatAxes } from '../InstanceProvider';
-import { colors } from '../styles';
+import { colors, ui } from '../styles';
 const AXIS_OPTIONS = [
     { value: 'x', label: 'X' },
     { value: 'y', label: 'Y' },
@@ -35,25 +35,7 @@ function RepeatAxisEditor({ axes, onChange, positionSnap, }) {
     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}`));
+            return (_jsxs("div", { style: Object.assign(Object.assign({}, ui.secondaryPanel), { display: 'flex', flexDirection: 'column', gap: 6 }), 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: Object.assign(Object.assign({}, ui.compactActionButton), { height: 24, background: colors.bgInput }), 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 = "" }) {

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

@@ -1,11 +1,15 @@
 import type { RigidBodyOptions } from "@react-three/rapier";
 import { Component } from "./ComponentRegistry";
 type PhysicsColliderType = NonNullable<RigidBodyOptions['colliders']> | 'capsule';
+type ManualColliderShape = 'cuboid' | 'ball' | 'capsule';
 export type PhysicsProps = Omit<RigidBodyOptions, 'colliders'> & {
     colliders?: PhysicsColliderType;
+    manualColliderShape?: ManualColliderShape;
     activeCollisionTypes?: 'all' | undefined;
     linearVelocity?: [number, number, number];
     angularVelocity?: [number, number, number];
+    colliderSize?: [number, number, number];
+    colliderRadius?: number;
     capsuleRadius?: number;
     capsuleHalfHeight?: number;
     emitSensorEnterEvent?: boolean;

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

@@ -10,20 +10,57 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CapsuleCollider, RigidBody, useRapier } from "@react-three/rapier";
+import { BallCollider, CapsuleCollider, CuboidCollider, RigidBody, useRapier } from "@react-three/rapier";
 import { useCallback, useEffect, useRef } from 'react';
 import { useAssetRuntime, useEntityRuntime } from "../assetRuntime";
 import { gameEvents, getEntityIdFromRigidBody } from "../GameEvents";
-import { usePrefabNode } from "../prefabStore";
+import { usePrefabNode, usePrefabStore } from "../prefabStore";
 import { BooleanField, FieldGroup, NumberField, SelectField, StringField, Vector3Field } from "./Input";
-import { getNodeUserData } from "../types";
+import { findComponent, getNodeUserData } from "../types";
 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];
+const manualColliderShapeFallback = 'cuboid';
+const colliderSizeFallback = [1, 1, 1];
+const colliderRadiusFallback = 0.5;
 const capsuleRadiusFallback = 0.35;
 const capsuleHalfHeightFallback = 0.45;
+function isManualColliderShape(value) {
+    return value === 'cuboid' || value === 'ball' || value === 'capsule';
+}
+function hasNodeColliderSource(node) {
+    return Boolean(findComponent(node, 'Geometry')
+        || findComponent(node, 'BufferGeometry')
+        || findComponent(node, 'Model'));
+}
+function subtreeHasColliderSource(nodeId, nodesById, childIdsById) {
+    var _a;
+    if (!nodeId)
+        return false;
+    const pending = [nodeId];
+    while (pending.length > 0) {
+        const currentId = pending.pop();
+        if (!currentId)
+            continue;
+        const currentNode = nodesById[currentId];
+        if (hasNodeColliderSource(currentNode)) {
+            return true;
+        }
+        pending.push(...((_a = childIdsById[currentId]) !== null && _a !== void 0 ? _a : []));
+    }
+    return false;
+}
+function renderManualCollider({ shape, sensor, colliderSize, colliderRadius, capsuleRadius, capsuleHalfHeight, }) {
+    if (shape === 'ball') {
+        return _jsx(BallCollider, { args: [colliderRadius], sensor: sensor });
+    }
+    if (shape === 'capsule') {
+        return _jsx(CapsuleCollider, { args: [capsuleHalfHeight, capsuleRadius], sensor: sensor });
+    }
+    return _jsx(CuboidCollider, { args: colliderSize.map(value => value / 2), sensor: sensor });
+}
 function LockedAxisField({ label, name, values, onChange, }) {
     const enabledAxes = Array.isArray(values[name])
         ? values[name]
@@ -53,10 +90,11 @@ function LockedAxisField({ label, name, values, onChange, }) {
                     const isLocked = !enabledAxes[index];
                     return (_jsx("button", { type: "button", onClick: () => toggleAxisLock(index), style: {
                             flex: 1,
+                            minHeight: 22,
                             backgroundColor: isLocked ? colors.dangerBg : colors.bgInput,
                             border: `1px solid ${isLocked ? colors.dangerBorder : colors.border}`,
-                            borderRadius: 3,
-                            padding: '6px 8px',
+                            borderRadius: 0,
+                            padding: '2px 6px',
                             color: isLocked ? colors.danger : colors.textMuted,
                             fontSize: '11px',
                             fontFamily: 'monospace',
@@ -64,19 +102,28 @@ function LockedAxisField({ label, name, values, onChange, }) {
                         }, children: axisLabel }, axisLabel));
                 }) })] }));
 }
-function PhysicsComponentEditor({ component, onUpdate }) {
+function PhysicsComponentEditor({ node, component, onUpdate }) {
+    const nodeId = node === null || node === void 0 ? void 0 : node.id;
+    const hasAutomaticColliderSource = usePrefabStore(state => subtreeHasColliderSource(nodeId, state.nodesById, state.childIdsById));
+    const manualColliderShape = isManualColliderShape(component.properties.manualColliderShape)
+        ? component.properties.manualColliderShape
+        : manualColliderShapeFallback;
     return (_jsxs(FieldGroup, { children: [_jsx(SelectField, { name: "type", label: "Type", values: component.properties, onChange: onUpdate, options: [
                     { value: 'dynamic', label: 'Dynamic' },
                     { value: 'fixed', label: 'Fixed' },
                     { value: 'kinematicPosition', label: 'Kinematic Position' },
                     { value: 'kinematicVelocity', label: 'Kinematic Velocity' },
-                ] }), _jsx(SelectField, { name: "colliders", label: "Collider", values: component.properties, onChange: onUpdate, options: [
-                    { value: 'hull', label: 'Hull (convex)' },
-                    { value: 'trimesh', label: 'Trimesh (exact)' },
-                    { value: 'cuboid', label: 'Cuboid (box)' },
-                    { value: 'ball', label: 'Ball (sphere)' },
-                    { 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(BooleanField, { name: "emitCollisionEnterEvent", label: "Emit Collision Enter", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.emitCollisionEnterEvent ? (_jsx(StringField, { name: "collisionEnterEventName", label: "Collision Enter Event", values: component.properties, onChange: onUpdate, placeholder: "target:hit" })) : null, _jsx(BooleanField, { name: "emitCollisionExitEvent", label: "Emit Collision Exit", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.emitCollisionExitEvent ? (_jsx(StringField, { name: "collisionExitEventName", label: "Collision Exit Event", values: component.properties, onChange: onUpdate, placeholder: "target:reset" })) : null, _jsx(BooleanField, { name: "emitSensorEnterEvent", label: "Emit Sensor Enter", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.emitSensorEnterEvent ? (_jsx(StringField, { name: "sensorEnterEventName", label: "Sensor Enter Event", values: component.properties, onChange: onUpdate, placeholder: "sensor:enter" })) : null, _jsx(BooleanField, { name: "emitSensorExitEvent", label: "Emit Sensor Exit", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.emitSensorExitEvent ? (_jsx(StringField, { name: "sensorExitEventName", label: "Sensor Exit Event", values: component.properties, onChange: onUpdate, placeholder: "sensor:exit" })) : null, _jsx(SelectField, { name: "activeCollisionTypes", label: "Collision Detection", values: component.properties, onChange: onUpdate, options: [
+                ] }), hasAutomaticColliderSource ? (_jsxs(_Fragment, { children: [_jsx(SelectField, { name: "colliders", label: "Collider", values: component.properties, onChange: onUpdate, options: [
+                            { value: 'hull', label: 'Hull (convex)' },
+                            { value: 'trimesh', label: 'Trimesh (exact)' },
+                            { value: 'cuboid', label: 'Cuboid (box)' },
+                            { value: 'ball', label: 'Ball (sphere)' },
+                            { 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] })) : (_jsxs(_Fragment, { children: [_jsx(SelectField, { name: "manualColliderShape", label: "Shape", values: Object.assign(Object.assign({}, component.properties), { manualColliderShape }), onChange: onUpdate, options: [
+                            { value: 'cuboid', label: 'Cuboid (box)' },
+                            { value: 'ball', label: 'Ball (sphere)' },
+                            { value: 'capsule', label: 'Capsule' },
+                        ] }), manualColliderShape === 'cuboid' ? (_jsx(Vector3Field, { name: "colliderSize", label: "Collider Size", values: component.properties, onChange: onUpdate, fallback: colliderSizeFallback })) : null, manualColliderShape === 'ball' ? (_jsx(NumberField, { name: "colliderRadius", label: "Collider Radius", values: component.properties, onChange: onUpdate, fallback: colliderRadiusFallback, min: 0.01, step: 0.01 })) : null, manualColliderShape === '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(BooleanField, { name: "emitCollisionEnterEvent", label: "Emit Collision Enter", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.emitCollisionEnterEvent ? (_jsx(StringField, { name: "collisionEnterEventName", label: "Collision Enter Event", values: component.properties, onChange: onUpdate, placeholder: "target:hit" })) : null, _jsx(BooleanField, { name: "emitCollisionExitEvent", label: "Emit Collision Exit", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.emitCollisionExitEvent ? (_jsx(StringField, { name: "collisionExitEventName", label: "Collision Exit Event", values: component.properties, onChange: onUpdate, placeholder: "target:reset" })) : null, _jsx(BooleanField, { name: "emitSensorEnterEvent", label: "Emit Sensor Enter", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.emitSensorEnterEvent ? (_jsx(StringField, { name: "sensorEnterEventName", label: "Sensor Enter Event", values: component.properties, onChange: onUpdate, placeholder: "sensor:enter" })) : null, _jsx(BooleanField, { name: "emitSensorExitEvent", label: "Emit Sensor Exit", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.emitSensorExitEvent ? (_jsx(StringField, { name: "sensorExitEventName", label: "Sensor Exit Event", values: component.properties, onChange: onUpdate, placeholder: "sensor:exit" })) : null, _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)' },
                 ] })] }));
@@ -86,17 +133,24 @@ function PhysicsComponentView({ properties, children, position, rotation, scale
     const { registerRigidBodyRef } = useAssetRuntime();
     const { editMode, nodeId, getObject } = useEntityRuntime();
     const gameObject = usePrefabNode(nodeId);
+    const hasAutomaticColliderSource = usePrefabStore(state => subtreeHasColliderSource(nodeId, state.nodesById, state.childIdsById));
     const nodeName = (_b = (_a = gameObject === null || gameObject === void 0 ? void 0 : gameObject.name) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
     const userData = Object.assign(Object.assign({ prefabNodeId: (_c = gameObject === null || gameObject === void 0 ? void 0 : gameObject.id) !== null && _c !== void 0 ? _c : nodeId }, (nodeName ? { prefabNodeName: nodeName } : {})), getNodeUserData(gameObject));
-    const { type, colliders, sensor, activeCollisionTypes, linearVelocity = [0, 0, 0], angularVelocity = [0, 0, 0], capsuleRadius = capsuleRadiusFallback, capsuleHalfHeight = capsuleHalfHeightFallback, emitSensorEnterEvent = false, sensorEnterEventName, emitSensorExitEvent = false, sensorExitEventName, emitCollisionEnterEvent = false, collisionEnterEventName, emitCollisionExitEvent = false, collisionExitEventName, enabledTranslations = enabledAxesFallback, enabledRotations = enabledAxesFallback } = properties, otherProps = __rest(properties, ["type", "colliders", "sensor", "activeCollisionTypes", "linearVelocity", "angularVelocity", "capsuleRadius", "capsuleHalfHeight", "emitSensorEnterEvent", "sensorEnterEventName", "emitSensorExitEvent", "sensorExitEventName", "emitCollisionEnterEvent", "collisionEnterEventName", "emitCollisionExitEvent", "collisionExitEventName", "enabledTranslations", "enabledRotations"]);
+    const { type, colliders, sensor, manualColliderShape = manualColliderShapeFallback, activeCollisionTypes, linearVelocity = [0, 0, 0], angularVelocity = [0, 0, 0], colliderSize = colliderSizeFallback, colliderRadius = colliderRadiusFallback, capsuleRadius = capsuleRadiusFallback, capsuleHalfHeight = capsuleHalfHeightFallback, emitSensorEnterEvent = false, sensorEnterEventName, emitSensorExitEvent = false, sensorExitEventName, emitCollisionEnterEvent = false, collisionEnterEventName, emitCollisionExitEvent = false, collisionExitEventName, enabledTranslations = enabledAxesFallback, enabledRotations = enabledAxesFallback } = properties, otherProps = __rest(properties, ["type", "colliders", "sensor", "manualColliderShape", "activeCollisionTypes", "linearVelocity", "angularVelocity", "colliderSize", "colliderRadius", "capsuleRadius", "capsuleHalfHeight", "emitSensorEnterEvent", "sensorEnterEventName", "emitSensorExitEvent", "sensorExitEventName", "emitCollisionEnterEvent", "collisionEnterEventName", "emitCollisionExitEvent", "collisionExitEventName", "enabledTranslations", "enabledRotations"]);
     const colliderType = colliders || (type === 'fixed' ? 'trimesh' : 'hull');
-    const usesManualCapsuleCollider = colliderType === 'capsule';
+    const resolvedManualColliderShape = isManualColliderShape(manualColliderShape)
+        ? manualColliderShape
+        : manualColliderShapeFallback;
+    const usesAutomaticColliderSource = hasAutomaticColliderSource && colliderType !== 'capsule';
+    const manualColliderShapeToRender = hasAutomaticColliderSource
+        ? 'capsule'
+        : resolvedManualColliderShape;
     const rigidBodyRef = useRef(null);
     const linearVelocityKey = linearVelocity.join(',');
     const angularVelocityKey = angularVelocity.join(',');
     const rbKey = editMode
-        ? `${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}`;
+        ? `${type || 'dynamic'}_${colliderType}_${resolvedManualColliderShape}_${colliderSize.join(',')}_${colliderRadius}_${capsuleRadius}_${capsuleHalfHeight}_${position === null || position === void 0 ? void 0 : position.join(',')}_${rotation === null || rotation === void 0 ? void 0 : rotation.join(',')}`
+        : `${type || 'dynamic'}_${colliderType}_${resolvedManualColliderShape}_${colliderSize.join(',')}_${colliderRadius}_${capsuleRadius}_${capsuleHalfHeight}`;
     const handleRigidBodyRef = useCallback((rigidBody) => {
         rigidBodyRef.current = rigidBody;
         if (!nodeId)
@@ -184,13 +238,25 @@ function PhysicsComponentView({ properties, children, position, rotation, scale
             return;
         dispatchPhysicsEvent(collisionExitEventName, payload);
     }, [collisionExitEventName, dispatchPhysicsEvent, emitCollisionExitEvent]);
-    const rigidBodyProps = Object.assign({ ref: handleRigidBodyRef, type, colliders: usesManualCapsuleCollider ? false : colliderType, position,
-        rotation,
-        scale,
-        sensor,
+    const editModeTransformProps = editMode
+        ? {
+            position,
+            rotation,
+            scale,
+        }
+        : undefined;
+    const rigidBodyProps = Object.assign({ ref: handleRigidBodyRef, type, colliders: usesAutomaticColliderSource ? colliderType : false, position: editMode ? undefined : position, rotation: editMode ? undefined : rotation, scale: editMode ? undefined : scale, sensor,
         enabledTranslations,
         enabledRotations, name: nodeName, userData: Object.assign({ entityId: nodeId }, userData), onIntersectionEnter: emitSensorEnterEvent ? handleIntersectionEnter : undefined, onIntersectionExit: emitSensorExitEvent ? handleIntersectionExit : undefined, onCollisionEnter: emitCollisionEnterEvent ? handleCollisionEnter : undefined, onCollisionExit: emitCollisionExitEvent ? handleCollisionExit : undefined }, otherProps);
-    return (_jsxs(RigidBody, Object.assign({}, rigidBodyProps, { children: [usesManualCapsuleCollider ? _jsx(CapsuleCollider, { args: [capsuleHalfHeight, capsuleRadius], sensor: sensor }) : null, children] }), rbKey));
+    const rigidBodyContent = (_jsxs(_Fragment, { children: [!usesAutomaticColliderSource ? renderManualCollider({
+                shape: manualColliderShapeToRender,
+                sensor,
+                colliderSize,
+                colliderRadius,
+                capsuleRadius,
+                capsuleHalfHeight,
+            }) : null, children] }));
+    return (_jsx(RigidBody, Object.assign({}, rigidBodyProps, { children: editMode ? (_jsx("group", Object.assign({}, editModeTransformProps, { children: rigidBodyContent }))) : rigidBodyContent }), rbKey));
 }
 const PhysicsComponent = {
     name: 'Physics',
@@ -199,6 +265,9 @@ const PhysicsComponent = {
     defaultProperties: {
         type: 'dynamic',
         colliders: 'hull',
+        manualColliderShape: manualColliderShapeFallback,
+        colliderSize: colliderSizeFallback,
+        colliderRadius: colliderRadiusFallback,
         capsuleRadius: capsuleRadiusFallback,
         capsuleHalfHeight: capsuleHalfHeightFallback,
         linearVelocity: [0, 0, 0],

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

@@ -5,7 +5,7 @@ import { SoundPicker } from '../../assetviewer/page';
 import { useAssetRuntime, useEntityRuntime } from '../assetRuntime';
 import { gameEvents } from '../GameEvents';
 import { BooleanField, FieldGroup, FieldRenderer, ListEditor, NumberField, SelectField, StringField } from './Input';
-import { colors } from '../styles';
+import { colors, ui } from '../styles';
 import { AudioListener } from 'three';
 const CLIP_MODE_OPTIONS = [
     { value: 'single', label: 'Single Clip' },
@@ -116,25 +116,7 @@ function SoundComponentEditor({ component, onUpdate, basePath = '' }) {
                         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: [
+                ], 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: Object.assign(Object.assign({}, ui.secondaryPanel), { display: 'flex', gap: 6, alignItems: 'end' }), 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: Object.assign(Object.assign({}, ui.compactActionButton), { height: 24, background: colors.bgInput }), 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' },

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

@@ -3,15 +3,16 @@ import { Label, Vector3Input } from "./Input";
 import { useEditorContext } from "../PrefabEditor";
 import { colors } from "../styles";
 const buttonStyle = {
-    padding: '4px 8px',
+    padding: '2px 6px',
     background: colors.bgSurface,
     color: colors.text,
     border: `1px solid ${colors.border}`,
-    borderRadius: 3,
+    borderRadius: 0,
     cursor: 'pointer',
     font: 'inherit',
     fontSize: 11,
     flex: 1,
+    minHeight: 22,
 };
 function TransformModeSelector({ transformMode, setTransformMode }) {
     return (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsx(Label, { children: "Transform Mode" }), _jsx("div", { style: { display: 'flex', gap: 6 }, children: ["translate", "rotate", "scale"].map(mode => {
@@ -29,7 +30,7 @@ const snapLockBtnStyle = {
     background: 'none',
     border: 'none',
     cursor: 'pointer',
-    padding: '0 2px',
+    padding: 0,
     fontSize: 12,
     lineHeight: 1,
     color: colors.textMuted,

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { colors } from '../styles';
+import { base, colors, ui } from '../styles';
 import { FieldGroup, FieldRow, NumberInput } from './Input';
 export function mergeWithDefaults(defaults, properties) {
     const merged = Object.assign({}, defaults);
@@ -15,15 +15,7 @@ export function mergeWithDefaults(defaults, properties) {
     return merged;
 }
 export function LightSection({ title, children }) {
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 8,
-            padding: '8px 10px',
-            border: `1px solid ${colors.border}`,
-            borderRadius: 6,
-            background: colors.bgSurface,
-        }, children: [_jsx("div", { style: {
+    return (_jsxs("div", { style: Object.assign(Object.assign({}, ui.secondaryPanel), { display: 'flex', flexDirection: 'column', gap: 8, padding: 6 }), children: [_jsx("div", { style: {
                     fontSize: 10,
                     textTransform: 'uppercase',
                     letterSpacing: '0.08em',
@@ -51,14 +43,5 @@ export function ShadowBiasField({ name, label, values, onChange, fallback = 0, }
     var _a;
     const value = (_a = values[name]) !== null && _a !== void 0 ? _a : fallback;
     const [step, setStep] = useState(() => getBiasStep(value));
-    return (_jsx(FieldRow, { label: label, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [_jsx(NumberInput, { value: value, onChange: nextValue => onChange({ [name]: nextValue }), step: step, min: -0.1, max: 0.1, style: { width: 92 } }), _jsx("select", { value: step.toString(), onChange: event => setStep(Number(event.target.value)), style: {
-                        width: 78,
-                        backgroundColor: colors.bgInput,
-                        border: `1px solid ${colors.border}`,
-                        color: colors.text,
-                        borderRadius: 3,
-                        fontSize: 11,
-                        padding: '3px 6px',
-                        fontFamily: 'monospace',
-                    }, title: "Bias scrub step", children: shadowBiasSteps.map(option => (_jsx("option", { value: option, children: formatBiasStep(option) }, option))) })] }) }));
+    return (_jsx(FieldRow, { label: label, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [_jsx(NumberInput, { value: value, onChange: nextValue => onChange({ [name]: nextValue }), step: step, min: -0.1, max: 0.1, style: { width: 92 } }), _jsx("select", { value: step.toString(), onChange: event => setStep(Number(event.target.value)), style: Object.assign(Object.assign({}, base.input), { width: 78, fontSize: 11, fontFamily: 'monospace' }), title: "Bias scrub step", children: shadowBiasSteps.map(option => (_jsx("option", { value: option, children: formatBiasStep(option) }, option))) })] }) }));
 }

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

@@ -34,6 +34,11 @@ interface ToolbarStyles {
 interface ComponentCardStyles {
     container: Style;
 }
+interface UtilityStyles {
+    secondaryPanel: Style;
+    compactActionButton: Style;
+    monoTextInput: Style;
+}
 export declare const colors: {
     bg: string;
     bgSurface: string;
@@ -64,4 +69,5 @@ export declare const tree: TreeStyles;
 export declare const menu: MenuStyles;
 export declare const toolbar: ToolbarStyles;
 export declare const componentCard: ComponentCardStyles;
+export declare const ui: UtilityStyles;
 export {};

package/dist/tools/prefabeditor/styles.js

@@ -1,24 +1,24 @@
 export const colors = {
-    bg: '#1e1e1e',
-    bgSurface: '#252526',
-    bgLight: '#2d2d2d',
-    bgHover: '#2a2d2e',
-    bgInput: '#1a1a1a',
-    border: '#3c3c3c',
-    borderLight: '#333333',
-    borderFaint: '#2a2a2a',
-    text: '#cccccc',
-    textMuted: '#999999',
-    textDim: '#666666',
-    accent: '#4c9eff',
-    accentBg: 'rgba(76, 158, 255, 0.12)',
-    accentBorder: 'rgba(76, 158, 255, 0.4)',
-    danger: '#f44747',
-    dangerBg: 'rgba(244, 71, 71, 0.12)',
-    dangerBorder: 'rgba(244, 71, 71, 0.35)',
+    bg: '#f3f3f3',
+    bgSurface: '#d7d7d7',
+    bgLight: '#fafafa',
+    bgHover: '#e6e6e6',
+    bgInput: '#f5f5f5',
+    border: '#6f6f6f',
+    borderLight: '#9a9a9a',
+    borderFaint: '#b8b8b8',
+    text: '#2f2f2f',
+    textMuted: '#5f5f5f',
+    textDim: '#7f7f7f',
+    accent: '#1e6f89',
+    accentBg: '#a9dded',
+    accentBorder: '#5e5e5e',
+    danger: '#9c3232',
+    dangerBg: '#efcaca',
+    dangerBorder: '#6f6f6f',
 };
 export const fonts = {
-    family: 'system-ui, -apple-system, sans-serif',
+    family: 'Tahoma, Verdana, sans-serif',
     size: 11,
     sizeSm: 10,
 };
@@ -28,44 +28,48 @@ export const base = {
         background: colors.bg,
         color: colors.text,
         border: `1px solid ${colors.border}`,
-        borderRadius: 4,
         fontFamily: fonts.family,
         fontSize: fonts.size,
-        boxShadow: '0 2px 8px rgba(0,0,0,0.4)',
+        borderRadius: 0,
+        boxShadow: 'none',
     },
     header: {
-        padding: '7px 10px',
+        padding: '3px 6px',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
         cursor: 'pointer',
         background: colors.bgLight,
-        borderBottom: `1px solid ${colors.borderLight}`,
+        borderBottom: `1px solid ${colors.border}`,
         fontSize: fonts.size,
-        fontWeight: 600,
-        textTransform: 'uppercase',
-        letterSpacing: 0.8,
+        fontWeight: 400,
         color: colors.text,
+        minHeight: 22,
+        boxSizing: 'border-box',
     },
     input: {
         width: '100%',
         background: colors.bgInput,
         border: `1px solid ${colors.border}`,
-        borderRadius: 3,
-        padding: '5px 8px',
+        borderRadius: 0,
+        padding: '2px 4px',
         color: colors.text,
         fontSize: fonts.size,
         outline: 'none',
+        minHeight: 22,
+        boxSizing: 'border-box',
     },
     btn: {
-        background: colors.bgLight,
+        background: colors.bgSurface,
         border: `1px solid ${colors.border}`,
-        borderRadius: 3,
-        padding: '4px 8px',
+        borderRadius: 0,
+        padding: '2px 6px',
         color: colors.text,
         fontSize: fonts.size,
         cursor: 'pointer',
         outline: 'none',
+        minHeight: 22,
+        boxSizing: 'border-box',
     },
     btnDanger: {
         background: colors.dangerBg,
@@ -75,25 +79,22 @@ export const base = {
     label: {
         fontSize: fonts.sizeSm,
         color: colors.textMuted,
-        marginBottom: 4,
-        textTransform: 'uppercase',
-        letterSpacing: 0.5,
-        fontWeight: 500,
+        marginBottom: 2,
+        fontWeight: 400,
     },
     row: {
         display: 'flex',
-        gap: 6,
+        gap: 4,
     },
     section: {
-        paddingBottom: 8,
-        borderBottom: `1px solid ${colors.borderLight}`,
+        paddingBottom: 4,
     },
 };
 // Specific panel styles
 export const inspector = {
-    panel: Object.assign(Object.assign({}, base.panel), { position: 'absolute', top: 8, right: 8, zIndex: 20, width: 260 }),
+    panel: Object.assign(Object.assign({}, base.panel), { position: 'absolute', top: 8, right: 8, zIndex: 20, width: 300 }),
     content: {
-        padding: 8,
+        padding: 6,
         maxHeight: '80vh',
         overflowY: 'auto',
         overflowX: 'hidden',
@@ -102,37 +103,37 @@ export const inspector = {
         boxSizing: 'border-box',
         display: 'flex',
         flexDirection: 'column',
-        gap: 8,
+        gap: 4,
     },
 };
 export const tree = {
     panel: Object.assign(Object.assign({}, base.panel), { maxHeight: '85vh', display: 'flex', flexDirection: 'column', userSelect: 'none' }),
     scroll: {
         overflowY: 'auto',
-        padding: 4,
+        padding: 2,
         scrollbarWidth: 'thin',
         scrollbarColor: `${colors.bgLight} transparent`,
     },
     row: {
         display: 'flex',
         alignItems: 'center',
-        padding: '3px 6px',
+        padding: '2px 4px',
         borderBottomWidth: 1,
         borderBottomStyle: 'solid',
         borderBottomColor: colors.borderFaint,
         cursor: 'pointer',
         whiteSpace: 'nowrap',
-        borderRadius: 2,
     },
     selected: {
         background: colors.accentBg,
         borderBottomColor: colors.accentBorder,
+        boxShadow: 'none',
     },
     iconButton: {
         background: 'none',
         border: 'none',
         cursor: 'pointer',
-        padding: '0 4px',
+        padding: '0 2px',
         fontSize: 14,
         opacity: 0.7,
         color: 'inherit',
@@ -146,15 +147,15 @@ export const menu = {
         width: 'max-content',
         maxWidth: 'min(240px, calc(100vw - 16px))',
         background: colors.bgSurface,
-        border: `1px solid ${colors.border}`,
-        borderRadius: 4,
+        border: 'none',
         overflow: 'hidden',
-        boxShadow: '0 4px 16px rgba(0,0,0,0.6)',
+        borderRadius: 0,
+        boxShadow: 'none',
     },
     item: {
         width: '100%',
         textAlign: 'left',
-        padding: '7px 12px',
+        padding: '4px 8px',
         background: 'transparent',
         border: 'none',
         color: colors.text,
@@ -171,17 +172,17 @@ export const toolbar = {
     panel: {
         position: 'absolute',
         top: 8,
-        left: '240px',
+        left: '232px',
         display: 'flex',
-        gap: 6,
-        padding: '4px 6px',
+        gap: 4,
+        padding: '2px 4px',
         background: colors.bg,
         border: `1px solid ${colors.border}`,
-        borderRadius: 4,
         color: colors.text,
         fontFamily: fonts.family,
         fontSize: fonts.size,
-        boxShadow: '0 2px 8px rgba(0,0,0,0.4)',
+        borderRadius: 0,
+        boxShadow: 'none',
     },
     divider: {
         width: 1,
@@ -195,10 +196,22 @@ export const toolbar = {
 // Reusable component card style for inspector sections
 export const componentCard = {
     container: {
-        marginBottom: 8,
-        backgroundColor: colors.bgSurface,
-        padding: 8,
-        borderRadius: 4,
+        marginBottom: 4,
+        backgroundColor: colors.bg,
+        padding: 4,
+        border: `1px solid ${colors.border}`,
+        borderRadius: 0,
+        boxShadow: 'none',
+    },
+};
+export const ui = {
+    secondaryPanel: {
+        background: colors.bgSurface,
         border: `1px solid ${colors.border}`,
+        borderRadius: 0,
+        padding: 4,
+        boxSizing: 'border-box',
     },
+    compactActionButton: Object.assign(Object.assign({}, base.btn), { width: 28, minWidth: 28, padding: 0, flexShrink: 0 }),
+    monoTextInput: Object.assign(Object.assign({}, base.input), { fontFamily: 'monospace' }),
 };

package/package.json

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