@namespace DeepDrftPublic.Client.Controls

@* 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">
    <canvas @ref="_canvas" class="mix-waveform-canvas"></canvas>
</div>

@* Viewing control only — never a seek surface. Hidden until a datum is present.
   Deliberately a SIBLING of .mix-waveform-bg, not a child: the backdrop is position:fixed and so
   forms its own stacking context, which would trap any descendant below the page's z-index:1
   foreground (.mix-detail-foreground) and let that foreground swallow the slider's pointer events.
   As a top-level sibling with its own z-index, the slider stacks above the foreground and stays
   draggable. *@
@if (_hasDatum)
{
    <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>
}