feat(android): the tap highlight goes, a press state replaces it

The phone drew a grey box over the bounding rect of whatever was
tapped, which is the web view saying what it is. It is gone in one
declaration: `-webkit-tap-highlight-color` is inherited and an
inherited property crosses a shadow boundary, so `html` in index.css
reaches every shadow root in the app. Measured three roots deep,
rgba(0, 0, 0, 0.18) before and rgba(0, 0, 0, 0) after.

Removing it removes the only touch feedback several surfaces had, so
the press state is part of the same change rather than a later polish
item — with the highlight gone a held row measured the *hover* tint,
which on a phone is synthesised by the hold itself and outlives it.
The four lists' rows, the tab bar, the sidebar's destinations and the
shared context-menu item take --yj-press-overlay on :active; the cards
already had scale(0.97). The press selector carries a state class
because a row is .track-row.selected.active, so a bare :active shows
nothing on the row a phone is most likely to press. And those
surfaces' hover tints move behind (hover: hover) and (pointer: fine),
which is #68's gate applied to a tint rather than a revealed control.

user-select, the other half of the Findings, was already done: the
first rule in index.css covers the shadow roots for the same reason.
touch-action: manipulation is declined — the 300ms delay it is offered
for is already absent on a width=device-width viewport, and what it
would really change is the gesture stack tuned by measurement on a
device this session cannot measure.

Closes #54

.pi/skills/yellowjacket-dev/SKILL.md

@@ -158,7 +158,7 @@ only climb when it cannot.
 | You changed | Run | Cost |
 |---|---|---|
 | A Lit component, a store, the shortcut service | `make ui-test` | ~2 s, no app |
-| …and it renders differently | `make ui-visual` | + 6 baselines, opt-in |
+| …and it renders differently | `make ui-visual` | + 10 baselines, opt-in, never gates |
 | Any Go code | `make test` | 3 passes, ~2 min |
 | A service that emits events | `make test` — assert on the payload, see `backend/queue/emit_test.go` | in-process, no app |
 | A bound method or a bound struct field | `make bindings` then `make ui-test` | ~1.5 s + 2 s |
@@ -180,6 +180,13 @@ less than it looks.)
 
 Two rules about climbing:
 
+- **If you moved a component's geometry, run `make ui-visual` and
+  refresh that component's baseline in the same commit.** Nothing else
+  will: it is the one tier in this repo no hook and no CI job runs, and
+  it cannot be one — its references are machine-specific, measured in
+  [references/ui-tier.md](references/ui-tier.md). Four of them drifted
+  across three merges before anyone noticed (#196). Read the image;
+  never bless a reference you did not cause.
 - **A component test passing is not the app rendering.** If you touched
   anything in `frontend/src`, verify it in the real app too — start it
   headless, `screenshot --filename=/tmp/shot.png`, and *read the PNG*.

.pi/skills/yellowjacket-dev/references/ui-tier.md

@@ -78,9 +78,58 @@ synchronously.
   Microtasks and not a timer, deliberately: a timer hangs forever under
   the suites that install fake ones.
 
-Visual baselines are font-hinting and compositing sensitive, which is
-why they are opt-in: they only mean anything on the machine that
-recorded them.
+## The visual tier does not gate, and that is measured (#196)
+
+`make ui-visual` is the same suite with nine `toMatchScreenshot`
+baselines switched on. **Nothing runs it but a person**, deliberately,
+and the reason is a number rather than a preference: the committed
+baselines were recorded on Arch, and replayed in a bare `ubuntu:24.04`
+container — CI's `check` image — three of them fail for reasons that
+have nothing to do with any component.
+
+| baseline | Arch | ubuntu:24.04 |
+|---|---|---|
+| `page-header` filtered-by-search | passes | ratio 0.03 differ, against a 0.02 allowance |
+| `track-info` | passes | ratio 0.03 differ |
+| `seek-bar` | 1152×18 | 1152×17 |
+
+The two references that were genuinely stale did not even agree about
+their *new* size — `now-playing` renders 1152×65 on Arch and 1152×64 in
+the container. So moving CI's `check` job from `make ui-test` to
+`make ui-visual` is not a one-line change: it needs a second,
+container-recorded baseline set, which every local run would then fail
+against. That is the same trap the other way round, and a pre-push hook
+is the same fault again — one machine's baselines against everybody
+else's renderer.
+
+So the tier stays local and opt-in, and the rule that replaces the gate
+is:
+
+- **A change that moves a component's geometry refreshes that
+  component's reference in the same commit, having read the image.**
+  Look at the PNG; the dimensions in the failure message are the cheap
+  half of the answer.
+- **Never refresh a reference you did not cause.** #196 exists because
+  four of them drifted across three unrelated merges, and every red run
+  made the next person likelier to stop running the tier than to read
+  it.
+- **State the world the shot is taken in.** The stores are singletons,
+  so a visual case that sets nothing photographs whatever the previous
+  case left behind — which is how the sidebar's baseline came to have
+  Tracks lit and `now-playing`'s to be playing from a dynamic mix.
+- **Record one file with `make ui-visual-update UI_ARGS=<path>`**, and
+  check `git status` before committing either way. That filter is only
+  honoured since #204: the recipe was a bare `--update`, and vitest
+  takes the following positional as the flag's value, so the path was
+  swallowed and *every* baseline was re-recorded — blessing any stale
+  one in silence.
+
+What the tier is worth, for the record: it is a *layout* check, blind to
+colour (the component tier has no `:root`, so it renders the fallbacks —
+`make ui-visual` passed unchanged through a whole palette rewrite,
+twice), and it has caught one thing nothing else could — swapping
+`library-status-indicator`'s `<button>` for a `<span>` lost the UA
+stylesheet's `box-sizing` and grew the badge 36→38px.
 
 ## Bindings
 

.planning/NOTES.md

@@ -4912,3 +4912,120 @@ bridge leaves the wizard up with its "Get Started" button correctly
 disabled — it gates on a directory chosen *in the wizard*, and the
 existing-library check runs once, on mount. A reload clears it. Nothing
 is broken; it cost twenty minutes of believing a tap had been swallowed.
+
+## The sheet's scroll fade, and where a scrim may not go (measured 2026-08-23, headless)
+
+#207's answer. The affordance is two background layers on
+`wa-dialog::part(body)` and the conditionality is
+`background-attachment`, not a scroll listener: a cover of the sheet's
+own colour painted at the end of the *content* (`local`) over a shadow
+pinned to the box (`scroll`), so the cover scrolls up and hides the
+shadow exactly when there is nothing more to see.
+
+Measured at 424x360 (which is where a menu overflows on `main`, since
+`main` does not yet carry #67's eighth item — at 424x439 the track
+list's seven items are `scrollHeight` 364 against `clientHeight` 364,
+fitting exactly). Pixel at x=300, dark ramp, `bgElevated` `#343a40`:
+
+| y | before | more below | at the end of the list |
+|---|---|---|---|
+| 330 | 52,58,64 | 50,56,62 | 52,58,64 |
+| 340 | 52,58,64 | 43,48,53 | 52,58,64 |
+| 350 | 52,58,64 | 33,37,40 | 52,58,64 |
+| 359 | 52,58,64 | 22,24,27 | 52,58,64 |
+
+Three things worth keeping.
+
+**A menu that fits draws nothing**, which is the same measurement: at
+424x439 the sheet is flat 52,58,64 to its bottom edge, because with no
+overflow the `local` layer's positioning area *is* the padding box and
+the cover lands on top of the shadow.
+
+**A scrim over a menu row is that row's text surface**, so the 4.5:1
+rule reaches it and this is why the curve is steep rather than linear.
+A row is 48px with its label centred; 32px of scrim already down to a
+quarter strength at 14px puts about 0.06 at the label. Checked on the
+light ramp (`bgElevated` `#e9ecef`, text `#212529`) by overriding the
+two custom properties on `:root`: background at the label 205,207,210,
+which is **9.9:1**. The first draft — a linear 48px at 0.8 — put ~0.375
+on that label, 5.0:1, passing but visibly greyed. The bottom few pixels
+go to ~2.4:1 in either draft and are deliberately below where any
+label of a *fully visible* row sits; a label that lands there belongs
+to the half-cut row, which is the thing being signalled.
+
+**A dark scrim on a dark surface reads far worse in a shrunk screenshot
+than on screen.** The first two probes (24px/0.45, then 32px/0.75) were
+measurably present — 52,58,64 down to 30,33,37 — and invisible in the
+inline preview. Crop the bottom 70px and scale it up before judging;
+the pixel values are the honest answer either way.
+
+## The phone's context sheet is now longer than the phone (measured 2026-08-23, headless at 424x439)
+
+#67 moves two destinations into every row menu, and the track list's
+menu is where that runs out of screen. Measured against the running
+app at the reference viewport, one row selected:
+
+| menu | items | first item top | last item bottom |
+|---|---|---|---|
+| queue panel | 7 | 95 | 431 |
+| track list | 8 | 86 | **470** |
+
+The viewport is 439. So the track list's last item — "Remove from
+Library" — is below the fold. It is **not unreachable**: the sheet is a
+`wa-dialog` whose body is `overflow-y: auto`, measured `scrollHeight`
+412 against `clientHeight` 373, and scrolling it 39px brings that item
+fully into view (383–431). What it has is no *affordance*: nothing on
+screen says the list continues.
+
+Two things worth knowing before adding a ninth item anywhere.
+
+**The limit was already reached, and this is what crossed it.** Seven
+48px rows in a 373px body is 364px — the queue's menu fits with 8px to
+spare and the track list's fitted exactly. Any item added to any of the
+fourteen menus after #60 was going to be the one that overflowed; the
+first one simply happened to be this.
+
+**The measurement has to be taken with a row selected**, since the
+`Go to` items are drawn for a single selection only, and on the *first*
+track of the fixture library — which has no album (`01 Tone A`,
+`02 Tone B`) — only "Go to Artist" appears. That is the 8 above; an
+ordinary track makes it 9.
+
+Filed as its own issue rather than fixed in #67's diff: it is a
+property of the shared sheet (`components/menu-surface/`), not of the
+items.
+
+## The tap highlight is one inherited declaration (measured 2026-08-24)
+
+`-webkit-tap-highlight-color` is an **inherited** property, and an
+inherited property crosses a shadow boundary — so `html { … :
+transparent }` in `index.css` reaches every shadow root in the app and
+no component needs a rule of its own. Measured in the running app
+(Chromium, `app-sidebar`'s `li button`, which is three shadow roots
+from the document): `rgba(0, 0, 0, 0)` with the rule, and
+`rgba(0, 0, 0, 0.18)` with it removed. That 0.18 grey over the bounding
+rect of whatever was tapped is what #54 reported.
+
+The same argument was already spent once and is worth not
+re-deriving: `index.css`'s first rule is `*, *::before, *::after {
+user-select: none }`, which for the same reason already covers the
+shadow roots — #54's Findings ask for `user-select` on interactive
+surfaces and it has been done since before the issue was filed.
+
+**What the highlight was, on the surfaces that had nothing else, is the
+press feedback.** Measured on a track row with the press rule removed
+and the button held down: `rgba(255, 255, 255, 0.05)` — the *hover*
+tint, arriving because the pointer is over the row, which is a
+synthesised hover on a phone and outlives the press. With the rule:
+0.12 while held, and the neighbouring row unchanged. So the press state
+is part of removing the highlight rather than a separate polish item,
+and the hover tints on those same surfaces moved behind
+`(hover: hover) and (pointer: fine)`, which is #68's gate applied to a
+tint rather than to a revealed control.
+
+**`touch-action: manipulation` was considered and not taken.** The
+Findings offer it for the 300ms tap delay; this app's viewport is
+`width=device-width`, which is what removes that delay in Chrome, so
+the stated benefit is not there to win. What it would change is the
+gesture stack #63 tuned by measurement on the device (`pan-y` plus a
+non-passive `preventDefault`), and that is not measurable from here.

.planning/plans/completed/019-android-touch-model.md

@@ -0,0 +1,408 @@
+# 019 — The Android touch model
+
+**Issue:** #63 (`Area/Library-UI`, `Kind/Feature`, `Priority/High`)
+**Depends on:** #60 (bottom-sheet menus) — closed, merged as PR #176
+**Relates:** #67 (inline links into the menu), #71 ("More" nav), #54
+(native feel), #5/#8 (selection, drag to queue — the desktop semantics
+being diverged from)
+**Status:** shipped (phases 1-4). Its one deliberate remainder is #200.
+
+#73 puts #60 first in Phase 4 because it is "the presentation every
+other item needs", and this is the next one. The Direction on #63 asks
+for the interaction model to be designed as one piece before any of it
+is built, because it *reassigns an existing gesture* rather than adding
+one — `utils/long-press.ts` currently owns the 500ms hold, and every
+context menu in the app is downstream of it.
+
+This document is that design. Everything below is a measurement, or an
+argument for one of the choices #63 leaves open.
+
+---
+
+## The mapping
+
+| gesture | pointer is a finger | pointer is a mouse |
+|---|---|---|
+| single tap / click | **play the row** | select the row |
+| double | — | play the row |
+| long press (500ms) | **enter selection mode** | — |
+| right-click | — | context menu |
+| swipe right | **add to queue** | — |
+| drag | reorder / drag to playlist | reorder / drag to playlist |
+
+Three of those are #63's report unchanged. Two are decisions it left
+open, and one is a deliberate divergence.
+
+---
+
+## Decision 1 — the predicate is the pointer, not the platform
+
+#63 says "the row component needs a platform-aware interaction layer
+rather than shared handlers". It needs an interaction layer; it should
+not be platform-aware.
+
+**The question a row has to answer is not "am I on Android" or "is the
+viewport under 600px" but "what made this event".** `pointerType ===
+'touch'`, read off the event that is being handled, which is already
+how `long-press.ts` decides (`if (e.pointerType !== 'touch') return`)
+and is the only such test in the frontend today.
+
+This is #64's rule — the predicate is named after the capability, not
+the platform — and it carries #64's warning with it. Keyed on a width:
+
+- an Android **tablet** at 600px or more gets click-selects /
+  double-click-plays on a touchscreen, which is the exact inversion
+  this issue exists to fix, on the platform it exists for;
+- a **touchscreen laptop** cannot be described at all, because both
+  pointers are live in the same session on the same row;
+- and a narrow desktop window gets phone semantics with a mouse.
+
+Per event, all three are right for free, and there is no second
+declaration of what a phone does — the thing CLAUDE.md declines to add
+every time it comes up.
+
+**Measured, so this is not an assumption about the WebView.** On the
+reference device (TLP301, Android 14, WebView Chrome 113, 424x439),
+driving a real tap with `adb shell input tap`:
+
+```
+[["down","touch",78,94],["touchstart","touchstart",0,0],["up","touch",78,94]]
+```
+
+`PointerEvent` exists, `pointerType` is `"touch"`, `maxTouchPoints` is
+5, and `(pointer: coarse)` / `(hover: none)` both match.
+
+---
+
+## Decision 2 — there is no double-tap, and the number is why
+
+#63 asks for *single tap → play* **and** *double tap → context menu*.
+Those two cannot both be honoured. The first tap of a double tap is
+indistinguishable from a single tap until the interval expires, so
+"tap plays" necessarily becomes "tap waits to find out whether you
+meant something else, then plays". The app already owns that constant:
+`utils/explore-link.ts` holds a navigation for `DOUBLE_CLICK_GRACE_MS
+= 250` for precisely this reason.
+
+**What it would be added to, measured on the device.** Six runs, from
+the play command to the backend's `TrackChanged`:
+
+```
+155, 123, 85, 56, 91 ms          median ~100
+```
+
+So the app's primary interaction is ~100ms, and a double-tap
+discriminator makes it ~350 — **3.5x, of which 250ms is spent
+deliberately doing nothing** — paid on every track anyone ever plays,
+in order to reach a menu.
+
+It is also against the platform's convention, which counts for more
+than usual here because this is the phone build and nothing else:
+long-press is *how you select* on Android (Gmail, Files, Photos),
+double-tap is zoom or nothing, and a list's menu is either the
+long-press sheet or a per-row overflow.
+
+**So the menu and the selection action bar become the same surface**,
+which is the convention and removes a concept rather than adding one.
+Long-press selects the row it was made on and raises the action bar;
+the bar's actions *are* the context menu's actions, contextualised to
+whatever is selected — one row or forty. #60's bottom sheet stays
+behind it as the overflow, so `contextMenuStyles`, `MenuKeyboard` and
+`menu-surface` are reused rather than reimplemented.
+
+---
+
+## Decision 3 — tap-to-play and selection mode ship together
+
+The obvious phase order is "tap plays first, it is the smallest
+change". It is wrong, and the reason is a capability that exists today
+and is easy to miss.
+
+**A touch user can already multi-select**: tap selects (the desktop
+semantics, which a finger currently gets), and the long-press menu then
+acts on the selection. Move tap to play without shipping selection mode
+in the same change and there is a window — a release, if it lands — in
+which selecting forty tracks to add to a playlist is impossible on a
+phone. That is a regression dressed as an increment.
+
+So phase 1 is both, or neither.
+
+---
+
+## What the code looks like now
+
+| surface | how it binds | selection |
+|---|---|---|
+| `track-list` | delegated on the virtualizer: `click`, `dblclick`, `contextmenu`, `dragstart` | `SelectionController` |
+| `queue-panel` | delegated, same shape | `SelectionController` |
+| `playlist-details` | per row | `SelectionController` |
+| `smart-playlist-details` | per row | `SelectionController` |
+
+All four already share `SelectionController`, and all four resolve a
+row from an event by `data-index` / `data-file-path` on the row. So the
+gesture layer has one shape to talk to, and "selection mode" is a flag
+on the controller they already have rather than a fifth concept.
+
+`utils/long-press.ts` is one document-capture listener that synthesises
+a `contextmenu` — the seam that needed no component to opt in. **This
+plan keeps that shape and changes what the gesture means**, which is
+why it is a rewrite of that file rather than a second listener set: two
+document listeners both claiming the 500ms hold is the fault the file's
+own header warns about.
+
+---
+
+## Two measurements that decide the implementation
+
+**`touch-action` is `auto` on both the virtualizer and the rows.** With
+`auto` the browser owns panning on both axes, so a horizontal drag can
+be claimed as a scroll and our gesture ends in `pointercancel`
+mid-swipe. A row that wants a horizontal swipe has to declare
+`touch-action: pan-y`: the browser keeps the vertical pan (which is the
+virtualizer's scroll, and must stay native or the list stutters) and
+hands us the horizontal axis. This is the single most likely way for
+swipe-to-queue to "work in Chromium and not on the phone".
+
+**The row is 424x52 on the device**, so a swipe threshold in px is a
+fraction of a row height, not of a screen.
+
+**And the third one was found by building phase 1 and then running it**
+— it is not something any browser tier can report. Chrome 113's Android
+WebView **fires its own `contextmenu` on a long press**. `long-press.ts`
+stood down when a trusted one arrived, which was right while both paths
+ended in the same place; once a hold can mean selection mode they end
+in different places, and standing down means the gesture silently does
+the *old* thing. Measured, before the fix:
+
+```
+{"log":["contextmenu isTrusted=true"],
+ "state":{"bar":null,"menuActive":true,"selected":1}}
+```
+
+`yj-long-press` was never announced at all, the context menu opened,
+and all 26 tests in the component tier passed — dispatched pointer
+events do not make a browser synthesise a `contextmenu`.
+
+So the browser's event is a **trigger, not a competitor**: the gesture
+is announced from it, and only a component that claims it suppresses
+the native menu. Unclaimed, it propagates untouched. That is the same
+"browser wins" outcome, reached by asking instead of assuming — and
+verified both ways on the device, a track row entering selection mode
+and an album card still opening its menu.
+
+The tier could not *find* it and can *hold* it: a test cannot dispatch
+a trusted event, but this module has always told its own apart by
+identity rather than `isTrusted`, so an untrusted one from a test takes
+exactly the browser's path.
+
+---
+
+## A tier note: this one can be driven, not only measured
+
+`adb shell input tap|swipe` reaches the WebView as real pointer events,
+which the log above is evidence of. So for the first time the Android
+tier can *perform* the thing under test rather than describe the page
+afterwards — a long press is `input swipe X Y X Y 600`, a swipe right
+is `input swipe X Y X+N Y 120`.
+
+Device CSS pixels from device pixels, on this phone:
+`css = (device - 59) / 2.564` vertically, `css = device / 2.564`
+horizontally (measured from the tap above: 200,300 arrived as 78,94).
+
+This does not make the device a spec tier — it does not run in CI and
+`make ui-test` still has to carry the assertions. It makes "does the
+gesture actually fire on Chrome 113" answerable in seconds.
+
+---
+
+## Phases
+
+**Phase 1 — the seam, tap-to-play, selection mode.** `utils/
+touch-gestures.ts` replacing `long-press.ts`: pointer-typed
+recognition of tap / long-press / horizontal swipe, dispatched as
+composed custom events so a delegated listener in any shadow root
+still works. `SelectionController` gains a mode. `track-list` acts on
+tap and enters the mode on long press. The action bar.
+
+**Phase 2 — swipe right to queue**, with the `touch-action: pan-y`
+finding above and a reveal-and-snap affordance. **Shipped**; what the
+device said about it is the section below.
+
+**Phase 3 — the other three surfaces**, which is mostly wiring, since
+they already share the controller. **Shipped**, and it was not entirely
+wiring — see below.
+
+**Phase 4 — what this leaves behind.** The inline `explore-link`s in a
+row are a single-click target inside a row whose single tap now plays;
+that conflict is #67's, and this plan should not pre-empt its answer
+beyond making tap-to-play win on touch. **Shipped.**
+
+## Phase 3 was not symmetric, in two places
+
+**A tap on a queue row plays that position**, not the list. Copying
+`track-list`'s tap — which sets the queue to the list the row is in —
+would rebuild the queue *from* the queue, discarding its source, its
+shuffle order and everything a user had inserted by hand. It reads as a
+no-op and is not one.
+
+**The queue panel has no swipe, deliberately.** A right swipe means
+*add to the queue* everywhere else it exists, and a queue row is
+already in the queue; the only thing it could mean there is *remove*,
+which is the same gesture with the opposite effect one screen away —
+the fault `utils/icon-language.ts` exists to have fixed for glyphs.
+Removing a queue row is on the row itself (the ×), on its bottom sheet
+since #60, and on the selection bar this phase gave it. The assertion
+is that its rows do **not** carry `data-swipe`, so a swipe there cannot
+silently become a second meaning for the app's one horizontal gesture.
+
+And the affordance became `utils/swipe-to-queue.ts` rather than being
+copied twice. Three lists want it; three copies of "how far is far
+enough" is three chances for them to disagree, which is what
+`utils/library-status.ts` and `utils/ownership.ts` each exist to have
+stopped happening. The shared stylesheet is keyed on `[data-swipe]`
+rather than on a class name, because the three lists call their rows
+two different things and the `touch-action` half of the device fix has
+to reach all of them.
+
+## Phase 4 was already true, which is why it is asserted
+
+A claimed tap has its click swallowed at document capture, so an
+`explore-link` inside the row never sees one and tap-to-play wins with
+no rule of its own. Nothing in the suite would have failed if that
+stopped covering the link, and the symptom — tapping a track's *title*
+navigating to its album instead of playing it — is one a phone user
+meets constantly and a mouse user never does.
+
+**Its test was vacuous when written**, in the way this file keeps
+finding: the tap helper dispatched `pointerdown` and `pointerup` and no
+`click`, so there was nothing to swallow and the assertion held on any
+build. It sends the trailing click now, which also strengthened phase
+1's "a tap plays and does not also select". The fixture needed an MBID
+for the same reason — without one the link asks the backend for a local
+album first and gives up when nothing answers, so "it did not navigate"
+was true of a working build and a broken one alike.
+
+---
+
+## What phase 2 measured, which was not what phase 2 predicted
+
+The `touch-action` finding above is **half** of the answer, and
+shipping only that half would have been the exact failure it warns
+about. Driving a real finger with `adb shell input swipe` across a
+track row, three values, all three on the device:
+
+```
+touch-action: auto    pointerdown, 1 move,  pointercancel
+touch-action: pan-y   pointerdown, 2 moves, pointercancel
+touch-action: none    pointerdown, 2 moves, pointercancel
+```
+
+`touchmove` kept firing in all three. So **Chrome 113's WebView
+cancels the pointer stream ~16px into any drag whatever `touch-action`
+says**, and a swipe recognised from `pointermove` — which is what the
+rest of this module is built on — is a swipe that dies 16px in.
+
+The other half is a **non-passive `touchmove` calling
+`preventDefault()`**: with it, the same swipe ran to 12 moves and a
+`pointerup` at full travel. And both halves are required, which was
+measured rather than assumed — with the `preventDefault` in place and
+`touch-action` back at `auto`, the gesture died after **one** move.
+The reading is that `auto` lets the browser commit to a horizontal pan
+on the first move past slop, before any threshold of ours can have
+been crossed, while `pan-y` leaves it undecided long enough for the
+second move to claim it.
+
+`none` is the one value to avoid: the list stopped scrolling at all.
+With the shipped pair, a vertical drag still scrolls the virtualizer
+81px on the same run that a horizontal one survives.
+
+**`draggable="true"` is not a competitor**, which is the other thing
+the device was asked. No `dragstart` fires from a touch drag on this
+WebView at all, so the drag-to-playlist attribute on every row needs no
+pointer-type gate.
+
+### And it found a phase 1 defect that no tier can see
+
+The native `contextmenu` arrives in **either** order, and phase 1 only
+handled one of them. `nativeSeen` covers the browser's menu arriving
+*during* the hold. The reverse — our 500ms timer firing first, a
+component claiming it, and Chrome delivering its own `contextmenu`
+50–70ms *later* — was suppressed by nothing, so the context menu
+opened on top of the selection bar. Measured over four holds:
+
+```
+hold 1  yj-long-press, then contextmenu isTrusted=true   menu open
+hold 2  yj-long-press                                    clean
+hold 3  yj-long-press, then contextmenu isTrusted=true   menu open
+hold 4  yj-long-press                                    clean
+```
+
+Two in four, on the one surface #63 exists to have changed, and
+invisible to both browser tiers because neither synthesises a
+`contextmenu` from a dispatched press. A press that has produced its
+outcome now suppresses a late one whichever branch it took; six holds
+on the fixed build, six clean.
+
+### The rules phase 2 settled
+
+- **A swipe is not a selection.** It queues the row it was made on,
+  unless that row is one of several *explicitly* selected — the same
+  rule the context menu answers with, because a bar reading "40
+  selected" beside a gesture that quietly queues one of them is two
+  answers to one question. It never changes the selection, which is
+  where it differs from a right-click.
+- **Rightward only.** Nothing is bound to a leftward swipe and
+  claiming one would take a gesture away to do nothing with it.
+- **The commit threshold is a fraction of the row** (0.3, floor 72px),
+  because the row is 424x52 on this device and a bare pixel count is a
+  fraction of a row height on one screen and a third of the width on
+  the next.
+- **The affordance is not only a colour** (WCAG 1.4.1, the rule the
+  playing-row marker exists for): the pane carries the queue icon and
+  words, the words change at the threshold ("Add to queue" → "Release
+  to add" → "Added"), and the outcome is announced in a live region.
+- **The row does not move; its cells do.** `.track-row` is
+  `contain: strict` with `overflow: hidden`, so a pane held at the
+  row's original position while the row translates is a pane at a
+  negative offset inside a clipping box and is simply not painted.
+  Sliding the cells needs no wrapper element in a row that is already
+  a grid.
+- **The travel is written to the row's own style, not rendered.** One
+  render at the start, one at the threshold, one at the end; a
+  virtualizer re-rendering every visible row per frame of one finger's
+  travel is the thing `perf.m1` is about.
+
+## Open questions
+
+1. **Does selection mode have an escape other than the bar's own
+   close?** *Settled: Escape, here; back, not here.*
+
+   Escape leaves the mode, from `selection-bar` rather than from each
+   of the four hosts — that element exists only while the mode does, so
+   it is the one place a dismissal can be attached and detached with
+   the thing it dismisses. It is the same documented exception the
+   overlaid queue's Escape is: **a dismissal, not a shortcut**, so it
+   is not a panel-scoped binding.
+
+   The back gesture is the half that is *not* done, and deliberately.
+   The obvious version — `selection-bar` pushing a history entry — is
+   precisely the fault `navStack` was deleted for: the shell owns the
+   stack (#6/#55) and is the only thing that calls `pushState`, so that
+   two stacks cannot disagree about what one press means. Four lists
+   each reaching for `history` is four stacks. It is also wrong on its
+   own terms, since a mode is per-component and a user who enters one,
+   navigates away and returns has an entry for a mode that no longer
+   exists. #55 settled the shape for a *place*; a mode is not one,
+   which is why it could not simply inherit that answer.
+
+   What it wants is one shell-owned register of dismissible surfaces,
+   which would retro-fit the queue overlay, the dialogs and this alike
+   rather than adding a fourth private answer. **#200.**
+
+2. **Does a tap on a row's favourite icon still toggle it in normal
+   mode?** *Settled in phase 1: yes.* A control inside the row keeps
+   its own tap — the gesture is simply not claimed there, so the click
+   behind it falls through untouched. It is the same rule the shortcut
+   service has for a focused control that owns a key, and it is what
+   keeps the 44px favourite target (#56) from becoming a 44px play
+   target. The queue row's × is the second instance of it.

CLAUDE.md

@@ -262,6 +262,26 @@ real store code. A binding carries an **ID**, not a name
 `yellowjacket/backend/home.Service.GetShelves`), so the fake derives
 that map from the generated tree rather than writing it down.
 
+**A test file does not get its own origin, so `setup.ts` clears
+`localStorage` between tests.** `@vitest/browser-playwright` opens one
+BrowserContext per session and runs several files in it one after
+another, so everything a component persists — the track list's sort and
+column widths, the cover size, `now-playing`'s scroll mode — is still
+there when the next file mounts the same component. Which files share a
+tab, and in what order, changes run to run, so the symptom is a spec
+that fails about one test in three and passes every time it is run on
+its own: #138 cost three scheduled runs, one of them a PR whose diff
+held no frontend code at all. Measured on the build before the fix, a
+single full run started **24** tests with storage already set. Two
+things follow. The clear is safe precisely because the leak is
+sequential — files in a session do not overlap, so it cannot wipe
+storage a concurrently-running file is in the middle of using — and it
+belongs in `setup.ts` rather than in the specs that write, because the
+spec that *reads* is never the one that knows. And a spec whose
+assertion depends on an order still **states that order** rather than
+inheriting a default, or the next change to a default is the same
+mystery again.
+
 **`frontend/bindings/` is generated by `wails3`, not `go generate`**, so
 the pre-commit codegen check does not cover it. `make bindings-check`
 (~3.5 s warm, ~20 s on a cold build cache, also a pre-commit hook)
@@ -1402,7 +1422,7 @@ descendants. On the reference device the main panel spans 0-318 of a
 items cut off, with no way to reach them. `showModal()` is Chrome 37
 and uses the real top layer, so a dialog is immune by construction.
 
-Six things about it are load-bearing.
+Seven things about it are load-bearing.
 
 **"Dialogs are fine" needed checking, because every other dialog in
 this app is mounted in `index.html`** — outside `.main-panel` — so it
@@ -1431,6 +1451,25 @@ doing nothing, which reads as the gesture breaking. `menu-dismiss` is
 that signal; the three surfaces that do not use `ContextMenuController`
 bind it themselves.
 
+**A sheet that scrolls says so, and `background-attachment` is what
+asks whether it does** (#207). The sheet is capped at 85vh — a surface
+covering the whole screen is a page, not a sheet — so a long menu's
+body scrolls, and for three phases it scrolled *silently*: measured at
+424x439, eight items ended at y=470 with the fold at 439, and where the
+cut lands on a row boundary the sheet ends in a clean edge that reads
+as the end of the list. The fade is two background layers on
+`wa-dialog::part(body)` — a shadow pinned to the box (`scroll`) under a
+cover of the sheet's own colour painted at the end of the *content*
+(`local`), which scrolls up over the shadow exactly when there is
+nothing more to see. So it is absent on a menu that fits, present the
+moment one does not, and gone again at the end of the list, with no
+scroll listener and nothing reaching into `wa-dialog`'s shadow root for
+the scroller. **The curve is steep because the rows under it stay
+live**: a scrim over a menu item is that item's text surface, and the
+4.5:1 rule applies to it — 32px already down to a quarter strength at
+14px spends its weight below the last legible label, measured at 9.9:1
+on the light ramp, whose `bgElevated` is `#e9ecef`.
+
 **The playlist submenu is a sheet too, and it had to be.** It is a
 `placement="right-start"` flyout, and making the menu full-width moved
 its anchor — measured at x −182 to 0, entirely off-screen, so "Add to
@@ -1449,18 +1488,112 @@ never opens). **The sweep found two of the fourteen**; twelve were
 converted by hand.
 
 **And a menu opens from a finger, through the event it already has.**
-`utils/long-press.ts` is one document-capture listener installed once
-from `index.ts`: a touch that holds still for 500 ms dispatches a
-synthetic `contextmenu` at the touch point, so all six components that
-bind one — delegated on a virtualizer, per row, per card — gained the
-gesture without changing. The target is `composedPath()[0]` rather than
+`utils/touch-gestures.ts` is one document-capture listener installed
+once from `index.ts` — `utils/long-press.ts` until #63 replaced it,
+rather than adding a second listener claiming the same 500 ms hold. It
+**announces** rather than acts: `yj-tap`, `yj-long-press` and
+`yj-swipe-start` are composed and cancelable, and a component claims
+one with `preventDefault()`. That is what let #63 reassign the hold
+without touching one of the fourteen context menus: an *unclaimed*
+`yj-long-press` still becomes a synthetic `contextmenu`, so all six
+components that bind one — delegated on a virtualizer, per row, per
+card — behave exactly as they did, and only the lists that opt in get
+selection mode. The target is `composedPath()[0]` rather than
 `elementFromPoint`, which stops at the outermost shadow host and so
-reaches a delegated listener and no per-row one; a browser that fires
-its own long-press `contextmenu` (Chromium does, WebKit and the WebView
-vary) wins, ours being told from theirs by **identity** rather than
-`isTrusted`, since no test can dispatch a trusted event; and the click
-that ends the gesture is swallowed, keyed on the gesture rather than on
-a time window so the first tap on the menu it opened is not eaten too.
+reaches a delegated listener and no per-row one; and the click that
+ends a *claimed* gesture is swallowed, keyed on the gesture rather than
+on a time window so the first tap on the menu it opened is not eaten
+too.
+
+Three things about it are load-bearing, and all three were found on the
+device rather than in a tier.
+
+**A browser that fires its own long-press `contextmenu` is a trigger,
+not a competitor.** Chromium does, WebKit and the WebView vary. The old
+rule was to stand down when a trusted one arrived, which was right
+while both paths ended in a context menu and is wrong the moment a hold
+can mean something else — standing down silently does the *old* thing.
+So the gesture is announced from the native event, and only a component
+that claims it suppresses that event. Ours and the browser's are told
+apart by **identity** rather than `isTrusted`, since no test can
+dispatch a trusted event.
+
+**That arrives in either order, and both have to be handled.** The
+native `contextmenu` mid-hold is one case; the other is our own 500 ms
+timer firing first and Chrome delivering its menu **50–70 ms later**,
+which nothing suppressed — measured over four holds on the reference
+phone, two took that order, so the context menu opened over the
+selection bar intermittently, on the one surface #63 changed. A press
+that has produced its outcome therefore suppresses a late
+`contextmenu` whichever branch it took.
+
+**A horizontal swipe runs on touch events, and needs two things that
+look like one.** Chrome 113's WebView cancels the *pointer* stream
+~16 px into any drag — measured at `auto`, `pan-y` and `none` alike,
+one or two `pointermove`s and then `pointercancel`, while `touchmove`
+kept firing throughout. So the recogniser is `touchmove`, the surface
+declares **`touch-action: pan-y`** *and* a claimed swipe calls
+**`preventDefault()`** on a non-passive listener. Neither works alone:
+with the `preventDefault` in place but `touch-action` back at `auto`
+the gesture died after one move, because `auto` lets the browser commit
+to a horizontal pan before any threshold can be crossed. `none` is the
+value to avoid — it takes the list's own vertical scrolling with it.
+**Both are correct in Chromium either way**, which is why this is
+written down rather than tested. The tie breaks toward scrolling, in
+that order: vertical drift past the tolerance vetoes the swipe for the
+rest of the press (a scroll that curves is still a scroll), and a
+gesture that is not *strictly* more horizontal than vertical is the
+scroller's.
+
+**And what a finger *means* on a row is the inversion of what a mouse
+means, decided per event** (#63). A click selects and a double-click
+plays; a tap **plays** and a hold enters **selection mode**, in which a
+tap toggles. The predicate is `pointerType`, never a viewport width and
+never a platform flag — #64's rule, and with #64's warning: keyed on a
+width, an Android tablet over 600px gets desktop semantics on a
+touchscreen, a touchscreen laptop cannot be described at all, and a
+narrow desktop window gets phone semantics with a mouse.
+
+There is deliberately **no double-tap**, which #63 asked for. The first
+tap of one is indistinguishable from a single tap until the interval
+expires, so tapping would have to wait `DOUBLE_CLICK_GRACE_MS` before
+acting — 250ms on top of a measured ~100ms play, 3.5x the app's primary
+interaction, to reach a menu a hold already reaches. So the menu and
+the action bar are the same surface: `components/selection-bar/` is
+presentational (a count and a list of actions, no store, no selection),
+`SelectionController` carries the mode for all four selecting surfaces,
+and #60's bottom sheet is the overflow behind "More" — so
+`contextMenuStyles`, `MenuKeyboard` and `menu-surface` are reused
+rather than reimplemented.
+
+Three things about it are load-bearing. **A control inside a row keeps
+its own tap**: the gesture is simply not claimed there, so the click
+behind it falls through, which is what stops the 44px favourite target
+(#56) becoming a 44px play target — the queue row's × is the second
+instance. **A swipe right queues**, and its affordance is
+`utils/swipe-to-queue.ts` once rather than in each of the three lists
+that draw it: the row does not move, its *children* do (a row here is
+`contain: strict` with `overflow: hidden`, so a pane held at the row's
+original position while the row translates is at a negative offset
+inside a clipping box and is not painted), the travel is written to the
+row's own style rather than rendered, and the threshold is a fraction
+of the row because the row is 424x52 on the reference device. **The
+queue panel takes the tap and the hold and refuses the swipe**, because
+a right swipe means *add to the queue* everywhere it exists and a queue
+row is already in it — the only thing it could mean there is *remove*,
+which is the same gesture with the opposite effect one screen away.
+A tap there plays that *position*, too: setting the queue to the queue
+reads as a no-op and discards its source, its shuffle order and
+anything inserted by hand.
+
+Escape leaves the mode, from `selection-bar` rather than from each
+host, since that element exists only while the mode does — the same
+exception the overlaid queue's Escape is, *a dismissal, not a
+shortcut*. The platform's back gesture deliberately does **not** reach
+it: the shell owns the history stack and four lists each reaching for
+`history` is four stacks, which is the fault `navStack` was deleted
+for. That wants one shell-owned register of dismissible surfaces, which
+is #200.
 
 **A control revealed by `:hover` is gated on the device having hover,
 and which way round depends on whether it is the only route to its
@@ -1498,6 +1631,51 @@ sits inside which media query — and says so; the regression it exists
 for is someone hoisting a rule out of its query as a tidy-up, which
 nothing on a desktop renders differently.
 
+**The web view's own tap highlight is gone, and what replaced it is a
+press state** (#54). `-webkit-tap-highlight-color` is an *inherited*
+property, so one declaration on `html` in `index.css` reaches every
+shadow root in the app and takes away the grey box a phone drew over
+the bounding rect of whatever was tapped — measured at
+`rgba(0, 0, 0, 0.18)` with the rule removed. `user-select` is the same
+argument and was already done: `index.css`'s first rule is `*, *::before,
+*::after { user-select: none }`, which reaches the shadow roots for the
+same reason.
+
+Three things about it are load-bearing.
+
+**Removing the highlight removes the only touch feedback several
+surfaces had**, so the press state is part of the same change rather
+than a later polish item: the four lists' rows, `bottom-nav`'s tabs,
+`app-sidebar`'s destinations (which are also the phone's "More" sheet)
+and the shared `contextMenuStyles` menu item all take
+`--yj-press-overlay` on `:active`. The cards already had one
+(`transform: scale(0.97)`) and are untouched.
+
+**A press selector carries a state class or it does nothing where it
+matters.** A row is `.track-row.selected.active`, so a bare
+`.track-row:active` is one class short of it and the press is invisible
+on exactly the row a phone is most likely to press — the one it has
+just selected. The rule is last and lists `.selected:active` /
+`.active:active` beside the bare form.
+
+**And the hover tints on those same surfaces moved behind
+`(hover: hover) and (pointer: fine)`**, which is #68's gate applied to
+a tint rather than to a revealed control and for the same mechanism: a
+hold synthesises a hover in the WebView, so an ungated tint arrives
+because a finger touched the row and stays there after it has gone —
+measured, since with the press rule removed a held row reads
+`rgba(255, 255, 255, 0.05)`, the hover tint, rather than nothing.
+`touch-action: manipulation` was considered and declined: the 300ms
+delay it is offered for is already absent on a `width=device-width`
+viewport, and what it would really change is the gesture stack #63
+tuned by measurement on a device this session cannot measure.
+
+The split of tiers is `hover-affordance.test.ts`'s: `press-feedback.
+test.ts` reads the parsed stylesheet, because `:active` cannot be
+forced there either, and `native-touch-feel.spec.ts` *measures* — it
+holds the button down on a real row of the real list, and it is the
+only tier that loads `index.css` at all.
+
 Three lists had no focused row to open a menu *from* — the queue panel
 and both playlist detail views — and gained a roving tab stop through
 `utils/roving-rows.ts`. **`track-list` deliberately does not use it**:
@@ -2242,6 +2420,31 @@ a list or a detail view:
   and dropped if a second click arrives, because the title is the
   widest thing in a row and double-clicking a row plays it. Rows do
   not need to know links exist.
+
+  **Below 600px a name is not a link, and the row's menu is where it
+  went** (#67). Every sentence above is a *desktop* compromise: the
+  double-click grace means nothing on touch, a few characters of text
+  is not a touch target, and since #63 a claimed `yj-tap` has its click
+  swallowed, so the link was unreachable as well as fiddly. The rule is
+  in the utility rather than at twenty call sites, and
+  `utils/go-to-menu.ts` is the other half — "Go to Artist" / "Go to
+  Album", drawn under exactly the condition the link is not, from
+  `explore-link`'s own exported routing so an untagged artist reaches
+  the library page by the same lookup.
+
+  Three things about it are load-bearing. **Suppressing a link without
+  a menu behind it is not a smaller affordance**, it is a destination
+  the phone cannot reach — so `keepOnPhone` is the documented exception
+  for the three surfaces with no row menu (`now-playing-view`,
+  `explore-album-details`' header credit, `top-results-row`), and
+  nothing else may pass it. **One row or none**: the items are the Play
+  item's rule one step on, since "go to the album" of five different
+  albums means nothing. And **there is no "Go to Genre"**, because
+  there is no genre link anywhere to lose — that would be new
+  navigation rather than a replacement, and belongs in its own issue.
+  `track-list` is the one list that gains rather than moves: its phone
+  column set stacks title over artist as plain text already, so those
+  names have never been links there.
 - **`<catalog-scope-notice>`** is how a detail page admits what it is
   showing: catalog data (silent), a library stand-in while a fetch is
   in flight, library-only because the entity has no MBID, or a failed/
@@ -2455,11 +2658,38 @@ Five things about it are load-bearing, and four of them fail silently:
   correctly. Confidently wrong is worse than absent here, which is the
   same rule `Known` exists for.
 
-One gap this did not close, and it is older: **`dhowden/tag` has no
-RIFF reader**, so nothing the tag writer puts in a WAV's `id3 ` chunk
-is visible to `metadata.ExtractTags` — not the totals and not the title
-either. `wav_test.go` reads that chunk itself, which is why no test
-ever noticed.
+One gap this did not close and #104 did: **`dhowden/tag` has no RIFF
+reader**, so nothing the tag writer put in a WAV's `id3 ` chunk was
+visible to `metadata.ExtractTags` — not the totals and not the title
+either, on files the app itself had just tagged. `wav_test.go` read
+that chunk itself, which is why no test noticed: a round trip asserted
+through the writer's own parser is a test of the writer.
+
+`backend/riff` is where the container is now read, and it is its own
+package because the alternative is an import cycle — `tagwriter`
+imports `metadata`, so `metadata` cannot reach back for `parseRIFF`.
+`backend/tagtotals` is the precedent.
+
+Three things about it are load-bearing. **The two readers are
+deliberately different**: `Parse` holds every chunk in memory, which is
+what rewriting a file needs, and a WAV's audio *is* a chunk — so the
+scan path uses `ID3Chunk`, which seeks over what it is not looking for.
+**The container decides, before `tag.ReadFrom` rather than after it
+fails**, because that library's last resort is an ID3v1 trailer and a
+WAV carrying both would otherwise be read by the wrong one. And **an
+untagged WAV is a file with no tags, not a file with a problem**: no
+chunk, an RF64 container or a tag holding no frames all read as empty
+metadata with no `TagReadWarning`, since the scanner's filename
+fallback is the right answer and a warning would put a fault on a file
+that has none.
+
+The gap was pinned by a test that said so, which failed the moment the
+reader learned and carried the instructions for what to update in its
+own comment. So it is deleted, `TestFixturesMatchManifest` no longer
+skips `wav`, and `totals_test.go`'s WAV case goes through
+`metadata.ExtractTags` like the other three formats. The fixture
+library's two WAV tracks scan with their tags and their cover now,
+which is a change to what every seeded tier sees.
 
 **The absence is what gets marked, not the presence.** The tracklist
 put a green tick against every owned track and a legend underneath
@@ -3330,6 +3560,25 @@ Pre-commit hooks verify generated code is fresh — always run `make generate` a
 Tests use `database.NewTestDB(t)` for in-memory SQLite, built by the same
 `applySchema` production uses so the two cannot diverge. Test audio fixtures live in `test_data/music_library_test/`. Table-driven tests are the norm.
 
+**`make ui-visual` is the one tier nothing but a person runs, and it
+cannot become one.** Its ten `toMatchScreenshot` baselines were recorded
+on a developer's Arch box; replayed in a bare `ubuntu:24.04` container
+— CI's `check` image — three of them fail on font metrics and
+compositing alone (`track-info` and one `page-header` shot at a 0.03
+mismatch ratio against a 0.02 allowance, `seek-bar` one pixel shorter),
+and two components disagree about their own height between the two
+machines. So CI keeps running `make ui-test`, which is the same suite
+with the comparisons off, and a pre-push hook would be the same fault
+with the machines swapped. What replaces the gate is a rule, in
+`.pi/skills/yellowjacket-dev/references/ui-tier.md`: **a change that
+moves a component's geometry refreshes that component's baseline in the
+same commit, having read the image, and never one it did not cause**.
+That is #196, which was four stale references accumulated across three
+unrelated merges — a red tier nobody could read, which is how it stayed
+red. A visual case must also **state the world it photographs**, since
+the stores are singletons and a case that sets nothing records whatever
+the previous one left in them.
+
 ## Git Workflow
 
 Feature branches and PRs are the only way in: **`main` is a protected

Makefile

@@ -160,8 +160,11 @@ ui-watch: ## Same suite, in watch mode
 ui-visual: ## Run the suite including screenshot comparisons
 	@cd frontend && YJ_VISUAL=1 npx vitest run $(UI_ARGS)
 
-ui-visual-update: ## Re-record the screenshot baselines
-	@cd frontend && YJ_VISUAL=1 npx vitest run --update $(UI_ARGS)
+# `--update=true`, never a bare `--update`: vitest takes the following
+# positional as the flag's value, so `--update <path>` swallows the path
+# and re-records every baseline in the repo instead of the one named.
+ui-visual-update: ## Re-record the screenshot baselines (UI_ARGS=<path> to filter)
+	@cd frontend && YJ_VISUAL=1 npx vitest run --update=true $(UI_ARGS)
 
 ui-setup: ## Install the Vitest browser provider's own Chromium (once)
 	@cd frontend && pnpm install && npx playwright install chromium

backend/metadata/tags.go

@@ -74,6 +74,14 @@ func ExtractTags(path string) (*TrackMetadata, error) {
 
 // ExtractTagsFromReader reads metadata from an io.ReadSeeker.
 func ExtractTagsFromReader(r io.ReadSeeker) (*TrackMetadata, error) {
+	// The container decides, so this is asked before tag.ReadFrom and
+	// not after its failure: a WAV's tags live in a RIFF chunk that
+	// dhowden/tag cannot see, and its fallback -- an ID3v1 trailer --
+	// would otherwise outrank them.
+	if meta, ok := wavTags(r); ok {
+		return meta, nil
+	}
+
 	m, err := tag.ReadFrom(r)
 	if err != nil {
 		// No tags found is not necessarily an error - return empty metadata

backend/metadata/tags_wav.go

@@ -0,0 +1,68 @@
+package metadata
+
+import (
+	"bytes"
+	"errors"
+	"fmt"
+	"io"
+	"strings"
+
+	"yellowjacket/backend/riff"
+)
+
+// wavTags reads the ID3v2 tag a WAV carries in its RIFF "id3 " chunk,
+// which is where backend/tagwriter puts it and where dhowden/tag --
+// having no RIFF reader at all -- cannot look.  Without this a WAV
+// scans as an untagged file however carefully it was tagged.
+//
+// ok is false when r is not a RIFF/WAVE container, and the read
+// position is restored either way so the caller can carry on.
+func wavTags(r io.ReadSeeker) (*TrackMetadata, bool) {
+	start, err := r.Seek(0, io.SeekCurrent)
+	if err != nil {
+		return nil, false
+	}
+
+	id3Data, chunkErr := riff.ID3Chunk(r)
+
+	if _, err := r.Seek(start, io.SeekStart); err != nil {
+		return nil, false
+	}
+
+	switch {
+	case chunkErr == nil:
+		return wavTagsFrom(id3Data), true
+
+	// Not ours to read: let the ordinary dispatch have the file.
+	case errors.Is(chunkErr, riff.ErrNotRIFF), errors.Is(chunkErr, riff.ErrNotWAVE):
+		return nil, false
+
+	// A RIFF container we cannot get a tag out of -- no chunk, an RF64
+	// file, a truncated header.  That is a file with no readable tags,
+	// which is what the scanner's filename fallback is for.
+	default:
+		return &TrackMetadata{}, true
+	}
+}
+
+// wavTagsFrom parses the bytes of a WAV's ID3v2 chunk.
+func wavTagsFrom(id3Data []byte) *TrackMetadata {
+	meta, err := extractID3v2Lenient(bytes.NewReader(id3Data))
+	if err != nil {
+		// A tag holding no frames is not a damaged tag: writing every
+		// field back out empty leaves one, and warning about it would
+		// put a fault on a file that has none.
+		if errors.Is(err, ErrTagsUnreadable) {
+			return &TrackMetadata{}
+		}
+
+		return &TrackMetadata{
+			TagReadWarning: fmt.Errorf("%w: %w", ErrTagsUnreadable, err),
+		}
+	}
+
+	// extractID3v2Lenient names MP3, being the recovery path for one.
+	meta.FileFormat = strings.ToUpper(strings.TrimPrefix(string(WAV), "."))
+
+	return meta
+}

backend/riff/riff.go

@@ -0,0 +1,183 @@
+// Package riff reads the chunk layout of a RIFF/WAVE container.
+//
+// It exists because both halves of WAV tagging need it and neither can
+// import the other: backend/tagwriter writes a WAV's tags into a RIFF
+// "id3 " chunk and already imports backend/metadata, which is what has
+// to read them back out.  backend/tagtotals is the precedent.
+//
+// The two readers here are deliberately different.  Parse holds every
+// chunk's data in memory, which is what rewriting a file needs; a WAV's
+// audio *is* the "data" chunk, so doing that on the scan path would
+// read every library file in full.  ID3Chunk seeks over what it is not
+// looking for instead.  Both walk the same headers.
+package riff
+
+import (
+	"bytes"
+	"encoding/binary"
+	"errors"
+	"fmt"
+	"io"
+	"strings"
+)
+
+// Sentinel errors describing a container this package will not read.
+var (
+	ErrRF64NotSupported = errors.New("RF64 files are not yet supported")
+	ErrNotRIFF          = errors.New("not a RIFF file")
+	ErrNotWAVE          = errors.New("not a WAVE file")
+	ErrNoID3Chunk       = errors.New("no ID3 chunk in RIFF file")
+)
+
+// Chunk holds a single RIFF sub-chunk (ID + raw data).
+type Chunk struct {
+	ID   [4]byte
+	Data []byte
+}
+
+// IsID3 reports whether id is that of an ID3v2 RIFF chunk.  Both
+// lowercase "id3 " and uppercase "ID3 " are accepted.
+func IsID3(id [4]byte) bool {
+	return strings.ToLower(string(id[:3])) == "id3"
+}
+
+// Parse reads every RIFF sub-chunk from r, in order, starting at the
+// reader's current position.  It rejects RF64 files and non-WAVE
+// containers with descriptive errors.  The parser is lenient: it
+// tolerates a missing final padding byte and ignores the declared
+// RIFF size.
+func Parse(r io.Reader) ([]Chunk, error) {
+	if err := readContainer(r); err != nil {
+		return nil, err
+	}
+
+	var chunks []Chunk
+
+	for {
+		id, size, err := nextHeader(r)
+		if errors.Is(err, io.EOF) {
+			break
+		}
+
+		if err != nil {
+			return nil, err
+		}
+
+		data := make([]byte, size)
+		if _, err := io.ReadFull(r, data); err != nil {
+			return nil, fmt.Errorf("read chunk data for %q: %w", id, err)
+		}
+
+		chunks = append(chunks, Chunk{ID: id, Data: data})
+
+		// Odd-length chunks have a padding byte.  Lenient: if the
+		// read fails (e.g. EOF), just break rather than error.
+		if size%2 != 0 {
+			var pad [1]byte
+
+			if _, err := r.Read(pad[:]); err != nil {
+				break
+			}
+		}
+	}
+
+	return chunks, nil
+}
+
+// ID3Chunk returns the payload of the ID3v2 chunk of the RIFF/WAVE
+// container at the reader's current position, seeking over every other
+// chunk rather than reading it.  It returns ErrNoID3Chunk when the
+// container carries no such chunk, and leaves the read position
+// unspecified either way.
+func ID3Chunk(r io.ReadSeeker) ([]byte, error) {
+	if err := readContainer(r); err != nil {
+		return nil, err
+	}
+
+	for {
+		id, size, err := nextHeader(r)
+		if errors.Is(err, io.EOF) {
+			return nil, ErrNoID3Chunk
+		}
+
+		if err != nil {
+			return nil, err
+		}
+
+		if !IsID3(id) {
+			// Odd-length chunks carry a padding byte.  Seeking past
+			// the end of the file is not an error; the next header
+			// read is what reports the end.
+			if _, err := r.Seek(int64(size)+int64(size%2), io.SeekCurrent); err != nil {
+				return nil, fmt.Errorf("skip chunk %q: %w", id, err)
+			}
+
+			continue
+		}
+
+		// Copied rather than allocated up front: a truncated file is
+		// free to declare a chunk larger than the whole of itself.
+		var data bytes.Buffer
+		if _, err := io.CopyN(&data, r, int64(size)); err != nil {
+			return nil, fmt.Errorf("read chunk data for %q: %w", id, err)
+		}
+
+		return data.Bytes(), nil
+	}
+}
+
+// readContainer consumes the 12-byte RIFF/WAVE header at the reader's
+// current position.
+func readContainer(r io.Reader) error {
+	var magic [4]byte
+	if _, err := io.ReadFull(r, magic[:]); err != nil {
+		return fmt.Errorf("read RIFF magic: %w", err)
+	}
+
+	if string(magic[:]) == "RF64" {
+		return ErrRF64NotSupported
+	}
+
+	if string(magic[:]) != "RIFF" {
+		return fmt.Errorf("%w: got %q", ErrNotRIFF, magic)
+	}
+
+	// Read (and discard) RIFF size — lenient, do not enforce.
+	var riffSize uint32
+	if err := binary.Read(r, binary.LittleEndian, &riffSize); err != nil {
+		return fmt.Errorf("read RIFF size: %w", err)
+	}
+
+	var form [4]byte
+	if _, err := io.ReadFull(r, form[:]); err != nil {
+		return fmt.Errorf("read WAVE form type: %w", err)
+	}
+
+	if string(form[:]) != "WAVE" {
+		return fmt.Errorf("%w: got %q", ErrNotWAVE, form)
+	}
+
+	return nil
+}
+
+// nextHeader reads one sub-chunk header.  It returns io.EOF once the
+// chunks are exhausted, including for a header cut short.
+func nextHeader(r io.Reader) ([4]byte, uint32, error) {
+	var id [4]byte
+
+	_, err := io.ReadFull(r, id[:])
+	if errors.Is(err, io.EOF) || errors.Is(err, io.ErrUnexpectedEOF) {
+		return id, 0, io.EOF
+	}
+
+	if err != nil {
+		return id, 0, fmt.Errorf("read chunk ID: %w", err)
+	}
+
+	var size uint32
+	if err := binary.Read(r, binary.LittleEndian, &size); err != nil {
+		return id, 0, fmt.Errorf("read chunk size for %q: %w", id, err)
+	}
+
+	return id, size, nil
+}

backend/riff/riff_test.go

@@ -0,0 +1,211 @@
+package riff_test
+
+import (
+	"bytes"
+	"encoding/binary"
+	"errors"
+	"testing"
+
+	"yellowjacket/backend/riff"
+)
+
+// chunk is one sub-chunk to put in a test container.
+type chunk struct {
+	id   string
+	data []byte
+}
+
+// buildRIFF assembles a container from magic, form type and chunks,
+// padding odd-length chunks the way a writer must.
+func buildRIFF(magic, form string, chunks []chunk) []byte {
+	var body bytes.Buffer
+
+	body.WriteString(form)
+
+	for _, c := range chunks {
+		body.WriteString(c.id)
+		_ = binary.Write(&body, binary.LittleEndian, uint32(len(c.data)))
+		body.Write(c.data)
+
+		if len(c.data)%2 != 0 {
+			body.WriteByte(0)
+		}
+	}
+
+	var out bytes.Buffer
+
+	out.WriteString(magic)
+	_ = binary.Write(&out, binary.LittleEndian, uint32(body.Len()))
+	out.Write(body.Bytes())
+
+	return out.Bytes()
+}
+
+func TestID3Chunk_FindsTheTagPastTheAudio(t *testing.T) {
+	t.Parallel()
+
+	tests := []struct {
+		name   string
+		chunks []chunk
+		want   string
+	}{
+		{
+			name: "after an odd-length chunk",
+			chunks: []chunk{
+				{id: "fmt ", data: make([]byte, 16)},
+				{id: "LIST", data: []byte("INFOodd")},
+				{id: "data", data: make([]byte, 200)},
+				{id: "id3 ", data: []byte("ID3vTAG")},
+			},
+			want: "ID3vTAG",
+		},
+		{
+			// The chunk ID is written both ways in the wild, and the
+			// writer accepts either, so the reader must too.
+			name: "uppercase ID3",
+			chunks: []chunk{
+				{id: "data", data: make([]byte, 8)},
+				{id: "ID3 ", data: []byte("upper")},
+			},
+			want: "upper",
+		},
+		{
+			name: "first chunk",
+			chunks: []chunk{
+				{id: "id3 ", data: []byte("first")},
+				{id: "data", data: make([]byte, 8)},
+			},
+			want: "first",
+		},
+	}
+
+	for _, tc := range tests {
+		t.Run(tc.name, func(t *testing.T) {
+			t.Parallel()
+
+			r := bytes.NewReader(buildRIFF("RIFF", "WAVE", tc.chunks))
+
+			got, err := riff.ID3Chunk(r)
+			if err != nil {
+				t.Fatalf("ID3Chunk: %v", err)
+			}
+
+			if string(got) != tc.want {
+				t.Errorf("chunk data: got %q, want %q", got, tc.want)
+			}
+		})
+	}
+}
+
+func TestID3Chunk_RejectsWhatItCannotRead(t *testing.T) {
+	t.Parallel()
+
+	tests := []struct {
+		name  string
+		bytes []byte
+		want  error
+	}{
+		{
+			name:  "no ID3 chunk",
+			bytes: buildRIFF("RIFF", "WAVE", []chunk{{id: "data", data: []byte{1, 2}}}),
+			want:  riff.ErrNoID3Chunk,
+		},
+		{
+			name:  "no chunks at all",
+			bytes: buildRIFF("RIFF", "WAVE", nil),
+			want:  riff.ErrNoID3Chunk,
+		},
+		{
+			name:  "not RIFF",
+			bytes: []byte("ID3\x03\x00\x00\x00\x00\x00\x00\x00\x00"),
+			want:  riff.ErrNotRIFF,
+		},
+		{
+			name:  "not WAVE",
+			bytes: buildRIFF("RIFF", "AVI ", []chunk{{id: "id3 ", data: []byte("x")}}),
+			want:  riff.ErrNotWAVE,
+		},
+		{
+			name:  "RF64",
+			bytes: buildRIFF("RF64", "WAVE", []chunk{{id: "id3 ", data: []byte("x")}}),
+			want:  riff.ErrRF64NotSupported,
+		},
+	}
+
+	for _, tc := range tests {
+		t.Run(tc.name, func(t *testing.T) {
+			t.Parallel()
+
+			_, err := riff.ID3Chunk(bytes.NewReader(tc.bytes))
+			if !errors.Is(err, tc.want) {
+				t.Errorf("ID3Chunk error: got %v, want %v", err, tc.want)
+			}
+		})
+	}
+}
+
+// A file cut short mid-chunk is a file with no tag, not a reason to
+// allocate the size it claims: the declared size is four bytes any
+// truncation can leave saying 4 GB.
+func TestID3Chunk_ToleratesATruncatedFile(t *testing.T) {
+	t.Parallel()
+
+	full := buildRIFF("RIFF", "WAVE", []chunk{
+		{id: "data", data: make([]byte, 64)},
+		{id: "id3 ", data: []byte("tag")},
+	})
+
+	t.Run("cut inside the audio", func(t *testing.T) {
+		t.Parallel()
+
+		_, err := riff.ID3Chunk(bytes.NewReader(full[:32]))
+		if !errors.Is(err, riff.ErrNoID3Chunk) {
+			t.Errorf("ID3Chunk error: got %v, want %v", err, riff.ErrNoID3Chunk)
+		}
+	})
+
+	t.Run("cut inside the tag", func(t *testing.T) {
+		t.Parallel()
+
+		if _, err := riff.ID3Chunk(bytes.NewReader(full[:len(full)-2])); err == nil {
+			t.Error("ID3Chunk: got nil error for a truncated tag chunk")
+		}
+	})
+}
+
+// Parse is the writer's half and reads every chunk into memory, which
+// is what preserving them needs.
+func TestParse_ReadsEveryChunkInOrder(t *testing.T) {
+	t.Parallel()
+
+	raw := buildRIFF("RIFF", "WAVE", []chunk{
+		{id: "fmt ", data: make([]byte, 16)},
+		{id: "LIST", data: []byte("INFOodd")},
+		{id: "id3 ", data: []byte("tag")},
+	})
+
+	chunks, err := riff.Parse(bytes.NewReader(raw))
+	if err != nil {
+		t.Fatalf("Parse: %v", err)
+	}
+
+	want := []string{"fmt ", "LIST", "id3 "}
+	if len(chunks) != len(want) {
+		t.Fatalf("chunk count: got %d, want %d", len(chunks), len(want))
+	}
+
+	for i, id := range want {
+		if got := string(chunks[i].ID[:]); got != id {
+			t.Errorf("chunk %d: got %q, want %q", i, got, id)
+		}
+	}
+
+	if !riff.IsID3(chunks[2].ID) || string(chunks[2].Data) != "tag" {
+		t.Errorf("id3 chunk: got %q", chunks[2].Data)
+	}
+
+	// The padding byte after an odd chunk is not part of its data.
+	if string(chunks[1].Data) != "INFOodd" {
+		t.Errorf("odd chunk data: got %q, want %q", chunks[1].Data, "INFOodd")
+	}
+}

backend/tagwriter/totals_test.go

@@ -13,9 +13,10 @@ import (
 // indistinguishable from never having written one.  So these assert the
 // round trip through the *reader the scan uses*, not the bytes.
 //
-// WAV is the exception and it is not this change's: dhowden/tag has no
-// RIFF reader at all, so metadata.ExtractTags cannot see a WAV's ID3
-// chunk -- which is why every other test here reads that chunk itself.
+// WAV was the exception until #104 -- dhowden/tag has no RIFF reader,
+// so metadata.ExtractTags could not see a WAV's ID3 chunk and this
+// case read the chunk itself, which is a test of the writer wearing
+// the shape of a round trip.  All four go through the scanner now.
 func TestWriteTotals_RoundTripsInEveryFormat(t *testing.T) {
 	t.Parallel()
 
@@ -91,7 +92,7 @@ func TestWriteTotals_RoundTripsInEveryFormat(t *testing.T) {
 		},
 		{
 			name: "wav",
-			read: readWavID3Tags,
+			read: viaScanner,
 			write: func(t *testing.T, dir string) string {
 				t.Helper()
 

backend/tagwriter/wav.go

@@ -8,116 +8,22 @@ import (
 	"io"
 	"log/slog"
 	"os"
-	"strings"
 
 	id3v2 "github.com/bogem/id3v2/v2"
 
 	"yellowjacket/backend/fileutil"
+	"yellowjacket/backend/riff"
 )
 
-// Sentinel errors for WAV RIFF operations.
-var (
-	errRF64NotSupported   = errors.New("RF64 files are not yet supported")
-	errNotRIFF            = errors.New("not a RIFF file")
-	errNotWAVE            = errors.New("not a WAVE file")
-	errFileTooLargeForWAV = errors.New("file too large for WAV format (>4GB)")
-)
-
-// riffChunk holds a single RIFF sub-chunk (ID + raw data).
-type riffChunk struct {
-	id   [4]byte
-	data []byte
-}
-
-// parseRIFF reads all RIFF sub-chunks from r.  It rejects RF64 files
-// and non-WAVE containers with descriptive errors.  The parser is
-// lenient on read: it tolerates missing padding bytes and ignores
-// the declared RIFF size.
-func parseRIFF(r io.ReadSeeker) ([]riffChunk, error) {
-	// Read 4-byte container magic.
-	var magic [4]byte
-	if _, err := io.ReadFull(r, magic[:]); err != nil {
-		return nil, fmt.Errorf("read RIFF magic: %w", err)
-	}
-
-	if string(magic[:]) == "RF64" {
-		return nil, errRF64NotSupported
-	}
-
-	if string(magic[:]) != "RIFF" {
-		return nil, fmt.Errorf("%w: got %q", errNotRIFF, magic)
-	}
-
-	// Read (and discard) RIFF size — lenient, do not enforce.
-	var riffSize uint32
-	if err := binary.Read(r, binary.LittleEndian, &riffSize); err != nil {
-		return nil, fmt.Errorf("read RIFF size: %w", err)
-	}
-
-	// Read 4-byte form type.
-	var form [4]byte
-	if _, err := io.ReadFull(r, form[:]); err != nil {
-		return nil, fmt.Errorf("read WAVE form type: %w", err)
-	}
-
-	if string(form[:]) != "WAVE" {
-		return nil, fmt.Errorf("%w: got %q", errNotWAVE, form)
-	}
-
-	// Read sub-chunks until EOF.
-	var chunks []riffChunk
-
-	for {
-		var chunkID [4]byte
-
-		_, err := io.ReadFull(r, chunkID[:])
-		if errors.Is(err, io.EOF) || errors.Is(err, io.ErrUnexpectedEOF) {
-			break
-		}
-
-		if err != nil {
-			return nil, fmt.Errorf("read chunk ID: %w", err)
-		}
-
-		var chunkSize uint32
-		if err := binary.Read(r, binary.LittleEndian, &chunkSize); err != nil {
-			return nil, fmt.Errorf("read chunk size for %q: %w", chunkID, err)
-		}
-
-		data := make([]byte, chunkSize)
-		if _, err := io.ReadFull(r, data); err != nil {
-			return nil, fmt.Errorf("read chunk data for %q: %w", chunkID, err)
-		}
-
-		chunks = append(chunks, riffChunk{id: chunkID, data: data})
-
-		// Odd-length chunks have a padding byte.  Lenient: if the
-		// read fails (e.g. EOF), just break rather than error.
-		if chunkSize%2 != 0 {
-			var pad [1]byte
-
-			if _, err := r.Read(pad[:]); err != nil {
-				break
-			}
-		}
-	}
-
-	return chunks, nil
-}
-
-// isID3ChunkID returns true if id represents an ID3v2 RIFF chunk.
-// Both lowercase "id3 " and uppercase "ID3 " are accepted.
-func isID3ChunkID(id [4]byte) bool {
-	s := strings.ToLower(string(id[:3]))
-
-	return s == "id3"
-}
+// errFileTooLargeForWAV is the one RIFF error that belongs to the
+// writer; reading rejects a container in backend/riff.
+var errFileTooLargeForWAV = errors.New("file too large for WAV format (>4GB)")
 
 // writeRIFF writes a complete RIFF/WAVE container to w, preserving
 // the given chunks in order and appending the id3Data as the final
 // "id3 " chunk.  Returns errFileTooLargeForWAV if the result would
 // exceed the 4 GB RIFF limit.
-func writeRIFF(w io.Writer, chunks []riffChunk, id3Data []byte) error {
+func writeRIFF(w io.Writer, chunks []riff.Chunk, id3Data []byte) error {
 	// Calculate total RIFF payload size:
 	//   4 bytes (WAVE form type)
 	// + for each preserved chunk: 8 (header) + len(data) + padding
@@ -125,7 +31,7 @@ func writeRIFF(w io.Writer, chunks []riffChunk, id3Data []byte) error {
 	riffPayload := uint64(4)
 
 	for _, c := range chunks {
-		sz := uint64(len(c.data))
+		sz := uint64(len(c.Data))
 		riffPayload += 8 + sz
 
 		if sz%2 != 0 {
@@ -162,7 +68,7 @@ func writeRIFF(w io.Writer, chunks []riffChunk, id3Data []byte) error {
 
 	// Write each preserved chunk.
 	for _, c := range chunks {
-		if err := writeChunk(w, c.id, c.data); err != nil {
+		if err := writeChunk(w, c.ID, c.Data); err != nil {
 			return err
 		}
 	}
@@ -225,7 +131,7 @@ func writeWavTags(
 		return fmt.Errorf("open wav for reading: %w", err)
 	}
 
-	allChunks, err := parseRIFF(f)
+	allChunks, err := riff.Parse(f)
 
 	// Close immediately — we need the handle released before
 	// AtomicWrite creates the replacement file.
@@ -237,13 +143,13 @@ func writeWavTags(
 
 	// Separate preserved chunks from existing ID3 data.
 	var (
-		preserved   []riffChunk
+		preserved   []riff.Chunk
 		existingID3 []byte
 	)
 
 	for _, c := range allChunks {
-		if isID3ChunkID(c.id) {
-			existingID3 = c.data
+		if riff.IsID3(c.ID) {
+			existingID3 = c.Data
 		} else {
 			preserved = append(preserved, c)
 		}

backend/tagwriter/wav_test.go

@@ -12,6 +12,7 @@ import (
 	id3v2 "github.com/bogem/id3v2/v2"
 
 	"yellowjacket/backend/metadata"
+	"yellowjacket/backend/riff"
 )
 
 // createTestWAV builds a minimal valid WAV file with an optional
@@ -270,6 +271,88 @@ func TestWriteWavTags_PartialUpdate(t *testing.T) {
 	assertStrField(t, "Composer", meta.Composer, "Original Composer")
 }
 
+// The writer has always been correct and the reader could not see it:
+// a WAV tagged by this app scanned as an untagged file, so editing
+// tags, autotagging a folder or importing a WAV download all appeared
+// to work and changed nothing the library could show (#104).  So this
+// asserts the write through metadata.ExtractTags -- the reader the
+// scan uses -- rather than through the id3 chunk.
+func TestWriteWavTags_ReadBackByTheScanner(t *testing.T) {
+	t.Parallel()
+
+	dir := t.TempDir()
+	path := createTestWAV(t, dir, "scanner.wav", nil)
+	art := tinyJPEG(t)
+
+	changes := TagChanges{
+		FieldTitle:       "Some Song",
+		FieldArtist:      "Some Artist",
+		FieldAlbum:       "Some Album",
+		FieldAlbumArtist: "Some Album Artist",
+		FieldGenre:       "Rock",
+		FieldYear:        2024,
+		FieldTrackNumber: 3,
+		FieldComposer:    "Some Composer",
+		FieldCoverArt:    art,
+	}
+
+	if err := writeWavTags(testLogger(), path, changes); err != nil {
+		t.Fatalf("writeWavTags: %v", err)
+	}
+
+	meta, err := metadata.ExtractTags(path)
+	if err != nil {
+		t.Fatalf("ExtractTags: %v", err)
+	}
+
+	if meta.TagReadWarning != nil {
+		t.Errorf("TagReadWarning: %v", meta.TagReadWarning)
+	}
+
+	assertStrField(t, "Title", meta.Title, "Some Song")
+	assertStrField(t, "Artist", meta.Artist, "Some Artist")
+	assertStrField(t, "Album", meta.Album, "Some Album")
+	assertStrField(t, "AlbumArtist", meta.AlbumArtist, "Some Album Artist")
+	assertStrField(t, "Genre", meta.Genre, "Rock")
+	assertStrField(t, "Composer", meta.Composer, "Some Composer")
+	assertStrField(t, "FileFormat", meta.FileFormat, "WAV")
+	assertIntField(t, "Year", meta.Year, 2024)
+	assertIntField(t, "TrackNumber", meta.TrackNumber, 3)
+
+	if !strings.HasPrefix(meta.TagFormat, "ID3v2") {
+		t.Errorf("TagFormat: got %q, want an ID3v2 version", meta.TagFormat)
+	}
+
+	if meta.Picture == nil {
+		t.Fatal("expected cover art, got nil")
+	}
+
+	if !bytes.Equal(meta.Picture.Data, art) {
+		t.Errorf("picture data mismatch: got %d bytes, want %d",
+			len(meta.Picture.Data), len(art))
+	}
+}
+
+// An untagged WAV is a file with no tags, not a file with a problem:
+// the scanner falls back to the filename and must not be handed a
+// warning to surface about it.
+func TestUntaggedWav_ReadsAsEmptyWithoutAWarning(t *testing.T) {
+	t.Parallel()
+
+	path := createTestWAV(t, t.TempDir(), "bare.wav", nil)
+
+	meta, err := metadata.ExtractTags(path)
+	if err != nil {
+		t.Fatalf("ExtractTags: %v", err)
+	}
+
+	if meta.TagReadWarning != nil {
+		t.Errorf("TagReadWarning: %v", meta.TagReadWarning)
+	}
+
+	assertStrField(t, "Title", meta.Title, "")
+}
+
 func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 	t.Parallel()
 
@@ -282,7 +365,7 @@ func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 		t.Fatalf("open original: %v", err)
 	}
 
-	origChunks, err := parseRIFF(origFile)
+	origChunks, err := riff.Parse(origFile)
 	_ = origFile.Close()
 
 	if err != nil {
@@ -292,7 +375,7 @@ func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 	// Record original chunk data by ID string.
 	origData := map[string][]byte{}
 	for _, c := range origChunks {
-		origData[string(c.id[:])] = c.data
+		origData[string(c.ID[:])] = c.Data
 	}
 
 	// Write a tag to trigger RIFF rewrite.
@@ -309,7 +392,7 @@ func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 		t.Fatalf("open after write: %v", err)
 	}
 
-	newChunks, err := parseRIFF(newFile)
+	newChunks, err := riff.Parse(newFile)
 	_ = newFile.Close()
 
 	if err != nil {
@@ -320,7 +403,7 @@ func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 	origNonID3 := 0
 
 	for _, c := range origChunks {
-		if !isID3ChunkID(c.id) {
+		if !riff.IsID3(c.ID) {
 			origNonID3++
 		}
 	}
@@ -328,7 +411,7 @@ func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 	newNonID3 := 0
 
 	for _, c := range newChunks {
-		if !isID3ChunkID(c.id) {
+		if !riff.IsID3(c.ID) {
 			newNonID3++
 		}
 	}
@@ -359,17 +442,17 @@ func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 // in chunks and its data matches want byte-for-byte.
 func checkChunkPreserved(
 	t *testing.T,
-	chunks []riffChunk,
+	chunks []riff.Chunk,
 	idStr string,
 	want []byte,
 ) {
 	t.Helper()
 
 	for _, c := range chunks {
-		if string(c.id[:]) == idStr {
-			if !bytes.Equal(c.data, want) {
+		if string(c.ID[:]) == idStr {
+			if !bytes.Equal(c.Data, want) {
 				t.Errorf("chunk %q data changed: got %d bytes, want %d",
-					idStr, len(c.data), len(want))
+					idStr, len(c.Data), len(want))
 			}
 
 			return
@@ -430,7 +513,7 @@ func TestWriteWavTags_RejectsRF64(t *testing.T) {
 	buf.WriteString("WAVE")
 
 	// Minimal ds64 chunk (required for RF64 but we just need
-	// enough bytes for parseRIFF to hit the RF64 rejection).
+	// enough bytes for riff.Parse to hit the RF64 rejection).
 	buf.WriteString("ds64")
 	_ = binary.Write(&buf, binary.LittleEndian, uint32(28)) //nolint:mnd
 	buf.Write(make([]byte, 28))                             //nolint:mnd
@@ -454,9 +537,12 @@ func TestWriteWavTags_RejectsRF64(t *testing.T) {
 
 // readWavID3Tags extracts ID3v2 metadata from a WAV file by parsing
 // the RIFF structure and reading the id3 chunk with bogem/id3v2.
-// dhowden/tag's ReadFrom does not support WAV files, and its
-// ReadID3v2Tags fails on empty tags (after clearing all frames).
-// Using bogem/id3v2.ParseReader handles all cases correctly.
+//
+// metadata.ExtractTags reads a WAV since #104 and is what the round
+// trips assert through.  This stays for the two cases that are about
+// the bytes rather than about the scan: a tag with every frame
+// cleared, which no reader reports as anything, and the chunk
+// preservation test, which is already parsing the container itself.
 func readWavID3Tags(
 	t *testing.T,
 	path string,
@@ -470,17 +556,17 @@ func readWavID3Tags(
 
 	defer func() { _ = f.Close() }()
 
-	chunks, err := parseRIFF(f)
+	chunks, err := riff.Parse(f)
 	if err != nil {
-		t.Fatalf("parseRIFF: %v", err)
+		t.Fatalf("riff.Parse: %v", err)
 	}
 
 	// Find the id3 chunk.
 	var id3Data []byte
 
 	for _, c := range chunks {
-		if isID3ChunkID(c.id) {
-			id3Data = c.data
+		if riff.IsID3(c.ID) {
+			id3Data = c.Data
 
 			break
 		}

e2e/specs/long-press.spec.ts

@@ -1,127 +0,0 @@
-import { test, expect } from '../support/fixtures.js';
-
-/**
- * Long-press is the touch route to a context menu (plan 016 B2 phase 3).
- *
- * The component tier proves the gesture in isolation, against markup it
- * built itself. What it cannot prove is the half that made this one
- * listener instead of six: that the synthetic event reaches the handler
- * a *real* component bound — `track-list` delegates its `contextmenu`
- * on the `lit-virtualizer` rather than binding one per row — and that
- * the real `wa-popup` menu opens from it, which is a path with its own
- * history of opening and then refusing to work (see
- * `menu-keyboard.spec.ts`).
- *
- * The pointer events are dispatched rather than performed: this project
- * runs Desktop Chrome and Desktop Safari, neither of which has touch,
- * and a device tier does not exist. So this is honest about what it
- * checks — the app's own listeners, on the app's own DOM, from the
- * events a touch would produce — and not about a real finger.
- */
-
-/** A common small phone, as in `phone-shell.spec.ts`. */
-const PHONE = { width: 390, height: 844 };
-
-/** Comfortably past the module's 500ms hold. */
-const HELD = 900;
-
-type Page = import('@playwright/test').Page;
-
-/** The track list's menu panel, or null while it is not rendered. */
-const panel = (page: Page) =>
-  page.evaluate(() => {
-    const el = document
-      .querySelector('track-list')
-      ?.shadowRoot?.querySelector('.context-menu-panel');
-
-    if (!el) return null;
-
-    return {
-      role: el.getAttribute('role'),
-      label: el.getAttribute('aria-label'),
-      items: el.querySelectorAll('[role="menuitem"]').length,
-    };
-  });
-
-/**
- * Press the first track row, optionally dragging partway through — the
- * shape of a scroll that begins on a row, which must not open a menu.
- */
-async function pressFirstRow(
-  page: Page,
-  opts: { driftY?: number } = {},
-): Promise<void> {
-  await page.evaluate((drift) => {
-    // `.track-row`, not `[role="row"]`: the column header is a row too,
-    // and it is the *first* one -- a press on it is correctly ignored,
-    // which reads exactly like the gesture not working.
-    const row = document
-      .querySelector('track-list')
-      ?.shadowRoot?.querySelector('.track-row');
-
-    if (!row) throw new Error('no track row to press');
-
-    const box = row.getBoundingClientRect();
-    const x = Math.round(box.left + box.width / 2);
-    const y = Math.round(box.top + box.height / 2);
-    const send = (type: string, dy = 0) =>
-      row.dispatchEvent(
-        new PointerEvent(type, {
-          bubbles: true,
-          composed: true,
-          cancelable: true,
-          pointerType: 'touch',
-          isPrimary: true,
-          clientX: x,
-          clientY: y + dy,
-        }),
-      );
-
-    send('pointerdown');
-
-    if (drift) send('pointermove', drift);
-  }, opts.driftY ?? 0);
-}
-
-test.describe('long-press opens the track menu', () => {
-  test.beforeEach(async ({ app }) => {
-    await app.setViewportSize(PHONE);
-    await app.getByTestId('tab-tracks').click();
-    await expect(app.getByTestId('main-content')).toHaveAttribute(
-      'data-active-view',
-      'tracks',
-    );
-  });
-
-  test.afterEach(async ({ app }) => {
-    // Every other spec file runs against a desktop, and the viewport
-    // belongs to the shared context rather than to this file.
-    await app.setViewportSize({ width: 1440, height: 900 });
-  });
-
-  test('reaches the delegated handler and opens the real menu', async ({
-    app,
-  }) => {
-    await expect.poll(() => panel(app)).toBeNull();
-
-    await pressFirstRow(app);
-
-    await expect
-      .poll(() => panel(app), { timeout: HELD + 2000 })
-      .toMatchObject({ role: 'menu', label: 'Track actions' });
-
-    // The same panel Shift+F10 opens, items and all -- not an empty
-    // popup that happened to become visible.
-    expect((await panel(app))?.items).toBeGreaterThan(0);
-  });
-
-  test('does not open one for a press that turns into a scroll', async ({
-    app,
-  }) => {
-    await pressFirstRow(app, { driftY: 40 });
-
-    await app.waitForTimeout(HELD);
-
-    expect(await panel(app)).toBeNull();
-  });
-});

e2e/specs/native-touch-feel.spec.ts

@@ -0,0 +1,140 @@
+import { test, expect } from '../support/fixtures.js';
+
+/**
+ * The web view's own tap highlight, and what replaced it (#54).
+ *
+ * Two halves, and each is here because no other tier can see it.
+ *
+ * **The highlight is killed by one declaration on `html`**, which
+ * reaches the app's shadow roots because `-webkit-tap-highlight-color`
+ * is inherited and inheritance crosses a shadow boundary. That is a
+ * property of `index.css`, and `index.css` is loaded by the real app
+ * and by nothing else — the component tier mounts a component with no
+ * page stylesheet at all, which is the same reason the theme's ramps
+ * are invisible to it.
+ *
+ * **The press state is measured rather than read.** The component tier
+ * asserts the shape of the stylesheet (which rule is inside which
+ * query, and that the press selector carries a state class), because
+ * `:active` cannot be forced there. Here there is a real pointer: hold
+ * the button down on a real row of the real list and read what the row
+ * became. That is the assertion that would fail if the rule were
+ * hoisted, renamed, or lost to `.selected`.
+ *
+ * What neither half is, is the device. Chrome 113's WebView is where
+ * the grey box was reported and where a finger is; the numbers from it
+ * are on the PR.
+ */
+type Page = import('@playwright/test').Page;
+
+/** The phone this work was measured against, in CSS pixels. */
+const DEVICE = { width: 424, height: 439 };
+
+/** The computed tap-highlight colour of a node inside a shadow root. */
+const tapHighlight = (page: Page, host: string, inner: string) =>
+  page.evaluate(
+    ([hostSel, innerSel]) => {
+      const el = document
+        .querySelector(hostSel!)
+        ?.shadowRoot?.querySelector(innerSel!);
+
+      if (!el) return null;
+
+      return getComputedStyle(el).getPropertyValue(
+        '-webkit-tap-highlight-color',
+      );
+    },
+    [host, inner],
+  );
+
+test.describe('the tap highlight', () => {
+  test('is transparent inside a shadow root, from one rule on html', async ({
+    app,
+    browserName,
+  }) => {
+    await app.getByTestId('nav-tracks').click();
+    await expect(app.getByTestId('main-content')).toHaveAttribute(
+      'data-active-view',
+      'tracks',
+    );
+
+    const row = await tapHighlight(app, 'track-list', '.track-row');
+
+    expect(row).not.toBeNull();
+
+    // The property is a WebKit extension that only iOS honours, so an
+    // engine is free not to report one at all. Chromium always does —
+    // measured at rgba(0, 0, 0, 0.18) with the rule removed, which is
+    // the grey box the report describes — so the assertion is not
+    // skippable there, and nothing this app can do makes the property
+    // disappear on an engine that has it.
+    test.skip(
+      row === '',
+      `${browserName} reports no -webkit-tap-highlight-color to read`,
+    );
+
+    expect(row).toBe('rgba(0, 0, 0, 0)');
+  });
+});
+
+test.describe('the press state that replaced it', () => {
+  test.beforeEach(async ({ app }) => {
+    await app.setViewportSize(DEVICE);
+    await app.getByTestId('tab-tracks').click();
+    await expect(app.getByTestId('main-content')).toHaveAttribute(
+      'data-active-view',
+      'tracks',
+    );
+    await expect(app.locator('track-list').first()).toBeVisible();
+  });
+
+  test.afterEach(async ({ app }) => {
+    await app.mouse.up();
+    await app.setViewportSize({ width: 1440, height: 900 });
+  });
+
+  test('shows on the row being pressed, and on that row only', async ({
+    app,
+  }) => {
+    const rows = await app.evaluate(() => {
+      const found = document
+        .querySelector('track-list')
+        ?.shadowRoot?.querySelectorAll('.track-row');
+
+      if (!found || found.length < 2) return null;
+
+      const rect = found[1]!.getBoundingClientRect();
+
+      return {
+        x: Math.round(rect.x + rect.width / 2),
+        y: Math.round(rect.y + rect.height / 2),
+      };
+    });
+
+    expect(rows).not.toBeNull();
+
+    const backgrounds = () =>
+      app.evaluate(() => {
+        const found = document
+          .querySelector('track-list')!
+          .shadowRoot!.querySelectorAll('.track-row');
+
+        return {
+          pressed: getComputedStyle(found[1]!).backgroundColor,
+          neighbour: getComputedStyle(found[2]!).backgroundColor,
+        };
+      });
+
+    await app.mouse.move(rows!.x, rows!.y);
+    await app.mouse.down();
+
+    const held = await backgrounds();
+
+    // The press overlay, from the theme rather than from a literal in
+    // a component: rgba(255, 255, 255, 0.12) on both dark ramps.
+    expect(held.pressed).toBe('rgba(255, 255, 255, 0.12)');
+    expect(held.neighbour).not.toBe(held.pressed);
+
+    await app.mouse.up();
+  });
+});

e2e/specs/phone-entity-links.spec.ts

@@ -0,0 +1,135 @@
+import {
+  test,
+  expect,
+  callBinding,
+  openTheQueue,
+  NO_QUEUE_SOURCE,
+} from '../support/fixtures.js';
+import type { Page } from '@playwright/test';
+
+/**
+ * #67 — a name is not a link on a phone, and the menu is where it went.
+ *
+ * The queue panel is the surface this is visible on: its rows draw a
+ * track title and an artist credit as `explore-link`s at every width,
+ * unlike `track-list`, whose phone column set stacks title over artist
+ * as plain text already.
+ *
+ * **The pair is what makes either assertion mean anything.** A link
+ * that is gone and a menu item that never arrived is not a smaller
+ * affordance — it is a destination the phone cannot reach, which is
+ * what plan 018's "no action is unreachable at any supported size"
+ * refuses. So each test asserts the phone and the desktop in the same
+ * breath: text *and* an item here, a link *and* no item there.
+ *
+ * The desktop half is also the regression guard for the change: menus
+ * above the breakpoint must be exactly what they were, because the name
+ * beside them is still a link and a menu that repeats the row is
+ * furniture.
+ */
+
+/** The reference device's real viewport, not a resized desktop. */
+const DEVICE = { width: 424, height: 439 };
+
+/** Wide enough that the queue is a column beside the content. */
+const DESKTOP = { width: 1280, height: 800 };
+
+const row = (app: Page, index: number) =>
+  app.locator(`queue-panel .track-item[data-index="${index}"]`);
+
+/** The queue panel's own context menu, as a list of item labels. */
+async function menuLabels(app: Page): Promise<string[]> {
+  return app.evaluate(() =>
+    [
+      ...document
+        .querySelector('queue-panel')!
+        .shadowRoot!.querySelectorAll('wa-dropdown-item'),
+    ].map((item) => item.textContent?.replace(/\s+/g, ' ').trim() ?? ''),
+  );
+}
+
+/**
+ * Queue three tracks that have an album, for the reason
+ * `queue-selection.spec.ts` states at length: `explore-link` routes a
+ * title to its *album's* page and renders plain text where it cannot
+ * route, so a track with no album answers this file's question with
+ * the wrong "no link".
+ */
+async function queueThree(app: Page): Promise<void> {
+  const paths = await app.evaluate(async () => {
+    const tracks = (await window.__yjEvents.call(
+      'library.Library.GetTracks',
+      [0],
+      10_000,
+    )) as { FilePath: string; Album: string; ArtistName: string }[];
+
+    return tracks
+      .filter((t) => t.Album !== '' && t.ArtistName !== '')
+      .slice(0, 3)
+      .map((t) => t.FilePath);
+  });
+
+  await callBinding(app, 'queue.Queue.SetQueue', [
+    paths,
+    0,
+    false,
+    NO_QUEUE_SOURCE,
+  ]);
+}
+
+/** Open the row's context menu and read the items back. */
+async function openRowMenu(app: Page, index: number): Promise<string[]> {
+  await row(app, index).click({ button: 'right' });
+  await expect
+    .poll(async () => (await menuLabels(app)).length)
+    .toBeGreaterThan(0);
+
+  return menuLabels(app);
+}
+
+test.describe('an inline name and the menu that replaces it', () => {
+  test.afterEach(async ({ app }) => {
+    await app.keyboard.press('Escape');
+    await callBinding(app, 'queue.Queue.Clear').catch(() => {
+      /* an empty queue is the state we were asking for */
+    });
+    await app.setViewportSize(DESKTOP);
+  });
+
+  test('a queue row is plain text on a phone and carries the destination', async ({
+    app,
+  }) => {
+    await app.setViewportSize(DEVICE);
+    await queueThree(app);
+    await openTheQueue(app);
+    await expect(row(app, 0)).toBeVisible();
+
+    // The name is text: nothing in the row is a link at all.
+    await expect(app.locator('queue-panel .track-item .explore-link')).toHaveCount(
+      0,
+    );
+
+    const labels = await openRowMenu(app, 0);
+
+    expect(labels).toContain('Go to Artist');
+    expect(labels).toContain('Go to Album');
+  });
+
+  test('the same row on a desktop is a link, and its menu is untouched', async ({
+    app,
+  }) => {
+    await app.setViewportSize(DESKTOP);
+    await queueThree(app);
+    await openTheQueue(app);
+    await expect(row(app, 0)).toBeVisible();
+
+    await expect(
+      row(app, 0).locator('.track-title .explore-link'),
+    ).toHaveCount(1);
+
+    const labels = await openRowMenu(app, 0);
+
+    expect(labels).not.toContain('Go to Artist');
+    expect(labels).not.toContain('Go to Album');
+  });
+});

e2e/specs/touch-gestures.spec.ts

@@ -0,0 +1,311 @@
+import { test, expect, callBinding } from '../support/fixtures.js';
+
+/**
+ * The touch gestures against the real app (plan 019, #63; long-press
+ * from plan 016 B2).
+ *
+ * The component tier proves the gestures in isolation, against markup
+ * it built itself. What it cannot prove is the half that made this one
+ * document listener instead of six: that the announced gesture reaches
+ * the handler a *real* component bound — `track-list` delegates on the
+ * `lit-virtualizer` rather than binding per row — and that the real
+ * menu opens from it, a path with its own history of opening and then
+ * refusing to work (see `menu-keyboard.spec.ts`).
+ *
+ * **Both halves of the reassignment are here, and the second is the
+ * one that matters.** #63 makes a hold on a *track row* mean selection
+ * mode; every other surface in the app keeps the context menu it has
+ * had, because an unclaimed `yj-long-press` still becomes a
+ * `contextmenu`. A spec that only checked the row would pass on a
+ * build that had silently broken the other thirteen menus.
+ *
+ * The pointer events are dispatched rather than performed: this
+ * project runs Desktop Chrome and Desktop Safari, neither of which has
+ * touch. So this is honest about what it checks — the app's own
+ * listeners, on the app's own DOM, from the events a touch would
+ * produce — and not about a real finger. The finger is the Android
+ * tier, and it found something this cannot see: Chrome 113's WebView
+ * fires its own `contextmenu` on a long press, which is why the module
+ * announces the gesture from a native event rather than standing down.
+ */
+
+/** A common small phone, as in `phone-shell.spec.ts`. */
+const PHONE = { width: 390, height: 844 };
+
+/** Comfortably past the module's 500ms hold. */
+const HELD = 900;
+
+type Page = import('@playwright/test').Page;
+
+/** A component's menu panel, or null while it is not rendered. */
+const panel = (page: Page, host: string) =>
+  page.evaluate((tag) => {
+    const el = document
+      .querySelector(tag)
+      ?.shadowRoot?.querySelector('.context-menu-panel');
+
+    if (!el) return null;
+
+    return {
+      role: el.getAttribute('role'),
+      label: el.getAttribute('aria-label'),
+      items: el.querySelectorAll('[role="menuitem"]').length,
+    };
+  }, host);
+
+/** How many tracks the selection bar says are selected, or null. */
+const selectionCount = (page: Page) =>
+  page.evaluate(() => {
+    const bar = document
+      .querySelector('track-list')
+      ?.shadowRoot?.querySelector('selection-bar');
+
+    return bar ? (bar as unknown as { count: number }).count : null;
+  });
+
+/**
+ * Press an element, optionally dragging partway through — the shape of
+ * a scroll that begins on a row, which must be neither gesture — and
+ * optionally lifting, which is what makes it a tap rather than a hold.
+ */
+async function press(
+  page: Page,
+  selector: { host: string; inner: string },
+  opts: { driftY?: number; lift?: boolean } = {},
+): Promise<void> {
+  await page.evaluate(
+    ({ host, inner, drift, lift }) => {
+      const el = document
+        .querySelector(host)
+        ?.shadowRoot?.querySelector(inner);
+
+      if (!el) throw new Error(`no ${inner} in ${host} to press`);
+
+      const box = el.getBoundingClientRect();
+      const x = Math.round(box.left + box.width / 2);
+      const y = Math.round(box.top + box.height / 2);
+      const send = (type: string, dy = 0) =>
+        el.dispatchEvent(
+          new PointerEvent(type, {
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+            pointerType: 'touch',
+            isPrimary: true,
+            clientX: x,
+            clientY: y + dy,
+          }),
+        );
+
+      send('pointerdown');
+
+      if (drift) send('pointermove', drift);
+      if (lift) send('pointerup');
+    },
+    {
+      host: selector.host,
+      inner: selector.inner,
+      drift: opts.driftY ?? 0,
+      lift: opts.lift ?? false,
+    },
+  );
+}
+
+// `.track-row`, not `[role="row"]`: the column header is a row too, and
+// it is the *first* one — a press on it is correctly ignored, which
+// reads exactly like the gesture not working.
+const TRACK_ROW = { host: 'track-list', inner: '.track-row' };
+
+test.describe('a hold on a track row selects it', () => {
+  test.beforeEach(async ({ app }) => {
+    await app.setViewportSize(PHONE);
+    await app.getByTestId('tab-tracks').click();
+    await expect(app.getByTestId('main-content')).toHaveAttribute(
+      'data-active-view',
+      'tracks',
+    );
+  });
+
+  test.afterEach(async ({ app }) => {
+    // Every other spec file runs against a desktop, and the viewport
+    // belongs to the shared context rather than to this file.
+    await app.setViewportSize({ width: 1440, height: 900 });
+  });
+
+  test('raises the selection bar rather than the context menu', async ({
+    app,
+  }) => {
+    await expect.poll(() => selectionCount(app)).toBeNull();
+
+    await press(app, TRACK_ROW);
+
+    await expect
+      .poll(() => selectionCount(app), { timeout: HELD + 2000 })
+      .toBe(1);
+
+    // The gesture is claimed, so the menu this hold used to open must
+    // not also be up -- on a phone that would be a sheet over the bar.
+    expect(await panel(app, 'track-list')).toBeNull();
+  });
+
+  test('is neither gesture when the press turns into a scroll', async ({
+    app,
+  }) => {
+    await press(app, TRACK_ROW, { driftY: 40 });
+    await app.waitForTimeout(HELD);
+
+    expect(await selectionCount(app)).toBeNull();
+    expect(await panel(app, 'track-list')).toBeNull();
+  });
+});
+
+test.describe('a hold anywhere else still opens the menu', () => {
+  test.beforeEach(async ({ app }) => {
+    await app.setViewportSize(PHONE);
+    await app.getByTestId('tab-albums').click();
+    await expect(app.getByTestId('main-content')).toHaveAttribute(
+      'data-active-view',
+      'albums',
+    );
+  });
+
+  test.afterEach(async ({ app }) => {
+    await app.setViewportSize({ width: 1440, height: 900 });
+  });
+
+  test('reaches the delegated handler and opens the real menu', async ({
+    app,
+  }) => {
+    // The property that let #63 reassign the hold without touching one
+    // of the fourteen context menus: unclaimed, it is what it was.
+    // Without this half, breaking all of them passes the suite.
+    await expect.poll(() => panel(app, 'cover-grid')).toBeNull();
+
+    await press(app, { host: 'cover-grid', inner: '[role="option"]' });
+
+    await expect
+      .poll(() => panel(app, 'cover-grid'), { timeout: HELD + 2000 })
+      .toMatchObject({ role: 'menu' });
+
+    // The same panel Shift+F10 opens, items and all -- not an empty
+    // popup that happened to become visible.
+    expect((await panel(app, 'cover-grid'))?.items).toBeGreaterThan(0);
+  });
+});
+
+/**
+ * Swipe right on a track row to queue it (plan 019 phase 2, #63).
+ *
+ * The component tier has the rule this obeys — one row is a position,
+ * several are a choice — against a queue that is a fake. What is only
+ * true here is that the gesture reaches the *real* queue: `AddTracks`
+ * is a Go method, the queue is persisted, and "the row was added"
+ * is a question only the backend can answer.
+ *
+ * **It is Chromium-only, and that is a property of the browser rather
+ * than a gap.** The gesture runs on touch events, because Chrome 113's
+ * WebView cancels the pointer stream ~16px into any drag whatever
+ * `touch-action` says. Desktop WebKit implements no `TouchEvent`
+ * constructor at all — touch events are a mobile-Safari surface — so
+ * the events this needs cannot be built there. Skipping loudly is
+ * better than a spec that quietly asserts nothing on half the matrix,
+ * which is what `layout-overflow.spec.ts` and `back-navigation.spec.ts`
+ * were each doing when they were green on a broken build.
+ */
+test.describe('a swipe right on a track row queues it', () => {
+  test.beforeEach(async ({ app, browserName }) => {
+    test.skip(
+      browserName !== 'chromium',
+      'desktop WebKit has no TouchEvent constructor to build the gesture from',
+    );
+
+    await app.setViewportSize(PHONE);
+    await app.getByTestId('tab-tracks').click();
+    await expect(app.getByTestId('main-content')).toHaveAttribute(
+      'data-active-view',
+      'tracks',
+    );
+  });
+
+  test.afterEach(async ({ app }) => {
+    await app.setViewportSize({ width: 1440, height: 900 });
+  });
+
+  /**
+   * Drag the first row sideways by a fraction of its own width and
+   * lift. `fraction` is against the row, because the commit threshold
+   * is — a number of pixels here would be a second declaration of it,
+   * right on one viewport and wrong on the next.
+   */
+  const swipeFirstRow = (page: Page, fraction: number) =>
+    page.evaluate((f) => {
+      const row = document
+        .querySelector('track-list')
+        ?.shadowRoot?.querySelector('.track-row');
+
+      if (!row) throw new Error('no track row to swipe');
+
+      const box = row.getBoundingClientRect();
+      const y = box.top + box.height / 2;
+      const at = (x: number) =>
+        new Touch({
+          identifier: 1,
+          target: row,
+          clientX: box.left + x,
+          clientY: y,
+        });
+      const send = (type: string, points: Touch[]) =>
+        row.dispatchEvent(
+          new TouchEvent(type, {
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+            touches: points,
+            changedTouches: points.length > 0 ? points : [at(0)],
+          }),
+        );
+
+      send('touchstart', [at(0)]);
+
+      for (const step of [0.25, 0.5, 0.75, 1]) {
+        send('touchmove', [at(box.width * f * step)]);
+      }
+
+      send('touchend', []);
+    }, fraction);
+
+  /** How many tracks the backend says are in the queue. */
+  const queueLength = async (page: Page) => {
+    const state = await callBinding<{ tracks: unknown[] }>(
+      page,
+      'queue.Queue.GetState',
+    );
+
+    return state.tracks?.length ?? 0;
+  };
+
+  test('adds exactly one track to the real queue', async ({ app }) => {
+    const before = await queueLength(app);
+
+    await swipeFirstRow(app, 0.6);
+
+    await expect.poll(() => queueLength(app)).toBe(before + 1);
+
+    // Queued, not played: a swipe is not a tap, and the difference is
+    // what is on screen afterwards.
+    expect(
+      await app.getByTestId('main-content').getAttribute('data-active-view'),
+    ).toBe('tracks');
+  });
+
+  test('does nothing when the finger did not get far enough', async ({
+    app,
+  }) => {
+    const before = await queueLength(app);
+
+    await swipeFirstRow(app, 0.1);
+    await app.waitForTimeout(400);
+
+    expect(await queueLength(app)).toBe(before);
+  });
+});

frontend/index.css

@@ -7,6 +7,26 @@
 
 html {
     height: 100%;
+
+    /* #54.  The web view's own tap highlight -- the grey box a phone
+       draws over the bounding rect of whatever was tapped -- gone in
+       one declaration, because `-webkit-tap-highlight-color` is an
+       *inherited* property and an inherited property crosses a shadow
+       boundary.  So this reaches every one of the app's shadow roots
+       without a rule in any of them; before it, exactly one component
+       (`library-status-indicator`) set it and the box appeared
+       everywhere else.
+
+       What it costs is the only touch feedback several surfaces had,
+       which is why the rows, the tab bar and the shared menu items
+       grew a `:active` state in the same change: removing the wrong
+       feedback and leaving none is not an improvement.  The cards
+       already had one (`transform: scale(0.97)`).
+
+       `user-select` is the same argument one rule up and was already
+       done: the `*` rule at the top of this file is inherited into the
+       shadow roots too. */
+    -webkit-tap-highlight-color: transparent;
 }
 
 body {

frontend/index.ts

@@ -70,7 +70,7 @@ import '@store/theme-store';
 // registers the document keydown listener for global shortcuts.
 import './src/services/keyboard-shortcut-service';
 import { activateView, deactivateView } from '@utils/view-lifecycle';
-import { installLongPressContextMenu } from '@utils/long-press';
+import { installTouchGestures } from '@utils/touch-gestures';
 import { openQueue, queuePanelElement } from '@utils/open-queue';
 import { installTopBarFit } from './src/services/top-bar-fit';
 import {
@@ -87,10 +87,13 @@ setBasePath('/dist/webawesome');
 // the session.
 registerBundledIcons();
 
-// The touch equivalent of a right-click, installed once for every menu
-// in the app rather than per component. Harmless on a desktop: it acts
-// on `pointerType === 'touch'` only.
-installLongPressContextMenu();
+// Every touch gesture in the app, installed once rather than per
+// component (plan 019). Harmless on a desktop: it acts on
+// `pointerType === 'touch'` only, per event, so a mouse on a
+// touchscreen keeps click-selects / double-click-plays on the very
+// same row. An unclaimed long press still becomes a `contextmenu`,
+// which is what leaves all fourteen menus untouched by #63.
+installTouchGestures();
 
 // The top bar decides what it can afford to show (#143). Here rather
 // than in a component because the bar is light DOM in index.html and

frontend/src/components/bottom-nav/bottom-nav.ts

@@ -89,6 +89,17 @@ export class BottomNav extends LitElement {
             color: var(--yj-accent, #ffd43b);
         }
 
+        /* The press state (#54). This bar is the phone's primary
+           navigation and had no feedback of its own at all -- what a
+           tap produced was the web view's tap highlight, a grey box
+           over the whole 48px cell, which index.css has now taken
+           away. The .active rule above is which tab you are *on*; this
+           is the tab being pressed, so they are a colour and a
+           background rather than two colours. */
+        button:active {
+            background-color: var(--yj-press-overlay, rgba(255, 255, 255, 0.12));
+        }
+
         button:focus-visible {
             outline: 2px solid var(--yj-accent, #ffd43b);
             outline-offset: -2px;

frontend/src/components/cover-grid/cover-grid.ts

@@ -55,6 +55,8 @@ import {
 import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller.js';
 import { FavoritesController } from '@store/controllers/favorites-controller';
 import { creditLink, exploreLinkStyles } from '../../utils/explore-link';
+import { goToMenuItems } from '../../utils/go-to-menu';
+import type { GoToTarget } from '../../utils/go-to-menu';
 import { creditStore } from '@store/credit-store';
 import {
     createAlbumArtDragImage,
@@ -2084,6 +2086,30 @@ export class CoverGrid
         );
     }
 
+    /**
+     * The artist an album card's menu can navigate to — the card's own
+     * credit line, which stops being a link below the phone breakpoint
+     * (#67).
+     *
+     * A *track* target gets nothing: the dropdown's rows carry no
+     * links of their own, and the album they sit under is the card
+     * that opened them.
+     */
+    private get goToTarget(): GoToTarget | undefined {
+        if (this.contextMenuTarget.kind !== 'album') return undefined;
+
+        const album = this.albums.find(
+            (a) => a.ID === this.contextMenuAlbumId,
+        );
+
+        if (!album) return undefined;
+
+        return {
+            artistName: album.ArtistName,
+            artistMBID: album.ArtistMBID,
+        };
+    }
+
     private renderContextMenu() {
         const { ctxMenu } = this;
 
@@ -2199,6 +2225,11 @@ export class CoverGrid
                                         </wa-dropdown-item>
                                     `
                                   : nothing}
+                              ${goToMenuItems(this.goToTarget, {
+                                  onSelect: () => ctxMenu.close(),
+                                  onHover: () =>
+                                      ctxMenu.closePlaylistSubmenu(),
+                              })}
                           </div>
                       `
                 : nothing}

frontend/src/components/explore-album-details/explore-album-details.ts

@@ -3191,10 +3191,14 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
         return html`
             ${artist
                 ? html`<div class="album-artist">
+                      <!-- keepOnPhone: the page header is not a row and
+                           has no menu of its own, so this credit is the
+                           only route from an album to its artist (#67). -->
                       ${creditLink(
                           creditStore.credits(this.releaseGroupMBID),
                           artist,
                           artistMbid,
+                          { keepOnPhone: true },
                       )}
                   </div>`
                 : nothing}

frontend/src/components/explore-artist-details/explore-artist-details.ts

@@ -30,6 +30,7 @@ import { libraryStore } from '../../store/library-store';
 import { downloadStore } from '../../store/download-store';
 import '@awesome.me/webawesome/dist/components/button/button.js';
 import { trackLink, exploreLinkStyles } from '../../utils/explore-link';
+import { goToMenuItems } from '../../utils/go-to-menu';
 import { describeError } from '../../utils/describe-error';
 import {
     GetAlbumsByArtist,
@@ -2705,6 +2706,16 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
                 <wa-icon slot="icon" name="globe"></wa-icon>
                 View on MusicBrainz
             </wa-dropdown-item>
+            <!-- The track title links to its album, and below the phone
+                 breakpoint it is plain text (#67). The artist is this
+                 page, so there is nothing to go to. -->
+            ${goToMenuItems(
+                { albumName: track.releaseName, albumMBID: track.releaseGroupMbid ?? '' },
+                {
+                    onSelect: () => this.ctxMenu.close(),
+                    onHover: () => this.ctxMenu.closePlaylistSubmenu(),
+                },
+            )}
         `;
     }
 

frontend/src/components/explore-view/explore-view.ts

@@ -23,6 +23,8 @@ import { queueStore } from '../../store/queue-store';
 import { notificationStore } from '../../store/notification-store';
 import '../notifications/inline-notice';
 import { creditLink, trackLink, exploreLinkStyles } from '../../utils/explore-link';
+import { goToMenuItems } from '../../utils/go-to-menu';
+import type { GoToTarget } from '../../utils/go-to-menu';
 import { creditStore } from '@store/credit-store';
 import { describeError } from '../../utils/describe-error';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
@@ -54,10 +56,28 @@ export const ExploreRegion = 'explore';
  * is present only when owned — that's what gates the playback items,
  * while `mbid` (always present) is what "View on MusicBrainz" uses, so
  * a catalog-only card still gets a menu with somewhere useful to go.
+ *
+ * `goTo` is the names the card draws -- an artist credit, and for a
+ * recording row the release its title links to. Below the phone
+ * breakpoint those are plain text, so the menu is where they went
+ * (#67); an album card carries no album of its own, because tapping
+ * the card is already that.
  */
 type ExploreMenuTarget =
-    | { kind: 'album'; mbid: string; localId?: number; title: string }
-    | { kind: 'recording'; mbid: string; localId?: number; title: string };
+    | {
+          kind: 'album';
+          mbid: string;
+          localId?: number;
+          title: string;
+          goTo?: GoToTarget;
+      }
+    | {
+          kind: 'recording';
+          mbid: string;
+          localId?: number;
+          title: string;
+          goTo?: GoToTarget;
+      };
 type ThumbnailRequest = explore.ThumbnailRequest;
 type MBSearchResult = explore.MBSearchResult;
 type LyricsResult = explore.LyricsResult;
@@ -1386,6 +1406,9 @@ export class ExploreView extends ViewLifecycleMixin(LitElement) implements Conte
                                   <wa-icon slot="icon" name="globe"></wa-icon>
                                   View on MusicBrainz
                               </wa-dropdown-item>
+                              ${goToMenuItems(target.goTo, {
+                                  onSelect: () => this.ctxMenu.close(),
+                              })}
                           </div>
                       `
                     : nothing}
@@ -2188,6 +2211,10 @@ export class ExploreView extends ViewLifecycleMixin(LitElement) implements Conte
                                         mbid: rg.mbid,
                                         localId: rg.localId,
                                         title: rg.title,
+                                        goTo: {
+                                            artistName: rg.artistCredit,
+                                            artistMBID: rg.artistMbid ?? '',
+                                        },
                                     })}
                                 role="button"
                                 tabindex="0"
@@ -2200,6 +2227,10 @@ export class ExploreView extends ViewLifecycleMixin(LitElement) implements Conte
                                             mbid: rg.mbid,
                                             localId: rg.localId,
                                             title: rg.title,
+                                            goTo: {
+                                                artistName: rg.artistCredit,
+                                                artistMBID: rg.artistMbid ?? '',
+                                            },
                                         },
                                     )}
                             >
@@ -2278,6 +2309,12 @@ export class ExploreView extends ViewLifecycleMixin(LitElement) implements Conte
                                         mbid: r.mbid,
                                         localId: r.localId,
                                         title: r.title,
+                                        goTo: {
+                                            artistName: r.artistCredit,
+                                            artistMBID: r.artistMbid ?? '',
+                                            albumName: r.releaseName ?? '',
+                                            albumMBID: r.releaseGroupMbid ?? '',
+                                        },
                                     })}
                                 @keydown=${(e: KeyboardEvent) =>
                                     this.onCardKeydown(
@@ -2288,6 +2325,12 @@ export class ExploreView extends ViewLifecycleMixin(LitElement) implements Conte
                                             mbid: r.mbid,
                                             localId: r.localId,
                                             title: r.title,
+                                            goTo: {
+                                                artistName: r.artistCredit,
+                                                artistMBID: r.artistMbid ?? '',
+                                                albumName: r.releaseName ?? '',
+                                                albumMBID: r.releaseGroupMbid ?? '',
+                                            },
                                         },
                                     )}
                             >

frontend/src/components/home-view/home-view.ts

@@ -166,7 +166,7 @@ export class HomeView extends ViewLifecycleMixin(LitElement) {
              * gated on the device having hover rather than on width.  A
              * touch long-press synthesises a hover state in the WebView,
              * so on a phone it flashed into view during the 500ms hold
-             * that utils/long-press.ts is measuring for a context menu —
+             * that utils/touch-gestures.ts is measuring for a long press —
              * a control appearing because you were reaching for a
              * different one.  A phone user taps the album and plays from
              * the detail view, so there is nothing to replace it with.

frontend/src/components/menu-surface/menu-surface.ts

@@ -155,10 +155,55 @@ export class MenuSurface extends LitElement {
            bottom was at y=452 on a 439px screen -- the one row a
            destructive action is most likely to be. The cap has to stay
            (a sheet covering the whole screen is a page, not a sheet),
-           so the body is what gives. */
+           so the body is what gives.
+
+           **And a body that scrolls says so** (#207). Scrolling was the
+           whole of the fix above, which left the last item reachable
+           and nothing on screen admitting it was there -- measured at
+           424x439, eight items ending at y=470 with the fold at 439,
+           and worse when the cut lands on a row boundary, where the
+           sheet ends in a clean edge that reads as the end of the list.
+
+           Two layers, and the *order* is what asks the question: a
+           shadow pinned to the bottom of the box (attachment scroll),
+           and over it a cover of the sheet's own colour painted at the
+           end of the *content* (attachment local), which therefore
+           scrolls up over the shadow and hides it exactly when there is
+           nothing more to see. So the affordance is absent on a menu
+           that fits, present the moment one does not, and gone again at
+           the end of the list -- with no scroll listener, no
+           measurement, and nothing reaching into wa-dialog's shadow
+           root for the scroller. background-attachment is Chrome 4;
+           the reference device is Chrome 113.
+
+           **The curve is steep because the rows under it stay live.**
+           A scrim over a menu item is that item's text surface, and
+           this app's rule is that text clears 4.5:1 on every surface it
+           can sit on -- which the light ramp, whose bgElevated is
+           #e9ecef, is what makes non-theoretical. A row is 48px with
+           its label centred, so 32px of scrim that is already down to
+           a quarter strength at 14px reaches y-centre at about 0.06 and
+           spends its weight on the strip below the last legible label.
+           Measured on the dark ramp at x=300, flat 52,58,64 throughout
+           before: 50,56,62 at y=330, 33,37,40 at y=350 and 22,24,27 at
+           the bottom edge, and flat again at the end of the list. The
+           light ramp puts 9.9:1 on the last label. */
         wa-dialog::part(body) {
             padding: 0;
             overflow-y: auto;
+            background:
+                linear-gradient(
+                        var(--yj-bg-elevated, #343a40),
+                        var(--yj-bg-elevated, #343a40)
+                    )
+                    bottom / 100% 32px no-repeat local,
+                linear-gradient(
+                        to top,
+                        rgba(0, 0, 0, 0.6) 0%,
+                        rgba(0, 0, 0, 0.25) 45%,
+                        rgba(0, 0, 0, 0) 100%
+                    )
+                    bottom / 100% 32px no-repeat scroll;
         }
 
         /* A sheet is dragged at with a thumb, so it says where its top

frontend/src/components/now-playing-view/now-playing-view.ts

@@ -420,11 +420,20 @@ export class NowPlayingView extends LitElement {
                         <h2 class="title" data-testid="npv-title">
                             ${track.title || track.fileName}
                         </h2>
+                        <!-- keepOnPhone: this screen is the phone's,
+                             and it has no context menu to carry the
+                             destination the way a row does (#67).
+                             Suppressing these takes the artist and the
+                             album away rather than moving them, and
+                             they are two lines of their own here
+                             rather than a few characters inside a
+                             row. -->
                         <p class="artist">
                             ${creditLink(
                                 creditStore.credits(track.recordingMbid),
                                 track.artist,
                                 track.artistMbid,
+                                { keepOnPhone: true },
                             )}
                         </p>
                         ${track.album
@@ -434,6 +443,7 @@ export class NowPlayingView extends LitElement {
                                       track.releaseGroupMbid,
                                       undefined,
                                       track.artist,
+                                      { keepOnPhone: true },
                                   )}
                               </p>`
                             : nothing}

frontend/src/components/playlist-details/playlist-details.ts

@@ -38,6 +38,10 @@ import {
 } from '@utils/context-menu-controller.js';
 import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller.js';
 import { focusRovingRow, nextRovingIndex } from '@utils/roving-rows';
+import type { GestureEvent } from '@utils/touch-gestures';
+import { SwipeToQueue, swipeRevealStyles } from '@utils/swipe-to-queue';
+import '@components/selection-bar/selection-bar';
+import type { SelectionAction } from '@components/selection-bar/selection-bar';
 import { FavoritesController } from '@store/controllers/favorites-controller';
 import { notificationStore } from '@store/notification-store';
 import { describeError } from '@utils/describe-error';
@@ -70,12 +74,17 @@ import {
     trackLink,
     exploreLinkStyles,
 } from '@utils/explore-link';
+import { goToMenuItems } from '@utils/go-to-menu';
+import type { GoToTarget } from '@utils/go-to-menu';
 import { designTokens } from '../../styles/tokens.css';
+import { srOnly } from '../../styles/sr-only.css';
 import { backButton } from '../../styles/back-button.css';
 import { list } from '@utils/binding';
 import {
+    ICON_PLAY,
     ICON_PLAYLIST,
     ICON_QUEUE,
+    ICON_REMOVE,
 } from '@utils/icon-language';
 
 /** One playlist row: the track and its position in the *playlist*,
@@ -422,6 +431,127 @@ export class PlaylistDetails
         queueStore.setQueue(filePaths, trackIndex, false, { type: 'playlist', id: this.playlistId, label: this.playlistName });
     }
 
+    // =================================================================
+    // A finger on a playlist row (plan 019 phase 3, #63)
+    // =================================================================
+
+    /** The row an announced gesture is on, with its track. */
+    private rowFromGesture(
+        e: Event,
+    ): { index: number; track: playlist.Track } | null {
+        const row = (e.target as HTMLElement).closest(
+            '.track-item',
+        ) as HTMLElement | null;
+
+        if (!row) return null;
+
+        const index = Number(row.dataset.index);
+        const track = this.tracks[index];
+
+        if (Number.isNaN(index) || !track) return null;
+
+        return { index, track };
+    }
+
+    /**
+     * A tap plays the playlist from that row.
+     *
+     * The same thing a double-click does, which is the rule the whole
+     * app follows: activating one row plays the list the row is in,
+     * from that row, rather than a queue of one that stops when the
+     * song ends.
+     */
+    private onRowTap = (e: GestureEvent) => {
+        const hit = this.rowFromGesture(e);
+
+        if (!hit) return;
+
+        if (this.selection.selectionMode) {
+            e.preventDefault();
+            this.focusedIndex = hit.index;
+            this.selection.toggleInMode(String(hit.index), hit.index);
+            this.virtualizer?.requestUpdate();
+
+            return;
+        }
+
+        // A missing file has nothing to play, so the tap is left
+        // unclaimed and falls through to the click that selects it --
+        // which is what a mouse does here and the only useful thing a
+        // phantom row can answer.
+        if (hit.track.Phantom) return;
+
+        e.preventDefault();
+        this.focusedIndex = hit.index;
+        this.handleTrackDblClick(hit.index);
+    };
+
+    private onRowLongPress = (e: GestureEvent) => {
+        const hit = this.rowFromGesture(e);
+
+        if (!hit) return;
+
+        e.preventDefault();
+        this.focusedIndex = hit.index;
+        this.selection.enterSelectionMode(String(hit.index), hit.index);
+        this.virtualizer?.requestUpdate();
+    };
+
+    /**
+     * Swipe a row right to queue it.
+     *
+     * `track-list`'s rule, one list over: one row is a position and
+     * several rows are an explicit choice, and a swipe never changes
+     * the selection it reads.
+     */
+    private swipe = new SwipeToQueue(this, {
+        resolve: (e) => {
+            const hit = this.rowFromGesture(e);
+
+            // A phantom has no file to queue, so there is nothing for
+            // the reveal to promise.
+            if (!hit || hit.track.Phantom) return null;
+
+            const selected = this.selection.getSelectedIndices();
+            const many =
+                selected.length > 1 && selected.includes(hit.index);
+            const filePaths = many
+                ? this.getSelectedFilePaths()
+                : [hit.track.FilePath];
+
+            return { index: hit.index, filePaths, label: hit.track.Title };
+        },
+        repaint: () => this.virtualizer?.requestUpdate(),
+    });
+
+    /** The three worth a thumb; the sheet behind "More" is the rest. */
+    private static readonly SELECTION_ACTIONS: SelectionAction[] = [
+        { id: 'play', label: 'Play', icon: ICON_PLAY },
+        { id: 'add-to-queue', label: 'Add to queue', icon: ICON_QUEUE },
+        { id: 'remove', label: 'Remove', icon: ICON_REMOVE, danger: true },
+    ];
+
+    private renderSelectionBar() {
+        if (!this.selection.selectionMode) return nothing;
+
+        return html`
+            <selection-bar
+                .count=${this.selection.selectionCount}
+                .actions=${PlaylistDetails.SELECTION_ACTIONS}
+                @selection-exit=${this.onSelectionExit}
+                @selection-action=${(e: CustomEvent<{ id: string }>) =>
+                this.onContextMenuAction(e.detail.id)}
+                @selection-more=${(e: CustomEvent<{ x: number; y: number }>) =>
+                this.ctxMenu.openAt(e.detail.x, e.detail.y)}
+            ></selection-bar>
+        `;
+    }
+
+    private onSelectionExit = () => {
+        this.selection.exitSelectionMode();
+        this.virtualizer?.requestUpdate();
+    };
+
     private handleTrackContextMenu(
         e: MouseEvent,
         trackIndex: number,
@@ -461,6 +591,28 @@ export class PlaylistDetails
             .map((i) => this.tracks[i]!.FilePath);
     }
 
+    /**
+     * The row "Go to Artist" / "Go to Album" navigate from — one row
+     * or none, and only below the phone breakpoint, where the row's
+     * own names stopped being links (#67).
+     */
+    private get goToTarget(): GoToTarget | undefined {
+        const indices = this.selection.getSelectedIndices();
+
+        if (indices.length !== 1) return undefined;
+
+        const track = this.tracks[indices[0]!];
+
+        if (!track) return undefined;
+
+        return {
+            artistName: track.Artist,
+            artistMBID: track.ArtistMBID,
+            albumName: track.Album,
+            albumMBID: track.ReleaseGroupMBID,
+        };
+    }
+
     // =================================================================
     // Context menu actions
     // =================================================================
@@ -955,9 +1107,11 @@ export class PlaylistDetails
 
     static override styles = [
         designTokens,
+        srOnly,
         backButton,
         contextMenuStyles,
         exploreLinkStyles,
+        swipeRevealStyles,
         css`
         :host {
             display: flex;
@@ -1136,6 +1290,9 @@ export class PlaylistDetails
         .track-item {
             width: 100%;
             box-sizing: border-box;
+            /* The swipe reveal is absolute inside the row. */
+            position: relative;
+            overflow: hidden;
         }
 
         .track-header {
@@ -1200,8 +1357,14 @@ export class PlaylistDetails
             user-select: none;
         }
 
-        .track-item:hover {
-            background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
+        /* A hover tint is for a device that hovers (#54). A hold
+           synthesises a hover in the WebView, so ungated this arrives
+           because a finger touched the row and stays after it has
+           gone; the press state below is what a tap gets instead. */
+        @media (hover: hover) and (pointer: fine) {
+            .track-item:hover {
+                background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
+            }
         }
 
         .track-item.selected {
@@ -1221,11 +1384,13 @@ export class PlaylistDetails
             cursor: pointer;
         }
 
-        .track-item.phantom:hover {
-            background-color: var(
-                --yj-hover-overlay,
-                rgba(255, 255, 255, 0.05)
-            );
+        @media (hover: hover) and (pointer: fine) {
+            .track-item.phantom:hover {
+                background-color: var(
+                    --yj-hover-overlay,
+                    rgba(255, 255, 255, 0.05)
+                );
+            }
         }
 
         .track-item.phantom.selected {
@@ -1235,6 +1400,19 @@ export class PlaylistDetails
             );
         }
 
+        /* The press state (#54): the feedback a tap has now that the
+           web view's own highlight box is gone (index.css). Last, and
+           carrying a class, because a selected or playing row is two
+           classes deep and a bare :active would lose to it. */
+        .track-item.selected:active,
+        .track-item.active:active,
+        .track-item:active {
+            background-color: var(
+                --yj-press-overlay,
+                rgba(255, 255, 255, 0.12)
+            );
+        }
+
         .phantom-row {
             grid-column: 1 / -1;
             display: flex;
@@ -1433,6 +1611,9 @@ export class PlaylistDetails
                 <div class="header-cell col-album">Album</div>
                 <div class="header-cell col-duration">Duration</div>
             </div>
+            <div class="sr-only" role="status" aria-live="polite">
+                ${this.swipe.announcement}
+            </div>
             <lit-virtualizer
                 class="track-scroller"
                 role="listbox"
@@ -1442,7 +1623,13 @@ export class PlaylistDetails
                 .renderItem=${this.renderRow}
                 .keyFunction=${this.rowKey}
                 .layout=${this.flowLayout}
+                @yj-tap=${this.onRowTap}
+                @yj-long-press=${this.onRowLongPress}
+                @yj-swipe-start=${this.swipe.onSwipeStart}
+                @yj-swipe-move=${this.swipe.onSwipeMove}
+                @yj-swipe-end=${this.swipe.onSwipeEnd}
             ></lit-virtualizer>
+            ${this.renderSelectionBar()}
         `;
     }
 
@@ -1464,6 +1651,7 @@ export class PlaylistDetails
                         active ? 'active' : '',
                         selected ? 'selected' : '',
                         isPhantom ? 'phantom' : '',
+                        this.swipe.isSwiping(trackIndex) ? 'swiping' : '',
                     ]
                         .filter(Boolean)
                         .join(' ');
@@ -1474,6 +1662,7 @@ export class PlaylistDetails
                             role="option"
                             aria-selected=${selected}
                             data-index=${trackIndex}
+                            data-swipe
                             tabindex=${trackIndex === this.focusedIndex ? 0 : -1}
                             @keydown=${(e: KeyboardEvent) =>
                                 this.onRowKeydown(e, trackIndex)}
@@ -1520,6 +1709,7 @@ export class PlaylistDetails
                                 ? nothing
                                 : this.onTrackDragEnd}
                         >
+                            ${this.swipe.renderReveal(trackIndex)}
                             ${isPhantom
                                 ? html`<div
                                       class="phantom-row"
@@ -1755,6 +1945,14 @@ export class PlaylistDetails
                                       Track
                                       Details
                                   </wa-dropdown-item>
+                                  ${goToMenuItems(this.goToTarget, {
+                                      onSelect: () => {
+                                          this.selection.clear();
+                                          this.ctxMenu.close();
+                                      },
+                                      onHover: () =>
+                                          this.ctxMenu.closePlaylistSubmenu(),
+                                  })}
                               </div>
                           `
                     : nothing}

frontend/src/components/queue-panel/queue-panel.ts

@@ -62,11 +62,18 @@ import {
     trackLink,
     exploreLinkStyles,
 } from '@utils/explore-link';
+import { goToMenuItems } from '@utils/go-to-menu';
+import type { GoToTarget } from '@utils/go-to-menu';
 import {
     ICON_NEW,
+    ICON_PLAY,
     ICON_PLAYLIST,
     ICON_QUEUE,
+    ICON_REMOVE,
 } from '@utils/icon-language';
+import type { GestureEvent } from '@utils/touch-gestures';
+import '@components/selection-bar/selection-bar';
+import type { SelectionAction } from '@components/selection-bar/selection-bar';
 /** Above this many tracks, clearing the queue asks first. */
 const CLEAR_CONFIRM_THRESHOLD = 20;
 
@@ -574,8 +581,14 @@ export class QueuePanel
             contain: strict;
         }
 
-        .track-item:hover {
-            background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
+        /* A hover tint is for a device that hovers (#54). A hold
+           synthesises a hover in the WebView, so ungated this arrives
+           because a finger touched the row and stays after it has
+           gone; the press state below is what a tap gets instead. */
+        @media (hover: hover) and (pointer: fine) {
+            .track-item:hover {
+                background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
+            }
         }
 
         .track-item.selected {
@@ -590,6 +603,19 @@ export class QueuePanel
             background-color: var(--yj-selection-bg, rgba(100, 160, 255, 0.15));
         }
 
+        /* The press state (#54): the feedback a tap has now that the
+           web view's own highlight box is gone (index.css). Last, and
+           carrying a class, because a selected or playing row is two
+           classes deep and a bare :active would lose to it. */
+        .track-item.selected:active,
+        .track-item.active:active,
+        .track-item:active {
+            background-color: var(
+                --yj-press-overlay,
+                rgba(255, 255, 255, 0.12)
+            );
+        }
+
         .track-position {
             font-size: var(--yj-text-sm);
             color: var(--yj-text-tertiary, #888);
@@ -844,6 +870,8 @@ export class QueuePanel
         virtEl.addEventListener('dragstart', this.onDelegatedDragStart);
         virtEl.addEventListener('dragend', this.onTrackDragEnd);
         virtEl.addEventListener('keydown', this.onDelegatedKeydown);
+        virtEl.addEventListener('yj-tap', this.onRowTap);
+        virtEl.addEventListener('yj-long-press', this.onRowLongPress);
         this.delegationAttached = true;
     }
 
@@ -962,6 +990,8 @@ export class QueuePanel
             virtEl.removeEventListener('dragstart', this.onDelegatedDragStart);
             virtEl.removeEventListener('dragend', this.onTrackDragEnd);
             virtEl.removeEventListener('keydown', this.onDelegatedKeydown);
+            virtEl.removeEventListener('yj-tap', this.onRowTap);
+            virtEl.removeEventListener('yj-long-press', this.onRowLongPress);
         }
         this.delegationAttached = false;
     }
@@ -1247,6 +1277,92 @@ export class QueuePanel
         this.queue.playAtIndex(index);
     }
 
+    // =================================================================
+    // A finger on a queue row (plan 019 phase 3, #63)
+    // =================================================================
+
+    /**
+     * A tap plays this position in the queue.
+     *
+     * `track-list`'s tap sets the queue to the list it was made in;
+     * copying that here would rebuild the queue from the queue, which
+     * is not the no-op it looks like -- it would discard the queue's
+     * source, its shuffle order and everything a user had inserted by
+     * hand. `playAtIndex` is what a double-click already does, and it
+     * is what a tap means.
+     */
+    private onRowTap = (e: GestureEvent) => {
+        const idx = this.resolveTrackIndexFromEvent(e);
+
+        if (idx === null) return;
+
+        // A control inside the row owns its own tap -- the same rule
+        // the shortcut service has for a focused control that owns a
+        // key. The remove button is the one here.
+        if ((e.target as HTMLElement).closest('.remove-button')) return;
+
+        e.preventDefault();
+
+        // The roving tab stop follows the finger, or Tab returns to
+        // wherever the arrows last were rather than to the row that was
+        // just touched.
+        this.focusedIndex = idx;
+
+        if (this.selection.selectionMode) {
+            this.selection.toggleInMode(String(idx), idx);
+            this.virtualizer?.requestUpdate();
+
+            return;
+        }
+
+        this.selection.clear();
+        this.queue.playAtIndex(idx);
+    };
+
+    private onRowLongPress = (e: GestureEvent) => {
+        const idx = this.resolveTrackIndexFromEvent(e);
+
+        if (idx === null) return;
+
+        e.preventDefault();
+        this.focusedIndex = idx;
+        this.selection.enterSelectionMode(String(idx), idx);
+        this.virtualizer?.requestUpdate();
+    };
+
+    /**
+     * The two worth a thumb, and "More" for the rest.
+     *
+     * Remove is here rather than left to the overflow because it is
+     * what a selection in a *queue* is most often made for, and it is
+     * the action the row's own × offers one row at a time.
+     */
+    private static readonly SELECTION_ACTIONS: SelectionAction[] = [
+        { id: 'play', label: 'Play', icon: ICON_PLAY },
+        { id: 'remove', label: 'Remove', icon: ICON_REMOVE, danger: true },
+    ];
+
+    private renderSelectionBar() {
+        if (!this.selection.selectionMode) return nothing;
+
+        return html`
+            <selection-bar
+                .count=${this.selection.selectionCount}
+                .actions=${QueuePanel.SELECTION_ACTIONS}
+                @selection-exit=${this.onSelectionExit}
+                @selection-action=${(e: CustomEvent<{ id: string }>) =>
+                this.onContextMenuAction(e.detail.id)}
+                @selection-more=${(e: CustomEvent<{ x: number; y: number }>) =>
+                this.ctxMenu.openAt(e.detail.x, e.detail.y)}
+            ></selection-bar>
+        `;
+    }
+
+    private onSelectionExit = () => {
+        this.selection.exitSelectionMode();
+        this.virtualizer?.requestUpdate();
+    };
+
     private handleTrackContextMenu(
         e: MouseEvent,
         index: number,
@@ -1529,6 +1645,29 @@ export class QueuePanel
             .map((i) => tracks[i]!.filePath);
     }
 
+    /**
+     * The row "Go to Artist" / "Go to Album" navigate from, which is
+     * one row or none — the rule the Play item already follows.  Both
+     * items are drawn only below the phone breakpoint, where the row's
+     * own names stopped being links (#67).
+     */
+    private get goToTarget(): GoToTarget | undefined {
+        const indices = this.selection.getSelectedIndices();
+
+        if (indices.length !== 1) return undefined;
+
+        const track = this.queue.tracks[indices[0]!];
+
+        if (!track) return undefined;
+
+        return {
+            artistName: track.artist,
+            artistMBID: track.artistMbid,
+            albumName: track.album,
+            albumMBID: track.releaseGroupMbid,
+        };
+    }
+
     // =================================================================
     // Drop target (tracks dropped into queue)
     // =================================================================
@@ -2157,6 +2296,7 @@ export class QueuePanel
                               ></lit-virtualizer>
                           `}
                 </div>
+                ${this.renderSelectionBar()}
             </div>
 
             <menu-surface
@@ -2245,6 +2385,14 @@ export class QueuePanel
                                   Track
                                   Details
                               </wa-dropdown-item>
+                              ${goToMenuItems(this.goToTarget, {
+                                  onSelect: () => {
+                                      this.selection.clear();
+                                      this.ctxMenu.close();
+                                  },
+                                  onHover: () =>
+                                      this.ctxMenu.closePlaylistSubmenu(),
+                              })}
                           </div>
                       `
                     : nothing}

frontend/src/components/selection-bar/selection-bar.ts

@@ -0,0 +1,218 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@awesome.me/webawesome/dist/components/icon/icon.js';
+import { designTokens } from '../../styles/tokens.css';
+import { ICON_MORE_ACTIONS } from '@utils/icon-language';
+
+/**
+ * What a selection can have done to it, while a finger is holding one.
+ *
+ * This is the context menu (plan 019, #63). Not a second surface
+ * beside it — the same actions, contextualised to whatever is
+ * selected, in the shape Android puts them in.
+ *
+ * #63 asked for a double tap to open the menu instead. That mapping
+ * costs the app's primary interaction 250ms on every play, because the
+ * first tap of a double tap is indistinguishable from a single tap
+ * until the interval expires, and playing a track is ~100ms end to end
+ * on the reference device. So there is no double tap: a long press
+ * selects, this says what can be done, and the sheet behind "More" is
+ * the same `menu-surface` every other menu in the app opens.
+ *
+ * Four things about it are load-bearing.
+ *
+ * **It is presentational.** It takes a count and a list of actions and
+ * emits `selection-action` / `selection-exit`; it holds no selection
+ * and calls no store. The host already owns a `SelectionController`
+ * and an action handler, and a bar that reached for either would be a
+ * second definition of what "play the selection" means — the fault
+ * `utils/library-status.ts` exists to have fixed one feature over.
+ *
+ * **The bar is only what fits, and "More" is the rest.** A context
+ * menu can be nine items because it is a sheet; a bar is one row on a
+ * 424px screen. So the host passes the two or three worth a thumb and
+ * the overflow opens the menu it already renders, which is what keeps
+ * every action reachable at every size — plan 018's promise, and the
+ * reason this cannot simply drop the long tail.
+ *
+ * **Its controls are 44px** (#56, #186), and the count is a live
+ * region: the number changes under the user's finger as they tap rows,
+ * and nothing else on screen announces it.
+ *
+ * **Escape leaves the mode, from here rather than from each host.**
+ * This element exists only while the mode does, so it is the one place
+ * a dismissal can be attached and detached with the thing it
+ * dismisses. It is the same exception the overlaid queue's Escape is.
+ *
+ * **It renders nothing at zero.** The mode ends when the last row is
+ * deselected — `SelectionController.toggleInMode` is where that is
+ * decided — so a bar with a count of none is a state this should never
+ * be asked to draw, and drawing it anyway would hide the fact that it
+ * has been.
+ */
+export interface SelectionAction {
+    id: string;
+    label: string;
+    icon: string;
+    danger?: boolean;
+}
+
+@customElement('selection-bar')
+export class SelectionBar extends LitElement {
+    static override styles = [
+        designTokens,
+        css`
+            :host {
+                display: block;
+            }
+
+            .bar {
+                display: flex;
+                align-items: center;
+                gap: 0.25em;
+                padding: 0.25em 0.5em;
+                background: var(--yj-bg-elevated, #343a40);
+                border-top: 1px solid var(--yj-border-subtle, #333);
+            }
+
+            .count {
+                flex: 1;
+                min-width: 0;
+                font-size: var(--yj-text-md);
+                font-weight: 600;
+                color: var(--yj-text-primary, #fff);
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            /* 44px, from #56 and #186 -- this is a bar a thumb uses. */
+            button {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                min-inline-size: 44px;
+                min-block-size: 44px;
+                padding: 0 0.5em;
+                border: none;
+                border-radius: 4px;
+                background: none;
+                color: var(--yj-text-primary, #fff);
+                font-family: inherit;
+                font-size: var(--yj-text-md);
+                cursor: pointer;
+            }
+
+            button:hover {
+                background: var(--yj-bg-overlay, #495057);
+            }
+
+            button.danger {
+                color: var(--yj-error-text, #ff8787);
+            }
+        `,
+    ];
+
+    /** How many items are selected. Zero renders nothing. */
+    @property({ type: Number }) count = 0;
+
+    /** The actions worth a thumb. The rest live behind "More". */
+    @property({ attribute: false }) actions: SelectionAction[] = [];
+
+    private emit(name: string, detail?: unknown) {
+        this.dispatchEvent(
+            new CustomEvent(name, { detail, bubbles: true, composed: true }),
+        );
+    }
+
+    /**
+     * Escape leaves the mode.
+     *
+     * A mode changes what a tap means, so it has to have an exit that
+     * is not "find the ×" -- and this is the documented exception to
+     * the app's one-keyboard-authority rule, on exactly the grounds
+     * the overlaid queue's Escape is: **it is a dismissal, not a
+     * shortcut**, so it is not a panel-scoped binding and it is
+     * attached only while there is something to dismiss. Putting it
+     * here rather than in each host is what gives all four surfaces
+     * the same answer, since this element exists only while the mode
+     * does.
+     *
+     * The platform's own back gesture is the other half of that and is
+     * deliberately *not* here: the shell owns the history stack
+     * (#6/#55), and a component reaching for `history` itself is how
+     * two stacks come to disagree about what one press means -- the
+     * fault that deleted `navStack`. See #200.
+     */
+    private onKeydown = (e: KeyboardEvent) => {
+        if (e.key !== 'Escape' || this.count <= 0) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+        this.emit('selection-exit');
+    };
+
+    override connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('keydown', this.onKeydown, true);
+    }
+
+    override disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this.onKeydown, true);
+    }
+
+    override render() {
+        if (this.count <= 0) return nothing;
+
+        const noun = this.count === 1 ? 'track' : 'tracks';
+
+        return html`
+            <div class="bar" role="toolbar" aria-label="Selection actions">
+                <button
+                    aria-label="Leave selection"
+                    @click=${() => this.emit('selection-exit')}
+                >
+                    <wa-icon name="xmark"></wa-icon>
+                </button>
+                <span class="count" role="status" aria-live="polite">
+                    ${this.count.toLocaleString()} ${noun} selected
+                </span>
+                ${this.actions.map(
+                    (action) => html`
+                        <button
+                            class=${action.danger ? 'danger' : ''}
+                            aria-label=${action.label}
+                            title=${action.label}
+                            @click=${() =>
+                                this.emit('selection-action', { id: action.id })}
+                        >
+                            <wa-icon name=${action.icon}></wa-icon>
+                        </button>
+                    `,
+                )}
+                <button
+                    aria-label="More actions"
+                    @click=${(e: MouseEvent) => {
+                        const box = (
+                            e.currentTarget as HTMLElement
+                        ).getBoundingClientRect();
+
+                        this.emit('selection-more', {
+                            x: box.left,
+                            y: box.top,
+                        });
+                    }}
+                >
+                    <wa-icon name=${ICON_MORE_ACTIONS}></wa-icon>
+                </button>
+            </div>
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'selection-bar': SelectionBar;
+    }
+}

frontend/src/components/sidebar/app-sidebar.ts

@@ -95,8 +95,15 @@ export class AppSidebar extends LitElement {
             text-align: center;
         }
 
-        li button:hover {
-            background-color: var(--yj-bg-elevated, #343a40);
+        /* A hover tint is for a device that hovers (#54), and this
+           component is on a phone too: below 600px it is what
+           bottom-nav's "More" sheet mounts, where a hold
+           synthesises a hover and leaves a destination looking picked
+           after the finger has gone. */
+        @media (hover: hover) and (pointer: fine) {
+            li button:hover {
+                background-color: var(--yj-bg-elevated, #343a40);
+            }
         }
 
         li button:focus-visible {
@@ -108,6 +115,14 @@ export class AppSidebar extends LitElement {
             background-color: var(--yj-bg-overlay, #495057);
         }
 
+        /* The press state (#54), after the .active rule and at the same
+           specificity, so pressing the destination you are already on
+           still says something. It is what a tap gets now that
+           index.css has taken the web view's own highlight box away. */
+        li button:active {
+            background-color: var(--yj-press-overlay, rgba(255, 255, 255, 0.12));
+        }
+
         li button p {
             margin: 0;
             white-space: nowrap;

frontend/src/components/smart-playlist-details/smart-playlist-details.ts

@@ -28,6 +28,10 @@ import {
 } from '@utils/context-menu-controller.js';
 import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller.js';
 import { focusRovingRow, nextRovingIndex } from '@utils/roving-rows';
+import type { GestureEvent } from '@utils/touch-gestures';
+import { SwipeToQueue, swipeRevealStyles } from '@utils/swipe-to-queue';
+import '@components/selection-bar/selection-bar';
+import type { SelectionAction } from '@components/selection-bar/selection-bar';
 import { FavoritesController } from '@store/controllers/favorites-controller';
 import {
     setDragPayload,
@@ -60,11 +64,16 @@ import {
     trackLink,
     exploreLinkStyles,
 } from '@utils/explore-link';
+import { goToMenuItems } from '@utils/go-to-menu';
+import type { GoToTarget } from '@utils/go-to-menu';
 import '@components/smart-playlist-editor/smart-playlist-editor.js';
 import { designTokens } from '../../styles/tokens.css';
 import { backButton } from '../../styles/back-button.css';
+import { srOnly } from '../../styles/sr-only.css';
 import { list } from '@utils/binding';
 import {
+    ICON_PLAY,
+    ICON_PLAY_NEXT,
     ICON_PLAYLIST,
     ICON_QUEUE,
     ICON_SMART_PLAYLIST,
@@ -243,9 +252,11 @@ export class SmartPlaylistDetails
 
     static override styles = [
         designTokens,
+        srOnly,
         backButton,
         contextMenuStyles,
         exploreLinkStyles,
+        swipeRevealStyles,
         css`
         :host {
             display: flex;
@@ -444,6 +455,9 @@ export class SmartPlaylistDetails
         .track-item {
             width: 100%;
             box-sizing: border-box;
+            /* The swipe reveal is absolute inside the row. */
+            position: relative;
+            overflow: hidden;
         }
 
         .track-header {
@@ -502,8 +516,14 @@ export class SmartPlaylistDetails
             user-select: none;
         }
 
-        .track-item:hover {
-            background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
+        /* A hover tint is for a device that hovers (#54). A hold
+           synthesises a hover in the WebView, so ungated this arrives
+           because a finger touched the row and stays after it has
+           gone; the press state below is what a tap gets instead. */
+        @media (hover: hover) and (pointer: fine) {
+            .track-item:hover {
+                background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
+            }
         }
 
         .track-item.selected {
@@ -519,6 +539,19 @@ export class SmartPlaylistDetails
             background-color: var(--yj-selection-bg, rgba(100, 160, 255, 0.15));
         }
 
+        /* The press state (#54): the feedback a tap has now that the
+           web view's own highlight box is gone (index.css). Last, and
+           carrying a class, because a selected or playing row is two
+           classes deep and a bare :active would lose to it. */
+        .track-item.selected:active,
+        .track-item.active:active,
+        .track-item:active {
+            background-color: var(
+                --yj-press-overlay,
+                rgba(255, 255, 255, 0.12)
+            );
+        }
+
         /* Phantom rows span the full grid */
         .track-item.phantom {
             display: grid;
@@ -916,10 +949,136 @@ export class SmartPlaylistDetails
             .map((i) => this.tracks[i]!.FilePath);
     }
 
+    /**
+     * The row "Go to Artist" / "Go to Album" navigate from — one row
+     * or none, and only below the phone breakpoint, where the row's
+     * own names stopped being links (#67).
+     */
+    private get goToTarget(): GoToTarget | undefined {
+        const indices = this.selection.getSelectedIndices();
+
+        if (indices.length !== 1) return undefined;
+
+        const track = this.tracks[indices[0]!];
+
+        if (!track) return undefined;
+
+        return {
+            artistName: track.Artist,
+            artistMBID: track.ArtistMBID,
+            albumName: track.Album,
+            albumMBID: track.ReleaseGroupMBID,
+        };
+    }
+
     // =================================================================
     // Context menu actions
     // =================================================================
 
+    // =================================================================
+    // A finger on a smart playlist row (plan 019 phase 3, #63)
+    // =================================================================
+
+    /** The row an announced gesture is on, with its track. */
+    private rowFromGesture(
+        e: Event,
+    ): { index: number; track: playlist.Track } | null {
+        const row = (e.target as HTMLElement).closest(
+            '.track-item',
+        ) as HTMLElement | null;
+
+        if (!row) return null;
+
+        const index = Number(row.dataset.index);
+        const track = this.tracks[index];
+
+        if (Number.isNaN(index) || !track) return null;
+
+        return { index, track };
+    }
+
+    /** A tap plays the playlist from that row -- `playlist-details`'
+     *  rule, and the app's: activating a row plays the list it is in. */
+    private onRowTap = (e: GestureEvent) => {
+        const hit = this.rowFromGesture(e);
+
+        if (!hit) return;
+
+        if (this.selection.selectionMode) {
+            e.preventDefault();
+            this.focusedIndex = hit.index;
+            this.selection.toggleInMode(String(hit.index), hit.index);
+            this.virtualizer?.requestUpdate();
+
+            return;
+        }
+
+        // A missing file has nothing to play, so the tap falls through
+        // to the click that selects it.
+        if (hit.track.Phantom) return;
+
+        e.preventDefault();
+        this.focusedIndex = hit.index;
+        this.handleTrackDblClick(hit.index);
+    };
+
+    private onRowLongPress = (e: GestureEvent) => {
+        const hit = this.rowFromGesture(e);
+
+        if (!hit) return;
+
+        e.preventDefault();
+        this.focusedIndex = hit.index;
+        this.selection.enterSelectionMode(String(hit.index), hit.index);
+        this.virtualizer?.requestUpdate();
+    };
+
+    private swipe = new SwipeToQueue(this, {
+        resolve: (e) => {
+            const hit = this.rowFromGesture(e);
+
+            if (!hit || hit.track.Phantom) return null;
+
+            const selected = this.selection.getSelectedIndices();
+            const many =
+                selected.length > 1 && selected.includes(hit.index);
+            const filePaths = many
+                ? this.getSelectedFilePaths()
+                : [hit.track.FilePath];
+
+            return { index: hit.index, filePaths, label: hit.track.Title };
+        },
+        repaint: () => this.virtualizer?.requestUpdate(),
+    });
+
+    /** The three worth a thumb; the sheet behind "More" is the rest. */
+    private static readonly SELECTION_ACTIONS: SelectionAction[] = [
+        { id: 'play', label: 'Play', icon: ICON_PLAY },
+        { id: 'add-to-queue', label: 'Add to queue', icon: ICON_QUEUE },
+        { id: 'play-next', label: 'Play next', icon: ICON_PLAY_NEXT },
+    ];
+
+    private renderSelectionBar() {
+        if (!this.selection.selectionMode) return nothing;
+
+        return html`
+            <selection-bar
+                .count=${this.selection.selectionCount}
+                .actions=${SmartPlaylistDetails.SELECTION_ACTIONS}
+                @selection-exit=${this.onSelectionExit}
+                @selection-action=${(e: CustomEvent<{ id: string }>) =>
+                this.onContextMenuAction(e.detail.id)}
+                @selection-more=${(e: CustomEvent<{ x: number; y: number }>) =>
+                this.ctxMenu.openAt(e.detail.x, e.detail.y)}
+            ></selection-bar>
+        `;
+    }
+
+    private onSelectionExit = () => {
+        this.selection.exitSelectionMode();
+        this.virtualizer?.requestUpdate();
+    };
+
     private onContextMenuAction(action: string) {
         const filePaths = this.getSelectedFilePaths();
 
@@ -1334,6 +1493,9 @@ export class SmartPlaylistDetails
                 <div class="header-cell col-album">Album</div>
                 <div class="header-cell col-duration">Duration</div>
             </div>
+            <div class="sr-only" role="status" aria-live="polite">
+                ${this.swipe.announcement}
+            </div>
             <lit-virtualizer
                 role="listbox"
                 aria-label="Smart playlist tracks"
@@ -1342,7 +1504,13 @@ export class SmartPlaylistDetails
                 .renderItem=${this.renderRow}
                 .keyFunction=${this.rowKey}
                 .layout=${this.flowLayout}
+                @yj-tap=${this.onRowTap}
+                @yj-long-press=${this.onRowLongPress}
+                @yj-swipe-start=${this.swipe.onSwipeStart}
+                @yj-swipe-move=${this.swipe.onSwipeMove}
+                @yj-swipe-end=${this.swipe.onSwipeEnd}
             ></lit-virtualizer>
+            ${this.renderSelectionBar()}
         `;
     }
 
@@ -1364,6 +1532,7 @@ export class SmartPlaylistDetails
                         active ? 'active' : '',
                         selected ? 'selected' : '',
                         isPhantom ? 'phantom' : '',
+                        this.swipe.isSwiping(trackIndex) ? 'swiping' : '',
                     ]
                         .filter(Boolean)
                         .join(' ');
@@ -1374,6 +1543,7 @@ export class SmartPlaylistDetails
                             role="option"
                             aria-selected=${selected}
                             data-index=${trackIndex}
+                            data-swipe
                             tabindex=${trackIndex === this.focusedIndex ? 0 : -1}
                             @keydown=${(e: KeyboardEvent) =>
                                 this.onRowKeydown(e, trackIndex)}
@@ -1408,6 +1578,7 @@ export class SmartPlaylistDetails
                                 ? nothing
                                 : this.onTrackDragEnd}
                         >
+                            ${this.swipe.renderReveal(trackIndex)}
                             ${isPhantom
                                 ? html`<div class="phantom-row">
                                       <wa-icon
@@ -1555,6 +1726,14 @@ export class SmartPlaylistDetails
                                   ></wa-icon>
                                   Track Details
                               </wa-dropdown-item>
+                              ${goToMenuItems(this.goToTarget, {
+                                  onSelect: () => {
+                                      this.selection.clear();
+                                      this.ctxMenu.close();
+                                  },
+                                  onHover: () =>
+                                      this.ctxMenu.closePlaylistSubmenu(),
+                              })}
                           </div>
                       `
                     : nothing}

frontend/src/components/top-results-row/top-results-row.ts

@@ -371,8 +371,11 @@ export class TopResultsRow extends LitElement {
                         <span class="card-name">${r.name}</span>
                         ${artistPart || metaPart
                             ? html`<span class="card-subtitle"
-                                  >${artistPart
-                                      ? creditLink(creditStore.credits(r.mbid), artistPart, r.artistMbid ?? '')
+                                  ><!-- keepOnPhone: this card has no
+                                       context menu, so the credit is
+                                       the only route to the artist of
+                                       a top result (#67). -->${artistPart
+                                      ? creditLink(creditStore.credits(r.mbid), artistPart, r.artistMbid ?? '', { keepOnPhone: true })
                                       : nothing}${artistPart && metaPart
                                       ? ' · '
                                       : ''}${metaPart}</span

frontend/src/components/track-list/track-list.ts

@@ -10,6 +10,10 @@ import {
 } from 'lit/decorators.js';
 import { SelectionController } from '@utils/selection-controller';
 import type { SelectionHost } from '@utils/selection-controller';
+import type { GestureEvent } from '@utils/touch-gestures';
+import { SwipeToQueue, swipeRevealStyles } from '@utils/swipe-to-queue';
+import '@components/selection-bar/selection-bar';
+import type { SelectionAction } from '@components/selection-bar/selection-bar';
 import { ViewLifecycleMixin } from '@utils/view-lifecycle';
 import { PHONE_QUERY } from '@utils/breakpoints';
 import {
@@ -47,6 +51,8 @@ import {
     trackLink,
     exploreLinkStyles,
 } from '@utils/explore-link';
+import { goToMenuItems } from '@utils/go-to-menu';
+import type { GoToTarget } from '@utils/go-to-menu';
 import {
     setDragPayload,
     emitDragActive,
@@ -77,7 +83,9 @@ import '@components/playlist-picker/playlist-picker.js';
 import type { TrackDetails } from '@components/track-details/track-details.js';
 import type { CoverArtUrls } from '@components/track-details/track-details.js';
 import {
+    ICON_PLAY,
     ICON_PLAYLIST,
+    ICON_PLAY_NEXT,
     ICON_QUEUE,
 } from '@utils/icon-language';
 
@@ -277,6 +285,29 @@ export class TrackList
      *  path into it at all (H-5). */
     @state() private focusedIndex = 0;
 
+    /**
+     * Swipe a row right to queue it (plan 019 phase 2, #63).
+     *
+     * The affordance and the arithmetic are `utils/swipe-to-queue.ts`,
+     * shared with both playlist detail views; what stays here is what
+     * only this list knows -- which row an event is on, and what a
+     * swipe on it means when other rows are selected.
+     */
+    private swipe = new SwipeToQueue(this, {
+        resolve: (e) => {
+            const hit = this.resolveTrackFromEvent(e);
+
+            if (!hit) return null;
+
+            return {
+                index: hit.index,
+                filePaths: this.swipeTargetKeys(hit.track.FilePath),
+                label: hit.track.TrackName,
+            };
+        },
+        repaint: () => this.virtualizer?.requestUpdate(),
+    });
+
     private handleSelectAll = (): void => {
         this.selection.selectAll();
     };
@@ -1011,7 +1042,7 @@ export class TrackList
         this.requestUpdate();
     };
 
-    static override styles = [designTokens, srOnly, contextMenuStyles, exploreLinkStyles, css`
+    static override styles = [designTokens, srOnly, contextMenuStyles, exploreLinkStyles, swipeRevealStyles, css`
     :host {
       display: flex;
       flex-direction: column;
@@ -1170,8 +1201,16 @@ export class TrackList
       padding-left: 6px;
     }
 
-    .track-row:hover {
-      background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
+    /* A hover tint is for a device that hovers (#54): a hold
+       synthesises a hover in the WebView, so ungated this is a
+       highlight that arrives because a finger touched the row and
+       then stays there after it has gone -- which reads as a
+       selection the user did not make. Same gate, and the same
+       mechanism, as #68's revealed controls. */
+    @media (hover: hover) and (pointer: fine) {
+      .track-row:hover {
+        background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
+      }
     }
 
     .track-row.selected {
@@ -1208,6 +1247,24 @@ export class TrackList
       background-color: var(--yj-selection-bg, rgba(100, 160, 255, 0.15));
     }
 
+    /* The press state (#54), and the only feedback a tap has now that
+       the web view's tap highlight is gone (index.css).
+
+       **Last, and as specific as the state rules above**: a row that
+       is selected and playing is .track-row.selected.active, so a
+       bare .track-row:active is one class short of it and a press
+       on the row a phone is most likely to press -- the one it just
+       selected -- would show nothing. Instant rather than
+       transitioned, because the only measured statement here about
+       transitions on a list is that two card grids removed theirs
+       for software-rendering repaint cost. */
+    .track-row.selected:active,
+    .track-row.active:active,
+    .track-row:active {
+      background-color: var(--yj-press-overlay, rgba(255, 255, 255, 0.12));
+    }
+
+
     .cell {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -1304,6 +1361,11 @@ export class TrackList
             virt.removeEventListener('click', this.onDelegatedClick);
             virt.removeEventListener('dblclick', this.onDelegatedDblClick);
             virt.removeEventListener('contextmenu', this.onDelegatedContextMenu);
+            virt.removeEventListener('yj-tap', this.onRowTap);
+            virt.removeEventListener('yj-long-press', this.onRowLongPress);
+            virt.removeEventListener('yj-swipe-start', this.swipe.onSwipeStart);
+            virt.removeEventListener('yj-swipe-move', this.swipe.onSwipeMove);
+            virt.removeEventListener('yj-swipe-end', this.swipe.onSwipeEnd);
             virt.removeEventListener('dragstart', this.onDelegatedDragStart);
             virt.removeEventListener('dragend', this.onTrackDragEnd);
         }
@@ -1445,6 +1507,14 @@ export class TrackList
         virt.addEventListener('contextmenu', this.onDelegatedContextMenu);
         virt.addEventListener('dragstart', this.onDelegatedDragStart);
         virt.addEventListener('dragend', this.onTrackDragEnd);
+        // Delegated like the rest: the gesture layer dispatches on the
+        // element the finger landed on, composed, so it arrives here
+        // through the same path a real click takes (plan 019).
+        virt.addEventListener('yj-tap', this.onRowTap);
+        virt.addEventListener('yj-long-press', this.onRowLongPress);
+        virt.addEventListener('yj-swipe-start', this.swipe.onSwipeStart);
+        virt.addEventListener('yj-swipe-move', this.swipe.onSwipeMove);
+        virt.addEventListener('yj-swipe-end', this.swipe.onSwipeEnd);
         this.delegationAttached = true;
     }
 
@@ -1708,6 +1778,86 @@ export class TrackList
         if (hit) this.onTrackContextMenu(e, hit.track);
     };
 
+    /**
+     * A finger tapped a row (plan 019, #63).
+     *
+     * On a desktop a click selects and a double-click plays; a finger
+     * inverts that, because there is no second button and no modifier
+     * key, so the primary action has to be the primary gesture.
+     *
+     * Claiming the gesture (`preventDefault`) is what tells the layer
+     * to swallow the click behind it -- otherwise playing a track
+     * would also select it, and the row would end up in both states.
+     * A tap this does *not* claim falls through as an ordinary click,
+     * which is what keeps the favourite icon working.
+     */
+    private onRowTap = (e: GestureEvent) => {
+        const hit = this.resolveTrackFromEvent(e);
+
+        if (!hit) return;
+
+        // A control inside the row owns its own tap. The same rule the
+        // shortcut service has for a focused control that owns a key,
+        // and without it the 44px favourite target (#56) becomes a
+        // 44px play target.
+        if ((e.target as HTMLElement).closest('.fav-icon')) return;
+
+        e.preventDefault();
+        this.focusedIndex = hit.index;
+
+        if (this.selection.selectionMode) {
+            this.selection.toggleInMode(hit.track.FilePath, hit.index);
+            this.virtualizer?.requestUpdate();
+
+            return;
+        }
+
+        this.playFromRow(hit.index);
+    };
+
+    /**
+     * A finger held a row still for half a second.
+     *
+     * Claiming this is what makes it *selection mode* rather than the
+     * context menu it has been since plan 016 -- an unclaimed
+     * `yj-long-press` still becomes a `contextmenu`, which is how the
+     * card grids and Explore keep the behaviour they have.
+     */
+    private onRowLongPress = (e: GestureEvent) => {
+        const hit = this.resolveTrackFromEvent(e);
+
+        if (!hit) return;
+
+        e.preventDefault();
+        this.focusedIndex = hit.index;
+        this.selection.enterSelectionMode(hit.track.FilePath, hit.index);
+        this.virtualizer?.requestUpdate();
+    };
+
+    /**
+     * What a swipe on this row would queue.
+     *
+     * The same rule the context menu answers with, and it has to be:
+     * **one row is a position, several rows are an explicit choice.**
+     * A finger that swipes a row which is part of a selection of forty
+     * has not un-made that selection, and queueing the one row it
+     * touched would quietly contradict the bar above saying forty are
+     * selected. A swipe on a row *outside* the selection is a statement
+     * about that row, exactly as a right-click on one is -- and unlike
+     * a right-click it does not move the selection, because a swipe is
+     * not a way of selecting anything.
+     */
+    private swipeTargetKeys(filePath: string): string[] {
+        if (
+            this.selection.selectionCount > 1 &&
+            this.selection.isSelected(filePath)
+        ) {
+            return this.selection.getSelectedKeysOrdered();
+        }
+
+        return [filePath];
+    }
+
     private onDelegatedDragStart = (e: DragEvent) => {
         const hit = this.resolveTrackFromEvent(e);
 
@@ -1831,6 +1981,33 @@ export class TrackList
         emitDragActive(false);
     };
 
+    /**
+     * The row the menu can navigate from, for "Go to Artist" / "Go to
+     * Album" — which exist only below the phone breakpoint, where the
+     * row's own names are no longer links (#67).
+     *
+     * One row only, on the rule the Play item already states: one row
+     * is a position, several are an explicit choice of *those* tracks,
+     * and "go to the album" of five different albums means nothing.
+     */
+    private get goToTarget(): GoToTarget | undefined {
+        if (this.selection.selectionCount !== 1) return undefined;
+
+        const [path] = this.selection.selectedItems;
+        const track = path
+            ? tracksByFilePath(this.tracks).get(path)
+            : undefined;
+
+        if (!track) return undefined;
+
+        return {
+            artistName: track.ArtistName,
+            artistMBID: track.ArtistMBID,
+            albumName: track.Album,
+            albumMBID: track.ReleaseGroupMBID,
+        };
+    }
+
     private onContextMenuAction(action: string) {
         const filePaths =
             this.selection.getSelectedKeysOrdered();
@@ -2129,6 +2306,7 @@ export class TrackList
             'track-row': true,
             active,
             selected,
+            swiping: this.swipe.isSwiping(index),
         })}
         role="row"
         aria-rowindex=${index + 1}
@@ -2138,8 +2316,10 @@ export class TrackList
         draggable="true"
         data-index=${index}
         data-testid="track-row"
+        data-swipe
         data-file-path=${track.FilePath}
       >
+        ${this.swipe.renderReveal(index)}
         <div
           role="gridcell"
           class=${classMap({
@@ -2238,6 +2418,45 @@ export class TrackList
         this.saveSortPreferences();
     };
 
+    /**
+     * The three worth a thumb. Everything else is behind "More",
+     * which opens the context menu this list already renders.
+     *
+     * A bar is one row on a 424px screen and the menu is nine items,
+     * so this is a subset by necessity rather than a second opinion
+     * about what matters -- and plan 018's promise that no action is
+     * unreachable is kept by the overflow, not by this list.
+     */
+    private static readonly SELECTION_ACTIONS: SelectionAction[] = [
+        { id: 'play', label: 'Play', icon: ICON_PLAY },
+        { id: 'add-to-queue', label: 'Add to queue', icon: ICON_QUEUE },
+        { id: 'play-next', label: 'Play next', icon: ICON_PLAY_NEXT },
+    ];
+
+    private renderSelectionBar() {
+        // Only in selection mode: a mouse selection is modeless and
+        // shows its actions on right-click, which is where a desktop
+        // user looks for them.
+        if (!this.selection.selectionMode) return nothing;
+
+        return html`
+            <selection-bar
+                .count=${this.selection.selectionCount}
+                .actions=${TrackList.SELECTION_ACTIONS}
+                @selection-exit=${this.onSelectionExit}
+                @selection-action=${(e: CustomEvent<{ id: string }>) =>
+                    this.onContextMenuAction(e.detail.id)}
+                @selection-more=${(e: CustomEvent<{ x: number; y: number }>) =>
+                    this.ctxMenu.openAt(e.detail.x, e.detail.y)}
+            ></selection-bar>
+        `;
+    }
+
+    private onSelectionExit = () => {
+        this.selection.exitSelectionMode();
+        this.virtualizer?.requestUpdate();
+    };
+
     override render() {
         const visibleTracks = this.cachedSortedTracks;
         const cols = this.activeColumns;
@@ -2247,6 +2466,9 @@ export class TrackList
       <div class="sr-only" role="status" aria-live="polite">
         ${this.liveStatus(visibleTracks.length)}
       </div>
+      <div class="sr-only" role="status" aria-live="polite">
+        ${this.swipe.announcement}
+      </div>
       ${this.tracks.length === 0
                 ? this.renderPlaceholder()
                 : html`
@@ -2322,6 +2544,7 @@ export class TrackList
                     )}
       </div>
             </div>
+            ${this.renderSelectionBar()}
           `}
 
       <menu-surface
@@ -2394,6 +2617,13 @@ export class TrackList
                     ></wa-icon>
                     Track Details
                 </wa-dropdown-item>
+                ${goToMenuItems(this.goToTarget, {
+                    onSelect: () => {
+                        this.selection.clear();
+                        this.ctxMenu.close();
+                    },
+                    onHover: () => this.ctxMenu.closePlaylistSubmenu(),
+                })}
                 <wa-dropdown-item
                     @click=${() =>
                         this.onContextMenuAction(

frontend/src/store/theme-store.ts

@@ -46,6 +46,17 @@ export interface ShadePalette {
     border: string;
     borderSubtle: string;
     hoverOverlay: string;
+    /**
+     * The tint a surface takes while it is being pressed (#54).
+     *
+     * Separate from `hoverOverlay` because the two answer different
+     * questions and only one of them a phone can ask: a hover is a
+     * pointer resting somewhere, a press is a finger on the thing it
+     * is about to activate. It is deliberately the stronger of the
+     * two — a press that reads the same as a hover says nothing on a
+     * device where the hover is synthesised by the press itself.
+     */
+    pressOverlay: string;
     selectionBg: string;
 }
 
@@ -95,6 +106,7 @@ export const SHADE_PALETTES: Record<BackgroundShade, ShadePalette> = {
         border: '#333333',
         borderSubtle: '#222222',
         hoverOverlay: 'rgba(255, 255, 255, 0.05)',
+        pressOverlay: 'rgba(255, 255, 255, 0.12)',
         selectionBg: 'rgba(100, 160, 255, 0.15)',
     },
     dark: {
@@ -114,6 +126,7 @@ export const SHADE_PALETTES: Record<BackgroundShade, ShadePalette> = {
         border: '#444444',
         borderSubtle: '#333333',
         hoverOverlay: 'rgba(255, 255, 255, 0.05)',
+        pressOverlay: 'rgba(255, 255, 255, 0.12)',
         selectionBg: 'rgba(100, 160, 255, 0.15)',
     },
     light: {
@@ -133,6 +146,7 @@ export const SHADE_PALETTES: Record<BackgroundShade, ShadePalette> = {
         border: '#ced4da',
         borderSubtle: '#dee2e6',
         hoverOverlay: 'rgba(0, 0, 0, 0.05)',
+        pressOverlay: 'rgba(0, 0, 0, 0.12)',
         selectionBg: 'rgba(100, 160, 255, 0.15)',
     },
 };
@@ -285,6 +299,7 @@ function deriveThemeVariables(
 
         // Interactive overlays
         '--yj-hover-overlay': palette.hoverOverlay,
+        '--yj-press-overlay': palette.pressOverlay,
         '--yj-selection-bg': palette.selectionBg,
 
         // Semantic *fills* — the background of a solid button or badge.

frontend/src/utils/context-menu-controller.ts

@@ -710,10 +710,35 @@ export const contextMenuStyles = css`
         font-size: 13px;
     }
 
-    .context-menu-panel wa-dropdown-item:hover {
+    /* A hover tint is for a device that hovers (#54).
+
+       Below the query is a phone, where a hold *synthesises* a hover
+       in the WebView -- the same mechanism #68 gates the revealed
+       controls on -- so an ungated tint is a highlight that arrives
+       because a finger touched the row and then stays on it after the
+       finger has gone. Which is indistinguishable from the press
+       state below, and outlives it. */
+    @media (hover: hover) and (pointer: fine) {
+        .context-menu-panel wa-dropdown-item:hover {
+            background-color: var(
+                --yj-hover-overlay,
+                rgba(255, 255, 255, 0.1)
+            );
+        }
+    }
+
+    /* And a press state is for every device, because it is the one
+       piece of feedback a tap has now that the web view's own
+       highlight box is gone (index.css). Stronger than the hover tint
+       on purpose, and instant rather than transitioned: the only
+       measured statement this repo has about transitions on these
+       surfaces is the two card grids that removed theirs because
+       software rendering repaints per frame, and the phone is not
+       something this session can measure. */
+    .context-menu-panel wa-dropdown-item:active {
         background-color: var(
-            --yj-hover-overlay,
-            rgba(255, 255, 255, 0.1)
+            --yj-press-overlay,
+            rgba(255, 255, 255, 0.12)
         );
     }
 

frontend/src/utils/explore-link.ts

@@ -13,11 +13,35 @@
  * bug, not as a statement about metadata.  The only case that still
  * renders as text is one we genuinely cannot route (no name at all, or
  * nothing in the library by that name).
+ *
+ * ## Below the phone breakpoint a name is not a link (#67)
+ *
+ * A few characters of text inside a row is not a touch target, and the
+ * click handling below is explicitly a *desktop* compromise: the
+ * navigation is held for one double-click interval so double-clicking
+ * the row can still play it, which means nothing at all on touch.  On
+ * a phone the row's own gesture wins anyway — a claimed `yj-tap` has
+ * its click swallowed by `utils/touch-gestures.ts`, so the link was
+ * unreachable as well as fiddly.
+ *
+ * So the rule lives here rather than at twenty call sites, which is
+ * what the Findings on #67 ask for: a name renders as plain text below
+ * `PHONE_QUERY`, and the row's context menu carries "Go to Artist" /
+ * "Go to Album" in its place (`goToMenuItems`).
+ *
+ * The exception is `keepOnPhone`, and it is not a preference.  Three
+ * surfaces render a name with **no menu to carry the destination** —
+ * `now-playing-view`, `explore-album-details`' header credit and
+ * `top-results-row` — so suppressing the link there takes the action
+ * away entirely rather than moving it, which is what plan 018's "no
+ * action is unreachable at any supported size" refuses.  Each of those
+ * call sites says so.
  */
 
 import { html, css } from 'lit';
 import type { TemplateResult } from 'lit';
 import { libraryStore } from '../store/library-store';
+import { PHONE_QUERY } from './breakpoints';
 
 /** Shared CSS for explore link styling. Import into component styles. */
 export const exploreLinkStyles = css`
@@ -32,6 +56,57 @@ export const exploreLinkStyles = css`
     }
 `;
 
+/**
+ * Options every link function takes, for the one case that is not the
+ * default.
+ */
+export interface LinkOptions {
+    /**
+     * Keep the name navigable at phone width.
+     *
+     * For a surface with no context menu to carry the destination —
+     * see the header of this file.  A row must not pass it: the row's
+     * tap already means "play", and the menu is where the destination
+     * went.
+     */
+    keepOnPhone?: boolean;
+}
+
+/**
+ * The live phone breakpoint, made once and read per link.
+ *
+ * A `MediaQueryList` is live, so one object answers for the life of
+ * the page and a resize needs nothing from here.  The identity check
+ * is the test seam: this tier's viewport is fixed by the runner, so a
+ * spec answers the query by replacing `window.matchMedia` (the same
+ * stub `now-playing-phone.test.ts` installs), and swapping the
+ * function is what tells us to ask again.
+ */
+let phoneQuery: MediaQueryList | undefined;
+let phoneQuerySource: typeof window.matchMedia | undefined;
+
+/**
+ * Whether an inline name still navigates.
+ *
+ * Exported because the menus that carry the destination in its place
+ * are drawn under exactly the same condition -- one answer, not two.
+ */
+export function inlineLinksSuppressed(): boolean {
+    if (!window.matchMedia) return false;
+
+    if (phoneQuerySource !== window.matchMedia) {
+        phoneQuerySource = window.matchMedia;
+        phoneQuery = window.matchMedia(PHONE_QUERY);
+    }
+
+    return phoneQuery?.matches ?? false;
+}
+
+/** Whether this call site should render plain text rather than a link. */
+function plainText(options?: LinkOptions): boolean {
+    return !options?.keepOnPhone && inlineLinksSuppressed();
+}
+
 /** Fire a navigate event from the clicked element. */
 function navigate(target: EventTarget, detail: Record<string, unknown>): void {
     target.dispatchEvent(
@@ -153,39 +228,19 @@ function singleClick(
  * @param mbid - The MusicBrainz artist ID.  Empty string = local only.
  * @param content - Optional custom content to render inside the link
  *                  (e.g. highlighted search result).  Defaults to artistName.
+ * @param options - See `LinkOptions`.
  */
 export function artistLink(
     artistName: string,
     mbid: string,
     content?: TemplateResult | string,
+    options?: LinkOptions,
 ): TemplateResult | string {
     if (!artistName) return artistName;
+    if (plainText(options)) return content ?? artistName;
 
     const onClick = singleClick((target) => {
-        void (async () => {
-            if (mbid) {
-                navigate(target, {
-                    view: 'explore-artist-details',
-                    artistMBID: mbid,
-                    artistName,
-                });
-
-                return;
-            }
-
-            const local = await findLocalArtist(artistName);
-            if (!local) return;
-
-            // The caller's row had no MBID, but the library row for the
-            // same artist may — the grid routes by exactly this field,
-            // so reading it here is what keeps the two paths agreeing.
-            navigate(target, {
-                view: 'explore-artist-details',
-                artistMBID: local.MBID || '',
-                artistName,
-                localArtistId: local.ID,
-            });
-        })();
+        void openArtistPage(target, artistName, mbid);
     });
 
     return html`<a
@@ -203,19 +258,22 @@ export function artistLink(
  * @param mbid - The MusicBrainz release group ID.  Empty = local only.
  * @param content - Optional custom content to render inside the link.
  * @param artistName - Disambiguates same-named albums in the library.
+ * @param options - See `LinkOptions`.
  */
 export function albumLink(
     albumName: string,
     mbid: string,
     content?: TemplateResult | string,
     artistName?: string,
+    options?: LinkOptions,
 ): TemplateResult | string {
     if (!albumName) return albumName;
+    if (plainText(options)) return content ?? albumName;
 
     return html`<a
         class="explore-link"
         @click=${singleClick((target) => {
-            void openAlbum(target, albumName, mbid, artistName);
+            void openAlbumPage(target, albumName, mbid, artistName);
         })}
         title=${mbid ? 'View album on Explore' : 'View album in your library'}
     >${content ?? albumName}</a>`;
@@ -232,6 +290,7 @@ export function albumLink(
  * @param recordingMBID - The track's MusicBrainz recording ID.
  * @param content - Optional custom content (e.g. highlighted text).
  * @param artistName - Disambiguates same-named albums in the library.
+ * @param options - See `LinkOptions`.
  */
 export function trackLink(
     trackName: string,
@@ -240,14 +299,16 @@ export function trackLink(
     recordingMBID: string,
     content?: TemplateResult | string,
     artistName?: string,
+    options?: LinkOptions,
 ): TemplateResult | string {
     if (!trackName) return trackName;
     if (!albumName) return content ?? trackName;
+    if (plainText(options)) return content ?? trackName;
 
     return html`<a
         class="explore-link"
         @click=${singleClick((target) => {
-            void openAlbum(
+            void openAlbumPage(
                 target,
                 albumName,
                 releaseGroupMBID,
@@ -262,11 +323,48 @@ export function trackLink(
     >${content ?? trackName}</a>`;
 }
 
+/**
+ * Route to an artist page, preferring the catalog and falling back to
+ * the library copy.
+ *
+ * Exported because a menu item goes to the same place a name does, and
+ * two routings of "go to this artist" is how the two come to disagree
+ * about an untagged one.
+ */
+export async function openArtistPage(
+    target: EventTarget,
+    artistName: string,
+    mbid: string,
+): Promise<void> {
+    if (mbid) {
+        navigate(target, {
+            view: 'explore-artist-details',
+            artistMBID: mbid,
+            artistName,
+        });
+
+        return;
+    }
+
+    const local = await findLocalArtist(artistName);
+    if (!local) return;
+
+    // The caller's row had no MBID, but the library row for the
+    // same artist may — the grid routes by exactly this field,
+    // so reading it here is what keeps the two paths agreeing.
+    navigate(target, {
+        view: 'explore-artist-details',
+        artistMBID: local.MBID || '',
+        artistName,
+        localArtistId: local.ID,
+    });
+}
+
 /**
  * Route to an album page, preferring the catalog and falling back to
  * the library copy.  `highlight*` marks one track on arrival.
  */
-async function openAlbum(
+export async function openAlbumPage(
     target: EventTarget,
     albumName: string,
     releaseGroupMBID: string,
@@ -337,23 +435,31 @@ export interface CreditPart {
  * @param parts - The credit's parts in position order, if known.
  * @param fallbackName - The credit as a single string.
  * @param fallbackMbid - The primary artist's MBID.
+ * @param options - See `LinkOptions`.
  */
 export function creditLink(
     parts: readonly CreditPart[] | undefined,
     fallbackName: string,
     fallbackMbid: string,
+    options?: LinkOptions,
 ): TemplateResult | string {
     // One part is one link, so it is the fallback rather than a special
     // case — and a zero-part credit reaching here would otherwise
     // render as nothing at all, which is worse than the single-artist
     // answer it replaced.
     if (!parts || parts.length < 2) {
-        return artistLink(fallbackName, fallbackMbid);
+        return artistLink(fallbackName, fallbackMbid, undefined, options);
     }
 
+    // A decomposed credit is rendered from the same parts either way,
+    // so the join phrases survive the suppression and the text reads
+    // as it did — which is `creditText`'s job, and it is the string
+    // the `title=` beside these already uses.
+    if (plainText(options)) return creditText(parts, fallbackName);
+
     return html`${parts.map(
         (part) =>
-            html`${artistLink(part.creditedName, part.artistMbid)}${part.joinPhrase}`,
+            html`${artistLink(part.creditedName, part.artistMbid, undefined, options)}${part.joinPhrase}`,
     )}`;
 }
 

frontend/src/utils/go-to-menu.ts

@@ -0,0 +1,109 @@
+/**
+ * "Go to Artist" / "Go to Album", for the menus that carry a name the
+ * phone stopped drawing as a link (#67).
+ *
+ * `utils/explore-link.ts` renders a plain string below the phone
+ * breakpoint, because a few characters inside a row is not a touch
+ * target and the row's own tap already means "play".  That takes a
+ * destination away, so the row's context menu gives it back — which is
+ * the whole of this issue: the navigation moves, it does not go.
+ *
+ * Three things about it are load-bearing.
+ *
+ * **It is drawn under exactly the condition the link is not.**
+ * `inlineLinksSuppressed()` answers both, so a desktop menu is
+ * untouched (the name beside it is still a link, and a menu that
+ * repeats what the row already offers is furniture) and a phone menu
+ * cannot be missing what the row lost.
+ *
+ * **It goes where the name went.** `openArtistPage` / `openAlbumPage`
+ * are `explore-link`'s own routing, exported rather than reimplemented,
+ * so an untagged artist reaches the library page here for the same
+ * reason and by the same lookup it does from a link.
+ *
+ * **The host says when it is over**, through `onSelect` — every menu in
+ * this app closes itself and most clear their selection, and both are
+ * the host's bookkeeping rather than something a shared item may do on
+ * its behalf.  `onHover` is for the four hosts with a playlist submenu,
+ * which closes on any other item being pointed at.
+ */
+
+import { html, nothing } from 'lit';
+import type { TemplateResult } from 'lit';
+
+import { inlineLinksSuppressed, openArtistPage, openAlbumPage } from './explore-link';
+
+/**
+ * The entities one row or card can send you to.
+ *
+ * Everything is optional because the hosts differ: a track row knows
+ * both, an album card knows only its artist, and an artist page's own
+ * tracklist knows only the album.
+ */
+export interface GoToTarget {
+    artistName?: string;
+    artistMBID?: string;
+    albumName?: string;
+    albumMBID?: string;
+}
+
+export interface GoToHandlers {
+    /** Called before navigating: close the menu, clear the selection. */
+    onSelect?: () => void;
+    /** Called on hover: close a playlist submenu, where the host has one. */
+    onHover?: () => void;
+}
+
+/**
+ * The menu items for a target, or nothing at all where the name beside
+ * them is still a link.
+ */
+export function goToMenuItems(
+    target: GoToTarget | undefined,
+    handlers: GoToHandlers = {},
+): TemplateResult | typeof nothing {
+    if (!target || !inlineLinksSuppressed()) return nothing;
+
+    const artist = target.artistName?.trim();
+    const album = target.albumName?.trim();
+
+    if (!artist && !album) return nothing;
+
+    return html`
+        ${artist
+            ? html`<wa-dropdown-item
+                  data-testid="go-to-artist"
+                  @click=${(e: Event) => {
+                      handlers.onSelect?.();
+                      void openArtistPage(
+                          e.currentTarget as EventTarget,
+                          artist,
+                          target.artistMBID ?? '',
+                      );
+                  }}
+                  @mouseenter=${() => handlers.onHover?.()}
+              >
+                  <wa-icon slot="icon" name="user-group"></wa-icon>
+                  Go to Artist
+              </wa-dropdown-item>`
+            : nothing}
+        ${album
+            ? html`<wa-dropdown-item
+                  data-testid="go-to-album"
+                  @click=${(e: Event) => {
+                      handlers.onSelect?.();
+                      void openAlbumPage(
+                          e.currentTarget as EventTarget,
+                          album,
+                          target.albumMBID ?? '',
+                          artist,
+                      );
+                  }}
+                  @mouseenter=${() => handlers.onHover?.()}
+              >
+                  <wa-icon slot="icon" name="compact-disc"></wa-icon>
+                  Go to Album
+              </wa-dropdown-item>`
+            : nothing}
+    `;
+}

frontend/src/utils/long-press.ts

@@ -1,201 +0,0 @@
-/**
- * Long-press as the touch equivalent of a right-click (plan 016 B2,
- * phase 3).
- *
- * Every context menu in the app opens from a `contextmenu` event —
- * `track-list` and `queue-panel` delegate one on their virtualizer,
- * the card grids and both playlist detail views bind one per row, and
- * `explore-artist-details` binds three. A phone has no right-click, so
- * a phone reached none of them.
- *
- * **This is one document listener, not six components' worth of touch
- * handling.** A press that stays still for `LONG_PRESS_MS` dispatches a
- * synthetic `contextmenu` at the touch point on the element the touch
- * actually landed on, and every existing handler — delegated or
- * per-row, in any shadow root — runs unchanged. Six implementations of
- * a gesture is exactly the fault `ContextMenuController` exists to
- * prevent, and a seam that needs no component to opt in cannot be
- * forgotten by the next component.
- *
- * Three things about it are load-bearing.
- *
- * **The target comes from `composedPath()[0]`, not from
- * `elementFromPoint`**, which stops at the outermost shadow host: every
- * menu in this app is bound inside one, so a synthetic event dispatched
- * on the host reaches a delegated listener and no per-row one.
- *
- * **A browser that already does this must win.** Chromium fires a
- * `contextmenu` on long-press itself; WebKitGTK and the Android WebView
- * vary. So one arriving during the press cancels ours, and one arriving
- * just after ours is swallowed at document capture — where nothing else
- * has seen it yet. The two are told apart by **identity** (a `WeakSet`
- * of the events this module made) rather than by `isTrusted`, so the
- * suppressor cannot eat the event it exists to deliver, the rule holds
- * for anything else in the app that synthesises one, and a test can
- * stand in for a browser that fires its own.
- *
- * **The click that ends the gesture is swallowed.** A row's click
- * selects, and a card's plays; without this, opening a menu also
- * activates the thing under it. It is keyed on the gesture (cleared by
- * the next `pointerdown`) rather than on a time window, so a quick tap
- * on the menu that just opened is not eaten too.
- */
-
-/** How long a press must hold still to mean "menu". */
-export const LONG_PRESS_MS = 500;
-
-/**
- * How far a press may drift and still count. Below a finger's own
- * jitter is a gesture nobody can perform; above ~12px it starts
- * stealing the first frames of a scroll.
- */
-export const MOVE_TOLERANCE_PX = 10;
-
-/** The active installation, so a second call is a no-op rather than a
- *  second listener set. */
-let uninstall: (() => void) | null = null;
-
-/** The events this module dispatched. Identity, not `isTrusted`: see
- *  the note above. */
-const ours = new WeakSet<Event>();
-
-/**
- * Install the gesture. Idempotent; returns the uninstaller (which the
- * tests use — the app installs once and never removes it).
- */
-export function installLongPressContextMenu(): () => void {
-    if (uninstall) return uninstall;
-
-    let timer: ReturnType<typeof setTimeout> | null = null;
-    let originX = 0;
-    let originY = 0;
-    let target: EventTarget | null = null;
-
-    /** A trusted `contextmenu` arrived for this press: the browser has
-     *  it covered. */
-    let nativeSeen = false;
-
-    /** We opened a menu, and the click ending that gesture is not a
-     *  click on anything. */
-    let swallowClick = false;
-
-    /** We dispatched one, so a trusted one arriving now is a duplicate. */
-    let justFired = false;
-
-    const cancel = (): void => {
-        if (timer !== null) clearTimeout(timer);
-
-        timer = null;
-        target = null;
-    };
-
-    const fire = (): void => {
-        timer = null;
-
-        const el = target;
-
-        target = null;
-
-        if (nativeSeen || !el) return;
-
-        justFired = true;
-        swallowClick = true;
-
-        const menu = new MouseEvent('contextmenu', {
-            bubbles: true,
-            cancelable: true,
-            // Or it stops at the shadow root the row lives in, and the
-            // delegated listeners never see it.
-            composed: true,
-            clientX: originX,
-            clientY: originY,
-            button: 2,
-        });
-
-        ours.add(menu);
-        el.dispatchEvent(menu);
-    };
-
-    const onPointerDown = (e: PointerEvent): void => {
-        // A new gesture: whatever the last one left behind is stale.
-        swallowClick = false;
-        justFired = false;
-        nativeSeen = false;
-        cancel();
-
-        if (e.pointerType !== 'touch' || !e.isPrimary) return;
-
-        originX = e.clientX;
-        originY = e.clientY;
-        target = e.composedPath()[0] ?? e.target;
-        timer = setTimeout(fire, LONG_PRESS_MS);
-    };
-
-    const onPointerMove = (e: PointerEvent): void => {
-        if (timer === null) return;
-
-        const drifted =
-            Math.abs(e.clientX - originX) > MOVE_TOLERANCE_PX ||
-            Math.abs(e.clientY - originY) > MOVE_TOLERANCE_PX;
-
-        if (drifted) cancel();
-    };
-
-    const onContextMenu = (e: Event): void => {
-        // Ours. Everything below is about somebody else's.
-        if (ours.has(e)) return;
-
-        if (timer !== null) {
-            // The browser got there first, so stand down rather than
-            // opening the same menu twice.
-            nativeSeen = true;
-            cancel();
-
-            return;
-        }
-
-        if (justFired) {
-            justFired = false;
-            e.preventDefault();
-            e.stopImmediatePropagation();
-        }
-    };
-
-    const onClick = (e: Event): void => {
-        if (!swallowClick) return;
-
-        swallowClick = false;
-        e.preventDefault();
-        e.stopImmediatePropagation();
-    };
-
-    // Capture throughout: a component handler that stops propagation
-    // (every context-menu handler in the app does) must not be able to
-    // hide the gesture from this, and the suppressors have to run
-    // before anything that would act on the event.
-    const opts = { capture: true } as const;
-
-    document.addEventListener('pointerdown', onPointerDown, opts);
-    document.addEventListener('pointermove', onPointerMove, opts);
-    document.addEventListener('pointerup', cancel, opts);
-    document.addEventListener('pointercancel', cancel, opts);
-    document.addEventListener('contextmenu', onContextMenu, opts);
-    document.addEventListener('click', onClick, opts);
-    // A scroll started by something other than the finger (momentum, a
-    // programmatic reveal) still means the press was not a press.
-    document.addEventListener('scroll', cancel, { capture: true, passive: true });
-
-    uninstall = () => {
-        cancel();
-        document.removeEventListener('pointerdown', onPointerDown, opts);
-        document.removeEventListener('pointermove', onPointerMove, opts);
-        document.removeEventListener('pointerup', cancel, opts);
-        document.removeEventListener('pointercancel', cancel, opts);
-        document.removeEventListener('contextmenu', onContextMenu, opts);
-        document.removeEventListener('click', onClick, opts);
-        document.removeEventListener('scroll', cancel, opts);
-        uninstall = null;
-    };
-
-    return uninstall;
-}

frontend/src/utils/selection-controller.ts

@@ -19,6 +19,29 @@ export class SelectionController implements ReactiveController {
     private host: SelectionHost;
     private _selectedItems: Set<string> = new Set();
     private lastSelectedIndex: number | null = null;
+    private _mode = false;
+
+    /**
+     * Whether the list is in *selection mode* (plan 019, #63).
+     *
+     * A finger has no modifier keys, so the ctrl/shift semantics this
+     * controller was written for cannot be expressed by touch at all.
+     * Selection mode is the platform's answer: a long press enters it,
+     * and while it is on, a tap toggles a row instead of playing it.
+     *
+     * It is a flag *here* rather than a fifth concept beside the
+     * controller because all four surfaces that select
+     * (`track-list`, `queue-panel` and both playlist detail views)
+     * already share this class -- so "is this list selecting" has one
+     * answer per list, in the object that already owns the selection
+     * it would otherwise contradict.
+     *
+     * A mouse never sets it. Desktop selection is unchanged and stays
+     * modeless, which is what `handleItemClick` still implements.
+     */
+    get selectionMode(): boolean {
+        return this._mode;
+    }
 
     constructor(host: SelectionHost) {
         this.host = host;
@@ -136,8 +159,64 @@ export class SelectionController implements ReactiveController {
         return true;
     }
 
+    /**
+     * Enter selection mode with `key` selected.
+     *
+     * The row the gesture was made on is selected, rather than the
+     * mode opening empty: a long press is a statement about *that*
+     * row, and an action bar with nothing in it is a mode the user has
+     * to make a second gesture to escape.
+     */
+    enterSelectionMode(key: string, index: number): void {
+        this._mode = true;
+        this._selectedItems = new Set([key]);
+        this.lastSelectedIndex = index;
+        this.host.requestUpdate();
+        this.host.onSelectionChanged?.();
+    }
+
+    /**
+     * Toggle one row, and leave the mode when the last one goes.
+     *
+     * Deselecting everything is how Android's own list surfaces exit
+     * selection mode, and it matters more here than convention: the
+     * mode changes what a tap *means*, so a mode with an empty
+     * selection is a list where tapping does nothing and nothing on
+     * screen says why.
+     */
+    toggleInMode(key: string, index: number): void {
+        const next = new Set(this._selectedItems);
+
+        if (next.has(key)) next.delete(key);
+        else next.add(key);
+
+        this._selectedItems = next;
+        this.lastSelectedIndex = index;
+
+        if (next.size === 0) this._mode = false;
+
+        this.host.requestUpdate();
+        this.host.onSelectionChanged?.();
+    }
+
+    /** Leave selection mode, dropping the selection with it. */
+    exitSelectionMode(): void {
+        if (!this._mode && this._selectedItems.size === 0) return;
+
+        this._mode = false;
+        this._selectedItems = new Set();
+        this.lastSelectedIndex = null;
+        this.host.requestUpdate();
+        this.host.onSelectionChanged?.();
+    }
+
     /** Clear the entire selection. */
     clear(): void {
+        // The mode goes with it: every caller of this means "the
+        // selection is no longer meaningful", and a mode outliving the
+        // selection it was showing is the empty-mode trap above.
+        this._mode = false;
+
         if (this._selectedItems.size === 0) return;
 
         this._selectedItems = new Set();
@@ -176,6 +255,13 @@ export class SelectionController implements ReactiveController {
         if (next.size === this._selectedItems.size) return;
 
         this._selectedItems = next;
+
+        // A refetch that emptied the selection also ends the mode --
+        // otherwise removing the last selected track from the library
+        // leaves the list in a state where a tap selects and the bar
+        // is gone.
+        if (next.size === 0) this._mode = false;
+
         this.host.requestUpdate();
         this.host.onSelectionChanged?.();
     }

frontend/src/utils/swipe-to-queue.ts

@@ -0,0 +1,362 @@
+import { css, html, nothing } from 'lit';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+
+import { queueStore } from '@store/queue-store';
+import { ICON_QUEUE } from '@utils/icon-language';
+import type { SwipeEvent } from '@utils/touch-gestures';
+
+/**
+ * Swipe a row right to add it to the queue (plan 019, #63).
+ *
+ * This is the *affordance* and the arithmetic, written once, because
+ * three lists want it: `track-list` and both playlist detail views.
+ * It was `track-list`'s own for one phase and is here rather than
+ * copied twice, on the rule the rest of this app is built on — three
+ * copies of "how far is far enough" is three chances for them to
+ * disagree, which is what `utils/library-status.ts` and
+ * `utils/ownership.ts` each exist to have stopped happening.
+ *
+ * The host keeps three things: what a row *is*, what a swipe on it
+ * would queue, and what to call it afterwards. Everything else —
+ * the threshold, the reveal, the settle, the announcement, the
+ * repaint — is here.
+ *
+ * **The queue panel deliberately does not use it.** A right swipe means
+ * *add to the queue* everywhere it exists, and a queue row is already
+ * in the queue; the only thing it could sensibly mean there is
+ * *remove*, which is the same gesture with the opposite effect one
+ * screen away. Removing a queue row is on its own row (the ×), on its
+ * bottom sheet since #60, and on the selection bar #63 gave it.
+ *
+ * Five things about it are load-bearing.
+ *
+ * **Both halves of the device fix are here or next door.**
+ * `swipeRevealStyles` carries `touch-action: pan-y` on `[data-swipe]`,
+ * and `utils/touch-gestures.ts` carries the non-passive
+ * `preventDefault`. Chrome 113's WebView cancels the pointer stream
+ * ~16px into any drag whatever `touch-action` says, and with the
+ * `preventDefault` alone but `touch-action` at `auto` the gesture dies
+ * after one move. Neither works without the other and **both are
+ * correct in Chromium either way**, which is why the component tier
+ * asserts the stylesheet rather than the rendering.
+ *
+ * **The row does not move; its cells do.** A row here is
+ * `contain: strict` with `overflow: hidden`, so translating the row
+ * and counter-translating a pane inside it puts that pane at a
+ * negative offset inside a clipping box, where it is simply not
+ * painted. Sliding the children instead leaves the pane where it was
+ * drawn, clips the cells off the right edge, and needs no wrapper
+ * element in a row that is already a grid.
+ *
+ * **The travel is written to the row's own style, never rendered.**
+ * One render when the gesture starts, one when it crosses the
+ * threshold, one when it ends — a virtualizer re-rendering every
+ * visible row per frame of one finger's travel is exactly what audit
+ * `perf.m1` is about.
+ *
+ * **The threshold is a fraction of the row**, with a floor. The row is
+ * 424x52 on the reference device, so a threshold in bare pixels is a
+ * fraction of a row height on one screen and a third of the width on
+ * the next.
+ *
+ * **It is not only a colour** (WCAG 1.4.1, the rule the playing-row
+ * marker exists for). The pane carries the queue icon and words, the
+ * words change at the threshold, and the outcome goes to a live
+ * region — one glyph throughout, because a tick is `ICON_IN_LIBRARY`
+ * and means *you own this*.
+ */
+
+/** How far along the row a swipe has to reach to mean it. */
+export const SWIPE_COMMIT_FRACTION = 0.3;
+
+/** … and a floor, for a narrow list embedded in a detail page. */
+export const SWIPE_COMMIT_MIN_PX = 72;
+
+/** How long the reveal holds its confirmation before snapping back. */
+const CONFIRM_MS = 550;
+
+/** The snap itself. `swipeRevealStyles` states the same number. */
+const SETTLE_MS = 180;
+
+/** What a swipe on one row would do, as the host understands it. */
+export interface SwipeTarget {
+    /** Which row draws the reveal. */
+    index: number;
+
+    /** The file paths a commit queues, in the order they are shown. */
+    filePaths: string[];
+
+    /** What to call a single track when saying it was added. */
+    label: string;
+}
+
+export interface SwipeToQueueOptions {
+    /**
+     * The row the gesture is on, or null for anything that is not a
+     * swipeable row — a header, a gap, a track with no file.
+     */
+    resolve(e: SwipeEvent): SwipeTarget | null;
+
+    /**
+     * Repaint the rows. A `<lit-virtualizer>` renders through the
+     * `virtualize` directive and reacts to its *own* properties, so a
+     * host update alone leaves the rows exactly as they were.
+     */
+    repaint(): void;
+}
+
+export class SwipeToQueue implements ReactiveController {
+    private host: ReactiveControllerHost;
+    private opts: SwipeToQueueOptions;
+
+    /** Which row is being swiped, and therefore draws a reveal. */
+    private index: number | null = null;
+
+    /** Past the commit threshold: the reveal says so, in words. */
+    private armed = false;
+
+    /** Committed, and holding its confirmation. */
+    private done = false;
+
+    private row: HTMLElement | null = null;
+    private keys: string[] = [];
+    private commitPx = 0;
+    private settleTimer = 0;
+
+    /** What the gesture did, for anyone not watching the row. */
+    announcement = '';
+
+    constructor(host: ReactiveControllerHost, opts: SwipeToQueueOptions) {
+        this.host = host;
+        this.opts = opts;
+        host.addController(this);
+    }
+
+    hostConnected(): void {
+        // No-op; state is component-local.
+    }
+
+    hostDisconnected(): void {
+        window.clearTimeout(this.settleTimer);
+        this.forget();
+    }
+
+    /** Whether this row is the one under the finger. */
+    isSwiping(index: number): boolean {
+        return this.index === index;
+    }
+
+    onSwipeStart = (e: SwipeEvent): void => {
+        // Rightward only. Nothing is bound to a leftward swipe, and
+        // claiming one would take a gesture away to do nothing with it.
+        if (e.detail.dx <= 0) return;
+
+        const target = this.opts.resolve(e);
+
+        if (!target || target.filePaths.length === 0) return;
+
+        const row = (e.target as HTMLElement).closest(
+            '[data-swipe]',
+        ) as HTMLElement | null;
+
+        if (!row) return;
+
+        e.preventDefault();
+
+        this.row = row;
+        this.keys = target.filePaths;
+        this.trackLabel = target.label;
+        this.commitPx = Math.max(
+            SWIPE_COMMIT_MIN_PX,
+            row.getBoundingClientRect().width * SWIPE_COMMIT_FRACTION,
+        );
+        this.armed = false;
+        this.done = false;
+        this.index = target.index;
+        this.host.requestUpdate();
+        this.opts.repaint();
+        this.offset(0);
+    };
+
+    onSwipeMove = (e: SwipeEvent): void => {
+        if (this.index === null) return;
+
+        const dx = Math.min(Math.max(e.detail.dx, 0), this.commitPx * 2);
+        const armed = dx >= this.commitPx;
+
+        if (armed !== this.armed) {
+            this.armed = armed;
+            this.host.requestUpdate();
+            this.opts.repaint();
+        }
+
+        this.offset(dx);
+    };
+
+    onSwipeEnd = (e: SwipeEvent): void => {
+        if (this.index === null) return;
+
+        if (e.detail.canceled || e.detail.dx < this.commitPx) {
+            this.settle(0);
+
+            return;
+        }
+
+        queueStore.addTracksToQueue(this.keys);
+
+        const count = this.keys.length;
+
+        // The reveal is the only thing on screen that says this
+        // happened -- the queue panel may well be closed -- so it holds
+        // its confirmation for a moment rather than vanishing the
+        // instant the finger lifts.
+        this.done = true;
+        this.announcement =
+            count === 1
+                ? `Added ${this.label()} to the queue.`
+                : `Added ${count} tracks to the queue.`;
+        this.host.requestUpdate();
+        this.opts.repaint();
+        this.settle(CONFIRM_MS);
+    };
+
+    /** What is revealed behind the row, in three states. */
+    renderReveal(index: number) {
+        if (this.index !== index) return nothing;
+
+        const count = this.keys.length;
+        const what = count === 1 ? 'to queue' : `${count} tracks to queue`;
+        const words = this.done
+            ? 'Added'
+            : this.armed
+                ? 'Release to add'
+                : `Add ${what}`;
+
+        return html`
+            <div
+                class=${classMap({ 'swipe-reveal': true, armed: this.armed })}
+                aria-hidden="true"
+                data-testid="swipe-reveal"
+            >
+                <wa-icon name=${ICON_QUEUE}></wa-icon>
+                <span>${words}</span>
+            </div>
+        `;
+    }
+
+    /**
+     * What to call a single track, taken when the gesture starts.
+     *
+     * Held rather than looked up at the end, because a swipe outlives
+     * a refetch: the store replaces its array when a play count
+     * changes, which is once a song.
+     */
+    private trackLabel = '';
+
+    private label(): string {
+        return this.trackLabel === '' ? 'the track' : this.trackLabel;
+    }
+
+    /** Write the travel to the row itself, with no render. */
+    private offset(dx: number): void {
+        this.row?.style.setProperty('--yj-swipe-dx', `${dx}px`);
+    }
+
+    /**
+     * Put the row back, after `delay`, and forget the swipe.
+     *
+     * The row element is held rather than looked up again: a
+     * virtualizer recycles its rows, and by the time this runs the
+     * element may be drawing a different track. Clearing the property
+     * off whatever it holds now is right either way, since `index` is
+     * what decides who draws the reveal.
+     */
+    private settle(delay: number): void {
+        const row = this.row;
+
+        window.clearTimeout(this.settleTimer);
+
+        this.settleTimer = window.setTimeout(() => {
+            row?.classList.add('settling');
+            this.offset(0);
+
+            this.settleTimer = window.setTimeout(() => {
+                row?.classList.remove('settling');
+                row?.style.removeProperty('--yj-swipe-dx');
+                this.forget();
+                this.host.requestUpdate();
+                this.opts.repaint();
+            }, SETTLE_MS);
+        }, delay);
+    }
+
+    private forget(): void {
+        this.row = null;
+        this.index = null;
+        this.armed = false;
+        this.done = false;
+    }
+}
+
+/**
+ * The reveal, and the `touch-action` half of what makes the gesture
+ * reach us on the device.
+ *
+ * Keyed on `[data-swipe]` rather than on a class name, so one
+ * stylesheet serves three lists whose rows are called three different
+ * things.
+ */
+export const swipeRevealStyles = css`
+    /* Half of what makes the gesture reach us on Chrome 113's WebView:
+       auto lets it commit to a horizontal pan on the first move past
+       slop, and the pointer stream is cancelled before any threshold
+       can be crossed. The other half is the non-passive preventDefault
+       in utils/touch-gestures.ts, and neither works alone -- both were
+       measured three ways on the phone. Never none: that takes the
+       list's own vertical scrolling with it. */
+    [data-swipe] {
+        touch-action: pan-y;
+    }
+
+    .swipe-reveal {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: var(--yj-swipe-dx, 0px);
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        gap: 0.4em;
+        padding-left: 8px;
+        overflow: hidden;
+        white-space: nowrap;
+        pointer-events: none;
+        font-size: var(--yj-text-xs);
+        background-color: var(--yj-bg-elevated, #343a40);
+        color: var(--yj-text-secondary, #b3b3b3);
+    }
+
+    .swipe-reveal.armed {
+        background-color: var(--yj-success, #2f9e44);
+        color: var(--yj-success-fg, #fff);
+    }
+
+    /* The children move, not the row -- see the header. */
+    [data-swipe].swiping > :not(.swipe-reveal) {
+        transform: translateX(var(--yj-swipe-dx, 0px));
+    }
+
+    [data-swipe].settling > * {
+        transition:
+            transform 160ms ease-out,
+            width 160ms ease-out;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-swipe].settling > * {
+            transition: none;
+        }
+    }
+`;

frontend/src/utils/touch-gestures.ts

@@ -0,0 +1,619 @@
+/**
+ * The touch gestures, as one document listener (plan 019, #63).
+ *
+ * This replaces `utils/long-press.ts` rather than sitting beside it,
+ * and that is the point: two document listeners both claiming the
+ * 500ms hold is exactly the fault that file's own header warns about.
+ * What it did — one capture listener, the target from
+ * `composedPath()[0]`, the browser's own gesture winning, the trailing
+ * click swallowed — is kept whole. What changes is what the gesture
+ * *means*.
+ *
+ * **A gesture is announced, not acted on.** Two composed, cancelable
+ * events are dispatched on the element the finger actually landed on:
+ *
+ *   `yj-tap`         a short press that did not drift
+ *   `yj-long-press`  a press that held still for LONG_PRESS_MS
+ *   `yj-swipe-start` a press that has travelled decisively sideways
+ *
+ * A claimed swipe is then followed by `yj-swipe-move` and one
+ * `yj-swipe-end`, which is guaranteed: a swipe that the browser or a
+ * second finger takes away still ends, with `canceled` set, so the
+ * affordance a component put on screen always has something to snap
+ * back from.
+ *
+ * A component that wants the gesture handles it and calls
+ * `preventDefault()`. Nothing else changes. That shape is what lets
+ * this reassign the hold without touching a single one of the fourteen
+ * context menus downstream of it: **an unclaimed `yj-long-press` still
+ * becomes a synthetic `contextmenu`**, so a card grid, an Explore
+ * result or a playlist row behaves exactly as it did, and only the
+ * lists that opt in get selection mode.
+ *
+ * The same rule keeps taps honest. An unclaimed `yj-tap` does nothing
+ * at all and the browser's click follows normally, so every button,
+ * link and checkbox in the app is untouched by this file. Only a
+ * claimed tap has its click swallowed — otherwise playing a track
+ * would also select it.
+ *
+ * Five things are load-bearing.
+ *
+ * **The predicate is the pointer, not the platform** (plan 019,
+ * decision 1). `pointerType === 'touch'`, per event — so an Android
+ * tablet over 600px, a touchscreen laptop with a mouse also plugged
+ * in, and a narrow desktop window are all right for free, and there is
+ * no second declaration of what a phone does. Keyed on a viewport
+ * width, the first of those three gets desktop semantics on a
+ * touchscreen, which is the inversion #63 exists to fix, on the
+ * platform it exists for.
+ *
+ * **There is no double-tap**, and it is not an omission — see plan
+ * 019, decision 2. Measured on the reference device, the play command
+ * to `TrackChanged` is ~100ms; a double-tap discriminator has to hold
+ * every tap for the app's own `DOUBLE_CLICK_GRACE_MS` of 250 before it
+ * can act, which is 3.5x the primary interaction in the app to reach a
+ * menu that long-press already reaches.
+ *
+ * **The target comes from `composedPath()[0]`**, not
+ * `elementFromPoint`, which stops at the outermost shadow host: every
+ * list in this app delegates inside one, so an event dispatched on the
+ * host reaches a delegated listener and no per-row one.
+ *
+ * **A browser that fires its own `contextmenu` is a trigger, not a
+ * competitor**, and that is a change from `long-press.ts` rather than
+ * an inherited rule. It used to stand down when a trusted
+ * `contextmenu` arrived, because both paths ended in the same place: a
+ * context menu. They no longer do — ours may end in selection mode —
+ * so standing down means the gesture silently does the *old* thing.
+ *
+ * Measured on the reference device, which is the only tier that can
+ * see this: Chrome 113's WebView fires its own `contextmenu` on a long
+ * press, so a hold on a track row opened the context menu and
+ * `yj-long-press` was never announced at all. Every test in the
+ * component tier passed, because dispatched pointer events do not make
+ * a browser synthesise one.
+ *
+ * So a trusted `contextmenu` arriving mid-press *becomes* the long
+ * press: `yj-long-press` is announced from it, and only if a component
+ * claims it is the native event suppressed. Unclaimed, it propagates
+ * untouched and opens the menu it always did — which is the same
+ * "browser wins" outcome, now reached by asking rather than assuming.
+ *
+ * Ours and the browser's are still told apart by identity rather than
+ * `isTrusted` — a `WeakSet` of the events this module made — so the
+ * suppressor cannot eat the event it exists to deliver, and a test can
+ * stand in for a browser that fires one.
+ *
+ * **The click swallow is keyed on the gesture**, cleared by the next
+ * `pointerdown` rather than by a time window, so the first tap on a
+ * sheet that just opened is not eaten too.
+ *
+ * ## The swipe runs on touch events, and that is not a style choice
+ *
+ * Everything above is Pointer Events. The swipe is not, and the reason
+ * is measured on the reference device rather than reasoned about:
+ * **Chrome 113's Android WebView cancels the pointer stream ~16px into
+ * any drag, whatever `touch-action` says.** Three values were tried on
+ * a track row, driving a real finger with `adb shell input swipe`:
+ *
+ * ```
+ * touch-action: auto   pointerdown, 1 move,  pointercancel
+ * touch-action: pan-y  pointerdown, 2 moves, pointercancel
+ * touch-action: none   pointerdown, 2 moves, pointercancel
+ * ```
+ *
+ * `touchmove` kept firing throughout all three. So a swipe recognised
+ * from `pointermove` is a swipe that dies 16px in — plan 019 predicted
+ * the class of failure ("works in Chromium and not on the phone") and
+ * named `touch-action: pan-y` as the fix; it is half of it.
+ *
+ * The other half is that **a non-passive `touchmove` that calls
+ * `preventDefault()` is what keeps the gesture ours**. With it, the
+ * same swipe ran to 12 moves and a `pointerup` at full travel.
+ *
+ * Both halves are required, and that was measured too: with the
+ * `preventDefault` in place but `touch-action` back at `auto`, the
+ * gesture died after **one** move. The reading is that `auto` lets the
+ * browser commit to a horizontal pan on the first move past slop —
+ * before any threshold of ours can have been crossed — while `pan-y`
+ * leaves it undecided long enough for the second move to claim it.
+ *
+ * So a surface that wants a horizontal swipe declares
+ * `touch-action: pan-y` (`track-list`'s `.track-row` does) *and* gets
+ * this module's `preventDefault`. Neither alone works on the device,
+ * and **both work in Chromium either way**, which is exactly why this
+ * paragraph exists rather than a test.
+ *
+ * `touch-action: none` is the one value to avoid: it also takes the
+ * list's vertical scrolling away, which was measured as a list that
+ * would not move.
+ *
+ * Two consequences of the touch listener worth knowing.
+ *
+ * **It is non-passive, which costs the compositor's scroll fast path**
+ * for the first touchmoves of every scroll, until the browser starts
+ * scrolling and stops waiting on us. That is the standard price of a
+ * horizontal gesture in a scroller and it is paid once per gesture,
+ * not per frame; a vertical drag on the device still scrolls the
+ * virtualizer 81px on the same measurement that the horizontal one
+ * survives.
+ *
+ * **The tie breaks toward scrolling**, deliberately and in that order:
+ * vertical drift past the tolerance vetoes the swipe outright, and a
+ * gesture that is not *strictly* more horizontal than vertical is the
+ * scroller's. A list that will not scroll is unusable; a swipe that
+ * needs a second try is not.
+ */
+
+/** How long a press must hold still to mean "long press". */
+export const LONG_PRESS_MS = 500;
+
+/**
+ * How far a press may drift and still count. Below a finger's own
+ * jitter is a gesture nobody can perform; above ~12px it starts
+ * stealing the first frames of a scroll.
+ */
+export const MOVE_TOLERANCE_PX = 10;
+
+/**
+ * How far a press must travel sideways before it is a swipe.
+ *
+ * It has a ceiling the other constants do not: the browser's own
+ * decision is made a little past this, so a threshold much higher is a
+ * gesture the device never delivers. Measured, the second `touchmove`
+ * of an `adb input swipe` lands at ~19px and the pointer stream dies
+ * just after it, so 12 is inside that window with room for a slower
+ * finger.
+ */
+export const SWIPE_START_PX = 12;
+
+/** Detail carried by both gesture events. */
+export interface GestureDetail {
+    /** Where the finger was, in client coordinates — a menu opens here. */
+    x: number;
+    y: number;
+}
+
+/** Detail carried by the three swipe events. */
+export interface SwipeDetail {
+    /** Travel from where the finger landed. Signed: right is positive. */
+    dx: number;
+    dy: number;
+    /**
+     * The gesture was taken away rather than finished — a second
+     * finger, a `touchcancel`, a scroll underneath. Only ever true on
+     * `yj-swipe-end`, and it is the difference between "do the thing"
+     * and "put the row back".
+     */
+    canceled: boolean;
+}
+
+export type GestureEvent = CustomEvent<GestureDetail>;
+export type SwipeEvent = CustomEvent<SwipeDetail>;
+
+declare global {
+    interface HTMLElementEventMap {
+        'yj-tap': GestureEvent;
+        'yj-long-press': GestureEvent;
+        'yj-swipe-start': SwipeEvent;
+        'yj-swipe-move': SwipeEvent;
+        'yj-swipe-end': SwipeEvent;
+    }
+}
+
+/** The active installation, so a second call is a no-op rather than a
+ *  second listener set. */
+let uninstall: (() => void) | null = null;
+
+/** The events this module dispatched. Identity, not `isTrusted`. */
+const ours = new WeakSet<Event>();
+
+/**
+ * Install the gestures. Idempotent; returns the uninstaller (which the
+ * tests use — the app installs once and never removes it).
+ */
+export function installTouchGestures(): () => void {
+    if (uninstall) return uninstall;
+
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    let originX = 0;
+    let originY = 0;
+    let target: EventTarget | null = null;
+
+    /** The press is still a candidate for a tap: it has neither
+     *  drifted nor become a long press. */
+    let tapCandidate = false;
+
+    /** A trusted `contextmenu` arrived for this press: the browser has
+     *  it covered. */
+    let nativeSeen = false;
+
+    /** A gesture was claimed, and the click ending it is not a click on
+     *  anything. */
+    let swallowClick = false;
+
+    /**
+     * This press has already produced its outcome, so a trusted
+     * `contextmenu` arriving now is a duplicate of it.
+     *
+     * It covers **both** outcomes, and that is a fix rather than a
+     * tidy-up. `nativeSeen` handles the browser's menu arriving
+     * *during* the hold; the reverse order was never handled, and it
+     * happens: measured on the reference device over four holds, two
+     * of them fired our 500ms timer and then delivered a trusted
+     * `contextmenu` 50-70ms later, which nothing suppressed — so the
+     * context menu opened on top of the selection bar, intermittently,
+     * on exactly the surface #63 exists to have changed. Neither the
+     * component tier nor the e2e tier can see it: no browser they run
+     * in synthesises a `contextmenu` from a dispatched press at all.
+     */
+    let justFired = false;
+
+    // --- the swipe, which runs on touch events; see the header ------
+
+    /** Where the finger landed, and what it landed on. */
+    let swipeTarget: EventTarget | null = null;
+    let swipeOriginX = 0;
+    let swipeOriginY = 0;
+
+    /** The last travel, kept so a `touchcancel` — which carries no
+     *  coordinates for a touch that is already gone — can still say how
+     *  far the row had moved. */
+    let lastDx = 0;
+    let lastDy = 0;
+
+    /** A component claimed the swipe: it is ours until the finger
+     *  lifts, and every `touchmove` is prevented. */
+    let swiping = false;
+
+    /** This press can no longer become a swipe — it went vertical, a
+     *  second finger arrived, or nobody claimed it. */
+    let swipeVetoed = false;
+
+    const cancel = (): void => {
+        if (timer !== null) clearTimeout(timer);
+
+        timer = null;
+        target = null;
+        tapCandidate = false;
+    };
+
+    /**
+     * Announce a gesture on the element the finger landed on.
+     * Returns whether a component claimed it.
+     */
+    const announce = (name: 'yj-tap' | 'yj-long-press', el: EventTarget): boolean => {
+        const event: GestureEvent = new CustomEvent<GestureDetail>(name, {
+            bubbles: true,
+            cancelable: true,
+            // Or it stops at the shadow root the row lives in, and the
+            // delegated listeners never see it.
+            composed: true,
+            detail: { x: originX, y: originY },
+        });
+
+        ours.add(event);
+        el.dispatchEvent(event);
+
+        return event.defaultPrevented;
+    };
+
+    const fireContextMenu = (el: EventTarget): void => {
+        justFired = true;
+
+        const menu = new MouseEvent('contextmenu', {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            clientX: originX,
+            clientY: originY,
+            button: 2,
+        });
+
+        ours.add(menu);
+        el.dispatchEvent(menu);
+    };
+
+    const onLongPress = (): void => {
+        timer = null;
+        tapCandidate = false;
+
+        const el = target;
+
+        target = null;
+
+        if (nativeSeen || !el) return;
+
+        // The gesture happened either way, so the click that ends it is
+        // never a click on anything -- whether a list claimed it for
+        // selection mode or a card grid let it fall through to a menu.
+        swallowClick = true;
+
+        // The press is answered, so a trusted `contextmenu` for it is
+        // late rather than new. `fireContextMenu` sets this too; it is
+        // set here as well so the *claimed* branch is covered, which
+        // is the branch that was showing a menu over the bar.
+        justFired = true;
+
+        // An unclaimed long press is what it has always been. This is
+        // the whole reason the fourteen context menus need no change.
+        if (!announce('yj-long-press', el)) fireContextMenu(el);
+    };
+
+    const onPointerDown = (e: PointerEvent): void => {
+        // A new gesture: whatever the last one left behind is stale.
+        swallowClick = false;
+        justFired = false;
+        nativeSeen = false;
+        cancel();
+
+        if (e.pointerType !== 'touch' || !e.isPrimary) return;
+
+        originX = e.clientX;
+        originY = e.clientY;
+        target = e.composedPath()[0] ?? e.target;
+        tapCandidate = true;
+        timer = setTimeout(onLongPress, LONG_PRESS_MS);
+    };
+
+    /**
+     * Announce a swipe on the element the finger landed on.
+     * Returns whether a component claimed it (only `start` asks).
+     */
+    const announceSwipe = (
+        name: 'yj-swipe-start' | 'yj-swipe-move' | 'yj-swipe-end',
+        el: EventTarget,
+        canceled = false,
+    ): boolean => {
+        const event: SwipeEvent = new CustomEvent<SwipeDetail>(name, {
+            bubbles: true,
+            cancelable: name === 'yj-swipe-start',
+            composed: true,
+            detail: { dx: lastDx, dy: lastDy, canceled },
+        });
+
+        ours.add(event);
+        el.dispatchEvent(event);
+
+        return event.defaultPrevented;
+    };
+
+    /**
+     * End a claimed swipe, once.
+     *
+     * Every exit from a swipe comes through here so that `yj-swipe-end`
+     * is guaranteed: a component that has put a reveal on screen and a
+     * row half off its own left edge has no other way to learn the
+     * gesture is over.
+     */
+    const endSwipe = (canceled: boolean): void => {
+        const el = swipeTarget;
+
+        swipeTarget = null;
+
+        if (!swiping) return;
+
+        swiping = false;
+
+        if (!el) return;
+
+        // The gesture happened, so the click that ends it is not a
+        // click on the row it ended over.
+        swallowClick = true;
+        announceSwipe('yj-swipe-end', el, canceled);
+    };
+
+    const onTouchStart = (e: TouchEvent): void => {
+        endSwipe(true);
+
+        lastDx = 0;
+        lastDy = 0;
+
+        // A second finger is a pinch or a scroll, never one of ours.
+        swipeVetoed = e.touches.length !== 1;
+
+        if (swipeVetoed) return;
+
+        const touch = e.touches[0];
+
+        if (!touch) return;
+
+        swipeOriginX = touch.clientX;
+        swipeOriginY = touch.clientY;
+        // `composedPath()[0]` for the reason the press path uses it: a
+        // list delegates inside its own shadow root.
+        swipeTarget = e.composedPath()[0] ?? e.target;
+    };
+
+    const onTouchMove = (e: TouchEvent): void => {
+        if (swipeVetoed || !swipeTarget) return;
+
+        if (e.touches.length !== 1) {
+            endSwipe(true);
+            swipeVetoed = true;
+
+            return;
+        }
+
+        const touch = e.touches[0];
+
+        if (!touch) return;
+
+        lastDx = touch.clientX - swipeOriginX;
+        lastDy = touch.clientY - swipeOriginY;
+
+        if (swiping) {
+            // This is what keeps the stream alive on the device. It is
+            // only ever reached for a *claimed* swipe, so nothing that
+            // scrolls is ever prevented.
+            e.preventDefault();
+            announceSwipe('yj-swipe-move', swipeTarget);
+
+            return;
+        }
+
+        // Vertical first: past the tolerance the list has it, and a
+        // gesture that is exactly diagonal is the list's too.
+        if (
+            Math.abs(lastDy) > MOVE_TOLERANCE_PX &&
+            Math.abs(lastDy) >= Math.abs(lastDx)
+        ) {
+            swipeVetoed = true;
+            swipeTarget = null;
+
+            return;
+        }
+
+        if (
+            Math.abs(lastDx) < SWIPE_START_PX ||
+            Math.abs(lastDx) <= Math.abs(lastDy)
+        ) {
+            return;
+        }
+
+        if (!announceSwipe('yj-swipe-start', swipeTarget)) {
+            // Nobody wants it. Leave the gesture to the browser rather
+            // than holding it open for the rest of the press.
+            swipeVetoed = true;
+            swipeTarget = null;
+
+            return;
+        }
+
+        swiping = true;
+
+        // It is not a tap and it is not a hold.
+        cancel();
+        e.preventDefault();
+    };
+
+    const onTouchEnd = (): void => {
+        endSwipe(false);
+    };
+
+    const onTouchCancel = (): void => {
+        endSwipe(true);
+    };
+
+    const onPointerMove = (e: PointerEvent): void => {
+        if (timer === null) return;
+
+        const drifted =
+            Math.abs(e.clientX - originX) > MOVE_TOLERANCE_PX ||
+            Math.abs(e.clientY - originY) > MOVE_TOLERANCE_PX;
+
+        // A drifted press is neither gesture -- it is a scroll, and the
+        // virtualizer's, not ours.
+        if (drifted) cancel();
+    };
+
+    const onPointerUp = (): void => {
+        const el = target;
+        const wasTap = tapCandidate && timer !== null;
+
+        // Clears the long-press timer, so a tap cannot also become one.
+        cancel();
+
+        if (!wasTap || !el) return;
+
+        // Only a *claimed* tap swallows its click. An unclaimed one has
+        // to fall through untouched, or every button in the app stops
+        // working.
+        if (announce('yj-tap', el)) swallowClick = true;
+    };
+
+    const onContextMenu = (e: Event): void => {
+        // Ours. Everything below is about somebody else's.
+        if (ours.has(e)) return;
+
+        if (timer !== null) {
+            // The browser recognised the same hold this was timing.
+            // Use its event as the trigger rather than racing it --
+            // and rather than standing down, which is what the old
+            // rule did and which now silently means "do the thing this
+            // gesture used to do".
+            const el = e.composedPath()[0] ?? e.target;
+
+            nativeSeen = true;
+            cancel();
+
+            if (!el) return;
+
+            swallowClick = true;
+
+            // Claimed: the component wants selection mode, so the
+            // browser's menu must not also open. Unclaimed: let it
+            // through exactly as before.
+            if (announce('yj-long-press', el)) {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+            }
+
+            return;
+        }
+
+        if (justFired) {
+            justFired = false;
+            e.preventDefault();
+            e.stopImmediatePropagation();
+        }
+    };
+
+    const onClick = (e: Event): void => {
+        if (!swallowClick) return;
+
+        swallowClick = false;
+        e.preventDefault();
+        e.stopImmediatePropagation();
+    };
+
+    // Capture throughout: a component handler that stops propagation
+    // (every context-menu handler in the app does) must not be able to
+    // hide the gesture from this, and the suppressors have to run
+    // before anything that would act on the event.
+    const opts = { capture: true } as const;
+
+    // Non-passive, because `onTouchMove` has to be able to prevent the
+    // default for a claimed swipe -- see the header. The other three
+    // are passive: they only read.
+    const blocking = { capture: true, passive: false } as const;
+    const listening = { capture: true, passive: true } as const;
+
+    /** A surface moved under the finger: neither gesture survives it. */
+    const abort = (): void => {
+        endSwipe(true);
+        cancel();
+    };
+
+    document.addEventListener('pointerdown', onPointerDown, opts);
+    document.addEventListener('pointermove', onPointerMove, opts);
+    document.addEventListener('pointerup', onPointerUp, opts);
+    document.addEventListener('pointercancel', cancel, opts);
+    document.addEventListener('contextmenu', onContextMenu, opts);
+    document.addEventListener('click', onClick, opts);
+    document.addEventListener('touchstart', onTouchStart, listening);
+    document.addEventListener('touchmove', onTouchMove, blocking);
+    document.addEventListener('touchend', onTouchEnd, listening);
+    document.addEventListener('touchcancel', onTouchCancel, listening);
+    // A scroll started by something other than the finger (momentum, a
+    // programmatic reveal) still means the press was not a press.
+    document.addEventListener('scroll', abort, listening);
+
+    uninstall = () => {
+        abort();
+        document.removeEventListener('pointerdown', onPointerDown, opts);
+        document.removeEventListener('pointermove', onPointerMove, opts);
+        document.removeEventListener('pointerup', onPointerUp, opts);
+        document.removeEventListener('pointercancel', cancel, opts);
+        document.removeEventListener('contextmenu', onContextMenu, opts);
+        document.removeEventListener('click', onClick, opts);
+        document.removeEventListener('touchstart', onTouchStart, opts);
+        document.removeEventListener('touchmove', onTouchMove, opts);
+        document.removeEventListener('touchend', onTouchEnd, opts);
+        document.removeEventListener('touchcancel', onTouchCancel, opts);
+        document.removeEventListener('scroll', abort, opts);
+        uninstall = null;
+    };
+
+    return uninstall;
+}

frontend/test/components/chrome.test.ts

@@ -137,6 +137,11 @@ describe('<app-sidebar>', () => {
   });
 
   it('looks the way it did last time', async () => {
+    // Stated rather than inherited: `activeViewStore` is a singleton, so
+    // without this the shot records whichever view the *previous* case
+    // left in it and the reference moves when the file is reordered.
+    activeViewStore.setView('home', true);
+
     const el = await fixture('app-sidebar');
 
     await visual(el, 'app-sidebar');

frontend/test/components/long-press.test.ts

@@ -1,212 +0,0 @@
-/**
- * Long-press as the touch route to a context menu (plan 016 B2 phase 3).
- *
- * These run in a real browser with real event dispatch, which is the
- * only place the two things that make this hard are true: the synthetic
- * event has to cross a shadow boundary to reach the listener a
- * component actually bound, and the suppressors have to tell a trusted
- * event from ours at document capture without eating the one they exist
- * to deliver.
- *
- * The timings are real rather than faked, because the thing under test
- * *is* a timing, and 600 ms twice is cheaper than a fake-timer harness
- * that would also have to fake the pointer events.
- */
-import { describe, expect, it, afterEach, beforeEach } from 'vitest';
-
-import {
-  installLongPressContextMenu,
-  LONG_PRESS_MS,
-  MOVE_TOLERANCE_PX,
-} from '@utils/long-press';
-
-/** A press that has certainly resolved, either way. */
-const HELD = LONG_PRESS_MS + 120;
-
-/** A press that has certainly not. */
-const BRIEF = Math.round(LONG_PRESS_MS / 4);
-
-const wait = (ms: number) => new Promise((r) => setTimeout(r, ms));
-
-let uninstall: (() => void) | null = null;
-let host: HTMLElement;
-let inner: HTMLElement;
-
-/** A row inside a shadow root, which is where every menu in this app
- *  is bound — an element in the light DOM would pass a weaker test. */
-function mountRow(): { host: HTMLElement; inner: HTMLElement } {
-  const el = document.createElement('div');
-  const root = el.attachShadow({ mode: 'open' });
-  const row = document.createElement('div');
-
-  row.textContent = 'a track';
-  root.append(row);
-  document.body.append(el);
-
-  return { host: el, inner: row };
-}
-
-function press(
-  el: EventTarget,
-  type: string,
-  init: PointerEventInit = {},
-): void {
-  el.dispatchEvent(
-    new PointerEvent(type, {
-      bubbles: true,
-      composed: true,
-      cancelable: true,
-      pointerType: 'touch',
-      isPrimary: true,
-      clientX: 40,
-      clientY: 60,
-      ...init,
-    }),
-  );
-}
-
-/**
- * Record every `contextmenu` that reaches the listener, *as the
- * listener sees it*.
- *
- * `target` is retargeted for the scope reading it, so an assertion made
- * after dispatch has finished reports the shadow host however the event
- * was dispatched - which is the same answer a broken implementation
- * gives. It has to be read from inside the handler, where the component
- * reads it.
- */
-function recordMenus(el: EventTarget): { event: MouseEvent; target: EventTarget | null }[] {
-  const seen: { event: MouseEvent; target: EventTarget | null }[] = [];
-
-  el.addEventListener('contextmenu', (e) => {
-    e.preventDefault();
-    // Every real handler does this; the gesture must work anyway.
-    e.stopPropagation();
-    seen.push({ event: e as MouseEvent, target: e.target });
-  });
-
-  return seen;
-}
-
-describe('long-press opens a context menu', () => {
-  beforeEach(() => {
-    uninstall = installLongPressContextMenu();
-    ({ host, inner } = mountRow());
-  });
-
-  afterEach(() => {
-    uninstall?.();
-    uninstall = null;
-    host.remove();
-  });
-
-  it('dispatches one at the touch point, on the element touched', async () => {
-    const seen = recordMenus(inner);
-
-    press(inner, 'pointerdown');
-    await wait(HELD);
-
-    expect(seen).toHaveLength(1);
-    expect(seen[0]?.event.clientX).toBe(40);
-    expect(seen[0]?.event.clientY).toBe(60);
-    // Dispatched on the row itself, not on its shadow host - which is
-    // the difference between a per-row handler firing and only a
-    // delegated one firing.
-    expect(seen[0]?.target).toBe(inner);
-  });
-
-  it('is cancelled by a press that moves', async () => {
-    const seen = recordMenus(inner);
-
-    press(inner, 'pointerdown');
-    press(inner, 'pointermove', {
-      clientX: 40 + MOVE_TOLERANCE_PX + 5,
-      clientY: 60,
-    });
-    await wait(HELD);
-
-    expect(seen).toHaveLength(0);
-  });
-
-  it('tolerates the jitter a finger cannot help', async () => {
-    const seen = recordMenus(inner);
-
-    press(inner, 'pointerdown');
-    press(inner, 'pointermove', { clientX: 43, clientY: 62 });
-    await wait(HELD);
-
-    expect(seen).toHaveLength(1);
-  });
-
-  it('is cancelled by lifting early, and by a scroll', async () => {
-    const seen = recordMenus(inner);
-
-    press(inner, 'pointerdown');
-    await wait(BRIEF);
-    press(inner, 'pointerup');
-    await wait(HELD);
-
-    expect(seen).toHaveLength(0);
-
-    press(inner, 'pointerdown');
-    press(inner, 'pointercancel');
-    await wait(HELD);
-
-    expect(seen).toHaveLength(0);
-  });
-
-  it('ignores a mouse, which has a right button of its own', async () => {
-    const seen = recordMenus(inner);
-
-    press(inner, 'pointerdown', { pointerType: 'mouse' });
-    await wait(HELD);
-
-    expect(seen).toHaveLength(0);
-  });
-
-  it('swallows the click that ends the gesture, and only that one', async () => {
-    let clicks = 0;
-
-    inner.addEventListener('click', () => {
-      clicks += 1;
-    });
-
-    press(inner, 'pointerdown');
-    await wait(HELD);
-    press(inner, 'pointerup');
-    inner.click();
-
-    expect(clicks).toBe(0);
-
-    // The next tap is a tap: on a phone that is the user choosing an
-    // item in the menu that just opened, so eating it would make the
-    // gesture useless.
-    press(inner, 'pointerdown');
-    press(inner, 'pointerup');
-    inner.click();
-
-    expect(clicks).toBe(1);
-  });
-
-  it('stands down where the browser fires its own', async () => {
-    const seen = recordMenus(inner);
-
-    press(inner, 'pointerdown');
-    await wait(BRIEF);
-    // Chromium does this itself on touch; WebKit and the Android
-    // WebView vary, which is the whole reason both halves exist. A
-    // test cannot dispatch a *trusted* event, which is why the module
-    // tells its own apart by identity rather than by `isTrusted`.
-    inner.dispatchEvent(
-      new MouseEvent('contextmenu', {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-      }),
-    );
-    await wait(HELD);
-
-    // One menu: the browser's. Not two.
-    expect(seen).toHaveLength(1);
-  });
-});

frontend/test/components/menu-surface.test.ts

@@ -206,6 +206,56 @@ describe('menu-surface', () => {
       expect(dismissed, 'no menu-dismiss reached the document').toBe(1);
     });
 
+    /**
+     * The scroll affordance (#207), and this is the mechanism again
+     * rather than the symptom.
+     *
+     * The sheet's body has scrolled since #60 and said nothing about
+     * it: measured at 424x439, eight items ended at y=470 with the
+     * fold at 439, and where the cut lands on a row boundary the sheet
+     * ends in a clean edge that reads as the end of the list.
+     *
+     * What makes the fade *conditional* — absent on a menu that fits,
+     * present the moment one does not, gone again at the end of the
+     * list — is `background-attachment`, not a scroll listener: a cover
+     * of the sheet's own colour is painted at the end of the content
+     * and attached `local`, over a shadow pinned to the box and
+     * attached `scroll`. So the pair of attachments *is* the feature,
+     * and it is what this asserts. The rendered result was measured in
+     * the harness (dark ramp 52,58,64 flat before; 52,57,63 at the last
+     * label and 22,24,27 at the bottom edge with more below; flat again
+     * at the end of the list) and is on the PR.
+     */
+    it('paints the fade only while there is more below', async () => {
+      const el = await surfaceWithPanel();
+
+      const wrapper = el.shadowRoot?.querySelector('wa-dialog');
+
+      await (wrapper as HTMLElement & { updateComplete: Promise<unknown> })
+        .updateComplete;
+
+      const body = wrapper?.shadowRoot?.querySelector('[part~="body"]');
+
+      expect(body, 'no body part to scroll').not.toBeNull();
+
+      const style = getComputedStyle(body as Element);
+
+      expect(style.overflowY, 'the body is what gives, not the cap').toBe(
+        'auto',
+      );
+
+      // The cover scrolls with the content; the shadow does not. Either
+      // one alone is a fade that is always there or never there.
+      expect(
+        style.backgroundAttachment,
+        'the cover must be local and the shadow must not',
+      ).toBe('local, scroll');
+
+      // Both sit at the bottom, or the cover hides nothing.
+      expect(style.backgroundPosition).toBe('50% 100%, 50% 100%');
+      expect(style.backgroundSize).toBe('100% 32px, 100% 32px');
+    });
+
     /**
      * A dialog with no accessible name is what `utils/name-dialog.ts`
      * exists for; here the name is already written on the panel, so no

frontend/test/components/now-playing.test.ts

@@ -366,6 +366,16 @@ describe('<now-playing>', () => {
     const el = await fixture('now-playing');
 
     emit(Events.TrackChanged, { ...TRACK, trackChangeId: 6 });
+    // Stated rather than inherited: the queue store is a singleton, so
+    // without this the shot records whichever source the *previous*
+    // case left in it and the reference moves when the file is
+    // reordered. Three lines is what the bar renders while playing
+    // from somewhere, which is the arrangement worth recording.
+    setQueue([queueTrack(1, 'Ashes to Ashes')], 0, {
+      type: 'album',
+      id: 7,
+      label: 'Scary Monsters',
+    });
     await flush();
     await el.updateComplete;
 

frontend/test/components/phone-entity-links.test.ts

@@ -0,0 +1,275 @@
+/**
+ * A name is not a link on a phone, and the menu is where it went (#67).
+ *
+ * `utils/explore-link.ts` makes every track, album and artist name
+ * navigable, with click handling that is explicitly a desktop
+ * compromise — the navigation is held for one double-click interval so
+ * double-clicking the row can still play it. On touch that is a delay
+ * on an ambiguous target, and since #63 the row's own tap claims the
+ * click anyway, so the link was unreachable as well as fiddly.
+ *
+ * So below the phone breakpoint a name renders as plain text and the
+ * row's context menu carries "Go to Artist" / "Go to Album" instead.
+ * The two halves are asserted together on purpose: a suppressed link
+ * with no menu item behind it is not a smaller affordance, it is a
+ * destination that cannot be reached, which is what plan 018 promises
+ * against.
+ *
+ * The breakpoint is stubbed rather than emulated for the reason
+ * `now-playing-phone.test.ts` states: this tier's viewport is fixed at
+ * 1280x800 by the runner, and `matchMedia` is the seam.
+ */
+import { describe, expect, it, beforeEach, afterEach } from 'vitest';
+import { html, render } from 'lit';
+import type { LitElement } from 'lit';
+
+import '@components/playlist-details/playlist-details';
+import {
+  albumLink,
+  artistLink,
+  creditLink,
+  trackLink,
+} from '@utils/explore-link';
+import { goToMenuItems } from '@utils/go-to-menu';
+import { stub, flush, resetHarness } from '@test/support/harness';
+import { fixture, shadowAll } from '@test/support/render';
+
+/** Answer the phone breakpoint, and hand back the undo. */
+function atPhone(phone: boolean): () => void {
+  const real = window.matchMedia.bind(window);
+
+  window.matchMedia = ((q: string) =>
+    q.includes('max-width: 599px')
+      ? {
+          matches: phone,
+          media: q,
+          addEventListener() {},
+          removeEventListener() {},
+        }
+      : real(q)) as typeof window.matchMedia;
+
+  return () => {
+    window.matchMedia = real as typeof window.matchMedia;
+  };
+}
+
+/** Render a template into a detached container and hand it back. */
+function draw(template: unknown): HTMLElement {
+  const host = document.createElement('div');
+
+  document.body.append(host);
+  render(html`${template}`, host);
+
+  return host;
+}
+
+describe('an inline name below the phone breakpoint', () => {
+  let restore: () => void = () => {};
+
+  afterEach(() => {
+    restore();
+    document.querySelectorAll('body > div').forEach((el) => el.remove());
+  });
+
+  it('is a link on a desktop', () => {
+    restore = atPhone(false);
+
+    const host = draw(artistLink('Cocteau Twins', 'artist-mbid'));
+
+    expect(host.querySelector('a.explore-link')).not.toBeNull();
+    expect(host.textContent?.trim()).toBe('Cocteau Twins');
+  });
+
+  it('is plain text on a phone, for all four shapes', () => {
+    restore = atPhone(true);
+
+    const host = draw(html`
+      ${artistLink('Cocteau Twins', 'artist-mbid')}
+      ${albumLink('Heaven or Las Vegas', 'rg-mbid')}
+      ${trackLink('Iceblink Luck', 'Heaven or Las Vegas', 'rg-mbid', 'rec-mbid')}
+      ${creditLink(
+        [
+          {
+            creditedName: 'Skrillex',
+            artistMbid: 'a1',
+            joinPhrase: ' feat. ',
+          },
+          { creditedName: 'Swae Lee', artistMbid: 'a2', joinPhrase: '' },
+        ],
+        'Skrillex & Swae Lee',
+        'a1',
+      )}
+    `);
+
+    expect(host.querySelectorAll('a.explore-link')).toHaveLength(0);
+
+    // The words survive, join phrases included — a decomposed credit is
+    // still assembled from its parts, so the text does not change with
+    // the affordance.
+    expect(host.textContent).toContain('Cocteau Twins');
+    expect(host.textContent).toContain('Heaven or Las Vegas');
+    expect(host.textContent).toContain('Iceblink Luck');
+    expect(host.textContent).toContain('Skrillex feat. Swae Lee');
+  });
+
+  it('stays a link where the caller has no menu to carry it', () => {
+    restore = atPhone(true);
+
+    const host = draw(
+      albumLink('Heaven or Las Vegas', 'rg-mbid', undefined, 'Cocteau Twins', {
+        keepOnPhone: true,
+      }),
+    );
+
+    expect(host.querySelector('a.explore-link')).not.toBeNull();
+  });
+});
+
+describe('the "Go to" menu items', () => {
+  let restore: () => void = () => {};
+
+  afterEach(() => {
+    restore();
+    document.querySelectorAll('body > div').forEach((el) => el.remove());
+  });
+
+  it('are absent on a desktop, where the name beside them is a link', () => {
+    restore = atPhone(false);
+
+    const host = draw(
+      goToMenuItems({ artistName: 'Cocteau Twins', albumName: 'Treasure' }),
+    );
+
+    expect(host.querySelectorAll('wa-dropdown-item')).toHaveLength(0);
+  });
+
+  it('offer only what the target knows', () => {
+    restore = atPhone(true);
+
+    const both = draw(
+      goToMenuItems({ artistName: 'Cocteau Twins', albumName: 'Treasure' }),
+    );
+    const artistOnly = draw(goToMenuItems({ artistName: 'Cocteau Twins' }));
+    const neither = draw(goToMenuItems({}));
+
+    expect(both.querySelectorAll('wa-dropdown-item')).toHaveLength(2);
+    expect(artistOnly.querySelectorAll('wa-dropdown-item')).toHaveLength(1);
+    expect(neither.querySelectorAll('wa-dropdown-item')).toHaveLength(0);
+  });
+});
+
+// =====================================================================
+// The menu that carries the destination
+// =====================================================================
+
+function playlistTracks(n: number) {
+  return Array.from({ length: n }, (_, i) => ({
+    ID: i + 1,
+    FilePath: `/music/track-${i}.mp3`,
+    Title: `Track ${i}`,
+    Artist: 'Cocteau Twins',
+    ArtistMBID: 'artist-mbid',
+    Album: 'Heaven or Las Vegas',
+    ReleaseGroupMBID: 'rg-mbid',
+    Duration: 180000,
+    Phantom: false,
+  }));
+}
+
+describe('a playlist row’s context menu on a phone', () => {
+  let el: LitElement;
+  let restore: () => void = () => {};
+
+  beforeEach(async () => {
+    resetHarness();
+    restore = atPhone(true);
+    stub('playlist.Service.GetPlaylistTracks', playlistTracks(8));
+    stub('playlist.Service.GetAllPlaylists', []);
+
+    el = await fixture<LitElement>('playlist-details', {
+      playlistId: 1,
+      playlistName: 'A playlist',
+    });
+    el.style.display = 'block';
+    el.style.height = '600px';
+    await flush();
+    await el.updateComplete;
+    await new Promise((r) => setTimeout(r, 60));
+  });
+
+  afterEach(() => {
+    restore();
+  });
+
+  /** Right-click a row and hand back the menu's items. */
+  async function openMenu(index: number): Promise<HTMLElement[]> {
+    const row = shadowAll(el, '.track-item').find(
+      (r) => r.getAttribute('data-index') === String(index),
+    );
+
+    row!.dispatchEvent(
+      new MouseEvent('contextmenu', { bubbles: true, composed: true }),
+    );
+    await el.updateComplete;
+
+    return shadowAll<HTMLElement>(el, 'wa-dropdown-item');
+  }
+
+  it('carries the artist and the album the row stopped linking to', async () => {
+    const labels = (await openMenu(3)).map((i) => i.textContent?.trim());
+
+    expect(labels).toContain('Go to Artist');
+    expect(labels).toContain('Go to Album');
+  });
+
+  it('navigates where the name would have', async () => {
+    const seen: CustomEvent[] = [];
+    const listen = (e: Event) => seen.push(e as CustomEvent);
+
+    document.addEventListener('navigate', listen);
+
+    try {
+      const items = await openMenu(3);
+
+      items
+        .find((i) => i.textContent?.trim() === 'Go to Artist')!
+        .click();
+      await flush();
+    } finally {
+      document.removeEventListener('navigate', listen);
+    }
+
+    expect(seen.map((e) => e.detail)).toEqual([
+      {
+        view: 'explore-artist-details',
+        artistMBID: 'artist-mbid',
+        artistName: 'Cocteau Twins',
+      },
+    ]);
+  });
+
+  it('is absent while several rows are selected', async () => {
+    // "Go to the album" of five different albums means nothing, which
+    // is the rule the Play item already follows: one row is a
+    // position, several are an explicit choice of those tracks.
+    const rows = shadowAll(el, '.track-item');
+    const click = (i: number, modifiers: MouseEventInit) =>
+      rows
+        .find((r) => r.getAttribute('data-index') === String(i))!
+        .dispatchEvent(
+          new MouseEvent('click', {
+            bubbles: true,
+            composed: true,
+            ...modifiers,
+          }),
+        );
+
+    click(1, {});
+    click(4, { ctrlKey: true });
+    await el.updateComplete;
+
+    const labels = (await openMenu(4)).map((i) => i.textContent?.trim());
+
+    expect(labels).not.toContain('Go to Artist');
+  });
+});

frontend/test/components/play-in-context.test.ts

@@ -161,6 +161,15 @@ describe('double-clicking a row in the track list', () => {
     localStorage.removeItem('track-list-column-widths');
 
     el = await fixture<LitElement>('track-list', { externalTracks: LIST });
+
+    // Say which order is being asserted rather than inheriting one.
+    // `restoreSortPreferences()` runs in `connectedCallback`, so the
+    // list opens in whatever sort was last persisted -- and
+    // `track-11` sorts before `track-3` by title, which is the shape
+    // of #138. The row below is the fixture's third track only while
+    // nothing is sorting the list.
+    (el as unknown as { sortField: string | null }).sortField = null;
+
     el.style.display = 'block';
     el.style.height = '600px';
     await flush();
@@ -172,6 +181,10 @@ describe('double-clicking a row in the track list', () => {
     const rows = shadowAll(el, '.track-row');
     const row = rows.find((r) => r.getAttribute('data-index') === '3');
 
+    // Stated first, so a list that is not in the order this asserts
+    // fails by saying so rather than as an off-by-eight file path.
+    expect(row?.getAttribute('data-file-path')).toBe('/music/track-3.mp3');
+
     dblclick(row!);
     await flush();
 

frontend/test/components/press-feedback.test.ts

@@ -0,0 +1,191 @@
+/**
+ * What a tap looks like now that the web view's own highlight is gone
+ * (#54).
+ *
+ * `index.css` sets `-webkit-tap-highlight-color: transparent` on
+ * `html`, which — the property being inherited — reaches every shadow
+ * root in the app. That takes away the grey box a phone drew over the
+ * bounding rect of whatever was tapped, and with it the only touch
+ * feedback the rows, the tab bar, the sidebar's destinations and the
+ * shared menu items had. So the press states below are not decoration:
+ * without them this change trades wrong feedback for none.
+ *
+ * **Asserted against the parsed stylesheet**, on `hover-affordance`'s
+ * precedent and with the same limitation stated out loud: CDP's
+ * `Emulation.setEmulatedMedia` does not reach this tier's iframe, so
+ * there is no way here to render a component as a phone would, and
+ * `:active` cannot be forced from a test either. What the browser will
+ * answer is the shape it built from the `css` literal — which rule sits
+ * inside which media query, and what the press selector actually is.
+ *
+ * Two regressions are worth catching that way, and both are silent on a
+ * desktop:
+ *
+ * - someone hoisting a hover tint back out of its query as a tidy-up,
+ *   which on a phone is a highlight that arrives because a finger
+ *   touched the row and stays after it has gone;
+ * - someone simplifying the press selector to a bare `:active`, which
+ *   is one class short of `.selected` / `.active` and so does nothing
+ *   on the row a phone is most likely to press — the one it has just
+ *   selected.
+ *
+ * The pixels are the Android tier's, and the tap highlight itself is
+ * `e2e/specs/native-touch-feel.spec.ts`, since only the real app loads
+ * `index.css` at all.
+ */
+import { describe, expect, it } from 'vitest';
+
+import '@components/track-list/track-list';
+import '@components/queue-panel/queue-panel';
+import '@components/playlist-details/playlist-details';
+import '@components/smart-playlist-details/smart-playlist-details';
+import '@components/bottom-nav/bottom-nav';
+import '@components/sidebar/app-sidebar';
+import { fixture } from '@test/support/render';
+
+/** Every rule in the element's own adopted stylesheets, flattened. */
+function rulesOf(host: Element): { text: string; condition: string | null }[] {
+  const sheets = host.shadowRoot?.adoptedStyleSheets ?? [];
+  const out: { text: string; condition: string | null }[] = [];
+
+  for (const sheet of sheets) {
+    for (const rule of Array.from(sheet.cssRules)) {
+      if (rule instanceof CSSMediaRule) {
+        for (const inner of Array.from(rule.cssRules)) {
+          out.push({ text: inner.cssText, condition: rule.conditionText });
+        }
+
+        continue;
+      }
+
+      out.push({ text: rule.cssText, condition: null });
+    }
+  }
+
+  return out;
+}
+
+/** The four lists, their row selector, and the tag that draws them. */
+const LISTS: Array<[string, string]> = [
+  ['track-list', '.track-row'],
+  ['queue-panel', '.track-item'],
+  ['playlist-details', '.track-item'],
+  ['smart-playlist-details', '.track-item'],
+];
+
+describe('a row says it is being pressed', () => {
+  for (const [tag, row] of LISTS) {
+    it(`${tag} draws a press state that survives its state classes`, async () => {
+      const el = await fixture(tag, {});
+      const rules = rulesOf(el);
+
+      // Worth nothing if it read no rules at all — the first assertion
+      // icon-language.test.ts makes, for the same reason.
+      expect(rules.length).toBeGreaterThan(0);
+
+      const press = rules.filter(
+        (r) => r.text.includes(`${row}:active`) && r.text.includes('background-color'),
+      );
+
+      expect(press.length).toBeGreaterThan(0);
+
+      for (const rule of press) {
+        // A press is not a hover: it is the one thing a touch device
+        // can say, so it must not sit behind a pointer query.
+        expect(rule.condition).toBeNull();
+        expect(rule.text).toContain('--yj-press-overlay');
+      }
+
+      // The load-bearing half: the selector carries a state class, or
+      // it loses to `.selected` / `.selected.active` and the press is
+      // invisible on a selected or playing row.
+      expect(press.some((r) => r.text.includes(`${row}.selected:active`))).toBe(true);
+    });
+
+    it(`${tag} keeps its hover tint for devices that hover`, async () => {
+      const el = await fixture(tag, {});
+      const rules = rulesOf(el);
+
+      expect(rules.length).toBeGreaterThan(0);
+
+      const hover = rules.filter(
+        (r) =>
+          r.text.includes(`${row}:hover`) &&
+          r.text.includes('--yj-hover-overlay'),
+      );
+
+      expect(hover.length).toBeGreaterThan(0);
+
+      for (const rule of hover) {
+        expect(rule.condition).toMatch(/hover:\s*hover/);
+        expect(rule.condition).toMatch(/pointer:\s*fine/);
+      }
+    });
+  }
+});
+
+describe('the two navigations say they are being pressed', () => {
+  it('the phone tab bar, which had no state of its own at all', async () => {
+    const el = await fixture('bottom-nav', {});
+    const rules = rulesOf(el);
+
+    expect(rules.length).toBeGreaterThan(0);
+
+    const press = rules.filter((r) => r.text.startsWith('button:active'));
+
+    expect(press.length).toBe(1);
+    expect(press[0]!.condition).toBeNull();
+    expect(press[0]!.text).toContain('--yj-press-overlay');
+  });
+
+  it("the sidebar, which is also the phone's More sheet", async () => {
+    const el = await fixture('app-sidebar', {});
+    const rules = rulesOf(el);
+
+    expect(rules.length).toBeGreaterThan(0);
+
+    const press = rules.filter((r) => r.text.startsWith('li button:active'));
+
+    expect(press.length).toBe(1);
+    expect(press[0]!.condition).toBeNull();
+    expect(press[0]!.text).toContain('--yj-press-overlay');
+
+    // Its hover tint is a destination looking picked, if it is left to
+    // a synthesised hover inside the More sheet.
+    const hover = rules.filter((r) => r.text.startsWith('li button:hover'));
+
+    expect(hover.length).toBeGreaterThan(0);
+
+    for (const rule of hover) {
+      expect(rule.condition).toMatch(/hover:\s*hover/);
+    }
+  });
+});
+
+describe('the shared context menu', () => {
+  // One stylesheet, fourteen menus — the same reason the sheet's row
+  // height lives there rather than in each host.
+  it('presses its items, in the one place every menu includes', async () => {
+    const el = await fixture('queue-panel', {});
+    const rules = rulesOf(el);
+
+    const press = rules.filter((r) =>
+      r.text.startsWith('.context-menu-panel wa-dropdown-item:active'),
+    );
+
+    expect(press.length).toBe(1);
+    expect(press[0]!.condition).toBeNull();
+    expect(press[0]!.text).toContain('--yj-press-overlay');
+
+    const hover = rules.filter((r) =>
+      r.text.startsWith('.context-menu-panel wa-dropdown-item:hover'),
+    );
+
+    expect(hover.length).toBeGreaterThan(0);
+
+    for (const rule of hover) {
+      expect(rule.condition).toMatch(/hover:\s*hover/);
+      expect(rule.condition).toMatch(/pointer:\s*fine/);
+    }
+  });
+});

frontend/test/components/touch-gestures.test.ts

@@ -0,0 +1,681 @@
+/**
+ * The touch gestures (plan 019, #63; long-press from plan 016 B2).
+ *
+ * These run in a real browser with real event dispatch, which is the
+ * only place the two things that make this hard are true: the synthetic
+ * event has to cross a shadow boundary to reach the listener a
+ * component actually bound, and the suppressors have to tell a trusted
+ * event from ours at document capture without eating the one they exist
+ * to deliver.
+ *
+ * The timings are real rather than faked, because the thing under test
+ * *is* a timing, and 600 ms twice is cheaper than a fake-timer harness
+ * that would also have to fake the pointer events.
+ */
+import { describe, expect, it, afterEach, beforeEach } from 'vitest';
+
+import {
+  installTouchGestures,
+  LONG_PRESS_MS,
+  MOVE_TOLERANCE_PX,
+} from '@utils/touch-gestures';
+
+/** A press that has certainly resolved, either way. */
+const HELD = LONG_PRESS_MS + 120;
+
+/** A press that has certainly not. */
+const BRIEF = Math.round(LONG_PRESS_MS / 4);
+
+const wait = (ms: number) => new Promise((r) => setTimeout(r, ms));
+
+let uninstall: (() => void) | null = null;
+let host: HTMLElement;
+let inner: HTMLElement;
+
+/** A row inside a shadow root, which is where every menu in this app
+ *  is bound — an element in the light DOM would pass a weaker test. */
+function mountRow(): { host: HTMLElement; inner: HTMLElement } {
+  const el = document.createElement('div');
+  const root = el.attachShadow({ mode: 'open' });
+  const row = document.createElement('div');
+
+  row.textContent = 'a track';
+  root.append(row);
+  document.body.append(el);
+
+  return { host: el, inner: row };
+}
+
+function press(
+  el: EventTarget,
+  type: string,
+  init: PointerEventInit = {},
+): void {
+  el.dispatchEvent(
+    new PointerEvent(type, {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      pointerType: 'touch',
+      isPrimary: true,
+      clientX: 40,
+      clientY: 60,
+      ...init,
+    }),
+  );
+}
+
+/**
+ * Record every `contextmenu` that reaches the listener, *as the
+ * listener sees it*.
+ *
+ * `target` is retargeted for the scope reading it, so an assertion made
+ * after dispatch has finished reports the shadow host however the event
+ * was dispatched - which is the same answer a broken implementation
+ * gives. It has to be read from inside the handler, where the component
+ * reads it.
+ */
+function recordMenus(el: EventTarget): { event: MouseEvent; target: EventTarget | null }[] {
+  const seen: { event: MouseEvent; target: EventTarget | null }[] = [];
+
+  el.addEventListener('contextmenu', (e) => {
+    e.preventDefault();
+    // Every real handler does this; the gesture must work anyway.
+    e.stopPropagation();
+    seen.push({ event: e as MouseEvent, target: e.target });
+  });
+
+  return seen;
+}
+
+describe('an unclaimed long press is still a context menu', () => {
+  beforeEach(() => {
+    uninstall = installTouchGestures();
+    ({ host, inner } = mountRow());
+  });
+
+  afterEach(() => {
+    uninstall?.();
+    uninstall = null;
+    host.remove();
+  });
+
+  it('dispatches one at the touch point, on the element touched', async () => {
+    const seen = recordMenus(inner);
+
+    press(inner, 'pointerdown');
+    await wait(HELD);
+
+    expect(seen).toHaveLength(1);
+    expect(seen[0]?.event.clientX).toBe(40);
+    expect(seen[0]?.event.clientY).toBe(60);
+    // Dispatched on the row itself, not on its shadow host - which is
+    // the difference between a per-row handler firing and only a
+    // delegated one firing.
+    expect(seen[0]?.target).toBe(inner);
+  });
+
+  it('is cancelled by a press that moves', async () => {
+    const seen = recordMenus(inner);
+
+    press(inner, 'pointerdown');
+    press(inner, 'pointermove', {
+      clientX: 40 + MOVE_TOLERANCE_PX + 5,
+      clientY: 60,
+    });
+    await wait(HELD);
+
+    expect(seen).toHaveLength(0);
+  });
+
+  it('tolerates the jitter a finger cannot help', async () => {
+    const seen = recordMenus(inner);
+
+    press(inner, 'pointerdown');
+    press(inner, 'pointermove', { clientX: 43, clientY: 62 });
+    await wait(HELD);
+
+    expect(seen).toHaveLength(1);
+  });
+
+  it('is cancelled by lifting early, and by a scroll', async () => {
+    const seen = recordMenus(inner);
+
+    press(inner, 'pointerdown');
+    await wait(BRIEF);
+    press(inner, 'pointerup');
+    await wait(HELD);
+
+    expect(seen).toHaveLength(0);
+
+    press(inner, 'pointerdown');
+    press(inner, 'pointercancel');
+    await wait(HELD);
+
+    expect(seen).toHaveLength(0);
+  });
+
+  it('ignores a mouse, which has a right button of its own', async () => {
+    const seen = recordMenus(inner);
+
+    press(inner, 'pointerdown', { pointerType: 'mouse' });
+    await wait(HELD);
+
+    expect(seen).toHaveLength(0);
+  });
+
+  it('swallows the click that ends the gesture, and only that one', async () => {
+    let clicks = 0;
+
+    inner.addEventListener('click', () => {
+      clicks += 1;
+    });
+
+    press(inner, 'pointerdown');
+    await wait(HELD);
+    press(inner, 'pointerup');
+    inner.click();
+
+    expect(clicks).toBe(0);
+
+    // The next tap is a tap: on a phone that is the user choosing an
+    // item in the menu that just opened, so eating it would make the
+    // gesture useless.
+    press(inner, 'pointerdown');
+    press(inner, 'pointerup');
+    inner.click();
+
+    expect(clicks).toBe(1);
+  });
+
+  it('stands down where the browser fires its own', async () => {
+    const seen = recordMenus(inner);
+
+    press(inner, 'pointerdown');
+    await wait(BRIEF);
+    // Chromium does this itself on touch; WebKit and the Android
+    // WebView vary, which is the whole reason both halves exist. A
+    // test cannot dispatch a *trusted* event, which is why the module
+    // tells its own apart by identity rather than by `isTrusted`.
+    inner.dispatchEvent(
+      new MouseEvent('contextmenu', {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+      }),
+    );
+    await wait(HELD);
+
+    // One menu: the browser's. Not two.
+    expect(seen).toHaveLength(1);
+  });
+});
+
+/**
+ * What plan 019 adds on top, and the one property that protects
+ * everything downstream: a long press nobody claims is unchanged.
+ */
+describe('a gesture is announced before it is acted on', () => {
+  beforeEach(() => {
+    uninstall = installTouchGestures();
+    ({ host, inner } = mountRow());
+  });
+
+  afterEach(() => {
+    uninstall?.();
+    uninstall = null;
+    host.remove();
+  });
+
+  it('does not synthesise a menu when the long press is claimed', async () => {
+    // This is the whole reason #63 could reassign the hold without
+    // touching one of the fourteen context menus: the lists that want
+    // selection mode claim it, and nothing else changes.
+    const menus = recordMenus(inner);
+    const presses: unknown[] = [];
+
+    inner.addEventListener('yj-long-press', (e) => {
+      presses.push(e);
+      e.preventDefault();
+    });
+
+    press(inner, 'pointerdown');
+    await wait(HELD);
+
+    expect(presses).toHaveLength(1);
+    expect(menus).toHaveLength(0);
+  });
+
+  it('announces a tap on the element touched, at the touch point', async () => {
+    const taps: { target: EventTarget | null; x: number; y: number }[] = [];
+
+    inner.addEventListener('yj-tap', (e) => {
+      taps.push({ target: e.target, x: e.detail.x, y: e.detail.y });
+    });
+
+    press(inner, 'pointerdown');
+    await wait(BRIEF);
+    press(inner, 'pointerup');
+
+    expect(taps).toHaveLength(1);
+    // The row, not its shadow host -- the difference between a
+    // delegated handler firing and a per-row one never firing.
+    expect(taps[0]?.target).toBe(inner);
+    expect([taps[0]?.x, taps[0]?.y]).toEqual([40, 60]);
+  });
+
+  it('lets an unclaimed tap through as an ordinary click', async () => {
+    // Every button, link and checkbox in the app depends on this. Only
+    // a *claimed* tap has its click swallowed.
+    let clicks = 0;
+
+    inner.addEventListener('yj-tap', () => {
+      /* seen, not claimed */
+    });
+    inner.addEventListener('click', () => {
+      clicks += 1;
+    });
+
+    press(inner, 'pointerdown');
+    await wait(BRIEF);
+    press(inner, 'pointerup');
+    inner.click();
+
+    expect(clicks).toBe(1);
+  });
+
+  it('swallows the click behind a claimed tap', async () => {
+    // Or playing a track would also select it, and the row would end
+    // up in both states at once.
+    let clicks = 0;
+
+    inner.addEventListener('yj-tap', (e) => e.preventDefault());
+    inner.addEventListener('click', () => {
+      clicks += 1;
+    });
+
+    press(inner, 'pointerdown');
+    await wait(BRIEF);
+    press(inner, 'pointerup');
+    inner.click();
+
+    expect(clicks).toBe(0);
+  });
+
+  it('does not announce a tap for a press that became a long press', async () => {
+    // A hold is one gesture, not a hold and then a tap on release.
+    const taps: unknown[] = [];
+
+    inner.addEventListener('yj-tap', (e) => taps.push(e));
+
+    press(inner, 'pointerdown');
+    await wait(HELD);
+    press(inner, 'pointerup');
+
+    expect(taps).toHaveLength(0);
+  });
+
+  it('does not announce a tap for a press that drifted', async () => {
+    // A drifted press is a scroll, and the virtualizer's -- not a tap
+    // that happened to move. This is the one that would make a list
+    // unscrollable if it were wrong.
+    const taps: unknown[] = [];
+
+    inner.addEventListener('yj-tap', (e) => taps.push(e));
+
+    press(inner, 'pointerdown');
+    press(inner, 'pointermove', {
+      clientX: 40,
+      clientY: 60 + MOVE_TOLERANCE_PX + 20,
+    });
+    press(inner, 'pointerup');
+
+    expect(taps).toHaveLength(0);
+  });
+
+  it('ignores a mouse entirely, for both gestures', async () => {
+    // plan 019 decision 1: the predicate is the pointer, per event. A
+    // mouse on a touchscreen keeps click-selects / double-click-plays
+    // on the very same row, which no viewport width can express.
+    const seen: unknown[] = [];
+
+    inner.addEventListener('yj-tap', (e) => seen.push(e));
+    inner.addEventListener('yj-long-press', (e) => seen.push(e));
+
+    press(inner, 'pointerdown', { pointerType: 'mouse' });
+    await wait(BRIEF);
+    press(inner, 'pointerup', { pointerType: 'mouse' });
+    press(inner, 'pointerdown', { pointerType: 'mouse' });
+    await wait(HELD);
+
+    expect(seen).toHaveLength(0);
+  });
+});
+
+/**
+ * The browser's own long press is a trigger, not a competitor.
+ *
+ * This is a device-only defect made checkable here. `long-press.ts`
+ * stood down when a trusted `contextmenu` arrived mid-press, which was
+ * right while both paths ended in a context menu. Once a hold can mean
+ * *selection mode*, standing down means the gesture silently does the
+ * old thing — and Chrome 113's Android WebView does fire its own, so
+ * on the reference device `yj-long-press` was never announced at all
+ * while every test in this tier passed.
+ *
+ * A test cannot dispatch a *trusted* event, which is exactly why the
+ * module tells its own apart by identity rather than by `isTrusted`:
+ * an untrusted one dispatched from here takes the same path the
+ * browser's does.
+ */
+describe("the browser's own long press", () => {
+  beforeEach(() => {
+    uninstall = installTouchGestures();
+    ({ host, inner } = mountRow());
+  });
+
+  afterEach(() => {
+    uninstall?.();
+    uninstall = null;
+    host.remove();
+  });
+
+  /** Stand in for the browser recognising the hold itself. */
+  function browserContextMenu(el: EventTarget): MouseEvent {
+    const e = new MouseEvent('contextmenu', {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    });
+
+    el.dispatchEvent(e);
+
+    return e;
+  }
+
+  it('announces the gesture rather than standing down', async () => {
+    const presses: unknown[] = [];
+
+    inner.addEventListener('yj-long-press', (e) => {
+      presses.push(e);
+      e.preventDefault();
+    });
+
+    press(inner, 'pointerdown');
+    await wait(BRIEF);
+    browserContextMenu(inner);
+    await wait(HELD);
+
+    expect(presses, 'the hold reached the component').toHaveLength(1);
+  });
+
+  it('suppresses its menu when a component claims the gesture', async () => {
+    const menus = recordMenus(inner);
+
+    inner.addEventListener('yj-long-press', (e) => e.preventDefault());
+
+    press(inner, 'pointerdown');
+    await wait(BRIEF);
+    browserContextMenu(inner);
+    await wait(HELD);
+
+    // The component wants selection mode, so the menu must not also
+    // open -- otherwise the device shows both at once.
+    expect(menus).toHaveLength(0);
+  });
+
+  it('suppresses a menu that arrives after the hold was claimed', async () => {
+    // The order the device actually produces, and the one that was
+    // missing: our 500ms timer fires first and a component claims it,
+    // then Chrome delivers its own `contextmenu` 50-70ms later.
+    // Measured over four holds on the reference phone, two took this
+    // order -- so the context menu opened over the selection bar,
+    // intermittently, on the one surface #63 changed.
+    const menus = recordMenus(inner);
+
+    inner.addEventListener('yj-long-press', (e) => e.preventDefault());
+
+    press(inner, 'pointerdown');
+    await wait(HELD);
+    browserContextMenu(inner);
+
+    expect(menus, 'the menu is late, not new').toHaveLength(0);
+  });
+
+  it('still opens exactly one menu when nobody claims it', async () => {
+    // The old behaviour, reached by asking instead of assuming. This
+    // is what leaves the card grids, Explore and the playlist rows
+    // untouched by #63.
+    const menus = recordMenus(inner);
+
+    press(inner, 'pointerdown');
+    await wait(BRIEF);
+    browserContextMenu(inner);
+    await wait(HELD);
+
+    expect(menus).toHaveLength(1);
+  });
+});
+
+/**
+ * The swipe half (plan 019 phase 2, #63).
+ *
+ * It runs on touch events rather than pointer events, and that is the
+ * one thing about it a browser tier cannot check. Measured on the
+ * reference device: Chrome 113's WebView cancels the *pointer* stream
+ * ~16px into any drag whatever `touch-action` says, while `touchmove`
+ * keeps firing — so what these assert is the shape that survives it,
+ * not that it survives.
+ *
+ * What they can hold is everything else: the axis rule, that the tie
+ * breaks toward the scroller, that an unclaimed swipe is left entirely
+ * alone, that a claimed one prevents the default (which is the half of
+ * the device fix that lives in code), and that an end always arrives.
+ */
+describe('a finger dragged sideways', () => {
+  beforeEach(() => {
+    uninstall = installTouchGestures();
+    ({ host, inner } = mountRow());
+  });
+
+  afterEach(() => {
+    uninstall?.();
+    uninstall = null;
+    host.remove();
+  });
+
+  /** One finger, at an offset from where it landed. */
+  function touch(el: EventTarget, type: string, dx = 0, dy = 0): TouchEvent {
+    const point = new Touch({
+      identifier: 1,
+      target: el as EventTarget as Element,
+      clientX: 40 + dx,
+      clientY: 60 + dy,
+    });
+    const event = new TouchEvent(type, {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      touches: type === 'touchend' || type === 'touchcancel' ? [] : [point],
+      changedTouches: [point],
+    });
+
+    el.dispatchEvent(event);
+
+    return event;
+  }
+
+  /** Record the swipe events a component would bind. */
+  function recordSwipes(
+    el: EventTarget,
+    opts: { claim?: boolean } = {},
+  ): { type: string; dx: number; canceled: boolean }[] {
+    const seen: { type: string; dx: number; canceled: boolean }[] = [];
+
+    for (const name of ['yj-swipe-start', 'yj-swipe-move', 'yj-swipe-end']) {
+      el.addEventListener(name, (e) => {
+        const detail = (e as CustomEvent<{ dx: number; canceled: boolean }>)
+          .detail;
+
+        if (name === 'yj-swipe-start' && opts.claim !== false) {
+          e.preventDefault();
+        }
+
+        seen.push({ type: name, dx: detail.dx, canceled: detail.canceled });
+      });
+    }
+
+    return seen;
+  }
+
+  it('announces a swipe once it has travelled decisively sideways', () => {
+    const seen = recordSwipes(inner);
+
+    touch(inner, 'touchstart');
+    touch(inner, 'touchmove', 4);
+    expect(seen, 'a wobble is not a swipe').toHaveLength(0);
+
+    touch(inner, 'touchmove', 30);
+    touch(inner, 'touchmove', 60);
+    touch(inner, 'touchend');
+
+    expect(seen.map((s) => s.type)).toEqual([
+      'yj-swipe-start',
+      'yj-swipe-move',
+      'yj-swipe-end',
+    ]);
+    expect(seen.at(-1)?.dx).toBe(60);
+    expect(seen.at(-1)?.canceled).toBe(false);
+  });
+
+  it('prevents the default only for a claimed swipe', () => {
+    // This is the half of the device fix that lives in code: a
+    // non-passive `touchmove` calling `preventDefault` is what keeps
+    // the gesture ours on Chrome 113. Preventing anything else would
+    // be taking the list's scrolling away.
+    recordSwipes(inner);
+
+    touch(inner, 'touchstart');
+
+    const early = touch(inner, 'touchmove', 4);
+
+    expect(early.defaultPrevented, 'a wobble scrolls').toBe(false);
+
+    const claimed = touch(inner, 'touchmove', 30);
+    const after = touch(inner, 'touchmove', 60);
+
+    expect(claimed.defaultPrevented).toBe(true);
+    expect(after.defaultPrevented).toBe(true);
+  });
+
+  it('leaves an unclaimed swipe entirely alone', () => {
+    const seen = recordSwipes(inner, { claim: false });
+
+    touch(inner, 'touchstart');
+    touch(inner, 'touchmove', 30);
+
+    const later = touch(inner, 'touchmove', 60);
+
+    touch(inner, 'touchend');
+
+    // Asked once, refused, and then not asked again for the rest of
+    // the press -- and nothing prevented, so the browser still owns it.
+    expect(seen.map((s) => s.type)).toEqual(['yj-swipe-start']);
+    expect(later.defaultPrevented).toBe(false);
+  });
+
+  it('gives a drag that went vertical to the scroller, and keeps it', () => {
+    // The veto is a *latch*, and that is the whole of it: a scroll
+    // that curves — which is what a thumb does — would otherwise
+    // become a swipe halfway down the list, snatching the list out
+    // from under itself. Without the latch the second move here is
+    // decisively horizontal and would claim the gesture.
+    const seen = recordSwipes(inner);
+
+    touch(inner, 'touchstart');
+    touch(inner, 'touchmove', 4, 30);
+    touch(inner, 'touchmove', 80, 35);
+    touch(inner, 'touchend');
+
+    expect(seen, 'the list has it').toHaveLength(0);
+  });
+
+  it('gives the scroller the tie as well', () => {
+    // Exactly diagonal is not "decisively sideways". A list that will
+    // not scroll is unusable; a swipe that needs a second try is not.
+    const seen = recordSwipes(inner);
+
+    touch(inner, 'touchstart');
+    touch(inner, 'touchmove', 60, 60);
+    touch(inner, 'touchend');
+
+    expect(seen).toHaveLength(0);
+  });
+
+  it('is not a tap and not a hold once it is a swipe', async () => {
+    const menus = recordMenus(inner);
+    const taps: Event[] = [];
+
+    inner.addEventListener('yj-tap', (e) => taps.push(e));
+    recordSwipes(inner);
+
+    press(inner, 'pointerdown');
+    touch(inner, 'touchstart');
+    touch(inner, 'touchmove', 40);
+    await wait(HELD);
+    touch(inner, 'touchend');
+    press(inner, 'pointerup');
+
+    expect(menus, 'the hold did not become a menu').toHaveLength(0);
+    expect(taps, 'the lift did not become a tap').toHaveLength(0);
+  });
+
+  it('always ends, even when the gesture is taken away', () => {
+    // A component that has a row half off its own left edge has no
+    // other way to learn the finger is gone -- so `touchcancel` is an
+    // end with `canceled` set, not a silence.
+    const seen = recordSwipes(inner);
+
+    touch(inner, 'touchstart');
+    touch(inner, 'touchmove', 40);
+    touch(inner, 'touchcancel');
+
+    expect(seen.at(-1)?.type).toBe('yj-swipe-end');
+    expect(seen.at(-1)?.canceled).toBe(true);
+    expect(seen.at(-1)?.dx).toBe(40);
+  });
+
+  it('is never one gesture when there are two fingers', () => {
+    const seen = recordSwipes(inner);
+    const two = new TouchEvent('touchstart', {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      touches: [
+        new Touch({ identifier: 1, target: inner, clientX: 40, clientY: 60 }),
+        new Touch({ identifier: 2, target: inner, clientX: 90, clientY: 60 }),
+      ],
+    });
+
+    inner.dispatchEvent(two);
+    touch(inner, 'touchmove', 60);
+
+    expect(seen, 'a pinch is not a swipe').toHaveLength(0);
+  });
+
+  it('swallows the click a claimed swipe ends on', () => {
+    const clicks: Event[] = [];
+
+    recordSwipes(inner);
+    inner.addEventListener('click', (e) => clicks.push(e));
+
+    touch(inner, 'touchstart');
+    touch(inner, 'touchmove', 40);
+    touch(inner, 'touchend');
+    inner.dispatchEvent(
+      new MouseEvent('click', { bubbles: true, composed: true }),
+    );
+
+    expect(clicks, 'the row was not also clicked').toHaveLength(0);
+  });
+});

frontend/test/components/touch-selection.test.ts

@@ -0,0 +1,396 @@
+/**
+ * What a finger does to a track list (plan 019, #63).
+ *
+ * The desktop semantics being diverged from are real and stay: a click
+ * selects, a double-click plays. A finger has no second button and no
+ * modifier keys, so the primary action has to be the primary gesture —
+ * and the inversion is decided **per event**, off `pointerType`, not
+ * off a viewport width or a platform flag (plan 019, decision 1).
+ *
+ * That is what these assert: the same row, in the same component, at
+ * the same width, answering a mouse one way and a finger the other.
+ *
+ * There is deliberately no double-tap. Measured on the reference
+ * device, playing a track is ~100ms end to end, and a double-tap
+ * discriminator has to hold every tap for the app's own
+ * `DOUBLE_CLICK_GRACE_MS` of 250 before it can act — 3.5x the primary
+ * interaction, to reach a menu a long press already reaches.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import '@components/track-list/track-list';
+import '@components/selection-bar/selection-bar';
+
+import { calls, flush, resetHarness, stub } from '@test/support/harness';
+import { fixture, shadow, shadowAll } from '@test/support/render';
+import { installTouchGestures, LONG_PRESS_MS } from '@utils/touch-gestures';
+
+const HELD = LONG_PRESS_MS + 120;
+
+/** Comfortably past `explore-link`'s own DOUBLE_CLICK_GRACE_MS of 250. */
+const EXPLORE_LINK_GRACE = 400;
+const BRIEF = Math.round(LONG_PRESS_MS / 4);
+const wait = (ms: number) => new Promise((r) => setTimeout(r, ms));
+
+let uninstall: (() => void) | null = null;
+
+function track(n: number) {
+  return {
+    FilePath: `/music/track-${n}.mp3`,
+    TrackName: `Track ${n}`,
+    ArtistName: 'An Artist',
+    Album: 'An Album',
+    Duration: 100 + n,
+    ID: n,
+    // Tagged, so the title's `explore-link` can actually navigate.
+    // Without an MBID it asks the backend for a local album first and
+    // gives up when nothing answers -- which makes "the tap did not
+    // navigate" true of every build, working or not.
+    ReleaseGroupMBID: 'e8f4b1d2-0000-4000-8000-00000000000' + n,
+    RecordingMBID: 'a1b2c3d4-0000-4000-8000-00000000000' + n,
+  };
+}
+
+const TRACKS = [track(1), track(2), track(3), track(4)];
+
+/** Dispatch a pointer event as a finger would produce it. */
+function press(el: EventTarget, type: string, init: PointerEventInit = {}) {
+  el.dispatchEvent(
+    new PointerEvent(type, {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      pointerType: 'touch',
+      isPrimary: true,
+      clientX: 40,
+      clientY: 60,
+      ...init,
+    }),
+  );
+}
+
+/**
+ * A whole finger tap: down, a moment, up, and **the click a browser
+ * fires afterwards**.
+ *
+ * That last event is not decoration. A tap the component claims has
+ * its click swallowed at document capture, and the click is the only
+ * thing that would otherwise select the row, follow the `explore-link`
+ * in its title, or press whatever the finger landed on. A helper that
+ * stops at `pointerup` asserts none of that and passes on a build with
+ * the swallow deleted.
+ */
+async function tap(el: EventTarget) {
+  press(el, 'pointerdown');
+  await wait(BRIEF);
+  press(el, 'pointerup');
+  el.dispatchEvent(
+    new MouseEvent('click', { bubbles: true, composed: true, cancelable: true }),
+  );
+  await wait(0);
+}
+
+/** A finger held still until the gesture resolves. */
+async function hold(el: EventTarget) {
+  press(el, 'pointerdown');
+  await wait(HELD);
+  press(el, 'pointerup');
+  await wait(0);
+}
+
+async function mountList() {
+  const el = await fixture('track-list');
+
+  (el as unknown as { tracks: unknown[] }).tracks = TRACKS;
+  await flush();
+  await el.updateComplete;
+  await wait(60);
+  await el.updateComplete;
+
+  return el;
+}
+
+function rows(el: HTMLElement): HTMLElement[] {
+  return shadowAll<HTMLElement>(el, '.track-row');
+}
+
+describe('a finger on a track row', () => {
+  beforeEach(() => {
+    resetHarness();
+    stub('library.Library.GetTracks', TRACKS);
+    stub('library.Library.GetAllLibrariesWithTrackCounts', []);
+    stub('config.Config.GetShortcuts', {});
+    stub('queue.Queue.SetQueue', null);
+    stub('queue.Queue.AddTracksToQueue', null);
+    uninstall = installTouchGestures();
+  });
+
+  afterEach(() => {
+    uninstall?.();
+    uninstall = null;
+    vi.restoreAllMocks();
+  });
+
+  it('plays the row it taps, rather than selecting it', async () => {
+    const el = await mountList();
+    const row = rows(el)[1];
+
+    expect(row, 'the list rendered rows').toBeTruthy();
+
+    await tap(row!);
+    await flush();
+
+    const queued = calls('queue.Queue.SetQueue');
+
+    expect(queued.length, 'a tap plays').toBe(1);
+
+    // From that row, in the list as displayed -- not a queue of one
+    // that stops when the song ends.
+    expect(queued[0]?.args[1]).toBe(1);
+    expect((queued[0]?.args[0] as string[]).length).toBe(TRACKS.length);
+  });
+
+  it('leaves the same row to a mouse, which still selects', async () => {
+    // The inversion is per event, so one component answers both
+    // pointers at the same width. A viewport rule cannot say this.
+    const el = await mountList();
+    const row = rows(el)[1];
+
+    row!.dispatchEvent(
+      new MouseEvent('click', { bubbles: true, composed: true }),
+    );
+    await el.updateComplete;
+
+    expect(calls('queue.Queue.SetQueue').length, 'a click does not play').toBe(0);
+    expect(rows(el)[1]?.getAttribute('aria-selected')).toBe('true');
+  });
+
+  it('enters selection mode on a long press, with that row selected', async () => {
+    const el = await mountList();
+
+    await hold(rows(el)[2]!);
+    await el.updateComplete;
+
+    const bar = shadow(el, 'selection-bar');
+
+    expect(bar, 'the action bar appears').toBeTruthy();
+    expect((bar as unknown as { count: number }).count).toBe(1);
+    expect(rows(el)[2]?.getAttribute('aria-selected')).toBe('true');
+  });
+
+  it('does not open a context menu when it enters the mode', async () => {
+    // The gesture is claimed, so the layer must not fall through to
+    // the synthetic `contextmenu` that every other surface still gets.
+    const el = await mountList();
+
+    await hold(rows(el)[0]!);
+    await el.updateComplete;
+
+    const menu = shadow(el, 'menu-surface');
+
+    expect((menu as unknown as { active?: boolean } | null)?.active ?? false).toBe(
+      false,
+    );
+  });
+
+  it('toggles rows while the mode is on, instead of playing them', async () => {
+    const el = await mountList();
+
+    await hold(rows(el)[0]!);
+    await el.updateComplete;
+    await tap(rows(el)[2]!);
+    await el.updateComplete;
+
+    expect(calls('queue.Queue.SetQueue').length, 'no track was played').toBe(0);
+    expect(
+      (shadow(el, 'selection-bar') as unknown as { count: number }).count,
+    ).toBe(2);
+  });
+
+  it('leaves the mode when the last row is deselected', async () => {
+    // Android's own lists do this, and here it matters more than
+    // convention: the mode changes what a tap means, so a mode holding
+    // nothing is a list where tapping does nothing and the bar that
+    // would explain it is showing a count of zero.
+    const el = await mountList();
+
+    await hold(rows(el)[0]!);
+    await el.updateComplete;
+    await tap(rows(el)[0]!);
+    await el.updateComplete;
+
+    expect(shadow(el, 'selection-bar')).toBeFalsy();
+  });
+
+  it('keeps the favourite icon a favourite icon', async () => {
+    // It is inside a row whose tap now plays, and it has been a 44px
+    // target since #56 -- so without the "a control inside the row
+    // owns its own tap" rule, that target silently becomes a second
+    // play button.
+    const el = await mountList();
+    const fav = rows(el)[1]?.querySelector('.fav-icon');
+
+    expect(fav, 'a row renders a favourite control').toBeTruthy();
+
+    await tap(fav!);
+    await flush();
+
+    expect(calls('queue.Queue.SetQueue').length, 'tapping it does not play').toBe(
+      0,
+    );
+  });
+
+  it('does not play a row the finger scrolled from', async () => {
+    // The failure this exists for makes the list unusable rather than
+    // merely wrong: every flick to scroll would start a track.
+    const el = await mountList();
+    const row = rows(el)[1];
+
+    press(row!, 'pointerdown');
+    press(row!, 'pointermove', { clientX: 40, clientY: 200 });
+    press(row!, 'pointerup');
+    await flush();
+
+    expect(calls('queue.Queue.SetQueue').length).toBe(0);
+  });
+});
+
+describe('<selection-bar>', () => {
+  it('renders nothing with nothing selected', async () => {
+    const el = await fixture('selection-bar', { count: 0 });
+
+    expect(shadow(el, '.bar')).toBeFalsy();
+  });
+
+  it('announces the count, which changes under the finger', async () => {
+    const el = await fixture('selection-bar', { count: 3, actions: [] });
+    const live = shadow(el, '[aria-live="polite"]');
+
+    expect(live?.textContent?.trim()).toContain('3 tracks selected');
+  });
+
+  it('names one track in the singular', async () => {
+    const el = await fixture('selection-bar', { count: 1, actions: [] });
+
+    expect(shadow(el, '[aria-live="polite"]')?.textContent?.trim()).toContain(
+      '1 track selected',
+    );
+  });
+
+  it('keeps every control at the touch floor', async () => {
+    // #56 and #186. A bar a thumb uses, in the one mode that only a
+    // thumb can enter.
+    const el = await fixture('selection-bar', {
+      count: 2,
+      actions: [{ id: 'play', label: 'Play', icon: 'play' }],
+    });
+
+    const buttons = shadowAll<HTMLElement>(el, 'button');
+
+    expect(buttons.length).toBeGreaterThan(0);
+
+    for (const button of buttons) {
+      const box = button.getBoundingClientRect();
+
+      expect(
+        Math.min(Math.round(box.width), Math.round(box.height)),
+        button.getAttribute('aria-label') ?? '',
+      ).toBeGreaterThanOrEqual(44);
+    }
+  });
+});
+
+/**
+ * What the gestures leave behind (plan 019 phase 4, #63).
+ *
+ * Every track, album and artist name in a row is an `explore-link`,
+ * which navigates on a genuine single click — and a row's single
+ * *tap* now plays. That conflict is #67's to answer properly; what
+ * this plan committed to is the narrower half of it, that **tap-to-play
+ * wins on touch**, and it falls out of phase 1's design rather than
+ * needing a rule: a claimed tap has its click swallowed at document
+ * capture, so the link's own handler never runs.
+ *
+ * It falls out, which is exactly why it is asserted. Nothing else in
+ * the suite would fail if the swallow stopped covering the link, and
+ * the symptom — a tap on a track's title navigating to its album
+ * instead of playing it — is one a phone user meets constantly and a
+ * mouse user never does.
+ */
+describe('a tap on a name inside a row', () => {
+  beforeEach(() => {
+    resetHarness();
+    stub('library.Library.GetTracks', TRACKS);
+    stub('library.Library.GetAllLibrariesWithTrackCounts', []);
+    stub('config.Config.GetShortcuts', {});
+    stub('queue.Queue.SetQueue', null);
+    uninstall = installTouchGestures();
+  });
+
+  afterEach(() => {
+    uninstall?.();
+    uninstall = null;
+    vi.restoreAllMocks();
+  });
+
+  /** Where the row's title is rendered, which is a link. */
+  function titleLink(el: HTMLElement, row: number): HTMLElement {
+    const link = rows(el)[row]?.querySelector('.explore-link');
+
+    expect(link, 'the row renders its title as a link').toBeTruthy();
+
+    return link as HTMLElement;
+  }
+
+  it('plays the row rather than navigating', async () => {
+    const el = await mountList();
+    const navigations: Event[] = [];
+
+    document.addEventListener('navigate', (e) => navigations.push(e));
+
+    await tap(titleLink(el, 1));
+    await flush();
+    // `explore-link` holds a navigation for DOUBLE_CLICK_GRACE_MS, so
+    // asserting sooner passes on a build that is about to navigate.
+    await wait(EXPLORE_LINK_GRACE);
+
+    expect(calls('queue.Queue.SetQueue').length, 'the row played').toBe(1);
+    expect(navigations, 'and nothing navigated').toHaveLength(0);
+  });
+
+  it('toggles the row while selection mode is on', async () => {
+    const el = await mountList();
+    const navigations: Event[] = [];
+
+    document.addEventListener('navigate', (e) => navigations.push(e));
+
+    await hold(rows(el)[0]!);
+    await el.updateComplete;
+    await tap(titleLink(el, 2));
+    await el.updateComplete;
+    await wait(EXPLORE_LINK_GRACE);
+
+    expect(
+      (shadow(el, 'selection-bar') as unknown as { count: number }).count,
+    ).toBe(2);
+    expect(navigations).toHaveLength(0);
+  });
+
+  it('leaves the mode on Escape', async () => {
+    // A mode changes what a tap means, so it needs an exit that is not
+    // "find the x". It is a dismissal rather than a shortcut, which is
+    // why it is not a panel-scoped binding.
+    const el = await mountList();
+
+    await hold(rows(el)[0]!);
+    await el.updateComplete;
+
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
+    );
+    await el.updateComplete;
+
+    expect(shadow(el, 'selection-bar')).toBeFalsy();
+    expect(rows(el)[0]?.getAttribute('aria-selected')).toBe('false');
+  });
+});

frontend/test/components/touch-surfaces.test.ts

@@ -0,0 +1,333 @@
+/**
+ * The other three selecting surfaces (plan 019 phase 3, #63).
+ *
+ * `track-list` got the gestures in phases 1 and 2; the queue panel and
+ * both playlist detail views are the rest, and phase 3 was "mostly
+ * wiring" only in the sense that they already share
+ * `SelectionController`. Two of them are not symmetric with the track
+ * list at all, and those two asymmetries are what this file is for:
+ *
+ * **A tap on a queue row plays that position in the queue.** Copying
+ * `track-list`'s tap — which sets the queue to the list the row is in —
+ * would rebuild the queue from the queue, discarding its source, its
+ * shuffle order and everything inserted by hand along the way. It is
+ * not the no-op it reads as.
+ *
+ * **The queue panel has no swipe, deliberately.** A right swipe means
+ * *add to the queue* everywhere it exists, and a queue row is already
+ * in the queue; the only thing it could mean there is *remove*, which
+ * is the same gesture with the opposite effect one screen away. So the
+ * assertion is that the rows do not opt in — a swipe there must not
+ * silently become a second meaning for the app's one horizontal
+ * gesture.
+ *
+ * The playlist views are the symmetric half, and they are here because
+ * they bind their gestures **per template** rather than through the
+ * `firstUpdated` delegation the two virtualized lists use, so "the
+ * handler is attached at all" is a different question in each.
+ */
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import '@components/queue-panel/queue-panel';
+import '@components/playlist-details/playlist-details';
+
+import { Events } from '../../src/events';
+import { calls, emit, flush, resetHarness, stub } from '@test/support/harness';
+import { fixture, shadow, shadowAll } from '@test/support/render';
+import { installTouchGestures, LONG_PRESS_MS } from '@utils/touch-gestures';
+import type { QueueTrack } from '@store/queue-store';
+
+const HELD = LONG_PRESS_MS + 120;
+const BRIEF = Math.round(LONG_PRESS_MS / 4);
+const wait = (ms: number) => new Promise((r) => setTimeout(r, ms));
+
+let uninstall: (() => void) | null = null;
+
+afterEach(() => {
+  // The layer is one document listener set, so a suite that leaves it
+  // installed makes the next file's gestures fire twice.
+  uninstall?.();
+  uninstall = null;
+});
+
+function queueTrack(n: number): QueueTrack {
+  return {
+    id: n,
+    audioFileId: n,
+    filePath: `/music/${n}.mp3`,
+    position: n,
+    title: `Track ${n}`,
+    artist: 'Artist',
+    album: 'Album',
+    coverArtPath: '',
+    artistMbid: '',
+    releaseGroupMbid: '',
+    recordingMbid: '',
+  };
+}
+
+const QUEUE = [1, 2, 3, 4].map(queueTrack);
+
+function playlistTrack(n: number) {
+  return {
+    ID: n,
+    FilePath: `/music/${n}.mp3`,
+    Title: `Track ${n}`,
+    Artist: 'Artist',
+    Album: 'Album',
+    Duration: 100 + n,
+    Position: n,
+    Phantom: false,
+  };
+}
+
+const PLAYLIST_TRACKS = [1, 2, 3, 4].map(playlistTrack);
+
+function press(el: EventTarget, type: string, init: PointerEventInit = {}) {
+  el.dispatchEvent(
+    new PointerEvent(type, {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      pointerType: 'touch',
+      isPrimary: true,
+      clientX: 40,
+      clientY: 60,
+      ...init,
+    }),
+  );
+}
+
+async function tap(el: EventTarget) {
+  press(el, 'pointerdown');
+  await wait(BRIEF);
+  press(el, 'pointerup');
+  await wait(0);
+}
+
+async function hold(el: EventTarget) {
+  press(el, 'pointerdown');
+  await wait(HELD);
+  press(el, 'pointerup');
+  await wait(0);
+}
+
+/** Drag a row sideways by `dx` and lift, as one finger. */
+async function swipe(el: EventTarget, dx: number) {
+  const at = (x: number) =>
+    new Touch({
+      identifier: 1,
+      target: el as Element,
+      clientX: x,
+      clientY: 100,
+    });
+  const send = (type: string, points: Touch[]) =>
+    el.dispatchEvent(
+      new TouchEvent(type, {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        touches: points,
+        changedTouches: points.length > 0 ? points : [at(0)],
+      }),
+    );
+
+  send('touchstart', [at(0)]);
+
+  for (const step of [0.25, 0.5, 0.75, 1]) {
+    send('touchmove', [at(dx * step)]);
+    await Promise.resolve();
+  }
+
+  send('touchend', []);
+  await wait(0);
+}
+
+/** Past any commit threshold the row could compute. */
+const FAR = 400;
+
+describe('a finger on a queue row', () => {
+  beforeEach(() => {
+    resetHarness();
+    stub('config.Config.GetShortcuts', {});
+    stub('queue.Queue.PlayIndex', null);
+    stub('queue.Queue.SetQueue', null);
+    stub('queue.Queue.AddTracks', null);
+    uninstall = installTouchGestures();
+  });
+
+  async function panel() {
+    const el = await fixture('queue-panel', { open: true });
+
+    emit(Events.QueueChanged, {
+      tracks: QUEUE,
+      currentIndex: 0,
+      shuffleMode: false,
+      repeatMode: 'off',
+      sourcePlaylistId: 0,
+    });
+    await flush();
+    await el.updateComplete;
+    await new Promise((r) => {
+      requestAnimationFrame(() => r(null));
+    });
+
+    return el;
+  }
+
+  const rows = (el: HTMLElement) => shadowAll<HTMLElement>(el, '.track-item');
+
+  it('plays that position rather than rebuilding the queue', async () => {
+    const el = await panel();
+
+    await tap(rows(el)[2]!);
+    await flush();
+
+    expect(calls('queue.Queue.PlayIndex')[0]?.args[0]).toBe(2);
+
+    // The asymmetry with `track-list`: setting the queue here would
+    // discard its source, its shuffle order and anything inserted by
+    // hand, which is not the no-op it reads as.
+    expect(calls('queue.Queue.SetQueue').length).toBe(0);
+  });
+
+  it('enters selection mode on a hold, with that row selected', async () => {
+    const el = await panel();
+
+    await hold(rows(el)[1]!);
+    await el.updateComplete;
+
+    const bar = shadow(el, 'selection-bar');
+
+    expect(bar, 'the action bar appears').toBeTruthy();
+    expect((bar as unknown as { count: number }).count).toBe(1);
+    expect(calls('queue.Queue.PlayIndex').length, 'and nothing played').toBe(0);
+  });
+
+  it('toggles rows while the mode is on, instead of playing them', async () => {
+    const el = await panel();
+
+    await hold(rows(el)[0]!);
+    await el.updateComplete;
+    await tap(rows(el)[2]!);
+    await el.updateComplete;
+
+    expect(calls('queue.Queue.PlayIndex').length).toBe(0);
+    expect(
+      (shadow(el, 'selection-bar') as unknown as { count: number }).count,
+    ).toBe(2);
+  });
+
+  it('has no swipe, which is a decision and not an omission', async () => {
+    const el = await panel();
+
+    expect(
+      rows(el)[1]?.hasAttribute('data-swipe'),
+      'the row does not opt into the shared rule',
+    ).toBe(false);
+
+    await swipe(rows(el)[1]!, FAR);
+    await flush();
+
+    // A right swipe means "add to the queue" everywhere it exists.
+    // The only thing it could mean on a queue row is "remove", which
+    // is the same gesture with the opposite effect one screen away.
+    expect(calls('queue.Queue.AddTracks').length).toBe(0);
+    expect(calls('queue.Queue.RemoveTracks').length).toBe(0);
+  });
+});
+
+describe('a finger on a playlist row', () => {
+  beforeEach(() => {
+    resetHarness();
+    stub('config.Config.GetShortcuts', {});
+    stub('playlist.Service.GetPlaylist', {
+      ID: 1,
+      Name: 'A Playlist',
+      TrackCount: PLAYLIST_TRACKS.length,
+    });
+    stub('playlist.Service.GetPlaylistTracks', PLAYLIST_TRACKS);
+    stub('queue.Queue.SetQueue', null);
+    stub('queue.Queue.AddTracks', null);
+    uninstall = installTouchGestures();
+  });
+
+  async function details() {
+    const el = await fixture('playlist-details', {
+      playlistId: 1,
+      playlistName: 'A Playlist',
+    });
+
+    await flush();
+    await el.updateComplete;
+    await wait(60);
+    await el.updateComplete;
+
+    return el;
+  }
+
+  const rows = (el: HTMLElement) => shadowAll<HTMLElement>(el, '.track-item');
+
+  it('plays the playlist from the row it taps', async () => {
+    const el = await details();
+
+    expect(rows(el).length, 'the list rendered rows').toBeGreaterThan(2);
+
+    await tap(rows(el)[2]!);
+    await flush();
+
+    const queued = calls('queue.Queue.SetQueue');
+
+    // The app's rule: activating one row plays the list that row is
+    // in, from that row -- not a queue of one that stops when the song
+    // ends.
+    expect(queued.length).toBe(1);
+    expect(queued[0]?.args[1]).toBe(2);
+    expect((queued[0]?.args[0] as string[]).length).toBe(
+      PLAYLIST_TRACKS.length,
+    );
+  });
+
+  it('enters selection mode on a hold', async () => {
+    const el = await details();
+
+    await hold(rows(el)[1]!);
+    await el.updateComplete;
+
+    expect(
+      (shadow(el, 'selection-bar') as unknown as { count: number } | null)
+        ?.count,
+    ).toBe(1);
+    expect(calls('queue.Queue.SetQueue').length, 'nothing played').toBe(0);
+  });
+
+  it('queues the row a swipe crosses', async () => {
+    const el = await details();
+
+    await swipe(rows(el)[1]!, FAR);
+    await flush();
+
+    expect(calls('queue.Queue.AddTracks')[0]?.args[0]).toEqual([
+      '/music/2.mp3',
+    ]);
+  });
+
+  it('opts its rows into the shared touch-action rule', async () => {
+    // Half of what makes the gesture reach us on the device, and
+    // invisible in this browser either way -- the other half is the
+    // non-passive preventDefault in `utils/touch-gestures.ts`.
+    const el = await details();
+
+    expect(rows(el)[0]?.hasAttribute('data-swipe')).toBe(true);
+
+    const css = (
+      customElements.get('playlist-details') as unknown as {
+        styles: { cssText: string }[];
+      }
+    ).styles
+      .map((s) => s.cssText)
+      .join('\n');
+
+    expect(css).toContain('touch-action: pan-y');
+  });
+});

frontend/test/components/touch-swipe.test.ts

@@ -0,0 +1,299 @@
+/**
+ * Swipe right on a track row to queue it (plan 019 phase 2, #63).
+ *
+ * `touch-gestures.test.ts` holds the recogniser — the axis rule, the
+ * claim, the guaranteed end. What is here is what the *list* does with
+ * it, and the two things that are only true of a list:
+ *
+ * **A swipe is not a selection.** It acts on the row it was made on,
+ * unless that row is one of several the user has explicitly chosen, in
+ * which case it acts on all of them — the same rule the context menu
+ * answers with, because a bar saying "40 selected" and a gesture that
+ * quietly queues one of them is two answers to the same question.
+ *
+ * **A short swipe is a no-op**, and that is the only thing standing
+ * between "add to queue" and a scroll that drifted sideways. The
+ * threshold is a fraction of the row, so it is measured from the row
+ * here rather than written down twice.
+ *
+ * What this tier cannot see is the device, and the reason is in the
+ * module's own header: Chrome 113's WebView cancels the pointer stream
+ * ~16px into any drag whatever `touch-action` says, so the gesture
+ * runs on touch events and needs `touch-action: pan-y` *and* a
+ * non-passive `preventDefault`. Both are correct in Chromium either
+ * way. The stylesheet half is asserted below for the same reason
+ * `hover-affordance.test.ts` reads a parsed stylesheet: the regression
+ * is someone tidying the declaration away, and nothing here renders
+ * differently when they do.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import '@components/track-list/track-list';
+
+import { calls, flush, resetHarness, stub } from '@test/support/harness';
+import { fixture, shadow, shadowAll } from '@test/support/render';
+import { installTouchGestures } from '@utils/touch-gestures';
+
+const wait = (ms: number) => new Promise((r) => setTimeout(r, ms));
+
+let uninstall: (() => void) | null = null;
+
+function track(n: number) {
+  return {
+    FilePath: `/music/track-${n}.mp3`,
+    TrackName: `Track ${n}`,
+    ArtistName: 'An Artist',
+    Album: 'An Album',
+    Duration: 100 + n,
+    ID: n,
+  };
+}
+
+const TRACKS = [track(1), track(2), track(3), track(4)];
+
+async function mountList() {
+  const el = await fixture('track-list');
+
+  // A definite width, because the commit threshold is a fraction of
+  // the row and a list that has not been given one is not a list.
+  el.style.display = 'block';
+  el.style.width = '400px';
+
+  (el as unknown as { tracks: unknown[] }).tracks = TRACKS;
+  await flush();
+  await el.updateComplete;
+  await wait(60);
+  await el.updateComplete;
+
+  return el;
+}
+
+function rows(el: HTMLElement): HTMLElement[] {
+  return shadowAll<HTMLElement>(el, '.track-row');
+}
+
+/**
+ * Drag a row sideways by `dx` and lift, as one finger.
+ *
+ * `onStep` runs after each move and is awaited, which is how the
+ * reveal is observed: the component writes the travel straight to the
+ * row's style but renders the pane through Lit, so it exists a frame
+ * after the move that asked for it, not during it.
+ */
+async function swipe(
+  el: EventTarget,
+  dx: number,
+  dy = 0,
+  onStep?: () => Promise<void> | void,
+): Promise<void> {
+  const at = (x: number, y: number) =>
+    new Touch({
+      identifier: 1,
+      target: el as Element,
+      clientX: x,
+      clientY: y,
+    });
+  const send = (type: string, points: Touch[]) =>
+    el.dispatchEvent(
+      new TouchEvent(type, {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        touches: points,
+        changedTouches: points.length > 0 ? points : [at(0, 0)],
+      }),
+    );
+
+  send('touchstart', [at(0, 100)]);
+
+  // Several steps, because the recogniser claims the gesture on the
+  // move that crosses its threshold and the component reads every one
+  // after it.
+  for (const step of [0.25, 0.5, 0.75, 1]) {
+    send('touchmove', [at(dx * step, 100 + dy * step)]);
+    if (onStep) await onStep();
+  }
+
+  send('touchend', []);
+}
+
+/** Where the commit threshold falls for the row as rendered. */
+function threshold(row: HTMLElement): number {
+  return Math.max(72, row.getBoundingClientRect().width * 0.3);
+}
+
+describe('a finger swiped right across a track row', () => {
+  beforeEach(() => {
+    resetHarness();
+    stub('library.Library.GetTracks', TRACKS);
+    stub('library.Library.GetAllLibrariesWithTrackCounts', []);
+    stub('config.Config.GetShortcuts', {});
+    stub('queue.Queue.SetQueue', null);
+    stub('queue.Queue.AddTracks', null);
+    uninstall = installTouchGestures();
+  });
+
+  afterEach(() => {
+    uninstall?.();
+    uninstall = null;
+    vi.restoreAllMocks();
+  });
+
+  it('adds that row to the queue', async () => {
+    const el = await mountList();
+    const row = rows(el)[1];
+
+    expect(row, 'the list rendered rows').toBeTruthy();
+
+    await swipe(row!, threshold(row!) + 40);
+    await flush();
+
+    const queued = calls('queue.Queue.AddTracks');
+
+    expect(queued.length, 'one swipe, one call').toBe(1);
+    expect(queued[0]?.args[0]).toEqual(['/music/track-2.mp3']);
+
+    // It queues; it does not play. The row that was playing keeps
+    // playing, which is the difference from a tap.
+    expect(calls('queue.Queue.SetQueue').length).toBe(0);
+  });
+
+  it('does nothing when the finger did not get far enough', async () => {
+    const el = await mountList();
+    const row = rows(el)[1];
+
+    await swipe(row!, Math.round(threshold(row!)) - 10);
+    await flush();
+
+    expect(calls('queue.Queue.AddTracks').length).toBe(0);
+  });
+
+  it('leaves a scroll that began on a row to the list', async () => {
+    // The same shape as `touch-selection.test.ts`'s "does not play a
+    // row the finger scrolled from", one gesture over: the failure
+    // this guards against makes the list unusable rather than wrong.
+    const el = await mountList();
+    const row = rows(el)[1];
+
+    await swipe(row!, 30, 200);
+    await flush();
+
+    expect(calls('queue.Queue.AddTracks').length).toBe(0);
+  });
+
+  it('reveals what it will do, in words, while the finger is down', async () => {
+    const el = await mountList();
+    const row = rows(el)[1];
+    const reveals: (string | undefined)[] = [];
+
+    await swipe(row!, threshold(row!) + 40, 0, async () => {
+      await el.updateComplete;
+      reveals.push(
+        shadow(el, '[data-testid="swipe-reveal"]')?.textContent?.trim(),
+      );
+    });
+
+    // Not only a colour (WCAG 1.4.1): the pane says what it is for,
+    // and says something different once the gesture would commit.
+    expect(reveals.some((t) => t?.includes('Add to queue'))).toBe(true);
+    expect(reveals.some((t) => t?.includes('Release to add'))).toBe(true);
+  });
+
+  it('says what it did, for anyone not watching the row', async () => {
+    const el = await mountList();
+    const row = rows(el)[1];
+
+    await swipe(row!, threshold(row!) + 40);
+    await flush();
+    await el.updateComplete;
+
+    const said = shadowAll(el, '[role="status"]')
+      .map((r) => r.textContent?.trim())
+      .join(' ');
+
+    expect(said).toContain('Track 2');
+    expect(said).toContain('queue');
+  });
+
+  it('queues the whole selection when the row is part of one', async () => {
+    // One row is a position; several rows are an explicit choice. A
+    // gesture that quietly queued the one row touched would contradict
+    // the bar above it saying how many are selected.
+    const el = await mountList();
+
+    rows(el)[1]?.dispatchEvent(
+      new MouseEvent('click', { bubbles: true, composed: true }),
+    );
+    rows(el)[3]?.dispatchEvent(
+      new MouseEvent('click', {
+        bubbles: true,
+        composed: true,
+        ctrlKey: true,
+      }),
+    );
+    await el.updateComplete;
+
+    const row = rows(el)[1];
+
+    await swipe(row!, threshold(row!) + 40);
+    await flush();
+
+    expect(calls('queue.Queue.AddTracks')[0]?.args[0]).toEqual([
+      '/music/track-2.mp3',
+      '/music/track-4.mp3',
+    ]);
+  });
+
+  it('queues only the row it touched when that row is outside the selection', async () => {
+    const el = await mountList();
+
+    rows(el)[3]?.dispatchEvent(
+      new MouseEvent('click', { bubbles: true, composed: true }),
+    );
+    await el.updateComplete;
+
+    const row = rows(el)[0];
+
+    await swipe(row!, threshold(row!) + 40);
+    await flush();
+
+    expect(calls('queue.Queue.AddTracks')[0]?.args[0]).toEqual([
+      '/music/track-1.mp3',
+    ]);
+
+    // And it did not become a way of selecting anything.
+    expect(rows(el)[3]?.getAttribute('aria-selected')).toBe('true');
+    expect(rows(el)[0]?.getAttribute('aria-selected')).toBe('false');
+  });
+
+  it('declares pan-y on the row, which is half of what makes it work', async () => {
+    // The other half is the gesture module's non-passive
+    // `preventDefault`. Neither works alone on Chrome 113 and both are
+    // irrelevant here, so this reads the stylesheet and the attribute
+    // rather than the rendering — the regression is someone tidying
+    // one of them away, and nothing in this browser looks different
+    // when they do.
+    const el = await mountList();
+
+    expect(
+      rows(el)[0]?.hasAttribute('data-swipe'),
+      'the row opts into the shared rule',
+    ).toBe(true);
+
+    const sheets = (
+      customElements.get('track-list') as unknown as {
+        styles: { cssText: string }[];
+      }
+    ).styles;
+    const css = sheets.map((s) => s.cssText).join('\n');
+    const rule = css
+      .split('}')
+      .find((block) => /\[data-swipe\]\s*\{/.test(block));
+
+    expect(rule, 'the shared rule is in this component').toBeTruthy();
+    expect(rule).toContain('touch-action: pan-y');
+    expect(css, 'never none: it takes the scrolling too').not.toContain(
+      'touch-action: none',
+    );
+  });
+});

frontend/test/setup.ts

@@ -72,6 +72,23 @@ document.body.style.margin = '0';
 
 beforeEach(() => {
   resetHarness();
+
+  // A test file does not get its own origin. `@vitest/browser-playwright`
+  // opens one BrowserContext per session and runs several files in it,
+  // one after another, so everything a component persists — the track
+  // list's sort and column widths, the cover size, `now-playing`'s
+  // scroll mode — is still there when the next file mounts the same
+  // component. That is invisible until it is intermittent, because
+  // which files share a tab and in what order changes run to run: it
+  // cost #138 three scheduled runs, one of them a PR with no frontend
+  // code in it at all.
+  //
+  // Clearing here rather than in the specs that write is deliberate —
+  // the spec that *reads* is never the one that knows. It is safe for
+  // the same reason the leak exists: files in a session are
+  // sequential, so this cannot wipe storage a concurrent file is in
+  // the middle of using.
+  localStorage.clear();
 });
 
 afterEach(() => {

internal/testfixtures/fixtures_test.go

@@ -30,12 +30,6 @@ func TestFixturesMatchManifest(t *testing.T) {
 	m := testfixtures.Load(t)
 
 	for _, want := range m.Tracks {
-		// WAV tags are write-only today; see
-		// TestWAVTagsAreNotReadableYet.
-		if want.Format == "wav" {
-			continue
-		}
-
 		t.Run(want.Path, func(t *testing.T) {
 			t.Parallel()
 
@@ -161,39 +155,6 @@ func TestDuplicateFixturesAreIndistinguishable(t *testing.T) {
 	}
 }
 
-// TestWAVTagsAreNotReadableYet pins a known gap rather than hiding it.
-//
-// backend/tagwriter writes WAV tags into a RIFF "id3 " chunk, but
-// backend/metadata reads through dhowden/tag, which recognises MP3,
-// FLAC, OGG, MP4 and DSF and has no RIFF parser at all.  So every tag
-// the app writes to a WAV is invisible to the app that wrote it, and
-// WAV tracks always scan in as untitled.
-//
-// The fixtures are tagged correctly on disk, so when the reader learns
-// to unwrap the RIFF chunk this test starts failing — which is the
-// point.  Delete it then and drop the "wav" skip in
-// TestFixturesMatchManifest.
-func TestWAVTagsAreNotReadableYet(t *testing.T) {
-	t.Parallel()
-
-	m := testfixtures.Load(t)
-
-	for _, path := range m.Case(t, testfixtures.CaseWAVTracks) {
-		got, err := metadata.ExtractTags(path)
-		if err != nil {
-			t.Fatalf("extract tags from %s: %v", path, err)
-		}
-
-		if got.Title != "" {
-			t.Errorf(
-				"%s: WAV tags are now readable (%q) — good news; "+
-					"see this test's comment for what to update",
-				filepath.Base(path), got.Title,
-			)
-		}
-	}
-}
-
 func assertTag(t *testing.T, field string, want testfixtures.Track, got string) {
 	t.Helper()