react-three-game 0.0.83 → 0.0.85

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

@@ -9,14 +9,29 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useRef } from 'react';
 import { extend } from '@react-three/fiber';
+import { useFrame } from '@react-three/fiber';
 import { FieldRenderer, Label, NumberInput } from './Input';
-import { useAssetRuntime } from '../runtimeContext';
-import { useMemo } from 'react';
+import { useAssetRuntime } from '../runtime';
 import { MeshBasicNodeMaterial, MeshStandardNodeMaterial } from 'three/webgpu';
 import { TexturePicker } from '../../assetviewer/page';
-import { RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace, LinearSRGBColorSpace, Vector2, NearestFilter, LinearFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearMipmapNearestFilter, LinearMipmapLinearFilter, FrontSide, BackSide, DoubleSide, } from 'three';
+import { RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace, LinearSRGBColorSpace, NearestFilter, LinearFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearMipmapNearestFilter, LinearMipmapLinearFilter, FrontSide, BackSide, DoubleSide, } from 'three';
+function Vector2Editor({ label, value, onChange, min, max, step, }) {
+    var _a, _b;
+    return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsxs(Label, { children: [label, " X"] }), _jsx(NumberInput, { value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 0, onChange: x => { var _a; return onChange([x, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 0]); }, min: min, max: max, step: step, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] }), _jsxs("div", { style: { flex: 1 }, children: [_jsxs(Label, { children: [label, " Y"] }), _jsx(NumberInput, { value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 0, onChange: y => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 0, y]); }, min: min, max: max, step: step, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] })] }));
+}
+const EMPTY_MATERIAL_OVERRIDES = Object.freeze({});
+const MaterialOverridesContext = createContext(EMPTY_MATERIAL_OVERRIDES);
+export function useMaterialOverrides() {
+    return useContext(MaterialOverridesContext);
+}
+export function MaterialOverridesProvider({ overrides, children, }) {
+    const parent = useContext(MaterialOverridesContext);
+    const merged = useMemo(() => (Object.assign(Object.assign({}, parent), overrides)), [parent, overrides]);
+    return _jsx(MaterialOverridesContext.Provider, { value: merged, children: children });
+}
 extend({
     MeshBasicNodeMaterial,
     MeshStandardNodeMaterial,
@@ -26,6 +41,7 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
     const materialType = (_a = component.properties.materialType) !== null && _a !== void 0 ? _a : 'standard';
     const hasTexture = !!component.properties.texture;
     const hasRepeat = component.properties.repeat;
+    const animateOffset = component.properties.animateOffset;
     const isStandardMaterial = materialType === 'standard';
     const fields = [
         {
@@ -72,10 +88,20 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
                     name: 'repeatCount',
                     type: 'custom',
                     label: 'Repeat (X, Y)',
-                    render: ({ value, onChange }) => {
-                        var _a, _b;
-                        return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx(Label, { children: "X" }), _jsx(NumberInput, { value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, onChange: v => { var _a; return onChange([v, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 1]); }, min: 0.01, max: 100, step: 0.1, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] }), _jsxs("div", { style: { flex: 1 }, children: [_jsx(Label, { children: "Y" }), _jsx(NumberInput, { value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 1, onChange: v => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, v]); }, min: 0.01, max: 100, step: 0.1, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] })] }));
-                    },
+                    render: ({ value, onChange }) => (_jsx(Vector2Editor, { label: "Repeat", value: value, onChange: onChange, min: 0.01, max: 100, step: 0.1 })),
+                }] : []),
+            {
+                name: 'offset',
+                type: 'custom',
+                label: 'Offset (X, Y)',
+                render: ({ value, onChange }) => (_jsx(Vector2Editor, { label: "Offset", value: value, onChange: onChange, step: 0.01 })),
+            },
+            { name: 'animateOffset', type: 'boolean', label: 'Animate Offset' },
+            ...(animateOffset ? [{
+                    name: 'offsetSpeed',
+                    type: 'custom',
+                    label: 'Speed (X, Y)',
+                    render: ({ value, onChange }) => (_jsx(Vector2Editor, { label: "Speed", value: value, onChange: onChange, step: 0.01 })),
                 }] : []),
             {
                 name: 'normalMapTexture',
@@ -87,10 +113,7 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
                     name: 'normalScale',
                     type: 'custom',
                     label: 'Normal Scale (X, Y)',
-                    render: ({ value, onChange }) => {
-                        var _a, _b;
-                        return (_jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx(Label, { children: "X" }), _jsx(NumberInput, { value: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, onChange: v => { var _a; return onChange([v, (_a = value === null || value === void 0 ? void 0 : value[1]) !== null && _a !== void 0 ? _a : 1]); }, min: 0, max: 5, step: 0.01, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] }), _jsxs("div", { style: { flex: 1 }, children: [_jsx(Label, { children: "Y" }), _jsx(NumberInput, { value: (_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : 1, onChange: v => { var _a; return onChange([(_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : 1, v]); }, min: 0, max: 5, step: 0.01, style: { width: '100%', minWidth: 0, boxSizing: 'border-box' } })] })] }));
-                    },
+                    render: ({ value, onChange }) => (_jsx(Vector2Editor, { label: "Normal", value: value, onChange: onChange, min: 0, max: 5, step: 0.01 })),
                 }] : []),
             { name: 'generateMipmaps', type: 'boolean', label: 'Generate Mipmaps' },
             {
@@ -121,13 +144,16 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
 }
 // View for Material component
 function MaterialComponentView({ properties: rawProps }) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { getTexture } = useAssetRuntime();
     const properties = rawProps;
     const materialType = (_a = properties === null || properties === void 0 ? void 0 : properties.materialType) !== null && _a !== void 0 ? _a : 'standard';
     const textureName = properties === null || properties === void 0 ? void 0 : properties.texture;
+    const offset = properties === null || properties === void 0 ? void 0 : properties.offset;
     const repeat = properties === null || properties === void 0 ? void 0 : properties.repeat;
     const repeatCount = properties === null || properties === void 0 ? void 0 : properties.repeatCount;
+    const animateOffset = properties === null || properties === void 0 ? void 0 : properties.animateOffset;
+    const offsetSpeed = properties === null || properties === void 0 ? void 0 : properties.offsetSpeed;
     const generateMipmaps = (properties === null || properties === void 0 ? void 0 : properties.generateMipmaps) !== false;
     const minFilter = (properties === null || properties === void 0 ? void 0 : properties.minFilter) || 'LinearMipmapLinearFilter';
     const magFilter = (properties === null || properties === void 0 ? void 0 : properties.magFilter) || 'LinearFilter';
@@ -137,7 +163,7 @@ function MaterialComponentView({ properties: rawProps }) {
     const normalMapTexture = normalMapTextureName ? (_c = getTexture(normalMapTextureName)) !== null && _c !== void 0 ? _c : undefined : undefined;
     const materialSource = properties !== null && properties !== void 0 ? properties : {};
     // Destructure all material props and separate custom texture handling props
-    const { texture: _texture, repeat: _repeat, repeatCount: _repeatCount, generateMipmaps: _generateMipmaps, minFilter: _minFilter, magFilter: _magFilter, map: _map, materialType: _materialType, normalMapTexture: _normalMapTexture, normalScale: _normalScale, normalMap: _normalMap, side: sideProp } = materialSource, materialProps = __rest(materialSource, ["texture", "repeat", "repeatCount", "generateMipmaps", "minFilter", "magFilter", "map", "materialType", "normalMapTexture", "normalScale", "normalMap", "side"]);
+    const { texture: _texture, offset: _offset, repeat: _repeat, repeatCount: _repeatCount, animateOffset: _animateOffset, offsetSpeed: _offsetSpeed, generateMipmaps: _generateMipmaps, minFilter: _minFilter, magFilter: _magFilter, map: _map, materialType: _materialType, normalMapTexture: _normalMapTexture, normalScale: _normalScale, normalMap: _normalMap, side: sideProp } = materialSource, materialProps = __rest(materialSource, ["texture", "offset", "repeat", "repeatCount", "animateOffset", "offsetSpeed", "generateMipmaps", "minFilter", "magFilter", "map", "materialType", "normalMapTexture", "normalScale", "normalMap", "side"]);
     const sideMap = { FrontSide, BackSide, DoubleSide };
     const resolvedSide = sideProp ? ((_d = sideMap[sideProp]) !== null && _d !== void 0 ? _d : FrontSide) : FrontSide;
     const minFilterMap = {
@@ -152,8 +178,9 @@ function MaterialComponentView({ properties: rawProps }) {
         NearestFilter,
         LinearFilter
     };
+    const animatedOffsetRef = useRef([(_e = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _e !== void 0 ? _e : 0, (_f = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _f !== void 0 ? _f : 0]);
     const finalTexture = useMemo(() => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (!texture)
             return undefined;
         const t = texture.clone();
@@ -166,13 +193,24 @@ function MaterialComponentView({ properties: rawProps }) {
             t.wrapS = t.wrapT = ClampToEdgeWrapping;
             t.repeat.set(1, 1);
         }
+        t.offset.set((_a = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _a !== void 0 ? _a : 0, (_b = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _b !== void 0 ? _b : 0);
         t.colorSpace = SRGBColorSpace;
         t.generateMipmaps = generateMipmaps;
-        t.minFilter = (_a = minFilterMap[minFilter]) !== null && _a !== void 0 ? _a : LinearMipmapLinearFilter;
-        t.magFilter = (_b = magFilterMap[magFilter]) !== null && _b !== void 0 ? _b : LinearFilter;
+        t.minFilter = (_c = minFilterMap[minFilter]) !== null && _c !== void 0 ? _c : LinearMipmapLinearFilter;
+        t.magFilter = (_d = magFilterMap[magFilter]) !== null && _d !== void 0 ? _d : LinearFilter;
         t.needsUpdate = true;
         return t;
-    }, [texture, repeat, repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0], repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1], generateMipmaps, minFilter, magFilter]);
+    }, [texture, repeat, repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[0], repeatCount === null || repeatCount === void 0 ? void 0 : repeatCount[1], offset === null || offset === void 0 ? void 0 : offset[0], offset === null || offset === void 0 ? void 0 : offset[1], generateMipmaps, minFilter, magFilter]);
+    animatedOffsetRef.current = [(_g = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _g !== void 0 ? _g : 0, (_h = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _h !== void 0 ? _h : 0];
+    useFrame((_, delta) => {
+        var _a, _b;
+        if (!finalTexture || !animateOffset)
+            return;
+        const nextX = animatedOffsetRef.current[0] + ((_a = offsetSpeed === null || offsetSpeed === void 0 ? void 0 : offsetSpeed[0]) !== null && _a !== void 0 ? _a : 0) * delta;
+        const nextY = animatedOffsetRef.current[1] + ((_b = offsetSpeed === null || offsetSpeed === void 0 ? void 0 : offsetSpeed[1]) !== null && _b !== void 0 ? _b : 0) * delta;
+        animatedOffsetRef.current = [nextX, nextY];
+        finalTexture.offset.set(nextX, nextY);
+    });
     const finalNormalMap = useMemo(() => {
         if (!normalMapTexture)
             return undefined;
@@ -181,21 +219,15 @@ function MaterialComponentView({ properties: rawProps }) {
         t.needsUpdate = true;
         return t;
     }, [normalMapTexture]);
-    const normalScaleVec = useMemo(() => {
-        var _a, _b;
-        if (!finalNormalMap)
-            return undefined;
-        return new Vector2((_a = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0]) !== null && _a !== void 0 ? _a : 1, (_b = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]) !== null && _b !== void 0 ? _b : 1);
-    }, [finalNormalMap, normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0], normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]]);
     if (!properties) {
         return _jsx("meshStandardNodeMaterial", { color: "red", wireframe: true });
     }
-    const materialKey = `${(_e = finalTexture === null || finalTexture === void 0 ? void 0 : finalTexture.uuid) !== null && _e !== void 0 ? _e : 'no-texture'}:${materialProps.transparent ? 'transparent' : 'opaque'}`;
-    const sharedProps = Object.assign({ map: finalTexture, side: resolvedSide }, materialProps);
+    const overrides = useMaterialOverrides();
+    const sharedProps = Object.assign(Object.assign({ map: finalTexture, side: resolvedSide }, materialProps), overrides);
     if (materialType === 'basic') {
-        return _jsx("meshBasicNodeMaterial", Object.assign({}, sharedProps), materialKey);
+        return _jsx("meshBasicNodeMaterial", Object.assign({}, sharedProps));
     }
-    return (_jsx("meshStandardNodeMaterial", Object.assign({}, sharedProps, { normalMap: finalNormalMap, normalScale: normalScaleVec }), materialKey));
+    return (_jsx("meshStandardNodeMaterial", Object.assign({}, sharedProps, { normalMap: finalNormalMap, normalScale: finalNormalMap ? [(_j = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[0]) !== null && _j !== void 0 ? _j : 1, (_k = normalScaleProp === null || normalScaleProp === void 0 ? void 0 : normalScaleProp[1]) !== null && _k !== void 0 ? _k : 1] : undefined })));
 }
 const MaterialComponent = {
     name: 'Material',
@@ -208,6 +240,9 @@ const MaterialComponent = {
         wireframe: false,
         transparent: false,
         opacity: 1,
+        offset: [0, 0],
+        animateOffset: false,
+        offsetSpeed: [0, 0],
         metalness: 0,
         roughness: 1
     },

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ModelPicker } from '../../assetviewer/page';
 import { useContext, useMemo } from 'react';
 import { BooleanField, FieldGroup, Label, ListEditor, NumberInput, SelectInput } from './Input';
-import { useAssetRuntime } from '../runtimeContext';
+import { useAssetRuntime } from '../runtime';
 import { EditorContext } from '../PrefabEditor';
 import { getRepeatAxesFromModelProperties, normalizeRepeatAxes } from '../InstanceProvider';
 import { colors } from '../styles';

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

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CapsuleCollider, RigidBody, useRapier } from "@react-three/rapier";
 import { useRef, useEffect, useCallback } from 'react';
-import { useAssetRuntime, useEntityRuntime } from "../runtimeContext";
+import { useAssetRuntime, useEntityRuntime } from "../runtime";
 import { BooleanField, EventInput, FieldGroup, ListEditor, NumberField, SelectField, SelectInput, Vector3Field } from "./Input";
 import { gameEvents, getEntityIdFromRigidBody } from "../GameEvents";
 import { colors } from "../styles";

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef } from 'react';
 import { useHelper } from '@react-three/drei';
 import { PointLightHelper } from 'three';
-import { useEntityRuntime } from '../runtimeContext';
+import { useEntityRuntime } from '../runtime';
 import { BooleanField, ColorField, NumberField } from './Input';
 import { LightSection, ShadowBiasField, mergeWithDefaults } from './lightUtils';
 const pointLightDefaults = {

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

@@ -4,7 +4,7 @@ import { useThree } from '@react-three/fiber';
 import { SoundPicker } from '../../assetviewer/page';
 import { sound as soundManager } from '../../../helpers/SoundManager';
 import { gameEvents } from '../GameEvents';
-import { useAssetRuntime, useEntityRuntime } from '../runtimeContext';
+import { useAssetRuntime, useEntityRuntime } from '../runtime';
 import { BooleanField, EventField, FieldGroup, FieldRenderer, ListEditor, NumberField, SelectField } from './Input';
 import { colors } from '../styles';
 import { AudioListener } from 'three';
@@ -212,7 +212,6 @@ const SoundComponent = {
     name: 'Sound',
     Editor: SoundComponentEditor,
     View: SoundComponentView,
-    composition: 'sibling',
     defaultProperties: {
         eventName: '',
         clips: [],

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

@@ -3,7 +3,7 @@ import { useHelper } from "@react-three/drei";
 import { useRef, useEffect } from "react";
 import { BooleanField, ColorField, Label, NumberField, Vector3Input } from "./Input";
 import { SpotLightHelper } from "three";
-import { useAssetRuntime, useEntityRuntime } from "../runtimeContext";
+import { useAssetRuntime, useEntityRuntime } from "../runtime";
 import { useFrame } from "@react-three/fiber";
 import { TexturePicker } from "../../assetviewer/page";
 import { LightSection, ShadowBiasField, mergeWithDefaults } from "./lightUtils";

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

@@ -1,28 +1,30 @@
-import GeometryComponent from './GeometryComponent';
 import TransformComponent from './TransformComponent';
+import GeometryComponent from './GeometryComponent';
+import BufferGeometryComponent from './BufferGeometryComponent';
+import ModelComponent from './ModelComponent';
+import TextComponent from './TextComponent';
 import MaterialComponent from './MaterialComponent';
 import PhysicsComponent from './PhysicsComponent';
 import SpotLightComponent from './SpotLightComponent';
 import PointLightComponent from './PointLightComponent';
 import DirectionalLightComponent from './DirectionalLightComponent';
 import AmbientLightComponent from './AmbientLightComponent';
-import ModelComponent from './ModelComponent';
-import TextComponent from './TextComponent';
 import EnvironmentComponent from './EnvironmentComponent';
 import CameraComponent from './CameraComponent';
 import ClickComponent from './ClickComponent';
 import SoundComponent from './SoundComponent';
 export const builtinComponents = [
-    GeometryComponent,
     TransformComponent,
+    GeometryComponent,
+    BufferGeometryComponent,
+    ModelComponent,
+    TextComponent,
     MaterialComponent,
     PhysicsComponent,
     SpotLightComponent,
     PointLightComponent,
     DirectionalLightComponent,
     AmbientLightComponent,
-    ModelComponent,
-    TextComponent,
     EnvironmentComponent,
     CameraComponent,
     ClickComponent,

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

@@ -0,0 +1,61 @@
+import { type ReactNode } from "react";
+import type { Object3D, Texture } from "three";
+import type { PrefabStoreApi } from "./prefabStore";
+import { type EntityComponent, type Scene } from "./scene";
+export interface AssetRuntime {
+    registerRigidBodyRef: (id: string, rb: any) => void;
+    getModel: (path: string) => Object3D | null;
+    getTexture: (path: string) => Texture | null;
+    getSound: (path: string) => AudioBuffer | null;
+    getAssetRevision: () => string;
+    getObject: (id: string) => Object3D | null;
+    getRigidBody: (id: string) => any;
+}
+export interface AssetRuntimeContextValue extends AssetRuntime {
+}
+export interface EntityRuntime {
+    nodeId: string;
+    editMode?: boolean;
+    isSelected?: boolean;
+    getObject: <T extends Object3D = Object3D>() => T | null;
+    getRigidBody: <T = any>() => T | null;
+}
+export interface LiveRef<T> {
+    readonly current: T | null;
+}
+export type LiveObjectRef<T extends Object3D = Object3D> = LiveRef<T>;
+export type LiveRigidBodyRef<T = any> = LiveRef<T>;
+export declare const AssetRuntimeContext: import("react").Context<AssetRuntimeContextValue | null>;
+export declare function useAssetRuntime(): AssetRuntime;
+export declare function useEntityRuntime(): EntityRuntime;
+export declare function useEntityObjectRef<T extends Object3D = Object3D>(): LiveRef<T>;
+export declare function useEntityRigidBodyRef<T = any>(): LiveRef<T>;
+export declare function EntityRuntimeScope({ nodeId, editMode, isSelected, children, }: {
+    nodeId: string;
+    editMode?: boolean;
+    isSelected?: boolean;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** Runtime behaviour produced by `Component.create(ctx)`. All methods optional. */
+export interface ComponentInstance {
+    start?(): void;
+    update?(dt: number): void;
+    destroy?(): void;
+}
+export interface ComponentRuntimeContext<TProperties = Record<string, any>> {
+    scene: Scene;
+    component: EntityComponent<TProperties>;
+    object: Object3D;
+    rigidBody: any;
+}
+export interface RuntimeEngine {
+    tick: (dt: number) => void;
+    setActive: (active: boolean) => void;
+    invalidate: () => void;
+    dispose: () => void;
+}
+export declare function createRuntimeEngine({ store, getObject, getRigidBody, }: {
+    store: PrefabStoreApi;
+    getObject: (id: string) => Object3D | null;
+    getRigidBody: (id: string) => any;
+}): RuntimeEngine;

package/dist/tools/prefabeditor/runtime.js

@@ -0,0 +1,184 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { getComponentDef } from "./components/ComponentRegistry";
+import { createScene } from "./scene";
+export const AssetRuntimeContext = createContext(null);
+const EntityRuntimeContext = createContext(null);
+export function useAssetRuntime() {
+    const ctx = useContext(AssetRuntimeContext);
+    if (!ctx)
+        throw new Error("useAssetRuntime must be used inside <PrefabRoot>");
+    return ctx;
+}
+export function useEntityRuntime() {
+    const ctx = useContext(EntityRuntimeContext);
+    if (!ctx)
+        throw new Error("useEntityRuntime must be used inside a component View rendered by <PrefabRoot>");
+    return ctx;
+}
+export function useEntityObjectRef() {
+    const { getObject } = useEntityRuntime();
+    return useMemo(() => ({ get current() { return getObject(); } }), [getObject]);
+}
+export function useEntityRigidBodyRef() {
+    const { getRigidBody } = useEntityRuntime();
+    return useMemo(() => ({ get current() { return getRigidBody(); } }), [getRigidBody]);
+}
+export function EntityRuntimeScope({ nodeId, editMode, isSelected, children, }) {
+    const asset = useContext(AssetRuntimeContext);
+    if (!asset)
+        throw new Error("EntityRuntimeScope must be used inside <PrefabRoot>");
+    const value = useMemo(() => ({
+        nodeId,
+        editMode,
+        isSelected,
+        getObject: () => asset.getObject(nodeId),
+        getRigidBody: () => asset.getRigidBody(nodeId),
+    }), [asset, editMode, isSelected, nodeId]);
+    return _jsx(EntityRuntimeContext.Provider, { value: value, children: children });
+}
+export function createRuntimeEngine({ store, getObject, getRigidBody, }) {
+    const scene = createScene({
+        getRootId: () => store.getState().rootId,
+        getNode: (id) => { var _a; return (_a = store.getState().nodesById[id]) !== null && _a !== void 0 ? _a : null; },
+        getChildIds: (id) => { var _a; return (_a = store.getState().childIdsById[id]) !== null && _a !== void 0 ? _a : []; },
+        getParentId: (id) => { var _a; return (_a = store.getState().parentIdById[id]) !== null && _a !== void 0 ? _a : null; },
+        updateNode: (id, update) => store.getState().updateNode(id, update),
+        updateNodes: (updates) => {
+            store.getState().updateNodes(Object.entries(updates).map(([id, update]) => ({ id, update })));
+        },
+        addNode: (node, options) => {
+            var _a;
+            const parentId = (_a = options === null || options === void 0 ? void 0 : options.parentId) !== null && _a !== void 0 ? _a : store.getState().rootId;
+            store.getState().addChild(parentId, node);
+            return node.id;
+        },
+        removeNode: (id) => store.getState().deleteNode(id),
+        getObject,
+        getRigidBody,
+    });
+    // key = `${nodeId}:${componentKey}:${componentType}`
+    const instances = new Map();
+    let active = false;
+    let dirty = true;
+    let lastRevision = store.getState().revision;
+    const unsubscribe = store.subscribe((state) => {
+        if (state.revision === lastRevision)
+            return;
+        lastRevision = state.revision;
+        dirty = true;
+    });
+    function destroy(key) {
+        var _a, _b;
+        const record = instances.get(key);
+        if (!record)
+            return;
+        try {
+            (_b = (_a = record.instance).destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        catch (error) {
+            console.error(`[runtime] destroy ${key}`, error);
+        }
+        instances.delete(key);
+    }
+    function sync() {
+        const state = store.getState();
+        const live = new Set();
+        let hasPendingMount = false;
+        const visit = (nodeId) => {
+            var _a, _b, _c;
+            const node = state.nodesById[nodeId];
+            if (!node)
+                return;
+            if (!node.disabled && node.components) {
+                for (const componentKey in node.components) {
+                    const data = node.components[componentKey];
+                    if (!(data === null || data === void 0 ? void 0 : data.type))
+                        continue;
+                    const def = getComponentDef(data.type);
+                    if (!(def === null || def === void 0 ? void 0 : def.create))
+                        continue;
+                    const key = `${nodeId}:${componentKey}:${data.type}`;
+                    live.add(key);
+                    const object = getObject(nodeId);
+                    if (!object) {
+                        hasPendingMount = true;
+                        continue;
+                    }
+                    const rigidBody = getRigidBody(nodeId);
+                    const existing = instances.get(key);
+                    if (existing && existing.object === object && existing.rigidBody === rigidBody) {
+                        continue;
+                    }
+                    if (existing) {
+                        destroy(key);
+                    }
+                    const entity = scene.find(nodeId);
+                    const component = entity === null || entity === void 0 ? void 0 : entity.getComponent(componentKey);
+                    if (!entity || !component)
+                        continue;
+                    let instance;
+                    try {
+                        instance = (_a = def.create({ scene, component, object, rigidBody })) !== null && _a !== void 0 ? _a : {};
+                    }
+                    catch (error) {
+                        console.error(`[runtime] create ${key}`, error);
+                        continue;
+                    }
+                    instances.set(key, { instance, object, rigidBody });
+                    try {
+                        (_b = instance.start) === null || _b === void 0 ? void 0 : _b.call(instance);
+                    }
+                    catch (error) {
+                        console.error(`[runtime] start ${key}`, error);
+                    }
+                }
+            }
+            for (const childId of (_c = state.childIdsById[nodeId]) !== null && _c !== void 0 ? _c : [])
+                visit(childId);
+        };
+        visit(state.rootId);
+        for (const key of Array.from(instances.keys())) {
+            if (!live.has(key))
+                destroy(key);
+        }
+        dirty = hasPendingMount;
+    }
+    return {
+        tick(dt) {
+            if (!active)
+                return;
+            if (dirty)
+                sync();
+            for (const [key, record] of instances) {
+                if (!record.instance.update)
+                    continue;
+                try {
+                    record.instance.update(dt);
+                }
+                catch (error) {
+                    console.error(`[runtime] update ${key}`, error);
+                }
+            }
+        },
+        setActive(nextActive) {
+            if (active === nextActive)
+                return;
+            active = nextActive;
+            dirty = true;
+            if (!active) {
+                for (const key of Array.from(instances.keys()))
+                    destroy(key);
+            }
+        },
+        invalidate() {
+            dirty = true;
+        },
+        dispose() {
+            active = false;
+            for (const key of Array.from(instances.keys()))
+                destroy(key);
+            unsubscribe();
+        },
+    };
+}

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

@@ -45,6 +45,14 @@ export interface Scene {
     };
     add: (node: GameObject, options?: SpawnOptions) => Entity;
     remove: (id: string) => void;
+    /**
+     * Coalesce many entity / component updates into a single store revision.
+     * Entity `update`/`set`, `EntityComponent` `set`/`update`, `addComponent`,
+     * and `removeComponent` calls inside the callback are buffered and flushed
+     * as one batched write. `add`, `remove`, and `destroy` (structural tree ops)
+     * still commit immediately.
+     */
+    batch: (fn: () => void) => void;
 }
 interface SceneAdapter {
     getRootId: () => string;

package/dist/tools/prefabeditor/scene.js

@@ -57,6 +57,42 @@ function setValueAtPath(value, path, nextValue) {
     return cloneBranch(value, 0);
 }
 export function createScene(adapter) {
+    let batchBuffer = null;
+    function routeUpdate(id, update) {
+        if (batchBuffer) {
+            const prev = batchBuffer.get(id);
+            batchBuffer.set(id, prev ? (node) => update(prev(node)) : update);
+            return;
+        }
+        adapter.updateNode(id, update);
+    }
+    function routeUpdates(updates) {
+        if (batchBuffer) {
+            for (const id in updates)
+                routeUpdate(id, updates[id]);
+            return;
+        }
+        adapter.updateNodes(updates);
+    }
+    function batch(fn) {
+        if (batchBuffer) {
+            fn();
+            return;
+        }
+        batchBuffer = new Map();
+        try {
+            fn();
+            if (batchBuffer.size > 0) {
+                const updates = {};
+                for (const [id, update] of batchBuffer)
+                    updates[id] = update;
+                adapter.updateNodes(updates);
+            }
+        }
+        finally {
+            batchBuffer = null;
+        }
+    }
     const getNode = (id) => {
         if (!adapter.getNode(id))
             missingNode(id);
@@ -76,7 +112,7 @@ export function createScene(adapter) {
                 return getValueAtPath(component.properties, path);
             },
             set(path, value) {
-                adapter.updateNode(entityId, node => {
+                routeUpdate(entityId, node => {
                     var _a;
                     const component = (_a = node.components) === null || _a === void 0 ? void 0 : _a[componentKey];
                     if (!component) {
@@ -86,7 +122,7 @@ export function createScene(adapter) {
                 });
             },
             update(update) {
-                adapter.updateNode(entityId, node => {
+                routeUpdate(entityId, node => {
                     var _a;
                     const component = (_a = node.components) === null || _a === void 0 ? void 0 : _a[componentKey];
                     if (!component) {
@@ -128,10 +164,10 @@ export function createScene(adapter) {
                 return (_b = (_a = adapter.getRigidBody) === null || _a === void 0 ? void 0 : _a.call(adapter, id)) !== null && _b !== void 0 ? _b : null;
             },
             set(data) {
-                adapter.updateNode(id, () => data);
+                routeUpdate(id, () => data);
             },
             update(update) {
-                adapter.updateNode(id, update);
+                routeUpdate(id, update);
             },
             getComponent(name) {
                 const node = adapter.getNode(id);
@@ -145,11 +181,11 @@ export function createScene(adapter) {
             },
             addComponent(type, properties) {
                 const key = type.toLowerCase();
-                adapter.updateNode(id, node => (Object.assign(Object.assign({}, node), { components: Object.assign(Object.assign({}, node.components), { [key]: createComponentData(type, properties) }) })));
+                routeUpdate(id, node => (Object.assign(Object.assign({}, node), { components: Object.assign(Object.assign({}, node.components), { [key]: createComponentData(type, properties) }) })));
                 return createComponent(id, key, type);
             },
             removeComponent(name) {
-                adapter.updateNode(id, node => {
+                routeUpdate(id, node => {
                     var _a;
                     const entry = findComponentEntry(node, name);
                     if (!entry)
@@ -169,13 +205,13 @@ export function createScene(adapter) {
             if (!mutate) {
                 return;
             }
-            adapter.updateNode(idOrUpdates, mutate);
+            routeUpdate(idOrUpdates, mutate);
             return;
         }
         if (Object.keys(idOrUpdates).length === 0) {
             return;
         }
-        adapter.updateNodes(idOrUpdates);
+        routeUpdates(idOrUpdates);
     }
     return {
         get rootId() {
@@ -196,5 +232,6 @@ export function createScene(adapter) {
         remove(id) {
             adapter.removeNode(id);
         },
+        batch,
     };
 }