From f15b801a4cd458b6e49a09184c176da70114f1ef Mon Sep 17 00:00:00 2001
From: NeoVand <mmv@mit.edu>
Date: Thu, 27 Aug 2026 02:27:05 -0500
Subject: [PATCH 1/3] feat: select text on an original page, and act on it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The page was a picture, so nothing on it could be selected — which left
explain and note-taking as reflowed-view-only, since both begin with a
selection.

There is a layer of invisible words over the paper now, one span per word,
positioned in PDF points and scaled with the sheet so a zoom moves it
rather than rebuilding it. It is built from the boxes the placement
already used rather than from pdf.js's own text layer, which means each
word arrives knowing its passage and its position within it — so a
selection is read by asking its endpoints what they are, and the reader's
existing "play from here", "highlight", "note" and "explain" paths take it
exactly as they take a selection made in the reflowed view.

Words a passage claimed only as a region — a table row, placed by its
cells rather than by the words of its reading — are attributed to it too.
Without that the title page of a paper, which is mostly tables, was the
one part that could not be selected into anything: 351 of 391 words on it
knew their passage, now 389.

The selection actions and the explain panel are snippets rendered inside
whichever view is showing, so they sit in that view's scroll and travel
with it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/lib/components/PdfPageView.svelte | 156 +++++++++++++++-
 src/lib/domain/pdf-layout.spec.ts     |  80 ++++++++
 src/lib/domain/pdf-layout.ts          |  76 ++++++++
 src/routes/read/+page.svelte          | 255 ++++++++++++++------------
 tests/reader.e2e.ts                   |  78 ++++++++
 5 files changed, 525 insertions(+), 120 deletions(-)

diff --git a/src/lib/components/PdfPageView.svelte b/src/lib/components/PdfPageView.svelte
index fa18c82..e652c5b 100644
--- a/src/lib/components/PdfPageView.svelte
+++ b/src/lib/components/PdfPageView.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
 	import { on } from 'svelte/events';
 	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+	import type { Snippet } from 'svelte';
 	import type { NormalizedDocument, SpeechSegment } from '$lib/domain/types';
-	import type { PageRect, SegmentPlacement } from '$lib/domain/pdf-layout';
+	import {
+		selectableWords,
+		type PageRect,
+		type SegmentPlacement,
+		type SelectableWord
+	} from '$lib/domain/pdf-layout';
 	import { openPdfRenderer } from '$lib/services/pdf-pages';
 	import { openPdfLayout } from '$lib/services/pdf-layout';
 	import { parseColor, type Rgb } from '$lib/domain/page-tone';
@@ -27,6 +33,27 @@
 		onPlaySegment: (segmentId: string) => void;
 		/** The reader scrolled by hand; whatever was following should stop. */
 		onManualScroll?: () => void;
+		/** A selection was made over the page, or cleared. Positions are in this
+		 * view's scroll space, which is why they are worked out here. */
+		onSelect?: (selection: PageSelection | undefined) => void;
+		/** What the reader lays over a selection — its actions, its explain
+		 * panel — rendered inside this view's scroll so it travels with the
+		 * page and is positioned in the same coordinates. */
+		overlay?: Snippet;
+	}
+
+	/** What a selection over the paper amounts to, in the terms the reader
+	 * already speaks: a passage and word to start from, one to stop at, and
+	 * where to put the actions. */
+	export interface PageSelection {
+		segmentId: string;
+		wordIndex: number;
+		endSegmentId: string;
+		endWordIndex: number;
+		excerpt: string;
+		left: number;
+		top: number;
+		placement: 'above' | 'below';
 	}
 
 	let {
@@ -40,7 +67,9 @@
 		assistantPointId,
 		follow = true,
 		onPlaySegment,
-		onManualScroll
+		onManualScroll,
+		onSelect,
+		overlay
 	}: Props = $props();
 
 	/** US Letter, for a document whose parse recorded no page sizes. */
@@ -66,6 +95,9 @@
 		{ width: number; tone: { paper: Rgb; ink: Rgb } | undefined }
 	>();
 	const placements = new SvelteMap<number, Map<string, SegmentPlacement>>();
+	/** Each page's words, tagged with the passage they belong to — the layer
+	 * that makes the paper selectable. */
+	const words = new SvelteMap<number, SelectableWord[]>();
 	let hovered = $state<{ page: number; segmentId: string }>();
 
 	let sizes = $derived.by(() => {
@@ -175,7 +207,10 @@
 			owedFollow = undefined;
 			onManualScroll?.();
 		};
+		const afterSelection = () => requestAnimationFrame(readSelection);
 		const removeListeners = [
+			on(node, 'pointerup', afterSelection),
+			on(node, 'keyup', afterSelection),
 			on(node, 'scroll', measureFocus, { passive: true }),
 			on(node, 'wheel', stopFollowing, { passive: true }),
 			on(node, 'touchmove', stopFollowing, { passive: true })
@@ -369,13 +404,19 @@
 		if (placedAgainst !== currentSegments) {
 			placedAgainst = currentSegments;
 			placements.clear();
+			words.clear();
 		}
 		const layout = openPdfLayout(book);
 		let cancelled = false;
 		for (const page of pages) {
 			if (placements.has(page)) continue;
-			void layout.placements(page, pageCount, currentSegments, blockText).then((placed) => {
-				if (!cancelled && placedAgainst === currentSegments) placements.set(page, placed);
+			void Promise.all([
+				layout.placements(page, pageCount, currentSegments, blockText),
+				layout.pageLayout(page, pageCount)
+			]).then(([placed, geometry]) => {
+				if (cancelled || placedAgainst !== currentSegments) return;
+				placements.set(page, placed);
+				words.set(page, selectableWords(geometry?.boxes ?? [], [...placed.values()]));
 			});
 		}
 		return () => {
@@ -462,6 +503,60 @@
 		hovered = segmentId ? { page, segmentId } : undefined;
 	}
 
+	/**
+	 * Read the browser's selection back as passages.
+	 *
+	 * Every word carries the passage it belongs to, so this is a matter of
+	 * asking the endpoints of the range what they are rather than working it
+	 * out from geometry. A selection that starts or ends on a word no passage
+	 * claimed — an axis label, part of an equation — falls back to the nearest
+	 * claimed word inside the range, and if there is none there is nothing to
+	 * play or annotate.
+	 */
+	function readSelection(): void {
+		if (!scroller) return;
+		const selection = window.getSelection();
+		if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
+			onSelect?.(undefined);
+			return;
+		}
+		const range = selection.getRangeAt(0);
+		if (!scroller.contains(range.commonAncestorContainer)) return;
+		const claimed = [...scroller.querySelectorAll<HTMLElement>('.page-text span[data-segment-id]')]
+			.filter((span) => range.intersectsNode(span))
+			.map((span) => ({
+				segmentId: span.dataset.segmentId ?? '',
+				wordIndex: Number(span.dataset.wordIndex ?? 0)
+			}));
+		if (!claimed.length) {
+			onSelect?.(undefined);
+			return;
+		}
+		const first = claimed[0];
+		const last = claimed[claimed.length - 1];
+		const bounds = range.getBoundingClientRect();
+		const stack = scroller.getBoundingClientRect();
+		const placement = bounds.top - stack.top >= 54 ? 'above' : 'below';
+		onSelect?.({
+			segmentId: first.segmentId,
+			wordIndex: first.wordIndex,
+			endSegmentId: last.segmentId,
+			endWordIndex: last.wordIndex,
+			excerpt: selection.toString().replace(/\s+/g, ' ').trim(),
+			left: Math.max(
+				120,
+				Math.min(
+					scroller.clientWidth - 120,
+					scroller.scrollLeft + bounds.left + bounds.width / 2 - stack.left
+				)
+			),
+			top:
+				scroller.scrollTop +
+				(placement === 'above' ? bounds.top - stack.top - 8 : bounds.bottom - stack.top + 8),
+			placement
+		});
+	}
+
 	function handleActivate(event: MouseEvent, page: number): void {
 		const { x, y } = pointerPoint(event, page);
 		const segmentId = segmentAt(page, x, y);
@@ -577,6 +672,18 @@
 				<canvas {@attach trackCanvas(size.page)} aria-label={`Page ${size.page} of ${book.title}`}
 				></canvas>
 				{#if live.has(size.page)}
+					<!-- The words, invisible, over the picture of them: this is what
+					     the browser selects, and each one already knows the passage
+					     it belongs to. Laid out in PDF points and scaled with the
+					     sheet, so zooming moves it without rebuilding it. -->
+					<div class="page-text" style:transform={`scale(${scale})`}>
+						{#each words.get(size.page) ?? [] as word, index (index)}<span
+								data-segment-id={word.segmentId}
+								data-word-index={word.wordIndex}
+								style={`left:${word.x}px;top:${word.y}px;width:${word.width}px;height:${word.height}px;font-size:${word.height}px`}
+								>{word.text}</span
+							>{word.endsLine ? '\n' : ' '}{/each}
+					</div>
 					<div class="page-marks" aria-hidden="true">
 						{#each marksFor(size.page, placed) as mark (mark.key)}
 							<span class="mark {mark.kind}" style={styleFor(mark.rect, size.page)}></span>
@@ -589,10 +696,14 @@
 			</div>
 		</div>
 	{/each}
+	{@render overlay?.()}
 </div>
 
 <style>
 	.page-stack {
+		/* The selection actions are absolutely positioned against this, and it
+		   is this scroll their coordinates are measured in. */
+		position: relative;
 		display: flex;
 		flex: 1;
 		flex-direction: column;
@@ -660,6 +771,40 @@
 		height: 100%;
 	}
 
+	/* Positioned in PDF points and scaled as a whole, so a zoom is a transform
+	   rather than a thousand style recalculations. The text is invisible and
+	   sized to its own box: what matters is that the browser's selection lands
+	   exactly on the word the page prints there. */
+	.page-text {
+		position: absolute;
+		top: 0;
+		left: 0;
+		/* The spaces and newlines between words are there so a copied selection
+		   reads properly, but they are the only children in normal flow — at any
+		   inherited size they stack up as a visible column of blank lines down
+		   the corner of the page. The words set their own size. */
+		font-size: 0;
+		line-height: 1;
+		white-space: pre;
+		transform-origin: 0 0;
+		color: transparent;
+		cursor: text;
+		user-select: text;
+	}
+
+	.page-text span {
+		position: absolute;
+		overflow: hidden;
+		white-space: pre;
+		transform-origin: 0 0;
+	}
+
+	/* The highlight the browser paints for a selection, kept faint: the passage
+	   marks underneath are the ones doing the talking. */
+	.page-text ::selection {
+		background: color-mix(in srgb, var(--primary) 26%, transparent);
+	}
+
 	/* Multiply keeps the marks under the ink: a highlighted line stays as
 	   readable as an unhighlighted one, which is the whole point of reading
 	   the original. */
@@ -667,6 +812,9 @@
 		position: absolute;
 		mix-blend-mode: multiply;
 		inset: 0;
+		/* Painted over the words, so it must not stand between them and the
+		   pointer that is trying to select them. */
+		pointer-events: none;
 	}
 
 	.mark {
diff --git a/src/lib/domain/pdf-layout.spec.ts b/src/lib/domain/pdf-layout.spec.ts
index 29fac74..d9fe14d 100644
--- a/src/lib/domain/pdf-layout.spec.ts
+++ b/src/lib/domain/pdf-layout.spec.ts
@@ -7,6 +7,7 @@ import {
 	pageWordBoxes,
 	placeSegments,
 	readingOrder,
+	selectableWords,
 	segmentsForPage,
 	type PageWordBox,
 	type PlaceableSegment
@@ -399,3 +400,82 @@ describe('segmentsForPage', () => {
 		expect(placeables[0].matchText).toBeUndefined();
 	});
 });
+
+describe('selectableWords', () => {
+	const page = [
+		...line('The harbour master kept a ledger', 100),
+		...line('of every tide that entered', 120)
+	];
+
+	it('tags each word with the passage it belongs to', () => {
+		const [placement] = placeSegments(page, [placeable('s1', 'The harbour master')], 1);
+		const words = selectableWords(page, [placement]);
+		expect(words.slice(0, 3).map((word) => [word.text, word.segmentId, word.wordIndex])).toEqual([
+			['The', 's1', 0],
+			['harbour', 's1', 1],
+			['master', 's1', 2]
+		]);
+	});
+
+	it('keeps words no passage claimed, so they still select and copy', () => {
+		const [placement] = placeSegments(page, [placeable('s1', 'The harbour master')], 1);
+		const words = selectableWords(page, [placement]);
+		const orphan = words.find((word) => word.text === 'ledger');
+		expect(orphan).toBeDefined();
+		expect(orphan?.segmentId).toBeUndefined();
+	});
+
+	it('marks where a line ends, so copied text breaks where the page does', () => {
+		const words = selectableWords(page, []);
+		expect(words.find((word) => word.text === 'ledger')?.endsLine).toBe(true);
+		expect(words.find((word) => word.text === 'harbour')?.endsLine).toBeUndefined();
+		expect(words[words.length - 1].endsLine).toBe(true);
+	});
+
+	it('gives the earlier passage the word where two placements overlap', () => {
+		// Placement itself is monotonic and cannot produce this, but a table row
+		// and the paragraph it interrupts can end up claiming the same ground.
+		const shared = { x: 0, y: 100, width: 400, height: 12 };
+		const claim = (segmentId: string) => ({
+			segmentId,
+			page: 1,
+			rects: [shared],
+			wordRects: [shared],
+			coverage: 1
+		});
+		const words = selectableWords(line('one', 100), [claim('first'), claim('second')]);
+		expect(words[0].segmentId).toBe('first');
+	});
+
+	it('attributes the words of a passage placed only as a region', () => {
+		// A table row is placed by its cells, not by the words of its reading,
+		// so it carries rectangles but no per-word boxes.
+		const table = line('Self-Attention Onnd Restricted', 200);
+		const [placement] = placeSegments(
+			table,
+			[
+				placeable('row', 'Layer Type: Self-Attention.', {
+					matchText: 'Self-Attention Onnd Restricted'
+				})
+			],
+			1
+		);
+		expect(placement.wordRects.every((rect) => rect === undefined)).toBe(true);
+		const words = selectableWords(table, [placement]);
+		expect(words.map((word) => word.segmentId)).toEqual(['row', 'row', 'row']);
+		expect(words.map((word) => word.wordIndex)).toEqual([0, 0, 0]);
+	});
+
+	it('prefers a word’s own box to a region that also covers it', () => {
+		const rect = { x: 0, y: 100, width: 400, height: 12 };
+		const words = selectableWords(line('one', 100), [
+			{ segmentId: 'region', page: 1, rects: [rect], wordRects: [undefined], coverage: 1 },
+			{ segmentId: 'exact', page: 1, rects: [rect], wordRects: [rect], coverage: 1 }
+		]);
+		expect(words[0].segmentId).toBe('exact');
+	});
+
+	it('has nothing to offer for a page with no words', () => {
+		expect(selectableWords([], [])).toEqual([]);
+	});
+});
diff --git a/src/lib/domain/pdf-layout.ts b/src/lib/domain/pdf-layout.ts
index ce3a663..1d054ba 100644
--- a/src/lib/domain/pdf-layout.ts
+++ b/src/lib/domain/pdf-layout.ts
@@ -680,6 +680,82 @@ export function placeSegments(
  * to find the sentences that actually landed on it. */
 const SPILL_WORDS = 400;
 
+/** One word of a page, ready to be laid out as selectable text over it. */
+export interface SelectableWord extends PageRect {
+	text: string;
+	/** The passage this word belongs to, when placement found one. Words with
+	 * no passage — an axis label, an equation's characters, a running head —
+	 * are still selectable and still copy; they simply have nothing to play. */
+	segmentId?: string;
+	wordIndex?: number;
+	/** True when the next word begins a new line, so copied text breaks where
+	 * the page breaks. */
+	endsLine?: boolean;
+}
+
+/**
+ * The page's words, tagged with the passage each belongs to.
+ *
+ * This is what makes an original page selectable. Rather than laying pdf.js's
+ * own text layer over the canvas and then working out what a selection means,
+ * the layer is built from the same boxes the placement used — so a selected
+ * word already knows its passage and its position within it, and the reader's
+ * existing "play from here", "highlight" and "explain" paths take it exactly
+ * as they take a selection made in the reflowed view.
+ *
+ * A word is attributed to whichever placed passage's box contains its centre.
+ * Passages are considered in document order, so where two placements overlap —
+ * a table row and the paragraph it interrupts — the earlier one wins, which is
+ * the order a reader would read them in.
+ */
+export function selectableWords(
+	boxes: PageWordBox[],
+	placements: SegmentPlacement[]
+): SelectableWord[] {
+	const contains = (rect: PageRect, x: number, y: number) =>
+		x >= rect.x && x <= rect.x + rect.width && y >= rect.y && y <= rect.y + rect.height;
+	const targets: Array<{ rect: PageRect; segmentId: string; wordIndex: number }> = [];
+	// Region claims stand in where a passage has no per-word boxes at all: a
+	// table row is placed by its cells rather than by the words of its reading,
+	// so its words know their passage but not their position within it. Without
+	// this they would be the one part of the page that cannot be selected into
+	// a passage — and on a paper's title page that is most of it.
+	const regions: Array<{ rect: PageRect; segmentId: string }> = [];
+	for (const placement of placements) {
+		let placed = false;
+		placement.wordRects.forEach((rect, wordIndex) => {
+			if (!rect) return;
+			placed = true;
+			targets.push({ rect, segmentId: placement.segmentId, wordIndex });
+		});
+		if (placed) continue;
+		for (const rect of placement.rects) regions.push({ rect, segmentId: placement.segmentId });
+	}
+	return boxes.map((box, index) => {
+		const centerX = box.x + box.width / 2;
+		const centerY = box.y + box.height / 2;
+		const target =
+			targets.find(({ rect }) => contains(rect, centerX, centerY)) ??
+			regions
+				.filter(({ rect }) => contains(rect, centerX, centerY))
+				.map(({ segmentId }) => ({ segmentId, wordIndex: 0 }))[0];
+		const next = boxes[index + 1];
+		const endsLine =
+			!next ||
+			Math.abs(next.y + next.height / 2 - centerY) >= Math.max(box.height, next.height) / 2 ||
+			next.x + next.width < box.x;
+		return {
+			text: box.text,
+			x: box.x,
+			y: box.y,
+			width: box.width,
+			height: box.height,
+			...(target ? { segmentId: target.segmentId, wordIndex: target.wordIndex } : {}),
+			...(endsLine ? { endsLine: true } : {})
+		};
+	});
+}
+
 /** The passages to align against one page: everything anchored to it, plus a
  * stretch of each neighbour so a paragraph straddling the page break is placed
  * from whichever side is looking.
diff --git a/src/routes/read/+page.svelte b/src/routes/read/+page.svelte
index 00238ee..e330322 100644
--- a/src/routes/read/+page.svelte
+++ b/src/routes/read/+page.svelte
@@ -1404,6 +1404,141 @@
 	</div>
 {/snippet}
 
+<!-- The explain panel, defined here so both views can render it inside
+     their own scroll — its coordinates belong to whichever is showing. -->
+{#snippet explainPanel()}
+	{#if explainBox}
+		<div
+			class="explain-box"
+			class:below={explainBox.placement === 'below'}
+			style:left={`${explainBox.left}px`}
+			style:top={`${explainBox.top}px`}
+			role="dialog"
+			aria-label="Explain the selected passage"
+		>
+			<div class="explain-head">
+				<Icon icon={Sparkles} size={12} aria-hidden="true" />
+				<span class="explain-excerpt">{explainBox.selection}</span>
+				<button
+					class="explain-close"
+					type="button"
+					aria-label="Close the explain panel"
+					onclick={closeExplainBox}
+				>
+					<Icon icon={X} size={13} />
+				</button>
+			</div>
+			<div class="explain-row">
+				<textarea
+					rows="1"
+					placeholder="What are you wondering? (optional)"
+					aria-label="Your question about the selection"
+					disabled={explainStatus !== 'idle'}
+					bind:value={explainQuestion}
+					onkeydown={handleExplainKeydown}
+					{@attach focusExplainInput}></textarea>
+				{#if explainStatus === 'idle'}
+					<button
+						class="explain-run"
+						type="button"
+						aria-label="Explain aloud"
+						title="Explain aloud"
+						onclick={() => void runExplain()}
+					>
+						<Icon icon={Sparkles} size={13} />
+					</button>
+				{:else}
+					<button
+						class="explain-run thinking"
+						type="button"
+						aria-label="Cancel"
+						title="Cancel"
+						onclick={closeExplainBox}
+					>
+						<Icon icon={LoaderCircle} class="spin" size={13} />
+					</button>
+				{/if}
+			</div>
+			{#if explainError}
+				<p class="explain-error" role="alert">{explainError}</p>
+			{/if}
+		</div>
+	{/if}
+{/snippet}
+
+<!-- What the page view renders inside its own scroll: the same selection
+     actions and explain panel the reflowed canvas shows, positioned in that
+     view's coordinates. -->
+{#snippet pageOverlay()}
+	{@render selectionActions()}
+	{@render explainPanel()}
+{/snippet}
+
+<!-- The bar that appears over a selection. Defined here rather than inline
+     because both views need it: the reflowed canvas renders it directly, and
+     the page view is handed it to render inside its own scroll. -->
+{#snippet selectionActions()}
+	{#if narrationStartAction}
+		{@const selectedSegment = book?.segments.find(
+			(segment) => segment.id === narrationStartAction?.segmentId
+		)}
+		{#if selectedSegment}
+			<div
+				class="selection-actions"
+				class:below={narrationStartAction.placement === 'below'}
+				style:left={`${narrationStartAction.left}px`}
+				style:top={`${narrationStartAction.top}px`}
+				role="group"
+				aria-label="Actions for the selected text"
+			>
+				<button
+					class="selection-action"
+					type="button"
+					aria-label={`Play the selected text: ${narrationStartAction.excerpt}`}
+					onpointerdown={(event) => event.preventDefault()}
+					onclick={playSelectedPassage}
+				>
+					<Icon icon={Play} size={12} fill="currentColor" />
+					Play selection
+				</button>
+				<span class="selection-actions-divider" aria-hidden="true"></span>
+				<button
+					class="selection-action"
+					type="button"
+					aria-label={`Explain the selected text: ${narrationStartAction.excerpt}`}
+					onpointerdown={(event) => event.preventDefault()}
+					onclick={openExplainBox}
+				>
+					<Icon icon={Sparkles} size={12} />
+					Explain
+				</button>
+				<span class="selection-actions-divider" aria-hidden="true"></span>
+				<button
+					class="selection-action"
+					type="button"
+					aria-label={`Highlight the selected text: ${narrationStartAction.excerpt}`}
+					onpointerdown={(event) => event.preventDefault()}
+					onclick={() => annotateSelection(false)}
+				>
+					<Icon icon={Highlighter} size={12} />
+					Highlight
+				</button>
+				<span class="selection-actions-divider" aria-hidden="true"></span>
+				<button
+					class="selection-action"
+					type="button"
+					aria-label={`Add a margin note to the selected text: ${narrationStartAction.excerpt}`}
+					onpointerdown={(event) => event.preventDefault()}
+					onclick={() => annotateSelection(true)}
+				>
+					<Icon icon={StickyNote} size={12} />
+					Note
+				</button>
+			</div>
+		{/if}
+	{/if}
+{/snippet}
+
 {#snippet renderSegment(block: DocumentBlock, segment: SpeechSegment)}
 	{@const isActive = activeSegmentId === segment.id}
 	<span
@@ -2102,6 +2237,8 @@
 					follow={player.autoFollow}
 					onPlaySegment={playPlacedSegment}
 					onManualScroll={() => (player.autoFollow = false)}
+					onSelect={(selection) => (narrationStartAction = selection)}
+					overlay={pageOverlay}
 				/>
 			{:else}
 				<article
@@ -2145,65 +2282,7 @@
 						{/each}
 					</div>
 
-					{#if narrationStartAction}
-						{@const selectedSegment = book.segments.find(
-							(segment) => segment.id === narrationStartAction?.segmentId
-						)}
-						{#if selectedSegment}
-							<div
-								class="selection-actions"
-								class:below={narrationStartAction.placement === 'below'}
-								style:left={`${narrationStartAction.left}px`}
-								style:top={`${narrationStartAction.top}px`}
-								role="group"
-								aria-label="Actions for the selected text"
-							>
-								<button
-									class="selection-action"
-									type="button"
-									aria-label={`Play the selected text: ${narrationStartAction.excerpt}`}
-									onpointerdown={(event) => event.preventDefault()}
-									onclick={playSelectedPassage}
-								>
-									<Icon icon={Play} size={12} fill="currentColor" />
-									Play selection
-								</button>
-								<span class="selection-actions-divider" aria-hidden="true"></span>
-								<button
-									class="selection-action"
-									type="button"
-									aria-label={`Explain the selected text: ${narrationStartAction.excerpt}`}
-									onpointerdown={(event) => event.preventDefault()}
-									onclick={openExplainBox}
-								>
-									<Icon icon={Sparkles} size={12} />
-									Explain
-								</button>
-								<span class="selection-actions-divider" aria-hidden="true"></span>
-								<button
-									class="selection-action"
-									type="button"
-									aria-label={`Highlight the selected text: ${narrationStartAction.excerpt}`}
-									onpointerdown={(event) => event.preventDefault()}
-									onclick={() => annotateSelection(false)}
-								>
-									<Icon icon={Highlighter} size={12} />
-									Highlight
-								</button>
-								<span class="selection-actions-divider" aria-hidden="true"></span>
-								<button
-									class="selection-action"
-									type="button"
-									aria-label={`Add a margin note to the selected text: ${narrationStartAction.excerpt}`}
-									onpointerdown={(event) => event.preventDefault()}
-									onclick={() => annotateSelection(true)}
-								>
-									<Icon icon={StickyNote} size={12} />
-									Note
-								</button>
-							</div>
-						{/if}
-					{/if}
+					{@render selectionActions()}
 
 					{#each annotationMarkers as marker (marker.id)}
 						<button
@@ -2273,63 +2352,7 @@
 						</div>
 					{/if}
 
-					{#if explainBox}
-						<div
-							class="explain-box"
-							class:below={explainBox.placement === 'below'}
-							style:left={`${explainBox.left}px`}
-							style:top={`${explainBox.top}px`}
-							role="dialog"
-							aria-label="Explain the selected passage"
-						>
-							<div class="explain-head">
-								<Icon icon={Sparkles} size={12} aria-hidden="true" />
-								<span class="explain-excerpt">{explainBox.selection}</span>
-								<button
-									class="explain-close"
-									type="button"
-									aria-label="Close the explain panel"
-									onclick={closeExplainBox}
-								>
-									<Icon icon={X} size={13} />
-								</button>
-							</div>
-							<div class="explain-row">
-								<textarea
-									rows="1"
-									placeholder="What are you wondering? (optional)"
-									aria-label="Your question about the selection"
-									disabled={explainStatus !== 'idle'}
-									bind:value={explainQuestion}
-									onkeydown={handleExplainKeydown}
-									{@attach focusExplainInput}></textarea>
-								{#if explainStatus === 'idle'}
-									<button
-										class="explain-run"
-										type="button"
-										aria-label="Explain aloud"
-										title="Explain aloud"
-										onclick={() => void runExplain()}
-									>
-										<Icon icon={Sparkles} size={13} />
-									</button>
-								{:else}
-									<button
-										class="explain-run thinking"
-										type="button"
-										aria-label="Cancel"
-										title="Cancel"
-										onclick={closeExplainBox}
-									>
-										<Icon icon={LoaderCircle} class="spin" size={13} />
-									</button>
-								{/if}
-							</div>
-							{#if explainError}
-								<p class="explain-error" role="alert">{explainError}</p>
-							{/if}
-						</div>
-					{/if}
+					{@render explainPanel()}
 				</article>
 			{/if}
 			<p class="sr-only" aria-live="polite">{narrationAnnouncement}</p>
diff --git a/tests/reader.e2e.ts b/tests/reader.e2e.ts
index 329ee74..bc23dc1 100644
--- a/tests/reader.e2e.ts
+++ b/tests/reader.e2e.ts
@@ -1903,6 +1903,84 @@ test('reads a PDF as its own pages, with the spoken passage painted on', async (
  * other — it steps through them one at a time. */
 const THEME_COUNT = 12;
 
+test('selects text on an original page and acts on it', async ({ page }) => {
+	await openReadyLibrary(page);
+	const pdf = await PDFDocument.create();
+	const font = await pdf.embedFont(StandardFonts.Helvetica);
+	const sheet = pdf.addPage([612, 792]);
+	sheet.drawText('Ledgers of the Coast', { x: 72, y: 720, size: 22, font });
+	sheet.drawText('The harbour master kept a ledger of every tide.', {
+		x: 72,
+		y: 660,
+		size: 12,
+		font
+	});
+	sheet.drawText('Each entry recorded the hour and the weather.', {
+		x: 72,
+		y: 640,
+		size: 12,
+		font
+	});
+	await page.locator('#document-upload').setInputFiles({
+		name: 'ledgers.pdf',
+		mimeType: 'application/pdf',
+		buffer: Buffer.from(await pdf.save())
+	});
+	await expect(page.locator('.reading-canvas')).toBeVisible({ timeout: 60_000 });
+	await page.getByRole('button', { name: /Switch view/ }).click();
+	const slot = page.locator('.page-slot[data-page="1"]');
+	await expect
+		.poll(async () => slot.locator('canvas').evaluate((node: HTMLCanvasElement) => node.width), {
+			timeout: 30_000
+		})
+		.toBeGreaterThan(400);
+
+	// The paper carries a word for every word printed on it, and almost all of
+	// them know which passage they belong to.
+	const spans = slot.locator('.page-text span');
+	await expect.poll(async () => spans.count()).toBeGreaterThan(10);
+	expect(await slot.locator('.page-text span[data-segment-id]').count()).toBeGreaterThan(
+		(await spans.count()) * 0.8
+	);
+
+	// Drag across part of the first body line.
+	const drag = await page.evaluate(() => {
+		const words = [
+			...document.querySelectorAll<HTMLElement>('.page-slot[data-page="1"] .page-text span')
+		];
+		const start = words.find((word) => word.textContent === 'harbour');
+		const end = words.find((word) => word.textContent === 'ledger');
+		if (!start || !end) return null;
+		const a = start.getBoundingClientRect();
+		const b = end.getBoundingClientRect();
+		return { x1: a.x + 1, y1: a.y + a.height / 2, x2: b.right - 1, y2: b.y + b.height / 2 };
+	});
+	expect(drag).not.toBeNull();
+	await page.mouse.move(drag!.x1, drag!.y1);
+	await page.mouse.down();
+	await page.mouse.move(drag!.x2, drag!.y2, { steps: 10 });
+	await page.mouse.up();
+	expect(await page.evaluate(() => getSelection()?.toString() ?? '')).toContain('harbour');
+
+	// The actions travel with the page, in its own scroll.
+	const actions = page.getByRole('group', { name: 'Actions for the selected text' });
+	await expect(actions).toBeVisible();
+	expect(await page.locator('.page-stack .selection-actions').count()).toBe(1);
+
+	// Highlighting from the paper leaves a mark on the paper.
+	await actions.getByRole('button', { name: /^Highlight/ }).click();
+	await expect.poll(async () => page.locator('.mark.annotated').count()).toBeGreaterThan(0);
+
+	// And a selection can be played from where it was printed.
+	await page.mouse.move(drag!.x1, drag!.y1);
+	await page.mouse.down();
+	await page.mouse.move(drag!.x2, drag!.y2, { steps: 10 });
+	await page.mouse.up();
+	await expect(actions).toBeVisible();
+	await actions.getByRole('button', { name: /^Play the selected/ }).click();
+	await expect(page.getByRole('button', { name: 'Pause' })).toBeVisible({ timeout: 20_000 });
+});
+
 test('draws each original page once while the reader scrolls back and forth', async ({ page }) => {
 	await openReadyLibrary(page);
 	const pdf = await PDFDocument.create();

From 3bf69d95d10e47ae5566e62cbf8b75287713ba79 Mon Sep 17 00:00:00 2001
From: NeoVand <mmv@mit.edu>
Date: Thu, 27 Aug 2026 08:27:56 -0500
Subject: [PATCH 2/3] fix: stop the selection printing a second copy of the
 words, and let a click put it away
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The invisible text layer is drawn transparent so the page's own picture of
the words is what the reader sees. A selection overrides that: the browser
paints selected text in its own colour, so every selected word appeared
twice — once as printed, once as a slightly-off ghost beside it. The ghost
was beside rather than on top because the spans were sized by their boxes
but rendered at whatever width the fallback font gave them, so `overflow:
hidden` clipped some and let others run long. Both are now fixed at once:
each word is measured in the family the layer actually uses and squeezed
onto its box with `scaleX`, and `::selection` keeps the highlight while
holding the text transparent.

Putting a selection away was also close to impossible. Pressing on a blank
part of a page — a margin, a figure, the space between paragraphs — places
no caret, because there is no text node under the pointer, so the browser
leaves the old selection standing and the actions with it. And a selection
made anywhere else on the screen was ignored rather than treated as the
page's selection ending, which stranded the actions on the paper. The
selection is now watched on the document, an outside selection clears it,
and a press on blank paper drops it by hand.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/lib/components/PdfPageView.svelte |  70 ++++++++++++++---
 tests/reader.e2e.ts                   | 107 ++++++++++++++++++++++++--
 2 files changed, 162 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/PdfPageView.svelte b/src/lib/components/PdfPageView.svelte
index e652c5b..4f8a153 100644
--- a/src/lib/components/PdfPageView.svelte
+++ b/src/lib/components/PdfPageView.svelte
@@ -207,10 +207,33 @@
 			owedFollow = undefined;
 			onManualScroll?.();
 		};
-		const afterSelection = () => requestAnimationFrame(readSelection);
+		// Watched on the document, not on the stack: a click that lands anywhere
+		// else — the sidebar, the player, the header — drops the selection, and
+		// the actions have to go with it. Listening only here left them stranded
+		// on the page with nothing that would dismiss them.
+		let queued = false;
+		const afterSelection = () => {
+			if (queued) return;
+			queued = true;
+			requestAnimationFrame(() => {
+				queued = false;
+				readSelection();
+			});
+		};
+		// Pressing on a blank part of the page — a margin, a figure, the gap
+		// between paragraphs — puts no caret anywhere, because there is no text
+		// node under the pointer to put one in. The browser therefore leaves the
+		// old selection standing, and with it the actions, which is what made
+		// them feel impossible to dismiss. Clearing it by hand is what clicking
+		// off a selection does everywhere else.
+		const clearOnEmptyPress = (event: PointerEvent) => {
+			const target = event.target as HTMLElement | null;
+			if (target?.closest('.page-text span, .selection-actions, .explain-box')) return;
+			window.getSelection()?.removeAllRanges();
+		};
 		const removeListeners = [
-			on(node, 'pointerup', afterSelection),
-			on(node, 'keyup', afterSelection),
+			on(node, 'pointerdown', clearOnEmptyPress),
+			on(document, 'selectionchange', afterSelection),
 			on(node, 'scroll', measureFocus, { passive: true }),
 			on(node, 'wheel', stopFollowing, { passive: true }),
 			on(node, 'touchmove', stopFollowing, { passive: true })
@@ -424,6 +447,24 @@
 		};
 	});
 
+	/**
+	 * The invisible words have to sit exactly on top of the printed ones, or the
+	 * selection the browser paints lands beside the text it is selecting. Their
+	 * boxes are known; what is not is how wide the same string renders in the
+	 * font this view can actually use, so each is measured once and squeezed to
+	 * fit — which is what pdf.js's own text layer does, and for the same reason.
+	 */
+	const MEASURE_FONT = 'sans-serif';
+	let measurer: CanvasRenderingContext2D | null | undefined;
+
+	function widthScale(word: SelectableWord): number {
+		if (measurer === undefined) measurer = document.createElement('canvas').getContext('2d');
+		if (!measurer || !word.width || !word.height) return 1;
+		measurer.font = `${word.height}px ${MEASURE_FONT}`;
+		const natural = measurer.measureText(word.text).width;
+		return natural > 0 ? word.width / natural : 1;
+	}
+
 	function pageWidth(page: number): number {
 		return sizes[page - 1]?.width || FALLBACK_WIDTH;
 	}
@@ -521,7 +562,13 @@
 			return;
 		}
 		const range = selection.getRangeAt(0);
-		if (!scroller.contains(range.commonAncestorContainer)) return;
+		// A selection made elsewhere — the sidebar, the player's label — leaves
+		// nothing here to act on, and the actions must go with it. Returning
+		// quietly left them stranded on the page with no way to dismiss them.
+		if (!scroller.contains(range.commonAncestorContainer)) {
+			onSelect?.(undefined);
+			return;
+		}
 		const claimed = [...scroller.querySelectorAll<HTMLElement>('.page-text span[data-segment-id]')]
 			.filter((span) => range.intersectsNode(span))
 			.map((span) => ({
@@ -680,7 +727,7 @@
 						{#each words.get(size.page) ?? [] as word, index (index)}<span
 								data-segment-id={word.segmentId}
 								data-word-index={word.wordIndex}
-								style={`left:${word.x}px;top:${word.y}px;width:${word.width}px;height:${word.height}px;font-size:${word.height}px`}
+								style={`left:${word.x}px;top:${word.y}px;font-size:${word.height}px;transform:scaleX(${widthScale(word)})`}
 								>{word.text}</span
 							>{word.endsLine ? '\n' : ' '}{/each}
 					</div>
@@ -779,6 +826,9 @@
 		position: absolute;
 		top: 0;
 		left: 0;
+		/* Pinned: each word is squeezed to its box by a measurement taken in
+		   this same family. */
+		font-family: sans-serif;
 		/* The spaces and newlines between words are there so a copied selection
 		   reads properly, but they are the only children in normal flow — at any
 		   inherited size they stack up as a visible column of blank lines down
@@ -794,15 +844,17 @@
 
 	.page-text span {
 		position: absolute;
-		overflow: hidden;
 		white-space: pre;
 		transform-origin: 0 0;
 	}
 
-	/* The highlight the browser paints for a selection, kept faint: the passage
-	   marks underneath are the ones doing the talking. */
+	/* A selection paints its text in the browser's own colour, which overrides
+	   `color: transparent` and prints a second copy of every selected word over
+	   the picture of it. The highlight is wanted; the ghost text is not. */
 	.page-text ::selection {
-		background: color-mix(in srgb, var(--primary) 26%, transparent);
+		background: color-mix(in srgb, var(--primary) 34%, transparent);
+		color: transparent;
+		-webkit-text-fill-color: transparent;
 	}
 
 	/* Multiply keeps the marks under the ink: a highlighted line stays as
diff --git a/tests/reader.e2e.ts b/tests/reader.e2e.ts
index bc23dc1..67abd3f 100644
--- a/tests/reader.e2e.ts
+++ b/tests/reader.e2e.ts
@@ -1971,16 +1971,111 @@ test('selects text on an original page and acts on it', async ({ page }) => {
 	await actions.getByRole('button', { name: /^Highlight/ }).click();
 	await expect.poll(async () => page.locator('.mark.annotated').count()).toBeGreaterThan(0);
 
-	// And a selection can be played from where it was printed.
-	await page.mouse.move(drag!.x1, drag!.y1);
-	await page.mouse.down();
-	await page.mouse.move(drag!.x2, drag!.y2, { steps: 10 });
-	await page.mouse.up();
-	await expect(actions).toBeVisible();
+	// Clicking away puts the actions away — whether the click lands on the page
+	// or anywhere else. The selection is watched on the document for exactly
+	// this: a click on the sidebar drops it, and used to leave them stranded.
+	const select = async () => {
+		await page.mouse.move(drag!.x1, drag!.y1);
+		await page.mouse.down();
+		await page.mouse.move(drag!.x2, drag!.y2, { steps: 10 });
+		await page.mouse.up();
+		await expect(actions).toBeVisible();
+	};
+	await select();
+	await page.mouse.click(drag!.x1 + 20, drag!.y1 + 120);
+	await expect(actions).toHaveCount(0);
+
+	await select();
+	// Pressed on the header rather than on a link: the point is that a press
+	// outside the page drops the selection, not that navigating away does.
+	const bar = await page.locator('.reader-commandbar').boundingBox();
+	await page.mouse.click(bar!.x + 6, bar!.y + bar!.height / 2);
+	await expect(actions).toHaveCount(0);
+
+	// And a selection can be played from where it was printed. Last, because
+	// playing scrolls the page and moves everything measured above.
+	await select();
 	await actions.getByRole('button', { name: /^Play the selected/ }).click();
 	await expect(page.getByRole('button', { name: 'Pause' })).toBeVisible({ timeout: 20_000 });
 });
 
+test('selecting an original page does not print the words twice', async ({ page }) => {
+	await openReadyLibrary(page);
+	const pdf = await PDFDocument.create();
+	const font = await pdf.embedFont(StandardFonts.Helvetica);
+	const sheet = pdf.addPage([612, 792]);
+	sheet.drawText('Ledgers of the Coast', { x: 72, y: 720, size: 22, font });
+	sheet.drawText('The harbour master kept a ledger of every tide.', {
+		x: 72,
+		y: 660,
+		size: 12,
+		font
+	});
+	await page.locator('#document-upload').setInputFiles({
+		name: 'ledgers.pdf',
+		mimeType: 'application/pdf',
+		buffer: Buffer.from(await pdf.save())
+	});
+	await expect(page.locator('.reading-canvas')).toBeVisible({ timeout: 60_000 });
+	await page.getByRole('button', { name: /Switch view/ }).click();
+	const slot = page.locator('.page-slot[data-page="1"]');
+	await expect
+		.poll(async () => slot.locator('canvas').evaluate((node: HTMLCanvasElement) => node.width), {
+			timeout: 30_000
+		})
+		.toBeGreaterThan(400);
+	await expect.poll(async () => slot.locator('.page-text span').count()).toBeGreaterThan(5);
+
+	// A selection paints its text in the browser's own colour unless told not
+	// to, which prints a second copy of every selected word over the picture of
+	// it. Ink is the lightest thing on a dark page, so a ghost shows up as new
+	// light pixels appearing where there were none.
+	const region = await page.evaluate(() => {
+		const words = [
+			...document.querySelectorAll<HTMLElement>('.page-slot[data-page="1"] .page-text span')
+		];
+		const start = words.find((word) => word.textContent === 'harbour');
+		const end = words.find((word) => word.textContent === 'ledger');
+		if (!start || !end) return null;
+		const a = start.getBoundingClientRect();
+		const b = end.getBoundingClientRect();
+		return {
+			x1: a.x + 1,
+			y1: a.y + a.height / 2,
+			x2: b.right - 1,
+			y2: b.y + b.height / 2,
+			clip: { x: a.x - 8, y: a.y - 8, width: b.right - a.x + 16, height: a.height + 16 }
+		};
+	});
+	expect(region).not.toBeNull();
+	const inkPixels = async () => {
+		const shot = await page.screenshot({ clip: region!.clip });
+		const { createCanvas, loadImage } = await import('@napi-rs/canvas');
+		const image = await loadImage(shot);
+		const canvas = createCanvas(image.width, image.height);
+		const context = canvas.getContext('2d');
+		context.drawImage(image, 0, 0);
+		const { data } = context.getImageData(0, 0, image.width, image.height);
+		let light = 0;
+		for (let index = 0; index < data.length; index += 4) {
+			if (0.2126 * data[index] + 0.7152 * data[index + 1] + 0.0722 * data[index + 2] > 200) {
+				light += 1;
+			}
+		}
+		return light;
+	};
+	const before = await inkPixels();
+	await page.mouse.move(region!.x1, region!.y1);
+	await page.mouse.down();
+	await page.mouse.move(region!.x2, region!.y2, { steps: 10 });
+	await page.mouse.up();
+	await expect(page.getByRole('group', { name: 'Actions for the selected text' })).toBeVisible();
+	const after = await inkPixels();
+	// The highlight is a wash well below ink brightness, so selecting should not
+	// add light pixels at all; a ghost copy of the words would add thousands.
+	expect(after).toBeLessThan(before * 1.15 + 50);
+});
+
 test('draws each original page once while the reader scrolls back and forth', async ({ page }) => {
 	await openReadyLibrary(page);
 	const pdf = await PDFDocument.create();

From 381970e268ae4d7cec7bfad4565682edac2a4314 Mon Sep 17 00:00:00 2001
From: NeoVand <mmv@mit.edu>
Date: Thu, 27 Aug 2026 10:54:58 -0500
Subject: [PATCH 3/3] fix: offer the selection actions once, when the drag ends
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The browser reports a new selection on every frame of a drag, and each one
was read back and offered: the actions re-anchored to wherever the pointer
had reached, flashing along under it for the length of the gesture. A drag
is one gesture, so it is now read once. Nothing is offered while a pointer
is down, the press itself takes the previous selection's actions away, and
the release is what brings them back — at the place the reader stopped.

A press on the actions is left alone, or taking them away underneath the
pointer would mean the button was never clicked. Keyboard selection is
unaffected: with no pointer down, each change is still read as it happens.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/lib/components/PdfPageView.svelte | 44 +++++++++++++++++++++------
 tests/reader.e2e.ts                   |  6 ++++
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/PdfPageView.svelte b/src/lib/components/PdfPageView.svelte
index 4f8a153..e7b467e 100644
--- a/src/lib/components/PdfPageView.svelte
+++ b/src/lib/components/PdfPageView.svelte
@@ -211,28 +211,52 @@
 		// else — the sidebar, the player, the header — drops the selection, and
 		// the actions have to go with it. Listening only here left them stranded
 		// on the page with nothing that would dismiss them.
+		//
+		// A drag, though, is one gesture and not a stream of selections. The
+		// browser reports a new one on every frame of it, and offering each one
+		// back sent the actions chasing the pointer across the page, flashing
+		// as they went. Nothing is offered while a pointer is down; the whole
+		// gesture is read once, when it ends.
+		let selecting = false;
 		let queued = false;
 		const afterSelection = () => {
-			if (queued) return;
+			if (selecting || queued) return;
 			queued = true;
 			requestAnimationFrame(() => {
 				queued = false;
 				readSelection();
 			});
 		};
-		// Pressing on a blank part of the page — a margin, a figure, the gap
-		// between paragraphs — puts no caret anywhere, because there is no text
-		// node under the pointer to put one in. The browser therefore leaves the
-		// old selection standing, and with it the actions, which is what made
-		// them feel impossible to dismiss. Clearing it by hand is what clicking
-		// off a selection does everywhere else.
-		const clearOnEmptyPress = (event: PointerEvent) => {
+		const startPress = (event: PointerEvent) => {
 			const target = event.target as HTMLElement | null;
-			if (target?.closest('.page-text span, .selection-actions, .explain-box')) return;
+			// A press on the actions themselves is aimed at a button, and taking
+			// them away underneath it would mean the button was never clicked.
+			if (target?.closest('.selection-actions, .explain-box')) return;
+			selecting = true;
+			// Whatever is selected now is about to be replaced, so the actions
+			// go with the press rather than hovering over a selection that is
+			// being redrawn beneath them.
+			onSelect?.(undefined);
+			// Pressing on a blank part of the page — a margin, a figure, the gap
+			// between paragraphs — puts no caret anywhere, because there is no
+			// text node under the pointer to put one in. The browser therefore
+			// leaves the old selection standing, which is what made it feel
+			// impossible to dismiss. Clearing it by hand is what clicking off a
+			// selection does everywhere else.
+			if (target?.closest('.page-text span')) return;
 			window.getSelection()?.removeAllRanges();
 		};
+		// On the document, not the stack: a drag that starts on the page often
+		// ends off it, and the release is what the actions are waiting for.
+		const endPress = () => {
+			if (!selecting) return;
+			selecting = false;
+			afterSelection();
+		};
 		const removeListeners = [
-			on(node, 'pointerdown', clearOnEmptyPress),
+			on(node, 'pointerdown', startPress),
+			on(document, 'pointerup', endPress),
+			on(document, 'pointercancel', endPress),
 			on(document, 'selectionchange', afterSelection),
 			on(node, 'scroll', measureFocus, { passive: true }),
 			on(node, 'wheel', stopFollowing, { passive: true }),
diff --git a/tests/reader.e2e.ts b/tests/reader.e2e.ts
index 67abd3f..92f4e11 100644
--- a/tests/reader.e2e.ts
+++ b/tests/reader.e2e.ts
@@ -1959,6 +1959,12 @@ test('selects text on an original page and acts on it', async ({ page }) => {
 	await page.mouse.move(drag!.x1, drag!.y1);
 	await page.mouse.down();
 	await page.mouse.move(drag!.x2, drag!.y2, { steps: 10 });
+	// Mid-drag the selection is still being drawn, and the actions must not be
+	// chasing the pointer across the page. They wait for the release.
+	await page.evaluate(
+		() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)))
+	);
+	expect(await page.locator('.selection-actions').count()).toBe(0);
 	await page.mouse.up();
 	expect(await page.evaluate(() => getSelection()?.toString() ?? '')).toContain('harbour');