react-three-game 0.0.17 → 0.0.19

package/dist/tools/prefabeditor/InstanceProvider.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { createContext, useContext, useMemo, useRef, useState, useEffect, useCallback } from "react";
 import { Merged } from '@react-three/drei';
-import * as THREE from 'three';
 import { InstancedRigidBodies } from "@react-three/rapier";
+import { Mesh, Matrix4 } from "three";
+// Helper functions for comparison
 function arrayEquals(a, b) {
     if (a === b)
         return true;
@@ -30,6 +31,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef }
         setInstances(prev => {
             const idx = prev.findIndex(i => i.id === instance.id);
             if (idx !== -1) {
+                // Update existing if changed
                 if (instanceEquals(prev[idx], instance)) {
                     return prev;
                 }
@@ -37,6 +39,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef }
                 copy[idx] = instance;
                 return copy;
             }
+            // Add new
             return [...prev, instance];
         });
     }, []);
@@ -47,14 +50,14 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef }
             return prev.filter(i => i.id !== id);
         });
     }, []);
-    // Flatten all model meshes once
+    // Flatten all model meshes once (models → flat mesh parts)
     const { flatMeshes, modelParts } = useMemo(() => {
         const flatMeshes = {};
         const modelParts = {};
         Object.entries(models).forEach(([modelKey, model]) => {
             const root = model;
             root.updateWorldMatrix(false, true);
-            const rootInverse = new THREE.Matrix4().copy(root.matrixWorld).invert();
+            const rootInverse = new Matrix4().copy(root.matrixWorld).invert();
             let partIndex = 0;
             root.traverse((obj) => {
                 if (obj.isMesh) {
@@ -62,7 +65,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef }
                     const relativeTransform = obj.matrixWorld.clone().premultiply(rootInverse);
                     geom.applyMatrix4(relativeTransform);
                     const partKey = `${modelKey}__${partIndex}`;
-                    flatMeshes[partKey] = new THREE.Mesh(geom, obj.material);
+                    flatMeshes[partKey] = new Mesh(geom, obj.material);
                     partIndex++;
                 }
             });
@@ -70,7 +73,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef }
         });
         return { flatMeshes, modelParts };
     }, [models]);
-    // Group instances by meshPath + physics type
+    // Group instances by meshPath + physics type for batch rendering
     const grouped = useMemo(() => {
         var _a;
         const groups = {};
@@ -104,7 +107,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef }
                 const partCount = modelParts[modelKey] || 0;
                 if (partCount === 0)
                     return null;
-                // Restrict meshes to just this model's parts for this Merged
+                // Create mesh subset for this specific model
                 const meshesForModel = {};
                 for (let i = 0; i < partCount; i++) {
                     const partKey = `${modelKey}__${i}`;
@@ -113,7 +116,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef }
                 return (_jsx(Merged, { meshes: meshesForModel, castShadow: true, receiveShadow: true, children: (instancesMap) => (_jsx(NonPhysicsInstancedGroup, { modelKey: modelKey, group: group, partCount: partCount, instancesMap: instancesMap, onSelect: onSelect, registerRef: registerRef })) }, key));
             })] }));
 }
-// Physics instancing stays the same
+// Render physics-enabled instances using InstancedRigidBodies
 function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes }) {
     const instances = useMemo(() => group.instances.map(inst => ({
         key: inst.id,
@@ -126,12 +129,17 @@ function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes }) {
             return (_jsx("instancedMesh", { args: [mesh.geometry, mesh.material, group.instances.length], castShadow: true, receiveShadow: true, frustumCulled: false }, i));
         }) }));
 }
-// Non-physics instanced visuals: per-instance group using Merged's Instance components
+// Render non-physics instances using Merged's per-instance groups
 function NonPhysicsInstancedGroup({ modelKey, group, partCount, instancesMap, onSelect, registerRef }) {
     const clickValid = useRef(false);
-    const handlePointerDown = (e) => { e.stopPropagation(); clickValid.current = true; };
-    const handlePointerMove = () => { if (clickValid.current)
-        clickValid.current = false; };
+    const handlePointerDown = (e) => {
+        e.stopPropagation();
+        clickValid.current = true;
+    };
+    const handlePointerMove = () => {
+        if (clickValid.current)
+            clickValid.current = false;
+    };
     const handlePointerUp = (e, id) => {
         if (clickValid.current) {
             e.stopPropagation();
@@ -146,7 +154,7 @@ function NonPhysicsInstancedGroup({ modelKey, group, partCount, instancesMap, on
                 return _jsx(Instance, {}, i);
             }) }, inst.id))) }));
 }
-// --- GameInstance: just registers an instance, renders nothing ---
+// GameInstance component: registers an instance for batch rendering (renders nothing itself)
 export const GameInstance = React.forwardRef(({ id, modelUrl, position, rotation, scale, physics = undefined, }, ref) => {
     const ctx = useContext(GameInstanceContext);
     const addInstance = ctx === null || ctx === void 0 ? void 0 : ctx.addInstance;
@@ -167,6 +175,6 @@ export const GameInstance = React.forwardRef(({ id, modelUrl, position, rotation
             removeInstance(instance.id);
         };
     }, [addInstance, removeInstance, instance]);
-    // No visual here – provider will render visuals for all instances
+    // No visual rendering - provider handles all instanced visuals
     return null;
 });

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -14,28 +14,24 @@ import { useState, useRef, useEffect } from "react";
 import PrefabRoot from "./PrefabRoot";
 import { Physics } from "@react-three/rapier";
 import EditorUI from "./EditorUI";
+import { base, toolbar } from "./styles";
 const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }) => {
     const [editMode, setEditMode] = useState(true);
     const [loadedPrefab, setLoadedPrefab] = useState(initialPrefab !== null && initialPrefab !== void 0 ? initialPrefab : {
-        "id": "prefab-default",
-        "name": "New Prefab",
-        "root": {
-            "id": "root",
-            "components": {
-                "transform": {
-                    "type": "Transform",
-                    "properties": {
-                        "position": [0, 0, 0],
-                        "rotation": [0, 0, 0],
-                        "scale": [1, 1, 1]
-                    }
+        id: "prefab-default",
+        name: "New Prefab",
+        root: {
+            id: "root",
+            components: {
+                transform: {
+                    type: "Transform",
+                    properties: { position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1] }
                 }
             }
         }
     });
     const [selectedId, setSelectedId] = useState(null);
     const [transformMode, setTransformMode] = useState("translate");
-    const prefabRef = useRef(null);
     // Sync internal state with external initialPrefab prop
     useEffect(() => {
         if (initialPrefab) {
@@ -48,136 +44,74 @@ const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }) =>
         const resolved = typeof newPrefab === 'function' ? newPrefab(loadedPrefab) : newPrefab;
         onPrefabChange === null || onPrefabChange === void 0 ? void 0 : onPrefabChange(resolved);
     };
-    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] }) }), _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 })] });
+    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, editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, transformMode: transformMode, 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 = () => {
+    const throttleRef = useRef(null);
+    const lastDataRef = useRef(JSON.stringify(currentData));
+    const undo = () => {
         if (historyIndex > 0) {
             const newIndex = historyIndex - 1;
             setHistoryIndex(newIndex);
-            lastSavedDataRef.current = JSON.stringify(history[newIndex]);
+            lastDataRef.current = JSON.stringify(history[newIndex]);
             onDataChange(history[newIndex]);
         }
     };
-    const handleRedo = () => {
+    const redo = () => {
         if (historyIndex < history.length - 1) {
             const newIndex = historyIndex + 1;
             setHistoryIndex(newIndex);
-            lastSavedDataRef.current = JSON.stringify(history[newIndex]);
+            lastDataRef.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();
+                undo();
             }
-            // 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();
+                redo();
             }
         };
         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) {
+        const currentStr = JSON.stringify(currentData);
+        if (currentStr === lastDataRef.current)
             return;
-        }
-        // Clear existing throttle timeout
-        if (throttleTimeoutRef.current) {
-            clearTimeout(throttleTimeoutRef.current);
-        }
-        // Set new throttled update
-        throttleTimeoutRef.current = setTimeout(() => {
-            lastSavedDataRef.current = currentDataStr;
+        if (throttleRef.current)
+            clearTimeout(throttleRef.current);
+        throttleRef.current = setTimeout(() => {
+            lastDataRef.current = currentStr;
             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;
+                const newHistory = [...prev.slice(0, historyIndex + 1), currentData];
+                return newHistory.length > 50 ? newHistory.slice(1) : newHistory;
             });
-            setHistoryIndex(prev => {
-                const newHistory = history.slice(0, prev + 1);
-                newHistory.push(currentData);
-                return Math.min(newHistory.length - 1, 49);
-            });
-        }, 500); // 500ms throttle
+            setHistoryIndex(prev => Math.min(prev + 1, 49));
+        }, 500);
         return () => {
-            if (throttleTimeoutRef.current) {
-                clearTimeout(throttleTimeoutRef.current);
-            }
+            if (throttleRef.current)
+                clearTimeout(throttleRef.current);
         };
-    }, [currentData, historyIndex, history]);
+    }, [currentData]);
     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);
+            lastDataRef.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 });
+    return _jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: () => onEditModeChange(!editMode), children: editMode ? "▶" : "⏸" }), _jsx("div", { style: toolbar.divider }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), (canUndo ? {} : toolbar.disabled)), onClick: undo, disabled: !canUndo, children: "\u21B6" }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), (canRedo ? {} : toolbar.disabled)), onClick: redo, disabled: !canRedo, children: "\u21B7" }), _jsx("div", { style: toolbar.divider }), _jsx("button", { style: base.btn, onClick: handleLoad, children: "\uD83D\uDCE5" }), _jsx("button", { style: base.btn, onClick: () => saveJson(currentData, "prefab"), children: "\uD83D\uDCBE" })] });
 };
 const saveJson = (data, filename) => {
     const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));

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

@@ -7,7 +7,6 @@ export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     selectedId?: string | null;
     onSelect?: (id: string | null) => void;
     transformMode?: "translate" | "rotate" | "scale";
-    setTransformMode?: (mode: "translate" | "rotate" | "scale") => void;
     basePath?: string;
 } & import("react").RefAttributes<Group<import("three").Object3DEventMap>>>;
 export default PrefabRoot;

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -12,42 +12,26 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { MapControls, TransformControls } from "@react-three/drei";
 import { useState, useRef, useEffect, forwardRef, useCallback } from "react";
 import { Vector3, Euler, Quaternion, SRGBColorSpace, TextureLoader, Matrix4 } from "three";
-import { getComponent } from "./components/ComponentRegistry";
+import { getComponent, registerComponent } from "./components/ComponentRegistry";
 import { loadModel } from "../dragdrop/modelLoader";
 import { GameInstance, GameInstanceProvider } from "./InstanceProvider";
-// register all components
-import { registerComponent } from './components/ComponentRegistry';
+import { updateNode } from "./utils";
 import components from './components/';
+// Register all components
 components.forEach(registerComponent);
-function updatePrefabNode(root, id, update) {
-    if (root.id === id) {
-        return update(root);
-    }
-    if (root.children) {
-        return Object.assign(Object.assign({}, root), { children: root.children.map(child => updatePrefabNode(child, id, update)) });
-    }
-    return root;
-}
-export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, transformMode, setTransformMode, basePath = "" }, ref) => {
+export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, transformMode, basePath = "" }, ref) => {
     const [loadedModels, setLoadedModels] = useState({});
     const [loadedTextures, setLoadedTextures] = useState({});
-    // const [prefabRoot, setPrefabRoot] = useState<Prefab>(data); // Removed local state
     const loadingRefs = useRef(new Set());
     const objectRefs = useRef({});
     const [selectedObject, setSelectedObject] = useState(null);
     const registerRef = useCallback((id, obj) => {
         objectRefs.current[id] = obj;
-        if (id === selectedId) {
+        if (id === selectedId)
             setSelectedObject(obj);
-        }
     }, [selectedId]);
     useEffect(() => {
-        if (selectedId) {
-            setSelectedObject(objectRefs.current[selectedId] || null);
-        }
-        else {
-            setSelectedObject(null);
-        }
+        setSelectedObject(selectedId ? objectRefs.current[selectedId] || null : null);
     }, [selectedId]);
     const onTransformChange = () => {
         if (!selectedId || !onPrefabChange)
@@ -68,7 +52,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
         localMatrix.decompose(lp, lq, ls);
         const le = new Euler().setFromQuaternion(lq);
         // 4. Write back LOCAL transform into the prefab node
-        const newRoot = updatePrefabNode(data.root, selectedId, (node) => (Object.assign(Object.assign({}, node), { components: Object.assign(Object.assign({}, node === null || node === void 0 ? void 0 : node.components), { transform: {
+        const newRoot = updateNode(data.root, selectedId, (node) => (Object.assign(Object.assign({}, node), { components: Object.assign(Object.assign({}, node.components), { transform: {
                     type: "Transform",
                     properties: {
                         position: [lp.x, lp.y, lp.z],
@@ -128,13 +112,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 +137,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 +163,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/transform/physics)
+    const modelDef = model ? getComponent('Model') : undefined;
+    // Context props for all component Views
     const contextProps = {
         loadedModels: ctx.loadedModels,
         loadedTextures: ctx.loadedTextures,
@@ -197,20 +181,19 @@ function renderCoreNode(gameObject, ctx, parentMatrix) {
         parentMatrix,
         registerRef: ctx.registerRef,
     };
-    // Separate wrapper components (that accept children) from leaf components
+    // 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]) => key !== 'geometry' && key !== 'material' && key !== 'model' && key !== 'transform' && key !== 'physics')
+            .filter(([key]) => !['geometry', 'material', 'model', 'transform', 'physics'].includes(key))
             .forEach(([key, comp]) => {
             if (!comp || !comp.type)
                 return;
             const def = getComponent(comp.type);
             if (!def || !def.View)
                 return;
-            // Check if the component View accepts children by checking function signature
-            // Components that wrap content should accept children prop
+            // 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 });
@@ -220,19 +203,19 @@ function renderCoreNode(gameObject, ctx, parentMatrix) {
             }
         });
     }
-    // Build the core content (model or mesh)
+    // Build core content based on what components exist
     let coreContent;
-    // 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();
-        coreContent = (_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")), leafComponents] }));
+    // 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) {
-        // Otherwise, if geometry present, render a mesh
-        coreContent = (_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")), leafComponents] }));
+        // 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] }));
     }
     else {
-        // No geometry or model, just render leaf components
+        // No visual component - just render leaves
         coreContent = _jsx(_Fragment, { children: leafComponents });
     }
     // Wrap core content with wrapper components (in order)

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,102 @@
+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 cameraHelperRef = useRef(null);
+    // Add target to scene once
+    useEffect(() => {
+        const target = targetRef.current;
+        scene.add(target);
+        return () => {
+            scene.remove(target);
+        };
+    }, [scene]);
+    // Set up light target reference once
+    useEffect(() => {
+        if (directionalLightRef.current) {
+            directionalLightRef.current.target = targetRef.current;
+        }
+    }, []);
+    // Update target position and mark shadow for update when light moves or offset changes
+    useFrame(() => {
+        if (!directionalLightRef.current)
+            return;
+        const lightWorldPos = new Vector3();
+        directionalLightRef.current.getWorldPosition(lightWorldPos);
+        const newTargetPos = new Vector3(lightWorldPos.x + targetOffset[0], lightWorldPos.y + targetOffset[1], lightWorldPos.z + targetOffset[2]);
+        // Only update if position actually changed
+        if (!targetRef.current.position.equals(newTargetPos)) {
+            targetRef.current.position.copy(newTargetPos);
+            if (directionalLightRef.current.shadow) {
+                directionalLightRef.current.shadow.needsUpdate = true;
+            }
+        }
+        // Update camera helper in edit mode
+        if (editMode && cameraHelperRef.current) {
+            cameraHelperRef.current.update();
+        }
+    });
+    // Create/destroy camera helper for edit mode
+    useEffect(() => {
+        var _a;
+        if (editMode && ((_a = directionalLightRef.current) === null || _a === void 0 ? void 0 : _a.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();
+                    cameraHelperRef.current = null;
+                }
+            };
+        }
+    }, [editMode, scene]);
+    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;