react-three-game 0.0.90 → 0.0.92

package/dist/tools/assetviewer/page.js

@@ -12,6 +12,34 @@ const styles = {
     textLight: { color: '#f9fafb' },
     iconLarge: { fontSize: 20 }
 };
+const assetViewerColors = {
+    panelBg: '#111827',
+    controlBg: '#1f2937',
+    text: '#f9fafb',
+    border: 'rgba(255,255,255,0.12)',
+    accentBorder: 'rgba(34, 211, 238, 0.3)',
+};
+const assetPickerPopupBaseStyle = {
+    background: assetViewerColors.panelBg,
+    border: `1px solid ${assetViewerColors.border}`,
+    borderRadius: 0,
+    boxShadow: '0 4px 16px rgba(0,0,0,0.6)',
+};
+const assetPickerButtonBaseStyle = {
+    backgroundColor: assetViewerColors.controlBg,
+    color: 'inherit',
+    fontSize: 10,
+    cursor: 'pointer',
+    border: `1px solid ${assetViewerColors.border}`,
+    borderRadius: 0,
+};
+const assetPickerWideButtonStyle = Object.assign(Object.assign({}, assetPickerButtonBaseStyle), { width: '100%', padding: '6px 8px' });
+const assetPickerSmallButtonStyle = Object.assign(Object.assign({}, assetPickerButtonBaseStyle), { padding: '4px 8px' });
+const assetPickerEmptyPreviewStyle = {
+    backgroundColor: assetViewerColors.controlBg,
+    border: `1px dashed ${assetViewerColors.border}`,
+    borderRadius: 0,
+};
 function getItemsInPath(files, currentPath) {
     // Remove the leading category folder (e.g., /textures/, /models/, /sounds/)
     const filesWithoutCategory = files.map(file => {
@@ -39,8 +67,8 @@ function FolderTile({ name, onClick }) {
     return (_jsxs("div", { onClick: onClick, style: {
             maxWidth: 60,
             aspectRatio: '1 / 1',
-            backgroundColor: '#1f2937', /* gray-800 */
-            color: '#f9fafb',
+            backgroundColor: assetViewerColors.controlBg,
+            color: assetViewerColors.text,
             cursor: 'pointer',
             display: 'flex',
             flexDirection: 'column',
@@ -73,7 +101,7 @@ function AssetListViewer({ files, selected, onSelect, renderCard }) {
                     const pathParts = currentPath.split('/').filter(Boolean);
                     pathParts.pop();
                     setCurrentPath(pathParts.join('/'));
-                }, style: { marginBottom: 4, padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 12, cursor: 'pointer', border: 'none' }, children: "\u2190 Back" })), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }, children: [folders.map((folder) => (_jsx(FolderTile, { name: folder, onClick: () => setCurrentPath(currentPath ? `${currentPath}/${folder}` : folder) }, folder))), filesInCurrentPath.map((file) => (_jsx("div", { children: renderCard(file, onSelect) }, file)))] })] }));
+                }, style: Object.assign(Object.assign({}, assetPickerSmallButtonStyle), { marginBottom: 4, fontSize: 12, border: 'none' }), children: "\u2190 Back" })), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }, children: [folders.map((folder) => (_jsx(FolderTile, { name: folder, onClick: () => setCurrentPath(currentPath ? `${currentPath}/${folder}` : folder) }, folder))), filesInCurrentPath.map((file) => (_jsx("div", { children: renderCard(file, onSelect) }, file)))] })] }));
 }
 export function TextureListViewer({ files, selected, onSelect, basePath = "" }) {
     return (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%' }, children: [_jsx("div", { style: { width: '100%', height: '100%', overflowY: 'auto', overflowX: 'hidden', paddingRight: 4 }, children: _jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(TextureCard, { file: file, basePath: basePath, onSelect: onSelectHandler })) }) }), _jsx(SharedCanvas, {})] }));
@@ -172,8 +200,8 @@ function AssetPicker({ value, onChange, basePath, manifestFolder, preview, rende
             const fitsLeft = preferredLeft >= 8;
             const left = fitsLeft ? preferredLeft : Math.min(fallbackLeft, window.innerWidth - PICKER_POPUP_WIDTH - 8);
             const top = Math.min(Math.max(8, rect.top), window.innerHeight - PICKER_POPUP_HEIGHT - 8);
-            setResolvedPopupStyle(Object.assign({ position: 'fixed', left,
-                top, padding: 12, width: PICKER_POPUP_WIDTH, height: PICKER_POPUP_HEIGHT, overflow: 'hidden', zIndex: 1000, boxShadow: '0 4px 16px rgba(0,0,0,0.6)', background: '#111827', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 6 }, popupStyle));
+            setResolvedPopupStyle(Object.assign(Object.assign({ position: 'fixed', left,
+                top, padding: 12, width: PICKER_POPUP_WIDTH, height: PICKER_POPUP_HEIGHT, overflow: 'hidden', zIndex: 1000 }, assetPickerPopupBaseStyle), popupStyle));
         };
         updatePosition();
         window.addEventListener('resize', updatePosition);
@@ -194,23 +222,23 @@ function AssetPicker({ value, onChange, basePath, manifestFolder, preview, rende
                 }) }), document.body)] }));
 }
 export function TexturePicker({ value, onChange, basePath = "" }) {
-    return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "textures", rootStyle: { maxHeight: 128, overflow: 'visible', position: 'relative', display: 'flex', alignItems: 'center' }, changeButtonStyle: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 3, marginTop: 4 }, clearButtonStyle: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 3, marginTop: 4, marginLeft: 4 }, preview: _jsx(SingleTextureViewer, { file: value, basePath: basePath }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(TextureListViewer, { files: files, selected: selectedValue || undefined, onSelect: onSelect, basePath: currentBasePath })) }));
+    return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "textures", rootStyle: { maxHeight: 128, overflow: 'visible', position: 'relative', display: 'flex', alignItems: 'center' }, changeButtonStyle: Object.assign(Object.assign({}, assetPickerSmallButtonStyle), { marginTop: 4 }), clearButtonStyle: Object.assign(Object.assign({}, assetPickerSmallButtonStyle), { marginTop: 4, marginLeft: 4 }), preview: _jsx(SingleTextureViewer, { file: value, basePath: basePath }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(TextureListViewer, { files: files, selected: selectedValue || undefined, onSelect: onSelect, basePath: currentBasePath })) }));
 }
 export function ModelPicker({ value, onChange, basePath = "", pickerKey }) {
-    return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "models", rootStyle: { maxHeight: 160, overflow: 'visible', position: 'relative', display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'center' }, controlsStyle: { display: 'flex', flexDirection: 'column', gap: 6, flex: '0 0 84px', minWidth: 84, justifyContent: 'flex-end' }, changeButtonStyle: { width: '100%', padding: '6px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)' }, clearButtonStyle: { width: '100%', padding: '6px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)' }, popupStyle: { background: 'rgba(0,0,0,0.9)', border: '1px solid rgba(34, 211, 238, 0.3)' }, preview: _jsx("div", { style: { flex: '0 0 auto' }, children: _jsx(SingleModelViewer, { file: value ? `/${value}` : undefined, basePath: basePath }) }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(ModelListViewer, { files: files, selected: selectedValue ? `/${selectedValue}` : undefined, onSelect: (file) => onSelect(file.startsWith('/') ? file.slice(1) : file), basePath: currentBasePath }, pickerKey)) }));
+    return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "models", rootStyle: { maxHeight: 160, overflow: 'visible', position: 'relative', display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'center' }, controlsStyle: { display: 'flex', flexDirection: 'column', gap: 6, flex: '0 0 84px', minWidth: 84, justifyContent: 'flex-end' }, changeButtonStyle: Object.assign(Object.assign({}, assetPickerWideButtonStyle), { border: `1px solid ${assetViewerColors.accentBorder}` }), clearButtonStyle: Object.assign(Object.assign({}, assetPickerWideButtonStyle), { border: `1px solid ${assetViewerColors.accentBorder}` }), popupStyle: { background: 'rgba(0,0,0,0.9)', border: `1px solid ${assetViewerColors.accentBorder}` }, preview: _jsx("div", { style: { flex: '0 0 auto' }, children: _jsx(SingleModelViewer, { file: value ? `/${value}` : undefined, basePath: basePath }) }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(ModelListViewer, { files: files, selected: selectedValue ? `/${selectedValue}` : undefined, onSelect: (file) => onSelect(file.startsWith('/') ? file.slice(1) : file), basePath: currentBasePath }, pickerKey)) }));
 }
 export function SoundPicker({ value, onChange, basePath = "" }) {
-    return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "sound", rootStyle: { maxHeight: 76, overflow: 'visible', position: 'relative', display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'center' }, controlsStyle: { display: 'flex', flexDirection: 'column', gap: 6, flex: '0 0 84px', minWidth: 84, justifyContent: 'flex-end' }, changeButtonStyle: { width: '100%', padding: '6px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 3 }, clearButtonStyle: { width: '100%', padding: '6px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 3 }, preview: _jsx("div", { style: { flex: '0 0 auto', minWidth: 84 }, children: value ? _jsx(SingleSoundViewer, { file: value, basePath: basePath }) : _jsx("div", { style: { width: 84, height: 60, backgroundColor: '#1f2937', border: '1px dashed rgba(255,255,255,0.12)', borderRadius: 4 } }) }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(SoundListViewer, { files: files, selected: selectedValue || undefined, onSelect: onSelect, basePath: currentBasePath })) }));
+    return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "sound", rootStyle: { maxHeight: 76, overflow: 'visible', position: 'relative', display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'center' }, controlsStyle: { display: 'flex', flexDirection: 'column', gap: 6, flex: '0 0 84px', minWidth: 84, justifyContent: 'flex-end' }, changeButtonStyle: assetPickerWideButtonStyle, clearButtonStyle: assetPickerWideButtonStyle, preview: _jsx("div", { style: { flex: '0 0 auto', minWidth: 84 }, children: value ? _jsx(SingleSoundViewer, { file: value, basePath: basePath }) : _jsx("div", { style: Object.assign({ width: 84, height: 60 }, assetPickerEmptyPreviewStyle) }) }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(SoundListViewer, { files: files, selected: selectedValue || undefined, onSelect: onSelect, basePath: currentBasePath })) }));
 }
 // Single Asset Viewer Components - display only one selected asset
 export function SingleTextureViewer({ file, basePath = "" }) {
     if (!file)
-        return _jsx("div", { style: { width: 60, aspectRatio: '1 / 1', backgroundColor: '#1f2937', border: '1px dashed rgba(255,255,255,0.12)' } });
+        return _jsx("div", { style: Object.assign({ width: 60, aspectRatio: '1 / 1' }, assetPickerEmptyPreviewStyle) });
     return (_jsxs(_Fragment, { children: [_jsx(TextureCard, { file: file, basePath: basePath, onSelect: () => { } }), _jsx(SharedCanvas, {})] }));
 }
 export function SingleModelViewer({ file, basePath = "" }) {
     if (!file)
-        return _jsx("div", { style: { width: 112, aspectRatio: '1 / 1', backgroundColor: '#1f2937', border: '1px dashed rgba(255,255,255,0.12)' } });
+        return _jsx("div", { style: Object.assign({ width: 112, aspectRatio: '1 / 1' }, assetPickerEmptyPreviewStyle) });
     return (_jsxs(_Fragment, { children: [_jsx(ModelCard, { file: file, basePath: basePath, onSelect: () => { }, size: 112 }), _jsx(SharedCanvas, {})] }));
 }
 export function SingleSoundViewer({ file, basePath = "" }) {

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

@@ -8,9 +8,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { MapControls, TransformControls } from "@react-three/drei";
+import { MapControls, TransformControls, useHelper } from "@react-three/drei";
 import GameCanvas from "../../shared/GameCanvas";
-import { useCallback, useEffect, useReducer, useRef, useState, forwardRef, useImperativeHandle, createContext, useContext } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, forwardRef, useImperativeHandle, createContext, useContext } from "react";
+import { BoxHelper } from "three";
 import { findComponentEntry } from "./types";
 import PrefabRoot from "./PrefabRoot";
 import { Physics } from "@react-three/rapier";
@@ -31,6 +32,12 @@ function isObjectAttachedToRoot(root, object) {
     }
     return false;
 }
+function SelectionHelper({ object }) {
+    const objectRef = useRef(null);
+    objectRef.current = object;
+    useHelper(object ? objectRef : null, BoxHelper, "cyan");
+    return null;
+}
 export var PrefabEditorMode;
 (function (PrefabEditorMode) {
     PrefabEditorMode["Edit"] = "edit";
@@ -52,6 +59,7 @@ const DEFAULT_PREFAB = {
     root: createNode('Root', {}, { id: 'root' })
 };
 const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode: initialMode = PrefabEditorMode.Edit, onChange, showUI = true, enableWindowDrop = true, canvasProps, uiPlugins, children }, ref) => {
+    var _a, _b;
     const [mode, setMode] = useState(initialMode);
     const [selectedId, setSelectedId] = useState(null);
     const [transformMode, setTransformMode] = useState("translate");
@@ -64,21 +72,17 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
     const [historyIndex, setHistoryIndex] = useState(0);
     const changeOriginRef = useRef(null);
     const historyIndexRef = useRef(0);
-    const [, bumpSelectedObjectVersion] = useReducer((value) => value + 1, 0);
     const prefabRootRef = useRef(null);
     const canvasRef = useRef(null);
     const controlsRef = useRef(null);
+    const transformControlsRef = useRef(null);
+    const transformProxyRef = useRef(null);
     const onChangeRef = useRef(onChange);
     const isEditMode = mode === PrefabEditorMode.Edit;
     const getPrefab = useCallback(() => denormalizePrefab(prefabStore.getState()), [prefabStore]);
     const getRootObject = useCallback(() => { var _a, _b; return (_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.root) !== null && _b !== void 0 ? _b : null; }, []);
     const getObject = useCallback((nodeId) => { var _a, _b; return (_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.getObject(nodeId)) !== null && _b !== void 0 ? _b : null; }, []);
     const getRigidBody = useCallback((nodeId) => { var _a, _b; return (_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.getRigidBody(nodeId)) !== null && _b !== void 0 ? _b : null; }, []);
-    const handleObjectRefChange = useCallback((nodeId) => {
-        if (nodeId !== selectedId)
-            return;
-        bumpSelectedObjectVersion();
-    }, [selectedId]);
     onChangeRef.current = onChange;
     const setSelection = useCallback((nodeId) => {
         const nextNode = nodeId ? prefabStore.getState().nodesById[nodeId] : null;
@@ -104,7 +108,9 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
         updateMode(initialMode);
     }, [initialMode, updateMode]);
     const loadPrefab = useCallback((prefab, options) => {
+        var _a;
         changeOriginRef.current = (options === null || options === void 0 ? void 0 : options.notifyChange) === false ? "replace-silent" : "replace";
+        (_a = transformControlsRef.current) === null || _a === void 0 ? void 0 : _a.detach();
         prefabStore.getState().replacePrefab(prefab);
         if (options === null || options === void 0 ? void 0 : options.resetHistory) {
             setSelectedId(null);
@@ -171,10 +177,23 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
         });
         return () => unsubscribe();
     }, [prefabStore, selectedId]);
+    const selectedNode = selectedId ? (_a = prefabStore.getState().nodesById[selectedId]) !== null && _a !== void 0 ? _a : null : null;
     const selectedObject = selectedId ? getObject(selectedId) : null;
-    const transformObject = isObjectAttachedToRoot(getRootObject(), selectedObject)
-        ? selectedObject
+    const selectedHasPhysics = Object.values((_b = selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.components) !== null && _b !== void 0 ? _b : {}).some(component => (component === null || component === void 0 ? void 0 : component.type) === "Physics");
+    const transformObject = isEditMode && (selectedHasPhysics ? transformProxyRef.current : selectedObject)
+        && isObjectAttachedToRoot(getRootObject(), selectedObject)
+        ? (selectedHasPhysics ? transformProxyRef.current : selectedObject)
         : null;
+    useLayoutEffect(() => {
+        if (!isEditMode || !selectedHasPhysics || !selectedObject || !transformProxyRef.current) {
+            return;
+        }
+        selectedObject.updateMatrixWorld(true);
+        transformProxyRef.current.matrixAutoUpdate = true;
+        selectedObject.matrixWorld.decompose(transformProxyRef.current.position, transformProxyRef.current.quaternion, transformProxyRef.current.scale);
+        transformProxyRef.current.updateMatrix();
+        transformProxyRef.current.updateMatrixWorld(true);
+    }, [isEditMode, selectedHasPhysics, selectedId, selectedObject]);
     const addNode = useCallback((node, options) => {
         var _a;
         const { addChild, rootId } = prefabStore.getState();
@@ -202,7 +221,9 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
         return node;
     }, [addNode]);
     const applyHistory = (index) => {
+        var _a;
         changeOriginRef.current = "history";
+        (_a = transformControlsRef.current) === null || _a === void 0 ? void 0 : _a.detach();
         prefabStore.getState().replacePrefab(history[index]);
         historyIndexRef.current = index;
         setHistoryIndex(index);
@@ -274,7 +295,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
     const handleTransformChange = () => {
         if (!selectedId)
             return;
-        const object = getObject(selectedId);
+        const object = selectedHasPhysics ? transformProxyRef.current : getObject(selectedId);
         if (!object)
             return;
         const parentWorld = computeParentWorldMatrix(prefabStore.getState(), selectedId);
@@ -341,7 +362,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
         addModel,
         addTexture
     }), [addModel, addNode, addTexture, clearSelection, getObject, getPrefab, getRigidBody, getRootObject, handleExportGLB, handleExportGLBData, handleScreenshot, loadPrefab, prefabStore]);
-    const content = (_jsxs(_Fragment, { children: [isEditMode ? _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }) : null, _jsx(PrefabRoot, { ref: prefabRootRef, store: prefabStore, editMode: isEditMode, selectedId: selectedId, onSelect: setSelection, onObjectRefChange: handleObjectRefChange, basePath: basePath }), children] }));
+    const content = (_jsxs(_Fragment, { children: [isEditMode ? _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }) : null, _jsx(PrefabRoot, { ref: prefabRootRef, store: prefabStore, editMode: isEditMode, selectedId: selectedId, onSelect: setSelection, basePath: basePath }), children] }));
     const handleCanvasCreated = useCallback((state) => {
         var _a;
         canvasRef.current = state.gl.domElement;
@@ -370,7 +391,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, { 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 }))] }))] }) });
+                        : canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onPointerMissed, children: [physics ? (_jsx(Physics, { colliders: false, debug: isEditMode, paused: isEditMode, children: content })) : content, _jsx("group", { ref: transformProxyRef, visible: false }), isEditMode ? _jsx(SelectionHelper, { object: transformObject }) : null, isEditMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, enableDamping: false, makeDefault: true }), transformObject && (_jsx(TransformControls, { ref: transformControlsRef, 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.d.ts

@@ -18,7 +18,6 @@ export interface PrefabRootProps {
     selectedId?: string | null;
     onSelect?: (id: string | null) => void;
     onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
-    onObjectRefChange?: (id: string, object: Object3D | null) => void;
     basePath?: string;
 }
 export declare const PrefabRoot: import("react").ForwardRefExoticComponent<PrefabRootProps & import("react").RefAttributes<PrefabRootRef>>;

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -10,9 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useHelper } from "@react-three/drei";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { BoxHelper, Euler, Matrix4, } from "three";
+import { Euler, Matrix4, } from "three";
 import { useStore } from "zustand";
 import { useClickValid } from "./useClickValid";
 import { findComponent, getNodeUserData } from "./types";
@@ -69,7 +68,7 @@ function getNodeMetadataProps(node) {
         userData: Object.assign(Object.assign({ prefabNodeId: node.id }, (nodeName ? { prefabNodeName: nodeName } : {})), getNodeUserData(node)),
     };
 }
-export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSelect, onClick, onObjectRefChange, basePath = "" }, ref) => {
+export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSelect, onClick, basePath = "" }, ref) => {
     var _a;
     const [models, setModels] = useState({});
     const [textures, setTextures] = useState({});
@@ -120,8 +119,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
     }), [getObject]);
     const registerRef = useCallback((id, obj) => {
         objectRefs.current[id] = obj;
-        onObjectRefChange === null || onObjectRefChange === void 0 ? void 0 : onObjectRefChange(id, obj);
-    }, [onObjectRefChange]);
+    }, []);
     const registerRigidBodyRef = useCallback((id, rb) => {
         rigidBodyRefs.current.set(id, rb);
     }, []);
@@ -293,18 +291,10 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, load
     const clickEventName = getNodeClickEventName(gameObject);
     const metadataProps = getNodeMetadataProps(gameObject);
     const groupRef = useRef(null);
-    const helperRef = useRef(null);
     const handleGroupRef = useCallback((object) => {
         groupRef.current = object;
         registerRef(nodeId, object);
     }, [nodeId, registerRef]);
-    const handleHelperRef = useCallback((object) => {
-        helperRef.current = object;
-    }, []);
-    const handleEditGroupRef = useCallback((object) => {
-        handleGroupRef(object);
-        handleHelperRef(object);
-    }, [handleGroupRef, handleHelperRef]);
     const editClickHandlers = useClickValid(!!editMode && !isLocked, (event) => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeId);
         onClick === null || onClick === void 0 ? void 0 : onClick(event, gameObject);
@@ -318,7 +308,6 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, load
             },
         }
         : undefined;
-    useHelper(editMode && isSelected ? helperRef : null, BoxHelper, "cyan");
     const world = parentMatrix.clone().multiply(compose(gameObject));
     const physics = findComponent(gameObject, "Physics");
     const ready = isNodeReady(gameObject, loadedModels);
@@ -336,8 +325,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: 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: 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/DirectionalLightComponent.js

@@ -43,7 +43,7 @@ const frustumInputStyle = {
 const centerLockButtonStyle = {
     width: 34,
     height: 34,
-    borderRadius: 999,
+    borderRadius: 0,
     border: `1px solid ${colors.border}`,
     background: colors.bgInput,
     color: colors.textMuted,

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

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { BallCollider, CapsuleCollider, CuboidCollider, RigidBody, useRapier } from "@react-three/rapier";
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useAssetRuntime, useEntityRuntime } from "../assetRuntime";
 import { gameEvents, getEntityIdFromRigidBody } from "../GameEvents";
 import { usePrefabNode, usePrefabStore } from "../prefabStore";
@@ -27,6 +27,7 @@ const colliderSizeFallback = [1, 1, 1];
 const colliderRadiusFallback = 0.5;
 const capsuleRadiusFallback = 0.35;
 const capsuleHalfHeightFallback = 0.45;
+const EDIT_MODE_DEBUG_REFRESH_THROTTLE_MS = 120;
 function isManualColliderShape(value) {
     return value === 'cuboid' || value === 'ball' || value === 'capsule';
 }
@@ -90,10 +91,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',
@@ -145,11 +147,12 @@ function PhysicsComponentView({ properties, children, position, rotation, scale
         ? 'capsule'
         : resolvedManualColliderShape;
     const rigidBodyRef = useRef(null);
+    const [editRefreshVersion, setEditRefreshVersion] = useState(0);
+    const lastEditRefreshAtRef = useRef(0);
     const linearVelocityKey = linearVelocity.join(',');
     const angularVelocityKey = angularVelocity.join(',');
-    const rbKey = editMode
-        ? `${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 transformSignature = `${position === null || position === void 0 ? void 0 : position.join(',')}_${rotation === null || rotation === void 0 ? void 0 : rotation.join(',')}_${scale === null || scale === void 0 ? void 0 : scale.join(',')}`;
+    const rbKey = `${type || 'dynamic'}_${colliderType}_${resolvedManualColliderShape}_${colliderSize.join(',')}_${colliderRadius}_${capsuleRadius}_${capsuleHalfHeight}_${editMode ? editRefreshVersion : 0}`;
     const handleRigidBodyRef = useCallback((rigidBody) => {
         rigidBodyRef.current = rigidBody;
         if (!nodeId)
@@ -178,6 +181,23 @@ function PhysicsComponentView({ properties, children, position, rotation, scale
             }
         }
     }, [activeCollisionTypes, rapier, type, colliders]);
+    useEffect(() => {
+        if (!editMode) {
+            return;
+        }
+        const now = Date.now();
+        const delay = Math.max(0, EDIT_MODE_DEBUG_REFRESH_THROTTLE_MS - (now - lastEditRefreshAtRef.current));
+        if (delay === 0) {
+            lastEditRefreshAtRef.current = now;
+            setEditRefreshVersion(version => version + 1);
+            return;
+        }
+        const timeoutId = setTimeout(() => {
+            lastEditRefreshAtRef.current = Date.now();
+            setEditRefreshVersion(version => version + 1);
+        }, delay);
+        return () => clearTimeout(timeoutId);
+    }, [editMode, transformSignature]);
     // Seed authored velocities when the body instance changes or the authored values change.
     useEffect(() => {
         if (!rigidBodyRef.current)
@@ -243,14 +263,15 @@ function PhysicsComponentView({ properties, children, position, rotation, 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: 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.92",
   "description": "high performance 3D game engine built in React",
   "main": "dist/index.js",
   "module": "dist/index.js",