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/shapes/Focus.svelte

@@ -0,0 +1,131 @@
+<script>
+    // V5 · The Focus card — Kyle's vertical reference: transport riding the
+    // art, centered three-line meta (with the album), the lane, and one
+    // modes row (shuffle · repeat · volume together, per his centring note).
+    import Icon from "../../components/Icon.svelte";
+    import Wash from "../bits/Wash.svelte";
+    import Art from "../bits/Art.svelte";
+    import Lane from "../bits/Lane.svelte";
+    import VolumeFly from "../bits/VolumeFly.svelte";
+    import Chrome from "../bits/Chrome.svelte";
+    import { mini, playing, cmd } from "../mini.svelte.js";
+
+    let artEl = $state(null);
+</script>
+
+<div class="shape">
+    <Wash artUrl={mini.artUrl} fade="deep" />
+    <Chrome anchor={artEl} />
+    <div class="lay">
+        <div class="artrow">
+            <button class="m-skip" title="Previous" onclick={() => cmd("prev")}><Icon name="skip-back" size={18} /></button>
+            <div class="artbox" bind:this={artEl}>
+                <Art url={mini.artUrl} />
+                <button class="m-disc onart" title="Play/Pause" onclick={() => cmd("toggle")}><Icon name={playing() ? "pause" : "play"} size={19} /></button>
+            </div>
+            <button class="m-skip" title="Next" onclick={() => cmd("next")}><Icon name="skip-forward" size={18} /></button>
+        </div>
+        <div class="meta">
+            <div class="tt">{mini.title ?? "Nothing playing"}</div>
+            <div class="ar">{mini.artist ?? ""}</div>
+            <div class="al">{mini.album ?? ""}</div>
+        </div>
+        <Lane />
+        <div class="modes">
+            <button class="m-mode" class:on={mini.shuffle} title="Shuffle" onclick={() => cmd("shuffle")}><Icon name="shuffle" size={16} /></button>
+            <button class="m-mode" class:on={mini.repeat !== "off"} title="Repeat" onclick={() => cmd("repeat")}><Icon name={mini.repeat === "one" ? "repeat-one" : "repeat"} size={16} /></button>
+            <VolumeFly />
+        </div>
+    </div>
+</div>
+
+<style>
+    .shape {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: var(--bg-player);
+    }
+    .lay {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 16px 14px 12px;
+        gap: 9px;
+    }
+    .artrow {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+    .artrow .m-skip {
+        width: 26px;
+    }
+    .artbox {
+        position: relative;
+        flex: 1;
+        aspect-ratio: 1;
+        border-radius: 10px;
+        overflow: hidden;
+        background: var(--bg-highlight);
+    }
+    /* The disc rides the art but only shows itself under the pointer — the
+       cover stays a cover until you reach for it. Hidden = click-through,
+       so a press on the resting art moves the window like anywhere else. */
+    :global(.m-disc.onart) {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 46px;
+        height: 46px;
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 150ms, background 120ms, transform 120ms;
+    }
+    .artbox:hover :global(.m-disc.onart) {
+        opacity: 1;
+        pointer-events: auto;
+    }
+    :global(.m-disc.onart:hover) {
+        transform: translate(-50%, -50%) scale(1.06);
+    }
+    .meta {
+        text-align: center;
+        min-width: 0;
+    }
+    .tt {
+        font-size: 15px;
+        font-weight: 700;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .ar {
+        font-size: 12px;
+        color: var(--text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-top: 2px;
+    }
+    .al {
+        font-size: 11px;
+        color: var(--text-muted);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-top: 1px;
+    }
+    .modes {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 20px;
+        margin-top: -2px;
+    }
+</style>