Updates to canvas of logic gate simulator:

- Addition of zoom feature

Signed-off-by: Alexander Lyall <alex@adcm.uk>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "computing-box",
-  "version": "0.0.1",
+  "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "computing-box",
   "type": "module",
-  "version": "0.0.1",
+  "version": "2.0.0",
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",

src/pages/logic-gates.astro

@@ -14,38 +14,41 @@ import "../styles/logic-gates.css";
     <div class="lg-top-header">
       <div class="lg-title">Interactive Logic Circuit Builder</div>
       <div class="lg-subtitle">
-        Drag items from the toolbox to the board. Drag from output ports to input ports to wire. Click a wire or node and press <kbd>Delete</kbd> to remove it.
+        Drag items from the toolbox. Drag from output ports to input ports to wire. Click a wire/node and press <kbd>Delete</kbd>. Scroll to Zoom.
       </div>
     </div>
 
     <div class="lg-workspace" id="workspace">
-      <svg class="lg-svg-layer" id="wireLayer"></svg>
-      </div>
-    
-    <aside id="toolboxPanel" class="lg-toolbox" aria-label="Toolbox">
       
-      <div class="card">
-        <div class="cardTitle">Components</div>
-        
-        <div class="tb-icon-grid" id="toolboxGrid">
-          </div>
+      <div class="lg-zoom-controls">
+        <button class="lg-zoom-btn" id="btnZoomIn" title="Zoom In">+</button>
+        <button class="lg-zoom-btn" id="btnZoomOut" title="Zoom Out">−</button>
+        <button class="lg-zoom-btn" id="btnZoomReset" title="Reset View" style="font-size: 16px;">⌂</button>
       </div>
 
+      <div class="lg-viewport" id="viewport">
+        <svg class="lg-svg-layer" id="wireLayer"></svg>
+        </div>
+      
+    </div>
+    
+    <aside id="toolboxPanel" class="lg-toolbox" aria-label="Toolbox">
+      <div class="card">
+        <div class="cardTitle">Components</div>
+        <div class="tb-icon-grid" id="toolboxGrid"></div>
+      </div>
       <div class="card">
         <div class="cardTitle">Live Truth Table</div>
         <details open>
           <summary class="tt-summary">Show / Hide Table</summary>
           <div style="font-family: var(--ui-font); font-size: 12px; color: var(--muted); margin-bottom: 12px;">Auto-generates based on current wiring. (Max 6 inputs)</div>
-          <div class="tt-table-wrap" id="truthTableContainer">
-            </div>
+          <div class="tt-table-wrap" id="truthTableContainer"></div>
         </details>
       </div>
-
       <div class="card">
         <div class="cardTitle">Tools</div>
         <button class="btn btnReset btnWide" id="btnClearBoard" type="button" style="margin-bottom:0;">Clear Board</button>
       </div>
-
     </aside>
   </div>
 

src/scripts/logicGates.js

@@ -4,6 +4,7 @@
 (() => {
   /* --- DOM Elements --- */
   const workspace = document.getElementById("workspace");
+  const viewport = document.getElementById("viewport");
   const wireLayer = document.getElementById("wireLayer");
   const ttContainer = document.getElementById("truthTableContainer");
   const toolboxGrid = document.getElementById("toolboxGrid");
@@ -12,7 +13,7 @@
   const toolboxToggle = document.getElementById("toolboxToggle");
   const logicPage = document.getElementById("logicPage");
 
-  /* --- ANSI Gate SVGs (Strict 100x50 with built-in tails) --- */
+  /* --- ANSI Gate SVGs --- */
   const GATE_SVGS = {
     'AND': `<g stroke="#e8e8ee" stroke-width="3" fill="none"><path d="M0,15 L20,15 M0,35 L20,35 M70,25 L100,25"/><path d="M20,5 L50,5 A20,20 0 0 1 50,45 L20,45 Z" fill="var(--bg)"/></g>`,
     'OR': `<g stroke="#e8e8ee" stroke-width="3" fill="none"><path d="M0,15 L26,15 M0,35 L26,35 M70,25 L100,25"/><path d="M20,5 Q55,5 70,25 Q55,45 20,45 Q40,25 20,5 Z" fill="var(--bg)"/></g>`,
@@ -33,16 +34,21 @@
   let nextNodeId = 1;
   let nextWireId = 1;
 
+  // Interaction State
   let isDraggingNode = null;
   let dragOffset = { x: 0, y: 0 };
   let clickStartX = 0, clickStartY = 0; 
   
   let wiringStart = null; 
   let tempWirePath = null;
-  
   let selectedWireId = null; 
   let selectedNodeId = null;
 
+  // Camera State (Pan & Zoom)
+  let panX = 0, panY = 0, zoom = 1;
+  let isPanning = false;
+  let panStart = { x: 0, y: 0 };
+
   /* --- Setup Toolbox --- */
   function initToolbox() {
     if(!toolboxGrid) return;
@@ -56,7 +62,6 @@
         <div class="tb-icon-label">Output</div>
       </div>
     `;
-    
     Object.keys(GATE_SVGS).forEach(gate => {
       html += `
         <div draggable="true" data-spawn="GATE" data-gate="${gate}" class="drag-item tb-icon-box" title="${gate} Gate">
@@ -65,7 +70,6 @@
         </div>
       `;
     });
-    
     toolboxGrid.innerHTML = html;
 
     document.querySelectorAll('.drag-item').forEach(item => {
@@ -76,7 +80,21 @@
     });
   }
 
-  /* --- Math & Geometry --- */
+  /* --- Camera Math --- */
+  function updateViewport() {
+    viewport.style.transform = `translate(${panX}px, ${panY}px) scale(${zoom})`;
+    workspace.style.backgroundSize = `${24 * zoom}px ${24 * zoom}px`;
+    workspace.style.backgroundPosition = `${panX}px ${panY}px`;
+  }
+
+  function zoomWorkspace(factor, mouseX, mouseY) {
+    const newZoom = Math.min(Math.max(0.2, zoom * factor), 3);
+    panX = mouseX - (mouseX - panX) * (newZoom / zoom);
+    panY = mouseY - (mouseY - panY) * (newZoom / zoom);
+    zoom = newZoom;
+    updateViewport();
+  }
+
   function getPortCoords(nodeId, portDataAttr) {
     const node = nodes[nodeId];
     if (!node || !node.el) return {x:0, y:0};
@@ -87,9 +105,10 @@
     const wsRect = workspace.getBoundingClientRect();
     const portRect = portEl.getBoundingClientRect();
     
+    // Calculate backwards through camera scale/pan to find true local coordinates
     return {
-      x: portRect.left - wsRect.left + (portRect.width / 2),
-      y: portRect.top - wsRect.top + (portRect.height / 2)
+      x: (portRect.left - wsRect.left - panX + portRect.width / 2) / zoom,
+      y: (portRect.top - wsRect.top - panY + portRect.height / 2) / zoom
     };
   }
 
@@ -101,37 +120,30 @@
   /* --- Rendering --- */
   function renderWires() {
     let svgHTML = '';
-    
     connections.forEach(conn => {
       const from = getPortCoords(conn.fromNode, 'out');
       const to = getPortCoords(conn.toNode, `in${conn.toPort}`);
       const sourceNode = nodes[conn.fromNode];
       const isActive = sourceNode && sourceNode.value === true;
       const isSelected = conn.id === selectedWireId;
-      
       svgHTML += `<path class="lg-wire ${isActive ? 'active' : ''} ${isSelected ? 'selected' : ''}" d="${drawBezier(from.x, from.y, to.x, to.y)}" data-conn-id="${conn.id}" />`;
     });
 
     if (wiringStart && tempWirePath) {
       svgHTML += `<path class="lg-wire lg-wire-temp" d="${drawBezier(wiringStart.x, wiringStart.y, tempWirePath.x, tempWirePath.y)}" />`;
     }
-
     wireLayer.innerHTML = svgHTML;
   }
 
   function updateNodePositions() {
     Object.values(nodes).forEach(n => {
-      if (n.el) {
-        n.el.style.left = `${n.x}px`;
-        n.el.style.top = `${n.y}px`;
-      }
+      if (n.el) { n.el.style.left = `${n.x}px`; n.el.style.top = `${n.y}px`; }
     });
     renderWires();
   }
 
   function clearSelection() {
-    selectedWireId = null;
-    selectedNodeId = null;
+    selectedWireId = null; selectedNodeId = null;
     document.querySelectorAll('.lg-node.selected').forEach(el => el.classList.remove('selected'));
     renderWires();
   }
@@ -139,22 +151,16 @@
   /* --- Logic Evaluation --- */
   function evaluateGraph(overrideInputs = null) {
     let context = {}; 
-
     Object.values(nodes).filter(n => n.type === 'INPUT').forEach(n => {
       context[n.id] = overrideInputs ? overrideInputs[n.id] : n.value;
     });
 
-    let changed = true;
-    let loops = 0;
-    
+    let changed = true; let loops = 0;
     while (changed && loops < 10) {
-      changed = false;
-      loops++;
-      
+      changed = false; loops++;
       Object.values(nodes).filter(n => n.type === 'GATE').forEach(gate => {
         let in1Conn = connections.find(c => c.toNode === gate.id && c.toPort === '1');
         let in2Conn = connections.find(c => c.toNode === gate.id && c.toPort === '2');
-
         let val1 = in1Conn ? (context[in1Conn.fromNode] || false) : false;
         let val2 = in2Conn ? (context[in2Conn.fromNode] || false) : false;
         
@@ -168,11 +174,7 @@
           case 'XOR': res = val1 !== val2; break;
           case 'XNOR': res = val1 === val2; break;
         }
-
-        if (context[gate.id] !== res) {
-          context[gate.id] = res;
-          changed = true;
-        }
+        if (context[gate.id] !== res) { context[gate.id] = res; changed = true; }
       });
     }
 
@@ -193,7 +195,6 @@
         }
       });
     }
-
     return outStates;
   }
 
@@ -205,12 +206,10 @@
     const outNodes = Object.values(nodes).filter(n => n.type === 'OUTPUT').sort((a,b) => a.label.localeCompare(b.label));
 
     if (inNodes.length === 0 || outNodes.length === 0) {
-      ttContainer.innerHTML = '<div style="padding: 16px; color: var(--muted); text-align:center;">Add inputs and outputs to generate table.</div>';
-      return;
+      ttContainer.innerHTML = '<div style="padding: 16px; color: var(--muted); text-align:center;">Add inputs and outputs to generate table.</div>'; return;
     }
     if (inNodes.length > 6) {
-      ttContainer.innerHTML = '<div style="padding: 16px; color: var(--muted); text-align:center;">Maximum 6 inputs supported.</div>';
-      return;
+      ttContainer.innerHTML = '<div style="padding: 16px; color: var(--muted); text-align:center;">Maximum 6 inputs supported.</div>'; return;
     }
 
     let html = '<table class="tt-table"><thead><tr>';
@@ -219,27 +218,16 @@
     html += '</tr></thead><tbody>';
 
     const numRows = Math.pow(2, inNodes.length);
-
     for (let i = 0; i < numRows; i++) {
       let override = {};
-      inNodes.forEach((n, idx) => {
-        override[n.id] = ((i >> (inNodes.length - 1 - idx)) & 1) === 1;
-      });
-
+      inNodes.forEach((n, idx) => { override[n.id] = ((i >> (inNodes.length - 1 - idx)) & 1) === 1; });
       let outStates = evaluateGraph(override);
 
       html += '<tr>';
-      inNodes.forEach(n => {
-        let val = override[n.id];
-        html += `<td class="${val ? 'tt-on' : ''}">${val ? 1 : 0}</td>`;
-      });
-      outNodes.forEach(n => {
-        let val = outStates[n.id];
-        html += `<td class="${val ? 'tt-on' : ''}" style="font-weight:bold;">${val ? 1 : 0}</td>`;
-      });
+      inNodes.forEach(n => { let val = override[n.id]; html += `<td class="${val ? 'tt-on' : ''}">${val ? 1 : 0}</td>`; });
+      outNodes.forEach(n => { let val = outStates[n.id]; html += `<td class="${val ? 'tt-on' : ''}" style="font-weight:bold;">${val ? 1 : 0}</td>`; });
       html += '</tr>';
     }
-
     html += '</tbody></table>';
     ttContainer.innerHTML = html;
   }
@@ -252,28 +240,22 @@
 
   /* --- Smart Label Generation --- */
   function getNextInputLabel() {
-    let charCode = 65; // Starts at 'A'
-    while (Object.values(nodes).some(n => n.type === 'INPUT' && n.label === String.fromCharCode(charCode))) {
-      charCode++;
-    }
+    let charCode = 65; 
+    while (Object.values(nodes).some(n => n.type === 'INPUT' && n.label === String.fromCharCode(charCode))) { charCode++; }
     return String.fromCharCode(charCode);
   }
 
   function getNextOutputLabel() {
     let idx = 1;
-    while (Object.values(nodes).some(n => n.type === 'OUTPUT' && n.label === ('Q' + idx))) {
-      idx++;
-    }
+    while (Object.values(nodes).some(n => n.type === 'OUTPUT' && n.label === ('Q' + idx))) { idx++; }
     return 'Q' + idx;
   }
 
   /* --- Node Creation --- */
   function createNodeElement(node) {
     const el = document.createElement('div');
-    el.className = `lg-node`;
-    el.dataset.id = node.id;
-    el.style.left = `${node.x}px`;
-    el.style.top = `${node.y}px`;
+    el.className = `lg-node`; el.dataset.id = node.id;
+    el.style.left = `${node.x}px`; el.style.top = `${node.y}px`;
 
     let innerHTML = `<div class="lg-header">${node.label}</div><div class="lg-gate-container">`;
 
@@ -281,12 +263,12 @@
       innerHTML += `
         <div class="switch" style="margin:0;"><span class="slider"></span></div>
         ${INPUT_SVG}
-        <div class="lg-port port-out" data-port="out" style="top: 25px; left: 86px;"></div>
+        <div class="lg-port" data-port="out" style="top: 25px; left: 86px;"></div>
       `;
     } 
     else if (node.type === 'OUTPUT') {
       innerHTML += `
-        <div class="lg-port port-in-1" data-port="in1" style="top: 25px; left: 0;"></div>
+        <div class="lg-port" data-port="in1" style="top: 25px; left: 0;"></div>
         ${OUTPUT_SVG}
         <div class="bulb" style="margin:0;"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.25a6.75 6.75 0 0 0-6.75 6.75c0 2.537 1.393 4.75 3.493 5.922l.507.282v1.546h5.5v-1.546l.507-.282A6.75 6.75 0 0 0 12 2.25Zm-2.25 16.5v.75a2.25 2.25 0 0 0 4.5 0v-.75h-4.5Z"/></svg></div>
       `;
@@ -294,34 +276,33 @@
     else if (node.type === 'GATE') {
       const isNot = node.gateType === 'NOT';
       innerHTML += `
-        <div class="lg-port port-in-1" data-port="in1" style="top: ${isNot ? '25px' : '15px'}; left: 0;"></div>
-        ${!isNot ? `<div class="lg-port port-in-2" data-port="in2" style="top: 35px; left: 0;"></div>` : ''}
+        <div class="lg-port" data-port="in1" style="top: ${isNot ? '25px' : '15px'}; left: 0;"></div>
+        ${!isNot ? `<div class="lg-port" data-port="in2" style="top: 35px; left: 0;"></div>` : ''}
         <svg class="lg-gate-svg" viewBox="0 0 100 50">${GATE_SVGS[node.gateType]}</svg>
-        <div class="lg-port port-out" data-port="out" style="top: 25px; left: 100px;"></div>
+        <div class="lg-port" data-port="out" style="top: 25px; left: 100px;"></div>
       `;
     }
-
     innerHTML += `</div>`;
     el.innerHTML = innerHTML;
-    workspace.appendChild(el);
+    
+    viewport.appendChild(el);
     node.el = el;
 
     if (node.type === 'INPUT') {
       el.querySelector('.switch').addEventListener('click', (e) => {
         const dist = Math.hypot(e.clientX - clickStartX, e.clientY - clickStartY);
-        if (isDraggingNode || dist > 3) {
-          e.preventDefault(); 
+        if (dist > 3) {
+          e.preventDefault(); // Prevents toggle if it was a drag motion
         } else {
           node.value = !node.value;
           el.querySelector('.switch').classList.toggle('active-sim', node.value);
           el.querySelector('.slider').style.background = node.value ? 'rgba(40,240,122,.25)' : '';
           el.querySelector('.slider').style.borderColor = node.value ? 'rgba(40,240,122,.30)' : '';
-          el.querySelector('.slider').innerHTML = node.value ? `<style>#${node.id} .slider::before { transform: translateX(28px); }</style>` : '';
+          el.querySelector('.slider').innerHTML = node.value ? `<style>#logicPage [data-id="${node.id}"] .slider::before { transform: translateX(28px); }</style>` : '';
           runSimulation();
         }
       });
     }
-
     return el;
   }
 
@@ -332,7 +313,6 @@
     if (type === 'GATE') label = gateType;
 
     const id = `node_${nextNodeId++}`;
-    
     const offset = Math.floor(Math.random() * 40);
     const x = dropX !== null ? dropX : (type === 'INPUT' ? 50 : (type === 'OUTPUT' ? 600 : 300) + offset);
     const y = dropY !== null ? dropY : 150 + offset;
@@ -344,10 +324,27 @@
   }
 
   /* --- Global Interaction Handlers --- */
+
+  // Camera Zoom Controls
+  document.getElementById("btnZoomIn")?.addEventListener('click', () => { 
+    const r = workspace.getBoundingClientRect(); zoomWorkspace(1.2, r.width/2, r.height/2); 
+  });
+  document.getElementById("btnZoomOut")?.addEventListener('click', () => { 
+    const r = workspace.getBoundingClientRect(); zoomWorkspace(1/1.2, r.width/2, r.height/2); 
+  });
+  document.getElementById("btnZoomReset")?.addEventListener('click', () => { 
+    panX = 0; panY = 0; zoom = 1; updateViewport(); 
+  });
+
+  workspace.addEventListener('wheel', (e) => {
+    e.preventDefault();
+    const wsRect = workspace.getBoundingClientRect();
+    const factor = e.deltaY < 0 ? 1.1 : (1/1.1);
+    zoomWorkspace(factor, e.clientX - wsRect.left, e.clientY - wsRect.top);
+  });
   
   workspace.addEventListener('mousedown', (e) => {
-    clickStartX = e.clientX;
-    clickStartY = e.clientY;
+    clickStartX = e.clientX; clickStartY = e.clientY;
 
     const port = e.target.closest('.lg-port');
     if (port) {
@@ -356,11 +353,7 @@
       
       if (portId.startsWith('in')) {
         const existingIdx = connections.findIndex(c => c.toNode === nodeEl.dataset.id && c.toPort === portId.replace('in', ''));
-        if (existingIdx !== -1) {
-          connections.splice(existingIdx, 1);
-          runSimulation();
-          return; 
-        }
+        if (existingIdx !== -1) { connections.splice(existingIdx, 1); runSimulation(); return; }
       }
 
       if (portId === 'out') {
@@ -385,32 +378,41 @@
       clearSelection();
       selectedNodeId = nodeEl.dataset.id;
       nodeEl.classList.add('selected');
-
       isDraggingNode = nodeEl.dataset.id;
+      
       const rect = nodeEl.getBoundingClientRect();
-      dragOffset = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+      dragOffset = { x: (e.clientX - rect.left) / zoom, y: (e.clientY - rect.top) / zoom };
       return;
     }
 
+    // Clicked empty space -> Pan Camera
     clearSelection();
+    isPanning = true;
+    panStart = { x: e.clientX - panX, y: e.clientY - panY };
   });
 
   window.addEventListener('mousemove', (e) => {
     const wsRect = workspace.getBoundingClientRect();
 
+    if (isPanning) {
+      panX = e.clientX - panStart.x;
+      panY = e.clientY - panStart.y;
+      updateViewport();
+      return;
+    }
+
     if (isDraggingNode) {
       const node = nodes[isDraggingNode];
-      let newX = e.clientX - wsRect.left - dragOffset.x;
-      let newY = e.clientY - wsRect.top - dragOffset.y;
-      node.x = Math.max(10, Math.min(newX, wsRect.width - 80));
-      node.y = Math.max(20, Math.min(newY, wsRect.height - 60));
+      let newX = (e.clientX - wsRect.left - panX) / zoom - dragOffset.x;
+      let newY = (e.clientY - wsRect.top - panY) / zoom - dragOffset.y;
+      node.x = newX; node.y = newY;
       updateNodePositions();
     }
 
     if (wiringStart) {
       tempWirePath = { 
-        x: e.clientX - wsRect.left, 
-        y: e.clientY - wsRect.top 
+        x: (e.clientX - wsRect.left - panX) / zoom, 
+        y: (e.clientY - wsRect.top - panY) / zoom 
       };
       renderWires();
     }
@@ -418,6 +420,7 @@
 
   window.addEventListener('mouseup', (e) => {
     isDraggingNode = null;
+    isPanning = false;
 
     if (wiringStart) {
       const port = e.target.closest('.lg-port');
@@ -427,18 +430,10 @@
 
         if (targetNodeId !== wiringStart.node) {
           connections = connections.filter(c => !(c.toNode === targetNodeId && c.toPort === targetPortId));
-          
-          connections.push({
-            id: `conn_${nextWireId++}`,
-            fromNode: wiringStart.node,
-            fromPort: 'out',
-            toNode: targetNodeId,
-            toPort: targetPortId
-          });
+          connections.push({ id: `conn_${nextWireId++}`, fromNode: wiringStart.node, fromPort: 'out', toNode: targetNodeId, toPort: targetPortId });
         }
       }
-      wiringStart = null;
-      tempWirePath = null;
+      wiringStart = null; tempWirePath = null;
       runSimulation();
     }
   });
@@ -448,17 +443,15 @@
     if (e.key === 'Delete' || e.key === 'Backspace') {
       if (selectedWireId) {
         connections = connections.filter(c => c.id !== selectedWireId);
-        clearSelection();
-        runSimulation();
+        clearSelection(); runSimulation();
       } 
       else if (selectedNodeId) {
         connections = connections.filter(c => c.fromNode !== selectedNodeId && c.toNode !== selectedNodeId);
         if (nodes[selectedNodeId] && nodes[selectedNodeId].el) {
-          workspace.removeChild(nodes[selectedNodeId].el);
+          viewport.removeChild(nodes[selectedNodeId].el);
         }
         delete nodes[selectedNodeId];
-        clearSelection();
-        runSimulation();
+        clearSelection(); runSimulation();
       }
     }
   });
@@ -471,17 +464,16 @@
     if (spawnType) {
       const gateType = e.dataTransfer.getData('gateType');
       const wsRect = workspace.getBoundingClientRect();
-      const x = e.clientX - wsRect.left - 40; 
-      const y = e.clientY - wsRect.top - 30;
+      const x = (e.clientX - wsRect.left - panX) / zoom - 40; 
+      const y = (e.clientY - wsRect.top - panY) / zoom - 30;
       spawnNode(spawnType, gateType || null, x, y);
     }
   });
 
   /* --- Init --- */
   btnClearBoard?.addEventListener('click', () => {
-    workspace.querySelectorAll('.lg-node').forEach(el => el.remove());
-    nodes = {};
-    connections = [];
+    viewport.querySelectorAll('.lg-node').forEach(el => el.remove());
+    nodes = {}; connections = [];
     runSimulation();
   });
 
@@ -493,5 +485,4 @@
   });
 
   initToolbox();
-  // Starts completely blank as requested!
 })();

src/styles/logic-gates.css

@@ -1,161 +1,109 @@
 /* === FULL PAGE OVERRIDES FOR LOGIC GATES === */
-body:has(#logicPage) {
-  overflow: hidden; /* Prevents the entire page from scrolling */
-}
-
+body:has(#logicPage) { overflow: hidden; }
 body:has(#logicPage) .pageWrap {
-  max-width: 100% !important; /* Forces edge-to-edge canvas */
+  max-width: 100% !important;
   padding: 0 !important;
   margin: 0 !important;
   height: calc(100vh - var(--nav-h));
   display: flex;
   flex-direction: column;
 }
-
-#logicPage {
-  padding: 0 !important; /* CRITICAL: Stops the page/header from shifting when toolbox opens */
-  margin: 0 !important;
-}
+#logicPage { padding: 0 !important; margin: 0 !important; }
 
 /* === MAIN CONTAINER === */
 .lg-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
+  flex: 1; display: flex; flex-direction: column; position: relative;
+  width: 100%; height: 100%; overflow: hidden;
 }
 
-/* === FIXED HEADER (Ultra Compact) === */
+/* === FIXED HEADER === */
 .lg-top-header {
-  width: 100%;
-  text-align: center;
-  padding: 8px 20px 8px; /* Extremely tight padding to maximize canvas */
-  background: var(--bg);
-  z-index: 10;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-bottom: 1px solid rgba(255,255,255,0.08); /* Clean separation line */
+  width: 100%; text-align: center; padding: 8px 20px 8px; 
+  background: var(--bg); z-index: 10; flex-shrink: 0;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  border-bottom: 1px solid rgba(255,255,255,0.08); 
 }
-
 .lg-title {
-  font-family: var(--bit-font);
-  font-size: 32px;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--text);
-  margin: 0 0 2px 0; /* Minimal gap between title and subtitle */
-  line-height: 1;
+  font-family: var(--bit-font); font-size: 32px; letter-spacing: 0.12em;
+  text-transform: uppercase; color: var(--text); margin: 0 0 2px 0; line-height: 1;
 }
-
 .lg-subtitle {
-  color: var(--muted);
-  font-size: 14px;
-  font-family: var(--ui-font);
-  font-weight: 500;
-  margin: 0;
-  line-height: 1.2;
+  color: var(--muted); font-size: 14px; font-family: var(--ui-font);
+  font-weight: 500; margin: 0; line-height: 1.2;
 }
-
 .lg-subtitle kbd {
-  background: rgba(255,255,255,0.1);
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: var(--ui-font);
-  color: #e8e8ee;
+  background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 4px;
+  font-family: var(--ui-font); color: #e8e8ee;
 }
 
-/* === DYNAMIC CANVAS === */
+/* === DYNAMIC CANVAS & CAMERA VIEWPORT === */
 .lg-workspace {
-  flex: 1; /* Automatically fills all remaining vertical space */
-  position: relative;
-  width: 100%;
+  flex: 1; position: relative; width: 100%;
   background-color: transparent; 
-  background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
-  background-size: 24px 24px;
-  overflow: hidden;
+  background-image: radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px);
+  background-size: 24px 24px; overflow: hidden;
+  cursor: grab; /* Indicates pannable area */
 }
+.lg-workspace:active { cursor: grabbing; }
 
-.lg-svg-layer {
+.lg-viewport {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
-  pointer-events: none; 
-  z-index: 1;
+  transform-origin: 0 0;
+  pointer-events: none; /* Let events reach workspace, nodes will re-enable it */
+}
+
+/* Zoom UI Controls */
+.lg-zoom-controls {
+  position: absolute; bottom: 20px; left: 20px; z-index: 100;
+  display: flex; gap: 8px;
+}
+.lg-zoom-btn {
+  width: 40px; height: 40px; border-radius: 8px; font-family: var(--ui-font);
+  font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center;
+  background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.15);
+  color: #e8e8ee; cursor: pointer; backdrop-filter: blur(8px); transition: all 0.2s;
+}
+.lg-zoom-btn:hover { background: rgba(255,255,255,0.1); border-color: #28f07a; color: #28f07a; }
+
+.lg-svg-layer {
+  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
 }
 
 /* Wires */
 .lg-wire {
-  stroke: rgba(255,255,255,0.25);
-  stroke-width: 6;
-  fill: none;
-  stroke-linecap: round;
+  stroke: rgba(255,255,255,0.25); stroke-width: 6; fill: none; stroke-linecap: round;
   transition: stroke 0.1s ease, filter 0.1s ease, stroke-width 0.1s ease;
-  pointer-events: stroke; 
-  cursor: pointer;
-}
-.lg-wire:hover {
-  stroke: rgba(255,255,255,0.6);
-  stroke-width: 10;
-}
-.lg-wire.active {
-  stroke: #28f07a;
-  filter: drop-shadow(0 0 6px rgba(40,240,122,0.6));
+  pointer-events: stroke; cursor: pointer;
 }
+.lg-wire:hover { stroke: rgba(255,255,255,0.6); stroke-width: 10; }
+.lg-wire.active { stroke: #28f07a; filter: drop-shadow(0 0 6px rgba(40,240,122,0.6)); }
 .lg-wire.active:hover { stroke: #5dff9e; }
 .lg-wire.selected {
-  stroke: #ff5555 !important;
-  stroke-width: 8 !important;
-  stroke-dasharray: 8 8;
-  filter: drop-shadow(0 0 8px rgba(255,85,85,0.8)) !important;
-  animation: wireDash 1s linear infinite;
+  stroke: #ff5555 !important; stroke-width: 8 !important; stroke-dasharray: 8 8;
+  filter: drop-shadow(0 0 8px rgba(255,85,85,0.8)) !important; animation: wireDash 1s linear infinite;
 }
 @keyframes wireDash { to { stroke-dashoffset: -16; } }
-
-.lg-wire-temp {
-  stroke: rgba(255,255,255,0.4);
-  stroke-dasharray: 8 8;
-  pointer-events: none;
-}
+.lg-wire-temp { stroke: rgba(255,255,255,0.4); stroke-dasharray: 8 8; pointer-events: none; }
 
 /* Nodes */
 .lg-node {
-  position: absolute;
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  padding: 4px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: grab;
-  z-index: 10;
-  user-select: none;
-  transition: filter 0.2s;
+  position: absolute; background: transparent; border: none; border-radius: 0; padding: 4px;
+  display: flex; flex-direction: column; align-items: center; cursor: grab;
+  z-index: 10; user-select: none; transition: filter 0.2s;
+  pointer-events: auto; /* Re-enables interaction inside the viewport */
 }
 .lg-node:active { cursor: grabbing; z-index: 20; }
 .lg-node.selected { filter: drop-shadow(0 0 10px rgba(255,85,85,0.8)); }
 
 .lg-header {
-  font-size: 24px; 
-  color: var(--muted);
-  font-family: var(--bit-font); 
-  letter-spacing: 2px;
-  pointer-events: none;
-  margin-bottom: 6px;
+  font-size: 24px; color: var(--muted); font-family: var(--bit-font); 
+  letter-spacing: 2px; pointer-events: none; margin-bottom: 6px;
 }
 
-.lg-gate-container {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
+.lg-gate-container { position: relative; display: inline-flex; align-items: center; }
 .lg-gate-svg { width: 100px; height: 50px; display: block; }
 .lg-line-svg { width: 30px; height: 50px; display: block; }
 
@@ -163,18 +111,14 @@ body:has(#logicPage) .pageWrap {
 .lg-port {
   width: 16px; height: 16px; background: #a9acb8; border-radius: 50%; cursor: crosshair;
   border: 3px solid var(--bg); box-shadow: 0 0 0 1px rgba(255,255,255,0.2); transition: all 0.2s;
-  position: absolute; z-index: 5;
-  transform: translate(-50%, -50%); 
+  position: absolute; z-index: 5; transform: translate(-50%, -50%); 
 }
 .lg-port:hover { transform: translate(-50%, -50%) scale(1.3); background: #fff; }
 .lg-port.active { background: #28f07a; box-shadow: 0 0 12px rgba(40,240,122,0.8); border-color: #1f2027; }
 
 /* === FLOATING TOOLBOX === */
 .toolboxToggle {
-  position: absolute;
-  top: 10px; /* Snug inside the thinner header */
-  right: 20px;
-  z-index: 90;
+  position: absolute; top: 10px; right: 20px; z-index: 90;
   display: flex; align-items: center; gap: 10px; padding: 8px 14px;
   border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.15);
   backdrop-filter: blur(8px); color: rgba(232,232,238,.95); font-family: var(--bit-font);
@@ -184,53 +128,29 @@ body:has(#logicPage) .pageWrap {
 .toolboxToggle:hover { border-color: rgba(255,255,255,.22); }
 
 .lg-toolbox {
-  position: absolute;
-  top: 60px; /* Sits right under the new thin header */
-  right: 20px;
-  bottom: 20px; /* Constrains the height so it scrolls internally */
-  width: var(--toolbox-w, 360px);
-  z-index: 80;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  transform: translateX(0);
+  position: absolute; top: 60px; right: 20px; bottom: 20px; width: var(--toolbox-w, 360px);
+  z-index: 80; display: flex; flex-direction: column; gap: 16px; transform: translateX(0);
   transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
-  overflow-y: auto;
-  pointer-events: auto;
-  padding-right: 6px; 
+  overflow-y: auto; pointer-events: auto; padding-right: 6px; 
 }
-
-/* Faded Subdued Scrollbars */
 .lg-toolbox::-webkit-scrollbar { width: 6px; }
 .lg-toolbox::-webkit-scrollbar-track { background: transparent; }
 .lg-toolbox::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.05); border-radius: 10px; transition: background 0.3s; }
 .lg-toolbox:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }
-.lg-toolbox::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
+.lg-container.toolboxCollapsed .lg-toolbox { transform: translateX(calc(100% + 40px)); opacity: 0; pointer-events: none; }
 
-.lg-container.toolboxCollapsed .lg-toolbox {
-  transform: translateX(calc(100% + 40px));
-  opacity: 0;
-  pointer-events: none;
-}
-
-/* Toolbox Grid */
-.tb-icon-grid {
-  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
-}
+.tb-icon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
 .tb-icon-box {
-  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.15);
-  border-radius: 12px; width: 100%; padding: 12px 0;
+  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; width: 100%; padding: 12px 0;
   display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
   cursor: grab; transition: background 0.2s, border-color 0.2s;
 }
 .tb-icon-box:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); }
 .tb-icon-label { font-family: var(--ui-font); font-size: 11px; font-weight: 800; color: var(--text); letter-spacing: 1px; text-transform: uppercase; }
 
-/* Truth Table */
 .tt-summary {
-  font-family: var(--ui-font); font-size: 14px; font-weight: 800;
-  color: var(--accent, #28f07a); cursor: pointer; user-select: none;
-  outline: none; margin-bottom: 10px; text-transform: uppercase;
+  font-family: var(--ui-font); font-size: 14px; font-weight: 800; color: var(--accent, #28f07a);
+  cursor: pointer; user-select: none; outline: none; margin-bottom: 10px; text-transform: uppercase;
 }
 .tt-table-wrap {
   width: 100%; max-height: 250px; overflow-y: auto; overflow-x: auto;
@@ -239,8 +159,6 @@ body:has(#logicPage) .pageWrap {
 .tt-table-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
 .tt-table-wrap::-webkit-scrollbar-track { background: transparent; }
 .tt-table-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
-.tt-table-wrap:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); }
-
 .tt-table { width: 100%; border-collapse: collapse; text-align: center; font-family: var(--num-font); font-size: 14px; color: #e8e8ee; }
 .tt-table th { position: sticky; top: 0; background: rgba(31,32,39,0.95); padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.15); color: var(--muted); font-family: var(--bit-font); font-weight: normal; }
 .tt-table td { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); }