feat(public): scrolling Canvas 2D Mix visualizer — windowed, playback-coupled, zoomable, read-only (8.K W2)

DeepDrftPublic.Client/Controls/MixWaveformVisualizer.razor

@@ -1,35 +1,28 @@
 @namespace DeepDrftPublic.Client.Controls
 
-@* Full-page background waveform for a Mix release. Deliberately NOT the player-bar peak-bar idiom
-   (SpectrumVisualizer / LevelMeterFab own that): this renders a single continuous mirrored
-   silhouette filling the viewport behind the detail content. Fetches its own datum from
-   api/release/{id}/mix/waveform. The played portion is washed with the progress overlay driven by
-   PlaybackPosition; the click-to-seek seam (OnSeek + bindable PlaybackPosition) is wired here for a
-   future wave even though click handling does not ship yet. *@
+@* Full-page scrolling Mix waveform background (Phase 9, 8.K). A windowed slice of the mix's loudness
+   datum scrolls bottom-to-top, coupled to playback; a zoom slider controls the visible time-span (and
+   so the apparent scroll speed, Guitar-Hero style). Strictly read-only: it self-fetches its datum from
+   ReleaseId, takes playback as one-way input only, and never seeks or writes back. The rAF loop and all
+   scroll/zoom/compositing math live in the MixVisualizer.ts interop module; this component is a thin
+   bridge that feeds it datum + playback + zoom + theme. Deliberately NOT the player-bar peak-bar idiom. *@
 
-<div class="mix-waveform-bg @(_profile is null ? "mix-waveform-bg--empty" : null)">
-    @if (_profile is not null)
+<div class="mix-waveform-bg">
+    <canvas @ref="_canvas" class="mix-waveform-canvas"></canvas>
+
+    @* Viewing control only — never a seek surface. Hidden until a datum is present. *@
+    @if (_hasDatum)
     {
-        <svg class="mix-waveform-svg"
-             viewBox="0 0 @ViewBoxWidth 100"
-             preserveAspectRatio="none"
-             role="img"
-             aria-label="Waveform">
-            <defs>
-                <clipPath id="@_clipId">
-                    <path d="@_silhouettePath" />
-                </clipPath>
-            </defs>
-
-            @* Base silhouette. *@
-            <path d="@_silhouettePath" class="mix-waveform-fill" />
-
-            @* Played-portion wash: a full-height rect clipped to the silhouette, width tracking
-               PlaybackPosition. Clamped to [0, 1]. *@
-            <rect x="0" y="0"
-                  width="@(ClampedPosition * ViewBoxWidth)" height="100"
-                  class="mix-waveform-played"
-                  clip-path="url(#@_clipId)" />
-        </svg>
+        <div class="mix-waveform-zoom">
+            <MudSlider T="double"
+                       Value="@ZoomFraction"
+                       ValueChanged="@OnZoomFractionChanged"
+                       Min="0"
+                       Max="1"
+                       Step="0.001"
+                       Size="Size.Small"
+                       Color="Color.Primary"
+                       aria-label="Waveform zoom" />
+        </div>
     }
 </div>