mini player + dark glass: eight shapes run by the hidden main as the one brain, dissolving covers and accents, drag from anywhere, and the space between the panes turned to real acrylic - with the webview flags that keep rest frames honest

src/mini/bits/VolumeFly.svelte

@@ -0,0 +1,154 @@
+<script>
+    // Speaker button + the vertical flyout (the taskbar-volume gesture Kyle
+    // picked on the mockup). The icon follows the playbar's own state rule —
+    // mute/zero → volume-mute, under half → volume-low, else volume — and the
+    // track is the playbar's knobless geometry stood upright, plus the knob
+    // the flyout needs for grabbing.
+    import Icon from "../../components/Icon.svelte";
+    import { mini, setVolume } from "../mini.svelte.js";
+
+    let open = $state(false);
+    let btn = $state(null);
+    let below = $state(false);
+
+    const volIcon = $derived(
+        mini.muted || mini.volume === 0 ? "volume-mute" : mini.volume < 0.5 ? "volume-low" : "volume",
+    );
+
+    function toggle() {
+        if (!open && btn) below = btn.getBoundingClientRect().top < 138;
+        open = !open;
+    }
+    function outside(e) {
+        if (open && !e.target.closest(".volwrap")) open = false;
+    }
+    function key(e) {
+        if (e.key === "Escape") open = false;
+    }
+
+    let track = $state(null);
+    function setAt(e) {
+        const r = track.getBoundingClientRect();
+        setVolume(1 - (e.clientY - r.top) / r.height);
+    }
+    function onDown(e) {
+        e.stopPropagation();
+        setAt(e);
+        const mv = (ev) => setAt(ev);
+        const up = () => {
+            window.removeEventListener("pointermove", mv);
+            window.removeEventListener("pointerup", up);
+        };
+        window.addEventListener("pointermove", mv);
+        window.addEventListener("pointerup", up);
+    }
+    function wheel(e) {
+        e.preventDefault();
+        setVolume(mini.volume - Math.sign(e.deltaY) * 0.05);
+    }
+</script>
+
+<svelte:window onpointerdown={outside} onkeydown={key} />
+
+<span class="volwrap">
+    <button class="spk" class:on={open} bind:this={btn} title="Volume" onclick={toggle} onwheel={wheel}>
+        <Icon name={volIcon} size={18} />
+    </button>
+    {#if open}
+        <div class="fly" class:below onwheel={wheel}>
+            <div
+                class="vtrack"
+                bind:this={track}
+                onpointerdown={onDown}
+                role="slider"
+                aria-label="Volume"
+                aria-valuenow={Math.round(mini.volume * 100)}
+                tabindex="0"
+            >
+                <div class="vfill" style="height: {(mini.volume * 100).toFixed(1)}%"></div>
+                <div class="vknob" style="bottom: {(mini.volume * 100).toFixed(1)}%"></div>
+            </div>
+        </div>
+    {/if}
+</span>
+
+<style>
+    .volwrap {
+        position: relative;
+        display: inline-flex;
+        flex: none;
+    }
+    .spk {
+        color: var(--text-secondary);
+        display: grid;
+        place-items: center;
+        padding: 0;
+    }
+    .spk:hover,
+    .spk.on {
+        color: #fff;
+    }
+    .fly {
+        position: absolute;
+        left: 50%;
+        bottom: calc(100% + 8px);
+        transform: translateX(-50%);
+        width: 34px;
+        height: 126px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 40;
+        background: rgba(20, 20, 24, 0.55);
+        backdrop-filter: blur(14px) saturate(1.6);
+        -webkit-backdrop-filter: blur(14px) saturate(1.6);
+        border-radius: 8px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
+        animation: flyup 130ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .fly.below {
+        bottom: auto;
+        top: calc(100% + 8px);
+    }
+    @keyframes flyup {
+        from {
+            opacity: 0;
+            transform: translateX(-50%) translateY(6px) scale(0.96);
+        }
+    }
+    .vtrack {
+        position: relative;
+        width: 4px;
+        height: 98px;
+        border-radius: 2px;
+        background: hsla(0, 0%, 100%, 0.2);
+        cursor: pointer;
+        touch-action: none;
+        transition: width 100ms;
+    }
+    .vtrack:hover {
+        width: 6px;
+    }
+    .vfill {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: var(--accent);
+        border-radius: 2px;
+    }
+    .vtrack:hover .vfill {
+        background: var(--accent-hover);
+    }
+    .vknob {
+        position: absolute;
+        left: 50%;
+        width: 11px;
+        height: 11px;
+        border-radius: 50%;
+        background: #fff;
+        transform: translate(-50%, 50%);
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
+        pointer-events: none;
+    }
+</style>