react-three-game 0.0.69 → 0.0.71

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

@@ -1,6 +1,6 @@
 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 { FieldGroup, NumberField } from './Input';
@@ -20,21 +20,15 @@ function CameraComponentView({ properties, children, editMode, isSelected }) {
     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,16 +1,17 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { gameEvents } from '../GameEvents';
-import { FieldGroup } from './Input';
-function ClickComponentEditor() {
-    return (_jsx(FieldGroup, { children: _jsx("div", { style: { fontSize: 12, opacity: 0.8 }, children: "Emits a click game event in play mode when this entity is clicked." }) }));
+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 }) {
+function ClickComponentView({ children, editMode, nodeId, properties }) {
     const clickValid = useRef(false);
+    const eventName = (properties === null || properties === void 0 ? void 0 : properties.eventName) || 'click';
     const emitClick = (event) => {
         if (!nodeId)
             return;
-        gameEvents.emit('click', {
+        gameEvents.emit(eventName, {
             sourceEntityId: nodeId,
             point: [event.point.x, event.point.y, event.point.z],
             button: event.button,
@@ -26,6 +27,8 @@ function ClickComponentView({ children, editMode, nodeId }) {
     return (_jsx("group", { onPointerDown: (event) => {
             event.stopPropagation();
             clickValid.current = true;
+        }, onClick: (event) => {
+            event.stopPropagation();
         }, onPointerMove: () => {
             clickValid.current = false;
         }, onPointerUp: (event) => {
@@ -40,6 +43,8 @@ const ClickComponent = {
     name: 'Click',
     Editor: ClickComponentEditor,
     View: ClickComponentView,
-    defaultProperties: {},
+    defaultProperties: {
+        eventName: 'click',
+    },
 };
 export default ClickComponent;

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

@@ -1,5 +1,28 @@
 import { FC } from "react";
 import { ComponentData, GameObject } from "../types";
+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;
+    /** The entity ID this component belongs to. */
+    nodeId?: string;
+    /** True when the editor is in edit mode. */
+    editMode?: boolean;
+    /** True when this entity is selected in the editor. */
+    isSelected?: boolean;
+    /** 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<{
@@ -9,10 +32,13 @@ export interface Component {
         basePath?: string;
     }>;
     defaultProperties: any;
-    View?: FC<any>;
-    nonComposable?: boolean;
+    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;
-export declare function getComponent(name: string): Component | undefined;
-export declare function getAllComponents(): Record<string, Component>;
-export declare function getNonComposableKeys(): string[];
+export declare function getComponentDef(name: string): Component | undefined;
+export declare function getAllComponentDefs(): Record<string, Component>;
+export declare function getComponentAssetRefs(componentType: string, properties: Record<string, any>): AssetRef[];

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

@@ -2,14 +2,14 @@ const REGISTRY = {};
 export function registerComponent(component) {
     REGISTRY[component.name] = component;
 }
-export function getComponent(name) {
+export function getComponentDef(name) {
     return REGISTRY[name];
 }
-export function getAllComponents() {
+export function getAllComponentDefs() {
     return Object.assign({}, REGISTRY);
 }
-export function getNonComposableKeys() {
-    return Object.values(REGISTRY)
-        .filter(c => c.nonComposable)
-        .map(c => c.name.toLowerCase());
+export function getComponentAssetRefs(componentType, properties) {
+    var _a, _b;
+    const component = REGISTRY[componentType];
+    return (_b = (_a = component === null || component === void 0 ? void 0 : component.getAssetRefs) === null || _a === void 0 ? void 0 : _a.call(component, properties)) !== null && _b !== void 0 ? _b : [];
 }

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

@@ -1,59 +1,114 @@
 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 { 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);
+    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 +118,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 +171,6 @@ const DirectionalLightComponent = {
     name: 'DirectionalLight',
     Editor: DirectionalLightComponentEditor,
     View: DirectionalLightView,
-    defaultProperties: directionalLightDefaults
+    defaultProperties: {}
 };
 export default DirectionalLightComponent;

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 { useSceneRuntime } from '../PrefabRoot';
+function EnvironmentView({ properties, children, }) {
+    const { getAssetRevision } = useSceneRuntime();
     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/GeometryComponent.js

@@ -84,7 +84,7 @@ const GeometryComponent = {
     name: 'Geometry',
     Editor: GeometryComponentEditor,
     View: GeometryComponentView,
-    nonComposable: true,
+    isWrapper: true,
     defaultProperties: {
         geometryType: 'box',
         args: getDefaultArgs('box'),

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

@@ -136,6 +136,22 @@ interface BoundVector3FieldProps extends BoundFieldProps {
 export declare function FieldGroup({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
+interface ListEditorOption {
+    value: string;
+    label: string;
+}
+interface ListEditorProps<T> {
+    label: string;
+    items: T[];
+    renderItem: (item: T, index: number) => React.ReactNode;
+    onAdd: (value: string) => void;
+    addOptions?: ListEditorOption[];
+    emptyMessage?: string;
+    canAdd?: boolean;
+    addButtonTitle?: string;
+    addDisabledTitle?: string;
+}
+export declare function ListEditor<T>({ label, items, renderItem, onAdd, addOptions, emptyMessage, canAdd, addButtonTitle, addDisabledTitle, }: ListEditorProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare function NumberField({ name, label, values, onChange, fallback, step, min, max, style, }: BoundNumberFieldProps): import("react/jsx-runtime").JSX.Element;
 export declare function StringField({ name, label, values, onChange, fallback, placeholder, }: BoundStringFieldProps): import("react/jsx-runtime").JSX.Element;
 export declare function ColorField({ name, label, values, onChange, fallback, }: BoundColorFieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -294,6 +294,39 @@ function bindFieldChange(name, onChange) {
 export function FieldGroup({ children }) {
     return _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: children });
 }
+export function ListEditor({ label, items, renderItem, onAdd, addOptions = [], emptyMessage = 'No items added.', canAdd = true, addButtonTitle = 'Add item', addDisabledTitle = 'No more items available', }) {
+    var _a;
+    const [selectedAddValue, setSelectedAddValue] = useState('');
+    const hasAddSelector = addOptions.length > 0;
+    const resolvedAddValue = hasAddSelector ? (selectedAddValue || ((_a = addOptions[0]) === null || _a === void 0 ? void 0 : _a.value) || '') : '';
+    const canAddItem = canAdd && (!hasAddSelector || resolvedAddValue !== '');
+    useEffect(() => {
+        var _a, _b;
+        if (!hasAddSelector) {
+            if (selectedAddValue !== '') {
+                setSelectedAddValue('');
+            }
+            return;
+        }
+        const stillAvailable = addOptions.some(option => option.value === selectedAddValue);
+        if (!stillAvailable) {
+            setSelectedAddValue((_b = (_a = addOptions[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '');
+        }
+    }, [addOptions, hasAddSelector, selectedAddValue]);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx(Label, { children: label }), _jsxs("div", { style: { display: 'flex', gap: 6, alignItems: 'center' }, children: [hasAddSelector ? (_jsx("div", { style: { minWidth: 140 }, children: _jsx(SelectInput, { value: resolvedAddValue, onChange: setSelectedAddValue, options: canAdd ? addOptions : [{ value: '', label: 'All items added' }] }) })) : null, _jsx("button", { type: "button", onClick: () => onAdd(resolvedAddValue), disabled: !canAddItem, style: {
+                                    width: 22,
+                                    height: 22,
+                                    borderRadius: 3,
+                                    border: `1px solid ${canAddItem ? colors.accentBorder : colors.border}`,
+                                    background: canAddItem ? colors.accentBg : colors.bgSurface,
+                                    color: canAddItem ? colors.accent : colors.textMuted,
+                                    cursor: canAddItem ? 'pointer' : 'not-allowed',
+                                    fontSize: 14,
+                                    lineHeight: 1,
+                                    padding: 0,
+                                    flexShrink: 0,
+                                }, title: canAddItem ? addButtonTitle : addDisabledTitle, children: "+" })] })] }), items.length === 0 ? (_jsx("div", { style: { fontSize: 11, color: colors.textMuted }, children: emptyMessage })) : null, items.map(renderItem)] }));
+}
 export function NumberField({ name, label, values, onChange, fallback = 0, step, min, max, style, }) {
     var _a;
     return (_jsx(FieldRow, { label: label, children: _jsx(NumberInput, { value: (_a = values[name]) !== null && _a !== void 0 ? _a : fallback, onChange: bindFieldChange(name, onChange), step: step, min: min, max: max, style: style }) }));

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 { useSceneRuntime } 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 } = useSceneRuntime();
+    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);
@@ -198,7 +201,7 @@ const MaterialComponent = {
     name: 'Material',
     Editor: MaterialComponentEditor,
     View: MaterialComponentView,
-    nonComposable: true,
+    isWrapper: true,
     defaultProperties: {
         materialType: 'standard',
         color: '#ffffff',
@@ -208,6 +211,14 @@ const MaterialComponent = {
         opacity: 1,
         metalness: 0,
         roughness: 1
-    }
+    },
+    getAssetRefs: (properties) => {
+        const refs = [];
+        if (properties.texture)
+            refs.push({ type: 'texture', path: properties.texture });
+        if (properties.normalMapTexture)
+            refs.push({ type: 'texture', path: properties.normalMapTexture });
+        return refs;
+    },
 };
 export default MaterialComponent;