react-three-game 0.0.14 → 0.0.16

package/src/tools/prefabeditor/EditorTree.tsx

@@ -15,6 +15,95 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
     const [collapsedIds, setCollapsedIds] = useState<Set<string>>(new Set());
     const [isTreeCollapsed, setIsTreeCollapsed] = useState(false);
 
+    const styles: Record<string, React.CSSProperties> = {
+        panel: {
+            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",
+            maxHeight: "85vh",
+            display: "flex",
+            flexDirection: "column",
+            backdropFilter: "blur(6px)",
+            WebkitBackdropFilter: "blur(6px)",
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+            fontSize: 11,
+            lineHeight: 1.2,
+            userSelect: "none",
+            WebkitUserSelect: "none",
+        },
+        panelHeader: {
+            padding: "4px 6px",
+            borderBottom: "1px solid rgba(255,255,255,0.10)",
+            display: "flex",
+            gap: 8,
+            alignItems: "center",
+            justifyContent: "space-between",
+            cursor: "pointer",
+            background: "rgba(255,255,255,0.05)",
+            textTransform: "uppercase",
+            letterSpacing: "0.08em",
+            fontSize: 10,
+            color: "rgba(255,255,255,0.7)",
+        },
+        scroll: {
+            overflowY: "auto",
+        },
+        row: {
+            display: "flex",
+            alignItems: "center",
+            padding: "2px 6px",
+            borderBottom: "1px solid rgba(255,255,255,0.07)",
+            cursor: "pointer",
+            whiteSpace: "nowrap",
+        },
+        rowSelected: {
+            background: "rgba(255,255,255,0.10)",
+        },
+        chevron: {
+            width: 12,
+            textAlign: "center",
+            opacity: 0.55,
+            fontSize: 10,
+            marginRight: 4,
+            cursor: "pointer",
+        },
+        idText: {
+            fontSize: 11,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+        },
+        contextMenu: {
+            position: "fixed",
+            zIndex: 50,
+            minWidth: 120,
+            background: "rgba(0,0,0,0.82)",
+            border: "1px solid rgba(255,255,255,0.16)",
+            borderRadius: 6,
+            overflow: "hidden",
+            boxShadow: "0 12px 32px rgba(0,0,0,0.45)",
+            backdropFilter: "blur(6px)",
+            WebkitBackdropFilter: "blur(6px)",
+        },
+        menuItem: {
+            width: "100%",
+            textAlign: "left",
+            padding: "6px 8px",
+            background: "transparent",
+            border: "none",
+            color: "rgba(255,255,255,0.9)",
+            font: "inherit",
+            cursor: "pointer",
+        },
+        menuItemDanger: {
+            color: "rgba(255,120,120,0.95)",
+        },
+        menuDivider: {
+            borderTop: "1px solid rgba(255,255,255,0.10)",
+        }
+    };
+
     if (!prefabData || !setPrefabData) return null;
 
     const handleContextMenu = (e: MouseEvent, nodeId: string) => {
@@ -39,8 +128,6 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
     const handleAddChild = (parentId: string) => {
         const newNode: GameObject = {
             id: crypto.randomUUID(),
-            enabled: true,
-            visible: true,
             components: {
                 transform: {
                     type: "Transform",
@@ -154,24 +241,42 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
         const hasChildren = node.children && node.children.length > 0;
 
         return (
-            <div key={node.id} className="select-none">
+            <div key={node.id}>
                 <div
-                    className={`flex items-center py-0.5 px-1 cursor-pointer border-b border-cyan-500/10 ${isSelected ? 'bg-cyan-500/30 hover:bg-cyan-500/40 border-cyan-400/30' : 'hover:bg-cyan-500/10'}`}
-                    style={{ paddingLeft: `${depth * 8 + 4}px` }}
+                    style={{
+                        ...styles.row,
+                        ...(isSelected ? styles.rowSelected : null),
+                        paddingLeft: `${depth * 10 + 6}px`,
+                    }}
                     onClick={(e) => { e.stopPropagation(); setSelectedId(node.id); }}
                     onContextMenu={(e) => handleContextMenu(e, node.id)}
                     draggable={node.id !== prefabData.root.id}
                     onDragStart={(e) => handleDragStart(e, node.id)}
                     onDragOver={(e) => handleDragOver(e, node.id)}
                     onDrop={(e) => handleDrop(e, node.id)}
+                    onPointerEnter={(e) => {
+                        if (!isSelected) (e.currentTarget as HTMLDivElement).style.background = "rgba(255,255,255,0.06)";
+                    }}
+                    onPointerLeave={(e) => {
+                        if (!isSelected) (e.currentTarget as HTMLDivElement).style.background = "transparent";
+                    }}
                 >
                     <span
-                        className={`mr-0.5 w-3 text-center text-cyan-400/50 hover:text-cyan-400 cursor-pointer text-[8px] ${hasChildren ? '' : 'invisible'}`}
+                        style={{
+                            ...styles.chevron,
+                            visibility: hasChildren ? 'visible' : 'hidden',
+                        }}
                         onClick={(e) => hasChildren && toggleCollapse(e, node.id)}
+                        onPointerEnter={(e) => {
+                            (e.currentTarget as HTMLSpanElement).style.opacity = "0.9";
+                        }}
+                        onPointerLeave={(e) => {
+                            (e.currentTarget as HTMLSpanElement).style.opacity = "0.55";
+                        }}
                     >
                         {isCollapsed ? '▶' : '▼'}
                     </span>
-                    <span className="text-[10px] truncate font-mono text-cyan-300">
+                    <span style={styles.idText}>
                         {node.id}
                     </span>
                 </div>
@@ -186,16 +291,28 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
 
     return (
         <>
-            <div className="bg-black/70 backdrop-blur-sm text-white border border-cyan-500/30 max-h-[85vh] overflow-y-auto flex flex-col" style={{ width: isTreeCollapsed ? 'auto' : '14rem' }} onClick={closeContextMenu}>
+            <div
+                style={{
+                    ...styles.panel,
+                    width: isTreeCollapsed ? 'auto' : '14rem',
+                }}
+                onClick={closeContextMenu}
+            >
                 <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"
+                    style={styles.panelHeader}
                     onClick={(e) => { e.stopPropagation(); setIsTreeCollapsed(!isTreeCollapsed); }}
+                    onPointerEnter={(e) => {
+                        (e.currentTarget as HTMLDivElement).style.background = "rgba(255,255,255,0.08)";
+                    }}
+                    onPointerLeave={(e) => {
+                        (e.currentTarget as HTMLDivElement).style.background = "rgba(255,255,255,0.05)";
+                    }}
                 >
                     <span>Prefab Graph</span>
-                    <span className="text-[8px]">{isTreeCollapsed ? '▶' : '◀'}</span>
+                    <span style={{ fontSize: 10, opacity: 0.8 }}>{isTreeCollapsed ? '▶' : '◀'}</span>
                 </div>
                 {!isTreeCollapsed && (
-                    <div className="flex-1 py-0.5">
+                    <div style={{ ...styles.scroll, padding: 2 }}>
                         {renderNode(prefabData.root)}
                     </div>
                 )}
@@ -203,28 +320,49 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
 
             {contextMenu && (
                 <div
-                    className="fixed bg-black/90 backdrop-blur-sm border border-cyan-500/40 z-50 min-w-[100px]"
-                    style={{ top: contextMenu.y, left: contextMenu.x }}
+                    style={{
+                        ...styles.contextMenu,
+                        top: contextMenu.y,
+                        left: contextMenu.x,
+                    }}
                     onClick={(e) => e.stopPropagation()}
                     onPointerLeave={closeContextMenu}
                 >
                     <button
-                        className="w-full text-left px-2 py-1 hover:bg-cyan-500/20 text-[10px] text-cyan-300 font-mono border-b border-cyan-500/20"
+                        style={{ ...styles.menuItem, ...styles.menuDivider }}
                         onClick={() => handleAddChild(contextMenu.nodeId)}
+                        onPointerEnter={(e) => {
+                            (e.currentTarget as HTMLButtonElement).style.background = "rgba(255,255,255,0.08)";
+                        }}
+                        onPointerLeave={(e) => {
+                            (e.currentTarget as HTMLButtonElement).style.background = "transparent";
+                        }}
                     >
                         Add Child
                     </button>
                     {contextMenu.nodeId !== prefabData.root.id && (
                         <>
                             <button
-                                className="w-full text-left px-2 py-1 hover:bg-cyan-500/20 text-[10px] text-cyan-300 font-mono border-b border-cyan-500/20"
+                                style={{ ...styles.menuItem, ...styles.menuDivider }}
                                 onClick={() => handleDuplicate(contextMenu.nodeId)}
+                                onPointerEnter={(e) => {
+                                    (e.currentTarget as HTMLButtonElement).style.background = "rgba(255,255,255,0.08)";
+                                }}
+                                onPointerLeave={(e) => {
+                                    (e.currentTarget as HTMLButtonElement).style.background = "transparent";
+                                }}
                             >
                                 Duplicate
                             </button>
                             <button
-                                className="w-full text-left px-2 py-1 hover:bg-red-500/20 text-[10px] text-red-400 font-mono"
+                                style={{ ...styles.menuItem, ...styles.menuItemDanger }}
                                 onClick={() => handleDelete(contextMenu.nodeId)}
+                                onPointerEnter={(e) => {
+                                    (e.currentTarget as HTMLButtonElement).style.background = "rgba(255,255,255,0.08)";
+                                }}
+                                onPointerLeave={(e) => {
+                                    (e.currentTarget as HTMLButtonElement).style.background = "transparent";
+                                }}
                             >
                                 Delete
                             </button>

package/src/tools/prefabeditor/EditorUI.tsx

@@ -15,6 +15,47 @@ function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transf
 }) {
     const [isInspectorCollapsed, setIsInspectorCollapsed] = useState(false);
 
+    const ui: Record<string, React.CSSProperties> = {
+        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: (n: GameObjectType) => GameObjectType) => {
         if (!prefabData || !setPrefabData || !selectedId) return;
         setPrefabData(prev => ({
@@ -40,13 +81,19 @@ function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transf
 
     // if (!selectedNode) return null;
     return <>
-        <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)" }} >
+        <div style={ui.panel}>
             <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"
+                style={ui.header}
                 onClick={() => setIsInspectorCollapsed(!isInspectorCollapsed)}
+                onPointerEnter={(e) => {
+                    (e.currentTarget as HTMLDivElement).style.background = 'rgba(255,255,255,0.08)';
+                }}
+                onPointerLeave={(e) => {
+                    (e.currentTarget as HTMLDivElement).style.background = 'rgba(255,255,255,0.05)';
+                }}
             >
                 <span>Inspector</span>
-                <span className="text-[8px]">{isInspectorCollapsed ? '◀' : '▶'}</span>
+                <span style={{ fontSize: 10, opacity: 0.8 }}>{isInspectorCollapsed ? '◀' : '▶'}</span>
             </div>
             {!isInspectorCollapsed && selectedNode && (
                 <NodeInspector
@@ -59,7 +106,7 @@ function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transf
                 />
             )}
         </div>
-        <div style={{ position: 'absolute', top: "0.5rem", left: "0.5rem", zIndex: 20 }} >
+        <div style={ui.left}>
             <EditorTree
                 prefabData={prefabData}
                 setPrefabData={setPrefabData}
@@ -82,6 +129,103 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
     const allComponentKeys = Object.keys(ALL_COMPONENTS);
     const [addComponentType, setAddComponentType] = useState(allComponentKeys[0]);
 
+    const s: Record<string, React.CSSProperties> = {
+        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'),
@@ -92,28 +236,44 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
         }
     }, [componentKeys, addComponentType, node.components, allComponentKeys]);
 
-    return <div className="flex flex-col gap-1 text-[11px] max-w-[250px] max-h-[80vh] overflow-y-auto">
-        <div className="border-b border-cyan-500/20 pb-1 px-1.5 pt-1">
+    return <div style={s.root}>
+        <div style={s.section}>
             <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"
+                style={s.input}
                 value={node.id}
                 onChange={e => updateNode(n => ({ ...n, id: e.target.value }))}
             />
         </div>
 
-        <div className="flex justify-between items-center px-1.5 py-0.5 border-b border-cyan-500/20">
-            <label className="text-[10px] font-mono text-cyan-400/80 uppercase tracking-wider">Components</label>
-            <button onClick={deleteNode} className="text-[10px] text-red-400/80 hover:text-red-400">✕</button>
+        <div style={{ ...s.row, ...s.section, paddingBottom: 6 }}>
+            <label style={{ ...s.label, marginBottom: 0 }}>Components</label>
+            <button
+                onClick={deleteNode}
+                style={s.smallDanger}
+                title="Delete node"
+            >
+                ✕
+            </button>
         </div>
 
-        <div className="px-1.5 py-1 border-b border-cyan-500/20">
-            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Mode</label>
-            <div className="flex gap-0.5">
+        <div style={s.section}>
+            <label style={s.label}>Mode</label>
+            <div style={{ display: 'flex', gap: 6 }}>
                 {["translate", "rotate", "scale"].map(mode => (
                     <button
                         key={mode}
                         onClick={() => setTransformMode(mode as any)}
-                        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'}`}
+                        style={{
+                            ...s.button,
+                            flex: 1,
+                            ...(transformMode === mode ? s.buttonActive : null),
+                        }}
+                        onPointerEnter={(e) => {
+                            if (transformMode !== mode) (e.currentTarget as HTMLButtonElement).style.background = 'rgba(255,255,255,0.08)';
+                        }}
+                        onPointerLeave={(e) => {
+                            if (transformMode !== mode) (e.currentTarget as HTMLButtonElement).style.background = 'transparent';
+                        }}
                     >
                         {mode[0].toUpperCase()}
                     </button>
@@ -121,53 +281,29 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
             </div>
         </div>
 
-        {/* Components */}
-        {/* {node.components && Object.entries(node.components).map(([key, comp]: [string, any]) => {
-            if (!comp) return null;
-            return (
-                <div key={key} className="border border-cyan-500/20 mx-1 my-0.5 bg-black/20">
-                    <div className="flex justify-between items-center px-1 py-0.5 border-b border-cyan-500/20 bg-cyan-500/5">
-                        <span className="font-mono text-[10px] text-cyan-300 uppercase">{key}</span>
-                        <button
-                            onClick={() => updateNode(n => {
-                                const components = { ...n.components };
-                                delete components[key as keyof typeof components];
-                                return { ...n, components };
-                            })}
-                            className="text-[9px] text-red-400/60 hover:text-red-400"
-                        >
-                            ✕
-                        </button>
-                    </div>
-                    <div className="px-1 py-0.5">
-                        <ComponentEditor component={comp} onChange={(newComp: any) => updateNode(n => ({
-                            ...n,
-                            components: { ...n.components, [key]: newComp }
-                        }))} />
-                    </div>
-                </div>
-            );
-        })} */}
+        {/* Components (legacy renderer removed) */}
 
         {node.components && Object.entries(node.components).map(([key, comp]: [string, any]) => {
             if (!comp) return null;
             const componentDef = ALL_COMPONENTS[comp.type];
-            if (!componentDef) return <div key={key} className="px-1 py-0.5 text-red-400 text-[10px]">Unknown component type: {comp.type}
+            if (!componentDef) return <div key={key} style={{ padding: '4px 0', color: 'rgba(255,120,120,0.95)', fontSize: 11 }}>
+                Unknown component type: {comp.type}
                 <textarea defaultValue={JSON.stringify(comp)} />
             </div>;
 
             const EditorComp = componentDef.Editor;
             return (
-                <div key={key} className='px-1'>
-                    <div className="flex justify-between items-center py-0.5 border-b border-cyan-500/20 bg-cyan-500/5">
-                        <span className="font-mono text-[10px] text-cyan-300 uppercase">{key}</span>
+                <div key={key} style={{ padding: '0 2px' }}>
+                    <div style={s.componentHeader}>
+                        <span style={s.componentTitle}>{key}</span>
                         <button
                             onClick={() => updateNode(n => {
                                 const components = { ...n.components };
                                 delete components[key as keyof typeof components];
                                 return { ...n, components };
                             })}
-                            className="text-[9px] text-red-400/60 hover:text-red-400"
+                            style={s.smallDanger}
+                            title="Remove component"
                         >
                             ✕
                         </button>
@@ -193,11 +329,11 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
         })}
 
         {/* Add Component */}
-        <div className="px-1.5 py-1 border-t border-cyan-500/20">
-            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Add Component</label>
-            <div className="flex gap-0.5">
+        <div style={{ ...s.section, borderBottom: 'none', paddingBottom: 0 }}>
+            <label style={s.label}>Add Component</label>
+            <div style={{ display: 'flex', gap: 6 }}>
                 <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"
+                    style={s.select}
                     value={addComponentType}
                     onChange={e => setAddComponentType(e.target.value)}
                 >
@@ -206,7 +342,10 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
                     ))}
                 </select>
                 <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"
+                    style={{
+                        ...s.addButton,
+                        ...(!addComponentType ? s.disabled : null),
+                    }}
                     disabled={!addComponentType}
                     onClick={() => {
                         if (!addComponentType) return;
@@ -222,6 +361,14 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
                             }));
                         }
                     }}
+                    onPointerEnter={(e) => {
+                        if (!addComponentType) return;
+                        (e.currentTarget as HTMLButtonElement).style.background = 'rgba(255,255,255,0.12)';
+                    }}
+                    onPointerLeave={(e) => {
+                        if (!addComponentType) return;
+                        (e.currentTarget as HTMLButtonElement).style.background = 'rgba(255,255,255,0.08)';
+                    }}
                 >
                     +
                 </button>