fix: horizontal toolbar layout + fix component button placement

Redesign toolbar sections to use horizontal button rows instead of
vertical stacking. Fix component placement by attaching click handlers
directly to dynamically created buttons and passing correct gate object
shape to getComponentWidth/Height.

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

js/components.js

@@ -283,6 +283,10 @@ export function updateComponentButtons() {
         btn.dataset.componentId = comp.id;
         btn.textContent = comp.name;
         btn.title = `${comp.inputCount} input(s), ${comp.outputCount} output(s)`;
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            state.placingGate = `COMPONENT:${comp.id}`;
+        });
         container.appendChild(btn);
     });
 }

js/events.js

@@ -71,8 +71,9 @@ export function initEvents() {
                 const componentId = state.placingGate.substring(10);
                 const component = state.customComponents?.[componentId];
                 if (component) {
-                    w = getComponentWidth({ component });
-                    h = getComponentHeight({ component });
+                    const fakeGate = { type: state.placingGate, component };
+                    w = getComponentWidth(fakeGate);
+                    h = getComponentHeight(fakeGate);
                 }
             }
 
@@ -348,14 +349,6 @@ export function initEvents() {
         }
     });
 
-    // Event delegation for saved component buttons
-    document.addEventListener('click', e => {
-        if (e.target.classList.contains('component-btn')) {
-            const componentId = e.target.dataset.componentId;
-            state.placingGate = `COMPONENT:${componentId}`;
-        }
-    });
-
-    // Update component buttons initially and when customComponents changes
+    // Update component buttons initially
     updateComponentButtons();
 }