react-three-game 0.0.55 → 0.0.57

package/src/tools/prefabeditor/Dropdown.tsx

@@ -0,0 +1,112 @@
+import { ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+type Placement = 'bottom-start' | 'bottom-end' | 'left-start' | 'right-start';
+
+export function Dropdown({
+    trigger,
+    children,
+    placement = 'bottom-end',
+    offset = 6,
+    zIndex = 1000,
+}: {
+    trigger: (props: { ref: React.RefObject<HTMLButtonElement | null>; isOpen: boolean; toggle: () => void; close: () => void; }) => ReactNode;
+    children: ReactNode | ((close: () => void) => ReactNode);
+    placement?: Placement;
+    offset?: number;
+    zIndex?: number;
+}) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [position, setPosition] = useState<{ left: number; top: number } | null>(null);
+    const triggerRef = useRef<HTMLButtonElement>(null);
+    const panelRef = useRef<HTMLDivElement>(null);
+
+    const close = () => setIsOpen(false);
+    const toggle = () => setIsOpen(prev => !prev);
+
+    useLayoutEffect(() => {
+        if (!isOpen || !triggerRef.current || !panelRef.current || typeof window === 'undefined') return;
+
+        const updatePosition = () => {
+            const triggerRect = triggerRef.current?.getBoundingClientRect();
+            const panelRect = panelRef.current?.getBoundingClientRect();
+            if (!triggerRect || !panelRect) return;
+
+            let left = triggerRect.left;
+            let top = triggerRect.bottom + offset;
+
+            if (placement === 'bottom-end') {
+                left = triggerRect.right - panelRect.width;
+                top = triggerRect.bottom + offset;
+            } else if (placement === 'bottom-start') {
+                left = triggerRect.left;
+                top = triggerRect.bottom + offset;
+            } else if (placement === 'left-start') {
+                left = triggerRect.left - panelRect.width - offset;
+                top = triggerRect.top;
+            } else if (placement === 'right-start') {
+                left = triggerRect.right + offset;
+                top = triggerRect.top;
+            }
+
+            left = Math.max(8, Math.min(left, window.innerWidth - panelRect.width - 8));
+            top = Math.max(8, Math.min(top, window.innerHeight - panelRect.height - 8));
+
+            setPosition({ left, top });
+        };
+
+        updatePosition();
+        window.addEventListener('resize', updatePosition);
+        window.addEventListener('scroll', updatePosition, true);
+
+        return () => {
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition, true);
+        };
+    }, [isOpen, placement, offset]);
+
+    useEffect(() => {
+        if (!isOpen) return;
+
+        const handlePointerDown = (event: PointerEvent) => {
+            const target = event.target as Node | null;
+            if (!target) return;
+            if (triggerRef.current?.contains(target)) return;
+            if (panelRef.current?.contains(target)) return;
+            close();
+        };
+
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') close();
+        };
+
+        document.addEventListener('pointerdown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            document.removeEventListener('pointerdown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen]);
+
+    return (
+        <>
+            {trigger({ ref: triggerRef, isOpen, toggle, close })}
+            {isOpen && typeof document !== 'undefined' && createPortal(
+                <div
+                    ref={panelRef}
+                    onMouseLeave={close}
+                    style={{
+                        position: 'fixed',
+                        left: position?.left ?? -9999,
+                        top: position?.top ?? -9999,
+                        zIndex,
+                    }}
+                >
+                    {typeof children === 'function' ? children(close) : children}
+                </div>,
+                document.body
+            )}
+        </>
+    );
+}

package/src/tools/prefabeditor/EditorContext.tsx

@@ -5,6 +5,11 @@ interface EditorContextType {
     setTransformMode: (mode: "translate" | "rotate" | "scale") => void;
     snapResolution: number;
     setSnapResolution: (resolution: number) => void;
+    positionSnap: number;
+    setPositionSnap: (resolution: number) => void;
+    rotationSnap: number;
+    setRotationSnap: (resolution: number) => void;
+    onFocusNode?: (nodeId: string) => void;
     onScreenshot?: () => void;
     onExportGLB?: () => void;
 }

package/src/tools/prefabeditor/EditorTree.tsx

@@ -1,9 +1,79 @@
 import { Dispatch, SetStateAction, useState, MouseEvent } from 'react';
 import { Prefab, GameObject } from "./types";
 import { getComponent } from './components/ComponentRegistry';
-import { base, tree, menu } from './styles';
+import { base, colors, tree, menu } from './styles';
 import { findNode, findParent, deleteNode, cloneNode, updateNodeById, loadJson, saveJson, regenerateIds } from './utils';
 import { useEditorContext } from './EditorContext';
+import { Dropdown } from './Dropdown';
+
+type DropPosition = 'before' | 'inside';
+
+function moveNode(root: GameObject, draggedId: string, targetId: string, position: DropPosition): GameObject {
+    const draggedNode = findNode(root, draggedId);
+    const oldParent = findParent(root, draggedId);
+
+    if (!draggedNode || !oldParent || findNode(draggedNode, targetId)) {
+        return root;
+    }
+
+    if (position === 'before') {
+        const targetParent = findParent(root, targetId);
+        if (!targetParent?.children) return root;
+
+        if (targetParent.id === oldParent.id) {
+            const siblings = targetParent.children.filter(child => child.id !== draggedId);
+            const targetIndex = siblings.findIndex(child => child.id === targetId);
+            if (targetIndex === -1) return root;
+
+            siblings.splice(targetIndex, 0, draggedNode);
+            return updateNodeById(root, targetParent.id, parent => ({ ...parent, children: siblings }));
+        }
+
+        const rootWithoutDragged = updateNodeById(root, oldParent.id, parent => ({
+            ...parent,
+            children: (parent.children ?? []).filter(child => child.id !== draggedId)
+        }));
+
+        return updateNodeById(rootWithoutDragged, targetParent.id, parent => {
+            const children = [...(parent.children ?? [])];
+            const targetIndex = children.findIndex(child => child.id === targetId);
+            if (targetIndex === -1) return parent;
+
+            children.splice(targetIndex, 0, draggedNode);
+            return { ...parent, children };
+        });
+    }
+
+    const rootWithoutDragged = updateNodeById(root, oldParent.id, parent => ({
+        ...parent,
+        children: (parent.children ?? []).filter(child => child.id !== draggedId)
+    }));
+
+    return updateNodeById(rootWithoutDragged, targetId, target => ({
+        ...target,
+        children: [...(target.children ?? []), draggedNode]
+    }));
+}
+
+function duplicateNodeBelow(root: GameObject, nodeId: string): { root: GameObject; duplicatedId: string } | null {
+    const node = findNode(root, nodeId);
+    const parent = findParent(root, nodeId);
+    if (!node || !parent) return null;
+
+    const duplicate = cloneNode(node);
+    const nextRoot = updateNodeById(root, parent.id, currentParent => ({
+        ...currentParent,
+        children: (() => {
+            const children = [...(currentParent.children ?? [])];
+            const index = children.findIndex(child => child.id === nodeId);
+            if (index === -1) return [...children, duplicate];
+            children.splice(index + 1, 0, duplicate);
+            return children;
+        })()
+    }));
+
+    return { root: nextRoot, duplicatedId: duplicate.id };
+}
 
 export default function EditorTree({
     prefabData,
@@ -24,21 +94,15 @@ export default function EditorTree({
     canUndo?: boolean;
     canRedo?: boolean;
 }) {
-    const [contextMenu, setContextMenu] = useState<{ x: number, y: number, nodeId: string } | null>(null);
+    const { onFocusNode } = useEditorContext();
     const [draggedId, setDraggedId] = useState<string | null>(null);
+    const [dropTarget, setDropTarget] = useState<{ id: string; position: DropPosition } | null>(null);
     const [collapsedIds, setCollapsedIds] = useState<Set<string>>(new Set());
     const [collapsed, setCollapsed] = useState(false);
-    const [fileMenuOpen, setFileMenuOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
 
     if (!prefabData || !setPrefabData) return null;
 
-    const handleContextMenu = (e: MouseEvent, nodeId: string) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setContextMenu({ x: e.clientX, y: e.clientY, nodeId });
-    };
-
     const toggleCollapse = (e: MouseEvent, id: string) => {
         e.stopPropagation();
         setCollapsedIds(prev => {
@@ -49,47 +113,46 @@ export default function EditorTree({
     };
 
     const handleAddChild = (parentId: string) => {
+        const newNode = {
+            id: crypto.randomUUID(),
+            name: "New Node",
+            components: {
+                transform: {
+                    type: "Transform",
+                    properties: { ...getComponent('Transform')?.defaultProperties }
+                }
+            }
+        };
+
         setPrefabData(prev => ({
             ...prev,
             root: updateNodeById(prev.root, parentId, parent => ({
                 ...parent,
-                children: [...(parent.children ?? []), {
-                    id: crypto.randomUUID(),
-                    name: "New Node",
-                    components: {
-                        transform: {
-                            type: "Transform",
-                            properties: { ...getComponent('Transform')?.defaultProperties }
-                        }
-                    }
-                }]
+                children: [...(parent.children ?? []), newNode]
             }))
         }));
-        setContextMenu(null);
+        setSelectedId(newNode.id);
     };
 
     const handleDuplicate = (nodeId: string) => {
         if (nodeId === prefabData.root.id) return;
         setPrefabData(prev => {
-            const node = findNode(prev.root, nodeId);
-            const parent = findParent(prev.root, nodeId);
-            if (!node || !parent) return prev;
+            const result = duplicateNodeBelow(prev.root, nodeId);
+            if (!result) return prev;
+
+            setSelectedId(result.duplicatedId);
+
             return {
                 ...prev,
-                root: updateNodeById(prev.root, parent.id, p => ({
-                    ...p,
-                    children: [...(p.children ?? []), cloneNode(node)]
-                }))
+                root: result.root
             };
         });
-        setContextMenu(null);
     };
 
     const handleDelete = (nodeId: string) => {
         if (nodeId === prefabData.root.id) return;
         setPrefabData(prev => ({ ...prev, root: deleteNode(prev.root, nodeId)! }));
         if (selectedId === nodeId) setSelectedId(null);
-        setContextMenu(null);
     };
 
     const handleToggleDisabled = (nodeId: string) => {
@@ -100,7 +163,6 @@ export default function EditorTree({
                 disabled: !node.disabled
             }))
         }));
-        setContextMenu(null);
     };
 
     const handleDragStart = (e: React.DragEvent, id: string) => {
@@ -109,34 +171,36 @@ export default function EditorTree({
         setDraggedId(id);
     };
 
-    const handleDragOver = (e: React.DragEvent, targetId: string) => {
+    const getDropPosition = (e: React.DragEvent<HTMLDivElement>, isRoot: boolean): DropPosition => {
+        if (isRoot) return 'inside';
+        const rect = e.currentTarget.getBoundingClientRect();
+        return e.clientY <= rect.top + rect.height * 0.35 ? 'before' : 'inside';
+    };
+
+    const handleDragOver = (e: React.DragEvent<HTMLDivElement>, targetId: string, isRoot: boolean) => {
         if (!draggedId || draggedId === targetId) return;
         const draggedNode = findNode(prefabData.root, draggedId);
         if (draggedNode && findNode(draggedNode, targetId)) return;
         e.preventDefault();
+        setDropTarget({ id: targetId, position: getDropPosition(e, isRoot) });
+    };
+
+    const handleDragLeave = (e: React.DragEvent<HTMLDivElement>, targetId: string) => {
+        const relatedTarget = e.relatedTarget;
+        if (relatedTarget instanceof Node && e.currentTarget.contains(relatedTarget)) return;
+        setDropTarget(current => current?.id === targetId ? null : current);
     };
 
-    const handleDrop = (e: React.DragEvent, targetId: string) => {
+    const handleDrop = (e: React.DragEvent<HTMLDivElement>, targetId: string, isRoot: boolean) => {
         if (!draggedId || draggedId === targetId) return;
         e.preventDefault();
+        const dropPosition = getDropPosition(e, isRoot);
         setPrefabData(prev => {
-            const draggedNode = findNode(prev.root, draggedId);
-            const oldParent = findParent(prev.root, draggedId);
-            if (!draggedNode || !oldParent || findNode(draggedNode, targetId)) return prev;
-
-            let root = updateNodeById(prev.root, oldParent.id, p => ({
-                ...p,
-                children: p.children!.filter(c => c.id !== draggedId)
-            }));
-
-            root = updateNodeById(root, targetId, t => ({
-                ...t,
-                children: [...(t.children ?? []), draggedNode]
-            }));
-
-            return { ...prev, root };
+            const root = moveNode(prev.root, draggedId, targetId, dropPosition);
+            return root === prev.root ? prev : { ...prev, root };
         });
         setDraggedId(null);
+        setDropTarget(null);
     };
 
 
@@ -156,6 +220,9 @@ export default function EditorTree({
         const isCollapsed = collapsedIds.has(node.id);
         const hasChildren = node.children && node.children.length > 0;
         const isRoot = node.id === prefabData.root.id;
+        const isDropTarget = dropTarget?.id === node.id;
+        const showDropBefore = isDropTarget && dropTarget?.position === 'before';
+        const showDropInside = isDropTarget && dropTarget?.position === 'inside';
 
         return (
             <div key={node.id}>
@@ -168,14 +235,16 @@ export default function EditorTree({
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'space-between',
+                        borderTop: showDropBefore ? `2px solid ${colors.accent}` : undefined,
+                        boxShadow: showDropInside ? `inset 0 0 0 1px ${colors.accentBorder}` : undefined,
                     }}
                     draggable={!isRoot}
                     onClick={(e) => { e.stopPropagation(); setSelectedId(node.id); }}
-                    onContextMenu={(e) => handleContextMenu(e, node.id)}
                     onDragStart={(e) => handleDragStart(e, node.id)}
-                    onDragEnd={() => setDraggedId(null)}
-                    onDragOver={(e) => handleDragOver(e, node.id)}
-                    onDrop={(e) => handleDrop(e, node.id)}
+                    onDragEnd={() => { setDraggedId(null); setDropTarget(null); }}
+                    onDragOver={(e) => handleDragOver(e, node.id, isRoot)}
+                    onDragLeave={(e) => handleDragLeave(e, node.id)}
+                    onDrop={(e) => handleDrop(e, node.id, isRoot)}
                 >
                     <div style={{ display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }}>
                         <span
@@ -196,24 +265,104 @@ export default function EditorTree({
                         </span>
                     </div>
                     {!isRoot && (
-                        <button
-                            style={{
-                                background: 'none',
-                                border: 'none',
-                                cursor: 'pointer',
-                                padding: '0 4px',
-                                fontSize: 14,
-                                opacity: node.disabled ? 0.5 : 0.7,
-                                color: 'inherit',
-                            }}
-                            onClick={(e) => {
-                                e.stopPropagation();
-                                handleToggleDisabled(node.id);
-                            }}
-                            title={node.disabled ? 'Enable' : 'Disable'}
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                            <Dropdown
+                                placement="bottom-end"
+                                trigger={({ ref, toggle }) => (
+                                    <button
+                                        ref={ref}
+                                        style={{
+                                            background: 'none',
+                                            border: 'none',
+                                            cursor: 'pointer',
+                                            padding: '0 4px',
+                                            fontSize: 14,
+                                            opacity: 0.7,
+                                            color: 'inherit',
+                                        }}
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            toggle();
+                                        }}
+                                        title="Node Actions"
+                                    >
+                                        ⋯
+                                    </button>
+                                )}
+                            >
+                                {(close) => (
+                                    <div style={{ ...menu.container, position: 'static' }} onClick={(e) => e.stopPropagation()}>
+                                        <button style={menu.item} onClick={() => { handleAddChild(node.id); close(); }}>
+                                            Add Child
+                                        </button>
+                                        <button style={menu.item} onClick={() => { setSelectedId(node.id); onFocusNode?.(node.id); close(); }}>
+                                            Focus Camera
+                                        </button>
+                                        <button style={menu.item} onClick={() => { handleDuplicate(node.id); close(); }}>
+                                            Duplicate
+                                        </button>
+                                        <button style={{ ...menu.item, ...menu.danger }} onClick={() => { handleDelete(node.id); close(); }}>
+                                            Delete
+                                        </button>
+                                    </div>
+                                )}
+                            </Dropdown>
+                            <button
+                                style={{
+                                    background: 'none',
+                                    border: 'none',
+                                    cursor: 'pointer',
+                                    padding: '0 4px',
+                                    fontSize: 14,
+                                    opacity: node.disabled ? 0.5 : 0.7,
+                                    color: 'inherit',
+                                }}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleToggleDisabled(node.id);
+                                }}
+                                title={node.disabled ? 'Enable' : 'Disable'}
+                            >
+                                {node.disabled ? '◎' : '◉'}
+                            </button>
+                        </div>
+                    )}
+                    {isRoot && (
+                        <Dropdown
+                            placement="bottom-end"
+                            trigger={({ ref, toggle }) => (
+                                <button
+                                    ref={ref}
+                                    style={{
+                                        background: 'none',
+                                        border: 'none',
+                                        cursor: 'pointer',
+                                        padding: '0 4px',
+                                        fontSize: 14,
+                                        opacity: 0.7,
+                                        color: 'inherit',
+                                    }}
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        toggle();
+                                    }}
+                                    title="Scene Actions"
+                                >
+                                    ⋯
+                                </button>
+                            )}
                         >
-                            {node.disabled ? '◎' : '◉'}
-                        </button>
+                            {(close) => (
+                                <div style={{ ...menu.container, position: 'static' }} onClick={(e) => e.stopPropagation()}>
+                                    <button style={menu.item} onClick={() => { handleAddChild(node.id); close(); }}>
+                                        Add Child
+                                    </button>
+                                    <button style={menu.item} onClick={() => { setSelectedId(node.id); onFocusNode?.(node.id); close(); }}>
+                                        Focus Camera
+                                    </button>
+                                </div>
+                            )}
+                        </Dropdown>
                     )}
                 </div>
                 {!isCollapsed && node.children && node.children.map(child => renderNode(child, depth + 1))}
@@ -223,12 +372,7 @@ export default function EditorTree({
 
     return (
         <>
-            <style>{`
-.tree-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
-.tree-scroll::-webkit-scrollbar-track { background: transparent; }
-.tree-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }
-            `}</style>
-            <div style={{ ...tree.panel, width: collapsed ? 'auto' : 224 }} onClick={() => { setContextMenu(null); setFileMenuOpen(false); }}>
+            <div style={{ ...tree.panel, width: collapsed ? 'auto' : 224 }}>
                 <div style={base.header}>
                     <div style={{ display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }} onClick={() => setCollapsed(!collapsed)}>
                         <span>{collapsed ? '▶' : '▼'}</span>
@@ -252,28 +396,33 @@ export default function EditorTree({
                             >
                                 ↷
                             </button>
-                            <div style={{ position: 'relative' }}>
-                                <button
-                                    style={{ ...base.btn, padding: '2px 6px', fontSize: 10 }}
-                                    onClick={(e) => { e.stopPropagation(); setFileMenuOpen(!fileMenuOpen); }}
-                                    title="File"
-                                >
-                                    ⋮
-                                </button>
-                                {fileMenuOpen && (
+                            <Dropdown
+                                placement="bottom-end"
+                                trigger={({ ref, toggle }) => (
+                                    <button
+                                        ref={ref}
+                                        style={{ ...base.btn, padding: '2px 6px', fontSize: 10 }}
+                                        onClick={(e) => { e.stopPropagation(); toggle(); }}
+                                        title="File"
+                                    >
+                                        ⋮
+                                    </button>
+                                )}
+                            >
+                                {(close) => (
                                     <FileMenu
                                         prefabData={prefabData}
                                         setPrefabData={setPrefabData}
-                                        onClose={() => setFileMenuOpen(false)}
+                                        onClose={close}
                                     />
                                 )}
-                            </div>
+                            </Dropdown>
                         </div>
                     )}
                 </div>
                 {!collapsed && (
                     <>
-                        <div style={{ padding: '4px 4px', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
+                        <div style={{ padding: '4px 4px', borderBottom: `1px solid ${colors.borderLight}` }}>
                             <input
                                 type="text"
                                 placeholder="Search nodes..."
@@ -281,14 +430,8 @@ export default function EditorTree({
                                 onChange={(e) => setSearchQuery(e.target.value)}
                                 onClick={(e) => e.stopPropagation()}
                                 style={{
-                                    width: '100%',
+                                    ...base.input,
                                     padding: '4px 8px',
-                                    background: 'rgba(255,255,255,0.05)',
-                                    border: '1px solid rgba(255,255,255,0.1)',
-                                    borderRadius: 3,
-                                    color: 'inherit',
-                                    fontSize: 11,
-                                    outline: 'none',
                                 }}
                             />
                         </div>
@@ -297,27 +440,6 @@ export default function EditorTree({
                 )}
             </div>
 
-            {contextMenu && (
-                <div
-                    style={{ ...menu.container, top: contextMenu.y, left: contextMenu.x }}
-                    onClick={(e) => e.stopPropagation()}
-                    onPointerLeave={() => setContextMenu(null)}
-                >
-                    <button style={menu.item} onClick={() => handleAddChild(contextMenu.nodeId)}>
-                        Add Child
-                    </button>
-                    {contextMenu.nodeId !== prefabData.root.id && (
-                        <>
-                            <button style={menu.item} onClick={() => handleDuplicate(contextMenu.nodeId)}>
-                                Duplicate
-                            </button>
-                            <button style={{ ...menu.item, ...menu.danger }} onClick={() => handleDelete(contextMenu.nodeId)}>
-                                Delete
-                            </button>
-                        </>
-                    )}
-                </div>
-            )}
         </>
     );
 }
@@ -361,7 +483,7 @@ function FileMenu({
 
     return (
         <div
-            style={{ ...menu.container, top: 28, right: 0 }}
+            style={{ ...menu.container, position: 'static' }}
             onClick={(e) => e.stopPropagation()}
         >
             <button

package/src/tools/prefabeditor/EditorUI.tsx

@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction, useState, useEffect } from 'react';
 import { Prefab, GameObject as GameObjectType } from "./types";
 import EditorTree from './EditorTree';
 import { getAllComponents } from './components/ComponentRegistry';
-import { base, inspector } from './styles';
+import { base, colors, inspector, scrollbarCSS, componentCard } from './styles';
 import { findNode, updateNode, deleteNode } from './utils';
 
 function EditorUI({
@@ -45,12 +45,7 @@ function EditorUI({
     const selectedNode = selectedId && prefabData ? findNode(prefabData.root, selectedId) : null;
 
     return <>
-        <style>{`
-.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; }
-        `}</style>
+        <style>{scrollbarCSS}</style>
         <div style={inspector.panel}>
             <div style={base.header} onClick={() => setCollapsed(!collapsed)}>
                 <span>Inspector</span>
@@ -102,11 +97,11 @@ function NodeInspector({
         if (!newAvailable.includes(addType)) setAddType(newAvailable[0] || "");
     }, [Object.keys(node.components || {}).join(',')]);
 
-    return <div style={{ ...inspector.content, paddingRight: 2 }} className="prefab-scroll">
+    return <div style={inspector.content} className="prefab-scroll">
         {/* Node Name */}
         <div style={base.section}>
             <div style={{ display: "flex", marginBottom: 8, alignItems: 'center', gap: 8 }}>
-                <div style={{ fontSize: 10, color: '#888', wordBreak: 'break-all', border: '1px solid rgba(255,255,255,0.1)', padding: '2px 4px', borderRadius: 4, flex: 1 }}>
+                <div style={{ fontSize: 10, color: colors.textDim, wordBreak: 'break-all', border: `1px solid ${colors.border}`, padding: '2px 6px', borderRadius: 3, flex: 1, fontFamily: 'monospace' }}>
                     {node.id}
                 </div>
                 <button style={{ ...base.btn, ...base.btnDanger }} title="Delete Node" onClick={deleteNode}>❌</button>
@@ -131,12 +126,12 @@ function NodeInspector({
             {node.components && Object.entries(node.components).map(([key, comp]: [string, any]) => {
                 if (!comp) return null;
                 const def = ALL_COMPONENTS[comp.type];
-                if (!def) return <div key={key} style={{ color: '#ff8888', fontSize: 11 }}>
+                if (!def) return <div key={key} style={{ color: colors.danger, fontSize: 11 }}>
                     Unknown: {comp.type}
                 </div>;
 
                 return (
-                    <div key={key} style={{ marginBottom: 8, backgroundColor: 'rgba(255, 255, 255, 0.1)', padding: 8, borderRadius: 4 }}>
+                    <div key={key} style={componentCard.container}>
                         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                             <div style={{ fontSize: 11, fontWeight: 500 }}>{key}</div>
                             <button