react-three-game 0.0.90 → 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/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.js

@@ -90,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',
@@ -237,20 +238,25 @@ function PhysicsComponentView({ properties, children, position, rotation, scale
             return;
         dispatchPhysicsEvent(collisionExitEventName, payload);
     }, [collisionExitEventName, dispatchPhysicsEvent, emitCollisionExitEvent]);
-    const rigidBodyProps = Object.assign({ ref: handleRigidBodyRef, type, colliders: usesAutomaticColliderSource ? colliderType : false, 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: [!usesAutomaticColliderSource ? renderManualCollider({
+    const rigidBodyContent = (_jsxs(_Fragment, { children: [!usesAutomaticColliderSource ? renderManualCollider({
                 shape: manualColliderShapeToRender,
                 sensor,
                 colliderSize,
                 colliderRadius,
                 capsuleRadius,
                 capsuleHalfHeight,
-            }) : null, children] }), rbKey));
+            }) : null, children] }));
+    return (_jsx(RigidBody, Object.assign({}, rigidBodyProps, { children: editMode ? (_jsx("group", Object.assign({}, editModeTransformProps, { children: rigidBodyContent }))) : rigidBodyContent }), rbKey));
 }
 const PhysicsComponent = {
     name: 'Physics',

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