react-three-game 0.0.55 → 0.0.57

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

@@ -9,91 +9,26 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RigidBody, useRapier } from "@react-three/rapier";
 import { useRef, useEffect, useCallback } from 'react';
-import { FieldRenderer } from "./Input";
+import { BooleanField, FieldGroup, NumberField, SelectField } from "./Input";
 import { gameEvents, getEntityIdFromRigidBody } from "../GameEvents";
-const physicsFields = [
-    {
-        name: 'type',
-        type: 'select',
-        label: 'Type',
-        options: [
-            { value: 'dynamic', label: 'Dynamic' },
-            { value: 'fixed', label: 'Fixed' },
-            { value: 'kinematicPosition', label: 'Kinematic Position' },
-            { value: 'kinematicVelocity', label: 'Kinematic Velocity' },
-        ],
-    },
-    {
-        name: 'colliders',
-        type: 'select',
-        label: 'Collider',
-        options: [
-            { value: 'hull', label: 'Hull (convex)' },
-            { value: 'trimesh', label: 'Trimesh (exact)' },
-            { value: 'cuboid', label: 'Cuboid (box)' },
-            { value: 'ball', label: 'Ball (sphere)' },
-        ],
-    },
-    {
-        name: 'mass',
-        type: 'number',
-        label: 'Mass',
-    },
-    {
-        name: 'restitution',
-        type: 'number',
-        label: 'Restitution (Bounciness)',
-        min: 0,
-        max: 1,
-        step: 0.1,
-    },
-    {
-        name: 'friction',
-        type: 'number',
-        label: 'Friction',
-        min: 0,
-        step: 0.1,
-    },
-    {
-        name: 'linearDamping',
-        type: 'number',
-        label: 'Linear Damping',
-        min: 0,
-        step: 0.1,
-    },
-    {
-        name: 'angularDamping',
-        type: 'number',
-        label: 'Angular Damping',
-        min: 0,
-        step: 0.1,
-    },
-    {
-        name: 'gravityScale',
-        type: 'number',
-        label: 'Gravity Scale',
-        step: 0.1,
-    },
-    {
-        name: 'sensor',
-        type: 'boolean',
-        label: 'Sensor (Trigger Only)',
-    },
-    {
-        name: 'activeCollisionTypes',
-        type: 'select',
-        label: 'Collision Detection',
-        options: [
-            { value: '', label: 'Default (Dynamic only)' },
-            { value: 'all', label: 'All (includes kinematic & fixed)' },
-        ],
-    },
-];
 function PhysicsComponentEditor({ component, onUpdate }) {
-    return (_jsx(FieldRenderer, { fields: physicsFields, values: component.properties, onChange: onUpdate }));
+    return (_jsxs(FieldGroup, { children: [_jsx(SelectField, { name: "type", label: "Type", values: component.properties, onChange: onUpdate, options: [
+                    { value: 'dynamic', label: 'Dynamic' },
+                    { value: 'fixed', label: 'Fixed' },
+                    { value: 'kinematicPosition', label: 'Kinematic Position' },
+                    { value: 'kinematicVelocity', label: 'Kinematic Velocity' },
+                ] }), _jsx(SelectField, { name: "colliders", label: "Collider", values: component.properties, onChange: onUpdate, options: [
+                    { value: 'hull', label: 'Hull (convex)' },
+                    { value: 'trimesh', label: 'Trimesh (exact)' },
+                    { value: 'cuboid', label: 'Cuboid (box)' },
+                    { value: 'ball', label: 'Ball (sphere)' },
+                ] }), _jsx(NumberField, { name: "mass", label: "Mass", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.1, min: 0 }), _jsx(NumberField, { name: "restitution", label: "Restitution (Bounciness)", values: component.properties, onChange: onUpdate, fallback: 0, min: 0, max: 1, step: 0.1 }), _jsx(NumberField, { name: "friction", label: "Friction", values: component.properties, onChange: onUpdate, fallback: 0.5, min: 0, step: 0.1 }), _jsx(NumberField, { name: "linearDamping", label: "Linear Damping", values: component.properties, onChange: onUpdate, fallback: 0, min: 0, step: 0.1 }), _jsx(NumberField, { name: "angularDamping", label: "Angular Damping", values: component.properties, onChange: onUpdate, fallback: 0, min: 0, step: 0.1 }), _jsx(NumberField, { name: "gravityScale", label: "Gravity Scale", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.1 }), _jsx(BooleanField, { name: "sensor", label: "Sensor (Trigger Only)", values: component.properties, onChange: onUpdate, fallback: false }), _jsx(SelectField, { name: "activeCollisionTypes", label: "Collision Detection", values: component.properties, onChange: onUpdate, options: [
+                    { value: '', label: 'Default (Dynamic only)' },
+                    { value: 'all', label: 'All (includes kinematic & fixed)' },
+                ] })] }));
 }
 function PhysicsComponentView({ properties, children, position, rotation, scale, editMode, nodeId, registerRigidBodyRef }) {
     const { type, colliders, sensor, activeCollisionTypes } = properties, otherProps = __rest(properties, ["type", "colliders", "sensor", "activeCollisionTypes"]);

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

@@ -1,18 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
-import { FieldRenderer } from "./Input";
-const spotLightFields = [
-    { name: 'color', type: 'color', label: 'Color' },
-    { name: 'intensity', type: 'number', label: 'Intensity', step: 0.1, min: 0 },
-    { name: 'angle', type: 'number', label: 'Angle', step: 0.1, min: 0, max: Math.PI },
-    { name: 'penumbra', type: 'number', label: 'Penumbra', step: 0.1, min: 0, max: 1 },
-    { name: 'distance', type: 'number', label: 'Distance', step: 1, min: 0 },
-    { name: 'castShadow', type: 'boolean', label: 'Cast Shadow' },
-];
+import { BooleanField, ColorField, FieldGroup, NumberField } from "./Input";
+import { useHelper } from "@react-three/drei";
+import { SpotLightHelper } from "three";
 function SpotLightComponentEditor({ component, onUpdate }) {
-    return (_jsx(FieldRenderer, { fields: spotLightFields, values: component.properties, onChange: onUpdate }));
+    return (_jsxs(FieldGroup, { children: [_jsx(ColorField, { name: "color", label: "Color", values: component.properties, onChange: onUpdate }), _jsx(NumberField, { name: "intensity", label: "Intensity", values: component.properties, onChange: onUpdate, min: 0, step: 0.1, fallback: 1 }), _jsx(NumberField, { name: "angle", label: "Angle", values: component.properties, onChange: onUpdate, min: 0, max: Math.PI, step: 0.05, fallback: Math.PI / 6 }), _jsx(NumberField, { name: "penumbra", label: "Penumbra", values: component.properties, onChange: onUpdate, min: 0, max: 1, step: 0.05, fallback: 0.5 }), _jsx(NumberField, { name: "distance", label: "Distance", values: component.properties, onChange: onUpdate, min: 0, step: 1, fallback: 100 }), _jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: component.properties, onChange: onUpdate, fallback: true })] }));
 }
-function SpotLightView({ properties, editMode }) {
+function SpotLightView({ properties, editMode, isSelected }) {
     var _a, _b, _c, _d, _e, _f;
     const color = (_a = properties.color) !== null && _a !== void 0 ? _a : '#ffffff';
     const intensity = (_b = properties.intensity) !== null && _b !== void 0 ? _b : 1.0;
@@ -22,6 +16,7 @@ function SpotLightView({ properties, editMode }) {
     const castShadow = (_f = properties.castShadow) !== null && _f !== void 0 ? _f : true;
     const spotLightRef = useRef(null);
     const targetRef = useRef(null);
+    useHelper(editMode && isSelected ? spotLightRef : null, SpotLightHelper, color);
     useEffect(() => {
         if (spotLightRef.current && targetRef.current) {
             spotLightRef.current.target = targetRef.current;

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

@@ -1,61 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FieldRenderer } from "./Input";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColorField, FieldGroup, NumberField, SelectField, StringField } from "./Input";
 import { Text } from 'three-text/three/react';
 import { useRef, useState, useCallback } from 'react';
 // Initialize HarfBuzz path for font shaping
 Text.setHarfBuzzPath('/fonts/hb.wasm');
 function TextComponentEditor({ component, onUpdate, }) {
-    const fields = [
-        {
-            name: 'text',
-            type: 'string',
-            label: 'Text',
-            placeholder: 'Enter text...',
-        },
-        {
-            name: 'color',
-            type: 'color',
-            label: 'Color',
-        },
-        {
-            name: 'font',
-            type: 'string',
-            label: 'Font',
-            placeholder: '/fonts/NotoSans-Regular.ttf',
-        },
-        {
-            name: 'size',
-            type: 'number',
-            label: 'Size',
-            min: 0.01,
-            step: 0.1,
-        },
-        {
-            name: 'depth',
-            type: 'number',
-            label: 'Depth',
-            min: 0,
-            step: 0.1,
-        },
-        {
-            name: 'width',
-            type: 'number',
-            label: 'Width',
-            min: 0,
-            step: 0.5,
-        },
-        {
-            name: 'align',
-            type: 'select',
-            label: 'Align',
-            options: [
-                { value: 'left', label: 'Left' },
-                { value: 'center', label: 'Center' },
-                { value: 'right', label: 'Right' },
-            ],
-        },
-    ];
-    return (_jsx(FieldRenderer, { fields: fields, values: component.properties, onChange: onUpdate }));
+    return (_jsxs(FieldGroup, { children: [_jsx(StringField, { name: "text", label: "Text", values: component.properties, onChange: onUpdate, placeholder: "Enter text..." }), _jsx(ColorField, { name: "color", label: "Color", values: component.properties, onChange: onUpdate }), _jsx(StringField, { name: "font", label: "Font", values: component.properties, onChange: onUpdate, placeholder: "/fonts/NotoSans-Regular.ttf" }), _jsx(NumberField, { name: "size", label: "Size", values: component.properties, onChange: onUpdate, min: 0.01, step: 0.1 }), _jsx(NumberField, { name: "depth", label: "Depth", values: component.properties, onChange: onUpdate, min: 0, step: 0.1 }), _jsx(NumberField, { name: "width", label: "Width", values: component.properties, onChange: onUpdate, min: 0, step: 0.5 }), _jsx(SelectField, { name: "align", label: "Align", values: component.properties, onChange: onUpdate, options: [
+                    { value: 'left', label: 'Left' },
+                    { value: 'center', label: 'Center' },
+                    { value: 'right', label: 'Right' },
+                ] })] }));
 }
 function TextComponentView({ properties }) {
     const { text = '', font, size, depth, width, align, color } = properties;

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

@@ -1,42 +1,54 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { FieldRenderer, Label } from "./Input";
+import { Label, Vector3Field, Vector3Input } from "./Input";
 import { useEditorContext } from "../EditorContext";
+import { colors } from "../styles";
 const buttonStyle = {
-    padding: '2px 6px',
-    background: 'transparent',
-    color: 'rgba(255,255,255,0.9)',
-    border: '1px solid rgba(255,255,255,0.14)',
-    borderRadius: 4,
+    padding: '4px 8px',
+    background: colors.bgSurface,
+    color: colors.text,
+    border: `1px solid ${colors.border}`,
+    borderRadius: 3,
     cursor: 'pointer',
     font: 'inherit',
+    fontSize: 11,
     flex: 1,
 };
 function TransformModeSelector({ transformMode, setTransformMode, snapResolution, setSnapResolution }) {
     return (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsxs(Label, { children: ["Transform Mode ", snapResolution > 0 && `(Snap: ${snapResolution})`] }), _jsx("div", { style: { display: 'flex', gap: 6 }, children: ["translate", "rotate", "scale"].map(mode => {
                     const isActive = transformMode === mode;
-                    return (_jsx("button", { onClick: () => setTransformMode(mode), style: Object.assign(Object.assign({}, buttonStyle), { background: isActive ? 'rgba(255,255,255,0.10)' : 'transparent' }), onPointerEnter: (e) => {
+                    return (_jsx("button", { onClick: () => setTransformMode(mode), style: Object.assign(Object.assign({}, buttonStyle), { background: isActive ? colors.accentBg : colors.bgSurface, borderColor: isActive ? colors.accentBorder : colors.border, color: isActive ? colors.accent : colors.text }), onPointerEnter: (e) => {
                             if (!isActive)
-                                e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+                                e.currentTarget.style.background = colors.bgHover;
                         }, onPointerLeave: (e) => {
                             if (!isActive)
-                                e.currentTarget.style.background = 'transparent';
+                                e.currentTarget.style.background = colors.bgSurface;
                         }, children: mode }, mode));
-                }) }), _jsx("div", { style: { marginTop: 6 }, children: _jsxs("button", { onClick: () => setSnapResolution(snapResolution > 0 ? 0 : 0.1), style: Object.assign(Object.assign({}, buttonStyle), { background: snapResolution > 0 ? 'rgba(255,255,255,0.10)' : 'transparent', width: '100%' }), onPointerEnter: (e) => {
+                }) }), _jsx("div", { style: { marginTop: 6 }, children: _jsxs("button", { onClick: () => setSnapResolution(snapResolution > 0 ? 0 : 0.1), style: Object.assign(Object.assign({}, buttonStyle), { background: snapResolution > 0 ? colors.accentBg : colors.bgSurface, borderColor: snapResolution > 0 ? colors.accentBorder : colors.border, color: snapResolution > 0 ? colors.accent : colors.text, width: '100%' }), onPointerEnter: (e) => {
                         if (snapResolution === 0)
-                            e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+                            e.currentTarget.style.background = colors.bgHover;
                     }, onPointerLeave: (e) => {
                         if (snapResolution === 0)
-                            e.currentTarget.style.background = 'transparent';
+                            e.currentTarget.style.background = colors.bgSurface;
                     }, children: ["Snap: ", snapResolution > 0 ? `ON (${snapResolution})` : 'OFF'] }) })] }));
 }
+const snapLockBtnStyle = {
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    padding: '0 2px',
+    fontSize: 12,
+    lineHeight: 1,
+    color: colors.textMuted,
+};
+function SnapLockButton({ locked, onToggle, title }) {
+    return (_jsx("button", { style: snapLockBtnStyle, onClick: onToggle, title: title, children: locked ? '🔒' : '🔓' }));
+}
 function TransformComponentEditor({ component, onUpdate }) {
-    const { transformMode, setTransformMode, snapResolution, setSnapResolution } = useEditorContext();
-    const fields = [
-        { name: 'position', type: 'vector3', label: 'Position', snap: snapResolution },
-        { name: 'rotation', type: 'vector3', label: 'Rotation', snap: snapResolution },
-        { name: 'scale', type: 'vector3', label: 'Scale', snap: snapResolution },
-    ];
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(TransformModeSelector, { transformMode: transformMode, setTransformMode: setTransformMode, snapResolution: snapResolution, setSnapResolution: setSnapResolution }), _jsx(FieldRenderer, { fields: fields, values: component.properties, onChange: onUpdate })] }));
+    var _a, _b;
+    const { transformMode, setTransformMode, snapResolution, setSnapResolution, positionSnap, setPositionSnap, rotationSnap, setRotationSnap } = useEditorContext();
+    const positionSnapped = positionSnap > 0;
+    const rotationSnapped = rotationSnap > 0;
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(TransformModeSelector, { transformMode: transformMode, setTransformMode: setTransformMode, snapResolution: snapResolution, setSnapResolution: setSnapResolution }), _jsx(Vector3Input, { label: "Position", value: (_a = component.properties.position) !== null && _a !== void 0 ? _a : [0, 0, 0], onChange: v => onUpdate({ position: v }), snap: positionSnap, labelExtra: _jsx(SnapLockButton, { locked: positionSnapped, onToggle: () => setPositionSnap(positionSnapped ? 0 : 0.5), title: positionSnapped ? `Snap ON (0.5) — click to disable` : `Snap OFF — click to enable (0.5)` }) }), _jsx(Vector3Input, { label: "Rotation", value: (_b = component.properties.rotation) !== null && _b !== void 0 ? _b : [0, 0, 0], onChange: v => onUpdate({ rotation: v }), snap: rotationSnap, labelExtra: _jsx(SnapLockButton, { locked: rotationSnapped, onToggle: () => setRotationSnap(rotationSnapped ? 0 : Math.PI / 4), title: rotationSnapped ? `Snap ON (π/4) — click to disable` : `Snap OFF — click to enable (π/4)` }) }), _jsx(Vector3Field, { name: "scale", label: "Scale", values: component.properties, onChange: onUpdate, fallback: [1, 1, 1] })] }));
 }
 const TransformComponent = {
     name: 'Transform',

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

@@ -7,6 +7,8 @@ import DirectionalLightComponent from './DirectionalLightComponent';
 import AmbientLightComponent from './AmbientLightComponent';
 import ModelComponent from './ModelComponent';
 import TextComponent from './TextComponent';
+import EnvironmentComponent from './EnvironmentComponent';
+import CameraComponent from './CameraComponent';
 export default [
     GeometryComponent,
     TransformComponent,
@@ -16,5 +18,7 @@ export default [
     DirectionalLightComponent,
     AmbientLightComponent,
     ModelComponent,
-    TextComponent
+    TextComponent,
+    EnvironmentComponent,
+    CameraComponent,
 ];

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

@@ -1,12 +1,18 @@
 export declare const colors: {
     bg: string;
+    bgSurface: string;
     bgLight: string;
     bgHover: string;
+    bgInput: string;
     border: string;
     borderLight: string;
     borderFaint: string;
     text: string;
     textMuted: string;
+    textDim: string;
+    accent: string;
+    accentBg: string;
+    accentBorder: string;
     danger: string;
     dangerBg: string;
     dangerBorder: string;
@@ -890,6 +896,8 @@ export declare const inspector: {
         padding: number;
         maxHeight: string;
         overflowY: "auto";
+        overflowX: "hidden";
+        boxSizing: "border-box";
         display: string;
         flexDirection: "column";
         gap: number;
@@ -1759,19 +1767,21 @@ export declare const tree: {
     row: React.CSSProperties;
     selected: {
         background: string;
+        borderBottomColor: string;
     };
 };
 export declare const menu: {
     container: {
         position: "fixed";
         zIndex: number;
-        minWidth: number;
+        minWidth: string;
+        width: string;
+        maxWidth: string;
         background: string;
         border: string;
         borderRadius: number;
         overflow: string;
         boxShadow: string;
-        backdropFilter: string;
     };
     item: React.CSSProperties;
     danger: {
@@ -1783,7 +1793,6 @@ export declare const toolbar: {
         position: "absolute";
         top: number;
         left: string;
-        transform: string;
         display: string;
         gap: number;
         padding: string;
@@ -1793,7 +1802,7 @@ export declare const toolbar: {
         color: string;
         fontFamily: string;
         fontSize: number;
-        backdropFilter: string;
+        boxShadow: string;
     };
     divider: {
         width: number;
@@ -1804,3 +1813,7 @@ export declare const toolbar: {
         cursor: string;
     };
 };
+export declare const scrollbarCSS: string;
+export declare const componentCard: {
+    container: React.CSSProperties;
+};

package/dist/tools/prefabeditor/styles.js

@@ -1,19 +1,25 @@
 // Shared editor styles - single source of truth for all prefab editor UI
 export const colors = {
-    bg: 'rgba(0,0,0,0.6)',
-    bgLight: 'rgba(255,255,255,0.06)',
-    bgHover: 'rgba(255,255,255,0.1)',
-    border: 'rgba(255,255,255,0.15)',
-    borderLight: 'rgba(255,255,255,0.1)',
-    borderFaint: 'rgba(255,255,255,0.05)',
-    text: '#fff',
-    textMuted: 'rgba(255,255,255,0.7)',
-    danger: '#ffaaaa',
-    dangerBg: 'rgba(255,80,80,0.2)',
-    dangerBorder: 'rgba(255,80,80,0.4)',
+    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)',
 };
 export const fonts = {
-    family: 'system-ui, sans-serif',
+    family: 'system-ui, -apple-system, sans-serif',
     size: 11,
     sizeSm: 10,
 };
@@ -24,12 +30,12 @@ export const base = {
         color: colors.text,
         border: `1px solid ${colors.border}`,
         borderRadius: 4,
-        backdropFilter: 'blur(8px)',
         fontFamily: fonts.family,
         fontSize: fonts.size,
+        boxShadow: '0 2px 8px rgba(0,0,0,0.4)',
     },
     header: {
-        padding: '6px 8px',
+        padding: '7px 10px',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
@@ -37,22 +43,23 @@ export const base = {
         background: colors.bgLight,
         borderBottom: `1px solid ${colors.borderLight}`,
         fontSize: fonts.size,
-        fontWeight: 500,
+        fontWeight: 600,
         textTransform: 'uppercase',
-        letterSpacing: 0.5,
+        letterSpacing: 0.8,
+        color: colors.text,
     },
     input: {
         width: '100%',
-        background: colors.bgHover,
+        background: colors.bgInput,
         border: `1px solid ${colors.border}`,
         borderRadius: 3,
-        padding: '4px 6px',
+        padding: '5px 8px',
         color: colors.text,
         fontSize: fonts.size,
         outline: 'none',
     },
     btn: {
-        background: colors.bgHover,
+        background: colors.bgLight,
         border: `1px solid ${colors.border}`,
         borderRadius: 3,
         padding: '4px 8px',
@@ -68,10 +75,11 @@ export const base = {
     },
     label: {
         fontSize: fonts.sizeSm,
-        opacity: 0.7,
+        color: colors.textMuted,
         marginBottom: 4,
         textTransform: 'uppercase',
         letterSpacing: 0.5,
+        fontWeight: 500,
     },
     row: {
         display: 'flex',
@@ -89,6 +97,8 @@ export const inspector = {
         padding: 8,
         maxHeight: '80vh',
         overflowY: 'auto',
+        overflowX: 'hidden',
+        boxSizing: 'border-box',
         display: 'flex',
         flexDirection: 'column',
         gap: 8,
@@ -100,40 +110,46 @@ export const tree = {
         overflowY: 'auto',
         padding: 4,
         scrollbarWidth: 'thin',
-        scrollbarColor: 'rgba(255,255,255,0.06) transparent',
+        scrollbarColor: `${colors.bgLight} transparent`,
     },
     row: {
         display: 'flex',
         alignItems: 'center',
         padding: '3px 6px',
-        borderBottom: `1px solid ${colors.borderFaint}`,
+        borderBottomWidth: 1,
+        borderBottomStyle: 'solid',
+        borderBottomColor: colors.borderFaint,
         cursor: 'pointer',
         whiteSpace: 'nowrap',
+        borderRadius: 2,
     },
     selected: {
-        background: 'rgba(255,255,255,0.12)',
+        background: colors.accentBg,
+        borderBottomColor: colors.accentBorder,
     },
 };
 export const menu = {
     container: {
         position: 'fixed',
         zIndex: 50,
-        minWidth: 120,
-        background: 'rgba(0,0,0,0.85)',
+        minWidth: 'auto',
+        width: 'max-content',
+        maxWidth: 'min(240px, calc(100vw - 16px))',
+        background: colors.bgSurface,
         border: `1px solid ${colors.border}`,
         borderRadius: 4,
         overflow: 'hidden',
-        boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
-        backdropFilter: 'blur(8px)',
+        boxShadow: '0 4px 16px rgba(0,0,0,0.6)',
     },
     item: {
         width: '100%',
         textAlign: 'left',
-        padding: '6px 8px',
+        padding: '7px 12px',
         background: 'transparent',
         border: 'none',
         color: colors.text,
         fontSize: fonts.size,
+        whiteSpace: 'nowrap',
         cursor: 'pointer',
         outline: 'none',
     },
@@ -145,8 +161,7 @@ export const toolbar = {
     panel: {
         position: 'absolute',
         top: 8,
-        left: '50%',
-        transform: 'translateX(-50%)',
+        left: '240px',
         display: 'flex',
         gap: 6,
         padding: '4px 6px',
@@ -156,14 +171,36 @@ export const toolbar = {
         color: colors.text,
         fontFamily: fonts.family,
         fontSize: fonts.size,
-        backdropFilter: 'blur(8px)',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.4)',
     },
     divider: {
         width: 1,
-        background: 'rgba(255,255,255,0.2)',
+        background: colors.borderLight,
     },
     disabled: {
         opacity: 0.4,
         cursor: 'not-allowed',
     },
 };
+// Shared scrollbar CSS (inject via <style> tag since CSS can't be bundled)
+export const scrollbarCSS = `
+.prefab-scroll::-webkit-scrollbar,
+.tree-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
+.prefab-scroll::-webkit-scrollbar-track,
+.tree-scroll::-webkit-scrollbar-track { background: transparent; }
+.prefab-scroll::-webkit-scrollbar-thumb,
+.tree-scroll::-webkit-scrollbar-thumb { background: ${colors.border}; border-radius: 3px; }
+.prefab-scroll::-webkit-scrollbar-thumb:hover,
+.tree-scroll::-webkit-scrollbar-thumb:hover { background: #555; }
+.prefab-scroll { scrollbar-width: thin; scrollbar-color: ${colors.border} transparent; }
+`;
+// Reusable component card style for inspector sections
+export const componentCard = {
+    container: {
+        marginBottom: 8,
+        backgroundColor: colors.bgSurface,
+        padding: 8,
+        borderRadius: 4,
+        border: `1px solid ${colors.border}`,
+    },
+};

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

@@ -1,13 +1,13 @@
 import { GameObject, Prefab } from "./types";
-import { Object3D } from 'three';
+import { Object3D, Vector3 } from 'three';
 export interface ExportGLBOptions {
     filename?: string;
     binary?: boolean;
     onComplete?: (result: ArrayBuffer | object) => void;
     onError?: (error: any) => void;
 }
-/** Save a prefab as JSON file */
-export declare function saveJson(data: Prefab, filename: string): void;
+/** Save a prefab as JSON file, showing a Save As dialog when supported */
+export declare function saveJson(data: Prefab, filename: string): Promise<void>;
 /** Load a prefab from JSON file */
 export declare function loadJson(): Promise<Prefab | undefined>;
 /**
@@ -23,6 +23,7 @@ export declare function exportGLB(sceneRoot: Object3D, options?: ExportGLBOption
  * @returns Promise that resolves with the GLB data as ArrayBuffer
  */
 export declare function exportGLBData(sceneRoot: Object3D): Promise<ArrayBuffer>;
+export declare function focusCameraOnObject(object: Object3D, camera: Object3D, target: Vector3, update?: () => void): void;
 /** Find a node by ID in the tree */
 export declare function findNode(root: GameObject, id: string): GameObject | null;
 /** Find the parent of a node by ID */
@@ -44,3 +45,7 @@ export declare function regenerateIds(node: GameObject): GameObject;
 /** Get component data from a node */
 export declare function getComponent<T = any>(node: GameObject, type: string): T | undefined;
 export declare function updateNodeById(root: GameObject, id: string, updater: (node: GameObject) => GameObject): GameObject;
+/** Create a GameObject node for a 3D model file */
+export declare function createModelNode(filename: string, name?: string): GameObject;
+/** Create a GameObject node for an image as a textured plane */
+export declare function createImageNode(texturePath: string, name?: string): GameObject;