react-three-game 0.0.46 → 0.0.48

package/.github/copilot-instructions.md

@@ -61,7 +61,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/.gitmodules

@@ -0,0 +1,3 @@
+[submodule "react-three-game-skill"]
+	path = react-three-game-skill
+	url = https://github.com/prnthh/react-three-game-skill

package/README.md

@@ -9,6 +9,11 @@ npm i react-three-game @react-three/fiber @react-three/rapier three
 ![Prefab Editor](assets/editor.gif)
 ![Architecture](assets/architecture.png)
 
+## Agent Skill
+```bash
+npx skills add https://github.com/prnthh/react-three-game-skill
+```
+
 ## Usage
 
 ```jsx

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
 export { FieldRenderer, Input, Label, Vector3Input, ColorInput, StringInput, BooleanInput, SelectInput, } from './tools/prefabeditor/components/Input';
 export * from './tools/prefabeditor/utils';
+export type { ExportGLBOptions } from './tools/prefabeditor/utils';
 export type { PrefabEditorRef } from './tools/prefabeditor/PrefabEditor';
 export type { PrefabRootRef } from './tools/prefabeditor/PrefabRoot';
 export type { Component } from './tools/prefabeditor/components/ComponentRegistry';

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -6,7 +6,7 @@ import { Physics } from "@react-three/rapier";
 import EditorUI from "./EditorUI";
 import { base, toolbar } from "./styles";
 import { EditorContext } from "./EditorContext";
-import { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter.js";
+import { exportGLB } from "./utils";
 const DEFAULT_PREFAB = {
     id: "prefab-default",
     name: "New Prefab",
@@ -102,18 +102,9 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, onPrefabChange, chil
         const sceneRoot = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.root;
         if (!sceneRoot)
             return;
-        const exporter = new GLTFExporter();
-        exporter.parse(sceneRoot, (result) => {
-            const blob = new Blob([result], { type: 'application/octet-stream' });
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = `${loadedPrefab.name || 'scene'}.glb`;
-            a.click();
-            URL.revokeObjectURL(url);
-        }, (error) => {
-            console.error('Error exporting GLB:', error);
-        }, { binary: true });
+        exportGLB(sceneRoot, {
+            filename: `${loadedPrefab.name || 'scene'}.glb`
+        });
     };
     useEffect(() => {
         const canvas = document.querySelector('canvas');

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/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/utils.d.ts

@@ -1,8 +1,28 @@
 import { GameObject, Prefab } from "./types";
+import { Object3D } 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;
 /** Load a prefab from JSON file */
 export declare function loadJson(): Promise<Prefab | undefined>;
+/**
+ * Export a Three.js scene or object to GLB format
+ * @param sceneRoot - The Three.js Object3D to export
+ * @param options - Export options
+ * @returns Promise that resolves when export is complete
+ */
+export declare function exportGLB(sceneRoot: Object3D, options?: ExportGLBOptions): Promise<ArrayBuffer | object>;
+/**
+ * Export a Three.js scene to GLB and return the ArrayBuffer without downloading
+ * @param sceneRoot - The Three.js Object3D to export
+ * @returns Promise that resolves with the GLB data as ArrayBuffer
+ */
+export declare function exportGLBData(sceneRoot: Object3D): Promise<ArrayBuffer>;
 /** 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

@@ -1,3 +1,13 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
 /** Save a prefab as JSON file */
 export function saveJson(data, filename) {
     const a = document.createElement('a');
@@ -34,6 +44,47 @@ export function loadJson() {
         input.click();
     });
 }
+/**
+ * Export a Three.js scene or object to GLB format
+ * @param sceneRoot - The Three.js Object3D to export
+ * @param options - Export options
+ * @returns Promise that resolves when export is complete
+ */
+export function exportGLB(sceneRoot, options = {}) {
+    const { filename = 'scene.glb', binary = true, onComplete, onError } = options;
+    return new Promise((resolve, reject) => {
+        const exporter = new GLTFExporter();
+        exporter.parse(sceneRoot, (result) => {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(result);
+            resolve(result);
+            // Trigger download if filename is provided
+            if (filename) {
+                const blob = new Blob([result], { type: binary ? 'application/octet-stream' : 'application/json' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = filename;
+                a.click();
+                URL.revokeObjectURL(url);
+            }
+        }, (error) => {
+            console.error('Error exporting GLB:', error);
+            onError === null || onError === void 0 ? void 0 : onError(error);
+            reject(error);
+        }, { binary });
+    });
+}
+/**
+ * Export a Three.js scene to GLB and return the ArrayBuffer without downloading
+ * @param sceneRoot - The Three.js Object3D to export
+ * @returns Promise that resolves with the GLB data as ArrayBuffer
+ */
+export function exportGLBData(sceneRoot) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const result = yield exportGLB(sceneRoot, { filename: '', binary: true });
+        return result;
+    });
+}
 /** 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.46",
+  "version": "0.0.48",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/react-three-game-skill/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

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

@@ -0,0 +1 @@
+Agent skill for [react-three-game](https://github.com/prnthh/react-three-game)

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

@@ -0,0 +1,394 @@
+---
+name: react-three-game
+description: react-three-game, a JSON-first 3D game engine built on React Three Fiber, WebGPU, and Rapier Physics.
+---
+
+# react-three-game
+
+Instructions for the agent to follow when this skill is activated.
+
+## When to use
+
+generate 3D scenes, games and physics simulations in React.
+
+## Agent Workflow: JSON → GLB
+
+Agents can programmatically generate 3D assets:
+
+1. Create a JSON prefab following the GameObject schema
+2. Load it in `PrefabEditor` to render the Three.js scene
+3. Export the scene to GLB format using `exportGLB` or `exportGLBData`
+
+```tsx
+import { useRef, useEffect } from 'react';
+import { PrefabEditor, exportGLBData } from 'react-three-game';
+import type { PrefabEditorRef } from 'react-three-game';
+
+const jsonPrefab = {
+  root: {
+    id: "scene",
+    children: [
+      {
+        id: "cube",
+        components: {
+          transform: { type: "Transform", properties: { position: [0, 0, 0] } },
+          geometry: { type: "Geometry", properties: { geometryType: "box", args: [1, 1, 1] } },
+          material: { type: "Material", properties: { color: "#ff0000" } }
+        }
+      }
+    ]
+  }
+};
+
+function AgentExporter() {
+  const editorRef = useRef<PrefabEditorRef>(null);
+
+  useEffect(() => {
+    const timer = setTimeout(async () => {
+      const sceneRoot = editorRef.current?.rootRef.current?.root;
+      if (!sceneRoot) return;
+      
+      const glbData = await exportGLBData(sceneRoot);
+      // glbData is an ArrayBuffer ready for upload/storage
+    }, 1000); // Wait for scene to render
+    
+    return () => clearTimeout(timer);
+  }, []);
+
+  return <PrefabEditor ref={editorRef} initialPrefab={jsonPrefab} />;
+}
+```
+
+## 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:
+
+```typescript
+interface GameObject {
+  id: string;
+  disabled?: boolean;
+  hidden?: boolean;
+  components?: Record<string, { type: string; properties: any }>;
+  children?: GameObject[];
+}
+```
+
+### Prefab JSON Format
+
+Scenes are defined as JSON prefabs with a root node containing children:
+
+```json
+{
+  "root": {
+    "id": "scene",
+    "children": [
+      {
+        "id": "my-object",
+        "components": {
+          "transform": { "type": "Transform", "properties": { "position": [0, 0, 0] } },
+          "geometry": { "type": "Geometry", "properties": { "geometryType": "box" } },
+          "material": { "type": "Material", "properties": { "color": "#ff0000" } }
+        }
+      }
+    ]
+  }
+}
+```
+
+## Built-in Components
+
+| Component | Type | Key Properties |
+|-----------|------|----------------|
+| 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" |
+| 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 |
+|--------------|------------|
+| `box` | `[width, height, depth]` |
+| `sphere` | `[radius, widthSegments, heightSegments]` |
+| `plane` | `[width, height]` |
+| `cylinder` | `[radiusTop, radiusBottom, height, radialSegments]` |
+
+### Material Textures
+
+```json
+{
+  "material": {
+    "type": "Material",
+    "properties": {
+      "color": "white",
+      "texture": "/textures/floor.png",
+      "repeat": true,
+      "repeatCount": [4, 4]
+    }
+  }
+}
+```
+
+### Rotations
+
+Use radians: `1.57` = 90°, `3.14` = 180°, `-1.57` = -90°
+
+## Common Patterns
+
+### Usage Modes
+
+**GameCanvas + PrefabRoot**: Production gameplay. Requires explicit `<Physics>` wrapper. Physics always active. Can compose with other R3F components. For headless mode, use `<PrefabRoot>` without GameCanvas.
+
+```jsx
+import { Physics } from '@react-three/rapier';
+import { GameCanvas, PrefabRoot } from 'react-three-game';
+
+<GameCanvas>
+  <Physics>
+    <PrefabRoot data={prefabData} />
+  </Physics>
+</GameCanvas>
+```
+
+**PrefabEditor**: Level editors, scene authoring, prototyping. Includes canvas, physics, UI. Physics activates in play mode only.
+
+```jsx
+import { PrefabEditor } from 'react-three-game';
+
+<PrefabEditor initialPrefab={prefabData} />
+```
+
+### Tree Utilities
+
+```typescript
+import { updateNodeById, findNode, deleteNode, cloneNode, exportGLBData } from 'react-three-game';
+
+const updated = updateNodeById(root, nodeId, node => ({ ...node, disabled: true }));
+const node = findNode(root, nodeId);
+const afterDelete = deleteNode(root, nodeId);
+const cloned = cloneNode(node);
+const glbData = await exportGLBData(sceneRoot);
+```
+
+## Level Patterns
+
+### Floor
+
+```json
+{
+  "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": { "texture": "/textures/floor.png", "repeat": true, "repeatCount": [20, 20] } },
+    "physics": { "type": "Physics", "properties": { "type": "fixed" } }
+  }
+}
+```
+
+### Platform
+
+```json
+{
+  "id": "platform",
+  "components": {
+    "transform": { "type": "Transform", "properties": { "position": [-8, 2, -5] } },
+    "geometry": { "type": "Geometry", "properties": { "geometryType": "box", "args": [6, 0.5, 4] } },
+    "physics": { "type": "Physics", "properties": { "type": "fixed" } }
+  }
+}
+```
+
+### Ramp
+
+```json
+{
+  "id": "ramp",
+  "components": {
+    "transform": { "type": "Transform", "properties": { "position": [-12, 1, -5], "rotation": [0, 0, 0.3] } },
+    "geometry": { "type": "Geometry", "properties": { "geometryType": "box", "args": [5, 0.3, 3] } },
+    "physics": { "type": "Physics", "properties": { "type": "fixed" } }
+  }
+}
+```
+
+### Wall Pattern
+### Wall
+
+```json
+{
+  "id": "wall",
+  "components": {
+    "transform": { "type": "Transform", "properties": { "position": [0, 3, -20] } },
+    "geometry": { "type": "Geometry", "properties": { "geometryType": "box", "args": [40, 7, 1] } },
+    "physics": { "type": "Physics", "properties": { "type": "fixed" } }
+  }
+}
+```
+
+### Lighting
+
+```json
+[
+  { "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 } } } }
+]
+```
+
+### Text
+
+```json
+{
+  "id": "text",
+  "components": {
+    "transform": { "type": "Transform", "properties": { "position": [0, 3, 0] } },
+    "text": { "type": "Text", "properties": { "text": "Welcome", "font": "/fonts/font.ttf", "size": 1, "depth": 0.1 } }
+  }
+}
+```
+
+### Model
+
+```json
+{
+  "id": "model",
+  "components": {
+    "transform": { "type": "Transform", "properties": { "position": [0, 0, 0], "scale": [1.5, 1.5, 1.5] } },
+    "model": { "type": "Model", "properties": { "filename": "/models/tree.glb" } }
+  }
+}
+```
+
+## Editor
+
+### Basic Usage
+
+```jsx
+import { PrefabEditor } from 'react-three-game';
+
+<PrefabEditor initialPrefab={sceneData} onPrefabChange={setSceneData} />
+```
+
+Keyboard shortcuts: **T** (Translate), **R** (Rotate), **S** (Scale)
+
+### Programmatic Updates
+
+```jsx
+import { useRef } from 'react';
+import { PrefabEditor, updateNodeById } from 'react-three-game';
+import type { PrefabEditorRef } from 'react-three-game';
+
+function Scene() {
+  const editorRef = useRef<PrefabEditorRef>(null);
+
+  const moveBall = () => {
+    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: [5, 0, 0] }
+        }
+      }
+    }));
+    editorRef.current!.setPrefab({ ...prefab, root: newRoot });
+  };
+
+  return <PrefabEditor ref={editorRef} initialPrefab={sceneData} />;
+}
+```
+
+**PrefabEditorRef**: `prefab`, `setPrefab()`, `screenshot()`, `exportGLB()`, `rootRef`
+
+### GLB Export
+
+```tsx
+import { exportGLBData } from 'react-three-game';
+
+const glbData = await exportGLBData(editorRef.current!.rootRef.current!.root);
+```
+
+### Runtime Animation
+
+```tsx
+import { useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import { PrefabEditor, updateNodeById } from "react-three-game";
+
+function Animator({ editorRef }) {
+  useFrame(() => {
+    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;
+}
+
+function Scene() {
+  const editorRef = useRef(null);
+  return (
+    <PrefabEditor ref={editorRef} initialPrefab={data}>
+      <Animator editorRef={editorRef} />
+    </PrefabEditor>
+  );
+}
+```
+
+### Custom Component
+
+```tsx
+import { Component, registerComponent, FieldRenderer } from 'react-three-game';
+
+const MyComponent: Component = {
+  name: 'MyComponent',
+  Editor: ({ component, onUpdate }) => (
+    <FieldRenderer fields={[{ name: 'speed', type: 'number', step: 0.1 }]} values={component.properties} onChange={onUpdate} />
+  ),
+  View: ({ properties, children }) => <group>{children}</group>,
+  defaultProperties: { speed: 1 }
+};
+
+registerComponent(MyComponent);
+```
+
+**Field types**: `vector3`, `number`, `string`, `color`, `boolean`, `select`, `custom`
+

package/src/index.ts

@@ -26,6 +26,7 @@ export {
 
 // Prefab Editor - Styles & Utils
 export * from './tools/prefabeditor/utils';
+export type { ExportGLBOptions } from './tools/prefabeditor/utils';
 
 // Prefab Editor - Types
 export type { PrefabEditorRef } from './tools/prefabeditor/PrefabEditor';