feat(v2-alpha): add collapsible toolbox and refine binary simulator layout

- Introduce collapsible right-hand toolbox for the binary simulator
- Pin toolbox to the right edge with responsive fallback on smaller screens
- Rework tools and bit-width controls into a shared side layout
- Adjust control sizing, spacing, and visual hierarchy for clarity

Notes:
- Toolbox collapse is functional but requires refinement
- Tools and Bit Width should be merged into a single module/card
- Collapsed state does not yet fully hide the panel or re-centre content

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

src/pages/binary.astro

@@ -59,38 +59,35 @@ import binaryScriptUrl from "../scripts/binary.js?url";
         </div>
 
         <!-- RIGHT -->
-        <aside class="panelCol">
+      <aside class="panelCol" id="sidePanel">
-          <div class="card">
+        <button class="panelToggle" id="btnPanelToggle" type="button" aria-label="Toggle side panel">❯</button>
-            <div class="cardTitle">Mode</div>
 
-            <div class="toggleRow">
+        <div class="card">
-              <div class="toggleLabel" id="lblUnsigned">Unsigned</div>
+          <div class="cardTitle">Mode</div>
-
+          <div class="toggleRow">
-              <label class="switch" aria-label="Toggle mode">
+            <div class="toggleLabel" id="lblUnsigned">Unsigned</div>
-                <input id="modeToggle" type="checkbox" />
+            <label class="switch" aria-label="Toggle mode">
-                <span class="slider"></span>
+              <input id="modeToggle" type="checkbox" />
-              </label>
+              <span class="slider"></span>
-
+            </label>
-              <div class="toggleLabel" id="lblTwos">Two&rsquo;s complement</div>
+            <div class="toggleLabel" id="lblTwos">Two&rsquo;s complement</div>
-            </div>
-
-            <div class="hint" id="modeHint">
-              Tip: In unsigned binary, all bits represent positive values.
-            </div>
           </div>
+          <div class="hint" id="modeHint">Tip: In unsigned binary, all bits represent positive values.</div>
+        </div>
 
-          <!-- Tools: arrows on one row, Reset+Random on one row -->
+        <!-- Tools + Bit Width on the same row -->
+        <div class="sideRow">
           <div class="card">
             <div class="cardTitle">Tools</div>
 
             <div class="toolRow">
-              <button class="toolBtn toolSpin" id="btnDec" type="button" aria-label="Decrement">▼</button>
+              <button class="toolBtn toolQuarter toolDown" id="btnDec" type="button" aria-label="Decrement">▼</button>
-              <button class="toolBtn toolSpin" id="btnInc" type="button" aria-label="Increment">▲</button>
+              <button class="toolBtn toolQuarter toolUp" id="btnInc" type="button" aria-label="Increment">▲</button>
             </div>
 
-            <div class="toolRow2">
+            <div class="toolRow2" style="margin-top:10px;">
-              <button class="toolBtn" id="btnClear" type="button">Reset</button>
+              <button class="toolBtn toolHalf" id="btnClear" type="button">Reset</button>
-              <button class="toolBtn" id="btnRandom" type="button">Random</button>
+              <button class="toolBtn toolHalf" id="btnRandom" type="button">Random</button>
             </div>
 
             <div class="hint">Random runs briefly then stops automatically.</div>
@@ -98,31 +95,22 @@ import binaryScriptUrl from "../scripts/binary.js?url";
 
           <div class="card">
             <div class="cardTitle">Bit width</div>
-
             <div class="bitWidthRow">
               <button class="miniBtn" id="btnBitsDown" type="button" aria-label="Decrease bits">−</button>
 
               <div class="bitInputWrap">
                 <div class="bitInputLabel">Bits</div>
-                <input
+                <input id="bitsInput" class="bitInput" type="number" inputmode="numeric"
-                  id="bitsInput"
+                      min="1" max="64" step="1" value="8" aria-label="Number of bits" />
-                  class="bitInput"
-                  type="number"
-                  inputmode="numeric"
-                  min="1"
-                  max="64"
-                  step="1"
-                  value="8"
-                  aria-label="Number of bits"
-                />
               </div>
 
               <button class="miniBtn" id="btnBitsUp" type="button" aria-label="Increase bits">+</button>
             </div>
-
             <div class="hint">Minimum 1 bit, maximum 64 bits.</div>
           </div>
-        </aside>
+        </div>
+      </aside>
+
       </section>
     </main>
 

src/scripts/binary.js

@@ -464,6 +464,17 @@
   /* -----------------------------
      EVENTS
   ----------------------------- */
+
+    // Collapsible right panel
+  const sidePanel = document.getElementById("sidePanel");
+  const btnPanelToggle = document.getElementById("btnPanelToggle");
+
+  btnPanelToggle?.addEventListener("click", () => {
+    sidePanel?.classList.toggle("isCollapsed");
+    // flip the chevron
+    btnPanelToggle.textContent = sidePanel?.classList.contains("isCollapsed") ? "❮" : "❯";
+  });
+
   modeToggle?.addEventListener("change", () => {
     updateUI();
   });
@@ -506,3 +517,4 @@
   updateModeHint();
   buildBits(bitCount);
 })();
+

src/styles/binary.css

@@ -7,13 +7,14 @@
   --accent-dim: rgba(51,255,122,.15);
   --line: rgba(255,255,255,.12);
 
-  --danger: #e24444;
+  /* right column sizing */
-  --danger-dim: rgba(226,68,68,.22);
+  --sideW: 720px;
-  --success: #2fd66b;
+  --sidePad: 24px;
-  --success-dim: rgba(47,214,107,.22);
+
+  /* header offset (tweak if your header is taller/shorter) */
+  --sideTop: 92px;
 }
 
-/* -------- Fonts -------- */
 @font-face{
   font-family: "DSEG7ClassicRegular";
   src:
@@ -41,15 +42,17 @@ body{
   color: var(--text);
 }
 
+/* Leave enough room for the fixed right panel */
 .wrap{
   max-width: 1200px;
   margin: 0 auto;
   padding: 32px 20px 60px;
+  padding-right: calc(var(--sideW) + (var(--sidePad) * 2));
 }
 
 .topGrid{
   display:grid;
-  grid-template-columns: 1fr 340px;
+  grid-template-columns: 1fr;
   gap: 28px;
   align-items:start;
 }
@@ -68,7 +71,6 @@ body{
   margin-top: 10px;
 }
 
-/* Anything that is a number uses DSEG7 */
 .num{
   font-family: "DSEG7ClassicRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   font-weight: 400;
@@ -76,18 +78,20 @@ body{
   text-shadow: 0 0 18px var(--accent-dim);
 }
 
+/* 25% smaller */
 .denaryValue{
-  font-size: 70px;
+  font-size: 53px;
   line-height: 1.0;
   margin: 6px 0 10px;
 }
 
+/* 25% smaller + slightly wider spacing */
 .binaryValue{
-  font-size: 52px;
+  font-size: 39px;
-  letter-spacing: .12em;
+  letter-spacing: calc(.12em + 2px);
   line-height: 1.0;
   margin: 6px 0 14px;
-  white-space: pre;
+  white-space: pre; /* preserve spaces */
 }
 
 .controlsStack{
@@ -128,12 +132,45 @@ body{
   border-top: 1px solid var(--line);
 }
 
+/* -------------------------
+   RIGHT COLUMN: pinned + collapsible
+------------------------- */
 .panelCol{
+  position: fixed;
+  right: var(--sidePad);
+  top: var(--sideTop);
+  width: var(--sideW);
   display:flex;
   flex-direction:column;
   gap: 14px;
+  z-index: 50;
+  transition: transform .2s ease;
 }
 
+/* collapse leaves a small handle visible */
+.panelCol.isCollapsed{
+  transform: translateX(calc(100% - 52px));
+}
+
+.panelToggle{
+  position: absolute;
+  left: -52px;
+  top: 0;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  border: 1px solid rgba(255,255,255,.14);
+  background: rgba(255,255,255,.06);
+  color: #fff;
+  cursor: pointer;
+  font-weight: 900;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  font-family: "SevenSegment", system-ui, sans-serif;
+}
+
+/* cards */
 .card{
   background: var(--panel2);
   border: 1px solid rgba(255,255,255,.10);
@@ -168,10 +205,9 @@ body{
   color: var(--text);
   font-weight: 700;
   font-size: 14px;
-  font-family: "SevenSegment", system-ui, sans-serif;
 }
 
-/* Switch */
+/* Shared toggle switch */
 .switch{
   position: relative;
   width: 56px;
@@ -212,19 +248,23 @@ body{
   background: var(--accent);
 }
 
-/* Tools layout */
+/* Tools + Bit Width side-by-side */
-.toolRow{
+.sideRow{
-  display:grid;
+  display:flex;
-  grid-template-columns: 1fr 1fr;
+  gap: 14px;
-  gap: 10px;
-  margin-bottom: 10px;
 }
-.toolRow2{
+.sideRow .card{
-  display:grid;
+  flex: 1 1 0;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
 }
 
+/* Tools layout: arrows row + reset/random row */
+.toolRow, .toolRow2{
+  display:flex;
+  gap: 10px;
+  align-items:center;
+}
+
+/* Reset/Random = 50% current width (explicit) */
 .toolBtn{
   height: 48px;
   border-radius: 12px;
@@ -236,23 +276,26 @@ body{
   font-family: "SevenSegment", system-ui, sans-serif;
 }
 
-/* Narrower arrow buttons (only the arrow pair) */
+/* Reset/Random smaller */
-.toolSpin{
+.toolBtn.toolHalf{
+  width: 120px;
+}
+
+/* Arrows half of that */
+.toolBtn.toolQuarter{
+  width: 60px;
   font-size: 22px;
-  height: 48px;
-  max-width: 120px;      /* narrower */
-  justify-self: start;
   padding: 0;
 }
 
-/* Down = red, Up = green */
+/* colour arrows */
-#btnDec{
+.toolBtn.toolUp{
-  background: var(--danger-dim);
+  background: rgba(51,255,122,.18);
-  border-color: rgba(226,68,68,.45);
+  border-color: rgba(51,255,122,.45);
 }
-#btnInc{
+.toolBtn.toolDown{
-  background: var(--success-dim);
+  background: rgba(255,80,80,.18);
-  border-color: rgba(47,214,107,.45);
+  border-color: rgba(255,80,80,.45);
 }
 
 /* Bit width control */
@@ -291,7 +334,6 @@ body{
   font-weight:800;
   letter-spacing:.18em;
   text-transform:uppercase;
-  font-family: "SevenSegment", system-ui, sans-serif;
 }
 .bitInput{
   width:86px;
@@ -333,38 +375,22 @@ body{
   text-align:center;
 }
 
-/* Bulb (emoji only — no circle, no ::before so it won't duplicate) */
+/* Bulb: no circle here (JS controls the emoji), but keep sizing if used */
 .bulb{
-  width: auto;
-  height: auto;
   border: none;
   background: transparent;
+  width: auto;
+  height: auto;
   border-radius: 0;
   box-shadow: none;
-
   display:flex;
   align-items:center;
   justify-content:center;
-
-  font-size: 26px;
   line-height: 1;
-  opacity: .45;
+  opacity: .55;
-  filter: grayscale(1);
+  font-size: 33px; /* 25% larger from 26px */
-  text-shadow: none;
 }
 
-/* IMPORTANT: remove the pseudo-element that was causing the 2nd bulb */
-.bulb::before{
-  content: none;
-}
-
-.bulb.on{
-  opacity: 1;
-  filter: grayscale(0);
-  text-shadow: 0 0 14px rgba(255,216,107,.75), 0 0 26px rgba(255,216,107,.45);
-}
-
-/* Bit value numbers use DSEG7 */
 .bitVal{
   font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
   font-size: 28px;
@@ -374,13 +400,22 @@ body{
   min-height: 32px;
 }
 
+/* responsive: stop pinning on small screens */
 @media (max-width: 980px){
-  .topGrid{ grid-template-columns: 1fr; }
+  .panelCol{
-  .denaryValue{ font-size: 62px; }
+    position: static;
-  .binaryValue{ font-size: 46px; }
+    width: auto;
+    transform: none !important;
+  }
+  .panelToggle{ display:none; }
+  .wrap{
+    padding-right: 20px;
+  }
 }
 
 @media (max-width: 520px){
   .btn{ min-width: 150px; }
   .bitsGrid{ grid-template-columns: repeat(4, minmax(90px, 1fr)); }
+  .toolBtn.toolHalf{ width: 100px; }
+  .toolBtn.toolQuarter{ width: 52px; }
 }