diff --git a/src/App.svelte b/src/App.svelte
index 60324d5..e6c36cb 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -5,6 +5,8 @@
     import NowPlaying from "./components/NowPlaying.svelte";
     import ArtworkViewer from "./components/ArtworkViewer.svelte";
     import LoginModal from "./components/LoginModal.svelte";
+    import PreviewOverlay from "./components/PreviewOverlay.svelte";
+    import { previewUi, openPreviewFixture } from "./lib/preview/previewSession.svelte.js";
     import Home from "./views/Home.svelte";
     import Search from "./views/Search.svelte";
     import Library from "./views/Library.svelte";
@@ -40,16 +42,38 @@
     autoConnect();
     refreshLibrary();
     refreshPlaylists();
+
+    // Dev-only hook for the Phase 2 exit-gate check (500-item fixture in a
+    // plain browser) and for driving the modal without a Tauri backend.
+    if (import.meta.env.DEV && typeof window !== "undefined") {
+        window.__previewFixture = (n = 12) => openPreviewFixture(n);
+        window.__previewUi = previewUi; // debug: the app's own store instance
+        window.__ui = ui; // debug: known-good reactive store, same instance
+        window.__togglePv = () => (previewUi.open = !previewUi.open);
+        window.__toggleNp = () => (ui.nowPlaying = !ui.nowPlaying);
+    }
 </script>
 
-<div class="app" class:np-open={ui.nowPlaying} class:sidebar-collapsed={ui.sidebarCollapsed}>
+<div
+    class="app"
+    class:np-open={ui.nowPlaying}
+    class:sidebar-collapsed={ui.sidebarCollapsed}
+    class:preview-open={previewUi.open}
+>
     <TitleBar />
+    <!-- Previews take over the whole window (decision 2026-07-22): while the
+         modal is open the page and the player bar are inert/not rendered —
+         there is deliberately NO UI path to command main audio behind the
+         focus coordinator's back. The titlebar stays live for window chrome. -->
     <Sidebar />
-    <main class="content" use:floatScroll>
+    <main class="content" use:floatScroll inert={previewUi.open || undefined}>
         <CurrentView />
     </main>
     <NowPlaying />
-    <PlayerBar />
+    {#if !previewUi.open}
+        <PlayerBar />
+    {/if}
+    <PreviewOverlay />
     <ArtworkViewer />
     <LoginModal />
 </div>
@@ -57,6 +81,15 @@
 <style>
     /* Frameless window: the titlebar row is part of the app background —
        no separate chrome color, the panels float beneath it. */
+    /* While the preview modal is open: keyboard is contained by the dialog's
+       focus trap and aria-modal, the content pane is `inert`, and the flanking
+       panels stop taking pointer input here. (The player bar is simply not
+       rendered — see the markup note above.) */
+    .app.preview-open :global(.sidebar),
+    .app.preview-open :global(.nowplaying) {
+        pointer-events: none;
+    }
+
     .app {
         display: grid;
         grid-template-columns: var(--sidebar-width) 1fr var(--nowplaying-width);
diff --git a/src/components/PreviewOverlay.svelte b/src/components/PreviewOverlay.svelte
new file mode 100644
index 0000000..3a46593
--- /dev/null
+++ b/src/components/PreviewOverlay.svelte
@@ -0,0 +1,1190 @@
+<script>
+    // Preview tracks modal — the approved mockup
+    // (TODO-Feature-Docs/scrollable-track-previews/mockups/artist-preview-modal.html)
+    // reproduced exactly, per the recorded fidelity rule: geometry, colours,
+    // masks, easings and width relationships are the mockup's; only the
+    // typography comes from the app's own font stack.
+    //
+    // Every visual decision here has an entry in the design doc's "Confirmed
+    // visual decisions" table: twin-glow bleed, box-feathered artwork bloom,
+    // edge treatment J, 74% neighbours, Bump −50%, H44 waveform scrubber,
+    // R1b capsule, T3 directional metadata swaps, folded control row with
+    // the P2 ghost pill, F3 footer.
+    import { tick, untrack } from "svelte";
+    import {
+        previewUi,
+        previewCommands,
+        closePreview,
+    } from "../lib/preview/previewSession.svelte.js";
+    import {
+        playableManifestIndices,
+        playableCursor,
+        PHASE,
+    } from "../lib/preview/session.js";
+    import { accentFromImage } from "../lib/color.js";
+
+    const st = $derived(previewUi.snapshot);
+    const manifest = $derived(st?.manifest ?? null);
+    const items = $derived(manifest?.items ?? []);
+    const activeIndex = $derived(st?.activeManifestIndex ?? null);
+    const activeItem = $derived(activeIndex != null ? items[activeIndex] : null);
+    const playing = $derived(st?.phase === PHASE.PLAYING);
+    const ended = $derived(st?.phase === PHASE.ENDED);
+    const failed = $derived(st?.phase === PHASE.ITEM_FAILED);
+    const playable = $derived(st ? playableManifestIndices(st) : []);
+    const cursor = $derived(st ? playableCursor(st) : null);
+    const unavailableCount = $derived(items.length - playable.length);
+
+    // ------------------------------------------------------------ accent --
+    // Panel-scoped accent (--pv-accent) extracted from the active cover with
+    // the app's own extractor. The GLOBAL accent belongs to the track that is
+    // really playing and is never touched from here.
+    let pvAccent = $state("#1f9ad6");
+    let pvHover = $state("#41b7ee");
+    const accentCache = new Map();
+    $effect(() => {
+        const art = activeItem?.artwork;
+        if (!art) return;
+        if (accentCache.has(art)) {
+            const c = accentCache.get(art);
+            pvAccent = c.accent;
+            pvHover = c.hover;
+            return;
+        }
+        let live = true;
+        accentFromImage(art).then((c) => {
+            if (!c) return;
+            accentCache.set(art, c);
+            if (live && activeItem?.artwork === art) {
+                pvAccent = c.accent;
+                pvHover = c.hover;
+            }
+        });
+        return () => (live = false);
+    });
+
+    // ----------------------------------------------------- backdrop slots --
+    // Two crossfading bleed layers, exactly the mockup's setBackdrop(). The
+    // effect depends ONLY on the active artwork; the slot bookkeeping is read
+    // and written under untrack() so it can never invalidate the effect
+    // (a read-and-write of the same $state is a self-triggering loop).
+    let bleedA = $state("");
+    let bleedB = $state("");
+    let bleedSlot = $state(0);
+    $effect(() => {
+        const art = activeItem?.artwork ?? "";
+        untrack(() => {
+            const showing = bleedSlot === 0 ? bleedB : bleedA;
+            if (art === showing) return;
+            if (bleedSlot === 0) bleedA = art;
+            else bleedB = art;
+            bleedSlot = bleedSlot === 0 ? 1 : 0;
+        });
+    });
+
+    // ------------------------------------------------------------- reel ----
+    // Virtualized: only a window of cards around the active index renders,
+    // positioned arithmetically (uniform stride), so a 500-item manifest
+    // costs the same as a 10-item one — the Phase 2 exit gate.
+    // All reel geometry is CSS-computed from a single `--cover` clamp and a
+    // `--gap`, so JS never carries a pixel size that could disagree with the
+    // rendered box (the bug that left stepped cards off-centre). JS supplies
+    // only integer indices; CSS turns them into pixels. Virtualization: only
+    // a window of cards around the active index is in the DOM, positioned by
+    // absolute index, so a 500-item manifest costs the same as a 10-item one.
+    const RENDER_RADIUS = 4;
+    const GAP = 30;
+    const windowStart = $derived(Math.max(0, (activeIndex ?? 0) - RENDER_RADIUS));
+    const windowEnd = $derived(Math.min(items.length - 1, (activeIndex ?? 0) + RENDER_RADIUS));
+    const visibleCards = $derived(
+        items.slice(windowStart, windowEnd + 1).map((item, k) => ({
+            item,
+            index: windowStart + k,
+        }))
+    );
+
+    // Stride comes from the RESOLVED `--cover` (a clamp/vh the JS cannot
+    // predict), measured off the live reel. CSS calc with an inherited
+    // unitless var proved unreliable here, so JS owns the arithmetic — but
+    // from the real pixel value, which is what made the earlier viewport-guess
+    // version drift. Cards and the track slide share this one number.
+    let reelEl = $state(null);
+    let stride = $state(220);
+    function measureStride() {
+        if (!reelEl) return;
+        // The reel is `--cover + 2*--bleed-room(70px)` wide, so the resolved
+        // cover is reel width minus 140 — always available, transform-immune.
+        const cover = reelEl.clientWidth - 140;
+        if (cover > 0) stride = cover + GAP;
+    }
+    $effect(() => {
+        if (!reelEl) return;
+        measureStride();
+        const ro = new ResizeObserver(measureStride);
+        ro.observe(reelEl);
+        return () => ro.disconnect();
+    });
+    const trackOffset = $derived((activeIndex ?? 0) * stride);
+
+    function availabilityOf(item) {
+        return st?.itemRuntimeByKey[item.sessionKey]?.availability ?? item.initialAvailability;
+    }
+
+    // ------------------------------------------------------ bump replay ----
+    // Re-key the active card on each generation so the arrival keyframe
+    // replays. Written under untrack() and driven strictly off the generation.
+    let bumpKey = $state(0);
+    let lastBumpGen = -1;
+    $effect(() => {
+        const gen = st?.requestGeneration ?? -1;
+        untrack(() => {
+            if (gen !== lastBumpGen) {
+                lastBumpGen = gen;
+                bumpKey += 1;
+            }
+        });
+    });
+
+    // ----------------------------------------------- T3 metadata swaps -----
+    // One element per row, two phases, per-row generation guard, no
+    // same-text skip — the exact semantics fixed in the mockup after the
+    // shared-counter bug stranded rows at opacity 0.
+    let titleEl = $state(null);
+    let artistEl = $state(null);
+    let albumEl = $state(null);
+    let stepDir = 1;
+    let lastGeneration = -1;
+    const swapGen = new Map();
+    let firstPaint = true;
+
+    const artistLine = $derived(activeItem ? activeItem.artists.join(", ") : "");
+    const albumLine = $derived(
+        activeItem
+            ? [activeItem.album, fmtMs(activeItem.fullDurationMs)].filter(Boolean).join(" · ")
+            : ""
+    );
+
+    function fmtMs(ms) {
+        if (!Number.isFinite(ms)) return "";
+        const s = Math.round(ms / 1000);
+        return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+    }
+
+    function setRow(node, text) {
+        if (!node) return;
+        if (firstPaint || matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            node.textContent = text;
+            return;
+        }
+        const dir = stepDir > 0 ? "up" : "down";
+        const gen = (swapGen.get(node) ?? 0) + 1;
+        swapGen.set(node, gen);
+        node.classList.remove("swap-in-up", "swap-in-down", "swap-out-up", "swap-out-down");
+        void node.offsetWidth;
+        node.classList.add(`swap-out-${dir}`);
+        setTimeout(() => {
+            if (swapGen.get(node) !== gen) return; // a newer step owns this row
+            node.textContent = text;
+            node.classList.remove(`swap-out-${dir}`);
+            void node.offsetWidth;
+            node.classList.add(`swap-in-${dir}`);
+        }, 150);
+    }
+
+    $effect(() => {
+        if (!activeItem) return;
+        const gen = st.requestGeneration;
+        const title = activeItem.title;
+        const artists = artistLine;
+        const album = albumLine;
+        const posText = `Preview ${cursor != null ? cursor + 1 : "—"} of ${playable.length}.`;
+        // The DOM writes and `announce`/`lastGeneration` updates happen after
+        // a tick and under untrack(), so this effect depends only on the
+        // active item's data — never on anything it itself writes.
+        tick().then(() =>
+            untrack(() => {
+                if (gen === lastGeneration) return;
+                lastGeneration = gen;
+                setRow(titleEl, title);
+                setRow(artistEl, artists);
+                setRow(albumEl, album);
+                firstPaint = false;
+                announce = `${title}, ${artists}. ${posText}`;
+            })
+        );
+    });
+
+    let announce = $state("");
+
+    // ------------------------------------------------------- direction -----
+    function step(dir) {
+        stepDir = dir;
+        previewCommands.step(dir);
+    }
+    function activate(item, index) {
+        if (index === activeIndex) return;
+        stepDir = index > activeIndex ? 1 : -1;
+        previewCommands.activateKey(item.sessionKey);
+    }
+
+    // ------------------------------------------------------------- wheel ---
+    let wheelLock = 0;
+    function onWheel(e) {
+        e.preventDefault();
+        // Two gates (mockup-verbatim): magnitude kills trackpad noise, the
+        // time gate absorbs momentum after a real flick.
+        if (Math.abs(e.deltaY) < 12) return;
+        const now = performance.now();
+        if (now - wheelLock < 300) return;
+        wheelLock = now;
+        step(e.deltaY > 0 ? 1 : -1);
+    }
+
+    // ---------------------------------------------------------- keyboard ---
+    function onKeydown(e) {
+        if (!previewUi.open || e.defaultPrevented) return;
+        const inField = /^(INPUT|TEXTAREA|SELECT)$/.test(document.activeElement?.tagName ?? "");
+        switch (e.key) {
+            case "Escape":
+                e.preventDefault();
+                void closePreview();
+                break;
+            case "ArrowDown":
+            case "PageDown":
+                e.preventDefault();
+                step(1);
+                break;
+            case "ArrowUp":
+            case "PageUp":
+                e.preventDefault();
+                step(-1);
+                break;
+            case "Home":
+                e.preventDefault();
+                if (playable.length) {
+                    stepDir = -1;
+                    previewCommands.activateKey(items[playable[0]].sessionKey);
+                }
+                break;
+            case "End":
+                e.preventDefault();
+                if (playable.length) {
+                    stepDir = 1;
+                    previewCommands.activateKey(items[playable[playable.length - 1]].sessionKey);
+                }
+                break;
+            case " ":
+                if (inField) return;
+                e.preventDefault();
+                void previewCommands.togglePlay();
+                break;
+            case "Tab":
+                trapTab(e);
+                break;
+        }
+    }
+
+    // Focus containment: Tab cycles inside the dialog only.
+    let dialogEl = $state(null);
+    function trapTab(e) {
+        if (!dialogEl) return;
+        const focusables = dialogEl.querySelectorAll(
+            'button:not([disabled]), [href], canvas[tabindex], [tabindex]:not([tabindex="-1"])'
+        );
+        if (!focusables.length) return;
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+        } else if (!dialogEl.contains(document.activeElement)) {
+            e.preventDefault();
+            first.focus();
+        }
+    }
+    $effect(() => {
+        if (previewUi.open && dialogEl) {
+            tick().then(() => dialogEl?.querySelector(".close")?.focus());
+        }
+    });
+
+    // ------------------------------------------------------- scrubber ------
+    // The PlayerBar waveform recipe at modal height (H 44 / maxAmp 15).
+    // Peaks are deterministic pseudo-peaks per item until the backend ships
+    // real clip peaks (it already holds the bytes; tracked for Phase 7).
+    const WAVE_H = 44;
+    const MAX_AMP = 15;
+    let waveCanvas = $state(null);
+    let waveWrap = $state(null);
+    const peaksCache = new Map();
+    function peaksFor(key) {
+        if (peaksCache.has(key)) return peaksCache.get(key);
+        let seed = 9301;
+        for (const ch of key) seed = (seed * 33 + ch.charCodeAt(0)) % 4294967296;
+        const rnd = () => ((seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296);
+        const out = Array.from({ length: 200 }, (_, k) => {
+            const env = Math.sin((k / 200) * Math.PI) * 0.55 + 0.45;
+            return Math.min(1, (0.35 + rnd() * 0.65) * env);
+        });
+        peaksCache.set(key, out);
+        return out;
+    }
+
+    $effect(() => {
+        // deps: position, item, accent, size
+        void st?.positionMs;
+        void activeItem?.sessionKey;
+        void pvAccent;
+        drawWave();
+    });
+
+    function drawWave() {
+        if (!waveCanvas || !waveWrap || !activeItem) return;
+        const dpr = window.devicePixelRatio || 1;
+        const W = waveWrap.clientWidth;
+        if (W <= 0) return;
+        const pw = Math.max(1, Math.round(W * dpr));
+        const ph = Math.max(1, Math.round(WAVE_H * dpr));
+        if (waveCanvas.width !== pw || waveCanvas.height !== ph) {
+            waveCanvas.width = pw;
+            waveCanvas.height = ph;
+        }
+        const ctx = waveCanvas.getContext("2d");
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        const pk = peaksFor(activeItem.sessionKey);
+        const N = pk.length;
+        const mid = WAVE_H / 2;
+        const amp = (v) => Math.max(0.7, v * MAX_AMP);
+        const path = new Path2D();
+        path.moveTo(0, mid - amp(pk[0]));
+        for (let i = 0; i < N; i++) path.lineTo((i / (N - 1)) * W, mid - amp(pk[i]));
+        for (let j = N - 1; j >= 0; j--) path.lineTo((j / (N - 1)) * W, mid + amp(pk[j]));
+        path.closePath();
+
+        const clip = st?.clipDurationMs ?? 30_000;
+        const playX = Math.max(0, Math.min(W, ((st?.positionMs ?? 0) / clip) * W));
+        ctx.clearRect(0, 0, W, WAVE_H);
+        const fillClip = (x0, x1, color) => {
+            if (x1 <= x0) return;
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(x0, 0, x1 - x0, WAVE_H);
+            ctx.clip();
+            ctx.fillStyle = color;
+            ctx.fill(path);
+            ctx.restore();
+        };
+        fillClip(0, W, "rgba(255,255,255,0.24)");
+        fillClip(0, playX, pvAccent);
+        ctx.fillStyle = "#ffffff";
+        ctx.fillRect(playX - 0.75, (WAVE_H - 38) / 2, 1.5, 38);
+    }
+
+    function onWaveClick(e) {
+        if (!waveWrap) return;
+        const r = waveWrap.getBoundingClientRect();
+        const clip = st?.clipDurationMs ?? 30_000;
+        previewCommands.seek(Math.max(0, Math.min(clip, ((e.clientX - r.left) / r.width) * clip)));
+    }
+
+    const posLabel = $derived(fmtMs(st?.positionMs ?? 0) || "0:00");
+    const clipLabel = $derived(fmtMs(st?.clipDurationMs ?? 30_000) || "0:30");
+
+    async function onPlayFull() {
+        if (!previewUi.playFull || !activeItem) return;
+        const starter = previewUi.playFull;
+        await previewCommands.playFullTrack(async (item) => starter(item));
+        await closePreview();
+    }
+</script>
+
+<svelte:window onkeydown={onKeydown} />
+
+{#if previewUi.open && st}
+    <div class="scrim" onclick={() => closePreview()} aria-hidden="true"></div>
+    <div
+        class="modal"
+        class:is-playing={playing}
+        role="dialog"
+        aria-modal="true"
+        aria-label={manifest ? `Track previews: ${manifest.context.title}` : "Track previews"}
+        style="--pv-accent: {pvAccent}; --pv-accent-hover: {pvHover};"
+        bind:this={dialogEl}
+    >
+        <div class="bg" aria-hidden="true">
+            <img class="bleed" class:show={bleedSlot === 1 && bleedA} src={bleedA || undefined} alt="" />
+            <img class="bleed" class:show={bleedSlot === 0 && bleedB} src={bleedB || undefined} alt="" />
+            <div class="scrim-x"></div>
+        </div>
+
+        <div class="m-top">
+            <div class="m-context">
+                <span>Previewing ·</span>
+                {manifest?.context.title}
+                {#if manifest?.context.subtitle}<span> · {manifest.context.subtitle}</span>{/if}
+            </div>
+            <div class="m-tools">
+                <button
+                    class:on={st.muted}
+                    title={st.muted ? "Unmute previews" : "Mute previews"}
+                    aria-label={st.muted ? "Unmute previews" : "Mute previews"}
+                    aria-pressed={st.muted}
+                    onclick={() => previewCommands.setMuted(!st.muted)}
+                >
+                    <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" fill="currentColor" /><path d="M15.5 8.5a5 5 0 0 1 0 7" /><path d="M18.5 5.5a9 9 0 0 1 0 13" /></svg>
+                </button>
+                <button class="close" title="Close (Esc)" aria-label="Close previews" onclick={() => closePreview()}>
+                    <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
+                </button>
+            </div>
+        </div>
+
+        {#if st.phase === "empty"}
+            <div class="m-empty">No previews are available for this collection.</div>
+        {:else}
+            <div class="m-body">
+                <div class="m-left">
+                    {#if previewUi.focusWaiting}
+                        <div class="focus-wait" role="status">Waiting for the player to hand over audio…</div>
+                    {/if}
+                    <div class="title-slot"><h2 class="m-title" bind:this={titleEl}></h2></div>
+                    <div class="m-artists" bind:this={artistEl}></div>
+                    <div class="m-album" bind:this={albumEl}></div>
+
+                    {#if failed}
+                        <div class="m-error" role="alert">
+                            This preview could not be loaded.
+                            <button class="retry" onclick={() => previewCommands.replay()}>Retry</button>
+                        </div>
+                    {/if}
+
+                    <div class="m-clip">
+                        <span class="m-time">{posLabel}</span>
+                        <span
+                            class="m-wave"
+                            bind:this={waveWrap}
+                            onclick={onWaveClick}
+                            role="slider"
+                            aria-label="Preview position"
+                            aria-valuemin="0"
+                            aria-valuemax={Math.round((st.clipDurationMs ?? 30000) / 1000)}
+                            aria-valuenow={Math.round((st.positionMs ?? 0) / 1000)}
+                            tabindex="0"
+                        >
+                            <canvas bind:this={waveCanvas}></canvas>
+                        </span>
+                        <span class="m-time">{clipLabel}</span>
+                    </div>
+
+                    <div class="m-transport">
+                        <button
+                            class="m-step"
+                            title="Previous preview (↑)"
+                            aria-label="Previous preview"
+                            disabled={cursor == null ? activeIndex != null && !playable.some((i) => i < activeIndex) : cursor <= 0}
+                            onclick={() => step(-1)}
+                        >
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2.2v12H6zm3.8 6l8.2 6V6z" /></svg>
+                        </button>
+                        <button
+                            class="m-play"
+                            title={playing ? "Pause preview (Space)" : ended ? "Replay preview (Space)" : "Play preview (Space)"}
+                            aria-label={playing ? "Pause preview" : ended ? "Replay preview" : "Play preview"}
+                            onclick={() => previewCommands.togglePlay()}
+                        >
+                            {#if playing}
+                                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M7 5h4v14H7zM13 5h4v14h-4z" /></svg>
+                            {:else if ended}
+                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M3 12a9 9 0 1 0 3-6.7" /><path d="M3 4v5h5" /></svg>
+                            {:else}
+                                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
+                            {/if}
+                        </button>
+                        <button
+                            class="m-step"
+                            title="Next preview (↓)"
+                            aria-label="Next preview"
+                            disabled={cursor == null ? activeIndex != null && !playable.some((i) => i > activeIndex) : cursor >= playable.length - 1}
+                            onclick={() => step(1)}
+                        >
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M15.8 6H18v12h-2.2zM6 6l8.2 6L6 18z" /></svg>
+                        </button>
+                        <span class="t-sep" aria-hidden="true"></span>
+                        <button class="full" title="Play full track" aria-label="Play full track" disabled={!previewUi.playFull || !activeItem?.actions.playFull} onclick={onPlayFull}>
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
+                            Full track
+                        </button>
+                        <button class="act" title="Save to library (soon)" aria-label="Save to library" disabled>
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M12 5v14M5 12h14" /></svg>
+                        </button>
+                        <button class="act" title="Add to playlist (soon)" aria-label="Add to playlist" disabled>
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M3 6h12M3 12h12M3 18h8M17 14v6M14 17h6" /></svg>
+                        </button>
+                        <button class="act" title="Open album (soon)" aria-label="Open album" disabled>
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="8.5" /><circle cx="12" cy="12" r="2.3" /></svg>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="reel-col">
+                    <div class="reel" bind:this={reelEl} onwheel={onWheel}>
+                        {#if activeItem?.artwork}
+                            <img class="cover-glow" src={activeItem.artwork} alt="" aria-hidden="true" />
+                        {/if}
+                        <div class="reel-track" style="transform: translateX(-50%) translateY({-trackOffset}px);">
+                            {#each visibleCards as { item, index } (item.sessionKey)}
+                                {@const avail = availabilityOf(item)}
+                                <div
+                                    class="card"
+                                    class:active={index === activeIndex}
+                                    class:gone={avail !== "available"}
+                                    class:hit={index === activeIndex && bumpKey > 0}
+                                    style="top: {index * stride}px; --idle-scale: {index === activeIndex ? 1 : 0.74};"
+                                    onclick={() => avail === "available" && activate(item, index)}
+                                    role={index === activeIndex ? undefined : "button"}
+                                    aria-hidden={index !== activeIndex}
+                                    tabindex="-1"
+                                >
+                                    {#if item.artwork}
+                                        <img class="cover" src={item.artwork} alt="" draggable="false" />
+                                    {:else}
+                                        <div class="cover cover-fallback"></div>
+                                    {/if}
+                                    {#if index === activeIndex && playing}
+                                        <div class="eq" aria-hidden="true"><i></i><i></i><i></i></div>
+                                    {/if}
+                                    {#if index !== activeIndex}
+                                        <div class="cap">{item.title}</div>
+                                    {/if}
+                                    {#if avail !== "available"}
+                                        <div class="flag">
+                                            {avail === "unreleased" ? "Not released yet" : "No preview from any source"}
+                                        </div>
+                                    {/if}
+                                </div>
+                            {/each}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="m-foot">
+                <span class="src-chip"><span class="src-dot"></span>Deezer preview</span>
+                <span class="rail" aria-hidden="true">
+                    {#each items as item, i (item.sessionKey)}
+                        <i
+                            class:done={playable.includes(i) && activeIndex != null && i < activeIndex}
+                            class:now={i === activeIndex}
+                            class:gone={!playable.includes(i)}
+                        ></i>
+                    {/each}
+                </span>
+                <span class="m-pos">
+                    {cursor != null ? `${cursor + 1} of ${playable.length}` : `unavailable · ${(activeIndex ?? 0) + 1} of ${items.length}`}
+                    {#if unavailableCount > 0}&nbsp;· {unavailableCount} unavailable{/if}
+                </span>
+            </div>
+        {/if}
+
+        <div class="sr-announce" aria-live="polite">{announce}</div>
+    </div>
+{/if}
+
+<style>
+    .scrim {
+        position: fixed;
+        inset: 0;
+        z-index: 60;
+        background: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(2px);
+        -webkit-backdrop-filter: blur(2px);
+    }
+
+    .modal {
+        position: fixed;
+        inset: 26px;
+        z-index: 61;
+        border-radius: 14px;
+        overflow: hidden;
+        background: var(--bg-elevated);
+        box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        font-family: var(--app-font);
+    }
+
+    /* Twin glow (revised): wide dim bleed of the active cover, crossfading
+       across two slots, under a single 90° scrim. Panel-scoped. */
+    .bg {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        overflow: hidden;
+        pointer-events: none;
+    }
+    .bleed {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        opacity: 0;
+        transition: opacity 0.42s ease;
+        filter: blur(70px) saturate(1.2) brightness(0.82);
+        transform: scale(1.25);
+    }
+    .bleed.show {
+        opacity: 0.88;
+    }
+    .scrim-x {
+        position: absolute;
+        inset: 0;
+        background:
+            linear-gradient(90deg, rgba(8, 8, 10, 0.9) 30%, rgba(8, 8, 10, 0.42) 100%),
+            linear-gradient(180deg, transparent 74%, rgba(8, 8, 10, 0.55));
+    }
+    .modal > :not(.bg) {
+        position: relative;
+        z-index: 1;
+    }
+
+    /* ------------------------------------------------------------ chrome */
+    .m-top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px 20px 0;
+    }
+    .m-context {
+        font-size: 13.5px;
+        font-weight: 800;
+    }
+    .m-context span {
+        color: var(--text-secondary);
+        font-weight: 600;
+    }
+    .m-tools {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        color: var(--text-secondary);
+    }
+    .m-tools button {
+        padding: 7px;
+        border-radius: 6px;
+        background: none;
+        border: 0;
+        color: inherit;
+        cursor: pointer;
+    }
+    .m-tools button:hover {
+        color: #fff;
+        background: rgba(255, 255, 255, 0.08);
+    }
+    .m-tools button.on {
+        color: var(--pv-accent);
+    }
+
+    .m-empty {
+        display: grid;
+        place-items: center;
+        font-size: 14px;
+        color: var(--text-secondary);
+    }
+
+    .focus-wait {
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--text-secondary);
+        margin-bottom: 10px;
+    }
+
+    .m-error {
+        margin-top: 10px;
+        font-size: 12.5px;
+        color: var(--text-secondary);
+    }
+    .m-error .retry {
+        margin-left: 8px;
+        border: 1px solid #6a6a6a;
+        border-radius: 999px;
+        padding: 3px 12px;
+        font-size: 12px;
+        color: #fff;
+        background: none;
+        cursor: pointer;
+    }
+
+    /* -------------------------------------------------------------- body */
+    .m-body {
+        display: grid;
+        grid-template-columns: minmax(300px, 500px) auto;
+        justify-content: center;
+        gap: 36px;
+        padding: 0 20px;
+        min-height: 0;
+    }
+    .m-left {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-width: 0;
+    }
+
+    /* Fixed two-line title slot, BOTTOM-aligned: a one-line title sits against
+       the artist row instead of floating a line above it. */
+    .title-slot {
+        height: 82px;
+        display: flex;
+        align-items: flex-end;
+        margin-bottom: 8px;
+    }
+    .m-title {
+        font-size: 38px;
+        font-weight: 800;
+        line-height: 1.08;
+        letter-spacing: -0.8px;
+        margin: 0;
+        text-wrap: balance;
+        max-height: calc(2 * 1.08em);
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
+    .m-artists {
+        font-size: 15px;
+        font-weight: 600;
+        color: var(--text-secondary);
+        height: 1.4em;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    .m-album {
+        font-size: 13px;
+        color: var(--text-muted);
+        margin-top: 4px;
+        height: 1.4em;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    /* T3 directional swaps */
+    @keyframes t-out-up { to { opacity: 0; transform: translateY(-9px); } }
+    @keyframes t-in-up { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: none; } }
+    @keyframes t-out-down { to { opacity: 0; transform: translateY(9px); } }
+    @keyframes t-in-down { from { opacity: 0; transform: translateY(-11px); } to { opacity: 1; transform: none; } }
+    .m-left :global(.swap-out-up) { animation: t-out-up 0.16s ease forwards; }
+    .m-left :global(.swap-out-down) { animation: t-out-down 0.16s ease forwards; }
+    .m-left :global(.swap-in-up) { animation: t-in-up 0.26s cubic-bezier(0.22, 0.9, 0.28, 1) both; }
+    .m-left :global(.swap-in-down) { animation: t-in-down 0.26s cubic-bezier(0.22, 0.9, 0.28, 1) both; }
+
+    /* ---------------------------------------------------------- scrubber */
+    .m-clip {
+        display: flex;
+        align-items: center;
+        gap: 11px;
+        margin-top: 28px;
+        /* Spans the same width as the control row beneath it. */
+        max-width: 472px;
+    }
+    .m-wave {
+        flex: 1;
+        height: 44px;
+        cursor: pointer;
+        position: relative;
+    }
+    .m-wave canvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+    .m-time {
+        font-size: 11px;
+        color: var(--text-secondary);
+        font-variant-numeric: tabular-nums;
+    }
+
+    /* --------------------------------------------------------- transport */
+    .m-transport {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-top: 16px;
+    }
+    .m-transport button {
+        background: none;
+        border: 0;
+        color: inherit;
+        cursor: pointer;
+        font-family: inherit;
+    }
+    .m-play {
+        width: 46px;
+        height: 46px;
+        border-radius: 50%;
+        background: var(--pv-accent);
+        color: #000;
+        display: grid;
+        place-items: center;
+        transition: background 0.35s ease;
+        flex: none;
+    }
+    .m-play:hover {
+        transform: scale(1.05);
+    }
+    .m-step {
+        color: var(--text-secondary);
+        padding: 8px;
+        border-radius: 6px;
+    }
+    .m-step:hover:not(:disabled) {
+        color: #fff;
+        background: rgba(255, 255, 255, 0.08);
+    }
+    .m-step:disabled {
+        opacity: 0.3;
+        cursor: default;
+    }
+    .t-sep {
+        width: 1px;
+        height: 22px;
+        background: rgba(255, 255, 255, 0.14);
+        margin: 0 4px;
+        flex: none;
+    }
+    /* P2 ghost pill: the one labelled control — the action that LEAVES
+       preview mode. The row keeps exactly one solid accent control. */
+    .full {
+        display: inline-flex;
+        align-items: center;
+        gap: 7px;
+        height: 36px;
+        padding: 0 15px;
+        flex: none;
+        border: 1px solid color-mix(in srgb, var(--pv-accent) 65%, transparent) !important;
+        border-radius: 18px;
+        color: #fff;
+        font-size: 12.5px;
+        font-weight: 800;
+        white-space: nowrap;
+        transition: border-color 0.35s ease, background 0.2s ease;
+    }
+    .full svg {
+        color: var(--pv-accent);
+        transition: color 0.35s ease;
+    }
+    .full:hover:not(:disabled) {
+        border-color: var(--pv-accent) !important;
+        background: color-mix(in srgb, var(--pv-accent) 14%, transparent);
+    }
+    .full:disabled {
+        opacity: 0.45;
+        cursor: default;
+    }
+    .act {
+        color: var(--text-secondary);
+        padding: 8px;
+        border-radius: 8px;
+    }
+    .act:hover:not(:disabled) {
+        color: #fff;
+        background: rgba(255, 255, 255, 0.08);
+    }
+    .act:disabled {
+        opacity: 0.4;
+        cursor: default;
+    }
+
+    /* --------------------------------------------------------------- reel */
+    .reel-col {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 0;
+        height: 100%;
+    }
+    .reel {
+        /* Single source of geometry: everything below is calc() off these. */
+        --cover: clamp(190px, 34vh, 340px);
+        --gap: 30px;
+        --stride: calc(var(--cover) + var(--gap));
+        --bleed-room: 70px;
+        position: relative;
+        overflow: hidden;
+        width: calc(var(--cover) + var(--bleed-room) * 2);
+        height: 100%;
+        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
+        mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
+    }
+    .reel-track {
+        position: absolute;
+        z-index: 1;
+        left: 50%;
+        top: 50%;
+        width: var(--cover);
+        will-change: transform;
+        /* translateY is set inline from JS (measured stride × active index);
+           translateX(-50%) here centres the track's own width. */
+        transform: translateX(-50%);
+        transition: transform 340ms cubic-bezier(0.26, 1.28, 0.6, 1);
+    }
+
+    /* Artwork bloom (B2): a blurred copy of the active cover, box-feathered
+       by two crossed linear gradients intersected — a radial mask can only
+       ever make a disc. no-repeat stops the gradient tiling into blur spill. */
+    .cover-glow {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        z-index: 0;
+        --glow-w: calc(var(--cover) + var(--bleed-room) * 2);
+        width: var(--glow-w);
+        height: var(--glow-w);
+        margin: calc(var(--glow-w) / -2) 0 0 calc(var(--glow-w) / -2);
+        object-fit: cover;
+        pointer-events: none;
+        filter: blur(48px) saturate(1.3);
+        --glow-fade: transparent 0%, rgba(0, 0, 0, 0.18) 10%, rgba(0, 0, 0, 0.5) 19%,
+            rgba(0, 0, 0, 0.82) 27%, #000 36%, #000 64%, rgba(0, 0, 0, 0.82) 73%,
+            rgba(0, 0, 0, 0.5) 81%, rgba(0, 0, 0, 0.18) 90%, transparent 100%;
+        -webkit-mask-image: linear-gradient(90deg, var(--glow-fade)), linear-gradient(180deg, var(--glow-fade));
+        mask-image: linear-gradient(90deg, var(--glow-fade)), linear-gradient(180deg, var(--glow-fade));
+        -webkit-mask-composite: source-in;
+        mask-composite: intersect;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        opacity: 0.55;
+        transition: opacity 0.42s ease;
+    }
+    @keyframes halo-breathe {
+        0%, 100% { opacity: 0.4; }
+        50% { opacity: 0.6; }
+    }
+    .modal.is-playing .cover-glow {
+        animation: halo-breathe 3.8s ease-in-out infinite;
+    }
+
+    .card {
+        position: absolute;
+        left: 0;
+        /* top set inline from JS (index × measured stride) */
+        width: var(--cover);
+        height: var(--cover);
+        border-radius: 8px;
+        overflow: hidden;
+        cursor: pointer;
+        opacity: 0.38;
+        filter: brightness(0.58);
+        /* Centred on the card's own `top` line, then scaled. Scale is visual
+           only — the layout stride the virtualizer uses is the untransformed
+           box, so idle covers at 74% cannot perturb centring. */
+        transform: translateY(-50%) scale(var(--idle-scale, 0.74));
+        transition:
+            transform 340ms cubic-bezier(0.26, 1.28, 0.6, 1),
+            opacity 0.3s ease,
+            filter 0.3s ease,
+            box-shadow 0.3s ease;
+    }
+    .card:not(.active):hover {
+        opacity: 0.62;
+        filter: brightness(0.78);
+    }
+    /* Edge treatment J: ring + lift; the bloom is the artwork copy behind. */
+    .card.active {
+        opacity: 1;
+        filter: none;
+        cursor: default;
+        box-shadow:
+            0 0 0 1px rgba(255, 255, 255, 0.14),
+            0 24px 56px -30px rgba(0, 0, 0, 0.75);
+    }
+    /* Bump −50%: arrival grows from the idle scale through 1.035 to rest.
+       translateY(-50%) is preserved through the keyframe so the card stays
+       centred while it scales. */
+    @keyframes cover-bump {
+        0% { transform: translateY(-50%) scale(0.74); }
+        58% { transform: translateY(-50%) scale(1.035); }
+        100% { transform: translateY(-50%) scale(1); }
+    }
+    .card.active.hit {
+        animation: cover-bump 360ms cubic-bezier(0.26, 1.28, 0.6, 1);
+    }
+    .card .cover {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+    .cover-fallback {
+        background: var(--bg-highlight);
+    }
+    .card .cap {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        padding: 10px 12px;
+        font-size: 12.5px;
+        font-weight: 700;
+        background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent);
+        opacity: 0;
+        transition: opacity 0.18s ease;
+    }
+    .card:not(.active):hover .cap {
+        opacity: 1;
+    }
+    .card.gone .cover {
+        filter: grayscale(1) brightness(0.42);
+    }
+    .card .flag {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        padding: 20px;
+        text-align: center;
+        background: rgba(10, 10, 10, 0.55);
+        font-size: 12.5px;
+        font-weight: 700;
+        color: var(--text-secondary);
+    }
+
+    /* R1b accent-glass capsule: the one literal "playing" mark on the art. */
+    .eq {
+        position: absolute;
+        z-index: 2;
+        top: 8px;
+        left: 8px;
+        height: 22px;
+        padding: 0 8px;
+        border-radius: 11px;
+        display: flex;
+        align-items: center;
+        gap: 2.5px;
+        background: color-mix(in srgb, var(--pv-accent) 42%, rgba(16, 16, 20, 0.3));
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+        transition: background 0.35s ease;
+    }
+    .eq i {
+        width: 2.5px;
+        height: 5px;
+        background: #fff;
+        border-radius: 1.5px;
+        animation: eq 0.9s ease-in-out infinite;
+    }
+    .eq i:nth-child(2) { animation-delay: 0.15s; }
+    .eq i:nth-child(3) { animation-delay: 0.3s; }
+    @keyframes eq {
+        0%, 100% { height: 4px; }
+        50% { height: 12px; }
+    }
+
+    /* --------------------------------------------------------------- foot */
+    .m-foot {
+        display: flex;
+        align-items: center;
+        gap: 18px;
+        padding: 14px 20px 16px 40px;
+        font-size: 12px;
+        color: var(--text-muted);
+    }
+    .src-chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 7px;
+        height: 24px;
+        padding: 0 11px;
+        flex: none;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 12px;
+        background: rgba(255, 255, 255, 0.05);
+        color: rgba(255, 255, 255, 0.78);
+        font-size: 11px;
+        font-weight: 700;
+        white-space: nowrap;
+    }
+    .src-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--pv-accent);
+        transition: background 0.35s ease;
+    }
+    /* F3 collection rail: one segment per manifest entry. */
+    .rail {
+        display: flex;
+        align-items: center;
+        gap: 3px;
+        flex: 1;
+        min-width: 0;
+    }
+    .rail i {
+        flex: 1;
+        height: 3px;
+        border-radius: 2px;
+        background: rgba(255, 255, 255, 0.16);
+        transition: background 0.25s ease, height 0.25s ease;
+    }
+    .rail i.done { background: rgba(255, 255, 255, 0.34); }
+    .rail i.now { background: var(--pv-accent); height: 5px; }
+    .rail i.gone { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
+    .m-pos {
+        font-variant-numeric: tabular-nums;
+        flex: none;
+    }
+
+    .sr-announce {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+    }
+
+    /* ---------------------------------------------------------- narrow ---- */
+    @media (max-width: 1000px) {
+        .m-body {
+            grid-template-columns: minmax(0, 1fr);
+            grid-template-rows: minmax(0, 1fr) auto;
+            justify-items: center;
+            align-content: center;
+            gap: 16px;
+        }
+        .reel-col { grid-row: 1; min-height: 0; }
+        .m-left { grid-row: 2; align-items: center; text-align: center; }
+        .m-clip { width: 100%; max-width: 320px; }
+        .m-transport { justify-content: center; flex-wrap: wrap; }
+        .m-title { font-size: 27px; }
+        .title-slot { height: 59px; }
+        .m-foot {
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 4px 14px;
+            text-align: center;
+            padding: 10px 16px 12px;
+        }
+    }
+
+    /* --------------------------------------------------- reduced motion --- */
+    @media (prefers-reduced-motion: reduce) {
+        .reel-track { transition: none; }
+        .card { transition: opacity 0.3s ease, filter 0.3s ease; }
+        .card.active.hit { animation: none; }
+        .modal.is-playing .cover-glow { animation: none; }
+        .eq i { animation: none; height: 8px; }
+        .m-left :global(.swap-out-up),
+        .m-left :global(.swap-out-down),
+        .m-left :global(.swap-in-up),
+        .m-left :global(.swap-in-down) {
+            animation: none;
+        }
+    }
+</style>
diff --git a/src/lib/api.js b/src/lib/api.js
index d09ba64..02a0c90 100644
--- a/src/lib/api.js
+++ b/src/lib/api.js
@@ -146,18 +146,35 @@ export const previewDispose = () => invoke("preview_dispose");
 export const playerPauseAcked = () => invoke("player_pause_acked");
 
 // Window chrome (the app draws its own titlebar; decorations are off).
+// Guarded like onEvent below: getCurrentWindow() THROWS outside Tauri, and
+// it runs at mount via initWindowActivity — un-guarded it made every plain
+// `vite` browser load a blank page, which also blocked browser-side preview
+// fixtures. In-Tauri behavior is unchanged.
 import { getCurrentWindow } from "@tauri-apps/api/window";
-export const win = {
-    minimize: () => getCurrentWindow().minimize(),
-    toggleMaximize: () => getCurrentWindow().toggleMaximize(),
-    close: () => getCurrentWindow().close(),
-    isMinimized: () => getCurrentWindow().isMinimized(),
-    isFocused: () => getCurrentWindow().isFocused(),
-    isMaximized: () => getCurrentWindow().isMaximized(),
-    // returns Promise<unlisten>
-    onResized: (handler) => getCurrentWindow().onResized(handler),
-    onFocusChanged: (handler) => getCurrentWindow().onFocusChanged(handler),
+const inTauri = typeof window !== "undefined" && "__TAURI_INTERNALS__" in window;
+const noWin = {
+    minimize: () => {},
+    toggleMaximize: () => {},
+    close: () => {},
+    isMinimized: async () => false,
+    isFocused: async () => true,
+    isMaximized: async () => false,
+    onResized: async () => () => {},
+    onFocusChanged: async () => () => {},
 };
+export const win = !inTauri
+    ? noWin
+    : {
+          minimize: () => getCurrentWindow().minimize(),
+          toggleMaximize: () => getCurrentWindow().toggleMaximize(),
+          close: () => getCurrentWindow().close(),
+          isMinimized: () => getCurrentWindow().isMinimized(),
+          isFocused: () => getCurrentWindow().isFocused(),
+          isMaximized: () => getCurrentWindow().isMaximized(),
+          // returns Promise<unlisten>
+          onResized: (handler) => getCurrentWindow().onResized(handler),
+          onFocusChanged: (handler) => getCurrentWindow().onFocusChanged(handler),
+      };
 
 // Subscribe to a backend event; returns an unlisten function.
 // No-ops outside Tauri (e.g. plain-browser preview).
diff --git a/src/lib/color.js b/src/lib/color.js
index a3cbc9f..42f6dc7 100644
--- a/src/lib/color.js
+++ b/src/lib/color.js
@@ -51,6 +51,11 @@ function hslToRgb(h, s, l) {
  */
 export async function accentFromImage(dataUrl) {
     const img = new Image();
+    // Remote covers (the preview modal samples dzcdn URLs directly) need the
+    // CORS opt-in or getImageData throws on a tainted canvas and every such
+    // cover silently falls back to silver. Ignored for data: URLs, so the
+    // player-bar path is unchanged.
+    img.crossOrigin = "anonymous";
     img.src = dataUrl;
     try {
         await img.decode();
diff --git a/src/lib/preview/previewSession.svelte.js b/src/lib/preview/previewSession.svelte.js
new file mode 100644
index 0000000..eb4c3b6
--- /dev/null
+++ b/src/lib/preview/previewSession.svelte.js
@@ -0,0 +1,173 @@
+// Svelte-side preview session: one store, one service instance, and the
+// production wiring (resolver → Tauri, transport → native player, focus →
+// main player). state.svelte.js hands us its player accessors at init
+// (dependency injection, deliberately: this module must not import the
+// 4000-line state module, and the state module needs to import US for
+// gateway bumps — injection breaks what would otherwise be a cycle).
+
+import { createPreviewService } from "./service.js";
+import { createProductionResolver } from "./productionResolver.js";
+import { createNativeTransport } from "./nativeTransport.js";
+import { createProductionFocus } from "./focusBridge.js";
+import { createFixtureResolver } from "./resolver.js";
+import { createFixtureTransport } from "./transport.js";
+import { buildFixtureManifest } from "./manifest.js";
+import { AVAILABILITY } from "./contracts.js";
+
+/** Reactive mirror of the session for components. `snapshot` is the frozen
+ * reducer state; everything else is presentation-level. */
+export const previewUi = $state({
+    open: false,
+    snapshot: null,
+    focusWaiting: false,
+    /** element to restore focus to when the modal closes */
+    returnFocusTo: null,
+    /** page-supplied "play this item as a full track" starter */
+    playFull: null,
+});
+
+let service = null;
+let unsubscribe = null;
+let focusParts = null; // { coordinator, gateway }
+let demoTicker = null;
+
+// ------------------------------------------------------------- gateway ----
+
+/** Bump the main-player revision gateway from state.svelte.js. A no-op
+ * until the bridge is initialised, and a no-op for unknown kinds — the
+ * caller sites stay one-liners. */
+export function bumpMainRevision(kind, opts) {
+    const g = focusParts?.gateway;
+    if (g && typeof g[kind] === "function") g[kind](opts);
+}
+
+let playbackGeneration = 0;
+/** Called by state.svelte.js on every main "buffering" — each new decode is
+ * a new renderer-side playback generation (the focusBridge invariant). */
+export function notePlaybackGeneration() {
+    playbackGeneration += 1;
+}
+
+/** One-time wiring from state.svelte.js. */
+export function initPreviewBridge({ readPlayer, resumeMain }) {
+    focusParts = createProductionFocus({
+        readPlayer,
+        readPlaybackGeneration: () => playbackGeneration,
+        resumeMain,
+    });
+}
+
+// -------------------------------------------------------------- session ---
+
+function attach(svc) {
+    service = svc;
+    unsubscribe = svc.subscribe((snapshot, extras) => {
+        previewUi.snapshot = snapshot;
+        previewUi.focusWaiting = extras.focusWaiting;
+    });
+}
+
+/** Open a preview session over the production stack. `manifest` comes from
+ * a page adapter (artist page in Phase 3). */
+export async function openPreview(manifest, { playFull } = {}) {
+    if (!focusParts) throw new Error("preview bridge not initialised");
+    await closePreview(); // one session at a time, always torn down first
+    previewUi.returnFocusTo = document.activeElement;
+    previewUi.playFull = playFull ?? null;
+    attach(
+        createPreviewService({
+            resolver: createProductionResolver(),
+            transportFactory: (dispatch) => createNativeTransport(dispatch),
+            focus: focusParts,
+        })
+    );
+    previewUi.open = true;
+    await service.open({ sessionId: crypto.randomUUID(), manifest });
+}
+
+/**
+ * Dev/browser fixture session: deterministic resolver + a fixture transport
+ * driven by a wall-clock ticker, no Tauri and no audio. This is what the
+ * Phase 2 exit gate's 500-item responsiveness check runs against, and what
+ * a plain `vite` browser shows.
+ */
+export async function openPreviewFixture(count = 12) {
+    await closePreview();
+    previewUi.returnFocusTo = document.activeElement;
+    const rows = Array.from({ length: count }, (_, i) => ({
+        providerTrackId: String(i + 1),
+        title: `Fixture track ${i + 1}`,
+        artists: ["Fixture Artist"],
+        album: `Fixture Album ${1 + (i % 7)}`,
+        fullDurationMs: 180_000 + (i % 9) * 21_000,
+        initialAvailability: i % 11 === 5 ? AVAILABILITY.NOT_PROVIDED : AVAILABILITY.AVAILABLE,
+    }));
+    const manifest = buildFixtureManifest({
+        kind: "collection",
+        contextKey: `fixture:${count}`,
+        title: `Fixture · ${count} tracks`,
+        rows,
+        createdAtMs: Date.now(),
+    });
+    const plan = {};
+    for (let i = 1; i <= count; i++) plan[i] = { opaqueLeaseId: `fx-${i}` };
+
+    let transport = null;
+    const focus = {
+        coordinator: {
+            async acquirePreview() {
+                return { granted: true, token: { id: "fixture", pausedByPreview: false } };
+            },
+            release: () => ({ restored: false, reason: "fixture" }),
+            handoffToMain: () => ({ restored: false, reason: "fixture" }),
+        },
+    };
+    attach(
+        createPreviewService({
+            resolver: createFixtureResolver(plan),
+            transportFactory: (dispatch) => {
+                transport = createFixtureTransport(dispatch);
+                return transport;
+            },
+            focus,
+        })
+    );
+    // Drive the fixture transport at ~10 fps so progress/auto-advance behave
+    // like real playback in the browser.
+    demoTicker = setInterval(() => transport?.tick(100), 100);
+    previewUi.open = true;
+    await service.open({ sessionId: crypto.randomUUID(), manifest });
+}
+
+export async function closePreview() {
+    if (demoTicker) {
+        clearInterval(demoTicker);
+        demoTicker = null;
+    }
+    if (!service) return { restored: false };
+    const out = await service.close();
+    unsubscribe?.();
+    unsubscribe = null;
+    service = null;
+    previewUi.open = false;
+    previewUi.snapshot = null;
+    previewUi.focusWaiting = false;
+    previewUi.playFull = null;
+    const back = previewUi.returnFocusTo;
+    previewUi.returnFocusTo = null;
+    if (back && typeof back.focus === "function" && back.isConnected) {
+        back.focus();
+    }
+    return out;
+}
+
+// Thin command pass-throughs for the overlay component.
+export const previewCommands = {
+    step: (dir) => service?.step(dir),
+    activateKey: (k) => service?.activateKey(k),
+    togglePlay: () => service?.togglePlay(),
+    replay: () => service?.replay(),
+    seek: (ms) => service?.seek(ms),
+    setMuted: (v) => service?.setMuted(v),
+    playFullTrack: (starter) => service?.playFullTrack(starter),
+};
diff --git a/src/lib/state.svelte.js b/src/lib/state.svelte.js
index a33eb47..b59d574 100644
--- a/src/lib/state.svelte.js
+++ b/src/lib/state.svelte.js
@@ -1,6 +1,11 @@
 // Shared reactive app state (Svelte 5 runes module).
 import * as api from "./api.js";
 import { accentFromImage, hexToRgb, rgbToHex, lerpRgb } from "./color.js";
+import {
+    initPreviewBridge,
+    bumpMainRevision,
+    notePlaybackGeneration,
+} from "./preview/previewSession.svelte.js";
 
 export const app = $state({
     connection: "offline", // offline | connecting | online
@@ -3554,6 +3559,17 @@ export function initEvents() {
     if (started) return;
     started = true;
     initWindowActivity();
+    // Preview audio-focus bridge (scrollable-track-previews). Injected here
+    // rather than imported there: this module owns the player store, and the
+    // preview module must stay import-cycle-free. resumeMain goes straight to
+    // api — NOT through any wrapper that bumps the revision gateway, because
+    // a focus-internal resume must not invalidate its own token.
+    initPreviewBridge({
+        readPlayer: () => player,
+        resumeMain: () => {
+            api.playerControl("resume");
+        },
+    });
 
     // The `connected` event fires once, at login. A WebView reload (dev
     // iteration, crash recovery) lands AFTER it, so the fresh frontend
@@ -3620,6 +3636,19 @@ export function initEvents() {
     });
 
     api.onEvent("soulseek:player", (ev) => {
+        // Revision-gateway bumps at the ONE choke point every native source
+        // change flows through. Each new decode ("buffering") is a new
+        // playback generation for the focus bridge; track-ended is the
+        // auto-advance revision. A pause caused by the focus coordinator
+        // emits "paused", which deliberately bumps nothing.
+        if (ev.kind === "buffering") {
+            notePlaybackGeneration();
+            bumpMainRevision("nativeSourceChange");
+        } else if (ev.kind === "track-ended") {
+            bumpMainRevision("autoAdvance");
+        } else if (ev.kind === "stopped") {
+            bumpMainRevision("userStop");
+        }
         switch (ev.kind) {
             case "buffering":
                 player.status = "buffering";
@@ -3835,6 +3864,7 @@ export async function streamFile(username, file, subLabel) {
 
 /** Play a finished download from disk (single track). */
 export async function playLocalFile(path, title, subLabel, artPath = null) {
+    bumpMainRevision("userPlay");
     autoAlbum = null;
     player.queue = [{ path, title, sub: subLabel ?? "", duration: null, art: artPath, quality: localQuality({ path }) }];
     player.queueIndex = 0;
@@ -3867,6 +3897,10 @@ export function playAlbum(tracks, subLabel, start = 0, artPath = null) {
 function playQueueIndex(i) {
     const item = player.queue[i];
     if (!item) return;
+    // Every queue start is a user-command + queue + playback revision for the
+    // preview focus gateway (auto-advance re-enters here too — that bump is
+    // correct: a restore must never resurrect a track the queue moved past).
+    bumpMainRevision("queueJumpOrNextPrev");
     player.queueIndex = i;
     player.track = {
         title: item.title,
diff --git a/src/views/CatalogArtist.svelte b/src/views/CatalogArtist.svelte
index 9697e6f..5a81919 100644
--- a/src/views/CatalogArtist.svelte
+++ b/src/views/CatalogArtist.svelte
@@ -33,6 +33,8 @@
     } from "../lib/state.svelte.js";
     import * as api from "../lib/api.js";
     import { accentFromImage } from "../lib/color.js";
+    import { buildArtistManifest } from "../lib/preview/manifest.js";
+    import { openPreview } from "../lib/preview/previewSession.svelte.js";
     import { traceToSvg, svgDataUrl } from "../lib/trace.js";
     import Icon from "../components/Icon.svelte";
     import HeroGpuCanvas from "../components/HeroGpuCanvas.svelte";
@@ -537,8 +539,6 @@
     // state cannot occur here: the whole action row is gated on
     // popularTracks.length, so by the time this control exists the tracks (and
     // therefore their preview fields) have landed.
-    // TODO(previews): openPreviews() opens the scrollable preview modal —
-    // TODO-Feature-Docs/scrollable-track-previews. Placement-only for now.
     const previewableCount = $derived(allPopular.filter((track) => track.preview).length);
     const previewState = $derived(
         previewableCount === 0
@@ -554,7 +554,31 @@
               ? `Preview tracks — ${previewableCount} of ${allPopular.length} available`
               : "Preview tracks",
     );
-    function openPreviews() {}
+    /** Open the preview modal over the COMPLETE ranked top-track payload —
+     * never just the rendered rows (design §13, artist adapter). The manifest
+     * is a snapshot: later staged-page rebuilds cannot rewrite an open
+     * session. Play-full hands the active item to the ordinary resolver
+     * pipeline via the same path the Popular rows use. */
+    function openPreviews() {
+        if (!page?.popular_tracks?.length) return;
+        const snapshotTracks = page.popular_tracks.slice(0, 10);
+        const byProviderId = new Map(snapshotTracks.map((t) => [String(t.id), t]));
+        const manifest = buildArtistManifest({
+            artist: {
+                id: page.artist.id,
+                name: page.artist.name,
+                picture: page.artist.picture ?? null,
+            },
+            popularTracks: snapshotTracks,
+            createdAtMs: Date.now(),
+        });
+        void openPreview(manifest, {
+            playFull: (item) => {
+                const track = byProviderId.get(item.sources[0]?.providerTrackId);
+                if (track) playPopular(track);
+            },
+        });
+    }
 
     // Instant-shell seed: the search portrait the user clicked, shown as a
     // heavily-blurred colour field behind the hero until the real photo