From d7e26a3338684c93d04d56299606338520cc1e8f Mon Sep 17 00:00:00 2001
From: Stan Runge <stan@stanrunge.dev>
Date: Mon, 26 Oct 2026 12:22:38 +0000
Subject: [PATCH] math tracker: pannable 2D map of the Napkin (default), list
 view kept behind ?view=list

Chapters are nodes grouped into part regions laid out like the book's dependency chart
(roots Abs Alg, Topology, Lin Alg, Set Theory flowing down to AG, AT and ANT). Part
prereqs are routed edges, optional ones (\coreqc in the book) dotted. Status colours,
exercise rings, current-chapter glow, legend, search, minimap, pinch/drag/wheel zoom,
fit and +/- buttons. Tapping a chapter opens the existing panel (side panel on desktop,
bottom sheet on mobile). The view choice is remembered per device.
---
 src/lib/napkin/MathMap.svelte         | 1331 +++++++++++++++++++++++++
 src/lib/napkin/map.test.ts            |  124 +++
 src/lib/napkin/map.ts                 |  303 ++++++
 src/routes/trackers/math/+page.svelte |  254 +++--
 4 files changed, 1951 insertions(+), 61 deletions(-)
 create mode 100644 src/lib/napkin/MathMap.svelte
 create mode 100644 src/lib/napkin/map.test.ts
 create mode 100644 src/lib/napkin/map.ts

diff --git a/src/lib/napkin/MathMap.svelte b/src/lib/napkin/MathMap.svelte
new file mode 100644
index 0000000..2750924
--- /dev/null
+++ b/src/lib/napkin/MathMap.svelte
@@ -0,0 +1,1331 @@
+<script lang="ts" module>
+	import type { MathStatus } from '#lib/math.js';
+	import type Circle from 'lucide-svelte/icons/circle';
+
+	export type MapChapter = {
+		key: string;
+		partKey: string;
+		title: string;
+		exerciseCount: number | null;
+		exercisesDone: number;
+		prereqs: string[];
+	};
+	export type MapPart = { key: string; num: number | null; title: string };
+	export type StatusStyle = Record<MathStatus, { color: string; icon: typeof Circle }>;
+</script>
+
+<script lang="ts">
+	import { onMount, type Snippet } from 'svelte';
+	import type { Attachment } from 'svelte/attachments';
+	import { STATUS_LABEL } from '#lib/math.js';
+	import { buildMapLayout, PART_ACCENT, PART_LINKS, type MapRegion } from './map';
+	import Plus from 'lucide-svelte/icons/plus';
+	import Minus from 'lucide-svelte/icons/minus';
+	import Maximize from 'lucide-svelte/icons/maximize';
+	import Target from 'lucide-svelte/icons/target';
+	import Search from 'lucide-svelte/icons/search';
+	import X from 'lucide-svelte/icons/x';
+
+	let {
+		parts,
+		chapters,
+		statusOf,
+		status,
+		currentKey = null,
+		filter = 'all',
+		selected = $bindable(null),
+		panel
+	}: {
+		parts: MapPart[];
+		chapters: MapChapter[];
+		statusOf: (c: MapChapter) => MathStatus;
+		status: StatusStyle;
+		currentKey?: string | null;
+		filter?: MathStatus | 'all';
+		selected?: string | null;
+		panel: Snippet<[string]>;
+	} = $props();
+
+	const layout = $derived(
+		buildMapLayout(
+			parts.map((p) => ({
+				key: p.key,
+				chapters: chapters.filter((c) => c.partKey === p.key).map((c) => c.key)
+			}))
+		)
+	);
+	const chapterByKey = $derived(new Map(chapters.map((c) => [c.key, c])));
+	const partByKey = $derived(new Map(parts.map((p) => [p.key, p])));
+	const nodeByKey = $derived(new Map(layout.nodes.map((n) => [n.key, n])));
+	const regionByKey = $derived(new Map(layout.regions.map((r) => [r.key, r])));
+
+	// View transform: screen = world * k + (tx, ty).
+	let k = $state(0.5);
+	let tx = $state(0);
+	let ty = $state(0);
+	let cw = $state(0);
+	let ch = $state(0);
+	let ready = $state(false);
+	let svg: SVGSVGElement | undefined = $state();
+
+	const MIN_K = 0.08;
+	const MAX_K = 2.5;
+	const PAD = 40;
+	const clampK = (v: number) => Math.min(MAX_K, Math.max(MIN_K, v));
+	const far = $derived(k < 0.42);
+	const mobile = $derived(cw > 0 && cw < 720);
+	/** Screen space the panel covers, so focusing a node keeps it visible next to the panel. */
+	const panelInset = $derived(
+		selected
+			? mobile
+				? { right: 0, bottom: ch * 0.55 }
+				: { right: 380, bottom: 0 }
+			: { right: 0, bottom: 0 }
+	);
+
+	let anim = 0;
+	function animateTo(nk: number, ntx: number, nty: number, ms = 320) {
+		cancelAnimationFrame(anim);
+		if (matchMedia('(prefers-reduced-motion: reduce)').matches) ms = 0;
+		const [k0, x0, y0] = [k, tx, ty];
+		const t0 = performance.now();
+		const step = (t: number) => {
+			const p = ms ? Math.min(1, (t - t0) / ms) : 1;
+			const e = 1 - Math.pow(1 - p, 3);
+			k = k0 + (nk - k0) * e;
+			tx = x0 + (ntx - x0) * e;
+			ty = y0 + (nty - y0) * e;
+			if (p < 1) anim = requestAnimationFrame(step);
+		};
+		anim = requestAnimationFrame(step);
+	}
+	/** Fit a world-space box into the visible part of the map. */
+	function fitBox(x: number, y: number, w: number, h: number, maxK = MAX_K, animate = true) {
+		const vw = cw - panelInset.right;
+		const vh = ch - panelInset.bottom;
+		if (vw <= 0 || vh <= 0) return;
+		const nk = clampK(Math.min((vw - PAD * 2) / w, (vh - PAD * 2) / h, maxK));
+		const ntx = (vw - w * nk) / 2 - x * nk;
+		const nty = (vh - h * nk) / 2 - y * nk;
+		if (animate) animateTo(nk, ntx, nty);
+		else [k, tx, ty] = [nk, ntx, nty];
+	}
+	export function fit(animate = true) {
+		fitBox(0, 0, layout.width, layout.height, 1, animate);
+	}
+	function fitRegion(r: MapRegion) {
+		fitBox(r.x - 40, r.y - 40, r.w + 80, r.h + 80, 1.3);
+	}
+	/** Centre a chapter (at a readable zoom) and open its panel. */
+	export function focusChapter(key: string, open = true) {
+		const n = nodeByKey.get(key);
+		if (!n) return;
+		if (open) selected = key;
+		const nk = Math.min(Math.max(k, mobile ? 0.8 : 0.95), mobile ? 1 : 1.3);
+		// Wait a frame so the panel is laid out, then centre in what is actually visible
+		// (beside the side panel, above the bottom sheet, inside the viewport).
+		requestAnimationFrame(() => {
+			const v = visibleBox();
+			animateTo(nk, v.x - (n.x + n.w / 2) * nk, v.y - (n.y + n.h / 2) * nk);
+		});
+	}
+	/** Centre of the unobstructed part of the map, in map-local screen px. */
+	function visibleBox() {
+		if (!svg) return { x: cw / 2, y: ch / 2 };
+		const r = svg.getBoundingClientRect();
+		let right = r.width;
+		let bottom = Math.min(r.height, innerHeight - r.top);
+		const top = Math.max(0, -r.top) + 48;
+		// Sizes, not rects: the panel may still be mid slide-in.
+		const panelEl = svg.parentElement?.querySelector<HTMLElement>('.panel');
+		if (panelEl) {
+			if (mobile) bottom = Math.min(bottom, innerHeight - panelEl.offsetHeight - r.top);
+			else right = Math.min(right, r.width - panelEl.offsetWidth);
+		}
+		return { x: right / 2, y: bottom > top + 40 ? (top + bottom) / 2 : ch / 2 };
+	}
+	function zoomAt(px: number, py: number, factor: number, animate = false) {
+		const nk = clampK(k * factor);
+		const ntx = px - ((px - tx) / k) * nk;
+		const nty = py - ((py - ty) / k) * nk;
+		if (animate) animateTo(nk, ntx, nty, 180);
+		else [k, tx, ty] = [nk, ntx, nty];
+	}
+	const zoomBy = (f: number) =>
+		zoomAt((cw - panelInset.right) / 2, (ch - panelInset.bottom) / 2, f, true);
+
+	/** Start readable: fit the width (within limits), roots at the top, the current chapter in view. */
+	function initialView() {
+		const nk = clampK(Math.min(1, Math.max(cw < 720 ? 0.55 : 0.45, (cw - PAD * 2) / layout.width)));
+		if (layout.width * nk + PAD * 2 <= cw && layout.height * nk + PAD * 2 <= ch) return fit(false);
+		let ntx = (cw - layout.width * nk) / 2;
+		let nty = PAD;
+		const n = currentKey ? nodeByKey.get(currentKey) : undefined;
+		if (n) {
+			const cx = n.x + n.w / 2;
+			const cy = n.y + n.h / 2;
+			if (cx * nk + ntx < PAD || cx * nk + ntx > cw - PAD) ntx = cw / 2 - cx * nk;
+			if (cy * nk + nty > ch * 0.7)
+				nty = Math.max(ch * 0.4 - cy * nk, ch - PAD - layout.height * nk);
+		}
+		[k, tx, ty] = [nk, ntx, nty];
+	}
+
+	onMount(() => {
+		initialView();
+		ready = true;
+	});
+
+	// Pointer gestures: one pointer pans, two pinch-zoom, a tap selects.
+	// Plain Map on purpose: gesture bookkeeping, nothing renders from it.
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const pointers = new Map<number, { x: number; y: number }>();
+	let moved = 0;
+	let downKey: string | null = null;
+	let downRegion: string | null = null;
+	let pinch: { d: number; mx: number; my: number } | null = null;
+	const local = (e: PointerEvent | WheelEvent | MouseEvent) => {
+		const r = svg!.getBoundingClientRect();
+		return { x: e.clientX - r.left, y: e.clientY - r.top };
+	};
+	function pinchState() {
+		const [a, b] = [...pointers.values()];
+		return { d: Math.hypot(a.x - b.x, a.y - b.y), mx: (a.x + b.x) / 2, my: (a.y + b.y) / 2 };
+	}
+	function onpointerdown(e: PointerEvent) {
+		if (e.button !== 0 && e.pointerType === 'mouse') return;
+		cancelAnimationFrame(anim);
+		svg!.setPointerCapture(e.pointerId);
+		pointers.set(e.pointerId, local(e));
+		if (pointers.size === 1) {
+			moved = 0;
+			const t = e.target as Element;
+			downKey = t.closest('[data-key]')?.getAttribute('data-key') ?? null;
+			downRegion = t.closest('[data-region]')?.getAttribute('data-region') ?? null;
+		} else if (pointers.size === 2) {
+			pinch = pinchState();
+			moved = 99;
+		}
+	}
+	function onpointermove(e: PointerEvent) {
+		const prev = pointers.get(e.pointerId);
+		if (!prev) return;
+		const p = local(e);
+		pointers.set(e.pointerId, p);
+		if (pointers.size === 1) {
+			const dx = p.x - prev.x;
+			const dy = p.y - prev.y;
+			moved += Math.abs(dx) + Math.abs(dy);
+			if (moved > 6) {
+				tx += dx;
+				ty += dy;
+			}
+		} else if (pointers.size === 2 && pinch) {
+			const next = pinchState();
+			tx += next.mx - pinch.mx;
+			ty += next.my - pinch.my;
+			if (pinch.d > 0) zoomAt(next.mx, next.my, next.d / pinch.d);
+			pinch = next;
+		}
+	}
+	function onpointerup(e: PointerEvent) {
+		if (!pointers.has(e.pointerId)) return;
+		pointers.delete(e.pointerId);
+		if (pointers.size < 2) pinch = null;
+		if (pointers.size === 0 && moved <= 6 && e.type === 'pointerup') {
+			const tapped = downKey ? chapterByKey.get(downKey) : undefined;
+			if (tapped && !far) {
+				selected = selected === tapped.key ? null : tapped.key;
+			} else if (downRegion && !far && selected) {
+				selected = null;
+			} else if (tapped || downRegion) {
+				const r = regionByKey.get(tapped?.partKey ?? downRegion ?? '');
+				if (r) fitRegion(r);
+			} else selected = null;
+		}
+		if (pointers.size === 1) moved = 99;
+	}
+	function ondblclick(e: MouseEvent) {
+		const p = local(e);
+		zoomAt(p.x, p.y, 1.8, true);
+	}
+	function onkeydown(e: KeyboardEvent) {
+		if ((e.target as HTMLElement).closest('input, textarea, button, .panel')) return;
+		const step = 80;
+		const actions: Record<string, () => void> = {
+			'+': () => zoomBy(1.3),
+			'=': () => zoomBy(1.3),
+			'-': () => zoomBy(1 / 1.3),
+			'0': () => fit(),
+			ArrowLeft: () => animateTo(k, tx + step, ty, 120),
+			ArrowRight: () => animateTo(k, tx - step, ty, 120),
+			ArrowUp: () => animateTo(k, tx, ty + step, 120),
+			ArrowDown: () => animateTo(k, tx, ty - step, 120),
+			Escape: () => (selected = null)
+		};
+		const act = actions[e.key];
+		if (act) {
+			e.preventDefault();
+			act();
+		}
+	}
+	// Wheel zooms around the cursor; non-passive so the page does not scroll underneath.
+	const wheelZoom: Attachment<SVGSVGElement> = (el) => {
+		const wheel = (e: WheelEvent) => {
+			e.preventDefault();
+			cancelAnimationFrame(anim);
+			const p = local(e);
+			const unit = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? 400 : 1;
+			zoomAt(p.x, p.y, Math.exp(-e.deltaY * unit * (e.ctrlKey ? 0.01 : 0.0016)));
+		};
+		el.addEventListener('wheel', wheel, { passive: false });
+		return () => el.removeEventListener('wheel', wheel);
+	};
+	function onpanelkey(e: KeyboardEvent) {
+		if (e.key === 'Escape') selected = null;
+	}
+
+	// Derived state for drawing.
+	const statusByKey = $derived(new Map(chapters.map((c) => [c.key, statusOf(c)])));
+	const regionStats = $derived(
+		new Map(
+			layout.regions.map((r) => {
+				const list = chapters.filter((c) => c.partKey === r.key);
+				let done = 0;
+				let active = 0;
+				let skipped = 0;
+				for (const c of list) {
+					const s = statusByKey.get(c.key);
+					if (s === 'done') done++;
+					else if (s === 'skipped') skipped++;
+					else if (s === 'reading' || s === 'exercises') active++;
+				}
+				return [
+					r.key,
+					{ total: list.length, done, active, skipped, complete: done + skipped === list.length }
+				];
+			})
+		)
+	);
+	const selectedPart = $derived(selected ? (chapterByKey.get(selected)?.partKey ?? null) : null);
+	let hoverPart = $state<string | null>(null);
+	const focusPart = $derived(selectedPart ?? hoverPart);
+	const selectedPrereqs = $derived(
+		new Set(selected ? (chapterByKey.get(selected)?.prereqs ?? []) : [])
+	);
+
+	const chLabel = (key: string) => (/^\d+$/.test(key) ? `Ch ${key}` : `App ${key}`);
+	/** Short region name for the zoomed-out view: "Set Theory I: ZFC, …" → "Set Theory I". */
+	const farName = (p: MapPart | undefined) => partShort(p).split(':')[0].replace(/^Alg /, 'Alg. ');
+	const trunc = (s: string, n: number) => (s.length > n ? s.slice(0, n - 1).trimEnd() + '…' : s);
+	const partShort = (p: MapPart | undefined) =>
+		p ? p.title.replace(/^Algebraic /, 'Alg ').replace(/ \(TO DO\)$/, '') : '';
+	const ringLen = (c: MapChapter, s: MathStatus) =>
+		c.exerciseCount ? Math.min(1, c.exercisesDone / c.exerciseCount) : s === 'done' ? 1 : 0;
+	const R = 10;
+	const CIRC = 2 * Math.PI * R;
+
+	// Search: jump to a chapter by number or title.
+	let query = $state('');
+	let searchOpen = $state(false);
+	let active = $state(0);
+	const results = $derived.by(() => {
+		const q = query
+			.trim()
+			.toLowerCase()
+			.replace(/^(ch|chapter|app)\.?\s*/, '');
+		if (!q) return [];
+		const exact = chapters.filter((c) => c.key.toLowerCase() === q);
+		const rest = chapters.filter(
+			(c) => c.key.toLowerCase() !== q && c.title.toLowerCase().includes(q)
+		);
+		return [...exact, ...rest].slice(0, 8);
+	});
+	function pick(key: string) {
+		query = '';
+		searchOpen = false;
+		focusChapter(key);
+	}
+	function onsearchkey(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			active = Math.min(active + 1, results.length - 1);
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			active = Math.max(active - 1, 0);
+		} else if (e.key === 'Enter' && results[active]) {
+			e.preventDefault();
+			pick(results[active].key);
+			(e.target as HTMLInputElement).blur();
+		} else if (e.key === 'Escape') {
+			query = '';
+			(e.target as HTMLInputElement).blur();
+		}
+	}
+
+	// Minimap (desktop): drag to move the view.
+	const MINI_W = 170;
+	const miniScale = $derived(MINI_W / layout.width);
+	let miniDrag = false;
+	/** The visible world rect, clipped to the map. */
+	const miniView = $derived.by(() => {
+		const x0 = Math.max(0, -tx / k);
+		const y0 = Math.max(0, -ty / k);
+		const x1 = Math.min(layout.width, (cw - tx) / k);
+		const y1 = Math.min(layout.height, (ch - ty) / k);
+		return { x: x0, y: y0, w: Math.max(0, x1 - x0), h: Math.max(0, y1 - y0) };
+	});
+	function miniMove(e: PointerEvent) {
+		const r = (e.currentTarget as SVGElement).getBoundingClientRect();
+		const wx = (e.clientX - r.left) / miniScale;
+		const wy = (e.clientY - r.top) / miniScale;
+		cancelAnimationFrame(anim);
+		tx = (cw - panelInset.right) / 2 - wx * k;
+		ty = (ch - panelInset.bottom) / 2 - wy * k;
+	}
+	const sel = $derived(selected ? chapterByKey.get(selected) : undefined);
+</script>
+
+<div class={['map', { far, ready, open: !!selected }]} bind:clientWidth={cw} bind:clientHeight={ch}>
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+	<svg
+		bind:this={svg}
+		{@attach wheelZoom}
+		class="canvas"
+		role="application"
+		aria-label="Map of the Napkin: drag to pan, pinch or scroll to zoom, tap a chapter to open it"
+		tabindex="0"
+		{onpointerdown}
+		{onpointermove}
+		{onpointerup}
+		onpointercancel={onpointerup}
+		{ondblclick}
+		{onkeydown}
+	>
+		<defs>
+			<marker
+				id="napkin-arrow"
+				viewBox="0 0 10 10"
+				refX="9"
+				refY="5"
+				markerWidth="7"
+				markerHeight="7"
+				orient="auto-start-reverse"
+			>
+				<path d="M0,1 L9,5 L0,9 z" class="arrow" />
+			</marker>
+			<marker
+				id="napkin-arrow-hi"
+				viewBox="0 0 10 10"
+				refX="9"
+				refY="5"
+				markerWidth="7"
+				markerHeight="7"
+				orient="auto-start-reverse"
+			>
+				<path d="M0,1 L9,5 L0,9 z" class="arrow hi" />
+			</marker>
+		</defs>
+		<g style:transform="translate({tx}px, {ty}px) scale({k})" class="world">
+			<g class="edges">
+				{#each layout.edges as e (e.id)}
+					{@const hi = focusPart !== null && (e.from === focusPart || e.to === focusPart)}
+					<path
+						d={e.d}
+						class={[
+							'edge',
+							{
+								optional: e.optional,
+								hi,
+								dim: focusPart !== null && !hi,
+								met: regionStats.get(e.from)?.complete
+							}
+						]}
+						marker-end={hi ? 'url(#napkin-arrow-hi)' : 'url(#napkin-arrow)'}
+					/>
+				{/each}
+			</g>
+			{#each layout.regions as r (r.key)}
+				{@const p = partByKey.get(r.key)}
+				{@const st = regionStats.get(r.key)}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<g
+					class={['region', { focus: focusPart === r.key }]}
+					data-region={r.key}
+					style:--accent={PART_ACCENT[r.key] ?? '#a1a1aa'}
+					onpointerenter={() => (hoverPart = r.key)}
+					onpointerleave={() => (hoverPart = hoverPart === r.key ? null : hoverPart)}
+				>
+					<rect class="rbg" x={r.x} y={r.y} width={r.w} height={r.h} rx="16" />
+					<rect
+						class="badge"
+						x={r.x + 12}
+						y={r.y + 12}
+						width={p?.num === null ? 30 : 26}
+						height="20"
+						rx="6"
+					/>
+					<text class="bnum" x={r.x + 12 + (p?.num === null ? 15 : 13)} y={r.y + 26.5}
+						>{p?.num ?? 'A–E'}</text
+					>
+					<text class="rtitle" x={r.x + (p?.num === null ? 50 : 46)} y={r.y + 27}
+						>{trunc(partShort(p), 22)}</text
+					>
+					{#if st}
+						<text class="rcount" x={r.x + r.w - 12} y={r.y + 27}>{st.done}/{st.total}</text>
+						<rect class="rtrack" x={r.x + 12} y={r.y + 37} width={r.w - 24} height="3" rx="1.5" />
+						{#if st.done}<rect
+								class="rdone"
+								x={r.x + 12}
+								y={r.y + 37}
+								width={((r.w - 24) * st.done) / st.total}
+								height="3"
+								rx="1.5"
+							/>{/if}
+					{/if}
+				</g>
+			{/each}
+			<g class="nodes">
+				{#each layout.nodes as n (n.key)}
+					{@const c = chapterByKey.get(n.key)}
+					{#if c}
+						{@const s = statusByKey.get(n.key) ?? 'not_started'}
+						{@const Icon = status[s].icon}
+						<g
+							class={[
+								'node',
+								s,
+								{
+									current: currentKey === n.key,
+									selected: selected === n.key,
+									pre: selectedPrereqs.has(n.key),
+									dim: filter !== 'all' && filter !== s
+								}
+							]}
+							data-key={n.key}
+							style:--c={status[s].color}
+							transform="translate({n.x},{n.y})"
+						>
+							<title
+								>{chLabel(c.key)}: {c.title} ({STATUS_LABEL[s]}{c.exerciseCount
+									? `, ${c.exercisesDone}/${c.exerciseCount} exercises`
+									: ''})</title
+							>
+							{#if currentKey === n.key}<rect
+									class="glow"
+									x="-4"
+									y="-4"
+									width={n.w + 8}
+									height={n.h + 8}
+									rx="12"
+								/>{/if}
+							<rect class="nbg" width={n.w} height={n.h} rx="9" />
+							<circle class="track" cx="18" cy={n.h / 2} r={R} />
+							{#if ringLen(c, s) > 0}
+								<circle
+									class="ring"
+									cx="18"
+									cy={n.h / 2}
+									r={R}
+									stroke-dasharray="{ringLen(c, s) * CIRC} {CIRC}"
+									transform="rotate(-90 18 {n.h / 2})"
+								/>
+							{/if}
+							<text class="nkey" x="18" y={n.h / 2 + 3.5}>{c.key}</text>
+							<text class="ntitle" x="36" y={n.h / 2 + 4.2}>{trunc(c.title, 25)}</text>
+							{#if s !== 'not_started'}
+								<Icon
+									x={n.w - 22}
+									y={n.h / 2 - 7}
+									size={14}
+									strokeWidth={2.25}
+									class="nicon"
+									aria-hidden="true"
+								/>
+							{/if}
+						</g>
+					{/if}
+				{/each}
+			</g>
+			{#if far}
+				<g class="labels" aria-hidden="true">
+					{#each layout.regions as r (r.key)}
+						{@const p = partByKey.get(r.key)}
+						{@const st = regionStats.get(r.key)}
+						<g class="rlabel" data-region={r.key}>
+							<text
+								x={r.x + r.w / 2}
+								y={r.y + r.h / 2}
+								style:font-size="{Math.min(12.5 / k, 60)}px"
+							>
+								{trunc(farName(p), Math.max(6, Math.floor(((r.w + 80) * k) / 6.6)))}
+							</text>
+							{#if st && (r.w + 80) * k > 60}
+								<text
+									class="sub"
+									x={r.x + r.w / 2}
+									y={r.y + r.h / 2 + Math.min(17 / k, 72)}
+									style:font-size="{Math.min(11 / k, 48)}px"
+								>
+									{p?.num !== null ? `Part ${p?.num} · ` : ''}{st.done}/{st.total} done
+								</text>
+							{/if}
+						</g>
+					{/each}
+				</g>
+			{/if}
+		</g>
+	</svg>
+
+	<div class="search" role="search">
+		<Search size={14} class="s-icon" />
+		<input
+			type="search"
+			placeholder="Jump to chapter…"
+			aria-label="Jump to a chapter by number or title"
+			bind:value={query}
+			onfocus={() => (searchOpen = true)}
+			onblur={() => setTimeout(() => (searchOpen = false), 150)}
+			oninput={() => (active = 0)}
+			onkeydown={onsearchkey}
+		/>
+		{#if searchOpen && results.length}
+			<ul class="results">
+				{#each results as c, i (c.key)}
+					{@const s = statusByKey.get(c.key) ?? 'not_started'}
+					<li>
+						<button
+							class={{ active: i === active }}
+							onmousedown={(e) => e.preventDefault()}
+							onclick={() => pick(c.key)}
+						>
+							<span class="dot" style:--c={status[s].color}></span>
+							<span class="rk">{c.key}</span>
+							<span class="rt">{c.title}</span>
+						</button>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+
+	<div class="tools">
+		{#if currentKey}
+			<button
+				class="tool wide"
+				onclick={() => currentKey && focusChapter(currentKey)}
+				title="Jump to the current chapter"><Target size={15} /><span>current</span></button
+			>
+		{/if}
+		<button class="tool" onclick={() => zoomBy(1.35)} aria-label="Zoom in"
+			><Plus size={16} /></button
+		>
+		<button class="tool" onclick={() => zoomBy(1 / 1.35)} aria-label="Zoom out"
+			><Minus size={16} /></button
+		>
+		<button class="tool" onclick={() => fit()} aria-label="Fit the whole map"
+			><Maximize size={15} /></button
+		>
+	</div>
+
+	<div class="legend" aria-label="Legend">
+		{#each Object.entries(status) as [s, v] (s)}
+			<span class="li"
+				><span class="sw {s}" style:--c={v.color}></span>{STATUS_LABEL[s as MathStatus]}</span
+			>
+		{/each}
+		<span class="li extra"
+			><svg width="22" height="8" aria-hidden="true"><path d="M1,4 H21" class="lg-edge" /></svg
+			>prereq</span
+		>
+		<span class="li extra"
+			><svg width="22" height="8" aria-hidden="true"
+				><path d="M1,4 H21" class="lg-edge optional" /></svg
+			>optional</span
+		>
+		<span class="li extra"
+			><svg width="12" height="12" aria-hidden="true"
+				><circle cx="6" cy="6" r="4.5" class="lg-ring" /></svg
+			>exercises</span
+		>
+	</div>
+
+	{#if !mobile && cw}
+		<svg
+			class="mini"
+			width={MINI_W}
+			height={layout.height * miniScale}
+			role="presentation"
+			onpointerdown={(e) => {
+				miniDrag = true;
+				(e.currentTarget as SVGElement).setPointerCapture(e.pointerId);
+				miniMove(e);
+			}}
+			onpointermove={(e) => miniDrag && miniMove(e)}
+			onpointerup={() => (miniDrag = false)}
+		>
+			<g transform="scale({miniScale})">
+				{#each layout.regions as r (r.key)}
+					{@const st = regionStats.get(r.key)}
+					<rect
+						x={r.x}
+						y={r.y}
+						width={r.w}
+						height={r.h}
+						rx="18"
+						class="mreg"
+						style:--p={st ? (st.done + st.skipped) / st.total : 0}
+						style:--a={st?.active ? 1 : 0}
+					/>
+				{/each}
+				<rect
+					class="view"
+					x={miniView.x}
+					y={miniView.y}
+					width={miniView.w}
+					height={miniView.h}
+					rx={8 / miniScale}
+				/>
+			</g>
+		</svg>
+	{/if}
+
+	{#if sel}
+		{@const s = statusByKey.get(sel.key) ?? 'not_started'}
+		{@const Icon = status[s].icon}
+		{@const p = partByKey.get(sel.partKey)}
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<aside
+			class="panel"
+			onkeydown={onpanelkey}
+			aria-label="Chapter {sel.key}"
+			style:--c={status[s].color}
+		>
+			<div class="grab" aria-hidden="true"></div>
+			<header>
+				<span class="sicon"><Icon size={18} strokeWidth={2.25} /></span>
+				<div class="ph">
+					<span class="pk">{chLabel(sel.key)}</span>
+					<h2>{sel.title}</h2>
+					{#if p}
+						<button
+							class="part-link"
+							onclick={() => {
+								const r = regionByKey.get(p.key);
+								if (r) fitRegion(r);
+							}}>{p.num !== null ? `Part ${p.num} · ` : ''}{p.title}</button
+						>
+					{/if}
+				</div>
+				<button class="close" onclick={() => (selected = null)} aria-label="Close"
+					><X size={16} /></button
+				>
+			</header>
+			{#if PART_LINKS.some((l) => l.to === sel.partKey)}
+				<div class="links">
+					{#each PART_LINKS.filter((l) => l.to === sel.partKey) as l (l.from)}
+						{@const from = partByKey.get(l.from)}
+						{@const st = regionStats.get(l.from)}
+						<button
+							class={['plink', { optional: l.optional, met: st?.complete }]}
+							title="{l.optional ? 'Optional: ' : 'Builds on '}{from?.title}"
+							onclick={() => {
+								const r = regionByKey.get(l.from);
+								if (r) fitRegion(r);
+							}}
+							>{l.optional ? 'optional' : 'needs'} · {partShort(from)}
+							{#if st}<span class="muted">{st.done}/{st.total}</span>{/if}</button
+						>
+					{/each}
+				</div>
+			{/if}
+			<div class="pbody">{@render panel(sel.key)}</div>
+		</aside>
+	{/if}
+</div>
+
+<style>
+	.map {
+		position: relative;
+		height: 100%;
+		overflow: hidden;
+		border: 1px solid var(--site-border);
+		border-radius: 0.9rem;
+		background:
+			radial-gradient(
+					circle,
+					color-mix(in srgb, var(--site-text) 9%, transparent) 1px,
+					transparent 1.2px
+				)
+				0 0 / 22px 22px,
+			var(--site-bg);
+		user-select: none;
+		-webkit-user-select: none;
+	}
+	.canvas {
+		display: block;
+		width: 100%;
+		height: 100%;
+		touch-action: none;
+		cursor: grab;
+		outline: none;
+		opacity: 0;
+		transition: opacity 0.2s;
+	}
+	.ready .canvas {
+		opacity: 1;
+	}
+	.canvas:active {
+		cursor: grabbing;
+	}
+	.canvas:focus-visible {
+		box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--site-text) 30%, transparent);
+	}
+	.world {
+		transform-origin: 0 0;
+		will-change: transform;
+	}
+
+	/* edges */
+	.edge {
+		fill: none;
+		stroke: color-mix(in srgb, var(--site-text) 30%, transparent);
+		stroke-width: 1.6;
+		transition:
+			stroke 0.15s,
+			opacity 0.15s;
+	}
+	.edge.optional {
+		stroke-dasharray: 2 6;
+		stroke-linecap: round;
+	}
+	.edge.met {
+		stroke: color-mix(in srgb, #22c55e 55%, transparent);
+	}
+	.edge.dim {
+		opacity: 0.25;
+	}
+	.edge.hi {
+		stroke: var(--site-text);
+		stroke-width: 2.2;
+	}
+	.arrow {
+		fill: color-mix(in srgb, var(--site-text) 45%, transparent);
+	}
+	.arrow.hi {
+		fill: var(--site-text);
+	}
+
+	/* regions */
+	.region {
+		cursor: pointer;
+	}
+	.rbg {
+		fill: var(--site-surface);
+		stroke: var(--site-border);
+		stroke-width: 1;
+		transition: stroke 0.15s;
+	}
+	.region.focus .rbg {
+		stroke: color-mix(in srgb, var(--accent) 70%, var(--site-border));
+	}
+	.badge {
+		fill: var(--accent);
+	}
+	.bnum {
+		fill: #0a0a0a;
+		font-size: 11px;
+		font-weight: 700;
+		text-anchor: middle;
+	}
+	.rtitle {
+		fill: var(--site-text);
+		font-size: 13px;
+		font-weight: 600;
+	}
+	.rcount {
+		fill: var(--site-muted);
+		font-size: 11px;
+		text-anchor: end;
+		font-variant-numeric: tabular-nums;
+	}
+	.rtrack {
+		fill: color-mix(in srgb, var(--site-text) 8%, transparent);
+	}
+	.rdone {
+		fill: #22c55e;
+	}
+
+	/* nodes */
+	.node {
+		cursor: pointer;
+		transition: opacity 0.15s;
+	}
+	.nbg {
+		fill: color-mix(in srgb, var(--site-text) 4%, var(--site-surface));
+		stroke: color-mix(in srgb, var(--site-text) 14%, transparent);
+		stroke-width: 1;
+		transition:
+			fill 0.15s,
+			stroke 0.15s;
+	}
+	.node:hover .nbg {
+		stroke: color-mix(in srgb, var(--site-text) 40%, transparent);
+	}
+	.node:not(.not_started) .nbg {
+		fill: color-mix(in srgb, var(--c) 15%, var(--site-surface));
+		stroke: color-mix(in srgb, var(--c) 55%, transparent);
+	}
+	.node.done .nbg {
+		fill: color-mix(in srgb, var(--c) 24%, var(--site-surface));
+	}
+	.node.skipped .nbg {
+		fill: color-mix(in srgb, var(--c) 8%, var(--site-surface));
+		stroke-dasharray: 4 3;
+	}
+	.node.selected .nbg {
+		stroke: var(--site-text);
+		stroke-width: 2;
+	}
+	.node.pre .nbg {
+		stroke: var(--site-text);
+		stroke-dasharray: 3 3;
+		stroke-width: 1.4;
+	}
+	.node.dim {
+		opacity: 0.22;
+	}
+	.glow {
+		fill: none;
+		stroke: var(--c);
+		stroke-width: 2;
+		animation: pulse 2.2s ease-in-out infinite;
+	}
+	@keyframes pulse {
+		50% {
+			opacity: 0.25;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.glow {
+			animation: none;
+		}
+	}
+	.track {
+		fill: none;
+		stroke: color-mix(in srgb, var(--site-text) 14%, transparent);
+		stroke-width: 2.5;
+	}
+	.ring {
+		fill: none;
+		stroke: var(--c);
+		stroke-width: 2.5;
+		stroke-linecap: round;
+	}
+	.nkey {
+		fill: var(--site-muted);
+		font-size: 9px;
+		font-weight: 700;
+		text-anchor: middle;
+		font-variant-numeric: tabular-nums;
+	}
+	.node:not(.not_started) .nkey {
+		fill: var(--site-text);
+	}
+	.ntitle {
+		fill: var(--site-text);
+		font-size: 12px;
+	}
+	.node.not_started .ntitle {
+		fill: color-mix(in srgb, var(--site-text) 78%, transparent);
+	}
+	.node.skipped .ntitle {
+		fill: var(--site-muted);
+		text-decoration: line-through;
+	}
+	.node :global(.nicon) {
+		color: var(--c);
+	}
+
+	/* zoomed out: big region labels, no node text */
+	.far .ntitle,
+	.far .nkey,
+	.far .node :global(.nicon),
+	.far .rtitle,
+	.far .rcount,
+	.far .bnum {
+		display: none;
+	}
+	.far .node {
+		cursor: inherit;
+	}
+	.rlabel {
+		cursor: zoom-in;
+	}
+	.rlabel text {
+		fill: var(--site-text);
+		font-weight: 700;
+		text-anchor: middle;
+		paint-order: stroke;
+		stroke: var(--site-bg);
+		stroke-width: 0.3em;
+		stroke-linejoin: round;
+		letter-spacing: -0.01em;
+	}
+	.rlabel text.sub {
+		fill: var(--site-muted);
+		font-weight: 500;
+	}
+
+	/* overlays */
+	.search {
+		position: absolute;
+		top: 0.6rem;
+		left: 0.6rem;
+		width: min(17rem, calc(100% - 13rem));
+	}
+	.search :global(.s-icon) {
+		position: absolute;
+		left: 0.6rem;
+		top: 0.62rem;
+		color: var(--site-muted);
+		pointer-events: none;
+	}
+	.search input {
+		width: 100%;
+		height: 2.1rem;
+		padding: 0 0.6rem 0 1.9rem;
+		border: 1px solid var(--site-border);
+		border-radius: 0.6rem;
+		background: color-mix(in srgb, var(--site-surface) 92%, transparent);
+		backdrop-filter: blur(8px);
+		font: inherit;
+		font-size: 0.85rem;
+		color: var(--site-text);
+	}
+	.search input:focus {
+		outline: none;
+		border-color: var(--site-muted);
+	}
+	.results {
+		margin-top: 0.3rem;
+		border: 1px solid var(--site-border);
+		border-radius: 0.6rem;
+		background: var(--site-surface);
+		padding: 0.25rem;
+		box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
+	}
+	.results button {
+		display: grid;
+		grid-template-columns: auto 1.7rem minmax(0, 1fr);
+		align-items: center;
+		gap: 0.45rem;
+		width: 100%;
+		padding: 0.35rem 0.45rem;
+		border-radius: 0.4rem;
+		font-size: 0.82rem;
+		text-align: left;
+		cursor: pointer;
+		color: inherit;
+	}
+	.results button.active,
+	.results button:hover {
+		background: var(--site-hover);
+	}
+	.dot {
+		width: 0.55rem;
+		height: 0.55rem;
+		border-radius: 999px;
+		background: var(--c);
+	}
+	.rk {
+		color: var(--site-muted);
+		font-variant-numeric: tabular-nums;
+	}
+	.rt {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.tools {
+		position: absolute;
+		top: 0.6rem;
+		right: 0.6rem;
+		display: flex;
+		gap: 0.3rem;
+		transition: right 0.2s;
+	}
+	.open .tools {
+		right: calc(380px + 0.6rem);
+	}
+	.tool {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.3rem;
+		min-width: 2.1rem;
+		height: 2.1rem;
+		padding: 0 0.5rem;
+		border: 1px solid var(--site-border);
+		border-radius: 0.6rem;
+		background: color-mix(in srgb, var(--site-surface) 92%, transparent);
+		backdrop-filter: blur(8px);
+		color: var(--site-text);
+		font-size: 0.8rem;
+		cursor: pointer;
+	}
+	.tool:hover {
+		border-color: var(--site-muted);
+	}
+	.tool.wide :global(svg) {
+		color: #38bdf8;
+	}
+	.legend {
+		position: absolute;
+		right: 0.6rem;
+		bottom: 0.6rem;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+		gap: 0.25rem 0.7rem;
+		max-width: 30rem;
+		padding: 0.4rem 0.65rem;
+		border: 1px solid var(--site-border);
+		border-radius: 0.6rem;
+		background: color-mix(in srgb, var(--site-surface) 92%, transparent);
+		backdrop-filter: blur(8px);
+		font-size: 0.72rem;
+		color: var(--site-muted);
+		pointer-events: none;
+		transition: right 0.2s;
+	}
+	.open .legend {
+		right: calc(380px + 0.6rem);
+	}
+	.li {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		white-space: nowrap;
+	}
+	.sw {
+		width: 0.8rem;
+		height: 0.6rem;
+		border-radius: 0.2rem;
+		border: 1px solid color-mix(in srgb, var(--c) 70%, transparent);
+		background: color-mix(in srgb, var(--c) 30%, transparent);
+	}
+	.sw.not_started {
+		background: color-mix(in srgb, var(--site-text) 6%, transparent);
+		border-color: color-mix(in srgb, var(--site-text) 25%, transparent);
+	}
+	.sw.skipped {
+		border-style: dashed;
+	}
+	.lg-edge {
+		stroke: color-mix(in srgb, var(--site-text) 55%, transparent);
+		stroke-width: 1.6;
+	}
+	.lg-edge.optional {
+		stroke-dasharray: 2 4;
+		stroke-linecap: round;
+	}
+	.lg-ring {
+		fill: none;
+		stroke: #f59e0b;
+		stroke-width: 2;
+		stroke-dasharray: 18 40;
+		transform: rotate(-90deg);
+		transform-origin: 6px 6px;
+	}
+	.mini {
+		position: absolute;
+		left: 0.6rem;
+		bottom: 0.6rem;
+		border: 1px solid var(--site-border);
+		border-radius: 0.5rem;
+		background: color-mix(in srgb, var(--site-surface) 92%, transparent);
+		backdrop-filter: blur(8px);
+		cursor: crosshair;
+		touch-action: none;
+	}
+	.mreg {
+		fill: color-mix(
+			in srgb,
+			#22c55e calc(var(--p) * 75%),
+			color-mix(in srgb, var(--site-text) 14%, transparent)
+		);
+		stroke: color-mix(in srgb, #38bdf8 calc(var(--a) * 100%), transparent);
+		stroke-width: 18;
+	}
+	.view {
+		fill: color-mix(in srgb, var(--site-text) 6%, transparent);
+		stroke: var(--site-text);
+		stroke-width: 14;
+	}
+
+	/* chapter panel: side panel on desktop, bottom sheet on mobile */
+	.panel {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		width: 380px;
+		display: flex;
+		flex-direction: column;
+		border-left: 1px solid var(--site-border);
+		background: var(--site-surface);
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		animation: slide-in 0.18s ease-out;
+		user-select: text;
+		-webkit-user-select: text;
+	}
+	@keyframes slide-in {
+		from {
+			transform: translateX(24px);
+			opacity: 0;
+		}
+	}
+	.grab {
+		display: none;
+	}
+	.panel header {
+		display: grid;
+		grid-template-columns: auto minmax(0, 1fr) auto;
+		gap: 0.6rem;
+		align-items: start;
+		padding: 0.9rem 0.9rem 0.6rem;
+		border-bottom: 1px solid color-mix(in srgb, var(--site-border) 60%, transparent);
+	}
+	.sicon {
+		display: inline-flex;
+		margin-top: 0.15rem;
+		color: var(--c);
+	}
+	.ph {
+		display: flex;
+		flex-direction: column;
+		gap: 0.1rem;
+		min-width: 0;
+	}
+	.pk {
+		font-size: 0.75rem;
+		color: var(--site-muted);
+		font-variant-numeric: tabular-nums;
+	}
+	.ph h2 {
+		font-size: 1.05rem;
+		font-weight: 600;
+		line-height: 1.25;
+		letter-spacing: -0.01em;
+	}
+	.part-link {
+		align-self: flex-start;
+		font-size: 0.75rem;
+		color: var(--site-muted);
+		text-align: left;
+		cursor: pointer;
+	}
+	.part-link:hover {
+		color: var(--site-text);
+	}
+	.close {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.9rem;
+		height: 1.9rem;
+		border: 1px solid var(--site-border);
+		border-radius: 0.5rem;
+		color: var(--site-muted);
+		cursor: pointer;
+	}
+	.close:hover {
+		color: var(--site-text);
+		border-color: var(--site-muted);
+	}
+	.links {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.3rem;
+		padding: 0.6rem 0.9rem 0;
+	}
+	.plink {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		padding: 0.15rem 0.5rem;
+		border: 1px solid var(--site-border);
+		border-radius: 999px;
+		font-size: 0.72rem;
+		color: var(--site-text);
+		cursor: pointer;
+	}
+	.plink.optional {
+		border-style: dashed;
+		color: var(--site-muted);
+	}
+	.plink.met {
+		border-color: color-mix(in srgb, #22c55e 60%, transparent);
+	}
+	.plink .muted {
+		color: var(--site-muted);
+	}
+	.pbody {
+		padding: 0.7rem 0.9rem 1rem;
+	}
+
+	@media (max-width: 719px) {
+		.panel {
+			position: fixed;
+			top: auto;
+			left: 0;
+			width: auto;
+			max-height: 72dvh;
+			border-left: 0;
+			border-top: 1px solid var(--site-border);
+			border-radius: 1rem 1rem 0 0;
+			box-shadow: 0 -12px 40px rgb(0 0 0 / 0.45);
+			z-index: 50;
+			animation: sheet-in 0.22s ease-out;
+			padding-bottom: env(safe-area-inset-bottom);
+		}
+		@keyframes sheet-in {
+			from {
+				transform: translateY(40%);
+				opacity: 0;
+			}
+		}
+		.grab {
+			display: block;
+			width: 2.5rem;
+			height: 0.25rem;
+			margin: 0.5rem auto 0;
+			border-radius: 999px;
+			background: var(--site-border);
+		}
+		.panel header {
+			padding-top: 0.5rem;
+		}
+		.open .tools,
+		.open .legend {
+			right: 0.6rem;
+		}
+		.search {
+			width: calc(100% - 11.2rem);
+		}
+		.legend .extra {
+			display: none;
+		}
+		.tool.wide span {
+			display: none;
+		}
+		.legend {
+			left: 0.6rem;
+			justify-content: flex-start;
+			gap: 0.2rem 0.55rem;
+			font-size: 0.66rem;
+		}
+	}
+</style>
diff --git a/src/lib/napkin/map.test.ts b/src/lib/napkin/map.test.ts
new file mode 100644
index 0000000..aae72ea
--- /dev/null
+++ b/src/lib/napkin/map.test.ts
@@ -0,0 +1,124 @@
+import { describe, expect, it } from 'vitest';
+import { buildMapLayout, MAP_GRID, PART_ACCENT, PART_LINKS } from './map';
+
+// Chapter counts per part, as in the seeded Napkin.
+const COUNTS: Record<string, number> = {
+	'1': 3,
+	'2': 3,
+	'3': 3,
+	'4': 7,
+	'5': 3,
+	'6': 4,
+	'7': 3,
+	'8': 5,
+	'9': 4,
+	'10': 5,
+	'11': 3,
+	'12': 4,
+	'13': 6,
+	'14': 6,
+	'15': 5,
+	'16': 3,
+	'17': 4,
+	'18': 6,
+	'19': 5,
+	'20': 6,
+	'21': 4,
+	'22': 3,
+	appendix: 5
+};
+let n = 0;
+const parts = Object.entries(COUNTS).map(([key, count]) => ({
+	key,
+	chapters: Array.from({ length: count }, () => String(++n))
+}));
+const layout = buildMapLayout(parts);
+
+/** Points along an absolute M/L/C path. */
+function samples(d: string) {
+	const tokens = d.match(/[MLC]|-?\d+(?:\.\d+)?/g) ?? [];
+	const pts: [number, number][] = [];
+	let cur: [number, number] = [0, 0];
+	let i = 0;
+	const num = () => Number(tokens[i++]);
+	while (i < tokens.length) {
+		const cmd = tokens[i++];
+		if (cmd === 'M' || cmd === 'L') {
+			const p: [number, number] = [num(), num()];
+			if (cmd === 'L')
+				for (let t = 0; t <= 1; t += 0.05)
+					pts.push([cur[0] + (p[0] - cur[0]) * t, cur[1] + (p[1] - cur[1]) * t]);
+			cur = p;
+		} else if (cmd === 'C') {
+			const [c1, c2, p] = [
+				[num(), num()],
+				[num(), num()],
+				[num(), num()]
+			];
+			for (let t = 0; t <= 1; t += 0.05) {
+				const u = 1 - t;
+				pts.push([
+					u ** 3 * cur[0] + 3 * u * u * t * c1[0] + 3 * u * t * t * c2[0] + t ** 3 * p[0],
+					u ** 3 * cur[1] + 3 * u * u * t * c1[1] + 3 * u * t * t * c2[1] + t ** 3 * p[1]
+				]);
+			}
+			cur = p as [number, number];
+		} else throw new Error(`unexpected path token ${cmd}`);
+	}
+	return pts;
+}
+
+describe('napkin map layout', () => {
+	it('places every part and every chapter', () => {
+		expect(layout.regions.map((r) => r.key).sort()).toEqual(Object.keys(COUNTS).sort());
+		expect(layout.nodes).toHaveLength(n);
+		for (const key of Object.keys(COUNTS)) {
+			expect(MAP_GRID[key]).toBeDefined();
+			expect(PART_ACCENT[key]).toMatch(/^#[0-9a-f]{6}$/);
+		}
+	});
+
+	it('keeps regions apart and nodes inside their region', () => {
+		const rs = layout.regions;
+		for (let a = 0; a < rs.length; a++)
+			for (let b = a + 1; b < rs.length; b++) {
+				const [p, q] = [rs[a], rs[b]];
+				const overlap = p.x < q.x + q.w && q.x < p.x + p.w && p.y < q.y + q.h && q.y < p.y + p.h;
+				expect(overlap, `${p.key} overlaps ${q.key}`).toBe(false);
+			}
+		for (const node of layout.nodes) {
+			const r = rs.find((x) => x.key === node.partKey)!;
+			expect(node.x).toBeGreaterThanOrEqual(r.x);
+			expect(node.y).toBeGreaterThanOrEqual(r.y);
+			expect(node.x + node.w).toBeLessThanOrEqual(r.x + r.w);
+			expect(node.y + node.h).toBeLessThanOrEqual(r.y + r.h);
+		}
+	});
+
+	it('draws one edge per part link, optional ones flagged', () => {
+		expect(layout.edges).toHaveLength(PART_LINKS.length);
+		expect(layout.edges.filter((e) => e.optional)).toHaveLength(
+			PART_LINKS.filter((l) => l.optional).length
+		);
+		expect(PART_LINKS.filter((l) => l.optional).length).toBe(10);
+		for (const e of layout.edges) expect(e.d).toMatch(/^M/);
+	});
+
+	it('never routes an edge through an unrelated region', () => {
+		for (const e of layout.edges) {
+			const others = layout.regions.filter((r) => r.key !== e.from && r.key !== e.to);
+			for (const [x, y] of samples(e.d))
+				for (const r of others) {
+					const inside = x > r.x + 1 && x < r.x + r.w - 1 && y > r.y + 1 && y < r.y + r.h - 1;
+					expect(inside, `${e.id} crosses part ${r.key} at ${x},${y}`).toBe(false);
+				}
+		}
+	});
+
+	it('flows downward from the roots', () => {
+		const row = (k: string) => MAP_GRID[k][1];
+		for (const l of PART_LINKS) expect(row(l.to)).toBeGreaterThanOrEqual(row(l.from) - 1);
+		for (const root of ['2', '3', '4', '21']) expect(row(root)).toBeLessThanOrEqual(1);
+		for (const leaf of ['18', '20', '15']) expect(row(leaf)).toBe(5);
+	});
+});
diff --git a/src/lib/napkin/map.ts b/src/lib/napkin/map.ts
new file mode 100644
index 0000000..0597535
--- /dev/null
+++ b/src/lib/napkin/map.ts
@@ -0,0 +1,303 @@
+/**
+ * The Napkin as a 2D map: one region per part, one node per chapter, prereq edges between parts.
+ *
+ * Region placement follows the book's dependency chart ("Advice for the reader", PDF p. 9,
+ * tex/frontmatter/digraph.tex): Abs Alg, Lin Alg, Topology and Set Theory are the roots and
+ * everything flows down to Alg Geo, Alg Top and Alg NT. Regions sit on a hand-placed grid; edges
+ * are routed through the empty channels between rows and the gutters between columns, so they
+ * never cut through a region.
+ */
+
+/** Part → [column, row] on the map grid. */
+export const MAP_GRID: Record<string, readonly [number, number]> = {
+	appendix: [0, 0],
+	'1': [3, 0],
+	'21': [0, 1],
+	'2': [1, 1],
+	'4': [3, 1],
+	'3': [5, 1],
+	'22': [0, 2],
+	'5': [1, 2],
+	'6': [2, 2],
+	'7': [4, 2],
+	'8': [5, 2],
+	'17': [2, 3],
+	'12': [4, 3],
+	'9': [5, 3],
+	'10': [6, 3],
+	'19': [1, 4],
+	'16': [2, 4],
+	'14': [3, 4],
+	'13': [4, 4],
+	'11': [6, 4],
+	'20': [1, 5],
+	'18': [2, 5],
+	'15': [3, 5]
+};
+
+export type PartLink = { from: string; to: string; optional: boolean };
+
+/**
+ * Part-level prereqs from the book's chart. `optional` = dotted in the book (\coreqc), solid
+ * otherwise (\prereqc). Additions: Starting Out leads into Abs Alg and Topology, Measure →
+ * Probability and Diff Geo → Riemann Surfaces (one block in the chart each).
+ */
+export const PART_LINKS: readonly PartLink[] = (
+	[
+		['1', '2'],
+		['1', '3'],
+		['2', '4', true],
+		['2', '5'],
+		['2', '6'],
+		['4', '6'],
+		['4', '7'],
+		['2', '17'],
+		['4', '17', true],
+		['3', '17', true],
+		['17', '6', true],
+		['3', '8'],
+		['3', '9'],
+		['8', '9', true],
+		['16', '9', true],
+		['3', '10'],
+		['8', '10', true],
+		['10', '11'],
+		['4', '12'],
+		['3', '12'],
+		['8', '12', true],
+		['12', '13'],
+		['2', '14'],
+		['4', '14'],
+		['14', '15'],
+		['5', '15'],
+		['3', '16'],
+		['5', '16'],
+		['16', '17', true],
+		['16', '18'],
+		['17', '18'],
+		['2', '19'],
+		['3', '19'],
+		['17', '19', true],
+		['19', '20'],
+		['17', '20'],
+		['21', '22']
+	] as const
+).map(([from, to, optional]) => ({ from, to, optional: optional === true }));
+
+/** Accent per area of maths (region badge stripe), kept apart from the status colours. */
+export const PART_ACCENT: Record<string, string> = {
+	'1': '#e4e4e7',
+	appendix: '#a1a1aa',
+	'2': '#f472b6',
+	'5': '#f472b6',
+	'6': '#f472b6',
+	'17': '#f472b6',
+	'4': '#818cf8',
+	'7': '#818cf8',
+	'3': '#2dd4bf',
+	'16': '#2dd4bf',
+	'18': '#2dd4bf',
+	'8': '#fb923c',
+	'9': '#fb923c',
+	'10': '#fb923c',
+	'11': '#fb923c',
+	'12': '#fb923c',
+	'13': '#fb923c',
+	'14': '#e879f9',
+	'15': '#e879f9',
+	'19': '#a3e635',
+	'20': '#a3e635',
+	'21': '#94a3b8',
+	'22': '#94a3b8'
+};
+
+export const MAP = {
+	regionWidth: 240,
+	gutter: 96,
+	rowGap: 120,
+	head: 46,
+	padX: 10,
+	padBottom: 10,
+	nodeHeight: 34,
+	nodeGap: 6,
+	portGap: 18,
+	laneGap: 12
+} as const;
+
+export type MapRegion = {
+	key: string;
+	x: number;
+	y: number;
+	w: number;
+	h: number;
+	col: number;
+	row: number;
+};
+export type MapNode = { key: string; partKey: string; x: number; y: number; w: number; h: number };
+export type MapEdge = {
+	id: string;
+	from: string;
+	to: string;
+	optional: boolean;
+	d: string;
+	/** End point, for the arrow head. */
+	end: { x: number; y: number; dir: 'down' | 'up' | 'right' };
+};
+export type MapLayout = {
+	regions: MapRegion[];
+	nodes: MapNode[];
+	edges: MapEdge[];
+	width: number;
+	height: number;
+};
+
+const r1 = (n: number) => Math.round(n * 10) / 10;
+
+export function buildMapLayout(
+	parts: readonly { key: string; chapters: readonly string[] }[],
+	links: readonly PartLink[] = PART_LINKS
+): MapLayout {
+	const M = MAP;
+	const W = M.regionWidth;
+	const colX = (c: number) => c * (W + M.gutter);
+	const heightOf = (n: number) => M.head + n * (M.nodeHeight + M.nodeGap) - M.nodeGap + M.padBottom;
+
+	const placed = parts.filter((p) => MAP_GRID[p.key]);
+	const rows = Math.max(...placed.map((p) => MAP_GRID[p.key][1])) + 1;
+	const cols = Math.max(...placed.map((p) => MAP_GRID[p.key][0])) + 1;
+	const rowHeight = Array.from({ length: rows }, () => 0);
+	for (const p of placed) {
+		const [, r] = MAP_GRID[p.key];
+		rowHeight[r] = Math.max(rowHeight[r], heightOf(p.chapters.length));
+	}
+	const rowTop: number[] = [0];
+	for (let r = 1; r < rows; r++) rowTop[r] = rowTop[r - 1] + rowHeight[r - 1] + M.rowGap;
+	/** Channel between row r and r + 1: [channelTop, channelBottom]. */
+	const chTop = (r: number) => rowTop[r] + rowHeight[r];
+	const chBot = (r: number) => rowTop[r + 1];
+
+	const regions: MapRegion[] = [];
+	const nodes: MapNode[] = [];
+	for (const p of placed) {
+		const [col, row] = MAP_GRID[p.key];
+		const reg = {
+			key: p.key,
+			col,
+			row,
+			x: colX(col),
+			y: rowTop[row],
+			w: W,
+			h: heightOf(p.chapters.length)
+		};
+		regions.push(reg);
+		p.chapters.forEach((key, i) =>
+			nodes.push({
+				key,
+				partKey: p.key,
+				x: reg.x + M.padX,
+				y: reg.y + M.head + i * (M.nodeHeight + M.nodeGap),
+				w: W - 2 * M.padX,
+				h: M.nodeHeight
+			})
+		);
+	}
+	const reg = new Map(regions.map((r) => [r.key, r]));
+	const usable = links.filter((l) => reg.has(l.from) && reg.has(l.to));
+
+	// Ports: spread each region's edges along its bottom (outgoing down / incoming up) and top.
+	type Side = 'top' | 'bottom';
+	const portLists = new Map<string, { id: string; other: number }[]>();
+	const addPort = (key: string, side: Side, id: string, other: number) => {
+		const k = `${key}:${side}`;
+		if (!portLists.has(k)) portLists.set(k, []);
+		portLists.get(k)!.push({ id, other });
+	};
+	const idOf = (l: PartLink) => `${l.from}-${l.to}`;
+	for (const l of usable) {
+		const a = reg.get(l.from)!;
+		const b = reg.get(l.to)!;
+		if (a.row === b.row) continue;
+		const down = b.row > a.row;
+		addPort(a.key, down ? 'bottom' : 'top', idOf(l), b.x + b.w / 2);
+		addPort(b.key, down ? 'top' : 'bottom', idOf(l), a.x + a.w / 2);
+	}
+	const portX = (key: string, side: Side, id: string) => {
+		const r = reg.get(key)!;
+		const list = [...portLists.get(`${key}:${side}`)!].sort(
+			(p, q) => p.other - q.other || (p.id < q.id ? -1 : 1)
+		);
+		const i = list.findIndex((p) => p.id === id);
+		const gap = Math.min(M.portGap, (r.w * 0.7) / Math.max(1, list.length));
+		return r.x + r.w / 2 + (i - (list.length - 1) / 2) * gap;
+	};
+	/** Is x free of regions in every row strictly between a and b? */
+	const freeAt = (x: number, a: number, b: number) =>
+		regions.every((r) => r.row <= a || r.row >= b || x < r.x - 14 || x > r.x + r.w + 14);
+	const gutterLoad = new Map<number, number>();
+	const s = (x0: number, y0: number, x1: number, y1: number) => {
+		if (Math.abs(x0 - x1) < 0.5) return ` L${r1(x1)},${r1(y1)}`;
+		const m = (y0 + y1) / 2;
+		return ` C${r1(x0)},${r1(m)} ${r1(x1)},${r1(m)} ${r1(x1)},${r1(y1)}`;
+	};
+
+	const edges: MapEdge[] = [];
+	for (const l of usable) {
+		const a = reg.get(l.from)!;
+		const b = reg.get(l.to)!;
+		const id = idOf(l);
+		let d: string;
+		let end: MapEdge['end'];
+		if (a.row === b.row) {
+			// Same row (Abs Alg ⇢ Lin Alg): straight across at header height.
+			const y = a.y + 23;
+			const [x0, x1] = a.x < b.x ? [a.x + a.w, b.x] : [a.x, b.x + b.w];
+			d = `M${r1(x0)},${r1(y)} L${r1(x1)},${r1(y)}`;
+			end = { x: x1, y, dir: 'right' };
+		} else if (b.row < a.row) {
+			// Upward (optional back-links, adjacent rows only).
+			const sx = portX(a.key, 'top', id);
+			const tx = portX(b.key, 'bottom', id);
+			const ty = b.y + b.h;
+			d = `M${r1(sx)},${r1(a.y)}` + s(sx, a.y, tx, chTop(b.row)) + ` L${r1(tx)},${r1(ty)}`;
+			end = { x: tx, y: ty, dir: 'up' };
+		} else {
+			const sx = portX(a.key, 'bottom', id);
+			const tx = portX(b.key, 'top', id);
+			const sy = a.y + a.h;
+			const ty = b.y;
+			d = `M${r1(sx)},${r1(sy)} L${r1(sx)},${r1(chTop(a.row))}`;
+			if (b.row === a.row + 1) d += s(sx, chTop(a.row), tx, ty);
+			else if (freeAt(tx, a.row, b.row))
+				d += s(sx, chTop(a.row), tx, chBot(a.row)) + ` L${r1(tx)},${r1(ty)}`;
+			else if (freeAt(sx, a.row, b.row))
+				d += ` L${r1(sx)},${r1(chTop(b.row - 1))}` + s(sx, chTop(b.row - 1), tx, ty);
+			else {
+				// Down a gutter between columns: the one with the least detour, then the least used.
+				let best = { g: 0, cost: Infinity };
+				for (let g = 0; g <= cols; g++) {
+					const gx = colX(g) - M.gutter / 2;
+					const cost = Math.abs(sx - gx) + Math.abs(tx - gx) + (gutterLoad.get(g) ?? 0) * 40;
+					if (cost < best.cost) best = { g, cost };
+				}
+				const n = gutterLoad.get(best.g) ?? 0;
+				gutterLoad.set(best.g, n + 1);
+				const lane = (n % 2 ? -1 : 1) * Math.ceil(n / 2) * M.laneGap;
+				const gx = colX(best.g) - M.gutter / 2 + lane;
+				d +=
+					s(sx, chTop(a.row), gx, chBot(a.row)) +
+					` L${r1(gx)},${r1(chTop(b.row - 1))}` +
+					s(gx, chTop(b.row - 1), tx, ty);
+			}
+			end = { x: tx, y: ty, dir: 'down' };
+		}
+		edges.push({ id, from: l.from, to: l.to, optional: l.optional, d, end });
+	}
+
+	return {
+		regions,
+		nodes,
+		edges,
+		width: colX(cols) - M.gutter,
+		height: rowTop[rows - 1] + rowHeight[rows - 1]
+	};
+}
diff --git a/src/routes/trackers/math/+page.svelte b/src/routes/trackers/math/+page.svelte
index bfba98c..0cb9ee1 100644
--- a/src/routes/trackers/math/+page.svelte
+++ b/src/routes/trackers/math/+page.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { enhance } from '$app/forms';
+	import { replaceState } from '$app/navigation';
+	import { page } from '$app/state';
+	import MathMap from '#lib/napkin/MathMap.svelte';
 	import type { SubmitFunction } from '@sveltejs/kit';
 	import TrackerIcon from '#lib/components/TrackerIcon.svelte';
 	import PrivateLock from '#lib/components/PrivateLock.svelte';
@@ -26,6 +30,7 @@
 	import ListChecks from 'lucide-svelte/icons/list-checks';
 	import MapIcon from 'lucide-svelte/icons/map';
 	import StickyNote from 'lucide-svelte/icons/sticky-note';
+	import List from 'lucide-svelte/icons/list';
 
 	let { data, form } = $props();
 
@@ -47,6 +52,46 @@
 	let filter = $state<MathStatus | 'all'>('all');
 	let errorKey = $state('');
 
+	// Map (default) or the original list; ?view=list in the URL, remembered per device.
+	type View = 'map' | 'list';
+	const VIEW_KEY = 'math:view';
+	const urlView = (): View | null => {
+		const v = page.url.searchParams.get('view');
+		return v === 'list' || v === 'map' ? v : null;
+	};
+	let view = $state<View>(urlView() ?? 'map');
+	let selected = $state<string | null>(null);
+	let map: ReturnType<typeof MathMap> | undefined = $state();
+	onMount(() => {
+		if (urlView()) return;
+		try {
+			const saved = localStorage.getItem(VIEW_KEY);
+			if (saved === 'list' || saved === 'map') view = saved;
+		} catch {
+			// Ignore.
+		}
+	});
+	function setView(next: View) {
+		if (next === view) return;
+		view = next;
+		try {
+			localStorage.setItem(VIEW_KEY, next);
+		} catch {
+			// Not persisted; fine.
+		}
+		const url = new URL(page.url);
+		if (next === 'map') url.searchParams.delete('view');
+		else url.searchParams.set('view', next);
+		replaceState(url, {});
+	}
+	/** Jump to a chapter: centre it on the map, or expand it in the list. */
+	function goTo(e: MouseEvent, key: string) {
+		if (view === 'map' && map) {
+			e.preventDefault();
+			map.focusChapter(key);
+		} else open[key] = true;
+	}
+
 	const statusOf = (c: Chapter): MathStatus => pending[c.key] ?? c.status;
 	const byKey = $derived(new Map(data.chapters.map((c) => [c.key, c])));
 
@@ -219,7 +264,7 @@
 						class="dot"
 						style:--c={STATUS[statusOf(p)].color}
 						title="{chapterLabel(p.key)} {p.title}: {STATUS_LABEL[statusOf(p)]}"
-						onclick={() => (open[p.key] = true)}>{p.key}</a
+						onclick={(e) => goTo(e, p.key)}>{p.key}</a
 					>
 				{/each}
 			</span>
@@ -297,7 +342,7 @@
 	</div>
 {/snippet}
 
-<div class="math-page">
+<div class={['math-page', `${view}-view`]}>
 	<header class="head">
 		<TrackerIcon name="math" class="size-10" />
 		<div>
@@ -310,13 +355,25 @@
 				>, chapter by chapter.
 			</p>
 		</div>
+		<div class="views" role="group" aria-label="View">
+			<button
+				class={{ on: view === 'map' }}
+				aria-pressed={view === 'map'}
+				onclick={() => setView('map')}><MapIcon size={14} />map</button
+			>
+			<button
+				class={{ on: view === 'list' }}
+				aria-pressed={view === 'list'}
+				onclick={() => setView('list')}><List size={14} />list</button
+			>
+		</div>
 	</header>
 
 	<section class="overview card">
 		<div class="big">
 			<span class="pct">{pct(counts.done, countable)}%</span>
 			<span class="muted"
-				>{counts.done} of {countable} chapters done{#if counts.skipped}{' · '}{counts.skipped}
+				>{counts.done} of {countable} chapters done{#if counts.skipped}&nbsp;· {counts.skipped}
 					skipped{/if}</span
 			>
 		</div>
@@ -343,7 +400,27 @@
 		</div>
 	</section>
 
-	{#if current}
+	{#if view === 'map'}
+		<div class="map-wrap">
+			<MathMap
+				bind:this={map}
+				bind:selected
+				parts={data.parts}
+				chapters={data.chapters}
+				{statusOf}
+				status={STATUS}
+				currentKey={current?.chapter.key ?? null}
+				{filter}
+			>
+				{#snippet panel(key)}
+					{@const c = byKey.get(key)}
+					{#if c}<div class="in-panel">{@render details(c)}</div>{/if}
+				{/snippet}
+			</MathMap>
+		</div>
+	{/if}
+
+	{#if current && view === 'list'}
 		{@const c = current.chapter}
 		{@const part = data.parts.find((p) => p.key === c.partKey)}
 		<section class="current card" style:--c={STATUS[statusOf(c)].color}>
@@ -363,62 +440,62 @@
 	{/if}
 
 	<div class="layout">
-		<div class="parts">
-			{#each parts as p (p.key)}
-				{#if p.shown.length}
-					<section class="part card">
-						<button
-							class="part-head"
-							aria-expanded={!collapsedParts[p.key]}
-							onclick={() => (collapsedParts[p.key] = !collapsedParts[p.key])}
-						>
-							<span class="pnum">{p.num ?? 'A–E'}</span>
-							<span class="ptitle">{p.title}</span>
-							<span class="pbar">{@render bar(p.counts, p.chapters.length)}</span>
-							<span class="muted pcount">{p.counts.done}/{p.chapters.length}</span>
-							<ChevronDown size={16} class={!collapsedParts[p.key] ? 'chev flipped' : 'chev'} />
-						</button>
-						{#if !collapsedParts[p.key]}
-							<ul class="chapters">
-								{#each p.shown as c (c.key)}
-									{@const s = statusOf(c)}
-									<li id="ch-{c.key}" class={['chapter', s, { open: open[c.key] }]}>
-										<button
-											class="row"
-											aria-expanded={!!open[c.key]}
-											onclick={() => (open[c.key] = !open[c.key])}
-										>
-											{@render statusIcon(s)}
-											<span class="ckey">{c.key}</span>
-											<span class="ctitle">{c.title}</span>
-											<span class="cmeta">
-												{#if c.exerciseCount}<span
-														class={['ex', { full: c.exercisesDone >= c.exerciseCount }]}
-														>{c.exercisesDone}/{c.exerciseCount}</span
-													>{/if}
-												{#if c.prereqs.length}
-													{@const info = prereqInfo(c)}
-													<span
-														class="pre"
-														title="builds on Ch {compactKeys(c.prereqs)} ({info.done}/{info.list
-															.length} done)"
-														style:--c={info.done === info.list.length
-															? STATUS.done.color
-															: '#a1a1aa'}>⟵ {compactKeys(c.prereqs)}</span
-													>
-												{/if}
-											</span>
-											<ChevronDown size={14} class={open[c.key] ? 'chev flipped' : 'chev'} />
-										</button>
-										{#if open[c.key]}{@render details(c)}{/if}
-									</li>
-								{/each}
-							</ul>
-						{/if}
-					</section>
-				{/if}
-			{/each}
-		</div>
+		{#if view === 'list'}<div class="parts">
+				{#each parts as p (p.key)}
+					{#if p.shown.length}
+						<section class="part card">
+							<button
+								class="part-head"
+								aria-expanded={!collapsedParts[p.key]}
+								onclick={() => (collapsedParts[p.key] = !collapsedParts[p.key])}
+							>
+								<span class="pnum">{p.num ?? 'A–E'}</span>
+								<span class="ptitle">{p.title}</span>
+								<span class="pbar">{@render bar(p.counts, p.chapters.length)}</span>
+								<span class="muted pcount">{p.counts.done}/{p.chapters.length}</span>
+								<ChevronDown size={16} class={!collapsedParts[p.key] ? 'chev flipped' : 'chev'} />
+							</button>
+							{#if !collapsedParts[p.key]}
+								<ul class="chapters">
+									{#each p.shown as c (c.key)}
+										{@const s = statusOf(c)}
+										<li id="ch-{c.key}" class={['chapter', s, { open: open[c.key] }]}>
+											<button
+												class="row"
+												aria-expanded={!!open[c.key]}
+												onclick={() => (open[c.key] = !open[c.key])}
+											>
+												{@render statusIcon(s)}
+												<span class="ckey">{c.key}</span>
+												<span class="ctitle">{c.title}</span>
+												<span class="cmeta">
+													{#if c.exerciseCount}<span
+															class={['ex', { full: c.exercisesDone >= c.exerciseCount }]}
+															>{c.exercisesDone}/{c.exerciseCount}</span
+														>{/if}
+													{#if c.prereqs.length}
+														{@const info = prereqInfo(c)}
+														<span
+															class="pre"
+															title="builds on Ch {compactKeys(c.prereqs)} ({info.done}/{info.list
+																.length} done)"
+															style:--c={info.done === info.list.length
+																? STATUS.done.color
+																: '#a1a1aa'}>⟵ {compactKeys(c.prereqs)}</span
+														>
+													{/if}
+												</span>
+												<ChevronDown size={14} class={open[c.key] ? 'chev flipped' : 'chev'} />
+											</button>
+											{#if open[c.key]}{@render details(c)}{/if}
+										</li>
+									{/each}
+								</ul>
+							{/if}
+						</section>
+					{/if}
+				{/each}
+			</div>{/if}
 
 		<aside class="side">
 			<section class="card">
@@ -436,7 +513,7 @@
 										><ListChecks size={14} /></span
 									>{:else}<span class="sicon" style:--c="#fbbf24"><StickyNote size={14} /></span
 									>{/if}
-								<a href="#ch-{a.chapterKey}" onclick={() => (open[a.chapterKey] = true)}
+								<a href="#ch-{a.chapterKey}" onclick={(e) => goTo(e, a.chapterKey)}
 									>{chapterLabel(a.chapterKey)}</a
 								>
 								<span class="atext">{activityText(a)}</span>
@@ -479,6 +556,61 @@
 		flex-direction: column;
 		gap: 1rem;
 	}
+	.math-page.map-view {
+		max-width: 110rem;
+	}
+	.views {
+		display: inline-flex;
+		margin-left: auto;
+		align-self: flex-start;
+		padding: 0.15rem;
+		border: 1px solid var(--site-border);
+		border-radius: 0.6rem;
+		background: var(--site-surface);
+	}
+	.views button {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		padding: 0.3rem 0.65rem;
+		border-radius: 0.45rem;
+		font-size: 0.82rem;
+		color: var(--site-muted);
+		cursor: pointer;
+	}
+	.views button:hover {
+		color: var(--site-text);
+	}
+	.views button.on {
+		background: var(--site-hover);
+		color: var(--site-text);
+	}
+	.map-wrap {
+		height: max(28rem, calc(100dvh - 6rem));
+		scroll-margin-top: 4.5rem;
+	}
+	.map-view .layout {
+		display: block;
+	}
+	.map-view .side {
+		position: static;
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
+		align-items: start;
+	}
+	.in-panel .details {
+		padding: 0;
+	}
+	.in-panel .seg {
+		display: grid;
+		grid-template-columns: repeat(5, minmax(0, 1fr));
+	}
+	.in-panel .seg button {
+		flex-direction: column;
+		gap: 0.15rem;
+		padding: 0.45rem 0.2rem;
+		font-size: 0.7rem;
+	}
 	.head {
 		display: flex;
 		align-items: center;