react-three-game 0.0.16 → 0.0.18

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -50,65 +50,134 @@ const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }) =>
     };
     return _jsxs(_Fragment, { children: [_jsx(GameCanvas, { children: _jsxs(Physics, { paused: editMode, children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { data: loadedPrefab, ref: prefabRef, 
                             // props for edit mode
-                            editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath }), children] }) }), _jsxs("div", { style: {
-                    position: "absolute",
-                    top: 8,
-                    left: "50%",
-                    transform: "translateX(-50%)",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 6,
-                    padding: "2px 4px",
-                    background: "rgba(0,0,0,0.55)",
-                    border: "1px solid rgba(255,255,255,0.12)",
-                    borderRadius: 4,
-                    color: "rgba(255,255,255,0.9)",
-                    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-                    fontSize: 11,
-                    lineHeight: 1,
-                    WebkitUserSelect: "none",
-                    userSelect: "none",
-                }, children: [_jsx("button", { style: {
-                            padding: "2px 6px",
-                            font: "inherit",
-                            background: "transparent",
-                            color: "inherit",
-                            border: "1px solid rgba(255,255,255,0.18)",
-                            borderRadius: 3,
-                            cursor: "pointer",
-                        }, onClick: () => setEditMode(!editMode), onPointerEnter: (e) => {
-                            e.currentTarget.style.background = "rgba(255,255,255,0.08)";
-                        }, onPointerLeave: (e) => {
-                            e.currentTarget.style.background = "transparent";
-                        }, children: editMode ? "▶" : "⏸" }), _jsx("span", { style: { opacity: 0.35 }, children: "|" }), _jsx("button", { style: {
-                            padding: "2px 6px",
-                            font: "inherit",
-                            background: "transparent",
-                            color: "inherit",
-                            border: "1px solid rgba(255,255,255,0.18)",
-                            borderRadius: 3,
-                            cursor: "pointer",
-                        }, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
-                            const prefab = yield loadJson();
-                            if (prefab)
-                                setLoadedPrefab(prefab);
-                        }), onPointerEnter: (e) => {
-                            e.currentTarget.style.background = "rgba(255,255,255,0.08)";
-                        }, onPointerLeave: (e) => {
-                            e.currentTarget.style.background = "transparent";
-                        }, children: "\uD83D\uDCE5" }), _jsx("button", { style: {
-                            padding: "2px 6px",
-                            font: "inherit",
-                            background: "transparent",
-                            color: "inherit",
-                            border: "1px solid rgba(255,255,255,0.18)",
-                            borderRadius: 3,
-                            cursor: "pointer",
-                        }, onClick: () => saveJson(loadedPrefab, "prefab"), onPointerEnter: (e) => {
-                            e.currentTarget.style.background = "rgba(255,255,255,0.08)";
-                        }, onPointerLeave: (e) => {
-                            e.currentTarget.style.background = "transparent";
-                        }, children: "\uD83D\uDCBE" })] }), editMode && _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath })] });
+                            editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath }), children] }) }), _jsx(SaveDataPanel, { currentData: loadedPrefab, onDataChange: updatePrefab, editMode: editMode, onEditModeChange: setEditMode }), editMode && _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath })] });
+};
+const SaveDataPanel = ({ currentData, onDataChange, editMode, onEditModeChange }) => {
+    const [history, setHistory] = useState([currentData]);
+    const [historyIndex, setHistoryIndex] = useState(0);
+    const throttleTimeoutRef = useRef(null);
+    const lastSavedDataRef = useRef(JSON.stringify(currentData));
+    // Define undo/redo handlers
+    const handleUndo = () => {
+        if (historyIndex > 0) {
+            const newIndex = historyIndex - 1;
+            setHistoryIndex(newIndex);
+            lastSavedDataRef.current = JSON.stringify(history[newIndex]);
+            onDataChange(history[newIndex]);
+        }
+    };
+    const handleRedo = () => {
+        if (historyIndex < history.length - 1) {
+            const newIndex = historyIndex + 1;
+            setHistoryIndex(newIndex);
+            lastSavedDataRef.current = JSON.stringify(history[newIndex]);
+            onDataChange(history[newIndex]);
+        }
+    };
+    // Keyboard shortcuts for undo/redo
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            // Undo: Ctrl+Z (Cmd+Z on Mac)
+            if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+                e.preventDefault();
+                handleUndo();
+            }
+            // Redo: Ctrl+Shift+Z or Ctrl+Y (Cmd+Shift+Z or Cmd+Y on Mac)
+            else if ((e.ctrlKey || e.metaKey) && (e.shiftKey && e.key === 'z' || e.key === 'y')) {
+                e.preventDefault();
+                handleRedo();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [historyIndex, history]);
+    // Throttled history update when currentData changes
+    useEffect(() => {
+        const currentDataStr = JSON.stringify(currentData);
+        // Skip if data hasn't actually changed
+        if (currentDataStr === lastSavedDataRef.current) {
+            return;
+        }
+        // Clear existing throttle timeout
+        if (throttleTimeoutRef.current) {
+            clearTimeout(throttleTimeoutRef.current);
+        }
+        // Set new throttled update
+        throttleTimeoutRef.current = setTimeout(() => {
+            lastSavedDataRef.current = currentDataStr;
+            setHistory(prev => {
+                // Slice history at current index (discard future states)
+                const newHistory = prev.slice(0, historyIndex + 1);
+                // Add new state
+                newHistory.push(currentData);
+                // Limit history size to 50 states
+                if (newHistory.length > 50) {
+                    newHistory.shift();
+                    return newHistory;
+                }
+                return newHistory;
+            });
+            setHistoryIndex(prev => {
+                const newHistory = history.slice(0, prev + 1);
+                newHistory.push(currentData);
+                return Math.min(newHistory.length - 1, 49);
+            });
+        }, 500); // 500ms throttle
+        return () => {
+            if (throttleTimeoutRef.current) {
+                clearTimeout(throttleTimeoutRef.current);
+            }
+        };
+    }, [currentData, historyIndex, history]);
+    const handleLoad = () => __awaiter(void 0, void 0, void 0, function* () {
+        const prefab = yield loadJson();
+        if (prefab) {
+            onDataChange(prefab);
+            // Reset history when loading new file
+            setHistory([prefab]);
+            setHistoryIndex(0);
+            lastSavedDataRef.current = JSON.stringify(prefab);
+        }
+    });
+    const canUndo = historyIndex > 0;
+    const canRedo = historyIndex < history.length - 1;
+    return _jsxs("div", { style: {
+            position: "absolute",
+            top: 8,
+            left: "50%",
+            transform: "translateX(-50%)",
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "2px 4px",
+            background: "rgba(0,0,0,0.55)",
+            border: "1px solid rgba(255,255,255,0.12)",
+            borderRadius: 4,
+            color: "rgba(255,255,255,0.9)",
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+            fontSize: 11,
+            lineHeight: 1,
+            WebkitUserSelect: "none",
+            userSelect: "none",
+        }, children: [_jsx(PanelButton, { onClick: () => onEditModeChange(!editMode), children: editMode ? "▶" : "⏸" }), _jsx("span", { style: { opacity: 0.35 }, children: "|" }), _jsx(PanelButton, { onClick: handleUndo, disabled: !canUndo, title: "Undo (Ctrl+Z)", children: "\u21B6" }), _jsx(PanelButton, { onClick: handleRedo, disabled: !canRedo, title: "Redo (Ctrl+Shift+Z)", children: "\u21B7" }), _jsx("span", { style: { opacity: 0.35 }, children: "|" }), _jsx(PanelButton, { onClick: handleLoad, title: "Load JSON", children: "\uD83D\uDCE5" }), _jsx(PanelButton, { onClick: () => saveJson(currentData, "prefab"), title: "Save JSON", children: "\uD83D\uDCBE" })] });
+};
+const PanelButton = ({ onClick, disabled, title, children }) => {
+    return _jsx("button", { style: {
+            padding: "2px 6px",
+            font: "inherit",
+            background: "transparent",
+            color: disabled ? "rgba(255,255,255,0.3)" : "inherit",
+            border: "1px solid rgba(255,255,255,0.18)",
+            borderRadius: 3,
+            cursor: disabled ? "not-allowed" : "pointer",
+            opacity: disabled ? 0.5 : 1,
+        }, onClick: onClick, disabled: disabled, title: title, onPointerEnter: (e) => {
+            if (!disabled) {
+                e.currentTarget.style.background = "rgba(255,255,255,0.08)";
+            }
+        }, onPointerLeave: (e) => {
+            e.currentTarget.style.background = "transparent";
+        }, children: children });
 };
 const saveJson = (data, filename) => {
     const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -128,13 +128,15 @@ function GameObjectRenderer({ gameObject, selectedId, onSelect, registerRef, loa
     // Early return if gameObject is null or undefined
     if (!gameObject)
         return null;
-    // Build a small context object to avoid long param lists
+    if (gameObject.disabled === true || gameObject.hidden === true)
+        return null;
+    // Build context object for passing to helper functions
     const ctx = { gameObject, selectedId, onSelect, registerRef, loadedModels, loadedTextures, editMode };
-    // --- 1. Transform (local + world) ---
+    // --- 1. Compute transforms (local + world) ---
     const transformProps = getNodeTransformProps(gameObject);
     const localMatrix = new Matrix4().compose(new Vector3(...transformProps.position), new Quaternion().setFromEuler(new Euler(...transformProps.rotation)), new Vector3(...transformProps.scale));
     const worldMatrix = parentMatrix.clone().multiply(localMatrix);
-    // preserve click/drag detection from previous implementation
+    // --- 2. Handle selection interaction (edit mode only) ---
     const clickValid = useRef(false);
     const handlePointerDown = (e) => {
         e.stopPropagation();
@@ -151,20 +153,18 @@ function GameObjectRenderer({ gameObject, selectedId, onSelect, registerRef, loa
         }
         clickValid.current = false;
     };
-    if (gameObject.disabled === true || gameObject.hidden === true)
-        return null;
-    // --- 2. If instanced, short-circuit to a tiny clean branch ---
+    // --- 3. If instanced model, short-circuit to GameInstance (terminal node) ---
     const isInstanced = !!((_c = (_b = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.instanced);
     if (isInstanced) {
         return renderInstancedNode(gameObject, worldMatrix, ctx);
     }
-    // --- 3. Core content decided by component registry ---
+    // --- 4. Render core content using component system ---
     const core = renderCoreNode(gameObject, ctx, parentMatrix);
-    // --- 5. Render children (always relative transforms) ---
-    const children = ((_d = gameObject.children) !== null && _d !== void 0 ? _d : []).map((child) => (_jsx(GameObjectRenderer, { gameObject: child, selectedId: selectedId, onSelect: onSelect, registerRef: registerRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: worldMatrix }, child.id)));
-    // --- 4. Wrap with physics if needed ---
+    // --- 5. Wrap with physics if needed (except in edit mode) ---
     const physicsWrapped = wrapPhysicsIfNeeded(gameObject, core, ctx);
-    // --- 6. Final group wrapper ---
+    // --- 6. Render children recursively (always relative transforms) ---
+    const children = ((_d = gameObject.children) !== null && _d !== void 0 ? _d : []).map((child) => (_jsx(GameObjectRenderer, { gameObject: child, selectedId: selectedId, onSelect: onSelect, registerRef: registerRef, loadedModels: loadedModels, loadedTextures: loadedTextures, editMode: editMode, parentMatrix: worldMatrix }, child.id)));
+    // --- 7. Final group wrapper with local transform ---
     return (_jsxs("group", { ref: (el) => registerRef(gameObject.id, el), position: transformProps.position, rotation: transformProps.rotation, scale: transformProps.scale, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, children: [physicsWrapped, children] }));
 }
 // Helper: render an instanced GameInstance (terminal node)
@@ -179,16 +179,16 @@ function renderInstancedNode(gameObject, worldMatrix, ctx) {
     const modelUrl = (_d = (_c = (_b = gameObject.components) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d.filename;
     return (_jsx(GameInstance, { id: gameObject.id, modelUrl: modelUrl, position: [wp.x, wp.y, wp.z], rotation: [we.x, we.y, we.z], scale: [ws.x, ws.y, ws.z], physics: ctx.editMode ? undefined : physics === null || physics === void 0 ? void 0 : physics.properties }));
 }
-// Helper: render main model/geometry content for a non-instanced node
+// Helper: render main content for a non-instanced node using the component system
 function renderCoreNode(gameObject, ctx, parentMatrix) {
     var _a, _b, _c;
     const geometry = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.geometry;
     const material = (_b = gameObject.components) === null || _b === void 0 ? void 0 : _b.material;
-    const modelComp = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.model;
+    const model = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.model;
     const geometryDef = geometry ? getComponent('Geometry') : undefined;
     const materialDef = material ? getComponent('Material') : undefined;
-    const isModelAvailable = !!(modelComp && modelComp.properties && modelComp.properties.filename && ctx.loadedModels[modelComp.properties.filename]);
-    // Generic component views (exclude geometry/material/model)
+    const modelDef = model ? getComponent('Model') : undefined;
+    // Context props for all component Views
     const contextProps = {
         loadedModels: ctx.loadedModels,
         loadedTextures: ctx.loadedTextures,
@@ -197,29 +197,47 @@ function renderCoreNode(gameObject, ctx, parentMatrix) {
         parentMatrix,
         registerRef: ctx.registerRef,
     };
-    const allComponentViews = gameObject.components
-        ? Object.entries(gameObject.components)
-            .filter(([key]) => key !== 'geometry' && key !== 'material' && key !== 'model' && key !== 'transform' && key !== 'physics')
-            .map(([key, comp]) => {
+    // Collect wrapper and leaf components (excluding transform/physics which are handled separately)
+    const wrapperComponents = [];
+    const leafComponents = [];
+    if (gameObject.components) {
+        Object.entries(gameObject.components)
+            .filter(([key]) => !['geometry', 'material', 'model', 'transform', 'physics'].includes(key))
+            .forEach(([key, comp]) => {
             if (!comp || !comp.type)
-                return null;
+                return;
             const def = getComponent(comp.type);
             if (!def || !def.View)
-                return null;
-            return _jsx(def.View, Object.assign({ properties: comp.properties }, contextProps), key);
-        })
-        : null;
-    // If we have a model (non-instanced) render it as a primitive with material override
-    if (isModelAvailable) {
-        const modelObj = ctx.loadedModels[modelComp.properties.filename].clone();
-        return (_jsxs("primitive", { object: modelObj, children: [material && materialDef && materialDef.View && (_jsx(materialDef.View, { properties: material.properties, loadedTextures: ctx.loadedTextures, isSelected: ctx.selectedId === gameObject.id, editMode: ctx.editMode, parentMatrix: parentMatrix, registerRef: ctx.registerRef }, "material")), allComponentViews] }));
+                return;
+            // Components that accept children are wrappers, others are leaves
+            const viewString = def.View.toString();
+            if (viewString.includes('children')) {
+                wrapperComponents.push({ key, View: def.View, properties: comp.properties });
+            }
+            else {
+                leafComponents.push(_jsx(def.View, Object.assign({ properties: comp.properties }, contextProps), key));
+            }
+        });
+    }
+    // Build core content based on what components exist
+    let coreContent;
+    // Priority: Model > Geometry + Material > Empty
+    if (model && modelDef && modelDef.View) {
+        // Model component wraps its children (including material override)
+        coreContent = (_jsxs(modelDef.View, Object.assign({ properties: model.properties }, contextProps, { children: [material && materialDef && materialDef.View && (_jsx(materialDef.View, Object.assign({ properties: material.properties }, contextProps), "material")), leafComponents] })));
+    }
+    else if (geometry && geometryDef && geometryDef.View) {
+        // Geometry + Material = mesh
+        coreContent = (_jsxs("mesh", { castShadow: true, receiveShadow: true, children: [_jsx(geometryDef.View, Object.assign({ properties: geometry.properties }, contextProps)), material && materialDef && materialDef.View && (_jsx(materialDef.View, Object.assign({ properties: material.properties }, contextProps), "material")), leafComponents] }));
     }
-    // Otherwise, if geometry present, render a mesh
-    if (geometry && geometryDef && geometryDef.View) {
-        return (_jsxs("mesh", { children: [_jsx(geometryDef.View, Object.assign({ properties: geometry.properties }, contextProps), "geometry"), material && materialDef && materialDef.View && (_jsx(materialDef.View, { properties: material.properties, loadedTextures: ctx.loadedTextures, isSelected: ctx.selectedId === gameObject.id, editMode: ctx.editMode, parentMatrix: parentMatrix, registerRef: ctx.registerRef }, "material")), allComponentViews] }));
+    else {
+        // No visual component - just render leaves
+        coreContent = _jsx(_Fragment, { children: leafComponents });
     }
-    // Default: render other component views (no geometry/model)
-    return _jsx(_Fragment, { children: allComponentViews });
+    // Wrap core content with wrapper components (in order)
+    return wrapperComponents.reduce((content, { key, View, properties }) => {
+        return _jsx(View, Object.assign({ properties: properties }, contextProps, { children: content }), key);
+    }, coreContent);
 }
 // Helper: wrap core content with physics component when necessary
 function wrapPhysicsIfNeeded(gameObject, content, ctx) {

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

@@ -5,6 +5,8 @@ export interface Component {
         component: any;
         onUpdate: (newComp: any) => void;
         basePath?: string;
+        transformMode?: "translate" | "rotate" | "scale";
+        setTransformMode?: (m: "translate" | "rotate" | "scale") => void;
     }>;
     defaultProperties: any;
     View?: FC<any>;

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

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

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

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import { CameraHelper, Object3D, Vector3 } from "three";
+function DirectionalLightComponentEditor({ component, onUpdate }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const props = {
+        color: (_a = component.properties.color) !== null && _a !== void 0 ? _a : '#ffffff',
+        intensity: (_b = component.properties.intensity) !== null && _b !== void 0 ? _b : 1.0,
+        castShadow: (_c = component.properties.castShadow) !== null && _c !== void 0 ? _c : true,
+        shadowMapSize: (_d = component.properties.shadowMapSize) !== null && _d !== void 0 ? _d : 1024,
+        shadowCameraNear: (_e = component.properties.shadowCameraNear) !== null && _e !== void 0 ? _e : 0.1,
+        shadowCameraFar: (_f = component.properties.shadowCameraFar) !== null && _f !== void 0 ? _f : 100,
+        shadowCameraTop: (_g = component.properties.shadowCameraTop) !== null && _g !== void 0 ? _g : 30,
+        shadowCameraBottom: (_h = component.properties.shadowCameraBottom) !== null && _h !== void 0 ? _h : -30,
+        shadowCameraLeft: (_j = component.properties.shadowCameraLeft) !== null && _j !== void 0 ? _j : -30,
+        shadowCameraRight: (_k = component.properties.shadowCameraRight) !== null && _k !== void 0 ? _k : 30,
+        targetOffset: (_l = component.properties.targetOffset) !== null && _l !== void 0 ? _l : [0, -5, 0]
+    };
+    return _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Color" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("input", { type: "color", className: "h-5 w-5 bg-transparent border-none cursor-pointer", value: props.color, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'color': e.target.value })) }), _jsx("input", { type: "text", className: "flex-1 bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.color, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'color': e.target.value })) })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Intensity" }), _jsx("input", { type: "number", step: "0.1", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.intensity, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'intensity': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Cast Shadow" }), _jsx("input", { type: "checkbox", className: "h-4 w-4 bg-black/40 border border-cyan-500/30 cursor-pointer", checked: props.castShadow, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'castShadow': e.target.checked })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Shadow Map Size" }), _jsx("input", { type: "number", step: "256", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.shadowMapSize, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowMapSize': parseFloat(e.target.value) })) })] }), _jsxs("div", { className: "border-t border-cyan-500/20 pt-2 mt-2", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1", children: "Shadow Camera" }), _jsxs("div", { className: "grid grid-cols-2 gap-1", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[8px] text-cyan-400/50 mb-0.5", children: "Near" }), _jsx("input", { type: "number", step: "0.1", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.shadowCameraNear, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowCameraNear': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[8px] text-cyan-400/50 mb-0.5", children: "Far" }), _jsx("input", { type: "number", step: "1", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.shadowCameraFar, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowCameraFar': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[8px] text-cyan-400/50 mb-0.5", children: "Top" }), _jsx("input", { type: "number", step: "1", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.shadowCameraTop, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowCameraTop': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[8px] text-cyan-400/50 mb-0.5", children: "Bottom" }), _jsx("input", { type: "number", step: "1", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.shadowCameraBottom, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowCameraBottom': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[8px] text-cyan-400/50 mb-0.5", children: "Left" }), _jsx("input", { type: "number", step: "1", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.shadowCameraLeft, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowCameraLeft': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[8px] text-cyan-400/50 mb-0.5", children: "Right" }), _jsx("input", { type: "number", step: "1", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.shadowCameraRight, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowCameraRight': parseFloat(e.target.value) })) })] })] })] }), _jsxs("div", { className: "border-t border-cyan-500/20 pt-2 mt-2", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1", children: "Target Offset" }), _jsxs("div", { className: "grid grid-cols-3 gap-1", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[8px] text-cyan-400/50 mb-0.5", children: "X" }), _jsx("input", { type: "number", step: "0.5", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.targetOffset[0], onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'targetOffset': [parseFloat(e.target.value), props.targetOffset[1], props.targetOffset[2]] })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[8px] text-cyan-400/50 mb-0.5", children: "Y" }), _jsx("input", { type: "number", step: "0.5", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.targetOffset[1], onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'targetOffset': [props.targetOffset[0], parseFloat(e.target.value), props.targetOffset[2]] })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[8px] text-cyan-400/50 mb-0.5", children: "Z" }), _jsx("input", { type: "number", step: "0.5", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.targetOffset[2], onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'targetOffset': [props.targetOffset[0], props.targetOffset[1], parseFloat(e.target.value)] })) })] })] })] })] });
+}
+function DirectionalLightView({ properties, editMode }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const color = (_a = properties.color) !== null && _a !== void 0 ? _a : '#ffffff';
+    const intensity = (_b = properties.intensity) !== null && _b !== void 0 ? _b : 1.0;
+    const castShadow = (_c = properties.castShadow) !== null && _c !== void 0 ? _c : true;
+    const shadowMapSize = (_d = properties.shadowMapSize) !== null && _d !== void 0 ? _d : 1024;
+    const shadowCameraNear = (_e = properties.shadowCameraNear) !== null && _e !== void 0 ? _e : 0.1;
+    const shadowCameraFar = (_f = properties.shadowCameraFar) !== null && _f !== void 0 ? _f : 100;
+    const shadowCameraTop = (_g = properties.shadowCameraTop) !== null && _g !== void 0 ? _g : 30;
+    const shadowCameraBottom = (_h = properties.shadowCameraBottom) !== null && _h !== void 0 ? _h : -30;
+    const shadowCameraLeft = (_j = properties.shadowCameraLeft) !== null && _j !== void 0 ? _j : -30;
+    const shadowCameraRight = (_k = properties.shadowCameraRight) !== null && _k !== void 0 ? _k : 30;
+    const targetOffset = (_l = properties.targetOffset) !== null && _l !== void 0 ? _l : [0, -5, 0];
+    const { scene } = useThree();
+    const directionalLightRef = useRef(null);
+    const targetRef = useRef(new Object3D());
+    const lastUpdate = useRef(0);
+    const cameraHelperRef = useRef(null);
+    const lastPositionRef = useRef(new Vector3());
+    // Add target to scene
+    useEffect(() => {
+        if (targetRef.current) {
+            scene.add(targetRef.current);
+            return () => {
+                scene.remove(targetRef.current);
+            };
+        }
+    }, [scene]);
+    // Update target position when light position or offset changes
+    useEffect(() => {
+        if (directionalLightRef.current && targetRef.current) {
+            const lightWorldPos = new Vector3();
+            directionalLightRef.current.getWorldPosition(lightWorldPos);
+            targetRef.current.position.set(lightWorldPos.x + targetOffset[0], lightWorldPos.y + targetOffset[1], lightWorldPos.z + targetOffset[2]);
+            directionalLightRef.current.target = targetRef.current;
+        }
+    });
+    useEffect(() => {
+        // Create camera helper for edit mode and add to scene
+        if (editMode && directionalLightRef.current && directionalLightRef.current.shadow.camera) {
+            const helper = new CameraHelper(directionalLightRef.current.shadow.camera);
+            cameraHelperRef.current = helper;
+            scene.add(helper);
+            return () => {
+                if (cameraHelperRef.current) {
+                    scene.remove(cameraHelperRef.current);
+                    cameraHelperRef.current.dispose();
+                }
+            };
+        }
+    }, [editMode, scene]);
+    useFrame(({ clock }) => {
+        if (!directionalLightRef.current || !directionalLightRef.current.shadow)
+            return;
+        // Disable auto-update for shadows
+        if (directionalLightRef.current.shadow.autoUpdate) {
+            directionalLightRef.current.shadow.autoUpdate = false;
+            directionalLightRef.current.shadow.needsUpdate = true;
+        }
+        // Check if position has changed
+        const currentPosition = new Vector3();
+        directionalLightRef.current.getWorldPosition(currentPosition);
+        const positionChanged = !currentPosition.equals(lastPositionRef.current);
+        if (positionChanged) {
+            lastPositionRef.current.copy(currentPosition);
+            directionalLightRef.current.shadow.needsUpdate = true;
+            lastUpdate.current = clock.elapsedTime; // Reset timer on position change
+        }
+        // Update shadow map infrequently (every 5 seconds) if position hasn't changed
+        if (!editMode && !positionChanged && clock.elapsedTime - lastUpdate.current > 5) {
+            lastUpdate.current = clock.elapsedTime;
+            directionalLightRef.current.shadow.needsUpdate = true;
+        }
+        // Update camera helper in edit mode
+        if (editMode && cameraHelperRef.current) {
+            cameraHelperRef.current.update();
+        }
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("directionalLight", { ref: directionalLightRef, color: color, intensity: intensity, castShadow: castShadow, "shadow-mapSize": [shadowMapSize, shadowMapSize], "shadow-bias": -0.001, "shadow-normalBias": 0.02, children: _jsx("orthographicCamera", { attach: "shadow-camera", near: shadowCameraNear, far: shadowCameraFar, top: shadowCameraTop, bottom: shadowCameraBottom, left: shadowCameraLeft, right: shadowCameraRight }) }), editMode && (_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])
+                                    ];
+                                    geo.setFromPoints(points);
+                                } }), _jsx("lineBasicMaterial", { color: color, opacity: 0.6, transparent: true })] })] }))] }));
+}
+const DirectionalLightComponent = {
+    name: 'DirectionalLight',
+    Editor: DirectionalLightComponentEditor,
+    View: DirectionalLightView,
+    defaultProperties: {}
+};
+export default DirectionalLightComponent;

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

@@ -21,12 +21,20 @@ function ModelComponentEditor({ component, onUpdate, basePath = "" }) {
 function ModelComponentView({ properties, loadedModels, children }) {
     // Instanced models are handled elsewhere (GameInstance), so only render non-instanced here
     if (!properties.filename || properties.instanced)
-        return children || null;
+        return _jsx(_Fragment, { children: children });
     if (loadedModels && loadedModels[properties.filename]) {
-        return _jsxs(_Fragment, { children: [_jsx("primitive", { object: loadedModels[properties.filename].clone() }), children] });
+        const clonedModel = loadedModels[properties.filename].clone();
+        // Enable shadows on all meshes in the model
+        clonedModel.traverse((obj) => {
+            if (obj.isMesh) {
+                obj.castShadow = true;
+                obj.receiveShadow = true;
+            }
+        });
+        return _jsx("primitive", { object: clonedModel, children: children });
     }
-    // Optionally, render a placeholder if model is not loaded
-    return children || null;
+    // Model not loaded yet - render children only
+    return _jsx(_Fragment, { children: children });
 }
 const ModelComponent = {
     name: 'Model',

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

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

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { useRef } from "react";
+function RotatorComponentEditor({ component, onUpdate }) {
+    var _a, _b;
+    const props = {
+        speed: (_a = component.properties.speed) !== null && _a !== void 0 ? _a : 1.0,
+        axis: (_b = component.properties.axis) !== null && _b !== void 0 ? _b : 'y'
+    };
+    return _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Rotation Speed" }), _jsx("input", { type: "number", step: "0.1", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.speed, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { speed: parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Rotation Axis" }), _jsxs("select", { className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.axis, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { axis: e.target.value })), children: [_jsx("option", { value: "x", children: "X" }), _jsx("option", { value: "y", children: "Y" }), _jsx("option", { value: "z", children: "Z" })] })] })] });
+}
+// The view component for Rotator
+function RotatorView({ properties, children }) {
+    var _a, _b;
+    const groupRef = useRef(null);
+    const speed = (_a = properties.speed) !== null && _a !== void 0 ? _a : 1.0;
+    const axis = (_b = properties.axis) !== null && _b !== void 0 ? _b : 'y';
+    useFrame((state, delta) => {
+        if (groupRef.current) {
+            if (axis === 'x') {
+                groupRef.current.rotation.x += delta * speed;
+            }
+            else if (axis === 'y') {
+                groupRef.current.rotation.y += delta * speed;
+            }
+            else if (axis === 'z') {
+                groupRef.current.rotation.z += delta * speed;
+            }
+        }
+    });
+    return (_jsx("group", { ref: groupRef, children: children }));
+}
+const RotatorComponent = {
+    name: 'Rotator',
+    Editor: RotatorComponentEditor,
+    View: RotatorView,
+    defaultProperties: {
+        speed: 1.0,
+        axis: 'y'
+    }
+};
+export default RotatorComponent;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
 function SpotLightComponentEditor({ component, onUpdate }) {
     var _a, _b, _c, _d, _e, _f;
-    // Provide default values to prevent NaN
     const props = {
         color: (_a = component.properties.color) !== null && _a !== void 0 ? _a : '#ffffff',
         intensity: (_b = component.properties.intensity) !== null && _b !== void 0 ? _b : 1.0,
@@ -12,17 +12,22 @@ function SpotLightComponentEditor({ component, onUpdate }) {
     };
     return _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Color" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("input", { type: "color", className: "h-5 w-5 bg-transparent border-none cursor-pointer", value: props.color, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'color': e.target.value })) }), _jsx("input", { type: "text", className: "flex-1 bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.color, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'color': e.target.value })) })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Intensity" }), _jsx("input", { type: "number", step: "0.1", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.intensity, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'intensity': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Angle" }), _jsx("input", { type: "number", step: "0.1", min: "0", max: Math.PI, className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.angle, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'angle': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Penumbra" }), _jsx("input", { type: "number", step: "0.1", min: "0", max: "1", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.penumbra, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'penumbra': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Distance" }), _jsx("input", { type: "number", step: "1", min: "0", className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: props.distance, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'distance': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Cast Shadow" }), _jsx("input", { type: "checkbox", className: "h-4 w-4 bg-black/40 border border-cyan-500/30 cursor-pointer", checked: props.castShadow, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'castShadow': e.target.checked })) })] })] });
 }
-// The view component for SpotLight
-function SpotLightView({ properties }) {
+function SpotLightView({ properties, editMode }) {
     var _a, _b, _c, _d, _e, _f;
-    // Provide defaults in case properties are missing
     const color = (_a = properties.color) !== null && _a !== void 0 ? _a : '#ffffff';
     const intensity = (_b = properties.intensity) !== null && _b !== void 0 ? _b : 1.0;
     const angle = (_c = properties.angle) !== null && _c !== void 0 ? _c : Math.PI / 6;
     const penumbra = (_d = properties.penumbra) !== null && _d !== void 0 ? _d : 0.5;
     const distance = (_e = properties.distance) !== null && _e !== void 0 ? _e : 100;
     const castShadow = (_f = properties.castShadow) !== null && _f !== void 0 ? _f : true;
-    return (_jsx(_Fragment, { children: _jsx("spotLight", { color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, castShadow: castShadow }) }));
+    const spotLightRef = useRef(null);
+    const targetRef = useRef(null);
+    useEffect(() => {
+        if (spotLightRef.current && targetRef.current) {
+            spotLightRef.current.target = targetRef.current;
+        }
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("spotLight", { ref: spotLightRef, color: color, intensity: intensity, angle: angle, penumbra: penumbra, distance: distance, castShadow: castShadow, "shadow-bias": -0.0001, "shadow-normalBias": 0.02 }), _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 })] })] }))] }));
 }
 const SpotLightComponent = {
     name: 'SpotLight',