diff --git a/crates/library/src/lib.rs b/crates/library/src/lib.rs
index 858beab..c55b310 100644
--- a/crates/library/src/lib.rs
+++ b/crates/library/src/lib.rs
@@ -58,6 +58,25 @@ pub struct PlaylistTrack {
     pub art_path: Option<String>,
 }
 
+/// Per-album aggregates of what the files carry — the Library page's numbers.
+/// Everything here is derived from the tracks table plus the plays table;
+/// nothing is stored, so a rescan or a new play is reflected on the next call.
+#[derive(Debug, Clone, Serialize)]
+pub struct AlbumStats {
+    pub album_id: i64,
+    /// Total running time of the album's tracks, seconds.
+    pub secs: i64,
+    /// Total size on disk, bytes.
+    pub bytes: i64,
+    pub avg_kbps: Option<u32>,
+    pub bit_depth: Option<u32>,
+    pub sample_rate: Option<u32>,
+    /// File extensions present, dominant first ("flac", "mp3", ...).
+    pub formats: Vec<String>,
+    /// Newest play that met the caller's seconds floor. None = never played.
+    pub last_played_at: Option<i64>,
+}
+
 /// One followed artist. Name and portrait are stored alongside the id so the
 /// future home page can render "artists you follow" without paying a catalog
 /// request per artist — the row alone is enough to draw a card.
@@ -579,6 +598,116 @@ impl Library {
         Ok(rows.filter_map(|r| r.ok()).collect())
     }
 
+    /// Per-album aggregates for the Library page: what the FILES add up to.
+    /// One call for the whole library, because the page derives its stat row,
+    /// its Format grouping and four of its sorts (length, size, bitrate,
+    /// format) from these — asking per album would be N invokes on open.
+    ///
+    /// `min_secs` is the same play floor the recents list uses (the frontend
+    /// passes its RECENTS_FLOOR_SECS): under it a play is a skip, and a page
+    /// that sorts by "never played first" must not count skips as listening.
+    pub fn album_stats(&self, min_secs: u32) -> Result<Vec<AlbumStats>> {
+        let conn = self.conn.lock().unwrap();
+        // Aggregate in Rust off one pass over tracks rather than in SQL:
+        // the dominant FORMAT needs the path's extension counted per album,
+        // which SQLite cannot do without string gymnastics, and a library is
+        // a few thousand rows — one iteration is nothing.
+        let mut stmt = conn.prepare(
+            "SELECT album_id, duration_secs, size, bitrate_kbps, bit_depth, sample_rate, path
+             FROM tracks",
+        )?;
+        struct Acc {
+            secs: i64,
+            bytes: i64,
+            kbps_sum: i64,
+            kbps_n: i64,
+            depth: Option<u32>,
+            rate: Option<u32>,
+            exts: Vec<(String, u32)>,
+        }
+        let mut by_album: std::collections::HashMap<i64, Acc> = std::collections::HashMap::new();
+        let rows = stmt.query_map([], |r| {
+            Ok((
+                r.get::<_, i64>(0)?,
+                r.get::<_, Option<i64>>(1)?,
+                r.get::<_, Option<i64>>(2)?,
+                r.get::<_, Option<i64>>(3)?,
+                r.get::<_, Option<u32>>(4)?,
+                r.get::<_, Option<u32>>(5)?,
+                r.get::<_, String>(6)?,
+            ))
+        })?;
+        for row in rows {
+            let Ok((album_id, secs, size, kbps, depth, rate, path)) = row else { continue };
+            let acc = by_album.entry(album_id).or_insert(Acc {
+                secs: 0,
+                bytes: 0,
+                kbps_sum: 0,
+                kbps_n: 0,
+                depth: None,
+                rate: None,
+                exts: Vec::new(),
+            });
+            acc.secs += secs.unwrap_or(0);
+            acc.bytes += size.unwrap_or(0);
+            if let Some(k) = kbps {
+                acc.kbps_sum += k;
+                acc.kbps_n += 1;
+            }
+            acc.depth = acc.depth.max(depth);
+            acc.rate = acc.rate.max(rate);
+            let ext = std::path::Path::new(&path)
+                .extension()
+                .and_then(|e| e.to_str())
+                .unwrap_or("")
+                .to_ascii_lowercase();
+            if !ext.is_empty() {
+                match acc.exts.iter_mut().find(|(e, _)| *e == ext) {
+                    Some((_, n)) => *n += 1,
+                    None => acc.exts.push((ext, 1)),
+                }
+            }
+        }
+        // Newest qualifying play per album. Exact album_id anchor only — a play
+        // written before the album_id column existed simply does not count,
+        // exactly as the recents list treats it.
+        let mut plays = conn.prepare(
+            "SELECT album_id, MAX(started_at) FROM plays
+             WHERE album_id IS NOT NULL AND seconds >= ?1
+             GROUP BY album_id",
+        )?;
+        let mut last_played: std::collections::HashMap<i64, i64> = std::collections::HashMap::new();
+        let play_rows = plays.query_map([min_secs], |r| {
+            Ok((r.get::<_, i64>(0)?, r.get::<_, i64>(1)?))
+        })?;
+        for row in play_rows {
+            if let Ok((id, at)) = row {
+                last_played.insert(id, at);
+            }
+        }
+        Ok(by_album
+            .into_iter()
+            .map(|(album_id, mut acc)| {
+                // Dominant format first, so `formats[0]` is the album's chip.
+                acc.exts.sort_by(|a, b| b.1.cmp(&a.1).then_with(|| a.0.cmp(&b.0)));
+                AlbumStats {
+                    album_id,
+                    secs: acc.secs,
+                    bytes: acc.bytes,
+                    avg_kbps: if acc.kbps_n > 0 {
+                        Some((acc.kbps_sum / acc.kbps_n) as u32)
+                    } else {
+                        None
+                    },
+                    bit_depth: acc.depth,
+                    sample_rate: acc.rate,
+                    formats: acc.exts.into_iter().map(|(e, _)| e).collect(),
+                    last_played_at: last_played.get(&album_id).copied(),
+                }
+            })
+            .collect())
+    }
+
     pub fn album_tracks(&self, album_id: i64) -> Result<Vec<Track>> {
         let conn = self.conn.lock().unwrap();
         let mut stmt = conn.prepare(
diff --git a/src-tauri/src/commands.rs b/src-tauri/src/commands.rs
index 32f5fcb..ec8a11f 100644
--- a/src-tauri/src/commands.rs
+++ b/src-tauri/src/commands.rs
@@ -3997,6 +3997,22 @@ pub async fn library_albums(lib: State<'_, LibraryState>) -> Result<Vec<library:
         .map_err(|e| e.to_string())?
 }
 
+/// Per-album aggregates (length, bytes, bitrate, formats, last played) for the
+/// Library page — one call for the whole library. `min_secs` is the play floor:
+/// the frontend passes the same RECENTS_FLOOR_SECS the recents list uses.
+#[tauri::command]
+pub async fn library_album_stats(
+    lib: State<'_, LibraryState>,
+    min_secs: u32,
+) -> Result<Vec<library::AlbumStats>, String> {
+    let l = lib.library.clone();
+    tauri::async_runtime::spawn_blocking(move || {
+        l.album_stats(min_secs).map_err(|e| e.to_string())
+    })
+    .await
+    .map_err(|e| e.to_string())?
+}
+
 #[tauri::command]
 pub async fn album_tracks(
     lib: State<'_, LibraryState>,
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 0ced8eb..11a69e1 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -71,6 +71,7 @@ pub fn run() {
             commands::player_state,
             commands::waveform,
             commands::library_albums,
+            commands::library_album_stats,
             commands::album_tracks,
             commands::album_art,
             commands::refresh_album_art,
diff --git a/src/App.svelte b/src/App.svelte
index a00b320..8d82c79 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -68,6 +68,11 @@
         "catalogAlbum",
         "catalog",
         "catalogDiscography",
+        // The Library follows the discography's exception: its blurred
+        // ambience pins behind the glass and must begin at the very top of
+        // the pane, so the page carries its own top inset instead of taking
+        // padding-top here.
+        "library",
         // Home is a "start BELOW the bar" page (App's search-page rule): it
         // has no artwork to run under the frost, so it takes back
         // --bar-h + air rather than --pane-pad. Its ambience wash is the one
diff --git a/src/lib/api.js b/src/lib/api.js
index 4e67c3a..c05c60e 100644
--- a/src/lib/api.js
+++ b/src/lib/api.js
@@ -83,6 +83,7 @@ export const playerControl = (action, value, rate) =>
 export const playerState = () => invoke("player_state");
 export const waveform = (path, buckets) => invoke("waveform", { path, buckets });
 export const libraryAlbums = () => invoke("library_albums");
+export const libraryAlbumStats = (minSecs) => invoke("library_album_stats", { minSecs });
 export const albumTracks = (albumId) => invoke("album_tracks", { albumId });
 // `path` anchors the play to a library album via tracks.path (UNIQUE). Without
 // it the row still records, but with no album — so it cannot appear in recents.
diff --git a/src/lib/localReleaseType.js b/src/lib/localReleaseType.js
new file mode 100644
index 0000000..ef25b54
--- /dev/null
+++ b/src/lib/localReleaseType.js
@@ -0,0 +1,133 @@
+// How the LIBRARY files a record as an album, an EP, a single, a live set, a
+// compilation, a soundtrack, a remix record or bonus material.
+//
+// The app already decides this, in CatalogArtist.svelte's `categoryFor` — with
+// MusicBrainz secondary types, editorial description hints, edition-group
+// folding, Deezer's record_type and a set of title heuristics tuned against
+// real catalogues. This module is NOT a second opinion on any of that: it is
+// the subset of that classifier whose evidence a LOCAL record can actually
+// carry. A file on disk has no MusicBrainz release group, no editorial lead
+// sentence, no edition_group and usually no record_type — the only evidence it
+// brings is its title, its track count and its running time. So:
+//
+//   · every title heuristic below is COPIED VERBATIM from CatalogArtist.svelte
+//     (the regexes are the tuned artifact — the comments there record what each
+//     clause caught). If one is improved there, re-copy it here; they are
+//     one-screen functions and the provenance comments say exactly where from.
+//   · the MB / description-hint / edition branches are omitted because their
+//     inputs cannot exist here — which is exactly how the approved Library
+//     prototype ran this classifier (with those maps empty).
+//   · under it sits the floor Kyle approved for the prototype: when the
+//     classifier lands on "other" AND the row carries no record_type, the two
+//     facts a file always has decide — ≤3 tracks or under 10 minutes is a
+//     single, ≤7 or under 25 an EP. `isSessionOrDemo` is re-checked inside the
+//     floor so a five-track practice tape stays bonus material.
+//
+// The right end state is one shared module that CatalogArtist imports too;
+// that refactor is deliberate follow-up work, not something to smuggle into
+// the Library landing (the artist page's copy is entangled with its harvest
+// and identity machinery, and it is tuned and shipping).
+
+// ---- title heuristics, verbatim from CatalogArtist.svelte ----------------
+
+// CatalogArtist.svelte `COMPILATION_TITLE`.
+const COMPILATION_TITLE = /\b(?:greatest\s+hits|best\s+of|very\s+best|anthology|singles\s+collection|the\s+singles|the\s+complete\s+recordings|complete\s+collection|collected\s+works|selected\s+works|retrospective|b[-\s]?sides\s+collection|box\s?set|\d+\s+album\s+set|the\s+essential|collection|the\s+hits|\d+["″]?\s+singles|complete\s+(?:\w+\s+)?recordings|bootleg\s+series)\b/i;
+
+// CatalogArtist.svelte `isBoxSetTitle`. A slash-joined title of short
+// single-word parts carrying a full album's worth of tracks is a box set of
+// separate records, not a split single.
+const isBoxSetTitle = (a) => {
+    if ((a.record_type ?? "").toLowerCase() !== "album") return false;
+    if ((a.track_count ?? 0) < 15) return false;
+    const parts = (a.title ?? "").split("/").map((part) => part.trim());
+    return parts.length >= 2 && parts.every((part) => /^[\p{L}\p{N}]{1,14}$/u.test(part));
+};
+
+// CatalogArtist.svelte `isCompilation`.
+export const isCompilation = (a) => {
+    const type = (a.record_type ?? "").toLowerCase();
+    return type === "compile"
+        || type === "compilation"
+        || COMPILATION_TITLE.test(a.title ?? "")
+        || isBoxSetTitle(a);
+};
+
+// CatalogArtist.svelte `isSoundtrack`.
+export const isSoundtrack = (a) => a.is_soundtrack || /\b(?:soundtracks?|original\s+(?:motion\s+picture\s+)?score|film\s+score|motion\s+picture|music\s+from\s+(?:and\s+inspired\s+by\s+)?(?:the\s+)?(?:original\s+)?(?:films?|movies|television(?:\s+series)?|tv\s+(?:series|show)|video\s+game|\S+\s+(?:trilogy|documentary|saga)))\b/i.test(a.title ?? "");
+
+// CatalogArtist.svelte `isSessionOrDemo`. Practice takes, rehearsals, demos,
+// outtakes and radio-session odds — bonus material, not studio albums. Checked
+// AFTER isLive so a genuine "BBC Sessions" live album stays in Live.
+export const isSessionOrDemo = (a) => /\b(?:practice|rehearsals?|demos?|outtakes?|bbc\s+(?:recordings?|tracks?)|radio\s+sessions?|karaoke)\b/i.test(a.title ?? "");
+
+// CatalogArtist.svelte `isRemix`.
+export const isRemix = (a) => /\b(?:remix(?:es|ed)?|rework(?:s|ed)?|reconfigur(?:e|ed|ation)|rmx|mixes|dj\s+mix)\b/i.test(a.title ?? "");
+
+// CatalogArtist.svelte `isLive`.
+export const isLive = (a) => a.is_live || /\b(?:live\s+(?:at|from|in|on|around)|in\s+concert|unplugged|concert\s+recording|live\s+(?:album|recording)|bbc\s+sessions?|peel\s+sessions?|alive\s+(?:19|20)\d{2}|live\s+(?:19|20)\d{2}|concerts?\b|en\s+vivo|ao\s+vivo|en\s+directo|dal\s+vivo|live\s+aus)\b|(?:^|[\s(\[–—-])live(?:\s*[()\[\],:–—-]|$)/i.test(a.title ?? "");
+
+// ---- the classifier -------------------------------------------------------
+
+/** CatalogArtist.svelte `categoryFor`, reduced to the branches whose evidence
+ *  a local record can carry, in the same order. (The MB-corroboration branch —
+ *  where `page.albums` fed `titleContainsAnotherAlbum` — is gone with the MB
+ *  hints that gated it, so no sibling list is needed here.) */
+export function categoryForLocal(album) {
+    const type = (album.record_type ?? "").toLowerCase();
+    if (isSoundtrack(album)) return "soundtrack";
+    if (isLive(album)) return "live";
+    if (isCompilation(album)) return "compilation";
+    if (isRemix(album)) return "remix";
+    if (isSessionOrDemo(album)) return "other";
+    if (["album", "ep", "single"].includes(type)) return type;
+    return "other";
+}
+
+/** The floor under the classifier, exactly as approved on the prototype: only
+ *  when it says "other" AND the row carries no provider record_type is there
+ *  nothing left to reason from, and the two facts a file always has decide. */
+export function localFallback(album) {
+    if (isSessionOrDemo(album)) return "other";
+    const n = album.track_count || (album.tracks ? album.tracks.length : 0);
+    const mins = (album.secs || 0) / 60;
+    if (!n) return "other";
+    if (n <= 3 || (mins && mins < 10)) return "single";
+    if (n <= 7 || (mins && mins < 25)) return "ep";
+    return "album";
+}
+
+/** File one album: the classifier, floored. */
+export function fileRelease(album) {
+    const cat = categoryForLocal(album);
+    if (cat === "other" && !album.record_type) {
+        const guess = localFallback(album);
+        if (guess !== "other") return guess;
+    }
+    return cat;
+}
+
+// CatalogArtist.svelte `TAB_DEFS` — the categories, their labels and their
+// ORDER. The Library's shelves-by-type and its Type grouping follow this list
+// so the two pages file and order identically.
+export const TAB_DEFS = [
+    { key: "upcoming", label: "Upcoming", cats: ["upcoming"] },
+    { key: "album", label: "Albums", cats: ["album"] },
+    { key: "mixtape", label: "Mixtapes", cats: ["mixtape"] },
+    { key: "ep", label: "EPs", cats: ["ep"] },
+    { key: "single", label: "Singles", cats: ["single"] },
+    { key: "live", label: "Live", cats: ["live"] },
+    { key: "compilation", label: "Compilations", cats: ["compilation"] },
+    { key: "soundtrack", label: "Soundtracks", cats: ["soundtrack"] },
+    { key: "remix", label: "Remixes", cats: ["remix"] },
+    { key: "other", label: "Other", cats: ["other"] },
+];
+
+export const CAT_ORDER = TAB_DEFS.map((t) => t.cats[0]);
+export const CAT_LABEL = Object.fromEntries(TAB_DEFS.map((t) => [t.cats[0], t.label]));
+
+/** Singular, for a card's sub line and the list view's Type column. */
+export const CAT_ONE = {
+    upcoming: "Upcoming", album: "Album", mixtape: "Mixtape", ep: "EP", single: "Single",
+    live: "Live", compilation: "Compilation", soundtrack: "Soundtrack", remix: "Remix",
+    other: "Other",
+};
diff --git a/src/lib/mockLibrary.js b/src/lib/mockLibrary.js
index e24fb2d..2b9f390 100644
--- a/src/lib/mockLibrary.js
+++ b/src/lib/mockLibrary.js
@@ -5,25 +5,56 @@
 
 const ARTISTS = ["Aphex Twin","Boards of Canada","Caribou","Daft Punk","Eno Brian","Four Tet","Grimes","Holly Herndon","Jon Hopkins","Kraftwerk","LCD Soundsystem","Moderat","Nils Frahm","Oneohtrix","Portishead","Radiohead","Squarepusher","Tycho","Underworld","Vangelis","Wilco","Yello","Zero 7","Air","Bonobo","Burial","Clark","Deadmau5","Emancipator","Floating Points","Gold Panda","Helios","Kiasmos","Lorn","Moby","Nujabes","Ott","Plaid","Rival Consoles","Shpongle"];
 
+// Titles vary by slot so the Library's classifier has something real to file:
+// a live set, demos, a remix record and a collection appear per artist cycle,
+// and a few rows have NO art_path so the generated artwork can be judged.
+const TITLE_SHAPES = [
+    (a, j) => `Album ${j + 1} of ${a}`,
+    (a) => `Live at the Roundhouse`,
+    (a) => `Four-Track Demos`,
+    (a) => `Remixes 2001`,
+    (a) => `Singles Collection`,
+];
 const albums = [];
 let aid = 1;
 for (let i = 0; i < ARTISTS.length; i++) {
-    const n = 2 + (i % 3); // 2-4 albums per artist
+    const n = 2 + (i % 4); // 2-5 albums per artist
     for (let j = 0; j < n; j++) {
+        const shape = j < 2 ? TITLE_SHAPES[0] : TITLE_SHAPES[(i + j) % TITLE_SHAPES.length];
         albums.push({
             id: aid,
             artist: ARTISTS[i],
-            title: `Album ${j + 1} of ${ARTISTS[i]}`,
+            title: shape(ARTISTS[i], j),
             year: 1995 + ((i + j) % 30),
-            track_count: 10,
-            art_path: `mock://art/${aid}`,
+            track_count: j === 2 && i % 5 === 0 ? 3 : 8 + ((i + j) % 7),
+            art_path: (i + j) % 4 === 3 ? null : `mock://art/${aid}`,
             artist_art_path: `mock://artist/${i}`,
+            added_at: 1700000000 + i * 86400 * 9 + j * 86400 * 40,
             path: `C:\\mock\\${i}\\${j}`,
         });
         aid++;
     }
 }
 
+// Per-album file aggregates, the same shape library_album_stats returns.
+// Deterministic variety: a third FLAC 16/44.1, a few 24/96, the rest MP3.
+function statsFor(a) {
+    const kind = a.id % 7;
+    const flac = kind === 0 || kind === 3 || kind === 5;
+    const hires = kind === 5;
+    const perTrack = flac ? (hires ? 120e6 : 38e6) : 9e6;
+    return {
+        album_id: a.id,
+        secs: a.track_count * (170 + (a.id % 90)),
+        bytes: Math.round(a.track_count * perTrack),
+        avg_kbps: flac ? (hires ? 2400 : 900) + (a.id % 120) : 192 + (a.id % 4) * 32,
+        bit_depth: flac ? (hires ? 24 : 16) : null,
+        sample_rate: flac ? (hires ? 96000 : 44100) : null,
+        formats: [flac ? "flac" : "mp3"],
+        last_played_at: a.id % 3 === 0 ? null : 1723000000 - (a.id % 40) * 86400,
+    };
+}
+
 function svgArt(hue, label) {
     const s =
         `<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">` +
@@ -33,15 +64,23 @@ function svgArt(hue, label) {
 }
 
 function tracksFor(albumId) {
-    const artist = albums.find((a) => a.id === albumId)?.artist ?? "?";
-    return Array.from({ length: 10 }, (_, k) => ({
+    const album = albums.find((a) => a.id === albumId);
+    const artist = album?.artist ?? "?";
+    const s = album ? statsFor(album) : null;
+    const ext = s?.formats[0] ?? "mp3";
+    const n = album?.track_count ?? 10;
+    return Array.from({ length: n }, (_, k) => ({
         id: albumId * 100 + k,
+        album_id: albumId,
         title: `Track ${k + 1}`,
         artist,
         track_no: k + 1,
-        duration_secs: 120 + k * 17,
-        bitrate_kbps: 320,
-        path: `C:\\mock\\t${albumId}-${k}.mp3`,
+        duration_secs: 120 + ((albumId + k) % 9) * 23,
+        bitrate_kbps: s?.avg_kbps ?? 320,
+        bit_depth: s?.bit_depth ?? null,
+        sample_rate: s?.sample_rate ?? null,
+        size: Math.round((s?.bytes ?? 40e6) / n),
+        path: `C:\\mock\\t${albumId}-${k}.${ext}`,
     }));
 }
 
@@ -57,6 +96,9 @@ const enabled = (() => {
 export function mockInvoke(cmd, args) {
     if (!enabled) return undefined;
     if (cmd === "library_albums") return Promise.resolve(albums);
+    if (cmd === "library_album_stats") return Promise.resolve(albums.map(statsFor));
+    if (cmd === "followed_artists") return Promise.resolve([]);
+    if (cmd === "recent_albums") return Promise.resolve([]);
     if (cmd === "album_tracks")
         return new Promise((r) => setTimeout(() => r(tracksFor(args.albumId)), 60));
     if (cmd === "album_art") {
diff --git a/src/views/Library.svelte b/src/views/Library.svelte
index d4532ec..a977655 100644
--- a/src/views/Library.svelte
+++ b/src/views/Library.svelte
@@ -1,464 +1,2495 @@
 <script>
+    // The Library — the power user's side of the app, where a collection gets
+    // kept, searched and played. Rebuilt 2026-08-05 from the approved prototype
+    // (research/library/, HANDOFF-2026-08-05-library-redesign.md §3-4d) with
+    // Kyle's picked settings baked in rather than offered as variants:
+    //
+    //   uncatalogued  Equal — a record is a record; nothing marks provenance
+    //   no artwork    Generated — deterministic art from the record's own name
+    //   gaps          Summary — one line per shelf, opening into full dimmed cards
+    //   within artist Split by type — Albums/EPs/Singles under their own heads
+    //   toolbar       Card — a floating rounded card, pinned under the glass bar
+    //   index rail    On — every grouping, every view, gutter always reserved
+    //   list header   Joined to the bar — the card's own last row, one pin
+    //   entrance      Wave — the records arrive; the chrome never moves
+    //   cards         150px — the artist page's own card width
+    //
+    // Every shape here is the app's: the release card and grid are the artist
+    // page's, the tab row and sort menu the discography's, the inline expander
+    // is CatalogArtist's class for class with its animation numbers unchanged.
+    // Styles are copied because Svelte scopes them per component — the same
+    // trade CatalogDiscography made, with provenance comments at each block.
     import { tick } from "svelte";
-    import { slide } from "svelte/transition";
+    import Icon from "../components/Icon.svelte";
+    import * as api from "../lib/api.js";
     import {
         libraryStore,
-        getArt,
+        refreshLibrary,
         playAlbum,
         player,
+        getArt,
+        getCatalogArtistPage,
+        openCatalogArtist,
+        RECENTS_FLOOR_SECS,
+        recentsStore,
     } from "../lib/state.svelte.js";
-    import * as api from "../lib/api.js";
-    import AlbumCard from "../components/AlbumCard.svelte";
-    import Icon from "../components/Icon.svelte";
+    import {
+        fileRelease,
+        CAT_ORDER,
+        CAT_LABEL,
+        CAT_ONE,
+    } from "../lib/localReleaseType.js";
 
-    let expandedArtist = $state(null);
-    let inlineAlbumId = $state(null);
-    let inlineTracks = $state([]);
-    let artistArtUrls = $state({});
-    const artistArtOrder = [];
-    const artistArtInFlight = new Map();
-    const visibleArtistArts = new Set();
-    const artistArtPaths = new Map();
-    const ARTIST_ART_URL_MAX = 64;
-    const ARTIST_ART_CHAR_MAX = 24 * 1024 * 1024;
-    let artistArtChars = 0;
-
-    const artists = $derived.by(() => {
-        const grouped = new Map();
-        for (const album of libraryStore.albums) {
-            const key = album.artist || "Unknown Artist";
-            const entry = grouped.get(key) ?? { name: key, albums: [], artist_art_path: null };
-            entry.albums.push(album);
-            if (!entry.artist_art_path) entry.artist_art_path = album.artist_art_path || album.art_path;
-            grouped.set(key, entry);
-        }
-        return [...grouped.values()].sort((a, b) => a.name.localeCompare(b.name));
+    // ================================================================ state
+    // The page's shape survives a restart — the same courtesy the player bar
+    // extends to its expanded state. View state only; never data.
+    const VIEW_KEY = "library.view.v1";
+    const savedView = (() => {
+        try { return JSON.parse(localStorage.getItem(VIEW_KEY)) ?? {}; } catch { return {}; }
+    })();
+    let view = $state(savedView.view ?? "shelves");     // shelves | grid | list
+    let group = $state(savedView.group ?? "artist");    // artist|decade|format|rtype|added|none
+    let sortKey = $state(savedView.sort ?? "artist");
+    let desc = $state(savedView.desc ?? true);
+    $effect(() => {
+        const snapshot = JSON.stringify({ view, group, sort: sortKey, desc });
+        try { localStorage.setItem(VIEW_KEY, snapshot); } catch { /* full/blocked */ }
     });
 
-    function touchArtistArt(name) {
-        const index = artistArtOrder.indexOf(name);
-        if (index >= 0) artistArtOrder.splice(index, 1);
-        artistArtOrder.push(name);
-    }
+    let q = $state("");
+    let menuOpen = $state(false);
+    let expandedShelves = $state({});   // shelf name -> true (past the 18-card cap)
+    let rescanning = $state(false);
 
-    function forgetArtistArt(name) {
-        const url = artistArtUrls[name];
-        if (typeof url === "string") artistArtChars -= url.length;
-        delete artistArtUrls[name];
-        artistArtPaths.delete(name);
-        const index = artistArtOrder.indexOf(name);
-        if (index >= 0) artistArtOrder.splice(index, 1);
-    }
-
-    function rememberArtistArt(name, path, url) {
-        const previous = artistArtUrls[name];
-        if (typeof previous === "string") artistArtChars -= previous.length;
-        artistArtUrls[name] = url;
-        artistArtPaths.set(name, path);
-        artistArtChars += url.length;
-        touchArtistArt(name);
-        // Keep at least the just-painted image even if one unusual payload is
-        // larger than the budget; all older card references can be reloaded
-        // lazily from the separately bounded shared art cache.
-        while (
-            artistArtOrder.length > 1
-            && (
-                artistArtOrder.length > ARTIST_ART_URL_MAX
-                || artistArtChars > ARTIST_ART_CHAR_MAX
-            )
-        ) {
-            const evictIndex = artistArtOrder.findIndex(
-                (artistName) => !visibleArtistArts.has(artistName),
-            );
-            // Preserve every currently painted card; the byte budget is a
-            // soft ceiling only when an unusually large visible row exceeds
-            // it by itself.
-            if (evictIndex < 0) break;
-            const [oldest] = artistArtOrder.splice(evictIndex, 1);
-            const oldUrl = artistArtUrls[oldest];
-            if (typeof oldUrl === "string") artistArtChars -= oldUrl.length;
-            delete artistArtUrls[oldest];
-            artistArtPaths.delete(oldest);
+    // Per-album aggregates of what the files carry — length, bytes, bitrate,
+    // formats, last played. One backend call for the whole library.
+    let statsById = $state({});
+    let statsLoaded = $state(false);
+    async function loadStats() {
+        try {
+            const rows = await api.libraryAlbumStats(RECENTS_FLOOR_SECS);
+            statsById = Object.fromEntries(rows.map((s) => [s.album_id, s]));
+            statsLoaded = true;
+        } catch {
+            // Backend unavailable (dev in a browser): the page still renders,
+            // the stat row and file columns just stay quiet.
+            statsLoaded = true;
         }
     }
 
-    // Load only cards near the scroll viewport. The old whole-library effect
-    // eagerly retained every base64 image and, because it read/write the same
-    // reactive object, reattached callbacks to every still-pending promise on
-    // each completion.
-    function loadArtistArt(node, artist) {
-        let current = artist;
-        let alive = true;
-        let intersecting = false;
-        const load = () => {
-            const { name, artist_art_path: path } = current;
-            if (!path) return;
-            if (
-                artistArtUrls[name] !== undefined
-                && artistArtPaths.get(name) === path
-            ) {
-                touchArtistArt(name);
-                return;
-            }
-            if (artistArtUrls[name] !== undefined) forgetArtistArt(name);
-            let flight = artistArtInFlight.get(name);
-            if (!flight || flight.path !== path) {
-                const pending = getArt(path);
-                flight = { path, pending };
-                artistArtInFlight.set(name, flight);
-                pending.finally(() => {
-                    if (artistArtInFlight.get(name) === flight) {
-                        artistArtInFlight.delete(name);
-                    }
-                });
-            }
-            flight.pending.then((url) => {
-                if (
-                    alive
-                    && current.name === name
-                    && current.artist_art_path === path
-                    && url
-                ) {
-                    rememberArtistArt(name, path, url);
-                }
-            });
-        };
-        const observer = typeof IntersectionObserver === "undefined"
-            ? null
-            : new IntersectionObserver(
-                (entries) => {
-                    intersecting = entries.some((entry) => entry.isIntersecting);
-                    if (intersecting) {
-                        visibleArtistArts.add(current.name);
-                        load();
-                    } else {
-                        visibleArtistArts.delete(current.name);
-                    }
-                },
-                { root: node.closest(".content"), rootMargin: "300px" },
+    // ---- the catalogue side of Summary -----------------------------------
+    // "N of M released" and the gap line exist only where the app knows the
+    // artist's catalogue by an ANCHORED id — a followed artist. The join from
+    // a shelf's tag-derived name to that id is by normalized name, which is
+    // the same join the artist page's own "in your library" ticks already
+    // make (catalogTrackOwnership); identity of RECORDS is never guessed.
+    let followsByName = $state({});     // normKey(name) -> { artistId, name }
+    // artist name -> { total } — persisted so counts survive a restart and the
+    // shelf head can say "9 of 29" without a fetch. Rows are session-only.
+    const GAPS_KEY = "library.gaps.v1";
+    let gapTotals = $state((() => {
+        try { return JSON.parse(localStorage.getItem(GAPS_KEY)) ?? {}; } catch { return {}; }
+    })());
+    let gapRows = $state({});           // artist name -> catalog rows not owned
+    let gapOpen = $state({});           // artist name -> line expanded
+    let gapLoading = $state({});
+
+    const normKey = (s) => (s ?? "").toLowerCase().replace(/[^a-z0-9]/g, "");
+
+    async function loadFollowNames() {
+        try {
+            const list = await api.followedArtists();
+            followsByName = Object.fromEntries(
+                list.map((f) => [normKey(f.name), { artistId: f.artist_id, name: f.name }]),
             );
-        if (observer) observer.observe(node);
-        else load();
-        return {
-            update(next) {
-                const previousName = current.name;
-                const pathChanged = current.artist_art_path !== next.artist_art_path;
-                current = next;
-                if (intersecting && previousName !== next.name) {
-                    visibleArtistArts.delete(previousName);
-                    visibleArtistArts.add(next.name);
-                }
-                if (pathChanged) {
-                    forgetArtistArt(next.name);
-                    if (intersecting) load();
-                } else if (artistArtUrls[next.name] !== undefined) {
-                    touchArtistArt(next.name);
-                }
-            },
-            destroy() {
-                alive = false;
-                visibleArtistArts.delete(current.name);
-                observer?.disconnect();
-            },
-        };
+        } catch { /* backend unavailable */ }
     }
 
-    function toggleArtist(name) {
-        expandedArtist = expandedArtist === name ? null : name;
-        inlineAlbumId = null;
+    function followFor(artistName) {
+        return followsByName[normKey(artistName)] ?? null;
     }
 
-    function selectInlineAlbum(album) {
-        inlineAlbumId = inlineAlbumId === album.id ? null : album.id;
-        if (inlineAlbumId !== null) revealInlineTracklist();
-    }
-
-    const inlineAlbum = $derived(
-        libraryStore.albums.find((a) => a.id === inlineAlbumId) ?? null,
-    );
-
-    $effect(() => {
-        if (!inlineAlbum) {
-            inlineTracks = [];
+    async function toggleGaps(artistName) {
+        if (gapOpen[artistName]) {
+            gapOpen = { ...gapOpen, [artistName]: false };
             return;
         }
-        const id = inlineAlbum.id;
-        // Keep the previous album's rows rendered while the new ones load:
-        // blanking them collapses the open panel, which shrinks .content's
-        // scrollHeight and makes the browser clamp scrollTop upward — the
-        // "jump to the top" when switching albums while scrolled deep.
-        api.albumTracks(id).then((tracks) => {
-            if (inlineAlbumId !== id) return; // album changed while loading
-            inlineTracks = tracks;
-            revealInlineTracklist();
+        const follow = followFor(artistName);
+        if (!follow) return;
+        if (!gapRows[artistName] && !gapLoading[artistName]) {
+            gapLoading = { ...gapLoading, [artistName]: true };
+            try {
+                const page = await getCatalogArtistPage(follow.artistId);
+                const released = (page?.albums ?? []).filter((a) => !isUpcomingRow(a));
+                const ownedTitles = new Set(
+                    libraryStore.albums
+                        .filter((a) => normKey(a.artist) === normKey(artistName))
+                        .map((a) => normKey(a.title)),
+                );
+                gapRows = {
+                    ...gapRows,
+                    [artistName]: released.filter((r) => !ownedTitles.has(normKey(r.title))),
+                };
+                gapTotals = { ...gapTotals, [artistName]: { total: released.length } };
+                try { localStorage.setItem(GAPS_KEY, JSON.stringify(gapTotals)); } catch { /* ignore */ }
+            } catch { /* the line stays collapsed; nothing is invented */ }
+            gapLoading = { ...gapLoading, [artistName]: false };
+        }
+        if (gapRows[artistName]?.length || gapLoading[artistName] === false) {
+            gapOpen = { ...gapOpen, [artistName]: true };
+        }
+    }
+
+    // A future or unresolved release date is not "released" — same rule as the
+    // artist page's Upcoming tab (CatalogArtist `isFutureOrUnresolvedDate`).
+    const todayKey = (() => {
+        const now = new Date();
+        return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+    })();
+    function isUpcomingRow(a) {
+        const value = a.release_date;
+        if (!value) return false;
+        if (value.length >= 10) return value.slice(0, 10) > todayKey;
+        if (value.length >= 7) return value.slice(0, 7) >= todayKey.slice(0, 7);
+        if (value.length >= 4) return value.slice(0, 4) >= todayKey.slice(0, 4);
+        return false;
+    }
+
+    // ================================================================ rows
+    const rows = $derived.by(() => {
+        return libraryStore.albums.map((a) => {
+            const s = statsById[a.id];
+            const row = {
+                ...a,
+                secs: s?.secs ?? 0,
+                bytes: s?.bytes ?? 0,
+                avgKbps: s?.avg_kbps ?? null,
+                depth: s?.bit_depth && s?.sample_rate
+                    ? `${s.bit_depth}/${s.sample_rate % 1000 === 0 ? s.sample_rate / 1000 : (s.sample_rate / 1000).toFixed(1)}`
+                    : null,
+                formats: s?.formats ?? [],
+                lastPlayedAt: s?.last_played_at ?? null,
+                sortName: (a.artist || "").replace(/^(the|a|an)\s+/i, ""),
+            };
+            // The app's own filing (localReleaseType.js: CatalogArtist's title
+            // heuristics + the approved track-count/length floor).
+            row.cat = fileRelease(row);
+            return row;
         });
     });
 
-    let revealRaf = null;
+    const corpus = $derived.by(() => {
+        if (!q) return rows;
+        const needle = q.toLowerCase();
+        return rows.filter((a) => `${a.artist} ${a.title}`.toLowerCase().includes(needle));
+    });
 
-    // Scroll .content down just enough to keep the inline tracklist in view
-    // while it grows (slide transition, track rows arriving). One-shot
-    // measurement doesn't work here: at tick() the panel is still ~0px tall,
-    // so we follow it frame by frame until its size settles. Never scrolls
-    // up, and never pushes the tracklist heading above the top of the pane.
-    async function revealInlineTracklist() {
-        await tick();
-        if (revealRaf) cancelAnimationFrame(revealRaf);
-        const scroller = document.querySelector(".content");
-        const target = document.querySelector(".inline-tracklist");
-        if (!scroller || !target) return;
-        const margin = 16;
-        const start = performance.now();
-        let lastBottom = -1;
-        let stableSince = start;
-        const step = (now) => {
-            revealRaf = null;
-            if (!target.isConnected) return;
-            const viewport = scroller.getBoundingClientRect();
-            const rect = target.getBoundingClientRect();
-            const delta = Math.min(
-                rect.bottom - viewport.bottom + margin,
-                rect.top - viewport.top - margin,
-            );
-            if (delta > 0) scroller.scrollBy({ top: delta });
-            if (rect.bottom !== lastBottom) {
-                lastBottom = rect.bottom;
-                stableSince = now;
-            }
-            // Keep following briefly after the last size change, bounded hard.
-            if (now - stableSince < 150 && now - start < 900) {
-                revealRaf = requestAnimationFrame(step);
+    // ---- groupings --------------------------------------------------------
+    const GROUPS = {
+        artist: { label: "Artist", of: (a) => a.artist || "Unknown Artist" },
+        decade: { label: "Decade", of: (a) => (a.year ? `${Math.floor(a.year / 10) * 10}s` : "No year") },
+        format: {
+            label: "Format",
+            of: (a) => ((a.formats[0] || "—").toUpperCase() + (a.depth ? ` ${a.depth}` : "")),
+        },
+        rtype: { label: "Type", of: (a) => CAT_LABEL[a.cat] },
+        added: {
+            label: "Added",
+            of: (a) => (a.added_at
+                ? new Date(a.added_at * 1000).toLocaleDateString(undefined, { year: "numeric", month: "long" })
+                : "—"),
+        },
+        none: { label: "None", of: () => "" },
+    };
+
+    // ---- sorts ------------------------------------------------------------
+    const cmpName = (x, y) => x.sortName.localeCompare(y.sortName) || (x.title ?? "").localeCompare(y.title ?? "");
+    const SORTS = {
+        artist: { label: "Artist", cmp: cmpName, desc: false },
+        title: {
+            label: "Title", desc: false,
+            cmp: (x, y) => (x.title ?? "").replace(/^(the|a|an)\s+/i, "").localeCompare((y.title ?? "").replace(/^(the|a|an)\s+/i, "")),
+        },
+        year: { label: "Release year", cmp: (x, y) => (y.year ?? -1) - (x.year ?? -1) || cmpName(x, y) },
+        added: { label: "Recently added", cmp: (x, y) => (y.added_at ?? 0) - (x.added_at ?? 0) },
+        played: { label: "Last played", cmp: (x, y) => (y.lastPlayedAt ?? 0) - (x.lastPlayedAt ?? 0) },
+        neglect: {
+            label: "Never played first",
+            cmp: (x, y) => (x.lastPlayedAt ?? 0) - (y.lastPlayedAt ?? 0) || cmpName(x, y),
+            desc: false,
+        },
+        length: { label: "Length", cmp: (x, y) => y.secs - x.secs },
+        tracks: { label: "Track count", cmp: (x, y) => (y.track_count ?? 0) - (x.track_count ?? 0) },
+        size: { label: "Size on disk", cmp: (x, y) => y.bytes - x.bytes },
+        bitrate: { label: "Bitrate", cmp: (x, y) => (y.avgKbps ?? 0) - (x.avgKbps ?? 0) },
+        format: {
+            label: "Format", desc: false,
+            cmp: (x, y) => (x.formats[0] ?? "~").localeCompare(y.formats[0] ?? "~") || cmpName(x, y),
+        },
+        rtype: {
+            label: "Release type", desc: false,
+            cmp: (x, y) => CAT_ORDER.indexOf(x.cat) - CAT_ORDER.indexOf(y.cat) || cmpName(x, y),
+        },
+        complete: {
+            label: "Least complete", desc: false,
+            cmp: (x, y) => completeness(x.artist) - completeness(y.artist) || cmpName(x, y),
+        },
+    };
+
+    function completeness(artist) {
+        const total = gapTotals[artist]?.total || 0;
+        if (!total) return 1;
+        const own = rows.filter((a) => a.artist === artist).length;
+        return Math.min(1, own / total);
+    }
+
+    function sortList(list) {
+        const out = [...list].sort(SORTS[sortKey].cmp);
+        return desc ? out : out.reverse();
+    }
+
+    const grouped = $derived.by(() => {
+        const g = GROUPS[group];
+        if (group === "none") return [["", sortList(corpus)]];
+        const by = new Map();
+        for (const a of corpus) {
+            const k = g.of(a);
+            if (!by.has(k)) by.set(k, []);
+            by.get(k).push(a);
+        }
+        // Added is a DATE grouping: newest month first, by the month the key
+        // names — a string sort put April 2025 above August 2024.
+        const keys = [...by.keys()].sort(group === "rtype"
+            ? (x, y) => CAT_ORDER.findIndex((c) => CAT_LABEL[c] === x)
+                - CAT_ORDER.findIndex((c) => CAT_LABEL[c] === y)
+            : group === "artist"
+            ? (x, y) => x.replace(/^(the|a|an)\s+/i, "").localeCompare(y.replace(/^(the|a|an)\s+/i, ""))
+            : group === "decade" ? (x, y) => String(y).localeCompare(String(x))
+            : group === "added"
+            ? (x, y) => (Date.parse(`1 ${y}`) || -Infinity) - (Date.parse(`1 ${x}`) || -Infinity)
+            : (x, y) => String(x).localeCompare(String(y)));
+        if (group === "artist" && sortKey === "complete") {
+            keys.sort((x, y) => completeness(x) - completeness(y));
+        }
+        return keys.map((k) => [k, sortList(by.get(k))]);
+    });
+
+    // Albums, EPs and singles under their own headings INSIDE an artist — the
+    // separation the artist page makes with tabs, made here with rules. Only
+    // categories the artist has appear, in TAB_DEFS order; a shelf holding one
+    // category gets no headings at all.
+    function splitByCategory(list) {
+        const by = new Map();
+        for (const a of list) {
+            if (!by.has(a.cat)) by.set(a.cat, []);
+            by.get(a.cat).push(a);
+        }
+        if (by.size < 2) return [[null, list]];
+        return CAT_ORDER.filter((c) => by.has(c)).map((c) => [CAT_LABEL[c], by.get(c)]);
+    }
+
+    // ---- the derived stat row --------------------------------------------
+    const totals = $derived.by(() => ({
+        albums: corpus.length,
+        artists: new Set(corpus.map((a) => a.artist)).size,
+        tracks: corpus.reduce((n, a) => n + (a.track_count || 0), 0),
+        secs: corpus.reduce((n, a) => n + a.secs, 0),
+        bytes: corpus.reduce((n, a) => n + a.bytes, 0),
+        never: statsLoaded ? corpus.filter((a) => !a.lastPlayedAt).length : 0,
+    }));
+
+    // ================================================================ units
+    const pad2 = (n) => String(n).padStart(2, "0");
+    const dur = (s) => (!s ? "" : s >= 3600
+        ? `${Math.floor(s / 3600)}:${pad2(Math.floor((s % 3600) / 60))}:${pad2(s % 60)}`
+        : `${Math.floor(s / 60)}:${pad2(s % 60)}`);
+    function longDur(s) {
+        const d = Math.floor(s / 86400);
+        const h = Math.floor((s % 86400) / 3600);
+        if (d) return `${d}d ${h}h`;
+        const m = Math.round((s % 3600) / 60);
+        return h ? `${h}h ${m}m` : `${m}m`;
+    }
+    function fmtBytes(n) {
+        if (!n) return "—";
+        if (n >= 1073741824) return `${(n / 1073741824).toFixed(n >= 10737418240 ? 0 : 1)} GB`;
+        if (n >= 1048576) return `${Math.round(n / 1048576)} MB`;
+        return `${Math.round(n / 1024)} KB`;
+    }
+    function since(ts) {
+        if (!ts) return "never";
+        const d = Math.floor((Date.now() / 1000 - ts) / 86400);
+        if (d <= 0) return "today";
+        if (d === 1) return "yesterday";
+        if (d < 7) return `${d}d ago`;
+        if (d < 31) return `${Math.round(d / 7)}w ago`;
+        if (d < 365) return `${Math.round(d / 30.4)}mo ago`;
+        return `${(d / 365).toFixed(1)}y ago`;
+    }
+
+    function subFor(a) {
+        if (sortKey === "added") return since(a.added_at);
+        if (sortKey === "played" || sortKey === "neglect") return since(a.lastPlayedAt);
+        if (sortKey === "size") return fmtBytes(a.bytes);
+        if (sortKey === "length") return dur(a.secs);
+        if (sortKey === "tracks") return `${a.track_count} tracks`;
+        if (sortKey === "rtype") return CAT_ONE[a.cat] + (a.year ? ` · ${a.year}` : "");
+        if (sortKey === "bitrate" || sortKey === "format") {
+            return (a.formats[0] || "").toUpperCase() + (a.avgKbps ? ` · ${a.avgKbps}k` : "");
+        }
+        return a.artist + (a.year ? ` · ${a.year}` : "");
+    }
+    const chipFor = (a) => (group === "artist" && a.year ? String(a.year) : null);
+
+    // ====================================================== generated artwork
+    // A record no provider will ever know has no cover and never will. Built
+    // from the record's own name — same name, same art, always — with a texture
+    // that follows what the thing IS (approved on the prototype; §3 of the
+    // handoff). `>>>` everywhere: a signed shift of an unsigned hash goes
+    // negative, and a negative index/hue was two real bugs.
+    function hash(s) {
+        let h = 2166136261;
+        for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); }
+        return h >>> 0;
+    }
+    function genFor(a) {
+        const h = hash(`${a.artist} — ${a.title}`);
+        const hue = h % 360;
+        const hue2 = (hue + 24 + ((h >>> 9) % 40)) % 360;
+        const pat = a.cat === "live" ? "rings" : a.cat === "other" ? "tape" : "plain";
+        return { hue, hue2, pat, icon: GEN_ICON[a.cat] ?? "disc" };
+    }
+    const GEN_ICON = {
+        live: "users", compilation: "layers", soundtrack: "preview-reel", remix: "shuffle",
+        other: "history", mixtape: "playlist", album: "disc", ep: "disc", single: "disc",
+    };
+    // A generated cover knows its own hue, so its card carries the accent.
+    const genAccent = (a) => {
+        const { hue } = genFor(a);
+        return `--accent:hsl(${hue} 48% 54%);--accent-hover:hsl(${hue} 54% 66%)`;
+    };
+
+    // ================================================================ covers
+    // Local art loads through getArt (budgeted data-URL cache in state), only
+    // for cards near the viewport — the pattern the old page proved out,
+    // reduced: the shared cache in state does the byte budgeting.
+    let coverUrls = $state({});         // album id -> data url
+    const coverInFlight = new Set();
+    function loadCover(node, album) {
+        let current = album;
+        let alive = true;
+        const load = () => {
+            const { id, art_path } = current;
+            if (!art_path || coverUrls[id] !== undefined || coverInFlight.has(id)) return;
+            coverInFlight.add(id);
+            getArt(art_path).then((url) => {
+                coverInFlight.delete(id);
+                if (alive && url) coverUrls[current.id] = url;
+            }).catch(() => coverInFlight.delete(id));
+        };
+        const observer = new IntersectionObserver((entries) => {
+            for (const e of entries) if (e.isIntersecting) load();
+        }, { root: null, rootMargin: "600px" });
+        observer.observe(node);
+        return {
+            update(next) { current = next; },
+            destroy() { alive = false; observer.disconnect(); },
+        };
+    }
+
+    // ---- ambience: the page's colour comes from the collection ------------
+    let ambUrl = $state(null);
+    $effect(() => {
+        const recent = recentsStore.albums.find((r) => r.kind === "library" && r.art_path);
+        const newest = libraryStore.albums.find((a) => a.art_path);
+        const path = recent?.art_path ?? newest?.art_path ?? null;
+        if (!path) { ambUrl = null; return; }
+        let alive = true;
+        getArt(path).then((url) => { if (alive && url) ambUrl = url; });
+        return () => { alive = false; };
+    });
+
+    // ============================================================== expander
+    // CatalogArtist's inline album expander, exactly — same classes, same
+    // numbers. What differs is the CONTENT (a library knows size on disk and
+    // bitrate, not Last.fm plays) and the reveal line (read off the pinned
+    // toolbar live, because its height depends on wrap + the joined header).
+    const SWAP_MS = 400;                                    // CatalogArtist's own
+    const SWAP_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";     // quintOut
+    const quintOut = (t) => 1 - Math.pow(1 - t, 5);
+    const SWAP_PARTS = [
+        { sel: ".rail-glow, .rail-shade", delay: 0, lift: false },
+        { sel: ".rail-art-stage", delay: 0, lift: true },
+        { sel: ".rail-title", delay: 60, lift: true },
+        { sel: ".rail-meta", delay: 90, lift: true },
+        { sel: ".rail-stats", delay: 105, lift: true },
+        { sel: ".rail-cta", delay: 120, lift: true },
+        { sel: ".xp-tracks", delay: 90, lift: true },
+    ];
+    const LOADING_GRACE = 160;
+
+    let openId = $state(null);
+    let openTracks = $state([]);
+    let openLoading = $state(false);
+    let loadingVisible = $state(false);
+    let loadGraceTimer;
+
+    const openAlbum = $derived(rows.find((a) => a.id === openId) ?? null);
+
+    function toggleExpander(album) {
+        if (openId === album.id) { closeExpander(); return; }
+        openId = album.id;
+        openTracks = [];
+        openLoading = true;
+        loadingVisible = false;
+        clearTimeout(loadGraceTimer);
+        // Nothing at all until the load has outlasted LOADING_GRACE: a warm
+        // open resolves in tens of ms and used to flash a skeleton on its way
+        // past (CatalogArtist's own rule).
+        loadGraceTimer = setTimeout(() => { if (openLoading) loadingVisible = true; }, LOADING_GRACE);
+        const id = album.id;
+        api.albumTracks(id).then((tracks) => {
+            if (openId !== id) return;
+            openTracks = tracks;
+            openLoading = false;
+        }).catch(() => {
+            if (openId !== id) return;
+            openTracks = [];
+            openLoading = false;
+        });
+    }
+    function closeExpander() {
+        openId = null;
+        openTracks = [];
+        openLoading = false;
+    }
+    // A view or grouping change closes the panel — CatalogArtist's own rule
+    // for a tab change: the open expander lives inside the grid being
+    // replaced, and its row means nothing in the new arrangement.
+    function setView(v) { if (view !== v) { view = v; closeExpander(); bumpDeal(); } }
+    function setGroup(g) {
+        if (group !== g) { group = g; expandedShelves = {}; gapOpen = {}; closeExpander(); bumpDeal(); }
+    }
+
+    // ---- grid columns, for the expander's row arithmetic ------------------
+    // Fixed tracks (150px cards, 16px column gap) exactly as the artist page.
+    const CARD_W = 150;
+    const GRID_GAP = 16;
+    let gridColsV = $state(0);
+    const gridColsMap = new Map();      // section key -> column count
+    function measureCols(node, key) {
+        let currentKey = key;
+        const measure = () => {
+            const w = node.clientWidth;
+            const cols = Math.max(1, Math.floor((w + GRID_GAP) / (CARD_W + GRID_GAP)));
+            if (gridColsMap.get(currentKey) !== cols) {
+                gridColsMap.set(currentKey, cols);
+                gridColsV++;
             }
         };
-        revealRaf = requestAnimationFrame(step);
+        const ro = new ResizeObserver(measure);
+        ro.observe(node);
+        measure();
+        return {
+            update(nextKey) { currentKey = nextKey; measure(); },
+            destroy() { ro.disconnect(); },
+        };
+    }
+    /** Index in `items` after which the expander renders (-1 = not here): the
+     *  last card of the open album's row — CatalogArtist `expanderIndex`. */
+    function expanderIndex(items, sectionKey) {
+        void gridColsV;
+        const idx = items.findIndex((a) => a.id === openId);
+        if (idx < 0) return -1;
+        const cols = gridColsMap.get(sectionKey) || 1;
+        return Math.min(Math.floor(idx / cols) * cols + cols - 1, items.length - 1);
+    }
+    /** Notch x: centred under the open card — CatalogArtist `notchLeft`. */
+    function notchLeft(items, sectionKey) {
+        void gridColsV;
+        const idx = items.findIndex((a) => a.id === openId);
+        const cols = gridColsMap.get(sectionKey) || 1;
+        const col = idx >= 0 ? idx % cols : 0;
+        return `${col * (CARD_W + GRID_GAP) + CARD_W / 2 - 6}px`;
     }
 
-    // Still used by the inline album expander in the artist rows below.
-    function fmtDuration(s) {
-        if (s == null) return "";
-        return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+    // ---- the expander's motion, CatalogArtist's numbers -------------------
+    const reducedMotion = () =>
+        typeof matchMedia === "function"
+        && matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    /** Open/close: the height is read LIVE per frame and kept monotonic —
+     *  the tracklist lands mid-flight, and a captured height animates to a
+     *  stale number (the 348→465px snap the app's comment records). The
+     *  16px margin skirt retires in step so a collapsed panel moves no row. */
+    function expandSlide(node, { duration = 460 } = {}) {
+        if (reducedMotion()) return { duration: 1 };
+        let full = node.scrollHeight;
+        const skirt = parseFloat(getComputedStyle(node).marginBottom) || 0;
+        return {
+            duration,
+            easing: quintOut,
+            tick: (t, u) => {
+                full = Math.max(full, node.scrollHeight);
+                if (t === 1) {
+                    node.style.cssText = node.style.cssText.replace(
+                        /(?:overflow|height|min-height|opacity|transform|margin-bottom):[^;]*;?/g,
+                        "",
+                    );
+                    return;
+                }
+                node.style.overflow = "hidden";
+                node.style.minHeight = "0px";
+                node.style.height = `${t * full}px`;
+                node.style.opacity = `${Math.min(1, t / 0.74)}`;
+                node.style.transform = `translateY(${-8 * u}px)`;
+                node.style.marginBottom = `${skirt * t}px`;
+            },
+        };
     }
+
+    /** The waterfall, as an action so it runs however the panel came to exist
+     *  (CatalogArtist `staggerIn` — an `in:` transition misses first renders).
+     *  To each element's OWN resting opacity: .rail-glow rests at 0.32, and
+     *  animating it to 1 is the bright-then-dark bleed. */
+    function staggerIn(node) {
+        if (reducedMotion()) return;
+        for (const { sel, delay, lift } of SWAP_PARTS) {
+            for (const el of node.querySelectorAll(sel)) {
+                const rest = getComputedStyle(el).opacity || "1";
+                el.animate(
+                    [
+                        { opacity: 0, transform: lift ? "translateY(7px)" : "none" },
+                        { opacity: rest, transform: "none" },
+                    ],
+                    {
+                        duration: SWAP_MS * 0.7,
+                        delay: delay * (SWAP_MS / 360),
+                        easing: SWAP_EASE,
+                        fill: "backwards",
+                    },
+                );
+            }
+        }
+    }
+
+    /** One part of the swap, per track row — CatalogArtist `partIn`. */
+    function partIn(node, { delay = 0, duration = SWAP_MS * 0.7 } = {}) {
+        if (reducedMotion()) return { duration: 1 };
+        const rest = parseFloat(getComputedStyle(node).opacity) || 1;
+        return {
+            delay,
+            duration,
+            easing: quintOut,
+            css: (t, u) => `opacity: ${t * rest}; transform: translateY(${7 * u}px);`,
+        };
+    }
+
+    /** The outgoing panel of a same-row switch: out of flow so the incoming
+     *  one has the stage to itself — CatalogArtist `panelLeave`. */
+    function panelLeave(node) {
+        node.style.position = "absolute";
+        node.style.left = "0";
+        node.style.right = "0";
+        node.style.top = "0";
+        node.style.pointerEvents = "none";
+        return {
+            duration: reducedMotion() ? 1 : SWAP_MS * 0.4,
+            easing: quintOut,
+            css: (t) => `opacity: ${t}`,
+        };
+    }
+
+    /** Hold the stage at an eased height that TRACKS the panel rather than
+     *  animating once to a snapshot — CatalogArtist `followStageHeight`. */
+    function followStageHeight(stage, panel, fromH) {
+        const seq = String((+(stage.dataset.swapSeq || 0)) + 1);
+        stage.dataset.swapSeq = seq;
+        stage.style.overflow = "hidden";
+        stage.style.height = `${fromH}px`;
+        void stage.offsetHeight;
+        stage.style.transition = `height ${SWAP_MS}ms ${SWAP_EASE}`;
+        let settleTimer = 0;
+        let ro = null;
+        const finish = () => {
+            if (stage.dataset.swapSeq !== seq) return;
+            ro?.disconnect();
+            clearTimeout(settleTimer);
+            stage.style.transition = "";
+            stage.style.height = "";
+            stage.style.overflow = "";
+            delete stage.dataset.swapSeq;
+        };
+        const apply = () => {
+            if (stage.dataset.swapSeq !== seq) return;
+            const h = panel.getBoundingClientRect().height;
+            if (h > 0 && stage.style.height !== `${h}px`) stage.style.height = `${h}px`;
+            clearTimeout(settleTimer);
+            settleTimer = setTimeout(finish, SWAP_MS + 60);
+        };
+        ro = new ResizeObserver(apply);
+        ro.observe(panel);
+        apply();
+        setTimeout(finish, 4000);
+    }
+
+    /** The incoming panel of a same-row switch — CatalogArtist `panelEnter`:
+     *  Svelte only times this; staggerIn carries the visible motion. */
+    function panelEnter(node) {
+        const quick = reducedMotion();
+        const stage = node.parentElement;
+        const leaving = stage?.querySelector(".xp-panel[style*='absolute']");
+        if (stage && leaving && !quick) {
+            followStageHeight(stage, node, leaving.getBoundingClientRect().height);
+        }
+        return { duration: quick ? 1 : SWAP_MS, css: () => "" };
+    }
+
+    /** Lift the open row to the line under the pinned toolbar, 420ms. The
+     *  line is read off the BAR live each frame — its height depends on
+     *  whether the controls wrapped and whether the column header is joined —
+     *  and the min-height reserve is stood up before the first frame so the
+     *  scroll range can hold the target (the prototype's xpReveal). */
+    function revealIntoView(node) {
+        if (reducedMotion()) return;
+        const pane = node.closest(".content");
+        const row = node.previousElementSibling;
+        const host = node.parentElement;
+        if (!pane || !row) return;
+        const line = () => (toolbarEl
+            ? toolbarEl.getBoundingClientRect().bottom + 10
+            : pane.getBoundingClientRect().top + 100);
+        if (host) {
+            const need = Math.round(
+                row.getBoundingClientRect().top - host.getBoundingClientRect().top
+                + pane.clientHeight - (line() - pane.getBoundingClientRect().top),
+            );
+            if ((parseFloat(host.style.minHeight) || 0) < need) host.style.minHeight = `${need}px`;
+        }
+        const from = pane.scrollTop;
+        const t0 = performance.now();
+        let raf = requestAnimationFrame(function step(now) {
+            raf = null;
+            if (!node.isConnected) { if (host) host.style.minHeight = ""; return; }
+            const t = Math.min(1, (now - t0) / 420);
+            const ease = 1 - (1 - t) ** 3;
+            const want = pane.scrollTop + (row.getBoundingClientRect().top - line());
+            pane.scrollTop = from + (want - from) * ease;
+            if (t < 1) raf = requestAnimationFrame(step);
+        });
+        return { destroy() { if (raf) cancelAnimationFrame(raf); if (host) host.style.minHeight = ""; } };
+    }
+
+    // ---- playback ---------------------------------------------------------
+    function playOpen(startIndex = 0) {
+        if (!openAlbum || !openTracks.length) return;
+        playAlbum(openTracks, `${openAlbum.artist} — ${openAlbum.title}`, startIndex, openAlbum.art_path);
+    }
+    async function playWholeAlbum(album) {
+        try {
+            const tracks = album.id === openId && openTracks.length
+                ? openTracks
+                : await api.albumTracks(album.id);
+            if (tracks.length) playAlbum(tracks, `${album.artist} — ${album.title}`, 0, album.art_path);
+        } catch { /* backend unavailable */ }
+    }
+    const isPlayingTrack = (t) =>
+        player.track?.source === "local" && player.track?.path === t.path;
+    function folderOf(tracks) {
+        return tracks[0]?.path ?? null;
+    }
+
+    // ================================================================ chrome
+    // fit(), as reactive measurements: the toolbar's wrap is measured (a
+    // hard-coded breakpoint goes stale), --tb-h is MEASURED off the bar (a
+    // typed 50px parked the joined header behind a two-row bar at 1152), and
+    // the table drops columns by tier so a record's name is never squeezed out.
+    let pageEl = $state(null);
+    let toolbarEl = $state(null);
+    let narrow = $state(false);
+    let tbH = $state(50);
+    let paneH = $state(760);
+    let colsTier = $state("all");
+    const COL_TIERS = [
+        { name: "all", min: 960 },
+        { name: "b", min: 842 },
+        { name: "c", min: 686 },
+        { name: "d", min: 0 },
+    ];
+    function measureChrome() {
+        if (!pageEl || !toolbarEl) return;
+        const pane = pageEl.closest(".content");
+        if (pane) paneH = pane.clientHeight;
+        // Every child on the bar's first row; the column-tier decision first,
+        // because it changes the bar's height when the header is joined.
+        const room = pageEl.clientWidth;
+        colsTier = (COL_TIERS.find((t) => room >= t.min) ?? COL_TIERS[COL_TIERS.length - 1]).name;
+        const kids = [...toolbarEl.children].filter((el) => !el.classList.contains("lb-th"));
+        const gap = parseFloat(getComputedStyle(toolbarEl).columnGap) || 14;
+        const need = kids.reduce((n, el) => n + el.scrollWidth, 0) + gap * (kids.length - 1);
+        narrow = need > toolbarEl.clientWidth;
+        tbH = Math.round(toolbarEl.getBoundingClientRect().height);
+    }
+    $effect(() => {
+        if (!pageEl || !toolbarEl) return;
+        const ro = new ResizeObserver(measureChrome);
+        ro.observe(pageEl);
+        ro.observe(toolbarEl);
+        measureChrome();
+        return () => ro.disconnect();
+    });
+    $effect(() => {
+        // Structural knobs that change what the bar holds or the page's width.
+        void view; void group; void q; void narrow;
+        tick().then(measureChrome);
+    });
+
+    // ---- the index rail ---------------------------------------------------
+    // Every grouping gets a label; the 34px gutter is reserved by the page
+    // whether or not this grouping has anything to index, so no control click
+    // ever changes the width of the content column (handoff §4b.1).
+    const RAIL_LABEL = {
+        artist: (k) => k.replace(/^(the|a|an)\s+/i, "").charAt(0).toUpperCase(),
+        decade: (k) => (/^\d/.test(k) ? String(k).slice(0, 4) : "—"),
+        format: (k) => {
+            const [fmt, depth] = String(k).split(" ");
+            if (!/^[A-Z0-9]/.test(fmt)) return "—";
+            return depth ? fmt.slice(0, 2) + depth.slice(0, 2) : fmt.slice(0, 4);
+        },
+        rtype: (k) => String(k).slice(0, 3),
+        added: (k) => ((/\d{4}/.exec(k) || ["—"])[0]),
+    };
+    // Group = None indexes the SORT instead — the initial of the artist or
+    // title, the decade of the year, the year of a date.
+    const FLAT_INDEX = {
+        artist: (a) => (a.sortName || "?").charAt(0).toUpperCase(),
+        complete: (a) => (a.sortName || "?").charAt(0).toUpperCase(),
+        title: (a) => (a.title || "?").replace(/^(the|a|an)\s+/i, "").charAt(0).toUpperCase(),
+        year: (a) => (a.year ? String(Math.floor(a.year / 10) * 10) : "—"),
+        added: (a) => (a.added_at ? String(new Date(a.added_at * 1000).getFullYear()) : "—"),
+        played: (a) => (a.lastPlayedAt ? String(new Date(a.lastPlayedAt * 1000).getFullYear()) : "—"),
+        neglect: (a) => (a.lastPlayedAt ? String(new Date(a.lastPlayedAt * 1000).getFullYear()) : "never"),
+        format: (a) => ((a.formats[0] || "—").toUpperCase().slice(0, 4)),
+        rtype: (a) => String(CAT_ONE[a.cat] || "").slice(0, 3),
+    };
+    const flatAnchors = $derived.by(() => {
+        if (group !== "none") return null;
+        const fn = FLAT_INDEX[sortKey];
+        if (!fn || !grouped.length) return null;
+        const at = new Map();
+        const items = [];
+        const seen = new Set();
+        for (const a of grouped[0][1]) {
+            const l = fn(a);
+            if (!l || seen.has(l)) continue;
+            seen.add(l);
+            items.push(l);
+            at.set(a.id, l);
+        }
+        return items.length > 1 ? { items, at } : null;
+    });
+    const railItems = $derived.by(() => {
+        if (group === "none") {
+            return flatAnchors ? flatAnchors.items.map((l) => [l, l]) : [];
+        }
+        const label = RAIL_LABEL[group] ?? ((k) => String(k).slice(0, 4));
+        const seen = new Set();
+        const items = [];
+        for (const [k] of grouped) {
+            const l = label(k);
+            if (!l || seen.has(l)) continue;
+            seen.add(l);
+            items.push([l, k]);
+        }
+        return items.length > 1 ? items : [];
+    });
+    const anchorId = (k) => `libg-${String(k).replace(/[^a-zA-Z0-9]/g, "") || "x"}`;
+
+    /** A rail click LANDS: `content-visibility` makes unpainted heights an
+     *  estimate, so one scroll overshoots by up to ~1100px — correct until the
+     *  target stops moving, bail on the user's wheel (handoff §4b.2). */
+    function jumpTo(key) {
+        const pane = pageEl?.closest(".content");
+        if (!pane) return;
+        const id = anchorId(key);
+        const delta = () => {
+            const el = document.getElementById(id);
+            if (!el) return null;
+            const clear = parseFloat(getComputedStyle(el).scrollMarginTop) || 0;
+            const top = pane.getBoundingClientRect().top
+                + parseFloat(getComputedStyle(pane).paddingTop || 0);
+            return el.getBoundingClientRect().top - top - clear;
+        };
+        const first = delta();
+        if (first == null) return;
+        pane.scrollTo({ top: pane.scrollTop + first, behavior: "smooth" });
+        let quiet = 0;
+        let frames = 0;
+        let cancelled = false;
+        const stop = () => { cancelled = true; };
+        pane.addEventListener("wheel", stop, { passive: true });
+        const settle = () => {
+            if (cancelled) return pane.removeEventListener("wheel", stop);
+            const d = delta();
+            if (d == null) return pane.removeEventListener("wheel", stop);
+            if (Math.abs(d) > 1) { pane.scrollTop += d; quiet = 0; } else quiet++;
+            if (quiet < 8 && frames++ < 90) requestAnimationFrame(settle);
+            else pane.removeEventListener("wheel", stop);
+        };
+        setTimeout(settle, 420);
+    }
+
+    // ---- the entrance: Wave -----------------------------------------------
+    // The records arrive in a sweep down (and slightly across) the screen the
+    // reader is looking at; the chrome — hero, toolbar, column header — never
+    // moves. Delay comes from POSITION, normalized to the topmost thing that
+    // is both moving and on screen; delays are pulled forward over the next
+    // few frames as content-visibility geometry lands (handoff §4b.5b-5d).
+    const WAVE = { rise: 14, dur: 300, span: 420, skew: 0.18 };
+    const DEAL_SEL = ".lib-shelf-head, .lib-subhead, .lib-group-rule, .release,"
+        + " .lb-tr:not(.lb-th), .album-expander, .lib-gapline, .lib-more";
+    let dealSeq = $state(1);
+    let dealGen = 0;
+    function bumpDeal() { dealSeq++; }
+    $effect(() => {
+        void dealSeq;
+        if (!pageEl || reducedMotion()) return;
+        const gen = ++dealGen;
+        tick().then(() => { if (gen === dealGen) dealEntrance(); });
+    });
+    function dealEntrance() {
+        const pane = pageEl?.closest(".content");
+        if (!pane) return;
+        const gen = dealGen;
+        const anims = runDeal(pane, null);
+        let n = 0;
+        const retime = () => {
+            if (gen !== dealGen) return;
+            runDeal(pane, anims);
+            if (++n < 5) requestAnimationFrame(retime);
+        };
+        requestAnimationFrame(retime);
+    }
+    function runDeal(pane, existing) {
+        const box = pane.getBoundingClientRect();
+        const slack = box.height;
+        const items = [];
+        for (const el of pageEl.querySelectorAll(DEAL_SEL)) {
+            const r = el.getBoundingClientRect();
+            if (r.bottom <= box.top - slack || r.top >= box.bottom + slack) continue;
+            const dy = Math.max(0, Math.min(1, (r.top - box.top) / Math.max(1, box.height)));
+            const dx = Math.max(0, Math.min(1, (r.left - box.left) / Math.max(1, box.width)));
+            items.push({
+                el,
+                score: dy * (1 - WAVE.skew) + dx * WAVE.skew,
+                inView: r.bottom > box.top && r.top < box.bottom,
+            });
+        }
+        const out = existing || new Map();
+        if (!items.length) return out;
+        const seen = items.filter((it) => it.inView);
+        const first = Math.min(...(seen.length ? seen : items).map((it) => it.score));
+        for (const { el, score } of items) {
+            const delay = Math.round(Math.max(0, score - first) * WAVE.span);
+            const prev = out.get(el);
+            if (!prev) {
+                // On a retime pass, never START one: an element outside the
+                // slack a frame ago is at full strength now, and animating it
+                // from zero would be a flash rather than an entrance.
+                if (existing) continue;
+                out.set(el, el.animate(
+                    [
+                        { opacity: 0, transform: `translateY(${WAVE.rise}px)` },
+                        { opacity: 1, transform: "none" },
+                    ],
+                    { duration: WAVE.dur, delay, easing: "cubic-bezier(.2,.7,.3,1)", fill: "backwards" },
+                ));
+            } else {
+                const was = prev.effect.getTiming().delay;
+                // Closer is a skip-ahead; back is a rewind — allowed only while
+                // the thing has not arrived yet, where it is invisible.
+                const hidden = (prev.currentTime || 0) < was;
+                if (delay < was - 8 || (hidden && delay > was + 8)) {
+                    prev.effect.updateTiming({ delay });
+                }
+            }
+        }
+        return out;
+    }
+
+    // ---- header actions ---------------------------------------------------
+    async function rescan() {
+        if (rescanning) return;
+        rescanning = true;
+        try {
+            await refreshLibrary();
+            await loadStats();
+        } finally {
+            rescanning = false;
+        }
+    }
+
+    // ---- boot -------------------------------------------------------------
+    $effect(() => {
+        loadStats();
+        loadFollowNames();
+    });
+
+    // Close popovers on outside interaction.
+    function onWindowClick(e) {
+        if (menuOpen && !e.target.closest(".sortwrap")) menuOpen = false;
+    }
+
+    const PER_SHELF = 18;
 </script>
 
-    <div class="library">
-            <h1>Artists</h1>
-            {#if libraryStore.albums.length === 0}
-            <div class="empty">
-                <p class="big">Your music will live here</p>
-                <p class="sub">Download an album from Search and it lands here, tagged with art.</p>
-            </div>
+<svelte:window onclick={onWindowClick} />
+
+{#snippet cover(a, size)}
+    {#if a.art_path}
+        {#if coverUrls[a.id]}
+            <img class="cover" src={coverUrls[a.id]} alt="" loading="lazy" draggable="false" />
+        {:else}
+            <div class="cover gen-pending"></div>
+        {/if}
+    {:else}
+        {@const g = genFor(a)}
+        <div class="cover lib-gen" data-pat={g.pat} style="--h1:{g.hue};--h2:{g.hue2}">
+            <span class="lib-gen-glyph"><Icon name={g.icon} size={Math.round(size * 0.3)} /></span>
+        </div>
+    {/if}
+{/snippet}
+
+{#snippet releaseCard(a, sectionKey)}
+    <div
+        class="release"
+        class:active={openId === a.id}
+        style={!a.art_path ? genAccent(a) : undefined}
+        id={flatAnchors?.at.get(a.id) ? anchorId(flatAnchors.at.get(a.id)) : undefined}
+        role="button"
+        tabindex="0"
+        use:loadCover={a}
+        title={openId === a.id ? "Close" : `Open ${a.title}`}
+        onclick={() => toggleExpander(a)}
+        onkeydown={(e) => (e.key === "Enter" || e.key === " ") && toggleExpander(a)}
+    >
+        <div class="cover-wrap">
+            {#if chipFor(a)}<span class="ed-badge">{chipFor(a)}</span>{/if}
+            {@render cover(a, CARD_W)}
+            <button
+                class="hoverplay"
+                title="Play"
+                onclick={(e) => { e.stopPropagation(); playWholeAlbum(a); }}
+            ><Icon name="play" size={13} /></button>
+        </div>
+        <div class="title" title={a.title}>{a.title}</div>
+        <div class="sub">{subFor(a)}</div>
+    </div>
+{/snippet}
+
+{#snippet gapCard(r)}
+    <div class="release gap" role="listitem" title={`${r.title} — not in your library`}>
+        <div class="cover-wrap">
+            {#if r.date?.slice(0, 4) || r.release_date?.slice(0, 4)}
+                <span class="ed-badge">{(r.release_date ?? r.date).slice(0, 4)}</span>
+            {/if}
+            {#if r.cover}
+                <img class="cover" src={r.cover} alt="" loading="lazy" draggable="false" />
             {:else}
-            <p class="artist-count">{artists.length} artists</p>
-            <div class="artist-grid">
-                {#each artists as artist (artist.name)}
-                    <button
-                        class="artist-card"
-                        use:loadArtistArt={artist}
-                        class:selected={expandedArtist === artist.name}
-                        aria-expanded={expandedArtist === artist.name}
-                        onclick={() => toggleArtist(artist.name)}
-                    >
-                        {#if artistArtUrls[artist.name]}
-                            <img class="artist-art" src={artistArtUrls[artist.name]} alt="" draggable="false" />
-                        {:else}
-                            <div class="artist-art placeholder"><Icon name="music" size={30} /></div>
+                <div class="cover placeholder"><Icon name="disc" size={30} /></div>
+            {/if}
+        </div>
+        <div class="title" title={r.title}>{r.title}</div>
+        <div class="sub">
+            {#if fileRelease({ title: r.title, record_type: r.record_type, track_count: r.nb_tracks }) !== "other"}
+                {CAT_ONE[fileRelease({ title: r.title, record_type: r.record_type, track_count: r.nb_tracks })]}
+            {/if}
+        </div>
+    </div>
+{/snippet}
+
+{#snippet expander(items, sectionKey)}
+    <div
+        class="album-expander"
+        transition:expandSlide={{ duration: 460 }}
+        use:revealIntoView
+    >
+        <!-- In List a row spans the pane, so the notch sits under the row's
+             ARTWORK (10px inset + half the 26px thumb − half the notch). -->
+        <span class="notch" style="left: {sectionKey === 'list' ? '17px' : notchLeft(items, sectionKey)}"></span>
+        <div class="xp-stage">
+            {#key openId}
+                <div class="xp-panel" use:staggerIn in:panelEnter out:panelLeave>
+                    <div class="xp-body">
+                        <div class="xp-rail">
+                            {#if openAlbum?.art_path && coverUrls[openAlbum.id]}
+                                <img class="rail-glow" src={coverUrls[openAlbum.id]} alt="" aria-hidden="true" draggable="false" />
+                            {:else if openAlbum && !openAlbum.art_path}
+                                {@const g = genFor(openAlbum)}
+                                <div class="rail-glow lib-gen" data-pat={g.pat} style="--h1:{g.hue};--h2:{g.hue2}" aria-hidden="true"></div>
+                            {/if}
+                            <div class="rail-shade"></div>
+                            <div class="rail-art-stage">
+                                {#if openAlbum?.art_path && coverUrls[openAlbum.id]}
+                                    <img class="rail-art" src={coverUrls[openAlbum.id]} alt="" draggable="false" />
+                                {:else if openAlbum}
+                                    {@const g = genFor(openAlbum)}
+                                    <div class="rail-art lib-gen" data-pat={g.pat} style="--h1:{g.hue};--h2:{g.hue2}">
+                                        <span class="lib-gen-glyph"><Icon name={g.icon} size={62} /></span>
+                                    </div>
+                                {/if}
+                            </div>
+                            <h3 class="rail-title">
+                                <span class="rail-title-text">{openAlbum?.title ?? ""}</span>
+                            </h3>
+                            <p class="rail-meta">
+                                {openAlbum?.year ?? "no year"}{openTracks.length
+                                    ? ` · ${openTracks.length} tracks`
+                                    : openAlbum?.track_count
+                                      ? ` · ${openAlbum.track_count} tracks`
+                                      : ""}{openAlbum?.secs ? ` · ${dur(openAlbum.secs)}` : ""}
+                            </p>
+                            {#if openAlbum && (openAlbum.bytes || openAlbum.avgKbps)}
+                                <!-- The artist page's stat pair, carrying what a
+                                     FILE knows instead of what Last.fm knows. -->
+                                <div class="rail-stats">
+                                    {#if openAlbum.bytes}
+                                        <span class="rail-stat"><b>{fmtBytes(openAlbum.bytes)}</b><i>on disk</i></span>
+                                    {/if}
+                                    {#if openAlbum.bytes && openAlbum.avgKbps}<span class="rail-stat-div"></span>{/if}
+                                    {#if openAlbum.avgKbps}
+                                        <span class="rail-stat"><b>{openAlbum.avgKbps}k</b><i>bitrate</i></span>
+                                    {/if}
+                                    {#if openAlbum.formats[0]}
+                                        <span class="rail-stat-note">{openAlbum.formats[0].toUpperCase()}{openAlbum.depth ? ` ${openAlbum.depth}` : ""}</span>
+                                    {/if}
+                                </div>
+                            {/if}
+                            <div class="rail-cta">
+                                <button class="pill grow" title="Play" onclick={() => playOpen(0)} disabled={!openTracks.length}>
+                                    <Icon name="play" size={12} /> Play
+                                </button>
+                                <button
+                                    class="pill ghost"
+                                    title="Show in folder"
+                                    disabled={!openTracks.length}
+                                    onclick={() => { const p = folderOf(openTracks); if (p) api.showInFolder(p); }}
+                                ><Icon name="folder-open" size={13} /></button>
+                            </div>
+                        </div>
+                        <div class="xp-tracks">
+                            {#if openLoading}
+                                {#if loadingVisible}
+                                    <div class="tracks-loading" role="status" aria-busy="true">
+                                        <div class="tl-head">
+                                            <span class="tl-ring" aria-hidden="true"></span> Loading tracks
+                                        </div>
+                                    </div>
+                                {/if}
+                            {:else if openTracks.length}
+                                <div class="tl-cols" in:partIn={{ delay: 30 }}>
+                                    <span class="tno">#</span>
+                                    <span>Title</span>
+                                    <span class="tdur-head"><Icon name="clock" size={13} /></span>
+                                </div>
+                                {#each openTracks as t, ti (t.id)}
+                                    <div
+                                        class="trow"
+                                        class:now={isPlayingTrack(t)}
+                                        in:partIn={{ delay: Math.min(ti * 16, 180) }}
+                                        role="button"
+                                        tabindex="0"
+                                        title="Play"
+                                        onclick={() => playOpen(ti)}
+                                        onkeydown={(e) => e.key === "Enter" && playOpen(ti)}
+                                    >
+                                        <span class="tno">{isPlayingTrack(t) ? "♫" : (t.track_no ?? "·")}</span>
+                                        <span class="ttitle">
+                                            {t.title}
+                                            {#if t.bitrate_kbps}
+                                                <span class="tk-rate">{(t.path.split(".").pop() || "").toUpperCase()} {t.bitrate_kbps}k{t.bit_depth ? ` · ${t.bit_depth}-bit` : ""}</span>
+                                            {/if}
+                                        </span>
+                                        <span class="tdur">{t.duration_secs ? dur(t.duration_secs) : "—"}</span>
+                                        <button
+                                            class="mini-btn play"
+                                            title="Play"
+                                            onclick={(e) => { e.stopPropagation(); playOpen(ti); }}
+                                        ><Icon name="play" size={13} /></button>
+                                        <button
+                                            class="mini-get"
+                                            title="Show in folder"
+                                            onclick={(e) => { e.stopPropagation(); api.showInFolder(t.path); }}
+                                        ><Icon name="folder-open" size={13} /></button>
+                                    </div>
+                                {/each}
+                            {:else}
+                                <div class="tracks-loading" role="status">
+                                    <div class="tl-head">No tracks found for this record</div>
+                                </div>
+                            {/if}
+                        </div>
+                    </div>
+                </div>
+            {/key}
+        </div>
+    </div>
+{/snippet}
+
+{#snippet cardGrid(items, sectionKey)}
+    <div class="grid" use:measureCols={sectionKey}>
+        {#each items as a, i (a.id)}
+            {@render releaseCard(a, sectionKey)}
+            {#if expanderIndex(items, sectionKey) === i}
+                {@render expander(items, sectionKey)}
+            {/if}
+        {/each}
+    </div>
+{/snippet}
+
+{#snippet gapSection(name, list)}
+    {@const follow = followFor(name)}
+    {#if follow}
+        {@const missing = gapRows[name]}
+        {@const total = gapTotals[name]?.total}
+        {@const count = missing ? missing.length : (total ? Math.max(0, total - list.length) : null)}
+        {#if count !== 0}
+            <button class="lib-gapline" onclick={() => toggleGaps(name)}>
+                {#if gapLoading[name]}
+                    <span class="tl-ring" aria-hidden="true"></span> Checking the catalogue
+                {:else if count != null}
+                    <b>{count}</b> more released
+                {:else}
+                    See what's missing
+                {/if}
+                <span class="lib-gapline-cta">
+                    {gapOpen[name] ? "hide" : "show"}
+                    <Icon name={gapOpen[name] ? "chevron-down" : "chevron-right"} size={12} />
+                </span>
+            </button>
+        {/if}
+        {#if gapOpen[name] && missing?.length}
+            <!-- Full-size cards, dimmed — the same card as everything else on
+                 the page, readable, full strength on hover (handoff §4d). -->
+            <div class="lib-gaps" role="list">
+                <div class="grid">
+                    {#each missing as r (r.id)}
+                        {@render gapCard(r)}
+                    {/each}
+                </div>
+            </div>
+        {/if}
+    {/if}
+{/snippet}
+
+{#snippet shelfHead(name, list)}
+    {@const follow = followFor(name)}
+    {@const total = group === "artist" ? gapTotals[name]?.total : null}
+    {@const secs = list.reduce((n, a) => n + a.secs, 0)}
+    {@const actionable = group === "artist" && !!follow}
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -- role="button" and
+         tabindex are set together, by the same `actionable` condition; the
+         analyzer cannot see that they travel as a pair. -->
+    <div
+        class="lib-shelf-head"
+        id={anchorId(name)}
+        role={actionable ? "button" : undefined}
+        tabindex={actionable ? 0 : undefined}
+        title={actionable ? `Open ${name}` : undefined}
+        onclick={actionable ? () => openCatalogArtist(follow.artistId, { id: follow.artistId, name }) : undefined}
+        onkeydown={actionable
+            ? (e) => (e.key === "Enter" || e.key === " ") && openCatalogArtist(follow.artistId, { id: follow.artistId, name })
+            : undefined}
+    >
+        <span class="lib-shelf-dot"><Icon name={group === "artist" ? "users" : "layers"} size={17} /></span>
+        <div>
+            <div class="n">
+                {name}
+                {#if group === "artist" && follow}<span class="lib-shelf-go"><Icon name="chevron-right" size={15} /></span>{/if}
+            </div>
+            <div class="note">
+                {#if total}{list.length} of {total} released{:else}{list.length} {list.length === 1 ? "album" : "albums"}{/if}{#if secs}&nbsp;· {longDur(secs)}{/if}
+            </div>
+            {#if total}
+                <span class="lib-own"><i style="width:{Math.min(100, (list.length / total) * 100).toFixed(1)}%"></i></span>
+            {/if}
+        </div>
+    </div>
+{/snippet}
+
+<div
+    class="lib-page"
+    bind:this={pageEl}
+    data-cols={colsTier}
+    style="--tb-h:{tbH}px; --pane-h:{paneH}px"
+>
+    {#if ambUrl}
+        <div class="lib-ambience" style="background-image:url({ambUrl})"></div>
+        <div class="lib-ambience-glow"></div>
+    {/if}
+
+    {#if libraryStore.albums.length === 0}
+        <div class="lib-empty-lib">
+            <p class="big">Your music will live here</p>
+            <p class="sub">Download an album from Search and it lands here, tagged with art.</p>
+        </div>
+    {:else}
+        <header class="lib-hero">
+            <div class="lib-hero-top">
+                <h1 class="lib-h1">Library</h1>
+                <div class="lib-tools">
+                    <label class="lib-search">
+                        <Icon name="search" size={15} />
+                        <input type="text" placeholder="Filter your library" bind:value={q} />
+                        {#if q}
+                            <button class="lib-clear" title="Clear" onclick={() => (q = "")}><Icon name="x" size={13} /></button>
                         {/if}
-                        <span class="artist-name">{artist.name}</span>
-                        <span class="artist-meta">{artist.albums.length} {artist.albums.length === 1 ? "album" : "albums"}</span>
+                    </label>
+                    <button class="lib-tool" title="Rescan the library" onclick={rescan} disabled={rescanning}>
+                        <Icon name="refresh" size={15} />
                     </button>
+                </div>
+            </div>
+            <div class="lib-stats">
+                <span class="lib-stat"><b>{totals.albums.toLocaleString()}</b><i>{totals.albums === 1 ? "album" : "albums"}</i></span>
+                <span class="lib-stat-div"></span>
+                <span class="lib-stat"><b>{totals.artists}</b><i>{totals.artists === 1 ? "artist" : "artists"}</i></span>
+                <span class="lib-stat-div"></span>
+                <span class="lib-stat"><b>{totals.tracks.toLocaleString()}</b><i>tracks</i></span>
+                {#if totals.secs}
+                    <span class="lib-stat-div"></span>
+                    <span class="lib-stat"><b>{longDur(totals.secs)}</b><i>of music</i></span>
+                {/if}
+                {#if totals.bytes}
+                    <span class="lib-stat-div"></span>
+                    <span class="lib-stat"><b>{fmtBytes(totals.bytes)}</b><i>on disk</i></span>
+                {/if}
+                {#if totals.never}
+                    <span class="lib-stat-div"></span>
+                    <span class="lib-stat"><b>{totals.never}</b><i>never played</i></span>
+                {/if}
+            </div>
+        </header>
+
+        <div class="lib-toolbar" bind:this={toolbarEl} data-narrow={narrow ? "1" : "0"}>
+            <div class="disco-tabs" role="tablist">
+                {#each [["shelves", "Shelves"], ["grid", "Grid"], ["list", "List"]] as [k, l] (k)}
+                    <button
+                        class="disco-tab"
+                        class:on={view === k}
+                        role="tab"
+                        aria-selected={view === k}
+                        onclick={() => setView(k)}
+                    >{l}</button>
                 {/each}
             </div>
-            {@const selected = artists.find((a) => a.name === expandedArtist)}
-            <section class="artist-albums" class:open={!!selected} aria-hidden={!selected}>
-                {#if selected}
-                        <div class="artist-albums-head">
-                            <div><h2>{selected.name}</h2><p>{selected.albums.length} albums</p></div>
-                            <button class="close-expand" onclick={() => (expandedArtist = null)}>×</button>
-                        </div>
-                        <div class="album-strip">
-                            {#each selected.albums as a (a.id)}
-                                <AlbumCard album={a} onselect={selectInlineAlbum} />
+            <div class="lib-controls">
+                <span class="lib-ctl-lab">Group</span>
+                <div class="lib-seg">
+                    {#each Object.entries(GROUPS) as [k, g] (k)}
+                        <button class:on={group === k} onclick={() => setGroup(k)}>{g.label}</button>
+                    {/each}
+                </div>
+                <span class="lib-ctl-lab">Sort</span>
+                <div class="sortwrap">
+                    <button class="sortbtn" onclick={(e) => { e.stopPropagation(); menuOpen = !menuOpen; }}>
+                        {SORTS[sortKey].label} <Icon name="playlist" size={15} />
+                    </button>
+                    {#if menuOpen}
+                        <div class="menu" role="menu">
+                            <div class="mgroup">Sort by</div>
+                            {#each Object.entries(SORTS) as [k, s] (k)}
+                                <button
+                                    role="menuitem"
+                                    onclick={() => {
+                                        if (sortKey === k) desc = !desc;
+                                        else { sortKey = k; desc = s.desc !== false; }
+                                        menuOpen = false;
+                                    }}
+                                >
+                                    {s.label}
+                                    {#if sortKey === k}
+                                        <span class="mcheck" class:up={!desc}><Icon name="chevron-down" size={13} /></span>
+                                    {/if}
+                                </button>
                             {/each}
                         </div>
-                        {#if inlineAlbum && selected.albums.some((a) => a.id === inlineAlbum.id)}
-                            <div class="inline-tracklist" transition:slide={{ duration: 180 }}>
-                                <div class="inline-track-head">
-                                    <div>
-                                        <h3>{inlineAlbum.title}</h3>
-                                        <p>{inlineAlbum.track_count} tracks{inlineAlbum.year ? ` · ${inlineAlbum.year}` : ""}</p>
-                                    </div>
-                                    <button
-                                        class="inline-play"
-                                        onclick={() => playAlbum(inlineTracks, `${inlineAlbum.artist} — ${inlineAlbum.title}`, 0, inlineAlbum.art_path)}
-                                        disabled={inlineTracks.length === 0}
-                                    >▶ Play</button>
-                                </div>
-                                <div class="inline-tracks">
-                                    {#each inlineTracks as t, i (t.id)}
-                                        <button
-                                            class="inline-track"
-                                            onclick={() => playAlbum(inlineTracks, `${inlineAlbum.artist} — ${inlineAlbum.title}`, i, inlineAlbum.art_path)}
-                                        >
-                                            <span class="inline-tno">{t.track_no ?? "·"}</span>
-                                            <span class="inline-ttitle">{t.title}</span>
-                                            <span class="inline-tmeta">{fmtDuration(t.duration_secs)}</span>
-                                        </button>
-                                    {/each}
-                                </div>
-                            </div>
-                        {/if}
-                {/if}
-            </section>
+                    {/if}
+                </div>
+                <button class="lib-dir" class:up={!desc} title="Reverse order" onclick={() => (desc = !desc)}>
+                    <Icon name="chevron-down" size={14} />
+                </button>
+            </div>
+            {#if view === "list"}
+                <!-- The column header is the bar's own last row: one box, one
+                     pin — it cannot drift from the bar or hide behind it at
+                     any width (handoff §4b.3, Kyle's pick). -->
+                <div class="lb-tr lb-th">
+                    <span></span><span>Record</span><span>Artist</span><span>Type</span><span>Year</span><span>#</span>
+                    <span>Length</span><span>Format</span><span>Rate</span><span>Size</span><span>Added</span>
+                </div>
             {/if}
-    </div>
+        </div>
+
+        {#if railItems.length}
+            <div class="year-rail"><div class="yr-col">
+                {#each railItems as [l, k] (k)}
+                    <button onclick={() => jumpTo(k)}>{l}</button>
+                {/each}
+            </div></div>
+        {/if}
+
+        {#if corpus.length === 0}
+            <div class="lib-empty">
+                <span class="icon"><Icon name="search" size={26} /></span>
+                <p>Nothing matches <b>{q}</b></p>
+            </div>
+        {:else if view === "shelves"}
+            {#each grouped as [name, list] (name)}
+                {@const shown = expandedShelves[name] ? list : list.slice(0, PER_SHELF)}
+                <section class="lib-shelf">
+                    {#if name}{@render shelfHead(name, list)}{/if}
+                    {#if group === "artist"}
+                        {#each splitByCategory(shown) as [label, part] (label ?? "all")}
+                            {#if label}
+                                <div class="lib-subhead">{label}<span>{part.length}</span></div>
+                            {/if}
+                            {@render cardGrid(part, `${name}:${label ?? "all"}`)}
+                        {/each}
+                    {:else}
+                        {@render cardGrid(shown, name || "flat")}
+                    {/if}
+                    {#if list.length > shown.length}
+                        <button class="lib-more" onclick={() => (expandedShelves = { ...expandedShelves, [name]: true })}>
+                            Show {list.length - shown.length} more <Icon name="chevron-down" size={13} />
+                        </button>
+                    {/if}
+                    {#if group === "artist"}
+                        {@render gapSection(name, list)}
+                    {/if}
+                </section>
+            {/each}
+        {:else if view === "grid"}
+            {#each grouped as [name, list] (name)}
+                <section class="lib-sec">
+                    {#if name}
+                        <div class="lib-group-rule" id={anchorId(name)}>{name}<span>{list.length}</span></div>
+                    {/if}
+                    {@render cardGrid(list, name || "flat")}
+                </section>
+            {/each}
+        {:else}
+            <div class="lib-table">
+                {#each grouped as [name, list] (name)}
+                    <section class="lib-sec">
+                        {#if name}
+                            <div class="lib-group-rule" id={anchorId(name)}>{name}<span>{list.length}</span></div>
+                        {/if}
+                        {#each list as a (a.id)}
+                            <div
+                                class="lb-tr"
+                                class:active={openId === a.id}
+                                id={flatAnchors?.at.get(a.id) ? anchorId(flatAnchors.at.get(a.id)) : undefined}
+                                role="button"
+                                tabindex="0"
+                                use:loadCover={a}
+                                onclick={() => toggleExpander(a)}
+                                onkeydown={(e) => (e.key === "Enter" || e.key === " ") && toggleExpander(a)}
+                            >
+                                <span class="lb-cell lb-thumb">
+                                    {#if a.art_path && coverUrls[a.id]}
+                                        <img src={coverUrls[a.id]} alt="" loading="lazy" draggable="false" />
+                                    {:else if !a.art_path}
+                                        {@const g = genFor(a)}
+                                        <span class="lib-gen mini" data-pat={g.pat} style="--h1:{g.hue};--h2:{g.hue2}"></span>
+                                    {:else}
+                                        <Icon name="disc" size={15} />
+                                    {/if}
+                                </span>
+                                <span class="lb-cell lb-strong">{a.title}</span>
+                                <span class="lb-cell">{a.artist}</span>
+                                <span class="lb-cell">{CAT_ONE[a.cat]}</span>
+                                <span class="lb-cell num">{a.year ?? "—"}</span>
+                                <span class="lb-cell num">{a.track_count || "—"}</span>
+                                <span class="lb-cell num">{a.secs ? dur(a.secs) : "—"}</span>
+                                <span class="lb-cell">
+                                    {#if a.formats[0]}
+                                        <span class="lb-fmt" class:hi={a.depth?.startsWith("24")}>
+                                            {a.formats[0].toUpperCase()}{#if a.depth}<i>{a.depth}</i>{/if}
+                                        </span>
+                                    {:else}—{/if}
+                                </span>
+                                <span class="lb-cell num">{a.avgKbps ? `${a.avgKbps}k` : "—"}</span>
+                                <span class="lb-cell num">{fmtBytes(a.bytes)}</span>
+                                <span class="lb-cell num">{since(a.added_at)}</span>
+                            </div>
+                            {#if openId === a.id}
+                                {@render expander([a], "list")}
+                            {/if}
+                        {/each}
+                    </section>
+                {/each}
+            </div>
+        {/if}
+    {/if}
+</div>
 
 <style>
-    h1 {
-        font-size: 28px;
-        font-weight: 800;
-        margin-bottom: 24px;
+    /* ===================================================== the page frame
+       A "start BELOW the bar" page whose AMBIENCE runs to the very top behind
+       the frost — the discography's arrangement, so like it this page takes NO
+       pane padding-top (see App.svelte BAR_VIEWS) and carries its own inset. */
+    .lib-page {
+        position: relative;
+        --pad-top: calc(var(--bar-h, 46px) + 14px);
+        padding: var(--pad-top) 0 56px;
+        min-width: 0;
+        /* The toolbar pins 10px under the glass bar — two glass surfaces
+           reading as two objects. --tb-h is MEASURED by the page (a typed
+           height parked the joined header behind a two-row bar); --tb-clear is
+           what everything below the bar scrolls to. */
+        --tb-top: calc(var(--bar-h, 46px) - var(--pane-pad, 24px) + 10px);
+        --tb-clear: calc(var(--tb-top) + var(--tb-h, 50px) + 8px);
+        /* The index rail's gutter is reserved ALWAYS — the rail draws or does
+           not draw inside a gutter that never changes width, so no control
+           click moves the content column (handoff §4b.1). */
+        --rail-gutter: 34px;
+        padding-right: var(--rail-gutter);
     }
 
-    .empty {
+    /* ------------------------------------------------------------ ambience
+       The blurred most-recently-played cover behind the frost, faded out
+       before the shelves — the discography's recipe at the library's colour. */
+    .lib-ambience {
+        position: absolute;
+        left: -28px;
+        right: -28px;
+        top: calc(-1 * var(--pad-top));
+        height: 430px;
+        z-index: -1;
+        pointer-events: none;
+        background-size: cover;
+        background-position: center 30%;
+        filter: blur(90px) saturate(1.5);
+        opacity: 0.2;
+        transform: translateZ(0);
+        -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent);
+        mask-image: linear-gradient(180deg, #000 35%, transparent);
+    }
+    .lib-ambience-glow {
+        position: absolute;
+        left: -28px;
+        right: -28px;
+        top: calc(-1 * var(--pad-top));
+        height: 300px;
+        z-index: -1;
+        pointer-events: none;
+        background: radial-gradient(640px 260px at 14% 0%,
+            color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
+    }
+
+    /* ---------------------------------------------------------------- hero */
+    .lib-hero { padding-top: 4px; }
+    .lib-hero-top { display: flex; align-items: center; gap: 16px; }
+    .lib-h1 {
+        font-size: 31px;
+        font-weight: 800;
+        letter-spacing: -0.02em;
+        margin: 0;
+        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
+    }
+    .lib-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
+    .lib-search {
         display: flex;
-        flex-direction: column;
         align-items: center;
         gap: 8px;
-        padding-top: 15vh;
-        text-align: center;
+        height: 32px;
+        width: 250px;
+        padding: 0 11px;
+        background: color-mix(in srgb, var(--bg-elevated) 74%, transparent);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        color: var(--text-muted);
+        backdrop-filter: blur(6px);
+        transition: border-color 140ms ease, color 140ms ease;
     }
-
-    .big {
-        font-size: 22px;
+    .lib-search:focus-within { border-color: var(--accent); color: var(--text-secondary); }
+    .lib-search input {
+        flex: 1;
+        min-width: 0;
+        background: none;
+        border: 0;
+        outline: none;
+        color: var(--text-primary);
+        font: inherit;
+        font-size: 12.5px;
+        font-weight: 600;
+    }
+    .lib-search input::placeholder { color: var(--text-muted); font-weight: 500; }
+    .lib-clear { display: flex; color: var(--text-muted); cursor: pointer; }
+    .lib-clear:hover { color: var(--text-primary); }
+    .lib-tool {
+        display: inline-flex;
+        align-items: center;
+        gap: 7px;
+        height: 32px;
+        padding: 0 12px;
+        border-radius: 8px;
+        background: color-mix(in srgb, var(--bg-elevated) 74%, transparent);
+        border: 1px solid var(--border);
+        color: var(--text-secondary);
+        font-size: 12px;
         font-weight: 700;
+        cursor: pointer;
+        backdrop-filter: blur(6px);
+        transition: color 140ms ease, border-color 140ms ease;
     }
+    .lib-tool:hover { color: var(--text-primary); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
+    .lib-tool:disabled { opacity: 0.5; cursor: default; }
 
-    .sub {
-        color: var(--text-secondary);
+    /* The stat row — the album page's value/label idiom for the collection.
+       Derived numbers; the filter field moves every one of them. */
+    .lib-stats {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 8px 16px;
+        margin: 15px 0 20px;
     }
-
-    .artist-count {
-        color: var(--text-secondary);
-        font-size: 13px;
-        margin-top: -16px;
-        margin-bottom: 18px;
+    .lib-stat { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
+    .lib-stat b {
+        font-size: 15.5px;
+        font-weight: 800;
+        letter-spacing: -0.01em;
+        color: var(--text-primary);
+        font-variant-numeric: tabular-nums;
     }
-
-    .artist-grid {
-        display: grid;
-        /* Fixed tracks — fluid minmax(...,1fr) sawtooths card widths while
-           the window or side panels resize (see Home.svelte). */
-        grid-template-columns: repeat(auto-fill, 156px);
-        gap: 22px 18px;
-    }
-
-    .artist-card {
-        display: block;
-        width: 100%;
-        padding: 8px;
-        text-align: left;
-        color: inherit;
-        border-radius: 8px;
-        overflow: hidden;
-        transition: background 0.18s ease, transform 0.18s ease;
-    }
-
-    .artist-card:hover,
-    .artist-card.selected {
-        background: var(--bg-highlight);
-        transform: translateY(-2px);
-    }
-
-    .artist-art {
-        display: block;
-        width: 100%;
-        aspect-ratio: 1.28;
-        object-fit: cover;
-        border-radius: 8px;
-        background: linear-gradient(135deg, #2a2a2a, #3a3a3a);
-    }
-
-    .artist-art.placeholder {
-        display: grid;
-        place-items: center;
+    .lib-stat i {
+        font-style: normal;
+        font-size: 10.5px;
+        font-weight: 800;
+        letter-spacing: 0.07em;
+        text-transform: uppercase;
         color: var(--text-muted);
     }
+    .lib-stat-div {
+        width: 1px;
+        height: 17px;
+        flex: none;
+        background: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
+    }
 
-    .artist-name,
-    .artist-meta {
+    /* ------------------------------------------------------------- toolbar
+       A FLOATING ROUNDED CARD (the search hero's own words), pinned 10px
+       under the glass bar. It bleeds out by exactly its own padding so its
+       CONTENT sits on the page column while the card floats 14px wider. Its
+       minimum height is a CONSTANT — never --tb-h, which is measured off this
+       bar; feeding a measurement back into the property that decides it was a
+       ratchet (handoff trap #9). */
+    .lib-toolbar {
+        position: sticky;
+        top: var(--tb-top);
+        z-index: 6;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 10px 14px;
+        min-height: 50px;
+        margin: 0 -14px 26px;
+        padding: 9px 14px;
+        border-radius: 14px;
+        background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
+        backdrop-filter: blur(16px) saturate(1.2);
+        box-shadow:
+            inset 0 0 0 1px rgba(255, 255, 255, 0.06),
+            0 14px 34px rgba(0, 0, 0, 0.5);
+    }
+    /* ===== the discography's tab row (CatalogDiscography.svelte) ===== */
+    .disco-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
+    .disco-tab {
+        font-family: inherit;
+        font-size: 13px;
+        font-weight: 700;
+        line-height: 1;
+        white-space: nowrap;
+        padding: 8px 15px;
+        border-radius: 8px;
+        border: 1px solid transparent;
+        background: rgba(255, 255, 255, 0.05);
+        color: var(--text-secondary);
+        cursor: pointer;
+        transition: background 0.15s ease, color 0.15s ease;
+    }
+    .disco-tab:hover { background: rgba(255, 255, 255, 0.09); color: var(--text-primary); }
+    .disco-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+    .disco-tab.on {
+        color: #fff;
+        background: color-mix(in srgb, var(--accent) 34%, rgba(10, 10, 12, 0.5));
+        border-color: color-mix(in srgb, var(--accent) 60%, transparent);
+        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
+    }
+    .lib-toolbar .disco-tabs { flex: 0 0 auto; margin-bottom: 0; }
+
+    .lib-controls {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-left: auto;
+        min-width: 0;
+    }
+    /* Two rows when one will not do — MEASURED, not a breakpoint. The controls
+       take the full width so a wrapped bar reads as two deliberate rows. */
+    .lib-toolbar[data-narrow="1"] { flex-wrap: wrap; }
+    .lib-toolbar[data-narrow="1"] .lib-controls {
+        margin-left: 0;
+        width: 100%;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        row-gap: 9px;
+        padding-top: 2px;
+    }
+    .lib-toolbar[data-narrow="1"] .lib-seg {
+        overflow-x: auto;
+        scrollbar-width: none;
+        max-width: 100%;
+    }
+    .lib-toolbar[data-narrow="1"] .lib-seg::-webkit-scrollbar { height: 0; }
+    .lib-ctl-lab {
+        font-size: 10px;
+        font-weight: 800;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        margin-left: 2px;
+    }
+    .lib-seg {
+        display: flex;
+        gap: 3px;
+        padding: 3px;
+        min-width: 0;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 9px;
+    }
+    .lib-seg button {
+        height: 26px;
+        padding: 0 10px;
+        border-radius: 6px;
+        font-size: 11.5px;
+        font-weight: 700;
+        white-space: nowrap;
+        color: var(--text-muted);
+        cursor: pointer;
+        transition: color 120ms ease, background 120ms ease;
+    }
+    .lib-seg button:hover { color: var(--text-primary); }
+    .lib-seg button.on { color: var(--text-primary); background: rgba(255, 255, 255, 0.12); }
+    .lib-dir {
+        display: grid;
+        place-items: center;
+        width: 26px;
+        height: 26px;
+        border-radius: 7px;
+        color: var(--text-secondary);
+        cursor: pointer;
+        transition: transform 160ms ease, color 120ms ease;
+    }
+    .lib-dir:hover { color: var(--text-primary); background: var(--bg-highlight); }
+    .lib-dir.up :global(svg) { transform: rotate(180deg); }
+
+    /* ===== the sort menu (CatalogDiscography ← PlayerBar's popover) ===== */
+    .sortwrap { position: relative; flex: none; }
+    .sortbtn {
+        display: inline-flex;
+        align-items: center;
+        gap: 7px;
+        font-size: 13px;
+        font-weight: 700;
+        color: var(--text-secondary);
+        padding: 5px 8px;
+        border-radius: 6px;
+    }
+    .sortbtn:hover { color: var(--text-primary); background: var(--bg-highlight); }
+    .menu {
+        position: absolute;
+        top: calc(100% + 8px);
+        right: 0;
+        z-index: 40;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 186px;
+        padding: 7px;
+        border-radius: 9px;
+        background: #0d0d0d;
+        border: 1px solid var(--border);
+        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
+    }
+    .menu button {
+        display: flex;
+        align-items: center;
+        gap: 9px;
+        width: 100%;
+        padding: 6px 8px;
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--text-secondary);
+        text-align: left;
+    }
+    .menu button:hover { background: var(--bg-highlight); color: var(--text-primary); }
+    .menu .mgroup {
+        font-size: 10px;
+        font-weight: 800;
+        letter-spacing: 0.09em;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        padding: 6px 9px 3px;
+    }
+    .menu button .mcheck { margin-left: auto; display: inline-flex; color: var(--accent-hover); }
+    .menu button .mcheck.up { transform: rotate(180deg); }
+
+    /* ===== the index rail (CatalogDiscography.svelte), pointed at whatever
+       the page is grouped by ===== */
+    .year-rail {
+        position: sticky;
+        top: calc(var(--pane-h, 760px) / 2 - var(--pane-pad, 24px));
+        height: 0;
+        z-index: 4;
+    }
+    .year-rail .yr-col {
+        position: absolute;
+        right: calc(-1 * (16px + var(--rail-gutter)));
+        top: 0;
+        transform: translateY(-50%);
+        display: flex;
+        flex-direction: column;
+        gap: 1px;
+        align-items: flex-end;
+    }
+    .year-rail button {
+        font-size: 10.5px;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+        color: var(--text-muted);
+        padding: 1px 6px;
+        border-radius: 4px;
+        line-height: 1.6;
+        cursor: pointer;
+    }
+    .year-rail button:hover { color: var(--text-primary); background: var(--bg-highlight); }
+
+    /* ============================================================= shelves */
+    .lib-shelf { margin-top: 40px; content-visibility: auto; contain-intrinsic-size: auto 360px; }
+    .lib-shelf:first-of-type { margin-top: 2px; }
+    .lib-shelf-head {
+        display: flex;
+        align-items: center;
+        gap: 13px;
+        margin: 0 0 14px;
+        scroll-margin-top: var(--tb-clear);
+    }
+    .lib-shelf-head[role="button"] { cursor: pointer; }
+    .lib-shelf-dot {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        flex: none;
+        display: grid;
+        place-items: center;
+        background: var(--bg-elevated);
+        color: var(--text-muted);
+        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
+    }
+    .lib-shelf-head .n {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        font-size: 17px;
+        font-weight: 800;
+        letter-spacing: -0.01em;
+    }
+    .lib-shelf-go { display: inline-flex; color: var(--text-muted); opacity: 0; transition: opacity 140ms ease, transform 140ms ease; }
+    .lib-shelf-head[role="button"]:hover .lib-shelf-go { opacity: 1; transform: translateX(2px); }
+    .lib-shelf-head[role="button"]:hover .n { text-decoration: underline; text-underline-offset: 3px; }
+    .lib-shelf-head .note { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
+    /* The completeness the note states in words, shown: a quiet 3px bar. */
+    .lib-own {
         display: block;
-        padding: 0 4px;
+        width: 148px;
+        height: 3px;
+        margin-top: 7px;
+        border-radius: 2px;
+        background: rgba(255, 255, 255, 0.09);
+        overflow: hidden;
+    }
+    .lib-own i {
+        display: block;
+        height: 100%;
+        border-radius: 2px;
+        background: color-mix(in srgb, var(--accent) 75%, #fff 0%);
+    }
+    .lib-subhead {
+        display: flex;
+        align-items: center;
+        gap: 9px;
+        margin: 20px 0 10px;
+        padding-bottom: 6px;
+        font-size: 11px;
+        font-weight: 800;
+        letter-spacing: 0.09em;
+        text-transform: uppercase;
+        color: var(--text-secondary);
+        border-bottom: 1px solid transparent;
+        border-image: linear-gradient(90deg, var(--border), transparent 72%) 1;
+    }
+    .lib-subhead span { color: var(--text-muted); font-weight: 700; letter-spacing: 0; }
+    .lib-more {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        margin-top: 2px;
+        padding: 6px 12px;
+        border-radius: 8px;
+        font-size: 12px;
+        font-weight: 700;
+        color: var(--text-secondary);
+        background: rgba(255, 255, 255, 0.05);
+        cursor: pointer;
+    }
+    .lib-more:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.09); }
+    .lib-group-rule {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin: 22px 0 8px;
+        padding: 0 10px 6px;
+        border-bottom: 1px solid var(--border);
+        font-size: 11px;
+        font-weight: 800;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--text-secondary);
+        scroll-margin-top: var(--tb-clear);
+    }
+    .lib-group-rule span { color: var(--text-muted); font-weight: 700; letter-spacing: 0; }
+    .lib-sec { content-visibility: auto; contain-intrinsic-size: auto 360px; }
+
+    /* ===== the release grid (CatalogArtist.svelte): fixed 150px tracks,
+       margins carry the vertical rhythm so a collapsing expander leaves no
+       orphan gap ===== */
+    .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 150px);
+        column-gap: 16px;
+        row-gap: 0;
+        align-items: start;
+        align-content: start;
+        overflow-anchor: none;
+    }
+
+    /* ===== the release card (CatalogArtist.svelte), class for class ===== */
+    .release {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 16px;
+        padding: 9px;
+        border-radius: var(--radius);
+        cursor: pointer;
+        user-select: none;
+        transition: background 0.15s ease;
+        content-visibility: auto;
+        contain-intrinsic-size: 150px 210px;
+        scroll-margin-top: var(--tb-clear);
+    }
+    .release:hover,
+    .release:focus-visible { background: var(--bg-elevated); }
+    .release.active {
+        background: var(--bg-elevated);
+        box-shadow: inset 0 0 0 1.5px var(--accent);
+    }
+    .cover-wrap { position: relative; }
+    .cover {
+        display: block;
+        width: 100%;
+        aspect-ratio: 1;
+        object-fit: cover;
+        border-radius: 6px;
+    }
+    .cover.placeholder,
+    .cover.gen-pending {
+        display: grid;
+        place-items: center;
+        background: var(--bg-elevated);
+        color: var(--text-muted);
+    }
+    .title {
+        font-size: 13px;
+        font-weight: 700;
+        margin-top: 9px;
+        line-height: 1.3;
+        overflow-wrap: anywhere;
+    }
+    .sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
+    .ed-badge {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        z-index: 1;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        line-height: 1;
+        padding: 4px 7px;
+        border-radius: 6px;
+        font-size: 10.5px;
+        font-weight: 800;
+        font-variant-numeric: tabular-nums;
+        color: #fff;
+        background: color-mix(in srgb, var(--accent) 40%, rgba(10, 10, 12, 0.42));
+        backdrop-filter: blur(6px) saturate(1.6);
+        -webkit-backdrop-filter: blur(6px) saturate(1.6);
+        box-shadow:
+            inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
+            0 2px 8px rgba(0, 0, 0, 0.35);
+    }
+    .hoverplay {
+        position: absolute;
+        right: 8px;
+        bottom: 8px;
+        z-index: 2;
+        display: grid;
+        place-items: center;
+        width: 34px;
+        height: 34px;
+        border-radius: 50%;
+        background: var(--accent);
+        color: #000;
+        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
+        opacity: 0;
+        transform: translateY(4px);
+        transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
+    }
+    .hoverplay:hover { background: var(--accent-hover); }
+    .release:hover .hoverplay,
+    .release:focus-visible .hoverplay { opacity: 1; transform: none; }
+
+    /* ================================================== generated artwork
+       Deterministic from the record's own name; texture follows what the
+       thing IS (groove rings live, tape stripes bonus material, dot grain
+       otherwise). Approved on the prototype, ported whole. */
+    .lib-gen {
+        position: relative;
+        overflow: hidden;
+        display: grid;
+        place-items: center;
+        background:
+            radial-gradient(130% 100% at 18% 0%, hsl(var(--h1) 48% 37% / 0.85), transparent 56%),
+            radial-gradient(120% 130% at 100% 104%, hsl(var(--h2) 44% 19%), transparent 68%),
+            linear-gradient(152deg, hsl(var(--h1) 37% 24%), hsl(var(--h2) 33% 10%));
+    }
+    .lib-gen::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+        background-size: 3px 3px;
+    }
+    .lib-gen[data-pat="rings"]::before {
+        background: repeating-radial-gradient(circle at 50% 50%,
+            rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 5px);
+    }
+    .lib-gen[data-pat="tape"]::before {
+        background: repeating-linear-gradient(-38deg,
+            rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 10px);
+    }
+    .lib-gen::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        box-shadow:
+            inset 0 0 0 1px rgba(255, 255, 255, 0.07),
+            inset 0 26px 46px -30px rgba(255, 255, 255, 0.09);
+    }
+    .lib-gen-glyph { color: rgba(255, 255, 255, 0.3); display: flex; position: relative; z-index: 1; }
+    .lib-gen.mini { width: 100%; height: 100%; border-radius: 4px; }
+
+    /* ===================================================== the gap summary
+       Records you do not own: one line at the end of the shelf, opening into
+       FULL-SIZE cards dimmed to readable — full strength on hover. */
+    .lib-gapline {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        width: 100%;
+        margin-top: 4px;
+        padding: 8px 10px;
+        border-radius: 8px;
+        font-size: 12.5px;
+        color: var(--text-secondary);
+        cursor: pointer;
+    }
+    .lib-gapline b { font-weight: 800; color: var(--text-primary); }
+    .lib-gapline::after {
+        content: "";
+        flex: 1;
+        height: 1px;
+        background: linear-gradient(90deg, var(--border), transparent 85%);
+    }
+    .lib-gapline:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.04); }
+    .lib-gapline-cta {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        order: 2;
+        font-size: 11.5px;
+        font-weight: 700;
+        color: var(--text-muted);
+    }
+    .lib-gapline:hover .lib-gapline-cta { color: var(--text-primary); }
+    .lib-gaps { margin-top: 12px; }
+    .lib-gaps .release.gap { opacity: 0.44; transition: opacity 150ms ease; cursor: default; }
+    .lib-gaps .release.gap:hover { opacity: 1; background: none; }
+
+    /* ============================================================ the table
+       The power-user surface: every column is something the files carry. The
+       template lives on the PAGE (data-cols), above both the joined header
+       and the rows, so the two can never be laid out differently — a 1fr
+       column floors at min-content and RECORD is wider than an ellipsized
+       title (handoff §4b.4). Columns in order:
+         1 art · 2 Record · 3 Artist · 4 Type · 5 Year · 6 # · 7 Length
+         8 Format · 9 Rate · 10 Size · 11 Added */
+    .lib-table { margin-top: 2px; }
+    .lb-tr {
+        display: grid;
+        gap: 10px;
+        align-items: center;
+        height: 36px;
+        padding: 0 10px;
+        border-radius: 7px;
+        font-size: 12.5px;
+        cursor: pointer;
+    }
+    .lib-page[data-cols="all"] .lb-tr {
+        grid-template-columns: 34px minmax(150px, 1fr) 150px 70px 46px 40px 56px 96px 58px 66px 74px;
+    }
+    .lib-page[data-cols="b"] .lb-tr {
+        grid-template-columns: 34px minmax(150px, 1fr) 150px 70px 46px 56px 96px 66px 74px;
+    }
+    .lib-page[data-cols="c"] .lb-tr {
+        grid-template-columns: 34px minmax(150px, 1fr) 150px 46px 56px 96px 74px;
+    }
+    .lib-page[data-cols="d"] .lb-tr {
+        grid-template-columns: 34px minmax(120px, 1fr) 150px 46px 96px;
+    }
+    .lib-page[data-cols="b"] .lb-tr > :nth-child(6),
+    .lib-page[data-cols="b"] .lb-tr > :nth-child(9),
+    .lib-page[data-cols="c"] .lb-tr > :nth-child(4),
+    .lib-page[data-cols="c"] .lb-tr > :nth-child(6),
+    .lib-page[data-cols="c"] .lb-tr > :nth-child(9),
+    .lib-page[data-cols="c"] .lb-tr > :nth-child(10),
+    .lib-page[data-cols="d"] .lb-tr > :nth-child(4),
+    .lib-page[data-cols="d"] .lb-tr > :nth-child(6),
+    .lib-page[data-cols="d"] .lb-tr > :nth-child(7),
+    .lib-page[data-cols="d"] .lb-tr > :nth-child(9),
+    .lib-page[data-cols="d"] .lb-tr > :nth-child(10),
+    .lib-page[data-cols="d"] .lb-tr > :nth-child(11) { display: none; }
+    .lb-tr:not(.lb-th) {
+        content-visibility: auto;
+        contain-intrinsic-size: auto 36px;
+        scroll-margin-top: var(--tb-clear);
+    }
+    .lb-tr:not(.lb-th):hover { background: var(--bg-highlight); }
+    .lb-tr.active {
+        background: var(--bg-elevated);
+        box-shadow: inset 0 0 0 1.5px var(--accent);
+    }
+    /* The joined column header: the bar's own last row, bleeding to the
+       card's edges; 24px left padding puts its columns back on the rows' x
+       (the card starts at -14, the rows pad 10). */
+    .lib-toolbar .lb-th {
+        order: 9;
+        flex: 0 0 calc(100% + 28px);
+        height: auto;
+        margin: 0 -14px -9px;
+        padding: 8px 24px 9px;
+        border-top: 1px solid rgba(255, 255, 255, 0.07);
+        color: var(--text-muted);
+        font-size: 10.5px;
+        font-weight: 800;
+        letter-spacing: 0.07em;
+        text-transform: uppercase;
+        cursor: default;
+    }
+    .lb-th > span {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .lb-th > :nth-child(5), .lb-th > :nth-child(6), .lb-th > :nth-child(7),
+    .lb-th > :nth-child(9), .lb-th > :nth-child(10), .lb-th > :nth-child(11) { text-align: right; }
+    .lb-cell {
+        min-width: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: var(--text-secondary);
+    }
+    .lb-cell.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
+    .lb-strong { color: var(--text-primary); font-weight: 650; }
+    .lb-thumb {
+        width: 26px;
+        height: 26px;
+        border-radius: 4px;
+        overflow: hidden;
+        position: relative;
+        color: var(--text-muted);
+        display: flex;
+    }
+    .lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
+    .lb-fmt {
+        display: inline-flex;
+        align-items: baseline;
+        gap: 5px;
+        padding: 2px 8px;
+        border-radius: 5px;
+        background: rgba(255, 255, 255, 0.06);
+        font-size: 10.5px;
+        font-weight: 800;
+        letter-spacing: 0.04em;
+        color: var(--text-secondary);
+    }
+    .lb-fmt i {
+        font-style: normal;
+        font-weight: 700;
+        color: var(--text-muted);
+        font-variant-numeric: tabular-nums;
+    }
+    .lb-fmt.hi {
+        background: color-mix(in srgb, var(--accent) 15%, transparent);
+        color: var(--accent-hover);
+        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent);
+    }
+    .lb-fmt.hi i { color: color-mix(in srgb, var(--accent-hover) 70%, var(--text-secondary)); }
+    /* A panel that opens under a table row has no grid rhythm around it. */
+    .lib-table .album-expander { margin: 6px 0 16px; }
+
+    /* ====================================== the inline expander
+       CatalogArtist.svelte's, class for class — same numbers, same notch,
+       same rail recipe. Only the content differs (file facts, not Last.fm). */
+    .album-expander {
+        grid-column: 1 / -1;
+        position: relative;
+        margin-bottom: 16px;
+    }
+    .notch {
+        position: absolute;
+        top: -6px;
+        width: 12px;
+        height: 12px;
+        background: var(--bg-elevated);
+        border-left: 1px solid rgba(255, 255, 255, 0.08);
+        border-top: 1px solid rgba(255, 255, 255, 0.08);
+        transform: rotate(45deg);
+        transition: left 240ms cubic-bezier(0.33, 1, 0.4, 1);
+        animation: notch-fade 200ms ease 300ms backwards;
+    }
+    @keyframes notch-fade {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
+    .xp-stage { position: relative; }
+    .xp-panel {
+        position: relative;
+        background: var(--bg-elevated);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 10px;
+        overflow: hidden;
+    }
+    .xp-body {
+        display: grid;
+        grid-template-columns: 250px 1fr;
+    }
+    .xp-rail {
+        position: relative;
+        padding: 20px;
+        border-right: 1px solid rgba(255, 255, 255, 0.06);
+        display: flex;
+        flex-direction: column;
+        gap: 13px;
+        overflow: hidden;
+    }
+    .rail-glow {
+        position: absolute;
+        inset: -10%;
+        z-index: 0;
+        width: 120%;
+        height: 120%;
+        object-fit: cover;
+        filter: blur(38px) saturate(1.4);
+        opacity: 0.32;
+        pointer-events: none;
+    }
+    .rail-shade {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        background: linear-gradient(
+            180deg,
+            transparent 0%,
+            rgba(24, 24, 24, 0.55) 55%,
+            rgba(24, 24, 24, 0.92) 100%
+        );
+        pointer-events: none;
+    }
+    .xp-rail > :not(.rail-glow):not(.rail-shade) {
+        position: relative;
+        z-index: 1;
+    }
+    .rail-art-stage {
+        position: relative;
+        display: block;
+        width: 100%;
+        aspect-ratio: 1;
+        padding: 0;
+        border-radius: 8px;
+    }
+    .rail-art {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+        object-fit: cover;
+        display: block;
+        box-shadow: 0 18px 38px -18px rgba(0, 0, 0, 0.7);
+    }
+    div.rail-art { display: grid; place-items: center; }
+    .rail-title {
+        margin: 0;
+        font-size: 16.5px;
+        font-weight: 800;
+        line-height: 1.25;
+    }
+    .rail-meta {
+        margin: -7px 0 0;
+        font-size: 12.5px;
+        color: var(--text-secondary);
+        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+    }
+    .rail-stats {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+        margin-top: -4px;
+    }
+    .rail-stat { display: flex; flex-direction: column; line-height: 1.12; }
+    .rail-stat b {
+        font-size: 16px;
+        font-weight: 800;
+        color: var(--accent-hover);
+        font-variant-numeric: tabular-nums;
+        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+    }
+    .rail-stat i {
+        font-style: normal;
+        font-size: 10px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        font-weight: 700;
+        margin-top: 2px;
+    }
+    .rail-stat-div { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.12); }
+    .rail-stat-note {
+        font-size: 9.5px;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        border: 1px solid var(--border);
+        border-radius: 4px;
+        padding: 1px 5px;
+        font-weight: 700;
+    }
+    .rail-cta { display: flex; gap: 8px; }
+    .rail-cta .pill {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+    }
+    .pill {
+        background: var(--accent);
+        color: #000;
+        font-size: 11px;
+        font-weight: 700;
+        padding: 6px 14px;
+        border-radius: 14px;
+        white-space: nowrap;
+        cursor: pointer;
+    }
+    .pill:hover { background: var(--accent-hover); }
+    .pill.ghost { background: var(--bg-highlight); color: var(--text-primary); }
+    .pill.ghost:hover { background: var(--bg-press, #333); }
+    .pill.grow { flex: 1; }
+    .pill:disabled {
+        background: var(--bg-highlight);
+        color: var(--text-muted);
+        cursor: default;
+        opacity: 0.6;
+    }
+
+    /* ---- the tracklist ---- */
+    .xp-tracks { padding: 14px 16px; min-width: 0; }
+    .tl-cols {
+        display: grid;
+        grid-template-columns: 26px minmax(0, 1fr) 48px;
+        align-items: center;
+        gap: 12px;
+        padding: 0 10px 7px;
+        margin-bottom: 3px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+        font-size: 10px;
+        font-weight: 800;
+        letter-spacing: 0.09em;
+        text-transform: uppercase;
+        color: var(--text-muted);
+    }
+    .tdur-head { display: flex; justify-content: flex-end; }
+    .trow {
+        position: relative;
+        display: grid;
+        grid-template-columns: 26px minmax(0, 1fr) auto;
+        align-items: center;
+        gap: 12px;
+        padding: 7px 10px;
+        border-radius: 6px;
+        font-size: 13.5px;
+        cursor: pointer;
+    }
+    .trow:hover { background: var(--bg-highlight); }
+    .trow.now .tno,
+    .trow.now .ttitle { color: var(--accent-hover); }
+    .tno {
+        text-align: right;
+        color: var(--text-muted);
+        font-size: 12.5px;
+        font-variant-numeric: tabular-nums;
+    }
+    .ttitle {
+        min-width: 0;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
-
-    .artist-name { margin-top: 9px; font-weight: 600; }
-    .artist-meta { margin-top: 4px; color: var(--text-secondary); font-size: 12px; padding-bottom: 10px; }
-
-    .artist-albums {
-        max-height: 0;
-        margin-top: 0;
-        padding: 0 18px;
+    /* What a FILE knows, on the row that names the track — muted, tabular,
+       last; the title is still the row. */
+    .tk-rate {
+        margin-left: 9px;
+        font-size: 10.5px;
+        font-weight: 700;
+        letter-spacing: 0.02em;
+        color: var(--text-muted);
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+    }
+    .tdur {
+        color: var(--text-muted);
+        font-size: 12.5px;
+        font-variant-numeric: tabular-nums;
+        transition: opacity 0.12s ease;
+    }
+    .trow:hover .tdur,
+    .trow:focus-within .tdur { opacity: 0; }
+    .mini-btn,
+    .mini-get {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        display: grid;
+        place-items: center;
+        width: 26px;
+        height: 26px;
+        border-radius: 50%;
         opacity: 0;
-        transform: translateY(-8px);
-        pointer-events: none;
-        overflow: hidden;
-        transition: max-height 260ms ease, margin-top 260ms ease, padding 260ms ease, opacity 180ms ease, transform 260ms ease;
-        background: var(--bg-elevated);
-        border-radius: var(--radius);
-        border-top: 0 solid transparent;
-        overflow-anchor: none;
+        transition: opacity 0.12s ease;
+        color: var(--text-secondary);
+        cursor: pointer;
     }
-
-    .artist-albums.open {
-        max-height: 900px;
-        margin-top: 28px;
-        padding: 18px;
-        opacity: 1;
-        transform: translateY(0);
-        pointer-events: auto;
-        border-top: 2px solid var(--accent);
-    }
-
-    .artist-albums-head {
-        display: flex;
-        justify-content: space-between;
-        align-items: start;
-        margin-bottom: 16px;
-    }
-
-    .artist-albums-head h2 { font-size: 20px; margin: 0 0 4px; }
-    .artist-albums-head p { color: var(--text-secondary); font-size: 12px; }
-    .close-expand { color: var(--text-secondary); font-size: 24px; line-height: 1; padding: 0 4px; }
-    .close-expand:hover { color: var(--text-primary); }
-    .album-strip { display: grid; grid-template-columns: repeat(auto-fill, 146px); gap: 14px; }
-
-    .album-strip :global(.card) { padding: 10px; }
-
-    .inline-tracklist {
-        margin-top: 18px;
-        padding-top: 16px;
-        border-top: 1px solid var(--border);
-    }
-
-    .inline-track-head {
+    .mini-btn.play { right: 36px; color: var(--accent-hover); }
+    .mini-get { right: 8px; }
+    .trow:hover .mini-btn,
+    .trow:hover .mini-get,
+    .trow:focus-within .mini-btn,
+    .trow:focus-within .mini-get { opacity: 1; }
+    .mini-btn:hover,
+    .mini-get:hover { color: var(--accent-hover); }
+    .tracks-loading { display: flex; flex-direction: column; }
+    .tl-head {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-        margin-bottom: 8px;
+        gap: 9px;
+        padding: 7px 10px 13px;
+        color: var(--text-secondary);
+        font-size: 12.5px;
+    }
+    .tl-ring {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        border: 1.6px solid rgba(255, 255, 255, 0.16);
+        border-top-color: rgba(255, 255, 255, 0.62);
+        animation: tl-spin 0.72s linear infinite;
+    }
+    @keyframes tl-spin {
+        to { transform: rotate(360deg); }
     }
 
-    .inline-track-head h3 { font-size: 16px; margin: 0 0 3px; }
-    .inline-track-head p { color: var(--text-secondary); font-size: 12px; }
-    .inline-play { padding: 7px 15px; border-radius: 18px; background: var(--accent); color: #000; font-size: 12px; font-weight: 700; }
-    .inline-play:disabled { opacity: 0.45; }
-    .inline-tracks { display: flex; flex-direction: column; }
-    .inline-track { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 8px; border-radius: 5px; text-align: left; }
-    .inline-track:hover { background: var(--bg-highlight); }
-    .inline-tno { width: 22px; text-align: right; color: var(--text-muted); font-size: 12px; }
-    .inline-ttitle { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    .inline-tmeta { color: var(--text-muted); font-size: 12px; }
+    @media (max-width: 900px) {
+        .xp-body { grid-template-columns: 1fr; }
+        .xp-rail {
+            border-right: 0;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+        }
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .notch { animation-duration: 1ms; animation-delay: 0ms; }
+        .hoverplay,
+        .lib-shelf-go { transition-duration: 1ms; }
+    }
 
+    /* ---------------------------------------------------------- empty states */
+    .lib-empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        padding: 13vh 0;
+        color: var(--text-muted);
+        text-align: center;
+    }
+    .lib-empty .icon {
+        width: 52px;
+        height: 52px;
+        padding: 13px;
+        border-radius: 50%;
+        background: var(--bg-elevated);
+        display: grid;
+        place-items: center;
+    }
+    .lib-empty b { color: var(--text-primary); }
+    .lib-empty-lib {
+        padding: 18vh 0;
+        text-align: center;
+        color: var(--text-muted);
+    }
+    .lib-empty-lib .big {
+        font-size: 19px;
+        font-weight: 800;
+        color: var(--text-primary);
+        margin: 0 0 6px;
+    }
+    .lib-empty-lib .sub { margin: 0; font-size: 13px; }
 </style>