<!--
  nws.html — nGene Waveform Studio
  ──────────────────────────────────────────────────────────────
  Author      : Hyunsuk Frank Roh, MD
  Affiliation : nGene Hemodynamic Research Center
  Email       : Frank@nGene.org
  Date        : 2025-11-15
  Version     : 3.3.8 — Audio Summary (loudness, peak/RMS, crest, DR, centroid, pitch, stereo corr);
                official UMich button label tightened; keeps SVG‑only waveforms; no Canvas ever
  ──────────────────────────────────────────────────────────────
  Notes for 3.3.8 (current)
  • Audio Summary added in the Tempo panel:
      - Loudness (approx., K‑weighted style) ~ LUFS
      - Peak & RMS (dBFS) + Crest factor (dB)
      - Dynamic range (10th–90th percentile windowed RMS, dB)
      - Spectral centroid (Hz)
      - Pitch estimate (median YIN; note + Hz) with confidence
      - Stereo correlation (if 2+ channels)
    Implementation: _analyzeAudioSummary(buffer) performs light‑weight DSP on a 30‑s
    central slice for spectral/pitch features and on a decimated pass for level stats.

  Notes for 3.3.7 (previous)
  • Official “UMich” loader button: clicking “Load UMich Playlist” fetches media/playlist_umich.json
    and appends its items to the current playlist (duplicates auto‑renamed; action is idempotent per
    session; silent aside from a brief ✓ confirmation on the title).
    - Implementation: _loadUmichPlaylist() fetches and normalizes the array via
      _normalizePlaylistArray(...), appends without replacing, and shows a transient brand message
      with _notifyBrand(...). A per‑session guard (_umichLoaded) prevents repeated appends.
      - Fallback path: if media/playlist_umich.json is not found, playlist_umich.json is attempted.

  Notes for 3.3.6 (previous)
  • Private “FRANK gate”: while holding Shift, click the title “nGene Waveform Studio v 3.3.6”
    five times within 1.5 seconds. On success, media/playlist_frank.json is fetched and its items
    are appended to the current playlist (duplicates are auto‑renamed; action is idempotent per
    session; silent aside from a brief ✓ confirmation on the title).
    - Implementation: _installSecretFrankGate() detects the gesture and calls
      _loadSecretFrankPlaylist(); helper _normalizePlaylistArray(...) parses without replacing.
      A transient brand message confirms success via _notifyBrand(...).

  Notes for 3.3.5 (previous)
  • Overview waveform is now built automatically for the currently selected item
    even when it was loaded from playlist.json on page load (audio and video).
    - Implementation: _set(...) now calls _ensureOverviewForCurrent(), which decodes
      the current item and generates its “Overview” in the background as soon as
      it becomes selected; UI refreshes upon completion.

  Notes for 3.3.4 (previous)
  • Trim now also downloads the newly created clip automatically (uses the same filename shown in the playlist).
    - Download occurs after the clip is created (WAV/MP4/WebM); playlist append remains unchanged.

  Notes for 3.3.3 (previous)
  • Trim now works even with the default full-range loop (0→100%). No need to adjust the loop before trimming.
    - Implementation detail: the Trim button auto-enables once media metadata loads; trimming uses the full range if unchanged.
  • Playlist reorder control simplified: a single ↓ button moves the item directly to the bottom of the playlist.
    - “Mix” still uses the last two items; “ICA” still works on the selected stereo item.

  Notes for 3.3.2 (previous)
  • Trim fixed: now slices the current loop into a new media item.
    - Audio: exports a WAV clip and appends to the playlist with fresh tempo & overview.
    - Video: records the selected range to MP4/WebM when supported (fallback to audio‑only WAV).
  • Playlist could be reordered with ↑/↓ per-row buttons (superseded in 3.3.3).
    - Mix still uses the last two items; ICA works on the selected item (stereo required).

  Notes for 3.3.1 (previous)
  • Playlist now loads from playlist.json (robust parser; legacy fallback retained).
  • “Mix” forms two mixtures from the last two playlist items using matrix
        A = [[1, 1], [0.5, 2]]
    producing a stereo WAV (L = mixture#1, R = mixture#2), matching the Python example.
    Sources are downmixed to mono and linearly resampled to a common rate before mixing.
  • “ICA” (FastICA 2×2; tanh nonlinearity, symmetric decorrelation) separates the stereo
    mixture into two mono WAVs appended to the playlist.
  • Minor fix: band-filter setup typo corrected.

  Notes for 3.3.0 (previous)
  • Added “ICA” button (right of Mix) to separate a stereo mix into two WAVs.

  Notes for 3.2.2 (previous)
  • Overview waveform gained interactive cursor + loop brackets synced with the left seekbar.

  (Historical notes retained)
  • SVG-only waveforms; no Canvas; no frameworks; no third‑party encoders.
-->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>nGene Waveform Studio v 3.3.8</title>
<link rel="icon" href="src/N_icon.png" type="image/x-icon">
<!-- *** CSS *** -->
<style>
:root{
  --accent:#1e90ff;
  --cerulean:#0096ff;
  --ultramarine:#3f00ff; /* loop bar color */
  --w:980px;
  --bg:#fff;
  --hdl:14px;            /* bracket size */
  /* Band colors */
  --band-low:#2ecc71;    /* green */
  --band-mid:#f39c12;    /* orange */
  --band-high:#e74c3c;   /* red */
}
* { box-sizing: border-box; }
.wrapper{
  width:var(--w);min-width:320px;min-height:300px;margin:0 auto;
  font-family:Arial,Helvetica,sans-serif;background:var(--bg);
  padding:22px;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.12);
  resize:both;overflow:auto;
}

/* Two-column layout */
.grid2{
  display:grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1fr);
  gap:18px;
}
@media (max-width: 860px){
  .grid2{ grid-template-columns: 1fr; }
}

.brand{margin:0 0 6px;font-size:1.25rem;text-align:center;font-weight:700;}
.title{margin:0 0 12px;font-size:1rem;text-align:center;}
.video{width:100%;border-radius:8px;margin-bottom:12px;display:none;cursor:pointer;}
.btn{flex:1 1 25%;border:none;border-radius:50px;padding:10px 0;
  background:var(--accent);color:#fff;font-size:15px;cursor:pointer;
  transition:filter .2s;user-select:none;}
.btn:hover{filter:brightness(1.1);}
.btn--repeat{flex:0 0 66px;font-size:18px;padding:6px 0;position:relative;}
.btn--wide{flex:1.4 1 35%;}
.speed-btn{border:none;border-radius:6px;padding:4px 8px;font-size:14px;
  background:#f0f0f0;cursor:pointer;transition:filter .2s;}
.speed-btn:hover{filter:brightness(1.1);}
.row-flex{display:flex;align-items:center;gap:6px;margin-bottom:10px;}
.controls{display:flex;gap:6px;margin-bottom:10px;justify-content:space-between;}
.seekbox{
  position:relative;flex:1.55;height:22px;display:flex;align-items:center;
}
.bar-gray{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:8px;border-radius:5px;background:#ddd;pointer-events:none;
}
.loopfill{
  position:absolute;top:50%;transform:translateY(-50%);
  height:4px;border-radius:4px;background:var(--ultramarine);
  pointer-events:none;z-index:3;
}
.handle{
  position:absolute;top:50%;width:var(--hdl);height:var(--hdl);
  background:transparent;cursor:pointer;z-index:4;transform:translateY(-50%);
}
.hA{border-left:2px solid var(--cerulean);border-top:2px solid var(--cerulean);border-bottom:2px solid var(--cerulean);}
.hB{border-right:2px solid var(--cerulean);border-top:2px solid var(--cerulean);border-bottom:2px solid var(--cerulean);transform:translate(-100%,-50%);}
.seek{
  position:absolute;left:0;right:0;top:0;bottom:0;opacity:0;width:100%;height:100%;
  -webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;
}
.seek::-webkit-slider-thumb{ -webkit-appearance:none; width:0; height:0; border:none; }
.seek::-moz-range-thumb{ width:0; height:0; border:none; }
.seek::-ms-thumb{ width:0; height:0; border:none; }
.cursor{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  width:0;height:18px;border-left:2px solid var(--accent);z-index:5;cursor:ew-resize;
}
.vol,.spd{
  appearance:none;width:100%;height:6px;border-radius:4px;background:#ddd;cursor:pointer;
}
.vol::-webkit-slider-thumb,.spd::-webkit-slider-thumb{
  appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:none;margin-top:-4px;
}
.time{font-size:.8rem;width:120px;text-align:right;white-space:nowrap;}
.list{min-height:180px;max-height:65vh;overflow-y:auto;resize:vertical;
  border-top:1px solid #eee;padding-top:8px;margin-bottom:16px;}
.row{padding:6px 10px;border-radius:8px;cursor:pointer;transition:background .2s;
  display:flex;justify-content:space-between;align-items:center;gap:8px;}
.row:hover{background:#f4f4f4;}
.row.active{background:var(--accent);color:#fff;}
.badge{font-size:.8rem;opacity:.8;white-space:nowrap;}
.uploader{width:100%;border:2px dashed #bbb;border-radius:8px;text-align:center;
  padding:14px;transition:border-color .2s,transform .2s;}
.uploader.drag{border-color:var(--accent);}
.hint{font-size:.8rem;color:#555;margin:6px 0 0;}
@keyframes pulseBox{0%,100%{border-color:var(--accent);box-shadow:0 0 0 rgba(30,144,255,0);}50%{border-color:#bbb;box-shadow:0 0 14px rgba(30,144,255,.55);}}
@keyframes pulseText{0%,100%{color:var(--accent);}50%{color:#555;}}
.uploader.pulse{animation:pulseBox 2s ease-in-out infinite;}
.uploader.pulse .hint{animation:pulseText 2s ease-in-out infinite;}
.code-box{max-width:95%;margin:0 auto;}
pre.hljs{max-height:60vh;overflow:auto;border:1px solid #ddd;padding:15px;}
.footer{margin-top:16px;padding-top:10px;border-top:1px solid #eee;font-size:.8rem;color:#444;text-align:center;}

/* Tempo Details panel (right column) */
.meta{
  border:1px solid #eee;border-radius:8px;padding:8px 10px;margin:0 0 10px;background:#fafafa;
  font-size:.86rem;color:#333;
}
.meta .kv{display:flex;justify-content:space-between;gap:8px;margin:2px 0;}
.meta .kv span:first-child{opacity:.75;}
.meta .hr{height:1px;background:#eee;margin:6px 0 4px;}

/* Mix/Trim bar (right column, above Signal) */
.mixbar{display:flex;align-items:center;gap:8px;margin:0 0 10px;flex-wrap:wrap;}
.mix-btn{
  border:none;border-radius:50px;padding:8px 14px;font-size:14px;
  background:var(--accent);color:#fff;cursor:pointer;transition:filter .2s;
}
.mix-btn:hover{filter:brightness(1.1);}
.mix-hint{font-size:.82rem;color:#555;opacity:.9;}

/* Signal panel (SVG; no <canvas>) */
.signal{
  border:1px solid #e9eef5;border-radius:8px;padding:8px 10px;margin:0 0 10px;background:#f6faff;
  font-size:.86rem;color:#233;
}
.signal .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-weight:600;}
.signal .controls{display:flex;align-items:center;gap:10px;font-size:.85rem;flex-wrap:wrap;}
.sig-svg{width:100%;display:block;border:1px solid #eef2f7;border-radius:6px;background:#fff;}
.sig-note{font-size:.75rem;opacity:.7;margin-top:4px;}
.sig-rowline{stroke:#a0b8d9;stroke-width:0.5;}
.sig-label{font-size:10px;fill:#666;}
.sig-path{fill:none;stroke:#3a73c2;stroke-width:1;stroke-linejoin:round;stroke-linecap:round;}
.sig-path-neg{stroke:#8aaee0;}

/* Band titles + color coding */
.sig-rowtitle{font-size:10px;color:#666;margin:6px 0 3px;}
.sig-rowtitle--low{color:var(--band-low);}
.sig-rowtitle--mid{color:var(--band-mid);}
.sig-rowtitle--high{color:var(--band-high);}
.sig-path--low{stroke:var(--band-low);}
.sig-path-neg--low{stroke:var(--band-low);stroke-opacity:.5;}
.sig-path--mid{stroke:var(--band-mid);}
.sig-path-neg--mid{stroke:var(--band-mid);stroke-opacity:.5;}
.sig-path--high{stroke:var(--band-high);}
.sig-path-neg--high{stroke:var(--band-high);stroke-opacity:.5;}

/* Repeat icons */
.rep-wrap{display:inline-block;position:relative;line-height:1;}
.rep-badge{
  position:absolute;top:-4px;right:-6px;
  background:#fff;color:var(--accent);
  border-radius:10px;padding:0 4px;border:1px solid rgba(0,0,0,.06);
  font-weight:700;font-size:12px;line-height:1;
}

/* === Overview interactive controls (mirror of left seek/loop) === */
.ov-loopfill{ fill:var(--ultramarine); opacity:.15; }
.ov-handle{
  stroke:var(--cerulean); stroke-width:2; fill:#fff; fill-opacity:.65;
  cursor:ew-resize; shape-rendering:crispEdges;
}
.ov-hA{ }
.ov-hB{ }
.ov-cursor{ stroke:var(--accent); stroke-width:1.5; cursor:ew-resize; pointer-events:stroke; }

/* === Playlist “send to bottom” control (3.3.3) === */
.row .left{display:flex;align-items:center;gap:6px;min-width:0;}
.row .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60ch;}
.move{
  border:none;background:#f0f0f0;border-radius:4px;width:22px;height:22px;
  cursor:pointer;font-size:14px;line-height:1;display:inline-grid;place-items:center;
}
.move:hover{filter:brightness(1.1);}
.move:disabled{opacity:.45;cursor:not-allowed;}
.row.active .move{background:#fff;color:var(--accent);}

/* Now-line (drawn over Overview as a thin line) */
.now-line{stroke:#1e90ff;stroke-width:1.5;shape-rendering:crispEdges;}
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
</head>
<body>
<h1 style="text-align:center;"><a style="color:var(--accent);text-align:center;margin:.2rem 0 .6rem" href="https://ngene.org/nws.html"  target="_blank" rel="noopener noreferrer">nGene Waveform Studio</a></h1>
<h2 style="text-align:center;">Pure vanilla JS; no frameworks required.</h2><br>

<div id="box" class="wrapper"></div>

<script>
/* =============================================================
   nGene Waveform Studio v 3.3.8
   — SVG-only waveform views; overview + live mid + centered micro
   — new Audio Summary: loudness (~LUFS), peak/RMS/crest, DR, centroid, pitch, stereo corr
   — Trim auto-download of new clip; default-loop Trim enabled; playlist “send to bottom”
   — 3.3.6: private Shift+5‑click title gesture appends media/playlist_frank.json (once per session)
   — 3.3.7: visible “Load UMich Playlist” button appends media/playlist_umich.json (once per session)
   ============================================================= */
(function(){
  'use strict';

  /* ---------- Small Config (centralized defaults) ---------- */
  const APP = Object.freeze({
    NAME: 'nGene Waveform Studio',
    VERSION: '3.3.8',
    VOLUME_DEFAULT: 0.33,          // 0..5 (500%)
    VOLUME_MAX: 5.0,
    SPEED_DEFAULT: 1.00,           // 0.05..2.00
    SPEED_MIN: 0.05,
    SPEED_MAX: 2.00,
    ENV_HZ: 2000,                  // envelope sampling rate for live ring buffers
    RING_MAX_SEC: 16,
    MID_WINDOW_SEC: 8,
    MICRO_HALF_SEC: 3,
    BAND_EDGES: { lowHP:20, lowLP:200, midHP:200, midLP:2000, highHP:2000 },
    // Matrix for Mix (rows = output mixtures [L,R], cols = sources [S1,S2])
    MIX_A: [[1,1],[0.5,2]],
    // Summary analysis knobs
    SUM_ANALYSIS_SEC: 30,          // spectral & pitch windowing uses up to this many seconds (center slice)
    SUM_RMS_WIN_SEC: 0.40,         // dynamic range window size
    SUM_RMS_HOP_SEC: 0.10,
    PITCH_MIN_HZ: 50,
    PITCH_MAX_HZ: 1000
  });

  /* ---------- Utilities ---------- */
  const $ = (s,c=document)=>c.querySelector(s);
  const clamp = (v,min,max)=>Math.max(min,Math.min(max,v));
  const pctToTime = (pct,dur)=>pct*dur;
  const timeToPct = (t,dur)=>dur? clamp(t/dur,0,1) : 0;
  const fmt = t => !isFinite(t) ? '0:00' : `${Math.floor(t/60)}:${Math.floor(t%60).toString().padStart(2,'0')}`;
  const isAudioExt = name => /\.(mp3|m4a|flac|wav|ogg|aac)$/i.test(name||'');
  const isVideoExt = name => /\.(mp4|mov|webm|mkv|avi)$/i.test(name||'');
  const basename = (n)=>String(n||'').split('/').pop().replace(/\.[^/.]+$/,'').slice(0,64).replace(/[^\w.+-]+/g,'_');
  const hhmmss = (sec)=>{ sec=Math.max(0,sec|0); const h=(sec/3600)|0, m=((sec%3600)/60)|0, s=(sec%60)|0; return (h? h+':':'')+String(m).padStart(2,'0')+':'+String(s).padStart(2,'0'); };
  const toDb = (x)=> 20*Math.log10(Math.max(x, 1e-12));
  const safe = (v, unit='')=> (v===undefined || v===null || !isFinite(v)) ? '–' : (unit ? `${v}${unit}` : String(v));

  const tempoClass = (bpm)=>{
    if(!bpm || !isFinite(bpm)) return '–';
    if(bpm < 80) return 'Slow';
    if(bpm < 120) return 'Moderate';
    return 'Fast';
  };

  /* ---------- Main Class ---------- */
  class WaveformStudio{
    constructor(sel){
      this.el = $(sel);
      this.state = {
        list: [],
        idx : 0,
        repeat: 'one',    // 'one' | 'all' | 'none'
        vol : APP.VOLUME_DEFAULT,       // 0..5 (500%)
        spd : APP.SPEED_DEFAULT,        // 0.05..2.00
        loopStart: 0,     // 0..1
        loopEnd : 1,      // 0..1
        meta: {},         // filename → tempo meta + overview + summary
        sig:{ winMid:APP.MID_WINDOW_SEC, winMicro:APP.MICRO_HALF_SEC, ringMaxSec:APP.RING_MAX_SEC } // windows (seconds)
      };

      // WebAudio
      this.ctx = null;
      this.aGain = null; this.vGain = null;
      this.aSrc = null;  this.vSrc = null;

      // Audible route: 'webaudio' (0–500%) default, 'element' only as fallback
      this.route = 'webaudio';

      // Worklet module URL cache
      this._collectorModuleURL = null;
      this._collectorReady = false;

      // Tap buffers (shared)
      this._tap = { node:null, proc:null, zero:null, nextDraw:0, prevHP:0 };

      // Waveform aggregator (as heard)
      this._wvf = {
        envHz:APP.ENV_HZ, decim:24,
        accMin:Infinity, accMax:-Infinity, cnt:0,
        ringMin:null, ringMax:null, write:0, filled:false,
        // Band aggregators (0=Low,1=Mid,2=High)
        accMinBand:[Infinity,Infinity,Infinity],
        accMaxBand:[-Infinity,-Infinity,-Infinity],
        ringMinBand:[null,null,null],
        ringMaxBand:[null,null,null]
      };

      // Simple one-pole filter bank for bands
      this._bf = null; // set after AudioContext becomes available

      // Overview interactivity
      this._ovDragMode = null;      // 'cursor' | 'A' | 'B' | null
      this._ovHandlersInstalled = false;

      // Secret loader state (3.3.6)
      this._frankLoaded = false;
      // Official loader state (3.3.7+)
      this._umichLoaded = false;

      this._render();
      this._ensureCtx();
      this._applyGain();
      this._loadInitialPlaylist();   // async safe
      this._loadTempoMeta();
      this._initTap();

	if(this.state.list.length) this._set(0,false); //	if(this.state.list.length) this._set(0,true);
    }

    /* ========== Init / Layout ========== */
    _render(){
      this.el.innerHTML = `
        <h1 class="brand">${APP.NAME} v ${APP.VERSION}</h1>
        <h2 class="title">Ready for uploads</h2>

        <div class="grid2">
          <!-- Left Column: Player -->
          <div class="col col--left">
            <video class="video" id="v" preload="auto" playsinline draggable="false"></video>
            <audio id="a" preload="auto"></audio>

            <div class="row-flex">
              <div class="seekbox" id="seekbox">
                <div class="bar-gray"></div>
                <div id="fill" class="loopfill"></div>
                <div id="cursor" class="cursor" title="Current position (I)"></div>
                <input type="range" id="seek" class="seek" min="0" max="100" step="0.1" value="0" />
                <div id="hA" class="handle hA" title="Loop start"></div>
                <div id="hB" class="handle hB" title="Loop end"></div>
              </div>
              <div id="time" class="time">0:00 / 0:00</div>
              <button class="speed-btn" id="loopclear" title="Clear loop">✖</button>
            </div>

            <div class="row-flex">
              <input type="range" id="vol" class="vol" min="0" max="${APP.VOLUME_MAX}" step="0.01" value="${APP.VOLUME_DEFAULT}" />
              <div id="vlabel" class="time">🔊 ${Math.round(APP.VOLUME_DEFAULT*100)} %</div>
            </div>

            <div class="row-flex">
              <button class="speed-btn" id="spdminus" title="Slower">−</button>
              <input type="range" id="spd" class="spd" min="${APP.SPEED_MIN}" max="${APP.SPEED_MAX}" step="0.01" value="${APP.SPEED_DEFAULT}" />
              <button class="speed-btn" id="spdplus" title="Faster">+</button>
              <button class="speed-btn" id="spdreset" title="Reset speed">1×</button>
              <div id="slabel" class="time">⏱ ${APP.SPEED_DEFAULT.toFixed(2)}×</div>
            </div>

            <div class="controls">
              <button class="btn" id="prev" title="Previous">⏮︎</button>
              <button class="btn btn--wide" id="toggle" title="Play/Pause">⏸︎</button>
              <button class="btn" id="next" title="Next">⏭︎</button>
              <button class="btn" id="fs" title="Fullscreen (video)">⛶</button>
              <button class="btn btn--repeat" id="rep" title="Repeat: One/All/Off" aria-label="Repeat: One"></button>
            </div>

            <div id="list" class="list"></div>

            <div id="up" class="uploader" tabindex="0" aria-label="Upload or drop files">
              <input type="file" id="file" accept="audio/*,video/*,.m4a,.flac,.wav,.mkv,.avi,.mov,.mp4,.webm" multiple hidden>
              <button class="up-btn" id="pick" type="button">➕ Upload</button>
              <p class="hint">or drag & drop files here</p>
            </div>

            </br>
            <!-- 3.3.7+: Official UMich playlist loader -->
            <div class="mixbar" role="group" aria-label="Official playlist">
              <button id="umich_btn" class="mix-btn" title="Append official UMich playlist to the current list">Load UMich Playlist</button>
              <span class="mix-hint">Appends items from <code>media/playlist_umich.json</code>; idempotent per session; duplicates auto‑renamed.</span>
            </div>
          </div>

          <!-- Right Column: Tempo + Signal -->
          <div class="col col--right">
            <div id="meta" class="meta" role="group" aria-label="Tempo & summary details" hidden>
              <div class="kv"><span>BPM</span><span id="m_bpm">–</span></div>
              <div class="kv"><span>Confidence</span><span id="m_conf">–</span></div>
              <div class="kv"><span>Beat period</span><span id="m_ms">–</span></div>
              <div class="kv"><span>Half / Double</span><span id="m_halfdouble">–</span></div>
              <div class="kv"><span>Tempo class</span><span id="m_class">–</span></div>
              <div class="kv"><span>Effective @ speed</span><span id="m_scaled">–</span></div>

              <div class="hr" aria-hidden="true"></div>
              <div class="kv"><span>Loudness (~LUFS)</span><span id="m_lufs">–</span></div>
              <div class="kv"><span>Peak</span><span id="m_peak">–</span></div>
              <div class="kv"><span>RMS</span><span id="m_rms">–</span></div>
              <div class="kv"><span>Crest</span><span id="m_crest">–</span></div>
              <div class="kv"><span>Dyn range (P10–P90)</span><span id="m_dyn">–</span></div>
              <div class="kv"><span>Spectral centroid</span><span id="m_cent">–</span></div>
              <div class="kv"><span>Pitch</span><span id="m_pitch">–</span></div>
              <div class="kv"><span>Pitch confidence</span><span id="m_pitchconf">–</span></div>
              <div class="kv"><span>Stereo correlation</span><span id="m_stereo">–</span></div>
            </div>

            <!-- Trim + Mix + ICA bar (above Signal) -->
            <div class="mixbar" role="group" aria-label="Edit tools">
              <button id="trim" class="mix-btn" title="Trim current loop range">Trim</button>
              <button id="mix"  class="mix-btn" title="Mix last two items with A → stereo (L,R)">Mix Last Two</button>
              <button id="ica"  class="mix-btn" title="Separate current stereo mix into two sources (FastICA)">ICA Separation</button>
              <span class="mix-hint">Trim cuts the loop and auto‑downloads the clip; Mix uses A = [[1,1],[0.5,2]]; ICA separates the stereo mix.</span>
            </div>

            <div id="signal" class="signal" role="group" aria-label="Signal views" hidden>
              <div class="head">
                <span>Signal</span>
                <div class="controls">
                  <label>Mid&nbsp;
                    <select id="win_mid" title="Mid zoom window (s)">
                      <option value="4">4 s</option>
                      <option value="6">6 s</option>
                      <option value="8" selected>8 s</option>
                      <option value="12">12 s</option>
                    </select>
                  </label>
                  <label>Micro&nbsp;
                    <select id="win_micro" title="Micro zoom half-window (±s)">
                      <option value="1">±1.0 s</option>
                      <option value="1.5">±1.5 s</option>
                      <option value="2">±2.0 s</option>
                      <option value="3" selected>±3.0 s</option>
                    </select>
                  </label>
                  <button class="speed-btn" id="sig_clear" title="Clear live buffers">✖</button>
                </div>
              </div>

              <!-- 1) Overview (whole file) -->
              <svg id="ov_svg" class="sig-svg" viewBox="0 0 400 70" preserveAspectRatio="none" aria-label="Overview waveform"></svg>

              <!-- 2) Live mid-zoom (right-anchored at now) -->
              <svg id="wave_mid_svg" class="sig-svg" viewBox="0 0 400 120" preserveAspectRatio="none" aria-label="Waveform (mid)"></svg>

              <!-- 3) Centered micro-zoom (± window around playhead) -->
              <svg id="wave_micro_svg" class="sig-svg" viewBox="0 0 400 70" preserveAspectRatio="none" aria-label="Waveform (micro)"></svg>

              <div class="sig-note">Mid shows a live trailing window. Micro shows a centered window (default ±3 s). If an overview cannot be built, Micro falls back to a trailing live window.</div>

              <!-- 4) Band rows — live trailing; length = Mid window -->
              <div class="head" style="margin-top:8px;">
                <span>Bands (color-coded)</span>
              </div>

              <div class="sig-rowtitle sig-rowtitle--high">High (≥ ~2 kHz)</div>
              <svg id="wave_high_svg" class="sig-svg" viewBox="0 0 400 60" preserveAspectRatio="none" aria-label="Waveform (High band, live)"></svg>

              <div class="sig-rowtitle sig-rowtitle--mid">Mid (~200–2000 Hz)</div>
              <svg id="wave_midband_svg" class="sig-svg" viewBox="0 0 400 60" preserveAspectRatio="none" aria-label="Waveform (Mid band, live)"></svg>

              <div class="sig-rowtitle sig-rowtitle--low">Low (≤ ~200 Hz)</div>
              <svg id="wave_low_svg" class="sig-svg" viewBox="0 0 400 60" preserveAspectRatio="none" aria-label="Waveform (Low band, live)"></svg>

              <div class="sig-note">Band rows use the same trailing length as the selected “Mid” window.</div>
            </div>
          </div>
        </div>

        <div class="footer">
          nGene Hemodynamic Research Center<br>
          © 2013 Hyunsuk Frank Roh, MD. All rights reserved.
        </div>
      `;

      this.$ = {
        v:$('#v',this.el), a:$('#a',this.el),
        seek:$('#seek',this.el), seekbox:$('#seekbox',this.el),
        time:$('#time',this.el), hA:$('#hA',this.el), hB:$('#hB',this.el),
        fill:$('#fill',this.el), cursor:$('#cursor',this.el),
        loopClear:$('#loopclear',this.el),
        toggle:$('#toggle',this.el), prev:$('#prev',this.el), next:$('#next',this.el),
        fs:$('#fs',this.el), rep:$('#rep',this.el),
        vol:$('#vol',this.el), vlabel:$('#vlabel',this.el),
        spd:$('#spd',this.el), sminus:$('#spdminus',this.el), splus:$('#spdplus',this.el),
        sreset:$('#spdreset',this.el), slabel:$('#slabel',this.el),
        brand:$('.brand',this.el),
        title:$('.title',this.el),
        list:$('#list',this.el), file:$('#file',this.el), pick:$('#pick',this.el), up:$('#up',this.el),
        meta:$('#meta',this.el),
        m_bpm:$('#m_bpm',this.el), m_conf:$('#m_conf',this.el), m_ms:$('#m_ms',this.el),
        m_halfdouble:$('#m_halfdouble',this.el), m_class:$('#m_class',this.el), m_scaled:$('#m_scaled',this.el),
        // Summary fields (3.3.8)
        m_lufs:$('#m_lufs',this.el), m_peak:$('#m_peak',this.el), m_rms:$('#m_rms',this.el),
        m_crest:$('#m_crest',this.el), m_dyn:$('#m_dyn',this.el), m_cent:$('#m_cent',this.el),
        m_pitch:$('#m_pitch',this.el), m_pitchconf:$('#m_pitchconf',this.el), m_stereo:$('#m_stereo',this.el),

        trimBtn:$('#trim',this.el), mixBtn:$('#mix',this.el), icaBtn:$('#ica',this.el),
        signal:$('#signal',this.el),
        winMid:$('#win_mid',this.el), winMicro:$('#win_micro',this.el),
        sigClear:$('#sig_clear',this.el),
        ovSVG:$('#ov_svg',this.el),
        waveMidSVG:$('#wave_mid_svg',this.el),
        waveMicroSVG:$('#wave_micro_svg',this.el),
        // Band SVGs
        waveLowSVG:$('#wave_low_svg',this.el),
        waveMidBandSVG:$('#wave_midband_svg',this.el),
        waveHighSVG:$('#wave_high_svg',this.el),
        // UMich button
        umichBtn:$('#umich_btn',this.el)
      };

      this.$.up.classList.add('pulse');
      setTimeout(()=>this.$.up.classList.remove('pulse'), 30000);

      this._refreshList();
      this._updateLoopGraphics();
      this._updateCursorPct(0,1);
      this._bind();
      this._updateRepeatVisuals();

      // Responsive redraw
      window.addEventListener('resize', ()=>{ this._drawOverview(); this._redrawSignal(true); }, { passive:true });
    }

    _ensureCtx(){
      if(this.ctx) return;
      try{
        this.ctx = new (window.AudioContext||window.webkitAudioContext)();

        // AUDIO chain
        this.aGain = this.ctx.createGain();
        this.aSrc = this.ctx.createMediaElementSource(this.$.a);
        this.aSrc.connect(this.aGain).connect(this.ctx.destination);

        // VIDEO chain
        this.vGain = this.ctx.createGain();
        this.vSrc = this.ctx.createMediaElementSource(this.$.v);
        this.vSrc.connect(this.vGain).connect(this.ctx.destination);

        // Default to WebAudio route (single audible path via GainNode)
        this._setOutputRoute('webaudio');
        this._setupBandFilters();
      }catch(e){
        console.warn('WebAudio not available; 500% gain not supported.', e);
        this._setOutputRoute('element');
      }
    }

    _setupBandFilters(){
      if(!this.ctx) return;
      const sr = this.ctx.sampleRate||48000;
      const dt = 1/sr;
      const mkLP = (fc)=>{ const RC=1/(2*Math.PI*fc); const a=dt/(RC+dt); return {a, y:0}; };
      const mkHP = (fc)=>{ const RC=1/(2*Math.PI*fc); const a=RC/(RC+dt); return {a, y:0, xPrev:0}; };
      this._bf = {
        sr,
        hp20   : mkHP(APP.BAND_EDGES.lowHP),
        lp200  : mkLP(APP.BAND_EDGES.lowLP),
        hp200  : mkHP(APP.BAND_EDGES.midHP),
        lp2000 : mkLP(APP.BAND_EDGES.midLP),
        hp2000 : mkHP(APP.BAND_EDGES.highHP)
      };
    }

    _hp1(flt, x){ const y = flt.a*(flt.y + x - flt.xPrev); flt.y = y; flt.xPrev = x; return y; }
    _lp1(flt, x){ const y = flt.y + flt.a*(x - flt.y); flt.y = y; return y; }

    _setOutputRoute(route){
      this.route = route;
      const g = clamp(this.state.vol,0,APP.VOLUME_MAX);

      if(route === 'element'){
        const elVol = clamp(g,0,1);
        this.$.a.volume = elVol; this.$.v.volume = elVol;
        if(this.aGain) this.aGain.gain.value = 0.0;
        if(this.vGain) this.vGain.gain.value = 0.0;
      }else{
        this.$.a.volume = 1.0;
        this.$.v.volume = 1.0;
        if(this.aGain) this.aGain.gain.value = g;
        if(this.vGain) this.vGain.gain.value = g;
      }
      this._updateVolLabel();
    }

    _applyGain(){ this._setOutputRoute(this.route); }
    _updateVolLabel(){
      const g = clamp(this.state.vol,0,APP.VOLUME_MAX);
      const pct = Math.round((this.route==='element' ? clamp(g,0,1) : g) * 100);
      this.$.vlabel.textContent = `🔊 ${pct} %`;
      this.$.vol.value = g.toFixed(2);
    }

    /* ===== Playlist loading (playlist.json with legacy fallback) ===== */
    async _loadInitialPlaylist(){
      const beforeEmpty = !this.state.list.length;
      try{
        const r = await fetch('playlist.json', { cache:'no-store' });
        if(r.ok){
          const arr = await r.json();
          this._ingestPlaylistArray(arr);
        }else{
          await this._loadLegacyPlaylist();
        }
      }catch{
        await this._loadLegacyPlaylist();
      }
      this._refreshList();
      if(beforeEmpty && this.state.list.length) this._set(0,false); //      if(beforeEmpty && this.state.list.length) this._set(0,true);
    }

    _ingestPlaylistArray(arr){
      if(!Array.isArray(arr)) return;
      const list = [];
      for(const p of arr){
        let src='', name='', type='';
        if(typeof p === 'string'){
          src = String(p).trim();
          name = src.split('/').pop();
        }else if(p && typeof p === 'object'){
          src = String(p.src ?? p.url ?? '').trim();
          name = String(p.name ?? (src.split('/').pop()||'')).trim();
          type = String(p.type ?? '');
        }
        if(src) list.push({ src, name, type });
      }
      if(list.length){
        this.state.list = list;
        this.$.title.textContent = 'Loading…';
      }
    }

    /* 3.3.6 — Parser that returns normalized items without overwriting current list */
    _normalizePlaylistArray(arr){
      if(!Array.isArray(arr)) return [];
      const out = [];
      for(const p of arr){
        let src='', name='', type='';
        if(typeof p === 'string'){
          src = String(p).trim();
          name = src.split('/').pop();
        }else if(p && typeof p === 'object'){
          src = String(p.src ?? p.url ?? '').trim();
          name = String(p.name ?? (src.split('/').pop()||'')).trim();
          type = String(p.type ?? '');
        }
        if(src) out.push({ src, name, type });
      }
      return out;
    }

    async _loadLegacyPlaylist(){
      try{
        const r = await fetch('/media/playlist.json', { cache:'no-store' });
        if(!r.ok) return;
        const arr = await r.json();
        this._ingestPlaylistArray(arr);
      }catch{ /* ignore */ }
    }

    _loadTempoMeta(){
      fetch('/media/tempo_meta.json')
        .then(r=>r.ok?r.json():{})
        .then(j=>{
          this.state.meta = j || {};
          this._refreshList();
        })
        .catch(()=>{});
    }

    _isVideo(it){ return it?.type ? (/^video\//).test(it.type) : isVideoExt(it?.src); }
    _media(){ return this._isVideo(this.state.list[this.state.idx]) ? this.$.v : this.$.a; }

    _repeatIconHTML(mode){
      if(mode==='one'){ return `<span class="rep-wrap">🔁<span class="rep-badge">1</span></span>`; }
      if(mode==='all'){ return `<span class="rep-wrap">🔁</span>`; }
      return `<span class="rep-wrap">⛔</span>`;
    }
    _updateRepeatVisuals(){
      this.$.rep.innerHTML = this._repeatIconHTML(this.state.repeat);
      const label = this.state.repeat==='one' ? 'Repeat: One'
                   : this.state.repeat==='all' ? 'Repeat: All'
                   : 'Repeat: Off';
      this.$.rep.title = label; this.$.rep.setAttribute('aria-label', label);
    }

    _refreshList(){
      this.$.list.innerHTML = '';
      this.state.list.forEach((it,i)=>{
        const row = document.createElement('div');
        row.className = 'row';
        const meta = this.state.meta[it.name] || {};
        const badge = meta.pending ? '…' : (meta.bpm!==undefined ? `${meta.bpm} BPM` : '–');

        // Left side: ↓ + filename (3.3.3 “send to bottom”)
        const left = document.createElement('div');
        left.className = 'left';

        const downBtn = document.createElement('button');
        downBtn.className = 'move';
        downBtn.title = 'Move to bottom';
        downBtn.setAttribute('aria-label','Move to bottom');
        downBtn.textContent = '↓';
        downBtn.disabled = (i===this.state.list.length-1);
        downBtn.onclick = (ev)=>{ ev.stopPropagation(); this._moveRowToBottom(i); };

        const nameSpan = document.createElement('span');
        nameSpan.className = 'name';
        nameSpan.textContent = it.name;

        left.appendChild(downBtn);
        left.appendChild(nameSpan);

        const rightBadge = document.createElement('span');
        rightBadge.className = 'badge';
        rightBadge.textContent = badge;

        row.appendChild(left);
        row.appendChild(rightBadge);

        row.onclick = ()=>this._set(i,true);
        row.dataset.name = it.name;
        this.$.list.appendChild(row);
      });
      this._hilite();
      this._updateMixButton();
      this._updateTrimButton();
      this._updateICABtn();
    }

    /* New in 3.3.3: send row to bottom */
    _moveRowToBottom(i){
      if(i < 0 || i >= this.state.list.length-1) return;
      const item = this.state.list.splice(i,1)[0];
      this.state.list.push(item);

      if(this.state.idx === i) this.state.idx = this.state.list.length-1;
      else if(this.state.idx > i) this.state.idx -= 1;

      this._refreshList();
      this._hilite();
    }

    _updateMixButton(){
      if(!this.$.mixBtn) return;
      const ok = this.state.list.length >= 2;
      this.$.mixBtn.disabled = !ok;
      this.$.mixBtn.title = ok
        ? 'Mix last two playlist items with A → stereo (L,R)'
        : 'Need at least two items to mix';
    }

    _updateTrimButton(){
      if(!this.$.trimBtn) return;
      const it = this.state.list[this.state.idx];
      const m = this._media();
      const dur = m && isFinite(m.duration) ? m.duration : 0;
      const span = (this.state.loopEnd - this.state.loopStart) * dur;
      const ok = !!it && dur > 0 && span >= 0.05;
      this.$.trimBtn.disabled = !ok;
      this.$.trimBtn.title = ok ? 'Trim current loop range' : 'Set a non-zero loop to enable Trim';
    }

    _updateICABtn(){
      if(!this.$.icaBtn) return;
      const hasAny = this.state.list.length > 0;
      this.$.icaBtn.disabled = !hasAny;
      this.$.icaBtn.title = hasAny
        ? 'Separate current stereo mix into two sources (FastICA)'
        : 'Load or select a stereo item to enable ICA';
    }

    _updateRowBPMOnly(name, bpm, pending){
      const rows = this.$.list.querySelectorAll('.row');
      rows.forEach(r=>{
        if(r.dataset.name === name){
          const span = r.querySelector('.badge');
          if(pending){ span.textContent = '…'; return; }
          span.textContent = (bpm!==undefined && bpm!==null) ? `${bpm} BPM` : '–';
        }
      });
    }

    _hilite(){ [...this.$.list.children].forEach((e,i)=>e.classList.toggle('active', i===this.state.idx)); }

    _updateLoopGraphics(){
      const s = this.state.loopStart*100, e = this.state.loopEnd*100;
      this.$.hA.style.left = `${s}%`; this.$.hB.style.left = `${e}%`;
      this.$.fill.style.left = `${s}%`; this.$.fill.style.width = `${e - s}%`;
      this._updateTrimButton();
      this._drawOverview();
    }

    _resetLoop(){
      this.state.loopStart = 0; this.state.loopEnd = 1;
      this._updateLoopGraphics();
      this._drawOverview();
    }

    _updateTempoPanel(){
      const it = this.state.list[this.state.idx];
      if(!it){ this.$.meta.hidden = true; this.$.signal.hidden = true; return; }
      const meta = this.state.meta[it.name] || {};
      if(meta.pending){
        this.$.m_bpm.textContent='…'; this.$.m_conf.textContent='…'; this.$.m_ms.textContent='…';
        this.$.m_halfdouble.textContent='…'; this.$.m_class.textContent='…'; this.$.m_scaled.textContent='…';

        this.$.m_lufs.textContent='…'; this.$.m_peak.textContent='…'; this.$.m_rms.textContent='…';
        this.$.m_crest.textContent='…'; this.$.m_dyn.textContent='…'; this.$.m_cent.textContent='…';
        this.$.m_pitch.textContent='…'; this.$.m_pitchconf.textContent='…'; this.$.m_stereo.textContent='…';

        this.$.meta.hidden = false;
      }else{
        const spd = this.state.spd || 1;
        const scaled = meta.bpm ? Math.round(meta.bpm * spd) : undefined;
        this.$.m_bpm.textContent = meta.bpm ? `${meta.bpm} BPM` : '–';
        this.$.m_conf.textContent = meta.conf!==undefined ? `${Math.round((meta.conf||0)*100)} %` : '–';
        this.$.m_ms.textContent = meta.beatMs ? `${Math.round(meta.beatMs)} ms` : '–';
        this.$.m_halfdouble.textContent = (meta.half||meta.double) ? `${meta.half||'–'} / ${meta.double||'–'}` : '–';
        this.$.m_class.textContent = meta.class || '–';
        this.$.m_scaled.textContent = (scaled && isFinite(scaled)) ? `${scaled} BPM @ ${spd.toFixed(2)}×` : '–';

        // Summary (3.3.8)
        this.$.m_lufs.textContent = (meta.loudnessDb!==undefined) ? `${meta.loudnessDb.toFixed(1)} LUFS~` : '–';
        this.$.m_peak.textContent  = (meta.peakDb!==undefined) ? `${meta.peakDb.toFixed(1)} dBFS` : '–';
        this.$.m_rms.textContent   = (meta.rmsDb!==undefined)  ? `${meta.rmsDb.toFixed(1)} dBFS` : '–';
        this.$.m_crest.textContent = (meta.crestDb!==undefined)? `${meta.crestDb.toFixed(1)} dB` : '–';
        this.$.m_dyn.textContent   = (meta.drDb!==undefined)   ? `${meta.drDb.toFixed(1)} dB` : '–';
        this.$.m_cent.textContent  = (meta.centroidHz!==undefined) ? `${Math.round(meta.centroidHz)} Hz` : '–';

        if(meta.pitchHz && isFinite(meta.pitchHz)){
          const note = meta.pitchNote || '';
          this.$.m_pitch.textContent = `${note} (${meta.pitchHz.toFixed(1)} Hz)`;
        }else{
          this.$.m_pitch.textContent = '–';
        }
        this.$.m_pitchconf.textContent = (meta.pitchConf!==undefined) ? `${Math.round((meta.pitchConf||0)*100)} %` : '–';
        this.$.m_stereo.textContent = (meta.stereoCorr!==undefined) ? `${meta.stereoCorr.toFixed(2)}` : '–';

        this.$.meta.hidden = false;
      }
      this.$.signal.hidden = false;
      this._drawOverview();
      this._redrawSignal(true);
    }

    _updateTimeAndCursorByMedia(){
      const m = this._media();
      if(!m.duration) return;
      const pct = timeToPct(m.currentTime, m.duration);
      this.$.seek.value = (pct*100).toFixed(3);
      this.$.time.textContent = `${fmt(m.currentTime)} / ${fmt(m.duration)}`;

      const clampedPct = clamp(pct, this.state.loopStart, this.state.loopEnd);
      if(Math.abs(clampedPct - pct) > 1e-6){
        m.currentTime = pctToTime(clampedPct, m.duration);
      }

      const EPS_EDGE = Math.max(0.01, m.duration * 0.001);
      if(this.state.loopEnd < 1 && m.currentTime >= pctToTime(this.state.loopEnd, m.duration) - EPS_EDGE){
        this._jumpToLoopStartAndResume(); return;
      }

      this._updateCursorPct(timeToPct(m.currentTime, m.duration));
      this._drawOverview();
      this._redrawSignal(false);

      /* 3.3.3: ensure Trim enables as soon as metadata/duration is known,
         so default full-range loop can be trimmed without user adjustment. */
      this._updateTrimButton();
    }

    _jumpToLoopStartAndResume(){
      const m = this._media();
      if(!m.duration) return;
      const wasPlaying = !m.paused;
      const EPS = Math.max(0.01, m.duration * 0.001);
      const startT = clamp(
        pctToTime(this.state.loopStart, m.duration) + EPS,
        0,
        Math.max(0, pctToTime(this.state.loopEnd, m.duration) - EPS)
      );
      m.currentTime = startT;
      this._updateCursorPct(timeToPct(startT, m.duration));
      if(wasPlaying) m.play().catch(()=>{});
    }

    _updateCursorPct(pct){ this.$.cursor.style.left = `${clamp(pct, this.state.loopStart, this.state.loopEnd)*100}%`; }

    _set(i,auto){
      if(!this.state.list.length) return;
      this.state.idx = (i + this.state.list.length) % this.state.list.length;
      const it = this.state.list[this.state.idx];

      this.$.a.pause(); this.$.v.pause();

      if(this._isVideo(it)){
        this.$.v.src = it.src; this.$.v.style.display = 'block'; this.$.a.src = '';
        this.$.v.playbackRate = this.state.spd;
        if(auto){ this.$.v.play().catch(()=>{}); }
      }else{
        this.$.a.src = it.src; this.$.v.style.display = 'none'; this.$.v.src = '';
        this.$.a.playbackRate = this.state.spd;
        if(auto){ this.$.a.play().catch(()=>{}); }
      }

      const meta = this.state.meta[it.name] || {};
      const badge = meta && meta.bpm!==undefined ? `${meta.bpm} BPM` : '';
      const detail = [];
      if(meta.tempo) detail.push(meta.tempo);
      if(meta.stability) detail.push(meta.stability);
      const suffix = [badge, ...detail].filter(Boolean).join(' · ');
      this.$.title.textContent = suffix ? `${it.name} – ${suffix}` : it.name;

      this.$.toggle.textContent = '⏸︎';
      this.$.seek.value = 0; this.$.time.textContent = '0:00 / 0:00';
      this._hilite(); this._resetLoop(); this._updateCursorPct(0,1);
      this._updateTempoPanel();

      this._waveClear();
      this._updateTrimButton();
      this._updateICABtn();

      /* 3.3.5: ensure Overview is built for playlist.json items as soon as selected */
      this._ensureOverviewForCurrent();  // fire-and-forget
    }

    _seekToPct(pct){
      const m = this._media();
      if(!m.duration) return;
      const p = clamp(pct, this.state.loopStart, this.state.loopEnd);
      m.currentTime = pctToTime(p, m.duration);
      this.$.seek.value = (p*100).toFixed(3);
      this._updateCursorPct(p);
      this.$.time.textContent = `${fmt(m.currentTime)} / ${fmt(m.duration)}`;
      this._drawOverview();
      this._redrawSignal(true);
    }

    /* ========== Bind Events ========== */
    _bind(){
      const resumeCtx = ()=>{
        this._ensureCtx();
        if(this.ctx?.state === 'suspended') this.ctx.resume?.();
      };

      ['timeupdate','loadedmetadata'].forEach(ev=>{
        this.$.a.addEventListener(ev, ()=>this._updateTimeAndCursorByMedia());
        this.$.v.addEventListener(ev, ()=>this._updateTimeAndCursorByMedia());
      });

      const setPlayGlyph = ()=>{ this.$.toggle.textContent = '⏸︎'; };
      const setPauseGlyph = ()=>{ this.$.toggle.textContent = '▶︎'; };
      this.$.a.addEventListener('play', setPlayGlyph);
      this.$.v.addEventListener('play', setPlayGlyph);
      this.$.a.addEventListener('pause', setPauseGlyph);
      this.$.v.addEventListener('pause', setPauseGlyph);

      const onEnded = ()=>{
        if(this.state.loopEnd < 1){ this._jumpToLoopStartAndResume(); return; }
        if(this.state.repeat==='one') this._set(this.state.idx,true);
        else if(this.state.idx < this.state.list.length - 1) this._set(this.state.idx+1,true);
        else if(this.state.repeat==='all') this._set(0,true);
        else this.$.toggle.textContent = '▶︎';
      };
      this.$.a.addEventListener('ended', onEnded);
      this.$.v.addEventListener('ended', onEnded);

      const playPause = ()=>{
        const m = this._media();
        if(m.paused){
          resumeCtx();
          const p = m.play();
          if(p?.catch) p.catch(()=>{});
        }else{ m.pause(); }
      };
      this.$.toggle.onclick = playPause;

      let clickTimer = null;
      this.$.v.addEventListener('pointerup', (e)=>{
        if (e.pointerType === 'mouse' && e.button !== 0) return;
        if (clickTimer){ clearTimeout(clickTimer); clickTimer = null; this._toggleFS(); }
        else{ clickTimer = setTimeout(()=>{ clickTimer = null; playPause(); }, 200); }
      });

      this.$.prev.onclick = ()=>{ resumeCtx(); this._set(this.state.idx-1,true); };
      this.$.next.onclick = ()=>{ resumeCtx(); this._set(this.state.idx+1,true); };

      this.$.rep.onclick = ()=>{
        this.state.repeat = (this.state.repeat==='one') ? 'all' : (this.state.repeat==='all') ? 'none' : 'one';
        this._updateRepeatVisuals();
      };

      const onFSChange = ()=>{ this._setOutputRoute(this.route); };
      this.$.fs?.addEventListener('click', ()=>this._toggleFS());
      document.addEventListener('keydown', e=>{ if(e.key.toLowerCase() === 'f') this._toggleFS(); });
      document.addEventListener('fullscreenchange', onFSChange);
      document.addEventListener('webkitfullscreenchange', onFSChange);

      this.$.vol.oninput = e=>{
        resumeCtx();
        this.state.vol = parseFloat(e.target.value);
        this._applyGain();
      };

      const applySpd = ()=>{
        this.$.a.playbackRate = this.$.v.playbackRate = this.state.spd;
        this.$.spd.value = this.state.spd.toFixed(2);
        this.$.slabel.textContent = `⏱ ${this.state.spd.toFixed(2)}×`;
        this._drawOverview(); this._redrawSignal(true);
      };
      this.$.spd.oninput  = e=>{ this.state.spd = parseFloat(e.target.value); applySpd(); };
      this.$.sminus.onclick= ()=>{ this.state.spd = clamp(+(this.state.spd-0.01).toFixed(2),APP.SPEED_MIN,APP.SPEED_MAX); applySpd(); };
      this.$.splus.onclick = ()=>{ this.state.spd = clamp(+(this.state.spd+0.01).toFixed(2),APP.SPEED_MIN,APP.SPEED_MAX); applySpd(); };
      this.$.sreset.onclick= ()=>{ this.state.spd = APP.SPEED_DEFAULT; applySpd(); };

      /* Mix / Trim / ICA */
      this.$.mixBtn.onclick  = ()=>{ this._mixLastTwo().catch(()=>{}); };
      this.$.trimBtn.onclick = ()=>{ this._trimLoopToNewFile().catch(()=>{}); };
      this.$.icaBtn.onclick  = ()=>{ this._icaSeparateCurrent().catch(()=>{}); };

      /* Signal controls */
      this.$.winMid.addEventListener('change', ()=>{
        this.state.sig.winMid = parseFloat(this.$.winMid.value)||APP.MID_WINDOW_SEC;
        this._allocWaveWindow(); this._redrawSignal(true);
      });
      this.$.winMicro.addEventListener('change', ()=>{
        this.state.sig.winMicro = parseFloat(this.$.winMicro.value)||APP.MICRO_HALF_SEC;
        this._allocWaveWindow(); this._redrawSignal(true);
      });
      this.$.sigClear.addEventListener('click', ()=>{ this._waveClear(); this._redrawSignal(true); });

      /* Uploads / Drag & Drop */
      this.$.up.addEventListener('click', (e)=>{ if(e.target !== this.$.pick) this.$.file.click(); });
      this.$.up.addEventListener('keydown', (e)=>{
        const k = e.key;
        if(k === 'Enter' || k === ' '){
          e.preventDefault();
          this.$.file.click();
        }
      });
      this.$.pick.onclick = ()=> this.$.file.click();

      this.$.file.onchange = e=>{
        if(e.target.files && e.target.files.length) this._addFiles(e.target.files);
        e.target.value = '';
      };

      const allowDrop = ev=>{ ev.preventDefault(); if(ev.dataTransfer) ev.dataTransfer.dropEffect = 'copy'; };
      ['dragover','dragenter'].forEach(t=>{
        document.addEventListener(t, allowDrop, { passive:false });
        document.body.addEventListener(t, allowDrop, { passive:false });
        this.$.up.addEventListener(t, allowDrop, { passive:false });
      });

      let dragCounter = 0;
      const setDrag = on => this.$.up.classList.toggle('drag', !!on);
      this.$.up.addEventListener('dragenter', ()=>{ dragCounter++; setDrag(true); });
      this.$.up.addEventListener('dragleave', (e)=>{
        if(!this.$.up.contains(e.relatedTarget)){
          dragCounter = Math.max(0, dragCounter-1);
          if(dragCounter===0) setDrag(false);
        }
      });

      this.$.up.addEventListener('drop', e=>{
        e.preventDefault();
        const files = e.dataTransfer?.files;
        if(files && files.length) this._addFiles(files);
        dragCounter = 0; setDrag(false);
      });

      document.addEventListener('drop', e=>{
        e.preventDefault();
        if(e.target && e.target.closest && e.target.closest('#up')) return;
        const files = e.dataTransfer?.files;
        if(files && files.length){ this._addFiles(files); }
      }, { passive:false });

      /* Seek & Cursor (left seekbar) */
      this.$.seekbox.addEventListener('pointerdown', e=>{
        const ignore = [this.$.hA, this.$.hB, this.$.cursor];
        if(ignore.includes(e.target)) return;
        const r = this.$.seekbox.getBoundingClientRect();
        let p = (e.clientX - r.left)/r.width;
        p = clamp(p, this.state.loopStart, this.state.loopEnd);
        this._seekToPct(p);

        const onMove = ev=>{
          let np = (ev.clientX - r.left)/r.width;
          np = clamp(np, this.state.loopStart, this.state.loopEnd);
          this._seekToPct(np);
        };
        const onUp = ()=>{
          document.removeEventListener('pointermove', onMove);
          document.removeEventListener('pointerup', onUp);
        };
        document.addEventListener('pointermove', onMove);
        document.addEventListener('pointerup', onUp);
      });

      this._bindHandle(this.$.hA,'A');
      this._bindHandle(this.$.hB,'B');

      this.$.loopClear.onclick = ()=>this._resetLoop();

      this.$.seek.oninput = e=>{
        const pct = clamp(parseFloat(e.target.value)/100, this.state.loopStart, this.state.loopEnd);
        this._seekToPct(pct);
      };

      const dragCursor = (clientX)=>{
        const r = this.$.seekbox.getBoundingClientRect();
        let pct = (clientX - r.left)/r.width;
        pct = clamp(pct, this.state.loopStart, this.state.loopEnd);
        this._seekToPct(pct);
      };
      this.$.cursor.addEventListener('pointerdown', e=>{
        e.preventDefault();
        dragCursor(e.clientX);
        const onMove = ev=>dragCursor(ev.clientX);
        const onUp = ()=>{
          document.removeEventListener('pointermove', onMove);
          document.removeEventListener('pointerup', onUp);
        };
        document.addEventListener('pointermove', onMove);
        document.addEventListener('pointerup', onUp);
      });

      /* Overview (right → Overview ⇄ left) */
      this._installOverviewHandlers();

      /* 3.3.6 — private “Frank” playlist gesture */
      this._installSecretFrankGate();

      /* 3.3.7+ — Official UMich button handler */
      this.$.umichBtn?.addEventListener('click', ()=>{ this._loadUmichPlaylist().catch(()=>{}); });
    }

    _bindHandle(el, which){
      const move = (clientX)=>{
        const r = this.$.seekbox.getBoundingClientRect();
        const pct = clamp((clientX - r.left)/r.width, 0, 1);
        if(which === 'A') this.state.loopStart = Math.min(pct, this.state.loopEnd);
        else this.state.loopEnd = Math.max(pct, this.state.loopStart);
        this._updateLoopGraphics();

        const m = this._media();
        if(m.duration){
          const curPct = clamp(timeToPct(m.currentTime, m.duration), this.state.loopStart, this.state.loopEnd);
          m.currentTime = pctToTime(curPct, m.duration);
          this._updateCursorPct(curPct);
          this._drawOverview(); this._redrawSignal(true);
        }
      };
      el.addEventListener('pointerdown', e=>{
        e.preventDefault();
        move(e.clientX);
        const onMove = ev => move(ev.clientX);
        const onUp = ()=>{
          document.removeEventListener('pointermove', onMove);
          document.removeEventListener('pointerup', onUp);
        };
        document.addEventListener('pointermove', onMove);
        document.addEventListener('pointerup', onUp);
      });
    }

    _toggleFS(){
      if(this.$.v.style.display === 'none') return;
      const docFS = document.fullscreenElement || document.webkitFullscreenElement;
      const target = this.$.v;
      if(!docFS){
        (target.requestFullscreen||target.webkitRequestFullscreen||function(){})?.call(target);
        this.$.fs && (this.$.fs.textContent = '🗗');
      }else{
        (document.exitFullscreen||document.webkitExitFullscreen||function(){})?.call(document);
        this.$.fs && (this.$.fs.textContent = '⛶');
      }
    }

    /* ========== Official: UMICH playlist loader (3.3.7+) ========== */
    async _loadUmichPlaylist(){
      if(this._umichLoaded){ this._notifyBrand('✓ UMich playlist (already loaded)'); return; }
      try{
        let r = await fetch('media/playlist_umich.json', { cache:'no-store' });
        if(!r.ok){
          // Fallback to top-level file name if media/ path is absent
          r = await fetch('playlist_umich.json', { cache:'no-store' });
          if(!r.ok){ this._notifyBrand('UMich list not found'); return; }
        }
        const arr = await r.json();
        const items = this._normalizePlaylistArray(arr);
        if(!items.length){ this._notifyBrand('UMich list empty'); return; }

        const existingNames = new Set(this.state.list.map(it=>it.name));
        const ensureUnique = (name)=>{
          const m = /^(.*?)(\.[^.]+)?$/.exec(name||'item');
          const base = m && m[1] ? m[1] : 'item';
          const ext  = m && m[2] ? m[2] : '';
          if(!existingNames.has(name)){ existingNames.add(name); return name; }
          let k=2, cand = `${base} (${k})${ext}`;
          while(existingNames.has(cand)){ k++; cand = `${base} (${k})${ext}`; }
          existingNames.add(cand);
          return cand;
        };

        for(const it of items){
          const entry = { src:it.src, name: ensureUnique(it.name||it.src.split('/').pop()), type:it.type||'' };
          this.state.list.push(entry);
          if(!this.state.meta[entry.name]) this.state.meta[entry.name] = {};
        }
        this._umichLoaded = true;
        this._refreshList();
        this._notifyBrand('✓ UMich playlist');
      }catch{
        this._notifyBrand('UMich load failed');
      }finally{
        if(this.$.umichBtn) this.$.umichBtn.disabled = !!this._umichLoaded;
      }
    }

    /* ========== Secret: FRANK playlist loader (3.3.6) ========== */
    _installSecretFrankGate(){
      const brand = this.$.brand;
      if(!brand) return;
      let clicks = 0, t = null;
      const WINDOW_MS = 1500;
      const reset = ()=>{ clicks=0; if(t){ clearTimeout(t); t=null; } };
      brand.addEventListener('click', (e)=>{
        if(!e.shiftKey) { reset(); return; }
        clicks++;
        if(t) clearTimeout(t);
        t = setTimeout(reset, WINDOW_MS);
        if(clicks >= 5){
          reset();
          this._loadSecretFrankPlaylist().catch(()=>{});
        }
      });
    }

    async _loadSecretFrankPlaylist(){
      if(this._frankLoaded) { this._notifyBrand('✓ Frank playlist (already loaded)'); return; }
      try{
        const r = await fetch('media/playlist_frank.json', { cache:'no-store' });
        if(!r.ok) { this._notifyBrand('Frank list not found'); return; }
        const arr = await r.json();
        const items = this._normalizePlaylistArray(arr);
        if(!items.length){ this._notifyBrand('Frank list empty'); return; }

        const existingNames = new Set(this.state.list.map(it=>it.name));
        const ensureUnique = (name)=>{
          const m = /^(.*?)(\.[^.]+)?$/.exec(name||'item');
          const base = m && m[1] ? m[1] : 'item';
          const ext  = m && m[2] ? m[2] : '';
          if(!existingNames.has(name)){ existingNames.add(name); return name; }
          let k=2, cand = `${base} (${k})${ext}`;
          while(existingNames.has(cand)){ k++; cand = `${base} (${k})${ext}`; }
          existingNames.add(cand);
          return cand;
        };

        for(const it of items){
          const entry = { src:it.src, name: ensureUnique(it.name||it.src.split('/').pop()), type:it.type||'' };
          this.state.list.push(entry);
          if(!this.state.meta[entry.name]) this.state.meta[entry.name] = {};
        }
        this._frankLoaded = true;
        this._refreshList();
        this._notifyBrand('✓ Frank playlist');
      }catch{
        this._notifyBrand('Frank load failed');
      }
    }

    _notifyBrand(msg){
      if(!this.$.brand) return;
      const base = `${APP.NAME} v ${APP.VERSION}`;
      const prev = this.$.brand.textContent;
      this.$.brand.textContent = `${base} — ${msg}`;
      setTimeout(()=>{ this.$.brand.textContent = base; }, 1200);
    }

    /* ========== Files & BPM; overview construction; summary (3.3.8) ========== */
    _addFiles(fileList){
      const beforeEmpty = !this.state.list.length;
      const toAdd = [];

      this._ensureCtx();
      this.ctx?.resume?.();

      for(const f of fileList){
        const ok = /^(audio|video)\//.test(f.type) || isAudioExt(f.name) || isVideoExt(f.name);
        if(!ok) continue;
        const url = URL.createObjectURL(f);
        const entry = { src:url, name:f.name, type:f.type };
        toAdd.push(entry);

        if(!this.state.meta[f.name]) this.state.meta[f.name] = { pending:true };
        this._updateRowBPMOnly(f.name, undefined, true);

        this._estimateBPMForFile(f).then(meta=>{
          if(!this.state.meta[f.name]) this.state.meta[f.name] = {};
          Object.assign(this.state.meta[f.name], meta||{});
          this.state.meta[f.name].pending = false;
          this._updateRowBPMOnly(f.name, (meta||{}).bpm, false);

          if(meta && meta._buffer){
            this.state.meta[f.name].overview = this._buildOverview(meta._buffer);
            delete this.state.meta[f.name]._buffer;
          }

          const cur = this.state.list[this.state.idx];
          if(cur && cur.name === f.name){
            const m = this.state.meta[f.name] || {};
            const badge = m.bpm!==undefined ? `${m.bpm} BPM` : '';
            const detail = [];
            if(m.tempo) detail.push(m.tempo);
            if(m.stability) detail.push(m.stability);
            const suffix = [badge, ...detail].filter(Boolean).join(' · ');
            this.$.title.textContent = suffix ? `${f.name} – ${suffix}` : f.name;
            this._updateTempoPanel();
          }
        }).catch(()=>{
          if(!this.state.meta[f.name]) this.state.meta[f.name] = {};
          this.state.meta[f.name].bpm = undefined;
          this.state.meta[f.name].pending = false;
          this._updateRowBPMOnly(f.name, undefined, false);
          const cur = this.state.list[this.state.idx];
          if(cur && cur.name === f.name){ this._updateTempoPanel(); }
        });
      }

      if(!toAdd.length) return;

      this.state.list.push(...toAdd);
      this._refreshList();
      if(beforeEmpty) this._set(0,true);
    }

    async _estimateBPMForFile(file){
      const isAudio = file.type.startsWith('audio/') || isAudioExt(file.name);
      const isVideo = file.type.startsWith('video/') || isVideoExt(file.name);

      const analyzeAll = (buffer)=>{
        const t = this._analyzeTempo(buffer) || {};
        const s = this._analyzeAudioSummary(buffer) || {};
        const meta = Object.assign({}, t, s);
        meta._buffer = buffer; // for overview builder
        return meta;
      };

      if(isAudio){
        try{
          const ab = await file.arrayBuffer();
          const decoded = await this._decodeWithSafeCtx(ab);
          const meta = analyzeAll(decoded);
          return meta;
        }catch{ /* fallback below */ }
        try{ return await this._tempoFromElementCapture(file, 12, 'audio'); }catch{ return undefined; }
      }

      if(isVideo){
        try{
          const ab = await file.arrayBuffer();
          const decoded = await this._decodeWithSafeCtx(ab);
          if(decoded && decoded.duration > 0){
            const meta = analyzeAll(decoded);
            return meta;
          }
        }catch{ /* expected for some containers */ }
        try{ return await this._tempoFromElementCapture(file, 12, 'video'); }catch{ return undefined; }
      }
      return undefined;
    }

    _buildOverview(buffer){
      const targetBuckets = 1600;
      const len = buffer.length, chs = buffer.numberOfChannels;
      const step = Math.ceil(len / targetBuckets);
      const minA = new Float32Array(targetBuckets);
      const maxA = new Float32Array(targetBuckets);
      const tmp = new Float32Array(step);
      for(let b=0; b<targetBuckets; b++){
        const start = b*step, end = Math.min(len, start+step);
        let lo=Infinity, hi=-Infinity;
        for(let c=0;c<chs;c++){
          buffer.copyFromChannel(tmp.subarray(0, end-start), c, start);
          for(let i=0;i<end-start;i++){
            const v = tmp[i];
            if(v<lo) lo=v; if(v>hi) hi=v;
          }
        }
        minA[b] = lo===Infinity? 0 : lo;
        maxA[b] = hi===-Infinity? 0 : hi;
      }
      return { min:minA, max:maxA, buckets:targetBuckets, duration:buffer.duration };
    }

    async _decodeWithSafeCtx(arrayBuffer){
      const tmpCtx = this.ctx;
      if(tmpCtx && tmpCtx.decodeAudioData){
        return await tmpCtx.decodeAudioData(arrayBuffer.slice(0));
      }else{
        return await new Promise((res,rej)=>{
          const AC = window.AudioContext||window.webkitAudioContext;
          const c = AC ? new AC() : null;
          if(!c) return rej(new Error('No AudioContext'));
          c.decodeAudioData(arrayBuffer.slice(0), buf=>{ res(buf); c.close?.(); }, err=>{ rej(err); c.close?.(); });
        });
      }
    }

    async _tempoFromElementCapture(file, seconds=12, kind='video'){
      this._ensureCtx(); await this.ctx.resume?.();

      const url = URL.createObjectURL(file);
      const el = document.createElement(kind==='video'?'video':'audio');
      el.src = url; el.playsInline = true;
      el.style.position = 'fixed'; el.style.left = '-9999px'; el.style.top  = '-9999px';
      document.body.appendChild(el);

      const prevVol = el.volume; el.volume = 0.0;

      const src = this.ctx.createMediaElementSource(el);

      const data = [];
      const sampleRate = this.ctx.sampleRate;
      const maxSamples = Math.floor(sampleRate * seconds);
      let resolveFn, rejectFn, done = false;

      const finish = ()=>{
        if(done) return; done = true;
        try{
          const N = Math.min(data.length, maxSamples);
          const buf = this.ctx.createBuffer(1, N, sampleRate);
          buf.copyToChannel(new Float32Array(data.slice(0,N)), 0);
          cleanup();
          const meta = Object.assign({}, this._analyzeTempo(buf)||{}, this._analyzeAudioSummary(buf)||{});
          resolveFn(meta);
        }catch(e){ cleanup(); rejectFn(e); }
      };
      const cleanup = ()=>{
        try{ src.disconnect(); }catch(_){}
        try{ node && node.disconnect && node.disconnect(); }catch(_){}
        try{ zero && zero.disconnect && zero.disconnect(); }catch(_){}
        try{ proc && proc.disconnect && proc.disconnect(); }catch(_){}
        el.onloadedmetadata = null; el.onended = null; el.onerror = null;
        el.pause(); el.src = '';
        el.volume = prevVol;
        try{ document.body.removeChild(el); }catch(_){}
        URL.revokeObjectURL(url);
      };

      const p = new Promise((res, rej)=>{ resolveFn = res; rejectFn = rej; });

      let node=null, proc=null, zero=null;

      if(this.ctx.audioWorklet){
        await this._ensureCollectorModule();
        node = new AudioWorkletNode(this.ctx, 'collector');
        node.port.onmessage = e=>{
          const ch = e.data;
          for(let i=0;i<ch.length && data.length<maxSamples;i++) data.push(ch[i]);
          if(data.length>=maxSamples) finish();
        };
        zero = this.ctx.createGain(); zero.gain.value = 0;
        src.connect(node).connect(zero).connect(this.ctx.destination);
      }else{
        proc = this.ctx.createScriptProcessor ? this.ctx.createScriptProcessor(4096, 2, 2) : null;
        if(!proc){ cleanup(); throw new Error('No capture path'); }
        proc.onaudioprocess = (e)=>{
          const ch0 = e.inputBuffer.getChannelData(0);
          const ch1 = e.inputBuffer.numberOfChannels>1 ? e.inputBuffer.getChannelData(1) : null;
          for(let i=0;i<ch0.length && data.length<maxSamples;i++){
            data.push(ch1 ? 0.5*(ch0[i]+ch1[i]) : ch0[i]);
          }
          if(data.length>=maxSamples) finish();
        };
        src.connect(proc);
        zero = this.ctx.createGain(); zero.gain.value = 0;
        proc.connect(zero).connect(this.ctx.destination);
      }

      el.onloadedmetadata = ()=>{ el.play().catch(()=>{}); };
      el.onended = finish;
      el.onerror = ()=>{ cleanup(); rejectFn(new Error('media error')); };
      setTimeout(()=>{ if(!done) finish(); }, (seconds+2)*1000);

      return p;
    }

    _analyzeTempo(buffer){
      const chs = buffer.numberOfChannels;
      const len = buffer.length;
      const sr = buffer.sampleRate;

      const mono = new Float32Array(len);
      const tmp = new Float32Array(len);
      for(let c=0;c<chs;c++){ buffer.copyFromChannel(tmp, c); for(let i=0;i<len;i++) mono[i]+=tmp[i]; }
      const invC = 1/(chs||1);
      let prev = 0; for(let i=0;i<len;i++){ const x=(mono[i]*invC); const y=x-0.97*prev; prev=x; mono[i]=y; }

      let rms=0; for(let i=0;i<len;i++) rms+=mono[i]*mono[i];
      rms=Math.sqrt(rms/len)||1;
      for(let i=0;i<len;i++) mono[i]/=rms;

      const hop=512, win=2048, env=[];
      for(let i=0;i+win<=len;i+=hop){ let s=0; for(let j=0;j<win;j++) s+=Math.abs(mono[i+j]); env.push(s/win); }
      if(env.length<8) return { bpm: undefined };

      const onset = new Float32Array(env.length);
      for(let k=1;k<env.length;k++){ const d=env[k]-env[k-1]; onset[k]= d>0? d:0; }
      let mu=0,s2=0; for(let i=0;i<onset.length;i++) mu+=onset[i]; mu/=onset.length;
      for(let i=0;i<onset.length;i++){ const d=onset[i]-mu; s2+=d*d; }
      const sd=Math.sqrt(s2/(onset.length||1))||1;
      for(let i=0;i<onset.length;i++) onset[i]=(onset[i]-mu)/sd;

      const fps = sr/hop, minBPM=60, maxBPM=200;
      const minLag = Math.max(1, Math.round(fps*60/maxBPM));
      const maxLag = Math.max(minLag+1, Math.round(fps*60/minBPM));
      let bestLag=-1, bestVal=-1, secondVal=-1;
      for(let lag=minLag; lag<=maxLag; lag++){
        let s=0; for(let t=lag; t<onset.length; t++) s += onset[t]*onset[t-lag];
        if(s > bestVal){ secondVal=bestVal; bestVal=s; bestLag=lag; }
        else if(s > secondVal){ secondVal=s; }
      }
      if(bestLag<=0 || !isFinite(bestVal)) return { bpm: undefined };

      let bpm = (60*fps)/bestLag;
      while(bpm<60) bpm*=2; while(bpm>200) bpm/=2; bpm=Math.round(bpm);
      const conf = bestVal>0 ? clamp((bestVal - Math.max(0,secondVal))/Math.max(bestVal,1e-9), 0, 1) : 0;

      return {
        bpm: isFinite(bpm)&&bpm>0? bpm : undefined,
        conf,
        half: Math.round(bpm/2), double: Math.round(bpm*2),
        beatMs: 60000/Math.max(1,bpm),
        class: tempoClass(bpm)
      };
    }

    /* =========================================================
       3.3.5 — Ensure Overview exists & 3.3.8 — ensure Summary as needed
       ========================================================= */
    async _ensureOverviewForCurrent(){
      const it = this.state.list[this.state.idx];
      if(!it) return;
      const name = it.name;
      const meta = this.state.meta[name] || (this.state.meta[name] = {});
      if(meta.overview && meta.peakDb!==undefined) { this._updateTempoPanel(); return; }
      if(meta.ovPending) return;

      meta.ovPending = true;
      try{
        const buf = await this._decodeEntryToBuffer(it);
        if(buf){
          // Build Overview
          if(!meta.overview) meta.overview = this._buildOverview(buf);

          // If BPM not known yet, derive it
          if(meta.bpm === undefined){
            const t = this._analyzeTempo(buf) || {};
            Object.assign(meta, t);
            this._updateRowBPMOnly(name, meta.bpm, false);
          }
          // Summary (levels, centroid, pitch, etc.)
          if(meta.peakDb === undefined){
            const s = this._analyzeAudioSummary(buf) || {};
            Object.assign(meta, s);
          }
          meta.pending = false;
        }
      }catch(e){
        console.warn('Overview/Summary decode failed:', e);
      }finally{
        meta.ovPending = false;

        const cur = this.state.list[this.state.idx];
        if(cur && cur.name === name){
          const badge = meta && meta.bpm!==undefined ? `${meta.bpm} BPM` : '';
          const detail = [];
          if(meta.tempo) detail.push(meta.tempo);
          if(meta.stability) detail.push(meta.stability);
          const suffix = [badge, ...detail].filter(Boolean).join(' · ');
          this.$.title.textContent = suffix ? `${cur.name} – ${suffix}` : cur.name;

          this._updateTempoPanel();
        }
      }
    }

    /* =========================================================
       Live tap → drives waveform rows (full-band + bands)
       ========================================================= */
    async _ensureCollectorModule(){
      if(this._collectorReady) return true;
      if(!this.ctx?.audioWorklet) return false;
      if(!this._collectorModuleURL){
        const workletCode = `
          class CollectorProcessor extends AudioWorkletProcessor{
            process(inputs){
              const ch0 = inputs && inputs[0] && inputs[0][0] ? inputs[0][0] : null;
              if(!ch0) return true;
              const out = new Float32Array(ch0.length);
              out.set(ch0);
              this.port.postMessage(out, [out.buffer]);
              return true;
            }
          }
          registerProcessor('collector', CollectorProcessor);
        `;
        const blob = new Blob([workletCode], {type:'application/javascript'});
        this._collectorModuleURL = URL.createObjectURL(blob);
      }
      await this.ctx.audioWorklet.addModule(this._collectorModuleURL);
      this._collectorReady = true;
      return true;
    }

    _initTap(){
      if(!this.ctx) return;
      this._allocWaveWindow();

      const attach = async ()=>{
        if(this.ctx.audioWorklet && await this._ensureCollectorModule()){
          try{
            this._tap.node = new AudioWorkletNode(this.ctx, 'collector');
            this._tap.zero = this.ctx.createGain(); this._tap.zero.gain.value = 0;
            try{ this.aSrc && this.aSrc.connect(this._tap.node); }catch(_){}
            try{ this.vSrc && this.vSrc.connect(this._tap.node); }catch(_){}
            this._tap.node.connect(this._tap.zero).connect(this.ctx.destination);
            this._tap.node.port.onmessage = (e)=>this._tapIn(e.data);
          }catch(e){
            console.warn('Worklet collector unavailable', e);
          }
        }
        if(!this._tap.node){
          const proc = this.ctx.createScriptProcessor ? this.ctx.createScriptProcessor(2048, 2, 2) : null;
          if(!proc) return;
          proc.onaudioprocess = (e)=>{
            const ch0 = e.inputBuffer.getChannelData(0);
            const ch1 = e.inputBuffer.numberOfChannels>1 ? e.inputBuffer.getChannelData(1) : null;
            const L = ch0.length;
            const mix = new Float32Array(L);
            for(let i=0;i<L;i++) mix[i] = ch1 ? 0.5*(ch0[i]+ch1[i]) : ch0[i];
            this._tapIn(mix);
          };
          try{ this.aSrc && this.aSrc.connect(proc); }catch(_){}
          try{ this.vSrc && this.vSrc.connect(proc); }catch(_){}
          if(!this._tap.zero){
            this._tap.zero = this.ctx.createGain();
            this._tap.zero.gain.value = 0;
          }
          proc.connect(this._tap.zero).connect(this.ctx.destination);
          this._tap.proc = proc;
        }
        this.$.signal.hidden = false;
      };
      attach();
    }

    _tapIn(frame){
      if(!frame || !frame.length) return;

      this._waveInRaw(frame);

      const now = performance.now();
      if(now >= this._tap.nextDraw){
        this._redrawSignal(false);
        this._tap.nextDraw = now + 50;
      }
    }

    /* ---------- Waveform aggregator ---------- */
    _allocWaveWindow(){
      const sr = this.ctx ? this.ctx.sampleRate : 48000;
      const envHz = this._wvf.envHz;
      const decim = Math.max(1, Math.floor(sr / envHz));
      this._wvf.decim = decim;

      const maxSec = Math.max(this.state.sig.winMid, this.state.sig.winMicro*2, this.state.sig.ringMaxSec);
      const buckets = Math.max(Math.round(maxSec * envHz), 1000);

      this._wvf.ringMin = new Float32Array(buckets);
      this._wvf.ringMax = new Float32Array(buckets);
      this._wvf.ringMinBand = [new Float32Array(buckets), new Float32Array(buckets), new Float32Array(buckets)];
      this._wvf.ringMaxBand = [new Float32Array(buckets), new Float32Array(buckets), new Float32Array(buckets)];
      this._wvf.write = 0; this._wvf.filled = false;
      this._wvf.accMin = Infinity; this._wvf.accMax = -Infinity; this._wvf.cnt = 0;
      this._wvf.accMinBand = [Infinity,Infinity,Infinity];
      this._wvf.accMaxBand = [-Infinity,-Infinity,-Infinity];

      if(!this._bf) this._setupBandFilters();
    }

    _waveClear(){
      if(!this._wvf.ringMin) this._allocWaveWindow();
      this._wvf.ringMin.fill(0); this._wvf.ringMax.fill(0);
      for(let i=0;i<3;i++){
        this._wvf.ringMinBand[i].fill(0);
        this._wvf.ringMaxBand[i].fill(0);
      }
      this._wvf.write = 0; this._wvf.filled = false;
      this._wvf.accMin = Infinity; this._wvf.accMax = -Infinity; this._wvf.cnt = 0;
      this._wvf.accMinBand = [Infinity,Infinity,Infinity];
      this._wvf.accMaxBand = [-Infinity,-Infinity,-Infinity];
      if(this._bf){
        this._bf.hp20.y=0; this._bf.hp20.xPrev=0;
        this._bf.lp200.y=0;
        this._bf.hp200.y=0; this._bf.hp200.xPrev=0;
        this._bf.lp2000.y=0;
        this._bf.hp2000.y=0; this._bf.hp2000.xPrev=0;
      }
    }

    _waveInRaw(frame){
      const w = this._wvf;
      const bf = this._bf;
      for(let i=0;i<frame.length;i++){
        const x = frame[i];

        if(x < w.accMin) w.accMin = x;
        if(x > w.accMax) w.accMax = x;

        let low = x, mid = x, high = x;
        if(bf){ low = this._lp1(bf.lp200, this._hp1(bf.hp20, x)); }
        if(bf){ mid = this._lp1(bf.lp2000, this._hp1(bf.hp200, x)); }
        if(bf){ high = this._hp1(bf.hp2000, x); }

        if(low  < w.accMinBand[0]) w.accMinBand[0] = low;
        if(low  > w.accMaxBand[0]) w.accMaxBand[0] = low;
        if(mid  < w.accMinBand[1]) w.accMinBand[1] = mid;
        if(mid  > w.accMaxBand[1]) w.accMaxBand[1] = mid;
        if(high < w.accMinBand[2]) w.accMinBand[2] = high;
        if(high > w.accMaxBand[2]) w.accMaxBand[2] = high;

        w.cnt++;
        if(w.cnt >= w.decim){
          w.ringMin[w.write] = isFinite(w.accMin)? w.accMin : 0;
          w.ringMax[w.write] = isFinite(w.accMax)? w.accMax : 0;
          for(let b=0;b<3;b++){
            w.ringMinBand[b][w.write] = isFinite(w.accMinBand[b])? w.accMinBand[b] : 0;
            w.ringMaxBand[b][w.write] = isFinite(w.accMaxBand[b])? w.accMaxBand[b] : 0;
          }
          w.write = (w.write+1) % w.ringMin.length;
          if(w.write===0) w.filled = true;

          w.accMin = Infinity; w.accMax = -Infinity; w.cnt = 0;
          w.accMinBand[0]=w.accMinBand[1]=w.accMinBand[2]=Infinity;
          w.accMaxBand[0]=w.accMaxBand[1]=w.accMaxBand[2]=-Infinity;
        }
      }
    }

    /* ---------- Drawing ---------- */
    _drawOverview(){
      const svg = this.$.ovSVG;
      if(!svg) return;

      const it = this.state.list[this.state.idx];
      if(!it){ svg.innerHTML=''; return; }
      const meta = this.state.meta[it.name] || {};
      const ov = meta.overview;

      const W = Math.max(300, svg.clientWidth || 400);
      const H = 70, pad=4, mid = H/2;
      svg.setAttribute('viewBox', `0 0 ${W} ${H}`);
      svg.innerHTML = '';

      const axis = document.createElementNS('http://www.w3.org/2000/svg','line');
      axis.setAttribute('x1','0'); axis.setAttribute('x2', String(W));
      axis.setAttribute('y1', String(mid)); axis.setAttribute('y2', String(mid));
      axis.setAttribute('class','sig-rowline'); svg.appendChild(axis);

      if(!ov || !ov.min || !ov.max || !ov.duration){
        const lbl = document.createElementNS('http://www.w3.org/2000/svg','text');
        lbl.setAttribute('x', 6); lbl.setAttribute('y', mid-6);
        lbl.setAttribute('class','sig-label'); lbl.textContent = 'Overview appears after quick decode (if supported).';
        svg.appendChild(lbl);
        this._installOverviewHandlers();
        return;
      }

      let lo=Infinity, hi=-Infinity;
      for(let i=0;i<ov.buckets;i++){ const a=ov.min[i], b=ov.max[i]; if(a<lo) lo=a; if(b>hi) hi=b; }
      const amp = Math.max(1e-6, Math.max(Math.abs(lo), Math.abs(hi)));
      const yScale = (H/2 - 6) / amp;

      const xScale = (W-2*pad) / Math.max(1, ov.buckets-1);
      let dPos = `M ${pad} ${mid - ov.max[0]*yScale}`;
      let dNeg = `M ${pad} ${mid - ov.min[0]*yScale}`;
      for(let i=1;i<ov.buckets;i++){
        const x = pad + i*xScale;
        dPos += ` L ${x.toFixed(2)} ${(mid - ov.max[i]*yScale).toFixed(2)}`;
        dNeg += ` L ${x.toFixed(2)} ${(mid - ov.min[i]*yScale).toFixed(2)}`;
      }
      const p1 = document.createElementNS('http://www.w3.org/2000/svg','path'); p1.setAttribute('d', dPos); p1.setAttribute('class','sig-path'); svg.appendChild(p1);
      const p2 = document.createElementNS('http://www.w3.org/2000/svg','path'); p2.setAttribute('d', dNeg); p2.setAttribute('class','sig-path-neg'); svg.appendChild(p2);

      const dur = ov.duration;
      const xs = pad + (this.state.loopStart)*(W-2*pad);
      const xe = pad + (this.state.loopEnd  )*(W-2*pad);
      const xNow = (()=>{
        const m = this._media();
        const pct = (m && isFinite(m.currentTime) && isFinite(m.duration) && m.duration>0)
          ? clamp(m.currentTime / m.duration, 0, 1) : 0;
        return pad + pct*(W-2*pad);
      })();

      const fill = document.createElementNS('http://www.w3.org/2000/svg','rect');
      fill.setAttribute('class','ov-loopfill');
      fill.setAttribute('x', String(Math.min(xs,xe)));
      fill.setAttribute('y', String(pad));
      fill.setAttribute('width', String(Math.abs(xe-xs)));
      fill.setAttribute('height', String(H-2*pad));
      svg.appendChild(fill);

      const hdw = 8, hdy = pad+2, hdh = H-2*(pad+2);
      const hA = document.createElementNS('http://www.w3.org/2000/svg','rect');
      hA.setAttribute('class','ov-handle ov-hA');
      hA.setAttribute('x', String(xs - hdw/2)); hA.setAttribute('y', String(hdy));
      hA.setAttribute('width', String(hdw));     hA.setAttribute('height', String(hdh));
      svg.appendChild(hA);

      const hB = document.createElementNS('http://www.w3.org/2000/svg','rect');
      hB.setAttribute('class','ov-handle ov-hB');
      hB.setAttribute('x', String(xe - hdw/2)); hB.setAttribute('y', String(hdy));
      hB.setAttribute('width', String(hdw));     hB.setAttribute('height', String(hdh));
      svg.appendChild(hB);

      const now = document.createElementNS('http://www.w3.org/2000/svg','line');
      now.setAttribute('x1', String(xNow)); now.setAttribute('x2', String(xNow));
      now.setAttribute('y1', String(pad));  now.setAttribute('y2', String(H-pad));
      now.setAttribute('class','ov-cursor');
      svg.appendChild(now);

      const nowThin = document.createElementNS('http://www.w3.org/2000/svg','line');
      nowThin.setAttribute('x1', String(xNow)); nowThin.setAttribute('x2', String(xNow));
      nowThin.setAttribute('y1', String(pad));  nowThin.setAttribute('y2', String(H-pad));
      nowThin.setAttribute('class','now-line');
      svg.appendChild(nowThin);

      this._installOverviewHandlers();
    }

    _drawTrailingFromRing(svg, ringMin, ringMax, seconds, cls){
      if(!svg || !ringMin || !ringMax) return;
      const envHz = this._wvf.envHz;
      const need = Math.max(1, Math.round(seconds * envHz));
      const ringLen = ringMin.length;
      const have = this._wvf.filled ? ringLen : this._wvf.write;
      const W = Math.max(300, svg.clientWidth || 400);
      const H = parseInt(svg.getAttribute('viewBox')?.split(' ')[3]||'100',10);
      const pad=4, mid = H/2;

      svg.setAttribute('viewBox', `0 0 ${W} ${H}`);
      svg.innerHTML = '';

      const axis = document.createElementNS('http://www.w3.org/2000/svg','line');
      axis.setAttribute('x1','0'); axis.setAttribute('x2', String(W));
      axis.setAttribute('y1', String(mid)); axis.setAttribute('y2', String(mid));
      axis.setAttribute('class','sig-rowline'); svg.appendChild(axis);

      if(have === 0){ return; }

      const take = Math.min(need, have);
      const startIdx = (this._wvf.write - take + ringLen) % ringLen;

      const dataMin = new Array(take);
      const dataMax = new Array(take);
      for(let i=0;i<take;i++){
        const idx = (startIdx + i) % ringLen;
        dataMin[i] = ringMin[idx];
        dataMax[i] = ringMax[idx];
      }

      let lo=Infinity, hi=-Infinity;
      for(let i=0;i<take;i++){ const mn=dataMin[i], mx=dataMax[i]; if(mn<lo) lo=mn; if(mx>hi) hi=mx; }
      const amp = Math.max(1e-6, Math.max(Math.abs(lo), Math.abs(hi)));
      const xScale = (W-2*pad) / Math.max(1, take-1);
      const yScale = (H/2 - 6) / amp;

      let dPos = `M ${pad} ${mid - dataMax[0]*yScale}`;
      let dNeg = `M ${pad} ${mid - dataMin[0]*yScale}`;
      for(let i=1;i<take;i++){
        const x = pad + i*xScale;
        dPos += ` L ${x.toFixed(2)} ${(mid - dataMax[i]*yScale).toFixed(2)}`;
        dNeg += ` L ${x.toFixed(2)} ${(mid - dataMin[i]*yScale).toFixed(2)}`;
      }
      const p1 = document.createElementNS('http://www.w3.org/2000/svg','path'); 
      p1.setAttribute('d', dPos); 
      p1.setAttribute('class', cls ? `sig-path sig-path--${cls}` : 'sig-path'); 
      svg.appendChild(p1);
      const p2 = document.createElementNS('http://www.w3.org/2000/svg','path'); 
      p2.setAttribute('d', dNeg); 
      p2.setAttribute('class', cls ? `sig-path-neg sig-path-neg--${cls}` : 'sig-path-neg'); 
      svg.appendChild(p2);

      const now = document.createElementNS('http://www.w3.org/2000/svg','line');
      now.setAttribute('x1', String(W-1)); now.setAttribute('x2', String(W-1));
      now.setAttribute('y1', String(pad)); now.setAttribute('y2', String(H-pad));
      now.setAttribute('class','now-line'); svg.appendChild(now);
    }

    _drawLiveTrailing(svg, seconds){
      this._drawTrailingFromRing(svg, this._wvf.ringMin, this._wvf.ringMax, seconds, '');
    }

    _drawCenteredFromOverview(svg, halfSec){
      const it = this.state.list[this.state.idx];
      if(!it) return;
      const meta = this.state.meta[it.name] || {};
      const ov = meta.overview;
      const m = this._media();
      const W = Math.max(300, svg.clientWidth || 400);
      const H = parseInt(svg.getAttribute('viewBox')?.split(' ')[3]||'100',10);
      const pad=4, mid = H/2;
      svg.setAttribute('viewBox', `0 0 ${W} ${H}`);
      svg.innerHTML = '';

      const axis = document.createElementNS('http://www.w3.org/2000/svg','line');
      axis.setAttribute('x1','0'); axis.setAttribute('x2', String(W));
      axis.setAttribute('y1', String(mid)); axis.setAttribute('y2', String(mid));
      axis.setAttribute('class','sig-rowline'); svg.appendChild(axis);

      if(!ov || !ov.duration || !isFinite(m.currentTime)){ return; }

      const tNow = clamp(m.currentTime, 0, ov.duration);
      const t0 = clamp(tNow - halfSec, 0, ov.duration);
      const t1 = clamp(tNow + halfSec, 0, ov.duration);

      const N = Math.max(100, Math.floor(W - 2*pad));
      const toIdx = (t)=> clamp(t/ov.duration*(ov.buckets-1), 0, ov.buckets-1);
      const sMin = new Float32Array(N);
      const sMax = new Float32Array(N);
      for(let i=0;i<N;i++){
        const u = i/(N-1);
        const t = t0 + u*(t1 - t0);
        const idx = toIdx(t);
        const i0 = Math.floor(idx), i1 = Math.min(ov.buckets-1, i0+1);
        const w = idx - i0;
        sMin[i] = ov.min[i0]*(1-w) + ov.min[i1]*w;
        sMax[i] = ov.max[i0]*(1-w) + ov.max[i1]*w;
      }

      let lo=Infinity, hi=-Infinity;
      for(let i=0;i<N;i++){ if(sMin[i]<lo) lo=sMin[i]; if(sMax[i]>hi) hi=sMax[i]; }
      const amp = Math.max(1e-6, Math.max(Math.abs(lo), Math.abs(hi)));
      const yScale = (H/2 - 6) / amp;

      let dPos = `M ${pad} ${mid - sMax[0]*yScale}`;
      let dNeg = `M ${pad} ${mid - sMin[0]*yScale}`;
      const xScale2 = (W-2*pad)/Math.max(1, N-1);
      for(let i=1;i<N;i++){
        const x = pad + i*xScale2;
        dPos += ` L ${x.toFixed(2)} ${(mid - sMax[i]*yScale).toFixed(2)}`;
        dNeg += ` L ${x.toFixed(2)} ${(mid - sMin[i]*yScale).toFixed(2)}`;
      }
      const p1 = document.createElementNS('http://www.w3.org/2000/svg','path'); p1.setAttribute('d', dPos); p1.setAttribute('class','sig-path'); svg.appendChild(p1);
      const p2 = document.createElementNS('http://www.w3.org/2000/svg','path'); p2.setAttribute('d', dNeg); p2.setAttribute('class','sig-path-neg'); svg.appendChild(p2);

      const xNow = pad + (W-2*pad)/2;
      const now = document.createElementNS('http://www.w3.org/2000/svg','line');
      now.setAttribute('x1', String(xNow)); now.setAttribute('x2', String(xNow));
      now.setAttribute('y1', String(pad)); now.setAttribute('y2', String(H-pad));
      now.setAttribute('class','now-line'); svg.appendChild(now);
    }

    _redrawSignal(force){
      this._drawLiveTrailing(this.$.waveMidSVG, this.state.sig.winMid);

      const it = this.state.list[this.state.idx];
      const meta = it ? (this.state.meta[it.name] || {}) : {};
      if(meta.overview && meta.overview.duration){
        this._drawCenteredFromOverview(this.$.waveMicroSVG, this.state.sig.winMicro);
      }else{
        this._drawLiveTrailing(this.$.waveMicroSVG, this.state.sig.winMicro*2);
      }

      const s = this.state.sig.winMid;
      this._drawTrailingFromRing(this.$.waveLowSVG,  this._wvf.ringMinBand[0], this._wvf.ringMaxBand[0], s, 'low');
      this._drawTrailingFromRing(this.$.waveMidBandSVG, this._wvf.ringMinBand[1], this._wvf.ringMaxBand[1], s, 'mid');
      this._drawTrailingFromRing(this.$.waveHighSVG, this._wvf.ringMinBand[2], this._wvf.ringMaxBand[2], s, 'high');
    }

    /* =========================================================
       Overview ⇄ Seek/Loop synchronization (event handlers)
       ========================================================= */
    _installOverviewHandlers(){
      if(this._ovHandlersInstalled || !this.$.ovSVG) { this._ovHandlersInstalled = true; return; }
      const svg = this.$.ovSVG;
      const getPct = (clientX)=>{
        const r = svg.getBoundingClientRect();
        const pad = 4;
        let x = clientX - r.left;
        let pct = (x - pad)/Math.max(1, r.width - 2*pad);
        return clamp(pct, 0, 1);
      };

      const onPointerDown = (e)=>{
        const t = e.target;
        if(t && t.classList && t.classList.contains('ov-hA')) this._ovDragMode = 'A';
        else if(t && t.classList && t.classList.contains('ov-hB')) this._ovDragMode = 'B';
        else this._ovDragMode = 'cursor';

        const doMove = (ev)=>{
          const pct = getPct(ev.clientX);
          if(this._ovDragMode === 'cursor'){
            this._seekToPct(pct);
          }else if(this._ovDragMode === 'A'){
            this.state.loopStart = Math.min(pct, this.state.loopEnd);
            this._updateLoopGraphics();
            const m = this._media();
            if(m && m.duration){
              const curPct = clamp(timeToPct(m.currentTime, m.duration), this.state.loopStart, this.state.loopEnd);
              m.currentTime = pctToTime(curPct, m.duration);
            }
            this._drawOverview();
          }else if(this._ovDragMode === 'B'){
            this.state.loopEnd = Math.max(pct, this.state.loopStart);
            this._updateLoopGraphics();
            const m = this._media();
            if(m && m.duration){
              const curPct = clamp(timeToPct(m.currentTime, m.duration), this.state.loopStart, this.state.loopEnd);
              m.currentTime = pctToTime(curPct, m.duration);
            }
            this._drawOverview();
          }
        };

        const onMove = (ev)=>doMove(ev);
        const onUp = ()=>{
          document.removeEventListener('pointermove', onMove);
          document.removeEventListener('pointerup', onUp);
          this._ovDragMode = null;
        };

        doMove(e);
        document.addEventListener('pointermove', onMove);
        document.addEventListener('pointerup', onUp);
      };

      svg.addEventListener('pointerdown', onPointerDown);
      this._ovHandlersInstalled = true;
    }

    /* =========================================================
       TRIM: create a new item from the current loop range
       (3.3.4: also auto‑download the new file)
       ========================================================= */
    async _trimLoopToNewFile(){
      if(!this.$.trimBtn) return;

      const prevTxt = this.$.trimBtn.textContent;
      this.$.trimBtn.textContent = 'Trimming…';
      this.$.trimBtn.disabled = true;

      try{
        this._ensureCtx(); await this.ctx?.resume?.();

        const it = this.state.list[this.state.idx];
        if(!it) throw new Error('no-item');

        const m = this._media();
        const dur = (m && isFinite(m.duration)) ? m.duration : 0;
        const span = (this.state.loopEnd - this.state.loopStart) * dur;
        if(!(dur>0) || !(span>=0.05)) throw new Error('bad-span');

        const s = clamp(this.state.loopStart, 0, 1) * dur;
        const e = clamp(this.state.loopEnd,   0, 1) * dur;

        const stamp = new Date().toISOString().replace(/[-:TZ.]/g,'').slice(0,14);
        const tag = `${hhmmss(Math.floor(s))}-${hhmmss(Math.floor(e))}`;

        if(this._isVideo(it)){
          // Prefer true A/V range recording (MP4/WebM); fallback to audio‑only WAV
          const rec = await this._recordElementRangeToMedia(it.src, s, e, 'video');
          if(rec && rec.blob){
            const url = URL.createObjectURL(rec.blob);
            const name = `Trim_${basename(it.name)}_${tag}_${stamp}.${rec.ext}`;
            const entry = { src:url, name, type: rec.mime || `video/${rec.ext}` };

            // Try to analyze audio from the trimmed A/V for BPM/overview/summary
            let meta = {};
            try{
              const buf = await this._captureSrcToBuffer(url, 'video');
              meta = Object.assign({}, this._analyzeTempo(buf)||{}, this._analyzeAudioSummary(buf)||{});
              meta.overview = this._buildOverview(buf);
              meta.pending = false;
            }catch{ meta = {}; }

            this.state.list.push(entry);
            this.state.meta[name] = meta;
            this._refreshList();
            this._set(this.state.list.length-1, true);

            /* 3.3.4: auto‑download */
            this._downloadBlob(url, name);
          }else{
            // Fallback: capture audio range → WAV
            const buf = await this._captureSrcRangeToBuffer(it.src, s, e, 'video');
            this._applyShortFades(buf, 0.005);
            const wav = this._bufferToWavBlob(buf);
            const url = URL.createObjectURL(wav);
            const name = `Trim_${basename(it.name)}_${tag}_${stamp}.wav`;
            const entry = { src:url, name, type:'audio/wav' };
            const meta = Object.assign({}, this._analyzeTempo(buf)||{}, this._analyzeAudioSummary(buf)||{});
            meta.overview = this._buildOverview(buf); meta.pending = false;

            this.state.list.push(entry);
            this.state.meta[name] = meta;
            this._refreshList();
            this._set(this.state.list.length-1, true);

            /* 3.3.4: auto‑download */
            this._downloadBlob(url, name);
          }
        }else{
          // Audio item
          let buf = await this._decodeEntryToBuffer(it);
          if(buf){
            const clip = this._sliceAudioBuffer(buf, s, e);
            this._applyShortFades(clip, 0.005);
            const wav = this._bufferToWavBlob(clip);
            const url = URL.createObjectURL(wav);
            const name = `Trim_${basename(it.name)}_${tag}_${stamp}.wav`;
            const entry = { src:url, name, type:'audio/wav' };
            const meta = Object.assign({}, this._analyzeTempo(clip)||{}, this._analyzeAudioSummary(clip)||{});
            meta.overview = this._buildOverview(clip); meta.pending = false;

            this.state.list.push(entry);
            this.state.meta[name] = meta;
            this._refreshList();
            this._set(this.state.list.length-1, true);

            /* 3.3.4: auto‑download */
            this._downloadBlob(url, name);
          }else{
            // Fallback capture for tricky codecs/streams
            const clip = await this._captureSrcRangeToBuffer(it.src, s, e, 'audio');
            this._applyShortFades(clip, 0.005);
            const wav = this._bufferToWavBlob(clip);
            const url = URL.createObjectURL(wav);
            const name = `Trim_${basename(it.name)}_${tag}_${stamp}.wav`;
            const entry = { src:url, name, type:'audio/wav' };
            const meta = Object.assign({}, this._analyzeTempo(clip)||{}, this._analyzeAudioSummary(clip)||{});
            meta.overview = this._buildOverview(clip); meta.pending = false;

            this.state.list.push(entry);
            this.state.meta[name] = meta;
            this._refreshList();
            this._set(this.state.list.length-1, true);

            /* 3.3.4: auto‑download */
            this._downloadBlob(url, name);
          }
        }
      }catch(e){
        console.warn('Trim failed:', e);
        alert('Trim could not be completed.');
      }finally{
        this.$.trimBtn.textContent = prevTxt || 'Trim';
        this._updateTrimButton();
      }
    }

    /* =========================================================
       MIX: matrix‑based combine of last two items → stereo mixtures
       ========================================================= */
    async _mixLastTwo(){
      if(this.state.list.length < 2 || !this.$.mixBtn) return;

      const prevTxt = this.$.mixBtn.textContent;
      this.$.mixBtn.textContent = 'Mixing…';
      this.$.mixBtn.disabled = true;

      try{
        this._ensureCtx(); await this.ctx.resume?.();

        const n = this.state.list.length;
        const it1 = this.state.list[n-2];
        const it2 = this.state.list[n-1];

        const [buf1, buf2] = await Promise.all([
          this._decodeEntryToBuffer(it1),
          this._decodeEntryToBuffer(it2)
        ]);
        if(!buf1 || !buf2) throw new Error('decode-failed');

        const mixBuf = this._mixMatrixToStereoBuffer(buf1, buf2, APP.MIX_A);

        const meta = Object.assign({}, this._analyzeTempo(mixBuf)||{}, this._analyzeAudioSummary(mixBuf)||{});
        meta.overview = this._buildOverview(mixBuf);
        meta.pending = false;
        meta.mixed = true;
        meta.sources = [it1.name, it2.name];
        meta.matrixA = APP.MIX_A;

        const wavBlob = this._bufferToWavBlob(mixBuf);
        const url = URL.createObjectURL(wavBlob);

        const ttag = new Date().toISOString().replace(/[-:TZ.]/g,'').slice(0,14);
        const name = `MixA_${basename(it1.name)}+${basename(it2.name)}_${ttag}.wav`;
        const entry = { src:url, name, type:'audio/wav' };

        this.state.list.push(entry);
        this.state.meta[name] = meta;
        this._refreshList();
        this._set(this.state.list.length-1, true);
      }catch(e){
        console.warn('Mix(A) failed:', e);
        alert('Mix could not be completed.');
      }finally{
        this.$.mixBtn.textContent = prevTxt || 'Mix';
        this._updateMixButton();
      }
    }

    /* === helpers: mono downmix, linear resample, A‑mix to stereo === */
    _toMonoF32(buffer){
      const ch = Math.max(1, buffer.numberOfChannels);
      const len = buffer.length;
      if(ch === 1) return buffer.getChannelData(0).slice(0);
      const acc = new Float32Array(len);
      const tmp = new Float32Array(len);
      for(let c=0;c<ch;c++){
        buffer.copyFromChannel(tmp, c, 0);
        for(let i=0;i<len;i++) acc[i] += tmp[i];
      }
      const inv = 1/ch;
      for(let i=0;i<len;i++) acc[i] *= inv;
      return acc;
    }

    _mixMatrixToStereoBuffer(buf1, buf2, A){
      const s1 = this._toMonoF32(buf1);
      const s2 = this._toMonoF32(buf2);
      const sr1 = buf1.sampleRate, sr2 = buf2.sampleRate;
      const dstSR = Math.max(44100, sr1, sr2);
      const dur = Math.max(s1.length/sr1, s2.length/sr2);
      const N = Math.max(1, Math.ceil(dur * dstSR));
      const left = new Float32Array(N);
      const right = new Float32Array(N);

      const vAt = (arr, sr, t)=>{
        const x = t*sr;
        const i0 = x|0;
        const w = x - i0;
        if(i0 < 0) return 0;
        if(i0 >= arr.length-1) return arr.length? arr[arr.length-1] : 0;
        const a = arr[i0], b = arr[i0+1];
        return a*(1-w) + b*w;
      };
      let peak = 0;
      for(let i=0;i<N;i++){
        const t = i/dstSR;
        const v1 = vAt(s1, sr1, t);
        const v2 = vAt(s2, sr2, t);
        const L = A[0][0]*v1 + A[0][1]*v2;
        const R = A[1][0]*v1 + A[1][1]*v2;
        left[i]  = L;
        right[i] = R;
        const aL = Math.abs(L), aR = Math.abs(R);
        if(aL>peak) peak=aL;
        if(aR>peak) peak=aR;
      }
      const sc = peak>1 ? 0.98/peak : 1;
      if(sc !== 1){ for(let i=0;i<N;i++){ left[i]*=sc; right[i]*=sc; } }

      const out = this.ctx.createBuffer(2, N, dstSR);
      out.copyToChannel(left, 0, 0);
      out.copyToChannel(right, 1, 0);
      this._applyShortFades(out, 0.005);
      return out;
    }

    /* =========================================================
       ICA: separate a mixed stereo track into two sources (2×2)
       ========================================================= */
    async _icaSeparateCurrent(){
      if(!this.$.icaBtn) return;

      const prevTxt = this.$.icaBtn.textContent;
      this.$.icaBtn.textContent = 'ICA…';
      this.$.icaBtn.disabled = true;

      try{
        this._ensureCtx(); await this.ctx?.resume?.();

        const it = this.state.list[this.state.idx];
        if(!it) return;

        const buf = await this._decodeEntryToBuffer(it);
        if(!buf || !isFinite(buf.duration) || buf.duration<=0){
          alert('A playable item is required.');
          return;
        }
        if(buf.numberOfChannels < 2){
          alert('ICA requires at least two channels (stereo). Please select a stereo item (e.g., a Mix result).');
          return;
        }

        const sr = buf.sampleRate;
        const N  = buf.length;
        const ch0 = buf.getChannelData(0);
        const ch1 = buf.getChannelData(1);

        const x0 = new Float64Array(N), x1 = new Float64Array(N);
        for(let i=0;i<N;i++){ x0[i] = ch0[i]; x1[i] = ch1[i]; }

        const out = this._fastICA2(x0, x1, { maxIter: 64, tol: 1e-4 });
        if(!out){ alert('ICA failed to produce valid sources.'); return; }
        const S0 = out.S0, S1 = out.S1;

        const toFloat32Unit = (arr64)=>{
          let m=0; for(let i=0;i<arr64.length;i++){ const a=Math.abs(arr64[i]); if(a>m) m=a; }
          const sc = m>1e-12 ? 0.98/m : 1.0;
          const f32 = new Float32Array(arr64.length);
          for(let i=0;i<arr64.length;i++) f32[i] = arr64[i]*sc;
          return f32;
        };
        const s0f = toFloat32Unit(S0);
        const s1f = toFloat32Unit(S1);

        const b0 = this.ctx.createBuffer(1, N, sr); b0.copyToChannel(s0f, 0, 0); this._applyShortFades(b0, 0.005);
        const b1 = this.ctx.createBuffer(1, N, sr); b1.copyToChannel(s1f, 0, 0); this._applyShortFades(b1, 0.005);

        const m0 = Object.assign({}, this._analyzeTempo(b0)||{}, this._analyzeAudioSummary(b0)||{}); m0.overview = this._buildOverview(b0); m0.pending = false; m0.icaFrom = it.name;
        const m1 = Object.assign({}, this._analyzeTempo(b1)||{}, this._analyzeAudioSummary(b1)||{}); m1.overview = this._buildOverview(b1); m1.pending = false; m1.icaFrom = it.name;

        const tag = new Date().toISOString().replace(/[-:TZ.]/g,'').slice(0,14);
        const base = basename(it.name);
        const nameA = `ICA_A_of_${base}_${tag}.wav`;
        const nameB = `ICA_B_of_${base}_${tag}.wav`;
        const urlA  = URL.createObjectURL(this._bufferToWavBlob(b0));
        const urlB  = URL.createObjectURL(this._bufferToWavBlob(b1));

        const eA = { src:urlA, name:nameA, type:'audio/wav' };
        const eB = { src:urlB, name:nameB, type:'audio/wav' };

        this.state.list.push(eA, eB);
        this.state.meta[nameA] = m0;
        this.state.meta[nameB] = m1;

        this._refreshList();
        this._set(this.state.list.length - 2, true);
      }catch(e){
        console.warn('ICA failed:', e);
        alert('ICA could not be completed.');
      }finally{
        this.$.icaBtn.textContent = prevTxt || 'ICA';
        this._updateICABtn();
      }
    }

    /* ---------- FastICA for 2×N mixtures (tanh; symmetric decorrelation) ---------- */
    _fastICA2(x0, x1, { maxIter=64, tol=1e-4 } = {}){
      const N = x0?.length|0; if(!N || N!==x1.length) return null;
      const EPS = 1e-12;

      // Center
      let m0=0, m1=0;
      for(let i=0;i<N;i++){ m0+=x0[i]; m1+=x1[i]; }
      m0/=N; m1/=N;
      const c0 = new Float64Array(N), c1 = new Float64Array(N);
      for(let i=0;i<N;i++){ c0[i]=x0[i]-m0; c1[i]=x1[i]-m1; }

      // Covariance (population)
      let c00=0, c11=0, c01=0;
      for(let i=0;i<N;i++){ const a=c0[i], b=c1[i]; c00+=a*a; c11+=b*b; c01+=a*b; }
      c00/=N; c11/=N; c01/=N;

      // Whitening matrix Ww = E * diag(1/sqrt(λ)) * E^T
      const ev = this._eig2x2Sym(c00, c01, c11);
      const l1 = Math.max(ev.vals[0], EPS), l2 = Math.max(ev.vals[1], EPS);
      const e11 = ev.vecs[0][0], e21 = ev.vecs[1][0];
      const e12 = ev.vecs[0][1], e22 = ev.vecs[1][1];
      const d1 = 1/Math.sqrt(l1), d2 = 1/Math.sqrt(l2);
      const ww00 = e11*e11*d1 + e12*e12*d2;
      const ww01 = e11*e21*d1 + e12*e22*d2;
      const ww10 = e21*e11*d1 + e22*e12*d2;
      const ww11 = e21*e21*d1 + e22*e22*d2;

      // Whitened mixtures Z = Ww * C
      const z0 = new Float64Array(N), z1 = new Float64Array(N);
      for(let i=0;i<N;i++){
        const a=c0[i], b=c1[i];
        z0[i] = ww00*a + ww01*b;
        z1[i] = ww10*a + ww11*b;
      }

      // Initialize W (2×2), row‑normalized, then symmetric decorrelation
      let w00 = Math.random()-0.5, w01 = Math.random()-0.5;
      let w10 = Math.random()-0.5, w11 = Math.random()-0.5;
      let n0 = Math.hypot(w00, w01)||1, n1 = Math.hypot(w10, w11)||1;
      w00/=n0; w01/=n0; w10/=n1; w11/=n1;
      ({w00,w01,w10,w11} = this._symDecorrelate2(w00,w01,w10,w11));

      // Fixed‑point iterations
      for(let it=0; it<maxIter; it++){
        // y = W * z
        const y0 = new Float64Array(N), y1 = new Float64Array(N);
        for(let i=0;i<N;i++){
          const a=z0[i], b=z1[i];
          y0[i] = w00*a + w01*b;
          y1[i] = w10*a + w11*b;
        }

        // g= tanh(y), g' = 1 - tanh^2(y)
        let s00=0,s01=0,s10=0,s11=0, gp0=0, gp1=0;
        for(let i=0;i<N;i++){
          const t0 = Math.tanh(y0[i]); const t1 = Math.tanh(y1[i]);
          const d0 = 1 - t0*t0;        const d1 = 1 - t1*t1;
          s00 += t0 * z0[i]; s01 += t0 * z1[i];
          s10 += t1 * z0[i]; s11 += t1 * z1[i];
          gp0 += d0; gp1 += d1;
        }
        const invN = 1/N;
        s00*=invN; s01*=invN; s10*=invN; s11*=invN;
        gp0 = (gp0*invN); gp1 = (gp1*invN);

        // W_new = E[g(z) z^T] - diag(E[g’]) * W
        let nw00 = s00 - gp0*w00, nw01 = s01 - gp0*w01;
        let nw10 = s10 - gp1*w10, nw11 = s11 - gp1*w11;

        // Symmetric decorrelation
        ({w00:nw00, w01:nw01, w10:nw10, w11:nw11} = this._symDecorrelate2(nw00,nw01,nw10,nw11));

        // Convergence: Frobenius norm
        const d = Math.hypot(nw00-w00, nw01-w01, nw10-w10, nw11-w11);
        w00=nw00; w01=nw01; w10=nw10; w11=nw11;
        if(d < tol) break;
      }

      // Final sources S = W * z
      const S0 = new Float64Array(N), S1 = new Float64Array(N);
      for(let i=0;i<N;i++){
        const a=z0[i], b=z1[i];
        S0[i] = w00*a + w01*b;
        S1[i] = w10*a + w11*b;
      }
      return { S0, S1 };
    }

    /* Analytic eigen‑decomposition of 2×2 symmetric matrix [[a,b],[b,d]].
       Returns eigenvalues (desc) and normalized eigenvectors as columns. */
    _eig2x2Sym(a,b,d){
      const tr = (a+d)/2;
      const disc = Math.max(((a-d)*(a-d))/4 + b*b, 0);
      let l1 = tr + Math.sqrt(disc);
      let l2 = tr - Math.sqrt(disc);

      // eigenvectors
      let v1x, v1y, v2x, v2y;
      if(Math.abs(b) > 1e-18){
        v1x = b;        v1y = l1 - a;
        v2x = b;        v2y = l2 - a;
      }else{
        if(a >= d){ v1x=1; v1y=0; v2x=0; v2y=1; }
        else       { v1x=0; v1y=1; v2x=1; v2y=0; }
      }
      let n1 = Math.hypot(v1x,v1y)||1; v1x/=n1; v1y/=n1;
      let n2 = Math.hypot(v2x,v2y)||1; v2x/=n2; v2y/=n2;

      if(l2 > l1){
        [l1,l2] = [l2,l1];
        [v1x,v2x] = [v2x,v1x];
        [v1y,v2y] = [v2y,v1y];
      }
      return { vals:[l1,l2], vecs:[[v1x,v2x],[v1y,v2y]] };
    }

    /* Symmetric decorrelation: W ← (W Wᵀ)^{-1/2} W  (2×2) */
    _symDecorrelate2(w00,w01,w10,w11){
      const m00 = w00*w00 + w01*w01;
      const m01 = w00*w10 + w01*w11;
      const m11 = w10*w10 + w11*w11;

      const ev = this._eig2x2Sym(m00, m01, m11);
      const l1 = Math.max(ev.vals[0], 1e-18);
      const l2 = Math.max(ev.vals[1], 1e-18);
      const e11 = ev.vecs[0][0], e21 = ev.vecs[1][0];
      const e12 = ev.vecs[0][1], e22 = ev.vecs[1][1];

      const d1 = 1/Math.sqrt(l1), d2 = 1/Math.sqrt(l2);
      const is00 = e11*e11*d1 + e12*e12*d2;
      const is01 = e11*e21*d1 + e12*e22*d2;
      const is10 = e21*e11*d1 + e22*e12*d2;
      const is11 = e21*e21*d1 + e22*e22*d2;

      const nw00 = is00*w00 + is01*w10;
      const nw01 = is00*w01 + is01*w11;
      const nw10 = is10*w00 + is11*w10;
      const nw11 = is10*w01 + is11*w11;

      return { w00:nw00, w01:nw01, w10:nw10, w11:nw11 };
    }

    /* ---------- Audio decoding / slicing / WAV export ---------- */
    _sliceAudioBuffer(buffer, startSec, endSec){
      const sr = buffer.sampleRate;
      const ch = Math.max(1, buffer.numberOfChannels);
      const s0 = clamp(Math.floor(startSec * sr), 0, buffer.length);
      const s1 = clamp(Math.floor(endSec   * sr), s0, buffer.length);
      const len = s1 - s0;
      const out = this.ctx.createBuffer(ch, len, sr);
      for(let c=0;c<ch;c++){
        const src = buffer.getChannelData(c).subarray(s0, s1);
        out.copyToChannel(src, c, 0);
      }
      return out;
    }

    _applyShortFades(buffer, seconds){
      const sr = buffer.sampleRate;
      const n = Math.min(buffer.length, Math.floor(seconds * sr));
      if(n<=1) return;
      const ch = buffer.numberOfChannels;
      for(let c=0;c<ch;c++){
        const data = buffer.getChannelData(c);
        for(let i=0;i<n;i++){ data[i] *= i/n; }
        for(let i=0;i<n;i++){ const k = buffer.length-1-i; data[k] *= i/n; }
      }
    }

    async _decodeEntryToBuffer(entry){
      try{
        const ab = await this._fetchArrayBuffer(entry.src);
        if(ab && ab.byteLength) {
          const buf = await this._decodeWithSafeCtx(ab);
          if(buf && isFinite(buf.duration) && buf.duration>0) return buf;
        }
      }catch{}
      try{
        return await this._captureSrcToBuffer(entry.src, this._isVideo(entry)?'video':'audio');
      }catch{}
      return null;
    }

    async _fetchArrayBuffer(url){
      const r = await fetch(url);
      if(!r.ok) throw new Error('fetch failed');
      return await r.arrayBuffer();
    }

    async _captureSrcToBuffer(src, kind='audio'){
      this._ensureCtx(); await this.ctx.resume?.();

      const el = document.createElement(kind==='video'?'video':'audio');
      el.src = src; el.playsInline = true;
      el.style.position = 'fixed'; el.style.left = '-9999px'; el.style.top  = '-9999px';
      document.body.appendChild(el);

      const prevVol = el.volume; el.volume = 0.0;

      const srcNode = this.ctx.createMediaElementSource(el);

      const data = [];
      const sr = this.ctx.sampleRate;
      let resolveFn, rejectFn, done = false;

      const finish = ()=>{
        if(done) return; done = true;
        try{
          const N = data.length;
          const buf = this.ctx.createBuffer(1, N, sr);
          buf.copyToChannel(new Float32Array(data), 0);
          cleanup();
          resolveFn(buf);
        }catch(e){ cleanup(); rejectFn(e); }
      };
      const cleanup = ()=>{
        try{ srcNode.disconnect(); }catch(_){}
        try{ node && node.disconnect && node.disconnect(); }catch(_){}
        try{ zero && zero.disconnect && zero.disconnect(); }catch(_){}
        try{ proc && proc.disconnect && proc.disconnect(); }catch(_){}
        el.onloadedmetadata = el.onended = el.onerror = null;
        try{ el.pause(); }catch(_){}
        try{ document.body.removeChild(el); }catch(_){}
        el.volume = prevVol;
      };

      const p = new Promise((res, rej)=>{ resolveFn = res; rejectFn = rej; });

      let node=null, proc=null, zero=null;

      if(this.ctx.audioWorklet){
        await this._ensureCollectorModule();
        node = new AudioWorkletNode(this.ctx, 'collector');
        node.port.onmessage = e=>{
          const ch = e.data;
          for(let i=0;i<ch.length;i++) data.push(ch[i]);
        };
        zero = this.ctx.createGain(); zero.gain.value = 0;
        srcNode.connect(node).connect(zero).connect(this.ctx.destination);
      }else{
        proc = this.ctx.createScriptProcessor ? this.ctx.createScriptProcessor(4096, 2, 2) : null;
        if(!proc) throw new Error('No capture path');
        proc.onaudioprocess = (e)=>{
          const ch0 = e.inputBuffer.getChannelData(0);
          const ch1 = e.inputBuffer.numberOfChannels>1 ? e.inputBuffer.getChannelData(1) : null;
          for(let i=0;i<ch0.length;i++){
            data.push(ch1 ? 0.5*(ch0[i]+ch1[i]) : ch0[i]);
          }
        };
        srcNode.connect(proc);
        zero = this.ctx.createGain(); zero.gain.value = 0;
        proc.connect(zero).connect(this.ctx.destination);
      }

      el.onloadedmetadata = ()=>{ el.play().catch(()=>rejectFn(new Error('playback failed'))); };
      el.onended = finish;
      el.onerror = ()=>{ cleanup(); rejectFn(new Error('media error')); };

      return p;
    }

    async _captureSrcRangeToBuffer(src, startSec, endSec, kind='audio'){
      this._ensureCtx(); await this.ctx.resume?.();

      const el = document.createElement(kind==='video'?'video':'audio');
      el.src = src; el.playsInline = true;
      el.style.position = 'fixed'; el.style.left = '-9999px'; el.style.top  = '-9999px';
      document.body.appendChild(el);

      const prevVol = el.volume; el.volume = 0.0;

      const srcNode = this.ctx.createMediaElementSource(el);

      const data = [];
      const sr = this.ctx.sampleRate;
      let resolveFn, rejectFn, done = false;

      const finish = ()=>{
        if(done) return; done = true;
        try{
          const N = data.length;
          const buf = this.ctx.createBuffer(1, N, sr);
          buf.copyToChannel(new Float32Array(data), 0);
          cleanup();
          resolveFn(buf);
        }catch(e){ cleanup(); rejectFn(e); }
      };
      const stopNow = ()=>{
        try{ el.pause(); }catch(_){}
        try{ srcNode.disconnect(); }catch(_){}
        try{ node && node.disconnect && node.disconnect(); }catch(_){}
        try{ zero && zero.disconnect && zero.disconnect(); }catch(_){}
        try{ proc && proc.disconnect && proc.disconnect(); }catch(_){}
        finish();
      };
      const cleanup = ()=>{
        el.onloadedmetadata = el.onseeked = el.onerror = el.ended = el.ontimeupdate = null;
        try{ document.body.removeChild(el); }catch(_){}
        el.volume = prevVol;
      };

      const p = new Promise((res, rej)=>{ resolveFn = res; rejectFn = rej; });

      let node=null, proc=null, zero=null;

      if(this.ctx.audioWorklet){
        await this._ensureCollectorModule();
        node = new AudioWorkletNode(this.ctx, 'collector');
        node.port.onmessage = e=>{
          if(done) return;
          const ch = e.data;
          for(let i=0;i<ch.length;i++) data.push(ch[i]);
        };
        zero = this.ctx.createGain(); zero.gain.value = 0;
        srcNode.connect(node).connect(zero).connect(this.ctx.destination);
      }else{
        proc = this.ctx.createScriptProcessor ? this.ctx.createScriptProcessor(4096, 2, 2) : null;
        if(!proc) throw new Error('No capture path');
        proc.onaudioprocess = (e)=>{
          if(done) return;
          const ch0 = e.inputBuffer.getChannelData(0);
          const ch1 = e.inputBuffer.numberOfChannels>1 ? e.inputBuffer.getChannelData(1) : null;
          for(let i=0;i<ch0.length;i++){
            data.push(ch1 ? 0.5*(ch0[i]+ch1[i]) : ch0[i]);
          }
        };
        srcNode.connect(proc);
        zero = this.ctx.createGain(); zero.gain.value = 0;
        proc.connect(zero).connect(this.ctx.destination);
      }

      el.onloadedmetadata = ()=>{ el.currentTime = Math.max(0, startSec); };
      el.onseeked = ()=>{ el.play().catch(()=>rejectFn(new Error('playback failed'))); };
      el.ontimeupdate = ()=>{ if(!done && el.currentTime >= endSec){ stopNow(); } };
      el.onerror = ()=>{ rejectFn(new Error('media error')); stopNow(); };
      el.onended = ()=>{ stopNow(); };

      return p;
    }

    /* ---------- WAV export ---------- */
    _bufferToWavBlob(buffer){
      const numCh = Math.max(1, buffer.numberOfChannels);
      const sr = buffer.sampleRate;
      const len = buffer.length;
      const bytesPerSample = 2; // 16-bit PCM
      const blockAlign = numCh * bytesPerSample;
      const dataSize = len * blockAlign;
      const headerSize = 44;
      const totalSize = headerSize + dataSize;

      const out = new ArrayBuffer(totalSize);
      const view = new DataView(out);

      this._writeStr(view, 0, 'RIFF');
      view.setUint32(4, totalSize - 8, true);
      this._writeStr(view, 8, 'WAVE');

      this._writeStr(view, 12, 'fmt ');
      view.setUint32(16, 16, true);
      view.setUint16(20, 1, true);
      view.setUint16(22, numCh, true);
      view.setUint32(24, sr, true);
      view.setUint32(28, sr * blockAlign, true);
      view.setUint16(32, blockAlign, true);
      view.setUint16(34, 16, true);

      this._writeStr(view, 36, 'data');
      view.setUint32(40, dataSize, true);

      const chans = [];
      for(let c=0;c<numCh;c++) chans[c] = buffer.getChannelData(c);
      let offset = 44;
      for(let i=0;i<len;i++){
        for(let c=0;c<numCh;c++){
          const x = Math.max(-1, Math.min(1, chans[c][i] || 0));
          const s = (x<0 ? x*0x8000 : x*0x7FFF)|0;
          view.setInt16(offset, s, true);
          offset += 2;
        }
      }
      return new Blob([view], { type:'audio/wav' });
    }
    _writeStr(view, offset, str){ for(let i=0;i<str.length;i++) view.setUint8(offset+i, str.charCodeAt(i)); }
    _downloadBlob(url, filename){
      const a = document.createElement('a'); a.href = url; a.download = filename;
      document.body.appendChild(a); a.click(); document.body.removeChild(a);
    }

    /* ---------- MediaRecorder helpers (MP4/WebM) ---------- */
    _pickSupportedMime(candidates){
      if(typeof MediaRecorder === 'undefined') return null;
      for(const m of candidates){
        try{ if(MediaRecorder.isTypeSupported(m)) return m; }catch(_){}
      }
      return null;
    }

    async _recordAudioBufferToMedia(buffer){
      if(!this.ctx || typeof MediaRecorder === 'undefined') return null;
      const mime = this._pickSupportedMime([
        'audio/mp4',
        'audio/webm;codecs=opus',
        'audio/webm'
      ]);
      if(!mime) return null;

      const dest = this.ctx.createMediaStreamDestination();
      const src  = this.ctx.createBufferSource();
      src.buffer = buffer;
      src.connect(dest);

      const rec = new MediaRecorder(dest.stream, { mimeType:mime });
      const chunks = [];
      rec.ondataavailable = e=>{ if(e.data && e.data.size) chunks.push(e.data); };

      const p = new Promise(res=>{
        rec.onstop = ()=>{ res({ blob:new Blob(chunks, { type:mime }), mime, ext: mime.includes('mp4')?'mp4':'webm' }); };
      });

      rec.start();
      src.start();

      src.onended = ()=>{ try{ rec.stop(); }catch(_){ } };
      return await p;
    }

    async _recordElementRangeToMedia(srcUrl, startSec, endSec, kind='video'){
      if(typeof MediaRecorder === 'undefined') return null;

      const mime = this._pickSupportedMime(
        kind === 'video'
          ? [
              'video/mp4;codecs="avc1.42E01E,mp4a.40.2"',
              'video/mp4',
              'video/webm;codecs=vp9,opus',
              'video/webm;codecs=vp8,opus',
              'video/webm'
            ]
          : ['audio/mp4','audio/webm;codecs=opus','audio/webm']
      );
      if(!mime) return null;

      const el = document.createElement(kind==='video'?'video':'audio');
      el.src = srcUrl; el.playsInline = true;
      el.style.position = 'fixed'; el.style.left = '-9999px'; el.style.top  = '-9999px';
      document.body.appendChild(el);

      const prevVol = el.volume; el.volume = 0.0;

      const waitEvent = (target, ev)=>new Promise(r=>{ const h=()=>{ target.removeEventListener(ev,h); r(); }; target.addEventListener(ev,h); });

      try{
        await waitEvent(el,'loadedmetadata');
        el.currentTime = Math.max(0, startSec);
        await waitEvent(el,'seeked');

        const stream = el.captureStream ? el.captureStream() : (el.mozCaptureStream ? el.mozCaptureStream() : null);
        if(!stream){ try{ document.body.removeChild(el); }catch(_){}
          return null;
        }

        const rec = new MediaRecorder(stream, { mimeType:mime });
        const chunks = [];
        rec.ondataavailable = e=>{ if(e.data && e.data.size) chunks.push(e.data); };

        const p = new Promise(res=>{
          rec.onstop = ()=>{ res({ blob:new Blob(chunks, { type:mime }), mime, ext: mime.includes('mp4')?'mp4':'webm' }); };
        });

        rec.start();
        el.play().catch(()=>{});

        const stop = ()=>{ try{ rec.stop(); }catch(_){ } try{ el.pause(); }catch(_){ } };
        const onTU = ()=>{ if(el.currentTime >= endSec){ el.removeEventListener('timeupdate', onTU); stop(); } };
        el.addEventListener('timeupdate', onTU);
        el.addEventListener('ended', stop);
        el.addEventListener('error', stop);

        const out = await p;
        try{ el.removeEventListener('timeupdate', onTU); }catch(_){}
        return out;
      }finally{
        try{ el.pause(); }catch(_){}
        el.volume = prevVol;
        try{ document.body.removeChild(el); }catch(_){}
      }
    }

    /* =========================================================
       3.3.8 — Audio Summary (levels, loudness, centroid, pitch, stereo corr)
       ========================================================= */
    _analyzeAudioSummary(buffer){
      try{
        const sr = buffer.sampleRate|0 || 48000;
        const mono = this._toMonoF32(buffer);
        const N = mono.length;

        // --- Level stats (decimated pass for speed) ---
        const stride = Math.max(1, Math.floor(sr/8000)); // ~8 kHz samples
        let maxAbs = 0, sumSq = 0, count = 0;
        for(let i=0;i<N;i+=stride){
          const x = mono[i];
          const ax = Math.abs(x); if(ax>maxAbs) maxAbs=ax;
          sumSq += x*x; count++;
        }
        const rms = Math.sqrt(sumSq / Math.max(1,count));
        const peakDb = toDb(maxAbs);
        const rmsDb  = toDb(rms);
        const crestDb = (maxAbs>0 && rms>0) ? toDb(maxAbs/rms) : 0;

        // --- Approximate integrated loudness (~K-weighted RMS, no gating) ---
        const kw = this._approxKWeightedRMS(mono, sr); // returns RMS (linear)
        const loudnessDb = 10*Math.log10(Math.max(kw*kw, 1e-12)); // LKFS~ ≈ 10*log10(mean^2)

        // --- Dynamic range via short-time RMS percentiles ---
        const drDb = this._dynamicRangeDb(mono, sr, APP.SUM_RMS_WIN_SEC, APP.SUM_RMS_HOP_SEC);

        // --- Spectral centroid & Pitch (YIN) on central slice (≤30 s) ---
        const sliceSec = Math.min(APP.SUM_ANALYSIS_SEC, N/sr);
        const start = Math.max(0, Math.floor((N - sliceSec*sr)/2));
        const end   = Math.min(N, start + Math.floor(sliceSec*sr));
        const seg   = mono.subarray(start, end);

        const centroidHz = this._spectralCentroid(seg, sr);
        const pitchEst   = this._estimatePitchYIN(seg, sr, APP.PITCH_MIN_HZ, APP.PITCH_MAX_HZ);

        // --- Stereo correlation (if 2+ channels) ---
        let stereoCorr;
        if(buffer.numberOfChannels >= 2){
          const c0 = buffer.getChannelData(0);
          const c1 = buffer.getChannelData(1);
          stereoCorr = this._corrDecimated(c0, c1, sr);
        }

        const out = {
          peakDb, rmsDb, crestDb, loudnessDb, drDb,
          centroidHz: (isFinite(centroidHz)? centroidHz: undefined),
          pitchHz: (pitchEst && isFinite(pitchEst.hz)) ? pitchEst.hz : undefined,
          pitchNote: (pitchEst && pitchEst.note) ? pitchEst.note : undefined,
          pitchConf: (pitchEst && isFinite(pitchEst.conf)) ? pitchEst.conf : undefined,
          stereoCorr: (stereoCorr!==undefined && isFinite(stereoCorr)) ? stereoCorr : undefined
        };
        return out;
      }catch(e){
        console.warn('Summary analysis failed:', e);
        return {};
      }
    }

    _approxKWeightedRMS(x, sr){
      // Lightweight approximate K‑weighting: cascade of (i) 1st‑order HP at 60 Hz,
      // then (ii) gentle high‑shelf tilt via pre‑emphasis y[n] = x[n] - α x[n-1] (α≈0.92)
      // Not a normative LUFS implementation; used only for a relative loudness proxy.
      const hpFc = 60;
      const RC = 1/(2*Math.PI*hpFc);
      const aHP = (1/sr)/(RC + (1/sr));
      let yHP = 0, xPrev = 0;
      let sum=0;
      const alpha = 0.92; // pre‑emphasis
      let prev=0;
      for(let i=0;i<x.length;i++){
        const xi = x[i];
        // 1st‑order HP (classic discrete‑time one‑pole)
        const y = aHP*(yHP + xi - xPrev);
        yHP = y; xPrev = xi;
        // pre‑emphasis
        const z = y - alpha*prev;
        prev = y;
        sum += z*z;
      }
      return Math.sqrt(sum / Math.max(1, x.length));
    }

    _dynamicRangeDb(x, sr, winSec=0.4, hopSec=0.1){
      const win = Math.max(16, Math.floor(winSec * sr));
      const hop = Math.max(8,  Math.floor(hopSec * sr));
      const rmsDb = [];
      for(let i=0; i+win<=x.length; i+=hop){
        let s=0;
        for(let k=0;k<win;k++){ const v=x[i+k]; s += v*v; }
        const r = Math.sqrt(s / win);
        rmsDb.push(toDb(r));
      }
      if(!rmsDb.length) return undefined;
      rmsDb.sort((a,b)=>a-b);
      const p10 = rmsDb[Math.floor(0.10*(rmsDb.length-1))];
      const p90 = rmsDb[Math.floor(0.90*(rmsDb.length-1))];
      return p90 - p10;
    }

    _spectralCentroid(x, sr){
      try{
        const N = 4096;
        if(x.length < N) return undefined;
        const hop = N>>1;
        const hann = this._hann(N);
        let num=0, den=0, frames=0;

        const re = new Float64Array(N);
        const im = new Float64Array(N);

        for(let i=0; i+N<=x.length; i+=hop){
          for(let k=0;k<N;k++){ re[k] = x[i+k]*hann[k]; im[k]=0; }
          this._fft(re, im); // in-place
          let localNum = 0, localDen = 0;
          for(let k=1; k<=N/2; k++){
            const mag = Math.hypot(re[k], im[k]);
            const f = (k*sr)/N;
            localNum += f * mag;
            localDen += mag;
          }
          if(localDen>0){ num += localNum; den += localDen; frames++; }
        }
        if(den<=0 || frames===0) return undefined;
        return num/den;
      }catch{ return undefined; }
    }

    _estimatePitchYIN(x, sr, fmin=50, fmax=1000){
      try{
        // Downsample to ~22.05 kHz for speed if needed
        const targetSR = 22050;
        let xs, srs;
        if(sr > targetSR){
          const r = sr/targetSR;
          const n = Math.floor(x.length / r);
          xs = new Float32Array(n);
          for(let i=0;i<n;i++){
            const t = i*r;
            const i0 = Math.floor(t);
            const w = t - i0;
            const a = x[i0] || 0, b = x[i0+1] || a;
            xs[i] = a*(1-w) + b*w;
          }
          srs = targetSR;
        }else{ xs = x; srs = sr; }

        const W = 2048;
        const hop = 256;
        const minLag = Math.floor(srs / fmax);
        const maxLag = Math.floor(srs / fmin);
        const thresh = 0.15;

        const pitches = [];
        const confs = [];

        for(let off=0; off+W+maxLag < xs.length; off += hop){
          // difference function d(τ)
          const d = new Float64Array(maxLag+1);
          for(let tau=1; tau<=maxLag; tau++){
            let s=0;
            for(let i=0;i<W;i++){
              const a = xs[off+i] - xs[off+i+tau];
              s += a*a;
            }
            d[tau] = s;
          }
          // cumulative mean normalized difference cmnd(τ)
          const cmnd = new Float64Array(maxLag+1);
          cmnd[0] = 1;
          let acc = 0;
          for(let tau=1; tau<=maxLag; tau++){
            acc += d[tau];
            cmnd[tau] = d[tau] * tau / Math.max(1e-12, acc);
          }
          // absolute minimum below threshold (from minLag)
          let bestTau = -1, bestVal = 1e9;
          for(let tau=minLag; tau<=maxLag; tau++){
            const v = cmnd[tau];
            if(v < thresh){
              // local minimum search
              while(tau+1<=maxLag && cmnd[tau+1] < v){ tau++; }
              bestTau = tau; bestVal = cmnd[tau]; break;
            }
            if(v < bestVal){ bestVal = v; bestTau = tau; }
          }
          if(bestTau>0){
            // parabolic interpolation around bestTau for sub-sample estimate
            const tau = bestTau;
            const prev = cmnd[tau-1] || cmnd[tau];
            const next = cmnd[tau+1] || cmnd[tau];
            const denom = 2*(2*cmnd[tau] - prev - next);
            const delta = (denom !== 0) ? (next - prev)/denom : 0;
            const tauInterp = tau + delta;
            const f0 = srs / tauInterp;
            if(f0>=fmin && f0<=fmax && isFinite(f0)){
              pitches.push(f0);
              confs.push(Math.max(0, Math.min(1, 1 - bestVal)));
            }
          }
        }
        if(!pitches.length) return null;

        // median pitch & mean confidence across voiced frames
        pitches.sort((a,b)=>a-b);
        const med = pitches[pitches.length>>1];
        let meanConf = 0; for(const c of confs) meanConf += c; meanConf/=confs.length;

        const note = this._hzToNoteName(med);
        return { hz: med, conf: meanConf, note };
      }catch(e){
        console.warn('Pitch YIN failed:', e);
        return null;
      }
    }

    _hzToNoteName(f){
      if(!isFinite(f) || f<=0) return '';
      const A4 = 440;
      const n = Math.round(12*Math.log2(f/A4)) + 69; // MIDI
      const names = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'];
      const name = names[(n+3)%12]; // MIDI 69=A -> index 9; shift so C is at 0
      const octave = Math.floor(n/12)-1;
      // cents offset
      const fRef = A4 * Math.pow(2, (n-69)/12);
      const cents = Math.round(1200*Math.log2(f/fRef));
      const centsStr = (cents===0)? '' : (cents>0? `+${cents}¢` : `${cents}¢`);
      return `${name}${octave}${centsStr}`;
    }

    _corrDecimated(a, b, sr){
      const stride = Math.max(1, Math.floor(sr/8000));
      let sx=0, sy=0, sxx=0, syy=0, sxy=0, n=0;
      for(let i=0;i<Math.min(a.length,b.length); i+=stride){
        const x=a[i], y=b[i];
        sx+=x; sy+=y; sxx+=x*x; syy+=y*y; sxy+=x*y; n++;
      }
      if(n===0) return undefined;
      const mx=sx/n, my=sy/n;
      const vx = Math.max(0, sxx/n - mx*mx);
      const vy = Math.max(0, syy/n - my*my);
      const cov = sxy/n - mx*my;
      const denom = Math.sqrt(vx*vy) || 1e-12;
      return clamp(cov/denom, -1, 1);
    }

    /* ---------- FFT (radix-2, in-place) + Hann ---------- */
    _fft(re, im){
      const n = re.length;
      // bit reversal
      for(let i=1, j=0; i<n; i++){
        let bit = n>>1;
        for(; j & bit; bit>>=1) j ^= bit;
        j ^= bit;
        if(i<j){ const tr=re[i]; re[i]=re[j]; re[j]=tr; const ti=im[i]; im[i]=im[j]; im[j]=ti; }
      }
      for(let len=2; len<=n; len<<=1){
        const ang = -2*Math.PI/len;
        const wlenR = Math.cos(ang), wlenI = Math.sin(ang);
        for(let i=0; i<n; i+=len){
          let wr=1, wi=0;
          const half = len>>1;
          for(let j=0; j<half; j++){
            const uR = re[i+j], uI = im[i+j];
            const vR = re[i+j+half]*wr - im[i+j+half]*wi;
            const vI = re[i+j+half]*wi + im[i+j+half]*wr;
            re[i+j]       = uR + vR;
            im[i+j]       = uI + vI;
            re[i+j+half]  = uR - vR;
            im[i+j+half]  = uI - vI;
            const nwr = wr*wlenR - wi*wlenI;
            wi = wr*wlenI + wi*wlenR;
            wr = nwr;
          }
        }
      }
    }
    _hann(N){ const w = new Float64Array(N); for(let i=0;i<N;i++){ w[i]=0.5*(1 - Math.cos(2*Math.PI*i/(N-1))); } return w; }
  }

  new WaveformStudio('#box');
})();
</script>

<!-- shareable source ---------------------------------------- -->
<h2 style="margin:50px auto 10px;text-align:center;">Full Source Code (nws.html v 3.3.8)</h2>
<details class="code-box">
  <summary style="cursor:pointer;font-size:1.05rem;">Click to show / hide</summary>
  <pre><code id="src" class="html"></code></pre>
</details>
<script>
  document.getElementById('src').textContent = document.documentElement.outerHTML;
  hljs.highlightElement(document.getElementById('src'));
</script>
</body>
</html>