From eeecb76eef15f684b7909ff22fd054680c2a3498 Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
Date: Wed, 18 Feb 2026 21:25:30 +0100
Subject: feat(mq_editor): group toolbar buttons with separators

handoff(Claude): toolbar buttons grouped with vertical separators:
[Open WAV] | [Extract][AutoSpread] | [Play][Stop] | [+Partial][ClearAll] | [Explore][Contour] | [Undo][Redo] | [Params]

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 tools/mq_editor/index.html | 40 +++++++++++++++++++++++++++++-----------
 tools/mq_editor/style.css  |  5 ++++-
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/tools/mq_editor/index.html b/tools/mq_editor/index.html
index 77e0f56..605d91a 100644
--- a/tools/mq_editor/index.html
+++ b/tools/mq_editor/index.html
@@ -13,17 +13,35 @@
 
   <div class="toolbar">
     <input type="file" id="wavFile" accept=".wav">
-    <button id="chooseFileBtn">&#x1F4C2; Open WAV</button>
-    <button id="extractBtn" disabled>Extract Partials</button>
-    <button id="autoSpreadAllBtn" disabled>Auto Spread All</button>
-    <button id="playBtn" disabled>▶ Play</button>
-    <button id="stopBtn" disabled>■ Stop</button>
-    <button id="newPartialBtn" disabled>+ Partial</button>
-    <button id="clearAllBtn" disabled>✕ Clear All</button>
-    <button id="exploreBtn" disabled>⊕ Explore</button>
-    <button id="contourBtn" disabled>≋ Contour</button>
-    <button id="undoBtn" disabled>↩ Undo</button>
-    <button id="redoBtn" disabled>↪ Redo</button>
+    <span class="toolbar-group">
+      <button id="chooseFileBtn">&#x1F4C2; Open WAV</button>
+    </span>
+    <span class="toolbar-sep"></span>
+    <span class="toolbar-group">
+      <button id="extractBtn" disabled>Extract Partials</button>
+      <button id="autoSpreadAllBtn" disabled>Auto Spread All</button>
+    </span>
+    <span class="toolbar-sep"></span>
+    <span class="toolbar-group">
+      <button id="playBtn" disabled>▶ Play</button>
+      <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>
+    </span>
+    <span class="toolbar-sep"></span>
+    <span class="toolbar-group">
+      <button id="undoBtn" disabled>↩ Undo</button>
+      <button id="redoBtn" disabled>↪ Redo</button>
+    </span>
+    <span class="toolbar-sep"></span>
     <span class="toolbar-wrap">
       <button id="paramsBtn">⚙ Params</button>
       <div id="paramsPanel">
diff --git a/tools/mq_editor/style.css b/tools/mq_editor/style.css
index 6b266d9..ed518f5 100644
--- a/tools/mq_editor/style.css
+++ b/tools/mq_editor/style.css
@@ -14,7 +14,10 @@ input[type="file"] { display: none; }
 .canvas-wrap { position: relative; }
 
 /* === Toolbar === */
-.toolbar { margin-bottom: 10px; padding: 10px; background: #2a2a2a; border-radius: 4px; }
+.toolbar { margin-bottom: 10px; padding: 10px; background: #2a2a2a; border-radius: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
+.toolbar-group { display: inline-flex; align-items: center; gap: 2px; }
+.toolbar-group button { margin-right: 0; }
+.toolbar-sep { align-self: stretch; width: 1px; background: #555; margin: 3px 6px; }
 .toolbar-wrap { position: relative; display: inline-block; }
 
 /* === Buttons === */
-- 
cgit v1.2.3