From a49dc70e256f8acf0a22193b5e98648dc10e4332 Mon Sep 17 00:00:00 2001
From: Alireza Afshan <yesterdayslemon@yahoo.com>
Date: Wed, 2 Sep 2026 13:16:08 -0700
Subject: [PATCH 1/2] feat: redesign lab UX for direct manipulation

---
 index.html                         |  11 +-
 src/lab/cultureConsole.ts          |  35 ++++--
 src/lab/specimenLab.css            | 133 ++++++++++++++++++++
 src/lab/specimenLab.ts             |  19 ++-
 src/main.ts                        |   4 +-
 src/orchestrator/orchestrator.ts   |  18 ++-
 src/orchestrator/shoveCommands.ts  |   9 +-
 src/perf/fpsBand.ts                |   6 +-
 src/ui/inputBinding.ts             |   9 +-
 src/ui/inputState.ts               |  22 ++++
 src/ui/inputTracker.test.ts        |  48 ++++++-
 src/ui/inputTracker.ts             |  65 ++++++++++
 src/ui/menuBar.ts                  |   5 +-
 src/ui/menuHelp.ts                 |  22 ++--
 src/ui/mutationOverlay.test.ts     |   6 +-
 src/ui/mutationOverlay.ts          |  77 ++++++++++--
 src/ui/panel.ts                    |  77 ++++++------
 src/ui/panelModel.test.ts          |   8 +-
 src/ui/panelModel.ts               |  37 ++----
 src/ui/sections/projectSection.ts  |   6 +-
 src/ui/sections/settingsSection.ts |  41 +++---
 src/ui/splash.ts                   | 116 ++++++++---------
 src/ui/workspaceDrawer.ts          |  22 ++++
 tools/browserCheck.mjs             |  29 ++++-
 tools/uiCheck.mjs                  | 196 +++++++++++++++++++++++++----
 25 files changed, 768 insertions(+), 253 deletions(-)
 create mode 100644 src/ui/workspaceDrawer.ts

diff --git a/index.html b/index.html
index 51cca8a..7d2f109 100644
--- a/index.html
+++ b/index.html
@@ -104,9 +104,9 @@
     <style>
       :root {
         color-scheme: light;
-        --lab-stage-reserve: 236px;
-        --lab-dish-radius: min(43vh, calc(43vw - 101.5px));
-        --lab-dish-diameter: min(86vh, calc(86vw - 203px));
+        --lab-stage-reserve: 0px;
+        --lab-dish-radius: 43vmin;
+        --lab-dish-diameter: 86vmin;
       }
 
       html, body {
@@ -153,8 +153,13 @@
         background: #020405;
         clip-path: circle(var(--lab-dish-radius) at 50% 50%);
         touch-action: none;
+        cursor: grab;
       }
 
+      #app:active { cursor: grabbing; }
+      #app[data-tool='draw'],
+      #app[data-tool='shove'] { cursor: crosshair; }
+
       #gpu-error {
         position: fixed;
         inset: 0;
diff --git a/src/lab/cultureConsole.ts b/src/lab/cultureConsole.ts
index 772b713..7ad42c8 100644
--- a/src/lab/cultureConsole.ts
+++ b/src/lab/cultureConsole.ts
@@ -7,14 +7,18 @@
  */
 
 import { ROTATION_STEP, type CameraState } from '../camera/cameraState.ts';
+import {
+  announceWorkspaceDrawer,
+  closeWhenWorkspaceDrawerChanges,
+} from '../ui/workspaceDrawer.ts';
 
 const MENU_LABELS: Readonly<Record<string, string>> = Object.freeze({
-  File: 'Culture',
-  Share: 'Export',
-  History: 'Record',
-  Editor: 'View',
+  File: 'Project',
+  Share: 'Share',
+  History: 'History',
+  Editor: 'Settings',
   Simulation: 'Run',
-  Help: 'Manual',
+  Help: 'Help',
 });
 
 function block(label: string, index: string, className: string): HTMLDivElement {
@@ -74,7 +78,9 @@ function arrangeMutationControls(mutation: HTMLElement): void {
   const mode = block('Manipulation mode', '02.D', 'culture-control-block culture-mode');
   const modeBody = document.createElement('div');
   modeBody.className = 'culture-mode-body';
-  modeBody.append(tool, panels);
+  modeBody.append(tool);
+  panels.id = 'fluoddity-settings-launcher';
+  document.body.append(panels);
   mode.append(modeBody);
 
   bar.replaceChildren(population, variation, actions, mode);
@@ -162,8 +168,9 @@ export function installCultureConsole(mobile: boolean, camera: CameraState): voi
       '<button class="culture-console-mark culture-console-toggle" type="button" ' +
         'aria-label="Collapse culture controls" aria-expanded="true">' +
         '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">' +
-          '<path class="gear-teeth" d="M12 1.5v3M12 19.5v3M1.5 12h3M19.5 12h3M4.58 4.58 6.7 6.7M17.3 17.3l2.12 2.12M19.42 4.58 17.3 6.7M6.7 17.3l-2.12 2.12"></path>' +
-          '<circle cx="12" cy="12" r="6.65"></circle><circle cx="12" cy="12" r="2.35"></circle>' +
+          '<circle cx="12" cy="12" r="8.5"></circle>' +
+          '<ellipse cx="12" cy="12" rx="6" ry="2.7"></ellipse>' +
+          '<path d="M6.6 12v2.5c0 1.5 2.4 2.8 5.4 2.8s5.4-1.3 5.4-2.8V12"></path>' +
         '</svg>' +
       '</button>' +
       '<span><small>PROCEDURE CONTROL / NODE 01</small><strong>Culture operations</strong></span>' +
@@ -225,12 +232,14 @@ export function installCultureConsole(mobile: boolean, camera: CameraState): voi
     );
   };
   collapse?.addEventListener('click', () => {
-    setCollapsed(!rack.classList.contains('is-collapsed'));
+    const collapsed = !rack.classList.contains('is-collapsed');
+    setCollapsed(collapsed);
+    if (!collapsed) announceWorkspaceDrawer('culture');
   });
-  // A full rack fits beside the 86% vessel at ordinary desktop widths. Below
-  // that, open on the reticle tab so the culture remains observable; the tab is
-  // still one click away and expands to the exact same control surface.
-  setCollapsed(mobile || window.matchMedia('(max-width: 1120px)').matches);
+  // Keep the culture observable on every viewport; its launcher is always one
+  // click away and expands to the same control surface.
+  setCollapsed(true);
+  closeWhenWorkspaceDrawerChanges('culture', () => setCollapsed(true));
 
   for (const button of menu.querySelectorAll<HTMLButtonElement>(':scope > div > button')) {
     const original = button.textContent?.trim() ?? '';
diff --git a/src/lab/specimenLab.css b/src/lab/specimenLab.css
index b006fe6..c9212d9 100644
--- a/src/lab/specimenLab.css
+++ b/src/lab/specimenLab.css
@@ -1086,3 +1086,136 @@ html.fluoddity-console .dish-state { left:32px; }
   .lab-toast { transition:none; }
   .lab-live-status span.just-bred { animation:none; }
 }
+
+/* -------------------------------------------------------------------------
+   2026 interaction pass: canvas-first drawers and readable controls
+   ------------------------------------------------------------------------- */
+
+body { font-family: system-ui,-apple-system,"Segoe UI",sans-serif; }
+
+#fluoddity-specimen-lab:not(.is-collapsed) { width:420px; }
+.lab-body { overflow-y:auto;overscroll-behavior:contain; }
+.lab-heading small,.specimen-dialog-head small { font-size:10px; }
+.lab-heading strong { font-size:17px; }
+.lab-count { padding:6px 9px;font-size:11px; }
+.lab-flow span { font-size:9px; }
+.lab-live-status strong { font-size:16px; }
+.lab-live-status span { font-size:10px; }
+.lab-instruction { min-height:0;font-size:13px;line-height:1.5; }
+.lab-capture,.lab-seed,.specimen-dialog-save {
+  min-height:40px;padding:10px 14px;font-size:11px;
+}
+.lab-arena-copy strong { font-size:13px; }
+.lab-arena-copy span { font-size:11px;line-height:1.45; }
+.lab-variation { font-size:11px; }
+.lab-variation output { font-size:11px; }
+.lab-variation input { height:24px;margin:0; }
+.lab-shelf-label { font-size:10px; }
+.specimen-jar-image { height:92px; }
+.specimen-jar-image small { font-size:9px; }
+.specimen-jar-copy { padding:10px;gap:5px; }
+.specimen-jar-copy strong { font-size:13px; }
+.specimen-jar-copy > span { font-size:11px;line-height:1.4; }
+.specimen-jar-copy code { font-size:9px; }
+.specimen-jar-actions { min-height:38px;padding:5px 8px; }
+.specimen-jar-actions time { font-size:9px; }
+.specimen-edit,.specimen-remove { min-width:32px;min-height:30px;font-size:11px; }
+.specimen-remove { font-size:17px; }
+
+#fluoddity-control-rack:not(.is-collapsed) { width:340px;overflow:hidden; }
+.culture-console-head small,.culture-console-state,.culture-console-label { font-size:9px; }
+.culture-console-head strong { font-size:17px; }
+.culture-console-label { padding:9px 11px 7px; }
+.culture-console-host { padding:0 10px 10px; }
+#fluoddity-control-rack #fluoddity-menubar { grid-template-columns:repeat(3,minmax(0,1fr)); }
+#fluoddity-control-rack #fluoddity-menubar [data-menu] {
+  min-height:38px;padding:8px 9px !important;font-size:11px !important;letter-spacing:.03em !important;
+}
+#fluoddity-control-rack #fluoddity-menubar > div:nth-child(even) [data-menu] { border-right:0 !important; }
+#fluoddity-control-rack #fluoddity-menubar > div:nth-child(3n) [data-menu] { border-right:1px solid #c8cdcb !important; }
+#fluoddity-control-rack #fluoddity-menubar > div:nth-last-child(-n+3) [data-menu] { border-bottom:1px solid #c8cdcb !important; }
+.culture-control-block > .culture-console-label { padding:9px 1px 7px; }
+.culture-population-body button { height:36px !important; }
+.culture-variation-head span:first-child,.culture-variation-head span:last-child { font-size:11px !important; }
+.culture-action-body button { min-height:38px !important;font-size:12px !important; }
+.culture-mode-body select,.culture-mode-body button { height:40px !important;font-size:12px !important; }
+.culture-mode-body { grid-template-columns:1fr; }
+.culture-context { font-size:11px !important;line-height:1.5 !important; }
+.culture-context button { min-height:38px !important; }
+.culture-orientation-controls button { height:34px;font-size:9px; }
+.culture-orientation-controls output { font-size:10px; }
+#fluoddity-control-rack #fluoddity-fps { min-height:36px;font-size:11px !important; }
+#fluoddity-control-rack #fluoddity-physics > button { width:38px !important;height:38px !important; }
+#fluoddity-control-rack > footer,.lab-attribution { font-size:9px; }
+
+#fluoddity-settings-launcher {
+  position:fixed;z-index:35;top:16px;right:84px;display:grid !important;width:56px;height:56px !important;
+  box-sizing:border-box;place-items:center;padding:0;color:var(--lab-accent) !important;
+  border:1px solid #8f9996 !important;border-radius:3px !important;background:#f5f7f6 !important;
+  box-shadow:0 7px 18px rgba(31,38,39,.12),inset 0 1px #fff;cursor:pointer;
+}
+#fluoddity-settings-launcher:hover,#fluoddity-settings-launcher:focus-visible {
+  border-color:#657b84 !important;outline:none;background:#fff !important;
+}
+#fluoddity-settings-launcher > span { display:none; }
+
+html.fluoddity-console:not(.fluoddity-touch) #fluoddity-panel-right {
+  top:16px !important;right:152px !important;max-height:calc(100vh - 32px) !important;
+}
+#fluoddity-panel-right { font-size:13px; }
+#fluoddity-panel-right .tp-dfwv { font-size:13px; }
+#fluoddity-panel-right .tp-lblv_l { font-size:12px !important;line-height:1.35 !important; }
+#fluoddity-panel-right button,
+#fluoddity-panel-right input,
+#fluoddity-panel-right select { min-height:34px;font-size:12px !important; }
+
+@media (max-width:900px) {
+  #fluoddity-specimen-lab:not(.is-collapsed) {
+    top:8px;right:8px;bottom:calc(var(--fluoddity-bar-height,72px) + 8px);left:8px;
+    z-index:36;width:auto;max-height:none;
+  }
+  #fluoddity-specimen-lab.is-collapsed { top:8px;right:8px;bottom:auto;left:auto; }
+  #fluoddity-specimen-lab:not(.is-collapsed) .lab-body { display:flex;overflow-y:auto; }
+  .lab-flow { flex:none; }
+  .lab-mark,.culture-console-mark,
+  #fluoddity-specimen-lab.is-collapsed .lab-mark,
+  #fluoddity-control-rack.is-collapsed .culture-console-mark { width:44px;height:44px; }
+  .lab-live { flex:none; }
+  .lab-capture { min-height:44px; }
+  .lab-variation input { height:44px; }
+  .lab-shelf-label { order:3;flex:none; }
+  .lab-shelf {
+    display:grid;order:4;flex:none;grid-template-columns:1fr;overflow:visible;padding-bottom:10px;
+  }
+  .specimen-jar { width:auto;min-height:0; }
+  .specimen-jar-image { height:108px; }
+  .specimen-jar-actions { min-height:44px; }
+  .specimen-edit,.specimen-remove { min-width:44px;min-height:44px; }
+  .lab-arena {
+    position:sticky;bottom:0;z-index:4;order:5;flex:none;padding:12px 14px;
+    box-shadow:0 -8px 20px rgba(31,38,39,.12);
+  }
+  .lab-seed { min-width:112px;min-height:44px; }
+  .lab-attribution { display:none; }
+  .specimen-dialog-close { width:44px;height:44px; }
+  .specimen-dialog input,
+  .specimen-dialog button { min-height:44px; }
+  .specimen-dialog label { font-size:12px; }
+
+  #fluoddity-control-rack.is-mobile:not(.is-collapsed) {
+    top:8px;right:8px;bottom:calc(var(--fluoddity-bar-height,72px) + 8px);left:8px;
+    z-index:36;width:auto;max-height:none;overflow-y:auto;
+  }
+  #fluoddity-control-rack.is-mobile.is-collapsed { top:8px;bottom:auto;left:8px; }
+  #fluoddity-control-rack > footer { display:none; }
+
+  #fluoddity-panel-right .tp-lblv_l { font-size:13px !important; }
+  #fluoddity-panel-right button,
+  #fluoddity-panel-right input,
+  #fluoddity-panel-right select { min-height:44px;font-size:14px !important; }
+}
+
+@media (max-width:900px) and (max-height:520px) {
+  .lab-arena { position:static; }
+  .lab-shelf { grid-template-columns:repeat(2,minmax(0,1fr)); }
+}
diff --git a/src/lab/specimenLab.ts b/src/lab/specimenLab.ts
index 798b65b..c9a9a39 100644
--- a/src/lab/specimenLab.ts
+++ b/src/lab/specimenLab.ts
@@ -1,5 +1,9 @@
 import type { CommandBus, Status } from '../orchestrator/commands.ts';
 import type { CameraState } from '../camera/cameraState.ts';
+import {
+  announceWorkspaceDrawer,
+  closeWhenWorkspaceDrawerChanges,
+} from '../ui/workspaceDrawer.ts';
 import { worldToScreenNdc } from '../particleSystem/coords.ts';
 import { captureRegion, imageToCanvas } from '../ui/shareCapture.ts';
 import {
@@ -20,7 +24,6 @@ export interface SpecimenLabOptions {
   readonly canvas: HTMLCanvasElement;
   readonly camera: () => CameraState;
   readonly canvasSize: () => readonly [number, number];
-  readonly mobile?: boolean;
 }
 
 function button(label: string, className: string): HTMLButtonElement {
@@ -145,7 +148,7 @@ export class SpecimenLab {
       '<span class="dish-scale">Ø 0.86 · SEALED FIELD</span>';
     document.body.append(this.dish);
 
-    const startsCollapsed = opts.mobile === true;
+    const startsCollapsed = true;
     this.root = document.createElement('aside');
     this.root.id = 'fluoddity-specimen-lab';
     this.root.classList.toggle('is-collapsed', startsCollapsed);
@@ -167,12 +170,20 @@ export class SpecimenLab {
     this.shelfCount.className = 'lab-count';
     const collapse = heading.querySelector<HTMLButtonElement>('.lab-toggle')!;
     collapse.title = startsCollapsed ? 'Open specimen shelf' : 'Collapse specimen shelf';
+    collapse.setAttribute('aria-label', collapse.title);
     collapse.setAttribute('aria-expanded', String(!startsCollapsed));
     collapse.addEventListener('click', () => {
       const collapsed = this.root.classList.toggle('is-collapsed');
       collapse.title = collapsed ? 'Open specimen shelf' : 'Collapse specimen shelf';
       collapse.setAttribute('aria-label', collapse.title);
       collapse.setAttribute('aria-expanded', String(!collapsed));
+      if (!collapsed) announceWorkspaceDrawer('specimens');
+    });
+    closeWhenWorkspaceDrawerChanges('specimens', () => {
+      this.root.classList.add('is-collapsed');
+      collapse.title = 'Open specimen shelf';
+      collapse.setAttribute('aria-label', collapse.title);
+      collapse.setAttribute('aria-expanded', 'false');
     });
     header.append(heading, this.shelfCount);
 
@@ -201,7 +212,7 @@ export class SpecimenLab {
     this.project = document.createElement('strong');
     this.generation = document.createElement('span');
     status.append(this.project, this.generation);
-    this.captureButton = button('Capture specimen', 'lab-capture');
+    this.captureButton = button('Archive lineage', 'lab-capture');
     this.captureButton.addEventListener('click', () => void this.openCapture());
     liveTop.append(status, this.captureButton);
     this.instruction = document.createElement('p');
@@ -374,7 +385,7 @@ export class SpecimenLab {
     this.captureButton.textContent = 'Capturing…';
     const thumbnail = await captureThumbnail(this.canvas);
     this.captureButton.disabled = false;
-    this.captureButton.textContent = 'Capture specimen';
+    this.captureButton.textContent = 'Archive lineage';
     this.pendingSource = {
       ...snapshot,
       ...(thumbnail === undefined ? {} : { thumbnail }),
diff --git a/src/main.ts b/src/main.ts
index 2572618..18ce396 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -623,7 +623,6 @@ async function start(): Promise<void> {
       : new SpecimenLab({
           bus: orchestrator,
           canvas,
-          mobile,
           camera: () => orchestrator.cameraState,
           canvasSize: () => orchestrator.canvasDimensions,
         });
@@ -1033,6 +1032,9 @@ async function start(): Promise<void> {
     // that readout print this frame's `Status` instead -- a silent wrong answer
     // in the one surface that exists for diagnosing wrong answers.
     const frameStatus = orchestrator.status();
+    if (canvas.dataset['tool'] !== frameStatus.mouseMode) {
+      canvas.dataset['tool'] = frameStatus.mouseMode;
+    }
     const recording = recorder !== null;
 
     if (!recording && !frameStatus.paused) {
diff --git a/src/orchestrator/orchestrator.ts b/src/orchestrator/orchestrator.ts
index d98a7a4..d252444 100644
--- a/src/orchestrator/orchestrator.ts
+++ b/src/orchestrator/orchestrator.ts
@@ -1141,9 +1141,8 @@ export class Orchestrator implements CommandBus {
    * and they must not both fire -- without a tool, every click would select a
    * particle on the way down and paint on the way across.
    *
-   * NAVIGATION IS NOT A TOOL. WASD, Q/E and the scroll wheel move the view in
-   * every mode, so the mouse is free for tools and the view can be adjusted
-   * mid-stroke.
+   * NAVIGATION IS NOT A TOOL. Observe uses primary-drag to pan; middle-drag,
+   * WASD, Q/E and the scroll wheel work in every mode.
    */
   private applyCanvasInput(state: InputState): void {
     const canvasSize = this.system.canvasSize;
@@ -1151,12 +1150,18 @@ export class Orchestrator implements CommandBus {
 
     this.applyCameraKeys(state, canvasSize);
 
+    const pointerPans =
+      state.middlePanning || (this.mouseMode === 'select' && state.primaryPanning);
+    if (pointerPans && (state.panDelta[0] !== 0 || state.panDelta[1] !== 0)) {
+      this.camera.state.panByPixels(state.panDelta, windowSize, canvasSize);
+    }
+
     if (this.mouseMode === 'select') {
       // ONE CLICK, ONE PICK, unconditionally. What the pick MEANS -- aim,
       // re-aim, or commit -- is decided when the result lands, not here: the
       // cohort it hit is not known yet, and the whole two-stage rule is a
       // question about that cohort. See `frame()`.
-      if (state.leftPressed) this.selection.select(state.mousePos);
+      if (state.leftClicked) this.selection.select(state.mousePos);
       // Right-click CANCELS AN AIM FIRST, and undoes only when there is no aim
       // to cancel. Right-click is "back out of what I just did", and while a
       // cohort is lit the thing the user just did is light it -- undoing a
@@ -1193,7 +1198,10 @@ export class Orchestrator implements CommandBus {
       // above the one `frame()` opens -- deliberately, because that is what
       // makes a stroke land once per rendered frame instead of once per physics
       // sub-step. `frame()` consumes what this records.
-      const step = strokeFor(state, this.strokePrevUv, (p) => this.mouseFieldUv(p));
+      const drawState = state.middleDragging || state.middlePanning
+        ? { ...state, leftPressed: false, leftDragging: false, rightDragging: false }
+        : state;
+      const step = strokeFor(drawState, this.strokePrevUv, (p) => this.mouseFieldUv(p));
       this.pendingStroke = step.stroke;
       this.strokePrevUv = step.prevUv;
     }
diff --git a/src/orchestrator/shoveCommands.ts b/src/orchestrator/shoveCommands.ts
index c971581..05b42da 100644
--- a/src/orchestrator/shoveCommands.ts
+++ b/src/orchestrator/shoveCommands.ts
@@ -100,7 +100,14 @@ export interface ShoveContext {
  * the pause.
  */
 export function shoveState(state: InputState, ctx: ShoveContext): ShoveState | null {
-  if (ctx.paused || ctx.mouseMode !== 'shove') return null;
+  if (
+    ctx.paused ||
+    ctx.mouseMode !== 'shove' ||
+    state.middleDragging ||
+    state.middlePanning
+  ) {
+    return null;
+  }
 
   const pushing = state.leftDragging;
   // Left wins when both buttons are down, matching the Draw tool -- a stray
diff --git a/src/perf/fpsBand.ts b/src/perf/fpsBand.ts
index fdefde9..e6e5120 100644
--- a/src/perf/fpsBand.ts
+++ b/src/perf/fpsBand.ts
@@ -377,9 +377,9 @@ export const BAND_COLOR: Readonly<Record<Band, string>> = Object.freeze({
  * not "something is wrong".
  */
 export const BAND_LABEL_COLOR: Readonly<Record<Band, string>> = Object.freeze({
-  [RED]: '#ff8080',
-  [YELLOW]: '#ffc857',
-  [GREEN]: '#6ede8a',
+  [RED]: '#8b3030',
+  [YELLOW]: '#765d12',
+  [GREEN]: '#2f6f43',
 });
 
 /**
diff --git a/src/ui/inputBinding.ts b/src/ui/inputBinding.ts
index 2e1a6b7..54ba1d4 100644
--- a/src/ui/inputBinding.ts
+++ b/src/ui/inputBinding.ts
@@ -33,7 +33,7 @@
  */
 
 import { DEFAULT_HOTKEYS, isEditableTarget, matchHotkey, type Hotkey } from './hotkeys.ts';
-import { InputTracker } from './inputTracker.ts';
+import { InputTracker, MIDDLE_BUTTON } from './inputTracker.ts';
 import type { Surface } from '../app/surface.ts';
 import type { Command } from '../orchestrator/commands.ts';
 
@@ -188,6 +188,7 @@ export function bindInput(opts: InputBindingOptions): {
       // received the press". The tracker enforces that too; this makes the
       // browser cooperate rather than relying on the window listeners alone.
       canvas.setPointerCapture(event.pointerId);
+      if (event.button === MIDDLE_BUTTON) event.preventDefault();
     }
     // `shiftKey` from the pointer event itself: Shift+Right-click is redo, and
     // the modifier has to be read at the click. See `InputState.shift`.
@@ -245,6 +246,10 @@ export function bindInput(opts: InputBindingOptions): {
     if (!capturedByUi(event)) event.preventDefault();
   };
 
+  const onAuxClick = (event: MouseEvent): void => {
+    if (!capturedByUi(event) && event.button === MIDDLE_BUTTON) event.preventDefault();
+  };
+
   // --- keyboard ------------------------------------------------------------
 
   const onKeyDown = (event: KeyboardEvent): void => {
@@ -322,6 +327,7 @@ export function bindInput(opts: InputBindingOptions): {
   canvas.addEventListener('pointerdown', onPointerDown);
   canvas.addEventListener('wheel', onWheel, { passive: false });
   canvas.addEventListener('contextmenu', onContextMenu);
+  canvas.addEventListener('auxclick', onAuxClick);
   window.addEventListener('pointerup', onPointerUp);
   window.addEventListener('pointercancel', onPointerCancel);
   window.addEventListener('pointermove', onPointerMove);
@@ -335,6 +341,7 @@ export function bindInput(opts: InputBindingOptions): {
       canvas.removeEventListener('pointerdown', onPointerDown);
       canvas.removeEventListener('wheel', onWheel);
       canvas.removeEventListener('contextmenu', onContextMenu);
+      canvas.removeEventListener('auxclick', onAuxClick);
       window.removeEventListener('pointerup', onPointerUp);
       window.removeEventListener('pointercancel', onPointerCancel);
       window.removeEventListener('pointermove', onPointerMove);
diff --git a/src/ui/inputState.ts b/src/ui/inputState.ts
index e773edd..e349197 100644
--- a/src/ui/inputState.ts
+++ b/src/ui/inputState.ts
@@ -51,6 +51,12 @@ export interface InputState {
   /** Went down THIS frame, on the canvas. One-shot. */
   readonly leftPressed: boolean;
   readonly rightPressed: boolean;
+  /**
+   * A primary-button press and release completed without crossing the drag
+   * threshold. Selection reads this release-edge gesture so a pan never also
+   * selects the cohort beneath its starting point.
+   */
+  readonly leftClicked: boolean;
   /**
    * A drag owned by the canvas is in progress.
    *
@@ -59,7 +65,18 @@ export interface InputState {
    * crossing a panel.
    */
   readonly leftDragging: boolean;
+  readonly middleDragging: boolean;
   readonly rightDragging: boolean;
+  /** This frame contains pan movement from the primary or middle drag. */
+  readonly primaryPanning: boolean;
+  readonly middlePanning: boolean;
+
+  /**
+   * Pointer movement owned by a primary or middle-button drag this frame, in
+   * framebuffer pixels. Drained by `freeze`; the camera decides which tool may
+   * consume it.
+   */
+  readonly panDelta: readonly [number, number];
 
   /**
    * Scroll notches this frame, positive up. Zero when the wheel did not move.
@@ -124,8 +141,13 @@ export const EMPTY_INPUT: InputState = Object.freeze({
   dt: 0,
   leftPressed: false,
   rightPressed: false,
+  leftClicked: false,
   leftDragging: false,
+  middleDragging: false,
   rightDragging: false,
+  primaryPanning: false,
+  middlePanning: false,
+  panDelta: Object.freeze([0, 0]) as readonly [number, number],
   scroll: 0,
   keysHeld: Object.freeze(new Set<string>()),
   keysPressed: Object.freeze(new Set<string>()),
diff --git a/src/ui/inputTracker.test.ts b/src/ui/inputTracker.test.ts
index 7932c54..7e0aa44 100644
--- a/src/ui/inputTracker.test.ts
+++ b/src/ui/inputTracker.test.ts
@@ -16,7 +16,12 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 
-import { InputTracker, LEFT_BUTTON, RIGHT_BUTTON } from './inputTracker.ts';
+import {
+  InputTracker,
+  LEFT_BUTTON,
+  MIDDLE_BUTTON,
+  RIGHT_BUTTON,
+} from './inputTracker.ts';
 
 /** A frame's worth of nothing, so a test can advance without adding input. */
 const TICK = 1 / 60;
@@ -96,6 +101,47 @@ test('a press fires for exactly one frame', () => {
   );
 });
 
+test('a short primary gesture becomes one click on release', () => {
+  const tracker = new InputTracker();
+  tracker.onPointerMove(100, 100);
+  tracker.onPointerDown(LEFT_BUTTON, false);
+  tracker.onPointerMove(103, 102);
+  assert.equal(tracker.freeze(TICK).leftClicked, false, 'click waits for release');
+
+  tracker.onPointerUp(LEFT_BUTTON);
+  assert.equal(tracker.freeze(TICK).leftClicked, true);
+  assert.equal(tracker.freeze(TICK).leftClicked, false, 'click is a one-shot');
+});
+
+test('primary drag crosses slop, pans, and does not also click', () => {
+  const tracker = new InputTracker();
+  tracker.onPointerMove(100, 100);
+  tracker.onPointerDown(LEFT_BUTTON, false);
+  tracker.onPointerMove(112, 108);
+  tracker.onPointerUp(LEFT_BUTTON);
+
+  const drag = tracker.freeze(TICK);
+  assert.deepEqual(drag.panDelta, [12, 8]);
+  assert.equal(drag.primaryPanning, true, 'a fast drag still pans after release');
+  assert.equal(drag.leftDragging, false);
+  assert.equal(drag.leftClicked, false);
+});
+
+test('middle drag records universal pan without a primary tool gesture', () => {
+  const tracker = new InputTracker();
+  tracker.onPointerMove(20, 40);
+  tracker.onPointerDown(MIDDLE_BUTTON, false);
+  tracker.onPointerMove(35, 31);
+  tracker.onPointerUp(MIDDLE_BUTTON);
+
+  const state = tracker.freeze(TICK);
+  assert.equal(state.middleDragging, false);
+  assert.equal(state.middlePanning, true, 'completed movement remains a pan event');
+  assert.equal(state.leftDragging, false);
+  assert.deepEqual(state.panDelta, [15, -9]);
+  assert.deepEqual(tracker.freeze(TICK).panDelta, [0, 0], 'pan delta drains');
+});
+
 test('dragging persists across frames but pressed does not', () => {
   const tracker = new InputTracker();
   tracker.onPointerDown(LEFT_BUTTON, false);
diff --git a/src/ui/inputTracker.ts b/src/ui/inputTracker.ts
index 5ce7e5e..b9c5ce0 100644
--- a/src/ui/inputTracker.ts
+++ b/src/ui/inputTracker.ts
@@ -48,6 +48,9 @@ export const LEFT_BUTTON = 0;
 export const MIDDLE_BUTTON = 1;
 export const RIGHT_BUTTON = 2;
 
+/** Enough movement to distinguish an intentional pan from a slightly shaky click. */
+export const POINTER_DRAG_SLOP = 6;
+
 /**
  * Accumulates input events and freezes one `InputState` per frame.
  *
@@ -69,10 +72,20 @@ export class InputTracker {
    * nobody is worse than one.
    */
   private leftDown = false;
+  private middleDown = false;
   private rightDown = false;
 
+  private leftStartX = 0;
+  private leftStartY = 0;
+  private leftMoved = false;
+  private primaryPanned = false;
+  private middlePanned = false;
+  private panX = 0;
+  private panY = 0;
+
   /** One-shots, drained by `freeze()`. */
   private leftPressed = false;
+  private leftClicked = false;
   private rightPressed = false;
 
   private scroll = 0;
@@ -94,6 +107,33 @@ export class InputTracker {
    * `inputBinding.ts`, where getting this wrong is a real hazard.
    */
   onPointerMove(x: number, y: number): void {
+    const dx = x - this.mouseX;
+    const dy = y - this.mouseY;
+
+    // Middle-drag is the universal navigation gesture. Primary-drag becomes
+    // navigation in Observe mode, but the tracker deliberately does not know
+    // the active tool; it records the movement and lets the orchestrator decide.
+    if (this.middleDown) {
+      this.panX += dx;
+      this.panY += dy;
+      this.middlePanned = true;
+    } else if (this.leftDown) {
+      if (!this.leftMoved) {
+        const distance = Math.hypot(x - this.leftStartX, y - this.leftStartY);
+        if (distance >= POINTER_DRAG_SLOP) {
+          this.leftMoved = true;
+          // Include the small lead-in once the gesture commits to a drag, so
+          // the view stays under the pointer instead of jumping by the slop.
+          this.panX += x - this.leftStartX;
+          this.panY += y - this.leftStartY;
+          this.primaryPanned = true;
+        }
+      } else {
+        this.panX += dx;
+        this.panY += dy;
+        this.primaryPanned = true;
+      }
+    }
     this.mouseX = x;
     this.mouseY = y;
   }
@@ -124,6 +164,11 @@ export class InputTracker {
     if (button === LEFT_BUTTON) {
       this.leftPressed = true;
       this.leftDown = true;
+      this.leftStartX = this.mouseX;
+      this.leftStartY = this.mouseY;
+      this.leftMoved = false;
+    } else if (button === MIDDLE_BUTTON) {
+      this.middleDown = true;
     } else if (button === RIGHT_BUTTON) {
       this.rightPressed = true;
       this.rightDown = true;
@@ -141,7 +186,11 @@ export class InputTracker {
    */
   onPointerUp(button: number): void {
     if (button === LEFT_BUTTON) {
+      if (this.leftDown && !this.leftMoved) this.leftClicked = true;
       this.leftDown = false;
+      this.leftMoved = false;
+    } else if (button === MIDDLE_BUTTON) {
+      this.middleDown = false;
     } else if (button === RIGHT_BUTTON) {
       this.rightDown = false;
     }
@@ -206,7 +255,13 @@ export class InputTracker {
     this.keysHeld.clear();
     this.keysPressed.clear();
     this.leftDown = false;
+    this.middleDown = false;
     this.rightDown = false;
+    this.leftMoved = false;
+    this.panX = 0;
+    this.panY = 0;
+    this.primaryPanned = false;
+    this.middlePanned = false;
   }
 
   /**
@@ -230,8 +285,13 @@ export class InputTracker {
       dt,
       leftPressed: this.leftPressed,
       rightPressed: this.rightPressed,
+      leftClicked: this.leftClicked,
       leftDragging: this.leftDown,
+      middleDragging: this.middleDown,
       rightDragging: this.rightDown,
+      primaryPanning: this.primaryPanned,
+      middlePanning: this.middlePanned,
+      panDelta: [this.panX, this.panY],
       scroll: this.scroll,
       keysHeld: new Set(this.keysHeld),
       keysPressed: new Set(this.keysPressed),
@@ -239,7 +299,12 @@ export class InputTracker {
     };
 
     this.leftPressed = false;
+    this.leftClicked = false;
     this.rightPressed = false;
+    this.panX = 0;
+    this.panY = 0;
+    this.primaryPanned = false;
+    this.middlePanned = false;
     this.scroll = 0;
     this.keysPressed.clear();
 
diff --git a/src/ui/menuBar.ts b/src/ui/menuBar.ts
index b4e5d24..f9d5082 100644
--- a/src/ui/menuBar.ts
+++ b/src/ui/menuBar.ts
@@ -610,10 +610,7 @@ export class MenuBar {
         this.opts.onResetPreferences(),
       );
       this.addSeparator(body);
-      // "Toggle UI Panels", not "Hide Panel": the panels start hidden now, so
-      // for most of a session this item SHOWS them and the old label named the
-      // wrong half of what it does. The checkmark still reports hidden-ness.
-      this.addItem(body, 'Toggle UI Panels', () => this.opts.onToggleUi(), 'X', () =>
+      this.addItem(body, 'Open / Close Settings', () => this.opts.onToggleUi(), 'X', () =>
         this.opts.isUiHidden(),
       );
       // Tools WAS a top-level menu. It is three radio rows bound to `1`/`2`/`3`,
diff --git a/src/ui/menuHelp.ts b/src/ui/menuHelp.ts
index bc5a122..9473113 100644
--- a/src/ui/menuHelp.ts
+++ b/src/ui/menuHelp.ts
@@ -34,7 +34,7 @@
  * reads as part of the description rather than as a footnote.
  */
 const PROJECT_SCOPE =
-  'Stores all the settings on the project panel and current particle behavior ' +
+  'Stores the Project-tab settings and current particle behavior ' +
   '(including mutations)';
 
 /**
@@ -77,7 +77,7 @@ export const RESET_HELP =
 
 /** Editor > Toggle UI Panels, shared with the bar's gear button. */
 export const TOGGLE_UI_HELP =
-  'Show/Hide the project and preferences control panels';
+  'Open or close the unified Settings drawer';
 
 /**
  * Simulation > Pause / Resume, shared with the touch bar's pause button.
@@ -99,15 +99,15 @@ export const MENU_HELP: Readonly<Record<string, string>> = {
   'Save...': `Save the current project. ${PROJECT_SCOPE}`,
 
   'Copy Link to This Project':
-    'Copy a url to the clipboard that opens Fluoddity.com to the current ' +
-    `project. Encodes all the settings on the project panel and current ` +
+    'Copy a URL to the clipboard that opens Agar Protocol to the current ' +
+    `project. Encodes all the settings on the Project tab and current ` +
     'particle behavior (including mutations)',
   // KEYED WITHOUT "URL", which is what the row is actually called. The row was
   // renamed when it learned to read stamped screenshots as well as links, and
   // this key kept the old name -- so the lookup missed and the row silently lost
   // its tooltip. The text below is the one that describes BOTH inputs.
   'Load Project from Clipboard':
-    'Decode a fluoddity permalink or QR-code containing screenshot and load it ' +
+    'Decode an Agar Protocol permalink or QR-code screenshot and load it ' +
     'as the current project. Equivalent to paste/ctrl-V',
   // THE ELLIPSIS IS PART OF THE KEY. Both screenshot rows end in a real `…`
   // character rather than three periods, and the lookup is exact -- a key
@@ -142,10 +142,10 @@ export const MENU_HELP: Readonly<Record<string, string>> = {
   'Revert to Saved': 'Equivalent to File->Load <Filename>',
 
   Select:
-    'Click to select a cohort, allowing you to generate children with similar ' +
-    'behavior and conduct artificial selection',
-  Shove: 'Left mouse to push particles away. Right mouse to attract them',
-  Draw: 'Left mouse to create barriers that repel particles. Right mouse to erase them',
+    'Click to select a cohort; drag to pan the dish. A selected cohort can ' +
+    'become the parent of a new generation',
+  Shove: 'Primary mouse pushes; secondary mouse pulls; middle-drag pans',
+  Draw: 'Primary mouse paints barriers; secondary mouse erases; middle-drag pans',
 
   'Toggle Trail-Map View':
     'View the trails left behind by particles instead of the particles ' +
@@ -153,11 +153,11 @@ export const MENU_HELP: Readonly<Record<string, string>> = {
     'right, Purple is down, and Cyan is left',
   'Reset View': 'Return the camera to the default location/zoom',
   'Reset Editor Preferences...':
-    'Restore Fluoddity to factory settings. Equivalent to visiting the website ' +
+    'Restore Agar Protocol to factory settings. Equivalent to visiting the website ' +
     'for the first time',
   // NAMES THE GEAR IN WORDS, not with the glyph the request used: this is a
   // text tooltip and a `<Gear symbol>` placeholder would render literally.
-  'Toggle UI Panels': `${TOGGLE_UI_HELP}. Equivalent to pressing the gear button`,
+  'Open / Close Settings': `${TOGGLE_UI_HELP}. Equivalent to pressing the gear button`,
 
   'Pause / Resume': PAUSE_HELP,
   Reset: RESET_HELP,
diff --git a/src/ui/mutationOverlay.test.ts b/src/ui/mutationOverlay.test.ts
index 98d11eb..9e232c1 100644
--- a/src/ui/mutationOverlay.test.ts
+++ b/src/ui/mutationOverlay.test.ts
@@ -808,11 +808,11 @@ test('an empty stack falls back to the bare verb, not to a dangling colon', () =
   assert.equal(historyLabel('Redo', ''), 'Redo');
 });
 
-test('the tool options keep their names and drop only the number on touch', () => {
+test('the tool options use compact names on touch and keep desktop context', () => {
   // The NAME is the part that says what the option does, so suppression must
   // take the key and nothing else -- a bare "Tool:" would be a worse trade than
   // the caption ever was.
-  assert.equal(toolOptionLabel('select', true), 'Tool: Select');
-  assert.equal(toolOptionLabel('draw', true), 'Tool: Draw');
+  assert.equal(toolOptionLabel('select', true), 'Select');
+  assert.equal(toolOptionLabel('draw', true), 'Draw');
   assert.ok(toolOptionLabel('select', false).startsWith('Tool: Select'));
 });
diff --git a/src/ui/mutationOverlay.ts b/src/ui/mutationOverlay.ts
index dc3cf39..ad5e0fc 100644
--- a/src/ui/mutationOverlay.ts
+++ b/src/ui/mutationOverlay.ts
@@ -99,7 +99,7 @@ const TOOL_LABELS: Record<MouseMode, string> = {
  */
 export function toolOptionLabel(mode: MouseMode, mobile: boolean): string {
   const key = mobile ? '' : hotkeyLabel({ kind: 'setMouseMode', mode });
-  return `Tool: ${TOOL_LABELS[mode]}${key === '' ? '' : ` (${key})`}`;
+  return `${mobile ? '' : 'Tool: '}${TOOL_LABELS[mode]}${key === '' ? '' : ` (${key})`}`;
 }
 
 export class MutationOverlay {
@@ -113,6 +113,9 @@ export class MutationOverlay {
   private readonly tool: HTMLSelectElement;
   /** The gear, at the right end. See its construction for why it lives here. */
   private readonly gear: HTMLButtonElement;
+  /** Touch-only disclosure for the less-frequent culture actions. */
+  private readonly secondaryToggle: HTMLButtonElement | null;
+  private readonly secondaryRow: HTMLElement | null;
   /**
    * Pause/Resume, at the LEFT end of the touch bar's top row. `null` on desktop.
    *
@@ -467,6 +470,7 @@ export class MutationOverlay {
       [hotkeyLabel({ kind: 'randomizeSeed' })],
       opts.mobile === true,
     )}`;
+    if (opts.mobile === true) this.reroll.textContent = 'Reroll';
     this.reroll.style.cssText = opts.mobile === true ? TOUCH_CONTROL_CSS : BUTTON_CSS;
     this.reroll.dataset['setting'] = 'config.mutationSeed.randomize';
 
@@ -655,7 +659,7 @@ export class MutationOverlay {
     // able to move it and a label naming no key would be the one control here
     // that hides its shortcut.
     this.tooltip.attach(this.gear, () => ({
-      title: 'Toggle UI Panels',
+      title: 'Settings',
       body: `${TOGGLE_UI_HELP}${this.uiKeySuffix}`,
     }));
     this.gear.addEventListener('click', () => {
@@ -724,7 +728,7 @@ export class MutationOverlay {
     if (opts.mobile === true) {
       this.pause = document.createElement('button');
       this.pause.type = 'button';
-      this.pause.style.cssText = GEAR_BUTTON_CSS;
+      this.pause.style.cssText = TOUCH_ICON_BUTTON_CSS;
       this.pause.dataset['setting'] = 'transport.togglePause';
       this.pause.append(pauseIcon());
       // Seeded to RUNNING, which is how the app starts. `refresh` corrects it on
@@ -755,17 +759,44 @@ export class MutationOverlay {
 
       const top = document.createElement('div');
       top.style.cssText = TOUCH_BAR_ROW_CSS;
-      // PAUSE, SLIDER, GEAR. The two icons bracket the control they act on: one
-      // freezes what the slider is changing, the other hides everything around
-      // it. Both are fixed-width and centre against the two-line stack between
-      // them, which is the arrangement the gear's own comment above describes.
-      top.append(this.pause, sliderGroup, this.gear);
+      this.gear.style.cssText = TOUCH_ICON_BUTTON_CSS;
+
+      this.secondaryToggle = document.createElement('button');
+      this.secondaryToggle.type = 'button';
+      this.secondaryToggle.style.cssText = TOUCH_ICON_BUTTON_CSS;
+      this.secondaryToggle.textContent = '•••';
+      this.secondaryToggle.setAttribute('aria-label', 'Show culture actions');
+      this.secondaryToggle.setAttribute('aria-expanded', 'false');
+      this.secondaryToggle.title = 'Culture actions';
+
+      top.append(this.pause, sliderGroup, this.secondaryToggle, this.gear);
 
       const bottom = document.createElement('div');
-      bottom.style.cssText = TOUCH_BAR_ROW_CSS;
+      bottom.style.cssText = TOUCH_ACTIONS_ROW_CSS;
       // `rerollAll` and `reroll` swap places with the state (see `refresh`), so
       // both live here and the swap continues to work untouched.
       bottom.append(presets, this.rerollAll, this.reroll, this.reset, this.tool);
+      this.secondaryRow = bottom;
+      for (const child of presets.children) {
+        if (child instanceof HTMLElement) {
+          child.style.width = 'auto';
+          child.style.height = '44px';
+          child.style.flex = '1 1 0';
+        }
+      }
+      presets.style.width = '100%';
+      presets.style.flex = '1 0 100%';
+      presets.style.justifyContent = 'stretch';
+      this.secondaryToggle.addEventListener('click', () => {
+        const expanded = bottom.style.display === 'none';
+        bottom.style.display = expanded ? 'flex' : 'none';
+        this.secondaryToggle?.setAttribute('aria-expanded', String(expanded));
+        this.secondaryToggle?.setAttribute(
+          'aria-label',
+          expanded ? 'Hide culture actions' : 'Show culture actions',
+        );
+        this.secondaryToggle?.blur();
+      });
 
       bar.style.cssText = TOUCH_BAR_CSS;
       bar.append(top, bottom);
@@ -773,6 +804,8 @@ export class MutationOverlay {
       // No pause button here: the menu bar and `Space` both carry it, and this
       // row is width-constrained in a way the touch layout's two rows are not.
       this.pause = null;
+      this.secondaryToggle = null;
+      this.secondaryRow = null;
       bar.append(
         presets,
         this.label,
@@ -1534,6 +1567,13 @@ export class MutationOverlay {
     this.hintLead.textContent = leadText;
     this.hintTail.textContent = suppressForTouch ? '' : tail;
 
+    if (this.mobile) {
+      const meaningful =
+        leadText !== '' || cohort !== null || commit || clearField || cancelSelection ||
+        generateChild || (undo !== null && undo !== '');
+      this.hint.style.display = meaningful ? 'flex' : 'none';
+    }
+
     // **AN EMPTY SPAN MUST NOT CLAIM A SHARE OF THE ROW.** Both text spans are
     // `flex:1 1 0` on touch, so that a long sentence yields to the buttons
     // rather than crushing them. The cost of a zero basis is that an EMPTY span
@@ -1890,6 +1930,14 @@ export class MutationOverlay {
     this.paintGear(hidden);
   }
 
+  /** Return touch controls to their compact, one-row state. */
+  collapseSecondaryActions(): void {
+    if (this.secondaryRow === null || this.secondaryToggle === null) return;
+    this.secondaryRow.style.display = 'none';
+    this.secondaryToggle.setAttribute('aria-expanded', 'false');
+    this.secondaryToggle.setAttribute('aria-label', 'Show culture actions');
+  }
+
   /**
    * Colour the gear and state its condition in words.
    *
@@ -1905,7 +1953,7 @@ export class MutationOverlay {
     // reads the panel state on hover, like the other two live sources here.
     this.gear.setAttribute(
       'aria-label',
-      `Control panels: ${hidden ? 'hidden' : 'showing'} — show/hide them${this.uiKeySuffix}`,
+      `Settings: ${hidden ? 'closed' : 'open'} — open or close${this.uiKeySuffix}`,
     );
     this.gear.setAttribute('aria-pressed', String(!hidden));
   }
@@ -2820,6 +2868,15 @@ const TOUCH_BAR_CSS =
 const TOUCH_BAR_ROW_CSS =
   'display:flex;align-items:center;gap:8px;width:100%;min-width:0;';
 
+const TOUCH_ICON_BUTTON_CSS =
+  'display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;' +
+  'box-sizing:border-box;padding:0;border:1px solid rgba(255,255,255,0.14);' +
+  'border-radius:8px;background:rgba(255,255,255,0.10);color:#e8e8ea;' +
+  'font:700 17px/1 system-ui,sans-serif;letter-spacing:.08em;cursor:pointer;';
+
+const TOUCH_ACTIONS_ROW_CSS =
+  'display:none;align-items:stretch;gap:8px;width:100%;min-width:0;flex-wrap:wrap;';
+
 // The slider and its caption, OVERLAID rather than stacked.
 //
 // **THE CAPTION COSTS NO HEIGHT, WHICH IS THE POINT.** Stacking it above the
diff --git a/src/ui/panel.ts b/src/ui/panel.ts
index 5773168..714aa0d 100644
--- a/src/ui/panel.ts
+++ b/src/ui/panel.ts
@@ -101,6 +101,10 @@ import {
 import { Tooltip } from './tooltip.ts';
 import { Toast, type ToastTone } from './toast.ts';
 import { copyText, readText } from './clipboard.ts';
+import {
+  announceWorkspaceDrawer,
+  closeWhenWorkspaceDrawerChanges,
+} from './workspaceDrawer.ts';
 import { fromDocument, sanitizeName } from '../config/persistence.ts';
 import { describeImport, exportFiles, planImport } from '../config/saveTransfer.ts';
 // STATIC, not a dynamic import, and for the reason `recorder/saveFile.ts` is
@@ -333,6 +337,7 @@ export class Panel {
   private readonly onSplashClosed: (() => void) | null;
   private readonly left: PanelSide;
   private readonly right: PanelSide;
+  private readonly releaseDrawerListener: () => void;
 
   /** The right panel's tab host, for the tool-driven switch in `refresh`. */
   private settings: SettingsSectionHandle | null = null;
@@ -860,6 +865,11 @@ export class Panel {
 
     this.buildBoth();
 
+    this.releaseDrawerListener = closeWhenWorkspaceDrawerChanges('settings', () => {
+      this.overlay.collapseSecondaryActions();
+      if (!this.hiddenFlag) this.setHidden(true);
+    });
+
     // LAST, and after `buildBoth`. The panes must exist before their containers
     // are hidden, or the first reveal would show two empty columns; and
     // `applyHidden` rather than `setHidden` because there is nothing to notify
@@ -885,10 +895,9 @@ export class Panel {
    */
   private buildBoth(): void {
     const status = this.bus.status();
-    // EMPTY ON TOUCH -- Project moves into the right panel's tab strip, because
-    // two 320px columns do not fit on a phone. The build loop runs over nothing
-    // rather than being skipped, so refresh, dispose and the hidden-state
-    // handling below all stay exactly as they are. See `panelModel.ts`.
+    // The canvas-first shell uses one settings drawer on every viewport, so the
+    // legacy left pane intentionally has no sections. Keep building the empty
+    // side so refresh, disposal, and hidden-state handling remain symmetrical.
     this.left.pane = this.buildSide(this.left, LEFT, leftSections(this.mobile), status);
     this.right.pane = this.buildSide(this.right, RIGHT, rightSections(), status);
 
@@ -952,10 +961,8 @@ export class Panel {
           this.exportVideoShown && this.recording !== null
             ? this.recordingOptions()
             : undefined,
-          // Project becomes a tab here exactly when the left panel is empty --
-          // the same decision `leftSections` makes, read from the same flag, so
-          // the two cannot both claim it and render it twice.
-          this.mobile,
+          // Project lives in this single settings drawer on every viewport.
+          true,
           // Undefined -- and so NO link tab -- unless the menu item is ticked.
           // Unlike recording there is no second condition: building a share URL
           // needs nothing this panel might be missing.
@@ -986,9 +993,9 @@ export class Panel {
    * `grouped(ctx.advanced, ...)` call site grow an argument for no gain.
    *
    * The right panel's two tabs are a wrinkle: they are one section list but two
-   * tiers. The settings section resolves that itself by asking for the flag it
-   * wants, so what this bakes in for RIGHT is the Preferences tab's -- and
-   * `drawingSection` reads `advancedDrawing` through its own toggle instead.
+   * tiers. The settings section resolves those explicitly: what this bakes in
+   * for RIGHT is the Preferences tab's, while Project and Drawing read their
+   * own flags through `advancedFor`.
    */
   private context(which: Side): SectionContext {
     const field: ViewPrefField =
@@ -1054,6 +1061,11 @@ export class Panel {
    * `activeTab` is held on the panel precisely so this cannot lose it.
    */
   private rebuild(): void {
+    // A tier checkbox schedules this rebuild in the same event turn as its tab
+    // click. Capture the section's live answer before disposing it; waiting for
+    // the next animation-frame refresh would reset a newly selected Project tab
+    // to the older panel-level value.
+    if (this.settings !== null) this.activeTab = this.settings.activeTab();
     this.left.pane.dispose();
     this.right.pane.dispose();
     this.settings = null;
@@ -1588,6 +1600,10 @@ export class Panel {
    */
   setHidden(hidden: boolean): void {
     this.applyHidden(hidden);
+    if (!hidden) {
+      this.overlay.collapseSecondaryActions();
+      announceWorkspaceDrawer('settings');
+    }
     // EVERY PATH THAT HIDES THE PANELS COMES THROUGH HERE -- the `X` key, the
     // Editor menu item, and the corner gear -- so this is the one
     // place that can tell the Orchestrator to stop building settings payloads
@@ -1609,7 +1625,9 @@ export class Panel {
   private applyHidden(hidden: boolean): void {
     this.hiddenFlag = hidden;
     const display = hidden ? 'none' : '';
-    this.left.container.style.display = display;
+    // The left column is retired; Project is the first tab in the unified
+    // settings drawer. Keep the inert container hidden across every toggle.
+    this.left.container.style.display = 'none';
     this.right.container.style.display = display;
     // The overlay does NOT go: `X` hides the panels so you can see the picture,
     // and the overlay is the picture's own controls. It is told anyway, because
@@ -2594,6 +2612,7 @@ export class Panel {
     this.recordingBar.dispose();
     this.fpsCounter.dispose();
     this.splash.dispose();
+    this.releaseDrawerListener();
     this.left.container.remove();
     this.right.container.remove();
   }
@@ -2690,15 +2709,14 @@ function sideContainer(which: Side, mobile = false): HTMLElement {
   // scrolling, too little hides controls.
   if (mobile) {
     el.style.cssText =
-      'position:fixed;left:0;right:0;' +
-      `top:${PANEL_TOP_PX}px;` +
-      'bottom:calc(var(--fluoddity-bar-height, 190px) + 8px);' +
+      'position:fixed;left:8px;right:8px;top:8px;' +
+      'bottom:calc(var(--fluoddity-bar-height, 72px) + 8px);' +
       'overflow-y:auto;-webkit-overflow-scrolling:touch;' +
       // CONTAINS ITS OWN SCROLL. Without this, flicking past the end of a long
       // settings list continues into the page behind it -- and the page is the
       // canvas, which has `touch-action:none` and would simply eat the rest of
       // the gesture. The list would feel like it had stuck.
-      'overscroll-behavior:contain;z-index:20;padding:0 6px;box-sizing:border-box;';
+      'overscroll-behavior:contain;z-index:36;box-sizing:border-box;';
     document.body.append(el);
     return el;
   }
@@ -2707,31 +2725,10 @@ function sideContainer(which: Side, mobile = false): HTMLElement {
   // is the taller of the two. The panels are 320px and the overlay is capped so
   // that on any window wide enough for both there is no horizontal overlap --
   // this clears it vertically as well, for windows that are not.
-  const top = PANEL_TOP_PX;
   el.style.cssText =
-    `position:fixed;top:${top}px;${left ? 'left:8px' : 'right:8px'};` +
-    `width:320px;max-height:calc(100vh - ${top + 8}px);overflow-y:auto;z-index:20;`;
+    `position:fixed;top:16px;${left ? 'left:84px' : 'right:152px'};` +
+    'width:min(440px,calc(100vw - 236px));max-height:calc(100vh - 32px);' +
+    'overflow-y:auto;overscroll-behavior:contain;z-index:33;';
   document.body.append(el);
   return el;
 }
-
-/**
- * Where both side panels start, in px from the top.
- *
- * Clears the menu bar (fixed at `top:0`, ~26px) and the mutation overlay
- * beneath it. A single constant because the two panels must agree -- one of
- * them starting lower than the other reads as a rendering bug.
- *
- * HAND-COMPUTED, not derived from `mutationOverlay.ts`'s MENU_BAR_CLEARANCE --
- * these two numbers are related by intent only, so moving one without the other
- * is what makes them overlap. Raised from 78 because at some window sizes the
- * panels still clipped the mutation slider's bottom edge.
- *
- * **THE OVERLAY IS TWO ROWS NOW**, and this had to move again for it. The
- * context hint added beneath the bar is 11px text in a 5px-padded, 1px-bordered
- * box (~26px) plus the root's 4px column gap -- so ~30px, and 83 became 113.
- * Adding a third row, or changing the hint's padding or font size, means
- * revisiting this number: nothing enforces it, which is exactly what the
- * paragraph above is warning about.
- */
-const PANEL_TOP_PX = 113;
diff --git a/src/ui/panelModel.test.ts b/src/ui/panelModel.test.ts
index 239ca8c..e9a2fb4 100644
--- a/src/ui/panelModel.test.ts
+++ b/src/ui/panelModel.test.ts
@@ -43,15 +43,13 @@ function allSections() {
   return [...leftSections(), ...rightSections()];
 }
 
-test('the left panel is the project, the right is the settings host', () => {
-  assert.deepEqual(
-    leftSections().map((s) => s.id),
-    [PROJECT] as readonly SectionId[],
-  );
+test('one settings host carries Project and editor controls', () => {
+  assert.deepEqual(leftSections().map((s) => s.id), [] as readonly SectionId[]);
   assert.deepEqual(
     rightSections().map((s) => s.id),
     [SETTINGS] as readonly SectionId[],
   );
+  assert.equal(PROJECT, 'project', 'Project stays a valid tab id');
 });
 
 test('section ids are unique across BOTH panels', () => {
diff --git a/src/ui/panelModel.ts b/src/ui/panelModel.ts
index 91b5c98..0cdff49 100644
--- a/src/ui/panelModel.ts
+++ b/src/ui/panelModel.ts
@@ -1,7 +1,7 @@
 /**
  * Which sections each panel shows, and in what order.
  *
- * ## Two panels, split by what the state IS
+ * ## One drawer, grouped by what the state IS
  *
  * `ARCHITECTURE.md`'s "Toolbar and the planned side-panel" named an endpoint the
  * desktop never reached: the active tool selecting which controls are visible,
@@ -13,8 +13,8 @@
  * thing you save, load and share. Preferences and Drawing Controls are how your
  * editor is set up, and loading someone else's config must not touch them
  * (`preferences_window.py:12-16`). That split already existed in the registry as
- * `source`; it is now also the split down the middle of the screen. Project on
- * the left, editor state on the right.
+ * `source`; it now defines the tabs inside one settings drawer. Project comes
+ * first, followed by editor state.
  *
  * The tool selection endpoint survives inside that: the right panel's two
  * sections became TABS rather than stacked folders, and the active tab follows
@@ -67,21 +67,6 @@ export interface PanelSection {
   readonly expanded: boolean;
 }
 
-/**
- * The left panel: the project.
- *
- * PARKED, and deliberately still written out:
- *   { id: TRANSPORT, title: 'Transport', expanded: true },
- */
-const LEFT_SECTIONS: readonly PanelSection[] = [
-  // A PLACEHOLDER, replaced during the build: `projectSection.ts` retitles this
-  // folder to `Project: <name>` and keeps it current, because the name changes
-  // under the panel and a static title cannot follow it. What is here is only
-  // what shows in the instant between `addFolder` and the section building
-  // into it.
-  { id: PROJECT, title: 'Project', expanded: true },
-];
-
 /**
  * The right panel: editor state, behind two tabs.
  *
@@ -95,28 +80,22 @@ const RIGHT_SECTIONS: readonly PanelSection[] = [
 /**
  * The left panel's sections, in display order.
  *
- * **EMPTY ON TOUCH, and that is the whole of the mobile panel change here.**
- * Two 320px columns need 640px plus gutters; a phone is 390px, so the two
- * overlapped almost completely -- the Project panel sat on top of the settings
- * panel and neither could be read. There is no arrangement of two side-by-side
- * columns that fits, so the touch layout has ONE panel and Project becomes a tab
- * inside it (see `sections/settingsSection.ts`).
+ * **EMPTY ON EVERY VIEWPORT.** Project moved into the settings tab strip so the
+ * culture vessel never has two editor columns competing with its lab drawers.
  *
  * Returning an empty list rather than never calling this is deliberate: the
  * panel's build loop, refresh, dispose and hidden-state handling all stay
  * exactly as they are and simply iterate nothing. The alternative -- a `null`
  * side threaded through every one of those -- would put a branch in each.
  */
-export function leftSections(mobile = false): readonly PanelSection[] {
-  return mobile ? [] : LEFT_SECTIONS;
+export function leftSections(_mobile = false): readonly PanelSection[] {
+  return [];
 }
 
 /**
  * The right panel's sections, in display order.
  *
- * The same single tabbed host either way. What CHANGES on touch is how many
- * tabs it builds -- Project joins the strip -- and that is decided inside the
- * section, where the tab list already lives, rather than here.
+ * The single tabbed host used on every viewport.
  */
 export function rightSections(): readonly PanelSection[] {
   return RIGHT_SECTIONS;
diff --git a/src/ui/sections/projectSection.ts b/src/ui/sections/projectSection.ts
index a3c3df4..d275b42 100644
--- a/src/ui/sections/projectSection.ts
+++ b/src/ui/sections/projectSection.ts
@@ -76,7 +76,11 @@ export function buildProjectSection(
   // themselves (`advancedToggle.ts`).
   addAdvancedToggle(folder, 'advancedProject', ctx);
 
-  for (const [group, settings] of grouped(ctx.advanced, [CONFIG, WORLD])) {
+  // Project now shares the right-hand drawer with Preferences, whose tier is
+  // `ctx.advanced`. Resolve Project's own tier explicitly so the two toggles
+  // stay independent after a drawer rebuild.
+  const advanced = ctx.advancedFor('advancedProject');
+  for (const [group, settings] of grouped(advanced, [CONFIG, WORLD])) {
     // `group` is never empty for these entries -- every CONFIG/WORLD setting
     // declares one -- but the fallback keeps a future ungrouped entry from
     // producing a folder with no title rather than crashing.
diff --git a/src/ui/sections/settingsSection.ts b/src/ui/sections/settingsSection.ts
index 482c29f..8c0c967 100644
--- a/src/ui/sections/settingsSection.ts
+++ b/src/ui/sections/settingsSection.ts
@@ -46,17 +46,11 @@ import {
 import type { LinkSettings } from '../../config/urlOptions.ts';
 
 /**
- * The Project tab. **TOUCH ONLY, and first in the strip when it exists.**
+ * The Project tab, first in the unified settings drawer on every viewport.
  *
- * On the desktop Project is a PANEL, not a tab -- it lives in its own column on
- * the left, because it is a different kind of state from the other three (see
- * `panelModel.ts`) and the split down the middle of the screen says so. A phone
- * has no middle to split: two 320px columns do not fit in 390px, so the touch
- * layout drops the left panel and Project joins this strip instead.
- *
- * FIRST because it is what the other three are settings ABOUT -- the project is
- * the work, and the rest is how the editor is arranged around it. It is also
- * the tab a user opens the panel to reach most often.
+ * Project is what the other tabs configure, so leading with it gives the
+ * drawer a stable information hierarchy without restoring a second desktop
+ * column over the culture.
  */
 export const PROJECT_TAB = 'project';
 export const PREFS_TAB = 'preferences';
@@ -150,12 +144,11 @@ export function buildSettingsSection(
    */
   recording?: RecordingSectionOptions,
   /**
-   * Build the Project page as a fourth tab. Touch layouts only.
+   * Build the Project page as the first tab in the unified drawer.
    *
-   * True ONLY when there is no left panel to hold it -- the two are the same
-   * decision seen from opposite ends, and having both would put Project on
-   * screen twice with two sets of live bindings writing the same fields.
-   * `panelModel.leftSections` is the other half.
+   * True only when no separate panel holds it; having both would put two sets
+   * of live bindings on the same fields. `panelModel.leftSections` is the other
+   * half of that invariant.
    */
   project?: boolean,
   /**
@@ -170,7 +163,7 @@ export function buildSettingsSection(
   // the tabs with no clue why.
   hideFolderTitle(folder);
 
-  // The Project page, FIRST in the strip and touch-only. See `PROJECT_TAB`.
+  // The Project page, FIRST in the strip. See `PROJECT_TAB`.
   //
   // **ITS TITLE IS NOT SUPPRESSED, unlike every other page here.**
   // `projectSection` retitles this folder to `Project: <name>` and keeps it
@@ -289,7 +282,7 @@ export function buildSettingsSection(
   // Anchoring on the element we actually placed cannot drift that way.
   //
   // **THE ANCHOR IS WHICHEVER PAGE IS FIRST, not Preferences by name.** Project
-  // is built ahead of it on touch, so anchoring on `prefsFolder` would leave the
+  // is built ahead of it, so anchoring on `prefsFolder` would leave the
   // strip BELOW the Project page -- tabs in the middle of the panel, under the
   // page they switch. The two must stay in step, which is why this reads the
   // same "is there a project folder" the tab list above reads.
@@ -342,7 +335,7 @@ export function buildSettingsSection(
     // bindings the left panel would have contributed on the desktop, and the
     // panel resolves reveals and gates across the whole list -- so leaving them
     // out would make every `revealsOn` and `requires` on a Project control
-    // silently stop working on touch.
+    // silently stop working in the unified drawer.
     bindings: [
       ...(projectSection?.bindings ?? []),
       ...prefs.bindings,
@@ -427,8 +420,8 @@ function hideFolderTitle(folder: FolderApi): void {
  * programmatically-selected tab visible without one.
  */
 const STRIP_CSS =
-  'display:flex;gap:2px;padding:6px 4px 2px 4px;' +
-  'border-bottom:1px solid rgba(255,255,255,0.10);margin-bottom:4px;' +
+  'display:flex;gap:4px;padding:8px 6px 4px;' +
+  'border-bottom:1px solid #c4cac7;margin-bottom:6px;' +
   'overflow-x:auto;scrollbar-width:none;';
 
 /**
@@ -441,11 +434,11 @@ const STRIP_CSS =
  */
 const TAB_BASE_CSS =
   'flex:1 1 0;min-width:0;border:0;border-radius:4px 4px 0 0;cursor:pointer;' +
-  'font:11px system-ui,sans-serif;padding:6px 6px;white-space:nowrap;' +
+  'font:650 13px system-ui,sans-serif;padding:10px 8px;white-space:nowrap;' +
   'overflow:hidden;text-overflow:ellipsis;';
 
-const TAB_IDLE_CSS = `${TAB_BASE_CSS}background:transparent;color:rgba(232,232,234,0.6);`;
+const TAB_IDLE_CSS = `${TAB_BASE_CSS}background:transparent;color:#68716f;`;
 
 const TAB_ACTIVE_CSS =
-  `${TAB_BASE_CSS}background:rgba(255,255,255,0.10);color:#e8e8ea;` +
-  'box-shadow:inset 0 -2px 0 #8ab4f8;';
+  `${TAB_BASE_CSS}background:#e4e9e7;color:#273033;` +
+  'box-shadow:inset 0 -3px 0 #526b78;';
diff --git a/src/ui/splash.ts b/src/ui/splash.ts
index 76f6d9a..7541bc6 100644
--- a/src/ui/splash.ts
+++ b/src/ui/splash.ts
@@ -87,7 +87,7 @@ type Block = string | readonly string[] | typeof DIVIDER;
  */
 export type Variant = 'welcome' | 'guide' | 'controls';
 
-const WELCOME_HEADING = 'Welcome to Fluoddity!';
+const WELCOME_HEADING = 'Welcome to Agar Protocol';
 
 /**
  * The first-run copy. FIVE LINES, and it should stay that way.
@@ -97,60 +97,54 @@ const WELCOME_HEADING = 'Welcome to Fluoddity!';
  * away and says so on the last line.
  */
 const WELCOME_BODY: readonly Block[] = [
-  'Part interactive lava lamp, part evolvable ant farm — in Fluoddity ' +
-    'thousands of particles interact through pheromone-like trails they leave ' +
-    'behind as they move.',
+  'Cultivate evolving digital lineages in a live petri dish. Each cohort shares ' +
+    'a behavior, leaves a trail, and responds to the culture around it.',
   [
-    'See something you like? Click on it and you can generate children with ' +
-      'similar behaviors.',
-    'Try thumbing through the presets with File → Load to see some ' +
-      'possibilities!',
-    'Press (H) or go to Help → Guide for details; press (?) or Help → ' +
-      'Controls for the list of keys.',
+    'Drag the dish to pan. Scroll or pinch to zoom. Click or tap a cohort to isolate it.',
+    'Archive a lineage from the DNA-marked Collection drawer, then select records ' +
+      'and inoculate a fresh culture.',
+    'Open Project for presets and saves; use the gear for settings. Help → Controls ' +
+      'has the complete gesture and keyboard reference.',
   ],
 ];
 
 const GUIDE_HEADING = 'Guide';
 
 const GUIDE_BODY: readonly Block[] = [
-  'Basics',
+  'Cultivate',
   [
-  'There is no fixed particle behavior in Fluoddity. Instead, each particle ' +
-    'has a simple brain that it uses to process local trail ' +
-    'conditions and decide how to behave.' ,
-    'Groups of particles, called cohorts, all share the same behavior.',
-  ],  "There's a lot to explore in Fluoddity! But most of the time, all you'll need is File->Save/Load "+
-  "and the main control bar at the top of the screen."+
-  ' Most actions have hotkeys indicated by parentheses and any action that'+
-  ' changes a project can be undone with (Z).',
-  'Press ? or go to Help → Controls for the full list of keys and mouse tools.',
+    'There is no fixed particle behavior. Each particle has a small brain that ' +
+      'responds to nearby trails; particles in one cohort share the same behavior.',
+    'Start from Project → Load, then adjust Mutation Scale and reroll until a ' +
+      'cohort catches your eye.',
+  ],
   DIVIDER,
-  "Getting Started:",
-  "Go to File->Load and select a preset that appeals to you. Diversity and Medley can be good places to start exploring. Click on a cohort that you want to see more of, or reroll all the current mutations with (F). In Fluoddity, there is always current set of brain parameters that act as the 'parent'. If you reduce mutation scale to 0, all the particles will behave exactly as the parent did. Selecting a cohort and generating children allows you to set a new parent and see a new crop mutations of it.",
+  'Isolate',
+  'Choose Observe, click or tap a cohort, then generate children. The selected ' +
+    'behavior becomes the parent and every cohort receives a new variation of it.',
   DIVIDER,
-  "Tips:",
-  ["I like to start at 16 or 4 cohorts (press the buttons to the far left of the mutation slider) and reduce down to 1 once I've found something I like.",
-    "I usually set Mutation rate somewhere between 0.1 and 0.3 when I'm exploring",
-    "Set/Load checkpoints with (C)/(V) so that you can experiment without losing your place.",
-    "Enable cohort fences if you want to keep the cohorts from mixing together (Click the dotted circle button to the left of the mutation bar).",
-    "File->Save your favorite creations or turn them into shareable urls with Share->Copy Link to this Project"
+  'Archive and curate',
+  [
+    'Open Collection with the DNA icon and archive the current parent or selected cohort.',
+    'Add notes while the motion is fresh. Records stay in this browser.',
+    'Select up to eight archived records, choose offspring variation, and inoculate ' +
+      'a new multi-lineage culture.',
   ],
   DIVIDER,
-  'Understanding the algorithm:',
-  "Particles in Fluoddity have no direct interactions with each-other. Instead, they leave trails as they move. These trails decay and diffuse over time. Particles respond to the density and direction of trails around them. There is no fixed rule that determines how particles respond to their senses: Each particle has a simple neural-net like brain which determines how the particle responds to stimuli.",
-  "Those responses take the form of:",
-  ["A force which cause the the particle to accelerate/brake/turn.",
-    "A so called 'strafe', like a little hop, which direcltly shifts particle position without changing it's velocity."
+  'Good working habits',
+  [
+    'Four or sixteen cohorts make broad exploration easy; reduce to one when refining.',
+    'Mutation Scale around 0.1–0.3 is a useful starting range, not a rule.',
+    'Use checkpoints before a risky branch and Project → Save for keepers.',
+    'Cohort fences keep lineages from mixing while you compare them.',
   ],
-  "Each cohort has a unique mutation of the current parent brain, causing their behaviors to diverge for nonzero Mutation scale.",
-  "Learn More:",
+  DIVIDER,
+  'Learn more',
   [
-  "Fluoddity is an extension of the classic Physarum model which you can read about in this excellent Sage Jenson blog post: https://cargocollective.com/sagejenson/physarum",
-  "This github readme page contains many more details on how this system expands on traditional Physarum simulations:"+
-  "https://github.com/aphid91/Fluoddity",
-  "This website was written almost entirely by Claude 5 Opus. It is open source at https://github.com/aphid91/Fluoddity-Web"
-  ]
-
+    'Agar Protocol extends a classic Physarum trail model: https://cargocollective.com/sagejenson/physarum',
+    'Original simulation and technical background: https://github.com/aphid91/Fluoddity',
+    'Web engine source: https://github.com/aphid91/Fluoddity-Web',
+  ],
 ];
 
 const CONTROLS_HEADING = 'Controls';
@@ -161,17 +155,17 @@ const CONTROLS_HEADING = 'Controls';
  * have to scroll past the algorithm to reach it.
  */
 const CONTROLS_BODY: readonly Block[] = [
-  'Press X or click the gear icon to toggle the control panels:',
+  'Workspace drawers',
   [
-    'The panel on the right shows your editor and tool preferences.',
-    'The panel on the left shows your current project. These values are stored ' +
-      'and loaded by File → Save/Load, along with particle behavior and ' +
-      'mutations.',
+    'The culture icon opens Project, Share, History, Run, and live culture controls.',
+    'The DNA icon opens Collection for archiving and inoculating specimens.',
+    'The gear opens one readable settings drawer with Project, Preferences, and Drawing tabs.',
+    'Only one drawer stays open at a time; press X to close or reopen Settings.',
   ],
   DIVIDER,
   'Keyboard controls',
   [
-    'WASD: pan camera',
+    'WASD or primary-drag in Observe: pan camera',
     'Q/E/Scroll wheel: zoom camera',
     'X: toggle hide UI',
     '? or /: Display this window',
@@ -202,21 +196,19 @@ const CONTROLS_BODY: readonly Block[] = [
   ],
   DIVIDER,
   'Mouse controls',
-  'Tool: Select',
-  'See something you like? Click on a particle to select its cohort: all the ' +
-    'particles with which it shares behavior. Click it again, press enter, or use '+
-    'the yellow button on the hint bar to confirm selection and set the chosen cohort '+
-    'as the new parent. Each cohort will take on a unique mutation of that parent. ' +
-    'This process can be repeated, making it possible to explore the ' +
-    'space of possible behaviors. When in select mode, right click is mapped ' +
-    'to undo.',
-
-  'Tool: Shove',
-  'Hold left mouse to push particles away from your cursor. Hold right mouse ' +
-    'to pull them in.',
-
-  'Tool: Draw',
-  'Left click to draw barriers that repel particles. Right click to erase.',
+  [
+    'Observe: click a cohort to select it; drag empty or occupied dish space to pan.',
+    'Shove: hold primary to push and secondary to pull particles.',
+    'Draw: hold primary to paint barriers and secondary to erase.',
+    'Middle-drag pans in every tool. Scroll zooms toward the pointer in every tool.',
+  ],
+  DIVIDER,
+  'Touch controls',
+  [
+    'Observe: tap to select, drag to pan, and pinch to pan and zoom.',
+    'Draw or Shove: the active tool owns a one-finger drag; use two fingers to navigate.',
+    'The bottom bar keeps Pause, Mutation Scale, culture actions, and Settings in thumb reach.',
+  ],
 ];
 
 /** Blocks that are a bold sub-heading rather than body copy. */
diff --git a/src/ui/workspaceDrawer.ts b/src/ui/workspaceDrawer.ts
new file mode 100644
index 0000000..5d841da
--- /dev/null
+++ b/src/ui/workspaceDrawer.ts
@@ -0,0 +1,22 @@
+/** The three substantial work surfaces that can cover the culture vessel. */
+export type WorkspaceDrawer = 'culture' | 'specimens' | 'settings';
+
+const DRAWER_EVENT = 'fluoddity:workspace-drawer-open';
+
+/** Announce that a drawer has opened so the other surfaces can make room. */
+export function announceWorkspaceDrawer(drawer: WorkspaceDrawer): void {
+  window.dispatchEvent(new CustomEvent<WorkspaceDrawer>(DRAWER_EVENT, { detail: drawer }));
+}
+
+/** Close a surface when a different workspace drawer opens. */
+export function closeWhenWorkspaceDrawerChanges(
+  owner: WorkspaceDrawer,
+  close: () => void,
+): () => void {
+  const listener = (event: Event): void => {
+    const drawer = (event as CustomEvent<WorkspaceDrawer>).detail;
+    if (drawer !== owner) close();
+  };
+  window.addEventListener(DRAWER_EVENT, listener);
+  return () => window.removeEventListener(DRAWER_EVENT, listener);
+}
diff --git a/tools/browserCheck.mjs b/tools/browserCheck.mjs
index ee12cde..d0b8148 100644
--- a/tools/browserCheck.mjs
+++ b/tools/browserCheck.mjs
@@ -56,6 +56,7 @@ function withNoCalibrate(q) {
 const shotPath = flag('--shot', null);
 const settleMs = Number(flag('--settle', '4000'));
 const port = Number(flag('--port', '5173'));
+const appUrl = `http://localhost:${port}/${query}`;
 
 const userDataDir = mkdtempSync(path.join(tmpdir(), 'fluoddity-cdp-'));
 let chrome = null;
@@ -98,7 +99,7 @@ chrome = spawn(
     '--disable-features=Translate,MediaRouter',
     '--enable-unsafe-webgpu',
     '--window-size=1280,800',
-    `http://localhost:${port}/${query}`,
+    appUrl,
   ],
   { stdio: ['ignore', 'pipe', 'pipe'] },
 );
@@ -162,8 +163,23 @@ const send = (method, params = {}, sessionId) => {
   return new Promise((resolve) => pending.set(id, resolve));
 };
 
-const { result: targets } = await send('Target.getTargets');
-const page = targets.targetInfos.find((t) => t.type === 'page');
+// Chrome for Testing reports its browser endpoint before it has necessarily
+// created the requested page. Wait for the app target instead of racing target
+// creation or attaching to a transient about:blank page.
+const page = await (async () => {
+  const deadline = Date.now() + 5000;
+  let fallback;
+  while (Date.now() < deadline) {
+    const { result: targets } = await send('Target.getTargets');
+    fallback ??= targets.targetInfos.find((t) => t.type === 'page');
+    const app = targets.targetInfos.find(
+      (t) => t.type === 'page' && t.url.startsWith(`http://localhost:${port}/`),
+    );
+    if (app !== undefined) return app;
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  }
+  return fallback;
+})();
 if (page === undefined) fail('No page target -- Chrome opened no tab.');
 
 const attach = await send('Target.attachToTarget', {
@@ -174,8 +190,9 @@ const sessionId = attach.result.sessionId;
 
 await send('Runtime.enable', {}, sessionId);
 await send('Page.enable', {}, sessionId);
-// Reload so Runtime.enable is in place before the app's own startup logging.
-await send('Page.reload', { ignoreCache: true }, sessionId);
+// Navigate explicitly after Runtime.enable. Chrome for Testing can expose the
+// requested URL in target metadata before the page itself has left about:blank.
+await send('Page.navigate', { url: appUrl }, sessionId);
 
 await new Promise((r) => setTimeout(r, settleMs));
 
@@ -196,7 +213,7 @@ for (const { level, text } of logs) {
 }
 
 if (logs.length === 0) {
-  fail('\nNo console output at all -- is `npm run dev` running?');
+  fail(`\nNo console output at all from ${appUrl} -- is \`npm run dev\` running?`);
 }
 
 const errors = logs.filter((l) => l.level === 'error' || /FAILED/.test(l.text));
diff --git a/tools/uiCheck.mjs b/tools/uiCheck.mjs
index 57ac181..e4578a7 100644
--- a/tools/uiCheck.mjs
+++ b/tools/uiCheck.mjs
@@ -1,5 +1,5 @@
 /**
- * THE PANEL'S BROWSER VERIFICATION: the gated latch, and the reveal toggle.
+ * THE UI'S REAL-POINTER VERIFICATION: canvas navigation and control wiring.
  *
  * WHY THIS IS NOT `npm test`. Every assertion here needs a real pointer gesture
  * against real Tweakpane DOM. `node --test` has no DOM at all, so the pure rules
@@ -12,6 +12,9 @@
  *
  * ## What it checks
  *
+ *   PASS 0  DIRECT NAVIGATION. Primary-drag pans in Observe, the wheel zooms,
+ *           and middle-drag pans while a drawing tool is active.
+ *
  *   PASS 1  THE GATED LATCH. Press a gated slider, drag it to its base value,
  *           and assert it is STILL VISIBLE while the button is down -- then
  *           release and assert it folded back to a checkbox and the value landed
@@ -35,6 +38,12 @@
  *           but not exactly onto base must store EXACTLY base, so that "is it
  *           off?" stays unambiguous rather than "within epsilon".
  *
+ *   PASS 4  THE UNIFIED DRAWER. Project, Preferences and Draw share one visible
+ *           host, preserve manual tab choices, and rebuild the correct tier.
+ *
+ *   PASS 5  THE BIPOLAR GATE. A gravity slider remains reachable while a held
+ *           pointer crosses zero in both directions.
+ *
  *   PASS 6  FOCUS RELEASE. Drag a slider, then press a hotkey and assert the app
  *           actually received it. Tweakpane focuses the slider TRACK on
  *           mousedown and keeps it after the drag, so the panel silently held
@@ -70,6 +79,7 @@ const flag = (name, fallback) => {
   return i === -1 ? fallback : argv[i + 1];
 };
 const port = Number(flag('--port', '5173'));
+const appUrl = `http://localhost:${port}/?bus&preset=hatmanv8&nocalibrate&nosplash`;
 
 const userDataDir = mkdtempSync(path.join(tmpdir(), 'fluoddity-ui-'));
 let chrome = null;
@@ -122,7 +132,7 @@ chrome = spawn(
     // `?nocalibrate` because this reads preference values back and asserts on
     // them: first-run calibration writes worldSize and physicsSteps from a GPU
     // measurement, which would make those assertions depend on the runner.
-    `http://localhost:${port}/?bus&preset=hatmanv8&nocalibrate`,
+    appUrl,
   ],
   { stdio: ['ignore', 'pipe', 'pipe'] },
 );
@@ -177,8 +187,23 @@ const send = (method, params = {}, sid) => {
   return new Promise((resolve) => pending.set(id, resolve));
 };
 
-const { result: targets } = await send('Target.getTargets');
-const page = targets.targetInfos.find((t) => t.type === 'page');
+// Chrome for Testing reports its browser endpoint before it has necessarily
+// created the requested page. Wait for the app target instead of racing target
+// creation or attaching to a transient about:blank page.
+const page = await (async () => {
+  const deadline = Date.now() + 5000;
+  let fallback;
+  while (Date.now() < deadline) {
+    const { result: targets } = await send('Target.getTargets');
+    fallback ??= targets.targetInfos.find((t) => t.type === 'page');
+    const app = targets.targetInfos.find(
+      (t) => t.type === 'page' && t.url.startsWith(`http://localhost:${port}/`),
+    );
+    if (app !== undefined) return app;
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  }
+  return fallback;
+})();
 if (page === undefined) die('No page target -- Chrome opened no tab.');
 
 const attach = await send('Target.attachToTarget', {
@@ -189,6 +214,7 @@ const sid = attach.result.sessionId;
 
 await send('Runtime.enable', {}, sid);
 await send('Page.enable', {}, sid);
+await send('Page.navigate', { url: appUrl }, sid);
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 await sleep(6000);
 
@@ -341,11 +367,99 @@ const resetViewState = async () => {
 // ===========================================================================
 // PASS 1 -- the gated latch
 // ===========================================================================
-console.log('\nPASS 1: the gated latch (press, drag to base, hold, release)\n');
-
 // Before anything asserts: the tiers persist, so start from first-run defaults
 // rather than from whatever the previous run left behind. See `resetViewState`.
 await resetViewState();
+
+// ===========================================================================
+// PASS 0 -- direct canvas navigation
+// ===========================================================================
+console.log('\nPASS 0: direct canvas navigation\n');
+
+await evaluate(`window.__fluoddity.dispatch({ kind: 'setMouseMode', mode: 'select' })`);
+await sleep(200);
+const navStart = await evaluate(`(() => {
+  const canvas = document.getElementById('app');
+  const r = canvas.getBoundingClientRect();
+  const camera = window.__fluoddity.cameraState;
+  return { x: r.x + r.width / 2, y: r.y + r.height / 2,
+    pan: [...camera.pan], zoom: camera.zoom };
+})()`);
+
+await mouse('mousePressed', navStart.x, navStart.y);
+await mouse('mouseMoved', navStart.x + 84, navStart.y + 42);
+await mouse('mouseReleased', navStart.x + 84, navStart.y + 42, 0);
+await sleep(300);
+const afterPrimaryPan = await evaluate(`[...window.__fluoddity.cameraState.pan]`);
+if (afterPrimaryPan.some((v, i) => Math.abs(v - navStart.pan[i]) > 1e-6)) {
+  pass('Observe drag pans the camera');
+} else {
+  fail('Observe drag left the camera pan unchanged');
+}
+
+await send(
+  'Input.dispatchMouseEvent',
+  { type: 'mouseWheel', x: navStart.x, y: navStart.y, deltaX: 0, deltaY: 120 },
+  sid,
+);
+await sleep(300);
+const afterWheelZoom = await evaluate(`window.__fluoddity.cameraState.zoom`);
+if (Math.abs(afterWheelZoom - navStart.zoom) > 1e-6) {
+  pass(`wheel zoom changed magnification ${navStart.zoom} -> ${afterWheelZoom}`);
+} else {
+  fail('wheel input left camera zoom unchanged');
+}
+
+await evaluate(`window.__fluoddity.dispatch({ kind: 'setMouseMode', mode: 'draw' })`);
+await sleep(200);
+const beforeMiddlePan = await evaluate(`[...window.__fluoddity.cameraState.pan]`);
+await send(
+  'Input.dispatchMouseEvent',
+  { type: 'mousePressed', x: navStart.x, y: navStart.y, button: 'middle', buttons: 4 },
+  sid,
+);
+await send(
+  'Input.dispatchMouseEvent',
+  { type: 'mouseMoved', x: navStart.x - 66, y: navStart.y + 28, button: 'middle', buttons: 4 },
+  sid,
+);
+await send(
+  'Input.dispatchMouseEvent',
+  { type: 'mouseReleased', x: navStart.x - 66, y: navStart.y + 28,
+    button: 'middle', buttons: 0 },
+  sid,
+);
+await sleep(300);
+const afterMiddlePan = await evaluate(`[...window.__fluoddity.cameraState.pan]`);
+if (afterMiddlePan.some((v, i) => Math.abs(v - beforeMiddlePan[i]) > 1e-6)) {
+  pass('middle drag pans while Draw is active');
+} else {
+  fail('middle drag did not pan while Draw was active');
+}
+await evaluate(`window.__fluoddity.dispatch({ kind: 'setMouseMode', mode: 'select' })`);
+await sleep(200);
+
+console.log('\nPASS 1: the gated latch (press, drag to base, hold, release)\n');
+
+// The canvas-first shell starts with settings closed. Open it through the same
+// launcher a user clicks so every pointer assertion below exercises visible
+// controls rather than a hidden-but-queryable Tweakpane tree.
+const settingsOpened = await evaluate(`(() => {
+  const drawer = document.getElementById('fluoddity-panel-right');
+  if (drawer && getComputedStyle(drawer).display !== 'none') return true;
+  const launcher = document.getElementById('fluoddity-settings-launcher');
+  if (!(launcher instanceof HTMLButtonElement)) return false;
+  launcher.click();
+  return true;
+})()`);
+if (!settingsOpened) die('No Settings launcher -- the selector is stale.');
+await sleep(500);
+
+// Project used to live in an always-visible left pane. It is now a tab in the
+// unified drawer, so bring that tab forward before exercising Project fields.
+await evaluate(`document.querySelector('[data-tab="project"]')?.click()`);
+await sleep(300);
+
 await goAdvanced();
 
 // Sensor Angle Jitter: GATED, base 0.0, plain (no curve, no inversion), 0..1,
@@ -452,6 +566,22 @@ const STRAFE = 'config.gravityStrafe';
 
 if ((await visible(GATE)) !== 'shown') die('The Gravity gate is not on screen.');
 
+// The selected preset may carry gravity. Normalize the three members so this
+// pass tests the closed -> revealed transition rather than inheriting content
+// state from whichever specimen happened to load.
+for (const [field, label, value] of [
+  ['gravityStrafe', 'Gravity (Strafe)', 0],
+  ['gravityForce', 'Gravity (Force)', 0],
+  ['radialGravity', 'Radial Gravity', false],
+]) {
+  await evaluate(
+    `window.__fluoddity.dispatch({ kind: 'editSetting',
+       setting: { field: '${field}', source: 'config', label: '${label}' },
+       value: ${JSON.stringify(value)} })`,
+  );
+}
+await sleep(700);
+
 const before = await visible(STRAFE);
 if (before === 'hidden' || before === 'absent') {
   pass('gravity sliders start hidden with both values at zero');
@@ -540,9 +670,9 @@ if (clearedStrafe === 0 && clearedForce === 0) {
 }
 
 // ===========================================================================
-// PASS 4 -- the two panels: per-panel tiers, the tool-driven tabs, the overlay
+// PASS 4 -- the unified drawer: per-section tiers, tool-driven tabs, overlay
 // ===========================================================================
-console.log('\nPASS 4: the two panels, the tabs, and the overlay\n');
+console.log('\nPASS 4: the unified drawer, the tabs, and the overlay\n');
 
 /**
  * Which tab the strip says is active, by its accent underline.
@@ -556,9 +686,9 @@ console.log('\nPASS 4: the two panels, the tabs, and the overlay\n');
 const activeTab = () =>
   evaluate(`(() => {
     const all = [...document.querySelectorAll('[data-tab]')];
-    if (all.length !== 2) return \`expected 2 tabs, found \${all.length}\`;
+    if (all.length !== 3) return \`expected 3 tabs, found \${all.length}\`;
     const shown = all.filter((b) => b.offsetParent !== null);
-    if (shown.length !== 2) return \`only \${shown.length} of 2 tabs are visible\`;
+    if (shown.length !== 3) return \`only \${shown.length} of 3 tabs are visible\`;
     const on = shown.filter((b) => b.style.boxShadow && b.style.boxShadow !== 'none');
     return on.length === 1 ? on[0].dataset.tab : \`ambiguous:\${on.length}\`;
   })()`);
@@ -571,18 +701,20 @@ const setTool = async (mode) => {
   await sleep(300);
 };
 
-// --- both panels exist, on the sides they claim ---------------------------
-const sides = await evaluate(`(() => {
+// --- the legacy left host is retired and one drawer owns every tab ---------
+const shell = await evaluate(`(() => {
   const l = document.getElementById('fluoddity-panel-left');
   const r = document.getElementById('fluoddity-panel-right');
   if (!l || !r) return 'missing';
-  const lr = l.getBoundingClientRect(), rr = r.getBoundingClientRect();
-  return lr.x < rr.x ? 'ok' : 'swapped';
+  if (l.offsetParent !== null || l.querySelector('[data-section]')) return 'left-active';
+  if (getComputedStyle(r).display === 'none' || r.getBoundingClientRect().width === 0)
+    return 'drawer-hidden';
+  return r.querySelectorAll('[data-tab]').length === 3 ? 'ok' : 'tabs-missing';
 })()`);
-if (sides === 'ok') {
-  pass('two panels, Project left and Settings right');
+if (shell === 'ok') {
+  pass('one visible settings drawer owns Project, Preferences, and Draw');
 } else {
-  fail(`the two panels are "${sides}"`);
+  fail(`the unified settings shell is "${shell}"`);
 }
 
 // --- the parked sections are parked ---------------------------------------
@@ -608,6 +740,8 @@ if (parked === '') {
 // control that ONLY EXISTS in Advanced.
 const ADV_ONLY = 'prefs.tonemapSoftness';
 await goAdvanced('advancedPreferences');
+await evaluate(`document.querySelector('[data-tab="preferences"]')?.click()`);
+await sleep(200);
 if ((await visible(ADV_ONLY)) === 'shown') {
   pass('ticking Advanced REBUILT the panel, not just the preference');
 } else {
@@ -631,6 +765,8 @@ if (tiers[0] === true && tiers[1] === true && tiers[2] === false) {
 }
 
 // --- the tabs follow the tool, as a TRANSITION ----------------------------
+await evaluate(`document.querySelector('[data-tab="preferences"]')?.click()`);
+await sleep(200);
 await setTool('select');
 const t0 = await activeTab();
 await setTool('shove');
@@ -668,9 +804,12 @@ const overlay = await evaluate(`(() => {
   const slider = root.querySelector('[data-setting="config.mutationScale"]');
   const button = root.querySelector('[data-setting="config.mutationSeed.randomize"]');
   if (!slider || !button) return 'incomplete';
-  // The root must not eat canvas drags: it spans the full width to centre its
-  // contents, so only the bar inside it may take the pointer.
-  if (getComputedStyle(root).pointerEvents !== 'none') return 'pointer-trap';
+  // On touch this is the fixed canvas bar, whose root must pass drags through.
+  // On desktop it is re-homed inside the bounded Culture drawer, where taking
+  // pointers is intentional; a collapsed drawer keeps it out of hit testing.
+  const rack = root.closest('#fluoddity-control-rack');
+  if (rack === null && getComputedStyle(root).pointerEvents !== 'none')
+    return 'pointer-trap';
   return 'ok';
 })()`);
 if (overlay === 'ok') {
@@ -679,15 +818,15 @@ if (overlay === 'ok') {
   fail(`the mutation overlay is "${overlay}"`);
 }
 
-// Mutation Scale must NOT also be in the Project panel -- one control, one place.
+// Mutation Scale must NOT also be in the settings drawer -- one control, one place.
 const inPanel = await evaluate(`(() => {
-  const left = document.getElementById('fluoddity-panel-left');
-  return left?.querySelector('[data-setting="config.mutationScale"]') !== null;
+  return [...document.querySelectorAll('#fluoddity-panel-left, #fluoddity-panel-right')]
+    .some((panel) => panel.querySelector('[data-setting="config.mutationScale"]'));
 })()`);
 if (!inPanel) {
-  pass('Mutation Scale is only in the overlay, not also in the Project panel');
+  pass('Mutation Scale is only in the overlay, not also in the settings drawer');
 } else {
-  fail('Mutation Scale is in BOTH the overlay and the Project panel');
+  fail('Mutation Scale is in BOTH the overlay and the settings drawer');
 }
 
 // The Reroll button drives the same command the old Randomize did.
@@ -726,6 +865,8 @@ if (seedBefore !== seedAfter) {
 console.log('\nPASS 5: dragging a gravity slider across zero\n');
 
 await setTool('select');
+await evaluate(`document.querySelector('[data-tab="project"]')?.click()`);
+await sleep(200);
 
 // Re-tick the gate: PASS 2 left it unticked and its fields zeroed.
 if ((await visible(GATE)) !== 'shown') die('The Gravity gate is not on screen.');
@@ -803,6 +944,9 @@ if (Math.abs(restingValue) < 0.02 && gateAfter === false) {
  */
 console.log('\nPASS 6: focus release (drag a slider, then use the keyboard)\n');
 
+await evaluate(`document.querySelector('[data-tab="preferences"]')?.click()`);
+await sleep(200);
+
 /** Where focus is, as a short label -- the panel marker is what actually matters. */
 const focusReport = () =>
   evaluate(`(() => {
@@ -900,7 +1044,7 @@ await mouse('mousePressed', fieldBox.x, fieldBox.y);
 await mouse('mouseReleased', fieldBox.x, fieldBox.y, 0);
 await sleep(250);
 const afterClick = await focusReport();
-if (afterClick === 'PANEL:input') {
+if (afterClick.startsWith('PANEL:input')) {
   pass('clicking into a writable number field KEPT focus (it stays typable)');
 } else {
   fail(

From da6afb87985706d8fbdab5883df9c52be46dd787 Mon Sep 17 00:00:00 2001
From: Alireza Afshan <yesterdayslemon@yahoo.com>
Date: Wed, 2 Sep 2026 14:12:59 -0700
Subject: [PATCH 2/2] feat: refine direct dish controls and workspace dock

---
 src/camera/cameraState.test.ts  |  34 +++
 src/camera/cameraState.ts       |  21 ++
 src/lab/cultureConsole.ts       |  58 +++++-
 src/lab/dishOrientation.test.ts |  20 ++
 src/lab/dishOrientation.ts      |  36 ++++
 src/lab/specimenLab.css         | 357 ++++++++++++++++++++++++++++++++
 src/lab/specimenLab.ts          | 324 +++++++++++++++++++++++++++--
 src/lab/specimens.test.ts       |  15 ++
 src/lab/specimens.ts            |  17 ++
 src/ui/inputBinding.ts          |  26 +--
 src/ui/touchBinding.ts          |  21 +-
 src/ui/workspaceDrawer.ts       |   7 +-
 tools/uiCheck.mjs               | 225 +++++++++++++++++++-
 13 files changed, 1099 insertions(+), 62 deletions(-)
 create mode 100644 src/lab/dishOrientation.test.ts
 create mode 100644 src/lab/dishOrientation.ts

diff --git a/src/camera/cameraState.test.ts b/src/camera/cameraState.test.ts
index ae81724..51889c6 100644
--- a/src/camera/cameraState.test.ts
+++ b/src/camera/cameraState.test.ts
@@ -26,6 +26,7 @@ import {
   type Vec2,
   type WindowSize,
   screenToWorld,
+  worldToScreenNdc,
   worldHalfExtent,
 } from '../particleSystem/coords.ts';
 import { PARITY, assertClose, assertCloseVec2, pair } from '../testing/parity.ts';
@@ -301,6 +302,39 @@ test('dish rotation normalizes, nudges, and rejects non-finite values', () => {
   assertClose(camera.rotation, -Math.PI + ROTATION_STEP, 'NaN is refused');
 });
 
+test('dish-centred rotation preserves the world origin after panning', () => {
+  const camera = new CameraState({ pan: [0.62, -0.37], zoom: 2.4, rotation: 0.35 });
+  const before = worldToScreenNdc(
+    [0, 0],
+    CANVAS,
+    WINDOW,
+    camera.pan,
+    camera.zoom,
+    camera.rotation,
+  );
+
+  camera.setRotationAroundWorldOrigin(-1.1);
+
+  const after = worldToScreenNdc(
+    [0, 0],
+    CANVAS,
+    WINDOW,
+    camera.pan,
+    camera.zoom,
+    camera.rotation,
+  );
+  assertCloseVec2(after, before, 'the dish centre must not precess while rotating');
+});
+
+test('dish-centred rotation rejects non-finite values without changing pan', () => {
+  const camera = new CameraState({ pan: [0.4, -0.2], rotation: 0.5 });
+  const beforePan = camera.pan;
+  camera.setRotationAroundWorldOrigin(Number.NaN);
+  camera.rotateAroundWorldOriginBy(Number.POSITIVE_INFINITY);
+  assert.deepEqual(camera.pan, beforePan);
+  assertClose(camera.rotation, 0.5, 'invalid rotation is refused');
+});
+
 // ---------------------------------------------------------------------------
 // Mode and reset
 // ---------------------------------------------------------------------------
diff --git a/src/camera/cameraState.ts b/src/camera/cameraState.ts
index d1c394f..5fbe326 100644
--- a/src/camera/cameraState.ts
+++ b/src/camera/cameraState.ts
@@ -301,6 +301,27 @@ export class CameraState {
     this.setRotation(this.rotation + radians);
   }
 
+  /**
+   * Rotate the view without letting the world origin orbit across the screen.
+   *
+   * The culture vessel is centred on world [0, 0]. A plain `setRotation`
+   * rotates an existing pan vector with the scene, so a vessel that has been
+   * panned away from screen centre appears to precess. Counter-rotating the pan
+   * by the camera delta preserves the origin's exact screen coordinate.
+   */
+  setRotationAroundWorldOrigin(rotation: number): void {
+    if (!Number.isFinite(rotation)) return;
+    const before = this.rotation;
+    this.setRotation(rotation);
+    this.pan = rotateVec2(this.pan, before - this.rotation);
+  }
+
+  /** Nudge orientation while keeping world [0, 0] fixed on screen. */
+  rotateAroundWorldOriginBy(radians: number): void {
+    if (!Number.isFinite(radians) || radians === 0.0) return;
+    this.setRotationAroundWorldOrigin(this.rotation + radians);
+  }
+
   toggleMode(): void {
     this.mode = nextCameraMode(this.mode);
   }
diff --git a/src/lab/cultureConsole.ts b/src/lab/cultureConsole.ts
index 7ad42c8..03f24dc 100644
--- a/src/lab/cultureConsole.ts
+++ b/src/lab/cultureConsole.ts
@@ -7,6 +7,11 @@
  */
 
 import { ROTATION_STEP, type CameraState } from '../camera/cameraState.ts';
+import {
+  DISH_ROTATION_EVENT,
+  rotateDishBy,
+  setDishRotation,
+} from './dishOrientation.ts';
 import {
   announceWorkspaceDrawer,
   closeWhenWorkspaceDrawerChanges,
@@ -21,6 +26,15 @@ const MENU_LABELS: Readonly<Record<string, string>> = Object.freeze({
   Help: 'Help',
 });
 
+const CULTURE_ICON =
+  '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">' +
+    '<path d="M3.5 3.5h17v17h-17z"></path>' +
+    '<circle cx="12" cy="12" r="6.3"></circle>' +
+    '<circle cx="9.3" cy="10.1" r="1"></circle>' +
+    '<circle cx="14.8" cy="11.4" r=".8"></circle>' +
+    '<circle cx="12.2" cy="15.1" r="1.15"></circle>' +
+  '</svg>';
+
 function block(label: string, index: string, className: string): HTMLDivElement {
   const root = document.createElement('div');
   root.className = className;
@@ -90,6 +104,16 @@ function arrangeMutationControls(mutation: HTMLElement): void {
   if (context instanceof HTMLElement) context.classList.add('culture-context');
 }
 
+/** Touch keeps its compact mutation bar, but Settings belongs in the launcher dock. */
+function detachMobileSettingsLauncher(mutation: HTMLElement): void {
+  const launcher = mutation.querySelector<HTMLElement>(
+    '[data-setting="transport.toggleUi"]',
+  );
+  if (launcher === null) return;
+  launcher.id = 'fluoddity-settings-launcher';
+  document.body.append(launcher);
+}
+
 function dishOrientation(camera: CameraState): HTMLDivElement {
   const root = block('Dish orientation', '01.B', 'culture-control-block culture-orientation');
   const controls = document.createElement('div');
@@ -125,21 +149,22 @@ function dishOrientation(camera: CameraState): HTMLDivElement {
     readout.value = `${degrees >= 0 ? '+' : ''}${degrees}°`;
   };
   left.addEventListener('click', () => {
-    camera.rotateBy(ROTATION_STEP);
+    rotateDishBy(camera, ROTATION_STEP);
     sync();
   });
   right.addEventListener('click', () => {
-    camera.rotateBy(-ROTATION_STEP);
+    rotateDishBy(camera, -ROTATION_STEP);
     sync();
   });
   slider.addEventListener('input', () => {
-    camera.setRotation((Number(slider.value) * Math.PI) / 180);
+    setDishRotation(camera, (Number(slider.value) * Math.PI) / 180);
     sync();
   });
   reset.addEventListener('click', () => {
-    camera.setRotation(0);
+    setDishRotation(camera, 0);
     sync();
   });
+  window.addEventListener(DISH_ROTATION_EVENT, sync);
 
   controls.append(left, slider, right, reset, readout);
   root.append(controls);
@@ -167,11 +192,7 @@ export function installCultureConsole(mobile: boolean, camera: CameraState): voi
     '<header class="culture-console-head">' +
       '<button class="culture-console-mark culture-console-toggle" type="button" ' +
         'aria-label="Collapse culture controls" aria-expanded="true">' +
-        '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">' +
-          '<circle cx="12" cy="12" r="8.5"></circle>' +
-          '<ellipse cx="12" cy="12" rx="6" ry="2.7"></ellipse>' +
-          '<path d="M6.6 12v2.5c0 1.5 2.4 2.8 5.4 2.8s5.4-1.3 5.4-2.8V12"></path>' +
-        '</svg>' +
+        CULTURE_ICON +
       '</button>' +
       '<span><small>PROCEDURE CONTROL / NODE 01</small><strong>Culture operations</strong></span>' +
       '<code>01</code>' +
@@ -201,6 +222,8 @@ export function installCultureConsole(mobile: boolean, camera: CameraState): voi
     arrangeMutationControls(mutation);
     manipulationHost.append(mutation);
     manipulation.append(manipulationHost);
+  } else {
+    detachMobileSettingsLauncher(mutation);
   }
 
   const telemetry = block('Run telemetry', '03', 'culture-console-section culture-telemetry');
@@ -221,8 +244,20 @@ export function installCultureConsole(mobile: boolean, camera: CameraState): voi
   document.body.append(rack);
 
   const collapse = rack.querySelector<HTMLButtonElement>('.culture-console-toggle');
+  const launcher = document.createElement('button');
+  launcher.id = 'fluoddity-culture-launcher';
+  launcher.className = 'workspace-launcher';
+  launcher.type = 'button';
+  launcher.setAttribute('aria-controls', rack.id);
+  launcher.innerHTML = CULTURE_ICON;
+  document.body.append(launcher);
+
   const setCollapsed = (collapsed: boolean): void => {
     rack.classList.toggle('is-collapsed', collapsed);
+    launcher.setAttribute('aria-expanded', String(!collapsed));
+    launcher.setAttribute('aria-pressed', String(!collapsed));
+    launcher.title = collapsed ? 'Open culture controls' : 'Collapse culture controls';
+    launcher.setAttribute('aria-label', launcher.title);
     if (collapse === null) return;
     collapse.setAttribute('aria-expanded', String(!collapsed));
     collapse.title = collapsed ? 'Open culture controls' : 'Collapse culture controls';
@@ -236,6 +271,11 @@ export function installCultureConsole(mobile: boolean, camera: CameraState): voi
     setCollapsed(collapsed);
     if (!collapsed) announceWorkspaceDrawer('culture');
   });
+  launcher.addEventListener('click', () => {
+    const collapsed = !rack.classList.contains('is-collapsed');
+    setCollapsed(collapsed);
+    if (!collapsed) announceWorkspaceDrawer('culture');
+  });
   // Keep the culture observable on every viewport; its launcher is always one
   // click away and expands to the same control surface.
   setCollapsed(true);
diff --git a/src/lab/dishOrientation.test.ts b/src/lab/dishOrientation.test.ts
new file mode 100644
index 0000000..711367d
--- /dev/null
+++ b/src/lab/dishOrientation.test.ts
@@ -0,0 +1,20 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import { compactAngleDelta, rotationFromBearingDrag } from './dishOrientation.ts';
+
+const close = (actual: number, expected: number): void => {
+  assert.ok(Math.abs(actual - expected) < 1e-10, `${actual} != ${expected}`);
+};
+
+test('bearing drag follows the shortest angle across the turn boundary', () => {
+  const nearPositivePi = Math.PI - 0.05;
+  const nearNegativePi = -Math.PI + 0.08;
+  close(compactAngleDelta(nearPositivePi, nearNegativePi), 0.13);
+  close(compactAngleDelta(nearNegativePi, nearPositivePi), -0.13);
+});
+
+test('dragging the visible bearing clockwise rotates the camera oppositely', () => {
+  close(rotationFromBearingDrag(0.4, -Math.PI / 2, 0), 0.4 - Math.PI / 2);
+  close(rotationFromBearingDrag(-0.2, Math.PI - 0.1, -Math.PI + 0.1), -0.4);
+});
diff --git a/src/lab/dishOrientation.ts b/src/lab/dishOrientation.ts
new file mode 100644
index 0000000..5ba59ff
--- /dev/null
+++ b/src/lab/dishOrientation.ts
@@ -0,0 +1,36 @@
+import type { CameraState } from '../camera/cameraState.ts';
+
+/** One shared notification keeps the rim handle and the drawer readout in sync. */
+export const DISH_ROTATION_EVENT = 'fluoddity:dish-rotation';
+
+/** Compact an angular difference so crossing -pi/pi does not flip the dish. */
+export function compactAngleDelta(from: number, to: number): number {
+  const turn = Math.PI * 2;
+  return ((to - from + Math.PI) % turn + turn) % turn - Math.PI;
+}
+
+/**
+ * A bearing drawn on the dish rotates opposite the camera transform. Dragging
+ * that bearing clockwise therefore rotates the camera counter-clockwise.
+ */
+export function rotationFromBearingDrag(
+  startRotation: number,
+  startPointerAngle: number,
+  pointerAngle: number,
+): number {
+  return startRotation - compactAngleDelta(startPointerAngle, pointerAngle);
+}
+
+export function announceDishRotation(): void {
+  window.dispatchEvent(new Event(DISH_ROTATION_EVENT));
+}
+
+export function setDishRotation(camera: CameraState, radians: number): void {
+  camera.setRotationAroundWorldOrigin(radians);
+  announceDishRotation();
+}
+
+export function rotateDishBy(camera: CameraState, radians: number): void {
+  camera.rotateAroundWorldOriginBy(radians);
+  announceDishRotation();
+}
diff --git a/src/lab/specimenLab.css b/src/lab/specimenLab.css
index c9212d9..611ed9c 100644
--- a/src/lab/specimenLab.css
+++ b/src/lab/specimenLab.css
@@ -1219,3 +1219,360 @@ html.fluoddity-console:not(.fluoddity-touch) #fluoddity-panel-right {
   .lab-arena { position:static; }
   .lab-shelf { grid-template-columns:repeat(2,minmax(0,1fr)); }
 }
+
+/* -------------------------------------------------------------------------
+   2026 direct-manipulation pass: one stage, one launcher dock
+   ------------------------------------------------------------------------- */
+
+/* The canvas remains visually clipped, while this hit plane makes the whole
+   pale work surface pan/zoomable. Real controls all sit above z-index 3. */
+#fluoddity-stage-input {
+  position:fixed;
+  inset:0;
+  z-index:3;
+  touch-action:none;
+  cursor:grab;
+}
+#fluoddity-stage-input:active { cursor:grabbing; }
+#fluoddity-stage-input[data-tool='draw'],
+#fluoddity-stage-input[data-tool='shove'] { cursor:crosshair; }
+
+/* The visible bearing is now a real, forgiving drag target. */
+#fluoddity-dish-orient {
+  position:fixed;
+  z-index:5;
+  display:grid;
+  width:42px;
+  height:42px;
+  box-sizing:border-box;
+  place-items:center;
+  padding:0;
+  border:0;
+  background:transparent;
+  transform:translate(-50%,-50%);
+  touch-action:none;
+  cursor:grab;
+}
+#fluoddity-dish-orient > span {
+  display:block;
+  width:12px;
+  height:12px;
+  box-sizing:border-box;
+  border:2px solid #526b78;
+  background:#f8f9f8;
+  box-shadow:0 0 0 3px rgba(248,249,248,.78),0 2px 6px rgba(31,38,39,.25);
+  transform:rotate(45deg);
+}
+#fluoddity-dish-orient:hover > span,
+#fluoddity-dish-orient:focus-visible > span,
+#fluoddity-dish-orient.is-dragging > span { background:#dce4e7;border-color:#324d5a; }
+#fluoddity-dish-orient:focus-visible { outline:1px solid #526b78;outline-offset:-4px; }
+#fluoddity-dish-orient.is-dragging { cursor:grabbing; }
+
+/* A compact cohort palette appears beside the vessel only while one is lit. */
+#fluoddity-cohort-actions {
+  position:fixed;
+  z-index:13;
+  width:246px;
+  box-sizing:border-box;
+  color:var(--lab-ink);
+  border:1px solid #8f9996;
+  border-radius:1px;
+  background:#f8f9f8;
+  box-shadow:8px 10px 26px rgba(31,38,39,.16),inset 0 1px #fff;
+  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
+}
+#fluoddity-cohort-actions[hidden] { display:none; }
+#fluoddity-cohort-actions > header {
+  position:relative;
+  display:grid;
+  gap:3px;
+  padding:11px 42px 10px 12px;
+  border-bottom:1px solid var(--lab-line-strong);
+  background:linear-gradient(90deg,rgba(82,107,120,.07) 0 5px,transparent 5px),#f5f7f6;
+}
+#fluoddity-cohort-actions > header > span,
+#fluoddity-cohort-actions > section > strong {
+  color:#6b7472;
+  font:750 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
+  letter-spacing:.11em;
+}
+#fluoddity-cohort-actions > header > strong { font-size:17px;font-weight:680; }
+.cohort-action-close {
+  position:absolute;
+  top:8px;
+  right:8px;
+  width:32px;
+  height:32px;
+  padding:0;
+  color:#5d6664;
+  border:1px solid #c0c6c3;
+  border-radius:0;
+  background:#eef1ef;
+  font:500 20px/1 system-ui,sans-serif;
+}
+.cohort-direct-actions { display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 12px; }
+.cohort-direct-actions button,
+.cohort-restart,
+.cohort-count-stepper button,
+.cohort-count-stepper input {
+  min-height:40px;
+  box-sizing:border-box;
+  border:1px solid #aeb6b3;
+  border-radius:0;
+  background:#eef1ef;
+  color:#354044;
+  font:700 11px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
+}
+.cohort-mutate,.cohort-restart { color:#fff !important;border-color:#415863 !important;background:#526b78 !important; }
+.cohort-direct-actions button:hover:not(:disabled),
+.cohort-restart:hover,
+.cohort-count-stepper button:hover,
+.cohort-action-close:hover { border-color:#657b84;background:#fff;color:#26363d; }
+.cohort-save:disabled { opacity:.42;cursor:not-allowed; }
+#fluoddity-cohort-actions > section {
+  display:grid;
+  gap:8px;
+  padding:11px 12px 12px;
+  border-top:1px solid #d5d9d7;
+  background:#f1f3f2;
+}
+#fluoddity-cohort-actions label {
+  display:grid;
+  grid-template-columns:76px 1fr;
+  align-items:center;
+  gap:8px;
+  color:#5c6563;
+  font-size:11px;
+  font-weight:650;
+}
+.cohort-count-stepper { display:grid;grid-template-columns:38px minmax(44px,1fr) 38px; }
+.cohort-count-stepper > * + * { border-left:0; }
+.cohort-count-stepper input { width:100%;padding:0 3px;text-align:center;background:#fff; }
+.cohort-count-stepper input::-webkit-inner-spin-button { display:none; }
+.cohort-restart { width:100%; }
+
+/* The symbols are the marks now; the old crosshair fill read as a stray plus. */
+.lab-mark,
+.culture-console-mark { border-radius:0;background:#edf1ef; }
+.lab-mark svg { transform:none; }
+.lab-mark svg,
+.culture-console-mark svg { width:24px;height:24px;stroke-width:1.55; }
+#fluoddity-control-rack #fluoddity-menubar [data-menu]::after { content:none;display:none; }
+
+/* All three launchers share one bottom-right dock. Open drawers terminate above
+   the dock and size to their content until the viewport cap is reached. */
+#fluoddity-control-rack {
+  top:auto;
+  right:16px;
+  bottom:80px;
+  left:auto;
+  max-height:calc(100dvh - 112px);
+  height:auto;
+  border-radius:1px;
+}
+#fluoddity-control-rack.is-collapsed {
+  top:auto;
+  right:144px;
+  bottom:16px;
+  left:auto;
+}
+#fluoddity-specimen-lab {
+  top:auto !important;
+  right:16px !important;
+  bottom:80px !important;
+  left:auto !important;
+  height:auto;
+  max-height:calc(100dvh - 112px) !important;
+  border-radius:1px;
+}
+#fluoddity-specimen-lab.is-collapsed {
+  top:auto !important;
+  right:16px !important;
+  bottom:16px !important;
+  left:auto !important;
+}
+#fluoddity-settings-launcher {
+  top:auto;
+  right:80px;
+  bottom:16px;
+  border-radius:0 !important;
+}
+#fluoddity-settings-launcher[aria-pressed='true'] {
+  background:#dce4e7 !important;
+  box-shadow:inset 0 -3px #526b78,0 7px 18px rgba(31,38,39,.12) !important;
+}
+html.fluoddity-console:not(.fluoddity-touch) #fluoddity-panel-right {
+  top:auto !important;
+  right:16px !important;
+  bottom:80px !important;
+  width:min(440px,calc(100vw - 32px)) !important;
+  max-height:calc(100dvh - 112px) !important;
+  border-radius:1px;
+}
+#fluoddity-panel-left .tp-dfwv,
+#fluoddity-panel-right .tp-dfwv,
+dialog[id^='fluoddity-'] { border-radius:1px !important; }
+
+/* Keep every legacy label readable inside the narrower procedure rack. */
+.culture-orientation { margin-top:0; }
+.culture-orientation-controls {
+  grid-template-columns:44px minmax(82px,1fr) 44px 48px;
+  gap:5px;
+  padding:4px 10px 10px;
+}
+.culture-orientation-controls button { height:38px;font-size:10px; }
+.culture-orientation-controls input[type='range'] { min-width:0; }
+.culture-orientation-controls output {
+  grid-column:1 / -1;
+  min-height:18px;
+  padding:3px 5px;
+  border-left:3px solid #526b78;
+  background:#eef1ef;
+  text-align:left;
+  font-size:11px;
+}
+.culture-orientation-reset { grid-column:auto; }
+.culture-context span { overflow-wrap:anywhere; }
+
+@media (max-width:900px) {
+  #fluoddity-control-rack.is-mobile:not(.is-collapsed),
+  #fluoddity-specimen-lab:not(.is-collapsed) {
+    top:auto !important;
+    right:8px !important;
+    bottom:calc(var(--fluoddity-bar-height,72px) + 72px) !important;
+    left:8px !important;
+    max-height:calc(100dvh - var(--fluoddity-bar-height,72px) - 88px) !important;
+    height:auto;
+    border-radius:1px;
+  }
+  #fluoddity-control-rack.is-mobile.is-collapsed {
+    top:auto;
+    right:136px;
+    bottom:calc(var(--fluoddity-bar-height,72px) + 8px);
+    left:auto;
+  }
+  #fluoddity-specimen-lab.is-collapsed {
+    top:auto !important;
+    right:8px !important;
+    bottom:calc(var(--fluoddity-bar-height,72px) + 8px) !important;
+  }
+  #fluoddity-settings-launcher {
+    top:auto;
+    right:72px;
+    bottom:calc(var(--fluoddity-bar-height,72px) + 8px);
+  }
+  #fluoddity-panel-right {
+    top:auto !important;
+    right:8px !important;
+    bottom:calc(var(--fluoddity-bar-height,72px) + 72px) !important;
+    left:8px !important;
+    width:auto !important;
+    max-height:calc(100dvh - var(--fluoddity-bar-height,72px) - 88px) !important;
+    height:auto;
+  }
+  #fluoddity-cohort-actions { width:min(272px,calc(100vw - 20px)); }
+  .cohort-direct-actions button,
+  .cohort-restart,
+  .cohort-count-stepper button,
+  .cohort-count-stepper input { min-height:44px;font-size:13px; }
+  .cohort-action-close { width:36px;height:36px; }
+  #fluoddity-dish-orient { width:48px;height:48px; }
+}
+
+/* Culture and Collection now use persistent launchers, like Settings. Opening
+   a drawer no longer pulls its square out of the dock. */
+.workspace-launcher {
+  position:fixed;
+  z-index:35;
+  bottom:16px;
+  display:grid;
+  width:56px;
+  height:56px;
+  box-sizing:border-box;
+  place-items:center;
+  padding:0;
+  color:var(--lab-accent);
+  border:1px solid #8f9996;
+  border-radius:0;
+  background:#f5f7f6;
+  box-shadow:0 7px 18px rgba(31,38,39,.12),inset 0 1px #fff;
+  cursor:pointer;
+}
+.workspace-launcher svg {
+  width:24px;
+  height:24px;
+  stroke:currentColor;
+  stroke-width:1.55;
+  stroke-linecap:round;
+  stroke-linejoin:round;
+}
+#fluoddity-culture-launcher { right:144px; }
+#fluoddity-specimen-launcher { right:16px; }
+#fluoddity-control-rack.is-collapsed,
+#fluoddity-specimen-lab.is-collapsed { display:none !important; }
+
+/* Launcher state is deliberately crisp and shared. The former width/bottom
+   tweens made each cabinet appear to wobble out of a different corner. */
+#fluoddity-control-rack,
+#fluoddity-specimen-lab,
+#fluoddity-panel-right { transition:none !important; }
+
+#fluoddity-culture-launcher,
+#fluoddity-specimen-launcher,
+#fluoddity-settings-launcher,
+.lab-mark,
+.culture-console-mark {
+  transition:border-color 100ms linear,background-color 100ms linear,box-shadow 100ms linear !important;
+}
+
+#fluoddity-culture-launcher:hover,
+#fluoddity-culture-launcher:focus-visible,
+#fluoddity-specimen-launcher:hover,
+#fluoddity-specimen-launcher:focus-visible,
+#fluoddity-settings-launcher:hover,
+#fluoddity-settings-launcher:focus-visible {
+  border-color:#526b78 !important;
+  background:#fff !important;
+  box-shadow:0 0 0 2px rgba(82,107,120,.13),0 7px 18px rgba(31,38,39,.12) !important;
+}
+
+#fluoddity-control-rack:not(.is-collapsed) .culture-console-mark,
+#fluoddity-specimen-lab:not(.is-collapsed) .lab-mark,
+#fluoddity-culture-launcher[aria-pressed='true'],
+#fluoddity-specimen-launcher[aria-pressed='true'],
+#fluoddity-settings-launcher[aria-pressed='true'] {
+  border-color:#526b78 !important;
+  background:#dce4e7 !important;
+  box-shadow:inset 0 -3px #526b78 !important;
+}
+
+#fluoddity-stage-input,
+#fluoddity-petri-dish,
+#fluoddity-dish-orient,
+#fluoddity-cohort-actions,
+#fluoddity-control-rack,
+#fluoddity-specimen-lab,
+#fluoddity-culture-launcher,
+#fluoddity-specimen-launcher,
+#fluoddity-settings-launcher { user-select:none; }
+
+#fluoddity-cohort-actions input,
+#fluoddity-control-rack input,
+#fluoddity-specimen-lab input,
+#fluoddity-specimen-lab textarea { user-select:text; }
+
+/* Tweakpane's root still carried its own rounded shell inside our angular
+   Settings host. Flatten that inner cabinet so all three drawers agree. */
+#fluoddity-panel-right .tp-rotv,
+#fluoddity-panel-right .tp-rotv_b { border-radius:0 !important; }
+#fluoddity-panel-right > .tp-rotv {
+  border:1px solid #aeb5b2;
+  box-shadow:0 8px 24px rgba(31,38,39,.14),inset 0 1px #fff;
+}
+
+@media (max-width:900px) {
+  .workspace-launcher { bottom:calc(var(--fluoddity-bar-height,72px) + 8px); }
+  #fluoddity-culture-launcher { right:136px; }
+  #fluoddity-specimen-launcher { right:8px; }
+}
diff --git a/src/lab/specimenLab.ts b/src/lab/specimenLab.ts
index c9a9a39..db980e9 100644
--- a/src/lab/specimenLab.ts
+++ b/src/lab/specimenLab.ts
@@ -3,6 +3,7 @@ import type { CameraState } from '../camera/cameraState.ts';
 import {
   announceWorkspaceDrawer,
   closeWhenWorkspaceDrawerChanges,
+  dismissWorkspaceDrawers,
 } from '../ui/workspaceDrawer.ts';
 import { worldToScreenNdc } from '../particleSystem/coords.ts';
 import { captureRegion, imageToCanvas } from '../ui/shareCapture.ts';
@@ -14,9 +15,15 @@ import {
   editSpecimen,
   loadSpecimens,
   saveSpecimens,
+  specimenSourceWithRule,
   type Specimen,
   type SpecimenSource,
 } from './specimens.ts';
+import {
+  rotateDishBy,
+  rotationFromBearingDrag,
+  setDishRotation,
+} from './dishOrientation.ts';
 import './specimenLab.css';
 
 export interface SpecimenLabOptions {
@@ -26,6 +33,13 @@ export interface SpecimenLabOptions {
   readonly canvasSize: () => readonly [number, number];
 }
 
+const SPECIMEN_ICON =
+  '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">' +
+    '<path d="M3.5 3.5h17v17h-17z"></path>' +
+    '<path d="M7 5.5l10 4.2-10 4.6 10 4.2M17 5.5L7 9.7l10 4.6-10 4.2"></path>' +
+    '<path d="M9.5 7h5M8.2 12h7.6M9.5 17h5"></path>' +
+  '</svg>';
+
 function button(label: string, className: string): HTMLButtonElement {
   const el = document.createElement('button');
   el.type = 'button';
@@ -93,13 +107,28 @@ function shortDate(iso: string): string {
   }
 }
 
+function pointerAngle(event: PointerEvent, center: readonly [number, number]): number {
+  return Math.atan2(event.clientY - center[1], event.clientX - center[0]);
+}
+
+function cohortCount(value: string, fallback: number): number {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? Math.max(1, Math.min(64, Math.round(parsed))) : fallback;
+}
+
 /** The naturalist layer around the existing select-and-mutate simulation. */
 export class SpecimenLab {
   private readonly bus: CommandBus;
   private readonly canvas: HTMLCanvasElement;
   private readonly camera: () => CameraState;
   private readonly canvasSize: () => readonly [number, number];
+  private readonly stage: HTMLElement;
   private readonly dish: HTMLElement;
+  private readonly orientationHandle: HTMLButtonElement;
+  private readonly cohortPalette: HTMLElement;
+  private readonly cohortPaletteTitle: HTMLElement;
+  private readonly cohortSave: HTMLButtonElement;
+  private readonly cohortCountInput: HTMLInputElement;
   private readonly root: HTMLElement;
   private readonly body: HTMLElement;
   private readonly shelf: HTMLElement;
@@ -124,6 +153,8 @@ export class SpecimenLab {
   private pendingSource: SpecimenSource | null = null;
   private editingId: string | null = null;
   private lastGeneration = -1;
+  private lastHighlightedCohort = -1;
+  private latestStatus: Status | null = null;
   private toastTimer = 0;
 
   constructor(opts: SpecimenLabOptions) {
@@ -138,6 +169,14 @@ export class SpecimenLab {
       this.storage = null;
     }
 
+    // The canvas is clipped into a circle, which also clips its browser hit
+    // region. This transparent workspace owns stage gestures across the pale
+    // area while leaving every real control above it clickable.
+    this.stage = document.createElement('div');
+    this.stage.id = 'fluoddity-stage-input';
+    this.stage.setAttribute('aria-hidden', 'true');
+    document.body.append(this.stage);
+
     this.dish = document.createElement('div');
     this.dish.id = 'fluoddity-petri-dish';
     this.dish.setAttribute('aria-hidden', 'true');
@@ -148,6 +187,80 @@ export class SpecimenLab {
       '<span class="dish-scale">Ø 0.86 · SEALED FIELD</span>';
     document.body.append(this.dish);
 
+    this.orientationHandle = document.createElement('button');
+    this.orientationHandle.id = 'fluoddity-dish-orient';
+    this.orientationHandle.type = 'button';
+    this.orientationHandle.title = 'Drag to rotate the dish';
+    this.orientationHandle.setAttribute('aria-label', 'Drag to rotate the dish');
+    this.orientationHandle.innerHTML = '<span aria-hidden="true"></span>';
+    this.bindOrientationHandle();
+    document.body.append(this.orientationHandle);
+
+    this.cohortPalette = document.createElement('aside');
+    this.cohortPalette.id = 'fluoddity-cohort-actions';
+    this.cohortPalette.hidden = true;
+    this.cohortPalette.setAttribute('aria-label', 'Selected cohort actions');
+    const cohortHead = document.createElement('header');
+    const cohortEyebrow = document.createElement('span');
+    cohortEyebrow.textContent = 'ISOLATED COHORT';
+    this.cohortPaletteTitle = document.createElement('strong');
+    const cohortClose = button('×', 'cohort-action-close');
+    cohortClose.setAttribute('aria-label', 'Cancel cohort selection');
+    cohortClose.addEventListener('click', () => this.bus.dispatch({ kind: 'cancelSelection' }));
+    cohortHead.append(cohortEyebrow, this.cohortPaletteTitle, cohortClose);
+
+    const directActions = document.createElement('div');
+    directActions.className = 'cohort-direct-actions';
+    this.cohortSave = button('Save', 'cohort-save');
+    this.cohortSave.addEventListener('click', () => void this.openSelectedCapture());
+    const mutate = button('Mutate', 'cohort-mutate');
+    mutate.addEventListener('click', () => this.bus.dispatch({ kind: 'confirmSelection' }));
+    directActions.append(this.cohortSave, mutate);
+
+    const cohortPlan = document.createElement('section');
+    const cohortPlanTitle = document.createElement('strong');
+    cohortPlanTitle.textContent = 'NEW COHORT ARRAY';
+    const countLabel = document.createElement('label');
+    countLabel.textContent = 'How many?';
+    const stepper = document.createElement('div');
+    stepper.className = 'cohort-count-stepper';
+    const less = button('−', 'cohort-count-less');
+    less.setAttribute('aria-label', 'Use one fewer cohort');
+    this.cohortCountInput = document.createElement('input');
+    this.cohortCountInput.type = 'number';
+    this.cohortCountInput.min = '1';
+    this.cohortCountInput.max = '64';
+    this.cohortCountInput.step = '1';
+    this.cohortCountInput.inputMode = 'numeric';
+    this.cohortCountInput.setAttribute('aria-label', 'How many cohorts');
+    const more = button('+', 'cohort-count-more');
+    more.setAttribute('aria-label', 'Use one more cohort');
+    const step = (delta: number): void => {
+      const fallback = this.latestStatus?.cohortCount ?? 1;
+      this.cohortCountInput.value = String(
+        cohortCount(this.cohortCountInput.value, fallback) + delta,
+      );
+      this.cohortCountInput.value = String(
+        cohortCount(this.cohortCountInput.value, fallback),
+      );
+    };
+    less.addEventListener('click', () => step(-1));
+    more.addEventListener('click', () => step(1));
+    stepper.append(less, this.cohortCountInput, more);
+    countLabel.append(stepper);
+    const restart = button('Restart dish', 'cohort-restart');
+    restart.addEventListener('click', () => {
+      const fallback = this.latestStatus?.cohortCount ?? 1;
+      const cohorts = cohortCount(this.cohortCountInput.value, fallback);
+      this.cohortCountInput.value = String(cohorts);
+      this.bus.dispatch({ kind: 'cancelSelection' });
+      this.bus.dispatch({ kind: 'setPopulationLayout', cohorts });
+    });
+    cohortPlan.append(cohortPlanTitle, countLabel, restart);
+    this.cohortPalette.append(cohortHead, directActions, cohortPlan);
+    document.body.append(this.cohortPalette);
+    this.bindStageDismissal();
+
     const startsCollapsed = true;
     this.root = document.createElement('aside');
     this.root.id = 'fluoddity-specimen-lab';
@@ -160,31 +273,42 @@ export class SpecimenLab {
     heading.className = 'lab-heading';
     heading.innerHTML =
       '<button class="lab-mark lab-toggle" type="button" aria-label="Collapse specimen shelf" aria-expanded="true">' +
-        '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">' +
-          '<path d="M7 2.5c0 5.2 10 5.2 10 9.5S7 16.3 7 21.5M17 2.5c0 5.2-10 5.2-10 9.5s10 4.3 10 9.5"></path>' +
-          '<path d="M8.1 5.5h7.8M7.3 9h9.4M7.3 15h9.4M8.1 18.5h7.8"></path>' +
-        '</svg>' +
+        SPECIMEN_ICON +
       '</button>' +
       '<span><small>SPECIMEN ARCHIVE / NODE 02</small><strong>Lineage registry</strong></span>';
     this.shelfCount = document.createElement('span');
     this.shelfCount.className = 'lab-count';
     const collapse = heading.querySelector<HTMLButtonElement>('.lab-toggle')!;
-    collapse.title = startsCollapsed ? 'Open specimen shelf' : 'Collapse specimen shelf';
-    collapse.setAttribute('aria-label', collapse.title);
-    collapse.setAttribute('aria-expanded', String(!startsCollapsed));
-    collapse.addEventListener('click', () => {
-      const collapsed = this.root.classList.toggle('is-collapsed');
-      collapse.title = collapsed ? 'Open specimen shelf' : 'Collapse specimen shelf';
-      collapse.setAttribute('aria-label', collapse.title);
+    const launcher = document.createElement('button');
+    launcher.id = 'fluoddity-specimen-launcher';
+    launcher.className = 'workspace-launcher';
+    launcher.type = 'button';
+    launcher.setAttribute('aria-controls', this.root.id);
+    launcher.innerHTML = SPECIMEN_ICON;
+
+    const setCollapsed = (collapsed: boolean): void => {
+      this.root.classList.toggle('is-collapsed', collapsed);
+      const label = collapsed ? 'Open specimen shelf' : 'Collapse specimen shelf';
+      collapse.title = label;
+      collapse.setAttribute('aria-label', label);
       collapse.setAttribute('aria-expanded', String(!collapsed));
+      launcher.title = label;
+      launcher.setAttribute('aria-label', label);
+      launcher.setAttribute('aria-expanded', String(!collapsed));
+      launcher.setAttribute('aria-pressed', String(!collapsed));
+    };
+    collapse.addEventListener('click', () => {
+      const collapsed = !this.root.classList.contains('is-collapsed');
+      setCollapsed(collapsed);
       if (!collapsed) announceWorkspaceDrawer('specimens');
     });
-    closeWhenWorkspaceDrawerChanges('specimens', () => {
-      this.root.classList.add('is-collapsed');
-      collapse.title = 'Open specimen shelf';
-      collapse.setAttribute('aria-label', collapse.title);
-      collapse.setAttribute('aria-expanded', 'false');
+    launcher.addEventListener('click', () => {
+      const collapsed = !this.root.classList.contains('is-collapsed');
+      setCollapsed(collapsed);
+      if (!collapsed) announceWorkspaceDrawer('specimens');
     });
+    closeWhenWorkspaceDrawerChanges('specimens', () => setCollapsed(true));
+    setCollapsed(startsCollapsed);
     header.append(heading, this.shelfCount);
 
     this.body = document.createElement('div');
@@ -263,7 +387,7 @@ export class SpecimenLab {
         '<strong>Fluoddity-Web</strong><small>Jesse Gelders · MIT License ↗</small>' +
       '</a>';
     this.root.append(header, this.body, attribution, this.toast);
-    document.body.append(this.root);
+    document.body.append(this.root, launcher);
 
     this.dialog = document.createElement('dialog');
     this.dialog.className = 'specimen-dialog';
@@ -321,8 +445,29 @@ export class SpecimenLab {
     this.renderShelf();
   }
 
+  /**
+   * Blank stage space is the natural escape target on both touch and desktop.
+   * Keep the dish itself interactive: only points outside its circular rim
+   * dismiss drawers and the selected-cohort palette.
+   */
+  private bindStageDismissal(): void {
+    this.stage.addEventListener('pointerdown', (event) => {
+      if (event.button !== 0) return;
+      const rect = this.dish.getBoundingClientRect();
+      const radius = Math.min(rect.width, rect.height) / 2;
+      const dx = event.clientX - (rect.left + rect.width / 2);
+      const dy = event.clientY - (rect.top + rect.height / 2);
+      if (dx * dx + dy * dy <= radius * radius) return;
+
+      dismissWorkspaceDrawers();
+      if (!this.cohortPalette.hidden) this.bus.dispatch({ kind: 'cancelSelection' });
+    });
+  }
+
   refresh(status: Status): void {
+    this.latestStatus = status;
     this.syncDishView();
+    this.syncCohortPalette(status);
     this.project.textContent = status.projectName;
     this.generation.textContent =
       status.lineageGeneration === 0
@@ -373,14 +518,145 @@ export class SpecimenLab {
     const radius = 0.43 * Math.min(rect.width, rect.height) * camera.zoom;
 
     this.canvas.style.clipPath = `circle(${radius}px at ${localX}px ${localY}px)`;
+    this.stage.dataset['tool'] = this.canvas.dataset['tool'] ?? 'select';
     this.dish.style.left = `${rect.left + localX}px`;
     this.dish.style.top = `${rect.top + localY}px`;
     this.dish.style.width = `${radius * 2}px`;
     this.dish.style.setProperty('--lab-dish-rotation', `${-camera.rotation}rad`);
+
+    const bearing = -camera.rotation - Math.PI / 2;
+    const reach = radius + 14;
+    this.orientationHandle.style.left = `${rect.left + localX + Math.cos(bearing) * reach}px`;
+    this.orientationHandle.style.top = `${rect.top + localY + Math.sin(bearing) * reach}px`;
+    this.orientationHandle.setAttribute(
+      'aria-label',
+      `Drag to rotate the dish. Current orientation ${Math.round((camera.rotation * 180) / Math.PI)} degrees`,
+    );
+  }
+
+  private bindOrientationHandle(): void {
+    let pointerId: number | null = null;
+    let center: readonly [number, number] = [0, 0];
+    let startPointerAngle = 0;
+    let startRotation = 0;
+
+    const finish = (event: PointerEvent): void => {
+      if (event.pointerId !== pointerId) return;
+      pointerId = null;
+      this.orientationHandle.classList.remove('is-dragging');
+    };
+
+    this.orientationHandle.addEventListener('pointerdown', (event) => {
+      if (event.button !== 0 || pointerId !== null) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const dishRect = this.dish.getBoundingClientRect();
+      center = [dishRect.left + dishRect.width / 2, dishRect.top + dishRect.height / 2];
+      startPointerAngle = pointerAngle(event, center);
+      startRotation = this.camera().rotation;
+      pointerId = event.pointerId;
+      this.orientationHandle.classList.add('is-dragging');
+      this.orientationHandle.setPointerCapture(event.pointerId);
+    });
+    this.orientationHandle.addEventListener('pointermove', (event) => {
+      if (event.pointerId !== pointerId) return;
+      const next = rotationFromBearingDrag(
+        startRotation,
+        startPointerAngle,
+        pointerAngle(event, center),
+      );
+      setDishRotation(this.camera(), next);
+    });
+    this.orientationHandle.addEventListener('pointerup', finish);
+    this.orientationHandle.addEventListener('pointercancel', finish);
+    this.orientationHandle.addEventListener('keydown', (event) => {
+      const camera = this.camera();
+      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+        event.preventDefault();
+        rotateDishBy(camera, event.key === 'ArrowLeft' ? Math.PI / 36 : -Math.PI / 36);
+      } else if (event.key === 'Home') {
+        event.preventDefault();
+        setDishRotation(camera, 0);
+      }
+    });
+  }
+
+  private syncCohortPalette(status: Status): void {
+    const shown = status.mouseMode === 'select' && status.highlightedCohort >= 0;
+    this.cohortPalette.hidden = !shown;
+    if (!shown) {
+      this.lastHighlightedCohort = -1;
+      return;
+    }
+
+    this.cohortPaletteTitle.textContent = `Cohort ${status.highlightedCohort + 1}`;
+    if (this.lastHighlightedCohort < 0) {
+      this.cohortCountInput.value = String(status.cohortCount);
+    }
+    this.lastHighlightedCohort = status.highlightedCohort;
+
+    const exactSelection =
+      status.selected?.cohort === status.highlightedCohort && status.selected.rule !== null;
+    this.cohortSave.disabled = !exactSelection;
+    this.cohortSave.title = exactSelection
+      ? 'Archive this selected cohort without replacing the dish'
+      : 'Click this cohort in the dish before saving it';
+
+    const canvasRect = this.canvas.getBoundingClientRect();
+    const dishRect = this.dish.getBoundingClientRect();
+    let anchorY = dishRect.top + Math.min(92, dishRect.height * 0.25);
+    if (status.selected !== null && status.selected.index >= 0) {
+      const ndc = worldToScreenNdc(
+        status.selected.pos,
+        this.canvasSize(),
+        [this.canvas.width, this.canvas.height],
+        this.camera().pan,
+        this.camera().zoom,
+        this.camera().rotation,
+      );
+      anchorY = canvasRect.top + ((1 - ndc[1]) * canvasRect.height) / 2 - 38;
+    }
+
+    const width = Math.max(236, this.cohortPalette.offsetWidth);
+    const height = Math.max(220, this.cohortPalette.offsetHeight);
+    const roomRight = window.innerWidth - dishRect.right;
+    const roomLeft = dishRect.left;
+    let left: number;
+    if (roomRight >= width + 20) left = dishRect.right + 12;
+    else if (roomLeft >= width + 20) left = dishRect.left - width - 12;
+    else left = window.innerWidth - width - 10;
+    const launcherClearance = window.innerWidth <= 900 ? 150 : 82;
+    const top = Math.max(10, Math.min(anchorY, window.innerHeight - height - launcherClearance));
+    this.cohortPalette.style.left = `${Math.max(10, left)}px`;
+    this.cohortPalette.style.top = `${top}px`;
+  }
+
+  private async openSelectedCapture(): Promise<void> {
+    const status = this.latestStatus;
+    const selected = status?.selected;
+    if (
+      status === null ||
+      selected == null ||
+      selected.rule === null ||
+      selected.cohort !== status.highlightedCohort
+    ) {
+      return;
+    }
+    await this.openCapture(selected.rule, status.highlightedCohort);
   }
 
-  private async openCapture(): Promise<void> {
-    const snapshot = this.bus.specimenSnapshot();
+  private async openCapture(
+    selectedRule: readonly number[] | null = null,
+    selectedCohort = -1,
+  ): Promise<void> {
+    const live = this.bus.specimenSnapshot();
+    const snapshot =
+      selectedRule === null
+        ? live
+        : specimenSourceWithRule(
+            { ...live, generation: live.generation + 1 },
+            selectedRule,
+          );
     this.captureButton.disabled = true;
     this.captureButton.textContent = 'Capturing…';
     const thumbnail = await captureThumbnail(this.canvas);
@@ -393,9 +669,15 @@ export class SpecimenLab {
     this.editingId = null;
     this.dialogTitle.textContent = 'Archive this lineage';
     const base = snapshot.projectName.replace(/^Specimen arena\s*[·-]?\s*/i, '').trim() || 'Specimen';
-    this.nameInput.value = `${base} ${String(this.specimens.length + 1).padStart(2, '0')}`;
+    this.nameInput.value =
+      selectedCohort >= 0
+        ? `${base} · cohort ${selectedCohort + 1}`
+        : `${base} ${String(this.specimens.length + 1).padStart(2, '0')}`;
     this.notesInput.value = '';
-    this.dialogMeta.textContent = `Generation ${snapshot.generation} · live genome snapshot`;
+    this.dialogMeta.textContent =
+      selectedCohort >= 0
+        ? `Generation ${snapshot.generation} · selected cohort ${selectedCohort + 1}`
+        : `Generation ${snapshot.generation} · live genome snapshot`;
     this.applyDialogPreview(this.pendingSource.thumbnail);
     this.dialog.showModal();
     this.nameInput.select();
diff --git a/src/lab/specimens.test.ts b/src/lab/specimens.test.ts
index 78504e0..76f53f6 100644
--- a/src/lab/specimens.test.ts
+++ b/src/lab/specimens.test.ts
@@ -17,6 +17,7 @@ import {
   loadSpecimens,
   ruleFingerprint,
   saveSpecimens,
+  specimenSourceWithRule,
   type Specimen,
 } from './specimens.ts';
 
@@ -70,6 +71,20 @@ test('a specimen fingerprint follows the exact uploaded f32 bytes', () => {
   assert.notEqual(ruleFingerprint(rule), ruleFingerprint([1 / 3, -0, Math.PI, 1e-30]));
 });
 
+test('a highlighted cohort can be archived without mutating the live parent', () => {
+  const parent = config(0);
+  const childRule = parent.rule.map((value, index) => value + index / 1000);
+  const source = specimenSourceWithRule(
+    { projectName: 'Corally', generation: 4, document: toDocument([parent], world) },
+    childRule,
+  );
+  const captured = createSpecimen(source, { name: 'Selected cohort', notes: '' }, {
+    id: 'selected', capturedAt: '2026-09-02T12:00:00.000Z',
+  });
+  assert.equal(captured.fingerprint, ruleFingerprint(childRule));
+  assert.notEqual(captured.fingerprint, ruleFingerprint(parent.rule));
+});
+
 test('capture canonicalizes one config and editing cannot change its fingerprint', () => {
   const captured = specimen(' Coral baby ');
   assert.equal(captured.name, 'Coral baby');
diff --git a/src/lab/specimens.ts b/src/lab/specimens.ts
index 290746c..2fc415c 100644
--- a/src/lab/specimens.ts
+++ b/src/lab/specimens.ts
@@ -46,6 +46,23 @@ export interface SpecimenDetails {
   readonly notes: string;
 }
 
+/** Replace only the captured lineage rule, leaving its physical traits intact. */
+export function specimenSourceWithRule(
+  source: SpecimenSource,
+  rule: readonly number[],
+): SpecimenSource {
+  const saved = fromDocument(source.document, 'selected cohort');
+  const config = saved.configs[0];
+  if (config === undefined) throw new Error('A selected cohort needs one configuration.');
+  if (rule.length !== config.rule.length || rule.some((value) => !Number.isFinite(value))) {
+    throw new Error('The selected cohort rule is incomplete.');
+  }
+  return {
+    ...source,
+    document: toDocument([{ ...config, rule: [...rule] }], saved.world, saved.notes),
+  };
+}
+
 interface KeyValueStorage {
   getItem(key: string): string | null;
   setItem(key: string, value: string): void;
diff --git a/src/ui/inputBinding.ts b/src/ui/inputBinding.ts
index 54ba1d4..bf22cff 100644
--- a/src/ui/inputBinding.ts
+++ b/src/ui/inputBinding.ts
@@ -118,19 +118,21 @@ export function bindInput(opts: InputBindingOptions): {
   } =
     opts;
   const canvas = surface.canvas;
+  const stage = document.getElementById('fluoddity-stage-input') ?? canvas;
   const tracker = new InputTracker();
   const table = opts.hotkeys ?? DEFAULT_HOTKEYS;
 
   /**
    * Whether an event belongs to the UI rather than the canvas.
    *
-   * The canvas is the only surface the simulation owns, so anything that is not
-   * on it is the UI's -- which covers the Tweakpane panel without this file
+   * The full stage is the surface the simulation owns. It may be the canvas
+   * itself, or the transparent workspace over the pale area around a clipped
+   * dish. Anything that is not on it is the UI's -- which covers the Tweakpane panel without this file
    * having to know the panel exists. (`#thin-panel` is `position: fixed`,
    * z-index 20; the `?debug` overlay is `pointer-events: none` and never
    * becomes a target at all.)
    */
-  const capturedByUi = (event: Event): boolean => event.target !== canvas;
+  const capturedByUi = (event: Event): boolean => event.target !== stage;
 
   /**
    * Whether this pointer belongs to the touch path instead of this one.
@@ -187,7 +189,7 @@ export function bindInput(opts: InputBindingOptions): {
       // canvas, which is the DOM's version of "a drag belongs to whoever
       // received the press". The tracker enforces that too; this makes the
       // browser cooperate rather than relying on the window listeners alone.
-      canvas.setPointerCapture(event.pointerId);
+      stage.setPointerCapture(event.pointerId);
       if (event.button === MIDDLE_BUTTON) event.preventDefault();
     }
     // `shiftKey` from the pointer event itself: Shift+Right-click is redo, and
@@ -324,10 +326,10 @@ export function bindInput(opts: InputBindingOptions): {
     tracker.onFocusLost();
   };
 
-  canvas.addEventListener('pointerdown', onPointerDown);
-  canvas.addEventListener('wheel', onWheel, { passive: false });
-  canvas.addEventListener('contextmenu', onContextMenu);
-  canvas.addEventListener('auxclick', onAuxClick);
+  stage.addEventListener('pointerdown', onPointerDown);
+  stage.addEventListener('wheel', onWheel, { passive: false });
+  stage.addEventListener('contextmenu', onContextMenu);
+  stage.addEventListener('auxclick', onAuxClick);
   window.addEventListener('pointerup', onPointerUp);
   window.addEventListener('pointercancel', onPointerCancel);
   window.addEventListener('pointermove', onPointerMove);
@@ -338,10 +340,10 @@ export function bindInput(opts: InputBindingOptions): {
   return {
     tracker,
     dispose(): void {
-      canvas.removeEventListener('pointerdown', onPointerDown);
-      canvas.removeEventListener('wheel', onWheel);
-      canvas.removeEventListener('contextmenu', onContextMenu);
-      canvas.removeEventListener('auxclick', onAuxClick);
+      stage.removeEventListener('pointerdown', onPointerDown);
+      stage.removeEventListener('wheel', onWheel);
+      stage.removeEventListener('contextmenu', onContextMenu);
+      stage.removeEventListener('auxclick', onAuxClick);
       window.removeEventListener('pointerup', onPointerUp);
       window.removeEventListener('pointercancel', onPointerCancel);
       window.removeEventListener('pointermove', onPointerMove);
diff --git a/src/ui/touchBinding.ts b/src/ui/touchBinding.ts
index 3457e2f..21beafa 100644
--- a/src/ui/touchBinding.ts
+++ b/src/ui/touchBinding.ts
@@ -121,6 +121,7 @@ export function bindTouch(opts: TouchBindingOptions): {
   const { surface, tracker, camera, canvasSize, mouseMode, dragButton, onLongPress } =
     opts;
   const canvas = surface.canvas;
+  const stage = document.getElementById('fluoddity-stage-input') ?? canvas;
 
   const gesture = new TouchGesture();
   const pinch = new PinchTracker();
@@ -283,7 +284,7 @@ export function bindTouch(opts: TouchBindingOptions): {
     // cancel a zoom in progress.
     if (touches.size > 2) return;
 
-    canvas.setPointerCapture(event.pointerId);
+    stage.setPointerCapture(event.pointerId);
     beginOneFinger(at, event.timeStamp);
   };
 
@@ -374,14 +375,14 @@ export function bindTouch(opts: TouchBindingOptions): {
     releaseHeld();
   };
 
-  canvas.addEventListener('pointerdown', onPointerDown);
-  // ON THE CANVAS, not the window, unlike the mouse path -- `setPointerCapture`
+  stage.addEventListener('pointerdown', onPointerDown);
+  // ON THE STAGE, not the window, unlike the mouse path -- `setPointerCapture`
   // above already routes a moving finger back here even when it leaves the
   // element, and a window listener would additionally see touches that began on
   // the panel and drag across the canvas.
-  canvas.addEventListener('pointermove', onPointerMove);
-  canvas.addEventListener('pointerup', onPointerUp);
-  canvas.addEventListener('pointercancel', onPointerCancel);
+  stage.addEventListener('pointermove', onPointerMove);
+  stage.addEventListener('pointerup', onPointerUp);
+  stage.addEventListener('pointercancel', onPointerCancel);
 
   return {
     pump(now: number): void {
@@ -392,10 +393,10 @@ export function bindTouch(opts: TouchBindingOptions): {
       if (gesture.longPressDue(now)) onLongPress();
     },
     dispose(): void {
-      canvas.removeEventListener('pointerdown', onPointerDown);
-      canvas.removeEventListener('pointermove', onPointerMove);
-      canvas.removeEventListener('pointerup', onPointerUp);
-      canvas.removeEventListener('pointercancel', onPointerCancel);
+      stage.removeEventListener('pointerdown', onPointerDown);
+      stage.removeEventListener('pointermove', onPointerMove);
+      stage.removeEventListener('pointerup', onPointerUp);
+      stage.removeEventListener('pointercancel', onPointerCancel);
     },
   };
 }
diff --git a/src/ui/workspaceDrawer.ts b/src/ui/workspaceDrawer.ts
index 5d841da..ba1498d 100644
--- a/src/ui/workspaceDrawer.ts
+++ b/src/ui/workspaceDrawer.ts
@@ -8,13 +8,18 @@ export function announceWorkspaceDrawer(drawer: WorkspaceDrawer): void {
   window.dispatchEvent(new CustomEvent<WorkspaceDrawer>(DRAWER_EVENT, { detail: drawer }));
 }
 
+/** Dismiss every workspace surface after a tap on unoccupied stage space. */
+export function dismissWorkspaceDrawers(): void {
+  window.dispatchEvent(new CustomEvent<null>(DRAWER_EVENT, { detail: null }));
+}
+
 /** Close a surface when a different workspace drawer opens. */
 export function closeWhenWorkspaceDrawerChanges(
   owner: WorkspaceDrawer,
   close: () => void,
 ): () => void {
   const listener = (event: Event): void => {
-    const drawer = (event as CustomEvent<WorkspaceDrawer>).detail;
+    const drawer = (event as CustomEvent<WorkspaceDrawer | null>).detail;
     if (drawer !== owner) close();
   };
   window.addEventListener(DRAWER_EVENT, listener);
diff --git a/tools/uiCheck.mjs b/tools/uiCheck.mjs
index e4578a7..9bdfa28 100644
--- a/tools/uiCheck.mjs
+++ b/tools/uiCheck.mjs
@@ -12,8 +12,9 @@
  *
  * ## What it checks
  *
- *   PASS 0  DIRECT NAVIGATION. Primary-drag pans in Observe, the wheel zooms,
- *           and middle-drag pans while a drawing tool is active.
+ *   PASS 0  DIRECT NAVIGATION. The three launchers share one dock, the pale
+ *           stage pans/zooms outside the clipped dish, the rim bearing rotates,
+ *           the cohort palette appears, and middle-drag pans in another tool.
  *
  *   PASS 1  THE GATED LATCH. Press a gated slider, drag it to its base value,
  *           and assert it is STILL VISIBLE while the button is down -- then
@@ -380,36 +381,242 @@ await evaluate(`window.__fluoddity.dispatch({ kind: 'setMouseMode', mode: 'selec
 await sleep(200);
 const navStart = await evaluate(`(() => {
   const canvas = document.getElementById('app');
+  const stage = document.getElementById('fluoddity-stage-input');
+  const dish = document.getElementById('fluoddity-petri-dish');
   const r = canvas.getBoundingClientRect();
+  const s = stage?.getBoundingClientRect();
+  const d = dish?.getBoundingClientRect();
   const camera = window.__fluoddity.cameraState;
+  let x = r.x + r.width - 36;
+  let y = r.y + r.height / 2;
+  if (d) {
+    const right = d.right + 48;
+    const left = d.left - 48;
+    x = right < window.innerWidth - 20 ? right : left > 20 ? left : x;
+    y = d.top + d.height / 2;
+  }
   return { x: r.x + r.width / 2, y: r.y + r.height / 2,
+    whiteX: x, whiteY: y, viewport: { width:window.innerWidth,height:window.innerHeight },
+    stage: s ? { width:s.width,height:s.height } : null,
     pan: [...camera.pan], zoom: camera.zoom };
 })()`);
 
-await mouse('mousePressed', navStart.x, navStart.y);
-await mouse('mouseMoved', navStart.x + 84, navStart.y + 42);
-await mouse('mouseReleased', navStart.x + 84, navStart.y + 42, 0);
+if (
+  navStart.stage?.width === navStart.viewport.width &&
+  navStart.stage?.height === navStart.viewport.height
+) {
+  pass('the gesture stage covers the full viewport beyond the clipped dish');
+} else {
+  fail(`gesture stage geometry is ${JSON.stringify(navStart.stage)}, viewport ${JSON.stringify(navStart.viewport)}`);
+}
+
+const dock = await evaluate(`(() => {
+  const nodes = [
+    document.getElementById('fluoddity-culture-launcher'),
+    document.getElementById('fluoddity-settings-launcher'),
+    document.getElementById('fluoddity-specimen-launcher'),
+  ];
+  if (nodes.some((node) => !node)) return null;
+  return nodes.map((node) => {
+    const r = node.getBoundingClientRect();
+    return { x:r.x,y:r.y,width:r.width,height:r.height,bottom:r.bottom };
+  });
+})()`);
+if (
+  dock !== null &&
+  dock.every((r) => Math.abs(r.width - 56) < 1 && Math.abs(r.height - 56) < 1) &&
+  Math.max(...dock.map((r) => r.bottom)) - Math.min(...dock.map((r) => r.bottom)) < 1 &&
+  dock[0].x < dock[1].x && dock[1].x < dock[2].x
+) {
+  pass('Culture, Settings, and Collection are three aligned bottom-right squares');
+} else {
+  fail(`launcher dock geometry is ${JSON.stringify(dock)}`);
+}
+
+const dismissX = 18;
+const dismissY = navStart.viewport.height / 2;
+const dismissChecks = [];
+for (const [id, surface] of [
+  ['fluoddity-culture-launcher', 'culture'],
+  ['fluoddity-settings-launcher', 'settings'],
+  ['fluoddity-specimen-launcher', 'specimens'],
+]) {
+  await evaluate(`(() => {
+    const node = document.getElementById('${id}');
+    const trigger = node?.querySelector('button') ?? node;
+    trigger?.click();
+  })()`);
+  await sleep(200);
+  await mouse('mousePressed', dismissX, dismissY);
+  await mouse('mouseReleased', dismissX, dismissY, 0);
+  await sleep(200);
+  dismissChecks.push(await evaluate(`(() => {
+    const culture = document.getElementById('fluoddity-control-rack');
+    const specimens = document.getElementById('fluoddity-specimen-lab');
+    const settings = document.getElementById('fluoddity-panel-right');
+    return {
+      surface:'${surface}',
+      closed:culture?.classList.contains('is-collapsed') === true &&
+        specimens?.classList.contains('is-collapsed') === true &&
+        (!settings || getComputedStyle(settings).display === 'none'),
+    };
+  })()`));
+}
+if (dismissChecks.every((result) => result.closed)) {
+  pass('a blank-stage tap consistently dismisses Culture, Settings, and Collection');
+} else {
+  fail(`blank-stage dismissal results are ${JSON.stringify(dismissChecks)}`);
+}
+
+const bearingStart = await evaluate(`(() => {
+  const handle = document.getElementById('fluoddity-dish-orient');
+  const dish = document.getElementById('fluoddity-petri-dish');
+  if (!handle || !dish) return null;
+  const h = handle.getBoundingClientRect();
+  const d = dish.getBoundingClientRect();
+  return { x:h.x+h.width/2,y:h.y+h.height/2,cx:d.x+d.width/2,cy:d.y+d.height/2,
+    rotation:window.__fluoddity.cameraState.rotation };
+})()`);
+if (bearingStart === null) die('The dish orientation handle is missing.');
+const bearingAngle = Math.atan2(
+  bearingStart.y - bearingStart.cy,
+  bearingStart.x - bearingStart.cx,
+);
+const bearingRadius = Math.hypot(
+  bearingStart.x - bearingStart.cx,
+  bearingStart.y - bearingStart.cy,
+);
+const bearingTarget = bearingAngle + 0.42;
+await mouse('mousePressed', bearingStart.x, bearingStart.y);
+await mouse(
+  'mouseMoved',
+  bearingStart.cx + Math.cos(bearingTarget) * bearingRadius,
+  bearingStart.cy + Math.sin(bearingTarget) * bearingRadius,
+);
+await mouse(
+  'mouseReleased',
+  bearingStart.cx + Math.cos(bearingTarget) * bearingRadius,
+  bearingStart.cy + Math.sin(bearingTarget) * bearingRadius,
+  0,
+);
+await sleep(300);
+const bearingAfter = await evaluate(`window.__fluoddity.cameraState.rotation`);
+if (Math.abs(bearingAfter - bearingStart.rotation) > 0.2) {
+  pass(`dragging the rim bearing rotates the dish (${bearingStart.rotation.toFixed(2)} -> ${bearingAfter.toFixed(2)})`);
+} else {
+  fail(`rim bearing drag left rotation at ${bearingAfter}`);
+}
+
+await mouse('mousePressed', navStart.whiteX, navStart.whiteY);
+await mouse('mouseMoved', navStart.whiteX + 84, navStart.whiteY + 42);
+await mouse('mouseReleased', navStart.whiteX + 84, navStart.whiteY + 42, 0);
 await sleep(300);
 const afterPrimaryPan = await evaluate(`[...window.__fluoddity.cameraState.pan]`);
 if (afterPrimaryPan.some((v, i) => Math.abs(v - navStart.pan[i]) > 1e-6)) {
-  pass('Observe drag pans the camera');
+  pass('Observe drag pans from the pale area outside the dish');
 } else {
-  fail('Observe drag left the camera pan unchanged');
+  fail('Observe drag on the pale area left the camera pan unchanged');
 }
 
 await send(
   'Input.dispatchMouseEvent',
-  { type: 'mouseWheel', x: navStart.x, y: navStart.y, deltaX: 0, deltaY: 120 },
+  { type: 'mouseWheel', x: navStart.whiteX, y: navStart.whiteY, deltaX: 0, deltaY: 120 },
   sid,
 );
 await sleep(300);
 const afterWheelZoom = await evaluate(`window.__fluoddity.cameraState.zoom`);
 if (Math.abs(afterWheelZoom - navStart.zoom) > 1e-6) {
-  pass(`wheel zoom changed magnification ${navStart.zoom} -> ${afterWheelZoom}`);
+  pass(`wheel zoom works over the pale stage (${navStart.zoom} -> ${afterWheelZoom})`);
 } else {
   fail('wheel input left camera zoom unchanged');
 }
 
+const precessionStart = await evaluate(`(() => {
+  const handle = document.getElementById('fluoddity-dish-orient');
+  const dish = document.getElementById('fluoddity-petri-dish');
+  if (!handle || !dish) return null;
+  const h = handle.getBoundingClientRect();
+  const d = dish.getBoundingClientRect();
+  return { x:h.x+h.width/2,y:h.y+h.height/2,cx:d.x+d.width/2,cy:d.y+d.height/2,
+    rotation:window.__fluoddity.cameraState.rotation };
+})()`);
+if (precessionStart === null) die('The dish orientation handle disappeared after panning.');
+const precessionAngle = Math.atan2(
+  precessionStart.y - precessionStart.cy,
+  precessionStart.x - precessionStart.cx,
+);
+const precessionRadius = Math.hypot(
+  precessionStart.x - precessionStart.cx,
+  precessionStart.y - precessionStart.cy,
+);
+const precessionTarget = precessionAngle - 0.36;
+await mouse('mousePressed', precessionStart.x, precessionStart.y);
+await mouse(
+  'mouseMoved',
+  precessionStart.cx + Math.cos(precessionTarget) * precessionRadius,
+  precessionStart.cy + Math.sin(precessionTarget) * precessionRadius,
+);
+await mouse(
+  'mouseReleased',
+  precessionStart.cx + Math.cos(precessionTarget) * precessionRadius,
+  precessionStart.cy + Math.sin(precessionTarget) * precessionRadius,
+  0,
+);
+await sleep(300);
+const precessionAfter = await evaluate(`(() => {
+  const d = document.getElementById('fluoddity-petri-dish').getBoundingClientRect();
+  return { cx:d.x+d.width/2,cy:d.y+d.height/2,
+    rotation:window.__fluoddity.cameraState.rotation };
+})()`);
+const centreDrift = Math.hypot(
+  precessionAfter.cx - precessionStart.cx,
+  precessionAfter.cy - precessionStart.cy,
+);
+if (
+  Math.abs(precessionAfter.rotation - precessionStart.rotation) > 0.18 &&
+  centreDrift < 1
+) {
+  pass(`rotation keeps the panned dish centre fixed (${centreDrift.toFixed(3)}px drift)`);
+} else {
+  fail(`panned rotation changed by ${precessionAfter.rotation - precessionStart.rotation} with ${centreDrift}px centre drift`);
+}
+
+await evaluate(`window.__fluoddity.dispatch({ kind: 'stepHighlightedCohort', delta: 1 })`);
+await sleep(300);
+const cohortPalette = await evaluate(`(() => {
+  const palette = document.getElementById('fluoddity-cohort-actions');
+  const status = window.__fluoddity.status();
+  if (!palette) return { reason:'missing', highlighted:status.highlightedCohort,
+    enabled:status.highlightEnabled };
+  if (palette.hidden) return { reason:'hidden', highlighted:status.highlightedCohort,
+    enabled:status.highlightEnabled, display:getComputedStyle(palette).display };
+  const text = [...palette.querySelectorAll('button')].map((button) => button.textContent.trim());
+  const r = palette.getBoundingClientRect();
+  return { text, width:r.width, height:r.height };
+})()`);
+if (
+  cohortPalette !== null &&
+  Array.isArray(cohortPalette.text) &&
+  ['Save','Mutate','Restart dish'].every((label) => cohortPalette.text.includes(label)) &&
+  cohortPalette.width >= 236 && cohortPalette.height < 360
+) {
+  pass('a selected cohort opens the compact Save / Mutate / Restart palette');
+} else {
+  fail(`cohort palette is ${JSON.stringify(cohortPalette)}`);
+}
+await mouse('mousePressed', dismissX, dismissY);
+await mouse('mouseReleased', dismissX, dismissY, 0);
+await sleep(300);
+const paletteDismissed = await evaluate(`(() => {
+  const palette = document.getElementById('fluoddity-cohort-actions');
+  return palette?.hidden === true && window.__fluoddity.status().highlightedCohort < 0;
+})()`);
+if (paletteDismissed) {
+  pass('a blank-stage tap also dismisses the selected-cohort palette');
+} else {
+  fail('the selected-cohort palette remained open after a blank-stage tap');
+}
+
 await evaluate(`window.__fluoddity.dispatch({ kind: 'setMouseMode', mode: 'draw' })`);
 await sleep(200);
 const beforeMiddlePan = await evaluate(`[...window.__fluoddity.cameraState.pan]`);