react-three-game 0.0.85 → 0.0.86

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -13,10 +13,9 @@ 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";
+import { findComponent, getNodeUserData } from "./types";
 import { getComponentDef, getComponentAssetRefs, registerComponent } from "./components/ComponentRegistry";
 import { builtinComponents } from "./components";
 import { loadModel, loadSound, loadTexture } from "../dragdrop";
@@ -24,7 +23,7 @@ import { GameInstance, GameInstanceProvider, getRepeatAxesFromModelProperties, u
 import { composeTransform, decompose } from "./utils";
 import { isPhysicsProps } from "./components/PhysicsComponent";
 import { createPrefabStore, PrefabStoreProvider, useOptionalPrefabStoreApi, usePrefabChildIds, usePrefabNode, usePrefabRootId } from "./prefabStore";
-import { AssetRuntimeContext, EntityRuntimeScope, createRuntimeEngine } from "./runtime";
+import { AssetRuntimeContext, EntityRuntimeScope } from "./assetRuntime";
 import { sound as soundManager } from "../../helpers/SoundManager";
 builtinComponents.forEach(registerComponent);
 const IDENTITY = new Matrix4();
@@ -45,6 +44,36 @@ function isNodeReady(node, loadedModels) {
         return true;
     return Boolean(loadedModels[model.properties.filename]);
 }
+function emitNativeEvent(type, detail) {
+    const trimmedType = type === null || type === void 0 ? void 0 : type.trim();
+    if (!trimmedType || typeof window === 'undefined')
+        return;
+    window.dispatchEvent(new CustomEvent(trimmedType, { detail }));
+}
+function getNodeClickEventName(node) {
+    var _a;
+    const clickComponents = [
+        findComponent(node, 'BufferGeometry'),
+        findComponent(node, 'Geometry'),
+    ];
+    for (const component of clickComponents) {
+        if (!((_a = component === null || component === void 0 ? void 0 : component.properties) === null || _a === void 0 ? void 0 : _a.emitClickEvent))
+            continue;
+        const eventName = component.properties.clickEventName;
+        if (typeof eventName === 'string' && eventName.trim()) {
+            return eventName.trim();
+        }
+    }
+    return null;
+}
+function getNodeMetadataProps(node) {
+    var _a, _b;
+    const nodeName = (_b = (_a = node.name) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
+    return {
+        name: nodeName,
+        userData: Object.assign(Object.assign({ prefabNodeId: node.id }, (nodeName ? { prefabNodeName: nodeName } : {})), getNodeUserData(node)),
+    };
+}
 export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSelect, onClick, onObjectRefChange, basePath = "" }, ref) => {
     var _a;
     const [models, setModels] = useState({});
@@ -94,29 +123,13 @@ 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, runtimeEngine]);
+    }, [onObjectRefChange]);
     const registerRigidBodyRef = useCallback((id, rb) => {
         rigidBodyRefs.current.set(id, rb);
-        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);
@@ -189,15 +202,32 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
         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 }) }) }));
+    const runtimeContent = _jsx(AssetRuntimeContext.Provider, { value: assetRuntime, children: content });
     if (!shouldProvideStoreContext) {
-        return _jsx(AssetRuntimeContext.Provider, { value: assetRuntime, children: content });
+        return runtimeContent;
     }
-    return _jsx(PrefabStoreProvider, { store: resolvedStore, children: _jsx(AssetRuntimeContext.Provider, { value: assetRuntime, children: content }) });
+    return _jsx(PrefabStoreProvider, { store: resolvedStore, children: runtimeContent });
 });
 function StoreRootNode(props) {
     const rootId = usePrefabRootId();
     return _jsx(GameObjectRenderer, Object.assign({}, props, { nodeId: rootId }));
 }
+function emitNodePointerEvent(eventName, event, nodeId, node, fallbackObject) {
+    var _a;
+    if (!eventName)
+        return;
+    emitNativeEvent(eventName, {
+        nodeId,
+        node,
+        object: (_a = event.object) !== null && _a !== void 0 ? _a : fallbackObject,
+        button: event.button,
+        altKey: event.nativeEvent.altKey,
+        ctrlKey: event.nativeEvent.ctrlKey,
+        metaKey: event.nativeEvent.metaKey,
+        shiftKey: event.nativeEvent.shiftKey,
+        r3fEvent: event,
+    });
+}
 export function GameObjectRenderer(props) {
     var _a, _b;
     const node = usePrefabNode(props.nodeId);
@@ -221,20 +251,19 @@ export function GameObjectRenderer(props) {
         : _jsx(StandardNode, Object.assign({}, props), key);
 }
 function InstancedNode({ nodeId, parentMatrix = IDENTITY, editMode, registerRef, onSelect, onClick }) {
-    var _a, _b, _c;
+    var _a, _b;
     const gameObject = usePrefabNode(nodeId);
     if (!gameObject)
         return null;
     const localTransform = getNodeTransformProps(gameObject);
     const isLocked = Boolean(gameObject.locked);
-    const clickComponent = findComponent(gameObject, "Click");
-    const clickable = Boolean(clickComponent);
-    const clickEventName = (_a = clickComponent === null || clickComponent === void 0 ? void 0 : clickComponent.properties) === null || _a === void 0 ? void 0 : _a.eventName;
+    const metadataProps = getNodeMetadataProps(gameObject);
+    const groupProps = Object.assign(Object.assign({}, metadataProps), { position: localTransform.position, rotation: localTransform.rotation, scale: localTransform.scale });
     const physicsData = findComponent(gameObject, "Physics");
     const physicsProps = isPhysicsProps(physicsData === null || physicsData === void 0 ? void 0 : physicsData.properties)
         ? physicsData === null || physicsData === void 0 ? void 0 : physicsData.properties
         : undefined;
-    const modelUrl = (_c = (_b = findComponent(gameObject, "Model")) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.filename;
+    const modelUrl = (_b = (_a = findComponent(gameObject, "Model")) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.filename;
     const instances = useMemo(() => buildRepeatedInstances(gameObject, parentMatrix, modelUrl, physicsProps), [gameObject, modelUrl, parentMatrix, physicsProps]);
     const groupRef = useRef(null);
     const handleGroupRef = useCallback((object) => {
@@ -243,22 +272,27 @@ function InstancedNode({ nodeId, parentMatrix = IDENTITY, editMode, registerRef,
             registerRef(nodeId, object);
         }
     }, [editMode, nodeId, registerRef]);
-    const editClickHandlers = useClickValid(!!editMode && !isLocked, (e) => {
+    const editClickHandlers = useClickValid(!!editMode && !isLocked, (event) => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeId);
-        onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event, gameObject);
     });
+    const renderedInstances = instances.map(instance => (_jsx(GameInstance, { id: instance.id, sourceId: gameObject.id, modelUrl: instance.modelUrl, position: instance.position, rotation: instance.rotation, scale: instance.scale, locked: isLocked, physics: instance.physics }, instance.id)));
     if (editMode) {
-        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 (_jsxs(_Fragment, { children: [_jsx("group", Object.assign({ ref: handleGroupRef }, groupProps, editClickHandlers, { children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) })), renderedInstances] }));
     }
-    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))) }));
+    return _jsx(_Fragment, { children: renderedInstances });
 }
 function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, loadedModels, editMode, parentMatrix = IDENTITY, }) {
     var _a, _b;
     const gameObject = usePrefabNode(nodeId);
     const childIds = usePrefabChildIds(nodeId);
+    if (!gameObject)
+        return null;
     const isSelected = selectedId === nodeId;
-    const isLocked = Boolean(gameObject === null || gameObject === void 0 ? void 0 : gameObject.locked);
+    const isLocked = Boolean(gameObject.locked);
     const stillInstanced = useInstanceCheck(nodeId);
+    const clickEventName = getNodeClickEventName(gameObject);
+    const metadataProps = getNodeMetadataProps(gameObject);
     const groupRef = useRef(null);
     const helperRef = useRef(null);
     const handleGroupRef = useCallback((object) => {
@@ -268,27 +302,43 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, load
     const handleHelperRef = useCallback((object) => {
         helperRef.current = object;
     }, []);
-    const clickHandlers = useClickValid(!!editMode && !isLocked, (e) => {
+    const handleEditGroupRef = useCallback((object) => {
+        handleGroupRef(object);
+        handleHelperRef(object);
+    }, [handleGroupRef, handleHelperRef]);
+    const editClickHandlers = useClickValid(!!editMode && !isLocked, (event) => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeId);
-        if (gameObject)
-            onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event, gameObject);
     });
+    const primaryClickHandlers = !editMode && (clickEventName || onClick)
+        ? {
+            onClick: (event) => {
+                event.stopPropagation();
+                emitNodePointerEvent(clickEventName, event, nodeId, gameObject, groupRef.current);
+                onClick === null || onClick === void 0 ? void 0 : onClick(event, gameObject);
+            },
+        }
+        : undefined;
     useHelper(editMode && isSelected ? helperRef : null, BoxHelper, "cyan");
-    if (!gameObject)
-        return null;
     const world = parentMatrix.clone().multiply(compose(gameObject));
     const physics = findComponent(gameObject, "Physics");
     const ready = isNodeReady(gameObject, loadedModels);
     const hasPhysics = physics && ready && !stillInstanced;
     const transform = getNodeTransformProps(gameObject);
+    const transformProps = {
+        position: transform.position,
+        rotation: transform.rotation,
+        scale: transform.scale,
+    };
+    const groupProps = Object.assign(Object.assign({}, metadataProps), transformProps);
     const physicsDef = hasPhysics ? getComponentDef(physics.type) : null;
     const isInstanced = (_b = (_a = findComponent(gameObject, "Model")) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.instanced;
     const physicsKey = `physics_${nodeId}_${isInstanced ? 'instanced' : 'standard'}`;
     const renderCtx = { loadedModels, editMode, registerRef };
     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 inner = renderCompositionNode(gameObject, renderCtx, primaryClickHandlers, 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: 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 })) }));
+    return (_jsx(EntityRuntimeScope, { nodeId: nodeId, editMode: editMode, isSelected: isSelected, children: editMode ? (_jsxs(_Fragment, { children: [_jsxs("group", Object.assign({ ref: handleEditGroupRef }, groupProps, editClickHandlers, { children: [_jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }), inner] })), hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, Object.assign({ properties: physics.properties }, transformProps, { children: physicsInner }), physicsKey)) : null] })) : hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, Object.assign({ properties: physics.properties }, transformProps, { children: _jsx("group", Object.assign({ ref: handleGroupRef }, metadataProps, { children: inner })) }), physicsKey)) : (_jsx("group", Object.assign({ ref: handleGroupRef }, groupProps, { children: inner }))) }));
 }
 function isRendererHandledComponent(componentType) {
     return componentType === "Transform"
@@ -383,11 +433,11 @@ function getNodeTransformProps(node) {
         scale: (_d = t === null || t === void 0 ? void 0 : t.scale) !== null && _d !== void 0 ? _d : [1, 1, 1],
     };
 }
-function renderCompositionNode(gameObject, ctx, childNodes) {
-    const primaryContent = renderNodePrimaryContent(gameObject, ctx);
+function renderCompositionNode(gameObject, ctx, primaryClickHandlers, childNodes) {
+    const primaryContent = renderNodePrimaryContent(gameObject, ctx, primaryClickHandlers);
     return applyNodeComposition(gameObject, _jsxs(_Fragment, { children: [primaryContent, childNodes] }));
 }
-function renderNodePrimaryContent(gameObject, ctx) {
+function renderNodePrimaryContent(gameObject, ctx, primaryClickHandlers) {
     var _a, _b, _c;
     const geometry = (_a = findComponent(gameObject, "BufferGeometry")) !== null && _a !== void 0 ? _a : findComponent(gameObject, "Geometry");
     const material = findComponent(gameObject, "Material");
@@ -400,7 +450,7 @@ function renderNodePrimaryContent(gameObject, ctx) {
     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"))] }));
+        return (_jsxs("mesh", Object.assign({ visible: meshVisible, castShadow: meshCastShadow, receiveShadow: meshReceiveShadow }, primaryClickHandlers, { 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) && !((_c = model.properties) === null || _c === void 0 ? void 0 : _c.instanced) && isNodeReady(gameObject, ctx.loadedModels)) {
         return _jsx(modelDef.View, { properties: model.properties });

package/dist/tools/prefabeditor/{runtime.d.ts → assetRuntime.d.ts}

@@ -1,7 +1,5 @@
 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;
@@ -36,26 +34,3 @@ export declare function EntityRuntimeScope({ nodeId, editMode, isSelected, child
     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/assetRuntime.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+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 });
+}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BooleanField, FieldGroup } from "./Input";
+import { BooleanField, FieldGroup, StringField } from "./Input";
 const DEFAULT_TRIANGLE_POSITIONS = [
     0, 0, 0,
     1, 0, 0,
@@ -63,7 +63,7 @@ function BufferArrayField({ label, value, fallback, onChange, rows = 4, }) {
 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 })] }));
+    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 }), _jsx(BooleanField, { name: "emitClickEvent", label: "Emit Click Event", values: properties, onChange: onUpdate, fallback: false }), properties.emitClickEvent ? (_jsx(StringField, { name: "clickEventName", label: "Click Event Name", values: properties, onChange: onUpdate, placeholder: "entity:click" })) : null] }));
 }
 function BufferGeometryComponentView({ properties }) {
     const positions = normalizeNumberArray(properties.positions, DEFAULT_TRIANGLE_POSITIONS);
@@ -91,6 +91,8 @@ const BufferGeometryComponent = {
         normals: [],
         uvs: DEFAULT_TRIANGLE_UVS,
         computeVertexNormals: true,
+        emitClickEvent: false,
+        clickEventName: '',
     },
 };
 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 '../runtime';
+import { useEntityRuntime } from '../assetRuntime';
 import { FieldGroup, NumberField, SelectField } from './Input';
 const CAMERA_PROJECTION_OPTIONS = [
     { value: 'perspective', label: 'Perspective' },

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

@@ -1,6 +1,5 @@
 import { FC } from "react";
 import { ComponentData, GameObject } from "../types";
-import type { ComponentInstance, ComponentRuntimeContext } from "../runtime";
 export type AssetRef = {
     type: "model" | "texture" | "sound";
     path: string;
@@ -28,8 +27,6 @@ export interface Component {
     }>;
     defaultProperties: any;
     View?: FC<ComponentViewProps>;
-    /** 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/DataComponent.d.ts

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

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

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { colors } from "../styles";
+const RESERVED_USER_DATA_KEYS = new Set([
+    'prefabNodeId',
+    'prefabNodeName',
+]);
+const inputStyle = {
+    width: '100%',
+    backgroundColor: colors.bgInput,
+    border: `1px solid ${colors.border}`,
+    padding: '6px 8px',
+    fontSize: '11px',
+    color: colors.text,
+    fontFamily: 'monospace',
+    outline: 'none',
+    borderRadius: 3,
+    boxSizing: 'border-box',
+};
+function isRecord(value) {
+    return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+function normalizeData(value) {
+    if (!isRecord(value))
+        return {};
+    return Object.entries(value).reduce((result, [key, entry]) => {
+        if (!key.trim() || entry === undefined) {
+            return result;
+        }
+        result[key] = entry;
+        return result;
+    }, {});
+}
+function formatData(value) {
+    return JSON.stringify(normalizeData(value), null, 2);
+}
+function parseData(raw) {
+    const trimmed = raw.trim();
+    if (!trimmed) {
+        return { ok: true, value: {} };
+    }
+    try {
+        const parsed = JSON.parse(trimmed);
+        if (!isRecord(parsed)) {
+            return { ok: false, error: 'Data must be a JSON object' };
+        }
+        const nextData = normalizeData(parsed);
+        for (const key of Object.keys(nextData)) {
+            if (RESERVED_USER_DATA_KEYS.has(key)) {
+                return { ok: false, error: `Reserved key: ${key}` };
+            }
+        }
+        return { ok: true, value: nextData };
+    }
+    catch (_a) {
+        return { ok: false, error: 'Data must be valid JSON' };
+    }
+}
+function DataComponentEditor({ component, onUpdate }) {
+    var _a;
+    const [draft, setDraft] = useState(() => { var _a; return formatData((_a = component.properties) === null || _a === void 0 ? void 0 : _a.data); });
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        var _a;
+        setDraft(formatData((_a = component.properties) === null || _a === void 0 ? void 0 : _a.data));
+        setError(null);
+    }, [(_a = component.properties) === null || _a === void 0 ? void 0 : _a.data]);
+    const commitDraft = () => {
+        const parsed = parseData(draft);
+        if (!parsed.ok) {
+            setError(parsed.error);
+            return;
+        }
+        setError(null);
+        setDraft(formatData(parsed.value));
+        onUpdate({ data: parsed.value });
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsx("textarea", { rows: 10, spellCheck: false, value: draft, onChange: (event) => setDraft(event.target.value), onBlur: commitDraft, style: Object.assign(Object.assign({}, inputStyle), { resize: 'vertical', minHeight: 140 }) }), error ? (_jsx("div", { style: { fontSize: 10, color: colors.accent, fontFamily: 'monospace' }, children: error })) : null, _jsx("div", { style: { fontSize: 10, color: colors.textMuted, lineHeight: 1.4 }, children: "Enter a JSON object. Keys map directly onto `object.userData`." })] }));
+}
+const DataComponent = {
+    name: 'Data',
+    Editor: DataComponentEditor,
+    defaultProperties: {
+        data: {},
+    },
+};
+export default DataComponent;

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

@@ -3,7 +3,7 @@ import { useHelper } from "@react-three/drei";
 import { useRef, useEffect, useState } from "react";
 import { useFrame } from "@react-three/fiber";
 import { CameraHelper } from "three";
-import { useEntityRuntime } from "../runtime";
+import { useEntityRuntime } from "../assetRuntime";
 import { BooleanField, ColorField, NumberField, NumberInput, Vector3Input } from "./Input";
 import { LightSection, ShadowBiasField, mergeWithDefaults } from "./lightUtils";
 import { colors } from "../styles";

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 '../runtime';
+import { useAssetRuntime } from '../assetRuntime';
 function EnvironmentView({ properties, children, }) {
     const { getAssetRevision } = useAssetRuntime();
     const { intensity = 1, resolution = 256 } = properties;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BooleanField, FieldGroup, NumberField, SelectField } from "./Input";
+import { BooleanField, FieldGroup, NumberField, SelectField, StringField } from "./Input";
 const GEOMETRY_ARGS = {
     box: {
         fields: [
@@ -61,7 +61,7 @@ function GeometryComponentEditor({ component, onUpdate, }) {
                 ] }), schema.fields.map((field, index) => {
                 var _a;
                 return (_jsx(NumberField, { name: field.name, label: field.label, values: { [field.name]: (_a = args[index]) !== null && _a !== void 0 ? _a : field.defaultValue }, onChange: (next) => updateArg(index, next[field.name]), fallback: field.defaultValue, min: field.min, step: field.step }, field.name));
-            }), _jsx(BooleanField, { name: "visible", label: "Visible", values: component.properties, onChange: handleChange, fallback: true }), _jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: component.properties, onChange: handleChange, fallback: true }), _jsx(BooleanField, { name: "receiveShadow", label: "Receive Shadow", values: component.properties, onChange: handleChange, fallback: true })] }));
+            }), _jsx(BooleanField, { name: "visible", label: "Visible", values: component.properties, onChange: handleChange, fallback: true }), _jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: component.properties, onChange: handleChange, fallback: true }), _jsx(BooleanField, { name: "receiveShadow", label: "Receive Shadow", values: component.properties, onChange: handleChange, fallback: true }), _jsx(BooleanField, { name: "emitClickEvent", label: "Emit Click Event", values: component.properties, onChange: handleChange, fallback: false }), component.properties.emitClickEvent ? (_jsx(StringField, { name: "clickEventName", label: "Click Event Name", values: component.properties, onChange: handleChange, placeholder: "cannon:fire" })) : null] }));
 }
 // View for Geometry component
 function GeometryComponentView({ properties, children }) {
@@ -87,6 +87,8 @@ const GeometryComponent = {
     defaultProperties: {
         geometryType: 'box',
         args: getDefaultArgs('box'),
+        emitClickEvent: false,
+        clickEventName: '',
     }
 };
 export default GeometryComponent;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export type FieldType = 'vector3' | 'number' | 'string' | 'color' | 'boolean' | 'select' | 'node' | 'event';
+export type FieldType = 'vector3' | 'number' | 'string' | 'color' | 'boolean' | 'select' | 'node';
 interface BaseFieldDefinition {
     name: string;
     label: string;
@@ -36,10 +36,6 @@ interface NodeFieldDefinition extends BaseFieldDefinition {
     placeholder?: string;
     includeRoot?: boolean;
 }
-interface EventFieldDefinition extends BaseFieldDefinition {
-    type: 'event';
-    placeholder?: string;
-}
 interface CustomFieldDefinition extends BaseFieldDefinition {
     type: 'custom';
     render: (props: {
@@ -49,7 +45,7 @@ interface CustomFieldDefinition extends BaseFieldDefinition {
         onChangeMultiple: (values: Record<string, any>) => void;
     }) => React.ReactNode;
 }
-export type FieldDefinition = Vector3FieldDefinition | NumberFieldDefinition | StringFieldDefinition | ColorFieldDefinition | BooleanFieldDefinition | SelectFieldDefinition | NodeFieldDefinition | EventFieldDefinition | CustomFieldDefinition;
+export type FieldDefinition = Vector3FieldDefinition | NumberFieldDefinition | StringFieldDefinition | ColorFieldDefinition | BooleanFieldDefinition | SelectFieldDefinition | NodeFieldDefinition | CustomFieldDefinition;
 declare const styles: {
     input: React.CSSProperties;
     label: React.CSSProperties;
@@ -95,12 +91,6 @@ export declare function NodeInput({ label, value, onChange, placeholder, include
     placeholder?: string;
     includeRoot?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function EventInput({ label, value, onChange, placeholder, }: {
-    label: string;
-    value: string;
-    onChange: (value: string) => void;
-    placeholder?: string;
-}): import("react/jsx-runtime").JSX.Element;
 export declare function BooleanInput({ label, value, onChange }: {
     label?: string;
     value: boolean;
@@ -182,7 +172,6 @@ export declare function SelectField({ name, label, values, onChange, fallback, o
 export declare function NodeField({ name, label, values, onChange, fallback, }: BoundStringFieldProps & {
     fallback?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function EventField({ name, label, values, onChange, fallback, placeholder, }: BoundStringFieldProps): import("react/jsx-runtime").JSX.Element;
 export declare function Vector3Field({ name, label, values, onChange, fallback, snap, labelExtra, }: BoundVector3FieldProps): import("react/jsx-runtime").JSX.Element;
 interface FieldRendererProps {
     fields: FieldDefinition[];