react-three-game 0.0.32 → 0.0.34

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

@@ -1,8 +1,14 @@
 import { Dispatch, SetStateAction } from 'react';
 import { Prefab } from "./types";
-export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId }: {
+export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId, onSave, onLoad, onUndo, onRedo, canUndo, canRedo }: {
     prefabData?: Prefab;
     setPrefabData?: Dispatch<SetStateAction<Prefab>>;
     selectedId: string | null;
     setSelectedId: Dispatch<SetStateAction<string | null>>;
+    onSave?: () => void;
+    onLoad?: () => void;
+    onUndo?: () => void;
+    onRedo?: () => void;
+    canUndo?: boolean;
+    canRedo?: boolean;
 }): import("react/jsx-runtime").JSX.Element | null;

package/dist/tools/prefabeditor/EditorTree.js

@@ -3,11 +3,12 @@ import { useState } from 'react';
 import { getComponent } from './components/ComponentRegistry';
 import { base, tree, menu } from './styles';
 import { findNode, findParent, deleteNode, cloneNode, updateNodeById } from './utils';
-export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId }) {
+export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId, onSave, onLoad, onUndo, onRedo, canUndo, canRedo }) {
     const [contextMenu, setContextMenu] = useState(null);
     const [draggedId, setDraggedId] = useState(null);
     const [collapsedIds, setCollapsedIds] = useState(new Set());
     const [collapsed, setCollapsed] = useState(false);
+    const [fileMenuOpen, setFileMenuOpen] = useState(false);
     if (!prefabData || !setPrefabData)
         return null;
     const handleContextMenu = (e, nodeId) => {
@@ -23,22 +24,19 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
             return next;
         });
     };
-    // Actions
     const handleAddChild = (parentId) => {
-        var _a;
-        const newNode = {
-            id: crypto.randomUUID(),
-            name: "New Node",
-            components: {
-                transform: {
-                    type: "Transform",
-                    properties: Object.assign({}, (_a = getComponent('Transform')) === null || _a === void 0 ? void 0 : _a.defaultProperties)
-                }
-            }
-        };
         setPrefabData(prev => (Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, parentId, parent => {
-                var _a;
-                return (Object.assign(Object.assign({}, parent), { children: [...((_a = parent.children) !== null && _a !== void 0 ? _a : []), newNode] }));
+                var _a, _b;
+                return (Object.assign(Object.assign({}, parent), { children: [...((_a = parent.children) !== null && _a !== void 0 ? _a : []), {
+                            id: crypto.randomUUID(),
+                            name: "New Node",
+                            components: {
+                                transform: {
+                                    type: "Transform",
+                                    properties: Object.assign({}, (_b = getComponent('Transform')) === null || _b === void 0 ? void 0 : _b.defaultProperties)
+                                }
+                            }
+                        }] }));
             }) })));
         setContextMenu(null);
     };
@@ -50,10 +48,9 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
             const parent = findParent(prev.root, nodeId);
             if (!node || !parent)
                 return prev;
-            const clone = cloneNode(node);
             return Object.assign(Object.assign({}, prev), { root: updateNodeById(prev.root, parent.id, p => {
                     var _a;
-                    return (Object.assign(Object.assign({}, p), { children: [...((_a = p.children) !== null && _a !== void 0 ? _a : []), clone] }));
+                    return (Object.assign(Object.assign({}, p), { children: [...((_a = p.children) !== null && _a !== void 0 ? _a : []), cloneNode(node)] }));
                 }) });
         });
         setContextMenu(null);
@@ -66,12 +63,9 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
             setSelectedId(null);
         setContextMenu(null);
     };
-    // Drag and Drop
     const handleDragStart = (e, id) => {
-        if (id === prefabData.root.id) {
-            e.preventDefault();
-            return;
-        }
+        if (id === prefabData.root.id)
+            return e.preventDefault();
         e.dataTransfer.effectAllowed = "move";
         setDraggedId(id);
     };
@@ -90,14 +84,9 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         setPrefabData(prev => {
             const draggedNode = findNode(prev.root, draggedId);
             const oldParent = findParent(prev.root, draggedId);
-            if (!draggedNode || !oldParent)
-                return prev;
-            // Prevent dropping into own subtree
-            if (findNode(draggedNode, targetId))
+            if (!draggedNode || !oldParent || findNode(draggedNode, targetId))
                 return prev;
-            // 1. Remove from old parent
             let root = updateNodeById(prev.root, oldParent.id, p => (Object.assign(Object.assign({}, p), { children: p.children.filter(c => c.id !== draggedId) })));
-            // 2. Add to new parent
             root = updateNodeById(root, targetId, t => {
                 var _a;
                 return (Object.assign(Object.assign({}, t), { children: [...((_a = t.children) !== null && _a !== void 0 ? _a : []), draggedNode] }));
@@ -122,5 +111,5 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
                                 visibility: hasChildren ? 'visible' : 'hidden'
                             }, onClick: (e) => hasChildren && toggleCollapse(e, node.id), children: isCollapsed ? '▶' : '▼' }), !isRoot && _jsx("span", { style: { marginRight: 4, opacity: 0.4 }, children: "\u22EE\u22EE" }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: (_a = node.name) !== null && _a !== void 0 ? _a : node.id })] }), !isCollapsed && node.children && node.children.map(child => renderNode(child, depth + 1))] }, node.id));
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: Object.assign(Object.assign({}, tree.panel), { width: collapsed ? 'auto' : 224 }), onClick: () => setContextMenu(null), children: [_jsxs("div", { style: base.header, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { children: "Scene" }), _jsx("span", { children: collapsed ? '▶' : '◀' })] }), !collapsed && _jsx("div", { style: tree.scroll, children: renderNode(prefabData.root) })] }), contextMenu && (_jsxs("div", { style: Object.assign(Object.assign({}, menu.container), { top: contextMenu.y, left: contextMenu.x }), onClick: (e) => e.stopPropagation(), onPointerLeave: () => setContextMenu(null), children: [_jsx("button", { style: menu.item, onClick: () => handleAddChild(contextMenu.nodeId), children: "Add Child" }), contextMenu.nodeId !== prefabData.root.id && (_jsxs(_Fragment, { children: [_jsx("button", { style: menu.item, onClick: () => handleDuplicate(contextMenu.nodeId), children: "Duplicate" }), _jsx("button", { style: Object.assign(Object.assign({}, menu.item), menu.danger), onClick: () => handleDelete(contextMenu.nodeId), children: "Delete" })] }))] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: Object.assign(Object.assign({}, tree.panel), { width: collapsed ? 'auto' : 224 }), onClick: () => { setContextMenu(null); setFileMenuOpen(false); }, children: [_jsxs("div", { style: base.header, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { children: collapsed ? '▶' : '▼' }), _jsx("span", { children: "Scene" })] }), !collapsed && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [_jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10, opacity: canUndo ? 1 : 0.4 }), onClick: (e) => { e.stopPropagation(); onUndo === null || onUndo === void 0 ? void 0 : onUndo(); }, disabled: !canUndo, title: "Undo", children: "\u21B6" }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10, opacity: canRedo ? 1 : 0.4 }), onClick: (e) => { e.stopPropagation(); onRedo === null || onRedo === void 0 ? void 0 : onRedo(); }, disabled: !canRedo, title: "Redo", children: "\u21B7" }), _jsxs("div", { style: { position: 'relative' }, children: [_jsx("button", { style: Object.assign(Object.assign({}, base.btn), { padding: '2px 6px', fontSize: 10 }), onClick: (e) => { e.stopPropagation(); setFileMenuOpen(!fileMenuOpen); }, title: "File", children: "\u22EE" }), fileMenuOpen && (_jsxs("div", { style: Object.assign(Object.assign({}, menu.container), { top: 28, right: 0 }), onClick: (e) => e.stopPropagation(), children: [_jsx("button", { style: menu.item, onClick: () => { onLoad === null || onLoad === void 0 ? void 0 : onLoad(); setFileMenuOpen(false); }, children: "\uD83D\uDCE5 Load" }), _jsx("button", { style: menu.item, onClick: () => { onSave === null || onSave === void 0 ? void 0 : onSave(); setFileMenuOpen(false); }, children: "\uD83D\uDCBE Save" })] }))] })] }))] }), !collapsed && _jsx("div", { style: tree.scroll, children: renderNode(prefabData.root) })] }), contextMenu && (_jsxs("div", { style: Object.assign(Object.assign({}, menu.container), { top: contextMenu.y, left: contextMenu.x }), onClick: (e) => e.stopPropagation(), onPointerLeave: () => setContextMenu(null), children: [_jsx("button", { style: menu.item, onClick: () => handleAddChild(contextMenu.nodeId), children: "Add Child" }), contextMenu.nodeId !== prefabData.root.id && (_jsxs(_Fragment, { children: [_jsx("button", { style: menu.item, onClick: () => handleDuplicate(contextMenu.nodeId), children: "Duplicate" }), _jsx("button", { style: Object.assign(Object.assign({}, menu.item), menu.danger), onClick: () => handleDelete(contextMenu.nodeId), children: "Delete" })] }))] }))] }));
 }

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

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { Prefab } from "./types";
-declare function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transformMode, setTransformMode, basePath }: {
+declare function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transformMode, setTransformMode, basePath, onSave, onLoad, onUndo, onRedo, canUndo, canRedo }: {
     prefabData?: Prefab;
     setPrefabData?: Dispatch<SetStateAction<Prefab>>;
     selectedId: string | null;
@@ -8,5 +8,11 @@ declare function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId
     transformMode: "translate" | "rotate" | "scale";
     setTransformMode: (m: "translate" | "rotate" | "scale") => void;
     basePath?: string;
+    onSave?: () => void;
+    onLoad?: () => void;
+    onUndo?: () => void;
+    onRedo?: () => void;
+    canUndo?: boolean;
+    canRedo?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export default EditorUI;

package/dist/tools/prefabeditor/EditorUI.js

@@ -15,7 +15,7 @@ import EditorTree from './EditorTree';
 import { getAllComponents } from './components/ComponentRegistry';
 import { base, inspector } from './styles';
 import { findNode, updateNode, deleteNode } from './utils';
-function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transformMode, setTransformMode, basePath }) {
+function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transformMode, setTransformMode, basePath, onSave, onLoad, onUndo, onRedo, canUndo, canRedo }) {
     const [collapsed, setCollapsed] = useState(false);
     const updateNodeHandler = (updater) => {
         if (!prefabData || !setPrefabData || !selectedId)
@@ -29,11 +29,12 @@ function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transf
         setSelectedId(null);
     };
     const selectedNode = selectedId && prefabData ? findNode(prefabData.root, selectedId) : null;
-    return _jsxs(_Fragment, { children: [_jsx("style", { children: `.prefab-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
+    return _jsxs(_Fragment, { children: [_jsx("style", { children: `
+.prefab-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
 .prefab-scroll::-webkit-scrollbar-track { background: transparent; }
 .prefab-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }
 .prefab-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent; }
-` }), _jsxs("div", { style: inspector.panel, children: [_jsxs("div", { style: base.header, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { children: "Inspector" }), _jsx("span", { children: collapsed ? '◀' : '▼' })] }), !collapsed && selectedNode && (_jsx(NodeInspector, { node: selectedNode, updateNode: updateNodeHandler, deleteNode: deleteNodeHandler, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath }))] }), _jsx("div", { style: { position: 'absolute', top: 8, left: 8, zIndex: 20 }, children: _jsx(EditorTree, { prefabData: prefabData, setPrefabData: setPrefabData, selectedId: selectedId, setSelectedId: setSelectedId }) })] });
+        ` }), _jsxs("div", { style: inspector.panel, children: [_jsxs("div", { style: base.header, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { children: "Inspector" }), _jsx("span", { children: collapsed ? '◀' : '▼' })] }), !collapsed && selectedNode && (_jsx(NodeInspector, { node: selectedNode, updateNode: updateNodeHandler, deleteNode: deleteNodeHandler, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath }))] }), _jsx("div", { style: { position: 'absolute', top: 8, left: 8, zIndex: 20 }, children: _jsx(EditorTree, { prefabData: prefabData, setPrefabData: setPrefabData, selectedId: selectedId, setSelectedId: setSelectedId, onSave: onSave, onLoad: onLoad, onUndo: onUndo, onRedo: onRedo, canUndo: canUndo, canRedo: canRedo }) })] });
 }
 function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransformMode, basePath }) {
     var _a;

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -15,65 +15,54 @@ 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] }
-                }
+const DEFAULT_PREFAB = {
+    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 PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }) => {
+    const [editMode, setEditMode] = useState(true);
+    const [loadedPrefab, setLoadedPrefab] = useState(initialPrefab !== null && initialPrefab !== void 0 ? initialPrefab : DEFAULT_PREFAB);
     const [selectedId, setSelectedId] = useState(null);
     const [transformMode, setTransformMode] = useState("translate");
-    // Sync internal state with external initialPrefab prop
+    const [history, setHistory] = useState([loadedPrefab]);
+    const [historyIndex, setHistoryIndex] = useState(0);
+    const throttleRef = useRef(null);
+    const lastDataRef = useRef(JSON.stringify(loadedPrefab));
     useEffect(() => {
-        if (initialPrefab) {
+        if (initialPrefab)
             setLoadedPrefab(initialPrefab);
-        }
     }, [initialPrefab]);
-    // Wrapper to update prefab and notify parent
     const updatePrefab = (newPrefab) => {
         setLoadedPrefab(newPrefab);
         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, 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 throttleRef = useRef(null);
-    const lastDataRef = useRef(JSON.stringify(currentData));
-    const undo = () => {
-        if (historyIndex > 0) {
-            const newIndex = historyIndex - 1;
-            setHistoryIndex(newIndex);
-            lastDataRef.current = JSON.stringify(history[newIndex]);
-            onDataChange(history[newIndex]);
-        }
-    };
-    const redo = () => {
-        if (historyIndex < history.length - 1) {
-            const newIndex = historyIndex + 1;
-            setHistoryIndex(newIndex);
-            lastDataRef.current = JSON.stringify(history[newIndex]);
-            onDataChange(history[newIndex]);
-        }
+    const applyHistory = (index) => {
+        setHistoryIndex(index);
+        lastDataRef.current = JSON.stringify(history[index]);
+        setLoadedPrefab(history[index]);
+        onPrefabChange === null || onPrefabChange === void 0 ? void 0 : onPrefabChange(history[index]);
     };
+    const undo = () => historyIndex > 0 && applyHistory(historyIndex - 1);
+    const redo = () => historyIndex < history.length - 1 && applyHistory(historyIndex + 1);
     useEffect(() => {
         const handleKeyDown = (e) => {
-            if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+            if (!(e.ctrlKey || e.metaKey))
+                return;
+            if (e.key === 'z' && !e.shiftKey) {
                 e.preventDefault();
                 undo();
             }
-            else if ((e.ctrlKey || e.metaKey) && (e.shiftKey && e.key === 'z' || e.key === 'y')) {
+            else if ((e.shiftKey && e.key === 'z') || e.key === 'y') {
                 e.preventDefault();
                 redo();
             }
@@ -82,7 +71,7 @@ const SaveDataPanel = ({ currentData, onDataChange, editMode, onEditModeChange }
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [historyIndex, history]);
     useEffect(() => {
-        const currentStr = JSON.stringify(currentData);
+        const currentStr = JSON.stringify(loadedPrefab);
         if (currentStr === lastDataRef.current)
             return;
         if (throttleRef.current)
@@ -90,66 +79,56 @@ const SaveDataPanel = ({ currentData, onDataChange, editMode, onEditModeChange }
         throttleRef.current = setTimeout(() => {
             lastDataRef.current = currentStr;
             setHistory(prev => {
-                const newHistory = [...prev.slice(0, historyIndex + 1), currentData];
+                const newHistory = [...prev.slice(0, historyIndex + 1), loadedPrefab];
                 return newHistory.length > 50 ? newHistory.slice(1) : newHistory;
             });
             setHistoryIndex(prev => Math.min(prev + 1, 49));
         }, 500);
-        return () => {
-            if (throttleRef.current)
-                clearTimeout(throttleRef.current);
-        };
-    }, [currentData]);
+        return () => { if (throttleRef.current)
+            clearTimeout(throttleRef.current); };
+    }, [loadedPrefab]);
     const handleLoad = () => __awaiter(void 0, void 0, void 0, function* () {
         const prefab = yield loadJson();
         if (prefab) {
-            onDataChange(prefab);
+            setLoadedPrefab(prefab);
+            onPrefabChange === null || onPrefabChange === void 0 ? void 0 : onPrefabChange(prefab);
             setHistory([prefab]);
             setHistoryIndex(0);
             lastDataRef.current = JSON.stringify(prefab);
         }
     });
-    const canUndo = historyIndex > 0;
-    const canRedo = historyIndex < history.length - 1;
-    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" })] });
+    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("div", { style: toolbar.panel, children: _jsx("button", { style: base.btn, onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }) }), editMode && _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath, onSave: () => saveJson(loadedPrefab, "prefab"), onLoad: handleLoad, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 })] });
 };
 const saveJson = (data, filename) => {
-    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));
-    const downloadAnchorNode = document.createElement('a');
-    downloadAnchorNode.setAttribute("href", dataStr);
-    downloadAnchorNode.setAttribute("download", (filename || 'prefab') + ".json");
-    document.body.appendChild(downloadAnchorNode);
-    downloadAnchorNode.click();
-    downloadAnchorNode.remove();
+    const a = document.createElement('a');
+    a.href = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));
+    a.download = `${filename || 'prefab'}.json`;
+    a.click();
 };
-const loadJson = () => __awaiter(void 0, void 0, void 0, function* () {
-    return new Promise((resolve) => {
-        const input = document.createElement('input');
-        input.type = 'file';
-        input.accept = '.json,application/json';
-        input.onchange = e => {
+const loadJson = () => new Promise(resolve => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.json,application/json';
+    input.onchange = e => {
+        var _a;
+        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (!file)
+            return resolve(undefined);
+        const reader = new FileReader();
+        reader.onload = e => {
             var _a;
-            const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-            if (!file)
-                return resolve(undefined);
-            const reader = new FileReader();
-            reader.onload = e => {
-                var _a;
-                try {
-                    const text = (_a = e.target) === null || _a === void 0 ? void 0 : _a.result;
-                    if (typeof text === 'string') {
-                        const json = JSON.parse(text);
-                        resolve(json);
-                    }
-                }
-                catch (err) {
-                    console.error('Error parsing prefab JSON:', err);
-                    resolve(undefined);
-                }
-            };
-            reader.readAsText(file);
+            try {
+                const text = (_a = e.target) === null || _a === void 0 ? void 0 : _a.result;
+                if (typeof text === 'string')
+                    resolve(JSON.parse(text));
+            }
+            catch (err) {
+                console.error('Error parsing prefab JSON:', err);
+                resolve(undefined);
+            }
         };
-        input.click();
-    });
+        reader.readAsText(file);
+    };
+    input.click();
 });
 export default PrefabEditor;

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useRef, useEffect } from "react";
 import { useFrame } from "@react-three/fiber";
 import { Vector3 } from "three";
+import { Input, Label } from "./Input";
 function DirectionalLightComponentEditor({ component, onUpdate }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const props = {
@@ -17,7 +18,18 @@ function DirectionalLightComponentEditor({ component, onUpdate }) {
         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", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs("div", { children: [_jsx("label", { style: { display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 2 }, children: "Color" }), _jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx("input", { type: "color", style: { height: 20, width: 20, backgroundColor: '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", style: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }, value: props.color, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'color': e.target.value })) })] })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 2 }, children: "Intensity" }), _jsx("input", { type: "number", step: "0.1", style: { width: '100%', backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }, value: props.intensity, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'intensity': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 2 }, children: "Cast Shadow" }), _jsx("input", { type: "checkbox", style: { height: 16, width: 16, backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', cursor: 'pointer' }, checked: props.castShadow, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'castShadow': e.target.checked })) })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 2 }, children: "Shadow Map Size" }), _jsx("input", { type: "number", step: "256", style: { width: '100%', backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }, value: props.shadowMapSize, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowMapSize': parseFloat(e.target.value) })) })] }), _jsxs("div", { style: { borderTop: '1px solid rgba(34, 211, 238, 0.2)', paddingTop: 8, marginTop: 8 }, children: [_jsx("label", { style: { display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }, children: "Shadow Camera" }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 }, children: "Near" }), _jsx("input", { type: "number", step: "0.1", style: { width: '100%', backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }, value: props.shadowCameraNear, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowCameraNear': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 }, children: "Far" }), _jsx("input", { type: "number", step: "1", style: { width: '100%', backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }, value: props.shadowCameraFar, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowCameraFar': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 }, children: "Top" }), _jsx("input", { type: "number", step: "1", style: { width: '100%', backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }, value: props.shadowCameraTop, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowCameraTop': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 }, children: "Bottom" }), _jsx("input", { type: "number", step: "1", style: { width: '100%', backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }, value: props.shadowCameraBottom, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowCameraBottom': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 }, children: "Left" }), _jsx("input", { type: "number", step: "1", style: { width: '100%', backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }, value: props.shadowCameraLeft, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowCameraLeft': parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 }, children: "Right" }), _jsx("input", { type: "number", step: "1", style: { width: '100%', backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }, value: props.shadowCameraRight, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'shadowCameraRight': parseFloat(e.target.value) })) })] })] })] }), _jsxs("div", { style: { borderTop: '1px solid rgba(34, 211, 238, 0.2)', paddingTop: 8, marginTop: 8 }, children: [_jsx("label", { style: { display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }, children: "Target Offset" }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 }, children: "X" }), _jsx("input", { type: "number", step: "0.5", style: { width: '100%', backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }, 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", { style: { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 }, children: "Y" }), _jsx("input", { type: "number", step: "0.5", style: { width: '100%', backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }, 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", { style: { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 }, children: "Z" }), _jsx("input", { type: "number", step: "0.5", style: { width: '100%', backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }, value: props.targetOffset[2], onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { 'targetOffset': [props.targetOffset[0], props.targetOffset[1], parseFloat(e.target.value)] })) })] })] })] })] });
+    const textInputStyle = {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.4)',
+        border: '1px solid rgba(34, 211, 238, 0.3)',
+        padding: '2px 4px',
+        fontSize: '10px',
+        color: 'rgba(165, 243, 252, 1)',
+        fontFamily: 'monospace',
+        outline: 'none',
+    };
+    const smallLabel = { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 };
+    return _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Color" }), _jsxs("div", { style: { display: 'flex', gap: 2 }, children: [_jsx("input", { type: "color", style: { height: 20, width: 20, backgroundColor: '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", style: textInputStyle, value: props.color, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { color: e.target.value })) })] })] }), _jsxs("div", { children: [_jsx(Label, { children: "Intensity" }), _jsx(Input, { step: "0.1", value: props.intensity, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { intensity: value })) })] }), _jsxs("div", { children: [_jsx(Label, { children: "Cast Shadow" }), _jsx("input", { type: "checkbox", style: { height: 16, width: 16, backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', cursor: 'pointer' }, checked: props.castShadow, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { castShadow: e.target.checked })) })] }), _jsxs("div", { children: [_jsx(Label, { children: "Shadow Map Size" }), _jsx(Input, { step: "256", value: props.shadowMapSize, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowMapSize: value })) })] }), _jsxs("div", { style: { borderTop: '1px solid rgba(34, 211, 238, 0.2)', paddingTop: 8, marginTop: 8 }, children: [_jsx("label", { style: { display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }, children: "Shadow Camera" }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Near" }), _jsx(Input, { step: "0.1", value: props.shadowCameraNear, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowCameraNear: value })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Far" }), _jsx(Input, { step: "1", value: props.shadowCameraFar, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowCameraFar: value })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Top" }), _jsx(Input, { step: "1", value: props.shadowCameraTop, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowCameraTop: value })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Bottom" }), _jsx(Input, { step: "1", value: props.shadowCameraBottom, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowCameraBottom: value })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Left" }), _jsx(Input, { step: "1", value: props.shadowCameraLeft, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowCameraLeft: value })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Right" }), _jsx(Input, { step: "1", value: props.shadowCameraRight, onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { shadowCameraRight: value })) })] })] })] }), _jsxs("div", { style: { borderTop: '1px solid rgba(34, 211, 238, 0.2)', paddingTop: 8, marginTop: 8 }, children: [_jsx("label", { style: { display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }, children: "Target Offset" }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "X" }), _jsx(Input, { step: "0.5", value: props.targetOffset[0], onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { targetOffset: [value, props.targetOffset[1], props.targetOffset[2]] })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Y" }), _jsx(Input, { step: "0.5", value: props.targetOffset[1], onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { targetOffset: [props.targetOffset[0], value, props.targetOffset[2]] })) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Z" }), _jsx(Input, { step: "0.5", value: props.targetOffset[2], onChange: value => onUpdate(Object.assign(Object.assign({}, component.properties), { targetOffset: [props.targetOffset[0], props.targetOffset[1], value] })) })] })] })] })] });
 }
 function DirectionalLightView({ properties, editMode }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, Label } from "./Input";
 const GEOMETRY_ARGS = {
     box: {
         labels: ["Width", "Height", "Depth"],
@@ -16,17 +17,24 @@ const GEOMETRY_ARGS = {
 function GeometryComponentEditor({ component, onUpdate, }) {
     const { geometryType, args = [] } = component.properties;
     const schema = GEOMETRY_ARGS[geometryType];
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { className: "label", children: "Type" }), _jsxs("select", { className: "select", value: geometryType, onChange: e => {
-                    const type = e.target.value;
-                    onUpdate({
-                        geometryType: type,
-                        args: GEOMETRY_ARGS[type].defaults,
-                    });
-                }, children: [_jsx("option", { value: "box", children: "Box" }), _jsx("option", { value: "sphere", children: "Sphere" }), _jsx("option", { value: "plane", children: "Plane" })] }), schema.labels.map((label, i) => {
+    const selectStyle = {
+        width: '100%',
+        backgroundColor: 'rgba(0, 0, 0, 0.4)',
+        border: '1px solid rgba(34, 211, 238, 0.3)',
+        padding: '2px 4px',
+        fontSize: '10px',
+        color: 'rgba(165, 243, 252, 1)',
+        fontFamily: 'monospace',
+        outline: 'none',
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [_jsxs("div", { children: [_jsx(Label, { children: "Type" }), _jsxs("select", { style: selectStyle, value: geometryType, onChange: e => {
+                            const type = e.target.value;
+                            onUpdate({ geometryType: type, args: GEOMETRY_ARGS[type].defaults });
+                        }, children: [_jsx("option", { value: "box", children: "Box" }), _jsx("option", { value: "sphere", children: "Sphere" }), _jsx("option", { value: "plane", children: "Plane" })] })] }), schema.labels.map((label, i) => {
                 var _a;
-                return (_jsxs("div", { children: [_jsx("label", { className: "label", children: label }), _jsx("input", { type: "number", className: "input", value: (_a = args[i]) !== null && _a !== void 0 ? _a : schema.defaults[i], step: "0.1", onChange: e => {
+                return (_jsxs("div", { children: [_jsx(Label, { children: label }), _jsx(Input, { value: (_a = args[i]) !== null && _a !== void 0 ? _a : schema.defaults[i], step: "0.1", onChange: value => {
                                 const next = [...args];
-                                next[i] = parseFloat(e.target.value);
+                                next[i] = value;
                                 onUpdate({ args: next });
                             } })] }, label));
             })] }));

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

@@ -0,0 +1,19 @@
+import React from 'react';
+interface InputProps {
+    value: number;
+    onChange: (value: number) => void;
+    step?: string | number;
+    min?: number;
+    max?: number;
+    style?: React.CSSProperties;
+}
+export declare function Input({ value, onChange, step, min, max, style }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Label({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Vector3Input({ label, value, onChange }: {
+    label: string;
+    value: [number, number, number];
+    onChange: (v: [number, number, number]) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+// Shared styles
+const styles = {
+    input: {
+        width: '100%',
+        backgroundColor: 'rgba(0, 0, 0, 0.4)',
+        border: '1px solid rgba(34, 211, 238, 0.3)',
+        padding: '2px 4px',
+        fontSize: '10px',
+        color: 'rgba(165, 243, 252, 1)',
+        fontFamily: 'monospace',
+        outline: 'none',
+    },
+    label: {
+        display: 'block',
+        fontSize: '9px',
+        color: 'rgba(34, 211, 238, 0.6)',
+        textTransform: 'uppercase',
+        letterSpacing: '0.05em',
+        marginBottom: 2,
+    },
+};
+export function Input({ value, onChange, step, min, max, style }) {
+    return (_jsx("input", { type: "number", value: value, onChange: (e) => onChange(parseFloat(e.target.value)), step: step, min: min, max: max, style: Object.assign(Object.assign({}, styles.input), style) }));
+}
+export function Label({ children }) {
+    return _jsx("label", { style: styles.label, children: children });
+}
+export function Vector3Input({ label, value, onChange }) {
+    const [draft, setDraft] = useState(() => value.map(v => v.toString()));
+    // Sync external changes (gizmo, undo, etc.)
+    useEffect(() => {
+        setDraft(value.map(v => v.toString()));
+    }, [value[0], value[1], value[2]]);
+    const dragState = useRef(null);
+    const commit = (index) => {
+        const num = parseFloat(draft[index]);
+        if (Number.isFinite(num)) {
+            const next = [...value];
+            next[index] = num;
+            onChange(next);
+        }
+    };
+    const startScrub = (e, index) => {
+        e.preventDefault();
+        dragState.current = {
+            index,
+            startX: e.clientX,
+            startValue: value[index]
+        };
+        e.target.setPointerCapture(e.pointerId);
+        document.body.style.cursor = "ew-resize";
+    };
+    const onScrubMove = (e) => {
+        if (!dragState.current)
+            return;
+        const { index, startX, startValue } = dragState.current;
+        const dx = e.clientX - startX;
+        let speed = 0.02;
+        if (e.shiftKey)
+            speed *= 0.1; // fine
+        if (e.altKey)
+            speed *= 5; // coarse
+        const nextValue = startValue + dx * speed;
+        const next = [...value];
+        next[index] = nextValue;
+        setDraft(d => {
+            const copy = [...d];
+            copy[index] = nextValue.toFixed(3);
+            return copy;
+        });
+        onChange(next);
+    };
+    const endScrub = (e) => {
+        if (!dragState.current)
+            return;
+        dragState.current = null;
+        document.body.style.cursor = "";
+        e.target.releasePointerCapture(e.pointerId);
+    };
+    const axes = [
+        { key: "x", color: 'rgba(248, 113, 113, 1)', index: 0 },
+        { key: "y", color: 'rgba(134, 239, 172, 1)', index: 1 },
+        { key: "z", color: 'rgba(96, 165, 250, 1)', index: 2 }
+    ];
+    return (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsx("label", { style: Object.assign(Object.assign({}, styles.label), { marginBottom: 4 }), children: label }), _jsx("div", { style: { display: 'flex', gap: 4 }, children: axes.map(({ key, color, index }) => (_jsxs("div", { style: {
+                        flex: 1,
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 4,
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        border: '1px solid rgba(34, 211, 238, 0.2)',
+                        borderRadius: 4,
+                        padding: '4px 6px',
+                        minHeight: 32,
+                    }, children: [_jsx("span", { style: {
+                                fontSize: '12px',
+                                fontWeight: 'bold',
+                                color,
+                                width: 12,
+                                cursor: 'ew-resize',
+                                userSelect: 'none',
+                            }, onPointerDown: e => startScrub(e, index), onPointerMove: onScrubMove, onPointerUp: endScrub, children: key.toUpperCase() }), _jsx("input", { style: {
+                                flex: 1,
+                                backgroundColor: 'transparent',
+                                border: 'none',
+                                fontSize: '12px',
+                                color: 'rgba(165, 243, 252, 1)',
+                                fontFamily: 'monospace',
+                                outline: 'none',
+                                width: '100%',
+                                minWidth: 0,
+                            }, type: "text", value: draft[index], onChange: e => {
+                                const next = [...draft];
+                                next[index] = e.target.value;
+                                setDraft(next);
+                            }, onBlur: () => commit(index), onKeyDown: e => {
+                                if (e.key === "Enter") {
+                                    e.target.blur();
+                                }
+                            } })] }, key))) })] }));
+}