feat(visualizer): popover-hosted control panel (Phase 12.E)

Build WaveformVisualizerControlPopover pairing the lava-lamp trigger with the eight-knob WaveformVisualizerControls panel; style to the NowPlaying Hero look from tokens. Panel chrome scoped to the popover mount via a PanelChrome flag; Mix's inline mount unchanged.
2026-06-17 11:12:27 -04:00
parent ec3989c354
commit 7aeced6a8d
4 changed files with 178 additions and 49 deletions
@@ -0,0 +1,62 @@
+@namespace DeepDrftPublic.Client.Controls
+@using DeepDrftShared.Client.Common
+
+@* The single controls affordance, placed by an icon anywhere (Phase 12 §3d-revised). Closed state is
+   just the lava-lamp icon; clicking it floats the eight-knob WaveformVisualizerControls panel over the
+   surface. One panel, one popover host, reused on every host (Mix, Cut, Session, NowPlaying card) — the
+   SOLID seam: variance is the per-host anchor (§8e), never a forked popover.
+
+   Anchoring follows the SharePopover precedent: Fixed so the panel reads the trigger's bounding rect
+   rather than fighting CSS container tricks. AnchorOrigin/TransformOrigin are per-host
+   parameters (§8e) defaulted to bottom-right open-down — the cleanest case (Mix's TopRightAction corner);
+   tight hosts (the NowPlaying card) override to open away from the card body.
+
+   The popover owns NO control state and NO JS interop. The hosted WaveformVisualizerControls panel mutates
+   the shared WaveformVisualizerControlState and raises Changed; the visualizer bridge subscribes. This host
+   only toggles open/closed and places the panel — it stays purely presentational. *@
+
+@* Backdrop dismissal mirrors SharePopover: a viewport overlay closes on outside click. AutoClose stays
+   off so a knob drag (which can land pointer-up outside the panel's DOM subtree) does not dismiss. *@
+<MudOverlay Visible="@_open" OnClick="@Close" />
+
+@* Activator and popover share this wrapper so MudPopover anchors off the trigger's bounding rect. *@
+<div>
+    <MudTooltip Text="Visualizer settings">
+        <MudIconButton Icon="@(_open ? DDIcons.LavaLampFilled : DDIcons.LavaLamp)"
+                       Size="@IconSize"
+                       Color="Color.Secondary"
+                       Disabled="@(!RendererInfo.IsInteractive)"
+                       OnClick="@Toggle"
+                       aria-label="Visualizer settings"
+                       aria-expanded="@_open" />
+    </MudTooltip>
+
+    <MudPopover Open="@_open"
+                Fixed="true"
+                AnchorOrigin="@AnchorOrigin"
+                TransformOrigin="@TransformOrigin"
+                Class="waveform-visualizer-control-popover">
+        <WaveformVisualizerControls PanelChrome="true" />
+    </MudPopover>
+</div>
+
+@code {
+    /// <summary>
+    /// Where the panel anchors relative to the trigger icon (§8e). Defaults to opening down-from the
+    /// icon's bottom-right — fits Mix's top-right corner and the ambient hosts. Tight hosts (the
+    /// NowPlaying card) override to open away from the card body.
+    /// </summary>
+    [Parameter] public Origin AnchorOrigin { get; set; } = Origin.BottomRight;
+
+    /// <summary>The panel's own corner that pins to <see cref="AnchorOrigin"/> (§8e).</summary>
+    [Parameter] public Origin TransformOrigin { get; set; } = Origin.TopRight;
+
+    /// <summary>Trigger-icon size. Defaults Large to match the Phase 10 Mix lava-lamp button.</summary>
+    [Parameter] public Size IconSize { get; set; } = Size.Large;
+
+    private bool _open;
+
+    private void Toggle() => _open = !_open;
+
+    private void Close() => _open = false;
+}