react-three-game 0.0.70 → 0.0.72

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useHelper } from "@react-three/drei";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { forwardRef, createContext, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { BoxHelper, Euler, Matrix4, } from "three";
 import { useStore } from "zustand";
 import { useClickValid } from "./useClickValid";
@@ -22,13 +22,62 @@ import { loadModel, loadSound, loadTexture } from "../dragdrop";
 import { GameInstance, GameInstanceProvider, getRepeatAxesFromModelProperties, useInstanceCheck } from "./InstanceProvider";
 import { composeTransform, decompose } from "./utils";
 import { isPhysicsProps } from "./components/PhysicsComponent";
-import { createPrefabStore, PrefabStoreProvider, prefabStoreToPrefab, useOptionalPrefabStoreApi, usePrefabChildIds, usePrefabNode, usePrefabRootId } from "./prefabStore";
+import { denormalizePrefab } from "./prefab";
+import { createPrefabStore, PrefabStoreProvider, useOptionalPrefabStoreApi, usePrefabChildIds, usePrefabNode, usePrefabRootId } from "./prefabStore";
 import { sound as soundManager } from "../../helpers/SoundManager";
 components.forEach(registerComponent);
 const IDENTITY = new Matrix4();
 const EMPTY_MODELS = {};
 const EMPTY_TEXTURES = {};
 const EMPTY_SOUNDS = {};
+const AssetRuntimeContext = createContext(null);
+const EntityRuntimeContext = createContext(null);
+/** Access scene-wide shared services from within a component View. */
+export function useAssetRuntime() {
+    const ctx = useContext(AssetRuntimeContext);
+    if (!ctx)
+        throw new Error("useAssetRuntime must be used inside <PrefabRoot>");
+    return ctx;
+}
+/** Access the current node's runtime from within a component View. */
+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;
+}
+/** Read the current component's Object3D through a live ref-like accessor. */
+export function useEntityObjectRef() {
+    const { getObject } = useEntityRuntime();
+    return useMemo(() => ({
+        get current() {
+            return getObject();
+        },
+    }), [getObject]);
+}
+/** Read the current component's rigid body through a live ref-like accessor. */
+export function useEntityRigidBodyRef() {
+    const { getRigidBody } = useEntityRuntime();
+    return useMemo(() => ({
+        get current() {
+            return getRigidBody();
+        },
+    }), [getRigidBody]);
+}
+function EntityRuntimeScope({ nodeId, editMode, isSelected, children, }) {
+    const assetRuntime = useContext(AssetRuntimeContext);
+    if (!assetRuntime)
+        throw new Error("EntityRuntimeScope must be used inside <PrefabRoot>");
+    const { getObject, getRigidBody } = assetRuntime;
+    const value = useMemo(() => ({
+        nodeId,
+        editMode,
+        isSelected,
+        getObject: () => getObject(nodeId),
+        getRigidBody: () => getRigidBody(nodeId),
+    }), [editMode, getObject, getRigidBody, isSelected, nodeId]);
+    return _jsx(EntityRuntimeContext.Provider, { value: value, children: children });
+}
 /** Resolve a relative or absolute asset file path against a base path. */
 function resolveAssetPath(basePath, file) {
     if (file.startsWith("http://") || file.startsWith("https://"))
@@ -43,11 +92,14 @@ function isNodeReady(node, loadedModels) {
         return true;
     return Boolean(loadedModels[model.properties.filename]);
 }
-export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSelect, onClick, onSelectedObjectChange, onFocusNode, basePath = "", injectedModels = EMPTY_MODELS, injectedTextures = EMPTY_TEXTURES, injectedSounds = EMPTY_SOUNDS }, ref) => {
+export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSelect, onClick, basePath = "" }, ref) => {
     var _a;
     const [models, setModels] = useState({});
     const [textures, setTextures] = useState({});
     const [sounds, setSounds] = useState({});
+    const [injectedModels, setInjectedModels] = useState(EMPTY_MODELS);
+    const [injectedTextures, setInjectedTextures] = useState(EMPTY_TEXTURES);
+    const [injectedSounds, setInjectedSounds] = useState(EMPTY_SOUNDS);
     const loading = useRef(new Set());
     const failedModels = useRef(new Set());
     const failedTextures = useRef(new Set());
@@ -56,7 +108,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
     const rigidBodyRefs = useRef(new Map());
     const rootRef = useRef(null);
     const parentStore = useOptionalPrefabStoreApi();
-    const [ownedStore] = useState(() => { var _a, _b; return createPrefabStore(data !== null && data !== void 0 ? data : prefabStoreToPrefab((_b = (_a = store === null || store === void 0 ? void 0 : store.getState()) !== null && _a !== void 0 ? _a : parentStore === null || parentStore === void 0 ? void 0 : parentStore.getState()) !== null && _b !== void 0 ? _b : missingStoreState())); });
+    const [ownedStore] = useState(() => { var _a, _b; return createPrefabStore(data !== null && data !== void 0 ? data : denormalizePrefab((_b = (_a = store === null || store === void 0 ? void 0 : store.getState()) !== null && _a !== void 0 ? _a : parentStore === null || parentStore === void 0 ? void 0 : parentStore.getState()) !== null && _b !== void 0 ? _b : missingStoreState())); });
     const resolvedStore = (_a = store !== null && store !== void 0 ? store : parentStore) !== null && _a !== void 0 ? _a : ownedStore;
     const usesOwnedStore = resolvedStore === ownedStore;
     const shouldProvideStoreContext = !parentStore || parentStore !== resolvedStore;
@@ -64,19 +116,24 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
     const availableModels = useMemo(() => (Object.assign(Object.assign({}, models), injectedModels)), [models, injectedModels]);
     const availableTextures = useMemo(() => (Object.assign(Object.assign({}, textures), injectedTextures)), [textures, injectedTextures]);
     const availableSounds = useMemo(() => (Object.assign(Object.assign({}, sounds), injectedSounds)), [sounds, injectedSounds]);
+    const getObject = useCallback((id) => {
+        var _a;
+        return (_a = objectRefs.current[id]) !== null && _a !== void 0 ? _a : null;
+    }, []);
     useImperativeHandle(ref, () => ({
         root: rootRef.current,
-        rigidBodyRefs: rigidBodyRefs.current,
-        getObject: (nodeId) => { var _a; return (_a = objectRefs.current[nodeId]) !== null && _a !== void 0 ? _a : null; },
+        getObject,
         getRigidBody: (nodeId) => { var _a; return (_a = rigidBodyRefs.current.get(nodeId)) !== null && _a !== void 0 ? _a : null; },
-        focusNode: (nodeId) => onFocusNode === null || onFocusNode === void 0 ? void 0 : onFocusNode(nodeId),
-    }), [onFocusNode]);
+        addModel: (path, model) => setInjectedModels(prev => (Object.assign(Object.assign({}, prev), { [path]: model }))),
+        addTexture: (path, texture) => setInjectedTextures(prev => (Object.assign(Object.assign({}, prev), { [path]: texture }))),
+        addSound: (path, sound) => {
+            soundManager.setBuffer(path, sound);
+            setInjectedSounds(prev => (Object.assign(Object.assign({}, prev), { [path]: sound })));
+        },
+    }), [getObject]);
     const registerRef = useCallback((id, obj) => {
         objectRefs.current[id] = obj;
-        if (id === selectedId) {
-            onSelectedObjectChange === null || onSelectedObjectChange === void 0 ? void 0 : onSelectedObjectChange(obj);
-        }
-    }, [onSelectedObjectChange, selectedId]);
+    }, []);
     const registerRigidBodyRef = useCallback((id, rb) => {
         rigidBodyRefs.current.set(id, rb);
     }, []);
@@ -155,11 +212,31 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
         };
         syncAssets();
     }, [resolvedStore, assetManifestKey, basePath, injectedModels, injectedSounds, injectedTextures, models, sounds, textures]);
-    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, registerRigidBodyRef: registerRigidBodyRef, getRigidBody: getRigidBody, loadedModels: availableModels, loadedSounds: availableSounds, loadedTextures: availableTextures, editMode: editMode, parentMatrix: IDENTITY }) }) }));
+    // Keep refs current so context getters are always fresh without changing context identity
+    const availableModelsRef = useRef(availableModels);
+    availableModelsRef.current = availableModels;
+    const availableTexturesRef = useRef(availableTextures);
+    availableTexturesRef.current = availableTextures;
+    const availableSoundsRef = useRef(availableSounds);
+    availableSoundsRef.current = availableSounds;
+    const assetRuntime = useMemo(() => ({
+        getObject,
+        getRigidBody,
+        registerRigidBodyRef,
+        getModel: (path) => { var _a; return (_a = availableModelsRef.current[path]) !== null && _a !== void 0 ? _a : null; },
+        getTexture: (path) => { var _a; return (_a = availableTexturesRef.current[path]) !== null && _a !== void 0 ? _a : null; },
+        getSound: (path) => { var _a; return (_a = availableSoundsRef.current[path]) !== null && _a !== void 0 ? _a : null; },
+        getAssetRevision: () => {
+            const modelKeys = Object.keys(availableModelsRef.current).sort().join('|');
+            const textureKeys = Object.keys(availableTexturesRef.current).sort().join('|');
+            return `${textureKeys}::${modelKeys}`;
+        },
+    }), [getObject, getRigidBody, registerRigidBodyRef]);
+    const content = (_jsx("group", { ref: rootRef, children: _jsx(GameInstanceProvider, { models: availableModels, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(StoreRootNode, { selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: onClick, registerRef: registerRef, loadedModels: availableModels, editMode: editMode, parentMatrix: IDENTITY }) }) }));
     if (!shouldProvideStoreContext) {
-        return content;
+        return _jsx(AssetRuntimeContext.Provider, { value: assetRuntime, children: content });
     }
-    return _jsx(PrefabStoreProvider, { store: resolvedStore, children: content });
+    return _jsx(PrefabStoreProvider, { store: resolvedStore, children: _jsx(AssetRuntimeContext.Provider, { value: assetRuntime, children: content }) });
 });
 function StoreRootNode(props) {
     const rootId = usePrefabRootId();
@@ -218,7 +295,7 @@ function InstancedNode({ nodeId, parentMatrix = IDENTITY, editMode, registerRef,
     }
     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))) }));
 }
-function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, registerRigidBodyRef, getRigidBody, loadedModels, loadedSounds, loadedTextures, editMode, parentMatrix = IDENTITY, }) {
+function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, loadedModels, editMode, parentMatrix = IDENTITY, }) {
     var _a, _b;
     const gameObject = usePrefabNode(nodeId);
     const childIds = usePrefabChildIds(nodeId);
@@ -246,18 +323,12 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, regi
     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, loadedSounds, loadedTextures, editMode, registerRef, getRigidBody };
+    const renderCtx = { loadedModels, editMode, registerRef };
     const childNodes = getChildHostComponents(gameObject).length > 0
         ? _jsx(CompositionChildren, { childIds: childIds, selectedId: selectedId, ctx: renderCtx, parentMatrix: world })
-        : _jsx(ChildNodes, { childIds: childIds, parentMatrix: world, selectedId: selectedId, onSelect: onSelect, onClick: onClick, registerRef: registerRef, registerRigidBodyRef: registerRigidBodyRef, getRigidBody: getRigidBody, loadedModels: loadedModels, loadedSounds: loadedSounds, loadedTextures: loadedTextures, editMode: editMode });
-    const inner = (_jsx("group", Object.assign({}, clickHandlers, { children: renderCompositionNode(gameObject, renderCtx, isSelected, parentMatrix, childNodes) })));
-    if (editMode) {
-        return (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), _jsx("group", { ref: helperRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }), hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, editMode: editMode, nodeId: nodeId, registerRigidBodyRef: registerRigidBodyRef, children: inner }, physicsKey)) : null] }));
-    }
-    if (hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View)) {
-        return (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, editMode: editMode, nodeId: nodeId, registerRigidBodyRef: registerRigidBodyRef, children: inner }, physicsKey));
-    }
-    return (_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }));
+        : _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) })));
+    return (_jsx(EntityRuntimeScope, { nodeId: nodeId, editMode: editMode, isSelected: isSelected, children: editMode ? (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), _jsx("group", { ref: helperRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }), hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }, physicsKey)) : null] })) : hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }, physicsKey)) : (_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner })) }));
 }
 function getChildHostComponents(gameObject) {
     var _a;
@@ -346,7 +417,7 @@ function renderCompositionSubtree(gameObject, ctx, isSelected, childIds, parentM
     const transform = getNodeTransformProps(gameObject);
     const world = parentMatrix.clone().multiply(compose(gameObject));
     const childNodes = _jsx(CompositionChildren, { childIds: childIds, ctx: ctx, parentMatrix: world });
-    return (_jsx("group", { position: transform.position, rotation: transform.rotation, scale: transform.scale, children: renderCompositionNode(gameObject, ctx, isSelected, parentMatrix, childNodes) }, gameObject.id));
+    return (_jsx(EntityRuntimeScope, { nodeId: gameObject.id, editMode: ctx.editMode, isSelected: isSelected, children: _jsx("group", { position: transform.position, rotation: transform.rotation, scale: transform.scale, children: renderCompositionNode(gameObject, ctx, childNodes) }, gameObject.id) }));
 }
 function CompositionChildren({ childIds, selectedId, ctx, parentMatrix, }) {
     return childIds.map(childId => (_jsx(CompositionSubtree, { nodeId: childId, selectedId: selectedId, ctx: ctx, parentMatrix: parentMatrix }, childId)));
@@ -359,37 +430,22 @@ function CompositionSubtree({ nodeId, selectedId, ctx, parentMatrix, }) {
         return null;
     return renderCompositionSubtree(gameObject, ctx, isSelected, childIds, parentMatrix);
 }
-function renderCompositionNode(gameObject, ctx, isSelected, parentMatrix, childNodes) {
-    const ownContent = renderNodeOwnContent(gameObject, ctx, isSelected, parentMatrix);
-    return wrapWithChildHosts(gameObject, ctx, isSelected, parentMatrix, _jsxs(_Fragment, { children: [ownContent, childNodes] }));
-}
-function buildContextProps(gameObject, ctx, isSelected, parentMatrix) {
-    return {
-        loadedModels: ctx.loadedModels,
-        loadedSounds: ctx.loadedSounds,
-        loadedTextures: ctx.loadedTextures,
-        editMode: ctx.editMode,
-        isSelected,
-        nodeId: gameObject.id,
-        parentMatrix,
-        registerRef: ctx.registerRef,
-        getRigidBody: ctx.getRigidBody,
-    };
+function renderCompositionNode(gameObject, ctx, childNodes) {
+    const ownContent = renderNodeOwnContent(gameObject);
+    return wrapWithChildHosts(gameObject, _jsxs(_Fragment, { children: [ownContent, childNodes] }));
 }
-function renderNodeOwnContent(gameObject, ctx, isSelected, parentMatrix) {
+function renderNodeOwnContent(gameObject) {
     const geometry = findComponent(gameObject, "Geometry");
     const material = findComponent(gameObject, "Material");
     const geometryDef = geometry && getComponentDef(geometry.type);
     const materialDef = material && getComponentDef(material.type);
     if (!geometry || !(geometryDef === null || geometryDef === void 0 ? void 0 : geometryDef.View))
         return null;
-    const contextProps = buildContextProps(gameObject, ctx, isSelected, parentMatrix);
-    return (_jsxs("mesh", { castShadow: true, receiveShadow: true, children: [_jsx(geometryDef.View, Object.assign({ properties: geometry.properties }, contextProps)), material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, Object.assign({ properties: material.properties }, contextProps), "material"))] }));
+    return (_jsxs("mesh", { castShadow: true, receiveShadow: true, children: [_jsx(geometryDef.View, { properties: geometry.properties }), material && (materialDef === null || materialDef === void 0 ? void 0 : materialDef.View) && (_jsx(materialDef.View, { properties: material.properties }, "material"))] }));
 }
-function wrapWithChildHosts(gameObject, ctx, isSelected, parentMatrix, subtree) {
-    const contextProps = buildContextProps(gameObject, ctx, isSelected, parentMatrix);
+function wrapWithChildHosts(gameObject, subtree) {
     const childHosts = getChildHostComponents(gameObject);
-    return childHosts.reduce((acc, { key, View, properties }) => (_jsx(View, Object.assign({ properties: properties }, contextProps, { children: acc }), key)), subtree);
+    return childHosts.reduce((acc, { key, View, properties }) => (_jsx(View, { properties: properties, children: acc }, key)), subtree);
 }
 export default PrefabRoot;
 function missingStoreState() {

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

@@ -1,19 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ColorField, FieldGroup, NumberField } from "./Input";
+import { ColorField, NumberField } from "./Input";
+import { LightSection, mergeWithDefaults } from "./lightUtils";
+const ambientLightDefaults = {
+    color: '#ffffff',
+    intensity: 1,
+};
 function AmbientLightComponentEditor({ component, onUpdate, }) {
-    return (_jsxs(FieldGroup, { children: [_jsx(ColorField, { name: "color", label: "Color", values: component.properties, onChange: onUpdate }), _jsx(NumberField, { name: "intensity", label: "Intensity", values: component.properties, onChange: onUpdate, min: 0, step: 0.1, fallback: 1 })] }));
+    const values = mergeWithDefaults(ambientLightDefaults, component.properties);
+    return (_jsxs(LightSection, { title: "Light", children: [_jsx(ColorField, { name: "color", label: "Color", values: values, onChange: onUpdate }), _jsx(NumberField, { name: "intensity", label: "Intensity", values: values, onChange: onUpdate, min: 0, step: 0.1, fallback: 1 })] }));
 }
 function AmbientLightComponentView({ properties, children }) {
-    const { color = '#ffffff', intensity = 1 } = properties;
+    const { color, intensity } = mergeWithDefaults(ambientLightDefaults, properties);
     return (_jsxs(_Fragment, { children: [_jsx("ambientLight", { color: color, intensity: intensity }), children] }));
 }
 const AmbientLightComponent = {
     name: 'AmbientLight',
     Editor: AmbientLightComponentEditor,
     View: AmbientLightComponentView,
-    defaultProperties: {
-        color: '#ffffff',
-        intensity: 1,
-    },
+    defaultProperties: {},
 };
 export default AmbientLightComponent;

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { PerspectiveCamera } from '@react-three/drei';
-import { useEffect, useMemo, useState } from 'react';
+import { PerspectiveCamera, useHelper } from '@react-three/drei';
+import { useRef } from 'react';
 import { CameraHelper } from 'three';
 import { useFrame } from '@react-three/fiber';
+import { useEntityRuntime } from '../PrefabRoot';
 import { FieldGroup, NumberField } from './Input';
 const cameraDefaults = {
     fov: 50,
@@ -14,27 +15,22 @@ function CameraComponentEditor({ component, onUpdate }) {
     const values = Object.assign(Object.assign({}, cameraDefaults), component.properties);
     return (_jsxs(FieldGroup, { children: [_jsx(NumberField, { name: "fov", label: "FOV", values: values, onChange: onUpdate, fallback: 50, min: 1, max: 179, step: 1 }), _jsx(NumberField, { name: "near", label: "Near", values: values, onChange: onUpdate, fallback: 0.1, min: 0.001, step: 0.1 }), _jsx(NumberField, { name: "zoom", label: "Zoom", values: values, onChange: onUpdate, fallback: 1, min: 0.01, step: 0.1 }), _jsx(NumberField, { name: "far", label: "Far", values: values, onChange: onUpdate, fallback: 1000, min: 0.1, step: 1 })] }));
 }
-function CameraComponentView({ properties, children, editMode, isSelected }) {
+function CameraComponentView({ properties, children }) {
+    const { editMode, isSelected } = useEntityRuntime();
     const merged = Object.assign(Object.assign({}, cameraDefaults), properties);
     const fov = merged.fov;
     const near = merged.near;
     const zoom = merged.zoom;
     const far = merged.far;
-    const [camera, setCamera] = useState(null);
-    const cameraHelper = useMemo(() => camera ? new CameraHelper(camera) : null, [camera]);
-    useEffect(() => {
-        return () => {
-            cameraHelper === null || cameraHelper === void 0 ? void 0 : cameraHelper.dispose();
-        };
-    }, [cameraHelper]);
+    const cameraRef = useRef(null);
+    useHelper(editMode && isSelected ? cameraRef : null, CameraHelper);
     useFrame(() => {
-        if (camera && cameraHelper && editMode && isSelected) {
-            camera.updateProjectionMatrix();
-            camera.updateMatrixWorld();
-            cameraHelper.update();
+        if (cameraRef.current && editMode && isSelected) {
+            cameraRef.current.updateProjectionMatrix();
+            cameraRef.current.updateMatrixWorld();
         }
     });
-    return (_jsxs(_Fragment, { children: [_jsx(PerspectiveCamera, { ref: (instance) => setCamera(instance), makeDefault: !editMode, fov: fov, near: near, zoom: zoom, far: far }), editMode && isSelected && cameraHelper && (_jsx("primitive", { object: cameraHelper })), editMode ? (_jsxs("group", { children: [_jsxs("mesh", { children: [_jsx("boxGeometry", { args: [0.3, 0.3, 0.5] }), _jsx("meshBasicMaterial", { color: '#22d3ee', wireframe: true })] }), _jsxs("mesh", { position: [0, 0, -0.25], rotation: [Math.PI / 2, 0, 0], children: [_jsx("coneGeometry", { args: [0.08, 0.16, 16] }), _jsx("meshBasicMaterial", { color: '#22d3ee', wireframe: true })] })] })) : null, children] }));
+    return (_jsxs(_Fragment, { children: [_jsx(PerspectiveCamera, { ref: cameraRef, makeDefault: !editMode, fov: fov, near: near, zoom: zoom, far: far }), editMode ? (_jsxs("group", { children: [_jsxs("mesh", { children: [_jsx("boxGeometry", { args: [0.3, 0.3, 0.5] }), _jsx("meshBasicMaterial", { color: '#22d3ee', wireframe: true })] }), _jsxs("mesh", { position: [0, 0, -0.25], rotation: [Math.PI / 2, 0, 0], children: [_jsx("coneGeometry", { args: [0.08, 0.16, 16] }), _jsx("meshBasicMaterial", { color: '#22d3ee', wireframe: true })] })] })) : null, children] }));
 }
 const CameraComponent = {
     name: 'Camera',

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

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { gameEvents } from '../GameEvents';
+import { useEntityRuntime } from '../PrefabRoot';
 import { FieldGroup, StringField } from './Input';
 function ClickComponentEditor({ component, onUpdate }) {
     return (_jsxs(FieldGroup, { children: [_jsx("div", { style: { fontSize: 12, opacity: 0.8 }, children: "Emits a game event in play mode when this entity is clicked." }), _jsx(StringField, { name: "eventName", label: "Emit Event", values: component.properties, onChange: onUpdate, placeholder: "click" })] }));
 }
-function ClickComponentView({ children, editMode, nodeId, properties }) {
+function ClickComponentView({ children, properties }) {
     const clickValid = useRef(false);
+    const { editMode, nodeId } = useEntityRuntime();
     const eventName = (properties === null || properties === void 0 ? void 0 : properties.eventName) || 'click';
     const emitClick = (event) => {
         if (!nodeId)
@@ -27,6 +29,8 @@ function ClickComponentView({ children, editMode, nodeId, properties }) {
     return (_jsx("group", { onPointerDown: (event) => {
             event.stopPropagation();
             clickValid.current = true;
+        }, onClick: (event) => {
+            event.stopPropagation();
         }, onPointerMove: () => {
             clickValid.current = false;
         }, onPointerUp: (event) => {

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

@@ -4,6 +4,19 @@ export type AssetRef = {
     type: "model" | "texture" | "sound";
     path: string;
 };
+/** Props every component View receives from the renderer. */
+export interface ComponentViewProps<P = Record<string, any>> {
+    /** This component's own data from the prefab JSON. */
+    properties: P;
+    /** Children to render (for wrapper / child-host components). */
+    children?: React.ReactNode;
+    /** Entity local position (passed to wrapper components like Physics). */
+    position?: [number, number, number];
+    /** Entity local rotation in radians (passed to wrapper components like Physics). */
+    rotation?: [number, number, number];
+    /** Entity local scale (passed to wrapper components like Physics). */
+    scale?: [number, number, number];
+}
 export interface Component {
     name: string;
     Editor: FC<{
@@ -13,9 +26,10 @@ export interface Component {
         basePath?: string;
     }>;
     defaultProperties: any;
-    View?: FC<any>;
+    View?: FC<ComponentViewProps>;
     /** When true, this component wraps child entities (e.g. Physics wraps children in RigidBody). */
     isWrapper?: boolean;
+    /** Declare which asset paths this component references (for asset loading). */
     getAssetRefs?: (properties: Record<string, any>) => AssetRef[];
 }
 export declare function registerComponent(component: Component): void;

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

@@ -1,59 +1,116 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useEffect, useMemo, useState } from "react";
+import { useHelper } from "@react-three/drei";
+import { useRef, useEffect, useState } from "react";
 import { useFrame } from "@react-three/fiber";
 import { CameraHelper, Vector3 } from "three";
-import { FieldRenderer, NumberInput } from "./Input";
-const smallLabel = { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 };
+import { useEntityRuntime } from "../PrefabRoot";
+import { BooleanField, ColorField, NumberField, NumberInput, Vector3Input } from "./Input";
+import { LightSection, ShadowBiasField, mergeWithDefaults } from "./lightUtils";
+import { colors } from "../styles";
 const directionalLightDefaults = {
     color: '#ffffff',
     intensity: 1,
-    castShadow: true,
-    shadowMapSize: 1024,
-    shadowCameraNear: 0.1,
-    shadowCameraFar: 100,
-    shadowCameraTop: 30,
-    shadowCameraBottom: -30,
-    shadowCameraLeft: -30,
-    shadowCameraRight: 30,
+    castShadow: false,
+    shadowMapSize: 512,
+    shadowBias: 0,
+    shadowNormalBias: 0,
+    shadowAutoUpdate: true,
+    shadowCameraNear: 0.5,
+    shadowCameraFar: 500,
+    shadowCameraTop: 5,
+    shadowCameraBottom: -5,
+    shadowCameraLeft: -5,
+    shadowCameraRight: 5,
     targetOffset: [0, -5, 0],
 };
-const directionalLightFields = [
-    { name: 'color', type: 'color', label: 'Color' },
-    { name: 'intensity', type: 'number', label: 'Intensity', step: 0.1, min: 0 },
-    { name: 'castShadow', type: 'boolean', label: 'Cast Shadow' },
-    { name: 'shadowMapSize', type: 'number', label: 'Shadow Map Size', step: 256, min: 256 },
-    {
-        name: '_shadowCamera',
-        type: 'custom',
-        label: 'Shadow Camera',
-        render: ({ values, onChangeMultiple }) => {
-            var _a, _b, _c, _d, _e, _f;
-            return (_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Near" }), _jsx(NumberInput, { step: 0.1, value: (_a = values.shadowCameraNear) !== null && _a !== void 0 ? _a : 0.1, onChange: v => onChangeMultiple({ shadowCameraNear: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Far" }), _jsx(NumberInput, { step: 1, value: (_b = values.shadowCameraFar) !== null && _b !== void 0 ? _b : 100, onChange: v => onChangeMultiple({ shadowCameraFar: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Top" }), _jsx(NumberInput, { step: 1, value: (_c = values.shadowCameraTop) !== null && _c !== void 0 ? _c : 30, onChange: v => onChangeMultiple({ shadowCameraTop: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Bottom" }), _jsx(NumberInput, { step: 1, value: (_d = values.shadowCameraBottom) !== null && _d !== void 0 ? _d : -30, onChange: v => onChangeMultiple({ shadowCameraBottom: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Left" }), _jsx(NumberInput, { step: 1, value: (_e = values.shadowCameraLeft) !== null && _e !== void 0 ? _e : -30, onChange: v => onChangeMultiple({ shadowCameraLeft: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Right" }), _jsx(NumberInput, { step: 1, value: (_f = values.shadowCameraRight) !== null && _f !== void 0 ? _f : 30, onChange: v => onChangeMultiple({ shadowCameraRight: v }) })] })] }));
-        },
-    },
-    {
-        name: 'targetOffset',
-        type: 'custom',
-        label: 'Target Offset',
-        render: ({ value, onChange }) => {
-            const offset = value !== null && value !== void 0 ? value : [0, -5, 0];
-            return (_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "X" }), _jsx(NumberInput, { step: 0.5, value: offset[0], onChange: v => onChange([v, offset[1], offset[2]]) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Y" }), _jsx(NumberInput, { step: 0.5, value: offset[1], onChange: v => onChange([offset[0], v, offset[2]]) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Z" }), _jsx(NumberInput, { step: 0.5, value: offset[2], onChange: v => onChange([offset[0], offset[1], v]) })] })] }));
-        },
-    },
-];
+const frustumLabelStyle = {
+    fontSize: 10,
+    textTransform: 'uppercase',
+    letterSpacing: '0.06em',
+    color: colors.textMuted,
+    textAlign: 'center',
+};
+const frustumCellStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+const frustumInputStyle = {
+    width: 62,
+    minWidth: 62,
+    textAlign: 'center',
+};
+const centerLockButtonStyle = {
+    width: 34,
+    height: 34,
+    borderRadius: 999,
+    border: `1px solid ${colors.border}`,
+    background: colors.bgInput,
+    color: colors.textMuted,
+    cursor: 'pointer',
+    fontSize: 14,
+    lineHeight: 1,
+    padding: 0,
+};
+function areFrustumSidesLocked(values) {
+    const top = Math.abs(values.shadowCameraTop);
+    const bottom = Math.abs(values.shadowCameraBottom);
+    const left = Math.abs(values.shadowCameraLeft);
+    const right = Math.abs(values.shadowCameraRight);
+    return top === bottom && top === left && top === right;
+}
+function ShadowFrustumField({ values, onChange, }) {
+    const [locked, setLocked] = useState(() => areFrustumSidesLocked(values));
+    const updateSide = (side, nextValue) => {
+        if (!locked) {
+            onChange({ [side]: nextValue });
+            return;
+        }
+        const magnitude = Math.abs(nextValue);
+        onChange({
+            shadowCameraTop: magnitude,
+            shadowCameraBottom: -magnitude,
+            shadowCameraLeft: -magnitude,
+            shadowCameraRight: magnitude,
+        });
+    };
+    const toggleLocked = () => {
+        setLocked(current => {
+            const nextLocked = !current;
+            if (nextLocked) {
+                const magnitude = Math.max(Math.abs(values.shadowCameraTop), Math.abs(values.shadowCameraBottom), Math.abs(values.shadowCameraLeft), Math.abs(values.shadowCameraRight));
+                onChange({
+                    shadowCameraTop: magnitude,
+                    shadowCameraBottom: -magnitude,
+                    shadowCameraLeft: -magnitude,
+                    shadowCameraRight: magnitude,
+                });
+            }
+            return nextLocked;
+        });
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx("div", { style: Object.assign(Object.assign({}, frustumLabelStyle), { textAlign: 'left' }), children: "Shadow Frustum" }), _jsxs("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: '1fr auto 1fr',
+                    gridTemplateRows: 'auto auto auto',
+                    gap: 8,
+                    alignItems: 'center',
+                }, children: [_jsx("div", {}), _jsx("div", { style: frustumCellStyle, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'center' }, children: [_jsx("div", { style: frustumLabelStyle, children: "Top" }), _jsx(NumberInput, { value: values.shadowCameraTop, onChange: nextValue => updateSide('shadowCameraTop', nextValue), step: 0.5, style: frustumInputStyle })] }) }), _jsx("div", {}), _jsx("div", { style: frustumCellStyle, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'center' }, children: [_jsx("div", { style: frustumLabelStyle, children: "Left" }), _jsx(NumberInput, { value: values.shadowCameraLeft, onChange: nextValue => updateSide('shadowCameraLeft', nextValue), step: 0.5, style: frustumInputStyle })] }) }), _jsx("div", { style: frustumCellStyle, children: _jsx("button", { type: "button", onClick: toggleLocked, style: Object.assign(Object.assign({}, centerLockButtonStyle), { color: locked ? colors.accent : colors.textMuted, borderColor: locked ? colors.accentBorder : colors.border, background: locked ? colors.accentBg : colors.bgInput }), title: locked ? 'Frustum sides locked' : 'Frustum sides unlocked', children: locked ? '🔒' : '🔓' }) }), _jsx("div", { style: frustumCellStyle, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'center' }, children: [_jsx("div", { style: frustumLabelStyle, children: "Right" }), _jsx(NumberInput, { value: values.shadowCameraRight, onChange: nextValue => updateSide('shadowCameraRight', nextValue), step: 0.5, style: frustumInputStyle })] }) }), _jsx("div", {}), _jsx("div", { style: frustumCellStyle, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'center' }, children: [_jsx("div", { style: frustumLabelStyle, children: "Bottom" }), _jsx(NumberInput, { value: values.shadowCameraBottom, onChange: nextValue => updateSide('shadowCameraBottom', nextValue), step: 0.5, style: frustumInputStyle })] }) }), _jsx("div", {})] })] }));
+}
 function DirectionalLightComponentEditor({ component, onUpdate }) {
-    const values = Object.assign(Object.assign({}, directionalLightDefaults), component.properties);
-    const fields = values.castShadow
-        ? directionalLightFields
-        : directionalLightFields.filter(field => field.name !== '_shadowCamera');
-    return (_jsx(FieldRenderer, { fields: fields, values: values, onChange: onUpdate }));
+    const values = mergeWithDefaults(directionalLightDefaults, component.properties);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs(LightSection, { title: "Light", children: [_jsx(ColorField, { name: "color", label: "Color", values: values, onChange: onUpdate }), _jsx(NumberField, { name: "intensity", label: "Intensity", values: values, onChange: onUpdate, min: 0, step: 0.1, fallback: 1 }), _jsx(Vector3Input, { label: "Target Offset", value: values.targetOffset, onChange: targetOffset => onUpdate({ targetOffset }), snap: 0.5 })] }), _jsxs(LightSection, { title: "Shadow", children: [_jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: values, onChange: onUpdate, fallback: false }), values.castShadow ? (_jsxs(_Fragment, { children: [_jsx(BooleanField, { name: "shadowAutoUpdate", label: "Auto Update", values: values, onChange: onUpdate, fallback: true }), _jsx(NumberField, { name: "shadowMapSize", label: "Map Size", values: values, onChange: onUpdate, min: 128, step: 128, fallback: 512 }), _jsx(ShadowBiasField, { name: "shadowBias", label: "Bias", values: values, onChange: onUpdate, fallback: 0 }), _jsx(ShadowBiasField, { name: "shadowNormalBias", label: "Normal Bias", values: values, onChange: onUpdate, fallback: 0 }), _jsx(NumberField, { name: "shadowCameraNear", label: "Near", values: values, onChange: onUpdate, min: 0.001, step: 0.1, fallback: 0.5 }), _jsx(NumberField, { name: "shadowCameraFar", label: "Far", values: values, onChange: onUpdate, min: 0.1, step: 1, fallback: 500 }), _jsx(ShadowFrustumField, { values: values, onChange: onUpdate })] })) : null] })] }));
 }
-function DirectionalLightView({ properties, children, editMode, isSelected }) {
-    const merged = Object.assign(Object.assign({}, directionalLightDefaults), properties);
+function DirectionalLightView({ properties, children }) {
+    const { editMode, isSelected } = useEntityRuntime();
+    const merged = mergeWithDefaults(directionalLightDefaults, properties);
     const color = merged.color;
     const intensity = merged.intensity;
     const castShadow = merged.castShadow;
     const shadowMapSize = merged.shadowMapSize;
+    const shadowBias = merged.shadowBias;
+    const shadowNormalBias = merged.shadowNormalBias;
+    const shadowAutoUpdate = merged.shadowAutoUpdate;
     const shadowCameraNear = merged.shadowCameraNear;
     const shadowCameraFar = merged.shadowCameraFar;
     const shadowCameraTop = merged.shadowCameraTop;
@@ -63,31 +120,48 @@ function DirectionalLightView({ properties, children, editMode, isSelected }) {
     const targetOffset = merged.targetOffset;
     const directionalLightRef = useRef(null);
     const targetRef = useRef(null);
+    const shadowCameraRef = useRef(null);
     const [shadowCamera, setShadowCamera] = useState(null);
-    const shadowCameraHelper = useMemo(() => shadowCamera ? new CameraHelper(shadowCamera) : null, [shadowCamera]);
-    useEffect(() => {
-        return () => {
-            shadowCameraHelper === null || shadowCameraHelper === void 0 ? void 0 : shadowCameraHelper.dispose();
-        };
-    }, [shadowCameraHelper]);
+    useHelper(editMode && isSelected && castShadow ? shadowCameraRef : null, CameraHelper);
     // Use a local target object so node transforms rotate the light direction naturally.
     useEffect(() => {
         if (directionalLightRef.current && targetRef.current) {
             directionalLightRef.current.target = targetRef.current;
-            setShadowCamera(directionalLightRef.current.shadow.camera);
+            const nextShadowCamera = directionalLightRef.current.shadow.camera;
+            shadowCameraRef.current = nextShadowCamera;
+            setShadowCamera(nextShadowCamera);
         }
     }, []);
+    useEffect(() => {
+        var _a;
+        const shadow = (_a = directionalLightRef.current) === null || _a === void 0 ? void 0 : _a.shadow;
+        if (!shadow)
+            return;
+        shadow.needsUpdate = true;
+        shadow.camera.updateProjectionMatrix();
+    }, [
+        castShadow,
+        shadowMapSize,
+        shadowBias,
+        shadowNormalBias,
+        shadowAutoUpdate,
+        shadowCameraNear,
+        shadowCameraFar,
+        shadowCameraTop,
+        shadowCameraBottom,
+        shadowCameraLeft,
+        shadowCameraRight,
+    ]);
     useFrame(() => {
         if (!directionalLightRef.current || !targetRef.current)
             return;
         directionalLightRef.current.target.updateMatrixWorld();
-        if (shadowCamera && shadowCameraHelper && castShadow) {
+        if (shadowCamera && castShadow) {
             shadowCamera.updateProjectionMatrix();
             shadowCamera.updateMatrixWorld();
-            shadowCameraHelper.update();
         }
     });
-    return (_jsxs(_Fragment, { children: [_jsx("directionalLight", { ref: directionalLightRef, color: color, intensity: intensity, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar, "shadow-camera-top": shadowCameraTop, "shadow-camera-bottom": shadowCameraBottom, "shadow-camera-left": shadowCameraLeft, "shadow-camera-right": shadowCameraRight, "shadow-bias": -0.001, "shadow-normalBias": 0.02 }), _jsx("object3D", { ref: targetRef, position: targetOffset }), editMode && isSelected && castShadow && shadowCameraHelper && (_jsx("primitive", { object: shadowCameraHelper })), editMode && isSelected && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.3, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] }), _jsxs("line", { children: [_jsx("bufferGeometry", { onUpdate: (geo) => {
+    return (_jsxs(_Fragment, { children: [_jsx("directionalLight", { ref: directionalLightRef, color: color, intensity: intensity, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar, "shadow-camera-top": shadowCameraTop, "shadow-camera-bottom": shadowCameraBottom, "shadow-camera-left": shadowCameraLeft, "shadow-camera-right": shadowCameraRight, "shadow-bias": shadowBias, "shadow-normalBias": shadowNormalBias, "shadow-autoUpdate": shadowAutoUpdate }), _jsx("object3D", { ref: targetRef, position: targetOffset }), editMode && isSelected && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.3, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] }), _jsxs("line", { children: [_jsx("bufferGeometry", { onUpdate: (geo) => {
                                     const points = [
                                         new Vector3(0, 0, 0),
                                         new Vector3(targetOffset[0], targetOffset[1], targetOffset[2])
@@ -99,6 +173,6 @@ const DirectionalLightComponent = {
     name: 'DirectionalLight',
     Editor: DirectionalLightComponentEditor,
     View: DirectionalLightView,
-    defaultProperties: directionalLightDefaults
+    defaultProperties: {}
 };
 export default DirectionalLightComponent;