react-three-game 0.0.56 → 0.0.58

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,41 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
-import { FieldRenderer } from "./Input";
-import { useHelper } from "@react-three/drei";
+import { useRef, useEffect, useMemo, useState } from "react";
+import { BooleanField, ColorField, FieldGroup, NumberField } from "./Input";
 import { SpotLightHelper } from "three";
-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 { useFrame } from "@react-three/fiber";
+const spotLightDefaults = {
+    color: '#ffffff',
+    intensity: 1,
+    angle: Math.PI / 6,
+    penumbra: 0.5,
+    distance: 100,
+    castShadow: true,
+};
 function SpotLightComponentEditor({ component, onUpdate }) {
-    return (_jsx(FieldRenderer, { fields: spotLightFields, values: component.properties, onChange: onUpdate }));
+    const values = Object.assign(Object.assign({}, spotLightDefaults), component.properties);
+    return (_jsxs(FieldGroup, { children: [_jsx(ColorField, { name: "color", label: "Color", values: values, onChange: onUpdate }), _jsx(NumberField, { name: "intensity", label: "Intensity", values: values, onChange: onUpdate, min: 0, step: 0.1, fallback: 1 }), _jsx(NumberField, { name: "angle", label: "Angle", values: values, onChange: onUpdate, min: 0, max: Math.PI, step: 0.05, fallback: Math.PI / 6 }), _jsx(NumberField, { name: "penumbra", label: "Penumbra", values: values, onChange: onUpdate, min: 0, max: 1, step: 0.05, fallback: 0.5 }), _jsx(NumberField, { name: "distance", label: "Distance", values: values, onChange: onUpdate, min: 0, step: 1, fallback: 100 }), _jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: values, onChange: onUpdate, fallback: true })] }));
 }
-function SpotLightView({ properties, editMode }) {
-    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;
-    const angle = (_c = properties.angle) !== null && _c !== void 0 ? _c : Math.PI / 6;
-    const penumbra = (_d = properties.penumbra) !== null && _d !== void 0 ? _d : 0.5;
-    const distance = (_e = properties.distance) !== null && _e !== void 0 ? _e : 100;
-    const castShadow = (_f = properties.castShadow) !== null && _f !== void 0 ? _f : true;
+function SpotLightView({ properties, editMode, isSelected }) {
+    const merged = Object.assign(Object.assign({}, spotLightDefaults), properties);
+    const color = merged.color;
+    const intensity = merged.intensity;
+    const angle = merged.angle;
+    const penumbra = merged.penumbra;
+    const distance = merged.distance;
+    const castShadow = merged.castShadow;
     const spotLightRef = useRef(null);
     const targetRef = useRef(null);
-    useHelper(editMode ? spotLightRef : null, SpotLightHelper, color);
+    const [spotLight, setSpotLight] = useState(null);
+    const spotLightHelper = useMemo(() => spotLight ? new SpotLightHelper(spotLight, color) : null, [spotLight, color]);
+    useEffect(() => {
+        return () => {
+            spotLightHelper === null || spotLightHelper === void 0 ? void 0 : spotLightHelper.dispose();
+        };
+    }, [spotLightHelper]);
     useEffect(() => {
         if (spotLightRef.current && targetRef.current) {
             spotLightRef.current.target = targetRef.current;
+            setSpotLight(spotLightRef.current);
         }
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, castShadow: castShadow, "shadow-mapSize-width": 1024, "shadow-mapSize-height": 1024, "shadow-bias": -0.0001, "shadow-normalBias": 0.02 }), _jsx("object3D", { ref: targetRef, position: [0, -5, 0] }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: [0, -5, 0], children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] }))] }));
+    useFrame(() => {
+        if (spotLightHelper && editMode && isSelected) {
+            spotLightHelper.update();
+        }
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, castShadow: castShadow, "shadow-mapSize-width": 1024, "shadow-mapSize-height": 1024, "shadow-bias": -0.0001, "shadow-normalBias": 0.02 }), editMode && isSelected && spotLightHelper && (_jsx("primitive", { object: spotLightHelper })), _jsx("object3D", { ref: targetRef, position: [0, -5, 0] }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: [0, -5, 0], children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] }))] }));
 }
 const SpotLightComponent = {
     name: 'SpotLight',
     Editor: SpotLightComponentEditor,
     View: SpotLightView,
-    defaultProperties: {}
+    defaultProperties: spotLightDefaults
 };
 export default SpotLightComponent;

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,5 +1,5 @@
 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 = {
@@ -31,14 +31,24 @@ function TransformModeSelector({ transformMode, setTransformMode, snapResolution
                             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

@@ -896,6 +896,8 @@ export declare const inspector: {
         padding: number;
         maxHeight: string;
         overflowY: "auto";
+        overflowX: "hidden";
+        boxSizing: "border-box";
         display: string;
         flexDirection: "column";
         gap: number;
@@ -1772,7 +1774,9 @@ export declare const menu: {
     container: {
         position: "fixed";
         zIndex: number;
-        minWidth: number;
+        minWidth: string;
+        width: string;
+        maxWidth: string;
         background: string;
         border: string;
         borderRadius: number;
@@ -1789,7 +1793,6 @@ export declare const toolbar: {
         position: "absolute";
         top: number;
         left: string;
-        transform: string;
         display: string;
         gap: number;
         padding: string;

package/dist/tools/prefabeditor/styles.js

@@ -97,6 +97,8 @@ export const inspector = {
         padding: 8,
         maxHeight: '80vh',
         overflowY: 'auto',
+        overflowX: 'hidden',
+        boxSizing: 'border-box',
         display: 'flex',
         flexDirection: 'column',
         gap: 8,
@@ -130,7 +132,9 @@ export const menu = {
     container: {
         position: 'fixed',
         zIndex: 50,
-        minWidth: 140,
+        minWidth: 'auto',
+        width: 'max-content',
+        maxWidth: 'min(240px, calc(100vw - 16px))',
         background: colors.bgSurface,
         border: `1px solid ${colors.border}`,
         borderRadius: 4,
@@ -145,6 +149,7 @@ export const menu = {
         border: 'none',
         color: colors.text,
         fontSize: fonts.size,
+        whiteSpace: 'nowrap',
         cursor: 'pointer',
         outline: 'none',
     },
@@ -156,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',

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 */

package/dist/tools/prefabeditor/utils.js

@@ -8,12 +8,33 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
-/** Save a prefab as JSON file */
+import { Box3, PerspectiveCamera, Quaternion, Vector3 } from 'three';
+/** Save a prefab as JSON file, showing a Save As dialog when supported */
 export function saveJson(data, filename) {
-    const a = document.createElement('a');
-    a.href = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));
-    a.download = `${filename || 'prefab'}.json`;
-    a.click();
+    return __awaiter(this, void 0, void 0, function* () {
+        const json = JSON.stringify(data, null, 2);
+        if ('showSaveFilePicker' in window) {
+            try {
+                const handle = yield window.showSaveFilePicker({
+                    suggestedName: `${filename || 'prefab'}.json`,
+                    types: [{ description: 'JSON', accept: { 'application/json': ['.json'] } }],
+                });
+                const writable = yield handle.createWritable();
+                yield writable.write(json);
+                yield writable.close();
+                return;
+            }
+            catch (e) {
+                if ((e === null || e === void 0 ? void 0 : e.name) === 'AbortError')
+                    return; // user cancelled
+            }
+        }
+        // Fallback for browsers without File System Access API
+        const a = document.createElement('a');
+        a.href = "data:text/json;charset=utf-8," + encodeURIComponent(json);
+        a.download = `${filename || 'prefab'}.json`;
+        a.click();
+    });
 }
 /** Load a prefab from JSON file */
 export function loadJson() {
@@ -85,6 +106,33 @@ export function exportGLBData(sceneRoot) {
         return result;
     });
 }
+export function focusCameraOnObject(object, camera, target, update) {
+    const bounds = new Box3().setFromObject(object);
+    const center = new Vector3();
+    const size = new Vector3();
+    const quaternion = new Quaternion();
+    object.getWorldQuaternion(quaternion);
+    if (bounds.isEmpty()) {
+        object.getWorldPosition(center);
+        size.setScalar(1);
+    }
+    else {
+        bounds.getCenter(center);
+        bounds.getSize(size);
+    }
+    const radius = Math.max(size.length() * 0.5, 1);
+    const forward = new Vector3(0, 0, 1).applyQuaternion(quaternion).normalize();
+    const worldUp = new Vector3(0, 1, 0);
+    const elevatedDirection = forward.clone().addScaledVector(worldUp, 0.65).normalize();
+    const distance = camera instanceof PerspectiveCamera
+        ? Math.max(radius / Math.tan((camera.fov * Math.PI) / 360) * 1.8, radius * 3.5)
+        : radius * 4.5;
+    const nextPosition = center.clone().add(elevatedDirection.multiplyScalar(distance));
+    camera.position.copy(nextPosition);
+    camera.lookAt(center);
+    target.copy(center);
+    update === null || update === void 0 ? void 0 : update();
+}
 /** Find a node by ID in the tree */
 export function findNode(root, id) {
     var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.56",
+  "version": "0.0.58",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/react-three-game-skill/react-three-game/SKILL.md

@@ -81,12 +81,15 @@ Every game object follows this schema:
 ```typescript
 interface GameObject {
   id: string;
+  name?: string;
   disabled?: boolean;
   components?: Record<string, { type: string; properties: any }>;
   children?: GameObject[];
 }
 ```
 
+`disabled` is the canonical visibility toggle. Transforms are local to the parent node.
+
 ### Prefab JSON Format
 
 Scenes are defined as JSON prefabs with a root node containing children:
@@ -178,7 +181,7 @@ import { GameCanvas, PrefabRoot } from 'react-three-game';
 </GameCanvas>
 ```
 
-**PrefabEditor**: Managed scene with editor UI and play/pause controls for physics. Full authoring tool for level design and prototyping. Includes canvas, physics, transform gizmos, and inspector. Physics only runs in play mode. Can pass R3F components as children.
+**PrefabEditor**: Managed scene with editor UI and play/pause controls for physics. Full authoring tool for level design and prototyping. Includes canvas, physics, transform gizmos, and inspector. Physics only runs in play mode. Can pass R3F components as children. Editor actions live under `Menu > File`, and exports under `Menu > Export`.
 
 ```jsx
 import { PrefabEditor } from 'react-three-game';

package/src/index.ts

@@ -15,13 +15,20 @@ export { registerComponent } from './tools/prefabeditor/components/ComponentRegi
 // Prefab Editor - Input Components
 export {
   FieldRenderer,
+  FieldGroup,
   Input,
   Label,
   Vector3Input,
+  Vector3Field,
+  NumberField,
   ColorInput,
+  ColorField,
   StringInput,
+  StringField,
   BooleanInput,
+  BooleanField,
   SelectInput,
+  SelectField,
 } from './tools/prefabeditor/components/Input';
 
 // Prefab Editor - Styles & Utils

package/src/shared/GameCanvas.tsx

@@ -40,9 +40,6 @@ export default function GameCanvas({ loader = false, children, glConfig, ...prop
                 });
                 return renderer
             }}
-            camera={{
-                position: [0, 1, 5],
-            }}
             {...props}
         >
             <Suspense>