From 78faa77b208d20c01c242a942a1ddf9278f4ef17 Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Wed, 18 Feb 2026 10:17:07 +0100
Subject: feat(mq_editor): tabbed freq/amp/synth panel, spread band viz, UI
 polish

- Freq/Amp curve params now in tabs to save vertical space
- Add Synth tab: per-partial decay, jitter, spread_above/below controls
- Visualize spread band on selected partial (filled band + dashed bounds)
- Larger fonts and right panel (14px body, 260px panel width)
- Non-kept partials at 0.12 alpha (was 0.5)
- Default threshold -20dB (was -60dB)

handoff(Claude): mq_editor UI/UX improvements
---
 tools/mq_editor/index.html | 106 +++++++++++++++++++++++++++++++++------------
 1 file changed, 79 insertions(+), 27 deletions(-)

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

diff --git a/tools/mq_editor/index.html b/tools/mq_editor/index.html
index c5902a7..8f36314 100644
--- a/tools/mq_editor/index.html
+++ b/tools/mq_editor/index.html
@@ -6,6 +6,7 @@
   <style>
     body {
       font-family: monospace;
+      font-size: 14px;
       margin: 20px;
       background: #1a1a1a;
       color: #ddd;
@@ -73,9 +74,9 @@
       border: 1px solid #555;
       border-radius: 4px;
       padding: 12px;
-      min-width: 220px;
-      max-width: 220px;
-      max-height: 600px;
+      min-width: 260px;
+      max-width: 260px;
+      max-height: 700px;
       overflow-y: auto;
       display: flex;
       flex-direction: column;
@@ -83,7 +84,7 @@
       box-sizing: border-box;
     }
     .panel-title {
-      font-size: 11px;
+      font-size: 12px;
       color: #888;
       text-transform: uppercase;
       letter-spacing: 1px;
@@ -100,40 +101,52 @@
       gap: 6px;
       margin: 0;
       cursor: pointer;
-      font-size: 13px;
+      font-size: 14px;
     }
     /* Partial properties */
     .prop-row {
       display: flex;
       justify-content: space-between;
       align-items: baseline;
+      font-size: 13px;
+      padding: 2px 0;
+    }
+    .prop-label { color: #777; font-size: 12px; }
+    .curve-tabs {
+      display: flex;
+      gap: 2px;
+      margin-top: 8px;
+      margin-bottom: 4px;
+    }
+    .tab-btn {
+      flex: 1;
+      padding: 4px 0;
       font-size: 12px;
-      padding: 1px 0;
+      margin: 0;
+      background: #222;
+      border-color: #444;
+      color: #888;
     }
-    .prop-label { color: #777; font-size: 11px; }
-    .prop-section {
-      font-size: 10px;
-      color: #666;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      margin-top: 6px;
-      margin-bottom: 2px;
+    .tab-btn.active {
+      background: #3a3a3a;
+      border-color: #666;
+      color: #ddd;
     }
     .curve-grid {
       display: grid;
       grid-template-columns: 18px 1fr 1fr;
-      gap: 2px 3px;
+      gap: 3px 4px;
       align-items: center;
     }
-    .curve-grid span { color: #666; font-size: 10px; }
+    .curve-grid span { color: #666; font-size: 11px; }
     .curve-grid input[type="number"] {
       width: 100%;
       background: #333;
       color: #ccc;
       border: 1px solid #444;
-      padding: 1px 3px;
+      padding: 2px 4px;
       border-radius: 2px;
-      font-size: 10px;
+      font-size: 11px;
       font-family: monospace;
       box-sizing: border-box;
     }
@@ -144,14 +157,33 @@
     .partial-actions {
       display: flex;
       gap: 4px;
-      margin-top: 6px;
+      margin-top: 8px;
     }
     .partial-actions button {
       flex: 1;
-      padding: 3px 6px;
-      font-size: 11px;
+      padding: 4px 6px;
+      font-size: 12px;
       margin: 0;
     }
+    .synth-grid {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 4px 8px;
+      align-items: center;
+    }
+    .synth-grid span { color: #888; font-size: 12px; }
+    .synth-grid input[type="number"] {
+      width: 100%;
+      background: #333;
+      color: #ccc;
+      border: 1px solid #444;
+      padding: 2px 4px;
+      border-radius: 2px;
+      font-size: 11px;
+      font-family: monospace;
+      box-sizing: border-box;
+    }
+    .synth-grid input[type="number"]:focus { border-color: #666; outline: none; }
     .synth-section {
       border-top: 1px solid #444;
       padding-top: 8px;
@@ -188,7 +220,7 @@
       <input type="number" id="hopSize" value="256" min="64" max="1024" step="64">
 
       <label>Threshold (dB):</label>
-      <input type="number" id="threshold" value="-60" step="any">
+      <input type="number" id="threshold" value="-20" step="any">
 
       <label style="margin-left:16px;">Keep:</label>
       <input type="range" id="keepPct" min="1" max="100" value="100" style="width:100px; vertical-align:middle;">
@@ -234,17 +266,27 @@
           <span class="prop-label">Time</span>
           <span id="propTime">—</span>
         </div>
-        <div class="prop-section">Freq Curve</div>
-        <div class="curve-grid" id="freqCurveGrid"></div>
-        <div class="prop-section">Amp Curve</div>
-        <div class="curve-grid" id="ampCurveGrid"></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</button>
         </div>
       </div>
 
-      <div id="noSelMsg" style="color:#555;font-size:11px;padding:2px 0;">Click a partial to select</div>
+      <div id="noSelMsg" style="color:#555;font-size:13px;padding:2px 0;">Click a partial to select</div>
 
       <!-- Synthesis options (always at bottom) -->
       <div class="synth-section">
@@ -543,6 +585,16 @@
       }
     });
 
+    // Curve tab switching
+    document.querySelectorAll('.tab-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        document.querySelectorAll('.tab-pane').forEach(p => p.style.display = 'none');
+        document.getElementById('tab' + btn.dataset.tab).style.display = '';
+      });
+    });
+
     // --- Test WAV peak validation ---
     function validateTestWAVPeaks(cache) {
       const SR = cache.sampleRate;
-- 
cgit v1.2.3