react-three-game 0.0.47 → 0.0.49

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)
@@ -61,7 +66,7 @@ Use node materials only: `MeshStandardNodeMaterial`, `MeshBasicNodeMaterial` (no
 Set `model.properties.instanced = true` → uses `InstanceProvider.tsx` for batched rendering with physics.
 
 ## Built-in Components
-`Transform`, `Geometry` (box/sphere/plane), `Material` (color/texture), `Physics` (dynamic/fixed), `Model` (GLB/FBX), `SpotLight`, `DirectionalLight`
+`Transform`, `Geometry` (box/sphere/plane/cylinder), `Material` (color/texture), `Physics` (dynamic/fixed), `Model` (GLB/FBX), `SpotLight`, `DirectionalLight`, `AmbientLight`, `Text`
 
 ## Custom Components (User-space)
 See `docs/app/demo/editor/RotatorComponent.tsx` for runtime behavior example using `useFrame`. Register with `registerComponent()` before rendering `<PrefabEditor>`.

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
 

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.js

@@ -108,7 +108,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
 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);

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

@@ -0,0 +1,3 @@
+import { Component } from "./ComponentRegistry";
+declare const AmbientLightComponent: Component;
+export default AmbientLightComponent;

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FieldRenderer } from "./Input";
+const ambientLightFields = [
+    { name: 'color', type: 'color', label: 'Color' },
+    { name: 'intensity', type: 'number', label: 'Intensity', step: 0.1, min: 0 },
+];
+function AmbientLightComponentEditor({ component, onUpdate, }) {
+    return (_jsx(FieldRenderer, { fields: ambientLightFields, values: component.properties, onChange: onUpdate }));
+}
+function AmbientLightComponentView({ properties }) {
+    const { color = '#ffffff', intensity = 1 } = properties;
+    return _jsx("ambientLight", { color: color, intensity: intensity });
+}
+const AmbientLightComponent = {
+    name: 'AmbientLight',
+    Editor: AmbientLightComponentEditor,
+    View: AmbientLightComponentView,
+    defaultProperties: {
+        color: '#ffffff',
+        intensity: 1,
+    },
+};
+export default AmbientLightComponent;

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

@@ -13,6 +13,10 @@ const GEOMETRY_ARGS = {
         labels: ["Width", "Height"],
         defaults: [1, 1],
     },
+    cylinder: {
+        labels: ["Radius Top", "Radius Bottom", "Height", "Radial Segments"],
+        defaults: [1, 1, 1, 32],
+    },
 };
 function GeometryComponentEditor({ component, onUpdate, }) {
     const { geometryType, args = [] } = component.properties;
@@ -26,6 +30,7 @@ function GeometryComponentEditor({ component, onUpdate, }) {
                 { value: 'box', label: 'Box' },
                 { value: 'sphere', label: 'Sphere' },
                 { value: 'plane', label: 'Plane' },
+                { value: 'cylinder', label: 'Cylinder' },
             ],
         },
         {
@@ -69,6 +74,8 @@ function GeometryComponentView({ properties, children }) {
             return _jsx("sphereGeometry", { args: args });
         case "plane":
             return _jsx("planeGeometry", { args: args });
+        case "cylinder":
+            return _jsx("cylinderGeometry", { args: args });
         default:
             return _jsx("boxGeometry", { args: [1, 1, 1] });
     }

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

@@ -25,7 +25,29 @@ const styles = {
     },
 };
 export function Input({ value, onChange, step, min, max, style }) {
-    return (_jsx("input", { type: "number", value: value, onChange: (e) => onChange(parseFloat(e.target.value)), step: step, min: min, max: max, style: Object.assign(Object.assign({}, styles.input), style) }));
+    const [draft, setDraft] = useState(() => value.toString());
+    useEffect(() => {
+        setDraft(value.toString());
+    }, [value]);
+    const handleChange = (e) => {
+        const inputValue = e.target.value;
+        setDraft(inputValue);
+        const num = parseFloat(inputValue);
+        if (Number.isFinite(num)) {
+            onChange(num);
+        }
+    };
+    const handleBlur = () => {
+        const num = parseFloat(draft);
+        if (!Number.isFinite(num)) {
+            setDraft(value.toString());
+        }
+    };
+    return (_jsx("input", { type: "text", value: draft, onChange: handleChange, onBlur: handleBlur, onKeyDown: e => {
+            if (e.key === 'Enter') {
+                e.target.blur();
+            }
+        }, step: step, min: min, max: max, style: Object.assign(Object.assign({}, styles.input), style) }));
 }
 export function Label({ children }) {
     return _jsx("label", { style: styles.label, children: children });

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,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 } from "react/jsx-runtime";
 import { RigidBody } from "@react-three/rapier";
 import { FieldRenderer } from "./Input";
@@ -9,10 +20,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 +35,65 @@ 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');
+    const { type, colliders } = properties, otherProps = __rest(properties, ["type", "colliders"]);
+    const colliderType = colliders || (type === 'fixed' ? 'trimesh' : 'hull');
     // 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({ 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/components/index.js

@@ -4,6 +4,7 @@ import MaterialComponent from './MaterialComponent';
 import PhysicsComponent from './PhysicsComponent';
 import SpotLightComponent from './SpotLightComponent';
 import DirectionalLightComponent from './DirectionalLightComponent';
+import AmbientLightComponent from './AmbientLightComponent';
 import ModelComponent from './ModelComponent';
 import TextComponent from './TextComponent';
 export default [
@@ -13,6 +14,7 @@ export default [
     PhysicsComponent,
     SpotLightComponent,
     DirectionalLightComponent,
+    AmbientLightComponent,
     ModelComponent,
     TextComponent
 ];

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.47",
+  "version": "0.0.49",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",

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

@@ -0,0 +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
+```

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

@@ -61,6 +61,19 @@ function AgentExporter() {
 
 ## Core Concepts
 
+### Asset Paths and Public Directory
+
+**All asset paths are relative to `/public`** and omit the `/public` prefix:
+
+```json
+{
+  "texture": "/textures/floor.png",
+  "model": "/models/car.glb",
+  "font": "/fonts/font.ttf"
+}
+```
+
+Path `"/any/path/file.ext"` refers to `/public/any/path/file.ext`.
 ### GameObject Structure
 
 Every game object follows this schema:
@@ -69,7 +82,6 @@ Every game object follows this schema:
 interface GameObject {
   id: string;
   disabled?: boolean;
-  hidden?: boolean;
   components?: Record<string, { type: string; properties: any }>;
   children?: GameObject[];
 }
@@ -104,12 +116,21 @@ Scenes are defined as JSON prefabs with a root node containing children:
 | Transform | `Transform` | `position: [x,y,z]`, `rotation: [x,y,z]` (radians), `scale: [x,y,z]` |
 | Geometry | `Geometry` | `geometryType`: box/sphere/plane/cylinder, `args`: dimension array |
 | Material | `Material` | `color`, `texture?`, `metalness?`, `roughness?`, `repeat?`, `repeatCount?` |
-| Physics | `Physics` | `type`: "dynamic" or "fixed" |
+| Physics | `Physics` | `type`: dynamic/fixed/kinematicPosition/kinematicVelocity, `mass?`, `restitution?`, `friction?`, `linearDamping?`, `angularDamping?`, `gravityScale?`, plus any Rapier RigidBody props |
 | Model | `Model` | `filename` (GLB/FBX path), `instanced?` for GPU batching |
 | SpotLight | `SpotLight` | `color`, `intensity`, `angle`, `penumbra`, `distance?`, `castShadow?` |
 | DirectionalLight | `DirectionalLight` | `color`, `intensity`, `castShadow?`, `targetOffset?: [x,y,z]` |
+| AmbientLight | `AmbientLight` | `color`, `intensity` |
 | Text | `Text` | `text`, `font`, `size`, `depth`, `width`, `align`, `color` |
 
+### Text Component
+
+Requires `hb.wasm` and a font file (TTF/WOFF) in `/public/fonts/`:
+- hb.wasm: https://github.com/prnthh/react-three-game/raw/refs/heads/main/docs/public/fonts/hb.wasm
+- Sample font: https://github.com/prnthh/react-three-game/raw/refs/heads/main/docs/public/fonts/NotoSans-Regular.ttf
+
+Font property: `"font": "/fonts/NotoSans-Regular.ttf"`
+
 ### Geometry Args by Type
 
 | geometryType | args array |
@@ -119,41 +140,31 @@ Scenes are defined as JSON prefabs with a root node containing children:
 | `plane` | `[width, height]` |
 | `cylinder` | `[radiusTop, radiusBottom, height, radialSegments]` |
 
-### Material Texture Options
+### Material Textures
 
 ```json
 {
-  "type": "Material",
-  "properties": {
-    "color": "white",
-    "texture": "/textures/path/to/texture.png",
-    "repeat": true,
-    "repeatCount": [4, 4]
+  "material": {
+    "type": "Material",
+    "properties": {
+      "color": "white",
+      "texture": "/textures/floor.png",
+      "repeat": true,
+      "repeatCount": [4, 4]
+    }
   }
 }
 ```
 
-- Use `"color": "white"` with textures for accurate texture colors
-- `repeatCount: [x, y]` tiles the texture; match to geometry dimensions for proper scaling
-
-### Rotation Reference
+### Rotations
 
-Rotations use radians. Common values:
-- `1.57` = 90° (π/2)
-- `3.14` = 180° (π)
-- `-1.57` = -90° (rotate plane flat: `rotation: [-1.57, 0, 0]`)
+Use radians: `1.57` = 90°, `3.14` = 180°, `-1.57` = -90°
 
 ## Common Patterns
 
 ### Usage Modes
 
-The library supports two modes:
-
-**Play Mode** (default) - Immediate rendering without any editor UI. Use `GameCanvas` with `PrefabRoot` for a clean game experience.
-
-**Editor Mode** - Visual GUI using `PrefabEditor` for scene inspection and custom component development. See the [Editor Mode](#editor-mode) section at the end of this document.
-
-### Basic Scene Setup (Play Mode)
+**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.
 
 ```jsx
 import { Physics } from '@react-three/rapier';
@@ -162,87 +173,63 @@ import { GameCanvas, PrefabRoot } from 'react-three-game';
 <GameCanvas>
   <Physics>
     <PrefabRoot data={prefabData} />
+    <CustomComponent />
   </Physics>
 </GameCanvas>
 ```
 
-### Tree Manipulation Utilities
+**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.
+
+```jsx
+import { PrefabEditor } from 'react-three-game';
+
+<PrefabEditor initialPrefab={prefabData}>
+  <CustomComponent />
+</PrefabEditor>
+```
+
+### Tree Utilities
 
 ```typescript
-import { findNode, updateNode, updateNodeById, deleteNode, cloneNode, saveJson, loadJson, exportGLB, exportGLBData } from 'react-three-game';
+import { updateNodeById, findNode, deleteNode, cloneNode, exportGLBData } from 'react-three-game';
 
-// Update a node by ID (optimized - avoids unnecessary object creation)
 const updated = updateNodeById(root, nodeId, node => ({ ...node, disabled: true }));
-
-// Find a node
 const node = findNode(root, nodeId);
-
-// Delete a node
 const afterDelete = deleteNode(root, nodeId);
-
-// Clone a node
 const cloned = cloneNode(node);
-
-// Save/load JSON
-saveJson(prefab, 'my-scene');
-const loaded = await loadJson();
-
-// Export to GLB
-await exportGLB(sceneRoot, { filename: 'my-scene.glb' });
-const glbData = await exportGLBData(sceneRoot); // Returns ArrayBuffer
+const glbData = await exportGLBData(sceneRoot);
 ```
 
-## Building Game Levels
+## Level Patterns
 
-### Complete Prefab Structure
+### Floor
 
 ```json
 {
-  "id": "level-id",
-  "name": "Level Name",
-  "root": {
-    "id": "root",
-    "enabled": true,
-    "visible": true,
-    "components": { ... },
-    "children": [ ... ]
-  }
-}
-```
-
-### Floor/Ground Pattern
-
-```json
-{
-  "id": "main-floor",
+  "id": "floor",
   "components": {
     "transform": { "type": "Transform", "properties": { "position": [0, -0.5, 0] } },
     "geometry": { "type": "Geometry", "properties": { "geometryType": "box", "args": [40, 1, 40] } },
-    "material": { "type": "Material", "properties": { "color": "white", "texture": "/textures/GreyboxTextures/greybox_dark_grid.png", "repeat": true, "repeatCount": [20, 20] } },
+    "material": { "type": "Material", "properties": { "texture": "/textures/floor.png", "repeat": true, "repeatCount": [20, 20] } },
     "physics": { "type": "Physics", "properties": { "type": "fixed" } }
   }
 }
 ```
 
-### Platform Pattern
-
-Floating platforms use "fixed" physics and smaller box geometry:
+### Platform
 
 ```json
 {
-  "id": "platform-1",
+  "id": "platform",
   "components": {
     "transform": { "type": "Transform", "properties": { "position": [-8, 2, -5] } },
     "geometry": { "type": "Geometry", "properties": { "geometryType": "box", "args": [6, 0.5, 4] } },
-    "material": { "type": "Material", "properties": { "color": "white", "texture": "/textures/GreyboxTextures/greybox_teal_grid.png", "repeat": true, "repeatCount": [3, 2] } },
     "physics": { "type": "Physics", "properties": { "type": "fixed" } }
   }
 }
 ```
 
-### Ramp Pattern
-
-Rotate on the Z-axis to create inclined surfaces:
+### Ramp
 
 ```json
 {
@@ -256,12 +243,11 @@ Rotate on the Z-axis to create inclined surfaces:
 ```
 
 ### Wall Pattern
-
-Tall thin boxes positioned at boundaries:
+### Wall
 
 ```json
 {
-  "id": "wall-back",
+  "id": "wall",
   "components": {
     "transform": { "type": "Transform", "properties": { "position": [0, 3, -20] } },
     "geometry": { "type": "Geometry", "properties": { "geometryType": "box", "args": [40, 7, 1] } },
@@ -270,128 +256,64 @@ Tall thin boxes positioned at boundaries:
 }
 ```
 
-### Three-Point Lighting Setup
-
-Good lighting uses main, fill, and accent lights:
+### Lighting
 
 ```json
 [
-  { "id": "main-light", "components": { "transform": { "properties": { "position": [10, 15, 10] } }, "spotlight": { "type": "SpotLight", "properties": { "color": "#ffffff", "intensity": 200, "angle": 0.8, "castShadow": true } } } },
-  { "id": "fill-light", "components": { "transform": { "properties": { "position": [-10, 12, -5] } }, "spotlight": { "type": "SpotLight", "properties": { "color": "#b0c4de", "intensity": 80, "angle": 0.9 } } } },
-  { "id": "accent-light", "components": { "transform": { "properties": { "position": [0, 10, -15] } }, "spotlight": { "type": "SpotLight", "properties": { "color": "#ffd700", "intensity": 50, "angle": 0.4 } } } }
+  { "id": "spot", "components": { "transform": { "properties": { "position": [10, 15, 10] } }, "spotlight": { "type": "SpotLight", "properties": { "intensity": 200, "angle": 0.8, "castShadow": true } } } },
+  { "id": "ambient", "components": { "ambientlight": { "type": "AmbientLight", "properties": { "intensity": 0.4 } } } }
 ]
 ```
 
-### Available Greybox Textures
-
-Located in `/textures/GreyboxTextures/`:
-- `greybox_dark_grid.png` - dark floors
-- `greybox_light_grid.png` - light surfaces
-- `greybox_teal_grid.png`, `greybox_purple_grid.png`, `greybox_orange_grid.png` - colored platforms
-- `greybox_red_grid.png`, `greybox_blue_grid.png` - obstacles/hazards
-- `greybox_yellow_grid.png`, `greybox_lime_grid.png`, `greybox_green_grid.png` - special areas
-
-### Metallic/Special Materials
-
-For goal platforms or special objects, use metalness and roughness:
+### Text
 
 ```json
 {
-  "type": "Material",
-  "properties": {
-    "color": "#FFD700",
-    "metalness": 0.8,
-    "roughness": 0.2
-  }
-}
-```
-
-### Text Component
-
-3D text rendering using `three-text`. The Text component is non-composable (cannot have children).
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `text` | string | `"Hello World"` | Text content to display |
-| `color` | string | `"#888888"` | Text color (hex or CSS color) |
-| `font` | string | `"/fonts/NotoSans-Regular.ttf"` | Path to TTF font file |
-| `size` | number | `0.5` | Font size in world units |
-| `depth` | number | `0` | 3D extrusion depth (0 for flat text) |
-| `width` | number | `5` | Text block width for wrapping/alignment |
-| `align` | string | `"center"` | Horizontal alignment: `"left"`, `"center"`, `"right"` |
-
-```json
-{
-  "id": "title-text",
+  "id": "text",
   "components": {
     "transform": { "type": "Transform", "properties": { "position": [0, 3, 0] } },
-    "text": {
-      "type": "Text",
-      "properties": {
-        "text": "Welcome",
-        "color": "#ffffff",
-        "size": 1,
-        "depth": 0.1,
-        "align": "center"
-      }
-    }
+    "text": { "type": "Text", "properties": { "text": "Welcome", "font": "/fonts/font.ttf", "size": 1, "depth": 0.1 } }
   }
 }
 ```
 
-### Model Placement
-
-GLB models don't need geometry/material components:
+### Model
 
 ```json
 {
-  "id": "tree-1",
+  "id": "model",
   "components": {
-    "transform": { "type": "Transform", "properties": { "position": [-12, 0, 10], "scale": [1.5, 1.5, 1.5] } },
-    "model": { "type": "Model", "properties": { "filename": "models/environment/tree.glb" } }
+    "transform": { "type": "Transform", "properties": { "position": [0, 0, 0], "scale": [1.5, 1.5, 1.5] } },
+    "model": { "type": "Model", "properties": { "filename": "/models/tree.glb" } }
   }
 }
 ```
 
-Available models: `models/environment/tree.glb`, `models/environment/servers.glb`, `models/environment/cubeart.glb`
+## Editor
 
-## Editor Mode
-
-Use editor mode when building scenes visually or creating custom components with inspector UI.
-
-### Using the Visual Editor
+### Basic Usage
 
 ```jsx
 import { PrefabEditor } from 'react-three-game';
 
-<PrefabEditor
-  initialPrefab={sceneData}
-  onPrefabChange={setSceneData}
-/>
+<PrefabEditor initialPrefab={sceneData} onPrefabChange={setSceneData} />
 ```
 
-The editor provides a full GUI with:
-- Scene hierarchy tree for navigating and selecting objects
-- Component inspector panel for editing properties
-- Transform gizmos for manipulating objects visually
-- Keyboard shortcuts: **T** (Translate), **R** (Rotate), **S** (Scale)
+Keyboard shortcuts: **T** (Translate), **R** (Rotate), **S** (Scale)
 
-### Programmatic Updates with PrefabEditor
-
-Use the editor ref to update prefabs programmatically:
+### Programmatic Updates
 
 ```jsx
 import { useRef } from 'react';
 import { PrefabEditor, updateNodeById } from 'react-three-game';
-import type { PrefabEditorRef, Prefab } from 'react-three-game';
+import type { PrefabEditorRef } from 'react-three-game';
 
-function Game() {
+function Scene() {
   const editorRef = useRef<PrefabEditorRef>(null);
 
-  const movePlayer = () => {
-    if (!editorRef.current) return;
-    const prefab = editorRef.current.prefab;
-    const newRoot = updateNodeById(prefab.root, "player", node => ({
+  const moveBall = () => {
+    const prefab = editorRef.current!.prefab;
+    const newRoot = updateNodeById(prefab.root, "ball", node => ({
       ...node,
       components: {
         ...node.components,
@@ -401,209 +323,74 @@ function Game() {
         }
       }
     }));
-    editorRef.current.setPrefab({ ...prefab, root: newRoot });
+    editorRef.current!.setPrefab({ ...prefab, root: newRoot });
   };
 
-  return (
-    <PrefabEditor ref={editorRef} initialPrefab={sceneData}>
-      {/* Children render inside the Canvas - can use useFrame here */}
-    </PrefabEditor>
-  );
+  return <PrefabEditor ref={editorRef} initialPrefab={sceneData} />;
 }
 ```
 
-The `PrefabEditorRef` provides:
-- `prefab` - current prefab state
-- `setPrefab(prefab)` - update the prefab
-- `screenshot()` - save canvas as PNG
-- `exportGLB()` - export scene as GLB
-- `rootRef` - reference to the Three.js scene root for programmatic GLB export
+**PrefabEditorRef**: `prefab`, `setPrefab()`, `screenshot()`, `exportGLB()`, `rootRef`
 
-### Programmatic GLB Export
-
-Export Three.js scenes to GLB format from JSON prefabs:
+### GLB Export
 
 ```tsx
-import { useRef, useEffect } from 'react';
-import { PrefabEditor, exportGLB, exportGLBData } from 'react-three-game';
-import type { PrefabEditorRef } from 'react-three-game';
-
-function ExportScene() {
-  const editorRef = useRef<PrefabEditorRef>(null);
-
-  const handleExport = async () => {
-    const sceneRoot = editorRef.current?.rootRef.current?.root;
-    if (!sceneRoot) return;
-
-    // Option 1: Export and trigger browser download
-    await exportGLB(sceneRoot, { 
-      filename: 'my-scene.glb',
-      binary: true,
-      onComplete: (result) => console.log('Export complete'),
-      onError: (error) => console.error('Export failed', error)
-    });
-
-    // Option 2: Get raw ArrayBuffer without downloading
-    const glbData = await exportGLBData(sceneRoot);
-    // Upload to server, save to file system, etc.
-  };
+import { exportGLBData } from 'react-three-game';
 
-  return (
-    <>
-      <PrefabEditor ref={editorRef} initialPrefab={jsonPrefab} />
-      <button onClick={handleExport}>Export GLB</button>
-    </>
-  );
-}
+const glbData = await exportGLBData(editorRef.current!.rootRef.current!.root);
 ```
 
-**Export Options:**
-- `filename` - Output filename (triggers download if provided)
-- `binary` - Export as binary GLB (true) or JSON glTF (false)
-- `onComplete` - Callback when export succeeds
-- `onError` - Callback when export fails
-
-**Common Agent Pattern:**
-```tsx
-useEffect(() => {
-  // Wait for scene to fully render
-  const timer = setTimeout(async () => {
-    const sceneRoot = editorRef.current?.rootRef.current?.root;
-    if (sceneRoot) {
-      const glbData = await exportGLBData(sceneRoot);
-      // Process the ArrayBuffer
-    }
-  }, 1000);
-  return () => clearTimeout(timer);
-}, []);
-```
-
-### Live Node Updates with useFrame
-
-To animate objects by updating the prefab JSON at runtime, pass a child component to `PrefabEditor` that uses `useFrame`:
+### Runtime Animation
 
 ```tsx
 import { useRef } from "react";
 import { useFrame } from "@react-three/fiber";
 import { PrefabEditor, updateNodeById } from "react-three-game";
-import type { Prefab, PrefabEditorRef } from "react-three-game";
-
-// Animation component runs inside the editor's Canvas
-function PlayerAnimator({ editorRef }: { editorRef: React.RefObject<PrefabEditorRef | null> }) {
-  const velocityRef = useRef({ x: 0, z: 0 });
 
+function Animator({ editorRef }) {
   useFrame(() => {
-    if (!editorRef.current) return;
-
-    const prefab = editorRef.current.prefab;
-    const newRoot = updateNodeById(prefab.root, "player", (node) => {
-      const transform = node.components?.transform?.properties;
-      if (!transform) return node;
-
-      const pos = transform.position as [number, number, number];
-      return {
-        ...node,
-        components: {
-          ...node.components,
-          transform: {
-            ...node.components!.transform!,
-            properties: {
-              ...transform,
-              position: [pos[0] + velocityRef.current.x * 0.02, pos[1], pos[2] + velocityRef.current.z * 0.02],
-            },
-          },
-        },
-      };
-    });
-
-    if (newRoot !== prefab.root) {
-      editorRef.current.setPrefab({ ...prefab, root: newRoot });
-    }
+    const prefab = editorRef.current!.prefab;
+    const newRoot = updateNodeById(prefab.root, "ball", node => ({
+      ...node,
+      components: {
+        ...node.components,
+        transform: {
+          ...node.components!.transform!,
+          properties: { ...node.components!.transform!.properties, position: [x, y, z] }
+        }
+      }
+    }));
+    editorRef.current!.setPrefab({ ...prefab, root: newRoot });
   });
-
   return null;
 }
 
-// Usage
-function Game() {
-  const editorRef = useRef<PrefabEditorRef>(null);
-
+function Scene() {
+  const editorRef = useRef(null);
   return (
-    <PrefabEditor ref={editorRef} initialPrefab={sceneData}>
-      <PlayerAnimator editorRef={editorRef} />
+    <PrefabEditor ref={editorRef} initialPrefab={data}>
+      <Animator editorRef={editorRef} />
     </PrefabEditor>
   );
 }
 ```
 
-Key points:
-- Pass animation components as `children` to `PrefabEditor` - they render inside the Canvas
-- Access prefab via `editorRef.current.prefab` and update via `editorRef.current.setPrefab()`
-- `updateNodeById` is optimized to avoid recreating unchanged branches
-- Store mutable state (velocities, timers) in refs to avoid re-renders
-
-### Creating a Custom Component
+### Custom Component
 
 ```tsx
-import { Component, registerComponent, FieldRenderer, FieldDefinition } from 'react-three-game';
-
-const myFields: FieldDefinition[] = [
-  { name: 'speed', type: 'number', label: 'Speed', step: 0.1 },
-  { name: 'enabled', type: 'boolean', label: 'Enabled' },
-];
+import { Component, registerComponent, FieldRenderer } from 'react-three-game';
 
 const MyComponent: Component = {
   name: 'MyComponent',
   Editor: ({ component, onUpdate }) => (
-    <FieldRenderer fields={myFields} values={component.properties} onChange={onUpdate} />
+    <FieldRenderer fields={[{ name: 'speed', type: 'number', step: 0.1 }]} values={component.properties} onChange={onUpdate} />
   ),
-  View: ({ properties, children }) => {
-    // Runtime behavior here
-    return <group>{children}</group>;
-  },
-  defaultProperties: { speed: 1, enabled: true }
+  View: ({ properties, children }) => <group>{children}</group>,
+  defaultProperties: { speed: 1 }
 };
 
 registerComponent(MyComponent);
 ```
 
-### Field Types for Editor UI
-
-| Type | Description | Options |
-|------|-------------|---------|
-| `vector3` | X/Y/Z inputs | `snap?: number` |
-| `number` | Numeric input | `min?`, `max?`, `step?` |
-| `string` | Text input | `placeholder?` |
-| `color` | Color picker | - |
-| `boolean` | Checkbox | - |
-| `select` | Dropdown | `options: { value, label }[]` |
-| `custom` | Custom render function | `render: (props) => ReactNode` |
-
-## Dependencies
-
-Required peer dependencies:
-- `@react-three/fiber`
-- `@react-three/rapier`
-- `three`
-
-Install with:
-```bash
-npm i react-three-game @react-three/fiber @react-three/rapier three
-```
-
-## File Structure
-
-```
-/src                 → library source (published to npm)
-/docs                → Next.js demo site
-/dist                → built output
-```
-
-## Development Commands
-
-```bash
-npm run dev     # tsc --watch + docs site
-npm run build   # build to /dist
-npm run release # build + publish
-```
+**Field types**: `vector3`, `number`, `string`, `color`, `boolean`, `select`, `custom`
 

package/src/helpers/index.ts

@@ -25,8 +25,6 @@ export interface GroundOptions {
 	/** 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;
 }
@@ -52,14 +50,12 @@ export function ground(options: GroundOptions = {}): GameObject {
 		repeat = texture ? true : false,
 		repeatCount = [25, 25],
 		physicsType = "fixed",
-		hidden = false,
 		disabled = false,
 	} = options;
 
 	return {
 		id,
 		disabled,
-		hidden,
 		components: {
 			transform: {
 				type: "Transform",

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -175,7 +175,7 @@ export const PrefabRoot = forwardRef<PrefabRootRef, {
 
 export function GameObjectRenderer(props: RendererProps) {
     const node = props.gameObject;
-    if (!node || node.hidden || node.disabled) return null;
+    if (!node || node.disabled) return null;
 
     const isInstanced = node.components?.model?.properties?.instanced;
     const prevInstancedRef = useRef<boolean | undefined>(undefined);

package/src/tools/prefabeditor/components/AmbientLightComponent.tsx

@@ -0,0 +1,40 @@
+import { Component } from "./ComponentRegistry";
+import { FieldRenderer, FieldDefinition } from "./Input";
+
+const ambientLightFields: FieldDefinition[] = [
+    { name: 'color', type: 'color', label: 'Color' },
+    { name: 'intensity', type: 'number', label: 'Intensity', step: 0.1, min: 0 },
+];
+
+function AmbientLightComponentEditor({
+    component,
+    onUpdate,
+}: {
+    component: any;
+    onUpdate: (newProps: any) => void;
+}) {
+    return (
+        <FieldRenderer
+            fields={ambientLightFields}
+            values={component.properties}
+            onChange={onUpdate}
+        />
+    );
+}
+
+function AmbientLightComponentView({ properties }: { properties: any }) {
+    const { color = '#ffffff', intensity = 1 } = properties;
+    return <ambientLight color={color} intensity={intensity} />;
+}
+
+const AmbientLightComponent: Component = {
+    name: 'AmbientLight',
+    Editor: AmbientLightComponentEditor,
+    View: AmbientLightComponentView,
+    defaultProperties: {
+        color: '#ffffff',
+        intensity: 1,
+    },
+};
+
+export default AmbientLightComponent;

package/src/tools/prefabeditor/components/GeometryComponent.tsx

@@ -17,6 +17,10 @@ const GEOMETRY_ARGS: Record<string, {
         labels: ["Width", "Height"],
         defaults: [1, 1],
     },
+    cylinder: {
+        labels: ["Radius Top", "Radius Bottom", "Height", "Radial Segments"],
+        defaults: [1, 1, 1, 32],
+    },
 };
 
 function GeometryComponentEditor({
@@ -38,6 +42,7 @@ function GeometryComponentEditor({
                 { value: 'box', label: 'Box' },
                 { value: 'sphere', label: 'Sphere' },
                 { value: 'plane', label: 'Plane' },
+                { value: 'cylinder', label: 'Cylinder' },
             ],
         },
         {
@@ -101,6 +106,8 @@ function GeometryComponentView({ properties, children }: { properties: any, chil
             return <sphereGeometry args={args as [number, number?, number?]} />;
         case "plane":
             return <planeGeometry args={args as [number, number]} />;
+        case "cylinder":
+            return <cylinderGeometry args={args as [number, number, number, number?]} />;
         default:
             return <boxGeometry args={[1, 1, 1]} />;
     }

package/src/tools/prefabeditor/components/Input.tsx

@@ -96,11 +96,40 @@ interface InputProps {
 }
 
 export function Input({ value, onChange, step, min, max, style }: InputProps) {
+    const [draft, setDraft] = useState<string>(() => value.toString());
+
+    useEffect(() => {
+        setDraft(value.toString());
+    }, [value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const inputValue = e.target.value;
+        setDraft(inputValue);
+
+        const num = parseFloat(inputValue);
+        if (Number.isFinite(num)) {
+            onChange(num);
+        }
+    };
+
+    const handleBlur = () => {
+        const num = parseFloat(draft);
+        if (!Number.isFinite(num)) {
+            setDraft(value.toString());
+        }
+    };
+
     return (
         <input
-            type="number"
-            value={value}
-            onChange={(e) => onChange(parseFloat(e.target.value))}
+            type="text"
+            value={draft}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            onKeyDown={e => {
+                if (e.key === 'Enter') {
+                    (e.target as HTMLInputElement).blur();
+                }
+            }}
             step={step}
             min={min}
             max={max}

package/src/tools/prefabeditor/components/PhysicsComponent.tsx

@@ -1,17 +1,11 @@
 import { RigidBody, RapierRigidBody } from "@react-three/rapier";
+import type { RigidBodyOptions } from "@react-three/rapier";
 import type { ReactNode } from 'react';
-import { useEffect, useRef } from 'react';
 import { Component } from "./ComponentRegistry";
 import { FieldRenderer, FieldDefinition } from "./Input";
-import { Quaternion, Euler } from 'three';
+import { ComponentData } from "../types";
 
-export interface PhysicsProps {
-    type: "fixed" | "dynamic";
-    collider?: string;
-    mass?: number;
-    restitution?: number;
-    friction?: number;
-}
+export type PhysicsProps = RigidBodyOptions;
 
 const physicsFields: FieldDefinition[] = [
     {
@@ -21,10 +15,12 @@ const physicsFields: FieldDefinition[] = [
         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: [
@@ -34,20 +30,60 @@ const physicsFields: FieldDefinition[] = [
             { 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 }: { component: { properties: { type?: 'dynamic' | 'fixed'; collider?: string;[k: string]: any } }; onUpdate: (props: Partial<Record<string, any>>) => void }) {
+function PhysicsComponentEditor({ component, onUpdate }: { component: ComponentData; onUpdate: (newComp: any) => void }) {
     return (
         <FieldRenderer
             fields={physicsFields}
             values={component.properties}
-            onChange={onUpdate}
+            onChange={(props) => onUpdate({ ...component, properties: { ...component.properties, ...props } })}
         />
     );
 }
 
 interface PhysicsViewProps {
-    properties: { type?: 'dynamic' | 'fixed'; collider?: string };
+    properties: PhysicsProps;
     editMode?: boolean;
     children?: ReactNode;
     position?: [number, number, number];
@@ -56,22 +92,24 @@ interface PhysicsViewProps {
 }
 
 function PhysicsComponentView({ properties, children, position, rotation, scale, editMode }: PhysicsViewProps) {
-    const colliders = properties.collider || (properties.type === 'fixed' ? 'trimesh' : 'hull');
+    const { type, colliders, ...otherProps } = properties;
+    const colliderType = colliders || (type === 'fixed' ? 'trimesh' : 'hull');
 
     // 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?.join(',')}_${rotation?.join(',')}`
-        : `${properties.type || 'dynamic'}_${colliders}`;
+        ? `${type || 'dynamic'}_${colliderType}_${position?.join(',')}_${rotation?.join(',')}`
+        : `${type || 'dynamic'}_${colliderType}`;
 
     return (
         <RigidBody
             key={rbKey}
-            type={properties.type}
-            colliders={colliders as any}
+            type={type}
+            colliders={colliderType as any}
             position={position}
             rotation={rotation}
             scale={scale}
+            {...otherProps}
         >
             {children}
         </RigidBody>
@@ -83,7 +121,7 @@ const PhysicsComponent: Component = {
     Editor: PhysicsComponentEditor,
     View: PhysicsComponentView,
     nonComposable: true,
-    defaultProperties: { type: 'dynamic', collider: 'hull' }
+    defaultProperties: { type: 'dynamic', colliders: 'hull' }
 };
 
-export default PhysicsComponent;
+export default PhysicsComponent;

package/src/tools/prefabeditor/components/index.ts

@@ -4,6 +4,7 @@ import MaterialComponent from './MaterialComponent';
 import PhysicsComponent from './PhysicsComponent';
 import SpotLightComponent from './SpotLightComponent';
 import DirectionalLightComponent from './DirectionalLightComponent';
+import AmbientLightComponent from './AmbientLightComponent';
 import ModelComponent from './ModelComponent';
 import TextComponent from './TextComponent';
 
@@ -14,6 +15,7 @@ export default [
     PhysicsComponent,
     SpotLightComponent,
     DirectionalLightComponent,
+    AmbientLightComponent,
     ModelComponent,
     TextComponent
 ];

package/src/tools/prefabeditor/types.ts

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