From e06bcfa7a9c615ad127fd7293b9d8d8e65a0ef2f Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Tue, 1 Sep 2026 10:20:23 +0100
Subject: [PATCH 1/2] feat(panels): clear the studio down to the mixer in one
 press

#480 gave each panel around the mixer a toggle, but collapsing all three
still left the library holding its column, which is the largest thing on
screen that is not the mixer. Getting to a bare mixer meant three presses
in the toggles row and a fourth on a control somewhere else, then four
more to undo it.

"All" sits at the end of the same row and takes the three panels and the
sidebar together. It keeps no state of its own: it drives the same
apply/persist the individual toggles already use, and reads its own
pressed state back off .app. A fourth flag would be a fourth thing to
disagree with the other three the moment the library was collapsed from
its own button instead. A MutationObserver on that one class attribute is
what keeps it honest, so no other handler has to remember it exists.

setSidebarCollapsed moves out of wireCatalogToggle's scope and is
exported, because the sidebar's state is one class plus one localStorage
flag and two writers reproducing that pair is how it drifts.
setCatalogView was already the second writer: it wrote the flag by hand
and left the collapse button's aria-expanded claiming the sidebar was
still shut. It routes through the helper now.

panels.all and panels.allTitle are in all ten language tables. ptPT needs
no override, the European wording is the same.
---
 static/index.html      |  8 +++++++
 static/js/catalog.js   | 40 ++++++++++++++++++++++---------
 static/js/i18n.js      | 40 +++++++++++++++++++++++++++++++
 static/js/ui-chrome.js | 53 ++++++++++++++++++++++++++++++++++++++----
 4 files changed, 125 insertions(+), 16 deletions(-)

diff --git a/static/index.html b/static/index.html
index c79d4064..f84c92a7 100644
--- a/static/index.html
+++ b/static/index.html
@@ -148,6 +148,14 @@
                   title="Show or hide the timeline" data-i18n-title="panels.timelineTitle" data-i18n-aria-label="panels.timelineTitle">
             <span data-i18n="panels.timeline">Timeline</span>
           </button>
+          <span class="daw-panel-toggles-sep" aria-hidden="true">-</span>
+          <!-- The library is the largest thing on screen that is not the mixer,
+               so clearing the panels without it barely changes what you see.
+               "All" takes the three panels and the sidebar together. -->
+          <button class="daw-panel-toggle" type="button" data-panel-all aria-pressed="true"
+                  title="Show or hide every panel and the library" data-i18n-title="panels.allTitle" data-i18n-aria-label="panels.allTitle">
+            <span data-i18n="panels.all">All</span>
+          </button>
         </div>
         </div><!-- /.daw-composer-stack -->
 
diff --git a/static/js/catalog.js b/static/js/catalog.js
index 1ca361de..116a971c 100644
--- a/static/js/catalog.js
+++ b/static/js/catalog.js
@@ -623,11 +623,10 @@ function moveTrackToTrash(trackId) {
 
 function setCatalogView(view) {
   catalogView = ["trash", "favorites", "queue"].includes(view) ? view : "library";
-  const app = document.querySelector(".app");
-  if (catalogView !== "library") {
-    app?.classList.remove("cat-collapsed");
-    localStorage.setItem("stemdeck.catalog.collapsed", "0");
-  }
+  // Switching to Trash, Favourites or Queue is a request to look at the
+  // sidebar, so a collapsed one comes back. Through the shared helper, or the
+  // collapse button's aria-expanded is left claiming the sidebar is still shut.
+  if (catalogView !== "library") setSidebarCollapsed(false);
   render();
 }
 
@@ -1986,6 +1985,31 @@ function applyQueueDecorations(snap = getQueueSnapshot()) {
 
 // ─── Catalog panel collapse ───
 
+/** Collapse or restore the library sidebar.
+ *
+ *  Exported because the "All" panel toggle puts the library away along with
+ *  the three panels around the mixer. The state is one class on .app plus one
+ *  localStorage flag, and a second writer reproducing those by hand is exactly
+ *  the kind of pair that drifts the first time either changes.
+ */
+export function setSidebarCollapsed(isCollapsed) {
+  const app = document.querySelector(".app");
+  if (!app) return;
+  app.classList.toggle("cat-collapsed", isCollapsed);
+  document
+    .getElementById("sidebarCollapseBtn")
+    ?.setAttribute("aria-expanded", String(!isCollapsed));
+  try {
+    localStorage.setItem("stemdeck.catalog.collapsed", isCollapsed ? "1" : "0");
+  } catch (e) {
+    console.warn("[catalog] could not persist sidebar state:", e);
+  }
+}
+
+export function isSidebarCollapsed() {
+  return !!document.querySelector(".app")?.classList.contains("cat-collapsed");
+}
+
 function wireCatalogToggle() {
   const toggle = document.getElementById("catalogToggle");
   const collapseBtn = document.getElementById("sidebarCollapseBtn");
@@ -1998,12 +2022,6 @@ function wireCatalogToggle() {
     collapseBtn?.setAttribute("aria-expanded", "false");
   }
 
-  function setSidebarCollapsed(isCollapsed) {
-    app.classList.toggle("cat-collapsed", isCollapsed);
-    collapseBtn?.setAttribute("aria-expanded", String(!isCollapsed));
-    localStorage.setItem("stemdeck.catalog.collapsed", isCollapsed ? "1" : "0");
-  }
-
   collapseBtn?.addEventListener("click", () => {
     setSidebarCollapsed(!app.classList.contains("cat-collapsed"));
   });
diff --git a/static/js/i18n.js b/static/js/i18n.js
index 02fac7fc..6aef643f 100644
--- a/static/js/i18n.js
+++ b/static/js/i18n.js
@@ -346,6 +346,10 @@ const en = {
   "panels.sectionsTitle": "Show or hide the sections bar",
 
   "panels.timelineTitle": "Show or hide the timeline",
+
+  "panels.all": "All",
+
+  "panels.allTitle": "Show or hide every panel and the library",
   "mixer.hint": "Drag fader · M/S",
   "stemsPanel.ariaLabel": "Stems",
 
@@ -929,6 +933,10 @@ const pl = {
   "panels.sectionsTitle": "Pokaż lub ukryj pasek sekcji",
 
   "panels.timelineTitle": "Pokaż lub ukryj oś czasu",
+
+  "panels.all": "Wszystko",
+
+  "panels.allTitle": "Pokaż lub ukryj wszystkie panele i bibliotekę",
   "mixer.hint": "Przeciągnij suwak · M/S",
   "stemsPanel.ariaLabel": "Ścieżki",
 
@@ -1502,6 +1510,10 @@ const ja = {
   "panels.sectionsTitle": "セクションバーの表示を切り替えます",
 
   "panels.timelineTitle": "タイムラインの表示を切り替えます",
+
+  "panels.all": "すべて",
+
+  "panels.allTitle": "すべてのパネルとライブラリの表示を切り替えます",
   "mixer.hint": "フェーダーをドラッグ · M/S",
   "stemsPanel.ariaLabel": "パート",
 
@@ -2050,6 +2062,10 @@ const zhHans = {
   "panels.sectionsTitle": "显示或隐藏段落栏",
 
   "panels.timelineTitle": "显示或隐藏时间轴",
+
+  "panels.all": "全部",
+
+  "panels.allTitle": "显示或隐藏所有面板和音乐库",
   "mixer.hint": "拖动推子 · M/S",
   "stemsPanel.ariaLabel": "音轨",
 
@@ -2598,6 +2614,10 @@ const de = {
   "panels.sectionsTitle": "Abschnittsleiste ein- oder ausblenden",
 
   "panels.timelineTitle": "Zeitleiste ein- oder ausblenden",
+
+  "panels.all": "Alle",
+
+  "panels.allTitle": "Alle Bereiche und die Bibliothek ein- oder ausblenden",
   "mixer.hint": "Fader ziehen · M/S",
   "stemsPanel.ariaLabel": "Stems",
 
@@ -3157,6 +3177,10 @@ const pt = {
   "panels.sectionsTitle": "Mostrar ou ocultar a barra de seções",
 
   "panels.timelineTitle": "Mostrar ou ocultar a linha do tempo",
+
+  "panels.all": "Tudo",
+
+  "panels.allTitle": "Mostrar ou ocultar todos os painéis e a biblioteca",
   "mixer.hint": "Arraste o fader · M/S",
   "stemsPanel.ariaLabel": "Stems",
 
@@ -3718,6 +3742,10 @@ const id = {
   "panels.sectionsTitle": "Tampilkan atau sembunyikan bilah bagian",
 
   "panels.timelineTitle": "Tampilkan atau sembunyikan lini masa",
+
+  "panels.all": "Semua",
+
+  "panels.allTitle": "Tampilkan atau sembunyikan semua panel dan pustaka",
   "mixer.hint": "Seret fader · M/S",
   "stemsPanel.ariaLabel": "Stem",
 
@@ -4266,6 +4294,10 @@ const fr = {
   "panels.sectionsTitle": "Afficher ou masquer la barre de sections",
 
   "panels.timelineTitle": "Afficher ou masquer la chronologie",
+
+  "panels.all": "Tout",
+
+  "panels.allTitle": "Afficher ou masquer tous les panneaux et la bibliothèque",
   "mixer.hint": "Glissez le fader · M/S",
   "stemsPanel.ariaLabel": "Pistes",
 
@@ -4936,6 +4968,10 @@ const es = {
   "panels.sectionsTitle": "Mostrar u ocultar la barra de secciones",
 
   "panels.timelineTitle": "Mostrar u ocultar la línea de tiempo",
+
+  "panels.all": "Todo",
+
+  "panels.allTitle": "Mostrar u ocultar todos los paneles y la biblioteca",
   "mixer.hint": "Arrastra el fader · M/S",
   "stemsPanel.ariaLabel": "Stems",
 
@@ -5518,6 +5554,10 @@ const ko = {
   "panels.sectionsTitle": "구간 막대 표시하거나 숨기기",
 
   "panels.timelineTitle": "타임라인 표시하거나 숨기기",
+
+  "panels.all": "전체",
+
+  "panels.allTitle": "모든 패널과 라이브러리 표시하거나 숨기기",
   "mixer.hint": "페이더 드래그 · M/S",
   "stemsPanel.ariaLabel": "스템",
 
diff --git a/static/js/ui-chrome.js b/static/js/ui-chrome.js
index bfc3b671..8eeb8ab6 100644
--- a/static/js/ui-chrome.js
+++ b/static/js/ui-chrome.js
@@ -2,6 +2,8 @@
 // attributes so the Content-Security-Policy can forbid inline script (#171).
 // Loaded as a module (deferred), so the DOM is parsed before this runs.
 
+import { setSidebarCollapsed, isSidebarCollapsed } from "./catalog.js";
+
 // Upload button → trigger the hidden file input.
 document.getElementById("uploadFileBtn")?.addEventListener("click", () => {
   document.getElementById("fileInput")?.click();
@@ -53,6 +55,14 @@ function wirePanelToggles() {
     }
   };
 
+  const persist = (name, shown) => {
+    try {
+      localStorage.setItem(PANEL_STORE_PREFIX + name, shown ? "1" : "0");
+    } catch (e) {
+      console.warn("[panels] could not persist state:", e);
+    }
+  };
+
   for (const btn of toggles) {
     const name = btn.dataset.panel;
     let shown = true;
@@ -65,13 +75,46 @@ function wirePanelToggles() {
     btn.addEventListener("click", () => {
       const next = app.classList.contains(`panel-${name}-off`);
       apply(name, next);
-      try {
-        localStorage.setItem(PANEL_STORE_PREFIX + name, next ? "1" : "0");
-      } catch (e) {
-        console.warn("[panels] could not persist state:", e);
-      }
+      persist(name, next);
     });
   }
+
+  wireAllToggle(app, toggles.map((btn) => btn.dataset.panel), apply, persist);
+}
+
+// "All" clears the studio down to the mixer in one press, and brings it back
+// in one more. Clearing the three panels while the library still holds its
+// column barely changes what you see, which is what made a fourth button
+// worth having rather than three presses.
+//
+// It keeps no state of its own: it drives the same apply/persist the
+// individual toggles use, and reads its own pressed state back off .app. A
+// fourth flag would be a fourth thing to disagree with the other three the
+// moment the library was collapsed from its own button instead.
+function wireAllToggle(app, names, apply, persist) {
+  const btn = document.querySelector(".daw-panel-toggle[data-panel-all]");
+  if (!btn) return;
+
+  const everythingShown = () =>
+    names.every((name) => !app.classList.contains(`panel-${name}-off`)) && !isSidebarCollapsed();
+
+  const sync = () => btn.setAttribute("aria-pressed", String(everythingShown()));
+
+  btn.addEventListener("click", () => {
+    // Anything hidden means the press is asking for everything back.
+    const show = !everythingShown();
+    for (const name of names) {
+      apply(name, show);
+      persist(name, show);
+    }
+    setSidebarCollapsed(!show);
+  });
+
+  // The panels and the sidebar can each be moved from their own controls, and
+  // both land as a class on .app, so watching that one attribute keeps this
+  // button honest without every other handler having to remember it exists.
+  new MutationObserver(sync).observe(app, { attributes: true, attributeFilter: ["class"] });
+  sync();
 }
 
 wirePanelToggles();

From a9e13d2e00640003b2ee864e5c33d290cde306e2 Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Tue, 1 Sep 2026 11:09:50 +0100
Subject: [PATCH 2/2] feat(footer): scroll a loop bound, and stop the panel row
 shouting

Three things in the footer, all of them small and all of them in the same
three files.

A loop bound could only be changed by typing it. A loop is never right
first time: you drag a rough region, play it, and want the start forty
milliseconds earlier because it clips the transient. That meant clicking
in and retyping nine characters, which is slower and less precise than
dragging the region again, so the fields went unused for the one job they
are best at. The wheel now adjusts them, in seconds left of the decimal
point and milliseconds right of it, a tenth and a hundredth of a second
per notch. One millisecond per notch would need a hundred notches to
cover something audible. Character-level hit-testing inside an input is
not reliable across browsers, but only the decimal point matters, so the
text up to it is measured and compared. A nudge past either end of the
track, or one that would squeeze the loop under the minimum, is dropped
rather than clamped, so holding the wheel at the end does not drag the
other bound along.

The panel row read "Click to collapse" as a sentence it had no width for,
and All was fused to it. The label is one word now, the rule sits after
it, and All is the first of four buttons. Its pressed state greys and
strikes it through like the other three, but only once all four are away:
read as "is anything hidden" it struck itself through the moment Analysis
was hidden alone, which looks exactly like you pressed it.

Loop stands beside the two bounds rather than over them. As a row of its
own it stretched the footer to three lines for one button.

The Alpha badge is gone from Click track. The feature has been through
several releases and is covered by its own spec; a warning that has
stopped being true also teaches people to ignore the next one. Removed
properly: markup, the CSS rule that had no other user, and the dead
click.alpha key in all ten tables.
---
 static/css/daw.css     | 57 ++++++++++++++++++++++-------
 static/index.html      | 50 +++++++++++++++++---------
 static/js/i18n.js      | 81 +++++++++++++++++++++---------------------
 static/js/transport.js | 68 +++++++++++++++++++++++++++++++++++
 static/js/ui-chrome.js | 27 ++++++++------
 5 files changed, 203 insertions(+), 80 deletions(-)

diff --git a/static/css/daw.css b/static/css/daw.css
index 70d694e7..e51b2e57 100644
--- a/static/css/daw.css
+++ b/static/css/daw.css
@@ -1726,6 +1726,14 @@ input, textarea { font-family: inherit; }
   border-radius: 6px;
   min-width: 0;
 }
+/* The rule separates the row's label from its controls. It sits after the
+   label, so "All" reads as the first of four buttons rather than as part of
+   the words describing them. */
+.daw-panel-toggles-label {
+  margin-right: 2px;
+  padding-right: 6px;
+  border-right: 1px solid var(--border-strong);
+}
 .daw-panel-toggles-label,
 .daw-panel-toggles-sep {
   font-size: 8px;
@@ -2383,13 +2391,6 @@ input, textarea { font-family: inherit; }
   display: flex; align-items: center; flex-wrap: nowrap; gap: 8px;
   min-height: 34px;
 }
-.alpha-badge {
-  padding: 1px 5px; border-radius: 4px;
-  background: rgba(74,140,255,0.16); border: 1px solid rgba(74,140,255,0.4);
-  color: #4a8cff; font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em;
-  text-transform: uppercase;
-}
-
 /* Tier 3: the timeline. Full-bleed rather than an inset rounded panel -- its
    left edge has to land exactly on the lane waveforms' left edge, and a side
    border would offset the canvas by its own width. Top and bottom rules only,
@@ -2513,7 +2514,18 @@ input, textarea { font-family: inherit; }
 
 /* Position group: elapsed / total time, then the loop controls that act on
    that position (design 1b groups them together, not with the transport). */
-.footer-group-position .footer-group-body { gap: 4px; }
+/* The loop column is three rows tall while the rest of this group is one, so
+   centring it left the two bounds hanging below the elapsed/total readout they
+   belong to. Aligning to the bottom puts the fields on the readout's line and
+   lets the button and its hint stack up out of the way. */
+.footer-group-position .footer-group-body { gap: 4px; align-items: flex-end; }
+.footer-group-position .footer-elapsed,
+.footer-group-position .footer-total,
+.footer-group-position .footer-time-sep {
+  /* Match the fields' box height so the baselines land together, rather than
+     the text bottom meeting the border bottom. */
+  line-height: 22px;
+}
 .footer-elapsed {
   font-size: 18px; font-weight: 500; letter-spacing: -0.02em; color: var(--fg);
 }
@@ -2523,9 +2535,22 @@ input, textarea { font-family: inherit; }
 .footer-time-sep { font-size: 12px; color: var(--muted-2); }
 
 /* Exact loop start/end inputs (inline, right of the loop button) */
+/* The hint stacks over the two fields rather than beside them: the footer row
+   is already full, and a note about the fields belongs with the fields. Sized
+   to sit inside the width the two boxes already take, so it does not widen the
+   Position group. */
+.footer-loop-times-wrap {
+  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
+  margin-left: 6px;
+}
+.footer-loop-hint {
+  font-size: 7.5px; font-weight: 600; letter-spacing: 0.02em;
+  text-transform: uppercase; color: var(--muted);
+  line-height: 1; white-space: nowrap; text-align: center; user-select: none;
+}
 .footer-loop-times {
-  display: flex; align-items: center; gap: 5px;
-  margin-left: 4px; cursor: default; user-select: none;
+  display: flex; align-items: center; justify-content: center; gap: 5px;
+  cursor: default; user-select: none;
 }
 .loop-times-sep { font-size: 12px; color: var(--muted); flex-shrink: 0; }
 .loop-time-input {
@@ -2536,7 +2561,8 @@ input, textarea { font-family: inherit; }
   color: var(--fg); font-family: inherit; font-size: 12px; font-weight: 600;
   font-variant-numeric: tabular-nums; text-align: center;
 }
-.loop-time-input:focus { border-color: var(--accent); }
+.loop-time-input { cursor: ns-resize; }
+.loop-time-input:focus { cursor: text; border-color: var(--accent); }
 .loop-time-input:disabled { opacity: 0.45; cursor: not-allowed; }
 
 /* Transport group: stop square + a play key wide enough to be the obvious
@@ -2572,7 +2598,12 @@ input, textarea { font-family: inherit; }
 /* Loop sits in the Position group and reads as a modifier on the readout next
    to it, so it is a short labelled pill rather than a full-height control. */
 .footer-group-position .daw-iconbtn.btn-transport.loop {
-  width: auto; height: 26px; padding: 0 9px; gap: 6px; margin-left: 6px;
+  /* A tall narrow pill beside the fields, not a bar over them. align-self
+     overrides the group's flex-end so it fills the two rows the hint and the
+     bounds take, which is what keeps the footer one line high. */
+  flex-direction: column; justify-content: center;
+  width: 46px; height: auto; align-self: stretch;
+  padding: 3px 4px; gap: 1px; margin-left: 4px;
   border-radius: 7px;
   background: var(--panel-2); border: 1px solid var(--border-strong);
   color: var(--fg-2);
@@ -2581,7 +2612,7 @@ input, textarea { font-family: inherit; }
 .footer-group-position .btn-transport.loop:hover {
   background: var(--panel-3); color: var(--fg);
 }
-.loop-btn-label { font-size: 11px; font-weight: 500; white-space: nowrap; }
+.loop-btn-label { font-size: 9.5px; font-weight: 500; white-space: nowrap; line-height: 1; }
 .footer-group-position .btn-transport.loop.active,
 .footer-group-position .btn-transport.loop.active:hover {
   background: rgba(74,140,255,0.16);
diff --git a/static/index.html b/static/index.html
index f84c92a7..f3d29ad5 100644
--- a/static/index.html
+++ b/static/index.html
@@ -133,7 +133,23 @@
              control on each panel would need that panel to keep a stub, and the
              stub costs most of what collapsing the smaller ones returns. -->
         <div class="daw-panel-toggles">
-          <span class="daw-panel-toggles-label" data-i18n="panels.clickToCollapse">Click to collapse</span>
+          <!-- "Collapse" labels the row and is not a control, so the rule sits
+               after it: everything to its right is a button. "All" belongs with
+               the three panel names rather than with the label, because it is
+               the same kind of thing, one press that puts something away.
+               The label is one word because the row has no width for a sentence.
+
+               Its pressed state means what the row's state means, greyed and
+               struck once everything is away. The trap is the threshold: read
+               as "is anything hidden" it struck itself through the moment you
+               hid Analysis on its own, which looks like you pressed it. It is
+               off only when all four are. -->
+          <span class="daw-panel-toggles-label" data-i18n="panels.collapse">Collapse</span>
+          <button class="daw-panel-toggle daw-panel-toggle-all" type="button" data-panel-all aria-pressed="true"
+                  title="Show or hide every panel and the library" data-i18n-title="panels.allTitle" data-i18n-aria-label="panels.allTitle">
+            <span data-i18n="panels.all">All</span>
+          </button>
+          <span class="daw-panel-toggles-sep" aria-hidden="true">-</span>
           <button class="daw-panel-toggle" type="button" data-panel="analysis" aria-pressed="true"
                   title="Show or hide the track analysis" data-i18n-title="panels.analysisTitle" data-i18n-aria-label="panels.analysisTitle">
             <span data-i18n="panels.analysis">Analysis</span>
@@ -148,14 +164,6 @@
                   title="Show or hide the timeline" data-i18n-title="panels.timelineTitle" data-i18n-aria-label="panels.timelineTitle">
             <span data-i18n="panels.timeline">Timeline</span>
           </button>
-          <span class="daw-panel-toggles-sep" aria-hidden="true">-</span>
-          <!-- The library is the largest thing on screen that is not the mixer,
-               so clearing the panels without it barely changes what you see.
-               "All" takes the three panels and the sidebar together. -->
-          <button class="daw-panel-toggle" type="button" data-panel-all aria-pressed="true"
-                  title="Show or hide every panel and the library" data-i18n-title="panels.allTitle" data-i18n-aria-label="panels.allTitle">
-            <span data-i18n="panels.all">All</span>
-          </button>
         </div>
         </div><!-- /.daw-composer-stack -->
 
@@ -683,16 +691,26 @@
               <span class="num footer-elapsed" id="footer-time-elapsed">0:00</span>
               <span class="footer-time-sep">/</span>
               <span class="num footer-total" id="footer-time-total">0:00</span>
+              <!-- Loop stands beside the two bounds rather than over them. As a
+                   row of its own it stretched the footer bar to three lines for
+                   one button; as a column it fills the height the fields and
+                   their hint already take. -->
               <button class="daw-iconbtn btn-transport loop" id="t-loop" type="button" title="Loop the selected position (L)" aria-label="Loop" data-i18n-title="position.loopTitle">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                   <path d="M17 2l4 4-4 4 M3 12V8a2 2 0 0 1 2-2h16 M7 22l-4-4 4-4 M21 12v4a2 2 0 0 1-2 2H3"/>
                 </svg>
-                <span class="loop-btn-label" data-i18n="position.loopLabel">Loop position</span>
+                <span class="loop-btn-label" data-i18n="position.loopLabel">Loop</span>
               </button>
-              <div class="footer-loop-times" title="Exact loop start / end (mm:ss.mmm or seconds)" data-i18n-title="position.loopExactTitle">
-                <input type="text" id="t-loop-start" class="loop-time-input num" inputmode="decimal" spellcheck="false" autocomplete="off" aria-label="Loop start" data-i18n-aria-label="position.loopStartAria" value="00:00.000">
-                <span class="loop-times-sep" aria-hidden="true">-</span>
-                <input type="text" id="t-loop-end" class="loop-time-input num" inputmode="decimal" spellcheck="false" autocomplete="off" aria-label="Loop end" data-i18n-aria-label="position.loopEndAria" value="00:00.000">
+              <div class="footer-loop-times-wrap">
+                <!-- The hint sits with the fields it describes: wheel
+                     adjustment is invisible until you try it. It is a label,
+                     not a control, so nothing here looks pressable. -->
+                <span class="footer-loop-hint" data-i18n="position.loopScrollHint">Scroll up/down to adjust</span>
+                <div class="footer-loop-times" title="Exact loop start / end (mm:ss.mmm or seconds)" data-i18n-title="position.loopExactTitle">
+                  <input type="text" id="t-loop-start" class="loop-time-input num" inputmode="decimal" spellcheck="false" autocomplete="off" aria-label="Loop start" data-i18n-aria-label="position.loopStartAria" value="00:00.000">
+                  <span class="loop-times-sep" aria-hidden="true">-</span>
+                  <input type="text" id="t-loop-end" class="loop-time-input num" inputmode="decimal" spellcheck="false" autocomplete="off" aria-label="Loop end" data-i18n-aria-label="position.loopEndAria" value="00:00.000">
+                </div>
               </div>
             </div>
           </div>
@@ -726,7 +744,7 @@
           <span class="footer-divider" aria-hidden="true"></span>
 
           <div class="footer-group footer-group-click" id="t-metro-wrap">
-            <span class="footer-group-label"><span data-i18n="click.group">Click track</span> <span class="alpha-badge" data-i18n="click.alpha">Alpha</span></span>
+            <span class="footer-group-label" data-i18n="click.group">Click track</span>
             <div class="footer-group-body">
               <button class="click-toggle-btn" id="t-metro" type="button" title="Click track (K)" aria-label="Click track" data-i18n-title="click.toggleTitle" data-i18n-aria-label="click.toggleAria" aria-pressed="false" disabled>
                 <svg class="click-metro-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
diff --git a/static/js/i18n.js b/static/js/i18n.js
index 6aef643f..9f707b29 100644
--- a/static/js/i18n.js
+++ b/static/js/i18n.js
@@ -337,8 +337,6 @@ const en = {
 
   "panels.analysis": "Analysis",
 
-  "panels.clickToCollapse": "Click to collapse",
-
   "panels.timeline": "Timeline",
 
   "panels.analysisTitle": "Show or hide the track analysis",
@@ -349,6 +347,8 @@ const en = {
 
   "panels.all": "All",
 
+  "panels.collapse": "Collapse",
+
   "panels.allTitle": "Show or hide every panel and the library",
   "mixer.hint": "Drag fader · M/S",
   "stemsPanel.ariaLabel": "Stems",
@@ -417,8 +417,9 @@ const en = {
 
   "position.group": "Position",
   "position.loopTitle": "Loop the selected position (L)",
-  "position.loopLabel": "Loop position",
+  "position.loopLabel": "Loop",
   "position.loopExactTitle": "Exact loop start / end (mm:ss.mmm or seconds)",
+  "position.loopScrollHint": "Scroll up/down to adjust",
   "position.loopStartAria": "Loop start",
   "position.loopEndAria": "Loop end",
 
@@ -430,7 +431,6 @@ const en = {
   "speed.ariaLabel": "Playback speed",
 
   "click.group": "Click track",
-  "click.alpha": "Alpha",
   "click.toggleTitle": "Click track (K)",
   "click.toggleAria": "Click track",
   "click.unavailableAria": "Click track unavailable",
@@ -924,8 +924,6 @@ const pl = {
 
   "panels.analysis": "Analiza",
 
-  "panels.clickToCollapse": "Kliknij, aby zwinąć",
-
   "panels.timeline": "Oś czasu",
 
   "panels.analysisTitle": "Pokaż lub ukryj analizę utworu",
@@ -936,6 +934,8 @@ const pl = {
 
   "panels.all": "Wszystko",
 
+  "panels.collapse": "Zwiń",
+
   "panels.allTitle": "Pokaż lub ukryj wszystkie panele i bibliotekę",
   "mixer.hint": "Przeciągnij suwak · M/S",
   "stemsPanel.ariaLabel": "Ścieżki",
@@ -1002,8 +1002,9 @@ const pl = {
 
   "position.group": "Pozycja",
   "position.loopTitle": "Zapętl zaznaczoną pozycję (L)",
-  "position.loopLabel": "Pętla pozycji",
+  "position.loopLabel": "Pętla",
   "position.loopExactTitle": "Dokładny początek / koniec pętli (mm:ss.mmm lub sekundy)",
+  "position.loopScrollHint": "Przewiń, aby dostosować",
   "position.loopStartAria": "Początek pętli",
   "position.loopEndAria": "Koniec pętli",
 
@@ -1015,7 +1016,6 @@ const pl = {
   "speed.ariaLabel": "Prędkość odtwarzania",
 
   "click.group": "Metronom",
-  "click.alpha": "Alfa",
   "click.toggleTitle": "Metronom (K)",
   "click.toggleAria": "Metronom",
   "click.unavailableAria": "Metronom niedostępny",
@@ -1501,8 +1501,6 @@ const ja = {
 
   "panels.analysis": "解析",
 
-  "panels.clickToCollapse": "クリックで折りたたみ",
-
   "panels.timeline": "タイムライン",
 
   "panels.analysisTitle": "トラック解析の表示を切り替えます",
@@ -1513,6 +1511,8 @@ const ja = {
 
   "panels.all": "すべて",
 
+  "panels.collapse": "折りたたむ",
+
   "panels.allTitle": "すべてのパネルとライブラリの表示を切り替えます",
   "mixer.hint": "フェーダーをドラッグ · M/S",
   "stemsPanel.ariaLabel": "パート",
@@ -1578,8 +1578,9 @@ const ja = {
 
   "position.group": "位置",
   "position.loopTitle": "選択した位置をループ (L)",
-  "position.loopLabel": "位置をループ",
+  "position.loopLabel": "ループ",
   "position.loopExactTitle": "正確なループ開始/終了 (mm:ss.mmm または秒)",
+  "position.loopScrollHint": "スクロールで調整",
   "position.loopStartAria": "ループ開始",
   "position.loopEndAria": "ループ終了",
 
@@ -1591,7 +1592,6 @@ const ja = {
   "speed.ariaLabel": "再生速度",
 
   "click.group": "クリックトラック",
-  "click.alpha": "アルファ",
   "click.toggleTitle": "クリックトラック (K)",
   "click.toggleAria": "クリックトラック",
   "click.unavailableAria": "クリックトラック利用不可",
@@ -2053,8 +2053,6 @@ const zhHans = {
 
   "panels.analysis": "分析",
 
-  "panels.clickToCollapse": "点击可折叠",
-
   "panels.timeline": "时间轴",
 
   "panels.analysisTitle": "显示或隐藏音轨分析",
@@ -2065,6 +2063,8 @@ const zhHans = {
 
   "panels.all": "全部",
 
+  "panels.collapse": "折叠",
+
   "panels.allTitle": "显示或隐藏所有面板和音乐库",
   "mixer.hint": "拖动推子 · M/S",
   "stemsPanel.ariaLabel": "音轨",
@@ -2130,8 +2130,9 @@ const zhHans = {
 
   "position.group": "位置",
   "position.loopTitle": "循环所选位置 (L)",
-  "position.loopLabel": "循环位置",
+  "position.loopLabel": "循环",
   "position.loopExactTitle": "精确循环起止点 (mm:ss.mmm 或秒)",
+  "position.loopScrollHint": "滚动进行调整",
   "position.loopStartAria": "循环起点",
   "position.loopEndAria": "循环终点",
 
@@ -2143,7 +2144,6 @@ const zhHans = {
   "speed.ariaLabel": "播放速度",
 
   "click.group": "节拍器",
-  "click.alpha": "Alpha",
   "click.toggleTitle": "节拍器 (K)",
   "click.toggleAria": "节拍器",
   "click.unavailableAria": "节拍器不可用",
@@ -2605,8 +2605,6 @@ const de = {
 
   "panels.analysis": "Analyse",
 
-  "panels.clickToCollapse": "Zum Einklappen klicken",
-
   "panels.timeline": "Zeitleiste",
 
   "panels.analysisTitle": "Track-Analyse ein- oder ausblenden",
@@ -2617,6 +2615,8 @@ const de = {
 
   "panels.all": "Alle",
 
+  "panels.collapse": "Einklappen",
+
   "panels.allTitle": "Alle Bereiche und die Bibliothek ein- oder ausblenden",
   "mixer.hint": "Fader ziehen · M/S",
   "stemsPanel.ariaLabel": "Stems",
@@ -2683,8 +2683,9 @@ const de = {
 
   "position.group": "Position",
   "position.loopTitle": "Ausgewählte Position loopen (L)",
-  "position.loopLabel": "Loop-Position",
+  "position.loopLabel": "Loop",
   "position.loopExactTitle": "Genauer Loop-Start/-Ende (mm:ss.mmm oder Sekunden)",
+  "position.loopScrollHint": "Zum Anpassen scrollen",
   "position.loopStartAria": "Loop-Start",
   "position.loopEndAria": "Loop-Ende",
 
@@ -2696,7 +2697,6 @@ const de = {
   "speed.ariaLabel": "Wiedergabegeschwindigkeit",
 
   "click.group": "Click-Track",
-  "click.alpha": "Alpha",
   "click.toggleTitle": "Click-Track (K)",
   "click.toggleAria": "Click-Track",
   "click.unavailableAria": "Click-Track nicht verfügbar",
@@ -3168,8 +3168,6 @@ const pt = {
 
   "panels.analysis": "Análise",
 
-  "panels.clickToCollapse": "Clique para recolher",
-
   "panels.timeline": "Linha do tempo",
 
   "panels.analysisTitle": "Mostrar ou ocultar a análise da faixa",
@@ -3180,6 +3178,8 @@ const pt = {
 
   "panels.all": "Tudo",
 
+  "panels.collapse": "Recolher",
+
   "panels.allTitle": "Mostrar ou ocultar todos os painéis e a biblioteca",
   "mixer.hint": "Arraste o fader · M/S",
   "stemsPanel.ariaLabel": "Stems",
@@ -3246,8 +3246,9 @@ const pt = {
 
   "position.group": "Posição",
   "position.loopTitle": "Repetir a posição selecionada (L)",
-  "position.loopLabel": "Posição de loop",
+  "position.loopLabel": "Loop",
   "position.loopExactTitle": "Início/fim exato do loop (mm:ss.mmm ou segundos)",
+  "position.loopScrollHint": "Role para ajustar",
   "position.loopStartAria": "Início do loop",
   "position.loopEndAria": "Fim do loop",
 
@@ -3259,7 +3260,6 @@ const pt = {
   "speed.ariaLabel": "Velocidade de reprodução",
 
   "click.group": "Clique de referência",
-  "click.alpha": "Alfa",
   "click.toggleTitle": "Clique de referência (K)",
   "click.toggleAria": "Clique de referência",
   "click.unavailableAria": "Clique de referência indisponível",
@@ -3733,8 +3733,6 @@ const id = {
 
   "panels.analysis": "Analisis",
 
-  "panels.clickToCollapse": "Klik untuk menciutkan",
-
   "panels.timeline": "Lini masa",
 
   "panels.analysisTitle": "Tampilkan atau sembunyikan analisis trek",
@@ -3745,6 +3743,8 @@ const id = {
 
   "panels.all": "Semua",
 
+  "panels.collapse": "Ciutkan",
+
   "panels.allTitle": "Tampilkan atau sembunyikan semua panel dan pustaka",
   "mixer.hint": "Seret fader · M/S",
   "stemsPanel.ariaLabel": "Stem",
@@ -3810,8 +3810,9 @@ const id = {
 
   "position.group": "Posisi",
   "position.loopTitle": "Loop posisi yang dipilih (L)",
-  "position.loopLabel": "Posisi loop",
+  "position.loopLabel": "Loop",
   "position.loopExactTitle": "Awal/akhir loop yang tepat (mm:ss.mmm atau detik)",
+  "position.loopScrollHint": "Gulir untuk menyesuaikan",
   "position.loopStartAria": "Awal loop",
   "position.loopEndAria": "Akhir loop",
 
@@ -3823,7 +3824,6 @@ const id = {
   "speed.ariaLabel": "Kecepatan putar",
 
   "click.group": "Click Track",
-  "click.alpha": "Alfa",
   "click.toggleTitle": "Click track (K)",
   "click.toggleAria": "Click track",
   "click.unavailableAria": "Click track tidak tersedia",
@@ -4285,8 +4285,6 @@ const fr = {
 
   "panels.analysis": "Analyse",
 
-  "panels.clickToCollapse": "Cliquez pour réduire",
-
   "panels.timeline": "Chronologie",
 
   "panels.analysisTitle": "Afficher ou masquer l'analyse du morceau",
@@ -4297,6 +4295,8 @@ const fr = {
 
   "panels.all": "Tout",
 
+  "panels.collapse": "Réduire",
+
   "panels.allTitle": "Afficher ou masquer tous les panneaux et la bibliothèque",
   "mixer.hint": "Glissez le fader · M/S",
   "stemsPanel.ariaLabel": "Pistes",
@@ -4363,8 +4363,9 @@ const fr = {
 
   "position.group": "Position",
   "position.loopTitle": "Boucler la position sélectionnée (L)",
-  "position.loopLabel": "Boucler la position",
+  "position.loopLabel": "Boucle",
   "position.loopExactTitle": "Début / fin exacts de la boucle (mm:ss.mmm ou secondes)",
+  "position.loopScrollHint": "Faites défiler pour régler",
   "position.loopStartAria": "Début de la boucle",
   "position.loopEndAria": "Fin de la boucle",
 
@@ -4376,7 +4377,6 @@ const fr = {
   "speed.ariaLabel": "Vitesse de lecture",
 
   "click.group": "Métronome",
-  "click.alpha": "Alpha",
   "click.toggleTitle": "Métronome (K)",
   "click.toggleAria": "Métronome",
   "click.unavailableAria": "Métronome indisponible",
@@ -4734,6 +4734,7 @@ const fr = {
 // through pt (see FALLBACK), so the two variants cannot drift and a key
 // added to pt later is picked up here rather than reverting to English.
 const ptPT = {
+  "position.loopScrollHint": "Desloque para ajustar",
   "settings.autoDelete.title": "Eliminar automaticamente as faixas concluídas",
   "pitch.resetTitle": "Repor todas as faixas no tom original",
   "settings.autoDelete.desc": "Desativado por predefinição. As faixas separadas são mantidas para sempre. A eliminação não pode ser anulada.",
@@ -4959,8 +4960,6 @@ const es = {
 
   "panels.analysis": "Análisis",
 
-  "panels.clickToCollapse": "Haz clic para contraer",
-
   "panels.timeline": "Línea de tiempo",
 
   "panels.analysisTitle": "Mostrar u ocultar el análisis de la pista",
@@ -4971,6 +4970,8 @@ const es = {
 
   "panels.all": "Todo",
 
+  "panels.collapse": "Contraer",
+
   "panels.allTitle": "Mostrar u ocultar todos los paneles y la biblioteca",
   "mixer.hint": "Arrastra el fader · M/S",
   "stemsPanel.ariaLabel": "Stems",
@@ -5037,8 +5038,9 @@ const es = {
 
   "position.group": "Posición",
   "position.loopTitle": "Repetir en loop la posición seleccionada (L)",
-  "position.loopLabel": "Loop de la posición",
+  "position.loopLabel": "Bucle",
   "position.loopExactTitle": "Inicio / fin exacto del loop (mm:ss.mmm o segundos)",
+  "position.loopScrollHint": "Desplaza para ajustar",
   "position.loopStartAria": "Inicio del loop",
   "position.loopEndAria": "Fin del loop",
 
@@ -5050,7 +5052,6 @@ const es = {
   "speed.ariaLabel": "Velocidad",
 
   "click.group": "Click",
-  "click.alpha": "Alfa",
   "click.toggleTitle": "Click (K)",
   "click.toggleAria": "Click",
   "click.unavailableAria": "Click no disponible",
@@ -5545,8 +5546,6 @@ const ko = {
 
   "panels.analysis": "분석",
 
-  "panels.clickToCollapse": "눌러서 접기",
-
   "panels.timeline": "타임라인",
 
   "panels.analysisTitle": "트랙 분석 표시하거나 숨기기",
@@ -5557,6 +5556,8 @@ const ko = {
 
   "panels.all": "전체",
 
+  "panels.collapse": "접기",
+
   "panels.allTitle": "모든 패널과 라이브러리 표시하거나 숨기기",
   "mixer.hint": "페이더 드래그 · M/S",
   "stemsPanel.ariaLabel": "스템",
@@ -5622,8 +5623,9 @@ const ko = {
 
   "position.group": "위치",
   "position.loopTitle": "선택한 구간을 반복해요 (L)",
-  "position.loopLabel": "구간 반복",
+  "position.loopLabel": "반복",
   "position.loopExactTitle": "반복 시작과 끝을 정확히 (mm:ss.mmm 또는 초)",
+  "position.loopScrollHint": "스크롤로 조절",
   "position.loopStartAria": "반복 시작",
   "position.loopEndAria": "반복 끝",
 
@@ -5635,7 +5637,6 @@ const ko = {
   "speed.ariaLabel": "재생 속도",
 
   "click.group": "클릭 트랙",
-  "click.alpha": "알파",
   "click.toggleTitle": "클릭 트랙 (K)",
   "click.toggleAria": "클릭 트랙",
   "click.unavailableAria": "클릭 트랙을 쓸 수 없음",
diff --git a/static/js/transport.js b/static/js/transport.js
index e587e9d4..cb12422c 100644
--- a/static/js/transport.js
+++ b/static/js/transport.js
@@ -298,6 +298,59 @@ function commitLoopInput(which) {
   updateLoopRegionVisual();
 }
 
+// Wheel over a loop field nudges it, in seconds on the left of the decimal
+// point and in milliseconds on the right. Two units in one field is the whole
+// point: a loop boundary is chosen coarsely first and then trimmed, and doing
+// the trim by retyping nine characters is why the fields were barely used.
+//
+// A tenth of a second per notch on the seconds half, ten milliseconds on the
+// other. One millisecond per notch would need a hundred notches to cover what
+// the ear can hear.
+const LOOP_WHEEL_SEC = 0.1;
+const LOOP_WHEEL_MS = 0.01;
+
+// Which half of the field the pointer is over. Character-level hit-testing
+// inside an <input> is not reliable across browsers (caretRangeFromPoint
+// returns the element, not an offset inside it), but only one boundary matters
+// here, so measure the text up to the decimal point and compare. The field is
+// centre-aligned and its padding is symmetric, so the border box and the
+// content box share a centre and the string starts halfway through the
+// leftover space.
+let _loopWheelCtx = null;
+function loopWheelUnit(input, clientX) {
+  const value = input.value || "";
+  const dot = value.indexOf(".");
+  if (dot < 0) return "sec";
+  const style = getComputedStyle(input);
+  _loopWheelCtx ||= document.createElement("canvas").getContext("2d");
+  _loopWheelCtx.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+  const full = _loopWheelCtx.measureText(value).width;
+  const throughDot = _loopWheelCtx.measureText(value.slice(0, dot + 1)).width;
+  const rect = input.getBoundingClientRect();
+  const textStart = rect.left + (rect.width - full) / 2;
+  return clientX >= textStart + throughDot ? "ms" : "sec";
+}
+
+// Same rules as a typed commit: clamp to the track, never let the two bounds
+// cross inside MIN_LOOP_SEC. A nudge that would break either is dropped rather
+// than clamped to the limit, so holding the wheel against the end of a track
+// does not silently drag the other bound along.
+function nudgeLoopInput(which, direction, unit) {
+  if (totalDuration <= 0) return;
+  const step = unit === "ms" ? LOOP_WHEEL_MS : LOOP_WHEEL_SEC;
+  const current = which === "start" ? loopStart : loopEnd;
+  const next = Math.round((current + direction * step) * 1000) / 1000;
+  if (next < 0 || next > totalDuration) return;
+  const start = which === "start" ? next : loopStart;
+  const end = which === "end" ? next : loopEnd;
+  if (end - start < MIN_LOOP_SEC) return;
+  setLoopStart(start);
+  setLoopEnd(end);
+  setLoopEnabled(true);
+  loopBtn.classList.add("active");
+  updateLoopRegionVisual();
+}
+
 function wireLoopInputs() {
   for (const [input, which] of [
     [loopStartInput, "start"],
@@ -305,6 +358,21 @@ function wireLoopInputs() {
   ]) {
     if (!input) continue;
     input.addEventListener("blur", () => commitLoopInput(which));
+    input.addEventListener(
+      "wheel",
+      (e) => {
+        if (input.disabled || totalDuration <= 0) return;
+        // The lanes zoom on wheel (#493) and the page scrolls; neither is what
+        // a wheel over a numeric field is asking for.
+        e.preventDefault();
+        e.stopPropagation();
+        nudgeLoopInput(which, e.deltaY < 0 ? 1 : -1, loopWheelUnit(input, e.clientX));
+        // syncLoopInputs leaves a focused field alone so it cannot overwrite
+        // what is being typed. A wheel is not typing, so write it back here.
+        input.value = fmtTimeMs(which === "start" ? loopStart : loopEnd);
+      },
+      { passive: false }
+    );
     input.addEventListener("keydown", (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
diff --git a/static/js/ui-chrome.js b/static/js/ui-chrome.js
index 8eeb8ab6..e678a582 100644
--- a/static/js/ui-chrome.js
+++ b/static/js/ui-chrome.js
@@ -84,25 +84,30 @@ function wirePanelToggles() {
 
 // "All" clears the studio down to the mixer in one press, and brings it back
 // in one more. Clearing the three panels while the library still holds its
-// column barely changes what you see, which is what made a fourth button
-// worth having rather than three presses.
+// column barely changes what you see, which is what made a fourth button worth
+// having rather than three presses.
 //
-// It keeps no state of its own: it drives the same apply/persist the
-// individual toggles use, and reads its own pressed state back off .app. A
-// fourth flag would be a fourth thing to disagree with the other three the
-// moment the library was collapsed from its own button instead.
+// It greys and strikes through like the other three once everything is away.
+// The threshold is the whole trick. Read as "is anything hidden", it struck
+// itself through the moment Analysis was hidden on its own, which looks exactly
+// like you pressed it. It is off only when all four are off, so it describes
+// the row rather than the loudest thing in it.
+//
+// It stores nothing. The state is derived from .app either way, so there is no
+// fourth flag to disagree with the other three.
 function wireAllToggle(app, names, apply, persist) {
   const btn = document.querySelector(".daw-panel-toggle[data-panel-all]");
   if (!btn) return;
 
-  const everythingShown = () =>
-    names.every((name) => !app.classList.contains(`panel-${name}-off`)) && !isSidebarCollapsed();
+  const hiddenCount = () =>
+    names.filter((name) => app.classList.contains(`panel-${name}-off`)).length +
+    (isSidebarCollapsed() ? 1 : 0);
 
-  const sync = () => btn.setAttribute("aria-pressed", String(everythingShown()));
+  const sync = () => btn.setAttribute("aria-pressed", String(hiddenCount() < names.length + 1));
 
   btn.addEventListener("click", () => {
-    // Anything hidden means the press is asking for everything back.
-    const show = !everythingShown();
+    // Anything still on screen means the press is asking to clear it away.
+    const show = hiddenCount() === names.length + 1;
     for (const name of names) {
       apply(name, show);
       persist(name, show);