refactor(mq_editor): consolidate duplicates, extract utils.js and app.js

- utils.js (new): evalBezier (robust), getCanvasCoords, buildBandPoints
- app.js (new): extract ~450-line inline script from index.html
- editor.js: generalize _makeJogSlider(inp, options) with onUpdate cb,
  eliminate 50-line inline resonator jog duplication, use getCanvasCoords
- mq_extract.js: extract findBestPeak(), replace two identical loop bodies
- viewer.js: remove duplicate evalBezier, use getCanvasCoords/buildBandPoints
- mq_synth.js: remove duplicate evalBezier
- index.html: inline script removed, load order: utils→fft→extract→synth→viewer→editor→app

handoff(Claude): mq_editor refactor complete — no logic changes, browser-ready.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 4 insertions, 33 deletions

diff --git a/tools/mq_editor/viewer.js b/tools/mq_editor/viewer.js
index 76c57e2..2575cac 100644
--- a/tools/mq_editor/viewer.js
+++ b/tools/mq_editor/viewer.js
@@ -288,15 +288,7 @@ class SpectrogramViewer {
     const sa = rep.spread_above != null ? rep.spread_above : 0.02;
     const sb = rep.spread_below != null ? rep.spread_below : 0.02;
 
-    const STEPS = 60;
-    const upper = [], lower = [];
-    for (let i = 0; i <= STEPS; ++i) {
-      const t = curve.t0 + (curve.t3 - curve.t0) * i / STEPS;
-      if (t < this.t_view_min - 0.01 || t > this.t_view_max + 0.01) continue;
-      const f = evalBezier(curve, t);
-      upper.push([this.timeToX(t), this.freqToY(f * (1 + sa))]);
-      lower.push([this.timeToX(t), this.freqToY(f * (1 - sb))]);
-    }
+    const {upper, lower} = buildBandPoints(this, curve, sa, sb);
     if (upper.length < 2) return;
 
     const savedAlpha = ctx.globalAlpha;
@@ -327,14 +319,7 @@ class SpectrogramViewer {
     ctx.setLineDash([]);
 
     // 50% drop-off reference lines (dotted, dimmer)
-    const p5upper = [], p5lower = [];
-    for (let i = 0; i <= STEPS; ++i) {
-      const t = curve.t0 + (curve.t3 - curve.t0) * i / STEPS;
-      if (t < this.t_view_min - 0.01 || t > this.t_view_max + 0.01) continue;
-      const f = evalBezier(curve, t);
-      p5upper.push([this.timeToX(t), this.freqToY(f * 1.50)]);
-      p5lower.push([this.timeToX(t), this.freqToY(f * 0.50)]);
-    }
+    const {upper: p5upper, lower: p5lower} = buildBandPoints(this, curve, 0.50, 0.50);
     if (p5upper.length >= 2) {
       ctx.globalAlpha = 0.55;
       ctx.strokeStyle = color;
@@ -572,9 +557,7 @@ class SpectrogramViewer {
     const {canvas, tooltip} = this;
 
     canvas.addEventListener('mousedown', (e) => {
-      const rect = canvas.getBoundingClientRect();
-      const x = e.clientX - rect.left;
-      const y = e.clientY - rect.top;
+      const {x, y} = getCanvasCoords(e, canvas);
 
       // Check control point drag on selected partial
       if (this.selectedPartial >= 0 && this.selectedPartial < this.partials.length) {
@@ -593,9 +576,7 @@ class SpectrogramViewer {
     });
 
     canvas.addEventListener('mousemove', (e) => {
-      const rect = canvas.getBoundingClientRect();
-      const x = e.clientX - rect.left;
-      const y = e.clientY - rect.top;
+      const {x, y} = getCanvasCoords(e, canvas);
 
       if (this.dragState) {
         const t = Math.max(0, Math.min(this.t_max, this.canvasToTime(x)));
@@ -717,13 +698,3 @@ class SpectrogramViewer {
   }
 }
 
-// Bezier evaluation (shared utility)
-function evalBezier(curve, t) {
-  let u = (t - curve.t0) / (curve.t3 - curve.t0);
-  u = Math.max(0, Math.min(1, u));
-  const u1 = 1 - u;
-  return u1*u1*u1 * curve.v0 +
-         3*u1*u1*u * curve.v1 +
-         3*u1*u*u  * curve.v2 +
-         u*u*u     * curve.v3;
-}