react-three-game 0.0.83 → 0.0.85

package/README.md

@@ -110,6 +110,38 @@ That means a saved scene is just a prefab, and the same prefab can be:
 * rendered directly with `PrefabRoot`
 * loaded inside another scene as reusable content
 
+`PrefabRoot` keeps the rendering model narrow and compositional:
+
+* `Transform` is the renderer-owned outer transform
+* `Geometry` or `BufferGeometry` + `Material` become the primary mesh content
+* non-instanced `Model` becomes the node's primary content
+* `Physics` is a renderer-owned outer wrapper
+* every other component `View` wraps the current subtree
+
+Custom component `View`s use normal React Three Fiber composition with `children`.
+
+For agent-authored custom meshes, use `BufferGeometry` with flat numeric arrays:
+
+```json
+{
+  "id": "triangle",
+  "components": {
+    "bufferGeometry": {
+      "type": "BufferGeometry",
+      "properties": {
+        "positions": [0, 0, 0, 1, 0, 0, 0, 1, 0],
+        "indices": [0, 1, 2],
+        "computeVertexNormals": true
+      }
+    },
+    "material": {
+      "type": "Material",
+      "properties": { "color": "#ff8844" }
+    }
+  }
+}
+```
+
 ## Prefab Format
 
 ```ts
@@ -131,7 +163,7 @@ interface GameObject {
 
 ## Runtime Mutation
 
-When you need to change the live world, use the `Scene` API from `PrefabEditorRef`.
+Use the `Scene` API from `PrefabEditorRef` for authored state changes that should stay in prefab data.
 
 ```tsx
 import { useEffect, useRef } from "react";
@@ -153,21 +185,59 @@ function RaiseBall() {
 }
 ```
 
+Batch related entity changes so they flush as one store revision:
+
+```tsx
+scene.batch(() => {
+  scene.find("orb1")?.getComponent("Transform")?.set("position", [1, 0, 0]);
+  scene.find("orb2")?.getComponent("Transform")?.set("position", [-1, 0, 0]);
+});
+```
+
+Define a component runtime factory with `create(ctx)` for hot runtime behavior that mutates the live Three.js object directly:
+
+```tsx
+import type { Component } from "react-three-game";
+
+const Rotator: Component = {
+  name: "Rotator",
+  Editor: () => null,
+  defaultProperties: { speed: 1 },
+  create(ctx) {
+    return {
+      update(dt) {
+        const speed = ctx.component.get<number>("speed") ?? 1;
+        ctx.object.rotation.y += dt * speed;
+      },
+    };
+  },
+};
+```
+
+`View` handles composition and rendering. `create(ctx)` handles imperative runtime behavior.
+
 ## Useful Exports
 
 * `GameCanvas`
 * `PrefabRoot`
 * `PrefabEditor`
+* `PrefabEditorMode`
 * `Prefab`
 * `GameObject`
 * `Scene`
 * `Entity`
 * `EntityComponent`
 * `registerComponent`
+* `createPrefabStore`
+* `usePrefabStoreApi`
+* `useAssetRuntime()` / `useEntityRuntime()`
+* `useEntityObjectRef()` / `useEntityRigidBodyRef()`
 * `ground(...)`
 * `loadJson()` / `saveJson()`
 * `loadModel()` / `loadTexture()`
-* `exportGLB()` / `exportGLBData()`
+* `loadSound()` / `loadFiles()`
+* `exportGLB()`
+* `computeParentWorldMatrix()`
 
 ## Development
 

package/dist/index.d.ts

@@ -20,12 +20,16 @@ export { createModelNode, createImageNode, } from './tools/prefabeditor/prefab';
 export type { PrefabEditorProps, PrefabEditorRef, } from './tools/prefabeditor/PrefabEditor';
 export type { SpawnOptions, Scene, Entity, EntityComponent, EntityData, EntityUpdate, PropertyPath, SceneUpdates, } from './tools/prefabeditor/scene';
 export type { PrefabRootProps } from './tools/prefabeditor/PrefabRoot';
-export type { AssetRuntime, EntityRuntime, LiveObjectRef, LiveRigidBodyRef } from './tools/prefabeditor/runtimeContext';
-export { useAssetRuntime, useEntityRuntime, useEntityObjectRef, useEntityRigidBodyRef } from './tools/prefabeditor/runtimeContext';
+export type { AssetRuntime, EntityRuntime, LiveObjectRef, LiveRigidBodyRef } from './tools/prefabeditor/runtime';
+export { useAssetRuntime, useEntityRuntime, useEntityObjectRef, useEntityRigidBodyRef } from './tools/prefabeditor/runtime';
+export type { ComponentInstance, ComponentRuntimeContext } from './tools/prefabeditor/runtime';
 export type { Component, ComponentViewProps } from './tools/prefabeditor/components/ComponentRegistry';
 export type { FieldDefinition, FieldType } from './tools/prefabeditor/components/Input';
+export { MaterialOverridesProvider, useMaterialOverrides } from './tools/prefabeditor/components/MaterialComponent';
+export type { MaterialOverrides } from './tools/prefabeditor/components/MaterialComponent';
 export type { Prefab, GameObject, ComponentData } from './tools/prefabeditor/types';
 export { findComponent, findComponentEntry, hasComponent } from './tools/prefabeditor/types';
+export { float, positionLocal, sin, time, uniform, vec3, } from 'three/tsl';
 export { gameEvents, useGameEvent, usePhysicsEvent, useClickEvent, getEntityIdFromRigidBody } from './tools/prefabeditor/GameEvents';
 export type { GameEventType, GameEventMap, GameEventPayload, PhysicsEventType, InteractionEventType, PhysicsEventPayload, ClickEventPayload } from './tools/prefabeditor/GameEvents';
 export { loadFiles } from './tools/dragdrop/DragDropLoader';

package/dist/index.js

@@ -19,8 +19,10 @@ export { FieldRenderer, FieldGroup, ListEditor, Label, Vector3Input, Vector3Fiel
 // Prefab Editor - Utils
 export { loadJson, saveJson, exportGLB, exportGLBData, regenerateIds, computeParentWorldMatrix, } from './tools/prefabeditor/utils';
 export { createModelNode, createImageNode, } from './tools/prefabeditor/prefab';
-export { useAssetRuntime, useEntityRuntime, useEntityObjectRef, useEntityRigidBodyRef } from './tools/prefabeditor/runtimeContext';
+export { useAssetRuntime, useEntityRuntime, useEntityObjectRef, useEntityRigidBodyRef } from './tools/prefabeditor/runtime';
+export { MaterialOverridesProvider, useMaterialOverrides } from './tools/prefabeditor/components/MaterialComponent';
 export { findComponent, findComponentEntry, hasComponent } from './tools/prefabeditor/types';
+export { float, positionLocal, sin, time, uniform, vec3, } from 'three/tsl';
 // Game Events (physics + custom events)
 export { gameEvents, useGameEvent, usePhysicsEvent, useClickEvent, getEntityIdFromRigidBody } from './tools/prefabeditor/GameEvents';
 // Asset Loading

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -13,6 +13,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useHelper } from "@react-three/drei";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { BoxHelper, Euler, Matrix4, } from "three";
+import { useFrame } from "@react-three/fiber";
 import { useStore } from "zustand";
 import { useClickValid } from "./useClickValid";
 import { findComponent } from "./types";
@@ -22,9 +23,8 @@ import { loadModel, loadSound, loadTexture } from "../dragdrop";
 import { GameInstance, GameInstanceProvider, getRepeatAxesFromModelProperties, useInstanceCheck } from "./InstanceProvider";
 import { composeTransform, decompose } from "./utils";
 import { isPhysicsProps } from "./components/PhysicsComponent";
-import { denormalizePrefab } from "./prefab";
 import { createPrefabStore, PrefabStoreProvider, useOptionalPrefabStoreApi, usePrefabChildIds, usePrefabNode, usePrefabRootId } from "./prefabStore";
-import { AssetRuntimeContext, EntityRuntimeScope } from "./runtimeContext";
+import { AssetRuntimeContext, EntityRuntimeScope, createRuntimeEngine } from "./runtime";
 import { sound as soundManager } from "../../helpers/SoundManager";
 builtinComponents.forEach(registerComponent);
 const IDENTITY = new Matrix4();
@@ -61,7 +61,13 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
     const rigidBodyRefs = useRef(new Map());
     const rootRef = useRef(null);
     const parentStore = useOptionalPrefabStoreApi();
-    const [ownedStore] = useState(() => { var _a, _b; return createPrefabStore(data !== null && data !== void 0 ? data : denormalizePrefab((_b = (_a = store === null || store === void 0 ? void 0 : store.getState()) !== null && _a !== void 0 ? _a : parentStore === null || parentStore === void 0 ? void 0 : parentStore.getState()) !== null && _b !== void 0 ? _b : missingStoreState())); });
+    const [ownedStore] = useState(() => {
+        if (data)
+            return createPrefabStore(data);
+        if (store || parentStore)
+            return null;
+        throw new Error("PrefabRoot requires either a `data` or `store` prop");
+    });
     const resolvedStore = (_a = store !== null && store !== void 0 ? store : parentStore) !== null && _a !== void 0 ? _a : ownedStore;
     const usesOwnedStore = resolvedStore === ownedStore;
     const shouldProvideStoreContext = !parentStore || parentStore !== resolvedStore;
@@ -73,6 +79,10 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
         var _a;
         return (_a = objectRefs.current[id]) !== null && _a !== void 0 ? _a : null;
     }, []);
+    const getRigidBody = useCallback((id) => {
+        var _a;
+        return (_a = rigidBodyRefs.current.get(id)) !== null && _a !== void 0 ? _a : null;
+    }, []);
     useImperativeHandle(ref, () => ({
         root: rootRef.current,
         getObject,
@@ -84,17 +94,29 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
             setInjectedSounds(prev => (Object.assign(Object.assign({}, prev), { [path]: sound })));
         },
     }), [getObject]);
+    const runtimeEngine = useMemo(() => createRuntimeEngine({
+        store: resolvedStore,
+        getObject,
+        getRigidBody,
+    }), [resolvedStore, getObject, getRigidBody]);
     const registerRef = useCallback((id, obj) => {
         objectRefs.current[id] = obj;
+        runtimeEngine.invalidate();
         onObjectRefChange === null || onObjectRefChange === void 0 ? void 0 : onObjectRefChange(id, obj);
-    }, [onObjectRefChange]);
+    }, [onObjectRefChange, runtimeEngine]);
     const registerRigidBodyRef = useCallback((id, rb) => {
         rigidBodyRefs.current.set(id, rb);
-    }, []);
-    const getRigidBody = useCallback((id) => {
-        var _a;
-        return (_a = rigidBodyRefs.current.get(id)) !== null && _a !== void 0 ? _a : null;
-    }, []);
+        runtimeEngine.invalidate();
+    }, [runtimeEngine]);
+    useEffect(() => {
+        runtimeEngine.setActive(!editMode);
+    }, [editMode, runtimeEngine]);
+    useEffect(() => {
+        return () => runtimeEngine.dispose();
+    }, [runtimeEngine]);
+    useFrame((_, dt) => {
+        runtimeEngine.tick(dt);
+    });
     useEffect(() => {
         if (usesOwnedStore && data) {
             resolvedStore.getState().replacePrefab(data);
@@ -157,26 +179,15 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
         };
         syncAssets();
     }, [resolvedStore, assetManifestKey, basePath, injectedModels, injectedSounds, injectedTextures, models, sounds, textures]);
-    // Keep refs current so context getters are always fresh without changing context identity
-    const availableModelsRef = useRef(availableModels);
-    availableModelsRef.current = availableModels;
-    const availableTexturesRef = useRef(availableTextures);
-    availableTexturesRef.current = availableTextures;
-    const availableSoundsRef = useRef(availableSounds);
-    availableSoundsRef.current = availableSounds;
     const assetRuntime = useMemo(() => ({
         getObject,
         getRigidBody,
         registerRigidBodyRef,
-        getModel: (path) => { var _a; return (_a = availableModelsRef.current[path]) !== null && _a !== void 0 ? _a : null; },
-        getTexture: (path) => { var _a; return (_a = availableTexturesRef.current[path]) !== null && _a !== void 0 ? _a : null; },
-        getSound: (path) => { var _a; return (_a = availableSoundsRef.current[path]) !== null && _a !== void 0 ? _a : null; },
-        getAssetRevision: () => {
-            const modelKeys = Object.keys(availableModelsRef.current).sort().join('|');
-            const textureKeys = Object.keys(availableTexturesRef.current).sort().join('|');
-            return `${textureKeys}::${modelKeys}`;
-        },
-    }), [getObject, getRigidBody, registerRigidBodyRef]);
+        getModel: (path) => { var _a; return (_a = availableModels[path]) !== null && _a !== void 0 ? _a : null; },
+        getTexture: (path) => { var _a; return (_a = availableTextures[path]) !== null && _a !== void 0 ? _a : null; },
+        getSound: (path) => { var _a; return (_a = availableSounds[path]) !== null && _a !== void 0 ? _a : null; },
+        getAssetRevision: () => `${Object.keys(availableTextures).sort().join('|')}::${Object.keys(availableModels).sort().join('|')}`,
+    }), [getObject, getRigidBody, registerRigidBodyRef, availableModels, availableTextures, availableSounds]);
     const content = (_jsx("group", { ref: rootRef, children: _jsx(GameInstanceProvider, { models: availableModels, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(StoreRootNode, { selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: onClick, registerRef: registerRef, loadedModels: availableModels, editMode: editMode, parentMatrix: IDENTITY }) }) }));
     if (!shouldProvideStoreContext) {
         return _jsx(AssetRuntimeContext.Provider, { value: assetRuntime, children: content });
@@ -197,6 +208,7 @@ export function GameObjectRenderer(props) {
         if (prevInstancedRef.current !== undefined && prevInstancedRef.current !== isInstanced) {
             setIsTransitioning(true);
             const timer = setTimeout(() => setIsTransitioning(false), 100);
+            prevInstancedRef.current = isInstanced;
             return () => clearTimeout(timer);
         }
         prevInstancedRef.current = isInstanced;
@@ -225,18 +237,18 @@ function InstancedNode({ nodeId, parentMatrix = IDENTITY, editMode, registerRef,
     const modelUrl = (_c = (_b = findComponent(gameObject, "Model")) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.filename;
     const instances = useMemo(() => buildRepeatedInstances(gameObject, parentMatrix, modelUrl, physicsProps), [gameObject, modelUrl, parentMatrix, physicsProps]);
     const groupRef = useRef(null);
+    const handleGroupRef = useCallback((object) => {
+        groupRef.current = object;
+        if (editMode) {
+            registerRef(nodeId, object);
+        }
+    }, [editMode, nodeId, registerRef]);
     const editClickHandlers = useClickValid(!!editMode && !isLocked, (e) => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeId);
         onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
     });
-    useEffect(() => {
-        if (editMode) {
-            registerRef(nodeId, groupRef.current);
-            return () => registerRef(nodeId, null);
-        }
-    }, [nodeId, registerRef, editMode]);
     if (editMode) {
-        return (_jsxs(_Fragment, { children: [_jsx("group", Object.assign({ ref: groupRef, position: localTransform.position, rotation: localTransform.rotation, scale: localTransform.scale }, editClickHandlers, { children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) })), instances.map(instance => (_jsx(GameInstance, { id: instance.id, sourceId: gameObject.id, clickable: clickable, clickEventName: clickEventName, modelUrl: instance.modelUrl, position: instance.position, rotation: instance.rotation, scale: instance.scale, locked: isLocked, physics: instance.physics }, instance.id)))] }));
+        return (_jsxs(_Fragment, { children: [_jsx("group", Object.assign({ ref: handleGroupRef, position: localTransform.position, rotation: localTransform.rotation, scale: localTransform.scale }, editClickHandlers, { children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) })), instances.map(instance => (_jsx(GameInstance, { id: instance.id, sourceId: gameObject.id, clickable: clickable, clickEventName: clickEventName, modelUrl: instance.modelUrl, position: instance.position, rotation: instance.rotation, scale: instance.scale, locked: isLocked, physics: instance.physics }, instance.id)))] }));
     }
     return (_jsx(_Fragment, { children: instances.map(instance => (_jsx(GameInstance, { id: instance.id, sourceId: gameObject.id, clickable: clickable, clickEventName: clickEventName, modelUrl: instance.modelUrl, position: instance.position, rotation: instance.rotation, scale: instance.scale, locked: isLocked, physics: instance.physics }, instance.id))) }));
 }
@@ -245,21 +257,25 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, load
     const gameObject = usePrefabNode(nodeId);
     const childIds = usePrefabChildIds(nodeId);
     const isSelected = selectedId === nodeId;
-    if (!gameObject)
-        return null;
+    const isLocked = Boolean(gameObject === null || gameObject === void 0 ? void 0 : gameObject.locked);
+    const stillInstanced = useInstanceCheck(nodeId);
     const groupRef = useRef(null);
     const helperRef = useRef(null);
-    const isLocked = Boolean(gameObject.locked);
-    const stillInstanced = useInstanceCheck(nodeId);
+    const handleGroupRef = useCallback((object) => {
+        groupRef.current = object;
+        registerRef(nodeId, object);
+    }, [nodeId, registerRef]);
+    const handleHelperRef = useCallback((object) => {
+        helperRef.current = object;
+    }, []);
     const clickHandlers = useClickValid(!!editMode && !isLocked, (e) => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeId);
-        onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
+        if (gameObject)
+            onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
     });
     useHelper(editMode && isSelected ? helperRef : null, BoxHelper, "cyan");
-    useEffect(() => {
-        registerRef(nodeId, groupRef.current);
-        return () => registerRef(nodeId, null);
-    }, [nodeId, registerRef]);
+    if (!gameObject)
+        return null;
     const world = parentMatrix.clone().multiply(compose(gameObject));
     const physics = findComponent(gameObject, "Physics");
     const ready = isNodeReady(gameObject, loadedModels);
@@ -272,10 +288,11 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, load
     const childNodes = _jsx(ChildNodes, { childIds: childIds, parentMatrix: world, selectedId: selectedId, onSelect: onSelect, onClick: onClick, registerRef: registerRef, loadedModels: loadedModels, editMode: editMode });
     const inner = (_jsx("group", Object.assign({}, clickHandlers, { children: renderCompositionNode(gameObject, renderCtx, childNodes) })));
     const physicsInner = editMode ? _jsx("group", { visible: false, children: inner }) : inner;
-    return (_jsx(EntityRuntimeScope, { nodeId: nodeId, editMode: editMode, isSelected: isSelected, children: editMode ? (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), _jsx("group", { ref: helperRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }), hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: physicsInner }, physicsKey)) : null] })) : hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }, physicsKey)) : (_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner })) }));
+    return (_jsx(EntityRuntimeScope, { nodeId: nodeId, editMode: editMode, isSelected: isSelected, children: editMode ? (_jsxs(_Fragment, { children: [_jsx("group", { ref: handleGroupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), _jsx("group", { ref: handleHelperRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }), hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: physicsInner }, physicsKey)) : null] })) : hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }, physicsKey)) : (_jsx("group", { ref: handleGroupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner })) }));
 }
 function isRendererHandledComponent(componentType) {
     return componentType === "Transform"
+        || componentType === "BufferGeometry"
         || componentType === "Geometry"
         || componentType === "Material"
         || componentType === "Physics"
@@ -284,7 +301,6 @@ function isRendererHandledComponent(componentType) {
 function getCompositionComponents(gameObject) {
     var _a;
     return Object.entries((_a = gameObject.components) !== null && _a !== void 0 ? _a : {}).reduce((result, [key, comp]) => {
-        var _a;
         if (!(comp === null || comp === void 0 ? void 0 : comp.type) || isRendererHandledComponent(comp.type))
             return result;
         const def = getComponentDef(comp.type);
@@ -294,7 +310,6 @@ function getCompositionComponents(gameObject) {
             key,
             View: def.View,
             properties: comp.properties,
-            composition: (_a = def.composition) !== null && _a !== void 0 ? _a : "wrap",
         });
         return result;
     }, []);
@@ -373,32 +388,27 @@ function renderCompositionNode(gameObject, ctx, childNodes) {
     return applyNodeComposition(gameObject, _jsxs(_Fragment, { children: [primaryContent, childNodes] }));
 }
 function renderNodePrimaryContent(gameObject, ctx) {
-    var _a, _b;
-    const geometry = findComponent(gameObject, "Geometry");
+    var _a, _b, _c;
+    const geometry = (_a = findComponent(gameObject, "BufferGeometry")) !== null && _a !== void 0 ? _a : findComponent(gameObject, "Geometry");
     const material = findComponent(gameObject, "Material");
     const model = findComponent(gameObject, "Model");
     const geometryDef = geometry && getComponentDef(geometry.type);
     const materialDef = material && getComponentDef(material.type);
     const modelDef = model && getComponentDef(model.type);
-    const geometryProperties = (_a = geometry === null || geometry === void 0 ? void 0 : geometry.properties) !== null && _a !== void 0 ? _a : {};
+    const geometryProperties = (_b = geometry === null || geometry === void 0 ? void 0 : geometry.properties) !== null && _b !== void 0 ? _b : {};
     const meshVisible = geometryProperties.visible !== false;
     const meshCastShadow = meshVisible && geometryProperties.castShadow !== false;
     const meshReceiveShadow = meshVisible && geometryProperties.receiveShadow !== false;
     if ((geometry === null || geometry === void 0 ? void 0 : geometry.type) && (geometryDef === null || geometryDef === void 0 ? void 0 : geometryDef.View)) {
         return (_jsxs("mesh", { visible: meshVisible, castShadow: meshCastShadow, receiveShadow: meshReceiveShadow, children: [_jsx(geometryDef.View, { properties: geometry.properties }), material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, { properties: material.properties }, "material"))] }));
     }
-    if ((model === null || model === void 0 ? void 0 : model.type) && (modelDef === null || modelDef === void 0 ? void 0 : modelDef.View) && !((_b = model.properties) === null || _b === void 0 ? void 0 : _b.instanced) && isNodeReady(gameObject, ctx.loadedModels)) {
+    if ((model === null || model === void 0 ? void 0 : model.type) && (modelDef === null || modelDef === void 0 ? void 0 : modelDef.View) && !((_c = model.properties) === null || _c === void 0 ? void 0 : _c.instanced) && isNodeReady(gameObject, ctx.loadedModels)) {
         return _jsx(modelDef.View, { properties: model.properties });
     }
     return null;
 }
 function applyNodeComposition(gameObject, subtree) {
     const components = getCompositionComponents(gameObject);
-    return components.reduce((acc, { key, View, properties, composition }) => composition === "sibling"
-        ? (_jsxs(_Fragment, { children: [_jsx(View, { properties: properties }, key), acc] }))
-        : (_jsx(View, { properties: properties, children: acc }, key)), subtree);
+    return components.reduce((acc, { key, View, properties }) => (_jsx(View, { properties: properties, children: acc }, key)), subtree);
 }
 export default PrefabRoot;
-function missingStoreState() {
-    throw new Error("PrefabRoot requires either data or store");
-}

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

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

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

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BooleanField, FieldGroup } from "./Input";
+const DEFAULT_TRIANGLE_POSITIONS = [
+    0, 0, 0,
+    1, 0, 0,
+    0, 1, 0,
+];
+const DEFAULT_TRIANGLE_INDICES = [0, 1, 2];
+const DEFAULT_TRIANGLE_UVS = [
+    0, 0,
+    1, 0,
+    0, 1,
+];
+function isFiniteNumberArray(value) {
+    return Array.isArray(value) && value.every(entry => typeof entry === 'number' && Number.isFinite(entry));
+}
+function normalizeNumberArray(value, fallback) {
+    return isFiniteNumberArray(value) ? value : fallback;
+}
+function toAttributeText(value, fallback) {
+    return JSON.stringify(normalizeNumberArray(value, fallback));
+}
+function parseArrayInput(raw) {
+    const trimmed = raw.trim();
+    if (!trimmed)
+        return [];
+    const parsed = JSON.parse(trimmed);
+    if (!isFiniteNumberArray(parsed)) {
+        throw new Error('Expected a JSON array of numbers');
+    }
+    return parsed;
+}
+function getIndexArray(indices) {
+    if (indices.length === 0)
+        return null;
+    const maxIndex = Math.max(...indices);
+    return maxIndex > 65535 ? new Uint32Array(indices) : new Uint16Array(indices);
+}
+function BufferArrayField({ label, value, fallback, onChange, rows = 4, }) {
+    return (_jsxs("label", { style: { display: 'grid', gap: 4 }, children: [_jsx("span", { style: { fontSize: '10px', color: '#888', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 500 }, children: label }), _jsx("textarea", { rows: rows, spellCheck: false, defaultValue: toAttributeText(value, fallback), onBlur: (event) => {
+                    try {
+                        onChange(parseArrayInput(event.target.value));
+                        event.target.setCustomValidity('');
+                    }
+                    catch (_a) {
+                        event.target.setCustomValidity('Expected a JSON array of numbers');
+                        event.target.reportValidity();
+                    }
+                }, style: {
+                    width: '100%',
+                    backgroundColor: '#171717',
+                    border: '1px solid #333',
+                    padding: '6px 8px',
+                    fontSize: '11px',
+                    color: '#eee',
+                    fontFamily: 'monospace',
+                    outline: 'none',
+                    borderRadius: 3,
+                    resize: 'vertical',
+                    boxSizing: 'border-box',
+                } })] }));
+}
+function BufferGeometryComponentEditor({ component, onUpdate, }) {
+    var _a;
+    const properties = (_a = component.properties) !== null && _a !== void 0 ? _a : {};
+    return (_jsxs(FieldGroup, { children: [_jsx(BufferArrayField, { label: "Positions", value: properties.positions, fallback: DEFAULT_TRIANGLE_POSITIONS, rows: 5, onChange: (positions) => onUpdate({ positions }) }), _jsx(BufferArrayField, { label: "Indices", value: properties.indices, fallback: DEFAULT_TRIANGLE_INDICES, onChange: (indices) => onUpdate({ indices }) }), _jsx(BufferArrayField, { label: "Normals", value: properties.normals, fallback: [], onChange: (normals) => onUpdate({ normals }) }), _jsx(BufferArrayField, { label: "UVs", value: properties.uvs, fallback: DEFAULT_TRIANGLE_UVS, onChange: (uvs) => onUpdate({ uvs }) }), _jsx(BooleanField, { name: "computeVertexNormals", label: "Compute Normals", values: properties, onChange: onUpdate, fallback: true }), _jsx(BooleanField, { name: "visible", label: "Visible", values: properties, onChange: onUpdate, fallback: true }), _jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: properties, onChange: onUpdate, fallback: true }), _jsx(BooleanField, { name: "receiveShadow", label: "Receive Shadow", values: properties, onChange: onUpdate, fallback: true })] }));
+}
+function BufferGeometryComponentView({ properties }) {
+    const positions = normalizeNumberArray(properties.positions, DEFAULT_TRIANGLE_POSITIONS);
+    const indices = normalizeNumberArray(properties.indices, DEFAULT_TRIANGLE_INDICES);
+    const normals = normalizeNumberArray(properties.normals, []);
+    const uvs = normalizeNumberArray(properties.uvs, DEFAULT_TRIANGLE_UVS);
+    const indexArray = getIndexArray(indices);
+    const hasNormals = normals.length >= 3 && normals.length % 3 === 0;
+    const hasUvs = uvs.length >= 2 && uvs.length % 2 === 0;
+    return (_jsxs("bufferGeometry", { onUpdate: (geometry) => {
+            if (properties.computeVertexNormals !== false && !hasNormals) {
+                geometry.computeVertexNormals();
+            }
+            geometry.computeBoundingBox();
+            geometry.computeBoundingSphere();
+        }, children: [_jsx("bufferAttribute", { attach: "attributes-position", args: [new Float32Array(positions), 3] }), indexArray ? (_jsx("bufferAttribute", { attach: "index", args: [indexArray, 1] })) : null, hasNormals ? (_jsx("bufferAttribute", { attach: "attributes-normal", args: [new Float32Array(normals), 3] })) : null, hasUvs ? (_jsx("bufferAttribute", { attach: "attributes-uv", args: [new Float32Array(uvs), 2] })) : null] }));
+}
+const BufferGeometryComponent = {
+    name: 'BufferGeometry',
+    Editor: BufferGeometryComponentEditor,
+    View: BufferGeometryComponentView,
+    defaultProperties: {
+        positions: DEFAULT_TRIANGLE_POSITIONS,
+        indices: DEFAULT_TRIANGLE_INDICES,
+        normals: [],
+        uvs: DEFAULT_TRIANGLE_UVS,
+        computeVertexNormals: true,
+    },
+};
+export default BufferGeometryComponent;

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

@@ -3,7 +3,7 @@ import { OrthographicCamera, PerspectiveCamera, useHelper } from '@react-three/d
 import { useRef } from 'react';
 import { CameraHelper } from 'three';
 import { useFrame, useThree } from '@react-three/fiber';
-import { useEntityRuntime } from '../runtimeContext';
+import { useEntityRuntime } from '../runtime';
 import { FieldGroup, NumberField, SelectField } from './Input';
 const CAMERA_PROJECTION_OPTIONS = [
     { value: 'perspective', label: 'Perspective' },
@@ -66,7 +66,6 @@ const CameraComponent = {
     name: 'Camera',
     Editor: CameraComponentEditor,
     View: CameraComponentView,
-    composition: 'wrap',
     defaultProperties: cameraDefaults,
 };
 export default CameraComponent;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { gameEvents } from '../GameEvents';
-import { useEntityRuntime } from '../runtimeContext';
+import { useEntityRuntime } from '../runtime';
 import { EventField, FieldGroup } from './Input';
 function ClickComponentEditor({ component, onUpdate }) {
     return (_jsxs(FieldGroup, { children: [_jsx("div", { style: { fontSize: 12, opacity: 0.8 }, children: "Emits a game event in play mode when this entity is clicked." }), _jsx(EventField, { name: "eventName", label: "Emit Event", values: component.properties, onChange: onUpdate, placeholder: "click" })] }));

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

@@ -1,5 +1,6 @@
 import { FC } from "react";
 import { ComponentData, GameObject } from "../types";
+import type { ComponentInstance, ComponentRuntimeContext } from "../runtime";
 export type AssetRef = {
     type: "model" | "texture" | "sound";
     path: string;
@@ -27,11 +28,8 @@ export interface Component {
     }>;
     defaultProperties: any;
     View?: FC<ComponentViewProps>;
-    /**
-     * How this component participates in the implicit node composition pipeline.
-        * Defaults to `wrap`; `sibling` renders next to the current subtree.
-     */
-    composition?: "wrap" | "sibling";
+    /** Optional runtime factory for the non-React game loop. */
+    create?: (ctx: ComponentRuntimeContext) => ComponentInstance | void;
     /** Declare which asset paths this component references (for asset loading). */
     getAssetRefs?: (properties: Record<string, any>) => AssetRef[];
 }

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

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useHelper } from "@react-three/drei";
 import { useRef, useEffect, useState } from "react";
 import { useFrame } from "@react-three/fiber";
-import { CameraHelper, Vector3 } from "three";
-import { useEntityRuntime } from "../runtimeContext";
+import { CameraHelper } from "three";
+import { useEntityRuntime } from "../runtime";
 import { BooleanField, ColorField, NumberField, NumberInput, Vector3Input } from "./Input";
 import { LightSection, ShadowBiasField, mergeWithDefaults } from "./lightUtils";
 import { colors } from "../styles";
@@ -161,13 +161,7 @@ function DirectionalLightView({ properties, children }) {
             shadowCamera.updateMatrixWorld();
         }
     });
-    return (_jsxs(_Fragment, { children: [_jsx("directionalLight", { ref: directionalLightRef, color: color, intensity: intensity, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar, "shadow-camera-top": shadowCameraTop, "shadow-camera-bottom": shadowCameraBottom, "shadow-camera-left": shadowCameraLeft, "shadow-camera-right": shadowCameraRight, "shadow-bias": shadowBias, "shadow-normalBias": shadowNormalBias, "shadow-autoUpdate": shadowAutoUpdate }), _jsx("object3D", { ref: targetRef, position: targetOffset }), editMode && isSelected && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.3, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] }), _jsxs("line", { children: [_jsx("bufferGeometry", { onUpdate: (geo) => {
-                                    const points = [
-                                        new Vector3(0, 0, 0),
-                                        new Vector3(targetOffset[0], targetOffset[1], targetOffset[2])
-                                    ];
-                                    geo.setFromPoints(points);
-                                } }), _jsx("lineBasicMaterial", { color: color, opacity: 0.6, transparent: true })] })] })), children] }));
+    return (_jsxs(_Fragment, { children: [_jsx("directionalLight", { ref: directionalLightRef, color: color, intensity: intensity, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar, "shadow-camera-top": shadowCameraTop, "shadow-camera-bottom": shadowCameraBottom, "shadow-camera-left": shadowCameraLeft, "shadow-camera-right": shadowCameraRight, "shadow-bias": shadowBias, "shadow-normalBias": shadowNormalBias, "shadow-autoUpdate": shadowAutoUpdate }), _jsx("object3D", { ref: targetRef, position: targetOffset }), editMode && isSelected && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.3, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] }), _jsxs("line", { children: [_jsx("bufferGeometry", { children: _jsx("bufferAttribute", { attach: "attributes-position", args: [new Float32Array([0, 0, 0, targetOffset[0], targetOffset[1], targetOffset[2]]), 3] }) }), _jsx("lineBasicMaterial", { color: color, opacity: 0.6, transparent: true })] })] })), children] }));
 }
 const DirectionalLightComponent = {
     name: 'DirectionalLight',

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Environment } from '@react-three/drei';
 import { FieldGroup, NumberField } from './Input';
-import { useAssetRuntime } from '../runtimeContext';
+import { useAssetRuntime } from '../runtime';
 function EnvironmentView({ properties, children, }) {
     const { getAssetRevision } = useAssetRuntime();
     const { intensity = 1, resolution = 256 } = properties;

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

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 import type { ThreeElement } from '@react-three/fiber';
 import { Component } from './ComponentRegistry';
 import { MeshBasicNodeMaterial, MeshStandardNodeMaterial } from 'three/webgpu';
@@ -14,13 +15,22 @@ export interface MaterialProps extends Omit<MeshStandardMaterialProperties & Mes
     thickness?: number;
     ior?: number;
     texture?: string;
+    offset?: [number, number];
     repeat?: boolean;
     repeatCount?: [number, number];
+    animateOffset?: boolean;
+    offsetSpeed?: [number, number];
     generateMipmaps?: boolean;
     minFilter?: string;
     magFilter?: string;
     normalMapTexture?: string;
     normalScale?: [number, number];
 }
+export type MaterialOverrides = Record<string, unknown>;
+export declare function useMaterialOverrides(): MaterialOverrides;
+export declare function MaterialOverridesProvider({ overrides, children, }: {
+    overrides: MaterialOverrides;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 declare const MaterialComponent: Component;
 export default MaterialComponent;