refactor(app): give the <audio> element a module of its own (R3a)

static/app.js

@@ -39,6 +39,7 @@
     exportSettings,
     importSettings,
 } from './js/settings-io.js';
+import { audio } from './js/audio-el.js';
 
 // Demo analytics — real impl set by demo.js; no-op in normal builds
 window.feedBackDemoTrack = window.feedBackDemoTrack ?? null;
@@ -1497,7 +1498,7 @@
     const hasList = _libFilters[hasKey];
     const lacksList = _libFilters[lacksKey];
     const inHas = hasList.indexOf(item);
     const inLacks = lacksList.indexOf(item);
     if (inHas === -1 && inLacks === -1) {
         hasList.push(item);
     } else if (inHas !== -1) {
@@ -3419,7 +3420,9 @@
 }
 
 // ── Player ───────────────────────────────────────────────────────────────
-const audio = document.getElementById('audio');
+// `audio` now lives in ./js/audio-el.js so carved-out modules can reach the
+// player without importing app.js back (which would close a cycle). Same
+// element, same handle, same lookup — just imported instead of declared here.
 let isPlaying = false;
 let _lastSongPositionEventAt = 0;
 

static/js/audio-el.js

@@ -0,0 +1,17 @@
+// The one <audio> element the whole app plays through.
+//
+// This exists so that code carved out of app.js can reach the player without
+// importing app.js back — which would close a cycle and fail the import-x/no-cycle
+// gate. It is the same handle app.js has always held (`document.getElementById`
+// on the element in the shell), just given a home of its own.
+//
+// It is deliberately a `const`, and it is never reassigned anywhere in core — so a
+// read-only import binding is exactly right, and no state container is needed.
+// (Contrast the reassigned scalars — isPlaying, _avOffsetMs, … — which cannot be
+// shared this way, because an imported binding cannot be written to.)
+//
+// Module scripts evaluate after the HTML is parsed, so the element is already in
+// the document by the time this runs. app.js is loaded as <script type="module">,
+// and its imports evaluate before its body — the same point at which app.js used
+// to run this exact lookup itself.
+export const audio = document.getElementById('audio');