react-three-game 0.0.48 → 0.0.50

package/.github/copilot-instructions.md

@@ -15,7 +15,6 @@ interface Prefab { id?: string; name?: string; root: GameObject; }
 interface GameObject {
   id: string;                    // Use crypto.randomUUID() for new nodes
   disabled?: boolean;
-  hidden?: boolean;
   components?: Record<string, { type: string; properties: any }>;
   children?: GameObject[];
 }
@@ -38,11 +37,17 @@ const MyComponent: Component = {
 | File | Purpose |
 |------|---------|
 | `src/index.ts` | All public exports - add new features here |
-| `src/tools/prefabeditor/PrefabRoot.tsx` | Recursive scene renderer, world matrix math |
-| `src/tools/prefabeditor/PrefabEditor.tsx` | Edit/play mode, physics pause, JSON import/export |
+| `src/tools/prefabeditor/PrefabRoot.tsx` | Pure renderer - renders prefab as Three.js objects for R3F integration |
+| `src/tools/prefabeditor/PrefabEditor.tsx` | Managed scene with editor UI and play/pause controls for physics |
 | `src/tools/prefabeditor/utils.ts` | Tree helpers: `findNode`, `updateNode`, `deleteNode`, `cloneNode` |
 | `src/shared/GameCanvas.tsx` | WebGPU renderer setup (use `MeshStandardNodeMaterial`) |
 
+## Usage Modes
+
+**GameCanvas + PrefabRoot**: Pure renderer for embedding prefab data in standard R3F applications. Minimal wrapper - just renders the prefab as Three.js objects. Requires manual `<Physics>` setup. Physics always active. Use this to integrate prefabs into larger R3F scenes.
+
+**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.
+
 ## Critical Patterns
 
 ### Tree Manipulation (Immutable)

package/README.md

@@ -14,7 +14,13 @@ npm i react-three-game @react-three/fiber @react-three/rapier three
 npx skills add https://github.com/prnthh/react-three-game-skill
 ```
 
-## Usage
+## Usage Modes
+
+**GameCanvas + PrefabRoot**: Pure renderer for embedding prefab data in standard R3F applications. Minimal wrapper - just renders the prefab as Three.js objects. Requires manual `<Physics>` setup. Physics always active. Use this to integrate prefabs into larger R3F scenes.
+
+**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.
+
+## Basic Usage
 
 ```jsx
 import { Physics } from '@react-three/rapier';
@@ -57,7 +63,6 @@ import { GameCanvas, PrefabRoot } from 'react-three-game';
 interface GameObject {
   id: string;
   disabled?: boolean;
-  hidden?: boolean;
   components?: Record<string, { type: string; properties: any }>;
   children?: GameObject[];
 }
@@ -70,7 +75,7 @@ interface GameObject {
 | Transform | `position`, `rotation`, `scale` — all `[x,y,z]` arrays, rotation in radians |
 | Geometry | `geometryType`: box/sphere/plane/cylinder, `args`: dimension array |
 | Material | `color`, `texture?`, `metalness?`, `roughness?` |
-| Physics | `type`: dynamic/fixed |
+| Physics | `type`: dynamic/fixed/kinematicPosition/kinematicVelocity, `mass?`, `restitution?` (bounciness), `friction?`, plus any Rapier props |
 | Model | `filename` (GLB/FBX path), `instanced?` for GPU batching |
 | SpotLight | `color`, `intensity`, `angle`, `penumbra` |
 
@@ -133,14 +138,21 @@ The `FieldRenderer` component auto-generates editor UI from a field schema:
 }
 ```
 
-## Visual Editor
+## Prefab Editor
 
 ```jsx
 import { PrefabEditor } from 'react-three-game';
+
+// Standalone editor
 <PrefabEditor initialPrefab={sceneData} onPrefabChange={setSceneData} />
+
+// With custom R3F components
+<PrefabEditor initialPrefab={sceneData}>
+  <CustomComponent />
+</PrefabEditor>
 ```
 
-Keys: **T**ranslate / **R**otate / **S**cale. Drag tree nodes to reparent. Import/export JSON.
+Keys: **T**ranslate / **R**otate / **S**cale. Drag tree nodes to reparent. Import/export JSON. Physics only runs in play mode.
 
 ## Internals
 
@@ -151,9 +163,13 @@ Keys: **T**ranslate / **R**otate / **S**cale. Drag tree nodes to reparent. Impor
 ## Tree Utilities
 
 ```typescript
-import { findNode, updateNode, deleteNode, cloneNode } from 'react-three-game';
+import { findNode, updateNode, updateNodeById, deleteNode, cloneNode, exportGLBData } from 'react-three-game';
 
-const updated = updateNode(root, nodeId, n => ({ ...n, disabled: true }));
+const node = findNode(root, nodeId);
+const updated = updateNode(root, nodeId, n => ({ ...n, disabled: true }));  // or updateNodeById
+const afterDelete = deleteNode(root, nodeId);
+const cloned = cloneNode(node);
+const glbData = await exportGLBData(sceneRoot);  // export scene to GLB ArrayBuffer
 ```
 
 ## Development

package/dist/helpers/index.d.ts

@@ -18,8 +18,6 @@ export interface GroundOptions {
     repeatCount?: [number, number];
     /** Physics body type. Defaults to "fixed". */
     physicsType?: "fixed" | "dynamic" | "kinematic";
-    /** Set true to hide the node. */
-    hidden?: boolean;
     /** Set true to disable the node. */
     disabled?: boolean;
 }

package/dist/helpers/index.js

@@ -8,11 +8,10 @@
  * - Physics (fixed by default)
  */
 export function ground(options = {}) {
-    const { id = "ground", size = 50, position = [0, 0, 0], rotation = [-Math.PI / 2, 0, 0], scale = [1, 1, 1], color = "white", texture, repeat = texture ? true : false, repeatCount = [25, 25], physicsType = "fixed", hidden = false, disabled = false, } = options;
+    const { id = "ground", size = 50, position = [0, 0, 0], rotation = [-Math.PI / 2, 0, 0], scale = [1, 1, 1], color = "white", texture, repeat = texture ? true : false, repeatCount = [25, 25], physicsType = "fixed", disabled = false, } = options;
     return {
         id,
         disabled,
-        hidden,
         components: {
             transform: {
                 type: "Transform",

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

@@ -1,8 +1,10 @@
 import { Group, Matrix4, Object3D, Texture } from "three";
 import { ThreeEvent } from "@react-three/fiber";
 import { Prefab, GameObject as GameObjectType } from "./types";
+import type { RapierRigidBody } from "@react-three/rapier";
 export interface PrefabRootRef {
     root: Group | null;
+    rigidBodyRefs: Map<string, RapierRigidBody | null>;
 }
 export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     editMode?: boolean;
@@ -20,6 +22,7 @@ interface RendererProps {
     onSelect?: (id: string) => void;
     onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
     registerRef: (id: string, obj: Object3D | null) => void;
+    registerRigidBodyRef: (id: string, rb: RapierRigidBody | null) => void;
     loadedModels: Record<string, Object3D>;
     loadedTextures: Record<string, Texture>;
     editMode?: boolean;

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -30,16 +30,21 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
     const [textures, setTextures] = useState({});
     const loading = useRef(new Set());
     const objectRefs = useRef({});
+    const rigidBodyRefs = useRef(new Map());
     const [selectedObject, setSelectedObject] = useState(null);
     const rootRef = useRef(null);
     useImperativeHandle(ref, () => ({
-        root: rootRef.current
+        root: rootRef.current,
+        rigidBodyRefs: rigidBodyRefs.current
     }), []);
     const registerRef = useCallback((id, obj) => {
         objectRefs.current[id] = obj;
         if (id === selectedId)
             setSelectedObject(obj);
     }, [selectedId]);
+    const registerRigidBodyRef = useCallback((id, rb) => {
+        rigidBodyRefs.current.set(id, rb);
+    }, []);
     useEffect(() => {
         const originalError = console.error;
         console.error = (...args) => {
@@ -103,12 +108,12 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
             });
         });
     }, [data, models, textures]);
-    return (_jsxs("group", { ref: rootRef, children: [_jsx(GameInstanceProvider, { models: models, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: onClick, registerRef: registerRef, loadedModels: models, loadedTextures: textures, editMode: editMode, parentMatrix: IDENTITY }) }), editMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { makeDefault: true }), selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: onTransformChange, translationSnap: snapResolution > 0 ? snapResolution : undefined, rotationSnap: snapResolution > 0 ? snapResolution : undefined, scaleSnap: snapResolution > 0 ? snapResolution : undefined }, `transform-${snapResolution}`))] }))] }));
+    return (_jsxs("group", { ref: rootRef, children: [_jsx(GameInstanceProvider, { models: models, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: onClick, registerRef: registerRef, registerRigidBodyRef: registerRigidBodyRef, loadedModels: models, loadedTextures: textures, editMode: editMode, parentMatrix: IDENTITY }) }), editMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { makeDefault: true }), selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: onTransformChange, translationSnap: snapResolution > 0 ? snapResolution : undefined, rotationSnap: snapResolution > 0 ? snapResolution : undefined, scaleSnap: snapResolution > 0 ? snapResolution : undefined }, `transform-${snapResolution}`))] }))] }));
 });
 export function GameObjectRenderer(props) {
     var _a, _b, _c;
     const node = props.gameObject;
-    if (!node || node.hidden || node.disabled)
+    if (!node || node.disabled)
         return null;
     const isInstanced = (_c = (_b = (_a = node.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.instanced;
     const prevInstancedRef = useRef(undefined);
@@ -160,7 +165,7 @@ function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, register
     }
     return (_jsx(GameInstance, { id: gameObject.id, modelUrl: (_k = (_j = (_h = gameObject.components) === null || _h === void 0 ? void 0 : _h.model) === null || _j === void 0 ? void 0 : _j.properties) === null || _k === void 0 ? void 0 : _k.filename, position: worldPosition, rotation: worldRotation, scale: worldScale, physics: physicsProps }));
 }
-function StandardNode({ gameObject, selectedId, onSelect, onClick, registerRef, loadedModels, loadedTextures, editMode, parentMatrix = IDENTITY, }) {
+function StandardNode({ gameObject, selectedId, onSelect, onClick, registerRef, registerRigidBodyRef, loadedModels, loadedTextures, editMode, parentMatrix = IDENTITY, }) {
     var _a, _b, _c, _d, _e, _f;
     const groupRef = useRef(null);
     const helperRef = useRef(null);
@@ -193,12 +198,12 @@ function StandardNode({ gameObject, selectedId, onSelect, onClick, registerRef,
     const physicsDef = hasPhysics ? getComponent("Physics") : null;
     const isInstanced = (_e = (_d = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.model) === null || _d === void 0 ? void 0 : _d.properties) === null || _e === void 0 ? void 0 : _e.instanced;
     const physicsKey = `physics_${gameObject.id}_${isInstanced ? 'instanced' : 'standard'}`;
-    const inner = (_jsxs("group", { onPointerDown: editMode ? onDown : undefined, onPointerMove: editMode ? () => (clickValid.current = false) : undefined, onPointerUp: editMode ? onUp : undefined, children: [renderCoreNode(gameObject, { loadedModels, loadedTextures, editMode, registerRef }, parentMatrix), (_f = gameObject.children) === null || _f === void 0 ? void 0 : _f.map(child => (_jsx(GameObjectRenderer, { gameObject: child, selectedId: selectedId, onSelect: onSelect, onClick: onClick, registerRef: registerRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: world }, child.id)))] }));
+    const inner = (_jsxs("group", { onPointerDown: editMode ? onDown : undefined, onPointerMove: editMode ? () => (clickValid.current = false) : undefined, onPointerUp: editMode ? onUp : undefined, children: [renderCoreNode(gameObject, { loadedModels, loadedTextures, editMode, registerRef }, parentMatrix), (_f = gameObject.children) === null || _f === void 0 ? void 0 : _f.map(child => (_jsx(GameObjectRenderer, { gameObject: child, selectedId: selectedId, onSelect: onSelect, onClick: onClick, registerRef: registerRef, registerRigidBodyRef: registerRigidBodyRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: world }, child.id)))] }));
     if (editMode) {
-        return (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), _jsx("group", { ref: helperRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }), hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, editMode: editMode, children: inner }, physicsKey)) : null] }));
+        return (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), _jsx("group", { ref: helperRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }), hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, editMode: editMode, nodeId: gameObject.id, registerRigidBodyRef: registerRigidBodyRef, children: inner }, physicsKey)) : null] }));
     }
     if (hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View)) {
-        return (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, editMode: editMode, children: inner }, physicsKey));
+        return (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, editMode: editMode, nodeId: gameObject.id, registerRigidBodyRef: registerRigidBodyRef, children: inner }, physicsKey));
     }
     return (_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, onPointerDown: onDown, onPointerMove: () => (clickValid.current = false), onPointerUp: onUp, children: inner }));
 }

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

@@ -1,3 +1,12 @@
 import { Component } from './ComponentRegistry';
+import { MeshStandardMaterialProperties } from 'three';
+export interface MaterialProps extends Omit<MeshStandardMaterialProperties, 'args'> {
+    texture?: string;
+    repeat?: boolean;
+    repeatCount?: [number, number];
+    generateMipmaps?: boolean;
+    minFilter?: string;
+    magFilter?: string;
+}
 declare const MaterialComponent: Component;
 export default MaterialComponent;

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

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SingleTextureViewer, TextureListViewer } from '../../assetviewer/page';
 import { useEffect, useState } from 'react';
@@ -25,6 +36,13 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
     const fields = [
         { name: 'color', type: 'color', label: 'Color' },
         { name: 'wireframe', type: 'boolean', label: 'Wireframe' },
+        { name: 'transparent', type: 'boolean', label: 'Transparent' },
+        { name: 'opacity', type: 'number', label: 'Opacity', min: 0, max: 1, step: 0.01 },
+        { name: 'metalness', type: 'number', label: 'Metalness', min: 0, max: 1, step: 0.01 },
+        { name: 'roughness', type: 'number', label: 'Roughness', min: 0, max: 1, step: 0.01 },
+        { name: 'transmission', type: 'number', label: 'Transmission', min: 0, max: 1, step: 0.01 },
+        { name: 'thickness', type: 'number', label: 'Thickness', min: 0, step: 0.1 },
+        { name: 'ior', type: 'number', label: 'IOR (Index of Refraction)', min: 1, max: 2.333, step: 0.01 },
         {
             name: 'texture',
             type: 'custom',
@@ -80,6 +98,9 @@ function MaterialComponentView({ properties, loadedTextures }) {
     const minFilter = (properties === null || properties === void 0 ? void 0 : properties.minFilter) || 'LinearMipmapLinearFilter';
     const magFilter = (properties === null || properties === void 0 ? void 0 : properties.magFilter) || 'LinearFilter';
     const texture = textureName && loadedTextures ? loadedTextures[textureName] : undefined;
+    // Destructure all material props and separate custom texture handling props
+    const _b = properties || {}, { texture: _texture, repeat: _repeat, repeatCount: _repeatCount, generateMipmaps: _generateMipmaps, minFilter: _minFilter, magFilter: _magFilter, map: _map } = _b, // Filter out map since we set it explicitly
+    materialProps = __rest(_b, ["texture", "repeat", "repeatCount", "generateMipmaps", "minFilter", "magFilter", "map"]);
     const minFilterMap = {
         NearestFilter,
         LinearFilter,
@@ -116,8 +137,7 @@ function MaterialComponentView({ properties, loadedTextures }) {
     if (!properties) {
         return _jsx("meshStandardMaterial", { color: "red", wireframe: true });
     }
-    const { color, wireframe = false } = properties;
-    return (_jsx("meshStandardMaterial", { color: color, wireframe: wireframe, map: finalTexture, transparent: !!finalTexture }, (_a = finalTexture === null || finalTexture === void 0 ? void 0 : finalTexture.uuid) !== null && _a !== void 0 ? _a : 'no-texture'));
+    return (_jsx("meshStandardMaterial", Object.assign({ map: finalTexture }, materialProps), (_a = finalTexture === null || finalTexture === void 0 ? void 0 : finalTexture.uuid) !== null && _a !== void 0 ? _a : 'no-texture'));
 }
 const MaterialComponent = {
     name: 'Material',
@@ -126,7 +146,11 @@ const MaterialComponent = {
     nonComposable: true,
     defaultProperties: {
         color: '#ffffff',
-        wireframe: false
+        wireframe: false,
+        transparent: false,
+        opacity: 1,
+        metalness: 0,
+        roughness: 1
     }
 };
 export default MaterialComponent;

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

@@ -1,10 +1,5 @@
+import type { RigidBodyOptions } from "@react-three/rapier";
 import { Component } from "./ComponentRegistry";
-export interface PhysicsProps {
-    type: "fixed" | "dynamic";
-    collider?: string;
-    mass?: number;
-    restitution?: number;
-    friction?: number;
-}
+export type PhysicsProps = RigidBodyOptions;
 declare const PhysicsComponent: Component;
 export default PhysicsComponent;

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

@@ -1,5 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RigidBody } from "@react-three/rapier";
+import { useRef, useEffect } from 'react';
 import { FieldRenderer } from "./Input";
 const physicsFields = [
     {
@@ -9,10 +21,12 @@ const physicsFields = [
         options: [
             { value: 'dynamic', label: 'Dynamic' },
             { value: 'fixed', label: 'Fixed' },
+            { value: 'kinematicPosition', label: 'Kinematic Position' },
+            { value: 'kinematicVelocity', label: 'Kinematic Velocity' },
         ],
     },
     {
-        name: 'collider',
+        name: 'colliders',
         type: 'select',
         label: 'Collider',
         options: [
@@ -22,24 +36,77 @@ const physicsFields = [
             { 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,
+    },
 ];
 function PhysicsComponentEditor({ component, onUpdate }) {
-    return (_jsx(FieldRenderer, { fields: physicsFields, values: component.properties, onChange: onUpdate }));
+    return (_jsx(FieldRenderer, { fields: physicsFields, values: component.properties, onChange: (props) => onUpdate(Object.assign(Object.assign({}, component), { properties: Object.assign(Object.assign({}, component.properties), props) })) }));
 }
-function PhysicsComponentView({ properties, children, position, rotation, scale, editMode }) {
-    const colliders = properties.collider || (properties.type === 'fixed' ? 'trimesh' : 'hull');
+function PhysicsComponentView({ properties, children, position, rotation, scale, editMode, nodeId, registerRigidBodyRef }) {
+    const { type, colliders } = properties, otherProps = __rest(properties, ["type", "colliders"]);
+    const colliderType = colliders || (type === 'fixed' ? 'trimesh' : 'hull');
+    const rigidBodyRef = useRef(null);
+    // Register RigidBody ref when it's available
+    useEffect(() => {
+        if (nodeId && registerRigidBodyRef && rigidBodyRef.current) {
+            registerRigidBodyRef(nodeId, rigidBodyRef.current);
+        }
+        return () => {
+            if (nodeId && registerRigidBodyRef) {
+                registerRigidBodyRef(nodeId, null);
+            }
+        };
+    }, [nodeId, registerRigidBodyRef]);
     // In edit mode, include position/rotation in key to force remount when transform changes
     // This ensures the RigidBody debug visualization updates even when physics is paused
     const rbKey = editMode
-        ? `${properties.type || 'dynamic'}_${colliders}_${position === null || position === void 0 ? void 0 : position.join(',')}_${rotation === null || rotation === void 0 ? void 0 : rotation.join(',')}`
-        : `${properties.type || 'dynamic'}_${colliders}`;
-    return (_jsx(RigidBody, { type: properties.type, colliders: colliders, position: position, rotation: rotation, scale: scale, children: children }, rbKey));
+        ? `${type || 'dynamic'}_${colliderType}_${position === null || position === void 0 ? void 0 : position.join(',')}_${rotation === null || rotation === void 0 ? void 0 : rotation.join(',')}`
+        : `${type || 'dynamic'}_${colliderType}`;
+    return (_jsx(RigidBody, Object.assign({ ref: rigidBodyRef, type: type, colliders: colliderType, position: position, rotation: rotation, scale: scale }, otherProps, { children: children }), rbKey));
 }
 const PhysicsComponent = {
     name: 'Physics',
     Editor: PhysicsComponentEditor,
     View: PhysicsComponentView,
     nonComposable: true,
-    defaultProperties: { type: 'dynamic', collider: 'hull' }
+    defaultProperties: { type: 'dynamic', colliders: 'hull' }
 };
 export default PhysicsComponent;

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

@@ -7,7 +7,6 @@ export interface GameObject {
     id: string;
     name?: string;
     disabled?: boolean;
-    hidden?: boolean;
     children?: GameObject[];
     components?: {
         [key: string]: ComponentData | undefined;

package/package.json

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

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

@@ -1 +1,7 @@
 Agent skill for [react-three-game](https://github.com/prnthh/react-three-game)
+
+Gives your agent the ability to make 3D scenes, physics simulations and games.
+
+```
+npx skills add https://github.com/prnthh/react-three-game-skill
+```