react-three-game 0.0.108 → 0.0.109

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

@@ -0,0 +1,28 @@
+import type { Object3D, Texture } from "three";
+import type { GameObject, Prefab } from "./types";
+export declare enum PrefabEditorMode {
+    Edit = "edit",
+    Play = "play"
+}
+export type PrefabNode = Omit<GameObject, "children">;
+export interface Scene {
+    root: Object3D | null;
+    mode: PrefabEditorMode;
+    basePath: string;
+    get(id: string): GameObject | null;
+    getObject(id: string): Object3D | null;
+    getHandle<T = unknown>(id: string, kind: string): T | null;
+    getModel(path: string): Object3D | null;
+    add(node: GameObject, parentId?: string): GameObject;
+    update(id: string, fn: (node: PrefabNode) => PrefabNode): void;
+    replaceNode(id: string, node: GameObject): void;
+    remove(id: string): void;
+    duplicate(id: string): string | null;
+    move(draggedId: string, targetId: string, position: "before" | "inside"): void;
+    replace(prefab: Prefab): void;
+    addModel(path: string, model: Object3D): void;
+    addTexture(path: string, texture: Texture): void;
+    addSound(path: string, sound: AudioBuffer): void;
+}
+export declare const SceneContext: import("react").Context<Scene | null>;
+export declare function useScene(): Scene;

package/dist/tools/prefabeditor/SceneContext.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+export var PrefabEditorMode;
+(function (PrefabEditorMode) {
+    PrefabEditorMode["Edit"] = "edit";
+    PrefabEditorMode["Play"] = "play";
+})(PrefabEditorMode || (PrefabEditorMode = {}));
+export const SceneContext = createContext(null);
+export function useScene() {
+    const scene = useContext(SceneContext);
+    if (!scene) {
+        throw new Error("useScene must be used within a PrefabRoot or PrefabEditor scene provider");
+    }
+    return scene;
+}

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

@@ -1,7 +1,11 @@
 import { type ReactNode } from "react";
 import type { Object3D, Texture } from "three";
 export interface AssetRuntime {
+    registerObject: (id: string, object: Object3D | null) => void;
     registerHandle: (id: string, kind: string, handle: unknown) => void;
+    registerModel: (path: string, model: Object3D) => void;
+    registerTexture: (path: string, texture: Texture) => void;
+    registerSound: (path: string, sound: AudioBuffer) => void;
     getHandle: <T = unknown>(id: string, kind: string) => T | null;
     getModel: (path: string) => Object3D | null;
     getTexture: (path: string) => Texture | null;

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

@@ -38,7 +38,7 @@ export interface Component {
     name: string;
     /** Set when this component occupies a single slot on a node. Use a string to share a slot across component types. */
     disableSiblingComposition?: boolean | string;
-    Editor: FC<{
+    Editor?: FC<{
         node?: GameObject;
         component: ComponentData;
         onUpdate: (newComp: Record<string, unknown>) => void;

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

@@ -5,7 +5,7 @@ import { Mesh } from 'three';
 import { assetRef, assetRefs } from './ComponentRegistry';
 import { BooleanField, FieldGroup, Label, ListEditor, NumberInput, SelectInput, StringField } from './Input';
 import { useAssetRuntime } from '../assetRuntime';
-import { useEditorContext, useEditorRef } from '../PrefabEditor';
+import { useEditorContext, useEditorRef } from '../EditorContext';
 import { getRepeatAxesFromModelProperties, normalizeRepeatAxes } from '../InstanceProvider';
 import { base, colors, ui } from '../styles';
 import { decomposeModelToPrefabNodes } from '../modelPrefab';

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

@@ -8,12 +8,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import PrefabRoot from '../PrefabRoot';
-import { useEditorRef } from '../PrefabEditor';
+import { lazy, Suspense, useEffect, useState } from 'react';
+import { useEditorRef } from '../EditorContext';
 import { withBasePath } from '../utils';
 import { base, colors } from '../styles';
 import { FieldGroup, Label } from './Input';
+const PrefabRoot = lazy(() => import('../PrefabRoot'));
 function PrefabRefView({ properties, children, basePath = '' }) {
     var _a;
     const [loadedPrefab, setLoadedPrefab] = useState(null);
@@ -30,7 +30,7 @@ function PrefabRefView({ properties, children, basePath = '' }) {
             .catch(err => console.warn('[PrefabRef] Failed to load:', resolvedUrl, err));
         return () => { cancelled = true; };
     }, [resolvedUrl]);
-    return (_jsxs(_Fragment, { children: [loadedPrefab && _jsx(PrefabRoot, { data: loadedPrefab, editMode: false, basePath: basePath }), children] }));
+    return (_jsxs(_Fragment, { children: [loadedPrefab && (_jsx(Suspense, { fallback: null, children: _jsx(PrefabRoot, { data: loadedPrefab, editMode: false, basePath: basePath }) })), children] }));
 }
 function PrefabRefEditor({ node, component, onUpdate, basePath = '', }) {
     var _a, _b;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Label, Vector3Input } from "./Input";
-import { useEditorContext } from "../PrefabEditor";
+import { useEditorContext } from "../EditorContext";
 import { colors } from "../styles";
 const buttonStyle = {
     padding: '2px 6px',

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

@@ -1 +1,2 @@
 export declare const builtinComponents: import("./ComponentRegistry").Component[];
+export declare function registerBuiltinComponents(): void;

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

@@ -15,6 +15,7 @@ import EnvironmentComponent from "./EnvironmentComponent";
 import CameraComponent from "./CameraComponent";
 import SoundComponent from "./SoundComponent";
 import DataComponent from "./DataComponent";
+import { registerComponent } from "./ComponentRegistry";
 // this controls the order of components in the editor, and also which components are available to add
 export const builtinComponents = [
     TransformComponent,
@@ -38,3 +39,10 @@ export const builtinComponents = [
     DataComponent,
     PrefabRefComponent,
 ];
+let didRegisterBuiltinComponents = false;
+export function registerBuiltinComponents() {
+    if (didRegisterBuiltinComponents)
+        return;
+    builtinComponents.forEach(registerComponent);
+    didRegisterBuiltinComponents = true;
+}

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

@@ -0,0 +1,4 @@
+import { type Component } from "./ComponentRegistry";
+declare const runtimeComponents: Component[];
+export declare function registerRuntimeComponents(): void;
+export { runtimeComponents };

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

@@ -0,0 +1,372 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Environment } from "@react-three/drei";
+import { useFrame, useThree } from "@react-three/fiber";
+import { lazy, Suspense, useEffect, useMemo, useRef, useState } from "react";
+import { AudioListener, ClampToEdgeWrapping, DoubleSide, LinearFilter, LinearMipmapLinearFilter, Mesh, NoColorSpace, RepeatWrapping, SRGBColorSpace } from "three";
+import { Text } from "three-text/three/react";
+import { assetRef, assetRefs, getComponentDef, registerComponent } from "./ComponentRegistry";
+import { useAssetRuntime, useNode } from "../assetRuntime";
+import { gameEvents } from "../GameEvents";
+import { withBasePath } from "../runtimeUtils";
+const PrefabRoot = lazy(() => import("../PrefabRoot"));
+const RuntimeText = Text;
+function GeometryView({ properties }) {
+    const { geometryType } = properties;
+    const args = Array.isArray(properties.args) ? properties.args : [];
+    const geometryKey = `${geometryType !== null && geometryType !== void 0 ? geometryType : "box"}:${JSON.stringify(args)}`;
+    switch (geometryType) {
+        case "sphere":
+            return _jsx("sphereGeometry", { args: args }, geometryKey);
+        case "plane":
+            return _jsx("planeGeometry", { args: args }, geometryKey);
+        case "cylinder":
+            return _jsx("cylinderGeometry", { args: args }, geometryKey);
+        case "box":
+        default:
+            return _jsx("boxGeometry", { args: (args.length ? args : [1, 1, 1]) }, geometryKey);
+    }
+}
+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 numberArray(value, fallback) {
+    return Array.isArray(value) && value.every(entry => typeof entry === "number" && Number.isFinite(entry))
+        ? value
+        : fallback;
+}
+function indexArray(indices) {
+    if (indices.length === 0)
+        return null;
+    return Math.max(...indices) > 65535 ? new Uint32Array(indices) : new Uint16Array(indices);
+}
+function BufferGeometryView({ properties }) {
+    const positions = numberArray(properties.positions, DEFAULT_TRIANGLE_POSITIONS);
+    const indices = numberArray(properties.indices, DEFAULT_TRIANGLE_INDICES);
+    const normals = numberArray(properties.normals, []);
+    const uvs = numberArray(properties.uvs, DEFAULT_TRIANGLE_UVS);
+    const hasNormals = normals.length === positions.length;
+    const hasUvs = uvs.length >= (positions.length / 3) * 2;
+    const indicesArray = indexArray(indices);
+    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] }), indicesArray ? _jsx("bufferAttribute", { attach: "index", args: [indicesArray, 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] }));
+}
+function ModelView({ properties, children }) {
+    const { getModel } = useAssetRuntime();
+    const sourceModel = properties.filename ? getModel(properties.filename) : null;
+    const clonedModel = useMemo(() => {
+        if (!sourceModel || !properties.filename || properties.instanced)
+            return null;
+        const clone = sourceModel.clone();
+        clone.traverse((object) => {
+            if (object instanceof Mesh) {
+                object.castShadow = true;
+                object.receiveShadow = true;
+            }
+        });
+        return clone;
+    }, [properties.filename, properties.instanced, sourceModel]);
+    return clonedModel ? _jsx("primitive", { object: clonedModel, children: children }) : _jsx(_Fragment, { children: children });
+}
+function configureTexture(texture, properties, colorSpace) {
+    var _a, _b, _c, _d;
+    if (!texture)
+        return;
+    const repeat = Boolean(properties.repeat);
+    const repeatCount = Array.isArray(properties.repeatCount) ? properties.repeatCount : [1, 1];
+    const offset = Array.isArray(properties.offset) ? properties.offset : [0, 0];
+    texture.wrapS = texture.wrapT = repeat ? RepeatWrapping : ClampToEdgeWrapping;
+    texture.repeat.set(Number((_a = repeatCount[0]) !== null && _a !== void 0 ? _a : 1), Number((_b = repeatCount[1]) !== null && _b !== void 0 ? _b : 1));
+    texture.offset.set(Number((_c = offset[0]) !== null && _c !== void 0 ? _c : 0), Number((_d = offset[1]) !== null && _d !== void 0 ? _d : 0));
+    texture.colorSpace = colorSpace;
+    texture.generateMipmaps = properties.generateMipmaps !== false;
+    texture.minFilter = (properties.minFilter === "LinearFilter" ? LinearFilter : LinearMipmapLinearFilter);
+    texture.magFilter = LinearFilter;
+    texture.needsUpdate = true;
+}
+function useConfiguredTexture(path, properties, colorSpace) {
+    const { getTexture } = useAssetRuntime();
+    const sourceTexture = typeof path === "string" ? getTexture(path) : null;
+    const texture = useMemo(() => sourceTexture === null || sourceTexture === void 0 ? void 0 : sourceTexture.clone(), [sourceTexture]);
+    useEffect(() => {
+        configureTexture(texture, properties, colorSpace);
+    }, [properties, texture, colorSpace]);
+    return texture !== null && texture !== void 0 ? texture : null;
+}
+function MaterialView({ properties }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const materialType = (_a = properties.materialType) !== null && _a !== void 0 ? _a : "standard";
+    const colorMap = useConfiguredTexture(properties.texture, properties, SRGBColorSpace);
+    const normalMap = useConfiguredTexture(properties.normalMapTexture, properties, NoColorSpace);
+    const offsetSpeed = Array.isArray(properties.offsetSpeed) ? properties.offsetSpeed : [0, 0];
+    const animateOffset = Boolean(properties.animateOffset);
+    useFrame((_state, delta) => {
+        var _a, _b;
+        if (!animateOffset)
+            return;
+        for (const texture of [colorMap, normalMap]) {
+            if (!texture)
+                continue;
+            texture.offset.x += Number((_a = offsetSpeed[0]) !== null && _a !== void 0 ? _a : 0) * delta;
+            texture.offset.y += Number((_b = offsetSpeed[1]) !== null && _b !== void 0 ? _b : 0) * delta;
+        }
+    });
+    const sharedProps = {
+        attach: (_b = properties.attach) !== null && _b !== void 0 ? _b : "material",
+        color: (_c = properties.color) !== null && _c !== void 0 ? _c : "#ffffff",
+        opacity: (_d = properties.opacity) !== null && _d !== void 0 ? _d : 1,
+        transparent: Boolean(properties.transparent),
+        wireframe: Boolean(properties.wireframe),
+        toneMapped: properties.toneMapped !== false,
+        side: DoubleSide,
+        map: colorMap,
+    };
+    if (materialType === "basic")
+        return _jsx("meshBasicMaterial", Object.assign({}, sharedProps));
+    if (materialType === "sprite") {
+        return (_jsx("spriteMaterial", Object.assign({}, sharedProps, { rotation: (_e = properties.rotation) !== null && _e !== void 0 ? _e : 0, sizeAttenuation: properties.sizeAttenuation !== false, depthTest: properties.depthTest !== false, depthWrite: Boolean(properties.depthWrite) })));
+    }
+    const normalScale = Array.isArray(properties.normalScale) ? properties.normalScale : [1, 1];
+    return (_jsx("meshStandardMaterial", Object.assign({}, sharedProps, { metalness: (_f = properties.metalness) !== null && _f !== void 0 ? _f : 0, roughness: (_g = properties.roughness) !== null && _g !== void 0 ? _g : 1, normalMap: normalMap, normalScale: normalMap ? [Number((_h = normalScale[0]) !== null && _h !== void 0 ? _h : 1), Number((_j = normalScale[1]) !== null && _j !== void 0 ? _j : 1)] : undefined })));
+}
+function TextView({ properties, children, basePath = "" }) {
+    const { text = "", font, size, depth, width, align, color } = properties;
+    const textContent = String(text || "");
+    const resolvedFont = typeof font === "string" ? withBasePath(basePath, font) : undefined;
+    const [offset, setOffset] = useState([0, 0, 0]);
+    useEffect(() => {
+        Text.setHarfBuzzPath(withBasePath(basePath, "/fonts/hb.wasm"));
+    }, [basePath]);
+    if (!textContent)
+        return null;
+    const textProps = {
+        size: size,
+        depth: depth,
+        layout: { align: align, width: width },
+        color: color,
+        onLoad: (_geometry, info) => {
+            const bounds = info === null || info === void 0 ? void 0 : info.planeBounds;
+            if (!bounds)
+                return;
+            const x = align === "center" ? -(bounds.min.x + bounds.max.x) / 2 : align === "right" ? -bounds.max.x : -bounds.min.x;
+            setOffset([x, -(bounds.min.y + bounds.max.y) / 2, 0]);
+        },
+    };
+    if (resolvedFont)
+        textProps.font = resolvedFont;
+    return (_jsxs("group", { position: offset, children: [_jsx(RuntimeText, Object.assign({}, textProps, { children: textContent })), children] }));
+}
+function merge(defaults, properties) {
+    return Object.assign(Object.assign({}, defaults), properties);
+}
+function AmbientLightView({ properties, children }) {
+    const props = merge({ color: "#ffffff", intensity: 1 }, properties);
+    return _jsxs(_Fragment, { children: [_jsx("ambientLight", { color: props.color, intensity: props.intensity }), children] });
+}
+function PointLightView({ properties, children }) {
+    const props = merge({ color: "#ffffff", intensity: 1, distance: 0, decay: 2 }, properties);
+    return (_jsx("pointLight", { color: props.color, intensity: props.intensity, distance: props.distance, decay: props.decay, children: children }));
+}
+function DirectionalLightView({ properties, children }) {
+    const props = merge({ color: "#ffffff", intensity: 1, castShadow: false }, properties);
+    return _jsx("directionalLight", { color: props.color, intensity: props.intensity, castShadow: Boolean(props.castShadow), children: children });
+}
+function SpotLightView({ properties, children }) {
+    const props = merge({ color: "#ffffff", intensity: 1, angle: Math.PI / 3, penumbra: 0, distance: 0, decay: 2, castShadow: false }, properties);
+    return (_jsx("spotLight", { color: props.color, intensity: props.intensity, angle: props.angle, penumbra: props.penumbra, distance: props.distance, decay: props.decay, castShadow: Boolean(props.castShadow), children: children }));
+}
+function CameraView({ properties, children }) {
+    var _a, _b, _c;
+    const projection = (_a = properties.projection) !== null && _a !== void 0 ? _a : "perspective";
+    if (projection === "orthographic") {
+        return _jsx("orthographicCamera", { zoom: (_b = properties.zoom) !== null && _b !== void 0 ? _b : 1, children: children });
+    }
+    return _jsx("perspectiveCamera", { fov: (_c = properties.fov) !== null && _c !== void 0 ? _c : 50, children: children });
+}
+function EnvironmentView({ properties, children }) {
+    var _a, _b;
+    const { getAssetRevision } = useAssetRuntime();
+    const intensity = (_a = properties.intensity) !== null && _a !== void 0 ? _a : 1;
+    const resolution = (_b = properties.resolution) !== null && _b !== void 0 ? _b : 256;
+    return (_jsx(Environment, { background: true, environmentIntensity: intensity, resolution: resolution, frames: 1, children: children }, `${getAssetRevision()}::${intensity}::${resolution}`));
+}
+function PrefabRefView({ properties, children, basePath = "" }) {
+    const [loadedPrefab, setLoadedPrefab] = useState(null);
+    const resolvedUrl = properties.url ? withBasePath(basePath, properties.url) : "";
+    useEffect(() => {
+        if (!resolvedUrl)
+            return undefined;
+        let cancelled = false;
+        void fetch(resolvedUrl)
+            .then(response => response.json())
+            .then(data => {
+            if (!cancelled)
+                setLoadedPrefab(data);
+        })
+            .catch(error => console.warn("[PrefabRef] Failed to load:", resolvedUrl, error));
+        return () => {
+            cancelled = true;
+        };
+    }, [resolvedUrl]);
+    return (_jsxs(_Fragment, { children: [loadedPrefab ? (_jsx(Suspense, { fallback: null, children: _jsx(PrefabRoot, { data: loadedPrefab, editMode: false, basePath: basePath }) })) : null, children] }));
+}
+let sharedAudioListener = null;
+function getSharedAudioListener() {
+    if (!sharedAudioListener)
+        sharedAudioListener = new AudioListener();
+    return sharedAudioListener;
+}
+function clampRange(min, max, fallbackMin, fallbackMax) {
+    const safeMin = Number.isFinite(min) ? Number(min) : fallbackMin;
+    const safeMax = Number.isFinite(max) ? Number(max) : fallbackMax;
+    return safeMin <= safeMax ? [safeMin, safeMax] : [safeMax, safeMin];
+}
+function sampleRange(min, max) {
+    return min + Math.random() * (max - min);
+}
+function getPitchValue(properties) {
+    if (properties.randomizePitch) {
+        const [pitchFloor, pitchCeiling] = clampRange(properties.minPitch, properties.maxPitch, 0.96, 1.04);
+        return sampleRange(pitchFloor, pitchCeiling);
+    }
+    return Number.isFinite(properties.pitch) ? Number(properties.pitch) : 1;
+}
+function getVolumeValue(properties) {
+    if (properties.randomizeVolume) {
+        const [volumeFloor, volumeCeiling] = clampRange(properties.minVolume, properties.maxVolume, 0.9, 1);
+        return sampleRange(volumeFloor, volumeCeiling);
+    }
+    return Number.isFinite(properties.volume) ? Number(properties.volume) : 1;
+}
+function resolveClipPaths({ clips, clipMode }) {
+    const paths = (clips !== null && clips !== void 0 ? clips : []).map(clip => clip.trim()).filter(Boolean);
+    return { paths, mode: paths.length > 0 ? clipMode !== null && clipMode !== void 0 ? clipMode : "random" : "single" };
+}
+function pickClip(paths, mode, sequenceIndexRef) {
+    if (paths.length <= 1 || mode === "single")
+        return paths[0];
+    if (mode === "sequence") {
+        const clip = paths[sequenceIndexRef.current % paths.length];
+        sequenceIndexRef.current += 1;
+        return clip;
+    }
+    return paths[Math.floor(Math.random() * paths.length)];
+}
+function payloadMatchesNode(nodeId, payload) {
+    if (!nodeId || !payload || typeof payload !== "object")
+        return true;
+    const eventPayload = payload;
+    const relatedNodeIds = [
+        eventPayload.nodeId,
+        eventPayload.sourceEntityId,
+        eventPayload.sourceNodeId,
+        eventPayload.targetEntityId,
+        eventPayload.targetNodeId,
+        eventPayload.instanceEntityId,
+    ].filter((value) => typeof value === "string");
+    return relatedNodeIds.length > 0 ? relatedNodeIds.includes(nodeId) : true;
+}
+function playBufferedAudio(audio, buffer, properties) {
+    void audio.listener.context.resume();
+    if (audio.isPlaying)
+        audio.stop();
+    audio.setBuffer(buffer);
+    audio.setLoop(Boolean(properties.loop));
+    audio.setPlaybackRate(getPitchValue(properties));
+    audio.setVolume(getVolumeValue(properties));
+    audio.play();
+}
+function SoundView({ properties, children }) {
+    const { getSound } = useAssetRuntime();
+    const { editMode, nodeId } = useNode();
+    const { camera } = useThree();
+    const { eventName, autoplay = false, positional = false, refDistance = 1, maxDistance = 24, rolloffFactor = 1, distanceModel = "inverse" } = properties;
+    const sequenceIndexRef = useRef(0);
+    const listenerRef = useRef(null);
+    const positionalAudioRef = useRef(null);
+    const { paths, mode } = resolveClipPaths(properties);
+    if (!listenerRef.current)
+        listenerRef.current = getSharedAudioListener();
+    useEffect(() => {
+        var _a;
+        const listener = listenerRef.current;
+        if (!listener)
+            return;
+        if (listener.parent !== camera) {
+            (_a = listener.parent) === null || _a === void 0 ? void 0 : _a.remove(listener);
+            camera.add(listener);
+        }
+        return () => {
+            if (listener.parent === camera)
+                camera.remove(listener);
+        };
+    }, [camera]);
+    useEffect(() => {
+        const audio = positionalAudioRef.current;
+        if (!audio)
+            return;
+        audio.setRefDistance(positional ? refDistance : Math.max(refDistance, 1));
+        audio.setMaxDistance(positional ? maxDistance : 1000000);
+        audio.setRolloffFactor(positional ? rolloffFactor : 0);
+        audio.setDistanceModel(positional ? distanceModel : "inverse");
+    }, [distanceModel, maxDistance, positional, refDistance, rolloffFactor]);
+    useEffect(() => {
+        if (editMode || paths.length === 0 || !eventName)
+            return;
+        return gameEvents.on(eventName, (payload) => {
+            if (!payloadMatchesNode(nodeId, payload))
+                return;
+            const clip = pickClip(paths, mode, sequenceIndexRef);
+            const audio = positionalAudioRef.current;
+            const buffer = clip ? getSound(clip) : null;
+            if (audio && buffer)
+                playBufferedAudio(audio, buffer, properties);
+        });
+    }, [editMode, eventName, getSound, mode, nodeId, paths, properties]);
+    useEffect(() => {
+        if (editMode || !autoplay || paths.length === 0)
+            return;
+        const clip = pickClip(paths, mode, sequenceIndexRef);
+        const audio = positionalAudioRef.current;
+        const buffer = clip ? getSound(clip) : null;
+        if (audio && buffer)
+            playBufferedAudio(audio, buffer, properties);
+        return () => {
+            if (audio === null || audio === void 0 ? void 0 : audio.isPlaying)
+                audio.stop();
+        };
+    }, [autoplay, editMode, getSound, mode, paths, properties]);
+    return (_jsxs(_Fragment, { children: [listenerRef.current ? _jsx("positionalAudio", { ref: positionalAudioRef, args: [listenerRef.current] }) : null, children] }));
+}
+const runtimeComponents = [
+    { name: "Transform", disableSiblingComposition: true, defaultProperties: {} },
+    { name: "Geometry", disableSiblingComposition: "geometry", View: GeometryView, defaultProperties: { geometryType: "box", args: [1, 1, 1], emitClickEvent: false, clickEventName: "" } },
+    { name: "BufferGeometry", disableSiblingComposition: "geometry", View: BufferGeometryView, defaultProperties: { positions: DEFAULT_TRIANGLE_POSITIONS, indices: DEFAULT_TRIANGLE_INDICES, normals: [], uvs: DEFAULT_TRIANGLE_UVS, groups: [], computeVertexNormals: true, emitClickEvent: false, clickEventName: "" } },
+    { name: "Model", View: ModelView, defaultProperties: {}, getAssetRefs: properties => assetRefs(assetRef("model", properties.filename)) },
+    { name: "Sprite", disableSiblingComposition: true, defaultProperties: { center: [0.5, 0.5], emitClickEvent: false, clickEventName: "node:click" } },
+    { name: "Text", View: TextView, defaultProperties: { text: "Hello World", color: "#ffffff", size: 1, depth: 0.05, align: "center" } },
+    { name: "Material", View: MaterialView, defaultProperties: { attach: "material", materialType: "standard", color: "#ffffff", toneMapped: true, wireframe: false, transparent: false, opacity: 1, sizeAttenuation: true, offset: [0, 0], animateOffset: false, offsetSpeed: [0, 0], metalness: 0, roughness: 1 }, getAssetRefs: properties => assetRefs(assetRef("texture", properties.texture), assetRef("texture", properties.normalMapTexture)) },
+    { name: "SpotLight", View: SpotLightView, defaultProperties: {}, getAssetRefs: properties => assetRefs(assetRef("texture", properties.map)) },
+    { name: "PointLight", View: PointLightView, defaultProperties: {} },
+    { name: "DirectionalLight", View: DirectionalLightView, defaultProperties: {} },
+    { name: "AmbientLight", View: AmbientLightView, defaultProperties: {} },
+    { name: "Environment", disableSiblingComposition: true, View: EnvironmentView, defaultProperties: {} },
+    { name: "Camera", disableSiblingComposition: true, View: CameraView, defaultProperties: { projection: "perspective", fov: 50, near: 0.1, zoom: 1, far: 1000 } },
+    { name: "Sound", View: SoundView, defaultProperties: { eventName: "", autoplay: false, loop: false, clips: [], clipMode: "single", positional: false, refDistance: 1, maxDistance: 24, rolloffFactor: 1, distanceModel: "inverse", pitch: 1, randomizePitch: false, minPitch: 0.96, maxPitch: 1.04, volume: 1, randomizeVolume: false, minVolume: 0.9, maxVolume: 1 }, getAssetRefs: (properties) => Array.isArray(properties.clips) ? properties.clips.filter((clip) => typeof clip === "string").map(path => ({ type: "sound", path })) : [] },
+    { name: "Data", defaultProperties: { values: {} } },
+    { name: "PrefabRef", View: PrefabRefView, defaultProperties: { url: "" } },
+];
+let didRegisterRuntimeComponents = false;
+export function registerRuntimeComponents() {
+    if (didRegisterRuntimeComponents)
+        return;
+    runtimeComponents.forEach(component => {
+        if (!getComponentDef(component.name))
+            registerComponent(component);
+    });
+    didRegisterRuntimeComponents = true;
+}
+export { runtimeComponents };

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

@@ -15,7 +15,7 @@ export type PrefabStoreApi = StoreApi<PrefabStoreState>;
 export declare function PrefabStoreProvider({ store, children, }: {
     store: PrefabStoreApi;
     children: ReactNode;
-}): import("react").FunctionComponentElement<import("react").ProviderProps<PrefabStoreApi | null>>;
+}): import("react").FunctionComponentElement<import("react").FragmentProps> | import("react").FunctionComponentElement<import("react").ProviderProps<PrefabStoreApi | null>>;
 export declare function usePrefabStoreApi(): PrefabStoreApi;
 export declare function usePrefabStore<T>(selector: (state: PrefabStoreState) => T): T;
 export declare function usePrefabRootId(): string;

package/dist/tools/prefabeditor/prefabStore.js

@@ -1,4 +1,4 @@
-import { createContext, createElement, useContext } from "react";
+import { Fragment, createContext, createElement, useContext } from "react";
 import { subscribeWithSelector } from "zustand/middleware";
 import { useStore } from "zustand";
 import { createStore } from "zustand/vanilla";
@@ -45,6 +45,10 @@ function insertSubtreeIntoGraph(node, parentId, next) {
     addAssetRefs(next.assetRefCounts, collectSubtreeAssetRefs(node));
 }
 export function PrefabStoreProvider({ store, children, }) {
+    const parentStore = useContext(PrefabStoreContext);
+    if (parentStore === store) {
+        return createElement(Fragment, null, children);
+    }
     return createElement(PrefabStoreContext.Provider, { value: store }, children);
 }
 export function usePrefabStoreApi() {

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

@@ -0,0 +1,10 @@
+import { Matrix4 } from "three";
+export declare function isExternalPath(path: string): boolean;
+export declare function withBasePath(basePath: string | undefined, path: string): string;
+export declare function decompose(m: Matrix4): {
+    position: [number, number, number];
+    rotation: [number, number, number];
+    scale: [number, number, number];
+};
+/** Build a local Matrix4 from position/rotation/scale arrays. */
+export declare function composeTransform(position?: [number, number, number], rotation?: [number, number, number], scale?: [number, number, number]): Matrix4;

package/dist/tools/prefabeditor/runtimeUtils.js

@@ -0,0 +1,30 @@
+import { Euler, Matrix4, Quaternion, Vector3 } from "three";
+export function isExternalPath(path) {
+    return (path.startsWith("data:") ||
+        path.startsWith("http://") ||
+        path.startsWith("https://"));
+}
+export function withBasePath(basePath, path) {
+    if (!path)
+        return (basePath !== null && basePath !== void 0 ? basePath : "").replace(/\/$/, "");
+    if (isExternalPath(path))
+        return path;
+    const normalizedBasePath = (basePath !== null && basePath !== void 0 ? basePath : "").replace(/\/$/, "");
+    return path.startsWith("/") ? `${normalizedBasePath}${path}` : `${normalizedBasePath}/${path}`;
+}
+export function decompose(m) {
+    const p = new Vector3();
+    const q = new Quaternion();
+    const s = new Vector3();
+    m.decompose(p, q, s);
+    const e = new Euler().setFromQuaternion(q);
+    return {
+        position: [p.x, p.y, p.z],
+        rotation: [e.x, e.y, e.z],
+        scale: [s.x, s.y, s.z],
+    };
+}
+/** Build a local Matrix4 from position/rotation/scale arrays. */
+export function composeTransform(position = [0, 0, 0], rotation = [0, 0, 0], scale = [1, 1, 1]) {
+    return new Matrix4().compose(new Vector3(...position), new Quaternion().setFromEuler(new Euler(...rotation)), new Vector3(...scale));
+}

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

@@ -1,7 +1,6 @@
 import { GameObject, Prefab } from "./types";
 import { Matrix4, Object3D, Vector3 } from "three";
-export declare function isExternalPath(path: string): boolean;
-export declare function withBasePath(basePath: string | undefined, path: string): string;
+export { composeTransform, decompose, isExternalPath, withBasePath } from "./runtimeUtils";
 export interface ExportGLBOptions {
     filename?: string;
 }
@@ -23,13 +22,6 @@ export declare function exportGLBData(sceneRoot: Object3D): Promise<ArrayBuffer>
  */
 export declare function exportGLB(sceneRoot: Object3D, options?: ExportGLBOptions): Promise<ArrayBuffer>;
 export declare function focusCameraOnObject(object: Object3D, camera: Object3D, target: Vector3, update?: () => void): void;
-export declare function decompose(m: Matrix4): {
-    position: [number, number, number];
-    rotation: [number, number, number];
-    scale: [number, number, number];
-};
-/** Build a local Matrix4 from position/rotation/scale arrays. */
-export declare function composeTransform(position?: [number, number, number], rotation?: [number, number, number], scale?: [number, number, number]): Matrix4;
 /** Compute the parent world matrix for a node using the normalized store data */
 export declare function computeParentWorldMatrix(state: {
     nodesById: Record<string, {