From decd6532d7d008546415d4c334cea5d9d3022a9d Mon Sep 17 00:00:00 2001
From: benjamin-small <benjamin.small83@gmail.com>
Date: Wed, 23 Sep 2026 15:31:41 -0400
Subject: [PATCH] feat(web): move every lab's controls bar above the canvas

The playback/controls bar now sits at the top of the page in every lab,
on desktop and in the mobile stack, and precedes the canvas in DOM order
so tab order matches the visual order. Border moves from top to bottom
of the bar to keep the separator between bar and canvas.
---
 web/src/lib/components/LabShell.svelte        | 85 ++++++++++---------
 .../lib/components/__tests__/LabShell.test.ts |  8 ++
 2 files changed, 51 insertions(+), 42 deletions(-)

diff --git a/web/src/lib/components/LabShell.svelte b/web/src/lib/components/LabShell.svelte
index ea17bdd..597f7c5 100644
--- a/web/src/lib/components/LabShell.svelte
+++ b/web/src/lib/components/LabShell.svelte
@@ -9,7 +9,7 @@
     labId: LabId;
     /** Left-hand description panel (becomes a slide-in drawer under 768px). */
     info: Snippet;
-    /** Extra playback-bar controls, rendered between the iteration readout and the Speed slider. */
+    /** Extra controls-bar controls, rendered between the iteration readout and the Speed slider. */
     controls?: Snippet<[LabApi]>;
     /** Called once the engine is constructed and the frame loop is running. */
     onReady?: (api: LabApi) => void;
@@ -254,6 +254,40 @@
     {@render info()}
   </aside>
 
+  <div class="playback-bar">
+    {#if playback}
+      <button onclick={onReset} title="Reset to iteration 0">↺</button>
+      <button onclick={onStepBack} title="Step back">◀</button>
+      <button
+        onclick={onTogglePlay}
+        title={api.snapshot.playing ? 'Pause' : 'Play'}
+      >{api.snapshot.playing ? '⏸' : '▶'}</button>
+      <button onclick={onStepForward} title="Step forward">▶▶</button>
+
+      <span class="iteration">
+        {api.snapshot.iteration} / {api.snapshot.max_iterations}
+        <span class="sub">{api.snapshot.sub_progress.toFixed(2)}</span>
+      </span>
+    {/if}
+
+    {@render controls?.(api)}
+
+    {#if playback}
+      <label class="speed">
+        Speed
+        <input
+          type="range"
+          min="0.25"
+          max="360"
+          step="0.25"
+          value={api.snapshot.speed}
+          oninput={(e) => onSpeedInput(Number((e.target as HTMLInputElement).value))}
+        />
+        <span class="value">{api.snapshot.speed.toFixed(1)}</span>
+      </label>
+    {/if}
+  </div>
+
   <div class="canvas-wrap">
     <canvas
       id="viz-canvas-{labId}"
@@ -291,49 +325,16 @@
     {/if}
   </div>
 
-  <footer class="playback-bar">
-    {#if playback}
-      <button onclick={onReset} title="Reset to iteration 0">↺</button>
-      <button onclick={onStepBack} title="Step back">◀</button>
-      <button
-        onclick={onTogglePlay}
-        title={api.snapshot.playing ? 'Pause' : 'Play'}
-      >{api.snapshot.playing ? '⏸' : '▶'}</button>
-      <button onclick={onStepForward} title="Step forward">▶▶</button>
-
-      <span class="iteration">
-        {api.snapshot.iteration} / {api.snapshot.max_iterations}
-        <span class="sub">{api.snapshot.sub_progress.toFixed(2)}</span>
-      </span>
-    {/if}
-
-    {@render controls?.(api)}
-
-    {#if playback}
-      <label class="speed">
-        Speed
-        <input
-          type="range"
-          min="0.25"
-          max="360"
-          step="0.25"
-          value={api.snapshot.speed}
-          oninput={(e) => onSpeedInput(Number((e.target as HTMLInputElement).value))}
-        />
-        <span class="value">{api.snapshot.speed.toFixed(1)}</span>
-      </label>
-    {/if}
-  </footer>
 </div>
 
 <style>
   .layout {
     display: grid;
     grid-template-columns: 320px 1fr;
-    grid-template-rows: 1fr auto;
+    grid-template-rows: auto 1fr;
     grid-template-areas:
-      "info canvas"
-      "info bar";
+      "info bar"
+      "info canvas";
     height: 100%;     /* the app grid owns 100dvh; we fill our row */
     min-height: 0;
   }
@@ -465,7 +466,7 @@
   .playback-bar {
     grid-area: bar;
     background: var(--bar);
-    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
     padding: 0.5rem 1rem;
     display: flex;
     align-items: center;
@@ -508,14 +509,14 @@
 
   /* ===== Mobile ===== */
   @media (max-width: 768px) {
-    /* Canvas + playback bar fill the viewport. Info panel becomes a
+    /* Controls bar + canvas fill the viewport. Info panel becomes a
        slide-in drawer triggered by the info-toggle button. */
     .layout {
       grid-template-columns: 1fr;
-      grid-template-rows: 1fr auto;
+      grid-template-rows: auto 1fr;
       grid-template-areas:
-        "canvas"
-        "bar";
+        "bar"
+        "canvas";
     }
     .info {
       position: fixed;
diff --git a/web/src/lib/components/__tests__/LabShell.test.ts b/web/src/lib/components/__tests__/LabShell.test.ts
index 68eeb2b..7595d2d 100644
--- a/web/src/lib/components/__tests__/LabShell.test.ts
+++ b/web/src/lib/components/__tests__/LabShell.test.ts
@@ -91,6 +91,14 @@ describe('LabShell extension points', () => {
     ).toBeTruthy();
   });
 
+  it('renders the controls bar before the canvas, so tab order matches the top-of-page layout', async () => {
+    const { container } = render(LabShellHost);
+    await vi.waitFor(() => expect(container.querySelector('.playback-bar')).toBeTruthy());
+    const bar = container.querySelector('.playback-bar')!;
+    const wrap = container.querySelector('.canvas-wrap')!;
+    expect(bar.compareDocumentPosition(wrap) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
   it('omits the overlay div entirely when no overlay snippet is passed', async () => {
     const { container } = render(LabShellHost);
     await vi.waitFor(() => expect(container.querySelector('.canvas-wrap')).toBeTruthy());