react-three-game 0.0.70 → 0.0.72

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

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Environment } from '@react-three/drei';
 import { FieldGroup, NumberField } from './Input';
-function EnvironmentView({ properties, children, editMode, loadedTextures, loadedModels, }) {
+import { useAssetRuntime } from '../PrefabRoot';
+function EnvironmentView({ properties, children, }) {
+    const { getAssetRevision } = useAssetRuntime();
     const { intensity = 1, resolution = 256 } = properties;
-    const assetRevision = `${Object.keys(loadedTextures !== null && loadedTextures !== void 0 ? loadedTextures : {}).sort().join('|')}::${Object.keys(loadedModels !== null && loadedModels !== void 0 ? loadedModels : {}).sort().join('|')}`;
-    return (_jsx(Environment, { background: true, environmentIntensity: intensity, resolution: resolution, frames: editMode ? undefined : 1, children: children }, assetRevision));
+    const environmentRevision = `${getAssetRevision()}::${intensity}::${resolution}`;
+    return (_jsx(Environment, { background: true, environmentIntensity: intensity, resolution: resolution, frames: 1, children: children }, environmentRevision));
 }
 const EnvironmentComponent = {
     name: 'Environment',

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

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { extend } from '@react-three/fiber';
 import { FieldRenderer, Label, NumberInput } from './Input';
+import { useAssetRuntime } from '../PrefabRoot';
 import { useMemo } from 'react';
 import { MeshBasicNodeMaterial, MeshStandardNodeMaterial } from 'three/webgpu';
 import { TexturePicker } from '../../assetviewer/page';
@@ -119,8 +120,10 @@ function MaterialComponentEditor({ component, onUpdate, basePath = "" }) {
     return (_jsx(FieldRenderer, { fields: fields, values: component.properties, onChange: onUpdate }));
 }
 // View for Material component
-function MaterialComponentView({ properties, loadedTextures }) {
-    var _a, _b, _c;
+function MaterialComponentView({ properties: rawProps }) {
+    var _a, _b, _c, _d, _e;
+    const { getTexture } = useAssetRuntime();
+    const properties = rawProps;
     const materialType = (_a = properties === null || properties === void 0 ? void 0 : properties.materialType) !== null && _a !== void 0 ? _a : 'standard';
     const textureName = properties === null || properties === void 0 ? void 0 : properties.texture;
     const repeat = properties === null || properties === void 0 ? void 0 : properties.repeat;
@@ -128,15 +131,15 @@ function MaterialComponentView({ properties, loadedTextures }) {
     const generateMipmaps = (properties === null || properties === void 0 ? void 0 : properties.generateMipmaps) !== false;
     const minFilter = (properties === null || properties === void 0 ? void 0 : properties.minFilter) || 'LinearMipmapLinearFilter';
     const magFilter = (properties === null || properties === void 0 ? void 0 : properties.magFilter) || 'LinearFilter';
-    const texture = textureName && loadedTextures ? loadedTextures[textureName] : undefined;
+    const texture = textureName ? (_b = getTexture(textureName)) !== null && _b !== void 0 ? _b : undefined : undefined;
     const normalMapTextureName = properties === null || properties === void 0 ? void 0 : properties.normalMapTexture;
     const normalScaleProp = properties === null || properties === void 0 ? void 0 : properties.normalScale;
-    const normalMapTexture = normalMapTextureName && loadedTextures ? loadedTextures[normalMapTextureName] : undefined;
+    const normalMapTexture = normalMapTextureName ? (_c = getTexture(normalMapTextureName)) !== null && _c !== void 0 ? _c : undefined : undefined;
     const materialSource = properties !== null && properties !== void 0 ? properties : {};
     // Destructure all material props and separate custom texture handling props
     const { texture: _texture, repeat: _repeat, repeatCount: _repeatCount, generateMipmaps: _generateMipmaps, minFilter: _minFilter, magFilter: _magFilter, map: _map, materialType: _materialType, normalMapTexture: _normalMapTexture, normalScale: _normalScale, normalMap: _normalMap, side: sideProp } = materialSource, materialProps = __rest(materialSource, ["texture", "repeat", "repeatCount", "generateMipmaps", "minFilter", "magFilter", "map", "materialType", "normalMapTexture", "normalScale", "normalMap", "side"]);
     const sideMap = { FrontSide, BackSide, DoubleSide };
-    const resolvedSide = sideProp ? ((_b = sideMap[sideProp]) !== null && _b !== void 0 ? _b : FrontSide) : FrontSide;
+    const resolvedSide = sideProp ? ((_d = sideMap[sideProp]) !== null && _d !== void 0 ? _d : FrontSide) : FrontSide;
     const minFilterMap = {
         NearestFilter,
         LinearFilter,
@@ -187,7 +190,7 @@ function MaterialComponentView({ properties, loadedTextures }) {
     if (!properties) {
         return _jsx("meshStandardNodeMaterial", { color: "red", wireframe: true });
     }
-    const materialKey = `${(_c = finalTexture === null || finalTexture === void 0 ? void 0 : finalTexture.uuid) !== null && _c !== void 0 ? _c : 'no-texture'}:${materialProps.transparent ? 'transparent' : 'opaque'}`;
+    const materialKey = `${(_e = finalTexture === null || finalTexture === void 0 ? void 0 : finalTexture.uuid) !== null && _e !== void 0 ? _e : 'no-texture'}:${materialProps.transparent ? 'transparent' : 'opaque'}`;
     const sharedProps = Object.assign({ map: finalTexture, side: resolvedSide }, materialProps);
     if (materialType === 'basic') {
         return _jsx("meshBasicNodeMaterial", Object.assign({}, sharedProps), materialKey);

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ModelPicker } from '../../assetviewer/page';
 import { useContext, useMemo } from 'react';
 import { BooleanField, FieldGroup, Label, ListEditor, NumberInput, SelectInput } from './Input';
+import { useAssetRuntime } from '../PrefabRoot';
 import { EditorContext } from '../PrefabEditor';
 import { DEFAULT_REPEAT_AXES, getRepeatAxesFromModelProperties, normalizeRepeatAxes } from '../InstanceProvider';
 import { colors } from '../styles';
@@ -63,11 +64,12 @@ function ModelComponentEditor({ component, node, onUpdate, basePath = "" }) {
     return (_jsxs(FieldGroup, { children: [_jsx(ModelPicker, { value: component.properties.filename, onChange: (filename) => onUpdate({ filename }), basePath: basePath, pickerKey: node === null || node === void 0 ? void 0 : node.id }), _jsx(BooleanField, { name: "instanced", label: "Instanced", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.instanced && (_jsxs(_Fragment, { children: [_jsx(BooleanField, { name: "repeat", label: "Repeat", values: component.properties, onChange: onUpdate, fallback: false }), component.properties.repeat && (_jsx(RepeatAxisEditor, { axes: repeatAxes, onChange: (nextAxes) => onUpdate({ repeatAxes: nextAxes }), positionSnap: positionSnap }))] }))] }));
 }
 // View for Model component
-function ModelComponentView({ properties, loadedModels, children }) {
+function ModelComponentView({ properties, children }) {
+    const { getModel } = useAssetRuntime();
     // Instanced models are handled elsewhere (GameInstance), so only render non-instanced here
     if (!properties.filename || properties.instanced)
         return _jsx(_Fragment, { children: children });
-    const sourceModel = loadedModels === null || loadedModels === void 0 ? void 0 : loadedModels[properties.filename];
+    const sourceModel = getModel(properties.filename);
     // Clone model once and set up shadows - memoized to avoid cloning on every render
     const clonedModel = useMemo(() => {
         if (!sourceModel)

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

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CapsuleCollider, RigidBody, useRapier } from "@react-three/rapier";
 import { useRef, useEffect, useCallback } from 'react';
+import { useAssetRuntime, useEntityRuntime } from "../PrefabRoot";
 import { BooleanField, FieldGroup, ListEditor, NumberField, SelectField, SelectInput, StringInput, Vector3Field } from "./Input";
 import { gameEvents, getEntityIdFromRigidBody } from "../GameEvents";
 import { colors } from "../styles";
@@ -162,7 +163,9 @@ function PhysicsComponentEditor({ component, onUpdate }) {
                     { value: 'all', label: 'All (includes kinematic & fixed)' },
                 ] })] }));
 }
-function PhysicsComponentView({ properties, children, position, rotation, scale, editMode, nodeId, registerRigidBodyRef }) {
+function PhysicsComponentView({ properties, children, position, rotation, scale }) {
+    const { registerRigidBodyRef } = useAssetRuntime();
+    const { editMode, nodeId } = useEntityRuntime();
     const { type, colliders, sensor, activeCollisionTypes, linearVelocity = [0, 0, 0], angularVelocity = [0, 0, 0], capsuleRadius = capsuleRadiusFallback, capsuleHalfHeight = capsuleHalfHeightFallback, sensorEnterEventName, sensorExitEventName, collisionEnterEventName, collisionExitEventName, enabledTranslations = enabledAxesFallback, enabledRotations = enabledAxesFallback } = properties, otherProps = __rest(properties, ["type", "colliders", "sensor", "activeCollisionTypes", "linearVelocity", "angularVelocity", "capsuleRadius", "capsuleHalfHeight", "sensorEnterEventName", "sensorExitEventName", "collisionEnterEventName", "collisionExitEventName", "enabledTranslations", "enabledRotations"]);
     const colliderType = colliders || (type === 'fixed' ? 'trimesh' : 'hull');
     const usesManualCapsuleCollider = colliderType === 'capsule';
@@ -183,11 +186,11 @@ function PhysicsComponentView({ properties, children, position, rotation, scale,
     }
     // Register RigidBody ref when it's available
     useEffect(() => {
-        if (nodeId && registerRigidBodyRef && rigidBodyRef.current) {
+        if (nodeId && rigidBodyRef.current) {
             registerRigidBodyRef(nodeId, rigidBodyRef.current);
         }
         return () => {
-            if (nodeId && registerRigidBodyRef) {
+            if (nodeId) {
                 registerRigidBodyRef(nodeId, null);
             }
         };

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

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

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { useHelper } from '@react-three/drei';
+import { PointLightHelper } from 'three';
+import { useEntityRuntime } from '../PrefabRoot';
+import { BooleanField, ColorField, NumberField } from './Input';
+import { LightSection, ShadowBiasField, mergeWithDefaults } from './lightUtils';
+const pointLightDefaults = {
+    color: '#ffffff',
+    intensity: 1,
+    distance: 0,
+    decay: 2,
+    castShadow: false,
+    shadowMapSize: 512,
+    shadowBias: 0,
+    shadowNormalBias: 0,
+    shadowAutoUpdate: true,
+    shadowCameraNear: 0.5,
+    shadowCameraFar: 500,
+};
+function PointLightComponentEditor({ component, onUpdate }) {
+    const values = mergeWithDefaults(pointLightDefaults, 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(NumberField, { name: "distance", label: "Distance", values: values, onChange: onUpdate, min: 0, step: 1, fallback: 0 }), _jsx(NumberField, { name: "decay", label: "Decay", values: values, onChange: onUpdate, min: 0, step: 0.1, fallback: 2 })] }), _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 })] })) : null] })] }));
+}
+function PointLightView({ properties, children }) {
+    const { editMode, isSelected } = useEntityRuntime();
+    const merged = mergeWithDefaults(pointLightDefaults, properties);
+    const color = merged.color;
+    const intensity = merged.intensity;
+    const distance = merged.distance;
+    const decay = merged.decay;
+    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 lightRef = useRef(null);
+    useHelper(editMode && isSelected ? lightRef : null, PointLightHelper, 0.5, color);
+    useEffect(() => {
+        var _a;
+        const shadow = (_a = lightRef.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]);
+    return (_jsxs(_Fragment, { children: [_jsx("pointLight", { ref: lightRef, color: color, intensity: intensity, distance: distance, decay: decay, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-bias": shadowBias, "shadow-normalBias": shadowNormalBias, "shadow-autoUpdate": shadowAutoUpdate, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar }), editMode && isSelected ? (_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 10, 8] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] })) : null, children] }));
+}
+const PointLightComponent = {
+    name: 'PointLight',
+    Editor: PointLightComponentEditor,
+    View: PointLightView,
+    defaultProperties: {},
+};
+export default PointLightComponent;

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

@@ -4,6 +4,7 @@ import { useThree } from '@react-three/fiber';
 import { SoundPicker } from '../../assetviewer/page';
 import { sound as soundManager } from '../../../helpers/SoundManager';
 import { gameEvents } from '../GameEvents';
+import { useAssetRuntime, useEntityRuntime } from '../PrefabRoot';
 import { BooleanField, FieldGroup, FieldRenderer, ListEditor, NumberField, SelectField, StringField } from './Input';
 import { colors } from '../styles';
 import { AudioListener } from 'three';
@@ -44,12 +45,12 @@ function getVolumeValue(properties) {
     }
     return Number.isFinite(properties.volume) ? Number(properties.volume) : 1;
 }
-function resolveClipPaths({ path, clips, clipMode }) {
+function resolveClipPaths({ clips, clipMode }) {
     const normalizedClips = normalizeClips(clips);
     if (normalizedClips.length > 0) {
         return { paths: normalizedClips, mode: clipMode !== null && clipMode !== void 0 ? clipMode : 'random' };
     }
-    return path ? { paths: [path], mode: 'single' } : { paths: [], mode: 'single' };
+    return { paths: [], mode: 'single' };
 }
 function pickClip(paths, mode, sequenceIndexRef) {
     if (paths.length <= 1 || mode === 'single') {
@@ -63,22 +64,27 @@ function pickClip(paths, mode, sequenceIndexRef) {
     return paths[Math.floor(Math.random() * paths.length)];
 }
 function SoundComponentEditor({ component, onUpdate, basePath = '' }) {
-    const clips = normalizeClips(component.properties.clips);
+    const clips = Array.isArray(component.properties.clips)
+        ? component.properties.clips.map((clip) => typeof clip === 'string' ? clip : '')
+        : [];
     const randomizePitch = Boolean(component.properties.randomizePitch);
     const randomizeVolume = Boolean(component.properties.randomizeVolume);
     const positional = Boolean(component.properties.positional);
+    const setClips = (nextClips) => {
+        onUpdate({ clips: nextClips });
+    };
     const addClip = () => {
-        onUpdate({ clips: [...clips, ''] });
+        setClips([...clips, '']);
     };
     const updateClip = (index, nextPath) => {
-        onUpdate({
-            clips: clips.map((clip, clipIndex) => clipIndex === index ? nextPath : clip),
-        });
+        const nextClips = [...clips];
+        nextClips[index] = nextPath;
+        setClips(nextClips);
     };
     const removeClip = (index) => {
-        onUpdate({ clips: clips.filter((_, clipIndex) => clipIndex !== index) });
+        setClips(clips.filter((_, clipIndex) => clipIndex !== index));
     };
-    return (_jsxs(FieldGroup, { children: [_jsx(SoundPicker, { value: component.properties.path, onChange: (path) => onUpdate({ path: path !== null && path !== void 0 ? path : '' }), basePath: basePath }), _jsx(StringField, { name: "eventName", label: "Listen Event", values: component.properties, onChange: onUpdate, placeholder: "click" }), _jsx(FieldRenderer, { fields: [
+    return (_jsxs(FieldGroup, { children: [_jsx(StringField, { name: "eventName", label: "Listen Event", values: component.properties, onChange: onUpdate, placeholder: "click" }), _jsx(FieldRenderer, { fields: [
                     {
                         name: 'clipMode',
                         label: 'Clip Mode',
@@ -117,7 +123,9 @@ function payloadMatchesNode(nodeId, payload) {
     const hasEntityIds = ids.some(id => typeof id === 'string');
     return hasEntityIds ? ids.includes(nodeId) : true;
 }
-function SoundComponentView({ properties, editMode, nodeId, children, loadedSounds }) {
+function SoundComponentView({ properties, children }) {
+    const { getSound } = useAssetRuntime();
+    const { editMode, nodeId } = useEntityRuntime();
     const { camera } = useThree();
     const { eventName, positional = false, refDistance = 1, maxDistance = 24, rolloffFactor = 1, distanceModel = 'inverse' } = properties;
     const sequenceIndexRef = useRef(0);
@@ -170,7 +178,7 @@ function SoundComponentView({ properties, editMode, nodeId, children, loadedSoun
             const pitch = getPitchValue(properties);
             const volume = getVolumeValue(properties);
             if (!positional) {
-                const loadedBuffer = loadedSounds === null || loadedSounds === void 0 ? void 0 : loadedSounds[clip];
+                const loadedBuffer = getSound(clip);
                 if (loadedBuffer && !soundManager.hasBuffer(clip)) {
                     soundManager.setBuffer(clip, loadedBuffer);
                 }
@@ -183,7 +191,7 @@ function SoundComponentView({ properties, editMode, nodeId, children, loadedSoun
             }
             const audio = positionalAudioRef.current;
             const listener = listenerRef.current;
-            const buffer = loadedSounds === null || loadedSounds === void 0 ? void 0 : loadedSounds[clip];
+            const buffer = getSound(clip);
             if (!audio || !listener || !buffer) {
                 return;
             }
@@ -197,7 +205,7 @@ function SoundComponentView({ properties, editMode, nodeId, children, loadedSoun
             audio.setVolume(volume);
             audio.play();
         });
-    }, [editMode, eventName, loadedSounds, mode, nodeId, paths, positional, properties]);
+    }, [editMode, eventName, getSound, mode, nodeId, paths, positional, properties]);
     return (_jsxs(_Fragment, { children: [positional && listenerRef.current ? _jsx("positionalAudio", { ref: positionalAudioRef, args: [listenerRef.current] }) : null, children] }));
 }
 const SoundComponent = {
@@ -205,7 +213,6 @@ const SoundComponent = {
     Editor: SoundComponentEditor,
     View: SoundComponentView,
     defaultProperties: {
-        path: '',
         eventName: '',
         clips: [],
         clipMode: 'single',
@@ -225,8 +232,6 @@ const SoundComponent = {
     },
     getAssetRefs: (properties) => {
         const refs = [];
-        if (properties.path)
-            refs.push({ type: 'sound', path: properties.path });
         if (Array.isArray(properties.clips)) {
             properties.clips.forEach((clip) => {
                 if (typeof clip === 'string' && clip.trim().length > 0) {

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

@@ -1,57 +1,82 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useEffect, useMemo, useState } from "react";
-import { BooleanField, ColorField, FieldGroup, Label, NumberField } from "./Input";
+import { useHelper } from "@react-three/drei";
+import { useRef, useEffect } from "react";
+import { BooleanField, ColorField, Label, NumberField, Vector3Input } from "./Input";
 import { SpotLightHelper } from "three";
+import { useAssetRuntime, useEntityRuntime } from "../PrefabRoot";
 import { useFrame } from "@react-three/fiber";
 import { TexturePicker } from "../../assetviewer/page";
+import { LightSection, ShadowBiasField, mergeWithDefaults } from "./lightUtils";
 const spotLightDefaults = {
     color: '#ffffff',
-    intensity: 200,
-    angle: 0.5,
-    penumbra: 0.5,
-    distance: 100,
-    castShadow: true,
+    intensity: 1,
+    angle: Math.PI / 3,
+    penumbra: 0,
+    distance: 0,
+    decay: 2,
+    castShadow: false,
+    shadowMapSize: 512,
+    shadowBias: 0,
+    shadowNormalBias: 0,
+    shadowAutoUpdate: true,
+    shadowCameraNear: 0.5,
+    shadowCameraFar: 500,
+    targetOffset: [0, -5, 0],
+    map: undefined,
 };
 function SpotLightComponentEditor({ component, onUpdate, basePath = "" }) {
-    const values = Object.assign(Object.assign({}, spotLightDefaults), component.properties);
-    return (_jsxs(FieldGroup, { children: [_jsx(ColorField, { name: "color", label: "Color", values: values, onChange: onUpdate }), _jsx(NumberField, { name: "intensity", label: "Intensity", values: values, onChange: onUpdate, min: 0, step: 1, fallback: 200 }), _jsx(NumberField, { name: "angle", label: "Angle", values: values, onChange: onUpdate, min: 0, max: Math.PI, step: 0.05, fallback: 0.5 }), _jsx(NumberField, { name: "penumbra", label: "Penumbra", values: values, onChange: onUpdate, min: 0, max: 1, step: 0.05, fallback: 0.5 }), _jsx(NumberField, { name: "distance", label: "Distance", values: values, onChange: onUpdate, min: 0, step: 1, fallback: 100 }), _jsx(BooleanField, { name: "castShadow", label: "Cast Shadow", values: values, onChange: onUpdate, fallback: true }), _jsxs("div", { children: [_jsx(Label, { children: "Texture Map" }), _jsx(TexturePicker, { value: values.map, onChange: (map) => onUpdate({ map }), basePath: basePath })] })] }));
+    const values = mergeWithDefaults(spotLightDefaults, 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(NumberField, { name: "angle", label: "Angle", values: values, onChange: onUpdate, min: 0, max: Math.PI / 2, step: 0.05, fallback: Math.PI / 3 }), _jsx(NumberField, { name: "penumbra", label: "Penumbra", values: values, onChange: onUpdate, min: 0, max: 1, step: 0.05, fallback: 0 }), _jsx(NumberField, { name: "distance", label: "Distance", values: values, onChange: onUpdate, min: 0, step: 1, fallback: 0 }), _jsx(NumberField, { name: "decay", label: "Decay", values: values, onChange: onUpdate, min: 0, step: 0.1, fallback: 2 }), _jsx(Vector3Input, { label: "Target Offset", value: values.targetOffset, onChange: targetOffset => onUpdate({ targetOffset }), snap: 0.5 }), _jsxs("div", { children: [_jsx(Label, { children: "Texture Map" }), _jsx(TexturePicker, { value: values.map, onChange: (map) => onUpdate({ map }), basePath: basePath })] })] }), _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 })] })) : null] })] }));
 }
-function SpotLightView({ properties, children, editMode, isSelected, loadedTextures }) {
-    const merged = Object.assign(Object.assign({}, spotLightDefaults), properties);
+function SpotLightView({ properties, children }) {
+    var _a;
+    const { getTexture } = useAssetRuntime();
+    const { editMode, isSelected } = useEntityRuntime();
+    const merged = mergeWithDefaults(spotLightDefaults, properties);
     const color = merged.color;
     const intensity = merged.intensity;
     const angle = merged.angle;
     const penumbra = merged.penumbra;
     const distance = merged.distance;
+    const decay = merged.decay;
     const castShadow = merged.castShadow;
-    const textureMap = merged.map && loadedTextures ? loadedTextures[merged.map] : undefined;
+    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 targetOffset = merged.targetOffset;
+    const textureMap = merged.map ? (_a = getTexture(merged.map)) !== null && _a !== void 0 ? _a : undefined : undefined;
     const spotLightRef = useRef(null);
     const targetRef = useRef(null);
-    const [spotLight, setSpotLight] = useState(null);
-    const spotLightHelper = useMemo(() => spotLight ? new SpotLightHelper(spotLight, color) : null, [spotLight, color]);
-    useEffect(() => {
-        return () => {
-            spotLightHelper === null || spotLightHelper === void 0 ? void 0 : spotLightHelper.dispose();
-        };
-    }, [spotLightHelper]);
+    useHelper(editMode && isSelected ? spotLightRef : null, SpotLightHelper, color);
     useEffect(() => {
         if (spotLightRef.current && targetRef.current) {
             spotLightRef.current.target = targetRef.current;
-            setSpotLight(spotLightRef.current);
         }
     }, []);
+    useEffect(() => {
+        var _a;
+        const shadow = (_a = spotLightRef.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]);
     useFrame(() => {
-        if (spotLightHelper && editMode && isSelected) {
-            spotLightHelper.update();
+        var _a;
+        if ((_a = spotLightRef.current) === null || _a === void 0 ? void 0 : _a.target) {
+            spotLightRef.current.target.updateMatrixWorld();
         }
     });
-    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, map: textureMap, castShadow: castShadow, "shadow-mapSize-width": 1024, "shadow-mapSize-height": 1024, "shadow-bias": -0.0001, "shadow-normalBias": 0.02 }), editMode && isSelected && spotLightHelper && (_jsx("primitive", { object: spotLightHelper })), _jsx("object3D", { ref: targetRef, position: [0, -5, 0] }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: [0, -5, 0], children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] })), children] }));
+    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, decay: decay, map: textureMap, castShadow: castShadow, "shadow-mapSize-width": shadowMapSize, "shadow-mapSize-height": shadowMapSize, "shadow-bias": shadowBias, "shadow-normalBias": shadowNormalBias, "shadow-autoUpdate": shadowAutoUpdate, "shadow-camera-near": shadowCameraNear, "shadow-camera-far": shadowCameraFar }), _jsx("object3D", { ref: targetRef, position: targetOffset }), editMode && isSelected && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.15, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] })] })), children] }));
 }
 const SpotLightComponent = {
     name: 'SpotLight',
     Editor: SpotLightComponentEditor,
     View: SpotLightView,
-    defaultProperties: spotLightDefaults,
+    defaultProperties: {},
     getAssetRefs: (properties) => {
         if (properties.map)
             return [{ type: 'texture', path: properties.map }];

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

@@ -3,6 +3,7 @@ import TransformComponent from './TransformComponent';
 import MaterialComponent from './MaterialComponent';
 import PhysicsComponent from './PhysicsComponent';
 import SpotLightComponent from './SpotLightComponent';
+import PointLightComponent from './PointLightComponent';
 import DirectionalLightComponent from './DirectionalLightComponent';
 import AmbientLightComponent from './AmbientLightComponent';
 import ModelComponent from './ModelComponent';
@@ -17,6 +18,7 @@ export default [
     MaterialComponent,
     PhysicsComponent,
     SpotLightComponent,
+    PointLightComponent,
     DirectionalLightComponent,
     AmbientLightComponent,
     ModelComponent,

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

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+export declare function mergeWithDefaults<T extends Record<string, any>>(defaults: T, properties?: Record<string, any> | null): T;
+export declare function LightSection({ title, children }: {
+    title: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ShadowBiasField({ name, label, values, onChange, fallback, }: {
+    name: string;
+    label: string;
+    values: Record<string, any>;
+    onChange: (values: Record<string, any>) => void;
+    fallback?: number;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { colors } from '../styles';
+import { FieldGroup, FieldRow, NumberInput } from './Input';
+export function mergeWithDefaults(defaults, properties) {
+    const merged = Object.assign({}, defaults);
+    if (!properties) {
+        return merged;
+    }
+    for (const [key, value] of Object.entries(properties)) {
+        if (value !== undefined) {
+            merged[key] = value;
+        }
+    }
+    return merged;
+}
+export function LightSection({ title, children }) {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 8,
+            padding: '8px 10px',
+            border: `1px solid ${colors.border}`,
+            borderRadius: 6,
+            background: colors.bgSurface,
+        }, children: [_jsx("div", { style: {
+                    fontSize: 10,
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.08em',
+                    color: colors.textMuted,
+                    fontWeight: 600,
+                }, children: title }), _jsx(FieldGroup, { children: children })] }));
+}
+const shadowBiasSteps = [0.1, 0.01, 0.001, 0.0001, 0.00001, 0.000001];
+function getBiasStep(value) {
+    var _a;
+    const absValue = Math.abs(value);
+    if (absValue === 0) {
+        return 0.001;
+    }
+    return (_a = shadowBiasSteps.find(step => absValue >= step)) !== null && _a !== void 0 ? _a : shadowBiasSteps[shadowBiasSteps.length - 1];
+}
+function formatBiasStep(step) {
+    return step.toLocaleString('en-US', {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 6,
+        useGrouping: false,
+    });
+}
+export function ShadowBiasField({ name, label, values, onChange, fallback = 0, }) {
+    var _a;
+    const value = (_a = values[name]) !== null && _a !== void 0 ? _a : fallback;
+    const [step, setStep] = useState(() => getBiasStep(value));
+    return (_jsx(FieldRow, { label: label, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [_jsx(NumberInput, { value: value, onChange: nextValue => onChange({ [name]: nextValue }), step: step, min: -0.1, max: 0.1, style: { width: 92 } }), _jsx("select", { value: step.toString(), onChange: event => setStep(Number(event.target.value)), style: {
+                        width: 78,
+                        backgroundColor: colors.bgInput,
+                        border: `1px solid ${colors.border}`,
+                        color: colors.text,
+                        borderRadius: 3,
+                        fontSize: 11,
+                        padding: '3px 6px',
+                        fontFamily: 'monospace',
+                    }, title: "Bias scrub step", children: shadowBiasSteps.map(option => (_jsx("option", { value: option, children: formatBiasStep(option) }, option))) })] }) }));
+}

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

@@ -0,0 +1,37 @@
+import type { ComponentData, GameObject, Prefab } from './types';
+export type PrefabNodeRecord = Omit<GameObject, 'children'>;
+export type PrefabAssetRefCounts = Record<string, number>;
+export interface PrefabState {
+    prefabId?: string;
+    prefabName?: string;
+    rootId: string;
+    nodesById: Record<string, PrefabNodeRecord>;
+    childIdsById: Record<string, string[]>;
+    parentIdById: Record<string, string | null>;
+    revision: number;
+    assetManifestKey: string;
+    assetRefCounts: PrefabAssetRefCounts;
+}
+export declare function createDefaultComponentProperties(type: string): Record<string, any>;
+export declare function createComponentData(type: string, properties?: Record<string, any>): ComponentData;
+export declare function createNode(name: string, components?: Record<string, {
+    type: string;
+    properties?: Record<string, any>;
+}>, options?: {
+    id?: string;
+    children?: GameObject[];
+}): GameObject;
+export declare function createEmptyNode(name?: string): GameObject;
+export declare function createEmptyPrefab(): Prefab;
+export declare function createModelNode(filename: string, name?: string): GameObject;
+export declare function createImageNode(texturePath: string, name?: string): GameObject;
+export declare function normalizePrefab(prefab: Prefab, revision?: number): PrefabState;
+export declare function createPrefabPatch(state: PrefabState, patch: Partial<PrefabState>, nextAssetRefCounts?: PrefabAssetRefCounts): Partial<PrefabState>;
+export declare function denormalizePrefab(state: Pick<PrefabState, 'prefabId' | 'prefabName' | 'rootId' | 'nodesById' | 'childIdsById'>): Prefab;
+export declare function collectSubtreeIds(id: string, childIdsById: Record<string, string[]>): string[];
+export declare function insertSubtree(node: GameObject, parentId: string | null, nodesById: Record<string, PrefabNodeRecord>, childIdsById: Record<string, string[]>, parentIdById: Record<string, string | null>): void;
+export declare function cloneSubtree(id: string, parentId: string | null, source: Pick<PrefabState, 'nodesById' | 'childIdsById'>, nodesById: Record<string, PrefabNodeRecord>, childIdsById: Record<string, string[]>, parentIdById: Record<string, string | null>): string | null;
+export declare function isDescendant(id: string, potentialAncestorId: string, parentIdById: Record<string, string | null>): boolean;
+export declare function updateAssetRefsForNodeChange(assetRefCounts: PrefabAssetRefCounts, currentNode: PrefabNodeRecord, nextNode: PrefabNodeRecord): PrefabAssetRefCounts;
+export declare function collectSubtreeAssetRefs(node: GameObject): string[];
+export declare function collectAssetRefsForIds(ids: string[], nodesById: Record<string, PrefabNodeRecord>): string[];