From 8029af850f44b4ccdf0ebf27f0416f0c23fdb201 Mon Sep 17 00:00:00 2001
From: Jared Johnson <jared@jaredjohnson.dev>
Date: Mon, 29 Jun 2026 18:10:49 -0400
Subject: [PATCH 01/10] improve dev site on mobile

---
 site/src/App.tsx | 727 ++++++++++++++++++++++++-----------------------
 1 file changed, 377 insertions(+), 350 deletions(-)

diff --git a/site/src/App.tsx b/site/src/App.tsx
index 73af0fe61..ffa1fad3e 100644
--- a/site/src/App.tsx
+++ b/site/src/App.tsx
@@ -434,386 +434,413 @@ export default function App() {
 			</header>
 
 			<main className="flex min-h-0 flex-1">
-				<aside className="fixed inset-x-0 bottom-0 z-20 flex max-h-[75vh] flex-col overflow-y-auto rounded-t-xl border-t border-zinc-200 bg-white p-4 shadow-[0_-4px_16px_rgba(0,0,0,0.1)] md:static md:max-h-none md:w-80 md:shrink-0 md:rounded-none md:border-t-0 md:border-r md:shadow-none">
+				{/* underlay: tap-to-close backdrop behind the panel (mobile only) */}
+				<div
+					onClick={() => setMobileOpen(false)}
+					aria-hidden="true"
+					className={`fixed inset-0 z-10 bg-black/40 transition-opacity duration-300 md:hidden ${mobileOpen ? 'opacity-100' : 'pointer-events-none opacity-0'}`}
+				/>
+
+				<aside className="fixed inset-x-0 bottom-0 z-20 flex flex-col rounded-t-xl border-t border-zinc-200 bg-white shadow-[0_-4px_16px_rgba(0,0,0,0.1)] md:static md:max-h-none md:w-80 md:shrink-0 md:overflow-y-auto md:rounded-none md:border-t-0 md:border-r md:shadow-none">
+					{/* top part: always visible, taps toggle the panel */}
 					<button
 						type="button"
 						onClick={() => setMobileOpen((o) => !o)}
-						className="mb-2 py-2 flex w-full items-center justify-center gap-2 rounded-md text-sm font-medium text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 active:bg-zinc-200 active:text-zinc-900 md:hidden"
+						aria-expanded={mobileOpen}
+						aria-label={mobileOpen ? 'Hide controls' : 'Show controls'}
+						className="flex w-full items-center justify-center rounded-t-xl py-3 text-zinc-600 hover:bg-zinc-100 active:bg-zinc-200 md:hidden"
 					>
-						{mobileOpen ? 'Hide' : 'Show'}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							strokeWidth={1.5}
+							stroke="currentColor"
+							aria-hidden="true"
+							className={`size-6 transition-transform duration-300 ${mobileOpen ? 'rotate-180' : ''}`}
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="m4.5 15.75 7.5-7.5 7.5 7.5"
+							/>
+						</svg>
 					</button>
 
+					{/* grid-rows 0fr↔1fr animates the height open/closed */}
 					<div
-						className={`flex-col gap-4 ${mobileOpen ? 'flex' : 'hidden'} md:flex`}
+						className={`grid transition-[grid-template-rows] duration-300 md:grid-rows-[1fr] ${mobileOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'}`}
 					>
-						<div className="flex flex-col gap-1.5">
-							<span className="text-xs font-medium text-zinc-500">
-								Upload file
-							</span>
-							<label className="cursor-pointer rounded-md bg-zinc-900 px-3 py-2 text-center text-sm font-medium text-white hover:bg-zinc-700">
-								Choose File
-								<input
-									type="file"
-									accept=".xml,.musicxml,.mxl"
-									className="hidden"
-									onChange={onFile}
-								/>
-							</label>
-						</div>
+						<div className="min-h-0 overflow-hidden">
+							<div className="flex max-h-[70vh] flex-col gap-4 overflow-y-auto p-4 md:max-h-none md:overflow-visible">
+								<div className="flex flex-col gap-1.5">
+									<span className="text-xs font-medium text-zinc-500">
+										Upload file
+									</span>
+									<label className="cursor-pointer rounded-md bg-zinc-900 px-3 py-2 text-center text-sm font-medium text-white hover:bg-zinc-700">
+										Choose File
+										<input
+											type="file"
+											accept=".xml,.musicxml,.mxl"
+											className="hidden"
+											onChange={onFile}
+										/>
+									</label>
+								</div>
 
-						<Or />
-
-						<div className="flex flex-col gap-1.5">
-							<label
-								htmlFor="example"
-								className="text-xs font-medium text-zinc-500"
-							>
-								Select an Example
-							</label>
-							<select
-								id="example"
-								value={fixture}
-								onChange={onPickFixture}
-								className="rounded-md border border-zinc-300 px-3 py-2 text-sm"
-							>
-								<option value="">Load an example…</option>
-								{fixtureNames.map((name) => (
-									<option key={name} value={name}>
-										{name}
-									</option>
-								))}
-							</select>
-						</div>
+								<Or />
+
+								<div className="flex flex-col gap-1.5">
+									<label
+										htmlFor="example"
+										className="text-xs font-medium text-zinc-500"
+									>
+										Select an Example
+									</label>
+									<select
+										id="example"
+										value={fixture}
+										onChange={onPickFixture}
+										className="rounded-md border border-zinc-300 px-3 py-2 text-sm"
+									>
+										<option value="">Load an example…</option>
+										{fixtureNames.map((name) => (
+											<option key={name} value={name}>
+												{name}
+											</option>
+										))}
+									</select>
+								</div>
 
-						<Or />
-
-						<div className="flex flex-col gap-1.5">
-							<label
-								htmlFor="musicxml"
-								className="text-xs font-medium text-zinc-500"
-							>
-								Edit MusicXML
-							</label>
-							<textarea
-								id="musicxml"
-								value={text}
-								onChange={onTextChange}
-								placeholder="Paste MusicXML here"
-								spellCheck={false}
-								className="h-48 resize-y rounded-md border border-zinc-200 p-2 font-mono text-xs"
-							/>
-						</div>
+								<Or />
+
+								<details className="flex flex-col gap-1.5">
+									<summary className="cursor-pointer text-xs font-medium text-zinc-500">
+										Edit MusicXML
+									</summary>
+									<textarea
+										id="musicxml"
+										value={text}
+										onChange={onTextChange}
+										placeholder="Paste MusicXML here"
+										spellCheck={false}
+										className="h-48 w-full resize-y rounded-md border border-zinc-200 p-2 font-mono text-xs"
+									/>
+								</details>
 
-						<button
-							type="button"
-							onClick={clearStorage}
-							disabled={!stored || cleared || restored}
-							className="flex items-center justify-center gap-1.5 rounded-md border border-zinc-300 px-3 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-50"
-						>
-							{cleared ? (
-								<>
-									Cleared
-									<CheckIcon />
-								</>
-							) : restored ? (
-								<>
-									Retrieved from local storage
-									<CheckIcon />
-								</>
-							) : (
-								'Clear local storage'
-							)}
-						</button>
-
-						<div className="flex flex-col gap-4 rounded-lg border border-zinc-200 bg-zinc-50 p-3">
-							<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"
+									onClick={clearStorage}
+									disabled={!stored || cleared || restored}
+									className="flex items-center justify-center gap-1.5 rounded-md border border-zinc-300 px-3 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-50"
 								>
-									Reset all
+									{cleared ? (
+										<>
+											Cleared
+											<CheckIcon />
+										</>
+									) : restored ? (
+										<>
+											Retrieved from local storage
+											<CheckIcon />
+										</>
+									) : (
+										'Clear local storage'
+									)}
 								</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"
-							>
-								<input
-									id="darkMode"
-									type="checkbox"
-									checked={dark}
-									onChange={(e) => setDark(e.target.checked)}
-								/>
-								Dark mode
-							</label>
-							<label
-								htmlFor="showInfo"
-								className="flex items-center gap-2 text-xs font-medium text-zinc-500"
-							>
-								<input
-									id="showInfo"
-									type="checkbox"
-									checked={showInfo}
-									onChange={(e) => {
-										setShowInfo(e.target.checked);
-										if (!e.target.checked) {
-											setTooltip(null);
-										}
-									}}
-								/>
-								Show note info on hover
-							</label>
-							<div className="flex flex-col gap-1.5">
-								<label
-									htmlFor="notationFont"
-									className="text-xs font-medium text-zinc-500"
-								>
-									Notation font
-								</label>
-								<select
-									id="notationFont"
-									value={notationFont}
-									onChange={(e) =>
-										setConfig((c) =>
-											e.target.value === 'Bravura'
-												? (({ fonts: _, ...rest }) => rest)(c)
-												: {
-														...c,
-														fonts: {
-															...c.fonts,
-															notation: { family: e.target.value },
-														},
-													},
-										)
-									}
-									className="rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm text-zinc-700"
-								>
-									<option value="Bravura">Bravura</option>
-									<option value="Petaluma">Petaluma</option>
-									<option value="Gonville">Gonville</option>
-								</select>
-								<p className="text-xs text-zinc-400">
-									The engraving font for noteheads, clefs, accidentals, and
-									rests. Bravura is the default.
-								</p>
-							</div>
 
-							<div className="flex flex-col gap-1.5">
-								<label
-									htmlFor="noteSpacing"
-									className="flex items-center justify-between text-xs font-medium text-zinc-500"
-								>
-									Note spacing
-									<span className="flex items-center gap-1.5">
-										<span className="font-mono text-zinc-400">
-											{noteSpacing}
+								<div className="flex flex-col gap-4 rounded-lg border border-zinc-200 bg-zinc-50 p-3">
+									<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={() => reset('noteSpacing')}
-											disabled={config.noteSpacing === undefined}
-											aria-label="Reset note spacing"
-											className="text-zinc-400 hover:text-zinc-600 disabled:cursor-default disabled:text-zinc-300 disabled:hover:text-zinc-300"
+											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"
 										>
-											<ResetIcon />
+											Reset all
 										</button>
-									</span>
-								</label>
-								<input
-									id="noteSpacing"
-									type="range"
-									min={12}
-									max={120}
-									step={1}
-									value={noteSpacing}
-									onChange={(e) =>
-										setConfig((c) => ({
-											...c,
-											noteSpacing: e.target.valueAsNumber,
-										}))
-									}
-								/>
-								<p className="text-xs text-zinc-400">
-									How much horizontal space notes get: the px a quarter note is
-									allotted. Higher spreads every measure wider.
-								</p>
-							</div>
+									</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"
+									>
+										<input
+											id="darkMode"
+											type="checkbox"
+											checked={dark}
+											onChange={(e) => setDark(e.target.checked)}
+										/>
+										Dark mode
+									</label>
+									<label
+										htmlFor="showInfo"
+										className="flex items-center gap-2 text-xs font-medium text-zinc-500"
+									>
+										<input
+											id="showInfo"
+											type="checkbox"
+											checked={showInfo}
+											onChange={(e) => {
+												setShowInfo(e.target.checked);
+												if (!e.target.checked) {
+													setTooltip(null);
+												}
+											}}
+										/>
+										Show note info on hover
+									</label>
+									<div className="flex flex-col gap-1.5">
+										<label
+											htmlFor="notationFont"
+											className="text-xs font-medium text-zinc-500"
+										>
+											Notation font
+										</label>
+										<select
+											id="notationFont"
+											value={notationFont}
+											onChange={(e) =>
+												setConfig((c) =>
+													e.target.value === 'Bravura'
+														? (({ fonts: _, ...rest }) => rest)(c)
+														: {
+																...c,
+																fonts: {
+																	...c.fonts,
+																	notation: { family: e.target.value },
+																},
+															},
+												)
+											}
+											className="rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm text-zinc-700"
+										>
+											<option value="Bravura">Bravura</option>
+											<option value="Petaluma">Petaluma</option>
+											<option value="Gonville">Gonville</option>
+										</select>
+										<p className="text-xs text-zinc-400">
+											The engraving font for noteheads, clefs, accidentals, and
+											rests. Bravura is the default.
+										</p>
+									</div>
 
-							<div className="flex flex-col gap-1.5">
-								<label
-									htmlFor="softmaxFactor"
-									className="flex items-center justify-between text-xs font-medium text-zinc-500"
-								>
-									Softmax factor
-									<span className="flex items-center gap-1.5">
-										<span className="font-mono text-zinc-400">
-											{softmaxFactor}
-										</span>
-										<button
-											type="button"
-											onClick={() => reset('softmaxFactor')}
-											disabled={config.softmaxFactor === undefined}
-											aria-label="Reset softmax factor"
-											className="text-zinc-400 hover:text-zinc-600 disabled:cursor-default disabled:text-zinc-300 disabled:hover:text-zinc-300"
+									<div className="flex flex-col gap-1.5">
+										<label
+											htmlFor="noteSpacing"
+											className="flex items-center justify-between text-xs font-medium text-zinc-500"
 										>
-											<ResetIcon />
-										</button>
-									</span>
-								</label>
-								<input
-									id="softmaxFactor"
-									type="range"
-									min={1}
-									max={30}
-									step={1}
-									value={softmaxFactor}
-									onChange={(e) =>
-										setConfig((c) => ({
-											...c,
-											softmaxFactor: e.target.valueAsNumber,
-										}))
-									}
-								/>
-								<p className="text-xs text-zinc-400">
-									How that space is divided among notes. Higher exaggerates the
-									width difference between long and short notes.
-								</p>
-							</div>
+											Note spacing
+											<span className="flex items-center gap-1.5">
+												<span className="font-mono text-zinc-400">
+													{noteSpacing}
+												</span>
+												<button
+													type="button"
+													onClick={() => reset('noteSpacing')}
+													disabled={config.noteSpacing === undefined}
+													aria-label="Reset note spacing"
+													className="text-zinc-400 hover:text-zinc-600 disabled:cursor-default disabled:text-zinc-300 disabled:hover:text-zinc-300"
+												>
+													<ResetIcon />
+												</button>
+											</span>
+										</label>
+										<input
+											id="noteSpacing"
+											type="range"
+											min={12}
+											max={120}
+											step={1}
+											value={noteSpacing}
+											onChange={(e) =>
+												setConfig((c) => ({
+													...c,
+													noteSpacing: e.target.valueAsNumber,
+												}))
+											}
+										/>
+										<p className="text-xs text-zinc-400">
+											How much horizontal space notes get: the px a quarter note
+											is allotted. Higher spreads every measure wider.
+										</p>
+									</div>
 
-							<div className="flex flex-col gap-1.5">
-								<label
-									htmlFor="systemSpacing"
-									className="flex items-center justify-between text-xs font-medium text-zinc-500"
-								>
-									System spacing
-									<span className="flex items-center gap-1.5">
-										<span className="font-mono text-zinc-400">
-											{systemSpacing}
-										</span>
-										<button
-											type="button"
-											onClick={() => reset('systemSpacing')}
-											disabled={config.systemSpacing === undefined}
-											aria-label="Reset system spacing"
-											className="text-zinc-400 hover:text-zinc-600 disabled:cursor-default disabled:text-zinc-300 disabled:hover:text-zinc-300"
+									<div className="flex flex-col gap-1.5">
+										<label
+											htmlFor="softmaxFactor"
+											className="flex items-center justify-between text-xs font-medium text-zinc-500"
 										>
-											<ResetIcon />
-										</button>
-									</span>
-								</label>
-								<input
-									id="systemSpacing"
-									type="range"
-									min={10}
-									max={50}
-									step={1}
-									value={systemSpacing}
-									onChange={(e) =>
-										setConfig((c) => ({
-											...c,
-											systemSpacing: e.target.valueAsNumber,
-										}))
-									}
-								/>
-								<p className="text-xs text-zinc-400">
-									Vertical gap between stacked systems. Lower packs systems
-									closer together down the page.
-								</p>
-							</div>
+											Softmax factor
+											<span className="flex items-center gap-1.5">
+												<span className="font-mono text-zinc-400">
+													{softmaxFactor}
+												</span>
+												<button
+													type="button"
+													onClick={() => reset('softmaxFactor')}
+													disabled={config.softmaxFactor === undefined}
+													aria-label="Reset softmax factor"
+													className="text-zinc-400 hover:text-zinc-600 disabled:cursor-default disabled:text-zinc-300 disabled:hover:text-zinc-300"
+												>
+													<ResetIcon />
+												</button>
+											</span>
+										</label>
+										<input
+											id="softmaxFactor"
+											type="range"
+											min={1}
+											max={30}
+											step={1}
+											value={softmaxFactor}
+											onChange={(e) =>
+												setConfig((c) => ({
+													...c,
+													softmaxFactor: e.target.valueAsNumber,
+												}))
+											}
+										/>
+										<p className="text-xs text-zinc-400">
+											How that space is divided among notes. Higher exaggerates
+											the width difference between long and short notes.
+										</p>
+									</div>
 
-							<div className="flex flex-col gap-1.5">
-								<label
-									htmlFor="maxSystemFill"
-									className="flex items-center justify-between text-xs font-medium text-zinc-500"
-								>
-									Max system fill
-									<span className="flex items-center gap-1.5">
-										<span className="font-mono text-zinc-400">
-											{maxSystemFill.toFixed(2)}
-										</span>
-										<button
-											type="button"
-											onClick={() => reset('maxSystemFill')}
-											disabled={config.maxSystemFill === undefined}
-											aria-label="Reset max system fill"
-											className="text-zinc-400 hover:text-zinc-600 disabled:cursor-default disabled:text-zinc-300 disabled:hover:text-zinc-300"
+									<div className="flex flex-col gap-1.5">
+										<label
+											htmlFor="systemSpacing"
+											className="flex items-center justify-between text-xs font-medium text-zinc-500"
 										>
-											<ResetIcon />
-										</button>
-									</span>
-								</label>
-								<input
-									id="maxSystemFill"
-									type="range"
-									min={0.1}
-									max={1}
-									step={0.05}
-									value={maxSystemFill}
-									onChange={(e) =>
-										setConfig((c) => ({
-											...c,
-											maxSystemFill: e.target.valueAsNumber,
-										}))
-									}
-								/>
-								<p className="text-xs text-zinc-400">
-									How full a system gets before the next measure wraps to a new
-									line. Lower leaves more air; 1 packs each line to the edge.
-								</p>
-							</div>
+											System spacing
+											<span className="flex items-center gap-1.5">
+												<span className="font-mono text-zinc-400">
+													{systemSpacing}
+												</span>
+												<button
+													type="button"
+													onClick={() => reset('systemSpacing')}
+													disabled={config.systemSpacing === undefined}
+													aria-label="Reset system spacing"
+													className="text-zinc-400 hover:text-zinc-600 disabled:cursor-default disabled:text-zinc-300 disabled:hover:text-zinc-300"
+												>
+													<ResetIcon />
+												</button>
+											</span>
+										</label>
+										<input
+											id="systemSpacing"
+											type="range"
+											min={10}
+											max={50}
+											step={1}
+											value={systemSpacing}
+											onChange={(e) =>
+												setConfig((c) => ({
+													...c,
+													systemSpacing: e.target.valueAsNumber,
+												}))
+											}
+										/>
+										<p className="text-xs text-zinc-400">
+											Vertical gap between stacked systems. Lower packs systems
+											closer together down the page.
+										</p>
+									</div>
 
-							<div className="flex flex-col gap-1.5">
-								<label
-									htmlFor="width"
-									className="flex items-center justify-between text-xs font-medium text-zinc-500"
-								>
-									Reference width
-									<span className="flex items-center gap-1.5">
-										<span className="font-mono text-zinc-400">{width}</span>
-										<button
-											type="button"
-											onClick={() =>
-												setConfig(({ layout: _, ...rest }) => rest)
+									<div className="flex flex-col gap-1.5">
+										<label
+											htmlFor="maxSystemFill"
+											className="flex items-center justify-between text-xs font-medium text-zinc-500"
+										>
+											Max system fill
+											<span className="flex items-center gap-1.5">
+												<span className="font-mono text-zinc-400">
+													{maxSystemFill.toFixed(2)}
+												</span>
+												<button
+													type="button"
+													onClick={() => reset('maxSystemFill')}
+													disabled={config.maxSystemFill === undefined}
+													aria-label="Reset max system fill"
+													className="text-zinc-400 hover:text-zinc-600 disabled:cursor-default disabled:text-zinc-300 disabled:hover:text-zinc-300"
+												>
+													<ResetIcon />
+												</button>
+											</span>
+										</label>
+										<input
+											id="maxSystemFill"
+											type="range"
+											min={0.1}
+											max={1}
+											step={0.05}
+											value={maxSystemFill}
+											onChange={(e) =>
+												setConfig((c) => ({
+													...c,
+													maxSystemFill: e.target.valueAsNumber,
+												}))
 											}
-											disabled={config.layout === undefined}
-											aria-label="Reset width"
-											className="text-zinc-400 hover:text-zinc-600 disabled:cursor-default disabled:text-zinc-300 disabled:hover:text-zinc-300"
+										/>
+										<p className="text-xs text-zinc-400">
+											How full a system gets before the next measure wraps to a
+											new line. Lower leaves more air; 1 packs each line to the
+											edge.
+										</p>
+									</div>
+
+									<div className="flex flex-col gap-1.5">
+										<label
+											htmlFor="width"
+											className="flex items-center justify-between text-xs font-medium text-zinc-500"
 										>
-											<ResetIcon />
-										</button>
-									</span>
-								</label>
-								<input
-									id="width"
-									type="range"
-									min={400}
-									max={2000}
-									step={50}
-									value={width}
-									onChange={(e) =>
-										setConfig((c) => ({
-											...c,
-											layout: {
-												type: 'standard',
-												width: e.target.valueAsNumber,
-											},
-										}))
-									}
-								/>
-								<p className="text-xs text-zinc-400">
-									The width the score is engraved to; the rendering then scales
-									up or down to fit its container. Wider fits more measures per
-									system before wrapping.
-								</p>
+											Reference width
+											<span className="flex items-center gap-1.5">
+												<span className="font-mono text-zinc-400">{width}</span>
+												<button
+													type="button"
+													onClick={() =>
+														setConfig(({ layout: _, ...rest }) => rest)
+													}
+													disabled={config.layout === undefined}
+													aria-label="Reset width"
+													className="text-zinc-400 hover:text-zinc-600 disabled:cursor-default disabled:text-zinc-300 disabled:hover:text-zinc-300"
+												>
+													<ResetIcon />
+												</button>
+											</span>
+										</label>
+										<input
+											id="width"
+											type="range"
+											min={400}
+											max={2000}
+											step={50}
+											value={width}
+											onChange={(e) =>
+												setConfig((c) => ({
+													...c,
+													layout: {
+														type: 'standard',
+														width: e.target.valueAsNumber,
+													},
+												}))
+											}
+										/>
+										<p className="text-xs text-zinc-400">
+											The width the score is engraved to; the rendering then
+											scales up or down to fit its container. Wider fits more
+											measures per system before wrapping.
+										</p>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>

From aa4fa441053c0340daecefdd805c6a77a3d1bf16 Mon Sep 17 00:00:00 2001
From: Jared Johnson <jared@jaredjohnson.dev>
Date: Mon, 29 Jun 2026 18:23:17 -0400
Subject: [PATCH 02/10] put local storage in its own section

---
 site/src/App.tsx | 53 ++++++++++++++++++++++++++++++------------------
 1 file changed, 33 insertions(+), 20 deletions(-)

diff --git a/site/src/App.tsx b/site/src/App.tsx
index ffa1fad3e..32d6c1eec 100644
--- a/site/src/App.tsx
+++ b/site/src/App.tsx
@@ -528,26 +528,39 @@ export default function App() {
 									/>
 								</details>
 
-								<button
-									type="button"
-									onClick={clearStorage}
-									disabled={!stored || cleared || restored}
-									className="flex items-center justify-center gap-1.5 rounded-md border border-zinc-300 px-3 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-50"
-								>
-									{cleared ? (
-										<>
-											Cleared
-											<CheckIcon />
-										</>
-									) : restored ? (
-										<>
-											Retrieved from local storage
-											<CheckIcon />
-										</>
-									) : (
-										'Clear local storage'
-									)}
-								</button>
+								<div className="flex flex-col gap-2 rounded-lg border border-zinc-200 bg-zinc-50 p-3">
+									<span className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+										Local storage
+									</span>
+									<p className="flex items-center gap-1 text-xs text-zinc-400">
+										{cleared ? (
+											<>
+												Cleared
+												<CheckIcon />
+											</>
+										) : restored ? (
+											<>
+												Retrieved from local storage
+												<CheckIcon />
+											</>
+										) : stored ? (
+											<>
+												Score saved
+												<CheckIcon />
+											</>
+										) : (
+											'Nothing saved'
+										)}
+									</p>
+									<button
+										type="button"
+										onClick={clearStorage}
+										disabled={!stored || cleared || restored}
+										className="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-50"
+									>
+										Clear local storage
+									</button>
+								</div>
 
 								<div className="flex flex-col gap-4 rounded-lg border border-zinc-200 bg-zinc-50 p-3">
 									<div className="flex items-center justify-between">

From 3aaf3507ca9c39b5c72cd5b5489802203d51b342 Mon Sep 17 00:00:00 2001
From: Jared Johnson <jared@jaredjohnson.dev>
Date: Mon, 29 Jun 2026 18:33:07 -0400
Subject: [PATCH 03/10] optimize App for mobile

---
 site/src/App.tsx | 178 +++++++++++++++++++++++------------------------
 1 file changed, 89 insertions(+), 89 deletions(-)

diff --git a/site/src/App.tsx b/site/src/App.tsx
index 32d6c1eec..859777d57 100644
--- a/site/src/App.tsx
+++ b/site/src/App.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { type ReactNode, useEffect, useRef, useState } from 'react';
 import type {
 	Config,
 	HoverEvent,
@@ -85,6 +85,28 @@ function CheckIcon() {
 	);
 }
 
+function Section({
+	title,
+	action,
+	children,
+}: {
+	title: string;
+	action?: ReactNode;
+	children: ReactNode;
+}) {
+	return (
+		<div className="flex flex-col gap-4 rounded-lg border border-zinc-200 bg-zinc-50 p-3">
+			<div className="flex items-center justify-between">
+				<span className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+					{title}
+				</span>
+				{action}
+			</div>
+			{children}
+		</div>
+	);
+}
+
 function Or() {
 	return (
 		<div className="flex items-center gap-2 text-xs text-zinc-400">
@@ -117,15 +139,12 @@ export default function App() {
 	);
 	const [cleared, setCleared] = useState(false);
 	const [restored, setRestored] = useState(false);
-	const [showInfo, setShowInfo] = useState(true);
+	const [scrolled, setScrolled] = useState(false);
 	const [tooltip, setTooltip] = useState<{
 		x: number;
 		y: number;
 		text: string;
 	} | null>(null);
-	// Read live inside the pointer handler so toggling the checkbox doesn't re-subscribe.
-	const showInfoRef = useRef(showInfo);
-	showInfoRef.current = showInfo;
 	// The note whose halo is currently lit, so the next move can turn it back off.
 	const haloRef = useRef<Note | null>(null);
 	const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(
@@ -251,7 +270,7 @@ export default function App() {
 					}
 					container.style.cursor = note ? 'pointer' : '';
 					// Only note-bearing targets get a tooltip; describe() is empty for a measure.
-					if (note && target && showInfoRef.current) {
+					if (note && target) {
 						const r = target.getBoundingClientRect();
 						setTooltip({
 							x: r.left + r.width / 2,
@@ -448,7 +467,7 @@ export default function App() {
 						onClick={() => setMobileOpen((o) => !o)}
 						aria-expanded={mobileOpen}
 						aria-label={mobileOpen ? 'Hide controls' : 'Show controls'}
-						className="flex w-full items-center justify-center rounded-t-xl py-3 text-zinc-600 hover:bg-zinc-100 active:bg-zinc-200 md:hidden"
+						className={`flex w-full items-center justify-center rounded-t-xl py-3 text-zinc-600 transition-shadow hover:bg-zinc-100 active:bg-zinc-200 md:hidden ${scrolled ? 'shadow-[0_4px_8px_rgba(0,0,0,0.08)]' : ''}`}
 					>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -472,66 +491,65 @@ export default function App() {
 						className={`grid transition-[grid-template-rows] duration-300 md:grid-rows-[1fr] ${mobileOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'}`}
 					>
 						<div className="min-h-0 overflow-hidden">
-							<div className="flex max-h-[70vh] flex-col gap-4 overflow-y-auto p-4 md:max-h-none md:overflow-visible">
-								<div className="flex flex-col gap-1.5">
-									<span className="text-xs font-medium text-zinc-500">
-										Upload file
-									</span>
-									<label className="cursor-pointer rounded-md bg-zinc-900 px-3 py-2 text-center text-sm font-medium text-white hover:bg-zinc-700">
-										Choose File
-										<input
-											type="file"
-											accept=".xml,.musicxml,.mxl"
-											className="hidden"
-											onChange={onFile}
-										/>
-									</label>
-								</div>
+							<div
+								onScroll={(e) => setScrolled(e.currentTarget.scrollTop > 0)}
+								className="flex max-h-[70vh] flex-col gap-4 overflow-y-auto p-4 md:max-h-none md:overflow-visible"
+							>
+								<Section title="MusicXML">
+									<div className="flex flex-col gap-1.5">
+										<label className="cursor-pointer rounded-md bg-zinc-900 px-3 py-2 text-center text-sm font-medium text-white hover:bg-zinc-700">
+											Choose File
+											<input
+												type="file"
+												accept=".xml,.musicxml,.mxl"
+												className="hidden"
+												onChange={onFile}
+											/>
+										</label>
+									</div>
 
-								<Or />
+									<Or />
 
-								<div className="flex flex-col gap-1.5">
-									<label
-										htmlFor="example"
-										className="text-xs font-medium text-zinc-500"
-									>
-										Select an Example
-									</label>
-									<select
-										id="example"
-										value={fixture}
-										onChange={onPickFixture}
-										className="rounded-md border border-zinc-300 px-3 py-2 text-sm"
-									>
-										<option value="">Load an example…</option>
-										{fixtureNames.map((name) => (
-											<option key={name} value={name}>
-												{name}
-											</option>
-										))}
-									</select>
-								</div>
+									<div className="flex flex-col gap-1.5">
+										<label
+											htmlFor="example"
+											className="text-xs font-medium text-zinc-500"
+										>
+											Select an Example
+										</label>
+										<select
+											id="example"
+											value={fixture}
+											onChange={onPickFixture}
+											className="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-700"
+										>
+											<option value="">Load an example…</option>
+											{fixtureNames.map((name) => (
+												<option key={name} value={name}>
+													{name}
+												</option>
+											))}
+										</select>
+									</div>
 
-								<Or />
-
-								<details className="flex flex-col gap-1.5">
-									<summary className="cursor-pointer text-xs font-medium text-zinc-500">
-										Edit MusicXML
-									</summary>
-									<textarea
-										id="musicxml"
-										value={text}
-										onChange={onTextChange}
-										placeholder="Paste MusicXML here"
-										spellCheck={false}
-										className="h-48 w-full resize-y rounded-md border border-zinc-200 p-2 font-mono text-xs"
-									/>
-								</details>
-
-								<div className="flex flex-col gap-2 rounded-lg border border-zinc-200 bg-zinc-50 p-3">
-									<span className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
-										Local storage
-									</span>
+									<Or />
+
+									<details className="flex flex-col gap-1.5">
+										<summary className="cursor-pointer text-xs font-medium text-zinc-500">
+											Edit MusicXML
+										</summary>
+										<textarea
+											id="musicxml"
+											value={text}
+											onChange={onTextChange}
+											placeholder="Paste MusicXML here"
+											spellCheck={false}
+											className="h-48 w-full resize-y rounded-md border border-zinc-300 bg-white p-2 font-mono text-xs text-zinc-700"
+										/>
+									</details>
+								</Section>
+
+								<Section title="Local storage">
 									<p className="flex items-center gap-1 text-xs text-zinc-400">
 										{cleared ? (
 											<>
@@ -560,13 +578,11 @@ export default function App() {
 									>
 										Clear local storage
 									</button>
-								</div>
+								</Section>
 
-								<div className="flex flex-col gap-4 rounded-lg border border-zinc-200 bg-zinc-50 p-3">
-									<div className="flex items-center justify-between">
-										<span className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
-											Config
-										</span>
+								<Section
+									title="Config"
+									action={
 										<button
 											type="button"
 											onClick={resetAll}
@@ -575,7 +591,8 @@ export default function App() {
 										>
 											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.
@@ -592,23 +609,6 @@ export default function App() {
 										/>
 										Dark mode
 									</label>
-									<label
-										htmlFor="showInfo"
-										className="flex items-center gap-2 text-xs font-medium text-zinc-500"
-									>
-										<input
-											id="showInfo"
-											type="checkbox"
-											checked={showInfo}
-											onChange={(e) => {
-												setShowInfo(e.target.checked);
-												if (!e.target.checked) {
-													setTooltip(null);
-												}
-											}}
-										/>
-										Show note info on hover
-									</label>
 									<div className="flex flex-col gap-1.5">
 										<label
 											htmlFor="notationFont"
@@ -853,7 +853,7 @@ export default function App() {
 											measures per system before wrapping.
 										</p>
 									</div>
-								</div>
+								</Section>
 							</div>
 						</div>
 					</div>

From 7f28bc92eb4928d8183b7e029f6b16e82c6d8cbd Mon Sep 17 00:00:00 2001
From: Jared Johnson <jared@jaredjohnson.dev>
Date: Tue, 30 Jun 2026 08:52:10 -0400
Subject: [PATCH 04/10] initial playback implementation

---
 src/config.ts                                 |  18 +
 src/cursor-view.test.ts                       |  77 +++
 src/cursor-view.ts                            |  53 ++
 src/cursor.test.ts                            | 217 ++++++
 src/cursor.ts                                 | 268 ++++++++
 src/hit.test.ts                               |   3 +-
 src/hit.ts                                    |  13 +-
 src/index.ts                                  |   8 +
 src/render.ts                                 |  19 +-
 src/score.test.ts                             |  22 +-
 src/score.ts                                  |  74 +++
 src/sequence-input.ts                         | 169 +++++
 src/sequence.test.ts                          | 412 ++++++++++++
 src/sequence.ts                               | 622 ++++++++++++++++++
 src/stage.test.ts                             |  45 ++
 src/stage.ts                                  | 119 +++-
 src/targets.test.ts                           |   2 +-
 src/targets.ts                                |   6 +
 .../__screenshots__/cursor_bar.png            | Bin 0 -> 6194 bytes
 tests/integration/cursor.test.ts              |  30 +
 20 files changed, 2161 insertions(+), 16 deletions(-)
 create mode 100644 src/cursor-view.test.ts
 create mode 100644 src/cursor-view.ts
 create mode 100644 src/cursor.test.ts
 create mode 100644 src/cursor.ts
 create mode 100644 src/sequence-input.ts
 create mode 100644 src/sequence.test.ts
 create mode 100644 src/sequence.ts
 create mode 100644 src/stage.test.ts
 create mode 100644 tests/integration/__screenshots__/cursor_bar.png
 create mode 100644 tests/integration/cursor.test.ts

diff --git a/src/config.ts b/src/config.ts
index 1075f9cc3..7e2506794 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -57,6 +57,20 @@ export type Config = {
 	 * system to the edge (the old greedy behavior). Only affects near-full systems — a line
 	 * whose measures already sit below this fill breaks at the same place either way. */
 	maxSystemFill: number;
+	/** Fixed container height in px, or null for none (default: null). When set, vexml puts the score
+	 * in a vertical scroll box at exactly this height — for system-stacked (standard) layouts taller
+	 * than the space you want them to take. Prefer maxHeight to cap only when the score overflows. */
+	height: number | null;
+	/** Max container height in px, or null for none (default: null). The score scrolls vertically once
+	 * it exceeds this; shorter scores keep their natural height. */
+	maxHeight: number | null;
+	/** Fixed container width in px, or null for none (default: null). When set, vexml puts the score in
+	 * a horizontal scroll box at this width — for panoramic (single-row) layouts wider than the space
+	 * available. Prefer maxWidth to cap only when the score overflows. */
+	width: number | null;
+	/** Max container width in px, or null for none (default: null). The score scrolls horizontally once
+	 * it exceeds this; narrower scores keep their natural width. */
+	maxWidth: number | null;
 };
 
 /** Default fonts: bundled Bravura for notation, Source Sans 3 for text. Families only —
@@ -82,4 +96,8 @@ export const DEFAULT_CONFIG: Config = {
 	stretchSingleSystem: true,
 	minLastSystemFill: 0.75,
 	maxSystemFill: 0.9,
+	height: null,
+	maxHeight: null,
+	width: null,
+	maxWidth: null,
 };
diff --git a/src/cursor-view.test.ts b/src/cursor-view.test.ts
new file mode 100644
index 000000000..6c7e957bd
--- /dev/null
+++ b/src/cursor-view.test.ts
@@ -0,0 +1,77 @@
+import { expect, test } from 'bun:test';
+import type { CursorChangeEvent } from './cursor';
+import { BarCursorView } from './cursor-view';
+import { Rect } from './geometry';
+import type { Layer } from './stage';
+
+// A recording 2D context: captures fillRect calls and whether the bitmap was cleared.
+class RecordingCtx {
+	fills: Array<{ x: number; y: number; w: number; h: number; style: string }> =
+		[];
+	cleared = false;
+	fillStyle = '';
+	readonly canvas = { width: 1000, height: 100 };
+	save(): void {}
+	restore(): void {}
+	setTransform(): void {}
+	clearRect(): void {
+		this.cleared = true;
+	}
+	fillRect(x: number, y: number, w: number, h: number): void {
+		this.fills.push({ x, y, w, h, style: this.fillStyle });
+	}
+}
+
+class FakeLayer implements Layer {
+	readonly recording = new RecordingCtx();
+	readonly ctx = this.recording as unknown as CanvasRenderingContext2D;
+	disposed = false;
+	dispose(): void {
+		this.disposed = true;
+	}
+}
+
+function changeAt(rect: Rect): CursorChangeEvent {
+	return {
+		timeMs: 0,
+		timeBeats: 0,
+		index: 0,
+		position: { rect, getBoundingClientRect: () => ({}) as DOMRect },
+		active: [],
+		started: [],
+		sustained: [],
+		stopped: [],
+		done: false,
+	};
+}
+
+test('draws a vertical bar straddling the onset x, spanning the system, after clearing', () => {
+	const layer = new FakeLayer();
+	const view = new BarCursorView(layer); // default width 2
+	view.render(changeAt(new Rect(10, 0, 1, 100)));
+	expect(layer.recording.cleared).toBe(true);
+	expect(layer.recording.fills).toEqual([
+		{ x: 9, y: 0, w: 2, h: 100, style: '#2563eb' },
+	]);
+});
+
+test('honors color and width options', () => {
+	const layer = new FakeLayer();
+	const view = new BarCursorView(layer, { color: 'red', widthPx: 4 });
+	view.render(changeAt(new Rect(10, 5, 1, 80)));
+	expect(layer.recording.fills).toEqual([
+		{ x: 8, y: 5, w: 4, h: 80, style: 'red' },
+	]);
+});
+
+test('repaints (clears) on each render and disposes its layer', () => {
+	const layer = new FakeLayer();
+	const view = new BarCursorView(layer);
+	view.render(changeAt(new Rect(10, 0, 1, 100)));
+	view.render(changeAt(new Rect(20, 0, 1, 100)));
+	// Only the latest bar remains (cleared between).
+	expect(layer.recording.fills).toHaveLength(2);
+	expect(layer.recording.fills.at(-1)?.x).toBe(19);
+	view.dispose();
+	expect(layer.disposed).toBe(true);
+});
diff --git a/src/cursor-view.ts b/src/cursor-view.ts
new file mode 100644
index 000000000..5ce9d2b6a
--- /dev/null
+++ b/src/cursor-view.ts
@@ -0,0 +1,53 @@
+import type { CursorChangeEvent, CursorView } from './cursor';
+import type { Layer } from './stage';
+
+/*
+ * vexml's built-in CursorView: a thin vertical bar spanning the system at the cursor's position,
+ * drawn on its own content layer (so it scrolls and scales with the engraving). The whole overlay is
+ * tiny, so each change just clears and repaints the bar at the interpolated position. Callers who
+ * want something else implement CursorView themselves; this is what Score.createCursorView returns.
+ */
+
+const DEFAULT_COLOR = '#2563eb';
+const DEFAULT_WIDTH_PX = 2;
+
+export interface BarCursorViewOptions {
+	color?: string;
+	widthPx?: number;
+}
+
+export class BarCursorView implements CursorView {
+	private readonly color: string;
+	private readonly widthPx: number;
+
+	constructor(
+		private readonly layer: Layer,
+		options?: BarCursorViewOptions,
+	) {
+		this.color = options?.color ?? DEFAULT_COLOR;
+		this.widthPx = options?.widthPx ?? DEFAULT_WIDTH_PX;
+	}
+
+	render(event: CursorChangeEvent): void {
+		const ctx = this.layer.ctx;
+		clear(ctx);
+		const rect = event.position.rect;
+		ctx.save();
+		ctx.fillStyle = this.color;
+		// Straddle the onset x so the bar sits on the note it marks.
+		ctx.fillRect(rect.x - this.widthPx / 2, rect.y, this.widthPx, rect.h);
+		ctx.restore();
+	}
+
+	dispose(): void {
+		this.layer.dispose();
+	}
+}
+
+// Clear the whole bitmap regardless of the dpr transform the layer applied (mirrors Decorations).
+function clear(ctx: CanvasRenderingContext2D): void {
+	ctx.save();
+	ctx.setTransform(1, 0, 0, 1, 0, 0);
+	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+	ctx.restore();
+}
diff --git a/src/cursor.test.ts b/src/cursor.test.ts
new file mode 100644
index 000000000..f45c84bc8
--- /dev/null
+++ b/src/cursor.test.ts
@@ -0,0 +1,217 @@
+import { expect, test } from 'bun:test';
+import {
+	Cursor,
+	type CursorChangeEvent,
+	type CursorHost,
+	type CursorView,
+	type Scroller,
+} from './cursor';
+import { Rect } from './geometry';
+import { buildSequence, type SequenceNote } from './sequence';
+import type { Note } from './targets';
+
+// Identity tokens — only used for identity in active sets / deltas.
+function fakeNote(label: string): Note {
+	return { label } as unknown as Note;
+}
+const SYS = new Rect(0, 0, 1000, 100);
+const A = fakeNote('a');
+const B = fakeNote('b');
+const C = fakeNote('c');
+const D = fakeNote('d');
+
+// Four quarters in one 4/4 measure @120bpm: steps at 0/500/1000/1500 ms, durationMs 2000.
+function fourQuarters() {
+	const notes: SequenceNote[] = [A, B, C, D].map((note, i) => ({
+		note,
+		measureIndex: 0,
+		measureBeat: i,
+		beats: 1,
+		x: 10 + i * 10,
+		tiedFrom: null,
+	}));
+	return buildSequence({
+		measures: [
+			{ index: 0, beats: 4, tempoBpm: 120, jumps: [], systemRect: SYS },
+		],
+		notes,
+	});
+}
+
+class FakeScroller implements Scroller {
+	calls: Rect[] = [];
+	scrollIntoView(rect: Rect): void {
+		this.calls.push(rect);
+	}
+}
+
+class FakeHost implements CursorHost {
+	readonly scroller = new FakeScroller();
+	// The visible box, in the same identity coords clientRectOf maps to. Defaults to covering SYS.
+	vp = new Rect(0, 0, 1000, 1000);
+	clientRectOf(rect: Rect): DOMRect {
+		return {
+			x: rect.x,
+			y: rect.y,
+			width: rect.w,
+			height: rect.h,
+			left: rect.x,
+			top: rect.y,
+			right: rect.right,
+			bottom: rect.bottom,
+		} as DOMRect;
+	}
+	viewportRect(): DOMRect {
+		return this.clientRectOf(this.vp);
+	}
+}
+
+class FakeView implements CursorView {
+	events: CursorChangeEvent[] = [];
+	disposed = false;
+	render(e: CursorChangeEvent): void {
+		this.events.push(e);
+	}
+	dispose(): void {
+		this.disposed = true;
+	}
+}
+
+test('next/previous step through tickables and clamp at the ends', () => {
+	const cursor = new Cursor(fourQuarters(), new FakeHost());
+	expect(cursor.getIndex()).toBe(0);
+	cursor.next();
+	expect(cursor.getIndex()).toBe(1);
+	expect(cursor.getTimeMs()).toBeCloseTo(500);
+	cursor.previous();
+	expect(cursor.getIndex()).toBe(0);
+	cursor.previous(); // clamp
+	expect(cursor.getIndex()).toBe(0);
+	cursor.next();
+	cursor.next();
+	cursor.next();
+	cursor.next(); // clamp at last (index 3)
+	expect(cursor.getIndex()).toBe(3);
+});
+
+test('seekMs clamps to [0, durationMs] and resolves the step', () => {
+	const cursor = new Cursor(fourQuarters(), new FakeHost());
+	cursor.seekMs(1200);
+	expect(cursor.getIndex()).toBe(2);
+	expect(cursor.getTimeMs()).toBeCloseTo(1200);
+	expect(cursor.getTimeBeats()).toBeCloseTo(2.4);
+	cursor.seekMs(-100);
+	expect(cursor.getTimeMs()).toBe(0);
+	expect(cursor.getIndex()).toBe(0);
+	cursor.seekMs(99999);
+	expect(cursor.getTimeMs()).toBeCloseTo(2000);
+	expect(cursor.getIndex()).toBe(3);
+	expect(cursor.isDone()).toBe(true);
+});
+
+test('seekBeats lands on the matching time', () => {
+	const cursor = new Cursor(fourQuarters(), new FakeHost());
+	cursor.seekBeats(2);
+	expect(cursor.getTimeMs()).toBeCloseTo(1000);
+	expect(cursor.getIndex()).toBe(2);
+});
+
+test('a mid-step seek interpolates the bar position', () => {
+	const cursor = new Cursor(fourQuarters(), new FakeHost());
+	const events: CursorChangeEvent[] = [];
+	cursor.addEventListener('change', (e) => events.push(e));
+	cursor.seekMs(250); // halfway through step 0 (beat 0.5), bar glides x 10 -> 20
+	const last = events.at(-1);
+	expect(last?.index).toBe(0);
+	expect(last?.position.rect.x).toBeCloseTo(15);
+	// Same step: no attack/release, the held note sustains.
+	expect(last?.started).toEqual([]);
+	expect(last?.sustained).toEqual([A]);
+	expect(last?.stopped).toEqual([]);
+});
+
+test('change reports note deltas: a retrigger is stop(prev) + start(next)', () => {
+	const cursor = new Cursor(fourQuarters(), new FakeHost());
+	const events: CursorChangeEvent[] = [];
+	cursor.addEventListener('change', (e) => events.push(e));
+	cursor.next(); // 0 -> 1
+	expect(events).toHaveLength(1);
+	const e = events[0];
+	expect(e?.index).toBe(1);
+	expect(e?.timeMs).toBeCloseTo(500);
+	expect(e?.active).toEqual([B]);
+	expect(e?.started).toEqual([B]);
+	expect(e?.stopped).toEqual([A]);
+	expect(e?.done).toBe(false);
+});
+
+test('removeEventListener stops delivery', () => {
+	const cursor = new Cursor(fourQuarters(), new FakeHost());
+	const seen: number[] = [];
+	const listener = (e: CursorChangeEvent) => seen.push(e.index);
+	cursor.addEventListener('change', listener);
+	cursor.next();
+	cursor.removeEventListener('change', listener);
+	cursor.next();
+	expect(seen).toEqual([1]);
+});
+
+test('attach renders once immediately, then on each change; unsubscribe detaches', () => {
+	const cursor = new Cursor(fourQuarters(), new FakeHost());
+	const view = new FakeView();
+	const detach = cursor.attach(view);
+	expect(view.events).toHaveLength(1); // immediate render
+	cursor.next();
+	expect(view.events).toHaveLength(2);
+	detach();
+	cursor.next();
+	expect(view.events).toHaveLength(2); // detached
+});
+
+test('dispose disposes still-attached views but not detached ones', () => {
+	const cursor = new Cursor(fourQuarters(), new FakeHost());
+	const attached = new FakeView();
+	const detached = new FakeView();
+	cursor.attach(attached);
+	cursor.attach(detached)();
+	cursor.dispose();
+	expect(attached.disposed).toBe(true);
+	expect(detached.disposed).toBe(false);
+});
+
+test('follow scrolls only when the bar is not fully visible', () => {
+	const host = new FakeHost();
+	const cursor = new Cursor(fourQuarters(), host);
+	host.vp = new Rect(0, 0, 1000, 1000); // covers the bar
+	const unfollow = cursor.follow();
+	cursor.next();
+	expect(host.scroller.calls).toHaveLength(0);
+	host.vp = new Rect(500, 0, 1000, 1000); // bar x ~20 now off-screen left
+	cursor.next();
+	expect(host.scroller.calls.length).toBeGreaterThan(0);
+	unfollow();
+	const before = host.scroller.calls.length;
+	cursor.next();
+	expect(host.scroller.calls).toHaveLength(before);
+});
+
+test('isFullyVisible reflects the viewport box', () => {
+	const host = new FakeHost();
+	const cursor = new Cursor(fourQuarters(), host);
+	host.vp = new Rect(0, 0, 1000, 1000);
+	expect(cursor.isFullyVisible()).toBe(true);
+	host.vp = new Rect(500, 0, 1000, 1000);
+	expect(cursor.isFullyVisible()).toBe(false);
+});
+
+test('dispose is idempotent and stops movement/emits; onDispose fires once', () => {
+	let disposes = 0;
+	const cursor = new Cursor(fourQuarters(), new FakeHost(), () => disposes++);
+	const seen: number[] = [];
+	cursor.addEventListener('change', (e) => seen.push(e.index));
+	cursor.dispose();
+	cursor.dispose();
+	cursor.next();
+	expect(seen).toEqual([]);
+	expect(disposes).toBe(1);
+});
diff --git a/src/cursor.ts b/src/cursor.ts
new file mode 100644
index 000000000..5ec9ea4d9
--- /dev/null
+++ b/src/cursor.ts
@@ -0,0 +1,268 @@
+import { EventBus, type EventListenable } from './events';
+import { Rect } from './geometry';
+import type { Sequence } from './sequence';
+import type { Bounded, Note } from './targets';
+
+/*
+ * A playback cursor: a position in a score's playback timeline that you step (next/previous) or seek
+ * (any ms or beat), reporting where it is and what's sounding so a caller can sync an instrument or
+ * audio UI. It holds an exact time, not just a step — the bar interpolates between onsets so it
+ * follows audio smoothly. Optional visuals and scrolling attach to it (attach/follow) and detach
+ * cleanly; it owns nothing of the score, so disposing it just unhooks. Distinct from mdom's editing
+ * Cursor — this never edits.
+ */
+
+/* What changed entering the current position. `started` are (re)attacks (a re-struck pitch shows in
+ * both `started` and `stopped`); `sustained` are notes held or tied through (do not re-press);
+ * `stopped` are releases (a note tied into this step is excluded — it keeps ringing). `active` is the
+ * full sounding set. `position` is the bar in score space, mappable to the page. */
+export interface CursorChangeEvent {
+	readonly timeMs: number;
+	readonly timeBeats: number;
+	readonly index: number;
+	readonly position: Bounded;
+	readonly active: readonly Note[];
+	readonly started: readonly Note[];
+	readonly sustained: readonly Note[];
+	readonly stopped: readonly Note[];
+	readonly done: boolean;
+}
+
+export interface CursorEventMap {
+	change: CursorChangeEvent;
+}
+
+/* A visual for the cursor, driven by the cursor on every change. vexml ships a vertical-bar default
+ * (Score.createCursorView); a caller can implement this to move a DOM element, draw on a layer, etc.
+ * `render` gets the full change event but a position-only view just reads `e.position`. */
+export interface CursorView {
+	render(e: CursorChangeEvent): void;
+	dispose(): void;
+}
+
+/* Scrolls a score-space rect into the viewport. vexml's Stage provides one (Score.scroller); a caller
+ * may pass their own to follow(). */
+export interface Scroller {
+	scrollIntoView(rect: Rect, opts?: { behavior?: ScrollBehavior }): void;
+}
+
+/* What a Cursor needs from the rendered score's stage: score<->client mapping (to expose the bar's
+ * page rect and test visibility), the visible scrollport box, and the default scroller. Stage
+ * implements it; a unit test injects a fake. */
+export interface CursorHost {
+	clientRectOf(rect: Rect): DOMRect;
+	viewportRect(): DOMRect;
+	readonly scroller: Scroller;
+}
+
+const EMPTY_RECT = new Rect(0, 0, 0, 0);
+
+/* The cursor's current box, mapped to the page on demand (mirrors a target's Bounded). */
+class CursorPosition implements Bounded {
+	constructor(
+		readonly rect: Rect,
+		private readonly host: CursorHost,
+	) {}
+	getBoundingClientRect(): DOMRect {
+		return this.host.clientRectOf(this.rect);
+	}
+}
+
+export class Cursor implements EventListenable<CursorEventMap> {
+	private readonly bus = new EventBus<CursorEventMap>();
+	// Unhook fns for attach/follow subscriptions, run on dispose; the views still attached at dispose,
+	// disposed with the cursor (a detached one is the caller's again).
+	private readonly cleanups = new Set<() => void>();
+	private readonly views = new Set<CursorView>();
+	private index = 0;
+	private ms = 0;
+	private disposed = false;
+
+	constructor(
+		private readonly sequence: Sequence,
+		private readonly host: CursorHost,
+		// Called from dispose so the Score can forget this cursor (avoids a leak / double dispose).
+		private readonly onDispose?: () => void,
+	) {}
+
+	/* Snap to the next tickable in playback order; a no-op on the last one. */
+	next(): void {
+		if (this.disposed || this.index >= this.sequence.length - 1) {
+			return;
+		}
+		const from = this.index;
+		this.index++;
+		this.ms = this.sequence.getStep(this.index)?.startMs ?? this.ms;
+		this.emit(from);
+	}
+
+	/* Snap to the previous tickable; a no-op on the first one. */
+	previous(): void {
+		if (this.disposed || this.index <= 0) {
+			return;
+		}
+		const from = this.index;
+		this.index--;
+		this.ms = this.sequence.getStep(this.index)?.startMs ?? this.ms;
+		this.emit(from);
+	}
+
+	/* Go to any wall-clock time (ms), clamped to [0, durationMs]. The position is kept exactly (the
+	 * bar interpolates within its step), so this is how you follow an audio clock. */
+	seekMs(timeMs: number): void {
+		if (this.disposed) {
+			return;
+		}
+		const clamped = Math.min(
+			Math.max(0, timeMs),
+			this.sequence.getDurationMs(),
+		);
+		const from = this.index;
+		this.ms = clamped;
+		this.index = this.sequence.getStepIndexAtMs(clamped) ?? 0;
+		this.emit(from);
+	}
+
+	/* Go to any time expressed in quarter-note beats. */
+	seekBeats(beats: number): void {
+		this.seekMs(this.sequence.beatsToMs(beats));
+	}
+
+	getTimeMs(): number {
+		return this.ms;
+	}
+
+	getTimeBeats(): number {
+		return this.sequence.msToBeats(this.ms);
+	}
+
+	getIndex(): number {
+		return this.index;
+	}
+
+	getActiveNotes(): readonly Note[] {
+		return this.sequence.getStep(this.index)?.active ?? [];
+	}
+
+	isDone(): boolean {
+		return this.ms >= this.sequence.getDurationMs();
+	}
+
+	/* Whether the bar's page box lies entirely within the viewport. True when there's nothing to show. */
+	isFullyVisible(): boolean {
+		const rect = this.sequence.positionAt(this.ms);
+		if (!rect) {
+			return true;
+		}
+		const bar = this.host.clientRectOf(rect);
+		const vp = this.host.viewportRect();
+		return (
+			bar.left >= vp.left &&
+			bar.right <= vp.right &&
+			bar.top >= vp.top &&
+			bar.bottom <= vp.bottom
+		);
+	}
+
+	/* Attach a visual, synced on every change. Renders once immediately. Returns an unsubscribe that
+	 * detaches without disposing the view (the caller gets it back); dispose() disposes whatever's
+	 * still attached. */
+	attach(view: CursorView): () => void {
+		const listener = (e: CursorChangeEvent) => view.render(e);
+		this.bus.addEventListener('change', listener);
+		this.views.add(view);
+		const detach = () => {
+			this.bus.removeEventListener('change', listener);
+			this.views.delete(view);
+			this.cleanups.delete(detach);
+		};
+		this.cleanups.add(detach);
+		view.render(this.snapshot(null));
+		return detach;
+	}
+
+	/* Auto-scroll: on every change, scroll the bar into view when it isn't fully visible. Uses the
+	 * given scroller, or the score's. Scrolls once immediately if needed. Returns an unsubscribe. */
+	follow(scroller?: Scroller): () => void {
+		const target = scroller ?? this.host.scroller;
+		const listener = () => {
+			if (!this.isFullyVisible()) {
+				target.scrollIntoView(this.barRect());
+			}
+		};
+		this.bus.addEventListener('change', listener);
+		const unfollow = () => {
+			this.bus.removeEventListener('change', listener);
+			this.cleanups.delete(unfollow);
+		};
+		this.cleanups.add(unfollow);
+		listener();
+		return unfollow;
+	}
+
+	/* Scroll the bar into view once, via the score's scroller. */
+	scrollIntoView(opts?: { behavior?: ScrollBehavior }): void {
+		this.host.scroller.scrollIntoView(this.barRect(), opts);
+	}
+
+	addEventListener<K extends keyof CursorEventMap>(
+		type: K,
+		listener: (event: CursorEventMap[K]) => void,
+	): void {
+		this.bus.addEventListener(type, listener);
+	}
+
+	removeEventListener<K extends keyof CursorEventMap>(
+		type: K,
+		listener: (event: CursorEventMap[K]) => void,
+	): void {
+		this.bus.removeEventListener(type, listener);
+	}
+
+	dispose(): void {
+		if (this.disposed) {
+			return;
+		}
+		this.disposed = true;
+		// Snapshot the attached views first: the cleanups below detach them (removing them from the
+		// set), so capture who to dispose before running them.
+		const toDispose = [...this.views];
+		for (const cleanup of [...this.cleanups]) {
+			cleanup();
+		}
+		this.cleanups.clear();
+		for (const view of toDispose) {
+			view.dispose();
+		}
+		this.views.clear();
+		this.onDispose?.();
+	}
+
+	private barRect(): Rect {
+		return this.sequence.positionAt(this.ms) ?? EMPTY_RECT;
+	}
+
+	// Build the change payload, classifying note deltas against `from` (the step the cursor came from,
+	// or null for an initial full-state snapshot).
+	private snapshot(from: number | null): CursorChangeEvent {
+		const { started, sustained, stopped } = this.sequence.classify(
+			from,
+			this.index,
+		);
+		return {
+			timeMs: this.ms,
+			timeBeats: this.sequence.msToBeats(this.ms),
+			index: this.index,
+			position: new CursorPosition(this.barRect(), this.host),
+			active: this.getActiveNotes(),
+			started,
+			sustained,
+			stopped,
+			done: this.isDone(),
+		};
+	}
+
+	private emit(from: number): void {
+		this.bus.emit('change', this.snapshot(from));
+	}
+}
diff --git a/src/hit.test.ts b/src/hit.test.ts
index cfdcfb0a3..4415b9134 100644
--- a/src/hit.test.ts
+++ b/src/hit.test.ts
@@ -92,7 +92,8 @@ function build() {
 		notes,
 		measures: [{ rect: new Rect(0, 0, 200, 100), index: 0, number: '1' }],
 	};
-	return buildTargets(geometry, new FakeViewport(), new FakeDecorator());
+	return buildTargets(geometry, new FakeViewport(), new FakeDecorator())
+		.hitTester;
 }
 
 test('a notehead beats the measure background under it', () => {
diff --git a/src/hit.ts b/src/hit.ts
index f0e7f7955..4dfbba936 100644
--- a/src/hit.ts
+++ b/src/hit.ts
@@ -50,6 +50,13 @@ export interface HitTester {
 	hitTest(point: { x: number; y: number }): PointerTarget | null;
 }
 
+/* What buildTargets returns: the spatial index, plus the mdom-note -> Note map so the playback
+ * timeline can reference the very same Note identities the index hit-tests to. */
+export interface TargetIndex {
+	hitTester: HitTester;
+	notes: ReadonlyMap<MNote, Note>;
+}
+
 export class QuadTreeHitTester implements HitTester {
 	constructor(private readonly tree: QuadTree<PointerTarget>) {}
 
@@ -94,10 +101,10 @@ export function buildTargets(
 	geometry: RawGeometry,
 	viewport: Viewport,
 	decorator: Decorator,
-): HitTester {
+): TargetIndex {
 	const measures = new Map<number, Measure>();
 	for (const m of geometry.measures) {
-		measures.set(m.index, new Measure(m.rect, viewport, m.number));
+		measures.set(m.index, new Measure(m.rect, viewport, m.number, m.index));
 	}
 
 	const noteByMnote = new Map<MNote, Note>();
@@ -151,5 +158,5 @@ export function buildTargets(
 	for (const measure of measures.values()) {
 		tree.insert(measure);
 	}
-	return new QuadTreeHitTester(tree);
+	return { hitTester: new QuadTreeHitTester(tree), notes: noteByMnote };
 }
diff --git a/src/index.ts b/src/index.ts
index 139bd7a5c..f3a27ccd6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,6 +6,14 @@ export {
 	type ChordSpec,
 } from './chord-diagram';
 export type { Config } from './config';
+export {
+	Cursor,
+	type CursorChangeEvent,
+	type CursorEventMap,
+	type CursorView,
+	type Scroller,
+} from './cursor';
+export type { BarCursorViewOptions } from './cursor-view';
 export type {
 	EventListenable,
 	HoverEvent,
diff --git a/src/render.ts b/src/render.ts
index 391e69696..f92fd69db 100644
--- a/src/render.ts
+++ b/src/render.ts
@@ -8,6 +8,8 @@ import { Rect } from './geometry';
 import { buildTargets, type RawGeometry } from './hit';
 import { computeLayout } from './layout';
 import { Score } from './score';
+import { buildSequence } from './sequence';
+import { buildSequenceInput } from './sequence-input';
 import { Stage } from './stage';
 
 const EMPTY_GEOMETRY: RawGeometry = {
@@ -33,7 +35,12 @@ export async function render(
 		throw new RangeError('render: minLastSystemFill must be between 0 and 1');
 	}
 
-	const stage = new Stage(container);
+	const stage = new Stage(container, {
+		height: resolved.height,
+		maxHeight: resolved.maxHeight,
+		width: resolved.width,
+		maxWidth: resolved.maxWidth,
+	});
 	// Fonts and CSS vars go on the container; the managed canvas inherits them, so drawScore's
 	// getComputedStyle(canvas) read of --vexml-font-text still resolves.
 	const { notation, text } = loadFonts(container, resolved.fonts);
@@ -69,6 +76,12 @@ export async function render(
 	// decorations are the Decorator their color/halo toggles delegate to (drawing on a content
 	// layer the stage hands them). Both feed buildTargets, which links the targets and indexes them.
 	const decorations = new Decorations(stage);
-	const index = buildTargets(geometry, stage, decorations);
-	return new Score(stage, index, decorations);
+	const targets = buildTargets(geometry, stage, decorations);
+	// The playback timeline: the parsed parts give onsets/meter/tempo/repeats/ties, the geometry gives
+	// note x and system boxes, and the target map ties active notes to the same identities hit-testing
+	// returns. Built for every score (empty when there are no parts).
+	const sequence = buildSequence(
+		buildSequenceInput(parts, geometry, targets.notes),
+	);
+	return new Score(stage, targets.hitTester, decorations, sequence);
 }
diff --git a/src/score.test.ts b/src/score.test.ts
index 46cb433e6..d48e3f84e 100644
--- a/src/score.test.ts
+++ b/src/score.test.ts
@@ -1,11 +1,16 @@
 import { expect, test } from 'bun:test';
+import type { Scroller } from './cursor';
 import { Decorations } from './decorations';
 import { Rect } from './geometry';
 import type { HitTester } from './hit';
 import { Score } from './score';
+import { buildSequence } from './sequence';
 import type { Host, Layer, LayerKind } from './stage';
 import { Measure, type PointerTarget, type Viewport } from './targets';
 
+// An empty timeline — these tests exercise events/layers/hover, not playback.
+const EMPTY_SEQUENCE = buildSequence({ measures: [], notes: [] });
+
 // Separate fake classes fulfilling the injected seams (preferred over mocks).
 
 // A no-op 2D context: the real Decorations draws on the layer it gets from the host, so the fake
@@ -71,6 +76,13 @@ class FakeHost implements Host {
 		this.created.push(layer);
 		return layer;
 	}
+	clientRectOf(rect: Rect): DOMRect {
+		return { x: rect.x, y: rect.y, width: rect.w, height: rect.h } as DOMRect;
+	}
+	viewportRect(): DOMRect {
+		return { x: 0, y: 0, width: 0, height: 0 } as DOMRect;
+	}
+	readonly scroller: Scroller = { scrollIntoView() {} };
 	relayoutLayers(): void {
 		this.relayoutLayersCalls++;
 	}
@@ -109,12 +121,12 @@ function fixture(target: PointerTarget | null) {
 	const host = new FakeHost();
 	const index = new FakeHitTester(target);
 	const decorations = new Decorations(host);
-	const score = new Score(host, index, decorations);
+	const score = new Score(host, index, decorations, EMPTY_SEQUENCE);
 	return { host, index, decorations, score };
 }
 
 test('a pointer event hit-tests the point and emits target, score-space point, and native', () => {
-	const target = new Measure(new Rect(0, 0, 10, 10), viewport, '1');
+	const target = new Measure(new Rect(0, 0, 10, 10), viewport, '1', 0);
 	const { host, index, score } = fixture(target);
 	const seen: Array<{ type: string; x: number; y: number; native: Event }> = [];
 	score.addEventListener('pointermove', (e) =>
@@ -178,13 +190,13 @@ test('scroll events carry the offset and the score.scroll getter reflects the ho
 });
 
 test('hover fires only on target change and recomputes on scroll; unsubscribe detaches scroll', () => {
-	const target = new Measure(new Rect(0, 0, 10, 10), viewport, '1');
+	const target = new Measure(new Rect(0, 0, 10, 10), viewport, '1', 0);
 	const host = new FakeHost();
 	// A mutable hit result lets the test flip what's "under the pointer" to simulate scrolling the
 	// target out from under a stationary pointer (FakeHost.toScoreSpace is identity).
 	let hit: PointerTarget | null = target;
 	const index: HitTester = { hitTest: () => hit };
-	const score = new Score(host, index, new Decorations(host));
+	const score = new Score(host, index, new Decorations(host), EMPTY_SEQUENCE);
 
 	const seen: Array<PointerTarget | null> = [];
 	const listener = (e: { target: PointerTarget | null }) => seen.push(e.target);
@@ -238,7 +250,7 @@ test('addLayer forwards zIndex to the host and rejects non-integers', () => {
 });
 
 test('dispose detaches every listener and tears down decorations and host', () => {
-	const target = new Measure(new Rect(0, 0, 10, 10), viewport, '1');
+	const target = new Measure(new Rect(0, 0, 10, 10), viewport, '1', 0);
 	const { host, index, decorations, score } = fixture(target);
 	score.addEventListener('pointermove', () => {});
 	score.addEventListener('resize', () => {});
diff --git a/src/score.ts b/src/score.ts
index c938a3f66..ec56f34aa 100644
--- a/src/score.ts
+++ b/src/score.ts
@@ -1,6 +1,9 @@
+import { Cursor, type CursorView, type Scroller } from './cursor';
+import { BarCursorView, type BarCursorViewOptions } from './cursor-view';
 import type { Decorations } from './decorations';
 import { EventBus, type EventListenable, type ScoreEventMap } from './events';
 import type { HitTester } from './hit';
+import type { Sequence } from './sequence';
 import type { Host, Layer, LayerKind } from './stage';
 import type { PointerTarget } from './targets';
 
@@ -31,11 +34,14 @@ export class Score implements EventListenable<ScoreEventMap> {
 	private hovered: PointerTarget | null = null;
 	private lastClient: { x: number; y: number } | null = null;
 	private unobserveScroll: (() => void) | null = null;
+	// Live playback cursors, disposed with the score; each removes itself on its own dispose.
+	private readonly cursors = new Set<Cursor>();
 
 	constructor(
 		private readonly host: Host,
 		private readonly index: HitTester,
 		private readonly decorations: Decorations,
+		private readonly sequence: Sequence,
 	) {
 		// On resize: re-sync the layers (viewport layers are refit and cleared; content layers just
 		// re-track the base canvas) before telling the caller, so a viewport-layer redraw in the
@@ -72,6 +78,70 @@ export class Score implements EventListenable<ScoreEventMap> {
 		layer.dispose();
 	}
 
+	/* Add a playback cursor over this score's timeline. Headless by default — attach a view
+	 * (createCursorView) and/or follow the scroller for visuals. Disposed when the score is. */
+	addCursor(): Cursor {
+		const cursor = new Cursor(this.sequence, this.host, () =>
+			this.cursors.delete(cursor),
+		);
+		this.cursors.add(cursor);
+		return cursor;
+	}
+
+	/* vexml's default cursor visual — a vertical bar on its own content layer. Hand it to a cursor
+	 * with cursor.attach(view). Style it with `color`/`widthPx`, or implement CursorView for your own. */
+	createCursorView(options?: BarCursorViewOptions): CursorView {
+		return new BarCursorView(this.host.createLayer('content'), options);
+	}
+
+	/* The score's scroller, to give a cursor (cursor.follow) or scroll a rect into view directly. */
+	get scroller(): Scroller {
+		return this.host.scroller;
+	}
+
+	/* Total playback time of the score, repeats and voltas expanded. */
+	getDurationMs(): number {
+		return this.sequence.getDurationMs();
+	}
+
+	/* Total playback length in quarter-note beats, repeats and voltas expanded. */
+	getDurationBeats(): number {
+		return this.sequence.getDurationBeats();
+	}
+
+	/* The earliest playback time at a score-space point (jump-aware: a repeated spot maps to its
+	 * first pass), or null on empty space. Hit-tests the point, then maps the target to its first
+	 * step — a note/fret to its onset, a measure to its first onset. */
+	getTimeMsAt(point: { x: number; y: number }): number | null {
+		const index = this.stepIndexAt(point);
+		return index === null
+			? null
+			: (this.sequence.getStep(index)?.startMs ?? null);
+	}
+
+	/* The earliest playback time at a point, in quarter-note beats. See getTimeMsAt. */
+	getTimeBeatsAt(point: { x: number; y: number }): number | null {
+		const index = this.stepIndexAt(point);
+		return index === null
+			? null
+			: (this.sequence.getStep(index)?.startBeat ?? null);
+	}
+
+	private stepIndexAt(point: { x: number; y: number }): number | null {
+		const target = this.index.hitTest(point);
+		if (!target) {
+			return null;
+		}
+		switch (target.type) {
+			case 'note':
+				return this.sequence.getFirstStepOfNote(target);
+			case 'tab-position':
+				return this.sequence.getFirstStepOfNote(target.getNote());
+			case 'measure':
+				return this.sequence.getFirstStepOfMeasure(target.getIndex());
+		}
+	}
+
 	addEventListener<K extends keyof ScoreEventMap>(
 		type: K,
 		listener: (event: ScoreEventMap[K]) => void,
@@ -94,6 +164,10 @@ export class Score implements EventListenable<ScoreEventMap> {
 	}
 
 	dispose(): void {
+		for (const cursor of [...this.cursors]) {
+			cursor.dispose();
+		}
+		this.cursors.clear();
 		for (const handlers of this.bound.values()) {
 			for (const [domType, handler] of handlers) {
 				this.host.events.removeEventListener(domType, handler);
diff --git a/src/sequence-input.ts b/src/sequence-input.ts
new file mode 100644
index 000000000..315775e90
--- /dev/null
+++ b/src/sequence-input.ts
@@ -0,0 +1,169 @@
+import type { Note as MNote, Part } from '@stringsync/mdom';
+import { Rect } from './geometry';
+import type { RawGeometry } from './hit';
+import { meterBeats, tempoOf } from './notes';
+import type {
+	Jump,
+	MeasureInfo,
+	SequenceInput,
+	SequenceNote,
+} from './sequence';
+import type { Note } from './targets';
+
+/*
+ * Builds the `SequenceInput` the playback timeline is assembled from, bridging the parsed document
+ * (onsets, meter, tempo, repeats, ties) and the engraved geometry (note x, system boxes) into the
+ * pure shape `buildSequence` consumes. Kept apart from both `render.ts` (orchestration) and
+ * `sequence.ts` (pure timeline) so each stays focused.
+ */
+
+// MusicXML <beat-unit> (a note type) -> quarter notes, so a metronome mark normalizes to quarter BPM.
+const QUARTERS_PER_UNIT: Record<string, number> = {
+	whole: 4,
+	half: 2,
+	quarter: 1,
+	eighth: 0.5,
+	'16th': 0.25,
+	'32nd': 0.125,
+	'64th': 0.0625,
+	'128th': 0.03125,
+};
+
+function quarterBpm(measure: Part['measures'][number]): number | null {
+	const tempo = tempoOf(measure);
+	if (!tempo) {
+		return null;
+	}
+	return tempo.bpm * (QUARTERS_PER_UNIT[tempo.duration] ?? 1);
+}
+
+/* How many passes a volta ending covers, from its `<ending number>` ("1", "1,2", "1-3"). */
+function endingPasses(numberAttr: string | null): number {
+	if (!numberAttr) {
+		return 1;
+	}
+	let total = 0;
+	for (const part of numberAttr.split(',')) {
+		const range = part.trim().match(/^(\d+)\s*-\s*(\d+)$/);
+		if (range) {
+			total += Math.max(1, Number(range[2]) - Number(range[1]) + 1);
+		} else if (part.trim()) {
+			total += 1;
+		}
+	}
+	return Math.max(1, total);
+}
+
+/* The repeat/volta jumps on a measure, read from its barlines. A volta start (`<ending type=start>`)
+ * supersedes a co-located backward repeat (the iterator handles the back-jump). */
+function jumpsOf(measure: Part['measures'][number]): Jump[] {
+	let start = false;
+	let endingPassCount = 0;
+	let endTimes = -1;
+	for (const barline of measure.barlines) {
+		const ending = barline.child('ending');
+		if (ending && ending.getAttribute('type') === 'start') {
+			endingPassCount = endingPasses(ending.getAttribute('number'));
+		}
+		if (barline.repeat === 'forward') {
+			start = true;
+		} else if (barline.repeat === 'backward') {
+			const times = Number(barline.child('repeat')?.getAttribute('times') ?? 2);
+			endTimes = Math.max(0, times - 1);
+		}
+	}
+	const jumps: Jump[] = [];
+	if (start) {
+		jumps.push({ type: 'repeatstart' });
+	}
+	if (endingPassCount > 0) {
+		jumps.push({ type: 'repeatending', times: endingPassCount });
+	} else if (endTimes >= 0) {
+		jumps.push({ type: 'repeatend', times: endTimes });
+	}
+	return jumps;
+}
+
+/* A measure's played length in quarter-note beats: the latest note end across all parts (so pickups
+ * and ragged voices are honored), falling back to the meter. */
+function measureBeats(parts: Part[], index: number): number {
+	let maxEnd = 0;
+	for (const part of parts) {
+		const measure = part.measures[index];
+		if (!measure) {
+			continue;
+		}
+		for (const note of measure.notes) {
+			const onset = note.measureBeat;
+			const beats = note.beats;
+			if (onset !== null && beats !== null) {
+				maxEnd = Math.max(maxEnd, onset + beats);
+			}
+		}
+	}
+	if (maxEnd > 0) {
+		return maxEnd;
+	}
+	return meterBeats(parts[0]?.measures[index]?.getTime() ?? null);
+}
+
+/* The note a tied note continues from (the start side of a tie ending here), or null. */
+function tiedFromOf(
+	mnote: MNote,
+	notesByMnote: ReadonlyMap<MNote, Note>,
+): Note | null {
+	for (const tie of mnote.ties) {
+		if (tie.tieType === 'stop') {
+			const from = tie.partner?.note;
+			const target = from ? notesByMnote.get(from) : undefined;
+			if (target) {
+				return target;
+			}
+		}
+	}
+	return null;
+}
+
+export function buildSequenceInput(
+	parts: Part[],
+	geometry: RawGeometry,
+	notesByMnote: ReadonlyMap<MNote, Note>,
+): SequenceInput {
+	const systemRectByIndex = new Map<number, Rect>();
+	for (const measure of geometry.measures) {
+		systemRectByIndex.set(measure.index, measure.rect);
+	}
+
+	const measureCount = parts[0]?.measures.length ?? 0;
+	const measures: MeasureInfo[] = [];
+	for (let i = 0; i < measureCount; i++) {
+		const m0 = parts[0]?.measures[i];
+		measures.push({
+			index: i,
+			beats: measureBeats(parts, i),
+			tempoBpm: m0 ? quarterBpm(m0) : null,
+			jumps: m0 ? jumpsOf(m0) : [],
+			systemRect: systemRectByIndex.get(i) ?? new Rect(0, 0, 0, 0),
+		});
+	}
+
+	const notes: SequenceNote[] = [];
+	for (const rn of geometry.notes) {
+		const note = notesByMnote.get(rn.mnote);
+		const measureBeat = rn.mnote.measureBeat;
+		const beats = rn.mnote.beats;
+		if (!note || measureBeat === null || beats === null) {
+			continue;
+		}
+		notes.push({
+			note,
+			measureIndex: rn.measureIndex,
+			measureBeat,
+			beats,
+			x: rn.rect.x,
+			tiedFrom: tiedFromOf(rn.mnote, notesByMnote),
+		});
+	}
+
+	return { measures, notes };
+}
diff --git a/src/sequence.test.ts b/src/sequence.test.ts
new file mode 100644
index 000000000..880cc4274
--- /dev/null
+++ b/src/sequence.test.ts
@@ -0,0 +1,412 @@
+import { expect, test } from 'bun:test';
+import { Rect } from './geometry';
+import {
+	beatsToMs,
+	buildSequence,
+	classifyTransition,
+	type Jump,
+	MeasureSequenceIterator,
+	msToBeats,
+	type SequenceNote,
+} from './sequence';
+import type { Note } from './targets';
+
+// ── MeasureSequenceIterator (ported from legacy vexml) ──
+
+function order(measures: Array<{ index: number; jumps: Jump[] }>): number[] {
+	return [...new MeasureSequenceIterator(measures)];
+}
+
+test('iterator: empty when there are no measures', () => {
+	expect(order([])).toEqual([]);
+});
+
+test('iterator: same as input when there are no repeats', () => {
+	expect(
+		order([
+			{ index: 0, jumps: [] },
+			{ index: 1, jumps: [] },
+			{ index: 2, jumps: [] },
+		]),
+	).toEqual([0, 1, 2]);
+});
+
+test('iterator: repeats a single measure', () => {
+	expect(
+		order([
+			{
+				index: 0,
+				jumps: [{ type: 'repeatstart' }, { type: 'repeatend', times: 1 }],
+			},
+		]),
+	).toEqual([0, 0]);
+});
+
+test('iterator: repeats a single measure multiple times', () => {
+	expect(
+		order([
+			{
+				index: 0,
+				jumps: [{ type: 'repeatstart' }, { type: 'repeatend', times: 3 }],
+			},
+		]),
+	).toEqual([0, 0, 0, 0]);
+});
+
+test('iterator: repeats a single measure when the start is not at the beginning', () => {
+	expect(
+		order([
+			{ index: 0, jumps: [] },
+			{ index: 1, jumps: [{ type: 'repeatstart' }] },
+			{ index: 2, jumps: [{ type: 'repeatend', times: 1 }] },
+		]),
+	).toEqual([0, 1, 2, 1, 2]);
+});
+
+test('iterator: repeats multiple measures', () => {
+	expect(
+		order([
+			{ index: 0, jumps: [{ type: 'repeatstart' }] },
+			{ index: 1, jumps: [{ type: 'repeatend', times: 1 }] },
+		]),
+	).toEqual([0, 1, 0, 1]);
+});
+
+test('iterator: repeats multiple measures multiple times', () => {
+	expect(
+		order([
+			{ index: 0, jumps: [{ type: 'repeatstart' }] },
+			{ index: 1, jumps: [{ type: 'repeatend', times: 2 }] },
+		]),
+	).toEqual([0, 1, 0, 1, 0, 1]);
+});
+
+test('iterator: repeats endings', () => {
+	expect(
+		order([
+			{ index: 0, jumps: [{ type: 'repeatstart' }] },
+			{ index: 1, jumps: [{ type: 'repeatending', times: 1 }] },
+			{ index: 2, jumps: [] },
+		]),
+	).toEqual([0, 1, 0, 2]);
+});
+
+test('iterator: repeats multiple endings', () => {
+	expect(
+		order([
+			{ index: 0, jumps: [{ type: 'repeatstart' }] },
+			{ index: 1, jumps: [{ type: 'repeatending', times: 2 }] },
+			{ index: 2, jumps: [] },
+		]),
+	).toEqual([0, 1, 0, 1, 0, 2]);
+});
+
+test('iterator: handles implicit start repeats', () => {
+	expect(
+		order([
+			{ index: 0, jumps: [] },
+			{ index: 1, jumps: [{ type: 'repeatend', times: 1 }] },
+		]),
+	).toEqual([0, 1, 0, 1]);
+});
+
+test('iterator: handles multiple implicit start repeats', () => {
+	expect(
+		order([
+			{ index: 0, jumps: [] },
+			{ index: 1, jumps: [{ type: 'repeatend', times: 1 }] },
+			{ index: 2, jumps: [{ type: 'repeatend', times: 1 }] },
+		]),
+	).toEqual([0, 1, 0, 1, 2, 0, 1, 0, 1, 2]);
+});
+
+test('iterator: handles a repeat ending with an implicit start', () => {
+	expect(
+		order([
+			{ index: 0, jumps: [] },
+			{ index: 1, jumps: [{ type: 'repeatending', times: 1 }] },
+			{ index: 2, jumps: [] },
+		]),
+	).toEqual([0, 1, 0, 2]);
+});
+
+test('iterator: continues past a repeat block', () => {
+	expect(
+		order([
+			{ index: 0, jumps: [{ type: 'repeatstart' }] },
+			{ index: 1, jumps: [{ type: 'repeatend', times: 1 }] },
+			{ index: 2, jumps: [] },
+			{ index: 3, jumps: [] },
+		]),
+	).toEqual([0, 1, 0, 1, 2, 3]);
+});
+
+test('iterator: handles a standalone repeat start with no matching end', () => {
+	expect(
+		order([
+			{ index: 0, jumps: [] },
+			{ index: 1, jumps: [{ type: 'repeatstart' }] },
+			{ index: 2, jumps: [] },
+		]),
+	).toEqual([0, 1, 2]);
+});
+
+test('iterator: handles two non-nested repeats in sequence', () => {
+	expect(
+		order([
+			{ index: 0, jumps: [{ type: 'repeatstart' }] },
+			{ index: 1, jumps: [{ type: 'repeatend', times: 1 }] },
+			{ index: 2, jumps: [{ type: 'repeatstart' }] },
+			{ index: 3, jumps: [{ type: 'repeatend', times: 1 }] },
+		]),
+	).toEqual([0, 1, 0, 1, 2, 3, 2, 3]);
+});
+
+test('iterator: replays an inner repeat during each pass of an outer repeat', () => {
+	expect(
+		order([
+			{ index: 0, jumps: [{ type: 'repeatstart' }] },
+			{ index: 1, jumps: [{ type: 'repeatstart' }] },
+			{ index: 2, jumps: [{ type: 'repeatend', times: 1 }] },
+			{ index: 3, jumps: [{ type: 'repeatend', times: 1 }] },
+		]),
+	).toEqual([0, 1, 2, 1, 2, 3, 0, 1, 2, 1, 2, 3]);
+});
+
+test('iterator: plays the 1st ending N times before advancing to the 2nd ending', () => {
+	expect(
+		order([
+			{ index: 0, jumps: [{ type: 'repeatstart' }] },
+			{ index: 1, jumps: [{ type: 'repeatending', times: 2 }] },
+			{ index: 2, jumps: [{ type: 'repeatending', times: 1 }] },
+			{ index: 3, jumps: [] },
+		]),
+	).toEqual([0, 1, 0, 1, 0, 2, 3]);
+});
+
+test('iterator: plays three endings in order, each once', () => {
+	expect(
+		order([
+			{ index: 0, jumps: [{ type: 'repeatstart' }] },
+			{ index: 1, jumps: [{ type: 'repeatending', times: 1 }] },
+			{ index: 2, jumps: [{ type: 'repeatending', times: 1 }] },
+			{ index: 3, jumps: [{ type: 'repeatending', times: 1 }] },
+			{ index: 4, jumps: [] },
+		]),
+	).toEqual([0, 1, 0, 2, 0, 3, 4]);
+});
+
+test('iterator: treats a repeatend with times: 0 as a no-op', () => {
+	expect(
+		order([
+			{ index: 0, jumps: [{ type: 'repeatstart' }] },
+			{ index: 1, jumps: [{ type: 'repeatend', times: 0 }] },
+		]),
+	).toEqual([0, 1]);
+});
+
+// ── beats <-> ms ──
+
+test('beatsToMs/msToBeats: default 120 bpm when no segments', () => {
+	expect(beatsToMs(4, [])).toBeCloseTo(2000);
+	expect(msToBeats(2000, [])).toBeCloseTo(4);
+});
+
+test('beatsToMs/msToBeats: honors a mid-piece tempo change and round-trips', () => {
+	const segments = [
+		{ startBeat: 0, endBeat: 4, bpm: 120 }, // 500 ms / beat
+		{ startBeat: 4, endBeat: 8, bpm: 60 }, // 1000 ms / beat
+	];
+	expect(beatsToMs(4, segments)).toBeCloseTo(2000);
+	expect(beatsToMs(6, segments)).toBeCloseTo(4000);
+	expect(beatsToMs(8, segments)).toBeCloseTo(6000);
+	expect(msToBeats(4000, segments)).toBeCloseTo(6);
+	expect(msToBeats(beatsToMs(6.5, segments), segments)).toBeCloseTo(6.5);
+});
+
+// ── classifyTransition (generic, identity-only) ──
+
+test('classify: disjoint sets are all started/stopped', () => {
+	const r = classifyTransition(['a', 'b'], ['c', 'd'], new Map());
+	expect(r.started).toEqual(['c', 'd']);
+	expect(r.sustained).toEqual([]);
+	expect(r.stopped).toEqual(['a', 'b']);
+});
+
+test('classify: a held note (same identity) is sustained', () => {
+	const r = classifyTransition(['a', 'b'], ['b', 'c'], new Map());
+	expect(r.started).toEqual(['c']);
+	expect(r.sustained).toEqual(['b']);
+	expect(r.stopped).toEqual(['a']);
+});
+
+test('classify: a tie sustains and the tied-out note is not a release', () => {
+	const r = classifyTransition(['a'], ['b'], new Map([['b', 'a']]));
+	expect(r.started).toEqual([]);
+	expect(r.sustained).toEqual(['b']);
+	expect(r.stopped).toEqual([]);
+});
+
+test('classify: same pitch without a tie is a retrigger (stop + start)', () => {
+	const r = classifyTransition(['a'], ['b'], new Map());
+	expect(r.started).toEqual(['b']);
+	expect(r.stopped).toEqual(['a']);
+});
+
+test('classify: from nothing, everything is started', () => {
+	const r = classifyTransition(null, ['a', 'b'], new Map());
+	expect(r.started).toEqual(['a', 'b']);
+	expect(r.stopped).toEqual([]);
+});
+
+// ── buildSequence assembly ──
+
+// Identity tokens — the sequence only uses Note for identity (active sets / tie keys).
+function fakeNote(label: string): Note {
+	return { label } as unknown as Note;
+}
+const SYS = new Rect(0, 0, 1000, 100);
+
+function quarter(
+	note: Note,
+	measureIndex: number,
+	measureBeat: number,
+	x: number,
+): SequenceNote {
+	return { note, measureIndex, measureBeat, beats: 1, x, tiedFrom: null };
+}
+
+test('assembly: two 4/4 measures of quarters → 8 steps with correct beats/ms', () => {
+	const notes: SequenceNote[] = [];
+	for (let b = 0; b < 4; b++) {
+		notes.push(quarter(fakeNote(`m0b${b}`), 0, b, 10 + b * 10));
+		notes.push(quarter(fakeNote(`m1b${b}`), 1, b, 110 + b * 10));
+	}
+	const seq = buildSequence({
+		measures: [
+			{ index: 0, beats: 4, tempoBpm: 120, jumps: [], systemRect: SYS },
+			{ index: 1, beats: 4, tempoBpm: null, jumps: [], systemRect: SYS },
+		],
+		notes,
+	});
+
+	expect(seq.length).toBe(8);
+	expect(seq.getDurationBeats()).toBe(8);
+	expect(seq.getDurationMs()).toBeCloseTo(4000);
+	expect(seq.getStep(0)?.startBeat).toBe(0);
+	expect(seq.getStep(0)?.startMs).toBeCloseTo(0);
+	expect(seq.getStep(4)?.startBeat).toBe(4); // first onset of measure 1
+	expect(seq.getStep(4)?.startMs).toBeCloseTo(2000);
+});
+
+test('assembly: a repeated measure replays its steps at later times, earliest-first lookup', () => {
+	const a = fakeNote('a');
+	const seq = buildSequence({
+		measures: [
+			{
+				index: 0,
+				beats: 2,
+				tempoBpm: 120,
+				jumps: [{ type: 'repeatstart' }, { type: 'repeatend', times: 1 }],
+				systemRect: SYS,
+			},
+		],
+		notes: [
+			{
+				note: a,
+				measureIndex: 0,
+				measureBeat: 0,
+				beats: 2,
+				x: 10,
+				tiedFrom: null,
+			},
+		],
+	});
+
+	// Played twice: two steps, the second a measure later in beats.
+	expect(seq.length).toBe(2);
+	expect(seq.getStep(0)?.startBeat).toBe(0);
+	expect(seq.getStep(1)?.startBeat).toBe(2);
+	expect(seq.getDurationBeats()).toBe(4);
+	// The same note maps to its EARLIEST step (first pass).
+	expect(seq.getFirstStepOfNote(a)).toBe(0);
+});
+
+test('assembly: overlapping voices window the active set; classify reports held vs released', () => {
+	const half = fakeNote('half'); // voice A, [0, 2)
+	const q1 = fakeNote('q1'); // voice B, [0, 1)
+	const q2 = fakeNote('q2'); // voice B, [1, 2)
+	const seq = buildSequence({
+		measures: [
+			{ index: 0, beats: 2, tempoBpm: 120, jumps: [], systemRect: SYS },
+		],
+		notes: [
+			{
+				note: half,
+				measureIndex: 0,
+				measureBeat: 0,
+				beats: 2,
+				x: 10,
+				tiedFrom: null,
+			},
+			{
+				note: q1,
+				measureIndex: 0,
+				measureBeat: 0,
+				beats: 1,
+				x: 10,
+				tiedFrom: null,
+			},
+			{
+				note: q2,
+				measureIndex: 0,
+				measureBeat: 1,
+				beats: 1,
+				x: 50,
+				tiedFrom: null,
+			},
+		],
+	});
+
+	expect(seq.length).toBe(2);
+	expect(seq.getStep(0)?.active).toEqual([half, q1]);
+	expect(seq.getStep(1)?.active).toEqual([half, q2]);
+
+	const t = seq.classify(0, 1);
+	expect(t.started).toEqual([q2]);
+	expect(t.sustained).toEqual([half]);
+	expect(t.stopped).toEqual([q1]);
+});
+
+test('positionAt: interpolates the bar x within a step toward the next onset', () => {
+	const seq = buildSequence({
+		measures: [
+			{ index: 0, beats: 2, tempoBpm: 120, jumps: [], systemRect: SYS },
+		],
+		notes: [quarter(fakeNote('a'), 0, 0, 10), quarter(fakeNote('b'), 0, 1, 20)],
+	});
+	// Step 0 spans beat [0,1) = ms [0,500), gliding x 10 -> 20.
+	expect(seq.positionAt(0)?.x).toBeCloseTo(10);
+	expect(seq.positionAt(250)?.x).toBeCloseTo(15);
+	const rect = seq.positionAt(250);
+	expect(rect?.y).toBe(0);
+	expect(rect?.h).toBe(100);
+});
+
+test('getStepIndexAtBeats: binary search, null before the first onset', () => {
+	const seq = buildSequence({
+		measures: [
+			{ index: 0, beats: 4, tempoBpm: 120, jumps: [], systemRect: SYS },
+		],
+		notes: [
+			quarter(fakeNote('a'), 0, 0, 10),
+			quarter(fakeNote('b'), 0, 1, 20),
+			quarter(fakeNote('c'), 0, 2, 30),
+		],
+	});
+	expect(seq.getStepIndexAtBeats(-1)).toBeNull();
+	expect(seq.getStepIndexAtBeats(0)).toBe(0);
+	expect(seq.getStepIndexAtBeats(1.5)).toBe(1);
+	expect(seq.getStepIndexAtBeats(99)).toBe(2);
+	expect(seq.getStepIndexAtMs(500)).toBe(1);
+});
diff --git a/src/sequence.ts b/src/sequence.ts
new file mode 100644
index 000000000..fd000c491
--- /dev/null
+++ b/src/sequence.ts
@@ -0,0 +1,622 @@
+import { Rect } from './geometry';
+import type { Note } from './targets';
+
+/*
+ * The playback timeline: the score unrolled into a linear sequence of steps in playback order, with
+ * repeats and voltas expanded, onsets resolved to absolute beats, and beats mapped to milliseconds
+ * through the score's tempo marks. A playback Cursor walks it; the Score queries it (duration,
+ * position->time). This module is pure over the `SequenceInput` seam (no DOM, no rendering), so the
+ * whole timeline is unit-tested directly; `render.ts` builds the real input from the engraved
+ * geometry and the parsed document.
+ */
+
+/* A measure's repeat structure, as the iterator consumes it. `times` is the number of *back-jumps*
+ * (a plain repeat that plays twice is `times: 1`); a volta `repeatending`'s `times` is how many
+ * passes that ending covers. Derived from MusicXML barlines/endings in render.ts. */
+export type Jump =
+	| { type: 'repeatstart' }
+	| { type: 'repeatend'; times: number }
+	| { type: 'repeatending'; times: number };
+
+/* One measure in document (visual) order. `beats` is its played length in quarter-note beats (the
+ * max note end, or the meter); `tempoBpm` is the quarter-note BPM in effect at its start, or null to
+ * carry the previous (the piece starts at 120 if never set). `systemRect` is the measure's full
+ * system box — the bar's vertical span and the x it clamps to at a line end. */
+export interface MeasureInfo {
+	index: number;
+	beats: number;
+	tempoBpm: number | null;
+	jumps: Jump[];
+	systemRect: Rect;
+}
+
+/* A rendered, time-bearing note (a notation notehead or rest — grace notes and tab ghosts are not
+ * rendered as tickables, so they never appear here). `note` is the target identity used in active
+ * sets; `tiedFrom` is the note this one continues from across a tie, so a tied continuation reads as
+ * a sustain rather than a re-attack. */
+export interface SequenceNote {
+	note: Note;
+	measureIndex: number;
+	measureBeat: number;
+	beats: number;
+	x: number;
+	tiedFrom: Note | null;
+}
+
+/* Everything the timeline is built from. A fake supplies plain values in tests; render.ts builds the
+ * real one from `RawGeometry` + the parsed parts. */
+export interface SequenceInput {
+	measures: MeasureInfo[];
+	notes: SequenceNote[];
+}
+
+/* One stop in playback order: the onset of a tickable. The active set is constant across
+ * `[startBeat, endBeat)`. `x`/`glideToX` are the bar's onset position and where it glides to by the
+ * step's end (the next onset on the same system, or the system's right edge at a line break);
+ * `systemRect` is its vertical span. */
+export interface Step {
+	readonly index: number;
+	readonly measureIndex: number;
+	readonly startBeat: number;
+	readonly endBeat: number;
+	readonly startMs: number;
+	readonly endMs: number;
+	readonly x: number;
+	readonly glideToX: number;
+	readonly systemRect: Rect;
+	readonly active: readonly Note[];
+}
+
+/* What changed between two cursor positions: notes to attack (a re-struck pitch shows in both
+ * `started` and `stopped`), notes held or tied through (do not re-attack), and notes released
+ * (a note tied into the next step is excluded — it keeps ringing). */
+export interface CursorTransition {
+	readonly started: readonly Note[];
+	readonly sustained: readonly Note[];
+	readonly stopped: readonly Note[];
+}
+
+/* A quarter-note-beats <-> ms segment: `[startBeat, endBeat)` plays at `bpm` quarter notes/min. */
+type TempoSegment = { startBeat: number; endBeat: number; bpm: number };
+
+const DEFAULT_BPM = 120;
+/* The bar is a thin line; the view thickens it. A nonzero width keeps it a valid, hit-testable box. */
+const BAR_WIDTH = 1;
+
+/**
+ * Iterates measure indices in playback order, expanding repeats and voltas. Two phases: pre-scan to
+ * pair `repeatend`s with their `repeatstart`s and group `repeatending` runs into voltas, then a
+ * linear walk that back-jumps and skips exhausted endings. Ported from legacy vexml.
+ */
+export class MeasureSequenceIterator implements Iterable<number> {
+	constructor(
+		private readonly measures: ReadonlyArray<{ index: number; jumps: Jump[] }>,
+	) {}
+
+	[Symbol.iterator](): Iterator<number> {
+		return computeSequence(this.measures)[Symbol.iterator]();
+	}
+}
+
+type RepeatEnd = { measureIndex: number; startIndex: number; times: number };
+type VoltaEnding = {
+	measureIndex: number;
+	times: number;
+	startPass: number;
+	endPass: number;
+};
+type Volta = {
+	startIndex: number;
+	endings: VoltaEnding[];
+	totalPasses: number;
+};
+type Structure = {
+	repeatEndsByMeasure: Map<number, RepeatEnd>;
+	voltas: Volta[];
+	endingByMeasure: Map<number, { volta: Volta; ending: VoltaEnding }>;
+};
+
+function computeSequence(
+	measures: ReadonlyArray<{ index: number; jumps: Jump[] }>,
+): number[] {
+	return walk(measures, analyzeStructure(measures));
+}
+
+function findJump<K extends Jump['type']>(
+	jumps: Jump[],
+	type: K,
+): Extract<Jump, { type: K }> | undefined {
+	return jumps.find(
+		(jump): jump is Extract<Jump, { type: K }> => jump.type === type,
+	);
+}
+
+function analyzeStructure(
+	measures: ReadonlyArray<{ index: number; jumps: Jump[] }>,
+): Structure {
+	const repeatEndsByMeasure = new Map<number, RepeatEnd>();
+	const voltas: Volta[] = [];
+	const endingByMeasure = new Map<
+		number,
+		{ volta: Volta; ending: VoltaEnding }
+	>();
+
+	const startStack: number[] = [];
+	let currentVolta: Volta | null = null;
+
+	for (const [i, measure] of measures.entries()) {
+		for (const jump of measure.jumps) {
+			if (jump.type === 'repeatstart') {
+				startStack.push(i);
+			}
+		}
+
+		const endingJump = findJump(measure.jumps, 'repeatending');
+		if (endingJump) {
+			if (currentVolta === null) {
+				currentVolta = {
+					startIndex: startStack.at(-1) ?? 0,
+					endings: [],
+					totalPasses: 0,
+				};
+				voltas.push(currentVolta);
+			}
+			const ending: VoltaEnding = {
+				measureIndex: i,
+				times: endingJump.times,
+				startPass: 0,
+				endPass: 0,
+			};
+			currentVolta.endings.push(ending);
+			endingByMeasure.set(i, { volta: currentVolta, ending });
+			// A `repeatend` co-located with a `repeatending` is intentionally dropped.
+			continue;
+		}
+
+		if (currentVolta !== null) {
+			if (startStack.at(-1) === currentVolta.startIndex) {
+				startStack.pop();
+			}
+			currentVolta = null;
+		}
+
+		const endJump = findJump(measure.jumps, 'repeatend');
+		if (endJump) {
+			const startIndex = startStack.pop() ?? 0;
+			repeatEndsByMeasure.set(i, {
+				measureIndex: i,
+				startIndex,
+				times: endJump.times,
+			});
+		}
+	}
+
+	// Close any volta that runs to the end of the score.
+	if (currentVolta !== null && startStack.at(-1) === currentVolta.startIndex) {
+		startStack.pop();
+	}
+
+	for (const volta of voltas) {
+		// A `repeatending` with `times: 0` on the LAST ending is the standard "discontinue" volta: it
+		// plays once on the final pass with no back-jump. Treat it as `times: 1` for pass ranges.
+		const last = volta.endings.at(-1);
+		let pass = 1;
+		for (const ending of volta.endings) {
+			const effective =
+				ending === last && ending.times === 0 ? 1 : ending.times;
+			ending.startPass = pass;
+			ending.endPass = pass + effective - 1;
+			pass += effective;
+		}
+		const sum = pass - 1;
+		// A single-ending volta whose ending has a back-jump needs an implicit final pass for the
+		// run-past-the-now-exhausted-ending step. Other shapes exit on their final ending naturally.
+		const needsImplicitFinalPass =
+			volta.endings.length === 1 && last !== undefined && last.times > 0;
+		volta.totalPasses = needsImplicitFinalPass ? sum + 1 : sum;
+	}
+
+	return { repeatEndsByMeasure, voltas, endingByMeasure };
+}
+
+function walk(
+	measures: ReadonlyArray<{ index: number; jumps: Jump[] }>,
+	structure: Structure,
+): number[] {
+	const result: number[] = [];
+	const remainingBackJumps = new Map<number, number>();
+	const voltaPass = new Map<Volta, number>();
+
+	let i = 0;
+	while (i < measures.length) {
+		const measure = measures[i];
+		if (!measure) {
+			break;
+		}
+
+		const endingHit = structure.endingByMeasure.get(i);
+		if (endingHit) {
+			const pass = voltaPass.get(endingHit.volta) ?? 1;
+			if (
+				pass < endingHit.ending.startPass ||
+				pass > endingHit.ending.endPass
+			) {
+				i++;
+				continue;
+			}
+		}
+
+		result.push(measure.index);
+
+		if (endingHit) {
+			const { volta } = endingHit;
+			const nextPass = (voltaPass.get(volta) ?? 1) + 1;
+			if (nextPass > volta.totalPasses) {
+				voltaPass.delete(volta);
+				i++;
+			} else {
+				voltaPass.set(volta, nextPass);
+				resetNestedState(
+					structure,
+					remainingBackJumps,
+					voltaPass,
+					volta.startIndex,
+					i,
+				);
+				i = volta.startIndex;
+			}
+			continue;
+		}
+
+		const repeatEnd = structure.repeatEndsByMeasure.get(i);
+		if (repeatEnd) {
+			if (repeatEnd.times === 0) {
+				i++;
+				continue;
+			}
+			const remaining = remainingBackJumps.get(i) ?? repeatEnd.times;
+			if (remaining > 0) {
+				remainingBackJumps.set(i, remaining - 1);
+				resetNestedState(
+					structure,
+					remainingBackJumps,
+					voltaPass,
+					repeatEnd.startIndex,
+					i,
+				);
+				i = repeatEnd.startIndex;
+			} else {
+				remainingBackJumps.delete(i);
+				i++;
+			}
+			continue;
+		}
+
+		i++;
+	}
+
+	return result;
+}
+
+/* Reset repeat-ends and voltas nested strictly inside a range being jumped back over, so their
+ * counters re-initialize on the next pass through the outer block. */
+function resetNestedState(
+	structure: Structure,
+	remainingBackJumps: Map<number, number>,
+	voltaPass: Map<Volta, number>,
+	startIndex: number,
+	endIndex: number,
+): void {
+	for (const measureIndex of structure.repeatEndsByMeasure.keys()) {
+		if (measureIndex > startIndex && measureIndex < endIndex) {
+			remainingBackJumps.delete(measureIndex);
+		}
+	}
+	for (const volta of structure.voltas) {
+		if (volta.startIndex > startIndex && volta.startIndex < endIndex) {
+			voltaPass.delete(volta);
+		}
+	}
+}
+
+/**
+ * Quarter-note beats -> milliseconds across tempo segments. Folds the elapsed time of every segment
+ * the beat spans, plus the partial of the segment it lands in. Segments are contiguous and ordered;
+ * a beat past the last segment extrapolates at the last segment's rate.
+ */
+export function beatsToMs(
+	beats: number,
+	segments: readonly TempoSegment[],
+): number {
+	const last = segments.at(-1);
+	if (!last) {
+		return (beats / DEFAULT_BPM) * 60000;
+	}
+	let ms = 0;
+	for (const seg of segments) {
+		if (beats <= seg.startBeat) {
+			break;
+		}
+		const upto = Math.min(beats, seg.endBeat);
+		ms += ((upto - seg.startBeat) / seg.bpm) * 60000;
+	}
+	if (beats > last.endBeat) {
+		ms += ((beats - last.endBeat) / last.bpm) * 60000;
+	}
+	return ms;
+}
+
+/** Milliseconds -> quarter-note beats: the monotonic inverse of {@link beatsToMs}. */
+export function msToBeats(
+	ms: number,
+	segments: readonly TempoSegment[],
+): number {
+	const last = segments.at(-1);
+	if (!last) {
+		return (ms / 60000) * DEFAULT_BPM;
+	}
+	let elapsed = 0;
+	for (const seg of segments) {
+		const segMs = ((seg.endBeat - seg.startBeat) / seg.bpm) * 60000;
+		if (ms <= elapsed + segMs) {
+			return seg.startBeat + ((ms - elapsed) / 60000) * seg.bpm;
+		}
+		elapsed += segMs;
+	}
+	return last.endBeat + ((ms - elapsed) / 60000) * last.bpm;
+}
+
+/**
+ * Partition the notes active at a destination step into attacks vs. sustains relative to a source
+ * step, and the notes released. Pure set algebra over identities, generic so it's tested with plain
+ * tokens. A note is sustained when it was already ringing (same identity) or is tied in from a note
+ * that was; otherwise it's a (re)attack. A source note is released unless it's tied into a
+ * destination note (then it keeps ringing as that note).
+ */
+export function classifyTransition<T>(
+	prevActive: readonly T[] | null,
+	nextActive: readonly T[],
+	tiedFrom: ReadonlyMap<T, T>,
+): { started: T[]; sustained: T[]; stopped: T[] } {
+	const prev = new Set(prevActive ?? []);
+	const next = new Set(nextActive);
+	const started: T[] = [];
+	const sustained: T[] = [];
+	const tiedOut = new Set<T>();
+
+	for (const n of nextActive) {
+		const from = tiedFrom.get(n);
+		if (prev.has(n)) {
+			sustained.push(n);
+		} else if (from !== undefined && prev.has(from)) {
+			sustained.push(n);
+			tiedOut.add(from);
+		} else {
+			started.push(n);
+		}
+	}
+
+	const stopped: T[] = [];
+	for (const p of prevActive ?? []) {
+		if (!next.has(p) && !tiedOut.has(p)) {
+			stopped.push(p);
+		}
+	}
+	return { started, sustained, stopped };
+}
+
+/** Build the playback timeline from its input. See {@link Sequence}. */
+export function buildSequence(input: SequenceInput): Sequence {
+	const order = [...new MeasureSequenceIterator(input.measures)];
+
+	const notesByMeasure = new Map<number, SequenceNote[]>();
+	for (const note of input.notes) {
+		const list = notesByMeasure.get(note.measureIndex);
+		if (list) {
+			list.push(note);
+		} else {
+			notesByMeasure.set(note.measureIndex, [note]);
+		}
+	}
+
+	// Walk playback order: accumulate the measure start beat, build tempo segments, and collect each
+	// note occurrence's absolute [startBeat, endBeat) interval plus the onsets that seed steps.
+	type Interval = { note: Note; startBeat: number; endBeat: number };
+	type Onset = { x: number; systemRect: Rect; measureIndex: number };
+	const intervals: Interval[] = [];
+	const onsets = new Map<number, Onset>();
+	const segments: TempoSegment[] = [];
+	let totalBeats = 0;
+	// Start at 120; a measure's mark sets the rate from there on, null carries the previous. Measures
+	// before the first mark stay at the default, and a back-jump re-applies marks as written.
+	let bpm = DEFAULT_BPM;
+	for (const measureIndex of order) {
+		const measure = input.measures[measureIndex];
+		if (!measure) {
+			continue;
+		}
+		if (measure.tempoBpm !== null) {
+			bpm = measure.tempoBpm;
+		}
+		segments.push({
+			startBeat: totalBeats,
+			endBeat: totalBeats + measure.beats,
+			bpm,
+		});
+		for (const sn of notesByMeasure.get(measureIndex) ?? []) {
+			const startBeat = totalBeats + sn.measureBeat;
+			intervals.push({
+				note: sn.note,
+				startBeat,
+				endBeat: startBeat + sn.beats,
+			});
+			const existing = onsets.get(startBeat);
+			if (existing) {
+				existing.x = Math.min(existing.x, sn.x); // the onset's leftmost notehead anchors the bar
+			} else {
+				onsets.set(startBeat, {
+					x: sn.x,
+					systemRect: measure.systemRect,
+					measureIndex: measure.index,
+				});
+			}
+		}
+		totalBeats += measure.beats;
+	}
+
+	const tiedFrom = new Map<Note, Note>();
+	for (const sn of input.notes) {
+		if (sn.tiedFrom) {
+			tiedFrom.set(sn.note, sn.tiedFrom);
+		}
+	}
+
+	const startBeats = [...onsets.keys()].sort((a, b) => a - b);
+	const steps: Step[] = [];
+	const firstStepOfNote = new Map<Note, number>();
+	const firstStepOfMeasure = new Map<number, number>();
+	for (const [i, startBeat] of startBeats.entries()) {
+		const onset = onsets.get(startBeat);
+		if (!onset) {
+			continue;
+		}
+		const nextBeat = startBeats[i + 1];
+		const endBeat = nextBeat ?? totalBeats;
+		const active = intervals
+			.filter((iv) => iv.startBeat <= startBeat && startBeat < iv.endBeat)
+			.map((iv) => iv.note);
+		// Glide toward the next onset on the same system; at a line break, to the system's right edge.
+		const next = nextBeat === undefined ? undefined : onsets.get(nextBeat);
+		const sameSystem =
+			next !== undefined &&
+			next.systemRect.y === onset.systemRect.y &&
+			next.x > onset.x;
+		const glideToX = sameSystem && next ? next.x : onset.systemRect.right;
+		steps.push({
+			index: i,
+			measureIndex: onset.measureIndex,
+			startBeat,
+			endBeat,
+			startMs: beatsToMs(startBeat, segments),
+			endMs: beatsToMs(endBeat, segments),
+			x: onset.x,
+			glideToX,
+			systemRect: onset.systemRect,
+			active,
+		});
+		for (const note of active) {
+			if (!firstStepOfNote.has(note)) {
+				firstStepOfNote.set(note, i);
+			}
+		}
+		if (!firstStepOfMeasure.has(onset.measureIndex)) {
+			firstStepOfMeasure.set(onset.measureIndex, i);
+		}
+	}
+
+	return new Sequence(
+		steps,
+		segments,
+		totalBeats,
+		tiedFrom,
+		firstStepOfNote,
+		firstStepOfMeasure,
+	);
+}
+
+/**
+ * The built timeline: ordered steps, the tempo map, and lookups. Constructed by {@link buildSequence};
+ * the Cursor walks it (step/seek/interpolate) and the Score queries it (duration, position->time).
+ */
+export class Sequence {
+	constructor(
+		private readonly steps: Step[],
+		private readonly segments: readonly TempoSegment[],
+		private readonly durationBeats: number,
+		private readonly tiedFrom: ReadonlyMap<Note, Note>,
+		private readonly firstStepOfNote: ReadonlyMap<Note, number>,
+		private readonly firstStepOfMeasure: ReadonlyMap<number, number>,
+	) {}
+
+	get length(): number {
+		return this.steps.length;
+	}
+
+	getStep(index: number): Step | null {
+		return this.steps[index] ?? null;
+	}
+
+	getDurationBeats(): number {
+		return this.durationBeats;
+	}
+
+	getDurationMs(): number {
+		return beatsToMs(this.durationBeats, this.segments);
+	}
+
+	beatsToMs(beats: number): number {
+		return beatsToMs(beats, this.segments);
+	}
+
+	msToBeats(ms: number): number {
+		return msToBeats(ms, this.segments);
+	}
+
+	/* The step active at `beat` (the last whose startBeat <= beat), or null when empty / before the
+	 * first onset. Binary search over ordered startBeats. */
+	getStepIndexAtBeats(beat: number): number | null {
+		const first = this.steps[0];
+		if (!first || beat < first.startBeat) {
+			return null;
+		}
+		let lo = 0;
+		let hi = this.steps.length - 1;
+		while (lo < hi) {
+			const mid = (lo + hi + 1) >> 1;
+			const step = this.steps[mid];
+			if (step && step.startBeat <= beat) {
+				lo = mid;
+			} else {
+				hi = mid - 1;
+			}
+		}
+		return lo;
+	}
+
+	getStepIndexAtMs(ms: number): number | null {
+		return this.getStepIndexAtBeats(this.msToBeats(ms));
+	}
+
+	/* The bar rect at an exact time: the step's onset x interpolated toward its glide target by the
+	 * elapsed fraction, spanning the step's system. Clamped to the timeline's bounds. */
+	positionAt(ms: number): Rect | null {
+		const beat = this.msToBeats(ms);
+		const index = this.getStepIndexAtBeats(beat) ?? 0;
+		const step = this.steps[index];
+		if (!step) {
+			return null;
+		}
+		const span = step.endBeat - step.startBeat;
+		const frac =
+			span > 0 ? Math.min(1, Math.max(0, (beat - step.startBeat) / span)) : 0;
+		const x = step.x + (step.glideToX - step.x) * frac;
+		return new Rect(x, step.systemRect.y, BAR_WIDTH, step.systemRect.h);
+	}
+
+	/* Started/sustained/stopped moving from one step to another (or from nothing, `from = null`). */
+	classify(from: number | null, to: number): CursorTransition {
+		const prev = from === null ? null : (this.steps[from]?.active ?? null);
+		const next = this.steps[to]?.active ?? [];
+		return classifyTransition(prev, next, this.tiedFrom);
+	}
+
+	/* The earliest step a note sounds in (its first occurrence under repeats), or null if unrendered. */
+	getFirstStepOfNote(note: Note): number | null {
+		return this.firstStepOfNote.get(note) ?? null;
+	}
+
+	/* The earliest step in a measure (its first occurrence under repeats), or null if it has none. */
+	getFirstStepOfMeasure(measureIndex: number): number | null {
+		return this.firstStepOfMeasure.get(measureIndex) ?? null;
+	}
+}
diff --git a/src/stage.test.ts b/src/stage.test.ts
new file mode 100644
index 000000000..641690183
--- /dev/null
+++ b/src/stage.test.ts
@@ -0,0 +1,45 @@
+import { expect, test } from 'bun:test';
+import { scrollOffsetFor } from './stage';
+
+// Both boxes are in the container's scroll-content coordinates; view = the current scroll window.
+const VIEW = { left: 0, top: 0, right: 100, bottom: 100 };
+
+test('scrollOffsetFor: a fully visible target leaves both axes where they are', () => {
+	const offset = scrollOffsetFor(
+		{ left: 50, top: 50, right: 60, bottom: 60 },
+		VIEW,
+	);
+	expect(offset).toEqual({ left: 0, top: 0 });
+});
+
+test('scrollOffsetFor: off-screen right scrolls x only, far edge into view', () => {
+	const offset = scrollOffsetFor(
+		{ left: 150, top: 10, right: 160, bottom: 20 },
+		VIEW,
+	);
+	expect(offset).toEqual({ left: 60, top: 0 }); // 0 + (160 - 100)
+});
+
+test('scrollOffsetFor: off-screen left scrolls x only, near edge into view', () => {
+	const offset = scrollOffsetFor(
+		{ left: 20, top: 10, right: 30, bottom: 20 },
+		{ left: 50, top: 0, right: 150, bottom: 100 },
+	);
+	expect(offset).toEqual({ left: 20, top: 0 });
+});
+
+test('scrollOffsetFor: off-screen below scrolls y only', () => {
+	const offset = scrollOffsetFor(
+		{ left: 10, top: 200, right: 20, bottom: 210 },
+		VIEW,
+	);
+	expect(offset).toEqual({ left: 0, top: 110 }); // 0 + (210 - 100)
+});
+
+test('scrollOffsetFor: off-screen on both axes scrolls both (panoramic + tall)', () => {
+	const offset = scrollOffsetFor(
+		{ left: 150, top: 200, right: 160, bottom: 210 },
+		VIEW,
+	);
+	expect(offset).toEqual({ left: 60, top: 110 });
+});
diff --git a/src/stage.ts b/src/stage.ts
index fb65b9d33..7f64a8158 100644
--- a/src/stage.ts
+++ b/src/stage.ts
@@ -1,3 +1,4 @@
+import type { Scroller } from './cursor';
 import type { Rect } from './geometry';
 import type { Viewport } from './targets';
 
@@ -30,10 +31,13 @@ export interface LayerHost {
  * test injects a fake. Kept separate from Viewport (the targets' coordinate seam) so each consumer
  * depends only on what it uses, even though Stage satisfies both.
  */
-export interface Host extends LayerHost {
-	toScoreSpace(clientX: number, clientY: number): { x: number; y: number };
+export interface Host extends LayerHost, Viewport {
 	readonly events: EventTarget;
 	readonly scroll: { left: number; top: number };
+	/* The visible scrollport box in client coords — what a cursor's visibility check compares against. */
+	viewportRect(): DOMRect;
+	/* Scrolls a score-space rect into view (axis-aware); a cursor's follow()/scrollIntoView() use it. */
+	readonly scroller: Scroller;
 	observeResize(
 		onResize: (size: { width: number; height: number }) => void,
 	): () => void;
@@ -98,6 +102,15 @@ class ManagedLayer implements Layer {
 	}
 }
 
+/* The caller's height/width caps from config. A set cap turns the container into a scroll box on that
+ * axis; null leaves the axis to size to its content. */
+export interface ScrollBox {
+	height?: number | null;
+	maxHeight?: number | null;
+	width?: number | null;
+	maxWidth?: number | null;
+}
+
 /*
  * The host: the DOM vexml builds inside the caller's container, and the coordinate authority
  * between score space (where target rects live) and client/page space (where pointer events and
@@ -114,9 +127,14 @@ export class Stage implements Viewport, Host {
 	readonly base: HTMLCanvasElement;
 	private readonly prevPosition: string;
 	private readonly prevIsolation: string;
+	// Inline styles this stage set on the container, with their prior values, restored on dispose.
+	private readonly restoreStyles: Array<[string, string]> = [];
 	private readonly layers = new Set<ManagedLayer>();
 
-	constructor(private readonly container: HTMLDivElement) {
+	constructor(
+		private readonly container: HTMLDivElement,
+		scroll: ScrollBox = {},
+	) {
 		// A positioned container is the containing block the overlay layers anchor to. Only set it
 		// when the caller left position static, and remember it so dispose restores.
 		this.prevPosition = container.style.position;
@@ -130,6 +148,29 @@ export class Stage implements Viewport, Host {
 		if (!container.style.isolation) {
 			container.style.isolation = 'isolate';
 		}
+		// Turn the container into a scroll box on whichever axes have a cap: set the size/cap and
+		// overflow:auto so the content (the in-flow base canvas) scrolls within it. A cursor's
+		// follow()/scrollIntoView() then scroll this same box. overflow per axis is set once.
+		const overflowY = scroll.height != null || scroll.maxHeight != null;
+		const overflowX = scroll.width != null || scroll.maxWidth != null;
+		if (scroll.height != null) {
+			this.setStyle('height', `${scroll.height}px`);
+		}
+		if (scroll.maxHeight != null) {
+			this.setStyle('max-height', `${scroll.maxHeight}px`);
+		}
+		if (scroll.width != null) {
+			this.setStyle('width', `${scroll.width}px`);
+		}
+		if (scroll.maxWidth != null) {
+			this.setStyle('max-width', `${scroll.maxWidth}px`);
+		}
+		if (overflowY) {
+			this.setStyle('overflow-y', 'auto');
+		}
+		if (overflowX) {
+			this.setStyle('overflow-x', 'auto');
+		}
 		this.base = document.createElement('canvas');
 		// `vexml-canvas` is the stable hook callers style to size/scale the rendered score. They style
 		// this class (or the container), never the bare element — that keeps the overlay canvases
@@ -164,6 +205,38 @@ export class Stage implements Viewport, Host {
 		return { left: this.container.scrollLeft, top: this.container.scrollTop };
 	}
 
+	// The visible scrollport box: the container's own client box (the same box overflow scrolls within).
+	viewportRect(): DOMRect {
+		return this.container.getBoundingClientRect();
+	}
+
+	// The Stage is its own scroller — it owns the container that scrolls.
+	get scroller(): Scroller {
+		return this;
+	}
+
+	// Scroll the container so a score-space rect is visible, moving only the axis that's off-screen.
+	// The rect maps to the container's scroll content through the base canvas's offset and CSS scale.
+	scrollIntoView(rect: Rect, opts?: { behavior?: ScrollBehavior }): void {
+		const { sx, sy } = this.frame();
+		const left = this.base.offsetLeft + rect.x * sx;
+		const top = this.base.offsetTop + rect.y * sy;
+		const target = {
+			left,
+			top,
+			right: left + rect.w * sx,
+			bottom: top + rect.h * sy,
+		};
+		const view = {
+			left: this.container.scrollLeft,
+			top: this.container.scrollTop,
+			right: this.container.scrollLeft + this.container.clientWidth,
+			bottom: this.container.scrollTop + this.container.clientHeight,
+		};
+		const offset = scrollOffsetFor(target, view);
+		this.container.scrollTo({ ...offset, behavior: opts?.behavior });
+	}
+
 	observeResize(
 		onResize: (size: { width: number; height: number }) => void,
 	): () => void {
@@ -240,6 +313,18 @@ export class Stage implements Viewport, Host {
 		this.base.remove();
 		this.container.style.position = this.prevPosition;
 		this.container.style.isolation = this.prevIsolation;
+		for (const [prop, value] of this.restoreStyles) {
+			this.container.style.setProperty(prop, value);
+		}
+	}
+
+	// Set a container style, remembering its prior value so dispose restores it (each prop set once).
+	private setStyle(prop: string, value: string): void {
+		this.restoreStyles.push([
+			prop,
+			this.container.style.getPropertyValue(prop),
+		]);
+		this.container.style.setProperty(prop, value);
 	}
 
 	// Size a layer's drawing bitmap. A content layer's bitmap is fixed to the engraved score (the
@@ -288,3 +373,31 @@ export class Stage implements Viewport, Host {
 		return { left: r.left, top: r.top, sx: r.width / w, sy: r.height / h };
 	}
 }
+
+type Box = { left: number; top: number; right: number; bottom: number };
+
+/*
+ * The scroll offset that brings `target` into `view`, both in the container's scroll-content
+ * coordinates. Each axis independently: if the target's near edge is off the near side, align to it;
+ * if its far edge is off the far side, scroll just enough to show it; otherwise leave that axis where
+ * it is. So scrolling a horizontally-off-screen bar in a panoramic score never disturbs the vertical
+ * position, and vice versa. Pure — the DOM application lives in Stage.scrollIntoView.
+ */
+export function scrollOffsetFor(
+	target: Box,
+	view: Box,
+): { left: number; top: number } {
+	const axis = (tLo: number, tHi: number, vLo: number, vHi: number): number => {
+		if (tLo < vLo) {
+			return tLo;
+		}
+		if (tHi > vHi) {
+			return vLo + (tHi - vHi);
+		}
+		return vLo;
+	};
+	return {
+		left: axis(target.left, target.right, view.left, view.right),
+		top: axis(target.top, target.bottom, view.top, view.bottom),
+	};
+}
diff --git a/src/targets.test.ts b/src/targets.test.ts
index 4e6f4bf02..ffe8604e5 100644
--- a/src/targets.test.ts
+++ b/src/targets.test.ts
@@ -89,7 +89,7 @@ function fixture() {
 
 	const viewport = new FakeViewport();
 	const decorator = new FakeDecorator();
-	const measure = new Measure(new Rect(0, 0, 100, 50), viewport, '1');
+	const measure = new Measure(new Rect(0, 0, 100, 50), viewport, '1', 0);
 
 	// The shared registries the wrappers resolve their cross-links through (a Map fulfills the
 	// NoteLookup / TabLookup interfaces). Populated as each note is built.
diff --git a/src/targets.ts b/src/targets.ts
index 6da1419ef..899df6997 100644
--- a/src/targets.ts
+++ b/src/targets.ts
@@ -258,6 +258,7 @@ export class Measure extends BoundedTarget {
 		rect: Rect,
 		viewport: Viewport,
 		private readonly number: string,
+		private readonly index: number,
 	) {
 		super(rect, viewport);
 	}
@@ -266,6 +267,11 @@ export class Measure extends BoundedTarget {
 	getNumber(): string {
 		return this.number;
 	}
+
+	/* The 0-based position among the part's measures (stable; distinct from the printed number). */
+	getIndex(): number {
+		return this.index;
+	}
 }
 
 /* A fret number on a tab string. The same note can render as both a Note (notehead) and a
diff --git a/tests/integration/__screenshots__/cursor_bar.png b/tests/integration/__screenshots__/cursor_bar.png
new file mode 100644
index 0000000000000000000000000000000000000000..51b6c6de077ce04af3f1a2b53f818983de4717e2
GIT binary patch
literal 6194
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
Dp~4P|

literal 0
HcmV?d00001

diff --git a/tests/integration/cursor.test.ts b/tests/integration/cursor.test.ts
new file mode 100644
index 000000000..488e98768
--- /dev/null
+++ b/tests/integration/cursor.test.ts
@@ -0,0 +1,30 @@
+import { expect, test } from 'bun:test';
+import { TEST_URL, testBrowser } from '../testing/setup';
+
+// A playback cursor end to end, the way a caller reaches it: render, add a cursor, attach the
+// built-in bar view, and seek. Proves the timeline builds from a real score and the bar lands on the
+// engraving at the sought time. The timeline/cursor/view logic is unit-tested in src/*; this is the
+// integration screenshot. Uses the run's shared browser/server (see setup.ts).
+test('a playback cursor draws its bar on the score at the sought time', async () => {
+	const browser = await testBrowser();
+	const page = await browser.newPage({ viewport: { width: 900, height: 400 } });
+	try {
+		await page.goto(TEST_URL);
+		await page.evaluate(async () => {
+			const container = document.getElementById('screenshot');
+			if (!(container instanceof HTMLDivElement)) {
+				throw new Error('container not found');
+			}
+			const xml = await (await fetch('/data/arpeggio.musicxml')).text();
+			const score = await window.render(xml, container, {});
+			const cursor = score.addCursor();
+			cursor.attach(score.createCursorView({ color: '#2962ff', widthPx: 3 }));
+			// Seek 40% through the piece — a deterministic spot independent of the note count.
+			cursor.seekMs(score.getDurationMs() * 0.4);
+		});
+		const buf = await page.locator('#screenshot').screenshot();
+		expect(buf).toMatchScreenshot('cursor_bar.png');
+	} finally {
+		await page.close();
+	}
+}, 30_000);

From a6d62ff2798af35e316e6baef67a00cea752dd6c Mon Sep 17 00:00:00 2001
From: Jared Johnson <jared@jaredjohnson.dev>
Date: Tue, 30 Jun 2026 09:11:07 -0400
Subject: [PATCH 05/10] add basic player controls to app

---
 site/src/App.tsx | 134 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 133 insertions(+), 1 deletion(-)

diff --git a/site/src/App.tsx b/site/src/App.tsx
index 859777d57..d6ba96c22 100644
--- a/site/src/App.tsx
+++ b/site/src/App.tsx
@@ -1,6 +1,7 @@
 import { type ReactNode, useEffect, useRef, useState } from 'react';
 import type {
 	Config,
+	Cursor,
 	HoverEvent,
 	Note,
 	PointerTarget,
@@ -85,6 +86,36 @@ function CheckIcon() {
 	);
 }
 
+// Heroicons (outline) — single-path each, so one component covers play/pause/prev/next.
+const ICON = {
+	play: 'M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z',
+	pause: 'M15.75 5.25v13.5m-7.5-13.5v13.5',
+	prev: 'M15.75 19.5 8.25 12l7.5-7.5',
+	next: 'm8.25 4.5 7.5 7.5-7.5 7.5',
+} as const;
+
+function PlayerIcon({ d }: { d: string }) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			strokeWidth={1.5}
+			stroke="currentColor"
+			className="size-6"
+			aria-hidden="true"
+		>
+			<path strokeLinecap="round" strokeLinejoin="round" d={d} />
+		</svg>
+	);
+}
+
+// ms → m:ss
+function fmtTime(ms: number): string {
+	const s = Math.floor(ms / 1000);
+	return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
+}
+
 function Section({
 	title,
 	action,
@@ -147,6 +178,12 @@ export default function App() {
 	} | null>(null);
 	// The note whose halo is currently lit, so the next move can turn it back off.
 	const haloRef = useRef<Note | null>(null);
+	// Playback cursor: owned by the current Score (disposed with it). `change` keeps timeMs in sync,
+	// whether movement came from the play loop, next/previous, or seek.
+	const cursorRef = useRef<Cursor | null>(null);
+	const [playing, setPlaying] = useState(false);
+	const [timeMs, setTimeMs] = useState(0);
+	const [durationMs, setDurationMs] = useState(0);
 	const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(
 		undefined,
 	);
@@ -248,6 +285,16 @@ export default function App() {
 				setRenderMs(renderMsRef.current);
 				setInitialized(true);
 
+				// Headless cursor + the built-in bar view; follow() scrolls it into view as it moves.
+				const cursor = score.addCursor();
+				cursor.attach(score.createCursorView());
+				cursor.follow();
+				cursor.addEventListener('change', (e) => setTimeMs(e.timeMs));
+				cursorRef.current = cursor;
+				setDurationMs(score.getDurationMs());
+				setTimeMs(0);
+				setPlaying(false);
+
 				// A click/tap pins a target (toggle); hover is transient. The pinned one wins, so
 				// hovering elsewhere — or scrolling it out from under the pointer — never clears the
 				// pin. Clicking it again, or clicking empty space, unpins.
@@ -308,13 +355,60 @@ export default function App() {
 			});
 		return () => {
 			cancelled = true;
-			// score.dispose() drops its own listeners; this only unbinds the DOM-level leave handler.
+			// score.dispose() drops its own listeners (and disposes the cursor); this only unbinds
+			// the DOM-level leave handler and stops the play loop.
 			detach?.();
 			scoreRef.current?.dispose();
 			scoreRef.current = null;
+			cursorRef.current = null;
+			setPlaying(false);
 		};
 	}, [input, renderConfig]);
 
+	// Advance the cursor in real time while playing. seekMs drives the bar (and any future audio);
+	// stops itself at the end. ponytail: wall-clock RAF, no audio yet — swap in an audio clock when sound lands.
+	useEffect(() => {
+		const cursor = cursorRef.current;
+		if (!playing || !cursor) {
+			return;
+		}
+		let raf = 0;
+		let last = performance.now();
+		const tick = (now: number) => {
+			const next = cursor.getTimeMs() + (now - last);
+			last = now;
+			if (next >= durationMs) {
+				cursor.seekMs(durationMs);
+				setPlaying(false);
+				return;
+			}
+			cursor.seekMs(next);
+			raf = requestAnimationFrame(tick);
+		};
+		raf = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(raf);
+	}, [playing, durationMs]);
+
+	const togglePlay = () => {
+		const cursor = cursorRef.current;
+		if (!cursor) {
+			return;
+		}
+		// Restart from the top if we're parked at the end.
+		if (!playing && cursor.isDone()) {
+			cursor.seekMs(0);
+		}
+		setPlaying((p) => !p);
+	};
+	const stepPrev = () => {
+		setPlaying(false);
+		cursorRef.current?.previous();
+	};
+	const stepNext = () => {
+		setPlaying(false);
+		cursorRef.current?.next();
+	};
+
 	// Restore the last-edited MusicXML, or open with a random example.
 	useEffect(() => {
 		const saved = localStorage.getItem(STORAGE_KEY);
@@ -461,6 +555,44 @@ export default function App() {
 				/>
 
 				<aside className="fixed inset-x-0 bottom-0 z-20 flex flex-col rounded-t-xl border-t border-zinc-200 bg-white shadow-[0_-4px_16px_rgba(0,0,0,0.1)] md:static md:max-h-none md:w-80 md:shrink-0 md:overflow-y-auto md:rounded-none md:border-t-0 md:border-r md:shadow-none">
+					{/* Player: on mobile, anchored to the top edge of this bottom sheet (bottom-full) so it
+					    rides up as the sheet expands; on desktop it floats fixed, centered in the content
+					    pane (viewport center shifted right by half the 20rem sidebar). */}
+					{input != null && initialized && (
+						<div
+							className={`absolute bottom-full left-1/2 z-30 mb-4 flex -translate-x-1/2 items-center gap-3 rounded-full border px-4 py-2 shadow-lg backdrop-blur md:fixed md:bottom-4 md:left-[calc(50%+10rem)] md:mb-0 ${dark ? 'border-zinc-700 bg-zinc-800/95' : 'border-zinc-200 bg-white/95'}`}
+						>
+							<span
+								className={`w-24 text-right font-mono text-xs tabular-nums ${dark ? 'text-zinc-400' : 'text-zinc-500'}`}
+							>
+								{fmtTime(timeMs)} / {fmtTime(durationMs)}
+							</span>
+							<button
+								type="button"
+								onClick={stepPrev}
+								aria-label="Previous note"
+								className={`rounded-full p-1 ${dark ? 'text-zinc-300 hover:bg-zinc-700' : 'text-zinc-600 hover:bg-zinc-100'}`}
+							>
+								<PlayerIcon d={ICON.prev} />
+							</button>
+							<button
+								type="button"
+								onClick={togglePlay}
+								aria-label={playing ? 'Pause' : 'Play'}
+								className="rounded-full bg-blue-600 p-2 text-white hover:bg-blue-500"
+							>
+								<PlayerIcon d={playing ? ICON.pause : ICON.play} />
+							</button>
+							<button
+								type="button"
+								onClick={stepNext}
+								aria-label="Next note"
+								className={`rounded-full p-1 ${dark ? 'text-zinc-300 hover:bg-zinc-700' : 'text-zinc-600 hover:bg-zinc-100'}`}
+							>
+								<PlayerIcon d={ICON.next} />
+							</button>
+						</div>
+					)}
 					{/* top part: always visible, taps toggle the panel */}
 					<button
 						type="button"

From 7b36cafc213064f018cc89b786e32635b01d5c8c Mon Sep 17 00:00:00 2001
From: Jared Johnson <jared@jaredjohnson.dev>
Date: Tue, 30 Jun 2026 09:33:28 -0400
Subject: [PATCH 06/10] color the notes as they cursor crosses them

---
 site/src/App.tsx | 139 ++++++++++++++++++++++++++++++++++-------------
 1 file changed, 100 insertions(+), 39 deletions(-)

diff --git a/site/src/App.tsx b/site/src/App.tsx
index d6ba96c22..7ebe0b044 100644
--- a/site/src/App.tsx
+++ b/site/src/App.tsx
@@ -86,15 +86,23 @@ function CheckIcon() {
 	);
 }
 
-// Heroicons (outline) — single-path each, so one component covers play/pause/prev/next.
+// Heroicons (outline). Each value is the icon's path list — circle play/pause have two paths.
 const ICON = {
-	play: 'M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z',
-	pause: 'M15.75 5.25v13.5m-7.5-13.5v13.5',
-	prev: 'M15.75 19.5 8.25 12l7.5-7.5',
-	next: 'm8.25 4.5 7.5 7.5-7.5 7.5',
+	play: [
+		'M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z',
+	],
+	pause: ['M15.75 5.25v13.5m-7.5-13.5v13.5'],
+	prev: ['M15.75 19.5 8.25 12l7.5-7.5'],
+	next: ['m8.25 4.5 7.5 7.5-7.5 7.5'],
 } as const;
 
-function PlayerIcon({ d }: { d: string }) {
+function PlayerIcon({
+	d,
+	className = 'size-6',
+}: {
+	d: readonly string[];
+	className?: string;
+}) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
@@ -102,10 +110,12 @@ function PlayerIcon({ d }: { d: string }) {
 			viewBox="0 0 24 24"
 			strokeWidth={1.5}
 			stroke="currentColor"
-			className="size-6"
+			className={className}
 			aria-hidden="true"
 		>
-			<path strokeLinecap="round" strokeLinejoin="round" d={d} />
+			{d.map((p) => (
+				<path key={p} strokeLinecap="round" strokeLinejoin="round" d={p} />
+			))}
 		</svg>
 	);
 }
@@ -289,7 +299,29 @@ export default function App() {
 				const cursor = score.addCursor();
 				cursor.attach(score.createCursorView());
 				cursor.follow();
-				cursor.addEventListener('change', (e) => setTimeMs(e.timeMs));
+				// Light the notes (and their tab frets) under the cursor; clear ones that drop out.
+				// Rests (no pitch) are skipped — only sounding notes get colored.
+				const lit = new Set<Note>();
+				const paint = (active: readonly Note[]) => {
+					const sounding = active.filter((n) => n.getPitch() !== null);
+					for (const n of lit) {
+						if (!sounding.includes(n)) {
+							n.color.off();
+							lit.delete(n);
+						}
+					}
+					for (const n of sounding) {
+						if (!lit.has(n)) {
+							n.color.on('#155dfc');
+							lit.add(n);
+						}
+					}
+				};
+				cursor.addEventListener('change', (e) => {
+					setTimeMs(e.timeMs);
+					paint(e.active);
+				});
+				paint(cursor.getActiveNotes());
 				cursorRef.current = cursor;
 				setDurationMs(score.getDurationMs());
 				setTimeMs(0);
@@ -560,37 +592,66 @@ export default function App() {
 					    pane (viewport center shifted right by half the 20rem sidebar). */}
 					{input != null && initialized && (
 						<div
-							className={`absolute bottom-full left-1/2 z-30 mb-4 flex -translate-x-1/2 items-center gap-3 rounded-full border px-4 py-2 shadow-lg backdrop-blur md:fixed md:bottom-4 md:left-[calc(50%+10rem)] md:mb-0 ${dark ? 'border-zinc-700 bg-zinc-800/95' : 'border-zinc-200 bg-white/95'}`}
+							// Width tracks the sheet-music card (max-w-237.5, centered): full content-pane span
+							// on desktop (left-80 clears the 20rem sidebar), full width minus inset-x-4 padding
+							// on mobile. Rides up with the bottom sheet (bottom-full) on mobile, fixed on desktop.
+							className={`absolute inset-x-4 bottom-full z-30 mx-auto mb-4 flex max-w-237.5 flex-col gap-2 rounded-2xl border px-4 py-2.5 shadow-lg backdrop-blur md:fixed md:inset-x-auto md:bottom-4 md:left-80 md:right-0 md:mb-0 ${dark ? 'border-zinc-700 bg-zinc-800/95' : 'border-zinc-200 bg-white/95'}`}
 						>
-							<span
-								className={`w-24 text-right font-mono text-xs tabular-nums ${dark ? 'text-zinc-400' : 'text-zinc-500'}`}
-							>
-								{fmtTime(timeMs)} / {fmtTime(durationMs)}
-							</span>
-							<button
-								type="button"
-								onClick={stepPrev}
-								aria-label="Previous note"
-								className={`rounded-full p-1 ${dark ? 'text-zinc-300 hover:bg-zinc-700' : 'text-zinc-600 hover:bg-zinc-100'}`}
-							>
-								<PlayerIcon d={ICON.prev} />
-							</button>
-							<button
-								type="button"
-								onClick={togglePlay}
-								aria-label={playing ? 'Pause' : 'Play'}
-								className="rounded-full bg-blue-600 p-2 text-white hover:bg-blue-500"
-							>
-								<PlayerIcon d={playing ? ICON.pause : ICON.play} />
-							</button>
-							<button
-								type="button"
-								onClick={stepNext}
-								aria-label="Next note"
-								className={`rounded-full p-1 ${dark ? 'text-zinc-300 hover:bg-zinc-700' : 'text-zinc-600 hover:bg-zinc-100'}`}
-							>
-								<PlayerIcon d={ICON.next} />
-							</button>
+							{/* Spotify layout: controls centered on top, progress bar flanked by times below. */}
+							<div className="flex items-center justify-center gap-5">
+								<button
+									type="button"
+									onClick={stepPrev}
+									aria-label="Previous note"
+									className={`flex size-9 items-center justify-center rounded-md ${dark ? 'text-zinc-400 hover:bg-zinc-700' : 'text-zinc-500 hover:bg-zinc-100'}`}
+								>
+									<PlayerIcon d={ICON.prev} />
+								</button>
+								<button
+									type="button"
+									onClick={togglePlay}
+									aria-label={playing ? 'Pause' : 'Play'}
+									className={`flex size-9 items-center justify-center rounded-md ${dark ? 'text-zinc-400 hover:bg-zinc-700' : 'text-zinc-500 hover:bg-zinc-100'}`}
+								>
+									<PlayerIcon
+										d={playing ? ICON.pause : ICON.play}
+										className="size-7"
+									/>
+								</button>
+								<button
+									type="button"
+									onClick={stepNext}
+									aria-label="Next note"
+									className={`flex size-9 items-center justify-center rounded-md ${dark ? 'text-zinc-400 hover:bg-zinc-700' : 'text-zinc-500 hover:bg-zinc-100'}`}
+								>
+									<PlayerIcon d={ICON.next} />
+								</button>
+							</div>
+							<div className="flex items-center gap-2">
+								<span
+									className={`font-mono text-xs tabular-nums ${dark ? 'text-zinc-400' : 'text-zinc-500'}`}
+								>
+									{fmtTime(timeMs)}
+								</span>
+								<input
+									type="range"
+									min={0}
+									max={durationMs}
+									step={10}
+									value={timeMs}
+									onChange={(e) => {
+										setPlaying(false);
+										cursorRef.current?.seekMs(Number(e.target.value));
+									}}
+									aria-label="Seek"
+									className="flex-1 accent-blue-600"
+								/>
+								<span
+									className={`font-mono text-xs tabular-nums ${dark ? 'text-zinc-400' : 'text-zinc-500'}`}
+								>
+									{fmtTime(durationMs)}
+								</span>
+							</div>
 						</div>
 					)}
 					{/* top part: always visible, taps toggle the panel */}

From 7353dc9e0344bfb37e434ba6076dd16a7bae2bde Mon Sep 17 00:00:00 2001
From: Jared Johnson <jared@jaredjohnson.dev>
Date: Tue, 30 Jun 2026 09:52:51 -0400
Subject: [PATCH 07/10] update getTimeAt to return all ms, beat, and step
 information

---
 site/src/App.tsx     | 54 ++++++++++++++++++++++++++------
 src/score.test.ts    | 73 +++++++++++++++++++++++++++++++++++++++++++-
 src/score.ts         | 60 +++++++++++++++++++++++-------------
 src/sequence.test.ts | 36 ++++++++++++++++++++++
 src/sequence.ts      | 49 +++++++++++++++++++++++++++++
 5 files changed, 241 insertions(+), 31 deletions(-)

diff --git a/site/src/App.tsx b/site/src/App.tsx
index 7ebe0b044..aeacfdbf8 100644
--- a/site/src/App.tsx
+++ b/site/src/App.tsx
@@ -299,21 +299,32 @@ export default function App() {
 				const cursor = score.addCursor();
 				cursor.attach(score.createCursorView());
 				cursor.follow();
-				// Light the notes (and their tab frets) under the cursor; clear ones that drop out.
-				// Rests (no pitch) are skipped — only sounding notes get colored.
+				// The notes (and their tab frets) currently under the cursor. Cursor coloring and the
+				// hover halo share one color channel, so recolor() resolves both: hover wins while a
+				// note is hovered, otherwise the active color shows, otherwise it clears. Rests never
+				// enter `lit` (no pitch), so only sounding notes get the active color.
 				const lit = new Set<Note>();
+				const recolor = (n: Note) => {
+					if (n === haloRef.current) {
+						n.color.on('#f4f800');
+					} else if (lit.has(n)) {
+						n.color.on('#155dfc');
+					} else {
+						n.color.off();
+					}
+				};
 				const paint = (active: readonly Note[]) => {
 					const sounding = active.filter((n) => n.getPitch() !== null);
-					for (const n of lit) {
+					for (const n of [...lit]) {
 						if (!sounding.includes(n)) {
-							n.color.off();
 							lit.delete(n);
+							recolor(n);
 						}
 					}
 					for (const n of sounding) {
 						if (!lit.has(n)) {
-							n.color.on('#155dfc');
 							lit.add(n);
+							recolor(n);
 						}
 					}
 				};
@@ -341,11 +352,18 @@ export default function App() {
 								? target.getNote()
 								: null;
 					if (note !== haloRef.current) {
-						haloRef.current?.halo.off();
-						haloRef.current?.color.off();
-						note?.halo.on('rgba(255, 0, 105, 0.9)');
-						note?.color.on('#f4f800');
+						const prev = haloRef.current;
 						haloRef.current = note;
+						prev?.halo.off();
+						// recolor reads haloRef.current, so update it first: prev falls back to its
+						// active color (or clears), note picks up the hover color.
+						if (prev) {
+							recolor(prev);
+						}
+						note?.halo.on('rgba(255, 0, 105, 0.9)');
+						if (note) {
+							recolor(note);
+						}
 					}
 					container.style.cursor = note ? 'pointer' : '';
 					// Only note-bearing targets get a tooltip; describe() is empty for a measure.
@@ -375,8 +393,26 @@ export default function App() {
 					pinned = pinned === t ? null : t;
 					apply();
 				};
+				// Click or drag anywhere on the score scrubs the cursor to that position's time.
+				const seekTo = (point: { x: number; y: number }) => {
+					const t = score.getTimeAt(point);
+					if (t) {
+						setPlaying(false);
+						cursor.seekMs(t.ms);
+					}
+				};
+				const onPointerDown = (e: PointerTargetEvent) => seekTo(e.point);
+				// buttons === 1 means the primary button is held, so this continues the scrub
+				// during a drag and ignores a plain hover (no manual drag-state flag needed).
+				const onPointerMove = (e: PointerTargetEvent) => {
+					if (e.native.buttons === 1) {
+						seekTo(e.point);
+					}
+				};
 				score.addEventListener('hover', onHover);
 				score.addEventListener('click', onClick);
+				score.addEventListener('pointerdown', onPointerDown);
+				score.addEventListener('pointermove', onPointerMove);
 				detach = clearHalo;
 			})
 			.catch((e: unknown) => {
diff --git a/src/score.test.ts b/src/score.test.ts
index d48e3f84e..a97ff3f98 100644
--- a/src/score.test.ts
+++ b/src/score.test.ts
@@ -6,7 +6,12 @@ import type { HitTester } from './hit';
 import { Score } from './score';
 import { buildSequence } from './sequence';
 import type { Host, Layer, LayerKind } from './stage';
-import { Measure, type PointerTarget, type Viewport } from './targets';
+import {
+	Measure,
+	type Note,
+	type PointerTarget,
+	type Viewport,
+} from './targets';
 
 // An empty timeline — these tests exercise events/layers/hover, not playback.
 const EMPTY_SEQUENCE = buildSequence({ measures: [], notes: [] });
@@ -249,6 +254,72 @@ test('addLayer forwards zIndex to the host and rejects non-integers', () => {
 	expect(() => score.addLayer('content', Number.NaN)).toThrow();
 });
 
+test('getTimeAt interpolates the time under a point and reports the closest step', () => {
+	const host = new FakeHost();
+	// A measure at index 0 with two quarter notes (x 10 @ beat 0, x 20 @ beat 1) at 120bpm.
+	const sequence = buildSequence({
+		measures: [
+			{
+				index: 0,
+				beats: 2,
+				tempoBpm: 120,
+				jumps: [],
+				systemRect: new Rect(0, 0, 1000, 100),
+			},
+		],
+		notes: [
+			{
+				note: {} as Note,
+				measureIndex: 0,
+				measureBeat: 0,
+				beats: 1,
+				x: 10,
+				tiedFrom: null,
+			},
+			{
+				note: {} as Note,
+				measureIndex: 0,
+				measureBeat: 1,
+				beats: 1,
+				x: 20,
+				tiedFrom: null,
+			},
+		],
+	});
+	const target = new Measure(new Rect(0, 0, 1000, 100), viewport, '1', 0);
+	const score = new Score(
+		host,
+		new FakeHitTester(target),
+		new Decorations(host),
+		sequence,
+	);
+
+	// x 15 is halfway through step 0's glide (10 -> 20), so beat 0.5 = 250ms; closest step is 0.
+	expect(score.getTimeAt({ x: 15, y: 50 })).toEqual({
+		ms: 250,
+		beat: 0.5,
+		stepMs: 0,
+		stepBeat: 0,
+		stepIndex: 0,
+	});
+	// Far right lands in step 1 (snapped to beat 1 / 500ms) and clamps to the measure end.
+	expect(score.getTimeAt({ x: 9999, y: 50 })).toEqual({
+		ms: 1000,
+		beat: 2,
+		stepMs: 500,
+		stepBeat: 1,
+		stepIndex: 1,
+	});
+
+	const offScore = new Score(
+		host,
+		new FakeHitTester(null),
+		new Decorations(host),
+		sequence,
+	);
+	expect(offScore.getTimeAt({ x: 15, y: 50 })).toBeNull();
+});
+
 test('dispose detaches every listener and tears down decorations and host', () => {
 	const target = new Measure(new Rect(0, 0, 10, 10), viewport, '1', 0);
 	const { host, index, decorations, score } = fixture(target);
diff --git a/src/score.ts b/src/score.ts
index ec56f34aa..2b5849e57 100644
--- a/src/score.ts
+++ b/src/score.ts
@@ -109,36 +109,54 @@ export class Score implements EventListenable<ScoreEventMap> {
 		return this.sequence.getDurationBeats();
 	}
 
-	/* The earliest playback time at a score-space point (jump-aware: a repeated spot maps to its
-	 * first pass), or null on empty space. Hit-tests the point, then maps the target to its first
-	 * step — a note/fret to its onset, a measure to its first onset. */
-	getTimeMsAt(point: { x: number; y: number }): number | null {
-		const index = this.stepIndexAt(point);
-		return index === null
-			? null
-			: (this.sequence.getStep(index)?.startMs ?? null);
-	}
-
-	/* The earliest playback time at a point, in quarter-note beats. See getTimeMsAt. */
-	getTimeBeatsAt(point: { x: number; y: number }): number | null {
-		const index = this.stepIndexAt(point);
-		return index === null
-			? null
-			: (this.sequence.getStep(index)?.startBeat ?? null);
+	/* The playback time at a score-space point (jump-aware: a repeated spot maps to its first pass),
+	 * or null on empty space. Hit-tests the point, then interpolates the exact time/beat under it —
+	 * a note/fret within its onset step, a measure across its full width (see Sequence.resolveX). The
+	 * `step*` fields are the closest onset (the step the point lands in), for snap-to-note callers. */
+	getTimeAt(point: { x: number; y: number }): {
+		ms: number;
+		beat: number;
+		stepMs: number;
+		stepBeat: number;
+		stepIndex: number;
+	} | null {
+		const range = this.stepRangeAt(point);
+		if (!range) {
+			return null;
+		}
+		const resolved = this.sequence.resolveX(point.x, range.start, range.end);
+		const step = resolved && this.sequence.getStep(resolved.stepIndex);
+		if (!resolved || !step) {
+			return null;
+		}
+		return {
+			ms: this.sequence.beatsToMs(resolved.beat),
+			beat: resolved.beat,
+			stepMs: step.startMs,
+			stepBeat: step.startBeat,
+			stepIndex: resolved.stepIndex,
+		};
 	}
 
-	private stepIndexAt(point: { x: number; y: number }): number | null {
+	// The step range a target spans: a note/fret is its single onset step; a measure is its first
+	// occurrence's contiguous run, so a point maps across the whole bar.
+	private stepRangeAt(point: {
+		x: number;
+		y: number;
+	}): { start: number; end: number } | null {
 		const target = this.index.hitTest(point);
 		if (!target) {
 			return null;
 		}
 		switch (target.type) {
 			case 'note':
-				return this.sequence.getFirstStepOfNote(target);
-			case 'tab-position':
-				return this.sequence.getFirstStepOfNote(target.getNote());
+			case 'tab-position': {
+				const note = target.type === 'note' ? target : target.getNote();
+				const index = this.sequence.getFirstStepOfNote(note);
+				return index === null ? null : { start: index, end: index };
+			}
 			case 'measure':
-				return this.sequence.getFirstStepOfMeasure(target.getIndex());
+				return this.sequence.getStepRangeOfMeasure(target.getIndex());
 		}
 	}
 
diff --git a/src/sequence.test.ts b/src/sequence.test.ts
index 880cc4274..b009bafbb 100644
--- a/src/sequence.test.ts
+++ b/src/sequence.test.ts
@@ -393,6 +393,42 @@ test('positionAt: interpolates the bar x within a step toward the next onset', (
 	expect(rect?.h).toBe(100);
 });
 
+test('resolveX: interpolates the beat from x within a step, clamping to the range ends', () => {
+	const seq = buildSequence({
+		measures: [
+			{ index: 0, beats: 2, tempoBpm: 120, jumps: [], systemRect: SYS },
+		],
+		notes: [quarter(fakeNote('a'), 0, 0, 10), quarter(fakeNote('b'), 0, 1, 20)],
+	});
+	// Step 0 spans beat [0,1) gliding x 10 -> 20; step 1 spans [1,2) gliding x 20 -> 1000 (system right).
+	expect(seq.resolveX(10, 0, 1)).toEqual({ stepIndex: 0, beat: 0 });
+	expect(seq.resolveX(15, 0, 1)).toEqual({ stepIndex: 0, beat: 0.5 });
+	expect(seq.resolveX(20, 0, 1)).toEqual({ stepIndex: 1, beat: 1 });
+	// Left of the first step clamps to its start; right of the last clamps to its end.
+	expect(seq.resolveX(-5, 0, 1)).toEqual({ stepIndex: 0, beat: 0 });
+	expect(seq.resolveX(9999, 0, 1)).toEqual({ stepIndex: 1, beat: 2 });
+	// A single-step range stays within that step.
+	expect(seq.resolveX(20, 0, 0)).toEqual({ stepIndex: 0, beat: 1 });
+	expect(seq.resolveX(0, 1, 0)).toBeNull();
+});
+
+test('getStepRangeOfMeasure: the first occurrence contiguous run, null when empty', () => {
+	const seq = buildSequence({
+		measures: [
+			{ index: 0, beats: 2, tempoBpm: 120, jumps: [], systemRect: SYS },
+			{ index: 1, beats: 2, tempoBpm: null, jumps: [], systemRect: SYS },
+		],
+		notes: [
+			quarter(fakeNote('a'), 0, 0, 10),
+			quarter(fakeNote('b'), 0, 1, 20),
+			quarter(fakeNote('c'), 1, 0, 30),
+		],
+	});
+	expect(seq.getStepRangeOfMeasure(0)).toEqual({ start: 0, end: 1 });
+	expect(seq.getStepRangeOfMeasure(1)).toEqual({ start: 2, end: 2 });
+	expect(seq.getStepRangeOfMeasure(99)).toBeNull();
+});
+
 test('getStepIndexAtBeats: binary search, null before the first onset', () => {
 	const seq = buildSequence({
 		measures: [
diff --git a/src/sequence.ts b/src/sequence.ts
index fd000c491..b2e4e6163 100644
--- a/src/sequence.ts
+++ b/src/sequence.ts
@@ -603,6 +603,39 @@ export class Sequence {
 		return new Rect(x, step.systemRect.y, BAR_WIDTH, step.systemRect.h);
 	}
 
+	/* Inverse of positionAt over a step range: the step whose `[x, glideToX]` segment contains the
+	 * score-space `x`, and the exact beat interpolated within it. Steps in a range are left-to-right
+	 * contiguous (`step[i].glideToX === step[i+1].x` on the same system), so `x` left of the first
+	 * clamps to frac 0 and right of the last to frac 1. Null if the range is empty/invalid. */
+	resolveX(
+		x: number,
+		startStep: number,
+		endStep: number,
+	): { stepIndex: number; beat: number } | null {
+		if (startStep > endStep) {
+			return null;
+		}
+		let stepIndex = startStep;
+		for (let i = startStep; i <= endStep; i++) {
+			const step = this.steps[i];
+			if (!step) {
+				return null;
+			}
+			stepIndex = i;
+			if (x < step.glideToX) {
+				break;
+			}
+		}
+		const step = this.steps[stepIndex];
+		if (!step) {
+			return null;
+		}
+		const span = step.glideToX - step.x;
+		const frac = span > 0 ? Math.min(1, Math.max(0, (x - step.x) / span)) : 0;
+		const beat = step.startBeat + (step.endBeat - step.startBeat) * frac;
+		return { stepIndex, beat };
+	}
+
 	/* Started/sustained/stopped moving from one step to another (or from nothing, `from = null`). */
 	classify(from: number | null, to: number): CursorTransition {
 		const prev = from === null ? null : (this.steps[from]?.active ?? null);
@@ -619,4 +652,20 @@ export class Sequence {
 	getFirstStepOfMeasure(measureIndex: number): number | null {
 		return this.firstStepOfMeasure.get(measureIndex) ?? null;
 	}
+
+	/* The first occurrence's contiguous run of steps for a measure, or null if it has none. The run
+	 * is contiguous because a measure's onsets are emitted together, in playback order. */
+	getStepRangeOfMeasure(
+		measureIndex: number,
+	): { start: number; end: number } | null {
+		const start = this.firstStepOfMeasure.get(measureIndex);
+		if (start === undefined) {
+			return null;
+		}
+		let end = start;
+		while (this.steps[end + 1]?.measureIndex === measureIndex) {
+			end++;
+		}
+		return { start, end };
+	}
 }

From 886d6a6c317dcee4d392629432d866d26ab4ccd7 Mon Sep 17 00:00:00 2001
From: Jared Johnson <jared@jaredjohnson.dev>
Date: Tue, 30 Jun 2026 10:14:11 -0400
Subject: [PATCH 08/10] add cursor visibility events on edge transitions

---
 site/src/App.tsx     | 59 ++++++++++++++++++++++++++--------
 src/cursor.test.ts   | 42 +++++++++++++++++++++++++
 src/cursor.ts        | 48 +++++++++++++++++++++++++---
 src/score.ts         | 75 ++++++++++++++++++++++++++++++++++++++++++--
 src/sequence.test.ts |  5 +++
 src/sequence.ts      | 13 ++++++++
 6 files changed, 222 insertions(+), 20 deletions(-)

diff --git a/site/src/App.tsx b/site/src/App.tsx
index aeacfdbf8..520843190 100644
--- a/site/src/App.tsx
+++ b/site/src/App.tsx
@@ -186,6 +186,12 @@ export default function App() {
 		y: number;
 		text: string;
 	} | null>(null);
+	// Scrub-bar tooltip: "measure i of N" at the pointer x (relative to the track), while
+	// hovering or dragging the seek slider. ponytail: pointer-only, add a value-driven tip if
+	// keyboard nav matters.
+	const [scrubTip, setScrubTip] = useState<{ x: number; text: string } | null>(
+		null,
+	);
 	// The note whose halo is currently lit, so the next move can turn it back off.
 	const haloRef = useRef<Note | null>(null);
 	// Playback cursor: owned by the current Score (disposed with it). `change` keeps timeMs in sync,
@@ -669,19 +675,46 @@ export default function App() {
 								>
 									{fmtTime(timeMs)}
 								</span>
-								<input
-									type="range"
-									min={0}
-									max={durationMs}
-									step={10}
-									value={timeMs}
-									onChange={(e) => {
-										setPlaying(false);
-										cursorRef.current?.seekMs(Number(e.target.value));
-									}}
-									aria-label="Seek"
-									className="flex-1 accent-blue-600"
-								/>
+								<div className="relative flex-1">
+									{scrubTip && (
+										<div
+											className="pointer-events-none absolute bottom-full mb-2 -translate-x-1/2 whitespace-nowrap rounded bg-zinc-900/90 px-2 py-1 font-mono text-xs text-white shadow-lg"
+											style={{ left: scrubTip.x }}
+										>
+											{scrubTip.text}
+										</div>
+									)}
+									<input
+										type="range"
+										min={0}
+										max={durationMs}
+										step={10}
+										value={timeMs}
+										onChange={(e) => {
+											setPlaying(false);
+											cursorRef.current?.seekMs(Number(e.target.value));
+										}}
+										onPointerMove={(e) => {
+											const rect = e.currentTarget.getBoundingClientRect();
+											const frac = Math.min(
+												1,
+												Math.max(0, (e.clientX - rect.left) / rect.width),
+											);
+											const ms = frac * durationMs;
+											const i =
+												(scoreRef.current?.getMeasureIndexAtMs(ms) ?? 0) + 1;
+											const n = scoreRef.current?.getMeasureCount() ?? 0;
+											setScrubTip({
+												x: e.clientX - rect.left,
+												text: `measure ${i} of ${n}`,
+											});
+										}}
+										onPointerLeave={() => setScrubTip(null)}
+										onPointerUp={() => setScrubTip(null)}
+										aria-label="Seek"
+										className="w-full accent-blue-600"
+									/>
+								</div>
 								<span
 									className={`font-mono text-xs tabular-nums ${dark ? 'text-zinc-400' : 'text-zinc-500'}`}
 								>
diff --git a/src/cursor.test.ts b/src/cursor.test.ts
index f45c84bc8..de62a2e3c 100644
--- a/src/cursor.test.ts
+++ b/src/cursor.test.ts
@@ -3,9 +3,11 @@ import {
 	Cursor,
 	type CursorChangeEvent,
 	type CursorHost,
+	type CursorHostEventMap,
 	type CursorView,
 	type Scroller,
 } from './cursor';
+import { EventBus } from './events';
 import { Rect } from './geometry';
 import { buildSequence, type SequenceNote } from './sequence';
 import type { Note } from './targets';
@@ -47,6 +49,7 @@ class FakeScroller implements Scroller {
 
 class FakeHost implements CursorHost {
 	readonly scroller = new FakeScroller();
+	private readonly bus = new EventBus<CursorHostEventMap>();
 	// The visible box, in the same identity coords clientRectOf maps to. Defaults to covering SYS.
 	vp = new Rect(0, 0, 1000, 1000);
 	clientRectOf(rect: Rect): DOMRect {
@@ -64,6 +67,23 @@ class FakeHost implements CursorHost {
 	viewportRect(): DOMRect {
 		return this.clientRectOf(this.vp);
 	}
+	addEventListener<K extends keyof CursorHostEventMap>(
+		type: K,
+		listener: (event: CursorHostEventMap[K]) => void,
+	): void {
+		this.bus.addEventListener(type, listener);
+	}
+	removeEventListener<K extends keyof CursorHostEventMap>(
+		type: K,
+		listener: (event: CursorHostEventMap[K]) => void,
+	): void {
+		this.bus.removeEventListener(type, listener);
+	}
+	// Test helper: move the viewport and notify, as a real scroll/resize would.
+	moveViewport(rect: Rect): void {
+		this.vp = rect;
+		this.bus.emit('viewportchange', undefined);
+	}
 }
 
 class FakeView implements CursorView {
@@ -204,6 +224,28 @@ test('isFullyVisible reflects the viewport box', () => {
 	expect(cursor.isFullyVisible()).toBe(false);
 });
 
+test('visibility fires on transitions from both cursor moves and viewport changes', () => {
+	const host = new FakeHost(); // vp covers every bar (x 10..40, width 1)
+	const cursor = new Cursor(fourQuarters(), host);
+	const seen: boolean[] = [];
+	cursor.addEventListener('visibility', (e) => seen.push(e.fullyVisible));
+
+	// Narrow the viewport to x [0, 25]: bars at x 10 and 20 fit, 30 and 40 don't. The cursor sits at
+	// x 10, so this isn't a transition.
+	host.moveViewport(new Rect(0, 0, 25, 1000));
+	expect(seen).toEqual([]);
+
+	cursor.next(); // -> x 20, still inside; no event
+	expect(seen).toEqual([]);
+	cursor.next(); // -> x 30, scrolls off the right edge
+	expect(seen).toEqual([false]);
+	cursor.next(); // -> x 40, still off; no repeat
+	expect(seen).toEqual([false]);
+
+	host.moveViewport(new Rect(0, 0, 1000, 1000)); // widen: the bar is fully visible again
+	expect(seen).toEqual([false, true]);
+});
+
 test('dispose is idempotent and stops movement/emits; onDispose fires once', () => {
 	let disposes = 0;
 	const cursor = new Cursor(fourQuarters(), new FakeHost(), () => disposes++);
diff --git a/src/cursor.ts b/src/cursor.ts
index 5ec9ea4d9..a73b71458 100644
--- a/src/cursor.ts
+++ b/src/cursor.ts
@@ -28,8 +28,17 @@ export interface CursorChangeEvent {
 	readonly done: boolean;
 }
 
+/* The cursor's bar crossed the viewport edge: `fullyVisible` is true when the whole bar sits inside
+ * the viewport, false when any part is off-screen. Fires on a transition only — driven by the
+ * cursor's own moves and by viewport scroll/resize (see CursorHost.viewportchange), so it also fires
+ * while paused if the user scrolls the bar away. */
+export interface CursorVisibilityEvent {
+	readonly fullyVisible: boolean;
+}
+
 export interface CursorEventMap {
 	change: CursorChangeEvent;
+	visibility: CursorVisibilityEvent;
 }
 
 /* A visual for the cursor, driven by the cursor on every change. vexml ships a vertical-bar default
@@ -46,10 +55,16 @@ export interface Scroller {
 	scrollIntoView(rect: Rect, opts?: { behavior?: ScrollBehavior }): void;
 }
 
+/* The host fires this whenever the viewport moves or resizes, so the cursor can re-test visibility
+ * even though it hasn't moved. Payload-free — the cursor reads viewportRect()/clientRectOf() itself. */
+export interface CursorHostEventMap {
+	viewportchange: undefined;
+}
+
 /* What a Cursor needs from the rendered score's stage: score<->client mapping (to expose the bar's
- * page rect and test visibility), the visible scrollport box, and the default scroller. Stage
- * implements it; a unit test injects a fake. */
-export interface CursorHost {
+ * page rect and test visibility), the visible scrollport box, the default scroller, and a
+ * viewport-change subscription. Stage's adapter implements it; a unit test injects a fake. */
+export interface CursorHost extends EventListenable<CursorHostEventMap> {
 	clientRectOf(rect: Rect): DOMRect;
 	viewportRect(): DOMRect;
 	readonly scroller: Scroller;
@@ -77,13 +92,23 @@ export class Cursor implements EventListenable<CursorEventMap> {
 	private index = 0;
 	private ms = 0;
 	private disposed = false;
+	// Last reported full-visibility, to fire `visibility` on transitions only. Seeded from the
+	// current state so the first move/scroll doesn't emit a spurious "unchanged" event.
+	private lastVisible: boolean;
 
 	constructor(
 		private readonly sequence: Sequence,
 		private readonly host: CursorHost,
 		// Called from dispose so the Score can forget this cursor (avoids a leak / double dispose).
 		private readonly onDispose?: () => void,
-	) {}
+	) {
+		this.lastVisible = this.isFullyVisible();
+		const onViewport = () => this.checkVisibility();
+		this.host.addEventListener('viewportchange', onViewport);
+		this.cleanups.add(() =>
+			this.host.removeEventListener('viewportchange', onViewport),
+		);
+	}
 
 	/* Snap to the next tickable in playback order; a no-op on the last one. */
 	next(): void {
@@ -264,5 +289,20 @@ export class Cursor implements EventListenable<CursorEventMap> {
 
 	private emit(from: number): void {
 		this.bus.emit('change', this.snapshot(from));
+		this.checkVisibility();
+	}
+
+	// Fire `visibility` if the bar crossed the viewport edge since the last check. Called after every
+	// move and on every viewport change, so it catches both the cursor moving off-screen and the user
+	// scrolling it away.
+	private checkVisibility(): void {
+		if (this.disposed) {
+			return;
+		}
+		const fullyVisible = this.isFullyVisible();
+		if (fullyVisible !== this.lastVisible) {
+			this.lastVisible = fullyVisible;
+			this.bus.emit('visibility', { fullyVisible });
+		}
 	}
 }
diff --git a/src/score.ts b/src/score.ts
index 2b5849e57..61ac42f5c 100644
--- a/src/score.ts
+++ b/src/score.ts
@@ -1,12 +1,69 @@
-import { Cursor, type CursorView, type Scroller } from './cursor';
+import {
+	Cursor,
+	type CursorHost,
+	type CursorHostEventMap,
+	type CursorView,
+	type Scroller,
+} from './cursor';
 import { BarCursorView, type BarCursorViewOptions } from './cursor-view';
 import type { Decorations } from './decorations';
 import { EventBus, type EventListenable, type ScoreEventMap } from './events';
+import type { Rect } from './geometry';
 import type { HitTester } from './hit';
 import type { Sequence } from './sequence';
 import type { Host, Layer, LayerKind } from './stage';
 import type { PointerTarget } from './targets';
 
+/* Adapts the Stage host into a Cursor's CursorHost: passes through the rect/scroller methods and
+ * turns the host's window-scroll + resize observers into a single `viewportchange` event. One per
+ * cursor; the observers are bound only while the cursor is listening and torn down when it disposes
+ * (its removeEventListener drops the last listener). */
+class CursorHostAdapter implements CursorHost {
+	private readonly bus = new EventBus<CursorHostEventMap>();
+	private unbind: (() => void) | null = null;
+
+	constructor(private readonly host: Host) {}
+
+	clientRectOf(rect: Rect): DOMRect {
+		return this.host.clientRectOf(rect);
+	}
+
+	viewportRect(): DOMRect {
+		return this.host.viewportRect();
+	}
+
+	get scroller(): Scroller {
+		return this.host.scroller;
+	}
+
+	addEventListener<K extends keyof CursorHostEventMap>(
+		type: K,
+		listener: (event: CursorHostEventMap[K]) => void,
+	): void {
+		this.bus.addEventListener(type, listener);
+		if (!this.unbind) {
+			const fire = () => this.bus.emit('viewportchange', undefined);
+			const offScroll = this.host.observeScroll(fire);
+			const offResize = this.host.observeResize(fire);
+			this.unbind = () => {
+				offScroll();
+				offResize();
+			};
+		}
+	}
+
+	removeEventListener<K extends keyof CursorHostEventMap>(
+		type: K,
+		listener: (event: CursorHostEventMap[K]) => void,
+	): void {
+		this.bus.removeEventListener(type, listener);
+		if (this.bus.count('viewportchange') === 0) {
+			this.unbind?.();
+			this.unbind = null;
+		}
+	}
+}
+
 /*
  * A rendered score: the handle render() returns. Owns the DOM vexml built (the Stage/Host) and
  * lets callers subscribe to pointer/scroll/resize events through the EventListenable interface,
@@ -81,8 +138,10 @@ export class Score implements EventListenable<ScoreEventMap> {
 	/* Add a playback cursor over this score's timeline. Headless by default — attach a view
 	 * (createCursorView) and/or follow the scroller for visuals. Disposed when the score is. */
 	addCursor(): Cursor {
-		const cursor = new Cursor(this.sequence, this.host, () =>
-			this.cursors.delete(cursor),
+		const cursor = new Cursor(
+			this.sequence,
+			new CursorHostAdapter(this.host),
+			() => this.cursors.delete(cursor),
 		);
 		this.cursors.add(cursor);
 		return cursor;
@@ -109,6 +168,16 @@ export class Score implements EventListenable<ScoreEventMap> {
 		return this.sequence.getDurationBeats();
 	}
 
+	/* The total number of measures in document order (not repeat-expanded). */
+	getMeasureCount(): number {
+		return this.sequence.getMeasureCount();
+	}
+
+	/* The document measure index playing at `ms` (before the first onset clamps to 0). */
+	getMeasureIndexAtMs(ms: number): number {
+		return this.sequence.getMeasureIndexAtMs(ms);
+	}
+
 	/* The playback time at a score-space point (jump-aware: a repeated spot maps to its first pass),
 	 * or null on empty space. Hit-tests the point, then interpolates the exact time/beat under it —
 	 * a note/fret within its onset step, a measure across its full width (see Sequence.resolveX). The
diff --git a/src/sequence.test.ts b/src/sequence.test.ts
index b009bafbb..9a331dbba 100644
--- a/src/sequence.test.ts
+++ b/src/sequence.test.ts
@@ -297,6 +297,11 @@ test('assembly: two 4/4 measures of quarters → 8 steps with correct beats/ms',
 	expect(seq.getStep(0)?.startMs).toBeCloseTo(0);
 	expect(seq.getStep(4)?.startBeat).toBe(4); // first onset of measure 1
 	expect(seq.getStep(4)?.startMs).toBeCloseTo(2000);
+
+	// Measure count is document order (2 measures); ms maps to the measure playing then.
+	expect(seq.getMeasureCount()).toBe(2);
+	expect(seq.getMeasureIndexAtMs(0)).toBe(0);
+	expect(seq.getMeasureIndexAtMs(2500)).toBe(1); // 2.5s in → measure 1
 });
 
 test('assembly: a repeated measure replays its steps at later times, earliest-first lookup', () => {
diff --git a/src/sequence.ts b/src/sequence.ts
index b2e4e6163..bc5377693 100644
--- a/src/sequence.ts
+++ b/src/sequence.ts
@@ -518,6 +518,7 @@ export function buildSequence(input: SequenceInput): Sequence {
 		steps,
 		segments,
 		totalBeats,
+		input.measures.length,
 		tiedFrom,
 		firstStepOfNote,
 		firstStepOfMeasure,
@@ -533,6 +534,7 @@ export class Sequence {
 		private readonly steps: Step[],
 		private readonly segments: readonly TempoSegment[],
 		private readonly durationBeats: number,
+		private readonly measureCount: number,
 		private readonly tiedFrom: ReadonlyMap<Note, Note>,
 		private readonly firstStepOfNote: ReadonlyMap<Note, number>,
 		private readonly firstStepOfMeasure: ReadonlyMap<number, number>,
@@ -587,6 +589,17 @@ export class Sequence {
 		return this.getStepIndexAtBeats(this.msToBeats(ms));
 	}
 
+	/* The total number of measures in document order (not repeat-expanded). */
+	getMeasureCount(): number {
+		return this.measureCount;
+	}
+
+	/* The document measure index playing at `ms` (before the first onset clamps to 0). */
+	getMeasureIndexAtMs(ms: number): number {
+		const index = this.getStepIndexAtMs(ms);
+		return index === null ? 0 : (this.steps[index]?.measureIndex ?? 0);
+	}
+
 	/* The bar rect at an exact time: the step's onset x interpolated toward its glide target by the
 	 * elapsed fraction, spanning the step's system. Clamped to the timeline's bounds. */
 	positionAt(ms: number): Rect | null {

From 94d47a7f625dde24c84a453dfac3c9ba761f32bb Mon Sep 17 00:00:00 2001
From: Jared Johnson <jared@jaredjohnson.dev>
Date: Tue, 30 Jun 2026 10:17:15 -0400
Subject: [PATCH 09/10] rename layout.width to referenceWidth

---
 site/src/App.tsx                 | 10 ++++++----
 src/layout.ts                    |  5 +++--
 tests/integration/render.test.ts | 12 ++++++------
 tests/testing/harness.ts         |  5 +++--
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/site/src/App.tsx b/site/src/App.tsx
index 520843190..fe4c52917 100644
--- a/site/src/App.tsx
+++ b/site/src/App.tsx
@@ -210,7 +210,9 @@ export default function App() {
 	const systemSpacing = config.systemSpacing ?? 30;
 	const maxSystemFill = config.maxSystemFill ?? 0.9;
 	const width =
-		config.layout?.type === 'standard' ? (config.layout.width ?? 900) : 900;
+		config.layout?.type === 'standard'
+			? (config.layout.referenceWidth ?? 900)
+			: 900;
 	const notationFont = config.fonts?.notation?.family ?? 'Bravura';
 	const resetKeys = [
 		'noteSpacing',
@@ -273,7 +275,7 @@ export default function App() {
 		// window re-scales instantly without re-rendering.
 		const layoutWidth =
 			renderConfig.layout?.type === 'standard'
-				? renderConfig.layout.width
+				? renderConfig.layout.referenceWidth
 				: undefined;
 		let cancelled = false;
 		// Turn off the lit halo and hide the tooltip; used to reset on teardown/re-render.
@@ -287,7 +289,7 @@ export default function App() {
 		let detach: (() => void) | undefined;
 		render(input, container, {
 			...renderConfig,
-			layout: { type: 'standard', width: layoutWidth },
+			layout: { type: 'standard', referenceWidth: layoutWidth },
 		})
 			.then((score) => {
 				// The effect can re-run before this resolves; drop the late score so it
@@ -1104,7 +1106,7 @@ export default function App() {
 													...c,
 													layout: {
 														type: 'standard',
-														width: e.target.valueAsNumber,
+														referenceWidth: e.target.valueAsNumber,
 													},
 												}))
 											}
diff --git a/src/layout.ts b/src/layout.ts
index 4dd5b84cf..c20c2db17 100644
--- a/src/layout.ts
+++ b/src/layout.ts
@@ -42,7 +42,7 @@ export type Layout =
 			/** Reference layout width in px (default: DEFAULT_WIDTH). The score is laid out
 			 * to this width once; the result is then scaled to whatever container it's placed
 			 * in, so resizing the container never re-flows or re-spaces it. */
-			width?: number;
+			referenceWidth?: number;
 	  }
 	| {
 			/** Lay every measure on one system (horizontal scroll); width is computed
@@ -187,7 +187,8 @@ export function computeLayout(parts: Part[], config: Config): ScoreLayout {
 	// Standard without an explicit width, and panoramic's starting floor, both default
 	// to DEFAULT_WIDTH (panoramic then grows the page to fit its single system).
 	const width =
-		(layout.type === 'standard' ? layout.width : undefined) ?? DEFAULT_WIDTH;
+		(layout.type === 'standard' ? layout.referenceWidth : undefined) ??
+		DEFAULT_WIDTH;
 	const noteSpacing = config.noteSpacing;
 	const softmaxFactor = config.softmaxFactor;
 
diff --git a/tests/integration/render.test.ts b/tests/integration/render.test.ts
index a8e60b8b1..597202958 100644
--- a/tests/integration/render.test.ts
+++ b/tests/integration/render.test.ts
@@ -262,7 +262,7 @@ const TEST_CASES = [
 	// - M2 (system 2): the tied half chord + half rest; the three ties bow in from the left
 	//   edge of the stave into the chord ("tie from nothing").
 	testCase('tie_system_break.musicxml', 'tie_system_break.png', {
-		layout: { type: 'standard', width: 360 },
+		layout: { type: 'standard', referenceWidth: 360 },
 	}),
 
 	// Treble stave, 4/4: four quarters C5, D5, E5, F5 under one slur with no placement
@@ -310,7 +310,7 @@ const TEST_CASES = [
 	// - M2 (system 2): four descending quarters G5-D5; the slur bows in from the left edge
 	//   of the stave into G5 ("slur from nothing").
 	testCase('slur_system_break.musicxml', 'slur_system_break.png', {
-		layout: { type: 'standard', width: 350 },
+		layout: { type: 'standard', referenceWidth: 350 },
 	}),
 
 	// Treble stave, 4/4: sustain pedals from <direction><direction-type><pedal>, drawn
@@ -351,7 +351,7 @@ const TEST_CASES = [
 	// of M3's stave and in from the left edge of M4's — not draw one diagonal across the
 	// page gap.
 	testCase('tab_hammer_pull.musicxml', 'tab_hammer_pull_wrap.png', {
-		layout: { type: 'standard', width: 491 },
+		layout: { type: 'standard', referenceWidth: 491 },
 	}),
 
 	// 6-line TAB stave, half notes: how ties vs slurs render in tab. A tie holds a string
@@ -626,7 +626,7 @@ const TEST_CASES = [
 	// The C box (anchored at M1's last beat) and the G box (anchored at M2's first beat)
 	// are nudged apart so they clear each other — no overlapping boards or titles.
 	testCase('chord_diagram_adjacent.musicxml', 'chord_diagram_adjacent.png', {
-		layout: { type: 'standard', width: 500 },
+		layout: { type: 'standard', referenceWidth: 500 },
 	}),
 
 	// Treble stave, 4/4, one measure at a narrow 500px width: a Bm7 fret box bound to the
@@ -635,7 +635,7 @@ const TEST_CASES = [
 	// whole board — including the far-right muted "X" — stays inside the drawable region
 	// instead of being clipped. Four B4 quarters so only the diagram's clamp is exercised.
 	testCase('chord_diagram_edge.musicxml', 'chord_diagram_edge.png', {
-		layout: { type: 'standard', width: 500 },
+		layout: { type: 'standard', referenceWidth: 500 },
 	}),
 
 	// Treble stave, 4/4: natural harmonics drawn as diamond noteheads (from
@@ -798,7 +798,7 @@ const TEST_CASES = [
 	// - M4-6 (system 2): very high quarter notes (C7) with many ledger lines above the staff,
 	//   which must not collide with system 1's low notes.
 	testCase('system_spacing.musicxml', 'system_spacing.png', {
-		layout: { type: 'standard', width: 660 },
+		layout: { type: 'standard', referenceWidth: 660 },
 	}),
 
 	// Individual measures extracted from 'aloof' for focused testing.
diff --git a/tests/testing/harness.ts b/tests/testing/harness.ts
index 12c63cbd7..85a8c22ed 100644
--- a/tests/testing/harness.ts
+++ b/tests/testing/harness.ts
@@ -13,8 +13,9 @@ export async function render(
 	config: Partial<Config>,
 ): Promise<Buffer> {
 	const width =
-		(config.layout?.type === 'standard' ? config.layout.width : undefined) ??
-		DEFAULT_WIDTH;
+		(config.layout?.type === 'standard'
+			? config.layout.referenceWidth
+			: undefined) ?? DEFAULT_WIDTH;
 	const browser = await testBrowser();
 	const page = await browser.newPage({
 		viewport: { width: width + 64, height: 600 },

From a062dbd184e2800bbce7accdc4611849b8656744 Mon Sep 17 00:00:00 2001
From: Jared Johnson <jared@jaredjohnson.dev>
Date: Tue, 30 Jun 2026 11:01:28 -0400
Subject: [PATCH 10/10] add smplr to the dependencies and playback piano on the
 app

---
 bun.lock                                      |   3 +
 package.json                                  |   1 +
 site/src/App.tsx                              | 157 ++++++++++++++++--
 site/src/instrument.ts                        |  81 +++++++++
 src/chord-diagram.ts                          |   7 +-
 src/draw.ts                                   |  51 +++++-
 src/stage.test.ts                             |  59 +++++--
 src/stage.ts                                  |  56 ++++++-
 .../__screenshots__/chord_diagram.png         | Bin 36296 -> 36659 bytes
 .../chord_diagram_adjacent.png                | Bin 6212 -> 6226 bytes
 .../__screenshots__/chord_diagram_edge.png    | Bin 5576 -> 5590 bytes
 11 files changed, 376 insertions(+), 39 deletions(-)
 create mode 100644 site/src/instrument.ts

diff --git a/bun.lock b/bun.lock
index a3c3331e6..64b3e98dc 100644
--- a/bun.lock
+++ b/bun.lock
@@ -24,6 +24,7 @@
         "pngjs": "^7.0.0",
         "react": "^19.2.7",
         "react-dom": "^19.2.7",
+        "smplr": "^1.0.0",
         "tailwindcss": "^4.3.1",
         "vite": "^8.1.0",
       },
@@ -295,6 +296,8 @@
 
     "simple-get": ["simple-get@4.0.1", "", { "dependencies": { "decompress-response": "^6.0.0", "once": "^1.3.1", "simple-concat": "^1.0.0" } }, "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA=="],
 
+    "smplr": ["smplr@1.0.0", "", {}, "sha512-mCggf1Ex9oNOMl3LJNq7qlc3/aotKsH4DRFz0WgB7g7H4P1qUxmENkoqZ8FKj5vFY6CeweGNk7Uz8vOU/exQ7w=="],
+
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
     "string_decoder": ["string_decoder@1.1.1", "", { "dependencies": { "safe-buffer": "~5.1.0" } }, "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg=="],
diff --git a/package.json b/package.json
index 3dbf1e058..6c8527d78 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
 		"pngjs": "^7.0.0",
 		"react": "^19.2.7",
 		"react-dom": "^19.2.7",
+		"smplr": "^1.0.0",
 		"tailwindcss": "^4.3.1",
 		"vite": "^8.1.0"
 	},
diff --git a/site/src/App.tsx b/site/src/App.tsx
index fe4c52917..1ef5f7089 100644
--- a/site/src/App.tsx
+++ b/site/src/App.tsx
@@ -1,4 +1,10 @@
-import { type ReactNode, useEffect, useRef, useState } from 'react';
+import {
+	type ReactNode,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from 'react';
 import type {
 	Config,
 	Cursor,
@@ -8,6 +14,7 @@ import type {
 	PointerTargetEvent,
 } from '../../src';
 import { render, type Score } from '../../src';
+import { type Instrument, PianoInstrument } from './instrument';
 
 // One-line summary of the hovered target for the tooltip.
 function describe(target: PointerTarget): string {
@@ -94,6 +101,12 @@ const ICON = {
 	pause: ['M15.75 5.25v13.5m-7.5-13.5v13.5'],
 	prev: ['M15.75 19.5 8.25 12l7.5-7.5'],
 	next: ['m8.25 4.5 7.5 7.5-7.5 7.5'],
+	volume: [
+		'M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z',
+	],
+	muted: [
+		'M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z',
+	],
 } as const;
 
 function PlayerIcon({
@@ -161,6 +174,7 @@ function Or() {
 export default function App() {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const scoreRef = useRef<Score | null>(null);
+	const playerRef = useRef<HTMLDivElement>(null);
 	const [text, setText] = useState('');
 	const [input, setInput] = useState<string | Blob | null>(null);
 	const [fixture, setFixture] = useState('');
@@ -198,6 +212,22 @@ export default function App() {
 	// whether movement came from the play loop, next/previous, or seek.
 	const cursorRef = useRef<Cursor | null>(null);
 	const [playing, setPlaying] = useState(false);
+	// Mirror of `playing` the cursor's visibility listener reads live (it's bound once per render).
+	const playingRef = useRef(false);
+	playingRef.current = playing;
+	// Synth voice for playback + note previews. Created once; the change/click handlers below drive it.
+	const instrumentRef = useRef<Instrument | null>(null);
+	if (!instrumentRef.current) {
+		instrumentRef.current = new PianoInstrument();
+	}
+	const [muted, setMuted] = useState(false);
+	useEffect(() => {
+		instrumentRef.current?.setMuted(muted);
+	}, [muted]);
+	// Warm the samples on mount so the first play doesn't drop onsets while loading.
+	useEffect(() => {
+		instrumentRef.current?.preload();
+	}, []);
 	const [timeMs, setTimeMs] = useState(0);
 	const [durationMs, setDurationMs] = useState(0);
 	const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(
@@ -303,10 +333,15 @@ export default function App() {
 				setRenderMs(renderMsRef.current);
 				setInitialized(true);
 
-				// Headless cursor + the built-in bar view; follow() scrolls it into view as it moves.
+				// Headless cursor + the built-in bar view. Page-turn scrolling: when the bar crosses
+				// out of the scroll box (by moving, or the user scrolling it away), bring it back.
 				const cursor = score.addCursor();
 				cursor.attach(score.createCursorView());
-				cursor.follow();
+				cursor.addEventListener('visibility', (e) => {
+					if (!e.fullyVisible && playingRef.current) {
+						cursor.scrollIntoView();
+					}
+				});
 				// The notes (and their tab frets) currently under the cursor. Cursor coloring and the
 				// hover halo share one color channel, so recolor() resolves both: hover wins while a
 				// note is hovered, otherwise the active color shows, otherwise it clears. Rests never
@@ -336,9 +371,28 @@ export default function App() {
 						}
 					}
 				};
+				// The synth voice each sounding note owns, so it can be released when the note stops.
+				// Keyed by Note (not pitch) so a re-struck pitch — which the transition reports in
+				// both `stopped` and `started` — releases the old voice and attacks a fresh one.
+				const voices = new Map<Note, () => void>();
 				cursor.addEventListener('change', (e) => {
 					setTimeMs(e.timeMs);
 					paint(e.active);
+					// Release stopped notes; attack started ones (only while playing, so seeking/
+					// scrubbing stays silent). Stop before start so a re-strike re-attacks cleanly.
+					for (const n of e.stopped) {
+						voices.get(n)?.();
+						voices.delete(n);
+					}
+					const instrument = instrumentRef.current;
+					if (instrument && playingRef.current) {
+						for (const n of e.started) {
+							const pitch = n.getPitch();
+							if (pitch) {
+								voices.set(n, instrument.play(pitch));
+							}
+						}
+					}
 				});
 				paint(cursor.getActiveNotes());
 				cursorRef.current = cursor;
@@ -415,12 +469,23 @@ export default function App() {
 				const onPointerMove = (e: PointerTargetEvent) => {
 					if (e.native.buttons === 1) {
 						seekTo(e.point);
+						if (!cursor.isFullyVisible()) {
+							cursor.scrollIntoView({ behavior: 'smooth' });
+						}
+					}
+				};
+				// Finishing a scrub-drag: if the cursor landed off-screen, bring it into view (the
+				// playing-gated visibility listener above stays quiet while paused).
+				const onPointerUp = () => {
+					if (!cursor.isFullyVisible()) {
+						cursor.scrollIntoView({ behavior: 'smooth' });
 					}
 				};
 				score.addEventListener('hover', onHover);
 				score.addEventListener('click', onClick);
 				score.addEventListener('pointerdown', onPointerDown);
 				score.addEventListener('pointermove', onPointerMove);
+				score.addEventListener('pointerup', onPointerUp);
 				detach = clearHalo;
 			})
 			.catch((e: unknown) => {
@@ -441,8 +506,8 @@ export default function App() {
 		};
 	}, [input, renderConfig]);
 
-	// Advance the cursor in real time while playing. seekMs drives the bar (and any future audio);
-	// stops itself at the end. ponytail: wall-clock RAF, no audio yet — swap in an audio clock when sound lands.
+	// Advance the cursor in real time while playing. seekMs drives the bar and the synth (the change
+	// handler attacks/releases voices). ponytail: wall-clock RAF, not an audio clock.
 	useEffect(() => {
 		const cursor = cursorRef.current;
 		if (!playing || !cursor) {
@@ -462,20 +527,80 @@ export default function App() {
 			raf = requestAnimationFrame(tick);
 		};
 		raf = requestAnimationFrame(tick);
-		return () => cancelAnimationFrame(raf);
+		// Cut the sounding voices when playback stops (pause, end, or teardown).
+		return () => {
+			cancelAnimationFrame(raf);
+			instrumentRef.current?.stopAll();
+		};
 	}, [playing, durationMs]);
 
-	const togglePlay = () => {
+	// Fit the score's scroll box to the gap between the canvas top and the player controls so the
+	// music fills the space above them and scrolls (page-turns) within it. config.height flows
+	// through the config -> renderConfig effect, which conditionally debounces the re-render
+	// (immediate when the last render was fast) — so a viewport-height resize is debounced there.
+	useEffect(() => {
+		if (!initialized) {
+			return;
+		}
+		const measure = () => {
+			const c = containerRef.current?.getBoundingClientRect();
+			const p = playerRef.current?.getBoundingClientRect();
+			if (!c || !p) {
+				return;
+			}
+			// -16 leaves a little air above the floating controls.
+			const height = Math.max(0, Math.round(p.top - c.top - 16));
+			setConfig((cfg) => ({ ...cfg, height }));
+		};
+		measure();
+		let lastHeight = window.innerHeight;
+		const onResize = () => {
+			// Only the viewport height moves the player controls; ignore width-only resizes.
+			if (window.innerHeight === lastHeight) {
+				return;
+			}
+			lastHeight = window.innerHeight;
+			measure();
+		};
+		window.addEventListener('resize', onResize);
+		return () => window.removeEventListener('resize', onResize);
+	}, [initialized]);
+
+	const togglePlay = useCallback(() => {
 		const cursor = cursorRef.current;
 		if (!cursor) {
 			return;
 		}
 		// Restart from the top if we're parked at the end.
-		if (!playing && cursor.isDone()) {
+		if (!playingRef.current && cursor.isDone()) {
 			cursor.seekMs(0);
 		}
+		// Bring the cursor into view when starting playback (e.g. after scrolling away while paused).
+		if (!playingRef.current && !cursor.isFullyVisible()) {
+			cursor.scrollIntoView({ behavior: 'smooth' });
+		}
 		setPlaying((p) => !p);
-	};
+	}, []);
+	// Spacebar toggles playback, except while typing in the editor.
+	useEffect(() => {
+		const onKeyDown = (e: KeyboardEvent) => {
+			if (e.code !== 'Space') {
+				return;
+			}
+			const el = e.target as HTMLElement;
+			if (
+				el.tagName === 'INPUT' ||
+				el.tagName === 'TEXTAREA' ||
+				el.isContentEditable
+			) {
+				return;
+			}
+			e.preventDefault();
+			togglePlay();
+		};
+		window.addEventListener('keydown', onKeyDown);
+		return () => window.removeEventListener('keydown', onKeyDown);
+	}, [togglePlay]);
 	const stepPrev = () => {
 		setPlaying(false);
 		cursorRef.current?.previous();
@@ -636,13 +761,14 @@ export default function App() {
 					    pane (viewport center shifted right by half the 20rem sidebar). */}
 					{input != null && initialized && (
 						<div
+							ref={playerRef}
 							// Width tracks the sheet-music card (max-w-237.5, centered): full content-pane span
 							// on desktop (left-80 clears the 20rem sidebar), full width minus inset-x-4 padding
 							// on mobile. Rides up with the bottom sheet (bottom-full) on mobile, fixed on desktop.
-							className={`absolute inset-x-4 bottom-full z-30 mx-auto mb-4 flex max-w-237.5 flex-col gap-2 rounded-2xl border px-4 py-2.5 shadow-lg backdrop-blur md:fixed md:inset-x-auto md:bottom-4 md:left-80 md:right-0 md:mb-0 ${dark ? 'border-zinc-700 bg-zinc-800/95' : 'border-zinc-200 bg-white/95'}`}
+							className={`absolute inset-x-4 bottom-full z-30 mx-auto mb-4 flex max-w-237.5 flex-col gap-2 rounded-2xl border px-4 py-2.5 shadow-lg backdrop-blur sm:px-6 md:fixed md:inset-x-auto md:bottom-4 md:left-80 md:right-0 md:mb-0 ${dark ? 'border-zinc-700 bg-zinc-800/95' : 'border-zinc-200 bg-white/95'}`}
 						>
 							{/* Spotify layout: controls centered on top, progress bar flanked by times below. */}
-							<div className="flex items-center justify-center gap-5">
+							<div className="relative flex items-center justify-center gap-5">
 								<button
 									type="button"
 									onClick={stepPrev}
@@ -670,6 +796,15 @@ export default function App() {
 								>
 									<PlayerIcon d={ICON.next} />
 								</button>
+								<button
+									type="button"
+									onClick={() => setMuted((m) => !m)}
+									aria-label={muted ? 'Unmute' : 'Mute'}
+									aria-pressed={muted}
+									className={`absolute right-0 flex size-9 items-center justify-center rounded-md ${dark ? 'text-zinc-400 hover:bg-zinc-700' : 'text-zinc-500 hover:bg-zinc-100'}`}
+								>
+									<PlayerIcon d={muted ? ICON.muted : ICON.volume} />
+								</button>
 							</div>
 							<div className="flex items-center gap-2">
 								<span
diff --git a/site/src/instrument.ts b/site/src/instrument.ts
new file mode 100644
index 000000000..91aa32ebf
--- /dev/null
+++ b/site/src/instrument.ts
@@ -0,0 +1,81 @@
+import { SplendidGrandPiano } from 'smplr';
+
+// A pitched instrument the player drives. Pitches are vexflow keys ("C#/4", "Bb/3").
+// Swap PianoInstrument for another implementation by satisfying this interface.
+export interface Instrument {
+	// Strike a pitch now and return a function that releases that specific voice. Each call is a
+	// fresh attack, so re-struck pitches (and unisons) each get their own voice — the caller keys
+	// the returned releaser by the Note it came from.
+	play(pitch: string): () => void;
+	// One-shot preview: sound a pitch for a fixed duration (e.g. clicking a note).
+	pluck(pitch: string, durationMs: number): void;
+	// Release every sounding voice at once (e.g. on pause).
+	stopAll(): void;
+	// Start fetching samples ahead of the first play so onsets aren't dropped while loading.
+	preload(): void;
+	setMuted(muted: boolean): void;
+}
+
+// smplr's volume scale is MIDI-style (0–127). 100 is a comfortable default.
+const VOLUME = 100;
+
+// vexflow key ("C#/4") → smplr note name ("C#4"). smplr handles enharmonics (Db4) itself.
+const toNote = (pitch: string) => pitch.replace('/', '');
+
+// Sampled grand piano via smplr. Samples stream from smplr's CDN; preload() warms them so notes
+// aren't dropped on the first play. smplr tracks live voices itself — play() returns its stopper
+// and stopAll() releases them all.
+export class PianoInstrument implements Instrument {
+	private ctx: AudioContext | null = null;
+	private piano: ReturnType<typeof SplendidGrandPiano> | null = null;
+	private ready = false;
+	private muted = false;
+
+	// Lazily created on first use so the AudioContext starts inside a user gesture (or on preload).
+	private ensure(): ReturnType<typeof SplendidGrandPiano> | null {
+		if (!this.piano) {
+			const Ctor = window.AudioContext;
+			if (!Ctor) {
+				return null;
+			}
+			this.ctx = new Ctor();
+			this.piano = SplendidGrandPiano(this.ctx);
+			this.piano.output.volume = this.muted ? 0 : VOLUME;
+			this.piano.ready.then(() => {
+				this.ready = true;
+			});
+		}
+		if (this.ctx?.state === 'suspended') {
+			void this.ctx.resume();
+		}
+		return this.piano;
+	}
+
+	play(pitch: string): () => void {
+		const piano = this.ensure();
+		// Before samples load, an onset can't be recovered — drop it (preload() makes this rare).
+		if (!piano || !this.ready) {
+			return () => {};
+		}
+		return piano.start({ note: toNote(pitch) });
+	}
+
+	pluck(pitch: string, durationMs: number): void {
+		this.ensure()?.start({ note: toNote(pitch), duration: durationMs / 1000 });
+	}
+
+	stopAll(): void {
+		this.piano?.stop();
+	}
+
+	preload(): void {
+		this.ensure();
+	}
+
+	setMuted(muted: boolean): void {
+		this.muted = muted;
+		if (this.piano) {
+			this.piano.output.volume = muted ? 0 : VOLUME;
+		}
+	}
+}
diff --git a/src/chord-diagram.ts b/src/chord-diagram.ts
index ddc284ae8..c30ee2dbc 100644
--- a/src/chord-diagram.ts
+++ b/src/chord-diagram.ts
@@ -151,7 +151,12 @@ export class ChordDiagram {
 				spec.title,
 				size,
 			);
-			this.drawnTop = Math.min(topY, originY - topOverhang);
+			// titleText draws the baseline at topY + size*0.73, but a font's real ascent is closer to
+			// a full em, so the cap tops land ~size above the baseline — about 0.27*size ABOVE topY.
+			// Bound the title at that true top so callers reserving space above it (the page crop, the
+			// playback cursor/scroll box) cover those pixels instead of clipping them.
+			const titleTop = topY + size * 0.73 - size;
+			this.drawnTop = Math.min(titleTop, originY - topOverhang);
 		} else {
 			this.drawnTop = originY - topOverhang;
 		}
diff --git a/src/draw.ts b/src/draw.ts
index 6e5588c6f..f3103434f 100644
--- a/src/draw.ts
+++ b/src/draw.ts
@@ -909,6 +909,9 @@ export function drawScore(
 		// final score space once cropTop is known. Only the final pass's arrays are kept.
 		const rawNotes: RawNote[] = [];
 		const rawMeasures: RawMeasure[] = [];
+		// The system each rawMeasure belongs to, parallel to rawMeasures, so the post-pass below can
+		// grow every measure box up to its system's topmost above-stave decoration.
+		const rawMeasureSystem: number[] = [];
 		let systemTopY = layout.top + topSlack;
 		let systemContentBottom = systemTopY;
 		let currentSystem = -1;
@@ -939,6 +942,15 @@ export function drawScore(
 		// top stave — reserved above it on a redraw so it can't clash with the system above.
 		const systemTopByIndex = new Map<number, number>();
 		const systemHighestTop = new Map<number, number>();
+		// The topmost y reached by any above-stave decoration (chord diagram, chord symbol, words) in
+		// a system. Measure boxes grow up to this so the playback cursor/scroll cover those extras
+		// instead of clipping them; tracked per system so the cursor bar's height stays uniform.
+		const systemDecorationTop = new Map<number, number>();
+		const growDecorationTop = (system: number, top: number) =>
+			systemDecorationTop.set(
+				system,
+				Math.min(systemDecorationTop.get(system) ?? Infinity, top),
+			);
 		for (let m = 0; m < measureCount; m++) {
 			const box = boxes[m];
 			if (!box) {
@@ -1405,6 +1417,7 @@ export function drawScore(
 					index: m,
 					number: parts[0]?.measures[m]?.number ?? String(m + 1),
 				});
+				rawMeasureSystem.push(systemIndex);
 			}
 
 			if (noteExtent.top < Infinity) {
@@ -1422,10 +1435,16 @@ export function drawScore(
 			// Words go before the diagrams so a chord diagram draws on top of any words it
 			// shares a measure with — the fret box stays fully legible, the text yields.
 			for (const w of wordsTasks) {
-				pageTop = Math.min(
-					pageTop,
-					drawWords(context, w.stave, w.text, w.firstNote, labelFont, detector),
+				const top = drawWords(
+					context,
+					w.stave,
+					w.text,
+					w.firstNote,
+					labelFont,
+					detector,
 				);
+				pageTop = Math.min(pageTop, top);
+				growDecorationTop(systemIndex, top);
 			}
 			// 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
@@ -1499,6 +1518,7 @@ export function drawScore(
 					});
 					diagram.draw(context, { ...h.frame, title: h.text || undefined });
 					pageTop = Math.min(pageTop, diagram.top);
+					growDecorationTop(systemIndex, diagram.top);
 					// The diagram rises above the stave, so it also counts toward this system's
 					// upward overflow — otherwise no systemSpacing is reserved for it and a
 					// diagram on a stacked system collides with the system above.
@@ -1510,10 +1530,15 @@ export function drawScore(
 						),
 					);
 				} else {
-					pageTop = Math.min(
-						pageTop,
-						drawHarmony(context, h.staveNote, h.text, labelFont, detector),
+					const top = drawHarmony(
+						context,
+						h.staveNote,
+						h.text,
+						labelFont,
+						detector,
 					);
+					pageTop = Math.min(pageTop, top);
+					growDecorationTop(systemIndex, top);
 				}
 			}
 
@@ -1560,6 +1585,20 @@ export function drawScore(
 		// for clipped content here.
 		warnEscapes();
 
+		// Grow each measure box up to the topmost above-stave decoration (chord diagram, chord
+		// symbol, words) in its system, so the measure's bounding box — and the playback cursor and
+		// auto-scroll that ride on it — cover those extras instead of clipping them.
+		for (const [i, measure] of rawMeasures.entries()) {
+			const top = systemDecorationTop.get(rawMeasureSystem[i] ?? -1);
+			const { rect } = measure;
+			if (top !== undefined && top < rect.y) {
+				rawMeasures[i] = {
+					...measure,
+					rect: new Rect(rect.x, top, rect.w, rect.bottom - top),
+				};
+			}
+		}
+
 		// 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
 		// measures). Drawn last, on top of the notes.
diff --git a/src/stage.test.ts b/src/stage.test.ts
index 641690183..3266466fd 100644
--- a/src/stage.test.ts
+++ b/src/stage.test.ts
@@ -1,45 +1,74 @@
 import { expect, test } from 'bun:test';
-import { scrollOffsetFor } from './stage';
+import { Stage, scrollOffsetFor } from './stage';
 
 // Both boxes are in the container's scroll-content coordinates; view = the current scroll window.
 const VIEW = { left: 0, top: 0, right: 100, bottom: 100 };
 
-test('scrollOffsetFor: a fully visible target leaves both axes where they are', () => {
+test('scrollOffsetFor: x stays put when visible, y pins the target top to the viewport top', () => {
 	const offset = scrollOffsetFor(
 		{ left: 50, top: 50, right: 60, bottom: 60 },
 		VIEW,
 	);
-	expect(offset).toEqual({ left: 0, top: 0 });
+	expect(offset).toEqual({ left: 0, top: 50 });
 });
 
-test('scrollOffsetFor: off-screen right scrolls x only, far edge into view', () => {
+test('scrollOffsetFor: off-screen right scrolls x to show the far edge, y pins to target top', () => {
 	const offset = scrollOffsetFor(
 		{ left: 150, top: 10, right: 160, bottom: 20 },
 		VIEW,
 	);
-	expect(offset).toEqual({ left: 60, top: 0 }); // 0 + (160 - 100)
+	expect(offset).toEqual({ left: 60, top: 10 }); // x: 0 + (160 - 100)
 });
 
-test('scrollOffsetFor: off-screen left scrolls x only, near edge into view', () => {
+test('scrollOffsetFor: off-screen left scrolls x to the near edge, y pins to target top', () => {
 	const offset = scrollOffsetFor(
 		{ left: 20, top: 10, right: 30, bottom: 20 },
 		{ left: 50, top: 0, right: 150, bottom: 100 },
 	);
-	expect(offset).toEqual({ left: 20, top: 0 });
+	expect(offset).toEqual({ left: 20, top: 10 });
 });
 
-test('scrollOffsetFor: off-screen below scrolls y only', () => {
+test('scrollOffsetFor: y always pins the target top, regardless of how far down', () => {
 	const offset = scrollOffsetFor(
 		{ left: 10, top: 200, right: 20, bottom: 210 },
 		VIEW,
 	);
-	expect(offset).toEqual({ left: 0, top: 110 }); // 0 + (210 - 100)
+	expect(offset).toEqual({ left: 0, top: 200 });
 });
 
-test('scrollOffsetFor: off-screen on both axes scrolls both (panoramic + tall)', () => {
-	const offset = scrollOffsetFor(
-		{ left: 150, top: 200, right: 160, bottom: 210 },
-		VIEW,
-	);
-	expect(offset).toEqual({ left: 60, top: 110 });
+// Drives Stage.scrollIntoView's smooth-scroll conflation against a stub container — no DOM needed.
+// Object.create skips the DOM-heavy constructor; smoothScrollTo only touches container.scrollTo.
+const stubStage = () => {
+	const calls: ScrollToOptions[] = [];
+	const stage = Object.create(Stage.prototype) as {
+		container: { scrollTo: (o: ScrollToOptions) => void };
+		smoothScrollTo: (
+			o: { left: number; top: number },
+			b: ScrollBehavior,
+		) => void;
+	};
+	stage.container = { scrollTo: (o: ScrollToOptions) => calls.push(o) };
+	const scroll = (left: number) =>
+		stage.smoothScrollTo({ left, top: 0 }, 'smooth');
+	return { calls, scroll };
+};
+
+test('smooth scroll: the first request fires immediately, concurrent ones are conflated', () => {
+	const { calls, scroll } = stubStage();
+	scroll(10);
+	scroll(20);
+	scroll(30);
+	expect(calls).toEqual([{ left: 10, top: 0, behavior: 'smooth' }]);
+});
+
+test('smooth scroll: the latest conflated request flushes once the settle window elapses', async () => {
+	const { calls, scroll } = stubStage();
+	scroll(10);
+	scroll(20);
+	scroll(30);
+	await new Promise((r) => setTimeout(r, 600));
+	expect(calls).toEqual([
+		{ left: 10, top: 0, behavior: 'smooth' },
+		{ left: 30, top: 0, behavior: 'smooth' },
+	]);
 });
diff --git a/src/stage.ts b/src/stage.ts
index 7f64a8158..de16f9f3e 100644
--- a/src/stage.ts
+++ b/src/stage.ts
@@ -130,6 +130,13 @@ export class Stage implements Viewport, Host {
 	// Inline styles this stage set on the container, with their prior values, restored on dispose.
 	private readonly restoreStyles: Array<[string, string]> = [];
 	private readonly layers = new Set<ManagedLayer>();
+	// While a smooth/auto scroll is animating, conflate further requests: hold the timer and remember
+	// only the latest target, then flush it once the animation has had time to settle.
+	private smoothScrollTimer: ReturnType<typeof setTimeout> | null = null;
+	private pendingSmoothScroll: {
+		offset: { left: number; top: number };
+		behavior: ScrollBehavior;
+	} | null = null;
 
 	constructor(
 		private readonly container: HTMLDivElement,
@@ -234,7 +241,34 @@ export class Stage implements Viewport, Host {
 			bottom: this.container.scrollTop + this.container.clientHeight,
 		};
 		const offset = scrollOffsetFor(target, view);
-		this.container.scrollTo({ ...offset, behavior: opts?.behavior });
+		const behavior = opts?.behavior;
+		if (behavior === 'smooth' || behavior === 'auto') {
+			this.smoothScrollTo(offset, behavior);
+		} else {
+			this.container.scrollTo({ ...offset, behavior });
+		}
+	}
+
+	// Issue a smooth/auto scroll, conflating any calls that arrive while one is animating: keep only
+	// the latest target and apply it once the settle window elapses, so a stream of follow() calls
+	// doesn't restart the animation on every step.
+	private smoothScrollTo(
+		offset: { left: number; top: number },
+		behavior: ScrollBehavior,
+	): void {
+		if (this.smoothScrollTimer) {
+			this.pendingSmoothScroll = { offset, behavior };
+			return;
+		}
+		this.container.scrollTo({ ...offset, behavior });
+		this.smoothScrollTimer = setTimeout(() => {
+			this.smoothScrollTimer = null;
+			const pending = this.pendingSmoothScroll;
+			this.pendingSmoothScroll = null;
+			if (pending) {
+				this.smoothScrollTo(pending.offset, pending.behavior);
+			}
+		}, SMOOTH_SCROLL_SETTLE_MS);
 	}
 
 	observeResize(
@@ -307,6 +341,10 @@ export class Stage implements Viewport, Host {
 	}
 
 	dispose(): void {
+		if (this.smoothScrollTimer) {
+			clearTimeout(this.smoothScrollTimer);
+			this.smoothScrollTimer = null;
+		}
 		for (const layer of [...this.layers]) {
 			layer.dispose();
 		}
@@ -374,14 +412,20 @@ export class Stage implements Viewport, Host {
 	}
 }
 
+// How long a smooth scroll is assumed to take; requests within this window are conflated. Browsers
+// don't expose the animation's end, so this is a fixed estimate. ponytail: fixed window, swap for a
+// scrollend listener if the guess proves wrong.
+const SMOOTH_SCROLL_SETTLE_MS = 500;
+
 type Box = { left: number; top: number; right: number; bottom: number };
 
 /*
  * The scroll offset that brings `target` into `view`, both in the container's scroll-content
- * coordinates. Each axis independently: if the target's near edge is off the near side, align to it;
- * if its far edge is off the far side, scroll just enough to show it; otherwise leave that axis where
- * it is. So scrolling a horizontally-off-screen bar in a panoramic score never disturbs the vertical
- * position, and vice versa. Pure — the DOM application lives in Stage.scrollIntoView.
+ * coordinates. Horizontal is minimal: if the target's near edge is off the near side, align to it; if
+ * its far edge is off the far side, scroll just enough to show it; otherwise leave it. So scrolling a
+ * horizontally-off-screen bar in a panoramic score never disturbs the vertical position. Vertical
+ * pins the target's top to the viewport top (scrollTo clamps to the max scroll height near the end of
+ * the content). Pure — the DOM application lives in Stage.scrollIntoView.
  */
 export function scrollOffsetFor(
 	target: Box,
@@ -398,6 +442,6 @@ export function scrollOffsetFor(
 	};
 	return {
 		left: axis(target.left, target.right, view.left, view.right),
-		top: axis(target.top, target.bottom, view.top, view.bottom),
+		top: target.top,
 	};
 }
diff --git a/tests/integration/__screenshots__/chord_diagram.png b/tests/integration/__screenshots__/chord_diagram.png
index 84750bf5d7467f7769d01892a662ceedda493110..82feab99b2d5fd7ee2408f998a8f7a24ff90c782 100644
GIT binary patch
literal 36659
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
RR{R%=zDG+fQ`P+9e*vOxqSycc

literal 36296
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
O)YbOy&faBt;XeS3=}|iX

diff --git a/tests/integration/__screenshots__/chord_diagram_adjacent.png b/tests/integration/__screenshots__/chord_diagram_adjacent.png
index ccfbe60e7089be6687a3da75199dfd28b4ee514a..6baa7fa3d177b8502a97cae43ec51ff403905206 100644
GIT binary patch
literal 6226
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
Jm)x{`@*i)4hfx3k

literal 6212
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

diff --git a/tests/integration/__screenshots__/chord_diagram_edge.png b/tests/integration/__screenshots__/chord_diagram_edge.png
index cf134eed7f24df2617665e9608238b01a0c5fa81..37d39ed710fbb85646ae28293623c2c225b90d88 100644
GIT binary patch
literal 5590
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

literal 5576
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