feat: toolbar sections as dropdown menus

Replace horizontal toolbar sections with dropdown buttons (I/O, Gates,
Components). Each opens a dropdown menu on click, keeping the toolbar
clean and compact. Dropdowns close on outside click or after selecting
a gate.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

js/components.js

@@ -286,6 +286,8 @@ export function updateComponentButtons() {
         btn.addEventListener('click', (e) => {
             e.stopPropagation();
             state.placingGate = `COMPONENT:${comp.id}`;
+            // Close dropdown
+            document.querySelectorAll('.toolbar-dropdown.open').forEach(d => d.classList.remove('open'));
         });
         container.appendChild(btn);
     });

js/events.js

@@ -215,9 +215,32 @@ export function initEvents() {
         keysDown.delete(e.key);
     });
 
-    // ==================== TOOLBAR ====================
-    document.querySelectorAll('.gate-btn').forEach(btn => {
-        btn.addEventListener('click', () => {
+    // ==================== TOOLBAR DROPDOWNS ====================
+    function closeAllDropdowns() {
+        document.querySelectorAll('.toolbar-dropdown.open').forEach(d => d.classList.remove('open'));
+    }
+
+    document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
+        toggle.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const dropdown = toggle.parentElement;
+            const wasOpen = dropdown.classList.contains('open');
+            closeAllDropdowns();
+            if (!wasOpen) dropdown.classList.add('open');
+        });
+    });
+
+    // Close dropdowns when clicking outside
+    document.addEventListener('click', (e) => {
+        if (!e.target.closest('.toolbar-dropdown')) {
+            closeAllDropdowns();
+        }
+    });
+
+    // Gate buttons inside dropdowns
+    document.querySelectorAll('.dropdown-menu .gate-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
             const gateName = btn.dataset.gate;
             // In puzzle mode, check if gate is allowed
             if (puzzleMode && currentLevel) {
@@ -228,6 +251,7 @@ export function initEvents() {
                 }
             }
             state.placingGate = gateName;
+            closeAllDropdowns();
         });
     });
 
@@ -332,7 +356,9 @@ export function initEvents() {
     document.addEventListener('mouseup', () => { state.resizingWave = false; });
 
     // ==================== COMPONENT EDITOR ====================
-    document.getElementById('create-component-btn').addEventListener('click', () => {
+    document.getElementById('create-component-btn').addEventListener('click', (e) => {
+        e.stopPropagation();
+        closeAllDropdowns();
         enterComponentEditor();
     });