From 5d18f3b01c4afc066c067eadba91b512d4799944 Mon Sep 17 00:00:00 2001
From: Supa <supa@juliaelena.ro>
Date: Fri, 28 Aug 2026 10:16:21 +0300
Subject: [PATCH 1/7] Fix editor and ghost non-fractional alignment

---
 src/routes/+page.svelte | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4114585..b94f15b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -229,9 +229,26 @@ SPDX-License-Identifier: MIT
 
 	const syncScroll = () => {
 		if (!ghostEl || !editorEl) return;
-		ghostEl.scrollTop = editorEl.scrollTop;
-		ghostEl.scrollLeft = editorEl.scrollLeft;
-		scrollTop = editorEl.scrollTop;
+
+		// A <textarea>'s own text layout is native, not CSS boxes, so under a
+		// fractional browser zoom it can round each line/character advance to a
+		// slightly different device pixel than the plain overlay does. That
+		// makes the two elements' total scrollable size drift apart by a little
+		// more per line, invisible on a few lines but visible once there's a
+		// lot to scroll through. Mapping by scroll *fraction* rather than
+		// copying the raw offset keeps both ends exactly pinned regardless of
+		// that drift, instead of copying an offset that means something
+		// slightly different in each element.
+		const vRange = editorEl.scrollHeight - editorEl.clientHeight;
+		const hRange = editorEl.scrollWidth - editorEl.clientWidth;
+		const ghostVRange = ghostEl.scrollHeight - ghostEl.clientHeight;
+		const ghostHRange = ghostEl.scrollWidth - ghostEl.clientWidth;
+
+		ghostEl.scrollTop = vRange > 0 ? (editorEl.scrollTop / vRange) * ghostVRange : 0;
+		ghostEl.scrollLeft = hRange > 0 ? (editorEl.scrollLeft / hRange) * ghostHRange : 0;
+		// The section marker is drawn against the ghost's own line coordinates,
+		// so it has to follow the ghost's (corrected) offset, not the editor's.
+		scrollTop = ghostEl.scrollTop;
 		// Scrolling moves the text under a stationary pointer.
 		syncHover();
 		placeTooltip();

From 299a49cc9aa004cc0ccf81258bab7510d858f9a2 Mon Sep 17 00:00:00 2001
From: Supa <supa@juliaelena.ro>
Date: Fri, 28 Aug 2026 10:43:10 +0300
Subject: [PATCH 2/7] Optimize parser and overlay render

---
 src/lib/grammar.ts      |  15 ++--
 src/lib/markdown.ts     |  19 ++++-
 src/lib/parser.ts       | 129 ++++++++++++++++++++++++---------
 src/lib/types.ts        |  21 +++++-
 src/routes/+page.svelte | 156 ++++++++++++++++++++++++++++++----------
 src/routes/layout.css   |  17 +++++
 6 files changed, 274 insertions(+), 83 deletions(-)

diff --git a/src/lib/grammar.ts b/src/lib/grammar.ts
index 6e3791a..6af32f2 100644
--- a/src/lib/grammar.ts
+++ b/src/lib/grammar.ts
@@ -30,7 +30,11 @@ type Node =
 
 export type Token = { text: string; start: number };
 
-/** A span of the source bound to a placeholder (`name`) or matched literally. */
+/**
+ * A span of the line bound to a placeholder (`name`) or matched literally.
+ * Offsets are relative to the start of the line, so a parsed line can be cached
+ * and reused wherever in a description the same text turns up.
+ */
 export type Match = { text: string; start: number; end: number; name: string | null };
 
 export type MatchResult = {
@@ -236,12 +240,7 @@ const matchAtoms = (
  * forgiving — a line being typed is malformed most of the time — so it binds
  * what it can and reports where it gave up rather than failing outright.
  */
-export const matchTemplate = (
-	grammar: Grammar,
-	tokens: Token[],
-	source: string,
-	sourceStart: number
-): MatchResult => {
+export const matchTemplate = (grammar: Grammar, tokens: Token[], source: string): MatchResult => {
 	// A greedy argument runs to the end of the last token rather than the end of
 	// the line, so trailing whitespace never lands inside a highlighted field.
 	const last = tokens[tokens.length - 1];
@@ -277,7 +276,7 @@ export const matchTemplate = (
 		const tail = bound.matches[bound.matches.length - 1];
 		if (tail?.name && grammar.isGreedy(tail.name) && consumed < tokens.length) {
 			tail.end = lineEnd;
-			tail.text = source.slice(tail.start - sourceStart, lineEnd - sourceStart);
+			tail.text = source.slice(tail.start, lineEnd);
 			consumed = tokens.length;
 		}
 
diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts
index 6641915..ab2fd87 100644
--- a/src/lib/markdown.ts
+++ b/src/lib/markdown.ts
@@ -26,10 +26,27 @@ const inline = (text: string) =>
 				: match
 		);
 
-export const markdown = (text: string) =>
+const render = (text: string) =>
 	text
 		.split(/\n{2,}/)
 		.map((paragraph) => paragraph.trim())
 		.filter(Boolean)
 		.map((paragraph) => `<p class="mt-2 first:mt-0">${inline(paragraph)}</p>`)
 		.join('');
+
+// The panel re-renders every prose block it shows each time the active token
+// changes — which, on hover, is as often as the pointer crosses a field. The
+// input is drawn from the fixed set of strings in the spec, so rendering each
+// one once and keeping it costs a bounded amount of memory.
+const rendered = new Map<string, string>();
+
+export const markdown = (text: string) => {
+	let html = rendered.get(text);
+
+	if (html === undefined) {
+		html = render(text);
+		rendered.set(text, html);
+	}
+
+	return html;
+};
diff --git a/src/lib/parser.ts b/src/lib/parser.ts
index eb1630f..fe15362 100644
--- a/src/lib/parser.ts
+++ b/src/lib/parser.ts
@@ -4,11 +4,39 @@
 
 import { grammarFor, matchTemplate, type Token } from './grammar';
 import { attributeName, lookup } from './spec';
-import type { SDPField, SDPLine, SDPLocation, SDPPart } from './types';
+import type { Details, SDPField, SDPLine, SDPLocation, SDPOutline, SDPPart } from './types';
 
 const LINE_BREAK = /\r\n|\r|\n/g;
 const TOKEN = /\S+/g;
 
+/** Everything about a line that is decided by its own text and nothing else. */
+type LineCore = Pick<SDPLine, 'content' | 'type' | 'attribute' | 'details' | 'fields' | 'parts'>;
+
+/**
+ * Parsing a line is pure in its content, so the same text always yields the same
+ * core. An edit only ever rewrites the line the caret is on, which means a
+ * keystroke reparses one line and reuses every other — what stops a long
+ * description from being rebuilt from scratch between two characters.
+ */
+const cores = new Map<string, LineCore>();
+
+// Every intermediate state of a line being typed is cached too, so the cache is
+// dropped whole once it outgrows any plausible description rather than being
+// aged an entry at a time.
+const CORE_LIMIT = 8192;
+
+const coreFor = (content: string): LineCore => {
+	const cached = cores.get(content);
+	if (cached) return cached;
+
+	const core = parseLine(content);
+
+	if (cores.size >= CORE_LIMIT) cores.clear();
+	cores.set(content, core);
+
+	return core;
+};
+
 /**
  * Parses an SDP body into lines that keep their absolute character offsets in
  * the source text, so the caret position in the editor can be mapped back onto
@@ -26,10 +54,10 @@ export const parseSDP = (sdp: string): SDPLine[] => {
 
 	LINE_BREAK.lastIndex = 0;
 	while ((match = LINE_BREAK.exec(sdp)) !== null) {
-		lines.push(parseLine(sdp.slice(lineStart, match.index), lineStart));
+		lines.push(place(sdp.slice(lineStart, match.index), lineStart));
 		lineStart = match.index + match[0].length;
 	}
-	lines.push(parseLine(sdp.slice(lineStart), lineStart));
+	lines.push(place(sdp.slice(lineStart), lineStart));
 
 	// Everything after an "m=" line belongs to that media description, and
 	// attributes read differently there — a media-level "a=mid" names a stream,
@@ -50,6 +78,38 @@ export const parseSDP = (sdp: string): SDPLine[] => {
 	return lines;
 };
 
+/** Anchors a line's cached core at the offset this document puts it at. */
+const place = (content: string, start: number): SDPLine => ({
+	...coreFor(content),
+	start,
+	end: start + content.length,
+	section: null
+});
+
+/**
+ * The two whole-document facts the editor's chrome needs, gathered in the one
+ * pass the lines are already being walked in: the run of lines each media
+ * description spans, for the gutter marker, and how wide the widest line is,
+ * which is what the overlay reserves room for while most lines go unrendered.
+ */
+export const outlineOf = (lines: SDPLine[]): SDPOutline => {
+	const sections = new Map<number, { first: number; count: number }>();
+	let columns = 0;
+
+	lines.forEach((line, i) => {
+		if (line.content.length > columns) columns = line.content.length;
+		if (line.section === null) return;
+
+		const span = sections.get(line.section);
+		if (!span) sections.set(line.section, { first: i, count: 1 });
+		// Blank lines trailing the section say nothing about it, so the marker
+		// stops at the last line that does.
+		else if (line.content.trim()) span.count = i - span.first + 1;
+	});
+
+	return { sections, columns };
+};
+
 const tokenize = (value: string, valueStart: number): Token[] => {
 	const tokens: Token[] = [];
 	let token: RegExpExecArray | null;
@@ -62,15 +122,8 @@ const tokenize = (value: string, valueStart: number): Token[] => {
 	return tokens;
 };
 
-const parseLine = (content: string, start: number): SDPLine => {
-	const line: SDPLine = {
-		content,
-		start,
-		end: start + content.length,
-		fields: [],
-		parts: [],
-		section: null
-	};
+const parseLine = (content: string): LineCore => {
+	const line: LineCore = { content, fields: [], parts: [] };
 
 	// An SDP line is "<single-character type>=<value>"; anything else is free text.
 	const indent = content.length - content.trimStart().length;
@@ -81,28 +134,27 @@ const parseLine = (content: string, start: number): SDPLine => {
 
 	line.type = content[indent];
 
-	const valueStart = start + indent + 2;
-	const value = content.slice(indent + 2);
-	const tokens = tokenize(value, valueStart);
+	const valueStart = indent + 2;
+	const tokens = tokenize(content.slice(valueStart), valueStart);
 
 	if (line.type === 'a' && tokens.length) line.attribute = attributeName(tokens[0].text);
 
 	line.details = lookup(line.type, tokens[0]?.text ?? '');
-	line.fields = bindFields(line, tokens, content, start);
+	line.fields = bindFields(line.details, tokens, content);
 	line.parts = buildParts(line, indent);
 
 	return line;
 };
 
 /** Runs the line's grammar over its tokens and resolves each match to an argument. */
-const bindFields = (line: SDPLine, tokens: Token[], content: string, start: number): SDPField[] => {
+const bindFields = (details: Details | undefined, tokens: Token[], content: string): SDPField[] => {
 	const fields: SDPField[] = [];
 
 	let consumed = 0;
 
-	if (line.details) {
-		const grammar = grammarFor(line.details);
-		const result = matchTemplate(grammar, tokens, content, start);
+	if (details) {
+		const grammar = grammarFor(details);
+		const result = matchTemplate(grammar, tokens, content);
 
 		consumed = result.consumed;
 
@@ -139,42 +191,51 @@ const bindFields = (line: SDPLine, tokens: Token[], content: string, start: numb
  * fields — ends up in exactly one part. That keeps the rendered overlay
  * glyph-for-glyph aligned with the textarea underneath.
  */
-const buildParts = (line: SDPLine, indent: number): SDPPart[] => {
-	const { content, start, type } = line;
+const buildParts = (line: LineCore, indent: number): SDPPart[] => {
+	const { content, type } = line;
 	const parts: SDPPart[] = [];
 
 	if (indent) parts.push({ text: content.slice(0, indent), kind: 'plain' });
 	parts.push({ text: type as string, kind: 'type' });
 
-	let cursor = start + indent + 1;
+	let cursor = indent + 1;
 
 	line.fields.forEach((field, fieldIndex) => {
 		if (field.start > cursor) {
-			parts.push({ text: content.slice(cursor - start, field.start - start), kind: 'plain' });
+			parts.push({ text: content.slice(cursor, field.start), kind: 'plain' });
 		}
 
 		parts.push({ text: field.text, kind: field.kind, fieldIndex });
 		cursor = field.end;
 	});
 
-	if (cursor < line.end) parts.push({ text: content.slice(cursor - start), kind: 'plain' });
+	if (cursor < content.length) parts.push({ text: content.slice(cursor), kind: 'plain' });
 
 	return parts;
 };
 
 /** Maps a caret offset in the source text onto the line and field it sits in. */
 export const locate = (lines: SDPLine[], pos: number): SDPLocation | null => {
-	for (let i = 0; i < lines.length; i++) {
-		const line = lines[i];
-		if (pos > line.end) continue;
+	if (!lines.length) return null;
 
-		for (let j = 0; j < line.fields.length; j++) {
-			const field = line.fields[j];
-			if (pos >= field.start && pos <= field.end) return { lineIndex: i, fieldIndex: j };
-		}
+	// Lines are in order and cover the text end to end, so the one holding an
+	// offset is a binary search rather than a walk down from the top.
+	let low = 0;
+	let high = lines.length - 1;
+
+	while (low < high) {
+		const mid = (low + high) >> 1;
+		if (pos > lines[mid].end) low = mid + 1;
+		else high = mid;
+	}
+
+	const line = lines[low];
+	const offset = pos - line.start;
 
-		return { lineIndex: i, fieldIndex: null };
+	for (let j = 0; j < line.fields.length; j++) {
+		const field = line.fields[j];
+		if (offset >= field.start && offset <= field.end) return { lineIndex: low, fieldIndex: j };
 	}
 
-	return lines.length ? { lineIndex: lines.length - 1, fieldIndex: null } : null;
+	return { lineIndex: low, fieldIndex: null };
 };
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 94f3c91..2e499fb 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -33,12 +33,17 @@ export type Details = {
 	level?: Level;
 };
 
-/** One matched span of a line: either a grammar literal or a bound argument. */
+/**
+ * One matched span of a line: either a grammar literal or a bound argument.
+ * Offsets are relative to the line, not to the description, so the same line
+ * text parses to the same fields wherever it appears — which is what lets the
+ * parser cache a line and reuse it across edits.
+ */
 export type SDPField = {
 	text: string;
-	/** Absolute offset of the first character in the source text. */
+	/** Offset of the first character, from the start of the line. */
 	start: number;
-	/** Absolute offset just past the last character in the source text. */
+	/** Offset just past the last character, from the start of the line. */
 	end: number;
 	/** Index into the owning `Details.args`, or null for literals and unmatched tokens. */
 	argIndex: number | null;
@@ -55,7 +60,9 @@ export type SDPPart = {
 
 export type SDPLine = {
 	content: string;
+	/** Absolute offset of the line's first character in the source text. */
 	start: number;
+	/** Absolute offset just past the line's last character in the source text. */
 	end: number;
 	/** The single character before the "=", when the line has the shape "x=value". */
 	type?: string;
@@ -72,3 +79,11 @@ export type SDPLine = {
 
 /** A caret or pointer position resolved onto a line and, when inside one, a field. */
 export type SDPLocation = { lineIndex: number; fieldIndex: number | null };
+
+/** Whole-description measurements the editor's chrome is laid out from. */
+export type SDPOutline = {
+	/** Media section index → the run of lines it spans, for the gutter marker. */
+	sections: Map<number, { first: number; count: number }>;
+	/** Length of the longest line, which sets how far the editor scrolls sideways. */
+	columns: number;
+};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b94f15b..94b8ede 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,20 +8,32 @@ SPDX-License-Identifier: MIT
 	import pionLogo from '$lib/assets/pion-logo.svg?raw';
 	import { syntaxParts } from '$lib/grammar';
 	import { markdown } from '$lib/markdown';
-	import { locate, parseSDP } from '$lib/parser';
+	import { locate, outlineOf, parseSDP } from '$lib/parser';
 	import { exampleSDP } from '$lib/spec';
 	import { theme } from '$lib/theme.svelte';
 	import type { SDPLocation, SDPPart } from '$lib/types';
+	import { tick } from 'svelte';
 	import { fade } from 'svelte/transition';
 
 	let editorEl = $state<HTMLTextAreaElement>();
 	let ghostEl = $state<HTMLDivElement>();
+	let rowsEl = $state<HTMLDivElement>();
 	let viewportEl = $state<HTMLDivElement>();
 
 	// The section marker is drawn outside the scrolling overlay, so it has to be
 	// offset by hand to stay level with the lines it spans.
 	let scrollTop = $state(0);
 
+	// Row geometry, read back from the CSS both layers already share rather than
+	// repeated here, so the overlay cannot drift out of step with the text.
+	let lineHeight = $state(24);
+	let padding = $state(0);
+	let ghostHeight = $state(0);
+
+	// Rows built above and below the visible ones, so a scroll has something to
+	// show before the next render catches up.
+	const OVERSCAN = 8;
+
 	let sdpText = $state(exampleSDP);
 	let caret = $state(0);
 	let hover = $state<SDPLocation | null>(null);
@@ -34,6 +46,16 @@ SPDX-License-Identifier: MIT
 	let usingKeyboard = $state(false);
 
 	let lines = $derived(parseSDP(sdpText));
+	let outline = $derived(outlineOf(lines));
+
+	// The editor never wraps and every line is one row of a known height, so
+	// which rows are on screen is arithmetic rather than something to measure.
+	// Only those are built: a description of ten thousand lines costs the same
+	// to render as one of fifty, and the spans the overlay does build are few
+	// enough that re-styling them all as the pointer moves stays free.
+	let firstRow = $derived(Math.max(0, Math.floor((scrollTop - padding) / lineHeight) - OVERSCAN));
+	let rowCount = $derived(Math.ceil(ghostHeight / lineHeight) + OVERSCAN * 2 + 1);
+	let rows = $derived(lines.slice(firstRow, firstRow + rowCount));
 	let active = $derived((usingKeyboard ? null : hover) ?? locate(lines, caret));
 
 	// Where the caret sits, independent of whatever the mouse is doing. This
@@ -82,19 +104,7 @@ SPDX-License-Identifier: MIT
 	// preamble rather than a section, so they get no marker.
 	let sectionSpan = $derived.by(() => {
 		const section = active ? lines[active.lineIndex]?.section : null;
-		if (section == null) return null;
-
-		let first = -1;
-		let last = -1;
-		lines.forEach((line, i) => {
-			if (line.section !== section) return;
-			if (first === -1) first = i;
-			// Blank lines trailing the section say nothing about it, so the marker
-			// stops at the last line that does.
-			if (line.content.trim()) last = i;
-		});
-
-		return first === -1 ? null : { first, count: Math.max(last, first) - first + 1 };
+		return section == null ? null : (outline.sections.get(section) ?? null);
 	});
 
 	// Where this line sits, which is what decides whether "a=" lines are in scope.
@@ -146,17 +156,24 @@ SPDX-License-Identifier: MIT
 			: caretLocation.fieldIndex === part.fieldIndex;
 	};
 
+	// Rows exist only for the slice of the document on screen, so a line's element
+	// sits at its offset within that slice — and is simply absent once the line is
+	// scrolled far enough out of view, which is exactly when nothing anchored to
+	// it should be shown either.
+	const lineElement = (lineIndex: number): Element | null =>
+		rowsEl?.children[lineIndex - firstRow] ?? null;
+
 	// Found by indexing straight into the DOM from `debouncedActive` rather than
 	// querying for a marker attribute: the marker is written by the same render
 	// pass that this effect can run ahead of, which left the tooltip measuring
-	// last render's anchor. The span layout itself never lags — only classes and
-	// attributes do — so indexing is safe the instant `debouncedActive` changes.
+	// last render's anchor. The span layout itself never lags — only classes do —
+	// so indexing is safe the instant `debouncedActive` changes.
 	const tooltipAnchorEl = (): Element | null => {
-		if (!debouncedActive || !ghostEl) return null;
+		if (!debouncedActive) return null;
 		const { lineIndex, fieldIndex } = debouncedActive;
 
 		const parts = lines[lineIndex]?.parts;
-		const lineEl = ghostEl.children[lineIndex];
+		const lineEl = lineElement(lineIndex);
 		if (!parts || !lineEl) return null;
 
 		const p = parts.findIndex(
@@ -192,12 +209,16 @@ SPDX-License-Identifier: MIT
 	 * the same height, which turns the vertical search into one division.
 	 */
 	const locatePoint = (x: number, y: number): SDPLocation | null => {
-		const first = ghostEl?.children[0]?.getBoundingClientRect();
-		if (!first?.height) return null;
+		if (!rowsEl) return null;
+
+		// The rows begin at `firstRow` and are a fixed height, so one measurement
+		// of where they start answers the vertical half outright.
+		const top = rowsEl.getBoundingClientRect().top;
+		const lineIndex = firstRow + Math.floor((y - top) / lineHeight);
+		if (lineIndex < 0 || lineIndex >= lines.length) return null;
 
-		const lineIndex = Math.floor((y - first.top) / first.height);
-		const lineEl = ghostEl?.children[lineIndex];
-		if (!lineEl || lineIndex < 0 || lineIndex >= lines.length) return null;
+		const lineEl = lineElement(lineIndex);
+		if (!lineEl) return null;
 
 		// Parts are rendered one span each, so a span's position is its part's index.
 		const parts = lines[lineIndex].parts;
@@ -216,10 +237,20 @@ SPDX-License-Identifier: MIT
 		hover = pointer ? locatePoint(pointer.x, pointer.y) : null;
 	};
 
+	// mousemove fires several times per frame and every hit test reads layout back
+	// out of the DOM, so the pointer is only recorded here and resolved once, just
+	// before the frame that would show the result.
+	let hoverFrame = 0;
+
 	const onPointerMove = (event: MouseEvent) => {
 		pointer = { x: event.clientX, y: event.clientY };
 		usingKeyboard = false;
-		syncHover();
+
+		if (hoverFrame) return;
+		hoverFrame = requestAnimationFrame(() => {
+			hoverFrame = 0;
+			syncHover();
+		});
 	};
 
 	const onPointerLeave = () => {
@@ -227,6 +258,21 @@ SPDX-License-Identifier: MIT
 		hover = null;
 	};
 
+	// Scrolling moves the text under a stationary pointer and swaps out which rows
+	// exist at all. Both the hit test and the tooltip anchor measure those rows, so
+	// they have to wait for the new offset to render rather than read the old one.
+	let syncPending = false;
+
+	const syncAfterRender = () => {
+		if (syncPending) return;
+		syncPending = true;
+		tick().then(() => {
+			syncPending = false;
+			syncHover();
+			placeTooltip();
+		});
+	};
+
 	const syncScroll = () => {
 		if (!ghostEl || !editorEl) return;
 
@@ -249,9 +295,7 @@ SPDX-License-Identifier: MIT
 		// The section marker is drawn against the ghost's own line coordinates,
 		// so it has to follow the ghost's (corrected) offset, not the editor's.
 		scrollTop = ghostEl.scrollTop;
-		// Scrolling moves the text under a stationary pointer.
-		syncHover();
-		placeTooltip();
+		syncAfterRender();
 	};
 
 	const placeTooltip = () => {
@@ -277,17 +321,37 @@ SPDX-License-Identifier: MIT
 		showTooltip = true;
 	};
 
+	// The row height and the padding above the first row are what the visible
+	// slice is counted off in, so they are taken from the rendered overlay rather
+	// than restated as numbers that could fall out of step with the stylesheet.
+	const measureRows = () => {
+		if (!ghostEl) return;
+
+		const style = getComputedStyle(ghostEl);
+		lineHeight = parseFloat(style.lineHeight) || lineHeight;
+		padding = parseFloat(style.paddingTop) || 0;
+	};
+
 	$effect(() => theme.hydrate());
 
-	// Anything that moves the editor invalidates the measured anchor.
+	// Anything that moves or resizes the editor invalidates the measured anchor,
+	// and a resize can also change the metrics the rows are counted off in.
 	$effect(() => {
+		void ghostEl;
+		measureRows();
+
 		const reposition = () => placeTooltip();
+		const remeasure = () => {
+			measureRows();
+			placeTooltip();
+		};
 
 		window.addEventListener('scroll', reposition, true);
-		window.addEventListener('resize', reposition);
+		window.addEventListener('resize', remeasure);
 		return () => {
 			window.removeEventListener('scroll', reposition, true);
-			window.removeEventListener('resize', reposition);
+			window.removeEventListener('resize', remeasure);
+			cancelAnimationFrame(hoverFrame);
 		};
 	});
 
@@ -304,8 +368,10 @@ SPDX-License-Identifier: MIT
 	$effect(() => {
 		// Re-measure once the overlay has re-rendered. This tracks `debouncedActive`
 		// rather than just the tooltip text, because neighbouring lines often share
-		// a tooltip ("Attribute") and the anchor still has to move between them.
-		void [debouncedActive, tooltip, sdpText, focused];
+		// a tooltip ("Attribute") and the anchor still has to move between them;
+		// and `rows`, because the anchor's element only exists while its line is
+		// one of the ones built.
+		void [debouncedActive, tooltip, rows, focused];
 		placeTooltip();
 	});
 
@@ -403,14 +469,30 @@ SPDX-License-Identifier: MIT
 			</div>
 
 			<div
-				class="sdp-layer pointer-events-none absolute inset-0 overflow-hidden"
+				class="sdp-layer sdp-overlay pointer-events-none absolute inset-0 overflow-hidden"
 				aria-hidden="true"
 				bind:this={ghostEl}
+				bind:clientHeight={ghostHeight}
 			>
-				<!-- prettier-ignore -->
-				{#each lines as line, i (i)}
-					<div class={['sdp-line w-fit min-w-full rounded-sm', active?.lineIndex === i && line.content && 'bg-line-highlight']}>{#each line.parts as part, p (p)}<span class={partClass(i, part)} data-active={isActivePart(i, part) || undefined}>{part.text}</span>{/each}</div>
-				{/each}
+				<!--
+					The spacer stands in for every line that was not built, so the overlay
+					still scrolls exactly as far as the textarea does and `syncScroll`'s
+					two ends stay comparable. Its width is given in `ch` — one character
+					of the monospace face both layers share — which reserves the longest
+					line's room without that line having to exist.
+				-->
+				<div
+					class="w-max whitespace-normal"
+					style="min-width: {outline.columns}ch; height: {lines.length * lineHeight}px;"
+				>
+					<div bind:this={rowsEl} style="transform: translateY({firstRow * lineHeight}px);">
+						{#each rows as line, r (firstRow + r)}
+							{@const i = firstRow + r}
+							<!-- prettier-ignore -->
+							<div class={['sdp-line w-fit min-w-full rounded-sm', active?.lineIndex === i && line.content && 'bg-line-highlight']}>{#each line.parts as part, p (p)}<span class={partClass(i, part)}>{part.text}</span>{/each}</div>
+						{/each}
+					</div>
+				</div>
 			</div>
 
 			{#if sdpText === ''}
diff --git a/src/routes/layout.css b/src/routes/layout.css
index 2dc12ac..363a015 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -124,8 +124,25 @@ code {
 	tab-size: 2;
 }
 
+/*
+ * A block container counts its own trailing padding as somewhere that can be
+ * scrolled to; a textarea's native text layout does not. That gave the overlay
+ * one padding more sideways travel than the text it mirrors, so mapping the two
+ * by scroll fraction pulled them apart towards the right-hand end. The overlay
+ * only needs the padding that places its first character.
+ */
+.sdp-overlay {
+	padding-right: 0;
+}
+
+/*
+ * A line owns its own whitespace handling rather than inheriting it, so the
+ * wrappers the overlay hangs its rows off can be indented normally in the
+ * template without that indentation rendering as text inside the editor.
+ */
 .sdp-line {
 	height: var(--sdp-line-height);
+	white-space: pre;
 }
 
 /* The wordmark is drawn with fill="currentColor"; the dot keeps the brand red. */

From 544f7b0719604222f5b6a0ff0762fc2f3e4ea2dd Mon Sep 17 00:00:00 2001
From: Supa <supa@juliaelena.ro>
Date: Fri, 28 Aug 2026 11:26:21 +0300
Subject: [PATCH 3/7] Add overlay scrollbar

---
 src/routes/+page.svelte | 149 +++++++++++++++++++++++++++++++++++++++-
 src/routes/layout.css   |  79 ++++++++++++++++++---
 2 files changed, 217 insertions(+), 11 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 94b8ede..00c665b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -273,6 +273,92 @@ SPDX-License-Identifier: MIT
 		});
 	};
 
+	// What the editor has to scroll through, which is everything the overlay
+	// scrollbars are drawn from. Read back rather than derived, because the
+	// textarea's own layout is the authority on how wide its longest line is.
+	let view = $state({ top: 0, left: 0, scrollH: 0, scrollW: 0, clientH: 0, clientW: 0 });
+
+	const readView = () => {
+		if (!editorEl) return;
+
+		view = {
+			top: editorEl.scrollTop,
+			left: editorEl.scrollLeft,
+			scrollH: editorEl.scrollHeight,
+			scrollW: editorEl.scrollWidth,
+			clientH: editorEl.clientHeight,
+			clientW: editorEl.clientWidth
+		};
+	};
+
+	// Track lengths are measured rather than assumed, so the thumb arithmetic
+	// never has to restate the thickness the stylesheet picked.
+	let trackY = $state(0);
+	let trackX = $state(0);
+
+	// Shown only when there is something to scroll, and each track stops short of
+	// the other so the two never meet in the corner.
+	let showY = $derived(view.scrollH > view.clientH + 1);
+	let showX = $derived(view.scrollW > view.clientW + 1);
+
+	const MIN_THUMB = 24;
+
+	const thumbFor = (offset: number, content: number, client: number, track: number) => {
+		const range = content - client;
+		if (range <= 1 || track <= 0) return null;
+
+		const size = Math.max(MIN_THUMB, (client / content) * track);
+		const travel = track - size;
+
+		return { size, travel, range, pos: travel > 0 ? (offset / range) * travel : 0 };
+	};
+
+	let thumbY = $derived(thumbFor(view.top, view.scrollH, view.clientH, trackY));
+	let thumbX = $derived(thumbFor(view.left, view.scrollW, view.clientW, trackX));
+
+	const percent = (offset: number, content: number, client: number) =>
+		content > client ? Math.round((offset / (content - client)) * 100) : 0;
+
+	/**
+	 * Drives the editor from its overlay scrollbar. Pressing the track jumps the
+	 * thumb under the pointer and then keeps dragging from there, so a click and
+	 * a drag are the same gesture. Everything else follows from the editor's own
+	 * scroll event, exactly as it does for the wheel.
+	 */
+	const startDrag = (vertical: boolean) => (event: PointerEvent) => {
+		const thumb = vertical ? thumbY : thumbX;
+		const track = event.currentTarget as HTMLElement;
+		if (!editorEl || !thumb) return;
+
+		event.preventDefault();
+		track.setPointerCapture(event.pointerId);
+
+		const box = track.getBoundingClientRect();
+		const along = (e: PointerEvent) => (vertical ? e.clientY - box.top : e.clientX - box.left);
+
+		// Where on the thumb it was taken hold of; pressing the bare track centres
+		// the thumb on the pointer instead.
+		let grab = along(event) - thumb.pos;
+		if (grab < 0 || grab > thumb.size) grab = thumb.size / 2;
+
+		const to = (e: PointerEvent) => {
+			const offset = thumb.travel > 0 ? ((along(e) - grab) / thumb.travel) * thumb.range : 0;
+			if (vertical) editorEl!.scrollTop = offset;
+			else editorEl!.scrollLeft = offset;
+		};
+
+		const stop = () => {
+			track.removeEventListener('pointermove', to);
+			track.removeEventListener('pointerup', stop);
+			track.removeEventListener('pointercancel', stop);
+		};
+
+		to(event);
+		track.addEventListener('pointermove', to);
+		track.addEventListener('pointerup', stop);
+		track.addEventListener('pointercancel', stop);
+	};
+
 	const syncScroll = () => {
 		if (!ghostEl || !editorEl) return;
 
@@ -295,6 +381,7 @@ SPDX-License-Identifier: MIT
 		// The section marker is drawn against the ghost's own line coordinates,
 		// so it has to follow the ghost's (corrected) offset, not the editor's.
 		scrollTop = ghostEl.scrollTop;
+		readView();
 		syncAfterRender();
 	};
 
@@ -339,10 +426,12 @@ SPDX-License-Identifier: MIT
 	$effect(() => {
 		void ghostEl;
 		measureRows();
+		readView();
 
 		const reposition = () => placeTooltip();
 		const remeasure = () => {
 			measureRows();
+			readView();
 			placeTooltip();
 		};
 
@@ -372,6 +461,8 @@ SPDX-License-Identifier: MIT
 		// and `rows`, because the anchor's element only exists while its line is
 		// one of the ones built.
 		void [debouncedActive, tooltip, rows, focused];
+		// Editing changes how far there is to scroll, and so the size of a thumb.
+		readView();
 		placeTooltip();
 	});
 
@@ -469,7 +560,7 @@ SPDX-License-Identifier: MIT
 			</div>
 
 			<div
-				class="sdp-layer sdp-overlay pointer-events-none absolute inset-0 overflow-hidden"
+				class="sdp-layer pointer-events-none overflow-hidden"
 				aria-hidden="true"
 				bind:this={ghostEl}
 				bind:clientHeight={ghostHeight}
@@ -496,13 +587,14 @@ SPDX-License-Identifier: MIT
 			</div>
 
 			{#if sdpText === ''}
-				<div class="sdp-layer pointer-events-none absolute inset-0 opacity-60 select-none">
+				<div class="sdp-layer pointer-events-none opacity-60 select-none">
 					Paste your session description here...
 				</div>
 			{/if}
 
 			<textarea
-				class="sdp-layer absolute inset-0 size-full resize-none overflow-auto bg-transparent text-transparent caret-heading outline-none"
+				id="sdp-editor"
+				class="sdp-layer sdp-editor resize-none overflow-auto bg-transparent text-transparent caret-heading outline-none"
 				spellcheck="false"
 				autocapitalize="none"
 				autocomplete="off"
@@ -529,6 +621,57 @@ SPDX-License-Identifier: MIT
 					syncCaret();
 				}}
 				onblur={() => (focused = false)}></textarea>
+
+			<!--
+				Drawn against the frame rather than inside the editor, so the gutters
+				stay exactly one padding wide on both sides whatever the platform
+				would have spent on a scrollbar of its own.
+			-->
+			{#if showY}
+				<!--
+					Not a tab stop: the editor it controls is focusable and scrolls from
+					the keyboard itself, so this only has to describe where it has got to.
+				-->
+				<div
+					class="sdp-scrollbar sdp-scrollbar-y"
+					style="bottom: {showX ? 'var(--sdp-scrollbar)' : '0px'};"
+					bind:clientHeight={trackY}
+					onpointerdown={startDrag(true)}
+					role="scrollbar"
+					tabindex="-1"
+					aria-controls="sdp-editor"
+					aria-orientation="vertical"
+					aria-label="Scroll session description vertically"
+					aria-valuemin={0}
+					aria-valuemax={100}
+					aria-valuenow={percent(view.top, view.scrollH, view.clientH)}
+				>
+					{#if thumbY}
+						<div class="sdp-thumb" style="top: {thumbY.pos}px; height: {thumbY.size}px;"></div>
+					{/if}
+				</div>
+			{/if}
+
+			{#if showX}
+				<div
+					class="sdp-scrollbar sdp-scrollbar-x"
+					style="right: {showY ? 'var(--sdp-scrollbar)' : '0px'};"
+					bind:clientWidth={trackX}
+					onpointerdown={startDrag(false)}
+					role="scrollbar"
+					tabindex="-1"
+					aria-controls="sdp-editor"
+					aria-orientation="horizontal"
+					aria-label="Scroll session description horizontally"
+					aria-valuemin={0}
+					aria-valuemax={100}
+					aria-valuenow={percent(view.left, view.scrollW, view.clientW)}
+				>
+					{#if thumbX}
+						<div class="sdp-thumb" style="left: {thumbX.pos}px; width: {thumbX.size}px;"></div>
+					{/if}
+				</div>
+			{/if}
 		</div>
 
 		<aside class="min-h-0 overflow-y-auto lg:pr-2">
diff --git a/src/routes/layout.css b/src/routes/layout.css
index 363a015..d9f1275 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -49,6 +49,9 @@
 	--color-token-key-wash: light-dark(#9a5b1226, #e6b87733);
 	--color-token-value-wash: light-dark(#1f6f8b26, #9fd2e833);
 
+	--color-scrollbar: light-dark(#0f214247, #ffffff47);
+	--color-scrollbar-active: light-dark(#0f214285, #ffffff85);
+
 	--color-warn: light-dark(#b3261e, #ff8a80);
 	--color-warn-wash: light-dark(#b3261e1a, #ff8a801f);
 }
@@ -60,6 +63,7 @@
 
 	--sdp-padding: 0.75rem;
 	--sdp-line-height: 24px;
+	--sdp-scrollbar: 10px;
 }
 
 :root[data-theme='light'] {
@@ -116,7 +120,20 @@ code {
  * marker cannot drift out of step with the text either.
  */
 .sdp-layer {
-	padding: var(--sdp-padding);
+	position: absolute;
+
+	/*
+	 * Sideways room is made by insetting the layer rather than padding it. A
+	 * textarea's native text layout treats padding-left as somewhere the text
+	 * may scroll to but padding-right as nothing at all, so a padded editor can
+	 * neither arrow its way back to a left-hand gutter nor scroll far enough to
+	 * leave a right-hand one. Insetting gives both, and leaves the two layers
+	 * with the same scrollable width to boot.
+	 *
+	 */
+	inset: 0 var(--sdp-padding);
+	padding: var(--sdp-padding) 0;
+
 	font-family: var(--font-mono);
 	font-size: 16px;
 	line-height: var(--sdp-line-height);
@@ -125,14 +142,60 @@ code {
 }
 
 /*
- * A block container counts its own trailing padding as somewhere that can be
- * scrolled to; a textarea's native text layout does not. That gave the overlay
- * one padding more sideways travel than the text it mirrors, so mapping the two
- * by scroll fraction pulled them apart towards the right-hand end. The overlay
- * only needs the padding that places its first character.
+ * A native scrollbar is painted inside the element that scrolls, and that
+ * element is inset to make the text's gutters, which left the scrollbar floating
+ * short of the frame. So the editor's own are hidden and drawn as overlays
+ * instead: they sit against the frame, inside the gutter where they cover no
+ * text, and take nothing out of the editor's client box — which is what leaves
+ * both layers with exactly the same scrollport, and the overlay dead in step
+ * with the text at every offset.
  */
-.sdp-overlay {
-	padding-right: 0;
+.sdp-editor {
+	scrollbar-width: none;
+}
+
+.sdp-editor::-webkit-scrollbar {
+	display: none;
+}
+
+.sdp-scrollbar {
+	position: absolute;
+	z-index: 1;
+	touch-action: none;
+}
+
+.sdp-scrollbar-y {
+	top: 0;
+	right: 0;
+	width: var(--sdp-scrollbar);
+}
+
+.sdp-scrollbar-x {
+	bottom: 0;
+	left: 0;
+	height: var(--sdp-scrollbar);
+}
+
+.sdp-thumb {
+	position: absolute;
+	background-color: var(--color-scrollbar);
+	transition: background-color 150ms;
+}
+
+/* Square and flush: the frame's own rounding is what trims the ends. */
+.sdp-scrollbar-y .sdp-thumb {
+	right: 0;
+	width: var(--sdp-scrollbar);
+}
+
+.sdp-scrollbar-x .sdp-thumb {
+	bottom: 0;
+	height: var(--sdp-scrollbar);
+}
+
+.sdp-scrollbar:hover .sdp-thumb,
+.sdp-scrollbar:active .sdp-thumb {
+	background-color: var(--color-scrollbar-active);
 }
 
 /*

From ecda74e6c5d83e275007f34544a9109697d9cb94 Mon Sep 17 00:00:00 2001
From: Supa <supa@juliaelena.ro>
Date: Fri, 28 Aug 2026 14:36:39 +0300
Subject: [PATCH 4/7] Add editor line numbers

---
 src/routes/+page.svelte | 55 ++++++++++++++++++++++----
 src/routes/layout.css   | 87 +++++++++++++++++++++++++++++++++++++----
 2 files changed, 127 insertions(+), 15 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 00c665b..58d8afd 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -48,6 +48,12 @@ SPDX-License-Identifier: MIT
 	let lines = $derived(parseSDP(sdpText));
 	let outline = $derived(outlineOf(lines));
 
+	// Wide enough for the highest line number there is. Left as a `ch` expression
+	// rather than measured back in pixels, so the column the numbers sit in and
+	// the edge the text starts at are the same fractional width, not two roundings
+	// of it.
+	let digits = $derived(String(lines.length).length);
+
 	// The editor never wraps and every line is one row of a known height, so
 	// which rows are on screen is arithmetic rather than something to measure.
 	// Only those are built: a description of ten thousand lines costs the same
@@ -56,6 +62,9 @@ SPDX-License-Identifier: MIT
 	let firstRow = $derived(Math.max(0, Math.floor((scrollTop - padding) / lineHeight) - OVERSCAN));
 	let rowCount = $derived(Math.ceil(ghostHeight / lineHeight) + OVERSCAN * 2 + 1);
 	let rows = $derived(lines.slice(firstRow, firstRow + rowCount));
+
+	// The numbers standing against those rows, one-based the way an editor counts.
+	let numbers = $derived(Array.from({ length: rows.length }, (_, r) => firstRow + r + 1));
 	let active = $derived((usingKeyboard ? null : hover) ?? locate(lines, caret));
 
 	// Where the caret sits, independent of whatever the mouse is doing. This
@@ -107,6 +116,10 @@ SPDX-License-Identifier: MIT
 		return section == null ? null : (outline.sections.get(section) ?? null);
 	});
 
+	// The line the band runs across. A blank line has nothing to mark, so it gets
+	// no band even while the pointer is over it.
+	let highlightRow = $derived(active && lines[active.lineIndex]?.content ? active.lineIndex : null);
+
 	// Where this line sits, which is what decides whether "a=" lines are in scope.
 	let placement = $derived(
 		activeLine == null || activeLine.section === null
@@ -540,19 +553,47 @@ SPDX-License-Identifier: MIT
 		class="grid min-h-0 grid-rows-[minmax(0,3fr)_minmax(0,2fr)] gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,28rem)] lg:grid-rows-[minmax(0,1fr)]"
 	>
 		<div
-			class="relative overflow-hidden rounded-[5px] border border-hairline bg-surface transition-colors focus-within:border-subtle-outline"
+			class="sdp-frame relative overflow-hidden rounded-[5px] border border-hairline bg-surface transition-colors focus-within:border-subtle-outline"
+			style="--sdp-gutter: calc({digits}ch + 2 * var(--sdp-padding));"
 			bind:this={viewportEl}
 		>
 			<!--
-				The outer layer clips the marker to the editor; the inner one carries the
-				scroll offset, so only a change of section animates and scrolling stays
-				pinned to the text.
+				The band for the active line runs the whole width, underneath both the
+				numbers and the text, so nothing between the two edges is left out of
+				it. Drawn first, so everything else sits on top. The outer layer clips
+				it to the editor; the inner one carries the scroll offset.
 			-->
 			<div class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
 				<div style="transform: translateY({-scrollTop}px);">
+					{#if highlightRow !== null}
+						<div
+							class="absolute inset-x-0 bg-line-highlight"
+							style="top: calc(var(--sdp-padding) + {highlightRow} * var(--sdp-line-height)); height: var(--sdp-line-height);"
+						></div>
+					{/if}
+				</div>
+			</div>
+
+			<!--
+				Numbers follow the text down but not sideways, so they are moved by
+				the same offset the overlay is scrolled to rather than scrolling with
+				it, and only the rows on screen are built. The section marker belongs
+				to this column too, standing in the room the numbers leave before the
+				text; only a change of section animates.
+			-->
+			<div class="sdp-gutter" aria-hidden="true">
+				<div style="transform: translateY({firstRow * lineHeight - scrollTop}px);">
+					{#each numbers as n (n)}
+						<div class={['sdp-number', caretLocation?.lineIndex === n - 1 && 'sdp-number-active']}>
+							{n}
+						</div>
+					{/each}
+				</div>
+
+				<div class="absolute inset-0" style="transform: translateY({-scrollTop}px);">
 					{#if sectionSpan}
 						<div
-							class="absolute left-[5px] w-[2px] rounded-full bg-token-type opacity-60 transition-[top,height] duration-150"
+							class="sdp-section"
 							style="top: calc(var(--sdp-padding) + {sectionSpan.first} * var(--sdp-line-height)); height: calc({sectionSpan.count} * var(--sdp-line-height));"
 						></div>
 					{/if}
@@ -580,7 +621,7 @@ SPDX-License-Identifier: MIT
 						{#each rows as line, r (firstRow + r)}
 							{@const i = firstRow + r}
 							<!-- prettier-ignore -->
-							<div class={['sdp-line w-fit min-w-full rounded-sm', active?.lineIndex === i && line.content && 'bg-line-highlight']}>{#each line.parts as part, p (p)}<span class={partClass(i, part)}>{part.text}</span>{/each}</div>
+							<div class="sdp-line">{#each line.parts as part, p (p)}<span class={partClass(i, part)}>{part.text}</span>{/each}</div>
 						{/each}
 					</div>
 				</div>
@@ -655,7 +696,7 @@ SPDX-License-Identifier: MIT
 			{#if showX}
 				<div
 					class="sdp-scrollbar sdp-scrollbar-x"
-					style="right: {showY ? 'var(--sdp-scrollbar)' : '0px'};"
+					style="left: var(--sdp-gutter); right: {showY ? 'var(--sdp-scrollbar)' : '0px'};"
 					bind:clientWidth={trackX}
 					onpointerdown={startDrag(false)}
 					role="scrollbar"
diff --git a/src/routes/layout.css b/src/routes/layout.css
index d9f1275..4075aa4 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -64,6 +64,9 @@
 	--sdp-padding: 0.75rem;
 	--sdp-line-height: 24px;
 	--sdp-scrollbar: 10px;
+
+	/* What the section marker keeps clear of the text it stands beside. */
+	--sdp-marker-gap: 4px;
 }
 
 :root[data-theme='light'] {
@@ -123,15 +126,15 @@ code {
 	position: absolute;
 
 	/*
-	 * Sideways room is made by insetting the layer rather than padding it. A
-	 * textarea's native text layout treats padding-left as somewhere the text
-	 * may scroll to but padding-right as nothing at all, so a padded editor can
-	 * neither arrow its way back to a left-hand gutter nor scroll far enough to
-	 * leave a right-hand one. Insetting gives both, and leaves the two layers
-	 * with the same scrollable width to boot.
-	 *
+	 * No horizontal padding: a textarea's native text layout treats padding-left
+	 * as somewhere the text may scroll to but padding-right as nothing at all, so
+	 * a padded editor can neither arrow its way back to column 0 nor scroll far
+	 * enough to leave a gutter on the right. Beginning the layers after the line
+	 * numbers gives the left its room without either of those, and leaves both
+	 * layers with the same scrollable width.
 	 */
-	inset: 0 var(--sdp-padding);
+	inset: 0;
+	left: var(--sdp-gutter, 0px);
 	padding: var(--sdp-padding) 0;
 
 	font-family: var(--font-mono);
@@ -198,6 +201,74 @@ code {
 	background-color: var(--color-scrollbar-active);
 }
 
+/*
+ * The editor is laid out in characters — how wide the numbers need to be, how
+ * much room the overlay reserves for the longest line — so the frame carries the
+ * text metrics its children resolve `ch` against, including the ones that hold
+ * no text of their own.
+ */
+.sdp-frame {
+	font-family: var(--font-mono);
+	font-size: 16px;
+}
+
+/*
+ * The line numbers stand outside the text's scrolling box, so they hold still
+ * while it scrolls sideways and are moved by hand to follow it down. Their width
+ * is what the editor layers begin after, and it is measured rather than stated
+ * because it grows with the line count.
+ */
+.sdp-gutter {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: var(--sdp-gutter);
+	overflow: hidden;
+	padding: var(--sdp-padding) 0;
+	font-family: var(--font-mono);
+	font-size: 16px;
+	line-height: var(--sdp-line-height);
+	text-align: right;
+	user-select: none;
+}
+
+.sdp-number {
+	height: var(--sdp-line-height);
+	padding: 0 var(--sdp-padding);
+	color: var(--color-text);
+	opacity: 0.4;
+}
+
+/*
+ * The media description the active line belongs to, marked down the inside edge
+ * of the number column so the block a line is read against is visible without
+ * scanning upwards for the "m=" that opened it. It sits in the column rather
+ * than being offset into place from outside it, so the gap it keeps from the
+ * text is its own margin and not an arithmetic on the column's width.
+ */
+.sdp-section {
+	position: absolute;
+	right: var(--sdp-marker-gap);
+	width: 2px;
+	border-radius: 999px;
+	background-color: var(--color-token-type);
+	opacity: 0.6;
+	transition:
+		top 150ms,
+		height 150ms;
+}
+
+/*
+ * Marks where the caret is, and only that: the pointer sweeping over the text
+ * moves the highlight and the details panel, but the line you are editing is
+ * somewhere you put it deliberately and should not move with the mouse.
+ */
+.sdp-number-active {
+	color: var(--color-heading);
+	opacity: 1;
+}
+
 /*
  * A line owns its own whitespace handling rather than inheriting it, so the
  * wrappers the overlay hangs its rows off can be indented normally in the

From 706640fb56ef1eeb871edb7f2d61b3a77b7f269f Mon Sep 17 00:00:00 2001
From: Supa <supa@juliaelena.ro>
Date: Fri, 28 Aug 2026 15:14:18 +0300
Subject: [PATCH 5/7] Add caret scrolling margin

---
 src/routes/+page.svelte | 67 +++++++++++++++++++++++++++++++++++++++--
 src/routes/layout.css   |  8 +++++
 2 files changed, 73 insertions(+), 2 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 58d8afd..9e6aa7d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -211,8 +211,44 @@ SPDX-License-Identifier: MIT
 		];
 	};
 
+	// Extending a selection (Shift+arrow) leaves `selectionStart` pinned at the
+	// fixed anchor — the end actually moving is whichever one `selectionEnd`
+	// is when growing forward, `selectionStart` when growing backward. Reading
+	// plain `selectionStart` while shift-selecting downward would keep tracking
+	// the anchor's line instead of the one the selection is growing toward.
+	const selectionFocus = (el: HTMLTextAreaElement) =>
+		el.selectionDirection === 'backward' ? el.selectionStart : el.selectionEnd;
+
 	const syncCaret = () => {
-		if (editorEl) caret = editorEl.selectionStart;
+		if (editorEl) caret = selectionFocus(editorEl);
+	};
+
+	// How many lines of lookahead a keyboard-driven caret keeps between itself
+	// and the edge of the viewport, so the next few lines it's heading toward
+	// are already on screen rather than arriving one keystroke at a time.
+	const SCROLL_MARGIN = 5;
+
+	const applyScrollMargin = () => {
+		if (!editorEl) return;
+
+		const location = locate(lines, selectionFocus(editorEl));
+		if (!location) return;
+
+		// Capped at half the viewport, so a margin wider than the editor is
+		// tall can't force the top and bottom checks to fight each other.
+		const margin = Math.min(SCROLL_MARGIN * lineHeight, (editorEl.clientHeight - lineHeight) / 2);
+
+		const caretTop = padding + location.lineIndex * lineHeight;
+		const caretBottom = caretTop + lineHeight;
+
+		const minScrollTop = caretBottom + margin - editorEl.clientHeight;
+		const maxScrollTop = caretTop - margin;
+
+		if (editorEl.scrollTop < minScrollTop) {
+			editorEl.scrollTop = Math.min(minScrollTop, editorEl.scrollHeight - editorEl.clientHeight);
+		} else if (editorEl.scrollTop > maxScrollTop) {
+			editorEl.scrollTop = Math.max(0, maxScrollTop);
+		}
 	};
 
 	/**
@@ -650,8 +686,35 @@ SPDX-License-Identifier: MIT
 				oninput={() => {
 					usingKeyboard = true;
 					syncCaret();
+					// Typing, pasting, or a newline all fire here synchronously, in the
+					// same task as the browser's own bare-minimum auto-scroll — unlike
+					// pure caret navigation, there's no risk of reading a stale caret,
+					// so the margin correction lands before this task's own paint
+					// instead of waiting for the keydown-scheduled one a frame later.
+					applyScrollMargin();
+				}}
+				onkeydown={(event) => {
+					usingKeyboard = true;
+					if (
+						event.key !== 'Shift' &&
+						event.key !== 'Control' &&
+						event.key !== 'Alt' &&
+						event.key !== 'Meta'
+					) {
+						// Queued rather than run straight from the selectionchange event,
+						// which Chrome dispatches as its own later task: by then the
+						// browser has already painted its own bare-minimum auto-scroll,
+						// so correcting the margin there lands a frame late and reads as
+						// two scrolls. rAF still runs after this key's default action (the
+						// caret move and that auto-scroll) but before the next paint, so
+						// only the corrected position is ever shown. A microtask is too
+						// early here — for pure caret navigation Chrome can still be
+						// mid-way through moving the selection at that point.
+						requestAnimationFrame(() => {
+							if (document.activeElement === editorEl) applyScrollMargin();
+						});
+					}
 				}}
-				onkeydown={() => (usingKeyboard = true)}
 				onclick={() => {
 					usingKeyboard = true;
 					syncCaret();
diff --git a/src/routes/layout.css b/src/routes/layout.css
index 4075aa4..747d4e0 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -155,6 +155,14 @@ code {
  */
 .sdp-editor {
 	scrollbar-width: none;
+
+	/*
+	 * Without this, flinging or holding a scroll past either edge rubber-bands
+	 * the content and springs it back, which reads as a jump rather than the
+	 * scroll simply stopping. The ghost overlay is driven off this element's
+	 * own scrollTop/scrollLeft, so a bounce here would drag it along too.
+	 */
+	overscroll-behavior: contain;
 }
 
 .sdp-editor::-webkit-scrollbar {

From 410a0773a6de0651f3e9a7ead0536d6ab6c66125 Mon Sep 17 00:00:00 2001
From: Supa <supa@juliaelena.ro>
Date: Fri, 28 Aug 2026 15:21:20 +0300
Subject: [PATCH 6/7] Fix scrollbar edge

---
 src/routes/layout.css | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/routes/layout.css b/src/routes/layout.css
index 747d4e0..ccf852f 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -129,12 +129,14 @@ code {
 	 * No horizontal padding: a textarea's native text layout treats padding-left
 	 * as somewhere the text may scroll to but padding-right as nothing at all, so
 	 * a padded editor can neither arrow its way back to column 0 nor scroll far
-	 * enough to leave a gutter on the right. Beginning the layers after the line
-	 * numbers gives the left its room without either of those, and leaves both
-	 * layers with the same scrollable width.
+	 * enough to leave a gutter on the right. Insetting the layers instead — after
+	 * the line numbers on the left, short of the vertical scrollbar's width on the
+	 * right — gives both edges their room without either problem, and leaves every
+	 * layer with the same scrollable width.
 	 */
 	inset: 0;
 	left: var(--sdp-gutter, 0px);
+	right: var(--sdp-scrollbar, 0px);
 	padding: var(--sdp-padding) 0;
 
 	font-family: var(--font-mono);

From 22027a4de0bf39f29c282aa91a1fc68f275b0e29 Mon Sep 17 00:00:00 2001
From: Supa <supa@juliaelena.ro>
Date: Fri, 28 Aug 2026 15:27:50 +0300
Subject: [PATCH 7/7] Reset scroll after reload

---
 src/routes/+page.svelte | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9e6aa7d..affdcda 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -470,6 +470,20 @@ SPDX-License-Identifier: MIT
 
 	$effect(() => theme.hydrate());
 
+	$effect(() => {
+		const resetScroll = () => {
+			if (editorEl) {
+				editorEl.scrollTop = 0;
+				editorEl.scrollLeft = 0;
+				syncScroll();
+			}
+		};
+
+		resetScroll();
+		window.addEventListener('pageshow', resetScroll);
+		return () => window.removeEventListener('pageshow', resetScroll);
+	});
+
 	// Anything that moves or resizes the editor invalidates the measured anchor,
 	// and a resize can also change the metrics the rows are counted off in.
 	$effect(() => {