diff --git a/.agents/skills/test-musicxml/SKILL.md b/.agents/skills/test-musicxml/SKILL.md
index adebd0c4d..c5203693d 100644
--- a/.agents/skills/test-musicxml/SKILL.md
+++ b/.agents/skills/test-musicxml/SKILL.md
@@ -53,6 +53,17 @@ Use this skill when adding or updating a `vexml` MusicXML rendering test case, e
 5. Update the implementation in `src/` to fill the rendering gap.
    - Prefer a minimal, root-cause fix.
    - Keep changes consistent with the existing renderer and test patterns.
+   - **Collisions must go through the collision pipeline.** When a fix involves moving an
+     element so it clears another (an above-stave annotation over a notehead/tie, a chord
+     diagram next to another, two annotations stacking) — or detecting that content is clipped
+     ("no-man's land") — route it through `CollisionDetector` (`src/collision.ts`):
+     register the fixed thing as an obstacle (`add`/`addRect`), resolve the movable thing
+     (`liftClear` to lift above-stave text, `pushRightOf` to space diagrams), then draw at the
+     resolved position and register it. Do **not** add new bespoke magic-offset clearance
+     logic. Not everything is movable — noteheads, stems, and ties are obstacles, not nudge
+     targets. Fixed structural placement (page margins, part spacing, bracket offsets,
+     widget-internal geometry) is exempt — it is deterministic, not clash resolution. See
+     `docs/collision-audit.md` for what is and isn't in scope.
 
 6. Run the test command again:
 
diff --git a/cli/fix.ts b/cli/fix.ts
index 9da3267c8..564791067 100644
--- a/cli/fix.ts
+++ b/cli/fix.ts
@@ -8,6 +8,7 @@ export async function fix({ check }: { check: boolean }) {
 		'.',
 	]);
 	await run('bunx', ['tsc', '--noEmit']);
+	console.log('Compilation successful.');
 	// Validate all .musicxml fixtures against the MusicXML XSD.
 	await run('./xmllint/validate.sh', []);
 }
diff --git a/docs/collision-audit.md b/docs/collision-audit.md
new file mode 100644
index 000000000..25e791c02
--- /dev/null
+++ b/docs/collision-audit.md
@@ -0,0 +1,70 @@
+# Nudge / collision audit
+
+> **Caveat — not a maintained list.** This is a point-in-time snapshot taken while the
+> collision pipeline (`src/geometry.ts`, `src/quadtree.ts`, `src/collision.ts`) was introduced.
+> Line numbers and entries **will drift** as the code changes — treat it as a map, not a
+> source of truth. Re-audit (`rg`-style sweep for offset/clearance code) if you need current
+> data. It exists so the historical "where did we nudge things?" knowledge isn't lost.
+
+The renderer (`src/draw.ts`) draws to a `<canvas>` in immediate mode. Historically, every
+time two elements could clash, a one-off fix nudged one of them with its own magic constant —
+a whack-a-mole. The pipeline replaces the recurring class of those with one mechanism. This
+doc records what existed, split by whether the pipeline absorbs it.
+
+## How the pipeline works (the one true path)
+
+Compute a movable element's natural `Rect` → ask the `CollisionDetector` to resolve it against
+everything already placed (`liftClear` for above-stave text, `pushRightOf` for diagrams) →
+draw at the resolved position → register the placed `Rect` so later elements avoid it. Fixed
+elements (noteheads, stems, ties) are registered as obstacles but never moved. The detector
+also reports out-of-bounds content (`escaping`) — the "no-man's land" where renders get
+clipped. A `QuadTree` (with an out-of-bounds overflow bucket) is the spatial index.
+
+**Rule for future work:** any new "move this so it clears that" (or "is this being clipped?")
+goes through `CollisionDetector`. Do not add new bespoke magic-offset clearance code.
+
+## A. Recurring runtime clash resolution — the whack-a-mole
+
+| Site | What moves | Clears | Status |
+|---|---|---|---|
+| `draw.ts::noteTop` | (obstacle calc) notehead ∪ stem tip ∪ above-articulation | — | feeds `noteRect` |
+| `draw.ts::drawHarmony` | chord symbol lifts | notehead, stem-down tie apex, other text | **migrated** → `liftClear` |
+| `draw.ts::drawWords` | words text lifts | notehead, tie, other text | **migrated** → `liftClear` |
+| `draw.ts` chord-diagram block | fret box pushes right | adjacent diagram across a barline | **migrated** → `pushRightOf` |
+| `draw.ts::drawTempo` | metronome mark lifts (`shiftY`) | high first note | **deferred** (scaled mark + reserved headroom; Phase 2) |
+| chord diagram vertical | fixed `CHORD_DIAGRAM_GAP`, does **not** clear notes | (latent clip bug) | **deferred** (Phase 3) |
+
+The migration was behavior-preserving: the full screenshot suite was byte-identical except a
+1–2px improvement on `harmony_grace` (the symbol now also clears the grace note's stem tip).
+The new capabilities the pipeline enables but no fixture yet exercises: a wide symbol clearing
+a *neighbouring* tall note under its text, and stacking multiple annotations in one column.
+
+## B. Out-of-bounds / clip hazards ("no-man's land") — covered by `escaping`
+
+| Site | Hazard |
+|---|---|
+| `draw.ts` `pageTop`/`pageBottom` growth | crop grown ad hoc so content isn't clipped |
+| `constants.ts::LEDGER_HEADROOM`, `draw.ts` `topSlack` | scratch slack; "bump if an extreme tessitura ever clips" |
+| `draw.ts` system-overflow two-pass (`topOverflow`) | reserves vertical space so stacked systems don't collide |
+
+`CollisionDetector.escaping(scratchViewport)` now flags vertical clips per system and warns
+(see `warnEscapes` in `draw.ts`). The existing `pageTop`/`pageBottom` crop logic is unchanged —
+`escaping` is the generic home for clip handling going forward, the two-pass overflow could
+fold into it later.
+
+## C. Fixed structural placement — left alone (NOT collisions)
+
+These are deterministic engraving placement, not runtime clash resolution. Routing them through
+the detector would add indirection for no benefit. Documented so future work doesn't "migrate"
+them by mistake:
+
+- Page margins (`PAGE_MARGIN_*`), `INTER/INTRA_PART_SPACING`, `BASE_VOICE_WIDTH`.
+- Lead-glyph width estimates (`LEAD_BARLINE/CLEF/KEY/TIME`) — generous reservations so notes
+  never collide with clef/key/time glyphs.
+- `LABEL_GAP` / part-label centering (`+1.5`), `BRACKET_X_SHIFT` (bracket sits just outside the
+  system line, `draw.ts` bracket blocks).
+- Tab note-area centering, tab grace alignment, `GRACE_SPACING` pre-reservation (`layout.ts`).
+- Chord-diagram-internal geometry (`barShiftX`, `bridgeWidth`, title/dot/barre positions in
+  `chord-diagram.ts`).
+- Tab fret / harmonic-bracket centering (`notes.ts` `boldFret`/harmonic layout).
+- Analytic slur control-point lift (`spanners.ts` `cpYFor`), wrapped tie/slur split.
diff --git a/site/src/App.tsx b/site/src/App.tsx
index 39cba2fee..1967f97fd 100644
--- a/site/src/App.tsx
+++ b/site/src/App.tsx
@@ -95,9 +95,23 @@ export default function App() {
 	const width =
 		config.layout?.type === 'standard' ? (config.layout.width ?? 900) : 900;
 	const notationFont = config.fonts?.notation?.family ?? 'Bravura';
-	const reset = (
-		key: 'noteSpacing' | 'softmaxFactor' | 'systemSpacing' | 'maxSystemFill',
-	) => setConfig(({ [key]: _, ...rest }) => rest);
+	const resetKeys = [
+		'noteSpacing',
+		'softmaxFactor',
+		'systemSpacing',
+		'maxSystemFill',
+	] as const;
+	const reset = (key: (typeof resetKeys)[number]) =>
+		setConfig(({ [key]: _, ...rest }) => rest);
+	const canReset = resetKeys.some((k) => config[k] !== undefined);
+	const resetAll = () =>
+		setConfig((c) => {
+			const next = { ...c };
+			for (const k of resetKeys) {
+				delete next[k];
+			}
+			return next;
+		});
 
 	// `config` stays live so the sliders/reset respond instantly; `renderConfig` lags
 	// behind it by the debounce so dragging a slider re-renders once it settles, not on
@@ -109,13 +123,20 @@ export default function App() {
 			skipConfigDebounce.current = false;
 			return;
 		}
+		// If the last render was fast, apply config changes immediately; only debounce
+		// once renders get slow enough to lag the sliders.
+		if (renderMs != null && renderMs <= 50) {
+			setRenderConfig(config);
+			setDebouncing(false);
+			return;
+		}
 		setDebouncing(true);
 		const t = setTimeout(() => {
 			setRenderConfig(config);
 			setDebouncing(false);
 		}, 500);
 		return () => clearTimeout(t);
-	}, [config]);
+	}, [config, renderMs]);
 
 	useEffect(() => {
 		const canvas = canvasRef.current;
@@ -216,6 +237,13 @@ export default function App() {
 			setDebouncing(false);
 			return;
 		}
+		// If the last render was fast, just render on every keystroke; only debounce
+		// once renders get slow enough to lag typing.
+		if (renderMs != null && renderMs <= 50) {
+			setDebouncing(false);
+			setInput(value);
+			return;
+		}
 		// Spinner shows while we wait out the typing, then render the settled text.
 		setDebouncing(true);
 		debounceRef.current = setTimeout(() => {
@@ -369,9 +397,23 @@ export default function App() {
 						</button>
 
 						<div className="flex flex-col gap-4 rounded-lg border border-zinc-200 bg-zinc-50 p-3">
-							<span className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
-								Config
-							</span>
+							<div className="flex items-center justify-between">
+								<span className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+									Config
+								</span>
+								<button
+									type="button"
+									onClick={resetAll}
+									disabled={!canReset}
+									className="text-xs font-medium text-zinc-400 hover:text-zinc-600 disabled:cursor-default disabled:text-zinc-300 disabled:hover:text-zinc-300"
+								>
+									Reset all
+								</button>
+							</div>
+							<p className="text-xs text-zinc-400">
+								With only a single system, some controls (e.g. system spacing
+								and max system fill) won't have a visible effect.
+							</p>
 							<label
 								htmlFor="darkMode"
 								className="flex items-center gap-2 text-xs font-medium text-zinc-500"
diff --git a/src/collision.test.ts b/src/collision.test.ts
new file mode 100644
index 000000000..8d6ac4dc4
--- /dev/null
+++ b/src/collision.test.ts
@@ -0,0 +1,84 @@
+import { expect, test } from 'bun:test';
+import { CollisionDetector } from './collision';
+import { Rect } from './geometry';
+
+function detector(): CollisionDetector {
+	return new CollisionDetector(new Rect(-1000, -1000, 4000, 4000));
+}
+
+test('query reports the kind and minimum-translation of each hit', () => {
+	const d = detector();
+	d.addRect(new Rect(5, 0, 10, 10), 'note');
+	const hits = d.query(new Rect(0, 0, 10, 10));
+	expect(hits).toHaveLength(1);
+	expect(hits[0]?.other.kind).toBe('note');
+	// Overlap is 5 wide, 10 tall → separate along x, leftward (candidate is left of note).
+	expect(hits[0]?.mtv.axis).toBe('x');
+	expect(hits[0]?.mtv.dx).toBe(-5);
+});
+
+test('liftClear raises a rect to sit `gap` above the highest obstacle in its column', () => {
+	const d = detector();
+	d.addRect(new Rect(5, 90, 10, 30), 'note'); // top at y=90
+	d.addRect(new Rect(5, 70, 10, 5), 'tie'); // higher: top at y=70 (kind-agnostic)
+	const natural = new Rect(0, 85, 20, 15); // bottom at y=100, overlaps both
+	const placed = d.liftClear(natural, 8);
+	expect(placed.bottom).toBe(62); // 70 (highest top) - 8 gap
+	expect(placed.x).toBe(0); // x unchanged — text only lifts vertically
+});
+
+test('liftClear never lowers a rect that is already clear', () => {
+	const d = detector();
+	d.addRect(new Rect(5, 200, 10, 30), 'note'); // well below the annotation
+	const natural = new Rect(0, 85, 20, 15); // bottom at y=100
+	expect(d.liftClear(natural, 8)).toBe(natural); // returned unchanged
+});
+
+test('liftClear stacks successive annotations above one another', () => {
+	const d = detector();
+	d.addRect(new Rect(5, 90, 10, 30), 'note');
+	const a = d.liftClear(new Rect(0, 85, 20, 15), 8); // bottom 82
+	d.add({ rect: a, kind: 'annotation' });
+	const b = d.liftClear(new Rect(0, 85, 20, 15), 8); // must clear `a`, not the note
+	expect(b.bottom).toBe(a.y - 8); // a.y is a's top
+});
+
+test('liftClear with a kind filter ignores other kinds (text clears notes, not diagrams)', () => {
+	const d = detector();
+	d.addRect(new Rect(5, 90, 10, 30), 'note'); // top at y=90
+	d.addRect(new Rect(0, 70, 20, 5), 'diagram'); // higher, but a diagram
+	const natural = new Rect(0, 85, 20, 15); // bottom at y=100
+	// Clearing only note/tie/annotation: lifts to clear the note (90), not the diagram (70).
+	const placed = d.liftClear(natural, 8, ['note', 'tie', 'annotation']);
+	expect(placed.bottom).toBe(82); // 90 - 8, the diagram was ignored
+});
+
+test('pushRightOf reproduces the chord-diagram running-cursor (gap enforced even when close)', () => {
+	const d = detector();
+	d.addRect(new Rect(0, 0, 88, 84), 'diagram'); // right edge at x=88
+	// Overlapping neighbour → pushed to 88 + 6.
+	expect(d.pushRightOf(new Rect(50, 0, 88, 84), 'diagram', 6).x).toBe(94);
+	// Close but not overlapping (90 > 88) → gap still enforced to 94.
+	expect(d.pushRightOf(new Rect(90, 0, 88, 84), 'diagram', 6).x).toBe(94);
+	// Far enough away → left where it is.
+	expect(d.pushRightOf(new Rect(200, 0, 88, 84), 'diagram', 6).x).toBe(200);
+});
+
+test('pushRightOf ignores diagrams in a different vertical band', () => {
+	const d = detector();
+	d.addRect(new Rect(0, 0, 88, 84), 'diagram');
+	// Same x-range but a different stave (y far below) → no horizontal push.
+	expect(d.pushRightOf(new Rect(50, 500, 88, 84), 'diagram', 6).x).toBe(50);
+});
+
+test('escaping flags rects that cross the viewport edges', () => {
+	const d = detector();
+	d.addRect(new Rect(10, 10, 5, 5), 'note'); // inside
+	d.addRect(new Rect(10, -20, 5, 5), 'annotation'); // off the top
+	d.addRect(new Rect(95, 10, 20, 5), 'diagram'); // off the right
+	const escaped = d.escaping(new Rect(0, 0, 100, 100));
+	const byKind = new Map(escaped.map((e) => [e.item.kind, e.edges]));
+	expect(byKind.size).toBe(2);
+	expect(byKind.get('annotation')).toEqual(['top']);
+	expect(byKind.get('diagram')).toEqual(['right']);
+});
diff --git a/src/collision.ts b/src/collision.ts
new file mode 100644
index 000000000..50feebbb6
--- /dev/null
+++ b/src/collision.ts
@@ -0,0 +1,154 @@
+import { Rect } from './geometry';
+import { QuadTree } from './quadtree';
+
+/*
+ * Generic collision detection + nudge resolution for the renderer.
+ *
+ * The renderer draws in immediate mode, so the ONLY way to resolve a clash is to position a
+ * movable element before it's drawn. The flow per element is: compute its natural Rect, ask
+ * the detector to resolve it against everything already placed, draw at the resolved
+ * position, then register the placed Rect so later elements avoid it in turn.
+ *
+ * Not everything is movable. Register fixed things (noteheads, stems, ties) as obstacles;
+ * only nudge the things that can yield (chord symbols, words, chord diagrams). The detector
+ * reports the TYPE of each collision — the other element's `kind` plus the axis/direction of
+ * the minimum separation (`mtv`) — so a caller can pick the right fix. The constrained
+ * resolvers below (`liftClear`, `pushRightOf`) encode the per-kind policy directly: text
+ * only ever lifts up, diagrams only push right, so a raw minimum-translation can't shove a
+ * chord symbol sideways off the note it labels.
+ *
+ * ANY new "move this so it clears that" logic should go through here — do not add new bespoke
+ * magic-offset clearance code. See docs/collision-audit.md.
+ */
+
+export type CollisionKind = 'note' | 'tie' | 'annotation' | 'diagram';
+export type Collidable = { rect: Rect; kind: CollisionKind };
+export type Axis = 'x' | 'y';
+export type Edge = 'top' | 'bottom' | 'left' | 'right';
+
+/* One detected collision. `other.kind` + `mtv.axis` are "the type of collision". */
+export type Collision = {
+	other: Collidable;
+	overlap: Rect;
+	/* Signed minimum translation (along the smaller-overlap axis) to separate FROM `other`. */
+	mtv: { axis: Axis; dx: number; dy: number };
+};
+
+// Finite sentinel for half-open probe rects (avoids Infinity arithmetic producing NaN).
+const FAR = 1e6;
+
+export class CollisionDetector {
+	private readonly tree: QuadTree<Collidable>;
+
+	constructor(bounds: Rect, maxItems = 8, maxDepth = 8) {
+		this.tree = new QuadTree<Collidable>(bounds, maxItems, maxDepth);
+	}
+
+	add(c: Collidable): void {
+		this.tree.insert(c);
+	}
+
+	addRect(rect: Rect, kind: CollisionKind): void {
+		this.tree.insert({ rect, kind });
+	}
+
+	clear(): void {
+		this.tree.clear();
+	}
+
+	/* Every registered obstacle the candidate strictly overlaps, with kind + overlap + MTV. */
+	query(candidate: Rect): Collision[] {
+		const out: Collision[] = [];
+		for (const other of this.tree.query(candidate)) {
+			const overlap = candidate.intersection(other.rect);
+			if (!overlap) {
+				continue;
+			}
+			out.push({ other, overlap, mtv: mtvOf(candidate, other.rect, overlap) });
+		}
+		return out;
+	}
+
+	/*
+	 * Move `rect` straight UP until its bottom sits `gap` above the highest obstacle sharing
+	 * its x-column; never moves it down. One-shot: probe the whole column above the rect's
+	 * bottom and take the single highest obstacle top, so it converges immediately and can't
+	 * oscillate. This is the unified form of the old per-annotation "clear noteTop" lifts.
+	 *
+	 * `kinds`, when given, restricts which obstacle kinds count — e.g. above-stave text
+	 * clears notes/ties/other text but deliberately ignores diagrams (which draw on top).
+	 */
+	liftClear(rect: Rect, gap: number, kinds?: CollisionKind[]): Rect {
+		// A tall, thin probe down the rect's x-column, ending at the rect's bottom: catches
+		// every obstacle in the column whose top is at/above where the rect currently sits.
+		const probe = new Rect(rect.x, -FAR, rect.w, FAR + rect.bottom);
+		let topMost = Infinity;
+		for (const c of this.query(probe)) {
+			if (kinds && !kinds.includes(c.other.kind)) {
+				continue;
+			}
+			topMost = Math.min(topMost, c.other.rect.y);
+		}
+		if (topMost === Infinity) {
+			return rect;
+		}
+		const targetBottom = Math.min(rect.bottom, topMost - gap);
+		return rect.translate(0, targetBottom - rect.bottom);
+	}
+
+	/*
+	 * Push `rect` right until it sits `gap` past every already-placed obstacle of `kind` in
+	 * its y-band. Enforces the gap against a neighbor that's merely close (not yet
+	 * overlapping), reproducing the running-cursor spacing chord diagrams used.
+	 */
+	pushRightOf(rect: Rect, kind: CollisionKind, gap: number): Rect {
+		// Span everything from far left up to the rect's right edge, within its y-band.
+		const probe = new Rect(-FAR, rect.y, FAR + rect.right, rect.h);
+		let targetX = rect.x;
+		for (const c of this.query(probe)) {
+			if (c.other.kind === kind) {
+				targetX = Math.max(targetX, c.other.rect.right + gap);
+			}
+		}
+		return rect.translate(targetX - rect.x, 0);
+	}
+
+	/*
+	 * Registered items that escape `viewport` (the rendered/crop rectangle), with which edges
+	 * they cross — the "no-man's land" where content gets clipped. The caller decides whether
+	 * to grow the crop or lift the element. Independent of element-vs-element overlap.
+	 */
+	escaping(viewport: Rect): { item: Collidable; edges: Edge[] }[] {
+		const out: { item: Collidable; edges: Edge[] }[] = [];
+		for (const item of this.tree.all()) {
+			if (viewport.contains(item.rect)) {
+				continue;
+			}
+			const edges: Edge[] = [];
+			if (item.rect.y < viewport.y) {
+				edges.push('top');
+			}
+			if (item.rect.bottom > viewport.bottom) {
+				edges.push('bottom');
+			}
+			if (item.rect.x < viewport.x) {
+				edges.push('left');
+			}
+			if (item.rect.right > viewport.right) {
+				edges.push('right');
+			}
+			out.push({ item, edges });
+		}
+		return out;
+	}
+}
+
+/* Smallest push to separate `a` from `b`: along whichever axis they overlap least, away
+ * from `b`'s center. */
+function mtvOf(a: Rect, b: Rect, overlap: Rect): Collision['mtv'] {
+	const signX = a.x + a.w / 2 < b.x + b.w / 2 ? -1 : 1;
+	const signY = a.y + a.h / 2 < b.y + b.h / 2 ? -1 : 1;
+	return overlap.w <= overlap.h
+		? { axis: 'x', dx: signX * overlap.w, dy: 0 }
+		: { axis: 'y', dx: 0, dy: signY * overlap.h };
+}
diff --git a/src/config.ts b/src/config.ts
index 113668497..1075f9cc3 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -45,6 +45,13 @@ export type Config = {
 	 * nearly-full last system snaps flush instead of leaving an awkward sliver of margin.
 	 * 0 always stretches, 1 never does. */
 	minLastSystemFill: number;
+	/** Whether a score that fits on a single system always stretches to the reference width
+	 * (default: true). When true a lone system is always justified to the page edge. When
+	 * false it is treated like a trailing line and obeys minLastSystemFill: it stays ragged
+	 * at its intrinsic width when its measures fill less than minLastSystemFill of the line,
+	 * and only stretches once they reach that fraction — useful so a short incipit or excerpt
+	 * isn't blown up across the whole page. No effect on multi-system scores. */
+	stretchSingleSystem: boolean;
 	/** Fraction (0–1) of the reference width a system may fill before the breaker bumps
 	 * the next measure to a new system (default: 0.9). Lower leaves more air; 1 packs each
 	 * system to the edge (the old greedy behavior). Only affects near-full systems — a line
@@ -72,6 +79,7 @@ export const DEFAULT_CONFIG: Config = {
 	measureNumbering: 'system',
 	showTabHammerPullText: false,
 	showTabSlideText: false,
+	stretchSingleSystem: true,
 	minLastSystemFill: 0.75,
 	maxSystemFill: 0.9,
 };
diff --git a/src/draw.ts b/src/draw.ts
index c0ebfc32f..5a1474b31 100644
--- a/src/draw.ts
+++ b/src/draw.ts
@@ -24,6 +24,7 @@ import {
 	type Voice,
 } from 'vexflow';
 import { ChordDiagram, type ChordSpec } from './chord-diagram';
+import { CollisionDetector, type CollisionKind } from './collision';
 import type { Config } from './config';
 import {
 	BRACKET_X_SHIFT,
@@ -47,6 +48,7 @@ import {
 	WORDS_NOTE_CLEARANCE,
 	WORDS_Y_OFFSET,
 } from './constants';
+import { Rect } from './geometry';
 import type { MeasureNumbering, ScoreLayout } from './layout';
 import {
 	endBeatOf,
@@ -172,6 +174,9 @@ type PendingStave = {
 	tuplets: ReturnType<typeof buildTuplets>;
 	// Real notes only (no gap-filling ghosts), for the bottom-bound calc.
 	staveNotes: StaveNote[];
+	// StaveNotes whose lead carries a tie — they get a tie-apex collision obstacle once their
+	// stem direction is final (stem-down ties bow up over the noteheads). See tieApexRect.
+	tiedNotes: Set<StaveNote>;
 };
 
 /*
@@ -193,6 +198,7 @@ function buildNotes(
 	// ghosts instead of jamming its last note against the end barline.
 	const endBeat = Math.max(endBeatOf(voices), meterFloor);
 	const staveNotes: StaveNote[] = [];
+	const tiedNotes = new Set<StaveNote>();
 	const vexVoices = voices.map((voice) => {
 		const tickables = vexflowVoiceTickables(
 			voice.chords,
@@ -201,6 +207,9 @@ function buildNotes(
 			(lead, note) => {
 				byLead.set(lead, note);
 				staveNotes.push(note);
+				if (lead.ties.length > 0) {
+					tiedNotes.add(note);
+				}
 			},
 		);
 		return softVoice(tickables, softmaxFactor);
@@ -214,7 +223,15 @@ function buildNotes(
 	);
 	const tuplets = voices.flatMap((v) => buildTuplets(v.chords, byLead));
 
-	return { stave, isTab: false, vexVoices, beams, tuplets, staveNotes };
+	return {
+		stave,
+		isTab: false,
+		vexVoices,
+		beams,
+		tuplets,
+		staveNotes,
+		tiedNotes,
+	};
 }
 
 /*
@@ -245,6 +262,41 @@ function noteTop(note: StaveNote): number {
 	return top;
 }
 
+// Above-stave text (chord symbols, words) clears notes, ties, and other placed text, but NOT
+// chord diagrams — a diagram deliberately draws on top of any text it shares a spot with. All
+// nudge logic funnels through the CollisionDetector; see docs/collision-audit.md.
+const TEXT_CLEAR_KINDS: CollisionKind[] = ['note', 'tie', 'annotation'];
+
+/*
+ * The collision obstacle for a note: a box from its top (noteTop — notehead ∪ beam-extended
+ * stem tip ∪ above articulations) down to its bottom notehead, one notehead wide, centered on
+ * its laid-out x. Deliberately built from noteTop/getNoteHeadBounds, NOT note.getBoundingBox()
+ * (which unions attached modifiers and reports a bogus near-origin y for grace groups).
+ */
+function noteRect(note: StaveNote): Rect {
+	const top = noteTop(note);
+	const bottom = note.getNoteHeadBounds().yBottom;
+	const hw = getNoteheadHalfWidth();
+	return new Rect(note.getAbsoluteX() - hw, top, 2 * hw, bottom - top);
+}
+
+/*
+ * The collision obstacle for a stem-down note's tie: the band the tie ribbon bows up into,
+ * from its reconstructed apex (TIE_APEX_RISE above the top notehead) down to that notehead.
+ * The tie is a separate spanner drawn later, so there's no glyph to measure — this lets an
+ * annotation clear the arc the same way it clears a notehead.
+ */
+function tieApexRect(note: StaveNote): Rect {
+	const headTop = Math.min(...note.getYs());
+	const hw = getNoteheadHalfWidth();
+	return new Rect(
+		note.getAbsoluteX() - hw,
+		headTop - TIE_APEX_RISE,
+		2 * hw,
+		TIE_APEX_RISE,
+	);
+}
+
 /*
  * Format a system's staves together and draw their notes. A note's absolute x is its
  * (shared) tick-context x plus its own stave's note-start x, so two things must hold
@@ -258,6 +310,7 @@ function formatAndDrawSystem(
 	context: RenderContext,
 	pending: PendingStave[],
 	softmaxFactor: number,
+	detector: CollisionDetector,
 ): { top: number; bottom: number } {
 	if (pending.length === 0) {
 		return { top: Infinity, bottom: 0 };
@@ -341,6 +394,12 @@ function formatAndDrawSystem(
 			const box = note.getBoundingBox();
 			bottom = Math.max(bottom, box.getY() + box.getH());
 			top = Math.min(top, noteTop(note));
+			// Register each note as a collision obstacle now that its position is final, so the
+			// above-stave annotations drawn next can be nudged clear of it (and of high ties).
+			detector.add({ rect: noteRect(note), kind: 'note' });
+			if (p.tiedNotes.has(note) && note.getStemDirection() === Stem.DOWN) {
+				detector.add({ rect: tieApexRect(note), kind: 'tie' });
+			}
 		}
 	}
 	return { top, bottom };
@@ -403,53 +462,68 @@ const HARMONY_ACCIDENTAL_KERN = 2.5;
 const HARMONY_ACCIDENTAL_FONT_SIZE = HARMONY_FONT_SIZE - 3;
 
 /*
- * Draw a chord symbol (from a <harmony>) above its note's stave, left-anchored at
- * the note's x — the laid-out position of the note the harmony applies to. Returns
- * the y the text reaches up to so the caller can grow the page crop to keep a margin
- * above it (drawTempo relies on reserved layout headroom instead; harmony feeds the
- * crop directly so no extra top margin is needed). Drawn after the notes are
- * formatted so getAbsoluteX is real.
+ * The total kerned advance of a chord symbol as drawHarmony draws it: accidentals render a
+ * touch smaller and pull in by HARMONY_ACCIDENTAL_KERN on each side. Measured so the symbol's
+ * collision box matches the glyphs that get drawn.
+ */
+function harmonyWidth(
+	context: RenderContext,
+	text: string,
+	font: string,
+): number {
+	let width = 0;
+	for (const ch of text) {
+		const accidental = HARMONY_ACCIDENTALS.has(ch);
+		context.setFont(
+			font,
+			accidental ? HARMONY_ACCIDENTAL_FONT_SIZE : HARMONY_FONT_SIZE,
+		);
+		width +=
+			context.measureText(ch).width -
+			(accidental ? 2 * HARMONY_ACCIDENTAL_KERN : 0);
+	}
+	return width;
+}
+
+/*
+ * Draw a chord symbol (from a <harmony>) above its note's stave, left-anchored at the note's
+ * x — the laid-out position of the note the harmony applies to. The collision detector lifts
+ * it clear of any notehead, high tie, or already-placed annotation it would land on (all
+ * registered as obstacles); it sits at a fixed gap above the top staff line when nothing is in
+ * the way. Returns the y the text reaches up to so the caller can grow the page crop above it.
+ * Drawn after the notes are formatted so getAbsoluteX is real.
  */
 function drawHarmony(
 	context: RenderContext,
 	staveNote: StaveNote,
 	text: string,
 	font: string,
-	hasTie: boolean,
+	detector: CollisionDetector,
 ): number {
 	const stave = staveNote.getStave();
 	if (!stave) {
 		return Infinity;
 	}
-	// Sit a fixed gap above the top staff line, but lift higher when the note rises into
-	// that band (a high note or its ledger lines) so the symbol clears the notehead. Uses
-	// noteTop, not the bounding box: an attached grace-note group makes the box report a
-	// bogus near-origin y, which would fling the symbol to the top of the page and defeat
-	// the top crop (leaving a huge blank margin above the first system).
 	const baseY = stave.getYForLine(0) - HARMONY_Y_OFFSET;
-	let noteClearY = noteTop(staveNote) - HARMONY_NOTE_CLEARANCE;
-	// A stem-down note's tie bows up over the noteheads (vexflow bows a single note's, and
-	// a chord's upper, tie opposite the stem), peaking past what noteTop sees. The tie is a
-	// separate spanner drawn later — there's no glyph to measure here — so reconstruct its
-	// apex from the top notehead center (a constant rise, independent of tie length) and
-	// clear that too, otherwise the symbol lands on the arc. Gate on the apex itself rising
-	// above where the symbol would otherwise sit (baseY): only then does the tie actually
-	// pass through the text. A low note's tie — including a long tie whose far-right apex
-	// stays below the baseline — sits clear of the symbol, so leave it at baseY.
-	if (hasTie && staveNote.getStemDirection() === Stem.DOWN) {
-		const tieApexY = Math.min(...staveNote.getYs()) - TIE_APEX_RISE;
-		if (tieApexY < baseY) {
-			noteClearY = Math.min(noteClearY, tieApexY - HARMONY_NOTE_CLEARANCE);
-		}
-	}
-	const y = Math.min(baseY, noteClearY);
 	context.save();
-	context.setFont(font, HARMONY_FONT_SIZE);
 	context.setFillStyle('#000000');
+	const natural = new Rect(
+		staveNote.getAbsoluteX(),
+		baseY - HARMONY_FONT_SIZE,
+		harmonyWidth(context, text, font),
+		HARMONY_FONT_SIZE,
+	);
+	const placed = detector.liftClear(
+		natural,
+		HARMONY_NOTE_CLEARANCE,
+		TEXT_CLEAR_KINDS,
+	);
+	const y = placed.bottom;
 	// The ♯/♭/♮ glyphs carry wide side-bearings in the text font, so a single fillText
 	// of "B♭" reads as "B ♭". Draw char by char and pull the accidental in on both sides
 	// so it sits tight against its root letter.
-	let x = staveNote.getAbsoluteX();
+	context.setFont(font, HARMONY_FONT_SIZE);
+	let x = placed.x;
 	for (const ch of text) {
 		const accidental = HARMONY_ACCIDENTALS.has(ch);
 		if (accidental) {
@@ -464,17 +538,17 @@ function drawHarmony(
 		}
 	}
 	context.restore();
-	return y - HARMONY_FONT_SIZE;
+	// Register the placed symbol so a later annotation in this system stacks above it.
+	detector.add({ rect: placed, kind: 'annotation' });
+	return placed.y;
 }
 
 /*
  * Draw a words direction (e.g. "ritardando") above the stave in italics, left-anchored at
- * the first note's x — where the directive applies. Sits a fixed gap above the top staff
- * line, but lifts higher when the first note rises into that band (a high note or its ledger
- * lines) so the text clears the notehead. Returns the y the text reaches up to so the caller
- * can grow the page crop above it (like drawHarmony). Drawn after the notes are formatted so
- * getAbsoluteX is real. Uses noteTop, not the bounding box, to clear the note: an attached
- * grace-note group makes the box report a bogus near-origin y.
+ * the first note's x — where the directive applies. The collision detector lifts it clear of
+ * any notehead/tie/annotation it would land on; it sits at a fixed gap above the top staff
+ * line otherwise. Returns the y the text reaches up to so the caller can grow the page crop
+ * above it (like drawHarmony). Drawn after the notes are formatted so getAbsoluteX is real.
  */
 function drawWords(
 	context: RenderContext,
@@ -482,19 +556,28 @@ function drawWords(
 	text: string,
 	firstNote: StaveNote | undefined,
 	font: string,
+	detector: CollisionDetector,
 ): number {
 	const baseY = stave.getYForLine(0) - WORDS_Y_OFFSET;
-	const noteClearY = firstNote
-		? noteTop(firstNote) - WORDS_NOTE_CLEARANCE
-		: baseY;
-	const y = Math.min(baseY, noteClearY);
 	const x = firstNote ? firstNote.getAbsoluteX() : stave.getNoteStartX();
 	context.save();
 	context.setFont(font, WORDS_FONT_SIZE, 'normal', 'italic');
 	context.setFillStyle('#000000');
-	context.fillText(text, x, y);
+	const natural = new Rect(
+		x,
+		baseY - WORDS_FONT_SIZE,
+		context.measureText(text).width,
+		WORDS_FONT_SIZE,
+	);
+	const placed = detector.liftClear(
+		natural,
+		WORDS_NOTE_CLEARANCE,
+		TEXT_CLEAR_KINDS,
+	);
+	context.fillText(text, placed.x, placed.bottom);
 	context.restore();
-	return y - WORDS_FONT_SIZE;
+	detector.add({ rect: placed, kind: 'annotation' });
+	return placed.y;
 }
 
 /*
@@ -534,6 +617,7 @@ function buildTabNotes(
 		beams: [],
 		tuplets: [],
 		staveNotes: [],
+		tiedNotes: new Set(),
 	};
 }
 
@@ -776,10 +860,28 @@ export function drawScore(
 		let systemTopY = layout.top + topSlack;
 		let systemContentBottom = systemTopY;
 		let currentSystem = -1;
-		// The right edge (+ gap) of the last chord diagram drawn in the current system, so a
-		// diagram near a barline can be pushed clear of the one before it across the measure
-		// boundary. Reset when a new system starts (x coordinates restart at the left).
-		let prevDiagramRight = -Infinity;
+		// Per-system collision index of everything already drawn (notes, high ties, placed
+		// chord symbols/words/diagrams). The above-stave annotations query it to nudge clear of
+		// obstacles, and chord diagrams use it to space apart across a barline (replacing an old
+		// running-cursor). Reset at each system start (x/y restart) — see the system-change
+		// block. ALL nudge logic funnels through here; see docs/collision-audit.md.
+		const detector = new CollisionDetector(
+			new Rect(0, 0, width, scratchHeight),
+		);
+		// The drawable region of the scratch canvas. Anything escaping it is in "no-man's land"
+		// and gets clipped, so warn — the slack that prevents this (LEDGER_HEADROOM/topSlack)
+		// is then the knob to grow. Vertical edges only; horizontal page overflow is separate.
+		const scratchViewport = new Rect(0, 0, width, scratchHeight);
+		const warnEscapes = () => {
+			for (const { item, edges } of detector.escaping(scratchViewport)) {
+				if (edges.includes('top') || edges.includes('bottom')) {
+					console.warn(
+						`vexml: ${item.kind} clipped past the ${edges.join('/')} of the canvas ` +
+							"(content in no-man's land — bump LEDGER_HEADROOM / topSlack).",
+					);
+				}
+			}
+		};
 		// Per system: the stave-top y it was placed at, and the highest (smallest) y any of
 		// its content reached. Their difference is how far the system overflows above its
 		// top stave — reserved above it on a redraw so it can't clash with the system above.
@@ -819,7 +921,10 @@ export function drawScore(
 				currentSystem = systemIndex;
 				systemContentBottom = systemTopY;
 				systemTopByIndex.set(systemIndex, systemTopY);
-				prevDiagramRight = -Infinity;
+				// Leaving the previous system: flag anything that escaped the canvas, then reset
+				// the collision index so the new system (coordinates restart) starts clean.
+				warnEscapes();
+				detector.clear();
 			}
 			const systemY = systemTopY;
 			let staveRow = 0;
@@ -841,7 +946,6 @@ export function drawScore(
 			const harmonyTasks: Array<{
 				staveNote: StaveNote;
 				text: string;
-				hasTie: boolean;
 				frame: ChordSpec | null;
 			}> = [];
 			// Words directions (e.g. "ritardando"), each drawn above its part's top stave at
@@ -1034,7 +1138,6 @@ export function drawScore(
 						harmonyTasks.push({
 							staveNote,
 							text,
-							hasTie: lead.ties.length > 0,
 							frame,
 						});
 					}
@@ -1127,6 +1230,7 @@ export function drawScore(
 				context,
 				systemPending,
 				softmaxFactor,
+				detector,
 			);
 			pageBottom = Math.max(pageBottom, noteExtent.bottom);
 			systemContentBottom = Math.max(systemContentBottom, noteExtent.bottom);
@@ -1148,13 +1252,13 @@ export function drawScore(
 			for (const w of wordsTasks) {
 				pageTop = Math.min(
 					pageTop,
-					drawWords(context, w.stave, w.text, w.firstNote, labelFont),
+					drawWords(context, w.stave, w.text, w.firstNote, labelFont, detector),
 				);
 			}
-			// Diagrams sit at their lead note's x; two on notes either side of a barline can
-			// be close enough to overlap (especially at a narrow width). Push each box's left
-			// edge past the previous diagram's right edge + a gap (tracked across measures in
-			// prevDiagramRight) so crowded diagrams separate instead of stacking.
+			// Diagrams sit at their lead note's x; two on notes either side of a barline can be
+			// close enough to overlap (especially at a narrow width). The detector pushes each
+			// box clear of any already-placed diagram in its band (replacing the old running
+			// cursor) so crowded diagrams separate instead of stacking.
 			for (const h of harmonyTasks) {
 				// A <harmony> with a <frame> draws as a fret box (chord name as its title)
 				// above the stave; one without draws as the plain chord-symbol text.
@@ -1168,9 +1272,19 @@ export function drawScore(
 						...h.frame.chord.map(([, f]) => (typeof f === 'number' ? f : 0)),
 						...(h.frame.barres ?? []).map((b) => b.fret),
 					];
-					const x = Math.max(h.staveNote.getAbsoluteX(), prevDiagramRight);
-					prevDiagramRight = x + CHORD_DIAGRAM_WIDTH + CHORD_DIAGRAM_GAP;
-					const diagram = new ChordDiagram(x, top, {
+					const natural = new Rect(
+						h.staveNote.getAbsoluteX(),
+						top,
+						CHORD_DIAGRAM_WIDTH,
+						CHORD_DIAGRAM_HEIGHT,
+					);
+					const placed = detector.pushRightOf(
+						natural,
+						'diagram',
+						CHORD_DIAGRAM_GAP,
+					);
+					detector.add({ rect: placed, kind: 'diagram' });
+					const diagram = new ChordDiagram(placed.x, top, {
 						width: CHORD_DIAGRAM_WIDTH,
 						height: CHORD_DIAGRAM_HEIGHT,
 						numStrings: h.frame.chord.length,
@@ -1193,7 +1307,7 @@ export function drawScore(
 				} else {
 					pageTop = Math.min(
 						pageTop,
-						drawHarmony(context, h.staveNote, h.text, labelFont, h.hasTie),
+						drawHarmony(context, h.staveNote, h.text, labelFont, detector),
 					);
 				}
 			}
@@ -1237,6 +1351,9 @@ export function drawScore(
 					.draw();
 			}
 		}
+		// The last system's content is never followed by a system-change reset, so check it
+		// for clipped content here.
+		warnEscapes();
 
 		// Ties and slurs are resolved over the whole score now that every note is
 		// placed, so a span can cross a barline (its endpoints sit in different
diff --git a/src/geometry.test.ts b/src/geometry.test.ts
new file mode 100644
index 000000000..1b9f14ce7
--- /dev/null
+++ b/src/geometry.test.ts
@@ -0,0 +1,48 @@
+import { expect, test } from 'bun:test';
+import { Rect } from './geometry';
+
+test('right/bottom derive from x/y/w/h', () => {
+	const r = new Rect(10, 20, 30, 40);
+	expect(r.right).toBe(40);
+	expect(r.bottom).toBe(60);
+});
+
+test('intersects is strict — overlapping rects hit, edge-touching does not', () => {
+	const a = new Rect(0, 0, 10, 10);
+	expect(a.intersects(new Rect(5, 5, 10, 10))).toBe(true);
+	// Shares only the right edge (x=10): not an intersection.
+	expect(a.intersects(new Rect(10, 0, 10, 10))).toBe(false);
+	// Shares only the bottom edge (y=10): not an intersection.
+	expect(a.intersects(new Rect(0, 10, 10, 10))).toBe(false);
+	// Fully disjoint.
+	expect(a.intersects(new Rect(100, 100, 1, 1))).toBe(false);
+});
+
+test('intersection returns the overlap rect or null', () => {
+	const a = new Rect(0, 0, 10, 10);
+	const ov = a.intersection(new Rect(6, 4, 10, 10));
+	expect(ov).not.toBeNull();
+	expect([ov?.x, ov?.y, ov?.w, ov?.h]).toEqual([6, 4, 4, 6]);
+	expect(a.intersection(new Rect(10, 10, 5, 5))).toBeNull();
+});
+
+test('contains is inclusive of edges', () => {
+	const outer = new Rect(0, 0, 100, 100);
+	expect(outer.contains(new Rect(10, 10, 10, 10))).toBe(true);
+	expect(outer.contains(new Rect(0, 0, 100, 100))).toBe(true); // exact fit
+	expect(outer.contains(new Rect(95, 95, 10, 10))).toBe(false); // spills right/bottom
+	expect(outer.contains(new Rect(-1, 0, 10, 10))).toBe(false); // spills left
+});
+
+test('translate returns a shifted copy without mutating the original', () => {
+	const a = new Rect(1, 2, 3, 4);
+	const b = a.translate(10, -5);
+	expect([b.x, b.y, b.w, b.h]).toEqual([11, -3, 3, 4]);
+	expect([a.x, a.y]).toEqual([1, 2]); // unchanged
+});
+
+test('fromBoundingBox reads the vexflow accessors', () => {
+	const bb = { getX: () => 5, getY: () => 6, getW: () => 7, getH: () => 8 };
+	const r = Rect.fromBoundingBox(bb as never);
+	expect([r.x, r.y, r.w, r.h]).toEqual([5, 6, 7, 8]);
+});
diff --git a/src/geometry.ts b/src/geometry.ts
new file mode 100644
index 000000000..ea8dcc6fb
--- /dev/null
+++ b/src/geometry.ts
@@ -0,0 +1,84 @@
+import type { BoundingBox } from 'vexflow';
+
+/*
+ * An axis-aligned rectangle in canvas pixels. y grows downward (canvas convention), so
+ * `top` is the smaller y and `bottom` the larger. Immutable — `translate` returns a new
+ * Rect — because the collision pipeline resolves a position, *then* registers the placed
+ * rect (see collision.ts); nothing ever mutates a rect already in the index, so sharing
+ * is safe and there's no rebuild-on-move hazard.
+ */
+export class Rect {
+	constructor(
+		readonly x: number,
+		readonly y: number,
+		readonly w: number,
+		readonly h: number,
+	) {}
+
+	get right(): number {
+		return this.x + this.w;
+	}
+
+	get bottom(): number {
+		return this.y + this.h;
+	}
+
+	/*
+	 * True when the two rectangles overlap on a positive area. Strict (`<`, not `<=`): two
+	 * rects that merely share an edge do NOT intersect. This matters because a 0px overlap
+	 * would otherwise trigger a 0px "nudge" that still forces a re-layout and breaks the
+	 * byte-exact screenshot tests — and edge-touching elements read as clear anyway.
+	 */
+	intersects(o: Rect): boolean {
+		return (
+			this.x < o.right &&
+			o.x < this.right &&
+			this.y < o.bottom &&
+			o.y < this.bottom
+		);
+	}
+
+	/* The overlapping region of the two rectangles, or null when they don't intersect. */
+	intersection(o: Rect): Rect | null {
+		if (!this.intersects(o)) {
+			return null;
+		}
+		const x = Math.max(this.x, o.x);
+		const y = Math.max(this.y, o.y);
+		return new Rect(
+			x,
+			y,
+			Math.min(this.right, o.right) - x,
+			Math.min(this.bottom, o.bottom) - y,
+		);
+	}
+
+	/*
+	 * True when `o` lies entirely within this rectangle (inclusive edges). Used for the
+	 * bounds/clip check — a content rect not contained by the page rect escapes into
+	 * "no-man's land" and would be cut off.
+	 */
+	contains(o: Rect): boolean {
+		return (
+			o.x >= this.x &&
+			o.y >= this.y &&
+			o.right <= this.right &&
+			o.bottom <= this.bottom
+		);
+	}
+
+	/* A copy shifted by (dx, dy). */
+	translate(dx: number, dy: number): Rect {
+		return new Rect(this.x + dx, this.y + dy, this.w, this.h);
+	}
+
+	/*
+	 * Build a Rect from a vexflow BoundingBox. Safe for staves and modifiers, but NOT for a
+	 * raw note.getBoundingBox(): that unions in attached modifiers and a GraceNoteGroup's box
+	 * reports a bogus near-origin y. Build note obstacles from noteTop()/getNoteHeadBounds
+	 * instead (see draw.ts).
+	 */
+	static fromBoundingBox(bb: BoundingBox): Rect {
+		return new Rect(bb.getX(), bb.getY(), bb.getW(), bb.getH());
+	}
+}
diff --git a/src/layout.ts b/src/layout.ts
index 1c1c4dd1f..633d8032b 100644
--- a/src/layout.ts
+++ b/src/layout.ts
@@ -340,12 +340,17 @@ export function computeLayout(parts: Part[], config: Config): ScoreLayout {
 		// The last system of a multi-system score stays ragged unless its measures already
 		// fill most of the line: once their intrinsic width reaches minLastSystemFill
 		// of the reference width, justify it so a nearly-full trailing line snaps to the page
-		// edge instead of leaving a sliver of margin. Full systems and a lone line always justify.
+		// edge instead of leaving a sliver of margin. Full systems always justify. A lone
+		// single system also always justifies — unless stretchSingleSystem is off, which
+		// makes it obey the same minLastSystemFill rule as a trailing line, so a short
+		// excerpt keeps its natural width instead of being blown up across the page.
 		const isLastOfMany =
 			systemIndex === systems.length - 1 && systems.length > 1;
+		const isRaggableLone = systems.length === 1 && !config.stretchSingleSystem;
+		const obeysMinFill = isLastOfMany || isRaggableLone;
 		const justify =
 			layoutMode === 'standard' &&
-			(!isLastOfMany || intrinsic >= cap * config.minLastSystemFill);
+			(!obeysMinFill || intrinsic >= cap * config.minLastSystemFill);
 		// Justified systems fill the page; ragged systems keep their intrinsic width —
 		// but every standard system is capped at the page width, so a measure too wide
 		// to fit (e.g. a large noteSpacing) shrinks to fit instead of spilling off the
diff --git a/src/quadtree.test.ts b/src/quadtree.test.ts
new file mode 100644
index 000000000..de432c36e
--- /dev/null
+++ b/src/quadtree.test.ts
@@ -0,0 +1,62 @@
+import { expect, test } from 'bun:test';
+import { Rect } from './geometry';
+import { QuadTree } from './quadtree';
+
+type Item = { id: number; rect: Rect };
+
+function randomRect(): Rect {
+	const x = Math.floor(Math.random() * 1000) - 100; // can stray outside [0,1000)
+	const y = Math.floor(Math.random() * 1000) - 100;
+	const w = 1 + Math.floor(Math.random() * 40);
+	const h = 1 + Math.floor(Math.random() * 40);
+	return new Rect(x, y, w, h);
+}
+
+test('query matches a brute-force oracle, including out-of-bounds items', () => {
+	const bounds = new Rect(0, 0, 1000, 1000);
+	for (let trial = 0; trial < 25; trial++) {
+		const tree = new QuadTree<Item>(bounds, 4, 6);
+		const items: Item[] = [];
+		for (let i = 0; i < 200; i++) {
+			const item = { id: i, rect: randomRect() };
+			items.push(item);
+			tree.insert(item);
+		}
+		for (let q = 0; q < 10; q++) {
+			const area = randomRect();
+			const got = new Set(tree.query(area).map((i) => i.id));
+			const want = new Set(
+				items.filter((i) => i.rect.intersects(area)).map((i) => i.id),
+			);
+			expect(got).toEqual(want);
+		}
+	}
+});
+
+test('items outside the root bounds land in the outside bucket and are still queryable', () => {
+	const tree = new QuadTree<Item>(new Rect(0, 0, 100, 100), 4, 4);
+	const inside = { id: 1, rect: new Rect(10, 10, 5, 5) };
+	const escaped = { id: 2, rect: new Rect(-50, -50, 20, 20) }; // wholly outside
+	const straddler = { id: 3, rect: new Rect(90, 90, 40, 40) }; // spills past the edge
+	tree.insert(inside);
+	tree.insert(escaped);
+	tree.insert(straddler);
+
+	const outsideIds = new Set(tree.outside().map((i) => i.id));
+	expect(outsideIds).toEqual(new Set([2, 3]));
+
+	// The escaped item is still found by a query that overlaps it.
+	const hits = new Set(tree.query(new Rect(-60, -60, 30, 30)).map((i) => i.id));
+	expect(hits).toEqual(new Set([2]));
+});
+
+test('clear resets the tree and the outside bucket', () => {
+	const tree = new QuadTree<Item>(new Rect(0, 0, 100, 100), 2, 4);
+	for (let i = 0; i < 20; i++) {
+		tree.insert({ id: i, rect: new Rect(i, i, 2, 2) });
+	}
+	tree.insert({ id: 99, rect: new Rect(-10, -10, 2, 2) });
+	tree.clear();
+	expect(tree.query(new Rect(0, 0, 100, 100))).toHaveLength(0);
+	expect(tree.outside()).toHaveLength(0);
+});
diff --git a/src/quadtree.ts b/src/quadtree.ts
new file mode 100644
index 000000000..d73bf75cc
--- /dev/null
+++ b/src/quadtree.ts
@@ -0,0 +1,141 @@
+import { Rect } from './geometry';
+
+/*
+ * A region quadtree of rect-bearing items, used by CollisionDetector as the broad-phase
+ * spatial index. Items live at the deepest node whose bounds fully contain them; a node
+ * splits into four quadrants once it holds more than `maxItems` (until `maxDepth`). An item
+ * straddling a split line stays at the parent.
+ *
+ * "No-man's land": a standard quadtree clamps to its root and silently drops anything
+ * outside. This one instead keeps such items in a separate `outside` bucket (only at the
+ * root) that `query` always consults — so content escaping the page bounds is still found,
+ * which is what powers the clip detection (CollisionDetector.escaping).
+ *
+ * Items are inserted only after their final position is resolved (notes are placed once;
+ * an annotation is nudged, then inserted), so a rect already in the tree is never moved —
+ * there is no rebuild-on-move path to get wrong.
+ */
+export class QuadTree<T extends { rect: Rect }> {
+	private items: T[] = [];
+	private children: QuadTree<T>[] | null = null;
+	private readonly outsideItems: T[] = [];
+
+	constructor(
+		private readonly bounds: Rect,
+		private readonly maxItems = 8,
+		private readonly maxDepth = 8,
+		private readonly depth = 0,
+	) {}
+
+	/* Insert an item. Items not fully inside the root bounds go to the outside bucket. */
+	insert(item: T): void {
+		if (this.bounds.contains(item.rect)) {
+			this.insertInto(item);
+		} else {
+			this.outsideItems.push(item);
+		}
+	}
+
+	private insertInto(item: T): void {
+		if (this.children) {
+			const child = this.children.find((c) => c.bounds.contains(item.rect));
+			if (child) {
+				child.insertInto(item);
+				return;
+			}
+			// Straddles a quadrant boundary — keep it at this node.
+			this.items.push(item);
+			return;
+		}
+		this.items.push(item);
+		if (this.items.length > this.maxItems && this.depth < this.maxDepth) {
+			this.split();
+		}
+	}
+
+	private split(): void {
+		const { x, y, w, h } = this.bounds;
+		const hw = w / 2;
+		const hh = h / 2;
+		const mk = (bx: number, by: number) =>
+			new QuadTree<T>(
+				new Rect(bx, by, hw, hh),
+				this.maxItems,
+				this.maxDepth,
+				this.depth + 1,
+			);
+		this.children = [
+			mk(x, y),
+			mk(x + hw, y),
+			mk(x, y + hh),
+			mk(x + hw, y + hh),
+		];
+		const pending = this.items;
+		this.items = [];
+		for (const item of pending) {
+			this.insertInto(item);
+		}
+	}
+
+	/*
+	 * Every stored item whose rect strictly intersects `area` — including outside-bucket
+	 * items. Broad phase: callers still do the exact overlap test they need.
+	 */
+	query(area: Rect): T[] {
+		const out: T[] = [];
+		this.queryTree(area, out);
+		for (const item of this.outsideItems) {
+			if (item.rect.intersects(area)) {
+				out.push(item);
+			}
+		}
+		return out;
+	}
+
+	private queryTree(area: Rect, out: T[]): void {
+		if (!this.bounds.intersects(area)) {
+			return;
+		}
+		for (const item of this.items) {
+			if (item.rect.intersects(area)) {
+				out.push(item);
+			}
+		}
+		if (this.children) {
+			for (const child of this.children) {
+				child.queryTree(area, out);
+			}
+		}
+	}
+
+	/* Items that fell outside the root bounds (the "no-man's land" overflow). */
+	outside(): T[] {
+		return [...this.outsideItems];
+	}
+
+	/* Every item in the tree, including the outside bucket. For whole-set scans like the
+	 * clip check (CollisionDetector.escaping), which must see items the query area misses. */
+	all(): T[] {
+		const out: T[] = [];
+		this.collect(out);
+		out.push(...this.outsideItems);
+		return out;
+	}
+
+	private collect(out: T[]): void {
+		for (const item of this.items) {
+			out.push(item);
+		}
+		if (this.children) {
+			for (const child of this.children) {
+				child.collect(out);
+			}
+		}
+	}
+
+	clear(): void {
+		this.items = [];
+		this.children = null;
+		this.outsideItems.length = 0;
+	}
+}
diff --git a/tests/integration/__screenshots__/harmony_grace.png b/tests/integration/__screenshots__/harmony_grace.png
index d649655b3..03d85a95b 100644
Binary files a/tests/integration/__screenshots__/harmony_grace.png and b/tests/integration/__screenshots__/harmony_grace.png differ
diff --git a/tests/integration/__screenshots__/stretch_single_system_off.png b/tests/integration/__screenshots__/stretch_single_system_off.png
new file mode 100644
index 000000000..120b9f489
Binary files /dev/null and b/tests/integration/__screenshots__/stretch_single_system_off.png differ
diff --git a/tests/integration/render.test.ts b/tests/integration/render.test.ts
index faa35ac97..3832eebe0 100644
--- a/tests/integration/render.test.ts
+++ b/tests/integration/render.test.ts
@@ -570,9 +570,10 @@ const TEST_CASES = [
 	testCase('harmony.musicxml', 'harmony.png'),
 
 	// Treble stave, 4/4: a chord symbol over a note that carries a grace note. The grace
-	// note's group gives the main note a bogus near-origin bounding box; the harmony must
-	// position from the notehead (noteTop), not that box — otherwise it flies to the top of
-	// the page and defeats the top crop, leaving a huge blank margin above the system.
+	// note's group gives the main note a bogus near-origin bounding box; the collision
+	// pipeline builds obstacles from the notehead (noteTop), not that box — otherwise the
+	// symbol flies to the top of the page and defeats the top crop, leaving a huge blank
+	// margin above the system. The symbol also lifts a hair to clear the grace's stem tip.
 	// - M1: a "C" symbol over a B4 quarter preceded by a slashed D5 grace.
 	testCase('harmony_grace.musicxml', 'harmony_grace.png'),
 
@@ -722,6 +723,15 @@ const TEST_CASES = [
 		minLastSystemFill: 0,
 	}),
 
+	// A score that fits on a single system, rendered with stretchSingleSystem false. The
+	// lone system's few measures fill well under minLastSystemFill of the page, so instead
+	// of stretching to the full page width (the default — see aloof_measure_1.png) it stays
+	// ragged at its natural width: the staff ends well short of the right page edge with
+	// empty margin beyond it.
+	testCase('aloof_measure_1.musicxml', 'stretch_single_system_off.png', {
+		stretchSingleSystem: false,
+	}),
+
 	// The same two systems (nine then seven C5 whole-note measures), with a measure number
 	// printed above the left edge of every measure (measureNumbering 'every'): "1"-"9"
 	// across the top system, "10"-"16" across the bottom.