refactor(12.A): rename Mix* visualizer engine to Waveform* abstraction

2026-06-17 10:16:44 -04:00
parent ad94354632
commit 3839948eeb
12 changed files with 58 additions and 58 deletions
@@ -0,0 +1,36 @@
+/* The eight-knob band. Phase 10 §4: the host ALWAYS renders this component and the component @if-gates
+   the knobs on its Visible parameter. So the container is permanent and reserves its height whether or
+   not the knobs are present — content below the bar never pops on toggle. No collapse machinery, no
+   transitions, no glass surface. A plain transparent horizontal flex row of the eight knobs that wraps
+   to a second line only if the band is genuinely too narrow.
+
+   min-height reserves one knob-row's worth of space (knob Size=64 + icon caption + gaps + margins) so
+   the empty (hidden) state occupies the same vertical box the populated single-row state does. On very
+   narrow viewports a populated band may wrap to a second row and exceed this floor — the no-pop
+   guarantee is exact for the common single-row (desktop) layout. */
+.mix-visualizer-controls-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 0.85rem 1rem;
+    margin: 0.5rem 0;
+    min-height: 6rem;
+}
+
+/* One control: a RadialKnob with its Material icon caption underneath. RadialKnob has no icon slot, so
+   the icon rides adjacent (§7d). Center the pair so the seven read as a tidy bar. */
+.mix-visualizer-control {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+/* The caption icon is a MudIcon (a Razor component), so Blazor CSS isolation does not stamp the scope
+   attribute onto its element — reach it with ::deep. Tinted to the secondary accent and the
+   overlay-label opacity so it matches the session-hero NowPlaying captions (§7e). */
+.mix-visualizer-control ::deep .mix-visualizer-control-icon {
+    color: var(--mud-palette-primary);
+    opacity: 0.78;
+}