react-three-game 0.0.18 → 0.0.19

package/.github/copilot-instructions.md

@@ -1,207 +1,78 @@
 # react-three-game - AI Coding Agent Instructions
 
-## Project Mission
-The **first 3D game engine designed for AI-native development**. Everything is JSON-serializable prefabs that AI agents can generate, modify, and compose without writing imperative code. Think Unity's component system meets React's declarative paradigm.
+## Project Overview
+AI-native 3D game engine where **scenes are JSON prefabs**. Unity-like GameObject+Component architecture built on React Three Fiber + WebGPU.
 
-## Why This Exists (Critical Context)
-Traditional 3D engines (Unity, Unreal, Three.js) require imperative code that's hard for AI to generate reliably. We solve this by making **everything pure data structures**:
-- ✅ Entire scenes are JSON objects
-- ✅ Components are registered modules with Editor + View separation  
-- ✅ Visual prefab editor exports versionable JSON
-- ✅ No manual scene graph manipulation required
+## Monorepo Structure
+- **`/src`** → Library source, builds to `/dist`, published as `react-three-game`
+- **`/docs`** → Next.js 16 site, imports library via `"react-three-game": "file:.."`
+- **`npm run dev`** → Runs `tsc --watch` + Next.js concurrently (hot reload works)
 
-## Architecture
-
-### Dual-Structure Monorepo
-- **`/src`**: Library source (TypeScript) → builds to `/dist` → published as `react-three-game` npm package
-- **`/docs`**: Next.js 16 documentation site that imports library via `"react-three-game": "file:.."` in package.json
-- Development command: `npm run dev` (runs `tsc --watch` + Next.js dev server concurrently via `concurrently`)
-- **Hot reload works**: Changes to `/src` trigger rebuild → docs site sees updates
-
-### Component-Based Prefab System
-The core innovation is a **GameObject + Component** architecture similar to Unity/Unreal:
-
-```typescript
-// Prefab JSON structure (see src/tools/prefabeditor/samples/*.json)
-{
-  "id": "prefab-1",
-  "root": {
-    "id": "root",
-    "enabled": true,
-    "visible": true,
-    "components": {
-      "transform": { type: "Transform", properties: { position: [0,0,0], rotation: [0,0,0], scale: [1,1,1] } },
-      "geometry": { type: "Geometry", properties: { geometryType: "box", args: [1,1,1] } },
-      "material": { type: "Material", properties: { color: "#ffffff" } },
-      "physics": { type: "Physics", properties: { type: "dynamic" } }
-    },
-    "children": [ /* recursive GameObject[] */ ]
-  }
-}
-```
-
-**AI agents can generate this entire structure from natural language prompts.**
-
-### Component Registry Pattern (`src/tools/prefabeditor/components/`)
-Every component implements:
+## Prefab JSON Schema
 ```typescript
-interface Component {
-  name: string;
-  Editor: FC<{ component: any; onUpdate: (newComp: any) => void }>;  // Inspector UI
-  View?: FC<any>;  // Three.js runtime renderer
-  defaultProperties: any;
+// See docs/app/samples/*.json for examples
+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[];
 }
 ```
+**Transforms are LOCAL** (parent-relative). Rotations in radians. Colors as CSS strings.
 
-Register in `components/index.ts` to make available in editor. Examples:
-- **TransformComponent**: Position/rotation/scale (no View - handled by group wrapper)
-- **PhysicsComponent**: Wraps children in `<RigidBody>` from @react-three/rapier (only in play mode)
-- **MaterialComponent**: Renders as `<meshStandardNodeMaterial>` with texture support
-- **ModelComponent**: Loads GLB/FBX via `modelLoader.ts`, supports instancing
-
-### World Matrix Math (CRITICAL)
-`PrefabRoot.tsx` maintains **parent-relative transforms** but uses **world matrices** for TransformControls:
-- Each `GameObjectRenderer` computes `worldMatrix = parentMatrix * localMatrix`
-- On transform drag: extract world matrix → compute parent inverse → derive new local transform
-- Helper: `computeParentWorldMatrix(root, targetId)` traverses tree to get parent's world matrix
-- **Never directly set world transforms in prefab JSON** - always store local transforms
-
-### Instancing System (`InstanceProvider.tsx`)
-Optimizes rendering of repeated models:
-1. `GameInstanceProvider` flattens all model meshes into `flatMeshes` map
-2. `GameInstance` component registers instance data (position/rotation/scale)
-3. Provider renders once per unique mesh using `<Merged>` from drei + `<InstancedRigidBodies>`
-4. Toggled by `model.properties.instanced = true` in prefab JSON
-5. Physics instances use world-space transforms (not local)
-
-## Key Files & Patterns
-
-### `src/index.ts` - Library Exports
-Main entry point for published package. When adding new features, export them here:
-```typescript
-export { default as GameCanvas } from './shared/GameCanvas';
-export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
-export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
-export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
-// Add new exports as features are developed
-```
-
-### `PrefabEditor.tsx` - Main Editor Wrapper
-- Manages edit/play mode toggle (pauses Rapier physics in edit mode)
-- Handles JSON import/export via file input
-- Renders `<EditorUI>` (inspector + tree) and `<PrefabRoot>` (scene renderer)
-
-### `PrefabRoot.tsx` - Recursive Scene Renderer
-Three rendering paths:
-1. **Instanced nodes**: Short-circuit to `<GameInstance>` (world-space, terminal node)
-2. **Model nodes**: Render as `<primitive object={clonedModel}>` with material override
-3. **Geometry nodes**: Render as `<mesh>` with geometry + material components
-- Always wrap in physics if component exists (except edit mode)
-- Children always use relative transforms in `<group>`
-
-### `EditorUI.tsx` + `EditorTree.tsx`
-- Tree view: Drag-to-reorder via pointer events (updates parent's children array)
-- Inspector: Dynamically renders component editors from registry
-- Transform modes: T/R/S keyboard shortcuts handled in PrefabEditor
-
-### `GameCanvas.tsx` - WebGPU Renderer Wrapper
-Uses Three.js WebGPU renderer (not WebGL):
-```tsx
-<Canvas gl={async ({ canvas }) => {
-  const renderer = new WebGPURenderer({ canvas, shadowMap: true });
-  await renderer.init(); // MUST await initialization
-  return renderer;
-}}>
-```
-**Material nodes**: Use `MeshStandardNodeMaterial` not `MeshStandardMaterial` (extends for node materials)
-
-## Development Workflows
-
-### Adding New Components
-1. Create `src/tools/prefabeditor/components/MyComponent.tsx`:
+## Component System (`src/tools/prefabeditor/components/`)
+Every component has `Editor` (inspector UI) + optional `View` (Three.js render):
 ```typescript
 const MyComponent: Component = {
-  name: 'MyComponent',
-  Editor: ({ component, onUpdate }) => { /* Inspector UI */ },
-  View: ({ properties, children }) => { /* Three.js render */ },
-  defaultProperties: { /* defaults */ }
+  name: 'MyComponent',  // TitleCase for registry, lowercase key in JSON
+  Editor: ({ component, onUpdate }) => <input onChange={e => onUpdate({ value: e.target.value })} />,
+  View: ({ properties, children }) => <group>{children}</group>,  // Wrapper components accept children
+  defaultProperties: { value: 0 }
 };
-export default MyComponent;
 ```
-2. Export in `components/index.ts`
-3. Auto-registers via `components.forEach(registerComponent)` in PrefabRoot
+**To add a component:** Create file → export from `components/index.ts` → auto-registered in `PrefabRoot.tsx`.
 
-### Testing in Docs Site
-1. Export new component from `src/index.ts`
-2. Run `npm run dev` (rebuilds library on save)
-3. Use in `docs/app/demo/page.tsx` or create new demo page
+## Key Files
+| 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/utils.ts` | Tree helpers: `findNode`, `updateNode`, `deleteNode`, `cloneNode` |
+| `src/shared/GameCanvas.tsx` | WebGPU renderer setup (use `MeshStandardNodeMaterial`) |
 
-### Model Loading
-- Supports GLB/GLTF (with Draco compression) and FBX
-- Models auto-load when `model.properties.filename` detected in prefab tree
-- Uses singleton loaders (don't recreate GLTFLoader instances)
-- Draco decoder from CDN: `https://www.gstatic.com/draco/v1/decoders/`
+## Critical Patterns
 
-## Common Patterns
-
-### Update Prefab Node
+### Tree Manipulation (Immutable)
 ```typescript
-function updatePrefabNode(root: GameObject, id: string, update: (node: GameObject) => GameObject): GameObject {
-  if (root.id === id) return update(root);
-  if (root.children) {
-    return { ...root, children: root.children.map(child => updatePrefabNode(child, id, update)) };
-  }
-  return root;
-}
+import { updateNode, findNode, deleteNode } from 'react-three-game';
+const newRoot = updateNode(root, nodeId, node => ({ ...node, components: { ...node.components, physics: {...} } }));
 ```
 
-### Three Object References
-- `objectRefs.current[gameObjectId]` stores Three.Object3D for each node
-- `registerRef(id, obj)` callback passed down hierarchy
-- Used by TransformControls to manipulate objects directly
-
-### Edit vs Play Mode
-- Edit mode: `<MapControls>`, `<TransformControls>`, physics paused
-- Play mode: Physics active, no editor UI
-- Components check `editMode` prop to conditionally wrap (e.g., PhysicsComponent only wraps in play)
+### WebGPU Materials
+Use node materials only: `MeshStandardNodeMaterial`, `MeshBasicNodeMaterial` (not `MeshStandardMaterial`).
 
-## Publishing
-```bash
-npm run build  # tsc → dist/
-npm publish --access public
-```
+### Physics Wrapping
+`PhysicsComponent.View` wraps children in `<RigidBody>` only when `editMode=false`. Edit mode pauses physics.
 
-## Conventions
-- **IDs**: Use UUIDs for GameObjects (important for tree operations)
-- **Transforms**: Always `[x, y, z]` number arrays, rotations in radians
-- **Colors**: Accept CSS strings (hex codes or named colors) → convert to THREE.Color
-- **Texture paths**: Relative to public root (e.g., `/textures/grid.png`)
-- **Component keys**: Lowercase in prefab JSON (`"transform"`, `"physics"`) but TitleCase for registry (`"Transform"`, `"Physics"`)
+### Model Instancing
+Set `model.properties.instanced = true` → uses `InstanceProvider.tsx` for batched rendering with physics.
 
-## Tech Stack
-- **React 19** + **TypeScript 5**
-- **@react-three/fiber** (React renderer for Three.js)
-- **@react-three/drei** (helpers: MapControls, TransformControls, Merged)
-- **@react-three/rapier** (physics via Rapier WASM)
-- **Three.js WebGPU** (cutting edge renderer, not WebGL)
-- **Next.js 16** (docs site only)
-- **Tailwind 4** (docs site styling)
+## Built-in Components
+`Transform`, `Geometry` (box/sphere/plane), `Material` (color/texture), `Physics` (dynamic/fixed), `Model` (GLB/FBX), `SpotLight`, `DirectionalLight`
 
-## Design Principles
-1. **AI-first**: Prefabs are JSON → LLMs can generate complete scenes
-2. **Zero boilerplate**: No manual Three.js object creation in user code
-3. **Component composition**: Mix physics + rendering + behavior via declarative components
-4. **Visual editing**: Prefab editor generates JSON that can be version controlled
-5. **Instancing by default**: Optimize repeated geometry automatically
+## Custom Components (User-space)
+See `docs/app/demo/editor/RotatorComponent.tsx` for runtime behavior example using `useFrame`. Register with `registerComponent()` before rendering `<PrefabEditor>`.
 
-## Coming Soon (Migration in Progress)
-These features exist in another repo and are being migrated:
-- **Input system**: Keyboard, gamepad, and touchscreen controls
-- **Multiplayer primitives**: WebRTC-based state synchronization (Trystero)
-- **Controller patterns**: First-person and third-person camera controllers
-- **Touch UI**: Virtual joystick and button components for mobile
+## Development Workflow
+1. **Edit library**: Modify `/src`, auto-rebuilds via `tsc --watch`
+2. **Test in docs**: Changes reflect at `http://localhost:3000`
+3. **Add sample prefabs**: `docs/app/samples/*.json`
+4. **Release**: `npm run release` (builds + publishes)
 
-When implementing these, maintain the same philosophy:
-- Controllers should work with prefab-based scenes
-- Input should be declarative (hook-based, not imperative event listeners)
-- Multiplayer state sync should serialize naturally with JSON prefabs
+## Conventions
+- Component keys: lowercase in JSON (`"transform"`), TitleCase in registry (`"Transform"`)
+- Asset paths: Relative to `/public` (e.g., `models/cars/taxi/model.glb`)
+- All Three.js renders must be inside `<GameCanvas>` (WebGPU init required)

package/README.md

@@ -1,279 +1,134 @@
 # react-three-game
 
-Component-based 3D game engine where everything is JSON. Built on React Three Fiber + WebGPU.
+JSON-first 3D game engine. React Three Fiber + WebGPU + Rapier Physics.
 
 ```bash
-npm i react-three-game @react-three/fiber three
+npm i react-three-game @react-three/fiber @react-three/rapier three
 ```
 
-[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
-[![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue.svg)](https://www.typescriptlang.org/)
-[![React](https://img.shields.io/badge/React-19-blue.svg)](https://react.dev/)
-
 ![Prefab Editor](assets/editor.gif)
 
-## Core Principle
-
-Scenes are JSON prefabs. Components are registered modules. Hierarchy is declarative.
+## Usage
 
 ```jsx
-  <PrefabRoot data={{
+import { Physics } from '@react-three/rapier';
+import { GameCanvas, PrefabRoot } from 'react-three-game';
+
+<GameCanvas>
+  <Physics>
+    <PrefabRoot data={{
       root: {
-          id: "cube",
-          components: {
-              transform: { type: "Transform", properties: { position: [0, 1, 0] } },
-              geometry: { type: "Geometry", properties: { geometryType: "box" } },
-              material: { type: "Material", properties: { color: "green" } },
+        id: "scene",
+        children: [
+          {
+            id: "ground",
+            components: {
+              transform: { type: "Transform", properties: { position: [0, 0, 0], rotation: [-1.57, 0, 0] } },
+              geometry: { type: "Geometry", properties: { geometryType: "plane", args: [50, 50] } },
+              material: { type: "Material", properties: { color: "#3a3" } },
+              physics: { type: "Physics", properties: { type: "fixed" } }
+            }
+          },
+          {
+            id: "ball",
+            components: {
+              transform: { type: "Transform", properties: { position: [0, 5, 0] } },
+              geometry: { type: "Geometry", properties: { geometryType: "sphere" } },
+              material: { type: "Material", properties: { color: "#f66" } },
               physics: { type: "Physics", properties: { type: "dynamic" } }
+            }
           }
+        ]
       }
-  }} />
-```
-
-## Quick Start
-
-```bash
-npm install react-three-game @react-three/fiber @react-three/rapier three
-```
-
-```jsx
-import { Physics } from '@react-three/rapier';
-import { GameCanvas, PrefabRoot } from 'react-three-game';
-
-export default function App() {
-  return (
-    <GameCanvas>
-      <Physics>
-        <ambientLight intensity={0.8} />
-        <PrefabRoot
-          data={{
-              id: "scene",
-              name: "scene",
-              root: {
-                  id: "root",
-                  children: [
-                      {
-                          id: "ground",
-                          components: {
-                              transform: { type: "Transform", properties: { position: [0, 0, 0], rotation: [-1.57, 0, 0] } },
-                              geometry: { type: "Geometry", properties: { geometryType: "plane", args: [50, 50] } },
-                              material: { type: "Material", properties: { color: "green" } },
-                              physics: { type: "Physics", properties: { type: "fixed" } }
-                          }
-                      },
-                      {
-                          id: "player",
-                          components: {
-                              transform: { type: "Transform", properties: { position: [0, 2, 0] } },
-                              geometry: { type: "Geometry", properties: { geometryType: "sphere" } },
-                              material: { type: "Material", properties: { color: "#ff6b6b" } },
-                              physics: { type: "Physics", properties: { type: "dynamic" } }
-                          }
-                      }
-                  ]
-              }
-          }}
-      />
-      </Physics>
-    </GameCanvas>
-  );
-}
+    }} />
+  </Physics>
+</GameCanvas>
 ```
 
-## GameObject Structure
+## GameObject Schema
 
 ```typescript
 interface GameObject {
   id: string;
   disabled?: boolean;
   hidden?: boolean;
-  components: {
-    transform?: TransformComponent;
-    geometry?: GeometryComponent;
-    material?: MaterialComponent;
-    physics?: PhysicsComponent;
-    model?: ModelComponent;
-  };
+  components?: Record<string, { type: string; properties: any }>;
   children?: GameObject[];
 }
 ```
 
-## Custom Components
-
-Extend the engine by registering your own components. Components have two parts:
-- **Editor**: UI for inspector panel (edit mode)
-- **View**: Three.js runtime renderer (play mode)
-
-### Component Interface
-
-```typescript
-import { Component } from 'react-three-game';
+## Built-in Components
 
-interface Component {
-  name: string;
-  Editor: FC<{ component: any; onUpdate: (newComp: any) => void }>;
-  View?: FC<{ properties: any; children?: React.ReactNode }>;
-  defaultProperties: any;
-}
-```
+| Component | Key Properties |
+|-----------|----------------|
+| 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 |
+| Model | `filename` (GLB/FBX path), `instanced?` for GPU batching |
+| SpotLight | `color`, `intensity`, `angle`, `penumbra` |
 
-### Example: Rotator Component
+## Custom Components
 
 ```tsx
 import { Component, registerComponent } from 'react-three-game';
 import { useFrame } from '@react-three/fiber';
-import { useRef } from 'react';
 
-const RotatorComponent: Component = {
+const Rotator: Component = {
   name: 'Rotator',
-  
   Editor: ({ component, onUpdate }) => (
-    <div>
-      <label>Speed</label>
-      <input 
-        type="number"
-        value={component.properties.speed ?? 1.0}
-        onChange={e => onUpdate({ ...component.properties, speed: parseFloat(e.target.value) })}
-      />
-      <label>Axis</label>
-      <select 
-        value={component.properties.axis ?? 'y'}
-        onChange={e => onUpdate({ ...component.properties, axis: e.target.value })}
-      >
-        <option value="x">X</option>
-        <option value="y">Y</option>
-        <option value="z">Z</option>
-      </select>
-    </div>
+    <input type="number" value={component.properties.speed}
+      onChange={e => onUpdate({ speed: +e.target.value })} />
   ),
-  
   View: ({ properties, children }) => {
-    const ref = useRef();
-    const speed = properties.speed ?? 1.0;
-    const axis = properties.axis ?? 'y';
-    
-    useFrame((state, delta) => {
-      if (ref.current) {
-        ref.current.rotation[axis] += delta * speed;
-      }
-    });
-    
+    const ref = useRef<Group>(null);
+    useFrame((_, dt) => { ref.current!.rotation.y += dt * properties.speed });
     return <group ref={ref}>{children}</group>;
   },
-  
-  defaultProperties: { speed: 1.0, axis: 'y' }
+  defaultProperties: { speed: 1 }
 };
 
-// Register before using PrefabEditor
-registerComponent(RotatorComponent);
-```
-
-### Usage in Prefab JSON
-
-```json
-{
-  "id": "spinning-cube",
-  "components": {
-    "transform": { "type": "Transform", "properties": { "position": [0, 1, 0] } },
-    "geometry": { "type": "Geometry", "properties": { "geometryType": "box" } },
-    "material": { "type": "Material", "properties": { "color": "#ff6b6b" } },
-    "rotator": { "type": "Rotator", "properties": { "speed": 2.0, "axis": "y" } }
-  }
-}
+registerComponent(Rotator); // before rendering PrefabEditor
 ```
 
-### Wrapper vs Leaf Components
-
-**Wrapper components** (accept `children`) wrap the rendered content:
-- Use for behaviors that need to manipulate the scene graph (animations, controllers)
-- Example: Rotator wraps mesh to apply rotation
-
-**Leaf components** (no `children`) render as siblings:
-- Use for standalone effects (lights, particles, audio sources)
-- Example: SpotLight renders a `<spotLight>` element
-
-The engine automatically detects component type by checking if `View` accepts `children` prop.
-
-## Built-in Components
-
-| Component | Properties |
-|-----------|-----------|
-| **Transform** | `position: [x,y,z]`, `rotation: [x,y,z]`, `scale: [x,y,z]` |
-| **Geometry** | `geometryType: "box"\|"sphere"\|"plane"\|"cylinder"`, `args: number[]` |
-| **Material** | `color: string`, `texture?: string`, `metalness?: number`, `roughness?: number` |
-| **Physics** | `type: "dynamic"\|"fixed"` |
-| **Model** | `filename: string`, `instanced?: boolean` |
-| **SpotLight** | `color: string`, `intensity: number`, `angle: number`, `penumbra: number` |
+**Wrapper** components accept `children` (animations, controllers). **Leaf** components don't (lights, particles).
 
-## Prefab Editor
+## Visual Editor
 
 ```jsx
 import { PrefabEditor } from 'react-three-game';
-
-export default function EditorPage() {
-  return <PrefabEditor />;
-}
+<PrefabEditor initialPrefab={sceneData} onPrefabChange={setSceneData} />
 ```
 
-Transform gizmos (T/R/S keys), drag-to-reorder tree, import/export JSON, edit/play toggle.
-
-## Implementation Details
+Keys: **T**ranslate / **R**otate / **S**cale. Drag tree nodes to reparent. Import/export JSON.
 
-### Transform Hierarchy
-- Local transforms stored in JSON (relative to parent)
-- World transforms computed at runtime via matrix multiplication
-- TransformControls extract world matrix → compute parent inverse → derive new local transform
+## Internals
 
-### GPU Instancing
-Enable with `model.properties.instanced = true` for optimized repeated geometry. Uses drei's `<Merged>` + `<InstancedRigidBodies>`.
+- **Transforms**: Local in JSON, world computed via matrix multiplication
+- **Instancing**: `model.properties.instanced = true` → `<Merged>` + `<InstancedRigidBodies>`
+- **Models**: GLB/GLTF (Draco) and FBX auto-load from `filename`
 
-### Model Loading
-Supports GLB/GLTF (with Draco compression) and FBX. Models auto-load when `model.properties.filename` is detected.
+## Tree Utilities
 
-## Patterns
-
-### Load External Prefabs
-```jsx
-import levelData from './prefabs/arena.json';
-<PrefabRoot data={levelData} />
-```
-
-### Update Prefab Nodes
 ```typescript
-function updatePrefabNode(root: GameObject, id: string, update: (node: GameObject) => GameObject): GameObject {
-  if (root.id === id) return update(root);
-  if (root.children) {
-    return { ...root, children: root.children.map(child => updatePrefabNode(child, id, update)) };
-  }
-  return root;
-}
+import { findNode, updateNode, deleteNode, cloneNode } from 'react-three-game';
+
+const updated = updateNode(root, nodeId, n => ({ ...n, disabled: true }));
 ```
 
 ## Development
 
 ```bash
-git clone https://github.com/prnthh/react-three-game.git
-cd react-three-game
-npm install
-npm run dev     # tsc --watch + Next.js docs
-npm run build   # TypeScript → /dist
-npm publish     # publish to npm
+npm run dev     # tsc --watch + docs site (localhost:3000)
+npm run build   # → /dist
+npm run release # build + publish
 ```
 
-Project structure:
 ```
-/src              → library source
-  /shared         → GameCanvas
-  /tools
-    /prefabeditor → editor + PrefabRoot
-/docs             → Next.js site
-  /app            → demo pages
+/src                 → library (published)
+/docs                → Next.js demo site
 ```
 
-## Tech Stack
-
-React 19 • Three.js r181 • TypeScript 5 • WebGPU • Rapier Physics
-
-## License
+---
 
-MIT © [prnth](https://github.com/prnthh)
+React 19 · Three.js WebGPU · TypeScript 5 · Rapier WASM · MIT License

package/dist/index.d.ts

@@ -5,5 +5,7 @@ export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
 export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
 export type { Component } from './tools/prefabeditor/components/ComponentRegistry';
+export * as editorStyles from './tools/prefabeditor/styles';
+export * from './tools/prefabeditor/utils';
 export * from './helpers';
-export type { Prefab, GameObject } from './tools/prefabeditor/types';
+export type { Prefab, GameObject, ComponentData } from './tools/prefabeditor/types';

package/dist/index.js

@@ -6,5 +6,8 @@ export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
 export { TextureListViewer, ModelListViewer, SoundListViewer, SharedCanvas, } from './tools/assetviewer/page';
 // Component Registry
 export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
+// Editor Styles & Utils
+export * as editorStyles from './tools/prefabeditor/styles';
+export * from './tools/prefabeditor/utils';
 // Helpers
 export * from './helpers';

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

@@ -1,10 +1,8 @@
 import { Dispatch, SetStateAction } from 'react';
 import { Prefab } from "./types";
-interface EditorTreeProps {
+export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId }: {
     prefabData?: Prefab;
     setPrefabData?: Dispatch<SetStateAction<Prefab>>;
     selectedId: string | null;
     setSelectedId: Dispatch<SetStateAction<string | null>>;
-}
-export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId }: EditorTreeProps): import("react/jsx-runtime").JSX.Element | null;
-export {};
+}): import("react/jsx-runtime").JSX.Element | null;