From 83eec3cece795f56f4edc1298a008216cb9511a0 Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Thu, 19 Feb 2026 06:46:57 +0100
Subject: feat(mq_editor): UI revamp — params panel, layout, partial spectrum
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move Synthesis controls (integratePhase, jitter, spread, resonator,
  LP/HP filters) and Auto Spread All into the ⚙ Params dropdown
- Group Extract Partials / +Partial / ✕ Clear All in one toolbar group
- Add per-partial Sine/Res mode toggle in the property panel (Mode row)
- Move partial mini-spectrum below the right panel (right-col layout)
- Partial mini-spectrum: dynamic dB range scanned across full duration
  (8 samples, [peak−60, peak]), cached on partial select
- Print bezier amplitude A= in red at top-right of partial spectrum
- Status/info messages set to 80% gray (#ccc)

handoff(Claude): UI revamp complete, TODO items implemented.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 tools/mq_editor/index.html | 154 +++++++++++++++++++++++----------------------
 1 file changed, 78 insertions(+), 76 deletions(-)

(limited to 'tools/mq_editor/index.html')

diff --git a/tools/mq_editor/index.html b/tools/mq_editor/index.html
index efbd73d..a03ab35 100644
--- a/tools/mq_editor/index.html
+++ b/tools/mq_editor/index.html
@@ -19,7 +19,8 @@
     <span class="toolbar-sep"></span>
     <span class="toolbar-group">
       <button id="extractBtn" disabled>Extract Partials</button>
-      <button id="autoSpreadAllBtn" disabled>Auto Spread All</button>
+      <button id="newPartialBtn" disabled>+ Partial</button>
+      <button id="clearAllBtn" disabled>✕ Clear All</button>
     </span>
     <span class="toolbar-sep"></span>
     <span class="toolbar-group">
@@ -27,11 +28,6 @@
       <button id="stopBtn" disabled>■ Stop</button>
     </span>
     <span class="toolbar-sep"></span>
-    <span class="toolbar-group">
-      <button id="newPartialBtn" disabled>+ Partial</button>
-      <button id="clearAllBtn" disabled>✕ Clear All</button>
-    </span>
-    <span class="toolbar-sep"></span>
     <span class="toolbar-group">
       <button id="exploreBtn" disabled>⊕ Explore</button>
       <button id="contourBtn" disabled>≋ Contour</button>
@@ -71,6 +67,39 @@
           <label title="Minimum number of frames a tracked partial must span. Shorter partials are discarded after tracking.">Min Len</label>
           <input type="number" id="minLength" value="10" min="1" max="50" step="1" style="width:50px;">
         </div>
+        <div class="param-group param-synth">
+          <span class="group-label">Synthesis</span>
+          <label><input type="checkbox" id="integratePhase" checked> Integrate phase</label>
+          <label><input type="checkbox" id="disableJitter"> Disable jitter</label>
+          <label><input type="checkbox" id="disableSpread"> Disable spread</label>
+          <label title="Test mode: force resonator synthesis for all partials (ignores per-partial mode setting)"><input type="checkbox" id="forceResonator"> Resonator (all)</label>
+          <div id="globalResParams" style="display:none;">
+            <label title="Global pole radius r in (0,1). Applied to all partials in resonator mode.">
+              r (pole)
+              <input type="range" id="globalR" min="0.75" max="0.9999" step="0.0001" value="0.995">
+              <span id="globalRVal" class="slider-val">0.9950</span>
+            </label>
+            <label title="Global gain compensation applied to all partials in resonator mode.">
+              gain
+              <input type="range" id="globalGain" min="0.0" max="4.0" step="0.01" value="1.0">
+              <span id="globalGainVal" class="slider-val">1.00</span>
+            </label>
+            <label title="Override per-partial r/gain with global values during playback"><input type="checkbox" id="forceRGain"> force r/gain</label>
+          </div>
+          <label title="LP filter coefficient k1 in (0,1]. 1.0 = bypass.">
+            LP k1
+            <input type="range" id="lpK1" min="0.001" max="1.0" step="0.001" value="1.0">
+            <span id="lpK1Val" class="slider-val">bypass</span>
+          </label>
+          <label title="HP filter coefficient k2 in (0,1]. 1.0 = bypass.">
+            HP k2
+            <input type="range" id="hpK2" min="0.001" max="1.0" step="0.001" value="1.0">
+            <span id="hpK2Val" class="slider-val">bypass</span>
+          </label>
+          <div style="padding-top:4px;">
+            <button id="autoSpreadAllBtn" disabled style="width:100%;padding:4px 8px;font-size:12px;margin:0;">Auto Spread All</button>
+          </div>
+        </div>
       </div>
     </span>
   </div>
@@ -82,10 +111,6 @@
         <canvas id="cursorCanvas" width="1400" height="600"></canvas>
         <canvas id="playheadCanvas" width="1400" height="600"></canvas>
 
-        <!-- Partial spectrum viewer (bottom-right overlay, left of main spectrum) -->
-        <div id="partialSpectrumViewer">
-          <canvas id="partialSpectrumCanvas" width="200" height="100"></canvas>
-        </div>
         <!-- Mini spectrum viewer (bottom-right overlay) -->
         <div id="spectrumViewer">
           <canvas id="spectrumCanvas" width="400" height="100"></canvas>
@@ -109,75 +134,52 @@
       </div>
     </div>
 
-    <div class="right-panel">
-      <!-- Partial properties (visible when a partial is selected) -->
-      <div id="partialProps" style="display:none;">
-        <div class="panel-title">
-          <span id="propTitle">Partial #—</span>
-          <span id="propSwatch"></span>
-        </div>
-        <div class="prop-row">
-          <span class="prop-label">Peak</span>
-          <span id="propPeak">—</span>
-        </div>
-        <div class="prop-row">
-          <span class="prop-label">Time</span>
-          <span id="propTime">—</span>
+    <div class="right-col">
+      <div class="right-panel">
+        <!-- Partial properties (visible when a partial is selected) -->
+        <div id="partialProps" style="display:none;">
+          <div class="panel-title">
+            <span id="propTitle">Partial #—</span>
+            <span id="propSwatch"></span>
+          </div>
+          <div class="prop-row">
+            <span class="prop-label">Peak</span>
+            <span id="propPeak">—</span>
+          </div>
+          <div class="prop-row">
+            <span class="prop-label">Time</span>
+            <span id="propTime">—</span>
+          </div>
+          <div class="prop-row">
+            <span class="prop-label">Mode</span>
+            <span id="synthModeToggle" style="display:flex;gap:3px;"></span>
+          </div>
+          <div class="curve-tabs">
+            <button class="tab-btn active" data-tab="Freq">Freq</button>
+            <button class="tab-btn" data-tab="Amp">Amp</button>
+            <button class="tab-btn" data-tab="Synth">Synth</button>
+          </div>
+          <div class="tab-pane" id="tabFreq">
+            <div class="curve-grid" id="freqCurveGrid"></div>
+          </div>
+          <div class="tab-pane" id="tabAmp" style="display:none;">
+            <div class="curve-grid" id="ampCurveGrid"></div>
+          </div>
+          <div class="tab-pane" id="tabSynth" style="display:none;">
+            <div class="synth-grid" id="synthGrid"></div>
+          </div>
+          <div class="partial-actions">
+            <button id="mutePartialBtn">Mute</button>
+            <button id="deletePartialBtn">Delete <kbd>Del</kbd></button>
+          </div>
         </div>
-        <div class="curve-tabs">
-          <button class="tab-btn active" data-tab="Freq">Freq</button>
-          <button class="tab-btn" data-tab="Amp">Amp</button>
-          <button class="tab-btn" data-tab="Synth">Synth</button>
-        </div>
-        <div class="tab-pane" id="tabFreq">
-          <div class="curve-grid" id="freqCurveGrid"></div>
-        </div>
-        <div class="tab-pane" id="tabAmp" style="display:none;">
-          <div class="curve-grid" id="ampCurveGrid"></div>
-        </div>
-        <div class="tab-pane" id="tabSynth" style="display:none;">
-          <div class="synth-grid" id="synthGrid"></div>
-        </div>
-        <div class="partial-actions">
-          <button id="mutePartialBtn">Mute</button>
-          <button id="deletePartialBtn">Delete <kbd>Del</kbd></button>
-        </div>
-      </div>
 
-      <div id="noSelMsg">Click a partial to select</div>
+        <div id="noSelMsg">Click a partial to select</div>
+      </div>
 
-      <!-- Synthesis options (always at bottom) -->
-      <div class="synth-section">
-        <div class="panel-title">Synthesis</div>
-        <label><input type="checkbox" id="integratePhase" checked> Integrate phase</label>
-        <label><input type="checkbox" id="disableJitter"> Disable jitter</label>
-        <label><input type="checkbox" id="disableSpread"> Disable spread</label>
-        <label title="Test mode: force resonator synthesis for all partials (ignores per-partial mode setting)"><input type="checkbox" id="forceResonator"> Resonator (all)</label>
-        <div id="globalResParams" style="display:none;">
-          <label title="Global pole radius r in (0,1). Applied to all partials in resonator mode.">
-            r (pole)
-            <input type="range" id="globalR" min="0.75" max="0.9999" step="0.0001" value="0.995">
-            <span id="globalRVal" class="slider-val">0.9950</span>
-          </label>
-          <label title="Global gain compensation applied to all partials in resonator mode.">
-            gain
-            <input type="range" id="globalGain" min="0.0" max="4.0" step="0.01" value="1.0">
-            <span id="globalGainVal" class="slider-val">1.00</span>
-          </label>
-          <label title="Override per-partial r/gain with global values during playback"><input type="checkbox" id="forceRGain"> force r/gain</label>
-        </div>
-        <div style="margin-top:6px;">
-          <label title="LP filter coefficient k1 in (0,1]. 1.0 = bypass.">
-            LP k1
-            <input type="range" id="lpK1" min="0.001" max="1.0" step="0.001" value="1.0">
-            <span id="lpK1Val" class="slider-val">bypass</span>
-          </label>
-          <label title="HP filter coefficient k2 in (0,1]. 1.0 = bypass.">
-            HP k2
-            <input type="range" id="hpK2" min="0.001" max="1.0" step="0.001" value="1.0">
-            <span id="hpK2Val" class="slider-val">bypass</span>
-          </label>
-        </div>
+      <!-- Partial spectrum viewer (below right panel, since it's related) -->
+      <div id="partialSpectrumViewer">
+        <canvas id="partialSpectrumCanvas" width="258" height="100"></canvas>
       </div>
     </div>
   </div>
-- 
cgit v1.2.3