react-three-game 0.0.15 → 0.0.17

package/dist/tools/prefabeditor/EditorUI.js

@@ -4,6 +4,46 @@ import EditorTree from './EditorTree';
 import { getAllComponents } from './components/ComponentRegistry';
 function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transformMode, setTransformMode, basePath }) {
     const [isInspectorCollapsed, setIsInspectorCollapsed] = useState(false);
+    const ui = {
+        panel: {
+            position: 'absolute',
+            top: 8,
+            right: 8,
+            zIndex: 20,
+            width: 260,
+            background: 'rgba(0,0,0,0.55)',
+            color: 'rgba(255,255,255,0.9)',
+            border: '1px solid rgba(255,255,255,0.12)',
+            borderRadius: 6,
+            overflow: 'hidden',
+            backdropFilter: 'blur(6px)',
+            WebkitBackdropFilter: 'blur(6px)',
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+            fontSize: 11,
+            lineHeight: 1.2,
+        },
+        header: {
+            padding: '4px 6px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            cursor: 'pointer',
+            background: 'rgba(255,255,255,0.05)',
+            borderBottom: '1px solid rgba(255,255,255,0.10)',
+            textTransform: 'uppercase',
+            letterSpacing: '0.08em',
+            fontSize: 10,
+            color: 'rgba(255,255,255,0.7)',
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+        },
+        left: {
+            position: 'absolute',
+            top: 8,
+            left: 8,
+            zIndex: 20,
+        },
+    };
     const updateNode = (updater) => {
         if (!prefabData || !setPrefabData || !selectedId)
             return;
@@ -24,12 +64,112 @@ function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transf
     };
     const selectedNode = selectedId && prefabData ? findNode(prefabData.root, selectedId) : null;
     // if (!selectedNode) return null;
-    return _jsxs(_Fragment, { children: [_jsxs("div", { style: { position: 'absolute', top: "0.5rem", right: "0.5rem", zIndex: 20, backgroundColor: "rgba(0,0,0,0.7)", backdropFilter: "blur(4px)", color: "white", border: "1px solid rgba(0,255,255,0.3)" }, children: [_jsxs("div", { className: "px-1.5 py-1 font-mono text-[10px] bg-cyan-500/10 border-b border-cyan-500/30 sticky top-0 uppercase tracking-wider text-cyan-400/80 cursor-pointer hover:bg-cyan-500/20 flex items-center justify-between", onClick: () => setIsInspectorCollapsed(!isInspectorCollapsed), children: [_jsx("span", { children: "Inspector" }), _jsx("span", { className: "text-[8px]", children: isInspectorCollapsed ? '◀' : '▶' })] }), !isInspectorCollapsed && selectedNode && (_jsx(NodeInspector, { node: selectedNode, updateNode: updateNode, deleteNode: deleteNode, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath }))] }), _jsx("div", { style: { position: 'absolute', top: "0.5rem", left: "0.5rem", zIndex: 20 }, children: _jsx(EditorTree, { prefabData: prefabData, setPrefabData: setPrefabData, selectedId: selectedId, setSelectedId: setSelectedId }) })] });
+    return _jsxs(_Fragment, { children: [_jsxs("div", { style: ui.panel, children: [_jsxs("div", { style: ui.header, onClick: () => setIsInspectorCollapsed(!isInspectorCollapsed), onPointerEnter: (e) => {
+                            e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+                        }, onPointerLeave: (e) => {
+                            e.currentTarget.style.background = 'rgba(255,255,255,0.05)';
+                        }, children: [_jsx("span", { children: "Inspector" }), _jsx("span", { style: { fontSize: 10, opacity: 0.8 }, children: isInspectorCollapsed ? '◀' : '▶' })] }), !isInspectorCollapsed && selectedNode && (_jsx(NodeInspector, { node: selectedNode, updateNode: updateNode, deleteNode: deleteNode, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath }))] }), _jsx("div", { style: ui.left, children: _jsx(EditorTree, { prefabData: prefabData, setPrefabData: setPrefabData, selectedId: selectedId, setSelectedId: setSelectedId }) })] });
 }
 function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransformMode, basePath }) {
     const ALL_COMPONENTS = getAllComponents();
     const allComponentKeys = Object.keys(ALL_COMPONENTS);
     const [addComponentType, setAddComponentType] = useState(allComponentKeys[0]);
+    const s = {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 6,
+            padding: 6,
+            maxHeight: '80vh',
+            overflowY: 'auto',
+        },
+        section: {
+            paddingBottom: 6,
+            borderBottom: '1px solid rgba(255,255,255,0.10)',
+        },
+        label: {
+            display: 'block',
+            fontSize: 10,
+            opacity: 0.7,
+            textTransform: 'uppercase',
+            letterSpacing: '0.08em',
+            marginBottom: 4,
+        },
+        input: {
+            width: '100%',
+            background: 'rgba(255,255,255,0.06)',
+            border: '1px solid rgba(255,255,255,0.14)',
+            borderRadius: 4,
+            padding: '4px 6px',
+            color: 'rgba(255,255,255,0.92)',
+            font: 'inherit',
+            outline: 'none',
+        },
+        row: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 8,
+        },
+        button: {
+            padding: '2px 6px',
+            background: 'transparent',
+            color: 'rgba(255,255,255,0.9)',
+            border: '1px solid rgba(255,255,255,0.14)',
+            borderRadius: 4,
+            cursor: 'pointer',
+            font: 'inherit',
+        },
+        buttonActive: {
+            background: 'rgba(255,255,255,0.10)',
+        },
+        smallDanger: {
+            background: 'transparent',
+            border: 'none',
+            cursor: 'pointer',
+            color: 'rgba(255,120,120,0.95)',
+            font: 'inherit',
+            padding: '2px 4px',
+        },
+        componentHeader: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '4px 0',
+            borderBottom: '1px solid rgba(255,255,255,0.08)',
+            marginBottom: 4,
+        },
+        componentTitle: {
+            fontSize: 10,
+            textTransform: 'uppercase',
+            letterSpacing: '0.08em',
+            opacity: 0.8,
+        },
+        select: {
+            flex: 1,
+            background: 'rgba(255,255,255,0.06)',
+            border: '1px solid rgba(255,255,255,0.14)',
+            borderRadius: 4,
+            padding: '4px 6px',
+            color: 'rgba(255,255,255,0.92)',
+            font: 'inherit',
+            outline: 'none',
+        },
+        addButton: {
+            width: 28,
+            padding: '4px 0',
+            background: 'rgba(255,255,255,0.08)',
+            color: 'rgba(255,255,255,0.92)',
+            border: '1px solid rgba(255,255,255,0.14)',
+            borderRadius: 4,
+            cursor: 'pointer',
+            font: 'inherit',
+        },
+        disabled: {
+            opacity: 0.35,
+            cursor: 'not-allowed',
+        },
+    };
     const componentKeys = Object.keys(node.components || {}).join(',');
     useEffect(() => {
         // Components stored on nodes use lowercase keys (e.g. 'geometry'),
@@ -39,19 +179,19 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
             setAddComponentType(available[0] || "");
         }
     }, [componentKeys, addComponentType, node.components, allComponentKeys]);
-    return _jsxs("div", { className: "flex flex-col gap-1 text-[11px] max-w-[250px] max-h-[80vh] overflow-y-auto", children: [_jsx("div", { className: "border-b border-cyan-500/20 pb-1 px-1.5 pt-1", children: _jsx("input", { className: "w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[11px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: node.id, onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { id: e.target.value }))) }) }), _jsxs("div", { className: "flex justify-between items-center px-1.5 py-0.5 border-b border-cyan-500/20", children: [_jsx("label", { className: "text-[10px] font-mono text-cyan-400/80 uppercase tracking-wider", children: "Components" }), _jsx("button", { onClick: deleteNode, className: "text-[10px] text-red-400/80 hover:text-red-400", children: "\u2715" })] }), _jsxs("div", { className: "px-1.5 py-1 border-b border-cyan-500/20", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Mode" }), _jsx("div", { className: "flex gap-0.5", children: ["translate", "rotate", "scale"].map(mode => (_jsx("button", { onClick: () => setTransformMode(mode), className: `flex-1 px-1 py-0.5 text-[10px] font-mono border ${transformMode === mode ? 'bg-cyan-500/30 border-cyan-400/50 text-cyan-200' : 'bg-black/30 border-cyan-500/20 text-cyan-400/60 hover:border-cyan-400/30'}`, children: mode[0].toUpperCase() }, mode))) })] }), node.components && Object.entries(node.components).map(([key, comp]) => {
+    return _jsxs("div", { style: s.root, children: [_jsx("div", { style: s.section, children: _jsx("input", { style: s.input, value: node.id, onChange: e => updateNode(n => (Object.assign(Object.assign({}, n), { id: e.target.value }))) }) }), _jsxs("div", { style: Object.assign(Object.assign(Object.assign({}, s.row), s.section), { paddingBottom: 6 }), children: [_jsx("label", { style: Object.assign(Object.assign({}, s.label), { marginBottom: 0 }), children: "Components" }), _jsx("button", { onClick: deleteNode, style: s.smallDanger, title: "Delete node", children: "\u2715" })] }), node.components && Object.entries(node.components).map(([key, comp]) => {
                 if (!comp)
                     return null;
                 const componentDef = ALL_COMPONENTS[comp.type];
                 if (!componentDef)
-                    return _jsxs("div", { className: "px-1 py-0.5 text-red-400 text-[10px]", children: ["Unknown component type: ", comp.type, _jsx("textarea", { defaultValue: JSON.stringify(comp) })] }, key);
+                    return _jsxs("div", { style: { padding: '4px 0', color: 'rgba(255,120,120,0.95)', fontSize: 11 }, children: ["Unknown component type: ", comp.type, _jsx("textarea", { defaultValue: JSON.stringify(comp) })] }, key);
                 const EditorComp = componentDef.Editor;
-                return (_jsxs("div", { className: 'px-1', children: [_jsxs("div", { className: "flex justify-between items-center py-0.5 border-b border-cyan-500/20 bg-cyan-500/5", children: [_jsx("span", { className: "font-mono text-[10px] text-cyan-300 uppercase", children: key }), _jsx("button", { onClick: () => updateNode(n => {
+                return (_jsxs("div", { style: { padding: '0 2px' }, children: [_jsxs("div", { style: s.componentHeader, children: [_jsx("span", { style: s.componentTitle, children: key }), _jsx("button", { onClick: () => updateNode(n => {
                                         const components = Object.assign({}, n.components);
                                         delete components[key];
                                         return Object.assign(Object.assign({}, n), { components });
-                                    }), className: "text-[9px] text-red-400/60 hover:text-red-400", children: "\u2715" })] }), EditorComp ? (_jsx(EditorComp, { component: comp, onUpdate: (newProps) => updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: Object.assign(Object.assign({}, comp), { properties: Object.assign(Object.assign({}, comp.properties), newProps) }) }) }))), basePath: basePath })) : null] }, key));
-            }), _jsxs("div", { className: "px-1.5 py-1 border-t border-cyan-500/20", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Add Component" }), _jsxs("div", { className: "flex gap-0.5", children: [_jsx("select", { className: "bg-black/40 border border-cyan-500/30 px-1 py-0.5 flex-1 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", value: addComponentType, onChange: e => setAddComponentType(e.target.value), children: allComponentKeys.filter(k => { var _a; return !((_a = node.components) === null || _a === void 0 ? void 0 : _a[k.toLowerCase()]); }).map(k => (_jsx("option", { value: k, children: k }, k))) }), _jsx("button", { className: "bg-cyan-500/20 hover:bg-cyan-500/30 border border-cyan-500/30 px-2 py-0.5 text-[10px] text-cyan-300 font-mono disabled:opacity-30", disabled: !addComponentType, onClick: () => {
+                                    }), style: s.smallDanger, title: "Remove component", children: "\u2715" })] }), EditorComp ? (_jsx(EditorComp, { component: comp, onUpdate: (newProps) => updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: Object.assign(Object.assign({}, comp), { properties: Object.assign(Object.assign({}, comp.properties), newProps) }) }) }))), basePath: basePath, transformMode: transformMode, setTransformMode: setTransformMode })) : null] }, key));
+            }), _jsxs("div", { style: Object.assign(Object.assign({}, s.section), { borderBottom: 'none', paddingBottom: 0 }), children: [_jsx("label", { style: s.label, children: "Add Component" }), _jsxs("div", { style: { display: 'flex', gap: 6 }, children: [_jsx("select", { style: s.select, value: addComponentType, onChange: e => setAddComponentType(e.target.value), children: allComponentKeys.filter(k => { var _a; return !((_a = node.components) === null || _a === void 0 ? void 0 : _a[k.toLowerCase()]); }).map(k => (_jsx("option", { value: k, children: k }, k))) }), _jsx("button", { style: Object.assign(Object.assign({}, s.addButton), (!addComponentType ? s.disabled : null)), disabled: !addComponentType, onClick: () => {
                                     var _a;
                                     if (!addComponentType)
                                         return;
@@ -60,6 +200,14 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
                                         const key = addComponentType.toLowerCase();
                                         updateNode(n => (Object.assign(Object.assign({}, n), { components: Object.assign(Object.assign({}, n.components), { [key]: { type: def.name, properties: def.defaultProperties } }) })));
                                     }
+                                }, onPointerEnter: (e) => {
+                                    if (!addComponentType)
+                                        return;
+                                    e.currentTarget.style.background = 'rgba(255,255,255,0.12)';
+                                }, onPointerLeave: (e) => {
+                                    if (!addComponentType)
+                                        return;
+                                    e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
                                 }, children: "+" })] })] })] });
 }
 function findNode(root, id) {

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -50,11 +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: "0.5rem", left: "50%", transform: "translateX(-50%)" }, className: "bg-black/70 backdrop-blur-sm border border-cyan-500/30 px-2 py-1 flex items-center gap-1", children: [_jsx("button", { className: "px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30", onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }), _jsx("span", { className: "text-cyan-500/30 text-[10px]", children: "|" }), _jsx("button", { className: "px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30", onClick: () => __awaiter(void 0, void 0, void 0, function* () {
-                            const prefab = yield loadJson();
-                            if (prefab)
-                                setLoadedPrefab(prefab);
-                        }), children: "\uD83D\uDCE5" }), _jsx("button", { className: "px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30", onClick: () => saveJson(loadedPrefab, "prefab"), 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

@@ -188,7 +188,7 @@ function renderCoreNode(gameObject, ctx, parentMatrix) {
     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)
+    // Generic component views (exclude geometry/material/model/transform/physics)
     const contextProps = {
         loadedModels: ctx.loadedModels,
         loadedTextures: ctx.loadedTextures,
@@ -197,29 +197,48 @@ function renderCoreNode(gameObject, ctx, parentMatrix) {
         parentMatrix,
         registerRef: ctx.registerRef,
     };
-    const allComponentViews = gameObject.components
-        ? Object.entries(gameObject.components)
+    // Separate wrapper components (that accept children) from leaf components
+    const wrapperComponents = [];
+    const leafComponents = [];
+    if (gameObject.components) {
+        Object.entries(gameObject.components)
             .filter(([key]) => key !== 'geometry' && key !== 'material' && key !== 'model' && key !== 'transform' && key !== 'physics')
-            .map(([key, comp]) => {
+            .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;
+                return;
+            // Check if the component View accepts children by checking function signature
+            // Components that wrap content should accept children prop
+            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 the core content (model or mesh)
+    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();
-        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] }));
+        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] }));
+    }
+    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] }));
     }
-    // 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 geometry or model, just render leaf components
+        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/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/TransformComponent.js

@@ -1,6 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function TransformComponentEditor({ component, onUpdate }) {
-    return _jsxs("div", { className: "flex flex-col", children: [_jsx(Vector3Input, { label: "Position", value: component.properties.position, onChange: v => onUpdate({ position: v }) }), _jsx(Vector3Input, { label: "Rotation", value: component.properties.rotation, onChange: v => onUpdate({ rotation: v }) }), _jsx(Vector3Input, { label: "Scale", value: component.properties.scale, onChange: v => onUpdate({ scale: v }) })] });
+function TransformComponentEditor({ component, onUpdate, transformMode, setTransformMode }) {
+    const s = {
+        button: {
+            padding: '2px 6px',
+            background: 'transparent',
+            color: 'rgba(255,255,255,0.9)',
+            border: '1px solid rgba(255,255,255,0.14)',
+            borderRadius: 4,
+            cursor: 'pointer',
+            font: 'inherit',
+        },
+        buttonActive: {
+            background: 'rgba(255,255,255,0.10)',
+        },
+    };
+    return _jsxs("div", { className: "flex flex-col", children: [transformMode && setTransformMode && (_jsxs("div", { className: "mb-2", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1", children: "Transform Mode" }), _jsx("div", { style: { display: 'flex', gap: 6 }, children: ["translate", "rotate", "scale"].map(mode => (_jsx("button", { onClick: () => setTransformMode(mode), style: Object.assign(Object.assign(Object.assign({}, s.button), { flex: 1 }), (transformMode === mode ? s.buttonActive : {})), onPointerEnter: (e) => {
+                                if (transformMode !== mode)
+                                    e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+                            }, onPointerLeave: (e) => {
+                                if (transformMode !== mode)
+                                    e.currentTarget.style.background = 'transparent';
+                            }, children: mode }, mode))) })] })), _jsx(Vector3Input, { label: "Position", value: component.properties.position, onChange: v => onUpdate({ position: v }) }), _jsx(Vector3Input, { label: "Rotation", value: component.properties.rotation, onChange: v => onUpdate({ rotation: v }) }), _jsx(Vector3Input, { label: "Scale", value: component.properties.scale, onChange: v => onUpdate({ scale: v }) })] });
 }
 const TransformComponent = {
     name: 'Transform',
@@ -18,5 +38,10 @@ export function Vector3Input({ label, value, onChange }) {
         newValue[index] = parseFloat(val) || 0;
         onChange(newValue);
     };
-    return _jsxs("div", { className: "mb-1", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: label }), _jsxs("div", { className: "flex gap-0.5", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx("span", { className: "absolute left-0.5 top-0 text-[8px] text-red-400/80 font-mono", children: "X" }), _jsx("input", { className: "w-full bg-black/40 border border-cyan-500/30 pl-3 pr-0.5 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", type: "number", step: "0.1", value: value[0], onChange: e => handleChange(0, e.target.value) })] }), _jsxs("div", { className: "relative flex-1", children: [_jsx("span", { className: "absolute left-0.5 top-0 text-[8px] text-green-400/80 font-mono", children: "Y" }), _jsx("input", { className: "w-full bg-black/40 border border-cyan-500/30 pl-3 pr-0.5 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", type: "number", step: "0.1", value: value[1], onChange: e => handleChange(1, e.target.value) })] }), _jsxs("div", { className: "relative flex-1", children: [_jsx("span", { className: "absolute left-0.5 top-0 text-[8px] text-blue-400/80 font-mono", children: "Z" }), _jsx("input", { className: "w-full bg-black/40 border border-cyan-500/30 pl-3 pr-0.5 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", type: "number", step: "0.1", value: value[2], onChange: e => handleChange(2, e.target.value) })] })] })] });
+    const axes = [
+        { key: 'x', color: 'red', index: 0 },
+        { key: 'y', color: 'green', index: 1 },
+        { key: 'z', color: 'blue', index: 2 }
+    ];
+    return _jsxs("div", { className: "mb-2", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1", children: label }), _jsx("div", { className: "flex gap-1", children: axes.map(({ key, color, index }) => (_jsxs("div", { className: "flex-1 flex items-center gap-1 bg-black/30 border border-cyan-500/20 rounded px-1.5 py-1 min-h-[32px]", children: [_jsx("span", { className: `text-xs font-bold text-${color}-400 w-3`, children: key.toUpperCase() }), _jsx("input", { className: "flex-1 bg-transparent text-xs text-cyan-200 font-mono outline-none w-full min-w-0", type: "number", step: "0.1", value: value[index].toFixed(2), onChange: e => handleChange(index, e.target.value), onFocus: e => e.target.select() })] }, key))) })] });
 }

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

@@ -1,6 +1,6 @@
 export interface Prefab {
-    id: string;
-    name: string;
+    id?: string;
+    name?: string;
     description?: string;
     author?: string;
     version?: string;

package/dist/tools/prefabeditor/types.js

@@ -1 +1,2 @@
+// import { ThreeElements } from "@react-three/fiber"
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -17,12 +17,12 @@
   "type": "module",
   "workspaces": ["docs"],
   "peerDependencies": {
-    "@react-three/fiber": "^9.0.0",
-    "@react-three/drei": "^10.0.0",
-    "@react-three/rapier": "^2.0.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "three": "^0.181.0"
+    "@react-three/fiber": ">=9.0.0",
+    "@react-three/drei": ">=10.0.0",
+    "@react-three/rapier": ">=2.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "three": ">=0.181.0"
   },
   "devDependencies": {
     "@react-three/drei": "^10.7.7",

package/src/index.ts

@@ -10,6 +10,10 @@ export {
   SharedCanvas,
 } from './tools/assetviewer/page';
 
+// Component Registry
+export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
+export type { Component } from './tools/prefabeditor/components/ComponentRegistry';
+
 // Helpers
 export * from './helpers';
 

package/src/tools/dragdrop/DragDropLoader.tsx

@@ -1,3 +1,4 @@
+"use client";
 // DragDropLoader.tsx
 import { useEffect, ChangeEvent } from "react";
 import { DRACOLoader, FBXLoader, GLTFLoader } from "three/examples/jsm/Addons.js";