fix: "practise" -> "practice" (American spelling, matches the rest of the UI)

Three spots used British "practise" while the rest of the app uses American "practice" (Keep practicing, Virtuoso - Practice, etc.): - static/v3/profile.js — first-run onboarding "Feats of Power" step - plugins/achievements/feats.json — The Witching Hour feat description - plugins/achievements/engine.py — code comment Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Signed-off-by: topkoa <topkoa@gmail.com>
docs: host theme contract proposal (#645 )
2026-09-11 14:14:30 +00:00 · 2026-06-29 15:18:05 -04:00 · 2026-06-29 15:48:35 +02:00 · 2026-06-29 15:31:24 +02:00 · 2026-06-29 15:00:28 +02:00 · 2026-06-29 14:44:56 +02:00
18 changed files with 1108 additions and 150 deletions
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]

 ### Added
+- **The v3 Songs grid is now DOM-virtualized — card-node count stays bounded no matter how big the library is or how far you scroll.** The grid used to append every scrolled page and never let go, so a 2000-song library grew the DOM from 24 → 624 → 2001 card nodes as you scrolled (layout/memory cost scaling with depth). It now renders only the **visible window** of cards (± a small overscan); a sizer element sized to the whole library (`ceil(total/cols) × rowH`) gives the scrollbar its full geometry while the grid is absolutely positioned to the first visible row. `state.songs` is a sparse, absolutely-indexed store fetched a page at a time on demand — using the stage-1 **keyset cursor** for contiguous forward scroll (O(page)) and falling back to `OFFSET page=` for jumps/restore/non-keyset providers (collections, remote). Verified bounded (~60 nodes for a 2001-song library while the count still reads "2001 songs"). The **A–Z rail now seeks directly**: `sort_letters` gives a letter's first-row index (cumulative of prior buckets), converted to a scrollTop in O(1) — no more paging through every intervening row (a bounded forward scan covers the rare legacy provider without `sort_letters`). Select-mode selections, accuracy badges, the ⋮ card menu, plugin card actions, scroll-restore (now scrollTop-based, since geometry is stable), and the tree/folder views all survive cards leaving and re-entering the DOM. Plugins that decorate cards get a stable `window.v3Songs.visibleCards()` accessor + a `v3:library-window-rendered` event instead of assuming every card is present (the highway-stutter lesson). Stage 2 of the virtualized-grid project (got-feedback/feedBack#636 item 3), building on the stage-1 keyset data layer below. Frontend-only: `static/v3/songs.js`, `static/v3/v3.css`. Tests: `tests/browser/v3-grid-virtualization.spec.ts` (bounded-DOM invariant across a 2001-song scroll + direct rail jump), updated `tests/js/v3_az_rail.test.js` + `tests/js/v3_songs_scroll.test.js`.
 - **Keyset (cursor) pagination for the library grid — the data layer for an upcoming virtualized grid, and a latent paging bug fixed along the way.** Every library sort now carries a unique `filename` tiebreak, making the order **total** — which fixes a latent bug where rows sharing a sort key (e.g. two songs by the same artist) could be skipped or duplicated across `OFFSET` pages. `GET /api/library` gains an opaque `after` cursor + a `next_cursor` in the response: passing the cursor back fetches the next page with a **WHERE-seek** instead of `OFFSET`, so deep paging is O(page) regardless of depth. The seek is NULL-aware and exactly `OFFSET`-equivalent (verified across artist/title/recent, ascending + descending, including the legacy `dir=desc` shape and NULL sort keys); unknown/compound sorts and bad cursors fall back to `OFFSET`, and only the local provider is handed a cursor (collections/remote page by `OFFSET`). New composite `(artist NOCASE, filename)` / `(title NOCASE, filename)` / `(mtime, filename)` indexes cover the order. This is stage 1 of the virtualized-grid project (got-feedback/feedBack#636 item 3); the DOM-recycling render window builds on it next. Tests: `tests/test_library_keyset.py` (keyset==OFFSET parity, stable tiebreak, dir=desc, NULL keys, cursor fallback).
 - **Smart collections — save a set of library filters as a live, auto-updating source.** A collection is a saved `/api/library` query (e.g. "Drop-D tunings", "sloppak only", "recently added") that stays live: it's registered as a **library provider**, so it shows up in the v3 Songs source picker and inherits the whole grid UI — paging, stats, the A–Z rail, art — for free, with **no new screen**. Storage reuses the playlist subsystem (a `playlists.rules` JSON blob = a smart collection; membership is the live filter result, not stored songs, and collections are excluded from the manual-playlist list + read-only to playlist mutations). New `GET`/`POST`/`PUT`/`DELETE /api/collections`; a per-collection `SmartCollectionProvider` delegates `query_page`/`query_stats`/`query_artists` to the local DB with the stored rules applied; providers are re-registered from a boot scan so collections survive a restart. Rules mirror the raw `/api/library` query params (unknown keys dropped, never 500). Frontend: a "＋ Save as collection" action in the v3 filter drawer (shown when filters are active) names the current filter set and switches to it. The charrette's "the homelab primitive FeedBack was missing" pick (got-feedback/feedBack#636 item 2); richer rule fields (accuracy, genre, difficulty) follow as the metadata work lands. Tests: `tests/test_collections_api.py`, `tests/js/v3_collections.test.js`.
 - **The settings backup now includes your library database + custom art — your scores, favorites, playlists, and play history are no longer the one thing a backup can't save.** `GET /api/settings/export` gains an additive `core_server_files` section carrying a **consistent snapshot of `web_library.db`** (taken via the SQLite online-backup API, so it's a complete single file even while the server is running) plus any custom **playlist covers** and **avatar** (`CONFIG_DIR/playlist_covers/`, `CONFIG_DIR/avatars/`). On `POST /api/settings/import` the database is **staged** to `web_library.db.restore` rather than written over the live, open DB; it's swapped in at the next startup (`_apply_pending_db_restore`, before the connection opens), which also clears the old WAL sidecars so a stale `-wal` can't be replayed onto the restored file — the import response sets `restart_required: true` and warns accordingly. Custom art is written immediately. The bundle stays backward-compatible (older servers ignore the new section). Came out of the library design charrette (dev-ops lens's top "protect irreplaceable data" pick, got-feedback/feedBack#636). _Known gap:_ custom uploaded **song** art is still commingled with the rebuildable thumbnail cache in `art_cache/`, so it isn't bundled yet (a tracked follow-up). Tests: `tests/test_settings_export_library_db.py` (snapshot consistency, staged-not-live restore, sidecar clearing, traversal rejection, full round-trip).
@@ -46,8 +47,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **v3 library: exact artist/album filters + scroll/page-depth restore** (feedBack#857). The v3 Songs toolbar gains Artist and Album dropdowns (Album populates from the selected artist and stays disabled until one is chosen), backed by new exact, case-insensitive (`COLLATE NOCASE`) `artist` / `album` query params threaded through `MetadataDB._build_where` → `query_page` / `query_artists` / `query_stats` and the `/api/library`, `/api/library/artists`, `/api/library/stats` endpoints (the free-text `q` search stays fuzzy and composes with the exact filters). The artist/album catalog is fetched independently of the active artist/album selection so the dropdowns always list the full set for the current provider/search. The toolbar is now sticky so filter controls stay reachable when browsing deep libraries, and returning from the player restores the previous scroll position **and** the loaded infinite-scroll page depth via a `sessionStorage` snapshot keyed by a filter/sort/view state hash (invalidated whenever those change, so a filter change still resets to the top). Tests: `tests/test_library_filters.py` (backend artist/album filters), `tests/js/v3_songs_scroll.test.js` (state-hash + snapshot helpers).

 ### Fixed
+- **v3 player: opening another rail popover now closes the Section Practice popover (no more two stacked popovers).** Opening the **Practice** pill's popover and then clicking a different player-rail icon (e.g. **Plugins**) left the Practice popover open underneath the new one — looked broken (reported on macOS, 0.3.0 / 2026-06-28). The rail icons call `e.stopPropagation()` in their click handler (`static/v3/player-chrome.js`), which killed bubbling before it reached the Practice popover's outside-click dismiss bound on `document`. The dismiss (`_installSectionPracticeDismiss` in `static/app.js`) now binds in the **capture phase**, which runs before the target's handler so a descendant's `stopPropagation()` can't swallow it — mirroring how the audio-mixer popover already dismisses. Esc handling stays bubble-phase (the player's Escape-to-exit ordering is unchanged). v2 shares `app.js` and is only hardened (no rail `stopPropagation` there). Tests: `tests/js/section_practice_dismiss.test.js`.
+- **v3 UI no longer lets you accidentally text-select the chrome.** Dragging or double-clicking across the interface used to marquee-highlight buttons, labels, the sidebar, the transport, and the note-highway HUD — which looks broken (reported on Mac + Windows). The v3 shell now defaults to `user-select: none` on `html` (`static/v3/v3.css`), then opts *content* back in — so chrome is non-selectable but the text you actually copy still works. Decided by a 4-lens panel (UX / accessibility / dev-ops / plugin-ecosystem); the guardrails are deliberate: **form fields are always re-enabled** (never break the caret / IME — no `* { user-select:none }`, which trips a WebKit input bug); **plugin screens (`.screen[id^="plugin-"]`) stay selectable by default** so a plugin's copyable text (lyrics, chord names, results) — including community plugins that don't know about this — isn't silently locked; and **core read-only content opts back in by container** via a new hand-authored **`.fb-selectable`** class — applied to the whole **Settings** panel (paths, device names, version, diagnostics, About — answering "is settings still copyable?": yes), the **now-playing song metadata** (with `pointer-events` re-enabled so the HUD text is actually reachable), and the focused **modals / dialogs / toasts / scan banner** that carry copyable errors, IDs, paths, and file names. It's cosmetic only (it protects nothing) and never used to lock copy-worthy text — errors, IDs, paths, versions, and metadata stay selectable per WCAG 2.2 (copy-paste as a permitted mechanism). Dense card lists (library grid, dashboard, profile) stay non-selectable by design — making them selectable would reintroduce the marquee-mess across cards. **v3-only** (v2 unchanged); plain CSS, no Tailwind rebuild; no desktop changes (standard OS-framed window). Plugin authors: `.fb-selectable` is documented in `CLAUDE.md` for re-enabling copyable content rendered outside a plugin screen. Tests: `tests/js/v3_user_select_policy.test.js`.
 - **Input-setup wizard no longer collapses an audio device's driver-type variants into one entry.** On Windows the desktop engine enumerates the same interface once per host API (ASIO / Windows Audio / DirectSound), and the wizard's audio picker (`plugins/input_setup/screen.js`) de-duped the source list by display **label** — so the variants (which share a name) collapsed to a single choice, silently keeping whichever sorted first (often *not* the low-latency ASIO one the player wants). The audio-input capability already collapses true duplicates by `logicalSourceKey` (`_visibleInputSources` in `static/capabilities/audio-session.js`), and the variants each have a **distinct** key, so the wizard's extra label-collapse was redundant for real dupes and destructive for these — it also could drop the variant that was actually `selected`. Removed it; the picker now lists every selectable input. Pairs with feedBack-desktop's change to label each source with its driver type (e.g. "Focusrite (ASIO)") so the now-distinct entries are legible.
 - **3D Highway FPS counter no longer hides behind the v3 "Up Next" pill.** The on-highway FPS readout (Settings → Graphics → 3D Highway → Show FPS counter) is pinned to the top-right of the highway overlay — the same corner the v3 player chrome stacks its persistent **Up Next** pill and live-performance HUD into, on a higher layer that paints over the canvas. So the readout sat *behind* that chrome and couldn't be read — precisely when a tester had turned it on to judge performance (it also made the separate "Up Next won't turn off" complaint worse, since the default-on pill covered the counter regardless). The counter now stays top-right but drops just **below** whichever of that chrome is showing: `highway_3d`'s `screen.js` measures the lowest visible top-right v3 HUD element (`#v3-upnext` / `#v3-live-performance-hud` / `#hud-time`) and floors the FPS box's Y beneath it. Element refs are resolved once and cached (no per-frame `querySelector`, per the plugin perf rules) and only consulted while the counter is actually drawn; gated on `window.feedBack.uiVersion === 'v3'` so the classic (v2) UI is byte-for-byte unaffected. `plugins/highway_3d/plugin.json` version → `3.30.1` (cache-buster). (For reading raw perf numbers unobstructed, the core perf HUD — `localStorage.highwayPerfHud='1'` — still renders above all chrome and additionally shows the adaptive render-scale.)
+- **3D Highway fret-number row no longer clips off the bottom edge when the camera zooms in on a centred span.** The heat-coloured fret-number row is drawn as a band *below* the board (`sY(lowest) − S_GAP*1.4`), but the camera's self-correcting framing only anchors the board **centre** to the lower third of the screen — it reserved no headroom for that row. So a tight zoom on a centred active span (worst around mid-neck; fine when the span sits at either end of the neck, which is why testers saw it "only when centered" and "not every song") dropped the numbers past the bottom edge. Tilt can't fix it there (it would only trade a bottom clip for a top clip), so `camUpdate()` now **dollies the camera back just enough to bring the row back into frame**: it projects the row band with the final camera and, when it falls below a safe NDC line (`FRET_ROW_FIT_NDC_MIN`), raises a capped, hysteretic `_fretRowFitBoost` applied to the `curDist` lerp target (the span-driven zoom still owns zooming *in*). The boost rises promptly (proportional to the deficit), relaxes lazily past a deadband, and is capped (`FRET_ROW_FIT_BOOST_MAX`, +60%) so the zoom can't pop or hunt; it cooperates with the tilt loop (pull-back shrinks the scene, tilt keeps the centre anchored) and yields entirely to the Camera Director free-cam. Surgical: passages where the row is already visible never trigger it, so framing is unchanged everywhere it already worked. `plugins/highway_3d/plugin.json` version → `3.30.2` (cache-buster). Tests: `tests/js/highway_3d_camera_framing.test.js` (guard constants, the boosted `curDist` lerp, the projected-row hysteresis, free-cam yield).
 - **v3 Songs grid now refreshes after a Settings rescan / DLC-folder change — no app restart needed.** On a fresh install, pointing at a DLC folder in Settings and running a scan left the Songs section empty until a restart (the scan *did* populate the library — `_background_scan` re-reads `config.json` fresh — but the v3 grid never reloaded). The Settings **Rescan / Full Rescan** handlers only refreshed the classic (v2) library via `loadLibrary()`; the v3 grid (`static/v3/songs.js`) had no listener for a scan it didn't start itself (only its own upload path self-refreshed via `watchUploadScan`), so its cached, pre-DLC (empty) DOM/snapshot survived a sidebar return until a full reload. The rescan handlers now emit a **`library:changed`** event (`static/app.js`); the v3 grid listens and **reloads if it's the active screen, else marks itself dirty** so the next entry does a full re-fetch instead of restoring the stale snapshot (a `_libraryDirty` short-circuit ahead of every cached-DOM fast-path in `onV3SongsScreenEnter`). Tests: `tests/js/v3_library_refresh.test.js` (the emit + the reload/dirty wiring).
 - **Edit Metadata modal: the Year is now editable.** You could set a year when authoring a pak but the Songs → Edit Metadata modal had no Year field, so it could never be changed afterward. The backend (`POST /api/song/<f>/meta`) already accepted and normalized `year` (writes it into the file via `songmeta`, survives a rescan) — only the UI omitted it. Added a **Year** input to `openEditModal()` (populated from the song's existing year) and included `year` in `saveEditModal()`'s POST body (`static/app.js`). Both the v3 card menu and the legacy edit button already pass the year through, so both surfaces get the field.
 - **Edit Metadata modal no longer closes when a click-drag is released on the backdrop.** Selecting text inside a field and releasing the mouse past the modal's edge dismissed the form without warning (the `click` event's target resolved to the backdrop), discarding the edit. Backdrop dismissal now requires the **mousedown to have started on the backdrop** too — tracked per-modal and decided by a new pure `_editModalShouldClose(clickTarget, modalEl, downOnBackdrop)` helper (`static/app.js`). Cancel / ✕ still close on a normal click. Tests: `tests/js/edit_metadata_modal.test.js` (year in the POST body + the backdrop-close decision table).
@@ -552,6 +552,7 @@ a local pointer + code map.
 - **Storage** — `localStorage` for all user preferences
 - **Styling** — Tailwind CSS utility classes, dark theme (`bg-dark-600`, `text-gray-300`, accent `#4080e0`, gold `#e8c040`). Tailwind is served as a **prebuilt** stylesheet (`static/tailwind.min.css`, regenerated by `bash scripts/build-tailwind.sh`), **never** the runtime Play CDN — the CDN's on-the-fly JIT rescanned the DOM on the main thread and dropped ~26% of frames with the 3D highway (feedBack-desktop#110). The committed CSS only contains classes the build scanner saw, so CI (`tailwind-fresh`) rebuilds and diffs it; run the build script and commit when you add new classes. A plugin that uses classes not guaranteed in core (notably arbitrary values like `w-[37px]`) MUST ship its own compiled stylesheet via the `styles` manifest key, built with `corePlugins.preflight = false` (utilities only — core ships the one base reset). Plugins MUST NOT load the Tailwind Play CDN or any runtime CSS JIT. See constitution Principle II.
 - **Naming** — camelCase for JS functions, kebab-case for CSS classes, snake_case for plugin IDs
+- **Text selection (v3)** — the v3 UI defaults to `user-select: none` on `html` (in `static/v3/v3.css`) so accidental drag/double-click selection of chrome never looks broken. Form fields are always re-enabled, and a **plugin's mounted screen subtree (`.screen[id^="plugin-"]`) stays selectable by default**, so a plugin's copy-worthy text (lyrics, chord names, results, diagnostics) is unaffected — *unless your plugin renders copyable content OUTSIDE its `plugin-<id>` screen* (e.g. injected into the player chrome / a HUD overlay), which inherits the non-select default. Opt such content back in with the core-served **`.fb-selectable`** class (it sets `user-select: text` on the element + descendants; works for runtime-installed plugins since it's hand-authored in core CSS, not a scanned Tailwind utility). Never use a `* { user-select: none }` rule (breaks input carets/IME), and never use `user-select: none` to "lock" text — keep errors, IDs, paths, versions, and metadata selectable. (v2 is unchanged.)
 - **Player layout** — `#player` is `display:flex; flex-direction:column; position:fixed; inset:0`. `#highway` is `flex:1`. `#player-controls` sits at the bottom. Hiding the highway collapses the layout — use `margin-top: auto` on controls if you need to hide it.

 ## Backend Conventions
@@ -0,0 +1,246 @@
+# Host Theme Contract — design proposal
+
+**Status:** proposal (charrette output, 2026-06-29) · **Owner area:** core v3 + plugin UI
+**Trigger:** a plugin UI feature accidentally "carved itself into a single theme."
+
+## 1. Problem
+
+A results-card feature in the `note_detect` plugin (a glow-ring hero button + a
+gradient-filled accuracy number) was built and visually verified against **only the
+default skin** ("neon"). On the other skins it broke: on "esports" — a deliberately
+glow-less, near-monochrome design language — the glow ring and the colour gradient
+simply **vanished**. The colours adapted (everything used CSS custom-property tokens),
+but the **visual devices themselves did not port**, because nothing in the system says
+"this theme does / doesn't do glow rings."
+
+### Root cause (three findings)
+
+1. **Themes are design *languages*, not palettes.** neon = glow + animation + gradients;
+   esports = no-glow, square, near-monochrome amber; metal = brushed steel + hard bevels +
+   drop-shadows. Tokens made *colour* portable; they never made a *device* portable.
+2. **Tokens are named by *device*, not *intent*.** e.g. `--nd-glow-*` holds a glow in neon
+   but a **hard drop-shadow** in metal — the metal skin is already repurposing a
+   device-named slot to express a different language. The cure is to finish that move:
+   name slots by intent, with "off" (`none`) a legal value.
+3. **No "text-legible-on-accent" role.** White-on-accent was hardcoded in several places;
+   on esports' amber accent that's a contrast failure. And `--nd-accent2` was
+   **double-booked** (gradient-end *and* S-grade colour), so the hero gradient resolved
+   amber→near-white and washed out.
+
+A process gap compounds it: **verification covered one skin**, so the regression was
+invisible until a user switched themes. And this recurs ecosystem-wide — other plugins
+ship their own independent skin systems too.
+
+## 2. Current state (two disconnected systems)
+
+| System | What it is | Limits |
+| --- | --- | --- |
+| **Host themes** (`static/v3/theme-core.js`, `html[data-fb-theme]`) | Cosmetic "shop" themes that recolour `fb-*` Tailwind tokens (surfaces/text/borders). | Apply-only & recolour-only. `--fbv-*` vars exist **only while a theme is equipped** (nothing to read in the default state). No read API, no capability signal, no normalized `theme:changed` event. Comment explicitly says it *leaves decorative accents (rings/shadows) at defaults* → **devices are an ownerless gap.** |
+| **Plugin skins** (e.g. `note_detect` `data-nd-skin`) | Full per-plugin design languages (neon/esports/metal) as CSS-var blocks. | Each plugin reinvents the wheel; disconnected from host themes; a feature can't see both. |
+
+## 3. Goals / non-goals
+
+- **Goal:** a feature, authored once, renders correctly in **any** theme — including ones not
+  yet invented — and degrades **intentionally** (neon ring → esports border), never accidentally.
+- **Goal:** the host owns a canonical contract so plugins consume instead of reinventing.
+- **Non-goal:** forcing every plugin skin to become a host theme. Skins stay plugin-local but
+  **implement** the contract.
+- **Non-goal:** backward-compat with pre-v3 hosts. Everything here is additive + feature-detected.
+
+## 4. The contract — three layers
+
+### Layer 1 — Semantic colour **roles** (always present)
+
+The host writes default `--fb-*` role tokens on `:root` **unconditionally** (not only under
+`[data-fb-theme]`), seeded from the canonical `fb` palette, so `var(--fb-accent, …)` always
+resolves — themed or not. Roles:
+
+**Namespace (normative).** The public contract lives under one prefix, **`--fb-*`**, written on
+`:root` by a host-owned *contract stylesheet* (see §6 / §8) so it is present **themed or not**.
+The existing `--fbv-*` vars stay **internal plumbing** — `theme-core.js` uses them only to
+recolour the Tailwind `.bg-fb-*/.text-fb-*/.border-fb-*` utilities under `html[data-fb-theme]`;
+they are **not** part of this contract and plugins must not read them. (Implementation may seed
+`--fb-*` from the same source the `--fbv-*` overrides use, so an equipped theme moves both.)
+
+**Value grammar (normative).** Colour roles are a **space-separated `r g b` triplet** (matching
+today's `--fbv-*` and the Tailwind utilities), consumed as `rgb(var(--fb-accent))` with optional
+alpha `rgb(var(--fb-accent) / .5)`. Recipe slots (Layer 2) hold **full CSS values** for their
+device (a `box-shadow`, a `border` shorthand, a length, a paint), with `none` legal **except**
+where noted.
+
+**Normative role tokens** (all `--fb-*`, all always present):
+
+| Role | Token | Notes |
+| --- | --- | --- |
+| surface / card / border | `--fb-surface` `--fb-card` `--fb-border` | structural |
+| text / dim | `--fb-text` `--fb-text-dim` | |
+| accent / second hue | `--fb-accent` `--fb-accent-2` | `accent-2` is **just a second hue** — never an assumed gradient end |
+| status | `--fb-good` `--fb-warn` `--fb-bad` | maps onto today's palette `good / mid / low` (mid→warn, low→bad) — implementation aliases both |
+| **on-fill (new)** | `--fb-on-accent` `--fb-on-good` `--fb-on-warn` `--fb-on-bad` | **Rule: every role used as a fill behind text gets a paired `--fb-on-*`** (fixes white-on-amber). Required + contrast-linted (§6). |
+| **focus (new)** | `--fb-focus-ring` | focus indicator independent of `accent`, so focus stays visible when `accent ≈ surface` |
+
+### Layer 2 — Capability **recipes** (intent-named slots; "off" is legal)
+
+A theme declares its design *language* by filling intent-named slots (all `--fb-*`-prefixed,
+same namespace as the roles). A feature applies the slot bundle **unconditionally**; it never
+branches on "is this theme glowy?". Atomic slots (renames-by-intent of today's tokens):
+`--fb-corner-radius`, `--fb-corner-clip`, `--fb-panel-shadow`, `--fb-text-emph-shadow`,
+`--fb-panel-texture`, `--fb-motion-decorative` (reduced-motion-gated). For these, `none` is legal.
+
+Two **composite recipes** carry the load:
+
+- **EMPHASIS** — how this theme makes a primary action special:
+  `--fb-emph-fill / --fb-emph-border / --fb-emph-halo / --fb-emph-on`.
+  neon → halo (glow ring); esports → border (solid accent); metal → fill + drop-shadow.
+  Any individual slot may be `none` — but a theme **must** emphasise *somehow* (at least one of
+  fill/border/halo non-`none`), so a primary action is never visually flat.
+- **ACCENT-TEXT** — how this theme fills a big accent number: `--fb-acc-text-fill`
+  (decoupled from `accent-2`). neon/metal → a gradient; esports → a solid accent.
+  **`--fb-acc-text-fill` is the one slot where `none` is illegal** — it is always a valid paint
+  (solid colour or gradient), defaulting to `rgb(var(--fb-accent))`. Reason: the number is
+  rendered with `background-clip: text` + transparent text-fill, so a `none` paint would make
+  the digits **invisible** (transparent fill, nothing to clip) — which would violate the DoD
+  "a device stays legible when its slot resolves to `none`". The feature also feature-detects
+  `background-clip: text` and keeps a solid `color` base (see §5), so the digits are legible
+  even where clip-text is unsupported.
+
+> These generalize the interim per-skin tokens already shipped in `note_detect`
+> (`--nd-hero-ring-idle/on`, `--nd-hero-border`, `--nd-acc-fill`).
+
+### Layer 3 — JS read API + reconciliation
+
+**The JS API is only for renderers that can't use CSS (canvas / WebGL), never for DOM/CSS
+consumers** — those use the tokens and slots directly (§5). Critically, it exposes *resolved
+token values*, **not** theme-style booleans: a `glow:false` flag can't tell a canvas whether to
+draw a border, a bevel, a drop-shadow, or flat text, so there is **no** `capabilities()` of
+booleans. On the existing `window.feedBack` bus:
+
+- `feedBack.theme.get()` → `{ id, isThemed, tokens }` where `tokens` is the **resolved** map of
+  every `--fb-*` role + recipe slot (the computed values, so a canvas reads the actual device,
+  e.g. the gradient stops for `--fb-acc-text-fill`, not a boolean).
+- `feedBack.theme.prefersReducedMotion()` → boolean (host wraps `matchMedia` once). **This is the
+  single approved JS reduced-motion gate going forward** — existing direct `matchMedia` callers
+  (`venue-mood-fx.js`, `pedal-cables.js`) migrate to it; `--fb-motion-decorative` covers the
+  CSS-authored decorative motion.
+- `theme:changed` event → `{ id, tokens }`.
+
+**Lifecycle (normative).** `get()` always returns the **current effective theme synchronously**
+and is valid at any time — before any theme is applied it returns the default/unthemed roles
+(which always exist on `:root`). Theme application is async (it follows a `/api/profile` refresh);
+`theme:changed` fires **only after** the DOM vars/classes are committed, and **once on initial
+hydration** so a late-mounting plugin isn't stuck on stale state. **Plugin rule:** read `get()`
+on mount, then subscribe to `theme:changed` — never assume an order between your mount and the
+first theme apply.
+
+**Reconciliation rule (ends the two-disconnected-systems problem):** a plugin skin
+**derives surface/text/border from host tokens** (`--nd-bg: rgb(var(--fb-card))`, etc.) and
+**owns only its accent + its devices**, selecting the device via the recipe. A host theme then
+pulls plugin chrome along (one truth for surfaces), while the plugin layers identity on top and
+never imposes a device the active theme neutralizes.
+
+**Propagation scope (normative).** The contract is **same-document light-DOM**: `:root` `--fb-*`
+inheritance and the central focus/motion rules (§6) reach any normal plugin screen. A plugin that
+renders into a **shadow root or iframe** is responsible for bridging — copy the resolved
+`get().tokens` into its sub-root and re-subscribe to `theme:changed` (host `:root` vars don't
+cross those boundaries).
+
+## 5. Consumption pattern (the rule for feature authors)
+
+> **A feature may reference a colour *role* or a recipe *slot*. It may never write a raw
+> device — no literal glow `box-shadow`, no literal `linear-gradient`, no hex.** Devices live
+> in slots; the theme owns the slots.
+
+```css
+.hero-cta {
+  background: var(--fb-emph-fill);
+  border:     var(--fb-emph-border);
+  box-shadow: var(--fb-emph-halo);   /* neon→ring · esports→none · metal→drop-shadow */
+  color:      var(--fb-emph-on);     /* never hardcoded #fff again */
+  border-radius: var(--fb-corner-radius);
+}
+.accuracy-number {
+  /* Always-legible solid base; survives no-clip-text support too. */
+  color: rgb(var(--fb-accent));
+}
+/* Apply the clipped paint ONLY where supported — and --fb-acc-text-fill is
+   guaranteed a real paint (never `none`, per Layer 2), so the digits can't go
+   invisible. */
+@supports ((background-clip: text) or (-webkit-background-clip: text)) {
+  .accuracy-number {
+    background: var(--fb-acc-text-fill);
+    -webkit-background-clip: text; background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+```
+
+**Where the contract physically lives.** A **host-owned static contract stylesheet** (e.g.
+`static/v3/theme-contract.css`, hand-authored, linked from `static/v3/index.html`) holds the
+always-present `:root --fb-*` defaults **plus** the two central a11y rules below. It is **not** a
+Tailwind file, so it never touches the prebuilt `static/tailwind.min.css` artifact the
+`tailwind-fresh` CI check diffs (and it's independent of `theme-core.js`, which keeps
+runtime-injecting only the `--fbv-*` utility overrides under `[data-fb-theme]`).
+
+- **Reduced motion:** `--fb-motion-decorative` is the *only* place CSS decorative animation is
+  named; one central rule in the contract sheet sets it to `none` under
+  `@media (prefers-reduced-motion: reduce)`, so no theme can forget the gate. (JS-driven motion
+  uses `feedBack.theme.prefersReducedMotion()` — §4.3.)
+- **Focus parity:** one contract-level `:focus-visible { outline: 2px solid rgb(var(--fb-focus-ring)) }`
+  for contract consumers; themes recolour `--fb-focus-ring` but may not author their own focus
+  styling. *Migration:* v3 already ships component-specific focus + reduced-motion rules in
+  `v3.css`; those are reconciled onto the contract token (not magically replaced) as a tracked
+  cleanup — "one rule" describes the end state, not day one.
+- **On-fill contrast:** every `--fb-on-*` is required and **lintable**
+  (`contrast(on-X, X) ≥ 4.5:1`, 3:1 large) for each fill role (`accent / good / warn / bad`).
+  Contrast is the theme's job, computed once — not re-judged per feature.
+
+## 7. Verification gate (prevent recurrence)
+
+- A committed **render-matrix** tool, driven off the runtime skin list, that renders the key
+  surfaces (hero CTA, accent number, **and the canvas share-image card**) across **every skin ×
+  key states** (rest / hover / focus / reduced-motion).
+- The gate is **computed-style invariant assertions** (deterministic, CI-safe) — e.g. "emphasis
+  present and text legible in each theme" — **not** pixel-snapshot diffing (the animated ring +
+  fonts + AA make snapshots flaky); a contact-sheet montage is the human backstop.
+- Triggered on the version bump that CSS changes already require; skins enumerated at runtime +
+  a guard test so the matrix can't silently go stale.
+
+**Definition-of-done for any theme-touching UI change** (the few items that would have caught this):
+expressed via tokens not hardcoded values · rendered across all skins · **a new visual *device*
+stays legible when its slot resolves to `none`** · reduced-motion + focus parity · on-accent contrast.
+
+## 8. Back-compat & rollout
+
+All additive: the new always-present `--fb-*` tokens (in the contract sheet, §6) + a new
+`feedBack.theme` namespace + a new event with no current listeners. Existing plugins (those
+reading `fb-*` Tailwind utility classes, or shipping their own skins) are untouched unless they
+opt in. On a host too old to ship the contract sheet, a consumer still degrades cleanly: the
+two-arg fallback `rgb(var(--fb-accent, 224 128 32))` resolves to the literal, and
+`window.feedBack?.theme?.get?.()` is feature-detected — so older hosts behave exactly as today.
+
+**Workstream (sub-tasks):**
+1. **Host minimal surface** — the contract stylesheet's always-present default `--fb-*` tokens + `feedBack.theme.{get, prefersReducedMotion}` (`get().tokens` = resolved values; no boolean `capabilities()`) + `theme:changed`. *(the smallest thing that would have prevented the incident)*
+2. **note_detect refactor** — rename device tokens by intent (EMPHASIS + ACCENT-TEXT recipes), add `on-accent` + `focus-ring`, derive surfaces from host tokens.
+3. **Verification gate** — commit the render-matrix + DoD checklist; add the canvas share-card surface.
+4. **Ecosystem migration guide** — document the contract + the consumption rule for community plugin authors.
+
+## 9. Cross-apply status (already done)
+
+- `note_detect` results-card hero + accuracy number — fixed via per-skin device tokens
+  (the Layer-2 prototype) and verified across neon/esports/metal.
+- The **canvas share-image card** — re-checked across all three skins: **theme-robust**
+  (reads per-skin colour tokens via computed style, draws skin-neutral solid devices). Minor
+  fidelity gap only: it uses flat `--nd-bg` and skips metal's brushed-steel *texture*.
+
+## 10. Open questions
+
+- Should plugin skins eventually become *selectable host themes* (one picker), or stay
+  plugin-local forever? (This proposal assumes plugin-local + contract-implementing.)
+- Component-recipe **bundles** (per named component) are the richer end-state; intent-named
+  slots are the right seed. When/whether to graduate.
+
+*(Resolved during review and folded into the sections above: the token namespace + value grammar
+and normative role table (§4.1); the `none`-is-illegal carve-out for `--fb-acc-text-fill` (§4.2);
+JS exposes resolved tokens, not booleans (§4.3); `theme:changed` lifecycle + shadow/iframe
+propagation (§4.3); the physical home of the role tokens + central focus/motion rules — a
+host-owned contract stylesheet outside Tailwind (§6).)*
@@ -109,7 +109,7 @@ def apply_activity(counters, delta):
 def consecutive_run_length(dates):
    """Longest run of consecutive calendar dates in ``dates`` (ISO 'YYYY-MM-DD').

-    Used by the `secret_witching` Feat (practise in the 2–5am window on N
+    Used by the `secret_witching` Feat (practice in the 2–5am window on N
    consecutive nights). Pure date arithmetic so it's unit-testable; routes.py
    feeds it the distinct night-dates recorded in `comp_ledger`.
    """
@@ -76,7 +76,7 @@
    {
      "id": "secret_witching",
      "title": "The Witching Hour",
-      "description": "Practise in the dead of night, seven nights running.",
+      "description": "Practice in the dead of night, seven nights running.",
      "category": "global",
      "sourceId": "achievements",
      "secret": true,
@@ -1,7 +1,7 @@
 {
    "id": "highway_3d",
    "name": "3D Highway",
-    "version": "3.30.1",
+    "version": "3.30.2",
    "type": "visualization",
    "bundled": true,
    "script": "screen.js",
@@ -1095,6 +1095,16 @@
    const CAM_FRAME_H_FAR  = 1.00;
    const CAM_FRAME_D_NEAR = 0.575;
    const CAM_FRAME_D_FAR  = 0.60;
+    // Fret-row fit guard. The heat-coloured fret-number row is a band drawn
+    // BELOW the board (at sY(lowest) - S_GAP*1.4). The lower-third framing
+    // anchors the board CENTRE, not that row, so a tight zoom on a centred span
+    // (worst mid-neck — fine pushed to either end of the neck) drops the row off
+    // the bottom edge. Tilt can't add vertical room there (it would only trade a
+    // bottom clip for a top clip), so camUpdate dollies the camera back just
+    // enough to bring the row back into frame — auto-sized, capped, hysteretic.
+    const FRET_ROW_FIT_NDC_MIN   = -0.86;  // keep the row anchor at/above this NDC y (>-1 = on screen)
+    const FRET_ROW_FIT_DEADBAND  = 0.06;   // headroom past the min before the dolly relaxes (anti-hunt)
+    const FRET_ROW_FIT_BOOST_MAX = 1.6;    // cap the pull-back so the zoom can't pop (never dolly back > +60%)

    // Camera-X targeting (issue #34). The visible AHEAD = 4.0 s window is
    // far too coarse for picking where the camera should sit — a single
@@ -4091,6 +4101,11 @@

        let tgtX = xFretMid(CAM_LOCK_CENTER_FRET), curX = xFretMid(CAM_LOCK_CENTER_FRET);
        let tgtDist = CAM_DIST_BASE, curDist = CAM_DIST_BASE;
+        // Dolly-back multiplier applied to the curDist lerp target by camUpdate's
+        // fret-row fit guard. 1 = no extra pull-back (the common case); rises
+        // toward FRET_ROW_FIT_BOOST_MAX only when a tight, centred zoom would push
+        // the fret-number row past the bottom edge, then relaxes back to 1.
+        let _fretRowFitBoost = 1;
        // Last committed lowFretBonus contribution baked into tgtDist
        // (see candidateDist block — bonus is applied on top of the
        // hysteresis-gated base).
@@ -13906,7 +13921,9 @@
            const lerp = CAM_LERP_BASE * Math.max(bpm, 60) / 120;

            curX += (tgtX - curX) * lerp;
-            curDist += (tgtDist - curDist) * lerp;
+            // The fret-row fit guard (end of camUpdate) may dolly the camera back
+            // via _fretRowFitBoost; the span-driven tgtDist still owns zooming IN.
+            curDist += (tgtDist * _fretRowFitBoost - curDist) * lerp;
            const dist = curDist * aspectScale;
            const h = CAM_H_BASE * (dist / CAM_DIST_BASE);

@@ -13978,6 +13995,38 @@
            } else {
                cam.lookAt(curX, curLookY, _lookAtZ);
            }
+
+            // ── Fret-row fit guard ────────────────────────────────────────────
+            // Project the fret-number-row band (just below the lowest string, at
+            // the play line) with the final camera. If it sits below the safe
+            // bottom line, dolly back (raise _fretRowFitBoost → applied to the
+            // curDist lerp target next frame) until it clears; relax lazily once
+            // there's comfortable headroom. Asymmetric + deadbanded so it
+            // converges without hunting, and capped so the zoom can't pop. It
+            // cooperates with the tilt loop above rather than fighting it: pulling
+            // back shrinks the scene, the tilt loop keeps the board centre anchored
+            // at DESIRED_NDC_Y, so only the row's bottom headroom changes. Skipped
+            // while the free-cam (Camera Director) owns the view.
+            if (_freeCam && _freeCam.enabled) {
+                if (_fretRowFitBoost !== 1) _fretRowFitBoost = 1;
+            } else {
+                cam.updateMatrixWorld();
+                const _rowY = Math.min(sY(0), sY(nStr - 1)) - S_GAP * 1.4;
+                _probe.set(curX, _rowY, 0.5 * K);
+                _probe.project(cam);                              // _probe.y → NDC; < -1 = off the bottom
+                const _rowNdcY = _probe.y;
+                if (_rowNdcY < FRET_ROW_FIT_NDC_MIN) {
+                    // Row below the safe line → pull back promptly, proportional to
+                    // the deficit so it converges in a few frames without overshoot.
+                    const _need = FRET_ROW_FIT_NDC_MIN - _rowNdcY;
+                    _fretRowFitBoost = Math.min(FRET_ROW_FIT_BOOST_MAX,
+                        _fretRowFitBoost + Math.min(0.05, _need * 0.4));
+                } else if (_rowNdcY > FRET_ROW_FIT_NDC_MIN + FRET_ROW_FIT_DEADBAND
+                           && _fretRowFitBoost > 1) {
+                    // Comfortable headroom → relax the dolly back toward normal, lazily.
+                    _fretRowFitBoost = Math.max(1, _fretRowFitBoost - 0.01);
+                }
+            }
        }

        /* ── Resize helper ───────────────────────────────────────────────── */
@@ -14234,7 +14283,7 @@
            pFretColMarker = null;
            _fretMarkerWaveCache.clear();
            gNote = gSus = gBeat = gTapChevron = null;
-            tgtX = curX = xFretMid(CAM_LOCK_CENTER_FRET); tgtDist = curDist = CAM_DIST_BASE; tgtLookY = curLookY = 0; nStr = NSTR; _oobStringWarned = false;
+            tgtX = curX = xFretMid(CAM_LOCK_CENTER_FRET); tgtDist = curDist = CAM_DIST_BASE; tgtLookY = curLookY = 0; _fretRowFitBoost = 1; nStr = NSTR; _oobStringWarned = false;
            _lookaheadCamX = xFretMid(CAM_LOCK_CENTER_FRET);
            _lookaheadFretSpan = DEFAULT_LOOKAHEAD_FRET_SPAN;
            _lookaheadCamPrevNow = null;
@@ -8714,12 +8714,24 @@ function _installSectionPracticeDismiss() {
    // inside #section-practice-control so it never self-closes. Listeners added
    // mid-dispatch don't fire for the opening click, so there's no immediate
    // close race.
+    //
+    // The click listener uses the CAPTURE phase: the v3 player rail's icon
+    // buttons call e.stopPropagation() in their click handler (player-chrome.js
+    // wireRail), which kills bubbling before it reaches document. A bubble-phase
+    // outside-click dismiss would therefore never fire when the user clicks a
+    // rail icon (Plugins, Audio, …) to open another popover, leaving this
+    // popover stranded open on top of it. Capture runs before the target's
+    // handler, so the stopPropagation can't swallow it. This mirrors the audio
+    // mixer popover (audio-mixer.js), which dismisses outside-clicks the same
+    // way. (Esc stays bubble-phase — no rail handler stops keydown propagation,
+    // so it already reaches us, and capturing it would reorder it ahead of the
+    // player's Escape-to-exit handling.)
    document.addEventListener('click', (e) => {
        if (!_sectionPracticePopoverOpen()) return;
        const ctrl = document.getElementById('section-practice-control');
        if (ctrl && ctrl.contains(e.target)) return;
        _closeSectionPracticePopover();
-    });
+    }, true);
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && _sectionPracticePopoverOpen()) _closeSectionPracticePopover();
    });
@@ -343,7 +343,10 @@

    <!-- ══ SETTINGS ═══════════════════════════════════════════════════════ -->
    <div id="settings" class="screen">
-        <div class="fb-settings">
+        <!-- fb-selectable: Settings is read-only content (paths, device names,
+             version, diagnostics, About) the user copies — opt the whole panel
+             back in under the v3 non-select default. See static/v3/v3.css. -->
+        <div class="fb-settings fb-selectable">
            <button onclick="showScreen('home')" class="fb-settings-back">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg> Home
            </button>
@@ -825,7 +828,13 @@

        <!-- Top HUD — persistent (song info, time, Up Next) -->
        <div id="player-hud" class="absolute top-0 left-0 right-0 flex justify-between items-start px-5 py-4 pointer-events-none z-20">
-            <div class="text-sm leading-tight">
+            <!-- fb-selectable: now-playing song metadata (title / artist /
+                 arrangement / tuning) is copy-worthy content, not chrome.
+                 pointer-events-auto: the #player-hud parent is pointer-events-none
+                 (so the HUD doesn't eat clicks meant for the highway), which would
+                 also block the mouse from reaching this text to select it — opt
+                 just this block back into hit-testing. -->
+            <div class="text-sm leading-tight fb-selectable pointer-events-auto">
                <div><span id="hud-artist" class="text-gray-300"></span> — <span id="hud-title" class="text-white font-semibold"></span></div>
                <div id="hud-arrangement" class="text-gray-500 text-xs mt-0.5"></div>
                <div id="hud-tuning" class="text-gray-500 text-xs mt-0.5"></div>
@@ -375,7 +375,7 @@
            // Step 3 — Achievements wall opt-in (first-run only; default OFF).
            '<div id="v3-ob-step3" class="hidden">' +
            '<label class="block text-xs uppercase tracking-wider text-fb-textDim mb-2">Feats of Power</label>' +
-            '<p class="text-sm text-fb-textDim mb-3">As you practise you’ll earn rare <span class="text-fb-text">Feats of Power</span> — silly, bombastic activity trophies. Want to show them off on the public <span class="text-fb-text">Feats wall</span>?</p>' +
+            '<p class="text-sm text-fb-textDim mb-3">As you practice you’ll earn rare <span class="text-fb-text">Feats of Power</span> — silly, bombastic activity trophies. Want to show them off on the public <span class="text-fb-text">Feats wall</span>?</p>' +
            '<label class="flex items-start gap-3 cursor-pointer rounded-lg border border-fb-border/50 bg-fb-bg/40 p-3">' +
            '<input type="checkbox" id="v3-ob-optin" class="mt-1 h-4 w-4 rounded border-gray-600 bg-gray-800 text-fb-primary focus:ring-fb-primary">' +
            '<span class="text-sm text-fb-text">Share my Feats on the wall' +
@@ -40,6 +40,9 @@
    const ARRANGEMENTS = ['Lead', 'Rhythm', 'Bass', 'Combo', 'Vocals'];
    const STEMS = ['guitar', 'bass', 'drums', 'vocals', 'other'];
    const PAGE_SIZE = 24;
+    // Extra rows rendered above/below the viewport so a fast scroll doesn't flash
+    // blank before the next window render lands.
+    const OVERSCAN_ROWS = 2;
    const SCROLL_STATE_KEY = 'v3:songs-scroll-state';
    const btnCtrl = 'bg-gray-800/50 border border-gray-700 rounded-md px-3 py-2 text-sm text-fb-text outline-none focus:border-fb-primary';

@@ -51,7 +54,21 @@
        artistCatalog: [], renderedHash: '',
        scrollBound: false,
        songsById: {}, selectMode: false, selected: new Set(),
-        railLetters: null, railJumping: false,
+        railLetters: null, railLettersAreSongCounts: false, railJumping: false,
+        // ── Windowed (virtualized) grid, stage 2 of #636 item 3 ──
+        // state.songs is a SPARSE array indexed by absolute library position
+        // (0..total-1); only the fetched pages are populated and only the visible
+        // window ± overscan is ever in the DOM. The sizer element gives the
+        // scrollbar the full-library geometry. See renderWindow / ensureWindow.
+        songs: [],            // sparse: absoluteIndex → song row
+        pageCursors: {},      // pageIndex → next_cursor (keyset forward fast-path)
+        keysetOk: false,      // did page 0 return a non-null cursor (local + keyset sort)?
+        pageProms: {},        // pageIndex → in-flight fetch promise (de-dupe + await)
+        epoch: 0,             // bumped on every reset; a stale in-flight fetch checks it
+        geom: null,           // { cols, rowH, gap } measured from the live grid
+        winRange: null,       // { start, end } last rendered, to skip redundant renders
+        renderedSelectMode: null, // the selectMode the current window was rendered under
+        gridResizeBound: false,
    };

    // ── A–Z jump rail ───────────────────────────────────────────────────────
@@ -112,12 +129,13 @@

    function _saveLibraryScrollSnapshot() {
        const main = _getV3MainScroller();
+        // Geometry is now stable (the sizer reserves the full scroll height
+        // regardless of how many cards are actually in the DOM), so the scroll
+        // position alone is enough to restore — no page-depth bookkeeping.
        const snap = {
            hash: _libraryStateHash(),
            scrollTop: main ? main.scrollTop : 0,
            view: state.view,
-            page: state.page,
-            loadedCount: loadedCount(),
        };
        try { sessionStorage.setItem(SCROLL_STATE_KEY, JSON.stringify(snap)); } catch (e) { /* quota / private mode */ }
    }
@@ -145,9 +163,14 @@
        setTimeout(apply, 0);
    }

+    // The windowed grid keeps only a slice of cards in the DOM, so "intact" can no
+    // longer mean "has cards" — it means the grid + sizer chrome exist and page 0
+    // is loaded (state.total known, first rows present), so renderWindow() can
+    // repaint the right slice at any scroll position.
    function _gridDomIntact() {
        const grid = document.getElementById('v3-songs-grid');
-        return !!grid && loadedCount() > 0;
+        const sizer = document.getElementById('v3-songs-gridsizer');
+        return !!grid && !!sizer && state.total > 0 && state.songs[0] !== undefined;
    }

    function _treeDomIntact() {
@@ -156,32 +179,6 @@
        return !!(tree.querySelector('[data-fn]') || tree.querySelector('details'));
    }

-    // Resolve once no grid fetch is in flight. loadGrid early-returns while
-    // state.loading is set, so paging without waiting would silently skip a
-    // page (it bumps state.page but the fetch no-ops). Bounded so a wedged
-    // load can't hang the restore forever.
-    async function _waitForGridIdle(maxMs) {
-        const cap = (maxMs == null ? 8000 : maxMs);
-        let waited = 0;
-        while (state.loading && waited < cap) {
-            await new Promise((r) => setTimeout(r, 16));
-            waited += 16;
-        }
-    }
-
-    async function _ensureGridPagesThrough(targetPage) {
-        const goal = Math.max(0, Number(targetPage) || 0);
-        // The initial page-0 load (or an auto-fill) may still be settling; wait
-        // for the real state.total before deciding how far to page, otherwise a
-        // total of 0 exits the loop immediately and the depth never restores.
-        await _waitForGridIdle();
-        while (state.page < goal && loadedCount() < state.total) {
-            if (state.loading) { await _waitForGridIdle(); continue; }
-            state.page++;
-            await loadGrid(false);
-        }
-    }
-
    function queryParams(extra, opts) {
        const f = state.filters;
        const skipArtistAlbum = opts && opts.catalog;
@@ -302,6 +299,11 @@
        if (treeBtn) treeBtn.className = 'px-3 py-2 text-sm ' + (state.view === 'tree' ? 'bg-fb-primary text-white' : 'text-fb-textDim');
        const folderBtn = document.getElementById('v3-songs-folder-btn');
        if (folderBtn) folderBtn.className = 'px-3 py-2 text-sm ' + (state.view === 'folder' ? 'bg-fb-primary text-white' : 'text-fb-textDim');
+        // Select button tracks state.selectMode — the screen-leave teardown clears
+        // select mode, so a cached-DOM re-entry must re-style the button (and the
+        // window re-renders without checkboxes via renderWindow's selectMode check).
+        const selBtn = document.getElementById('v3-songs-select');
+        if (selBtn) selBtn.className = btnCtrl + (state.selectMode ? ' bg-fb-primary text-white' : '');
        updateFilterBadge();
    }

@@ -551,6 +553,9 @@

        host.innerHTML = meter + shelfHtml;
        host.classList.remove('hidden');
+        // The home block sits above the grid sizer, so its height shifts where the
+        // window maps in scroll space — repaint the window once it's laid out.
+        if (state.view === 'grid') requestWindowRender();
        // Wire shelf cards → play (mirrors playCard's local path; recents are
        // always local-library rows, so no provider sync is needed).
        host.querySelectorAll('.v3-kp-card').forEach((btn) => btn.addEventListener('click', () => {
@@ -653,8 +658,11 @@
        const overlay = overlayActs.length
            ? '<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition pointer-events-none"><div class="flex flex-wrap gap-1 justify-center max-w-[90%] pointer-events-auto">' + overlayActs.map(actBtn).join('') + '</div></div>'
            : '';
+        // Recycled cards re-render from state, so a selected card must paint its
+        // ring on initial markup (toggleSelect only adds it to a live node).
+        const selRing = state.selected.has(key) ? ' ring-2 ring-fb-primary' : '';
        return '<div class="group relative" data-fn="' + esc(key) + '" data-letter="' + esc(songBucket(song)) + '" data-library-song="' + esc(songId(song)) + '" data-library-provider="' + esc(state.provider) + '">' +
-            '<div class="relative aspect-square rounded-lg overflow-hidden bg-fb-card cursor-pointer" data-v3-play>' +
+            '<div class="relative aspect-square rounded-lg overflow-hidden bg-fb-card cursor-pointer' + selRing + '" data-v3-play>' +
            '<img src="' + esc(artUrl(song)) + '" alt="" loading="lazy" decoding="async" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" onerror="this.style.visibility=\'hidden\'">' +
            tuning + checkbox + accuracyBadge(key) + fmtBadge(song) + overlay +
            '<div class="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition">' +
@@ -665,7 +673,10 @@
            '</div></div>' +
            '<div class="mt-1 text-sm text-fb-text truncate" title="' + esc(song.title) + '">' + esc(song.title) + '</div>' +
            '<div class="text-xs text-fb-textDim truncate">' + esc(song.artist) + '</div>' +
-            (arrChips ? '<div class="flex flex-wrap gap-1 mt-1">' + arrChips + '</div>' : '') +
+            // Always emit the chip row (even when empty) at a FIXED single-line
+            // height — uniform card height is what makes the windowed grid's
+            // absolute-position math exact (.v3-card-chips in v3.css).
+            '<div class="v3-card-chips flex gap-1 mt-1">' + arrChips + '</div>' +
            '</div>';
    }

@@ -852,76 +863,259 @@
        try { const r = await fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }); return r.ok ? r.json() : null; } catch (e) { return null; }
    }

-    // ── Grid (paged + infinite scroll) ─────────────────────────────────────--
-    async function loadGrid(reset) {
-        // A reset requested mid-fetch (provider/sort/filter/search change) must
-        // not be dropped — remember it and re-run once the in-flight load
-        // returns, otherwise the stale response repopulates the grid.
-        if (state.loading) { if (reset) state.pendingReset = true; return; }
-        const grid = document.getElementById('v3-songs-grid');
-        if (!grid) return;
-        // A reset wipes the grid (and any open card menu's DOM); close the menu
-        // first so its document-level click closer doesn't leak.
-        if (reset) { if (_closeCardMenu) _closeCardMenu(); state.page = 0; state.total = 0; grid.innerHTML = ''; }
-        state.loading = true;
-        const data = await jget('/api/library?' + queryParams({ page: state.page, size: PAGE_SIZE }).toString());
-        state.loading = false;
-        if (state.pendingReset) { state.pendingReset = false; return loadGrid(true); }
-        if (!data) return;
-        state.total = data.total || 0;
-        (data.songs || []).forEach((s) => { state.songsById[cardKey(s)] = s; grid.insertAdjacentHTML('beforeend', songCard(s)); });
-        wireCards(grid);
-        const countEl = document.getElementById('v3-songs-count');
-        if (countEl) countEl.textContent = state.total + ' song' + (state.total === 1 ? '' : 's');
-        const loaded = grid.querySelectorAll('[data-fn]').length;
-        const sentinel = document.getElementById('v3-songs-sentinel');
-        if (sentinel) sentinel.style.display = loaded < state.total ? 'block' : 'none';
-        // Auto-fill: if the grid doesn't yet overflow the scroller, keep loading
-        // (so a short first page still becomes scrollable without user action).
-        maybeFill();
-    }
+    // ── Grid (windowed / recycled — #636 item 3 stage 2) ───────────────────--
+    // Only the visible cards (± OVERSCAN_ROWS) live in the DOM; a sizer element
+    // sized to the FULL library gives the scrollbar its geometry. state.songs is
+    // a sparse array indexed by absolute position; ensureWindow() fetches the
+    // pages a window needs (keyset forward fast-path, else OFFSET random-access),
+    // and renderWindow() paints the slice the current scrollTop maps to.

+    // Live count of cards actually in the DOM — bounded under windowing, so it's
+    // the bounded-DOM invariant the tests assert (NOT a "loaded so far" signal).
    function loadedCount() { return document.querySelectorAll('#v3-songs-grid [data-fn]').length; }

    // The scroll listener lives on the SHARED #v3-main container, so guard every
-    // paging entry point on the Songs screen actually being active — otherwise
-    // scrolling another screen would keep fetching /api/library into the hidden
-    // grid after Songs has been visited once.
+    // render entry point on the Songs screen actually being active — otherwise
+    // scrolling another screen would keep rendering into the hidden grid after
+    // Songs has been visited once.
    function songsActive() { const el = document.getElementById('v3-songs'); return !!el && el.classList.contains('active'); }

-    function loadNext() {
-        if (state.loading || state.view !== 'grid' || !songsActive()) return;
-        if (loadedCount() < state.total) { state.page++; loadGrid(false); }
+    function _gridEl() { return document.getElementById('v3-songs-grid'); }
+    function _sizerEl() { return document.getElementById('v3-songs-gridsizer'); }
+
+    // Measure columns + row pitch from the LIVE grid: cols from the computed
+    // grid-template-columns (tracks resolve to explicit pixel sizes), rowH from a
+    // rendered card's box + the grid row-gap. Cards are uniform height (aspect-
+    // square art + truncated text + the fixed-height .v3-card-chips row), so one
+    // measured card sizes every row. Falls back to a coarse estimate until the
+    // first card exists, then re-measures.
+    function measureGeom() {
+        const grid = _gridEl();
+        if (!grid) return state.geom || { cols: 2, rowH: 240, gap: 16 };
+        const cs = getComputedStyle(grid);
+        const tracks = (cs.gridTemplateColumns || '').trim();
+        const cols = (tracks && tracks !== 'none')
+            ? Math.max(1, tracks.split(/\s+/).length)
+            : (state.geom ? state.geom.cols : 2);
+        const gap = parseFloat(cs.rowGap) || 0;
+        let rowH = state.geom && state.geom.rowH;
+        const card = grid.querySelector('[data-fn]') || grid.querySelector('.v3-card-skel');
+        if (card) { const h = card.getBoundingClientRect().height; if (h > 0) rowH = h + gap; }
+        if (!rowH || rowH <= 0) rowH = 240 + gap;   // estimate until a card is measured
+        state.geom = { cols, rowH, gap };
+        return state.geom;
    }

-    function maybeFill() {
-        const main = document.getElementById('v3-main');
-        if (!main || state.view !== 'grid' || state.loading || !songsActive()) return;
-        // Not tall enough to scroll yet, and more remain → pull the next page.
-        if (main.scrollHeight <= main.clientHeight + 80 && loadedCount() < state.total) loadNext();
+    // The sizer's top edge measured in the scroller's content coordinate space
+    // (accounts for the practice-home block above it, sticky toolbar, etc.).
+    function _sizerTopInScroller(main, sizer) {
+        return sizer.getBoundingClientRect().top - main.getBoundingClientRect().top + main.scrollTop;
    }

-    // Robust infinite scroll: a scroll listener on the real scroll container
-    // (#v3-main), bound once. Avoids the IntersectionObserver "already in view
-    // at observe-time" race that stuck the grid on page 0.
+    function _windowHasHoles(start, end) {
+        for (let i = start; i < end; i++) if (state.songs[i] === undefined) return true;
+        return false;
+    }
+
+    // A placeholder card with the SAME vertical structure (and therefore height)
+    // as a real card, shown only if a window's fetch hasn't landed yet. No
+    // [data-fn] → wireCards / repaintAccuracy skip it.
+    function _skeletonCard() {
+        return '<div class="v3-card-skel" aria-hidden="true">' +
+            '<div class="relative aspect-square rounded-lg overflow-hidden bg-fb-card animate-pulse"></div>' +
+            '<div class="mt-1 text-sm text-transparent truncate">·</div>' +
+            '<div class="text-xs text-transparent truncate">·</div>' +
+            '<div class="v3-card-chips flex gap-1 mt-1"></div>' +
+            '</div>';
+    }
+
+    function _renderCardsRange(start, end) {
+        let html = '';
+        for (let i = start; i < end; i++) {
+            const s = state.songs[i];
+            html += s ? songCard(s) : _skeletonCard();
+        }
+        return html;
+    }
+
+    // Fetch a single OFFSET page into the sparse store. Uses the stage-1 keyset
+    // cursor when the previous page is already loaded (cheap forward scroll);
+    // otherwise OFFSET page= for random access (jumps, restore, non-keyset
+    // providers). Records the returned next_cursor so a later contiguous page can
+    // chain off it. Returns a promise that callers AWAIT (so ensureWindow never
+    // returns with a hole still in flight); concurrent requests for the same page
+    // share the one promise. An `epoch` captured at launch guards against a reset
+    // (provider/sort/filter change) landing mid-fetch and writing stale rows into
+    // the new dataset.
+    function _loadPage(p) {
+        if (p < 0 || state.songs[p * PAGE_SIZE] !== undefined) return Promise.resolve();
+        if (state.pageProms[p]) return state.pageProms[p];
+        const epoch = state.epoch;
+        const prom = (async () => {
+            const extra = { size: PAGE_SIZE };
+            const prevCursor = state.keysetOk ? state.pageCursors[p - 1] : null;
+            if (prevCursor) extra.after = prevCursor; else extra.page = p;
+            const data = await jget('/api/library?' + queryParams(extra).toString());
+            if (state.epoch !== epoch || !data) return;   // reset mid-fetch → discard stale
+            state.total = data.total || 0;
+            if (typeof data.next_cursor !== 'undefined') {
+                state.pageCursors[p] = data.next_cursor;
+                if (p === 0) state.keysetOk = !!data.next_cursor;
+            }
+            const base = p * PAGE_SIZE;
+            (data.songs || []).forEach((s, i) => {
+                state.songs[base + i] = s;
+                state.songsById[cardKey(s)] = s;
+            });
+        })();
+        state.pageProms[p] = prom;
+        prom.finally(() => { if (state.pageProms[p] === prom) delete state.pageProms[p]; });
+        return prom;
+    }
+
+    // Ensure every absolute index in [start, end) is loaded (fetch — or await an
+    // in-flight fetch of — the covering pages). Pages resolve in order so the
+    // keyset fast-path can chain off the previous page's cursor.
+    async function ensureWindow(start, end) {
+        if (end <= start) return;
+        const p0 = Math.floor(start / PAGE_SIZE);
+        const p1 = Math.floor((end - 1) / PAGE_SIZE);
+        for (let p = p0; p <= p1; p++) {
+            if (state.songs[p * PAGE_SIZE] === undefined) await _loadPage(p);
+        }
+    }
+
+    let _winRAF = 0;
+    function requestWindowRender() {
+        if (_winRAF) return;
+        _winRAF = requestAnimationFrame(() => { _winRAF = 0; renderWindow(); });
+    }
+
+    // Paint the slice of cards the current scrollTop maps to. Sizes the sizer to
+    // the full library, computes the visible row range (± overscan), fetches any
+    // missing pages, then swaps the grid's innerHTML to just that slice. A token
+    // guards against an out-of-order fetch repainting a window the user scrolled
+    // past.
+    let _winToken = 0;
+    async function renderWindow() {
+        if (state.view !== 'grid' || !songsActive()) return;
+        const grid = _gridEl(), sizer = _sizerEl(), main = document.getElementById('v3-main');
+        if (!grid || !sizer || !main) return;
+        const { cols, rowH } = measureGeom();
+        const total = state.total || 0;
+        const rows = Math.ceil(total / Math.max(1, cols));
+        sizer.style.height = (rows * rowH) + 'px';
+        if (total === 0) {
+            grid.innerHTML = ''; grid.style.top = '0px';
+            state.winRange = { start: 0, end: 0 };
+            return;
+        }
+        const sizerTop = _sizerTopInScroller(main, sizer);
+        const viewTop = Math.max(0, main.scrollTop - sizerTop);
+        const viewBottom = viewTop + main.clientHeight;
+        const firstRow = Math.max(0, Math.floor(viewTop / rowH) - OVERSCAN_ROWS);
+        const lastRow = Math.min(rows - 1, Math.ceil(viewBottom / rowH) + OVERSCAN_ROWS);
+        const start = firstRow * cols;
+        const end = Math.min(total, (lastRow + 1) * cols);
+        // Re-render when the range changed, a card is missing, OR select mode
+        // toggled since the window was last painted (so checkboxes/rings on cached
+        // cards track state — e.g. after leaving Songs in select mode and back).
+        const same = state.winRange && state.winRange.start === start && state.winRange.end === end
+            && state.renderedSelectMode === state.selectMode;
+        if (same && !_windowHasHoles(start, end)) return;
+        const myToken = ++_winToken;
+        if (_windowHasHoles(start, end)) {
+            await ensureWindow(start, end);
+            if (_winToken !== myToken || state.view !== 'grid') return;   // superseded
+        }
+        if (_closeCardMenu) _closeCardMenu();   // its DOM is about to be replaced
+        grid.style.top = (firstRow * rowH) + 'px';
+        grid.innerHTML = _renderCardsRange(start, end);
+        wireCards(grid);
+        state.winRange = { start, end };
+        state.renderedSelectMode = state.selectMode;
+        if (sm && typeof sm.emit === 'function') {
+            try { sm.emit('v3:library-window-rendered', { start, end, total }); } catch (e) { /* */ }
+        }
+    }
+
+    // Reset/initial load of the grid. Clears the sparse store, fetches page 0
+    // (which establishes state.total + whether the keyset fast-path is available),
+    // then renders the window twice — the first render lays a real card so the
+    // second can measure the true row height and settle the window size.
+    async function loadGrid(reset) {
+        // A reset requested mid-fetch (provider/sort/filter/search change) must
+        // not be dropped — remember it and re-run once the in-flight load returns.
+        if (state.loading) { if (reset) state.pendingReset = true; return; }
+        const grid = _gridEl();
+        if (!grid) return;
+        if (reset) {
+            if (_closeCardMenu) _closeCardMenu();
+            state.epoch++;            // invalidate any in-flight page fetch from the old query
+            state.songs = [];
+            state.pageCursors = {};
+            state.pageProms = {};
+            state.keysetOk = false;
+            state.winRange = null;
+            state.renderedSelectMode = null;
+            state.geom = null;
+            state.total = 0;
+            grid.innerHTML = '';
+            grid.style.top = '0px';
+            const sizer = _sizerEl();
+            if (sizer) sizer.style.height = '0px';
+        }
+        state.loading = true;
+        await _loadPage(0);
+        state.loading = false;
+        if (state.pendingReset) { state.pendingReset = false; return loadGrid(true); }
+        const countEl = document.getElementById('v3-songs-count');
+        if (countEl) countEl.textContent = state.total + ' song' + (state.total === 1 ? '' : 's');
+        // The sentinel no longer drives loading (the sizer reserves full height);
+        // keep the node for coexistence but it has no visible role.
+        const sentinel = document.getElementById('v3-songs-sentinel');
+        if (sentinel) sentinel.style.display = 'none';
+        await renderWindow();   // first paint (rowH from estimate)
+        await renderWindow();   // re-measure rowH from a real card, settle the window
+    }
+
+    // A scroll on #v3-main re-renders the window (rAF-coalesced). No more
+    // near-bottom paging trigger — the visible range alone decides what's shown.
    function bindScroll() {
        const main = document.getElementById('v3-main');
        if (!main || state.scrollBound) return;
        state.scrollBound = true;
        main.addEventListener('scroll', () => {
-            if (state.view !== 'grid' || state.loading) return;
-            if (main.scrollTop + main.clientHeight >= main.scrollHeight - 600) loadNext();
+            if (state.view !== 'grid') return;
+            requestWindowRender();
        }, { passive: true });
    }

+    // Re-measure + re-render when the scroller's WIDTH changes (column count and
+    // the aspect-square art height both track width). Height-only changes just
+    // need a re-render to widen/narrow the visible window.
+    function bindGridResize() {
+        if (state.gridResizeBound) return;
+        const main = document.getElementById('v3-main');
+        if (!main || typeof ResizeObserver !== 'function') return;
+        state.gridResizeBound = true;
+        let lastW = main.clientWidth;
+        new ResizeObserver(() => {
+            if (state.view !== 'grid') return;
+            const w = main.clientWidth;
+            if (w !== lastW) { lastW = w; state.geom = null; }   // force re-measure
+            requestWindowRender();
+        }).observe(main);
+    }
+
    // ── A–Z jump rail interaction ─────────────────────────────────────────────
-    // The rail jumps within the contiguous, server-paged grid. Because the grid
-    // is forward-only infinite scroll (no virtualization), reaching a letter that
-    // isn't loaded yet means paging forward until its first card exists, then
-    // scrolling to it — the same rows the user would have scrolled past. The rail
-    // only offers letters the server reports as present for the active sort+filter
-    // (so a tap always terminates at a real card). A keyset-seek + virtualized
-    // window is the scaling follow-up for very large libraries.
+    // With the windowed grid the rail seeks DIRECTLY: sort_letters gives the
+    // per-bucket song counts, so the first card of a letter is at the cumulative
+    // count of the buckets before it — convert that index to a scrollTop and let
+    // the scroll handler render+fetch the destination window (O(1), no page-
+    // through). The rail only offers letters the server reports present for the
+    // active sort+filter, so a tap always lands on a real card. (A legacy provider
+    // lacking sort_letters falls back to a bounded forward scan.)
    function railEl() { return document.getElementById('v3-songs-azrail'); }
    function railBubbleEl() { return document.getElementById('v3-songs-azbubble'); }
    function railVisible() { return state.view === 'grid' && !!railSortColumn(); }
@@ -948,11 +1142,18 @@
        // party provider that predates `sort_letters` returns none, in which
        // case a title sort would advertise wrong letters — hide the rail then.
        let letters = stats && stats.sort_letters;
+        // sort_letters counts SONGS per bucket of the active sort column — exactly
+        // the cumulative the windowed jump needs to seek to a row index. The
+        // `letters` fallback is a distinct-ARTIST count (legacy provider without
+        // sort_letters, artist sort only), which can't drive a precise seek — flag
+        // it so jumpToLetter does a bounded scan instead of trusting the math.
+        const songCounts = !!(stats && stats.sort_letters);
        if (!letters) {
            if (col === 'artist') letters = (stats && stats.letters) || {};
            else { rail.classList.add('hidden'); railBubbleEl()?.classList.add('hidden'); return; }
        }
        state.railLetters = letters;
+        state.railLettersAreSongCounts = songCounts;
        // No present letters (empty or fully-filtered grid) → nothing to jump
        // to; hide the rail instead of rendering a column of disabled buttons.
        if (!Object.keys(letters).length) { rail.classList.add('hidden'); railBubbleEl()?.classList.add('hidden'); return; }
@@ -985,44 +1186,61 @@
    function _showBubble(letter) { const b = railBubbleEl(); if (b) { b.textContent = letter; b.classList.remove('hidden'); } }
    function _hideBubble() { railBubbleEl()?.classList.add('hidden'); }

-    async function _loadNextAwait() {
-        if (state.loading) { await _waitForGridIdle(); return loadedCount() < state.total; }
-        if (loadedCount() >= state.total) return false;
-        state.page++;
-        await loadGrid(false);
-        return loadedCount() < state.total;
+    // The absolute index of the first card in a bucket, from the sort_letters
+    // song-counts: sum the counts of every bucket ordered before it. O(1) — no
+    // page-through. Returns null when we don't have true song-counts (the legacy
+    // distinct-artist fallback), so the caller can scan instead.
+    function _letterStartIndex(letter) {
+        if (!state.railLettersAreSongCounts) return null;
+        const letters = state.railLetters || {};
+        const desc = state.sort.endsWith('-desc');
+        const order = desc ? RAIL_BUCKETS.slice().reverse() : RAIL_BUCKETS;
+        let idx = 0;
+        for (const b of order) { if (b === letter) return idx; idx += (letters[b] || 0); }
+        return idx;
+    }
+
+    // Fallback for providers without sort_letters: walk the sparse store forward
+    // (fetching pages as needed, bounded by total) until a card's bucket matches.
+    async function _scanForLetter(letter, token) {
+        const total = state.total || 0;
+        for (let i = 0; i < total; i++) {
+            if (state.songs[i] === undefined) {
+                await ensureWindow(i, Math.min(total, i + PAGE_SIZE));
+                if (_jumpToken !== token) return null;
+            }
+            const s = state.songs[i];
+            if (s && songBucket(s) === letter) return i;
+        }
+        return null;
    }

    let _jumpToken = 0;
    async function jumpToLetter(letter) {
-        const grid = document.getElementById('v3-songs-grid');
-        if (!grid || state.view !== 'grid' || !letter) return;
+        const grid = _gridEl(), sizer = _sizerEl(), main = document.getElementById('v3-main');
+        if (!grid || !sizer || !main || state.view !== 'grid' || !letter) return;
        _setRailActive(letter);
-        const sel = '[data-letter="' + ((window.CSS && CSS.escape) ? CSS.escape(letter) : letter) + '"]';
        const myToken = ++_jumpToken;   // a newer jump supersedes this one
-        // Page forward until the bucket's first card is loaded (or list
-        // exhausted). The guard is the page count the current total implies
-        // (+2 slack) rather than a fixed cap, so even a very large library
-        // stays reachable while a runaway loop is still bounded.
-        let guard = 0;
-        const maxPages = Math.ceil((state.total || 0) / PAGE_SIZE) + 2;
-        while (!grid.querySelector(sel) && loadedCount() < state.total
-               && _jumpToken === myToken && guard++ < maxPages) {
-            const more = await _loadNextAwait();
-            if (!more) break;
+        const { cols, rowH } = measureGeom();
+        let targetIndex = _letterStartIndex(letter);
+        if (targetIndex == null) {
+            targetIndex = await _scanForLetter(letter, myToken);
+            if (_jumpToken !== myToken) return;
+            if (targetIndex == null) return;   // letter not present
        }
-        if (_jumpToken !== myToken) return;
-        const target = grid.querySelector(sel);
-        if (!target) return;
-        const main = document.getElementById('v3-main');
+        const total = state.total || 0;
+        if (targetIndex >= total) targetIndex = Math.max(0, total - 1);
+        const targetRow = Math.floor(targetIndex / Math.max(1, cols));
+        // Pre-fetch the destination window so cards are present when the smooth
+        // scroll arrives (avoids a flash of skeletons at the landing row).
+        await ensureWindow(targetIndex, Math.min(total, targetIndex + cols * (OVERSCAN_ROWS * 2 + 4)));
+        if (_jumpToken !== myToken || state.view !== 'grid') return;
+        const sizerTop = _sizerTopInScroller(main, sizer);
        const toolbar = document.getElementById('v3-songs-toolbar');
        const pad = (toolbar ? toolbar.offsetHeight : 0) + 12; // clear the sticky toolbar
-        if (main) {
-            const top = target.getBoundingClientRect().top - main.getBoundingClientRect().top + main.scrollTop - pad;
-            main.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
-        } else {
-            target.scrollIntoView({ block: 'start', behavior: 'smooth' });
-        }
+        const top = Math.max(0, sizerTop + targetRow * rowH - pad);
+        main.scrollTo({ top, behavior: 'smooth' });
+        requestWindowRender();
    }

    function bindRailOnce() {
@@ -1279,7 +1497,9 @@
        // Keep a handle on the load so callers (notably the scroll restore on
        // screen re-entry) can await page-0 actually landing before paging
        // deeper. The visibility/scroll resets below stay synchronous.
-        document.getElementById('v3-songs-grid')?.classList.toggle('hidden', state.view !== 'grid');
+        // Hide the SIZER (not the inner grid) for non-grid views, so its reserved
+        // scroll height collapses and the tree/folder content sits at the top.
+        document.getElementById('v3-songs-gridsizer')?.classList.toggle('hidden', state.view !== 'grid');
        document.getElementById('v3-songs-tree')?.classList.toggle('hidden', state.view !== 'tree');
        document.getElementById('lib-folder-tree')?.classList.toggle('hidden', state.view !== 'folder');
        // Refresh the A–Z jump rail (shows only for the grid + alphabetical
@@ -1354,7 +1574,12 @@
            // only on the grid view when not searching/filtering/selecting
            // (renderLibraryHome + updateLibraryHome). Empty/absent → collapses.
            '<div id="v3-lib-home" class="hidden mb-5"></div>' +
-            '<div id="v3-songs-grid" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4"></div>' +
+            // Windowed grid: the sizer reserves the full-library scroll height;
+            // #v3-songs-grid is absolutely positioned inside it and holds only the
+            // visible window's cards (.v3-grid-window in v3.css).
+            '<div id="v3-songs-gridsizer" class="relative">' +
+            '<div id="v3-songs-grid" class="v3-grid-window grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4"></div>' +
+            '</div>' +
            '<div id="v3-songs-tree" class="hidden"></div>' +
            '<div id="lib-folder-controls" style="display:none"></div>' +
            '<div id="lib-folder-tree" class="space-y-1 hidden"></div>' +
@@ -1444,6 +1669,7 @@
        // before it tries to page deeper.
        await setView(state.view);
        bindScroll();
+        bindGridResize();
        positionToolbar();
        bindToolbarReflow();
        updateFilterBadge();
@@ -1468,18 +1694,20 @@

        if (snap && hashMatch && domReady && chromeOk && viewOk) {
            if (state.view === 'grid' && _gridDomIntact()) {
-                if ((snap.page || 0) > state.page || (snap.loadedCount || 0) > loadedCount()) {
-                    await _ensureGridPagesThrough(snap.page || 0);
-                }
-                document.getElementById('v3-songs-grid')?.classList.toggle('hidden', false);
+                // Geometry is stable (the sizer still holds the full height from
+                // the prior session), so restore is just: restore scrollTop, then
+                // repaint the window that maps to it. No more page-through.
+                document.getElementById('v3-songs-gridsizer')?.classList.toggle('hidden', false);
                document.getElementById('v3-songs-tree')?.classList.toggle('hidden', true);
                syncChromeFromState();
+                updateLibraryHome();   // select-mode clear on leave re-shows the home block
                _applyMainScrollTop(snap.scrollTop || 0);
+                requestWindowRender();
                _clearLibraryScrollSnapshot();
                return;
            }
            if (state.view === 'tree' && _treeDomIntact()) {
-                document.getElementById('v3-songs-grid')?.classList.toggle('hidden', true);
+                document.getElementById('v3-songs-gridsizer')?.classList.toggle('hidden', true);
                document.getElementById('v3-songs-tree')?.classList.toggle('hidden', false);
                syncChromeFromState();
                _applyMainScrollTop(snap.scrollTop || 0);
@@ -1496,10 +1724,14 @@
            // instead of silently showing the old results. Unchanged state keeps
            // the scroll-preserving no-op.
            if (state.renderedHash !== _libraryStateHash()) { reload(); return; }
-            document.getElementById('v3-songs-grid')?.classList.toggle('hidden', state.view !== 'grid');
+            document.getElementById('v3-songs-gridsizer')?.classList.toggle('hidden', state.view !== 'grid');
            document.getElementById('v3-songs-tree')?.classList.toggle('hidden', state.view !== 'tree');
            document.getElementById('lib-folder-tree')?.classList.toggle('hidden', state.view !== 'folder');
            { const _fc = document.getElementById('lib-folder-controls'); if (_fc) _fc.style.display = state.view === 'folder' ? 'flex' : 'none'; }
+            updateLibraryHome();   // select-mode clear on leave re-shows the home block
+            // Re-render in case the viewport resized while we were away (column
+            // count / row height may have changed) or select mode was cleared.
+            if (state.view === 'grid') requestWindowRender();
            return;
        }

@@ -1507,8 +1739,10 @@
        if (snap && !hashMatch) _clearLibraryScrollSnapshot();
        await render();
        if (snapToRestore && snapToRestore.hash === _libraryStateHash()) {
-            if (state.view === 'grid') await _ensureGridPagesThrough(snapToRestore.page || 0);
+            // render() built + sized the sizer at scrollTop 0; move to the saved
+            // position and let the scroll handler repaint that window.
            _applyMainScrollTop(snapToRestore.scrollTop || 0);
+            if (state.view === 'grid') requestWindowRender();
        }
        _clearLibraryScrollSnapshot();
    }
@@ -1554,6 +1788,11 @@
        getSort: () => state.sort,
        getArtist: () => state.artist,
        getAlbum: () => state.album,
+        // The grid is windowed: only a slice of cards is in the DOM at any time.
+        // A plugin that decorates cards should read THIS (not a global
+        // querySelectorAll that assumes every card is present) and re-run on each
+        // `v3:library-window-rendered` event rather than once at load.
+        visibleCards: () => document.querySelectorAll('#v3-songs-grid [data-fn]'),
        filterParams: () => {
            const f = state.filters;
            const p = new URLSearchParams();
@@ -4,6 +4,62 @@
 * `fb` palette in tailwind.config.js.
 */

+/* ── Text-selection policy (v3) ──────────────────────────────────────────────
+   Accidental drag/double-click selection of app chrome (sidebar, transport, the
+   note highway/HUD, buttons, labels) makes the UI look broken and is never
+   useful — so default the interface to non-selectable, then opt *content* back
+   in. v3-only: this sheet loads only on /v3 (v2 is unchanged). The panel's
+   guardrails are baked in:
+   - NEVER a `* { user-select:none }` rule — it breaks input carets / IME
+     composition on WebKit (bug 82692); we scope to `html` and re-enable below.
+   - This is cosmetic only; it protects nothing (DevTools defeats it) and must
+     never be used to "lock" copy-worthy text away (a11y: keep errors, IDs,
+     paths, versions, metadata, lyrics selectable — incl. in modals/toasts). */
+html { -webkit-user-select: none; user-select: none; }
+
+/* Form fields are ALWAYS selectable/editable — protects the caret + IME
+   (including CJK / dead-key composition). The default must never swallow typing.
+   `.fb-selectable *` forces descendants so a child element's own non-select
+   can't strand copy-worthy text inside a content island. */
+input, textarea, select,
+[contenteditable]:not([contenteditable="false"]),
+[contenteditable]:not([contenteditable="false"]) * {
+    -webkit-user-select: text; user-select: text;
+}
+
+/* Plugin screens are content surfaces (editor, tabview, lyrics, theory, chord
+   text, …). Re-enable their mounted subtree by INHERITANCE (no `*`) so the host
+   policy can't silently make a plugin's copyable text un-selectable — including
+   community / out-of-tree plugins that never adopt `.fb-selectable`. A plugin
+   that wants its own chrome non-selectable still wins via its own element rule
+   (which this inherited value doesn't override). */
+.screen[id^="plugin-"] { -webkit-user-select: text; user-select: text; }
+
+/* Core read-only content opts back in by CONTAINER (lower-drift than tagging
+   each value — a new setting added later inherits "selectable" for free):
+   the Settings panel (values, paths, device names, version, diagnostics,
+   About) and the now-playing song metadata (both tagged `.fb-selectable`).
+   Plugins re-enable their own copyable regions with this same class
+   (documented in CLAUDE.md).
+
+   The focused, transient surfaces below ALWAYS carry copy-worthy text (errors,
+   IDs, file paths, device/version strings) per the a11y guardrail, so they're
+   blanket-opted-in by selector rather than hand-tagged — they're single focused
+   panels, not dense card lists, so re-enabling selection there can't recreate
+   the across-cards marquee mess the policy prevents:
+   - modals / dialogs: `.feedBack-modal`, `[role="dialog"]` (confirm, edit-meta,
+     retune result/error, calibration, filter drawer);
+   - toasts: `#fb-notify-stack`, `#v3-fb-toast`;
+   - the library scan banner (`#scan-banner` — shows the current file path).
+   (Dense card lists — the library grid, dashboard, profile — are intentionally
+   left non-selectable; copy their text from the now-playing HUD / Settings.) */
+.fb-selectable, .fb-selectable *,
+.feedBack-modal, .feedBack-modal *,
+[role="dialog"], [role="dialog"] *,
+#fb-notify-stack, #fb-notify-stack *,
+#v3-fb-toast, #v3-fb-toast *,
+#scan-banner, #scan-banner * { -webkit-user-select: text; user-select: text; }
+
 /* The v3 tuner card replaces the tuner plugin's floating launcher — hide it. */
 #tuner-toggle-btn { display: none !important; }

@@ -1219,3 +1275,26 @@ html.fb-immersive #v3-main > .screen.active {
    width: 8.5rem;
    scroll-snap-align: start;
 }
+
+/* — Windowed (virtualized) Songs grid (#636 item 3 stage 2) — */
+/* The grid is absolutely positioned inside #v3-songs-gridsizer, whose height is
+   set to the FULL library (ceil(total/cols)*rowH) so the scrollbar reflects the
+   whole library while only the visible window's cards are in the DOM. The inline
+   `top` (set by renderWindow) offsets the window to the first visible row. */
+.v3-grid-window {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+}
+/* The arrangement-chip row is rendered on EVERY card (even when empty) at a fixed
+   single-line height — uniform card height is what makes the window's
+   absolute-position math exact. Extra chips are clipped rather than wrapping. */
+.v3-card-chips {
+    height: 1.5rem;
+    overflow: hidden;
+    flex-wrap: nowrap;
+}
+/* Skeleton placeholder shown only if a window's fetch hasn't landed; mirrors a
+   real card's vertical structure so it occupies an identical row height. */
+.v3-card-skel { pointer-events: none; }
@@ -0,0 +1,130 @@
+import { test, expect } from '@playwright/test';
+
+// Pins the bounded-DOM invariant of the windowed v3 Songs grid (#636 item 3
+// stage 2). Before virtualization the grid appended every scrolled page, so for
+// a 2000-song library the card-node count grew unbounded (24 → 624 → 2001).
+// Now only the visible window (± overscan) is ever in the DOM while a sizer
+// element gives the scrollbar the full-library geometry.
+//
+// Route-mocked (same strategy as v3-tree-select.spec.ts) so the invariant is
+// deterministic in CI without a seeded 2000-row library: /api/library serves a
+// synthetic page from the page/after param with total 2001, and the keyset
+// cursor is mocked as the next absolute offset.
+
+const TOTAL = 2001;
+const PAGE_SIZE = 24;
+const COLS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+// Same bucketing as the seed/server: index % 26 → a first letter, so the A–Z
+// rail has real buckets and a jump has somewhere to land.
+function songAt(i: number) {
+  const letter = COLS[i % 26];
+  return {
+    filename: `seed/${String(i).padStart(5, '0')}.sloppak`,
+    title: `Song ${String(i).padStart(4, '0')}`,
+    artist: `${letter}Band ${String(i).padStart(4, '0')}`,
+    album: `${letter} Album`,
+    format: 'sloppak',
+    arrangements: [{ index: 0, name: 'Lead' }, { index: 1, name: 'Rhythm' }],
+  };
+}
+
+// sort_letters song-counts per bucket for index%26 over [0, TOTAL).
+function sortLetters() {
+  const m: Record<string, number> = {};
+  for (let i = 0; i < TOTAL; i++) { const L = COLS[i % 26]; m[L] = (m[L] || 0) + 1; }
+  return m;
+}
+
+test.beforeEach(async ({ page }) => {
+  await page.route('**/api/library?**', async (route) => {
+    const url = new URL(route.request().url());
+    const after = url.searchParams.get('after');
+    const size = Number(url.searchParams.get('size') || PAGE_SIZE);
+    const offset = after != null ? Number(after) : Number(url.searchParams.get('page') || '0') * size;
+    const songs = [];
+    for (let i = offset; i < Math.min(TOTAL, offset + size); i++) songs.push(songAt(i));
+    const nextOffset = offset + size;
+    await route.fulfill({
+      json: {
+        songs, total: TOTAL, page: Math.floor(offset / size), size,
+        next_cursor: nextOffset < TOTAL ? String(nextOffset) : null,
+      },
+    });
+  });
+  await page.route('**/api/library/stats**', (route) => {
+    const url = new URL(route.request().url());
+    const body: any = { total_songs: TOTAL, total: TOTAL, letters: {} };
+    if (url.searchParams.get('sort_letters')) body.sort_letters = sortLetters();
+    return route.fulfill({ json: body });
+  });
+  await page.route('**/api/library/artists**', (route) => route.fulfill({ json: { artists: [], total_artists: 0 } }));
+  await page.route('**/api/library/providers', (route) => route.fulfill({ json: { providers: [{ id: 'local', label: 'My Library' }] } }));
+  await page.route('**/api/library/tuning-names**', (route) => route.fulfill({ json: { tunings: [] } }));
+  await page.route('**/api/stats/best', (route) => route.fulfill({ json: {} }));
+  await page.route('**/api/stats/recent**', (route) => route.fulfill({ json: [] }));
+});
+
+async function openSongs(page) {
+  await page.goto('/');
+  await page.waitForSelector('.screen.active', { timeout: 10000 });
+  await page.evaluate(() => {
+    // @ts-ignore — neutralize playback so a stray click can't navigate away.
+    window.playSong = () => Promise.resolve();
+    // @ts-ignore
+    window.showScreen('v3-songs');
+  });
+  await page.waitForSelector('#v3-songs-grid [data-fn]', { state: 'attached', timeout: 10000 });
+}
+
+test('the grid keeps a bounded number of card nodes while scrolling a 2001-song library', async ({ page }) => {
+  await openSongs(page);
+
+  // The count reflects the FULL library even though only a window is rendered.
+  await expect(page.locator('#v3-songs-count')).toHaveText('2001 songs');
+
+  // The sizer reserves the full scroll height (so the scrollbar is library-wide).
+  const scrollHeight = await page.evaluate(() => document.getElementById('v3-main')!.scrollHeight);
+  expect(scrollHeight).toBeGreaterThan(20000);
+
+  // Scroll the whole library; the in-DOM card count must stay bounded throughout.
+  const CAP = 150;
+  let maxNodes = await page.locator('#v3-songs-grid [data-fn]').count();
+  for (let s = 0; s < 50; s++) {
+    await page.evaluate(() => { const m = document.getElementById('v3-main')!; m.scrollTop += m.clientHeight * 0.85; });
+    await page.waitForTimeout(60);
+    const n = await page.locator('#v3-songs-grid [data-fn]').count();
+    maxNodes = Math.max(maxNodes, n);
+    expect(n).toBeLessThanOrEqual(CAP);
+  }
+  // Sanity: we actually rendered a window (not zero), and stayed well under the
+  // unbounded 2001 the old append-everything grid would have produced.
+  expect(maxNodes).toBeGreaterThan(0);
+  expect(maxNodes).toBeLessThanOrEqual(CAP);
+
+  // The count is still correct after scrolling to the end.
+  await expect(page.locator('#v3-songs-count')).toHaveText('2001 songs');
+});
+
+test('the A–Z rail jumps directly to a letter without loading every page', async ({ page }) => {
+  await openSongs(page);
+  await page.waitForSelector('.v3-azrail-letter', { state: 'attached', timeout: 10000 });
+
+  // Jump to 'M'; the window scrolls to the row holding the first 'M' card.
+  await page.evaluate(() => {
+    const b = [...document.querySelectorAll('.v3-azrail-letter')]
+      .find((x) => x.getAttribute('data-letter') === 'M' && !(x as HTMLButtonElement).disabled) as HTMLElement | undefined;
+    if (!b) throw new Error('no M rail letter'); b.click();
+  });
+
+  // After the jump+window render, an 'M' card is present near the top of the
+  // viewport (the jump is O(1) via sort_letters, not a full page-through).
+  await expect.poll(async () => page.evaluate(() => {
+    const main = document.getElementById('v3-main')!;
+    const top = main.getBoundingClientRect().top + (document.getElementById('v3-songs-toolbar')?.offsetHeight || 0);
+    return [...document.querySelectorAll('#v3-songs-grid [data-fn]')].some((c) => {
+      const r = c.getBoundingClientRect();
+      return c.getAttribute('data-letter') === 'M' && r.top >= top - 4 && r.top < top + 320;
+    });
+  }), { timeout: 5000 }).toBe(true);
+});
@@ -130,6 +130,59 @@ test('measure-start cache is invalidated on song change', () => {
    );
 });

+// ── Fret-row fit guard ──────────────────────────────────────────────────────
+// Keeps the heat-coloured fret-number row from clipping off the bottom edge
+// when a tight, centred zoom (worst mid-neck) drops it below the lower-third
+// framing. camUpdate dollies the camera back via a capped, hysteretic boost.
+
+test('fret-row fit guard constants are defined', () => {
+    for (const name of [
+        'FRET_ROW_FIT_NDC_MIN', 'FRET_ROW_FIT_DEADBAND', 'FRET_ROW_FIT_BOOST_MAX',
+    ]) {
+        assert.match(src, new RegExp('const\\s+' + name + '\\s*='),
+            `${name} must be declared as a fit-guard constant`);
+    }
+});
+
+test('the curDist lerp target applies the fit-guard dolly boost', () => {
+    // The span-driven tgtDist still owns zooming in; the boost only pulls back.
+    assert.match(
+        src,
+        /curDist\s*\+=\s*\(\s*tgtDist\s*\*\s*_fretRowFitBoost\s*-\s*curDist\s*\)\s*\*\s*lerp/,
+        'curDist must lerp toward tgtDist * _fretRowFitBoost',
+    );
+});
+
+test('the guard projects the fret-row band and adjusts the boost with hysteresis', () => {
+    // Row band Y mirrors the render position (sY(lowest) - S_GAP * 1.4).
+    assert.match(
+        src,
+        /Math\.min\(\s*sY\(0\)\s*,\s*sY\(nStr\s*-\s*1\)\s*\)\s*-\s*S_GAP\s*\*\s*1\.4/,
+        'the guard must probe the same row band the fret-number row is drawn at',
+    );
+    // Prompt pull-back when below the min, capped at BOOST_MAX.
+    assert.match(
+        src,
+        /_rowNdcY\s*<\s*FRET_ROW_FIT_NDC_MIN[\s\S]*?Math\.min\(\s*FRET_ROW_FIT_BOOST_MAX/,
+        'below the min NDC the boost rises, capped at FRET_ROW_FIT_BOOST_MAX',
+    );
+    // Lazy relax only once past the deadband, floored at 1.
+    assert.match(
+        src,
+        /_rowNdcY\s*>\s*FRET_ROW_FIT_NDC_MIN\s*\+\s*FRET_ROW_FIT_DEADBAND[\s\S]*?Math\.max\(\s*1\s*,\s*_fretRowFitBoost/,
+        'past the deadband the boost relaxes back toward 1',
+    );
+});
+
+test('the fit guard yields to the free-cam (Camera Director)', () => {
+    // When the free-cam owns the view the auto dolly must reset to 1, not fight it.
+    assert.match(
+        src,
+        /if\s*\(\s*_freeCam\s*&&\s*_freeCam\.enabled\s*\)\s*\{\s*if\s*\(\s*_fretRowFitBoost\s*!==\s*1\s*\)\s*_fretRowFitBoost\s*=\s*1/,
+        'with the free-cam enabled the guard must drop any auto dolly back to 1',
+    );
+});
+
 // ── Debug hook stayed removed ───────────────────────────────────────────────

 test('temporary camera debug hook is not present', () => {
@@ -0,0 +1,43 @@
+// Guards the Section Practice popover's outside-click dismiss in static/app.js
+// (_installSectionPracticeDismiss). The v3 player-rail icon buttons call
+// e.stopPropagation() in their click handler (static/v3/player-chrome.js
+// wireRail), so a BUBBLE-phase document dismiss never fires when the user clicks
+// a different rail icon (Plugins, Audio, …) — leaving the Practice popover
+// stranded open under the newly-opened one (feedBack#638). The dismiss must bind
+// in the CAPTURE phase (runs before the target's stopPropagation can swallow it).
+// Esc must stay bubble-phase so it doesn't reorder ahead of the player's
+// Escape-to-exit handling. A revert to bubble-phase should fail here.
+//
+// Source-level only — same strategy as the other tests/js/ files.
+
+const { test } = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+
+const src = fs.readFileSync(path.join(__dirname, '..', '..', 'static', 'app.js'), 'utf8');
+const m = src.match(/function _installSectionPracticeDismiss\s*\(\)\s*\{[\s\S]*?\n\}/);
+assert.ok(m, '_installSectionPracticeDismiss() not found in static/app.js');
+const body = m[0];
+
+test('the outside-click dismiss binds in the CAPTURE phase', () => {
+    assert.match(
+        body,
+        /addEventListener\(\s*['"]click['"][\s\S]*?,\s*true\s*\)/,
+        'the click dismiss must pass the capture flag (`, true`) so a rail icon\'s '
+        + 'stopPropagation() cannot swallow it',
+    );
+});
+
+test('only the click listener is capture (Escape keydown stays bubble-phase)', () => {
+    // Exactly one capture binding in the installer — the click. The keydown
+    // (Escape) listener must NOT be capture.
+    const captureBinds = body.match(/,\s*true\s*\)/g) || [];
+    assert.equal(captureBinds.length, 1, 'expected exactly one capture-phase binding (the click)');
+});
+
+test('the dismiss ignores clicks inside the control (no self-close)', () => {
+    assert.match(body, /section-practice-control/, 'must scope to #section-practice-control');
+    assert.match(body, /ctrl\s*&&\s*ctrl\.contains\(e\.target\)\)\s*return/,
+        'a click inside the control (incl. the pill) must not dismiss the popover');
+});
@@ -1,11 +1,12 @@
 // Pins the v3 Songs A–Z jump rail wiring in static/v3/songs.js.
 //
 // The rail lets a user jump the library grid to artists/titles starting with a
-// letter (Plex/Radarr/iOS-contacts pattern). Because the grid is forward-only,
-// server-paged infinite scroll, the jump pages through to the target card then
-// scrolls — and the rail only offers letters the server reports present for the
-// active sort+filter (so a tap always terminates at a real card). It is shown
-// only for the grid view + alphabetical (artist/title) sorts.
+// letter (Plex/Radarr/iOS-contacts pattern). With the windowed grid (#636 item 3
+// stage 2) the jump seeks DIRECTLY: the sort_letters song-counts give the first
+// card's absolute index (cumulative of prior buckets), which converts to a
+// scrollTop — no page-through. The rail only offers letters the server reports
+// present for the active sort+filter (so a tap always lands on a real card). It
+// is shown only for the grid view + alphabetical (artist/title) sorts.
 //
 // Source-level only — same strategy as tests/js/highway_3d_camera_framing.test.js.

@@ -65,16 +66,24 @@ test('the rail + drag bubble are rendered in the Songs markup', () => {
    assert.match(src, /id="v3-songs-azbubble"/);
 });

-test('jumpToLetter pages through to the target then scrolls (load-through)', () => {
-    // Forward-paging helper used to load rows up to the target letter.
-    assert.match(src, /async function\s+_loadNextAwait\s*\(\)/);
+test('jumpToLetter seeks directly via sort_letters cumulative (no page-through)', () => {
+    // The cumulative-count seek: sum the song-counts of buckets ordered before
+    // the target to get its first row's absolute index.
+    assert.match(src, /function\s+_letterStartIndex\s*\(letter\)/,
+        'jumpToLetter must derive the target index from sort_letters counts');
    assert.match(
        src,
-        /async function\s+jumpToLetter[\s\S]*?_loadNextAwait\(\)[\s\S]*?(scrollTo|scrollIntoView)/,
-        'jumpToLetter must page forward (_loadNextAwait) then scroll to the target card',
+        /async function\s+jumpToLetter[\s\S]*?_letterStartIndex\(letter\)[\s\S]*?scrollTo/,
+        'jumpToLetter must compute the target index then scrollTo (no _loadNextAwait page-through)',
    );
-    // A token guards against overlapping jumps (drag scrubbing) — newest wins.
-    assert.match(src, /_jumpToken\s*===\s*myToken/);
+    // It pre-fetches the destination window so cards are ready when the scroll lands.
+    assert.match(src, /async function\s+jumpToLetter[\s\S]*?ensureWindow\(/,
+        'jumpToLetter must pre-fetch the destination window before scrolling');
+    // The old forward-paging helper is gone (the seek is O(1)).
+    assert.doesNotMatch(src, /_loadNextAwait/,
+        'the page-through helper must be removed under the windowed grid');
+    // A token still guards overlapping jumps (drag scrubbing) — newest wins.
+    assert.match(src, /_jumpToken\s*!==\s*myToken/);
 });

 test('the rail supports pointer drag-scrub + keyboard arrows', () => {
@@ -36,13 +36,15 @@ function makeStore() {
    };
 }

-function saveSnapshot(storage, state, scrollTop, page, loadedCount) {
+// Mirror of static/v3/songs.js _saveLibraryScrollSnapshot. Under the windowed
+// grid (#636 item 3 stage 2) geometry is stable, so the snapshot is just
+// {hash, scrollTop, view} — no page/loadedCount depth bookkeeping (restore sets
+// scrollTop and re-renders the window that maps to it).
+function saveSnapshot(storage, state, scrollTop) {
    const snap = {
        hash: buildLibraryStateHash(state),
        scrollTop,
        view: state.view,
-        page,
-        loadedCount,
    };
    storage.setItem(SCROLL_STATE_KEY, JSON.stringify(snap));
 }
@@ -88,19 +90,21 @@ test('buildLibraryStateHash is stable for equivalent filter arrays', () => {
    assert.strictEqual(buildLibraryStateHash(s1), buildLibraryStateHash(s2));
 });

-test('snapshot stores scrollTop and page', () => {
+test('snapshot stores scrollTop + view + hash (geometry-stable restore)', () => {
    const storage = makeStore();
-    saveSnapshot(storage, baseState, 1840, 3, 96);
+    saveSnapshot(storage, baseState, 1840);
    const snap = readSnapshot(storage);
    assert.strictEqual(snap.scrollTop, 1840);
-    assert.strictEqual(snap.page, 3);
-    assert.strictEqual(snap.loadedCount, 96);
+    assert.strictEqual(snap.view, 'grid');
    assert.strictEqual(snap.hash, buildLibraryStateHash(baseState));
+    // Page-depth bookkeeping is gone — the windowed grid restores from scrollTop.
+    assert.strictEqual(snap.page, undefined);
+    assert.strictEqual(snap.loadedCount, undefined);
 });

 test('stale snapshot is detected when filters change', () => {
    const storage = makeStore();
-    saveSnapshot(storage, baseState, 500, 1, 48);
+    saveSnapshot(storage, baseState, 500);
    const snap = readSnapshot(storage);
    const changed = buildLibraryStateHash({ ...baseState, q: 'beatles' });
    assert.notStrictEqual(snap.hash, changed);
@@ -0,0 +1,80 @@
+// Guards the v3 text-selection policy (static/v3/v3.css + static/v3/index.html):
+// the UI defaults to non-selectable so accidental chrome selection can't look
+// broken, while form fields, plugin screens, and core content opt back in. A
+// future global reset clobbering the rule — or the content containers losing
+// their .fb-selectable opt-in — should fail here.
+//
+// Source-level only — same strategy as the other tests/js/ files.
+
+const { test } = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+
+const root = path.join(__dirname, '..', '..');
+// Strip block comments so the policy's own explanatory prose (which quotes the
+// `* { user-select:none }` anti-pattern as a warning) can't trip the assertions.
+const css = fs.readFileSync(path.join(root, 'static', 'v3', 'v3.css'), 'utf8')
+    .replace(/\/\*[\s\S]*?\*\//g, '');
+const html = fs.readFileSync(path.join(root, 'static', 'v3', 'index.html'), 'utf8');
+
+test('v3 defaults to non-selectable on html (not a universal `*` rule)', () => {
+    assert.match(css, /html\s*\{[^}]*user-select:\s*none/,
+        'html must default user-select: none');
+    // The `* { user-select: none }` anti-pattern breaks input carets / IME — must not exist.
+    assert.doesNotMatch(css, /\*\s*\{[^}]*user-select:\s*none/,
+        'must NOT use a universal `*` user-select:none rule');
+});
+
+test('form fields are always re-enabled (caret / IME safe)', () => {
+    assert.match(
+        css,
+        /input,\s*textarea,\s*select[\s\S]*?contenteditable[\s\S]*?user-select:\s*text/,
+        'input/textarea/select/[contenteditable] must be re-enabled to user-select: text',
+    );
+});
+
+test('plugin screen subtree stays selectable by inheritance (no `*`, respects plugin opt-outs)', () => {
+    assert.match(
+        css,
+        /\.screen\[id\^="plugin-"\]\s*\{[^}]*user-select:\s*text/,
+        'plugin screens must be re-enabled so plugin content is not silently un-copyable',
+    );
+    assert.doesNotMatch(
+        css,
+        /\.screen\[id\^="plugin-"\]\s*\*/,
+        'the plugin carve must NOT use `*` (would override a plugin\'s own non-select chrome)',
+    );
+});
+
+// The rule that re-enables selection on copyable content. Find the single
+// declaration block whose body sets `user-select: text`, then assert each
+// required selector is one of its selectors — order/format independent.
+const selectableRule = (css.match(/([^{}]*)\{[^}]*user-select:\s*text[^}]*\}/g) || [])
+    .join('\n');
+
+test('core content opts back in via .fb-selectable (element + descendants)', () => {
+    assert.match(selectableRule, /\.fb-selectable\b/, '.fb-selectable must set user-select: text');
+    assert.match(selectableRule, /\.fb-selectable\s*\*/, '...and its descendants (.fb-selectable *)');
+});
+
+test('focused copyable surfaces (modals/toasts/scan banner) opt back in', () => {
+    // The PR\'s a11y guardrail keeps copyable text selectable "incl. in
+    // modals/toasts" — these carry errors / IDs / paths the user copies.
+    assert.match(selectableRule, /\.feedBack-modal\b/, 'modals (.feedBack-modal) must be selectable');
+    assert.match(selectableRule, /\[role="dialog"\]/, 'dialogs ([role="dialog"]) must be selectable');
+    assert.match(selectableRule, /#fb-notify-stack\b/, 'toasts (#fb-notify-stack) must be selectable');
+    assert.match(selectableRule, /#scan-banner\b/, 'the scan banner (#scan-banner) must be selectable');
+});
+
+// Match a class="" attribute that contains ALL given tokens in any order.
+const hasClasses = (...tokens) => new RegExp(
+    'class="' + tokens.map((t) => '(?=[^"]*\\b' + t + '\\b)').join('') + '[^"]*"');
+
+test('the Settings panel and now-playing metadata carry .fb-selectable', () => {
+    assert.match(html, hasClasses('fb-settings', 'fb-selectable'),
+        'the Settings panel must opt back in (paths / version / diagnostics / About)');
+    assert.match(html, hasClasses('fb-selectable', 'pointer-events-auto'),
+        'the now-playing metadata must opt back in AND re-enable pointer-events '
+        + '(its #player-hud parent is pointer-events-none, which would block mouse selection)');
+});
Author	SHA1	Message	Date
topkoaandClaude Opus 4.8	38297937b7	fix: "practise" -> "practice" (American spelling, matches the rest of the UI) Three spots used British "practise" while the rest of the app uses American "practice" (Keep practicing, Virtuoso - Practice, etc.): - static/v3/profile.js — first-run onboarding "Feats of Power" step - plugins/achievements/feats.json — The Witching Hour feat description - plugins/achievements/engine.py — code comment Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Signed-off-by: topkoa <topkoa@gmail.com>	2026-06-29 15:18:05 -04:00
ChrisBeWithYou GitHub Claude Opus 4.8 byrongamatos	dfa825b4ab	docs: host theme contract proposal (#645 ) * docs: host theme contract proposal (prevent features carving into one theme) Charrette output after a plugin UI feature (note_detect results card) was built against only the default skin and broke on the others — the colours adapted via tokens but the visual devices (glow ring, gradient) did not, because themes are design languages, not palettes, and nothing governs whether a theme does glow. Proposes a host theme contract: always-present semantic role tokens (incl. the missing on-accent + focus-ring), intent-named capability recipe slots where "off" is legal (an EMPHASIS recipe + an ACCENT-TEXT recipe), a window.feedBack.theme read/capability API + theme:changed event, a derive-surfaces-from-host reconciliation rule, accessibility baked in, and a skin-matrix verification gate. All additive + feature-detected. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QbexxfTt8q2tAn436MqGWF * docs(host-theme-contract): make the proposal normative (review fixes) Address the review of #645 (manual + Codex) — the doc was a sound design sketch but not yet the precise contract it claims to be: - P1 Token contract pinned: one public namespace `--fb-` written on :root by a host-owned contract stylesheet (present themed-or-not); `--fbv-` explicitly demoted to internal Tailwind-override plumbing (plugins must not read it). Added a normative role table + value grammar (colour roles = `r g b` triplets consumed via `rgb(var(--fb-x))`; recipe slots = full CSS device values). The §5 example now uses `--fb-` throughout (was bare `--accent`/`--emph-`). - P1 Invisible-text bug removed from the spec: `--fb-acc-text-fill` is the one slot where `none` is ILLEGAL (always a real paint, defaulting to the solid accent); the example feature-detects `background-clip: text` and keeps a solid `color` base, so the accuracy number can never render transparent — honouring the DoD "a device stays legible when its slot resolves to none". - P1 capabilities() booleans removed: they contradicted "never branch on glowy?" and were too lossy for canvas. The JS API is now CSS/DOM-forbidden and exposes RESOLVED token values (`get().tokens`) for canvas/WebGL renderers only. - P1 Physical home decided: a static `theme-contract.css` (outside the prebuilt Tailwind artifact, so no tailwind-fresh CI churn) holds the :root `--fb-*` defaults + the single focus-visible + reduced-motion rules; existing v3.css focus/motion rules are a tracked reconciliation, not day-one magic. - P2 Full on-fill family (`--fb-on-accent/-good/-warn/-bad`) + good/warn/bad ↔ existing good/mid/low mapping; `theme:changed` lifecycle pinned (get() sync + valid pre-apply, event after commit + once on hydration, plugins read on mount); same-document-light-DOM scope + shadow/iframe bridge stated; prefersReducedMotion() named the single JS motion gate. Resolved open questions folded into the body; the two genuine ones (skins-as- host-themes, component-recipe bundles) remain. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: byrongamatos <xasiklas@gmail.com>	2026-06-29 15:48:35 +02:00
ChrisBeWithYou GitHub Claude Opus 4.8	3120ae3e71	fix(highway_3d): dolly back so the fret-number row can't clip off the bottom (#633 ) The heat-coloured fret-number row is drawn as a band BELOW the board (sY(lowest) - S_GAP*1.4), but camUpdate's self-correcting framing only anchors the board CENTRE to the lower third of the screen and reserves no headroom for that row. So a tight zoom on a centred active span (worst mid-neck; fine at either end of the neck) pushes the numbers past the bottom edge -- which is why testers saw it "only when centered" and "not every song." Tilt can't fix it (it would only trade a bottom clip for a top clip); the vertical-extent problem at tight zoom needs camera distance. Add a fret-row fit guard: project the row band with the final camera and, when it falls below FRET_ROW_FIT_NDC_MIN, raise a capped, hysteretic _fretRowFitBoost applied to the curDist lerp target (the span-driven tgtDist still owns zooming IN). The boost rises promptly (proportional to the deficit), relaxes lazily past a deadband, and is capped at FRET_ROW_FIT_BOOST_MAX (+60%) so the zoom can't pop or hunt. It cooperates with the tilt loop (pull-back shrinks the scene, tilt keeps the centre anchored) and yields entirely to the Camera Director free-cam. Surgical: passages where the row is already visible never trigger it, so framing is unchanged everywhere it already worked. plugin.json 3.30.0 -> 3.30.2 (screen.js cache-buster; 3.30.1 is taken by the FPS-counter PR). Tests: tests/js/highway_3d_camera_framing.test.js (guard constants, the boosted curDist lerp, the projected-row hysteresis, free-cam yield). Fixes #632 Claude-Session: https://claude.ai/code/session_01QbexxfTt8q2tAn436MqGWF Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-29 15:31:24 +02:00
ChrisBeWithYou GitHub Claude Opus 4.8 byrongamatos	199550e5fb	fix(v3): dismiss Section Practice popover when another player popover opens (#638 ) * fix(v3): dismiss Section Practice popover when another player popover opens The Section Practice popover (Songs > Song > Practice pill) stayed open when the user then clicked a v3 player-rail icon (Plugins, Audio, …), leaving two popovers stacked on top of each other. Reported on 0.3.0 (macOS) and still reproducing in the 2026-06-28 build. Root cause: the popover's outside-click dismiss was bound in the bubbling phase, but the v3 rail's icon buttons call e.stopPropagation() in their click handler (player-chrome.js wireRail), which kills bubbling before the click reaches document. So the dismiss listener never fired for a rail-icon click and the popover was orphaned open. Fix: bind the outside-click dismiss in the capture phase, which runs before the target's handler so stopPropagation() can't swallow it. This mirrors the audio mixer popover (audio-mixer.js), which already dismisses outside-clicks via capture-phase listeners for exactly this reason. Esc handling stays in the bubble phase (no rail handler stops keydown propagation, and capturing it would reorder it ahead of the player's Escape-to-exit handling). Shared app.js code, so v2 is covered too; v2 has no stopPropagation rail, so its outside-click dismiss behaviour is unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QbexxfTt8q2tAn436MqGWF * chore(#638): add CHANGELOG entry + capture-phase regression test Review follow-ups for the Section Practice popover dismiss fix: - CHANGELOG [Unreleased] → Fixed entry (repo workflow requires one). - tests/js/section_practice_dismiss.test.js pins the fix: the outside-click dismiss binds in the CAPTURE phase (so a rail icon's stopPropagation can't swallow it), exactly one capture binding (Escape keydown stays bubble-phase), and the #section-practice-control containment guard (no self-close). A revert to bubble-phase fails the test. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: byrongamatos <xasiklas@gmail.com>	2026-06-29 15:00:28 +02:00
ChrisBeWithYou GitHub Claude Opus 4.8 byrongamatos	8fbbc761fc	fix(v3): reject accidental text-selection of UI chrome (user-select policy) (#637 ) * fix(v3): reject accidental text-selection of UI chrome (user-select policy) Dragging/double-clicking across the v3 UI marquee-highlighted buttons, labels, the sidebar, transport, and the note-highway HUD — looks broken (reported Mac + Windows). Default the v3 shell to user-select:none on html, then opt CONTENT back in. Decided by a 4-lens panel (UX / a11y / dev-ops / plugin-ecosystem); their guardrails are baked in: - Form fields ALWAYS re-enabled (input/textarea/select/[contenteditable]) so the caret + IME composition never break. No `* { user-select:none }` (WebKit input bug 82692). - Plugin screens (.screen[id^="plugin-"]) stay selectable BY INHERITANCE (no ``, so a plugin's own non-select chrome still wins) — a plugin's copyable text (lyrics, chords, results), including community/out-of-tree plugins that never adopt the class, isn't silently locked. - Core read-only content opts back in by CONTAINER via a hand-authored `.fb-selectable` (not a Tailwind utility — so runtime-installed plugins get it too): the whole Settings panel (paths, device names, version, diagnostics, About) and the now-playing song metadata. Answers the open "keep settings copyable?" question: yes, at the container. Cosmetic only — never used to lock copy-worthy text (errors/IDs/paths/versions/ metadata stay selectable; WCAG 2.2 allows copy-paste as a mechanism). v3-only (v2 unchanged; v3.css loads only on /v3); plain CSS, no Tailwind rebuild; no desktop/Electron changes (standard OS-framed window). `.fb-selectable` is documented in CLAUDE.md for plugin authors. Tests: tests/js/v3_user_select_policy.test.js (html default, form-field re-enable, plugin-screen carve without ``, .fb-selectable, container opt-ins, and the no-``-rule guardrail). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QbexxfTt8q2tAn436MqGWF fix(v3): address review of the user-select policy (#637) Review (manual + Codex) of the v3 text-selection policy: - P1 (real bug): the now-playing HUD metadata opted into `.fb-selectable` but its `#player-hud` parent is `pointer-events: none`, so the mouse could never reach the text to select it — the opt-in was inert. Add `pointer-events-auto` to the metadata block (verified in-browser: user-select:text + pointer- events:auto, while the HUD parent stays pointer-events:none). - Coverage: the PR's a11y guardrail promised copyable text stays selectable "incl. in modals/toasts", but only Settings + the HUD were opted in. Blanket- opt the focused copyable surfaces back in by selector — `.feedBack-modal`, `[role="dialog"]`, `#fb-notify-stack`, `#v3-fb-toast`, `#scan-banner` — so errors / IDs / paths / file names in dialogs, toasts, and the scan banner stay copyable. These are focused panels, not dense card lists, so re-enabling selection there can't recreate the across-cards marquee mess. (Deliberately NOT opting in the library grid / dashboard / profile card lists: making dense card text selectable would reintroduce exactly that marquee mess on a drag — copy song metadata from the now-playing HUD / Settings instead.) - Test (P3): assert the selectable rule's selectors order-independently, cover the new modal/toast/banner surfaces, and check the HUD block carries BOTH fb-selectable and pointer-events-auto (class-order independent). Verified in a real browser (chromium): html=none, sidebar chrome=none, input= text, Settings=text, HUD meta=text+pointer-events:auto, dialog/modal=text. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: byrongamatos <xasiklas@gmail.com>	2026-06-29 14:44:56 +02:00
Byron Gamatos GitHub Claude Opus 4.8	a791a0d8fe	feat(v3): DOM-virtualize the Songs grid (#636 item 3 stage 2) (#643 ) The v3 Songs grid appended every scrolled page and never released nodes, so card-node count grew unbounded with scroll depth (24 → 624 → 2001 for a 2000-song library). Replace it with a windowed/recycled render: only the visible window (± overscan) is in the DOM while a #v3-songs-gridsizer element sized to ceil(total/cols)*rowH gives the scrollbar full-library geometry; #v3-songs-grid is absolutely positioned to the first visible row. - state.songs is a sparse, absolutely-indexed store filled a page at a time by ensureWindow(): the stage-1 keyset cursor for contiguous forward scroll (O(page)), OFFSET page= for jumps/restore/non-keyset providers. _loadPage shares an in-flight promise per page and an epoch guard discards a stale fetch that lands after a reset. - A–Z rail seeks directly via sort_letters cumulative counts (O(1), no page-through); bounded scan fallback for legacy providers without it. - Snapshot/restore is now scrollTop-based (geometry is stable). Select mode, accuracy badges, ⋮ menu, plugin card actions, and tree/folder coexistence survive cards recycling; renderWindow re-renders when select mode toggles. - Plugins get window.v3Songs.visibleCards() + a v3:library-window-rendered event instead of assuming all cards are present (highway-stutter lesson). Verified in a browser against a seeded 2001-song library: DOM bounded to ~60 nodes while the count reads "2001 songs", rail jump lands on the target row, selection survives recycling, scroll-restore exact. Codex-reviewed (3 findings fixed: stale-fetch epoch guard, await-in-flight page promise, select-mode resync on cached re-entry). Frontend-only. Tests: tests/browser/v3-grid-virtualization.spec.ts pins the bounded-DOM invariant + direct rail jump; tests/js/v3_az_rail.test.js and v3_songs_scroll.test.js updated to the new wiring. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-29 12:26:29 +02:00