From d058858b232de5e9d22d052158a24ed90484fa9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=27=C3=A9lectron=20rare?=
 <108685187+electron-rare@users.noreply.github.com>
Date: Thu, 2 Jul 2026 22:38:16 +0200
Subject: [PATCH] feat(web): tempo -/+ stepper buttons

One-BPM steps beside the tempo slider (fine adjustment is hard on a
touch slider mid-performance) plus a live numeric readout; both paths
share the same /launch/tempo send.
---
 web_realart/public/control/control.css     |  4 ++++
 web_realart/public/control/index.html      |  2 +-
 web_realart/public/control/js/transport.js | 18 ++++++++++++++++--
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/web_realart/public/control/control.css b/web_realart/public/control/control.css
index 9189d4a..136f2f1 100644
--- a/web_realart/public/control/control.css
+++ b/web_realart/public/control/control.css
@@ -254,3 +254,7 @@ button.queued { animation: queued-blink 600ms ease-in-out infinite alternate; }
 .morceau-fists { display: flex; flex-direction: column; gap: 4px; }
 .morceau-fist { position: relative; font-size: 12px; color: #ccc; padding: 2px 4px;
   background: #1c1c1c; border-radius: 4px; }
+
+/* Tempo -/+ steppers (1 BPM per tap) + live value */
+.tempo-step { width: 44px; padding: 8px 0; font-size: 18px; flex-shrink: 0; }
+#tempo-val { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
diff --git a/web_realart/public/control/index.html b/web_realart/public/control/index.html
index 697625a..c46352a 100644
--- a/web_realart/public/control/index.html
+++ b/web_realart/public/control/index.html
@@ -37,7 +37,7 @@
     <div class="pat-cell"><button data-pad="sweep">Sweep</button><input type="range" min="0" max="1.5" step="0.05" value="0.8" data-vol="sweep"></div>
   </div>
   <button id="clear" class="wide">Tout couper</button>
-  <label>Tempo <input id="tempo" type="range" min="60" max="180" value="126"></label>
+  <label>Tempo <button id="tempo-minus" class="tempo-step" type="button">-</button><input id="tempo" type="range" min="60" max="180" value="126"><button id="tempo-plus" class="tempo-step" type="button">+</button><span id="tempo-val">126</span></label>
   <div class="quant-bar">
     <span class="quant-label">Quant</span>
     <button class="quant-btn" data-quant="0.5">½</button>
diff --git a/web_realart/public/control/js/transport.js b/web_realart/public/control/js/transport.js
index 93f0cf0..26bf4e6 100644
--- a/web_realart/public/control/js/transport.js
+++ b/web_realart/public/control/js/transport.js
@@ -24,9 +24,23 @@ export function init() {
     if (bar) bar.style.width = `${rms * 100}%`;
   });
 
-  // Tempo
+  // Tempo: slider + -/+ steppers (1 BPM per click), value label kept in sync
   const tempo = document.getElementById("tempo");
-  tempo && tempo.addEventListener("input", () => send("/launch/tempo", +tempo.value));
+  const tempoVal = document.getElementById("tempo-val");
+  const pushTempo = () => {
+    if (tempoVal) tempoVal.textContent = tempo.value;
+    send("/launch/tempo", +tempo.value);
+  };
+  tempo && tempo.addEventListener("input", pushTempo);
+  const stepTempo = (d) => {
+    if (!tempo) return;
+    tempo.value = Math.max(+tempo.min, Math.min(+tempo.max, +tempo.value + d));
+    pushTempo();
+  };
+  const tMinus = document.getElementById("tempo-minus");
+  const tPlus = document.getElementById("tempo-plus");
+  tMinus && tMinus.addEventListener("click", () => stepTempo(-1));
+  tPlus && tPlus.addEventListener("click", () => stepTempo(1));
 
   // Filter
   const filt = document.getElementById("filter");