@codeflip/embed 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,4148 @@
+// ../trace/src/index.ts
+var LANGUAGES = {
+	c: {
+		manualMemory: true,
+		dynamic: false,
+		nullWord: "NULL"
+	},
+	cpp: {
+		manualMemory: true,
+		dynamic: false,
+		nullWord: "NULL"
+	},
+	java: {
+		manualMemory: false,
+		dynamic: false,
+		nullWord: "null"
+	},
+	python: {
+		manualMemory: false,
+		dynamic: true,
+		nullWord: "None"
+	},
+	javascript: {
+		manualMemory: false,
+		dynamic: true,
+		nullWord: "null"
+	},
+	typescript: {
+		manualMemory: false,
+		dynamic: true,
+		nullWord: "null"
+	}
+};
+var fileStates = /* @__PURE__ */ new WeakMap();
+/** Every file and its text at step `i`: the starting files with each step's changes applied. */
+function filesAt(trace, i) {
+	let states = fileStates.get(trace);
+	if (!states) {
+		states = [];
+		let cur = { ...trace.files };
+		for (const step of trace.steps) {
+			if (step.files) {
+				cur = { ...cur };
+				for (const [name, text] of Object.entries(step.files)) if (text === null) delete cur[name];
+				else cur[name] = text;
+			}
+			states.push(cur);
+		}
+		fileStates.set(trace, states);
+	}
+	return states[Math.min(Math.max(i, 0), states.length - 1)] ?? { ...trace.files };
+}
+/**
+* How much of `stdin` shows in the output once `pos` characters were read:
+* every line the reads reached into, whole. The Java runtime echoes input
+* this way, like Python's input(), and the captions work out the same to
+* tell the echo from what the program printed.
+*/
+function echoedInput(stdin, pos) {
+	if (pos <= 0) return 0;
+	const nl = stdin.indexOf("\n", pos - 1);
+	return nl < 0 ? stdin.length : nl + 1;
+}
+// ../renderer/src/animate.ts
+var EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
+var EXIT_MS = 220;
+var prefersReducedMotion = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+/** Records where every keyed box is right now (mid-animation positions included). */
+function snapshot(root) {
+	const boxes = /* @__PURE__ */ new Map();
+	for (const el of root.querySelectorAll("[data-cf-anim]")) boxes.set(el.dataset.cfAnim, {
+		rect: el.getBoundingClientRect(),
+		el
+	});
+	return boxes;
+}
+/**
+* Animates keyed boxes in `root` from their positions in `before`:
+* moved or resized boxes glide and grow/shrink, new frames ease in, and
+* boxes that disappeared fade out as overlays inside `layer`.
+*/
+function animateLayout(root, before, layer) {
+	for (const old of layer.querySelectorAll(".cf-exit")) old.remove();
+	const after = snapshot(root);
+	for (const [key, { rect: last, el }] of after) {
+		const first = before.get(key)?.rect;
+		if (!first) {
+			if (el.classList.contains("cf-frame")) el.animate([{
+				opacity: 0,
+				transform: "translateY(-8px)"
+			}, {
+				opacity: 1,
+				transform: "none"
+			}], {
+				duration: 320,
+				easing: EASE
+			});
+			continue;
+		}
+		const dx = first.left - last.left;
+		const dy = first.top - last.top;
+		const resized = Math.abs(first.height - last.height) > .5 || Math.abs(first.width - last.width) > .5;
+		if (Math.abs(dx) < .5 && Math.abs(dy) < .5 && !resized) continue;
+		const clip = el.style.overflow;
+		el.style.overflow = "clip";
+		const held = (resized ? [...el.children].filter((k) => k instanceof HTMLElement) : []).map((k) => {
+			const prev = {
+				width: k.style.width,
+				minWidth: k.style.minWidth,
+				boxSizing: k.style.boxSizing
+			};
+			const w = `${k.getBoundingClientRect().width}px`;
+			Object.assign(k.style, {
+				width: w,
+				minWidth: w,
+				boxSizing: "border-box"
+			});
+			return () => Object.assign(k.style, prev);
+		});
+		const anim = el.animate([{
+			transform: `translate(${dx}px, ${dy}px)`,
+			height: `${first.height}px`,
+			width: `${first.width}px`
+		}, {
+			transform: "none",
+			height: `${last.height}px`,
+			width: `${last.width}px`
+		}], {
+			duration: 320,
+			easing: EASE
+		});
+		const restore = () => {
+			el.style.overflow = clip;
+			for (const release of held) release();
+		};
+		anim.onfinish = restore;
+		anim.oncancel = restore;
+	}
+	const origin = layer.getBoundingClientRect();
+	for (const [key, { rect, el }] of before) {
+		if (after.has(key)) continue;
+		const ghost = el.cloneNode(true);
+		for (const n of [ghost, ...ghost.querySelectorAll("*")]) {
+			n.removeAttribute("data-cf-key");
+			n.removeAttribute("data-cf-ptr");
+			n.removeAttribute("data-cf-anim");
+			n.removeAttribute("id");
+		}
+		ghost.classList.add("cf-exit");
+		ghost.setAttribute("aria-hidden", "true");
+		Object.assign(ghost.style, {
+			position: "absolute",
+			left: `${rect.left - origin.left + layer.scrollLeft}px`,
+			top: `${rect.top - origin.top + layer.scrollTop}px`,
+			width: `${rect.width}px`,
+			height: `${rect.height}px`,
+			margin: "0",
+			pointerEvents: "none",
+			overflow: "clip",
+			animation: "none"
+		});
+		layer.append(ghost);
+		ghost.animate([{
+			opacity: 1,
+			transform: "none"
+		}, {
+			opacity: 0,
+			transform: "scale(0.96)"
+		}], {
+			duration: EXIT_MS,
+			easing: EASE,
+			fill: "forwards"
+		}).finished.then(() => ghost.remove(), () => ghost.remove());
+	}
+}
+/** Calls `draw` on every animation frame for `ms`, then once more with `final`. */
+function followFor(ms, draw, final) {
+	let stopped = false;
+	const end = performance.now() + ms;
+	const tick = () => {
+		if (stopped) return;
+		if (performance.now() >= end) return final();
+		draw();
+		requestAnimationFrame(tick);
+	};
+	requestAnimationFrame(tick);
+	return () => stopped = true;
+}
+// ../renderer/src/arrows.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var ANCHOR_INSET = 14;
+var ANCHOR_GAP = 8;
+/** Straight run into the target, so the arrowhead always sits on a straight line. */
+var LEAD = 14;
+var LANE_GAP = 6;
+var CORNER = 8;
+/** A cell after the first in an array: arriving from the left would cross the cells before it. */
+var laterCell = (target) => target.classList.contains("cf-cell") && !!target.previousElementSibling;
+/** Objects in the target's heap row that a straight approach from `exitX` would cross. */
+function blocked(target, exitX, ox) {
+	const row = target.closest(".cf-heap-row");
+	const own = target.closest(".cf-object");
+	if (!row || !own) return null;
+	if (laterCell(target)) return row.getBoundingClientRect();
+	const t = own.getBoundingClientRect();
+	return [...row.children].some((o) => {
+		if (o === own) return false;
+		const r = o.getBoundingClientRect();
+		return r.right + ox > exitX && r.left < t.left;
+	}) ? row.getBoundingClientRect() : null;
+}
+/**
+* Pointers in `changed` draw in, starting at `drawnAt` (a `performance.now()`
+* time). Redraws pick the draw-in up where it was rather than restarting it.
+* Without `drawnAt` they are hidden: their target is still moving into place.
+*/
+function drawArrows(container, svg, changed, drawnAt) {
+	const root = container.getRootNode();
+	const box = container.getBoundingClientRect();
+	const ox = container.scrollLeft - box.left;
+	const oy = container.scrollTop - box.top;
+	svg.setAttribute("width", String(container.scrollWidth));
+	svg.setAttribute("height", String(container.scrollHeight));
+	svg.replaceChildren();
+	const defs = document.createElementNS(SVG_NS, "defs");
+	defs.innerHTML = "<marker id=\"cf-head\" viewBox=\"0 0 10 10\" refX=\"10\" refY=\"5\" markerWidth=\"10\" markerHeight=\"10\" markerUnits=\"userSpaceOnUse\" orient=\"auto\"><path d=\"M0 0.5L10 5L0 9.5z\" fill=\"var(--cf-arrow)\"/></marker><marker id=\"cf-head-danger\" viewBox=\"0 0 10 10\" refX=\"10\" refY=\"5\" markerWidth=\"10\" markerHeight=\"10\" markerUnits=\"userSpaceOnUse\" orient=\"auto\"><path d=\"M0 0.5L10 5L0 9.5z\" fill=\"var(--cf-danger)\"/></marker>";
+	svg.append(defs);
+	const byTarget = /* @__PURE__ */ new Map();
+	for (const dot of container.querySelectorAll("[data-cf-ptr]")) {
+		const key = dot.dataset.cfPtr;
+		const target = root.querySelector(`[data-cf-key="${CSS.escape(key)}"]`) ?? root.querySelector(`[data-cf-key="${CSS.escape(key.replace(/:\d+$/, ""))}"]`);
+		if (!target) continue;
+		const d = dot.getBoundingClientRect();
+		const column = (dot.closest(".cf-frames") ?? dot.closest(".cf-object"))?.getBoundingClientRect();
+		const route = {
+			sx: d.left + d.width / 2 + ox,
+			sy: d.top + d.height / 2 + oy,
+			exitX: (column ? column.right : d.right) + ox,
+			target,
+			changed: changed.has(dot.closest("[data-cf-key]")?.getAttribute("data-cf-key") ?? ""),
+			dangling: key.startsWith("ghost:"),
+			weak: dot.classList.contains("cf-weak")
+		};
+		const cell = dot.closest(".cf-cell");
+		const array = cell?.closest(".cf-object:not(.cf-literal)");
+		if (cell && array) route.cell = {
+			x: route.sx,
+			y: route.sy,
+			bottom: array.getBoundingClientRect().bottom + oy
+		};
+		const list = byTarget.get(target) ?? [];
+		list.push(route);
+		byTarget.set(target, list);
+	}
+	const fromCells = [...byTarget.values()].flat().filter((r) => r.cell);
+	const byArray = /* @__PURE__ */ new Map();
+	for (const r of fromCells) byArray.set(r.cell.bottom, [...byArray.get(r.cell.bottom) ?? [], r]);
+	for (const group of byArray.values()) {
+		group.sort((a, b) => b.cell.x - a.cell.x);
+		group.forEach((r, k) => {
+			const y = r.cell.bottom + 8 + k * LANE_GAP;
+			r.cell.next = y;
+			r.sy = y;
+		});
+	}
+	const lanes = /* @__PURE__ */ new Map();
+	for (const [target, routes] of byTarget) for (const r of routes) {
+		if (r.exitX >= target.getBoundingClientRect().left + ox) continue;
+		const rowBox = blocked(target, r.exitX, ox);
+		if (!rowBox) continue;
+		const row = target.closest(".cf-heap-row");
+		const sides = lanes.get(row) ?? {
+			below: [],
+			above: []
+		};
+		(r.sy < rowBox.top + oy && !laterCell(target) ? sides.above : sides.below).push(r);
+		lanes.set(row, sides);
+	}
+	for (const { below, above } of lanes.values()) {
+		below.sort((a, b) => a.sy - b.sy).forEach((r, index) => r.lane = {
+			side: "below",
+			index,
+			count: below.length
+		});
+		above.sort((a, b) => b.sy - a.sy).forEach((r, index) => r.lane = {
+			side: "above",
+			index,
+			count: above.length
+		});
+	}
+	for (const [target, routes] of byTarget) {
+		const t = target.getBoundingClientRect();
+		const top = t.top + oy;
+		routes.sort((a, b) => a.sy - b.sy);
+		const span = Math.max(0, t.height - 28);
+		const step = routes.length > 1 ? Math.min(ANCHOR_GAP, span / (routes.length - 1)) : 0;
+		routes.forEach((r, i) => {
+			const ty = top + Math.min(ANCHOR_INSET + i * step, t.height / 2 + i * step);
+			let path;
+			if (r.lane) {
+				const rowBox = target.closest(".cf-heap-row").getBoundingClientRect();
+				const below = r.lane.side === "below";
+				const k = r.lane.index;
+				const rowLeft = rowBox.left + ox;
+				const gx = r.exitX < rowLeft ? Math.max(r.exitX + 6, rowLeft - 8 - (r.lane.count - 1 - k) * LANE_GAP) : r.exitX + 8 + k * LANE_GAP;
+				const laneY = below ? rowBox.bottom + oy + 7 + k * LANE_GAP : rowBox.top + oy - 7 - k * LANE_GAP;
+				const own = (target.closest(".cf-object") ?? target).getBoundingClientRect();
+				const cell = laterCell(target);
+				const ax = cell ? t.left + ox + t.width / 2 + (i - (routes.length - 1) / 2) * ANCHOR_GAP : Math.min(own.left + ox + 18 + i * ANCHOR_GAP, own.right + ox - 10);
+				const edge = cell ? t.bottom + oy + 1 : (below ? own.bottom : own.top) + oy + (below ? 1 : -1);
+				const v = below ? -1 : 1;
+				const rad = Math.min(CORNER, Math.abs(laneY - r.sy) / 2);
+				const up = laneY < r.sy ? -1 : 1;
+				path = `M${r.sx} ${r.sy} H${gx - rad} Q${gx} ${r.sy} ${gx} ${r.sy + up * rad} V${laneY - up * rad} Q${gx} ${laneY} ${gx + rad} ${laneY} H${ax - CORNER} Q${ax} ${laneY} ${ax} ${laneY + v * CORNER} V${edge}`;
+			} else if (t.left + ox >= r.exitX + 16) {
+				const tx = t.left + ox - 1;
+				const gx = r.exitX + 6;
+				const ex = tx - Math.min(LEAD, tx - r.exitX - 8);
+				const bend = Math.max(16, (ex - gx) / 2);
+				path = `M${r.sx} ${r.sy} H${gx} C${gx + bend} ${r.sy} ${ex - bend} ${ty} ${ex} ${ty} H${tx}`;
+			} else if (target.classList.contains("cf-cell") && target.nextElementSibling) {
+				const below = r.sy > t.bottom + oy;
+				const laneY = below ? t.bottom + oy + 5 : t.top + oy - 5;
+				const ax = t.left + ox + t.width / 2 + (i - (routes.length - 1) / 2) * ANCHOR_GAP;
+				const out = Math.max(r.exitX, (target.parentElement ?? target).getBoundingClientRect().right + ox + LEAD) + 28 + i * 8;
+				const rad = 4;
+				const v = below ? -1 : 1;
+				path = `M${r.sx} ${r.sy} H${r.exitX} C${out} ${r.sy} ${out} ${laneY} ${out - 28} ${laneY} H${ax + rad} Q${ax} ${laneY} ${ax} ${laneY + v * rad} V${below ? t.bottom + oy + 1 : t.top + oy - 1}`;
+			} else {
+				const tx = (target.matches(".cf-grid th") ? target.parentElement : target).getBoundingClientRect().right + ox + 1;
+				const ex = tx + LEAD;
+				const out = Math.max(r.exitX, ex) + 28 + i * 8;
+				path = `M${r.sx} ${r.sy} H${r.exitX} C${out} ${r.sy} ${out} ${ty} ${ex} ${ty} H${tx}`;
+			}
+			if (r.cell) {
+				const { x, y, next } = r.cell;
+				if (t.top + oy > next && !r.lane) {
+					const ax = t.left + ox + 18 + i * ANCHOR_GAP;
+					const dir = ax >= x ? 1 : -1;
+					const rad = Math.min(CORNER, Math.abs(ax - x) / 2);
+					path = Math.abs(ax - x) < 2 ? `M${x} ${y} V${t.top + oy - 1}` : `M${x} ${y} V${next - rad} Q${x} ${next} ${x + dir * rad} ${next} H${ax - dir * rad} Q${ax} ${next} ${ax} ${next + rad} V${t.top + oy - 1}`;
+				} else path = `M${x} ${y} V${next}${path.replace(/^M\S+ \S+/, "")}`;
+			}
+			const p = document.createElementNS(SVG_NS, "path");
+			p.setAttribute("d", path);
+			if (r.changed && !r.dangling && !r.weak) p.setAttribute("pathLength", "1");
+			const delay = r.changed && drawnAt !== void 0 ? `${Math.min(0, drawnAt - performance.now())}ms` : "";
+			p.style.animationDelay = delay;
+			const state = !r.changed ? "" : drawnAt === void 0 ? " cf-arrow-pending" : " cf-arrow-new";
+			p.setAttribute("class", `cf-arrow${state}${r.dangling ? " cf-arrow-dangling" : r.weak ? " cf-arrow-weak" : ""}`);
+			const marker = r.dangling ? "url(#cf-head-danger)" : "url(#cf-head)";
+			if (r.changed) {
+				const head = document.createElementNS(SVG_NS, "path");
+				head.setAttribute("d", path);
+				head.setAttribute("class", `cf-arrow-head${state}`);
+				head.setAttribute("marker-end", marker);
+				head.style.animationDelay = delay;
+				svg.append(p, head);
+			} else {
+				p.setAttribute("marker-end", marker);
+				svg.append(p);
+			}
+		});
+	}
+}
+// ../renderer/src/describe/words.ts
+/** "a" or "an" for a type or noun. */
+var article = (word) => /^[aeiou]/i.test(word) || /^[AEFHILMNORSX](?:[A-Z\d]|$)/.test(word) ? "an" : "a";
+var withArticle = (word) => `${article(word)} ${word}`;
+var list = (parts) => parts.length <= 1 ? parts[0] ?? "" : `${parts.slice(0, -1).join(", ")} and ${parts.at(-1)}`;
+/** A name at the start of a sentence: "the lambda ..." → "The lambda ...". */
+var opening = (name) => name.replace(/^the /, "The ");
+var nullWord = (lang) => LANGUAGES[lang].nullWord;
+/** C++ references (`int&`) refer to things; pointers point. */
+var isRef = (v) => v.k === "ptr" && v.type.endsWith("&");
+var isPy = (lang) => lang === "python";
+/** JavaScript, or TypeScript (which runs as JavaScript once its types are stripped). */
+var isJs = (lang) => lang === "javascript" || lang === "typescript";
+/** Java has references, not pointers: "refers to", `a.b.c`, no addresses. */
+var isJava = (lang) => lang === "java";
+/** Python and JavaScript: see `LanguageTraits.dynamic`. */
+var isDynamic = (lang) => LANGUAGES[lang].dynamic;
+/** Variables hold addresses, not references: see `LanguageTraits.manualMemory`. */
+var isManual = (lang) => LANGUAGES[lang].manualMemory;
+/** How a field of a referenced object is named: `head->next` in C, `head.next` in Java, Python and JavaScript. */
+var fieldSep = (lang) => isManual(lang) ? "->" : ".";
+// ../renderer/src/describe/values.ts
+/** JavaScript: a short array, Set, Map or object written the way it reads in code, or null. */
+function jsLiteral(v, lang) {
+	const short = (items, n) => !("truncated" in v && v.truncated) && items.length <= n && items.every((x) => x.k === "prim");
+	if (v.k === "array" && short(v.items, 6)) {
+		const items = v.items.map((x) => valueText(x, lang)).join(", ");
+		return v.type === "Set" ? `{${items}}` : `[${items}]`;
+	}
+	if (v.k === "map" && short(v.entries.flatMap((e) => [e.key, e.value]), 8)) return `{${v.entries.map((e) => `${valueText(e.key, lang)} => ${valueText(e.value, lang)}`).join(", ")}}`;
+	if (v.k === "record" && v.type !== "function" && v.type !== "class" && short(v.fields.map((f) => f.value), 3)) return `{${v.fields.map((f) => `${f.name}: ${valueText(f.value, lang)}`).join(", ")}}`;
+	return null;
+}
+/** Python: a short list/tuple/set/dict written the way Python prints it, or null. (JavaScript: see jsLiteral.) */
+function pyLiteral(v, lang) {
+	if (isJs(lang)) return jsLiteral(v, lang);
+	if (v.k === "array" && !v.truncated && v.items.length <= 6 && v.items.every((x) => x.k === "prim")) {
+		const items = v.items.map((x) => valueText(x, lang));
+		if (v.type === "tuple") return items.length === 1 ? `(${items[0]},)` : `(${items.join(", ")})`;
+		if (v.type === "set" || v.type === "frozenset") return items.length ? `{${items.join(", ")}}` : `${v.type}()`;
+		return `[${items.join(", ")}]`;
+	}
+	if (v.k === "map" && !v.truncated && v.entries.length <= 4 && v.entries.every((e) => e.key.k === "prim" && e.value.k === "prim")) return `{${v.entries.map((e) => `${valueText(e.key, lang)}: ${valueText(e.value, lang)}`).join(", ")}}`;
+	return null;
+}
+/**
+* C++ standard containers. The tracer shows each as a variable with an arrow
+* to its contents on the heap; captions talk about the contents instead
+* ("v is now {1, 2, 3}"), the way a student thinks of it.
+*/
+var CONTAINER = /^(?:const )?(?:vector|map|set|multimap|multiset|unordered_(?:multi)?(?:map|set)|deque|list|forward_list|stack|queue|priority_queue)<.*>$/;
+var isContainer = (type, lang) => lang === "cpp" && CONTAINER.test(type);
+/** stack/queue/priority_queue: which end matters. "(top: 2)", "(front: "bo")". */
+function adapterEnd(type, v, lang) {
+	const kind = type.match(/^(?:const )?(stack|queue|priority_queue)</)?.[1];
+	if (!kind || v.k !== "array" || v.items.length === 0) return "";
+	const end = kind === "stack" ? v.items.at(-1) : v.items[0];
+	return ` (${kind === "queue" ? "front" : "top"}: ${valueText(end, lang)})`;
+}
+/** C++ smart pointers' objects carry their owner count in their type ("Account (2 owners)"); captions drop it. */
+var ownedName = (type) => type.replace(/ \(\d+ owners?\)$/, "");
+/** A container's contents as a student would say them: "{1, 2}", "{{1, 2}, {3}}" or "empty". */
+function contents(v, lang, step, nested = false) {
+	if (v.k === "array" && v.items.length === 0 || v.k === "map" && v.entries.length === 0) return nested ? "{}" : "empty";
+	if (v.k !== "array") return valueText(v, lang);
+	const parts = v.items.map((x) => {
+		if (x.k === "prim") return x.text;
+		const t = x.k === "ptr" && x.target.kind === "heap" && isContainer(x.type, lang) ? x.target : void 0;
+		const inner = t && !nested ? step.heap.find((h) => h.id === t.id) : void 0;
+		return inner ? contents(inner.value, lang, step, true) : null;
+	});
+	if (v.items.length <= 6 && !v.truncated && parts.every((p) => p !== null)) return `{${parts.join(", ")}}`;
+	const n = v.items.length;
+	return `${withArticle(v.type)} with ${n}${v.truncated ? "+" : ""} ${n === 1 ? "item" : "items"}`;
+}
+/** A char array read as the C string it holds, or null if it isn't one. */
+function cString(v) {
+	if (v.k !== "array" || !/char\[/.test(v.type)) return null;
+	let s = "";
+	for (const item of v.items) {
+		if (item.k !== "prim") return null;
+		if (item.text === "'\\0'") return s;
+		const m = item.text.match(/^'(.*)'$/);
+		if (!m) return null;
+		s += m[1];
+	}
+	return null;
+}
+/** Short text for a value, as a student would read it aloud. */
+function valueText(v, lang = "c") {
+	switch (v.k) {
+		case "prim": return v.text;
+		case "uninit": return "uninitialized";
+		case "ptr": switch (v.target.kind) {
+			case "null": return nullWord(lang);
+			case "string": return `the string literal "${v.target.text}"`;
+			case "heap":
+				if (isDynamic(lang)) return withArticle(v.type);
+				if (isJava(lang)) return `${withArticle(v.type.replace(/<.*>$/, ""))} object`;
+				return `${withArticle(v.type.replace(/\s*[*&]+$/, "") || "value")} on the heap`;
+			case "stack":
+			case "global": return `${v.target.name}`;
+			case "dangling": return "freed memory (dangling)";
+			default: return "an invalid address";
+		}
+		case "array": {
+			if (isDynamic(lang)) return pyLiteral(v, lang) ?? `${withArticle(v.type)} of ${v.items.length}${v.truncated ? "+" : ""} items`;
+			const str = cString(v);
+			if (str !== null) return `"${str}"`;
+			if (v.items.length <= 6 && v.items.every((x) => x.k === "prim")) {
+				const items = v.items.map((x) => valueText(x, lang)).join(", ");
+				return isJava(lang) && !v.type.endsWith("]") ? `[${items}]` : `{${items}}`;
+			}
+			return `${v.type} with ${v.items.length}${v.truncated ? "+" : ""} ${v.items.length === 1 ? "item" : "items"}`;
+		}
+		case "record":
+			if (v.fields.length <= 3 && v.fields.every((f) => f.value.k === "prim")) {
+				if (isPy(lang)) return `${v.type}(${v.fields.map((f) => `${f.name}=${valueText(f.value, lang)}`).join(", ")})`;
+				return `{${v.fields.map((f) => `${f.name}: ${valueText(f.value, lang)}`).join(", ")}}`;
+			}
+			return v.type;
+		case "map":
+			if (isDynamic(lang)) return pyLiteral(v, lang) ?? `${withArticle(v.type)} of ${v.entries.length} ${isJs(lang) ? "entries" : "items"}`;
+			if (lang === "cpp" && v.entries.length <= 6 && v.entries.every((e) => e.key.k === "prim" && e.value.k === "prim")) return `{${v.entries.map((e) => `${valueText(e.key, lang)}: ${valueText(e.value, lang)}`).join(", ")}}`;
+			return `${v.type} with ${v.entries.length} entries`;
+		case "opaque": return v.text;
+	}
+}
+/** A stable comparable signature for "did this change?" checks. */
+function signature(v) {
+	switch (v.k) {
+		case "prim":
+		case "opaque": return `${v.k}:${v.text}`;
+		case "uninit": return "uninit";
+		case "ptr": {
+			const t = v.target;
+			if (t.kind === "null") return "ptr:null";
+			if (t.kind === "string") return `ptr:str:${t.text}`;
+			return `ptr:${v.address}`;
+		}
+		case "array": return `[${v.items.map(signature).join(",")}]`;
+		case "record": return `{${v.fields.map((f) => `${f.name}=${signature(f.value)}`).join(",")}}`;
+		case "map": return `{${v.entries.map((e) => `${signature(e.key)}:${signature(e.value)}`).join(",")}}`;
+	}
+}
+/** A value as a student would read it, naming heap objects by what they hold. */
+function readable(v, step, lang) {
+	if (v.k === "ptr" && v.target.kind === "heap") {
+		const id = v.target.id;
+		const obj = step.heap.find((x) => x.id === id);
+		if (isDynamic(lang)) return pyObject(obj, lang);
+		if (obj && isContainer(v.type, lang)) return contents(obj.value, lang, step, true);
+		return holding(obj, obj?.type ?? "value");
+	}
+	return valueText(v, lang);
+}
+/** Python: "the list [1, 2]", "the Account with owner 'Alice'", "a list of 9 items". */
+function pyObject(obj, lang) {
+	const lit = obj && pyLiteral(obj.value, lang);
+	if (lit) return `the ${obj.type} ${lit}`;
+	if (obj?.value.k === "record") return holding(obj, obj.type);
+	return obj ? valueText(obj.value, lang) : "an object";
+}
+/** "the struct Node with val 20": tells same-typed heap objects apart. */
+function holding(obj, type) {
+	type = ownedName(type);
+	const first = obj?.value.k === "record" ? obj.value.fields.find((f) => f.value.k === "prim") : void 0;
+	if (first) return `the ${type} with ${first.name} ${first.value.k === "prim" ? first.value.text : ""}`;
+	return /^(function|class) /.test(type) ? `the ${type}` : withArticle(type);
+}
+// ../renderer/src/describe/names.ts
+/**
+* How a student would name each heap object: by the variable path that
+* reaches it. Variables named on `line` come first, so `b.y = 5` (or
+* `raw->balance = 20`) is described through the name the code used, even
+* when another variable reaches the same object.
+*/
+function heapNames(step, lang = "c", line = "") {
+	const sep = fieldSep(lang);
+	const names = /* @__PURE__ */ new Map();
+	const byId = new Map(step.heap.map((h) => [h.id, h]));
+	const queue = [];
+	const visitPtr = (v, label) => {
+		if (v.k === "ptr" && v.target.kind === "heap" && !names.has(v.target.id)) {
+			const obj = byId.get(v.target.id);
+			if (!obj) return;
+			names.set(obj.id, {
+				label,
+				viaRecord: obj.value.k === "record"
+			});
+			queue.push({
+				id: obj.id,
+				label
+			});
+		}
+	};
+	const onLine = (b) => !!line && new RegExp(`\\b${b.name.replace(/\$/g, "\\$")}\\b`).test(line);
+	for (const f of [...step.frames].reverse()) for (const b of [...f.locals.filter(onLine), ...f.locals.filter((b) => !onLine(b))]) visitPtr(b.value, b.name);
+	for (const g of step.globals) visitPtr(g.value, g.name);
+	while (queue.length) {
+		const { id, label } = queue.shift();
+		const obj = byId.get(id);
+		if (label.split(sep === "." ? /\.|\[/ : /->|\[/).length > 4) continue;
+		if (obj.value.k === "record") for (const f of obj.value.fields) visitPtr(f.value, `${label}${sep}${f.name}`);
+		if (obj.value.k === "array") obj.value.items.forEach((x, i) => visitPtr(x, `${label}[${i}]`));
+		if (obj.value.k === "map" && isPy(lang)) for (const e of obj.value.entries) visitPtr(e.value, `${label}[${valueText(e.key, lang)}]`);
+	}
+	return names;
+}
+/**
+* Other variables that refer to heap object `id` (not the one `label` is
+* reached from): the current method's, or else the nearest caller's
+* ("main's a").
+* (Used for Java captions.)
+*/
+function sharers(step, id, label) {
+	const named = (name) => label === name || label.startsWith(`${name}.`) || label.startsWith(`${name}[`);
+	for (const [i, f] of [...step.frames].reverse().entries()) {
+		const names = f.locals.filter((b) => b.value.k === "ptr" && b.value.target.kind === "heap" && b.value.target.id === id && !named(b.name)).map((b) => i === 0 ? b.name : `${callName(f.name, "java")}'s ${b.name}`);
+		if (names.length) return names;
+	}
+	return [];
+}
+/** The heap id `this` refers to in a Java frame. */
+var thisOf = (f) => {
+	const v = f?.locals.find((b) => b.name === "this")?.value;
+	return v?.k === "ptr" && v.target.kind === "heap" ? v.target.id : void 0;
+};
+/**
+* Java: when the top frame is a constructor that another constructor of
+* the same object called (`super(w, h)` or `this(...)`), that caller's
+* class: Square for Rect's constructor run by Square's `super(4, 4)`.
+*/
+function superCaller(frames, lang, lines = []) {
+	const [caller, top] = [frames.at(-2), frames.at(-1)];
+	if (isJs(lang) && caller && top && constructorOf(top.name, lang) && /\bsuper\s*\(/.test(lines[caller.line - 1] ?? "")) return constructorOf(caller.name, lang);
+	if (!isJava(lang) || !caller || !top || !constructorOf(top.name, lang)) return void 0;
+	const id = thisOf(top);
+	return id && thisOf(caller) === id ? constructorOf(caller.name, lang) : void 0;
+}
+/** How another object holds `id`: `seats[2]`, `head->next` (not through `except`). */
+function heldBy(step, id, except, lang) {
+	const names = heapNames(step, lang);
+	const to = (v) => v.k === "ptr" && v.target.kind === "heap" && v.target.id === id;
+	for (const h of step.heap) {
+		const name = names.get(h.id)?.label;
+		if (!name || name === except || name.startsWith(`${except}[`) || name.startsWith(`${except}${fieldSep(lang)}`)) continue;
+		if (h.value.k === "array") {
+			const i = h.value.items.findIndex(to);
+			if (i >= 0) return `${name}[${i}]`;
+		} else if (h.value.k === "record") {
+			const f = h.value.fields.find((x) => to(x.value));
+			if (f) return `${name}${fieldSep(lang)}${f.name}`;
+		}
+	}
+}
+/** Variables in the current function, and globals, that refer to heap object `id`. */
+function namesFor(step, id) {
+	return [...step.frames.at(-1)?.locals ?? [], ...step.globals].filter((b) => b.value.k === "ptr" && b.value.target.kind === "heap" && b.value.target.id === id).map((b) => b.name);
+}
+/**
+* `Account::Account` (C++), `Account.<init>` (Java), `Account.__init__`
+* (Python) or `Account.constructor` (JavaScript) → "Account" when it is a constructor.
+*/
+var constructorOf = (name, lang = "c") => {
+	if (isPy(lang)) return name.match(/^(\w+)\.__init__$/)?.[1];
+	if (isJs(lang)) return name.match(/^([\w$]+)\.constructor$/)?.[1];
+	return name.match(/(?:^|::)(\w+)::\1$/)?.[1] ?? name.match(/(\w+)\.<init>$/)?.[1];
+};
+/** How to say a function's name: constructors and methods read naturally. */
+var callName = (name, lang = "c") => {
+	const ctor = constructorOf(name, lang);
+	if (ctor) return isPy(lang) ? name : `the ${ctor} constructor`;
+	if ((isJava(lang) || isJs(lang)) && /^[\w$.]+\.[\w$]+$/.test(name)) return name.split(".").pop();
+	return name.includes("::") ? name.split("::").pop() : name;
+};
+/**
+* Java: a lambda's frame is named `lambda in Main.main`. Name it by the
+* method it was handed to, found on the line that wrote it:
+* `.filter(w -> ...)` gives "the lambda passed to filter", which says why
+* it runs (a stream's filter, a list's forEach, a comparator). Lines with no
+* such call, or several, give "the lambda on line 8".
+*/
+function javaLambda(f, lines) {
+	if (!f.name.startsWith("lambda in ")) return null;
+	for (let n = f.line; n > 0 && n > f.line - 10; n--) {
+		const src = lines[n - 1] ?? "";
+		if (!src.includes("->")) continue;
+		const passed = [...src.matchAll(/\.\s*(\w+)\s*\(\s*(?:\([^()]*\)|[\w$]+)\s*->/g)].map((m) => m[1]);
+		return passed.length === 1 ? {
+			name: `the lambda passed to ${passed[0]}`,
+			passedTo: passed[0]
+		} : { name: `the lambda on line ${n}` };
+	}
+	return { name: "the lambda" };
+}
+/** callName, with Java lambdas named by what they were passed to. */
+var frameCallName = (f, lang, lines) => (isJava(lang) ? javaLambda(f, lines)?.name : void 0) ?? callName(f.name, lang);
+/** Python's (and JavaScript's) top-level code has no function frame. */
+var MAIN_PY = "the main program";
+function callerPhrase(cur, callee, lang = "c", lines = []) {
+	const passedTo = isJava(lang) ? javaLambda(cur.frames.at(-1), lines)?.passedTo : void 0;
+	if (passedTo) return passedTo;
+	const caller = cur.frames.at(-2)?.name;
+	if (!caller) return isDynamic(lang) ? MAIN_PY : "its caller";
+	return caller === callee ? `the ${callName(callee, lang)} call that called it` : callName(caller, lang);
+}
+// ../renderer/src/describe/diff.ts
+var allUninit = (v) => v.k === "uninit" || v.k === "array" && v.items.every(allUninit) || v.k === "record" && v.fields.every((f) => allUninit(f.value));
+/**
+* A union's members all change when one is written. `line` names the one it
+* wrote (`n.f = 1.5f`, `p->c = 'A'`): that is the change, and the others
+* read the same bytes. Without one named, each member is its own change.
+*/
+function diffUnion(path, label, sep, before, after, out, line) {
+	const inner = [];
+	after.forEach((f, i) => diffValue(`${path}.${f.name}`, `${label}${sep}${f.name}`, before[i]?.value, f.value, inner, line));
+	const named = (c) => {
+		const field = c.label.slice(label.length + sep.length).split(/[.[>-]/)[0];
+		return new RegExp(`(?:\\.|->)\\s*${field}\\b`).test(line);
+	};
+	const written = inner.filter(named);
+	if (inner.length < 2 || written.length !== 1) return void out.push(...inner);
+	const [w] = written;
+	out.push({
+		...w,
+		shares: inner.filter((c) => c !== w).map((c) => ({
+			label: c.label,
+			value: c.after
+		}))
+	});
+}
+function diffValue(path, label, before, after, out, line = "") {
+	if (before && signature(before) === signature(after)) return;
+	const fresh = !before || before.k === "uninit";
+	if (after.k === "array" && before?.k === "array" && before.items.length === after.items.length) {
+		const inner = [];
+		after.items.forEach((item, i) => diffValue(`${path}[${i}]`, `${label}[${i}]`, before.items[i], item, inner, line));
+		const allWasUninit = before.items.every((x) => x.k === "uninit");
+		if (inner.length > 2 || allWasUninit && inner.length > 1 || cString(after) !== null && inner.length > 1) out.push({
+			path,
+			label,
+			before,
+			after,
+			whole: true
+		});
+		else out.push(...inner);
+		return;
+	}
+	if (after.k === "record" && before?.k === "record" && before.fields.length === after.fields.length) {
+		if (after.union) return diffUnion(path, label, ".", before.fields, after.fields, out, line);
+		after.fields.forEach((f, i) => diffValue(`${path}.${f.name}`, `${label}.${f.name}`, before.fields[i]?.value, f.value, out, line));
+		return;
+	}
+	if (fresh && allUninit(after)) return;
+	out.push({
+		path,
+		label,
+		before: fresh ? void 0 : before,
+		after,
+		whole: after.k === "array" || after.k === "record"
+	});
+}
+/** A C++ map's changes by key: `ages["bo"] is now 7`. Null when keys went away. */
+function mapChanges(path, label, before, after) {
+	if (before.k !== "map" || after.k !== "map") return null;
+	const old = new Map(before.entries.map((e) => [signature(e.key), e.value]));
+	if (before.entries.some((e) => !after.entries.some((x) => signature(x.key) === signature(e.key)))) return null;
+	return after.entries.flatMap((e) => {
+		const was = old.get(signature(e.key));
+		if (was && signature(was) === signature(e.value)) return [];
+		return [{
+			path,
+			label: `${label}[${valueText(e.key, "cpp")}]`,
+			before: was,
+			after: e.value
+		}];
+	});
+}
+/** Every visible change between `prev` and `cur`, element by element. */
+function changesBetween(prev, cur, lang = "c", line = "") {
+	if (!prev) return [];
+	const out = [];
+	const prevFrames = new Map(prev.frames.map((f) => [f.id, f]));
+	for (const g of cur.globals) {
+		const old = prev.globals.find((x) => x.name === g.name);
+		diffValue(`global:${g.name}`, g.name, old?.value, g.value, out, line);
+	}
+	for (const f of cur.frames) {
+		const old = prevFrames.get(f.id);
+		if (!old) continue;
+		for (const b of f.locals) {
+			const was = old.locals.find((x) => x.name === b.name);
+			diffValue(`var:${f.id}:${b.name}`, b.name, was?.value, b.value, out, line);
+		}
+	}
+	const names = heapNames(cur, lang, line);
+	for (const h of cur.heap) {
+		const old = prev.heap.find((x) => x.id === h.id);
+		if (!old) continue;
+		const name = names.get(h.id);
+		const label = name ? name.label : `the ${h.type}`;
+		const inner = [];
+		if (h.value.k === "record" && old.value.k === "record" && h.value.union && h.value.fields.length === old.value.fields.length) diffUnion(`heap:${h.id}`, label, fieldSep(lang), old.value.fields, h.value.fields, inner, line);
+		else if (h.value.k === "record" && old.value.k === "record") h.value.fields.forEach((f, i) => diffValue(`heap:${h.id}.${f.name}`, `${label}${fieldSep(lang)}${f.name}`, old.value.fields[i]?.value, f.value, inner, line));
+		else if (h.value.k === "array" && old.value.k === "array") diffValue(`heap:${h.id}`, label, old.value, h.value, inner);
+		else if (isContainer(h.type, lang)) {
+			const byKey = mapChanges(`heap:${h.id}`, label, old.value, h.value);
+			if (byKey) inner.push(...byKey);
+			else if (signature(old.value) !== signature(h.value)) inner.push({
+				path: `heap:${h.id}`,
+				label,
+				before: old.value,
+				after: h.value,
+				whole: true
+			});
+		} else diffValue(`heap:${h.id}`, name && isManual(lang) ? `*${label}` : label, old.value, h.value, inner);
+		out.push(...inner);
+	}
+	return out.filter((c) => !redrawn(c, cur));
+}
+/**
+* Python: a function or class shown as text until now, drawn as an object from
+* this step on (it was just aliased or passed on). Its name didn't change.
+*/
+function redrawn(c, cur) {
+	const before = c.before;
+	const after = c.after;
+	if (before?.k !== "opaque" || after.k !== "ptr" || after.target.kind !== "heap") return false;
+	const id = after.target.id;
+	return cur.heap.some((h) => h.id === id && h.type === before.text);
+}
+/** Keys of the cells/entries that changed inside a whole-value change, or null to outline the whole value. */
+function partsChanged(c) {
+	const { before: b, after: a } = c;
+	if (a.k === "array" && b?.k === "array" && a.items.length > b.items.length && b.items.every((x, i) => signature(x) === signature(a.items[i]))) return a.items.slice(b.items.length).map((_, i) => `${c.path}[${b.items.length + i}]`);
+	if (a.k === "map" && b?.k === "map") {
+		const old = new Map(b.entries.map((e) => [signature(e.key), signature(e.value)]));
+		const keys = a.entries.filter((e) => old.get(signature(e.key)) !== signature(e.value)).map((e) => `${c.path}{${signature(e.key)}}`);
+		return keys.length ? keys : null;
+	}
+	return null;
+}
+/**
+* Keys the renderer outlines: each changed element's path, plus the key of
+* the binding or heap object it belongs to.
+*/
+function changedKeys(prev, cur) {
+	const keys = /* @__PURE__ */ new Set();
+	for (const c of changesBetween(prev, cur)) {
+		const owner0 = c.path.match(/^(var:[^:]+:[^.[]+|global:[^.[]+|heap:[^.[]+)/)?.[1];
+		const parts = partsChanged(c);
+		if (parts) {
+			for (const k of parts) keys.add(k);
+			if (owner0) keys.add(`${owner0}~`);
+			continue;
+		}
+		keys.add(c.path);
+		const owner = c.path.match(/^(var:[^:]+:[^.[]+|global:[^.[]+|heap:[^.[]+)/)?.[1];
+		if (owner && owner === c.path) keys.add(owner);
+		if (owner) keys.add(`${owner}~`);
+	}
+	return keys;
+}
+// ../renderer/src/describe/source.ts
+/** A `catch (...)` (C++, Java): reached only when an exception is caught. */
+var CATCH = /\bcatch\s*\(/;
+/** If `line` starts an if/while/for, its condition and body extent. */
+function branchAt(lines, line, lang = "c") {
+	const text = lines[line - 1] ?? "";
+	if (isPy(lang)) {
+		const py = text.match(/^(\s*)(if|elif|while|for)\s+(.+):\s*(?:#.*)?$/);
+		if (!py) return null;
+		const each = py[2] === "for" ? py[3].match(/^.+?\s+in\s+(.+)$/)?.[1] : void 0;
+		if (py[2] === "for" && !each) return null;
+		const indent = py[1].length;
+		let end = line;
+		for (let l = line + 1; l <= lines.length; l++) {
+			const src = lines[l - 1] ?? "";
+			if (!src.trim() || /^\s*#/.test(src)) continue;
+			if ((src.match(/^\s*/)?.[0].length ?? 0) <= indent) break;
+			end = l;
+		}
+		if (end === line) return null;
+		if (each) return {
+			kind: "for",
+			condition: "",
+			body: [line + 1, end],
+			range: each.trim()
+		};
+		return {
+			kind: py[2] === "while" ? "while" : "if",
+			condition: py[3].trim(),
+			body: [line + 1, end]
+		};
+	}
+	const m = text.match(/^\s*(?:\}\s*else\s+)?(if|while|for)\s*\(/);
+	if (!m) return null;
+	let depth = 0;
+	let i = text.indexOf("(", m.index + m[0].length - 1);
+	const start = i + 1;
+	for (; i < text.length; i++) if (text[i] === "(") depth++;
+	else if (text[i] === ")" && --depth === 0) break;
+	if (depth !== 0) return null;
+	let condition = text.slice(start, i).trim();
+	let range;
+	if (m[1] === "for" && !condition.includes(";")) {
+		const each = isJs(lang) ? /^(?:(?:const|let|var)\s+)?.+?\s+(?:of|in)\s+(.+)$/ : /^.*?[^:]:(?!:)\s*(.+)$/;
+		range = condition.match(each)?.[1]?.trim();
+		condition = "";
+	} else if (m[1] === "for") condition = (condition.split(";")[1] ?? "").trim();
+	const rest = text.slice(i + 1).trim();
+	let body;
+	if (rest.startsWith("{")) {
+		let d = 0;
+		let end = line;
+		for (let l = line; l <= lines.length; l++) {
+			const src = l === line ? rest : lines[l - 1] ?? "";
+			for (const ch of src) d += ch === "{" ? 1 : ch === "}" ? -1 : 0;
+			if (d <= 0) {
+				end = l;
+				break;
+			}
+		}
+		body = [line + 1, Math.max(line, end - 1)];
+	} else if (rest && rest !== "{") body = [line, line];
+	else body = [line + 1, line + 1];
+	return {
+		kind: m[1],
+		condition,
+		body,
+		...range ? { range } : {}
+	};
+}
+/** The innermost loop or switch around `line`, found by matching braces upwards. */
+function enclosingBlock(lines, line) {
+	let depth = 0;
+	for (let l = line - 1; l >= 1; l--) {
+		const src = (lines[l - 1] ?? "").replace(/\/\/.*$/, "");
+		for (let k = src.length - 1; k >= 0; k--) if (src[k] === "}") depth++;
+		else if (src[k] === "{" && depth-- === 0) {
+			const kind = /\bswitch\s*\(/.test(src) ? "switch" : /\b(?:for|while)\s*\(|\bdo\b/.test(src) ? "loop" : null;
+			if (!kind) {
+				depth = 0;
+				continue;
+			}
+			let d = 0;
+			for (let e = l; e <= lines.length; e++) {
+				for (const ch of lines[e - 1] ?? "") d += ch === "{" ? 1 : ch === "}" ? -1 : 0;
+				if (d <= 0) return {
+					kind,
+					start: l,
+					end: e
+				};
+			}
+			return {
+				kind,
+				start: l,
+				end: lines.length
+			};
+		}
+	}
+	return null;
+}
+/** A line starting a for loop (Python's `async for` too): loops ask generators for their values. */
+var FOR_LOOP = /^\s*(?:async\s+)?for\b/;
+/**
+* "n == NULL is false, so its body is skipped": which way a condition went,
+* read from where execution goes next.
+*/
+function conditionVerdict(lines, prev, cur, lang = "c") {
+	const branch = branchAt(lines, prev.line, lang);
+	const range = lang === "cpp" || isJava(lang) || isDynamic(lang) ? branch?.range : void 0;
+	if (!branch || !branch.condition && !range) return "";
+	const [b0, b1] = branch.body;
+	const inline = b0 === prev.line;
+	const loop = isJava(lang) && inline && branch.kind === "if" && /\)\s*break\s*;\s*(?:\/\/.*)?$/.test(lines[prev.line - 1] ?? "") ? enclosingBlock(lines, prev.line) : null;
+	let truth;
+	if (loop) {
+		truth = cur.line < loop.start || cur.line > loop.end;
+		return `${branch.condition} is ${truth ? "true" : "false"}, ${truth ? `so break leaves the ${loop.kind}` : "so its body is skipped"}`;
+	}
+	if (inline) {
+		if (cur.event === "return" && !/\breturn\b/.test(lines[prev.line - 1] ?? "")) return "";
+		if (cur.event === "return") truth = true;
+		else if (cur.line !== prev.line) truth = branch.kind === "if" && (changesBetween(prev, cur, lang).length > 0 || cur.stdoutLength > prev.stdoutLength);
+		else if (branch.kind === "if" && !isDynamic(lang) && cur.col !== void 0 && prev.col !== void 0 && cur.col > prev.col) truth = true;
+		else return "";
+	} else truth = cur.line >= b0 && cur.line <= b1;
+	if (range && isDynamic(lang)) return truth ? "" : `the loop has gone through every item in ${range}, so it ends`;
+	if (range) return truth ? "" : `the loop has been through every element of ${range}, so it ends`;
+	if (isPy(lang) && branch.kind === "while" && /^(True|1)$/.test(branch.condition)) return truth ? `while ${branch.condition} keeps looping until something breaks out of it` : "";
+	if (isJs(lang) && branch.kind === "while" && branch.condition === "true") return truth ? "while (true) keeps looping until something breaks out of it" : "";
+	const effect = branch.kind === "if" ? truth ? "so its body runs" : "so its body is skipped" : truth ? "so the loop runs" : "so the loop ends";
+	return `${branch.condition} is ${truth ? "true" : "false"}, ${effect}`;
+}
+/** Value of `n->val`, `arr[i]`, `p.x` in `frame` (or a global), if it is a plain value. */
+function lookup(path, frame, step) {
+	const parts = path.match(/^([A-Za-z_]\w*)((?:\s*(?:->|\.)\s*[A-Za-z_]\w*|\s*\[[^\]]*\])*)$/);
+	if (!parts) return void 0;
+	const scope = (name) => [...frame.locals, ...step.globals].find((b) => b.name === name)?.value;
+	let v = scope(parts[1]);
+	const deref = (x) => {
+		if (x?.k !== "ptr" || x.target.kind !== "heap") return void 0;
+		const id = x.target.id;
+		return step.heap.find((h) => h.id === id)?.value;
+	};
+	for (const [, op, field, index] of parts[2].matchAll(/\s*(->|\.|\[)\s*([A-Za-z_]\w*)?([^\]]*)\]?/g)) {
+		if (op === "->" || op === "." && v?.k === "ptr") v = deref(v);
+		if (op === "->" || op === ".") v = v?.k === "record" ? v.fields.find((f) => f.name === field)?.value : void 0;
+		else {
+			const raw = `${field ?? ""}${index ?? ""}`.trim();
+			const at = /^\d+$/.test(raw) ? Number(raw) : Number(((x) => x?.k === "prim" ? x.text : NaN)(scope(raw)));
+			const arr = v?.k === "array" ? v : deref(v);
+			v = arr?.k === "array" && Number.isInteger(at) ? arr.items[at] : void 0;
+		}
+	}
+	return v;
+}
+// ../renderer/src/describe/cpp.ts
+/** C++ unique_ptr / shared_ptr. Their objects' names carry the owner count: "Account (2 owners)". */
+var SMART = /^(?:const )?(unique|shared)_ptr</;
+var WEAK = /^(?:const )?weak_ptr</;
+/** Smart pointers in `step` (any frame or global) that hold heap object `id`. */
+function ownersOf(step, id) {
+	return [...step.frames.flatMap((f) => f.locals), ...step.globals].filter((b) => SMART.test(b.type) && b.value.k === "ptr" && b.value.target.kind === "heap" && b.value.target.id === id);
+}
+/**
+* A smart pointer variable that changed: "p now owns a new Account", "b now
+* shares the Account with a (2 owners)", "p2 now owns the Account (moved
+* from p)", "a is now empty (b still owns the Account)". Null otherwise.
+*/
+function smartPhrase(c, cur, prev, lang) {
+	if (lang === "cpp" && WEAK.test(c.after.type)) return weakPhrase(c, cur);
+	const kind = lang === "cpp" ? c.after.type.match(SMART)?.[1] : void 0;
+	if (!kind || c.after.k !== "ptr") return null;
+	const t = c.after.target;
+	if (t.kind === "null") {
+		const was = c.before?.k === "ptr" && c.before.target.kind === "heap" ? c.before.target.id : void 0;
+		const obj = was ? cur.heap.find((h) => h.id === was) : void 0;
+		const others = was && kind === "shared" ? ownersOf(cur, was).map((b) => b.name) : [];
+		const still = obj && others.length ? ` (${list(others)} ${others.length > 1 ? "still own" : "still owns"} the ${ownedName(obj.type)})` : "";
+		return `${c.label} is now empty${still}`;
+	}
+	if (t.kind !== "heap") return null;
+	const obj = cur.heap.find((h) => h.id === t.id);
+	const name = ownedName(obj?.type ?? "object");
+	if (!prev.heap.some((h) => h.id === t.id)) return `${c.label} now owns a new ${name}`;
+	const what = obj?.value.k === "record" ? holding({
+		...obj,
+		type: name
+	}, name) : `the ${name}`;
+	const from = ownersOf(prev, t.id).find((b) => b.name !== c.label && !ownersOf(cur, t.id).some((x) => x.name === b.name));
+	if (kind === "unique" || from) return `${c.label} now owns ${what}${from ? ` (moved from ${from.name})` : ""}`;
+	const others = ownersOf(cur, t.id).filter((b) => b.name !== c.label).map((b) => b.name);
+	const n = others.length + 1;
+	return `${c.label} now shares the ${name}${others.length ? ` with ${list(others)}` : ""} (${n} owners)`;
+}
+/**
+* A weak_ptr that changed: "w now watches the Account (a owns it)", or, when
+* the last owner let go, "w has expired".
+*/
+function weakPhrase(c, cur) {
+	const a = c.after;
+	if (a.k === "opaque" && a.text === "expired") return `${c.label} has expired`;
+	if (a.k !== "ptr") return null;
+	if (a.target.kind === "null") return `${c.label} is now empty`;
+	if (a.target.kind !== "heap") return null;
+	const id = a.target.id;
+	const owners = ownersOf(cur, id).map((b) => b.name);
+	const name = ownedName(cur.heap.find((h) => h.id === id)?.type ?? "object");
+	return `${c.label} now watches the ${name} without owning it${owners.length ? ` (${list(owners)} ${owners.length > 1 ? "own" : "owns"} it)` : ""}`;
+}
+/** Pointer variables on `line` that the change was made through. */
+function throughPointer(c, top, line) {
+	if (!top || !c.path.startsWith("var:")) return null;
+	const target = c.path.split(":")[2]?.split(/[.[]/)[0];
+	for (const b of top.locals) {
+		if (b.value.k !== "ptr" || b.value.target.kind !== "stack" || b.value.target.name !== target) continue;
+		const name = b.name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+		if (new RegExp(`\\*\\s*${name}\\b|\\b${name}\\s*(->|\\[)`).test(line) && b.name !== target) return b.name;
+	}
+	return null;
+}
+/** "an invalid_argument with the message "negative"", "the int 42", "a BadInput". */
+function thrownText(t) {
+	const name = t.type.replace(/^std::/, "");
+	if (/^std::/.test(t.type) && t.what !== void 0) return `${withArticle(name)} with the message ${t.what}`;
+	return t.what !== void 0 ? `the ${name} ${t.what}` : withArticle(name);
+}
+/** A line that only closes a block. */
+var CLOSING = /^\s*}\s*;?\s*(?:\/\/.*)?$/;
+/**
+* C++ `throw`: what was thrown, which calls it ended, and where it went.
+* "Line 5 throws an invalid_argument with the message "negative". checked
+* stops there without returning, and the catch on line 15 in main catches it."
+*/
+function describeThrow(cur, prev, lines, lang) {
+	const t = cur.thrown;
+	const sentences = [t.rethrown ? `Line ${t.line} rethrows the ${t.type.replace(/^std::/, "")} it caught, so it goes on looking for another catch.` : `Line ${t.line} throws ${thrownText(t)}.`];
+	sentences.push(unwound(cur, prev, lines, lang, "it"));
+	return sentences.join(" ");
+}
+/** Where an exception went between `prev` and `cur`: the calls it ended, and the catch or cleanup it reached. */
+function unwound(cur, prev, lines, lang, it) {
+	const ended = prev.frames.filter((f) => !cur.frames.some((g) => g.id === f.id)).reverse().map((f) => callName(f.name, lang));
+	const top = cur.frames.at(-1);
+	const where = top ? callName(top.name, lang) : "";
+	const text = lines[cur.line - 1] ?? "";
+	const stops = ended.length ? `${list(ended)} ${ended.length > 1 ? "stop" : "stops"} without returning, and ` : "";
+	const inWhere = ended.length ? ` in ${where}` : "";
+	if (CATCH.test(text)) return ended.length ? `${stops}the catch on line ${cur.line}${inWhere} catches ${it}.` : `The rest of the try block is skipped, and the catch on line ${cur.line} catches ${it}.`;
+	if (CLOSING.test(text)) return `${stops}${stops ? "on" : "On"} its way out, C++ cleans up at line ${cur.line}${inWhere}: objects in the blocks it leaves are destroyed.`;
+	if (top && /~/.test(top.name)) return `On the way out, C++ runs ${callName(top.name, lang)} to clean up.`;
+	return `${stops}${stops ? "the" : "The"} program carries on at line ${cur.line}${inWhere}.`;
+}
+/**
+* After cleanup steps, an exception reaching its catch (or ending more calls
+* on the way): the throw it continues, if this step is one.
+*/
+function exceptionArrival(trace, i, lines) {
+	const cur = trace.steps[i];
+	const prev = trace.steps[i - 1];
+	if (cur.event !== "step" || cur.thrown) return void 0;
+	const ended = prev.event !== "return" && prev.frames.some((f) => !cur.frames.some((g) => g.id === f.id));
+	const atCatch = cur.line !== prev.line && CATCH.test(lines[cur.line - 1] ?? "");
+	if (!ended && !atCatch) return void 0;
+	for (let j = i - 1; j > 0; j--) {
+		const s = trace.steps[j];
+		if (s.thrown) return s.thrown;
+		if (j < i - 1 && CATCH.test(lines[s.line - 1] ?? "") && s.line !== trace.steps[j - 1].line) return void 0;
+	}
+}
+// ../renderer/src/describe/java.ts
+/** Java: references are assigned, shared and cleared, never "pointed". */
+function javaRefPhrase(c, cur, prev, line = "") {
+	const v = c.after;
+	if (v.k === "opaque" && c.before?.k === "opaque" && v.text.endsWith(" (used)") && !c.before.text.endsWith(" (used)")) return `${c.label} is used up: a stream can be used only once`;
+	if (v.k !== "ptr") return null;
+	if (v.target.kind === "null") return `${c.label} is now null: it doesn't refer to any object`;
+	if (v.target.kind !== "heap") return null;
+	const id = v.target.id;
+	const obj = cur.heap.find((x) => x.id === id);
+	const type = obj?.type ?? "object";
+	if (!prev.heap.some((x) => x.id === id)) return viewPhrase(c.label, type, line) ?? streamPhrase(c.label, obj) ?? `${c.label} now refers to a new ${type}`;
+	const same = sharers(cur, id, c.label);
+	if (same.length) return `${c.label} now refers to the same ${type} as ${list(same)}`;
+	const held = heldBy(cur, id, c.label, "java");
+	return held ? `${c.label} now refers to the same ${type} as ${held}` : `${c.label} now refers to ${holding(obj, type)}`;
+}
+/**
+* Java's keySet(), values(), entrySet() and subList() are views, not copies:
+* "names now refers to the keys of ages, a live view: a change to either shows in both".
+*/
+function viewPhrase(label, type, line) {
+	const kind = type.match(/\.(KeySet|Values|EntrySet|SubList)$/)?.[1];
+	if (!kind) return null;
+	const src = line.match(/([\w.]+?)\s*\.\s*(?:keySet|values|entrySet|subList|navigableKeySet)\s*\(/)?.[1];
+	const what = {
+		KeySet: "keys",
+		Values: "values",
+		EntrySet: "entries",
+		SubList: "part"
+	}[kind];
+	return `${label} now refers to ${src ? `${kind === "SubList" ? "part" : `the ${what}`} of ${src}` : `${kind === "SubList" ? "part" : `the ${what}`} of another collection`}, a live view: a change to either shows in both`;
+}
+/**
+* Java streams are lazy, the thing to know when one is stored: "s now refers
+* to a new Stream (filter → map over a list). Nothing has run yet: ..."
+*/
+function streamPhrase(label, obj) {
+	if (!obj || !/^(Int|Long|Double)?Stream$/.test(obj.type) || obj.value.k !== "opaque") return null;
+	return `${label} now refers to a new ${obj.type} (${obj.value.text}). Nothing has run yet: a stream does its work when an operation like collect or forEach asks it for elements`;
+}
+/** "(a refers to the same Point, so a.y is 5 too)": the point of aliasing. */
+function aliasNote(c, cur) {
+	const id = c.path.match(/^heap:([^.[]+)/)?.[1];
+	if (!id) return "";
+	const other = sharers(cur, id, c.label)[0];
+	if (!other) return "";
+	const root = c.label.match(/^[\w$]+/)?.[0] ?? c.label;
+	const type = cur.heap.find((h) => h.id === id)?.type ?? "object";
+	if (c.after.k !== "prim") return ` (${other} refers to the same ${type}, so it sees the change too)`;
+	return ` (${other} refers to the same ${type}, so ${other.replace(/^.*'s /, "")}${c.label.slice(root.length)} is ${c.after.text} too)`;
+}
+/**
+* Java: a list of objects that grew or shrank, naming its objects the way
+* the program reaches them: "list now has 2 items: the same Rect as r and
+* the same Square as sq". Null for lists of plain values ("[1, 2]").
+*/
+function javaListPhrase(c, cur, prev) {
+	const v = c.after;
+	if (v.k !== "array" || v.type.endsWith("]") || !v.items.some((x) => x.k === "ptr" && x.target.kind === "heap")) return null;
+	const n = v.items.length;
+	const count = `${c.label} now has ${n}${v.truncated ? "+" : ""} ${n === 1 ? "item" : "items"}`;
+	const top = cur.frames.at(-1);
+	const item = (x) => {
+		if (x.k !== "ptr" || x.target.kind !== "heap") return valueText(x, "java");
+		const id = x.target.id;
+		const obj = cur.heap.find((h) => h.id === id);
+		const type = obj?.type ?? "object";
+		if (!prev.heap.some((h) => h.id === id)) return `a new ${type}`;
+		const name = top?.locals.find((b) => b.value.k === "ptr" && b.value.target.kind === "heap" && b.value.target.id === id)?.name;
+		return name ? `the same ${type} as ${name}` : holding(obj, type);
+	};
+	if (n <= 3 && !v.truncated) return `${count}: ${list(v.items.map(item))}`;
+	return (c.before?.k === "array" ? c.before.items.length : -1) === n - 1 ? `${count}; the last one is ${item(v.items.at(-1))}` : count;
+}
+/**
+* Java: `q = a / b` with ints keeps only the whole part, a classic
+* surprise: " (int division drops the .5)". Empty otherwise.
+*/
+function intDivisionNote(c, frame, step, srcLine) {
+	const v = c.after;
+	if (!frame || v.k !== "prim" || !/^(int|long|short|byte)$/.test(v.type)) return "";
+	const name = c.label.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	const m = srcLine.match(new RegExp(`(?:^|[\\s(])${name}\\s*=\\s*([\\w.]+)\\s*/\\s*([\\w.]+)\\s*;`));
+	if (!m) return "";
+	const num = (s) => {
+		if (/^\d+$/.test(s)) return Number(s);
+		const x = lookup(s, frame, step);
+		return x?.k === "prim" && /^-?\d+$/.test(x.text) ? Number(x.text) : NaN;
+	};
+	const [a, b] = [num(m[1]), num(m[2])];
+	if (!Number.isFinite(a) || !Number.isFinite(b) || b === 0 || a % b === 0) return "";
+	const frac = Math.abs(a / b) % 1;
+	return ` (int division drops the ${frac.toFixed(3).replace(/0+$/, "").slice(1)}${Number(frac.toFixed(3)) === frac ? "" : "…"})`;
+}
+/** `Rect.count to 0`, `Main.memo to a new int[5]`: what Java set static fields to. */
+function staticsSet(globals, step) {
+	if (globals.length > 3) return `set up ${globals.length} static fields`;
+	const to = (b) => {
+		const v = b.value;
+		if (v.k !== "ptr" || v.target.kind !== "heap") return `${b.name} to ${valueText(v, "java")}`;
+		const id = v.target.id;
+		return `${b.name} to a new ${step.heap.find((h) => h.id === id)?.type ?? "object"}`;
+	};
+	return `set the static ${globals.length === 1 ? "field" : "fields"} ${list(globals.map(to))}`;
+}
+/**
+* Java's other jumps, read from the source: "break leaves the loop",
+* "switch (day) matched case 3". Empty when the line has neither.
+*/
+function javaJump(lines, prev, cur) {
+	const src = lines[prev.line - 1] ?? "";
+	const sw = src.match(/^\s*switch\s*\((.+)\)\s*\{?\s*$/);
+	if (sw) {
+		for (let l = cur.line; l > prev.line; l--) {
+			const to = lines[l - 1] ?? "";
+			const label = to.match(/^\s*case\s+(.+?)\s*(?:->|:(?!:))/)?.[1];
+			if (label) return `switch (${sw[1]}) matched case ${label}`;
+			if (/^\s*default\s*(?:->|:)/.test(to)) return `switch (${sw[1]}) matched no case, so it runs default`;
+		}
+		return cur.line > prev.line ? `switch (${sw[1]}) matched no case, so nothing in it runs` : "";
+	}
+	if (/^\s*(?:[^/]*[;:{}]\s*)?break\s*;\s*(?:\/\/.*)?$/.test(src) && !branchAt(lines, prev.line, "java")) {
+		const target = enclosingBlock(lines, prev.line);
+		if (target) return `break leaves the ${target.kind}`;
+	}
+	if (/^\s*}\s*(?:\/\/.*)?$/.test(src) && cur.line < prev.line && enclosingBlock(lines, prev.line)?.kind === "loop") return `the loop body ends here, so it goes back to line ${cur.line}`;
+	return "";
+}
+// ../renderer/src/describe/python.ts
+/** "function step()" / "class Account" → "step" / "Account". */
+var pyDefName = (type) => type.match(/^(?:function|class) ([\w<>]+)/)?.[1];
+/** A function or class object's own data ("count = 0"), as captions list it. */
+var fieldList = (v, lang) => v.k === "record" ? v.fields.filter((f) => f.value.k !== "opaque").map((f) => `${f.name} = ${valueText(f.value, lang)}`) : [];
+/**
+* Python: `def`/`class` that made function or class object `obj`, bound to
+* its own name: "it defined the function step(), which remembers count = 0
+* from make_counter", "it defined the class Account, with rate = 0.05".
+*/
+function pyDefinition(obj, label, prev, lang = "python") {
+	if (pyDefName(obj.type) !== label) return null;
+	const data = fieldList(obj.value, lang);
+	if (obj.type.startsWith("class ")) return `it defined the ${obj.type}${data.length ? `, with ${list(data)}` : ""}`;
+	const maker = prev.frames.at(-1)?.name;
+	return `it defined the ${obj.type}${data.length ? `, which remembers ${list(data)}${maker ? ` from ${maker}` : ""}` : ""}`;
+}
+/**
+* Python: the function object a call on `line` went through, when the line
+* names it by another variable (`tick()` calling step): "tick".
+*/
+function pyCalledThrough(step, callee, line) {
+	const bindings = [...step.frames.at(-2)?.locals ?? [], ...step.globals];
+	for (const b of bindings) {
+		if (b.value.k !== "ptr" || b.value.target.kind !== "heap") continue;
+		const id = b.value.target.id;
+		const obj = step.heap.find((h) => h.id === id);
+		if (!obj || pyDefName(obj.type) !== callee.name || !new RegExp(`\\b${b.name.replace(/\$/g, "\\$")}\\s*\\(`).test(line)) continue;
+		return {
+			via: b.name === callee.name ? void 0 : b.name,
+			obj
+		};
+	}
+	return null;
+}
+/** Python: the class whose `__del__` this frame runs (`R.__del__` → "R"). */
+function pyDestructorOf(name, lang) {
+	return isPy(lang) ? /(?:^|\.)(\w+)\.__del__$/.exec(name)?.[1] : void 0;
+}
+/** Python's `except ...:` line: reached only while an exception is being handled. */
+var PY_EXCEPT = /^\s*except\b/;
+/**
+* Python: the step that lands on an except clause. The tracer puts the
+* exception being handled in `message` (it is not a crash).
+*/
+function pyCaught(cur, prev, lines) {
+	const msg = cur.message;
+	const [, name = msg, detail] = msg.match(/^([\w.]+)(?::\s*([\s\S]*))?$/) ?? [];
+	const said = detail ? ` (${detail})` : "";
+	const here = `the except on line ${cur.line}`;
+	if (prev.frames.at(-1)?.id === cur.frames.at(-1)?.id && prev.message === msg && PY_EXCEPT.test(lines[prev.line - 1] ?? "")) return `The except on line ${prev.line} doesn't catch ${article(name)} ${name}, so Python tries ${here}.`;
+	const thrower = prev.frames.length > cur.frames.length ? prev.frames.at(-1) : void 0;
+	if (thrower) return `${thrower.name} raised ${name}${said} on line ${prev.line}, so Python left ${thrower.name} and jumped to ${here}.`;
+	return `Line ${prev.line} raised ${name}${said}, so Python jumped to ${here}.`;
+}
+/**
+* Python lines that change nothing visible but still did something: `break`,
+* `continue`, a for loop whose next item equals the last, and an assignment
+* that stored the value already there ("total is still 0").
+*/
+function pyQuietLine(lines, prev, cur) {
+	const src = (lines[prev.line - 1] ?? "").replace(/#.*$/, "").trim();
+	if (src === "break") return ["break leaves the loop"];
+	if (src === "continue") return ["continue skips the rest of the loop body and goes back to the top of the loop"];
+	const top = cur.frames.at(-1);
+	if (prev.frames.at(-1)?.id !== top?.id) return [];
+	const scope = top ?? {
+		id: "",
+		name: "",
+		line: 0,
+		locals: []
+	};
+	const each = src.match(/^for\s+([A-Za-z_]\w*)\s+in\s+(.+):$/);
+	const item = each && lookup(each[1], scope, cur);
+	if (each && item) return [`${each[1]} takes the next item in ${each[2]}, which is ${readable(item, cur, "python")} again`];
+	const target = src.match(/^([A-Za-z_]\w*(?:\.[A-Za-z_]\w*|\[[^\]]*\])*)\s*(?:[-+*/%&|^@]|\/\/|\*\*|<<|>>)?=(?!=)/)?.[1];
+	const v = target && lookup(target, scope, cur);
+	if (!v) return [];
+	if (v.k === "ptr" && v.target.kind === "heap") return [`${target} still refers to ${readable(v, cur, "python")}`];
+	return [`${target} is still ${valueText(v, "python")}`];
+}
+// ../renderer/src/describe/phrases.ts
+/** `counts now maps "the" to 2`: what changed in a map, entry by entry. */
+function mapPhrase(label, before, after, lang) {
+	const old = new Map(before.entries.map((e) => [signature(e.key), e]));
+	const keys = new Set(after.entries.map((e) => signature(e.key)));
+	const parts = [];
+	for (const e of after.entries) {
+		const was = old.get(signature(e.key));
+		if (!was) parts.push(`${label} now maps ${valueText(e.key, lang)} to ${valueText(e.value, lang)}`);
+		else if (signature(was.value) !== signature(e.value)) parts.push(`${label} now maps ${valueText(e.key, lang)} to ${valueText(e.value, lang)} (it was ${valueText(was.value, lang)})`);
+	}
+	for (const e of before.entries) if (!keys.has(signature(e.key))) parts.push(`${valueText(e.key, lang)} was removed from ${label}`);
+	const n = after.entries.length;
+	return parts.length && parts.length <= 2 ? list(parts) : `${label} now has ${n} ${n === 1 ? "entry" : "entries"}`;
+}
+/**
+* JavaScript's null and undefined: "x is now null: it doesn't refer to any
+* object now", "x is now undefined (it has no value yet)". Null otherwise.
+*/
+function jsEmptyPhrase(c) {
+	const v = c.after;
+	if (v.k !== "prim" || v.type !== "null" && v.type !== "undefined") return null;
+	const dropped = c.before?.k === "ptr" && c.before.target.kind === "heap";
+	if (v.type === "null") return `${c.label} is now null${dropped ? ": it doesn't refer to any object now" : ""}`;
+	if (!c.before) return `${c.label} is now undefined (it has no value yet)`;
+	return `${c.label} changed from ${valueText(c.before, "javascript")} to undefined`;
+}
+/** Python's open files: "out is now closed" rather than both descriptions in full. */
+function filePhrase(c) {
+	const a = c.after;
+	const b = c.before;
+	if (a.k !== "opaque" || a.type !== "file") return null;
+	const name = (v) => v.k === "opaque" ? v.text.replace(/ \((?:closed|open for [^)]*)\)$/, "") : "";
+	if (b?.k === "opaque" && b.type === "file" && name(b) === name(a) && a.text.endsWith("(closed)")) return `${c.label} is now closed`;
+	return `${c.label} is now the file ${a.text}`;
+}
+/** Said of a pointer one past an array's last element. */
+var PAST_END = " (fine to compare against, but there's no element there to read)";
+/** One change as a clause: "x changed from 1 to 2", "p now points to a new Node", "b now refers to the same list as a". */
+function changePhrase(c, cur, prev, lang, line = "") {
+	if (c.shares?.length) {
+		const { shares, ...own } = c;
+		const one = shares.length === 1;
+		const names = new Intl.ListFormat("en").format(shares.map((s) => s.label));
+		const values = new Intl.ListFormat("en").format(shares.map((s) => valueText(s.value, lang)));
+		return `${changePhrase(own, cur, prev, lang, line)} (${names} ${one ? "uses" : "use"} the same memory, so ${one ? "it now reads" : "they now read"} ${values})`;
+	}
+	const v = c.after;
+	const file = filePhrase(c);
+	if (file) return file;
+	const empty = isJs(lang) ? jsEmptyPhrase(c) : null;
+	if (empty) return empty;
+	if (isDynamic(lang)) {
+		if (v.k === "ptr" && v.target.kind === "heap") {
+			const id = v.target.id;
+			const obj = cur.heap.find((x) => x.id === id);
+			const type = obj?.type ?? "object";
+			const defined = obj && pyDefinition(obj, c.label, prev, lang);
+			if (defined && !prev.heap.some((x) => x.id === id)) return defined;
+			if ([...prev.globals, ...prev.frames.flatMap((f) => f.locals)].some((b) => b.value.k === "opaque" && b.value.text === type)) return `${c.label} now refers to the ${type}`;
+			if (!prev.heap.some((x) => x.id === id)) {
+				if (obj?.value.k === "array" && !obj.value.items.length || obj?.value.k === "map" && !obj.value.entries.length) return `${c.label} now refers to a new empty ${type}`;
+				const lit = obj && pyLiteral(obj.value, lang);
+				return `${c.label} now refers to a new ${type}${lit ? ` ${lit}` : ""}`;
+			}
+			const other = namesFor(cur, id).find((n) => n !== c.label);
+			return other ? `${c.label} now refers to the same ${type} as ${other}` : `${c.label} now refers to ${pyObject(obj, lang)}`;
+		}
+		if (v.k === "opaque" && !c.before && /^(function|class) /.test(v.text)) return `it defined the ${v.text}`;
+		if (v.k === "opaque" && v.type === "generator") {
+			const name = v.text.match(/^generator (\w+)/)?.[1] ?? "it";
+			return `${c.label} ${c.before ? "now" : "is now"} ${withArticle(v.text)} (none of ${name}'s code has run yet: it starts when asked for its first value)`;
+		}
+	}
+	const java = isJava(lang) ? javaRefPhrase(c, cur, prev, line) ?? javaListPhrase(c, cur, prev) : null;
+	if (java) return java;
+	const smart = smartPhrase(c, cur, prev, lang);
+	if (smart) return smart;
+	if (v.k === "map" && c.before?.k === "map") return mapPhrase(c.label, c.before, v, lang);
+	if (v.k === "ptr" && v.target.kind !== "null") {
+		const verb = isRef(v) ? "refers to" : "points to";
+		const t = v.target;
+		if (t.kind === "heap") {
+			const obj = cur.heap.find((x) => x.id === t.id);
+			if (obj && isContainer(v.type, lang)) return `${c.label} is now ${contents(obj.value, lang, cur)}${adapterEnd(v.type, obj.value, lang)}`;
+			if (obj && (isContainer(obj.type, lang) || t.offset > 0) && obj.value.k === "array" && obj.value.items.length > 0) {
+				const name = heapNames(cur).get(obj.id)?.label;
+				const index = Math.floor(t.offset / (obj.size / obj.value.items.length));
+				if (name && name !== c.label && index < obj.value.items.length) return `${c.label} now ${verb} ${name}[${index}]`;
+				if (index === obj.value.items.length) return `${c.label} now points just past the end of ${name && name !== c.label ? name : `the ${obj.type}`}${PAST_END}`;
+			}
+			const created = !prev.heap.some((x) => x.id === t.id);
+			const type = obj?.type ?? "value";
+			if (obj?.exception && created) return `${c.label} now ${verb} the ${type} that was thrown`;
+			if (created) return `${c.label} now ${verb} a new ${type}`;
+			const other = namesFor(cur, t.id).find((n) => n !== c.label) ?? heldBy(cur, t.id, c.label, lang);
+			if (other && t.offset === 0) return `${c.label} now ${verb} the same ${ownedName(type)} as ${other}`;
+			return `${c.label} now ${verb} ${holding(obj, type)}`;
+		}
+		if ((t.kind === "stack" || t.kind === "global") && t.offset > 0) {
+			const arr = (t.kind === "stack" ? cur.frames.find((f) => f.id === t.frame)?.locals : cur.globals)?.find((b) => b.name === t.name)?.value;
+			if (arr?.k === "array" && arr.items.length > 0) {
+				const index = t.size ? Math.floor(t.offset / (t.size / arr.items.length)) : -1;
+				if (index >= 0 && index < arr.items.length) return `${c.label} now ${verb} ${t.name}[${index}]`;
+				if (index === arr.items.length) return `${c.label} now points just past the end of ${t.name}${PAST_END}`;
+			}
+		}
+		return `${c.label} now ${verb} ${valueText(v, lang)}`;
+	}
+	if (c.whole && lang === "cpp" && (v.k === "array" || v.k === "map")) return `${c.label} is now ${contents(v, lang, cur)}${adapterEnd(v.type, v, lang)}`;
+	if (c.whole && v.k === "array") return `${c.label} is now ${valueText(v, lang)}`;
+	if (!c.before) return `${c.label} is now ${valueText(v, lang)}`;
+	return `${c.label} changed from ${valueText(c.before, lang)} to ${valueText(v, lang)}`;
+}
+/**
+* Python: a change made through one of several names for the same object.
+* "b is now [1, 2, 3, 4] (b and a both refer to this list)": the name used
+* on the line leads, and the others are named so the aliasing is visible.
+*/
+function pyAliasPhrase(c, cur, prev, srcLine, noted, lang = "python") {
+	const id = c.path.slice(5).split(/[.[]/)[0];
+	const fn = cur.heap.find((h) => h.id === id && h.type.startsWith("function "));
+	const field = c.path.slice(`heap:${id}.`.length);
+	if (fn && /^\w+$/.test(field)) {
+		const alias = namesFor(cur, id)[0];
+		const holder = pyDefName(fn.type) ?? (alias ? `the function ${alias} refers to` : "the function");
+		return `${changePhrase({
+			...c,
+			label: field
+		}, cur, prev, lang)} (${holder} keeps it in its function object, so it lasts between calls)`;
+	}
+	const names = namesFor(cur, id);
+	const root = c.label.match(/^[A-Za-z_$][\w$]*/)?.[0] ?? "";
+	if (names.length < 2 || !names.includes(root)) return changePhrase(c, cur, prev, lang);
+	const used = names.find((n) => new RegExp(`\\b${n}\\b`).test(srcLine)) ?? root;
+	const label = used + c.label.slice(root.length);
+	const type = cur.heap.find((h) => h.id === id)?.type ?? "object";
+	const all = [used, ...names.filter((n) => n !== used)];
+	const phrase = changePhrase({
+		...c,
+		label
+	}, cur, prev, lang);
+	if (noted.has(id)) return phrase;
+	noted.add(id);
+	return `${phrase} (${list(all)} ${all.length === 2 ? "both" : "all"} refer to this ${type})`;
+}
+// ../renderer/src/describe/js.ts
+/** JavaScript's `catch`: reached only while an exception is being handled. */
+var JS_CATCH = /\bcatch\b/;
+/** JavaScript: the step that lands on a catch carries the exception in `message`. */
+function jsCaught(cur, prev) {
+	const msg = cur.message;
+	const [, name = msg, detail] = msg.match(/^([\w$.]+)(?::\s*([\s\S]*))?$/) ?? [];
+	const said = detail ? ` ("${detail}")` : "";
+	const here = `the catch on line ${cur.line}`;
+	const thrower = prev.frames.length > cur.frames.length ? prev.frames.at(-1) : void 0;
+	const who = thrower && callName(thrower.name, "javascript");
+	if (who) return `${who} threw ${name}${said} on line ${prev.line}, so JavaScript left ${who} and jumped to ${here}.`;
+	return `Line ${prev.line} threw ${name}${said}, so JavaScript jumped to ${here}.`;
+}
+/**
+* JavaScript lines that change nothing visible but still did something:
+* `continue`, and an assignment that stored the value already there
+* ("total is still 0"). (`break` is told by javaJump.)
+*/
+function jsQuietLine(lines, prev, cur) {
+	const src = (lines[prev.line - 1] ?? "").replace(/\/\/.*$/, "").trim().replace(/;$/, "");
+	if (src === "continue") return ["continue skips the rest of the loop body and goes back to the top of the loop"];
+	const then = src.match(/\.(then|catch|finally)\s*\(/)?.[1];
+	if (then) return [`the callback given to .${then} waits for the Promise to settle, and then runs as a queued job`];
+	if (/\bsetTimeout\s*\(/.test(src)) return ["setTimeout starts a timer: its callback runs once the timer is due and the code running now has finished"];
+	if (/\bsetInterval\s*\(/.test(src)) return ["setInterval starts a repeating timer: its callback runs each time the timer is due"];
+	if (/\bqueueMicrotask\s*\(/.test(src)) return ["the function given to queueMicrotask runs as a queued job once the code running now has finished"];
+	const top = cur.frames.at(-1);
+	if (prev.frames.at(-1)?.id !== top?.id) return [];
+	const target = src.match(/^(?:(?:let|var)\s+)?([A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\[[^\]]*\])*)\s*(?:[-+*/%&|^]|\*\*|<<|>>>?)?=(?![=>])/)?.[1];
+	const v = target && lookup(target, top ?? {
+		id: "",
+		name: "",
+		line: 0,
+		locals: []
+	}, cur);
+	if (!v) return [];
+	if (v.k === "ptr" && v.target.kind === "heap") return [`${target} still refers to ${readable(v, cur, "javascript")}`];
+	return [`${target} is still ${valueText(v, "javascript")}`];
+}
+/** Which field of a Promise on the heap a change is to ("state", "value", "reason"), if it is one. */
+function promiseField(c, cur) {
+	const m = c.path.match(/^heap:([^.[]+)\.(state|value|reason)$/);
+	return m && cur.heap.find((h) => h.id === m[1])?.type === "Promise" ? m[2] : void 0;
+}
+/** A Promise on the heap: its state and what it settled with. Undefined if `id` is not a Promise. */
+function promiseAt(id, step) {
+	const h = step.heap.find((x) => x.id === id);
+	if (h?.type !== "Promise" || h.value.k !== "record") return void 0;
+	const state = h.value.fields.find((f) => f.name === "state")?.value;
+	const value = h.value.fields.find((f) => f.name === "value" || f.name === "reason")?.value;
+	return {
+		state: state?.k === "opaque" ? state.text : "pending",
+		...value ? { value } : {}
+	};
+}
+/** The heap object a value refers to, if any. */
+var heapId = (v) => v?.k === "ptr" && v.target.kind === "heap" ? v.target.id : void 0;
+/** "the Promise p" when a variable refers to it, otherwise `unnamed`. */
+function promiseName(id, step, unnamed) {
+	const label = id ? heapNames(step, "javascript").get(id)?.label : void 0;
+	if (!label) return unnamed;
+	return /^[\w$]+$/.test(label) ? `the Promise ${label}` : label;
+}
+/** "resolved with 3" / "was rejected with Error: boom". */
+function settledPhrase(state, value, step) {
+	const v = value ? ` with ${readable(value, step, "javascript")}` : "";
+	return state === "rejected" ? `was rejected${v}` : `resolved${v}`;
+}
+/** A Promise on the heap settled this step: "the Promise p resolved with 3". */
+function promiseSettled(c, cur) {
+	const id = c.path.match(/^heap:([^.[]+)/)[1];
+	const label = c.label.replace(/\.state$/, "");
+	const name = /^[\w$]+$/.test(label) ? `the Promise ${label}` : label;
+	const s = promiseAt(id, cur);
+	return `${name} ${settledPhrase(s?.state, s?.value, cur)}`;
+}
+/** Who runs while an async function waits: its caller, the main program, or the next queued job. */
+function carriesOn(cur, lang) {
+	const caller = cur.frames.at(-2);
+	if (caller) return `${callName(caller.name, lang)} carries on`;
+	return cur.queued ? "JavaScript moves on to whatever is queued next" : "the main program carries on";
+}
+/** The `await` step: what the async function waits for, and who runs meanwhile. */
+function jsAwaiting(cur, top, lang) {
+	const name = callName(top.name, lang);
+	const v = top.awaiting;
+	const id = heapId(v);
+	const p = promiseAt(id, cur);
+	const meanwhile = carriesOn(cur, lang);
+	if (p?.state === "pending") return `${name} is waiting for ${promiseName(id, cur, "a Promise")} to settle, so it pauses here and ${meanwhile} meanwhile.`;
+	if (p) return `${name} awaits ${promiseName(id, cur, "a Promise")} that has already ${p.state === "rejected" ? "been rejected" : "resolved"}. It still pauses until the code running now is done, so ${meanwhile} first.`;
+	return `${name} awaits ${v ? readable(v, cur, lang) : "undefined"}, which isn't a Promise. It still pauses until the code running now is done, so ${meanwhile} first.`;
+}
+/** The job a queued step belongs to: found on the job's first step. */
+function jobOf(trace, i) {
+	for (let j = i; j >= 0 && trace.steps[j].queued; j--) if (trace.steps[j].job) return trace.steps[j].job;
+}
+/** A queued callback with no caller (the event loop called it) returns. */
+function jsCallbackReturns(trace, i, top, lang) {
+	const cur = trace.steps[i];
+	const name = callName(top.name, lang);
+	const job = jobOf(trace, i);
+	const value = top.returnValue ? readable(top.returnValue, cur, lang) : "undefined";
+	if (job?.kind === "then" || job?.kind === "catch") {
+		const follows = promiseAt(heapId(top.returnValue), cur) ? `follows the Promise it returns` : `resolves with ${value}`;
+		return `${name} is finishing and returns ${value}, so the Promise that .${job.kind} made ${follows}.`;
+	}
+	if (job?.kind === "finally") return `${name} is finishing. What it returns is not used: the Promise that .finally made settles the same way as the one before it.`;
+	return `${name} is finishing, so JavaScript moves on to whatever is queued next.`;
+}
+/** An async function's variables that changed while it was paused: "data is now 3". */
+function resumedChanges(was, now, cur, prev, lang) {
+	const out = [];
+	for (const b of now.locals) diffValue(`var:${now.id}:${b.name}`, b.name, was.locals.find((x) => x.name === b.name)?.value, b.value, out);
+	return out.slice(0, 3).map((c) => changePhrase(c, cur, prev, lang));
+}
+/** The first step of a queued job: why it runs now. */
+function jsJob(cur, prev, lang, alsoChanged) {
+	const job = cur.job;
+	const top = cur.frames.at(-1);
+	const name = top ? callName(top.name, lang) : "the callback";
+	const settled = settledPhrase(job.state, job.value, cur);
+	const args = (top?.locals ?? []).filter((b) => b.name !== "this" && b.value.k !== "uninit").map((b) => `${b.name} = ${readable(b.value, cur, lang)}`);
+	const withArgs = args.length && cur.event !== "await" ? ` with ${list(args)}` : "";
+	const start = prev.queued ? "" : "The main program's own code is done, so JavaScript runs the jobs waiting in its queues. ";
+	const clock = job.time !== void 0 ? ` (the program's clock is now at ${job.time} ms)` : "";
+	switch (job.kind) {
+		case "await": {
+			const was = top && (prev.paused?.find((f) => f.id === top.id) ?? prev.frames.find((f) => f.id === top.id));
+			const at = was ? ` on line ${was.line}` : "";
+			if (job.state === "rejected") return `${start}The Promise ${name} was waiting for ${settled}, so the await${at} throws that inside ${name}${cur.event === "step" && cur.message ? `, and JavaScript jumps to the catch on line ${cur.line}` : ""}.`;
+			const diff = [...was && top ? resumedChanges(was, top, cur, prev, lang) : [], ...alsoChanged];
+			return `${start}The Promise ${name} was waiting for ${settled}, so ${name} carries on after the await${at}${diff.length ? `: ${list(diff)}` : ""}.`;
+		}
+		case "then":
+		case "catch":
+		case "finally": {
+			const p = promiseName(heapId(job.promise), cur, "The Promise");
+			const which = job.kind === "then" && job.state === "rejected" ? "the rejection callback given to .then" : `the .${job.kind} callback`;
+			return `${start}${p.charAt(0).toUpperCase()}${p.slice(1)} ${settled}, so ${which} runs${withArgs}.`;
+		}
+		case "thenable": return `${start}A Promise was resolved with an object that has a then method of its own, so JavaScript calls ${name} to get its value.`;
+		case "microtask": return `${start}The function queued with queueMicrotask runs now.`;
+		case "timer": return `${start}The ${job.delay} ms timer is due${clock}, so its callback runs${withArgs}.`;
+		case "interval": return `${start}The interval set for every ${job.delay} ms is due${clock}, so its callback runs${withArgs}.`;
+	}
+}
+/** The first step of a queued job: what the line before did (or what settled since), then why this job runs now. */
+function jsJobStart(trace, i, lines, phrases) {
+	const cur = trace.steps[i];
+	const prev = trace.steps[i - 1];
+	const lang = trace.language;
+	const top = cur.frames.at(-1);
+	const sentences = [];
+	const out = trace.stdout.slice(prev.stdoutLength, cur.stdoutLength).trimEnd();
+	const quotedOut = `"${out.length > 60 ? `${out.slice(0, 57)}…` : out}"`;
+	if (prev.event === "step" || prev.event === "resume") {
+		const did = phrases.length ? phrases : jsQuietLine(lines, prev, cur);
+		sentences.push(`${did.length ? `Line ${prev.line} ran: ${list(did)}.` : `Line ${prev.line} ran.`}${out ? ` It printed ${quotedOut}.` : ""}`);
+		sentences.push(jsJob(cur, prev, lang, []));
+	} else {
+		if (out) sentences.push(`Meanwhile, built-in callbacks (such as console.log given to .then) printed ${quotedOut}.`);
+		if (cur.job.kind === "await") sentences.push(jsJob(cur, prev, lang, phrases));
+		else {
+			if (phrases.length) sentences.push(`${list(phrases).replace(/^./, (c) => c.toUpperCase())}.`);
+			sentences.push(jsJob(cur, prev, lang, []));
+		}
+	}
+	if (top && cur.event === "await") sentences.push(`It reaches another await, so it pauses again.`);
+	else if (top && cur.event === "return") sentences.push(top.async ? `It finishes straight away.` : `It has nothing to run, so it returns straight away.`);
+	return sentences;
+}
+/** The last step, after the event loop: anything still waiting will never carry on. */
+function jsFinished(cur) {
+	const waiting = (cur.paused ?? []).filter((f) => f.async).map((f) => f.name);
+	const stuck = waiting.length ? ` ${list(waiting)} never carried on: the Promise ${waiting.length > 1 ? "they were" : "it was"} waiting for never settled.` : "";
+	return `${cur.queued ? " Nothing is left in the queues, so the program has finished." : " The program has finished."}${stuck}`;
+}
+// ../renderer/src/describe/calls.ts
+/** Step `i` enters a call: who called what, with which arguments. */
+function describeCall(trace, i, lines, phrases) {
+	const cur = trace.steps[i];
+	const prev = trace.steps[i - 1];
+	const lang = trace.language;
+	const top = cur.frames.at(-1);
+	const prevTop = prev.frames.at(-1);
+	const self = top.locals.find((b) => b.name === (isPy(lang) ? "self" : "this"));
+	const callerNames = !isManual(lang) ? heapNames(prev, lang) : void 0;
+	const shared = (v) => callerNames && v.k === "ptr" && v.target.kind === "heap" ? callerNames.get(v.target.id)?.label : void 0;
+	const args = top.locals.filter((b) => b.value.k !== "uninit" && b !== self).map((b) => {
+		let alias = shared(b.value);
+		if (!alias || isJava(lang) && alias !== b.name && alias.match(/^[\w$]+/)?.[0] === b.name) return `${b.name} = ${readable(b.value, cur, lang)}`;
+		if (alias === b.name) alias = prevTop ? `${callName(prevTop.name, lang)}'s ${alias}` : `the main program's ${alias}`;
+		const id = b.value.k === "ptr" && b.value.target.kind === "heap" ? b.value.target.id : "";
+		const obj = cur.heap.find((h) => h.id === id);
+		const javaLit = obj && isJava(lang) && obj.value.k === "array" && obj.value.items.length <= 6 && obj.value.items.every((x) => x.k === "prim");
+		if (obj && pyDefName(obj.type) === alias) return `${b.name} = the ${obj.type}`;
+		const lit = obj && (javaLit ? valueText(obj.value, lang) : pyLiteral(obj.value, lang));
+		return lit ? `${b.name} = ${lit} (the same ${obj.type} as ${alias})` : `${b.name} = the same ${obj?.type ?? "object"} as ${alias}`;
+	});
+	const withArgs = args.length ? ` with ${list(args)}` : "";
+	const ctor = constructorOf(top.name, lang);
+	const paused = prev.paused?.find((f) => f.id === top.id);
+	const asker = FOR_LOOP.test(lines[prev.line - 1] ?? "") ? `The for loop on line ${prev.line}` : `Line ${prev.line}`;
+	const again = prev.frames.some((f) => f.name === top.name) ? " again" : "";
+	const sub = superCaller(cur.frames, lang, lines);
+	const settlers = isJs(lang) ? top.locals.filter((b) => b.value.k === "opaque" && /^function (resolve|reject)$/.test(b.value.text)).map((b) => b.name) : [];
+	if (paused && top.closing) return `${generatorCloser(lines[prev.line - 1] ?? "", prev.line, top.name)}: it stops where it paused on line ${paused.line}, running only its cleanup code.`;
+	if (paused) return `${asker} asks ${top.name} for its next value, so ${top.name} carries on from line ${paused.line}, where it paused.`;
+	if (top.generator) return `${asker} asks ${top.name} for its first value, so ${top.name} starts running${withArgs}.`;
+	if (settlers.length && /\bnew\s+Promise\b/.test(lines[prev.line - 1] ?? "")) {
+		const fn = top.name === "(anonymous)" ? "the function given to it" : callName(top.name, lang);
+		return `Line ${prev.line} makes a new Promise, which calls ${fn} straight away with ${list(settlers)}: calling ${settlers.length > 1 ? "one of them" : "it"} later settles the Promise.`;
+	}
+	if (ctor && sub) {
+		const call = /\bthis\s*\(/.test(lines[prev.line - 1] ?? "") ? "this" : "super";
+		const values = top.locals.filter((b) => b.value.k !== "uninit" && b !== self).map((b) => readable(b.value, cur, lang));
+		const part = call === "super" ? `the ${ctor} part of this ${sub}` : `this ${sub}`;
+		return `Line ${prev.line} ran: the ${sub} constructor calls ${call}(${values.join(", ")}), so the ${ctor} constructor runs${withArgs} to set up ${part}.`;
+	}
+	if (pyDestructorOf(top.name, lang) && trace.steps.slice(0, i).some((s) => s.event === "return" && !s.frames.length)) {
+		const gone = prev.globals.filter((b) => !cur.globals.some((x) => x.name === b.name)).map((b) => b.name);
+		const names = gone.length && gone.length <= 4 ? ` (${list(gone)})` : "";
+		const removed = gone.length ? `, so Python removes the program's names${names}` : ", so Python cleans up what is left";
+		const why = `nothing refers to the ${pyDestructorOf(top.name, lang)} any more, so Python runs its __del__ before deleting it`;
+		return gone.length ? `The program has finished${removed}. Now ${why}.` : `The program has finished${removed}: ${why}.`;
+	}
+	if (pyDestructorOf(top.name, lang)) {
+		const name = /^\s*del\s+([\w.]+)\s*$/.exec(lines[prev.line - 1] ?? "")?.[1];
+		const letGo = phrases.length ? list(phrases) : name ? `it removed the name ${name}` : "";
+		const why = `nothing refers to the ${pyDestructorOf(top.name, lang)} any more, so Python runs its __del__ before deleting it`;
+		return letGo ? `Line ${prev.line} ran: ${letGo}. Now ${why}.` : `Line ${prev.line} ran: ${why}.`;
+	}
+	if (ctor && isPy(lang)) return `Line ${prev.line} ran: it is making a new ${ctor}, so ${top.name} runs to set it up${withArgs}.`;
+	if (ctor) return `Line ${prev.line} ran: it is making a new ${ctor}, so the ${ctor} constructor runs${withArgs}.`;
+	if (isDynamic(lang) && (top.captured?.length || pyCalledThrough(cur, top, lines[prev.line - 1] ?? "")?.via)) {
+		const through = pyCalledThrough(cur, top, lines[prev.line - 1] ?? "");
+		const name = through?.via ? `${through.via} (the ${through.obj.type})` : top.name;
+		const kept = through && top.captured?.length ? fieldList(through.obj.value, lang) : [];
+		const remembers = kept.length ? ` ${top.name} remembers ${list(kept)} in its function object from earlier.` : "";
+		return `Line ${prev.line} ran and called ${name}${again}${withArgs}.${remembers}`;
+	}
+	if (self && self.value.k === "ptr") {
+		const on = self.value.target.kind === "stack" ? self.value.target.name : shared(self.value) ?? readable(self.value, cur, lang);
+		return `Line ${prev.line} ran and called ${callName(top.name, lang)} on ${on}${withArgs}.`;
+	}
+	return `Line ${prev.line} ran and called ${frameCallName(top, lang, lines)}${again}${withArgs}.`;
+}
+/**
+* Step `i` finishes a call (`return`), or pauses one (a generator's `yield`,
+* an async function's `await`): what the line did, then what the call hands
+* back and to whom.
+*/
+function describeFinish(trace, i, lines, phrases) {
+	const cur = trace.steps[i];
+	const prev = trace.steps[i - 1];
+	const lang = trace.language;
+	const top = cur.frames.at(-1);
+	const prevTop = prev.frames.at(-1);
+	const verdict = prev.frames.length === cur.frames.length ? conditionVerdict(lines, prev, cur, lang) : "";
+	const all = [...phrases, ...verdict ? [verdict] : []];
+	const printedNow = trace.stdout.slice(prev.stdoutLength, cur.stdoutLength).trimEnd();
+	const said = printedNow ? `It printed "${printedNow.length > 60 ? `${printedNow.slice(0, 57)}…` : printedNow}". ` : "";
+	const ranLine = prev.frames.at(-1)?.id === top.id ? prev.line : cur.line;
+	const head = all.length ? `Line ${ranLine} ran: ${list(all)}. ${said}` : said ? `Line ${ranLine} ran. ${said}` : "";
+	if (cur.event === "yield") {
+		const value = top.yielded ? ` ${readable(top.yielded, cur, lang)}` : "";
+		return `${head}${top.name} yields${value} to ${askerPhrase(trace, i, lines)} and pauses, keeping its variables until it is asked for the next value.`;
+	}
+	if (cur.event === "await") return `${prev.event === "await" && prevTop && prevTop.id !== top.id ? `${callName(prevTop.name, lang)} paused and handed back a pending Promise. ` : ""}${head}${jsAwaiting(cur, top, lang)}`;
+	if (top.closing) return `${head}${top.name} has finished cleaning up, so it is closed.`;
+	if (top.generator) return `${head}${top.name} has no more values to give, so it finishes.`;
+	if (top.async && isJs(lang)) {
+		const value = top.returnValue ? readable(top.returnValue, cur, lang) : "undefined";
+		const settles = promiseAt(heapId(top.returnValue), cur) ? "follows the Promise it returns" : `resolves with ${value}`;
+		return `${head}${callName(top.name, lang)} is finishing, so the Promise it handed back ${settles}.`;
+	}
+	if (isJs(lang) && cur.queued && cur.frames.length === 1) return `${head}${jsCallbackReturns(trace, i, top, lang)}`;
+	if (cur.frames.length === 1 && isJava(lang)) return `${head}${callName(top.name, lang)} is finishing, so the program ends.`;
+	if (cur.frames.length === 1 && !isDynamic(lang)) {
+		const leaked = cur.heap.filter((h) => !isContainer(h.type, lang) && !ownersOf(cur, h.id).length).length;
+		const tail = leaked ? ` ${leaked} ${leaked === 1 ? "block" : "blocks"} on the heap ${leaked === 1 ? "was" : "were"} never freed.` : "";
+		const value = top.returnValue ? ` ${readable(top.returnValue, cur, lang)}` : "";
+		return `${head}${callName(top.name, lang)} is returning${value}: the program is finishing${value.trim() === "0" ? " (0 means success)" : ""}.${tail}`;
+	}
+	const ctor = constructorOf(top.name, lang);
+	const sub = superCaller(cur.frames, lang, lines);
+	if (ctor && sub) return `${head}The ${ctor} constructor finished setting up the ${ctor} part of this ${sub}.`;
+	if (ctor && isPy(lang)) return `${head}${top.name} finished setting up the new ${ctor}.`;
+	const dying = pyDestructorOf(top.name, lang);
+	if (dying) return `${head}${top.name} is done, so Python deletes the ${dying}.`;
+	if (ctor) return `${head}The ${ctor} constructor finished setting up the new ${isJs(lang) ? ctor : "object"}.`;
+	const value = top.returnValue ? ` ${readable(top.returnValue, cur, lang)}` : "";
+	const worked = workedOut(trace, i, lines);
+	const fnValue = (v) => v.k === "opaque" && /^(function|class) /.test(v.text) || v.k === "ptr" && v.target.kind === "heap" && !!cur.heap.find((h) => h.id === v.target.id)?.type.startsWith("function");
+	if (worked && top.returnValue && !fnValue(top.returnValue)) return `${head}${opening(frameCallName(top, lang, lines))} is finishing: ${worked.expr} is ${worked.values}, so it returns${value} to ${callerPhrase(cur, top.name, lang, lines)}.`;
+	return `${head}${opening(frameCallName(top, lang, lines))} is finishing and returning${value} to ${callerPhrase(cur, top.name, lang, lines)}.`;
+}
+/** Step `i` is back in the caller after a call returned (or yielded, or paused at await): what came back and what was done with it. */
+function describeBack(trace, i, lines, phrases) {
+	const cur = trace.steps[i];
+	const prev = trace.steps[i - 1];
+	const lang = trace.language;
+	const top = cur.frames.at(-1);
+	const prevTop = prev.frames.at(-1);
+	const returned = prevTop.returnValue ? ` ${readable(prevTop.returnValue, prev, lang)}` : "";
+	const line = cur.event === "resume" ? cur.line : cur.resumedLine;
+	const what = phrases.length ? `, and ${list(phrases)}` : "";
+	const printed = trace.stdout.slice(prev.stdoutLength, cur.stdoutLength).trimEnd();
+	const out = printed ? ` It printed "${printed.length > 60 ? `${printed.slice(0, 57)}…` : printed}".` : "";
+	const ctor = constructorOf(prevTop.name, lang);
+	const yielded = prevTop.yielded ? ` ${readable(prevTop.yielded, prev, lang)}` : "";
+	const loopEnds = FOR_LOOP.test(lines[line - 1] ?? "") ? ", so the for loop ends" : "";
+	const sub = isJs(lang) && ctor && top && /\bsuper\s*\(/.test(lines[line - 1] ?? "") ? constructorOf(top.name, lang) : void 0;
+	const settles = promiseAt(heapId(prevTop.returnValue), prev) ? "follows the Promise it returned" : `resolves with${returned || " undefined"}`;
+	const asyncDone = prev.event === "await" ? `${callName(prevTop.name, lang)} paused at its await, so the call handed back a Promise that is still pending` : `${callName(prevTop.name, lang)} finished, so the Promise it handed back ${settles}`;
+	const done = sub ? `the ${ctor} part of this ${sub} is set up` : ctor ? `the new ${ctor} is ready` : prev.event === "yield" ? `${prevTop.name} yielded${yielded}` : prevTop.async ? asyncDone : prevTop.closing ? `${prevTop.name} is closed` : pyDestructorOf(prevTop.name, lang) ? `the ${pyDestructorOf(prevTop.name, lang)} is deleted` : prevTop.generator ? `${prevTop.name} has no more values${loopEnds}` : `${frameCallName(prevTop, lang, lines)} returned${returned}`;
+	return `Back in ${top ? frameCallName(top, lang, lines) : MAIN_PY} on line ${line}: ${done}${what}.${out}`;
+}
+/** Why a paused Python generator is being closed, from the line that closed it. */
+function generatorCloser(text, line, name) {
+	if (/\.close\s*\(/.test(text)) return `Line ${line} closes ${name}`;
+	if (/^\s*break\b/.test(text)) return `Line ${line} leaves the for loop early, so ${name} is closed`;
+	if (/^\s*return\b/.test(text)) return `Line ${line} leaves the for loop by returning, so ${name} is closed`;
+	return `Nothing uses ${name} any more, so Python closes it`;
+}
+/**
+* Python: who asked generator `top` for a value on step `i`: "the for loop on
+* line 22" or the calling function. A call from the main program has no
+* frame, so its line comes from the step that lands back there.
+*/
+function askerPhrase(trace, i, lines) {
+	const cur = trace.steps[i];
+	let k = cur.frames.length - 2;
+	const via = [];
+	for (; k >= 0 && /\byield\s*\*/.test(lines[cur.frames[k].line - 1] ?? ""); k--) via.push(`${cur.frames[k].name}'s yield*`);
+	const through = via.length ? ` (through ${list(via)})` : "";
+	const caller = k >= 0 ? cur.frames[k] : void 0;
+	const next = trace.steps[i + 1];
+	const line = caller ? caller.line : next && (next.resumedLine ?? (next.event === "resume" ? next.line : void 0));
+	if (line !== void 0 && FOR_LOOP.test(lines[line - 1] ?? "")) return `the for loop on line ${line}${through}`;
+	const callee = cur.frames.at(-1).name;
+	const lang = trace.language;
+	if (!caller) return `${isDynamic(lang) ? MAIN_PY : "its caller"}${through}`;
+	return `${caller.name === callee ? `the ${callName(callee, lang)} call that called it` : callName(caller.name, lang)}${through}`;
+}
+/**
+* `return n->val + sum(n->next);` worked out with this call's values:
+* `{ expr: "n->val + sum(n->next)", values: "10 + 0" }`. Calls on the line
+* take the values they returned. Null when the expression is a lone value.
+*/
+function workedOut(trace, i, lines) {
+	const cur = trace.steps[i];
+	const top = cur.frames.at(-1);
+	const src = lines[cur.line - 1] ?? "";
+	const pattern = trace.language === "python" ? /\breturn\s+(.+?)\s*(?:#.*)?$/ : isJs(trace.language) ? /\breturn\s+([^;]+?)\s*(?:;|\/\/|$)/ : /\breturn\s+([^;]+);/;
+	const expr = src.match(pattern)?.[1]?.trim();
+	if (!top || !expr) return null;
+	const returned = [];
+	for (let j = i; j > 0; j--) {
+		const s = trace.steps[j];
+		if (!s.frames.some((f) => f.id === top.id)) break;
+		const here = s.frames.at(-1)?.id === top.id;
+		if (here && s.line !== cur.line) break;
+		const before = trace.steps[j - 1];
+		const callee = before.frames.at(-1);
+		if (here && before.frames.length > s.frames.length && callee?.returnValue) returned.unshift(callee.returnValue);
+	}
+	const slots = [];
+	let calls = 0;
+	let masked = "";
+	for (let k = 0; k < expr.length;) {
+		const m = /^[A-Za-z_]\w*\s*\(/.exec(expr.slice(k));
+		const prevCh = expr[k - 1] ?? " ";
+		if (m && !/[\w.>]/.test(prevCh) && !/^(sizeof)\b/.test(m[0])) {
+			let depth = 0;
+			let end = k + m[0].length - 1;
+			for (; end < expr.length; end++) if (expr[end] === "(") depth++;
+			else if (expr[end] === ")" && --depth === 0) break;
+			const r = returned[calls++];
+			if (r?.k !== "prim") return null;
+			slots.push(r.text);
+			masked += `\u0000${slots.length - 1}\u0000`;
+			k = end + 1;
+		} else masked += expr[k++];
+	}
+	if (calls !== returned.length) return null;
+	if (!/[-+*/%<>=!&|^?]/.test(masked.replace(/->/g, ""))) return null;
+	let swapped = 0;
+	const values = masked.replace(/\b[A-Za-z_]\w*(?:\s*(?:->|\.)\s*[A-Za-z_]\w*|\s*\[[^\]]*\])*/g, (path) => {
+		const v = lookup(path, top, cur);
+		if (v?.k !== "prim") return path;
+		swapped++;
+		return v.text;
+	}).replace(/\u0000(\d+)\u0000/g, (_, n) => slots[Number(n)]);
+	if (swapped + calls === 0 || values === expr) return null;
+	if ((trace.language === "cpp" || isJs(trace.language)) && /[.>]\s*[A-Za-z_]\w*\s*\(/.test(values)) return null;
+	return {
+		expr,
+		values
+	};
+}
+// ../renderer/src/describe/errors.ts
+/** The first number in a limit's message: the limit that was reached. */
+var limitCount = (msg) => msg.match(/\d[\d,]*/)?.[0] ?? "many";
+/** `message` after a fixed prefix the runtime writes ("Unsupported Java API: "), or the whole of it. */
+var after = (msg, prefix) => msg.replace(prefix, "");
+function describeError(cur, lines, lang) {
+	const msg = cur.message ?? "the program crashed";
+	const top = cur.frames.at(-1);
+	const at = `Line ${cur.line}`;
+	switch (cur.stopped) {
+		case "steps":
+		case "timeout": return `Paused after ${limitCount(msg)} steps: line ${cur.line} may be in a loop that never ends. Check that the loop's condition can become false.`;
+		case "jobs": return `Paused after ${limitCount(msg)} timer and Promise callbacks: something keeps queuing more work, such as a setInterval that is never cleared. Call clearInterval to stop an interval.`;
+		case "stackOverflow": {
+			const name = msg.match(/\((\S+) was called/)?.[1] ?? top?.name ?? "a function";
+			if (isPy(lang)) return `${name} kept calling itself and never returned, so Python stopped it with a RecursionError. Recursion needs a base case that stops it.`;
+			if (isJs(lang)) return `${callName(name, lang)} kept calling itself and never returned, so JavaScript stopped it with a RangeError. Recursion needs a base case that stops it.`;
+			if (isJava(lang)) return `${top ? callName(top.name, lang) : "A method"} kept calling itself and never returned. Recursion needs a base case that stops it; Java would throw a StackOverflowError.`;
+			return `${top?.name ?? "a function"} kept calling itself and never returned. Recursion needs a base case that stops it; a real program would crash with a stack overflow.`;
+		}
+		case "nullDeref": {
+			const src = lines[cur.line - 1] ?? "";
+			const who = (top?.locals ?? []).filter((b) => b.value.k === "ptr" && b.value.target.kind === "null" && new RegExp(`\\b${b.name}\\b`).test(src))[0]?.name;
+			return who ? `${at} tried to use the memory ${who} points to, but ${who} is ${nullWord(lang)} (it points nowhere). A real program would crash here with a segmentation fault.` : `${at} used a ${nullWord(lang)} pointer (one that points nowhere). A real program would crash here with a segmentation fault.`;
+		}
+		case "memoryFault": return `${at} accessed memory it doesn't own (outside an array, or freed). A real program might crash here.`;
+		case "unsupported": {
+			const what = after(msg, /^Unsupported [\w ]+: /);
+			if (isJava(lang)) return `${at} uses ${what}, which CodeFlip can't run yet. Try writing that part with basic Java (loops, arrays, ArrayList, HashMap).`;
+			return `${at} uses ${what}, which CodeFlip can't run yet.`;
+		}
+		case "unhandledRejection": return `A Promise was rejected with ${after(msg, /^Uncaught \(in promise\) /)} and nothing handled it (no .catch, and no try/catch around an await of it), so the program stopped.`;
+		case "uncaught":
+			if (isPy(lang)) return describePyError(cur, msg);
+			if (isJs(lang)) return describeJsError(cur, msg);
+			if (isJava(lang)) return describeJavaException(cur, lines) ?? `Stopped on line ${cur.line}: ${msg}.`;
+			return `${at} threw ${after(msg, /^Uncaught exception: (?:std::)?/)} and nothing caught it, so the program stopped (C++ calls std::terminate).`;
+	}
+	return `Stopped on line ${cur.line}: ${msg}.`;
+}
+/** An uncaught Java exception, said the way a beginner can act on it. */
+function describeJavaException(cur, lines) {
+	const m = (cur.message ?? "").match(/^Exception in thread "main" ([\w.$]+)(?::\s*(.*))?/);
+	if (!m) return null;
+	const name = m[1].split(".").pop();
+	const detail = m[2]?.trim() ?? "";
+	const src = lines[cur.line - 1] ?? "";
+	const at = `Line ${cur.line}`;
+	const thrown = `so Java threw ${article(name)} ${name} and the program stopped`;
+	if (name === "NullPointerException") {
+		const who = detail.match(/because "([^"]+)" is null/)?.[1];
+		return who ? `${at} used ${who}, but ${who} is null (it doesn't refer to any object), ${thrown}.` : `${at} used a variable that is null (it doesn't refer to any object), ${thrown}.`;
+	}
+	const bounds = detail.match(/^Index (-?\d+) out of bounds for length (\d+)/);
+	if (bounds) {
+		const [, index, length] = bounds;
+		const what = name.startsWith("Array") ? "array" : name.startsWith("String") ? "string" : "list";
+		const valid = Number(length) === 0 ? "it is empty" : `its indexes go from 0 to ${Number(length) - 1}`;
+		return `${at} used index ${index}, but the ${what} has ${length} ${Number(length) === 1 ? "element" : "elements"}, so ${valid}. Java threw ${article(name)} ${name}.`;
+	}
+	if (name === "ArithmeticException" && /by zero/.test(detail)) return `${at} divided by zero, ${thrown}.`;
+	if (name === "NoSuchElementException" && /\.next\w*\s*\(/.test(src)) return `${at} asked the Scanner for more input, but there was none left, ${thrown}. Add input under Edit code → Program input.`;
+	if (name === "InputMismatchException") return `${at} asked the Scanner for a number, but the next input wasn't one, ${thrown}.`;
+	return `${at} threw ${article(name)} ${name}${detail ? ` ("${detail}")` : ""} and nothing caught it, so the program stopped.`;
+}
+/** Python exceptions: the message as Python prints it, plus a hint for the common ones. */
+var PY_HINTS = [
+	[/^ZeroDivisionError/, "Dividing by zero isn't allowed."],
+	[/^NameError/, "Python doesn't know that name yet: it may be misspelled, or used before a line assigns it."],
+	[/^IndexError/, "The index is past the end (indexes start at 0, so the last one is len - 1)."],
+	[/^KeyError/, "That key isn't in the dictionary."]
+];
+function describePyError(cur, msg) {
+	if (/^EOFError/.test(msg) && cur.inputEnded) return `Line ${cur.line} called input(), but there was no input left to read, so Python raised EOFError. Add input under Edit code → Program input.`;
+	const hint = PY_HINTS.find(([re]) => re.test(msg))?.[1];
+	const [, name, detail] = msg.match(/^([\w.]+): ([\s\S]*)$/) ?? [
+		"",
+		msg,
+		""
+	];
+	const said = detail ? `: ${detail}${/[.?!]$/.test(detail) ? "" : "."}` : ".";
+	return `Line ${cur.line} raised ${name}, so the program stopped${said}${hint ? ` ${hint}` : ""}`;
+}
+/** JavaScript errors: a hint for the ones beginners meet most. */
+var JS_HINTS = [
+	[/^ReferenceError: .* is not defined/, "JavaScript doesn't know that name: it may be misspelled, or used without being declared with let, const or var."],
+	[/^ReferenceError: Cannot access/, "A variable declared with let or const can't be used until the line that declares it has run."],
+	[/^TypeError: Cannot (?:read|set) properties of (undefined|null)/, "The value before the dot (or [ ]) is $1, so it has no properties."],
+	[/^TypeError: .* is not a function/, "Only a function can be called with ( )."],
+	[/^TypeError: Assignment to constant variable/, "A const variable can't be given a new value. Declare it with let if it needs to change."]
+];
+function describeJsError(cur, msg) {
+	const at = `Line ${cur.line}`;
+	const uncaught = msg.match(/^Uncaught ([\s\S]*)$/)?.[1];
+	if (uncaught) return `${at} threw ${uncaught} and nothing caught it, so the program stopped.`;
+	const hint = JS_HINTS.map(([re, text]) => msg.match(re) && text.replace("$1", msg.match(re)[1] ?? "")).find(Boolean);
+	const [, name, detail] = msg.match(/^([\w$.]+): ([\s\S]*)$/) ?? [
+		"",
+		msg,
+		""
+	];
+	const said = detail ? `: ${detail}${/[.?!]$/.test(detail) ? "" : "."}` : ".";
+	return `${at} threw ${article(name)} ${name}, so the program stopped${said}${hint ? ` ${hint}` : ""}`;
+}
+// ../renderer/src/describe/files.ts
+/** A missing file's name in an error message: Python's, Java's FileNotFoundException or NoSuchFileException. */
+var MISSING_FILE = [
+	/No such file or directory: '([^']+)'/,
+	/([^\s"]+) \(No such file or directory\)/,
+	/NoSuchFileException\W+(\S+)/
+];
+/**
+* The program looked for a file it doesn't have: say where to add it, as for
+* input. An uncaught error naming the file (Java, Python), or C's fopen
+* returning NULL for a file that isn't there.
+*/
+function missingFileHint(trace, i, lines) {
+	const cur = trace.steps[i];
+	const hint = (name) => `Add ${name} under Edit code → Files.`;
+	if (cur.event === "exception") {
+		for (const re of MISSING_FILE) {
+			const name = (cur.message ?? "").match(re)?.[1];
+			if (name) return hint(name);
+		}
+		return "";
+	}
+	const prev = trace.steps[i - 1];
+	const opened = prev && (lines[prev.line - 1] ?? "").match(/(\w+)\s*=\s*fopen\s*\(\s*"([^"]+)"\s*,\s*"r/);
+	if (!opened || filesAt(trace, i)[opened[2]] !== void 0) return "";
+	const v = [...cur.frames.at(-1)?.locals ?? [], ...cur.globals].find((b) => b.name === opened[1])?.value;
+	return v?.k === "ptr" && v.target.kind === "null" ? `fopen couldn't find ${opened[2]}, so it returned NULL. ${hint(opened[2])}` : "";
+}
+/** The files that changed on step `i` (none on the first step). */
+function fileChanges(trace, i) {
+	const delta = trace.steps[i]?.files;
+	if (!delta || i === 0) return [];
+	const before = filesAt(trace, i - 1);
+	return Object.entries(delta).flatMap(([name, text]) => {
+		const old = before[name];
+		if (text === null) return old === void 0 ? [] : [{
+			name,
+			kind: "deleted",
+			added: ""
+		}];
+		if (old === void 0) return [{
+			name,
+			kind: "created",
+			added: text
+		}];
+		if (old === text) return [];
+		return text.startsWith(old) ? [{
+			name,
+			kind: "appended",
+			added: text.slice(old.length)
+		}] : [{
+			name,
+			kind: "rewritten",
+			added: text
+		}];
+	});
+}
+/** "2 lines", or the text itself when it is short and has no line break. */
+function linesOf(text) {
+	const n = text.split("\n").length - (text.endsWith("\n") ? 1 : 0);
+	if (n === 1 && !text.endsWith("\n") && text.length <= 40) return `"${text}"`;
+	return n === 1 ? "1 line" : `${n} lines`;
+}
+/** What the program did with its files since the last step: opened, read, wrote, deleted. Ends in a space when not empty. */
+function fileSentences(trace, i) {
+	const cur = trace.steps[i];
+	if (!cur || i === 0 || !cur.files && !cur.fileEvents) return "";
+	const before = filesAt(trace, i - 1);
+	const out = [];
+	const opened = /* @__PURE__ */ new Map();
+	const reads = /* @__PURE__ */ new Map();
+	for (const e of cur.fileEvents ?? []) if (e.op === "open") opened.set(e.file, e.mode ?? "r");
+	else reads.set(e.file, (reads.get(e.file) ?? 0) + (e.lines ?? NaN));
+	for (const [file, mode] of opened) {
+		const isNew = before[file] === void 0;
+		if (mode === "r") out.push(`It opened ${file} for reading.`);
+		else if (mode === "w") out.push(isNew ? `It opened ${file} for writing, creating it.` : `It opened ${file} for writing, which empties it.`);
+		else out.push(isNew ? `It opened ${file} for adding to its end, creating it.` : `It opened ${file} for adding to its end.`);
+	}
+	for (const [file, n] of reads) out.push(Number.isNaN(n) || n === 0 ? `It read from ${file}.` : `It read ${n === 1 ? "1 line" : `${n} lines`} from ${file}.`);
+	for (const c of fileChanges(trace, i)) {
+		if (opened.has(c.name) && opened.get(c.name) !== "r" && c.added === "") continue;
+		if (c.kind === "deleted") out.push(`It deleted ${c.name}.`);
+		else if (c.kind === "created") out.push(c.added ? `It created ${c.name} and wrote ${linesOf(c.added)} to it.` : `It created ${c.name}, empty.`);
+		else if (c.kind === "appended") out.push(`It wrote ${linesOf(c.added)} to ${c.name}.`);
+		else out.push(c.added ? `It wrote ${c.name} anew: it now holds ${linesOf(c.added)}.` : `${c.name} is now empty.`);
+	}
+	return out.length ? `${out.join(" ")} ` : "";
+}
+// ../renderer/src/describe/heap.ts
+/** Whether variable `name` pointed into heap object `id` at `step`. */
+var pointedTo = (step, name, id) => [...step.frames.flatMap((f) => f.locals), ...step.globals].some((b) => b.name === name && b.value.k === "ptr" && b.value.target.kind === "heap" && b.value.target.id === id);
+/** Phrases for the heap objects that went away or were leaked between `prev` and `cur` (`changes` are the step's own). */
+function heapPhrases(prev, cur, changes, lang) {
+	const out = [];
+	const prevNames = lang === "cpp" ? heapNames(prev) : void 0;
+	if (prevNames) {
+		const bindings = (s) => [...s.frames.flatMap((f) => f.locals.map((b) => [`${f.id}:${b.name}`, b])), ...s.globals.map((b) => [b.name, b])];
+		const before = new Map(bindings(prev));
+		for (const [key, b] of bindings(cur)) {
+			const was = before.get(key)?.value;
+			if (b.value.k !== "ptr" || b.value.target.kind !== "dangling" || was?.k !== "ptr" || was.target.kind !== "heap" || was.address !== b.value.address) continue;
+			const id = was.target.id;
+			const owner = prev.heap.find((h) => h.id === id);
+			if (!owner || !isContainer(owner.type, lang) || !cur.heap.some((h) => h.id === id)) continue;
+			const name = prevNames.get(id)?.label ?? `the ${owner.type}`;
+			out.push(`${name} moved its elements to new memory as it grew, so ${b.name} is now dangling (it still holds the old address)`);
+		}
+	}
+	for (const h of isDynamic(lang) ? [] : prev.heap) {
+		if (cur.heap.some((x) => x.id === h.id)) continue;
+		if (isJava(lang)) {
+			if (changes.some((c) => c.before?.k === "ptr" && c.before.target.kind === "heap" && c.before.target.id === h.id)) out.push(`nothing refers to ${h.value.k === "record" ? holding(h, h.type) : `the ${h.type}`} any more, so Java cleans it up`);
+			continue;
+		}
+		if (isContainer(h.type, lang)) {
+			const owner = prev.frames.find((f) => f.locals.some((b) => b.value.k === "ptr" && b.value.target.kind === "heap" && b.value.target.id === h.id));
+			if (owner && !cur.frames.some((f) => f.id === owner.id)) continue;
+			const name = prevNames?.get(h.id)?.label;
+			if (!name) out.push(`${withArticle(h.type)} was destroyed and its memory freed`);
+			else if (/^\w+$/.test(name)) out.push(`${name} went out of scope, so it was destroyed and its memory freed`);
+			else out.push(`${name} was destroyed with it, freeing its memory`);
+			continue;
+		}
+		if (lang === "cpp" && ownersOf(prev, h.id).length) {
+			const left = [...cur.frames.flatMap((f) => f.locals), ...cur.globals].filter((b) => b.value.k === "ptr" && b.value.target.kind === "dangling" && pointedTo(prev, b.name, h.id)).map((b) => b.name);
+			const dangling = left.length ? `, leaving ${list(left)} dangling` : "";
+			out.push(`nothing owns the ${ownedName(h.type)} any more, so it was deleted${dangling}`);
+			continue;
+		}
+		if (h.exception) {
+			out.push(`the catch block is done, so the ${h.type} that was thrown is destroyed`);
+			continue;
+		}
+		const names = [...cur.frames.flatMap((f) => f.locals), ...cur.globals].filter((b) => b.value.k === "ptr" && b.value.target.kind === "dangling" && b.value.target.id === h.id).map((b) => b.name);
+		out.push(names.length ? `the ${h.type} was freed: ${list(names)} still ${names.length > 1 ? "hold" : "holds"} its address, but that memory is no longer yours, so ${list(names)} ${names.length > 1 ? "are" : "is"} now dangling` : `the ${h.type} on the heap was freed`);
+	}
+	for (const h of cur.heap) {
+		const old = prev.heap.find((x) => x.id === h.id);
+		if (h.unreachable && old && !old.unreachable) out.push(`the old ${h.type} is leaked (nothing points to it any more)`);
+	}
+	return out;
+}
+// ../renderer/src/describe/index.ts
+/** One or two sentences describing step `i` of `trace`. `lines` is the source, for wording about conditions and pointers. */
+function describeStep(trace, i, lines = []) {
+	const cur = trace.steps[i];
+	if (!cur) return "";
+	if (trace.awaitingInput && i === trace.steps.length - 1) {
+		const before = describeStepOnly(trace, i, lines);
+		const prompt = trace.stdout.slice(cur.stdoutLength).trim();
+		const shown = prompt ? `printed "${prompt.length > 60 ? `${prompt.slice(0, 57)}…` : prompt}" and ` : "";
+		return `${before ? `${before} ` : ""}${fileSentences(trace, i)}Line ${cur.line} ${shown}is waiting for input: type a line in the box under Output and press Enter.`;
+	}
+	const files = fileSentences(trace, i).trimEnd();
+	return [
+		describeStepOnly(trace, i, lines),
+		files,
+		missingFileHint(trace, i, lines)
+	].filter(Boolean).join(" ").trim();
+}
+function describeStepOnly(trace, i, lines) {
+	const cur = trace.steps[i];
+	const prev = i > 0 ? trace.steps[i - 1] : void 0;
+	const lang = trace.language;
+	const top = cur.frames.at(-1);
+	if (cur.event === "exception" || cur.event === "limit") return describeError(cur, lines, lang);
+	if (prev && cur.thrown) return describeThrow(cur, prev, lines, lang);
+	const arriving = prev && lang === "cpp" ? exceptionArrival(trace, i, lines) : void 0;
+	if (prev && arriving) {
+		const name = arriving.type.replace(/^std::/, "");
+		return unwound(cur, prev, lines, lang, arriving.what !== void 0 && !/^std::/.test(arriving.type) ? `the ${name} ${arriving.what}` : `the ${name}`);
+	}
+	if (!prev) return `The program starts.${isJava(lang) && cur.globals.length ? ` Before main started, Java ${staticsSet(cur.globals, cur)}.` : ""} Next it will run line ${cur.line}${top ? ` in ${callName(top.name, lang)}` : ""}.`;
+	const sentences = [];
+	const backInCaller = cur.event === "resume" || cur.resumedLine !== void 0;
+	const srcLine = lines[(cur.event === "resume" ? cur.line : cur.resumedLine ?? prev.line) - 1] ?? "";
+	const newStatics = isJava(lang) ? cur.globals.filter((g) => !prev.globals.some((x) => x.name === g.name)) : [];
+	const changes = changesBetween(prev, cur, lang, srcLine).filter((c) => !newStatics.some((g) => c.path === `global:${g.name}`) && !(isJs(lang) && /^var:[^:]+:this$/.test(c.path)));
+	const actor = backInCaller ? cur.frames.at(-1) : prev.frames.at(-1);
+	const returnedId = (() => {
+		const callee = prev.frames.at(-1);
+		const r = (isPy(lang) && callee && constructorOf(callee.name, lang) ? callee.locals.find((b) => b.name === "self")?.value : void 0) ?? callee?.returnValue;
+		if (backInCaller && r?.k === "ptr" && r.target.kind === "heap") return r.target.id;
+		const self = callee?.locals.find((b) => b.name === "this")?.value;
+		if (backInCaller && (isJava(lang) || isJs(lang)) && constructorOf(callee.name, lang) && self?.k === "ptr" && self.target.kind === "heap") return self.target.id;
+	})();
+	const noted = /* @__PURE__ */ new Set();
+	if (isJs(lang)) {
+		const jobPromise = heapId(cur.job?.promise);
+		for (let k = changes.length - 1; k >= 0; k--) if (jobPromise && changes[k].path.startsWith(`heap:${jobPromise}.`)) changes.splice(k, 1);
+		const settled = changes.filter((c) => promiseField(c, cur) === "state").map((c) => c.path.replace(/\.state$/, ""));
+		for (let k = changes.length - 1; k >= 0; k--) {
+			const field = promiseField(changes[k], cur);
+			if ((field === "value" || field === "reason") && settled.includes(changes[k].path.replace(/\.\w+$/, ""))) changes.splice(k, 1);
+		}
+	}
+	const phrases = changes.slice(0, 3).map((c) => {
+		if (isJs(lang) && promiseField(c, cur) === "state") return promiseSettled(c, cur);
+		const via = throughPointer(c, actor, srcLine);
+		if (returnedId && c.after.k === "ptr" && c.after.target.kind === "heap" && c.after.target.id === returnedId) {
+			if (isContainer(c.after.type, lang)) return `${c.label} now holds it`;
+			return `${c.label} now ${isRef(c.after) || !isManual(lang) ? "refers" : "points"} to it`;
+		}
+		if (isDynamic(lang) && c.path.startsWith("heap:")) return pyAliasPhrase(c, cur, prev, srcLine, noted, lang);
+		const java = isJava(lang) ? intDivisionNote(c, actor, prev, srcLine) + aliasNote(c, cur) : "";
+		return changePhrase(c, cur, prev, lang, srcLine) + (via ? ` (through ${via})` : "") + java;
+	});
+	if (changes.length > 3) phrases.push(`${changes.length - 3} more values changed`);
+	phrases.push(...heapPhrases(prev, cur, changes, lang));
+	const prevTop = prev.frames.at(-1);
+	if ((cur.event === "return" || cur.event === "yield" || cur.event === "await") && top && !(isJs(lang) && cur.job)) return describeFinish(trace, i, lines, phrases);
+	const finished = isDynamic(lang) && cur.event === "return" && !top ? isJs(lang) ? jsFinished(cur) : " The program has finished." : "";
+	if ((cur.event === "resume" || cur.resumedLine !== void 0) && (top || isDynamic(lang)) && prevTop) return `${describeBack(trace, i, lines, phrases)}${finished}`;
+	if (isJs(lang) && cur.job) sentences.push(...jsJobStart(trace, i, lines, phrases));
+	else if (top && cur.frames.length > prev.frames.length && !prev.frames.some((f) => f.id === top.id)) sentences.push(describeCall(trace, i, lines, phrases));
+	else if (isPy(lang) && cur.event === "step" && cur.message && PY_EXCEPT.test(lines[cur.line - 1] ?? "")) sentences.push(pyCaught(cur, prev, lines));
+	else if (isJs(lang) && cur.event === "step" && cur.message && JS_CATCH.test(lines[cur.line - 1] ?? "")) sentences.push(jsCaught(cur, prev));
+	else if (isJava(lang) && cur.event === "step" && CATCH.test(lines[cur.line - 1] ?? "")) {
+		const thrower = prev.frames[cur.frames.length];
+		sentences.push(thrower && !cur.frames.some((f) => f.id === thrower.id) ? `${callName(thrower.name, lang)} threw an exception on line ${thrower.line}, so Java left ${callName(thrower.name, lang)} and jumped to the catch on line ${cur.line}.` : `Line ${prev.line} threw an exception, so Java jumped to the catch on line ${cur.line}.`);
+	} else {
+		const braces = isJava(lang) || isJs(lang);
+		const verdict = !braces || prevTop?.id === top?.id ? conditionVerdict(lines, prev, cur, lang) || (braces ? javaJump(lines, prev, cur) : "") : "";
+		const parts = [...phrases, ...verdict ? [verdict] : []];
+		if (isPy(lang) && !parts.length) parts.push(...pyQuietLine(lines, prev, cur));
+		if (isJs(lang) && !parts.length && !(cur.queued && prev.event === "return")) parts.push(...jsQuietLine(lines, prev, cur));
+		const handler = isPy(lang) ? PY_EXCEPT : isJs(lang) ? JS_CATCH : null;
+		const caught = handler && prev.message && handler.test(lines[prev.line - 1] ?? "") ? prev.message.match(/^[\w.$]+/)?.[0] : void 0;
+		const ran = isJava(lang) && CATCH.test(lines[prev.line - 1] ?? "") ? "caught the exception" : caught ? `caught the ${caught}` : "ran";
+		if (!(isJs(lang) && !top && cur.queued && prev.event === "return" && !phrases.length)) sentences.push(parts.length ? `Line ${prev.line} ${ran}: ${list(parts)}.` : `Line ${prev.line} ${ran}.`);
+	}
+	if (newStatics.length) {
+		const cls = newStatics[0].name.split(".")[0];
+		sentences.push(`Using ${cls} for the first time, Java ${staticsSet(newStatics, cur).replace("the static", "its static")}.`);
+	}
+	const stdin = trace.stdin ?? "";
+	const read = stdin.slice(prev.stdinConsumed ?? 0, cur.stdinConsumed ?? 0).trim();
+	let output = trace.stdout.slice(prev.stdoutLength, cur.stdoutLength);
+	if (isJava(lang)) {
+		const echo = stdin.slice(echoedInput(stdin, prev.stdinConsumed ?? 0), echoedInput(stdin, cur.stdinConsumed ?? 0)).replace(/\n?$/, "\n");
+		const at = echo.length > 1 ? output.indexOf(echo) : -1;
+		if (at >= 0) output = output.slice(0, at) + output.slice(at + echo.length);
+	}
+	let printed = output.trimEnd();
+	if (isDynamic(lang) && read && printed.endsWith(read)) printed = printed.slice(0, -read.length).trimEnd();
+	const quoted = printed && `"${printed.length > 60 ? `${printed.slice(0, 57)}…` : printed}"`;
+	const ran = isDynamic(lang) && read && sentences.length === 1 ? sentences[0].match(/^(Line \d+ ran)(?:: (.*))?\.$/) : null;
+	if (ran) {
+		const io = `${quoted ? `printed ${quoted} and ` : ""}read "${read}" from the input`;
+		sentences[0] = `${ran[1]}: it ${io}${ran[2] ? `, so ${ran[2]}` : ""}.`;
+	} else {
+		if (printed && !(isJs(lang) && cur.job)) sentences.push(`It printed ${quoted}.`);
+		if (read) sentences.push(`It read "${read}" from the input.`);
+	}
+	if (cur.inputEnded && !prev.inputEnded) {
+		const line = lines[prev.line - 1] ?? "";
+		const unset = (cur.frames.at(-1)?.locals ?? []).filter((b) => b.value.k === "uninit" && new RegExp(`&\\s*${b.name}\\b`).test(line)).map((b) => b.name);
+		const what = unset.length ? `, so ${list(unset)} ${unset.length > 1 ? "were" : "was"} not set` : "";
+		if (!read) sentences.push(`It tried to read input, but there was none${what}. Add input under Edit code → Program input.`);
+		else if (unset.length) sentences.push(`Then the input ran out${what}.`);
+	}
+	return (sentences.join(" ") + finished).trim();
+}
+// ../renderer/src/hide.ts
+var HIDE = /(?:#|\/\/)\s*(?:codeflip|pythontutor)_hide\s*:\s*([^\n]*)/g;
+/** The name patterns hidden by `codeflip_hide:` (or `pythontutor_hide:`) comments in `source`. */
+function hiddenPatterns(source) {
+	const out = [];
+	for (const m of source.matchAll(HIDE)) for (const name of m[1].split(/[,\s]+/)) if (name) out.push(name);
+	return out;
+}
+var matcher = (patterns) => {
+	const res = patterns.map((p) => new RegExp(`^${p.replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*/g, ".*").replace(/\?/g, ".")}$`));
+	return (name) => res.some((r) => r.test(name));
+};
+function heapRefs(v, out) {
+	if (v.k === "ptr" && v.target.kind === "heap") out.push(v.target.id);
+	else if (v.k === "array") for (const x of v.items) heapRefs(x, out);
+	else if (v.k === "record") for (const f of v.fields) heapRefs(f.value, out);
+	else if (v.k === "map") for (const e of v.entries) heapRefs(e.key, out), heapRefs(e.value, out);
+}
+/**
+* `trace` without the variables `patterns` name. Where memory is collected
+* (Python, Java, JavaScript), objects only those variables reached go too:
+* nothing else can reach them. In C and C++ the heap stays as it is: memory
+* nothing points to is a leak, worth seeing.
+*/
+function hideVariables(trace, patterns) {
+	if (!patterns.length) return trace;
+	const hidden = matcher(patterns);
+	const keep = (bs) => bs.filter((b) => !hidden(b.name));
+	const frame = (f) => ({
+		...f,
+		locals: keep(f.locals)
+	});
+	const gc = !LANGUAGES[trace.language].manualMemory;
+	const steps = trace.steps.map((s) => {
+		const frames = s.frames.map(frame);
+		const paused = s.paused?.map(frame);
+		const globals = keep(s.globals);
+		let heap = s.heap;
+		if (gc) {
+			const byId = new Map(s.heap.map((h) => [h.id, h]));
+			const roots = [];
+			for (const f of [...frames, ...paused ?? []]) {
+				for (const b of f.locals) heapRefs(b.value, roots);
+				if (f.returnValue) heapRefs(f.returnValue, roots);
+				if (f.yielded) heapRefs(f.yielded, roots);
+				if (f.awaiting) heapRefs(f.awaiting, roots);
+			}
+			if (s.job?.promise) heapRefs(s.job.promise, roots);
+			if (s.job?.value) heapRefs(s.job.value, roots);
+			for (const b of globals) heapRefs(b.value, roots);
+			const reached = /* @__PURE__ */ new Set();
+			while (roots.length) {
+				const id = roots.pop();
+				const h = byId.get(id);
+				if (!h || reached.has(id)) continue;
+				reached.add(id);
+				heapRefs(h.value, roots);
+			}
+			heap = s.heap.filter((h) => reached.has(h.id));
+		}
+		return {
+			...s,
+			frames,
+			globals,
+			heap,
+			...paused ? { paused } : {}
+		};
+	});
+	return {
+		...trace,
+		steps
+	};
+}
+// ../renderer/src/highlight.ts
+var KEYWORDS = new Set("auto break case catch char class const continue default delete do double else enum extern false final float for function if import int let long new null nullptr private protected public return short signed sizeof static struct switch this throw true try typedef union unsigned var void volatile while bool boolean byte string String extends implements interface package super instanceof template typename namespace using std const_cast include define".split(" "));
+var PY_KEYWORDS = new Set("False None True and as assert async await break class continue def del elif else except finally for from global if import in is lambda nonlocal not or pass raise return try while with yield".split(" "));
+var JS_KEYWORDS = new Set("break case catch class const continue debugger default delete do else export extends false finally for function if import in instanceof let new null of return static super switch this throw true try typeof undefined var void while with yield async await get set".split(" "));
+var TS_KEYWORDS = /* @__PURE__ */ new Set([...JS_KEYWORDS, ..."type interface enum implements private protected public readonly abstract declare namespace as is keyof infer satisfies any unknown never number string boolean bigint symbol object".split(" ")]);
+var TOKEN = /(\/\/.*$|\/\*[\s\S]*?\*\/)|("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`(?:\\.|[^`\\])*`)|(^\s*#\s*\w+)|\b(\d+(?:\.\d+)?[fFlLuU]*|0x[\da-fA-F]+)\b|\b([A-Za-z_]\w*)\b/gm;
+var PY_TOKEN = /(#.*$)|((?:\b[rRbBfFuU]{1,2})?(?:"""[\s\S]*?"""|'''[\s\S]*?'''|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'))|()\b(\d[\d_]*(?:\.\d*)?(?:[eE][-+]?\d+)?j?|0[xXoObB][\da-fA-F_]+)\b|\b([A-Za-z_]\w*)\b/gm;
+var escapeHtml = (s) => s.replace(/[&<>]/g, (c) => c === "&" ? "&amp;" : c === "<" ? "&lt;" : "&gt;");
+/** Returns HTML for one line of code with `cf-tok-*` spans. */
+function highlightLine(line, lang = "c") {
+	const py = lang === "python";
+	const js = lang === "javascript" || lang === "typescript";
+	const keywords = py ? PY_KEYWORDS : lang === "typescript" ? TS_KEYWORDS : js ? JS_KEYWORDS : KEYWORDS;
+	let out = "";
+	let last = 0;
+	for (const m of line.matchAll(py ? PY_TOKEN : TOKEN)) {
+		const [text, comment, str, hash, num, word] = m;
+		const cls = comment ? "comment" : str ? "string" : (js ? void 0 : hash) ? "pre" : num ? "number" : word && keywords.has(word) ? "keyword" : null;
+		out += escapeHtml(line.slice(last, m.index));
+		out += cls ? `<span class="cf-tok-${cls}">${escapeHtml(text)}</span>` : escapeHtml(text);
+		last = m.index + text.length;
+	}
+	return out + escapeHtml(line.slice(last));
+}
+// ../renderer/src/grid.ts
+/** Wider rows stay as plain arrays, which wrap. */
+var MAX_COLUMNS = 16;
+var isCell = (v) => v.k !== "array" && v.k !== "record" && v.k !== "map";
+var unordered = (lang, v) => lang === "python" && (v.type === "set" || v.type === "frozenset") || (lang === "javascript" || lang === "typescript") && v.type === "Set";
+/** References to each heap object from other objects (variables don't count). */
+function refCounts(step) {
+	const refs = /* @__PURE__ */ new Map();
+	const visit = (v) => {
+		if (v.k === "ptr" && v.target.kind === "heap") refs.set(v.target.id, (refs.get(v.target.id) ?? 0) + 1);
+		else if (v.k === "array") v.items.forEach(visit);
+		else if (v.k === "record") v.fields.forEach((f) => visit(f.value));
+		else if (v.k === "map") v.entries.forEach((e) => (visit(e.key), visit(e.value)));
+	};
+	step.heap.forEach((h) => visit(h.value));
+	return refs;
+}
+/**
+* The rows of `v` if it is drawn as a grid, else null. `onHeap`: `v` is a
+* heap object's value (only those can take in row objects).
+*/
+function gridRows(ctx, v, onHeap, keyPrefix, path) {
+	if (v.k !== "array" || v.truncated || v.items.length === 0 || unordered(ctx.lang, v)) return null;
+	const rows = [];
+	const managed = !LANGUAGES[ctx.lang].manualMemory;
+	for (const [i, item] of v.items.entries()) {
+		let row;
+		if (item.k === "array" && !managed) {
+			row = {
+				items: item.items,
+				...keyPrefix ? { key: `${keyPrefix}:${i}` } : {},
+				...path ? {
+					path: `${path}[${i}]`,
+					slot: `${path}[${i}]`
+				} : {}
+			};
+			if (item.truncated) return null;
+		} else if (item.k === "ptr" && item.target.kind === "heap" && managed && onHeap) {
+			const id = item.target.id;
+			const obj = ctx.heap.get(id)?.value;
+			if (obj?.k !== "array" || obj.truncated || unordered(ctx.lang, obj) || ctx.refs.get(id) !== 1) return null;
+			row = {
+				items: obj.items,
+				key: `heap:${id}`,
+				path: `heap:${id}`,
+				...path ? { slot: `${path}[${i}]` } : {}
+			};
+		} else return null;
+		if (row.items.length > MAX_COLUMNS || !row.items.every(isCell)) return null;
+		rows.push(row);
+	}
+	return rows.some((r) => r.items.length) ? rows : null;
+}
+/** Heap objects drawn inside another object's grid this step. */
+function gridAbsorbed(ctx, step) {
+	const out = /* @__PURE__ */ new Set();
+	for (const h of step.heap) for (const r of gridRows(ctx, h.value, true) ?? []) if (r.key?.startsWith("heap:")) out.add(r.key.slice(5));
+	return out;
+}
+/** True if some value on step `step` would be drawn as a grid. */
+function hasGrid(step, lang) {
+	const ctx = {
+		lang,
+		heap: new Map(step.heap.map((h) => [h.id, h])),
+		refs: refCounts(step)
+	};
+	const inline = (v) => gridRows(ctx, v, false) !== null || v.k === "record" && v.fields.some((f) => inline(f.value));
+	return step.heap.some((h) => gridRows(ctx, h.value, true) !== null || inline(h.value)) || [...step.frames, ...step.paused ?? []].some((f) => f.locals.some((b) => inline(b.value))) || step.globals.some((b) => inline(b.value));
+}
+// ../renderer/src/layout.ts
+var allocIndex$1 = (id) => Number(id.match(/\d+/)?.[0] ?? Number.MAX_SAFE_INTEGER);
+function heapTargets(v, out = []) {
+	if (v.k === "ptr" && v.target.kind === "heap") out.push(v.target.id);
+	else if (v.k === "array") v.items.forEach((x) => heapTargets(x, out));
+	else if (v.k === "record") v.fields.forEach((f) => heapTargets(f.value, out));
+	else if (v.k === "map") v.entries.forEach((e) => (heapTargets(e.key, out), heapTargets(e.value, out)));
+	return out;
+}
+/** Layouts for every step of a trace. */
+function computeHeapLayouts(steps) {
+	let rows = [];
+	return steps.map((step, i) => {
+		const prev = steps[i - 1];
+		const present = new Set(step.heap.map((h) => h.id));
+		const ghosts = new Set((prev?.heap ?? []).filter((h) => !present.has(h.id)).map((h) => h.id));
+		rows = rows.map((r) => r.filter((id) => present.has(id) || ghosts.has(id))).filter((r) => r.length > 0);
+		const byId = new Map(step.heap.map((h) => [h.id, h]));
+		const before = new Map((prev?.heap ?? []).map((h) => [h.id, h]));
+		/** `pid` was on screen last step, without holding `id`. */
+		const justTook = (pid, id) => {
+			const was = before.get(pid);
+			return !!was && !heapTargets(was.value).includes(id);
+		};
+		const placed = new Set(rows.flat());
+		for (const h of [...step.heap].sort((a, b) => allocIndex$1(a.id) - allocIndex$1(b.id))) {
+			if (placed.has(h.id)) continue;
+			let done = false;
+			for (const row of rows) {
+				const at = row.findIndex((id) => {
+					const parent = byId.get(id);
+					return parent?.value.k === "record" && heapTargets(parent.value).includes(h.id);
+				});
+				if (at >= 0) {
+					row.splice(at + 1, 0, h.id);
+					done = true;
+					break;
+				}
+			}
+			if (!done) done = adopt(rows, byId, h.id);
+			if (!done && h.value.k === "record") {
+				const targets = heapTargets(h.value);
+				const row = rows.find((r) => targets.includes(r[0]));
+				if (row) {
+					row.unshift(h.id);
+					done = true;
+				}
+			}
+			if (!done) rows.push([h.id]);
+			placed.add(h.id);
+		}
+		for (let merged = true; merged;) {
+			merged = false;
+			for (const lone of rows.filter((r) => r.length === 1)) {
+				const id = lone[0];
+				const obj = byId.get(id);
+				if (obj?.value.k !== "record") continue;
+				const ahead = rows.find((r) => r !== lone && heapTargets(obj.value).includes(r[0]));
+				const behind = rows.find((r) => {
+					const tail = byId.get(r.at(-1));
+					return r !== lone && tail?.value.k === "record" && heapTargets(tail.value).includes(id);
+				});
+				if (ahead) ahead.unshift(id);
+				else if (behind) behind.push(id);
+				else continue;
+				rows = rows.filter((r) => r !== lone);
+				merged = true;
+				break;
+			}
+			for (const lone of rows.filter((r) => r.length === 1)) {
+				const id = lone[0];
+				if ((rows[rows.indexOf(lone) - 1] ?? []).some((pid) => {
+					const p = byId.get(pid);
+					return p?.value.k === "array" && heapTargets(p.value).includes(id);
+				})) continue;
+				const rest = rows.filter((r) => r !== lone);
+				if (!adopt(rest, byId, id, (pid) => justTook(pid, id))) continue;
+				rows = rest;
+				merged = true;
+				break;
+			}
+		}
+		return rows.map((r) => [...r]);
+	});
+}
+/**
+* Places `id` among the children of an array that holds it: in the row right
+* below the array, in the order the array holds them. False if no array on
+* screen (that `eligible` accepts) holds it.
+*/
+function adopt(rows, byId, id, eligible = () => true) {
+	const holds = (pid) => {
+		const parent = byId.get(pid);
+		return eligible(pid) && parent?.value.k === "array" && heapTargets(parent.value).includes(id);
+	};
+	const parentRow = rows.findIndex((row) => row.some(holds));
+	if (parentRow < 0) return false;
+	const parentId = rows[parentRow].find(holds);
+	const order = heapTargets(byId.get(parentId).value);
+	const isChild = (x) => x !== parentId && order.includes(x);
+	let kids = rows[parentRow + 1];
+	if (!kids?.length || !kids.every(isChild)) {
+		kids = [];
+		rows.splice(parentRow + 1, 0, kids);
+	}
+	const at = kids.findIndex((x) => order.indexOf(x) > order.indexOf(id));
+	kids.splice(at < 0 ? kids.length : at, 0, id);
+	return true;
+}
+// ../renderer/src/icons.ts
+var svg = (body) => `<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
+var icons = {
+	first: svg("<path d=\"M5 4v12\"/><path d=\"M15 5l-6 5 6 5\"/>"),
+	back: svg("<path d=\"M12.5 5l-5 5 5 5\"/>"),
+	next: svg("<path d=\"M7.5 5l5 5-5 5\"/>"),
+	last: svg("<path d=\"M15 4v12\"/><path d=\"M5 5l6 5-6 5\"/>"),
+	/** The highlighted line (what the caption describes): solid arrow. */
+	focusLine: `<svg viewBox="0 0 20 14" width="20" height="14" aria-hidden="true"><path d="M1 5h10V1l8 6-8 6V9H1z" fill="currentColor"/></svg>`,
+	/** The next line to run: outlined arrow, so the two never rely on colour alone. */
+	nextLine: `<svg viewBox="0 0 20 14" width="20" height="14" aria-hidden="true"><path d="M1.75 5.75h10V2.5l6 4.5-6 4.5V8.25h-10z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`,
+	broken: svg("<path d=\"M4 10h4\"/><path d=\"M12 10h4\"/><path d=\"M9 6l2 8\"/>")
+};
+// ../renderer/src/memory.ts
+/** Frame titles: constructors (`Account::Account`, Java `Account.<init>`) read as "Account constructor". */
+var frameTitle = (name) => {
+	const ctor = name.match(/(?:^|::)(\w+)::\1$/)?.[1] ?? name.match(/(\w+)\.<init>$/)?.[1];
+	return ctor ? `${ctor} constructor` : name;
+};
+/** The element `offset` bytes into an array of `size` bytes: its index, or "end" just past it. */
+function elementOf(arr, offset, size) {
+	if (arr?.k !== "array" || arr.items.length === 0 || !size || offset <= 0) return void 0;
+	const index = Math.floor(offset / (size / arr.items.length));
+	return index < arr.items.length ? index : index === arr.items.length ? "end" : void 0;
+}
+var COLLAPSE_OVER = 12;
+var KEEP_OUTER = 3;
+var KEEP_INNER = 6;
+function el(doc, tag, cls, text) {
+	const e = doc.createElement(tag);
+	if (cls) e.className = cls;
+	if (text !== void 0) e.textContent = text;
+	return e;
+}
+function srOnly(doc, text) {
+	return el(doc, "span", "cf-sr", text);
+}
+function targetKey(t, ctx, address) {
+	switch (t.kind) {
+		case "heap": {
+			const obj = ctx.heap.get(t.id);
+			const at = elementOf(obj?.value, t.offset, obj?.size);
+			return at === void 0 ? `heap:${t.id}` : `heap:${t.id}:${at}`;
+		}
+		case "stack":
+		case "global": {
+			const key = t.kind === "stack" ? `var:${t.frame}:${t.name}` : `global:${t.name}`;
+			const at = elementOf(ctx.vars.get(key), t.offset, t.size);
+			return at === void 0 ? key : `${key}:${at}`;
+		}
+		case "string": return `lit:${address}`;
+		case "dangling": return t.id && ctx.ghosts.has(t.id) ? `ghost:${t.id}` : null;
+		default: return null;
+	}
+}
+function renderValue(ctx, v, keyPrefix, path) {
+	const { doc } = ctx;
+	switch (v.k) {
+		case "prim": return el(doc, "span", "cf-val", v.text);
+		case "uninit": {
+			const e = el(doc, "span", "cf-val cf-uninit", "?");
+			e.title = LANGUAGES[ctx.lang].dynamic ? "Not set yet: the line that gives it a value hasn't run" : "Not initialized yet: this memory still holds leftover data";
+			e.append(srOnly(doc, " (uninitialized)"));
+			return e;
+		}
+		case "opaque": return el(doc, "span", "cf-val cf-opaque", v.text);
+		case "ptr": {
+			const t = v.target;
+			if (t.kind === "null") return el(doc, "span", "cf-val cf-null", LANGUAGES[ctx.lang].nullWord);
+			if (t.kind === "dangling" || t.kind === "invalid") {
+				const e = el(doc, "span", "cf-val cf-bad");
+				const key = ctx.quiet ? void 0 : targetKey(t, ctx, v.address);
+				if (!key) e.innerHTML = icons.broken;
+				e.append(t.kind === "dangling" ? "dangling" : "invalid");
+				if (key) {
+					const dot = el(doc, "span", "cf-dot cf-dot-dangling");
+					dot.dataset.cfPtr = key;
+					e.append(dot);
+				}
+				e.title = t.kind === "dangling" ? "Still holds the address of memory that was freed; using it is a bug" : "Points to an address that isn't valid";
+				return e;
+			}
+			if (t.kind === "string" && !ctx.quiet) ctx.literals.set(v.address, t.text);
+			const key = ctx.quiet ? void 0 : targetKey(t, ctx, v.address);
+			const ref = v.type.endsWith("&");
+			const e = el(doc, "span", "cf-ptr");
+			const weak = ctx.lang === "cpp" && /^(?:const )?weak_ptr</.test(v.type);
+			const dot = el(doc, "span", ref ? "cf-dot cf-ref" : weak ? "cf-dot cf-weak" : "cf-dot");
+			if (ref) dot.title = "A reference: another name for an existing variable";
+			if (weak) dot.title = "A weak_ptr: it can reach the object without owning it";
+			if (ctx.quiet) dot.title = `When this call finished, it ${ref ? "referred" : "pointed"} to ${valueText(v, ctx.lang)}`;
+			if (key) dot.dataset.cfPtr = key;
+			const obj = ctx.lang === "java" && t.kind === "heap" ? ctx.heap.get(t.id) : void 0;
+			const said = valueText(obj ? {
+				...v,
+				type: obj.type
+			} : v, ctx.lang);
+			const verb = ref || !LANGUAGES[ctx.lang].manualMemory ? "refers to" : "points to";
+			const at = t.kind === "stack" || t.kind === "global" ? elementOf(ctx.vars.get(t.kind === "stack" ? `var:${t.frame}:${t.name}` : `global:${t.name}`), t.offset, t.size) : void 0;
+			const heapObj = t.kind === "heap" ? ctx.heap.get(t.id) : void 0;
+			const where = t.kind === "heap" && heapObj && elementOf(heapObj.value, t.offset, heapObj.size) === "end" ? `points just past the end of the ${heapObj.type} on the heap` : at === "end" ? `points just past the end of ${said}` : at !== void 0 ? `${verb} ${said}[${at}]` : `${verb} ${said}`;
+			e.append(dot, srOnly(doc, where));
+			return e;
+		}
+		case "array": {
+			const rows = ctx.grid && !(keyPrefix && ctx.pastEnd.has(keyPrefix)) ? gridRows(ctx.grid, v, false, keyPrefix, path) : null;
+			if (rows) return renderGrid(ctx, rows);
+			const e = el(doc, "div", "cf-array");
+			e.setAttribute("role", "list");
+			const unordered = ctx.lang === "python" && (v.type === "set" || v.type === "frozenset") || (ctx.lang === "javascript" || ctx.lang === "typescript") && v.type === "Set";
+			v.items.forEach((item, i) => {
+				const itemPath = path ? `${path}[${i}]` : void 0;
+				const changed = itemPath !== void 0 && (ctx.changed.has(itemPath) || ctx.changed.has(`${itemPath}~`));
+				const cell = el(doc, "div", changed ? "cf-cell cf-changed-cell" : "cf-cell");
+				cell.setAttribute("role", "listitem");
+				if (keyPrefix) cell.dataset.cfKey = `${keyPrefix}:${i}`;
+				if (!unordered) cell.append(el(doc, "span", "cf-index", String(i)));
+				cell.append(renderValue(ctx, item, void 0, itemPath));
+				if (changed) cell.append(srOnly(doc, " (changed this step)"));
+				e.append(cell);
+			});
+			if (keyPrefix && !v.truncated && ctx.pastEnd.has(keyPrefix)) {
+				const end = el(doc, "div", "cf-cell cf-cell-end");
+				end.setAttribute("role", "listitem");
+				end.dataset.cfKey = `${keyPrefix}:end`;
+				end.title = "Just past the last element: a pointer can stop here, but there's nothing to read";
+				end.append(el(doc, "span", "cf-index", String(v.items.length)), srOnly(doc, "end of the array"));
+				e.append(end);
+			}
+			if (v.truncated) e.append(el(doc, "div", "cf-cell cf-more", "…"));
+			if (v.items.length === 0) e.append(el(doc, "span", "cf-empty", "empty"));
+			return e;
+		}
+		case "record": {
+			const table = renderTable(ctx, v.fields.map((f) => [
+				f.name,
+				f.value,
+				path ? `${path}.${f.name}` : void 0
+			]), v.union ? "cf-record cf-union" : "cf-record");
+			if (v.union) {
+				const note = el(doc, "caption", "cf-union-note", "shared memory");
+				note.title = "A union: its members share the same bytes, so writing one changes what the others read";
+				table.prepend(note);
+			}
+			return table;
+		}
+		case "map": return renderTable(ctx, v.entries.map((en) => [
+			valueText(en.key, ctx.lang),
+			en.value,
+			path ? `${path}{${signature(en.key)}}` : void 0
+		]), "cf-record cf-map");
+	}
+}
+/** Rows under rows, numbered down the side and along the top. */
+function renderGrid(ctx, rows) {
+	const { doc } = ctx;
+	const table = el(doc, "table", "cf-grid");
+	const head = el(doc, "tr");
+	head.append(el(doc, "td", "cf-grid-corner"));
+	const width = Math.max(...rows.map((r) => r.items.length));
+	for (let j = 0; j < width; j++) {
+		const th = el(doc, "th", "cf-index", String(j));
+		th.scope = "col";
+		head.append(th);
+	}
+	const thead = el(doc, "thead");
+	thead.append(head);
+	const body = el(doc, "tbody");
+	rows.forEach((r, i) => {
+		const tr = el(doc, "tr");
+		const replaced = r.slot !== void 0 && ctx.changed.has(r.slot);
+		const th = el(doc, "th", replaced ? "cf-index cf-changed-cell" : "cf-index", String(i));
+		th.scope = "row";
+		if (r.key) th.dataset.cfKey = r.key;
+		tr.append(th);
+		r.items.forEach((item, j) => {
+			const p = r.path !== void 0 ? `${r.path}[${j}]` : void 0;
+			const changed = replaced || p !== void 0 && (ctx.changed.has(p) || ctx.changed.has(`${p}~`));
+			const td = el(doc, "td", changed ? "cf-changed-cell" : void 0);
+			if (r.key) td.dataset.cfKey = `${r.key}:${j}`;
+			td.append(renderValue(ctx, item, void 0, p));
+			if (changed) td.append(srOnly(doc, " (changed this step)"));
+			tr.append(td);
+		});
+		if (!r.items.length) tr.append(el(doc, "td", "cf-grid-none", "empty"));
+		body.append(tr);
+	});
+	table.append(thead, body);
+	return table;
+}
+function renderTable(ctx, rows, cls) {
+	const table = el(ctx.doc, "table", cls);
+	for (const [name, value, path] of rows) {
+		const tr = el(ctx.doc, "tr");
+		const th = el(ctx.doc, "th", void 0, name);
+		th.scope = "row";
+		const changed = path !== void 0 && ctx.changed.has(path);
+		const td = el(ctx.doc, "td", changed ? "cf-changed-cell" : void 0);
+		td.append(renderValue(ctx, value, void 0, path));
+		if (changed) td.append(srOnly(ctx.doc, " (changed this step)"));
+		tr.append(th, td);
+		table.append(tr);
+	}
+	if (rows.length === 0) {
+		const tr = el(ctx.doc, "tr");
+		tr.append(el(ctx.doc, "td", "cf-empty", "empty"));
+		table.append(tr);
+	}
+	return table;
+}
+function renderBindings(ctx, bindings, keyOf) {
+	const table = el(ctx.doc, "table", "cf-vars");
+	for (const b of bindings) {
+		const key = keyOf(b);
+		const tr = el(ctx.doc, "tr");
+		const isChanged = ctx.changed.has(key);
+		if (isChanged) tr.className = "cf-changed";
+		const th = el(ctx.doc, "th");
+		th.scope = "row";
+		th.append(el(ctx.doc, "span", "cf-name", b.name));
+		if (!LANGUAGES[ctx.lang].dynamic && b.type) th.append(el(ctx.doc, "span", "cf-type", b.type));
+		const td = el(ctx.doc, "td");
+		td.dataset.cfKey = key;
+		td.append(renderValue(ctx, b.value, key, isChanged ? void 0 : key));
+		if (isChanged) td.append(srOnly(ctx.doc, " (changed this step)"));
+		tr.append(th, td);
+		table.append(tr);
+	}
+	return table;
+}
+function renderFrame(ctx, f, current, finished = false, paused = false) {
+	const leaving = f.returnValue || f.yielded || f.awaiting;
+	const cls = finished ? " cf-finished" : paused ? " cf-paused" : `${current ? " cf-current" : ""}${leaving ? " cf-returning" : ""}`;
+	const section = el(ctx.doc, "section", `cf-frame${cls}`);
+	const where = f.async ? `waiting at line ${f.line}` : `paused at line ${f.line}`;
+	section.setAttribute("aria-label", `${f.name} frame${finished ? ", finished" : paused ? `, ${where}` : ""}`);
+	section.dataset.cfAnim = `frame:${f.id}`;
+	const head = el(ctx.doc, "h4", "cf-frame-name", frameTitle(f.name));
+	if (finished) {
+		const tag = el(ctx.doc, "span", "cf-tag cf-tag-freed", "finished");
+		tag.title = "This call already returned; its variables no longer exist. Shown as they were when it returned.";
+		head.append(tag);
+	} else if (paused) {
+		const tag = el(ctx.doc, "span", "cf-tag cf-tag-paused", where);
+		tag.title = f.async ? "This async function is paused at await until the Promise it waits for settles. Its variables keep their values meanwhile." : "This generator handed back a value and is waiting to be asked for the next one. Its variables keep their values meanwhile.";
+		head.append(tag);
+	}
+	section.append(head);
+	if (f.captured?.length) {
+		const names = f.captured.join(", ");
+		section.append(el(ctx.doc, "p", "cf-empty cf-frame-hint", `Also uses ${names} from its function object.`));
+	} else if (!f.locals.length && !leaving) section.append(el(ctx.doc, "p", "cf-empty cf-frame-hint", "Variables appear here as their lines run."));
+	if (f.locals.length || leaving) {
+		const rows = [...f.locals];
+		if (f.returnValue) rows.push({
+			name: "Return value",
+			type: "",
+			value: f.returnValue
+		});
+		if (f.yielded) rows.push({
+			name: "Yielded",
+			type: "",
+			value: f.yielded
+		});
+		if (f.awaiting) rows.push({
+			name: "Waiting for",
+			type: "",
+			value: f.awaiting
+		});
+		section.append(renderBindings(finished ? {
+			...ctx,
+			quiet: true
+		} : ctx, rows, (b) => `var:${f.id}:${b.name}`));
+	}
+	return section;
+}
+/** Allocation index from ids like `h12`. */
+var allocIndex = (id) => Number(id.match(/\d+/)?.[0] ?? Number.MAX_SAFE_INTEGER);
+function renderObject(ctx, h, state) {
+	const { doc } = ctx;
+	const cls = ["cf-object"];
+	if (state.freed) cls.push("cf-freed");
+	else if (state.isNew) cls.push("cf-new");
+	else if (ctx.changed.has(`heap:${h.id}`)) cls.push("cf-changed");
+	if (h.unreachable && !state.freed) cls.push("cf-leaked");
+	if (state.newlyLeaked) cls.push("cf-just-leaked");
+	const box = el(doc, "section", cls.join(" "));
+	box.dataset.cfKey = state.freed ? `ghost:${h.id}` : `heap:${h.id}`;
+	box.dataset.cfAnim = `heap:${h.id}`;
+	const status = state.freed ? ", freed this step" : state.isNew ? ", created this step" : h.unreachable ? ", leaked" : "";
+	box.setAttribute("aria-label", `${h.type}${status}`);
+	const head = el(doc, "h4", "cf-object-type");
+	head.append(el(doc, "span", "cf-object-name", h.type));
+	if (state.freed) {
+		const tag = el(doc, "span", "cf-tag cf-tag-freed", "freed");
+		tag.title = "This memory was just given back with free/delete; it disappears on the next step";
+		head.append(tag);
+	} else if (state.isNew) {
+		const tag = el(doc, "span", "cf-tag cf-tag-new", "new");
+		tag.title = "Created on this step";
+		head.append(tag);
+	}
+	if (h.unreachable && !state.freed) {
+		const badge = el(doc, "span", "cf-badge", "leaked");
+		badge.title = "Nothing points to this memory any more, and it was never freed";
+		head.append(badge);
+	}
+	box.append(head);
+	if (/^(function|class) /.test(h.type) && h.value.k === "record" && !h.value.fields.length) return box;
+	const keyPrefix = state.freed ? void 0 : `heap:${h.id}`;
+	const rows = ctx.grid && !(keyPrefix && ctx.pastEnd.has(keyPrefix)) ? gridRows(ctx.grid, h.value, true, keyPrefix, keyPrefix) : null;
+	box.append(rows ? renderGrid(ctx, rows) : renderValue(ctx, h.value, keyPrefix, keyPrefix));
+	return box;
+}
+/** A string literal: read-only text the compiler stored for the program. */
+function renderLiteral(ctx, address, text) {
+	const { doc } = ctx;
+	const box = el(doc, "section", "cf-object cf-literal");
+	box.dataset.cfKey = `lit:${address}`;
+	box.dataset.cfAnim = `lit:${address}`;
+	box.setAttribute("aria-label", `string literal "${text}", read-only`);
+	const head = el(doc, "h4", "cf-object-type");
+	head.append(el(doc, "span", "cf-object-name", "string literal"));
+	const tag = el(doc, "span", "cf-tag cf-tag-freed", "read-only");
+	tag.title = "Text written in the program itself; it can't be changed";
+	head.append(tag);
+	const chars = {
+		k: "array",
+		type: `char[${text.length + 1}]`,
+		items: [...[...text].map((c) => ({
+			k: "prim",
+			type: "char",
+			text: `'${c}'`
+		})), {
+			k: "prim",
+			type: "char",
+			text: "'\\0'"
+		}]
+	};
+	box.append(head, renderValue(ctx, chars));
+	return box;
+}
+/**
+* `prev` is the step before, used to mark objects created or freed by the
+* line that just ran.
+*/
+function renderMemory(doc, step, lang, changed, prev, options = {}) {
+	const freedNow = prev && !LANGUAGES[lang].dynamic ? prev.heap.filter((h) => !step.heap.some((x) => x.id === h.id)) : [];
+	const ctx = {
+		doc,
+		lang,
+		changed,
+		heap: new Map(step.heap.map((h) => [h.id, h])),
+		ghosts: new Set(freedNow.map((h) => h.id)),
+		literals: /* @__PURE__ */ new Map(),
+		vars: new Map([...step.frames.flatMap((f) => f.locals.map((b) => [`var:${f.id}:${b.name}`, b.value])), ...step.globals.map((b) => [`global:${b.name}`, b.value])]),
+		pastEnd: /* @__PURE__ */ new Set()
+	};
+	if (options.grids !== false) ctx.grid = {
+		lang,
+		heap: ctx.heap,
+		refs: refCounts(step)
+	};
+	if (!LANGUAGES[lang].dynamic) {
+		const visit = (v) => {
+			if (v.k === "ptr") {
+				const key = targetKey(v.target, ctx, v.address);
+				if (key?.endsWith(":end")) ctx.pastEnd.add(key.slice(0, -4));
+			} else if (v.k === "array") v.items.forEach(visit);
+			else if (v.k === "record") v.fields.forEach((f) => visit(f.value));
+		};
+		for (const v of ctx.vars.values()) visit(v);
+		for (const h of step.heap) visit(h.value);
+	}
+	const frames = el(doc, "div", "cf-frames");
+	const staticPart = el(doc, "div", "cf-static");
+	const py = LANGUAGES[lang].dynamic;
+	if (step.globals.length || py) {
+		const g = el(doc, "section", "cf-frame cf-globals");
+		const owners = new Set(step.globals.map((b) => b.name.split(".")[0]));
+		const java = lang === "java" ? owners.size === 1 ? `Static fields of ${[...owners][0]}` : "Static fields" : void 0;
+		const title = py ? "Global frame" : java ?? "Global variables";
+		g.setAttribute("aria-label", title);
+		g.dataset.cfAnim = "frame:globals";
+		g.append(el(doc, "h4", "cf-frame-name", title));
+		if (step.globals.length) g.append(renderBindings(ctx, step.globals, (b) => `global:${b.name}`));
+		else g.append(el(doc, "p", "cf-empty cf-frame-hint", "Variables appear here as their lines run."));
+		if (py) frames.append(g);
+		else staticPart.append(g);
+	}
+	const live = new Map(step.frames.map((f) => [f.id, f]));
+	const fin = options.finished;
+	const shown = fin ? fin.order.map((id) => live.get(id) ?? fin.frames.get(id)).filter((f) => !!f) : step.frames;
+	const top = step.frames.at(-1);
+	const n = shown.length;
+	const collapse = !options.showAllFrames && n > COLLAPSE_OVER;
+	shown.forEach((f, i) => {
+		if (collapse && i >= KEEP_OUTER && i < n - KEEP_INNER) {
+			if (i === KEEP_OUTER) {
+				const hidden = n - KEEP_OUTER - KEEP_INNER;
+				const names = new Set(shown.slice(KEEP_OUTER, n - KEEP_INNER).map((x) => x.name));
+				const more = el(doc, "div", "cf-frames-more");
+				more.append(el(doc, "span", void 0, `${hidden} more calls to ${[...names].join(", ")}`));
+				const btn = el(doc, "button", "cf-link", "Show all");
+				btn.type = "button";
+				btn.dataset.action = "show-frames";
+				more.append(btn);
+				frames.append(more);
+			}
+			return;
+		}
+		frames.append(renderFrame(ctx, f, f === top, !live.has(f.id)));
+	});
+	for (const f of step.paused ?? []) frames.append(renderFrame(ctx, f, false, false, true));
+	const before = new Map((prev?.heap ?? []).map((h) => [h.id, h]));
+	const absorbed = ctx.grid ? gridAbsorbed(ctx.grid, step) : /* @__PURE__ */ new Set();
+	const all = new Map([...step.heap.filter((h) => !absorbed.has(h.id)).map((h) => [h.id, {
+		h,
+		freed: false
+	}]), ...freedNow.map((h) => [h.id, {
+		h,
+		freed: true
+	}])]);
+	const rows = options.layout ? options.layout.map((r) => r.filter((id) => all.has(id))).filter((r) => r.length) : [...all.keys()].sort((a, b) => allocIndex(a) - allocIndex(b)).map((id) => [id]);
+	const placed = new Set(rows.flat());
+	for (const id of all.keys()) if (!placed.has(id)) rows.push([id]);
+	const objects = el(doc, "div", "cf-objects");
+	for (const row of rows) {
+		const rowEl = el(doc, "div", "cf-heap-row");
+		for (const id of row) {
+			const { h, freed } = all.get(id);
+			const old = before.get(h.id);
+			rowEl.append(renderObject(ctx, h, {
+				isNew: !!prev && !old && !freed,
+				freed,
+				newlyLeaked: !!h.unreachable && !!old && !old.unreachable
+			}));
+		}
+		objects.append(rowEl);
+	}
+	if (ctx.literals.size) {
+		const rowEl = el(doc, "div", "cf-heap-row");
+		for (const [address, text] of ctx.literals) rowEl.append(renderLiteral(ctx, address, text));
+		staticPart.append(rowEl);
+	}
+	const hasStatic = staticPart.childElementCount > 0;
+	if (hasStatic) {
+		const c = LANGUAGES[lang].manualMemory;
+		frames.prepend(el(doc, "h3", "cf-subhead", c ? "Static memory (globals and string literals)" : lang === "java" ? "Static fields" : "Globals"), staticPart, el(doc, "h3", "cf-subhead", c ? "Stack" : "Frames"));
+	}
+	if (all.size === 0) objects.append(el(doc, "p", "cf-empty", LANGUAGES[lang].manualMemory ? "Nothing on the heap" : "No objects"));
+	return {
+		frames,
+		objects,
+		hasStatic
+	};
+}
+// ../renderer/src/styles.ts
+var styles = `
+:host {
+  --cf-bg: #ffffff;
+  --cf-fg: #1f2933;
+  --cf-muted: #52606d;
+  --cf-line: #e4e7eb;
+  --cf-line-strong: #cbd2d9;
+  --cf-accent: #2f6fde;
+  --cf-accent-ink: #1d4fb8;
+  --cf-accent-soft: #e8f0fe;
+  /* Text selection: clearly stronger than the next-line wash so the two never blend. */
+  --cf-selection: #b3cbf5;
+  --cf-frame-bg: #f5f7fa;
+  --cf-object-bg: #fffaeb;
+  --cf-object-line: #ecdcaa;
+  --cf-arrow: var(--cf-accent);
+  --cf-danger: #b42318;
+  --cf-danger-soft: #fef3f2;
+  --cf-changed: #fff4c2;
+  --cf-changed-line: #b7791f;
+  --cf-radius: 8px;
+  --cf-font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --cf-font-code: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --cf-tok-keyword: #7c3aed;
+  --cf-tok-string: #0f7b3e;
+  --cf-tok-number: #b45309;
+  --cf-tok-comment: #5f6b7a;
+  --cf-tok-pre: #a21caf;
+  display: block;
+  color: var(--cf-fg);
+  background: var(--cf-bg);
+  font: 15px/1.5 var(--cf-font);
+  container: cf-root / inline-size;
+}
+* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--cf-line-strong) transparent; }
+::selection { background: var(--cf-selection); color: var(--cf-fg); }
+:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; border-radius: 4px; }
+.cf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+/* Layout: one page scroll. On wide screens the code column is pinned while the
+   memory diagram flows with the page, so only a long program scrolls inside its
+   own panel. */
+/* The diagram can take room from the code (which wraps) down to 300px of
+   code, so a linked list stays on one row: --cf-diagram-min is its widest
+   row, measured once per program (visualizer.ts), so nothing shifts while
+   stepping. */
+.cf-root { display: grid; grid-template-columns: minmax(300px, 4fr) minmax(min(var(--cf-diagram-min, 0px), calc(100% - 332px)), 7fr);
+  gap: 32px; padding: 24px 24px 16px; align-items: start; }
+.cf-left, .cf-right { min-width: 0; }
+.cf-left { position: sticky; top: 16px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
+/* The code, legend and caption share a header (pinned on phones, below); in
+   the side column it is transparent, and the caption sits under the controls. */
+.cf-head { display: contents; }
+.cf-left > *, .cf-head > * { flex: none; }
+.cf-left .cf-code { flex: 0 1 auto; min-height: 160px; }
+.cf-left > .cf-controls { order: 1; }
+.cf-head > .cf-caption { order: 2; }
+.cf-left > .cf-input, .cf-left > .cf-files { order: 3; }
+/* Output heads the diagram column: what it printed, then the memory. */
+.cf-right > .cf-output { margin: 0 0 24px; }
+.cf-right { container: cf-memory / inline-size; }
+@container cf-root (max-width: 820px) {
+  .cf-root { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 16px; }
+  .cf-left { position: static; max-height: none; }
+  .cf-left .cf-code { max-height: 50vh; }
+}
+/* Phones: code and caption, memory, then output, with the step controls
+   pinned to the bottom. On a tall enough screen the code and caption are
+   pinned to the top too, and each step scrolls what changed into the space
+   between, so the line, what it did, and the diagram share one screen. */
+@container cf-root (max-width: 560px) {
+  .cf-root { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
+  .cf-left, .cf-right { display: contents; }
+  /* Code; "Show all code" and the legend on one line; the caption. */
+  .cf-root .cf-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 16px; order: 1; }
+  .cf-root .cf-code { grid-column: 1 / -1; min-height: 0; max-height: calc(5 * 26px + 20px); }
+  .cf-root .cf-code.cf-expanded { max-height: none; }
+  .cf-root .cf-code-toggle { display: block; padding: 0; }
+  .cf-root .cf-legend { margin: 0; flex-wrap: wrap; gap: 4px 16px; justify-content: flex-end; }
+  .cf-root .cf-caption { grid-column: 1 / -1; margin: 4px 0 0; }
+  .cf-root .cf-memory { order: 4; grid-template-columns: minmax(0, 1fr); gap: 24px; }
+  .cf-root .cf-key, .cf-root .cf-toggle { order: 4; margin-top: -12px; }
+  .cf-root .cf-input { order: 5; margin-top: 0; }
+  .cf-root .cf-output, .cf-root .cf-files { order: 5; margin: 0; }
+  .cf-root .cf-controls { order: 6; position: sticky; bottom: 0; z-index: 3; margin: 0 -16px -16px; padding: 12px 16px;
+    background: var(--cf-bg); border-top: 1px solid var(--cf-line); box-shadow: 0 -4px 12px rgb(31 41 51 / 0.06); }
+  @media (min-height: 600px) {
+    .cf-root .cf-head { position: sticky; top: 0; z-index: 3; margin: -16px -16px 0; padding: 12px 16px;
+      background: var(--cf-bg); border-bottom: 1px solid var(--cf-line); box-shadow: 0 4px 12px rgb(31 41 51 / 0.06); }
+    .cf-root .cf-code { max-height: calc(4 * 26px + 20px); }
+    /* All the code: too tall to pin. */
+    .cf-root .cf-head:has(.cf-expanded) { position: static; box-shadow: none; }
+  }
+}
+h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--cf-muted); letter-spacing: 0.02em; }
+
+/* Code */
+.cf-code { border: 1px solid var(--cf-line); border-radius: var(--cf-radius); overflow: auto; background: var(--cf-bg); }
+.cf-code ol { list-style: none; margin: 0; padding: 10px 0; font: 14px/26px var(--cf-font-code); }
+.cf-code li { display: grid; grid-template-columns: 28px 36px minmax(0, 1fr); align-items: start; padding-right: 16px; }
+/* Line numbers double as breakpoint toggles. */
+.cf-lineno { grid-column: 2; grid-row: 1; justify-self: end; margin-right: 6px; min-width: 24px; height: 22px; margin-top: 2px; padding: 0 4px;
+  border: 0; border-radius: 999px; background: none; color: var(--cf-muted); font: inherit; line-height: 22px; text-align: right;
+  font-variant-numeric: tabular-nums; cursor: pointer; }
+.cf-lineno:hover { background: var(--cf-danger-soft); color: var(--cf-danger); }
+.cf-bp .cf-lineno { background: var(--cf-danger); color: #fff; text-align: center; }
+.cf-legend .cf-l-bp .cf-link { padding: 0; font-size: 13px; }
+.cf-bp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cf-danger); display: inline-block; }
+.cf-code .cf-marker { grid-column: 1; grid-row: 1; display: flex; justify-content: center; align-items: center; height: 26px; color: var(--cf-accent); }
+/* Long lines wrap; continuation lines stay aligned under the code, not the gutter. */
+.cf-code code { grid-column: 3; grid-row: 1; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere;
+  padding-left: var(--cf-hang, 2ch); text-indent: calc(-1 * var(--cf-hang, 2ch)); }
+.cf-code .cf-focus { background: var(--cf-accent-soft); }
+.cf-code .cf-next .cf-marker { color: var(--cf-muted); }
+.cf-code .cf-crash { background: var(--cf-danger-soft); }
+.cf-code .cf-crash .cf-marker { color: var(--cf-danger); }
+/* The host shows the code (live mode's editor): the panel and its toggle go. */
+.cf-codeless .cf-code, .cf-codeless .cf-code-toggle { display: none !important; }
+.cf-tok-keyword { color: var(--cf-tok-keyword); }
+.cf-tok-string { color: var(--cf-tok-string); }
+.cf-tok-number { color: var(--cf-tok-number); }
+.cf-tok-comment { color: var(--cf-tok-comment); font-style: italic; }
+.cf-tok-pre { color: var(--cf-tok-pre); }
+.cf-legend { display: flex; gap: 20px; margin: 10px 2px 0; font-size: 13px; color: var(--cf-muted); }
+.cf-legend span { display: inline-flex; align-items: center; gap: 6px; }
+.cf-legend .cf-l-focus { color: var(--cf-accent); }
+.cf-legend .cf-l-focus.cf-l-crash { color: var(--cf-danger); }
+.cf-legend [hidden] { display: none; }
+
+/* Controls */
+.cf-controls { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; align-items: center; margin-top: 20px; }
+.cf-buttons { display: flex; gap: 6px; }
+.cf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 10px;
+  border: 1px solid var(--cf-line-strong); border-radius: var(--cf-radius); background: var(--cf-bg); color: var(--cf-fg);
+  font: 600 15px var(--cf-font); cursor: pointer; transition: background-color 120ms ease-out, border-color 120ms ease-out; }
+.cf-btn:hover:not(:disabled) { background: var(--cf-frame-bg); border-color: var(--cf-muted); }
+.cf-btn:disabled { color: var(--cf-line-strong); cursor: default; }
+.cf-btn.cf-primary { background: var(--cf-accent); border-color: var(--cf-accent); color: #fff; padding: 0 16px 0 14px; }
+.cf-btn.cf-primary:hover:not(:disabled) { background: var(--cf-accent-ink); border-color: var(--cf-accent-ink); }
+.cf-btn.cf-primary:disabled { background: var(--cf-line); border-color: var(--cf-line); color: var(--cf-muted); }
+.cf-count { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; justify-self: end; }
+.cf-slider { grid-column: 1 / -1; width: 100%; accent-color: var(--cf-accent); height: 24px; margin: 0; }
+
+/* Input: read part in ink with an underline, unread part muted. */
+.cf-input { margin-top: 24px; }
+.cf-input[hidden] { display: none; }
+.cf-output[hidden] { display: none; }
+.cf-input pre { margin: 0; padding: 10px 12px; border: 1px solid var(--cf-line); border-radius: var(--cf-radius); font: 14px/1.5 var(--cf-font-code); white-space: pre-wrap; background: var(--cf-frame-bg); }
+.cf-in-read { color: var(--cf-fg); text-decoration: underline; text-decoration-color: var(--cf-accent); text-underline-offset: 4px; text-decoration-thickness: 2px; }
+.cf-in-rest { color: var(--cf-muted); }
+
+/* Output */
+.cf-output { margin-top: 24px; }
+.cf-output pre { margin: 0; min-height: 64px; max-height: 160px; overflow: auto; padding: 10px 12px; border: 1px solid var(--cf-line);
+  border-radius: var(--cf-radius); font: 14px/1.5 var(--cf-font-code); white-space: pre-wrap; background: var(--cf-frame-bg); }
+.cf-output pre:empty::before { content: "Nothing printed yet"; color: var(--cf-muted); font-family: var(--cf-font); }
+/* Files: each file's text at this step; what this step wrote is underlined, like input read. */
+.cf-files { margin-top: 24px; }
+.cf-files[hidden] { display: none; }
+.cf-files-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
+.cf-files-head h3 { overflow-wrap: anywhere; }
+.cf-files-head .cf-link { padding: 0; font-size: 13px; }
+/* A tab per file; a dot marks one this step changed. */
+.cf-file-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: -1px; }
+.cf-file-tabs[hidden] { display: none; }
+.cf-file-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border: 1px solid var(--cf-line);
+  border-bottom: 0; border-radius: var(--cf-radius) var(--cf-radius) 0 0; background: var(--cf-bg); color: var(--cf-muted);
+  font: 600 13px var(--cf-font-code); cursor: pointer; }
+.cf-file-tab[aria-selected="true"] { background: var(--cf-frame-bg); color: var(--cf-fg); }
+.cf-file-tab.cf-file-changed::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cf-accent); }
+.cf-file-tabs:not([hidden]) + .cf-file-text { border-top-left-radius: 0; }
+.cf-files pre { margin: 0; max-height: 160px; overflow: auto; padding: 10px 12px; border: 1px solid var(--cf-line); border-radius: var(--cf-radius);
+  font: 14px/1.5 var(--cf-font-code); white-space: pre-wrap; background: var(--cf-frame-bg); }
+.cf-files pre:empty::before { content: "Empty"; color: var(--cf-muted); font-family: var(--cf-font); }
+.cf-files mark { background: none; color: var(--cf-fg); text-decoration: underline; text-decoration-color: var(--cf-accent); text-underline-offset: 4px; text-decoration-thickness: 2px; }
+/* The program is waiting for a line of input: type it like at a terminal. */
+.cf-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
+.cf-prompt[hidden] { display: none; }
+.cf-prompt-input { flex: 1 1 160px; min-width: 0; height: 40px; padding: 0 12px; border: 2px solid var(--cf-accent); border-radius: var(--cf-radius);
+  font: 14px var(--cf-font-code); color: inherit; background: var(--cf-bg); }
+.cf-prompt-input:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
+
+/* Caption */
+/* Sits right under the step controls: you read what happened where you clicked,
+   and its length never moves the diagram. At least two lines are reserved,
+   or the longest caption in the trace (measured in visualizer.ts), so
+   nothing around it jumps. */
+.cf-caption { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--cf-radius); background: var(--cf-accent-soft); font-size: 16px;
+  min-height: max(calc(3em + 24px), var(--cf-caption-min, 0px)); }
+.cf-caption.cf-error { background: var(--cf-danger-soft); color: var(--cf-danger); font-weight: 600; }
+
+/* Memory */
+/* The diagram never scrolls on its own: values wrap to the space they have, and
+   Frames/Objects stack when the diagram itself (not the page) gets narrow. */
+.cf-memory { position: relative; display: grid; grid-template-columns: fit-content(62%) minmax(180px, 1fr); gap: 40px; align-items: start; padding: 2px 24px 8px 2px; }
+@container cf-memory (max-width: 600px) { .cf-memory { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
+.cf-arrows { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
+.cf-arrow { fill: none; stroke: var(--cf-arrow); stroke-width: 2; }
+.cf-frames, .cf-objects { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
+/* Room between heap rows for arrows that run beside a row (see arrows.ts). */
+.cf-objects { gap: 24px; }
+/* Heap rows: linked structures run left to right along their pointers. */
+.cf-heap-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 20px; }
+.cf-subhead { margin: 8px 0 -8px; }
+.cf-subhead:first-child { margin-top: 0; }
+.cf-static { display: flex; flex-direction: column; gap: 16px; }
+.cf-measure { position: absolute; left: -10000px; top: 0; width: max-content; visibility: hidden; pointer-events: none; }
+/* Unstretched, so a table's name column measures the names alone. */
+.cf-measure .cf-vars { width: auto; }
+.cf-measure .cf-heap-row { flex-wrap: nowrap; width: max-content; }
+/* Cumulative mode: finished calls stay, quiet and clearly over. */
+.cf-frame.cf-finished { background: var(--cf-bg); border-style: dashed; border-color: var(--cf-line-strong); }
+.cf-frame.cf-finished .cf-frame-name { color: var(--cf-muted); }
+.cf-frame.cf-finished td { color: var(--cf-muted); }
+.cf-frame.cf-finished .cf-dot:not(.cf-ref) { background: var(--cf-muted); }
+.cf-frame.cf-finished .cf-dot.cf-ref { box-shadow: inset 0 0 0 2px var(--cf-muted); }
+.cf-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 14px 2px 0; font-size: 14px; color: var(--cf-muted); cursor: pointer; }
+.cf-toggle[hidden] { display: none; }
+.cf-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--cf-accent); }
+.cf-key { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 2px 0; font-size: 13px; color: var(--cf-muted); }
+.cf-key[hidden], .cf-key [hidden] { display: none; }
+.cf-key > span { display: inline-flex; align-items: center; gap: 6px; }
+.cf-key .cf-dot-dangling { margin-left: 0; }
+/* The hint wraps to the frame; it never makes the Stack column wider. */
+.cf-frame-hint { font-size: 13px; contain: inline-size; }
+.cf-frames-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px dashed var(--cf-line-strong); border-radius: var(--cf-radius); color: var(--cf-muted); font-size: 14px; }
+.cf-link { border: 0; background: none; padding: 4px 0; color: var(--cf-accent-ink); font: 600 14px var(--cf-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
+.cf-code-toggle { display: none; }
+.cf-frame { background: var(--cf-frame-bg); border: 1px solid var(--cf-line); border-radius: var(--cf-radius); padding: 10px 12px 12px; }
+.cf-frame.cf-current { border-color: var(--cf-accent); box-shadow: 0 1px 3px rgb(31 41 51 / 0.08), 0 0 0 1px var(--cf-accent); }
+.cf-frame.cf-returning { border-style: dashed; }
+/* A paused generator: off the call stack, quieter, but its variables are live. */
+.cf-frame.cf-paused { background: var(--cf-bg); border-style: dashed; border-color: var(--cf-line-strong); }
+.cf-frame.cf-paused .cf-frame-name { color: var(--cf-muted); }
+.cf-tag-paused { color: var(--cf-muted); background: var(--cf-frame-bg); border: 1px solid var(--cf-line-strong); }
+.cf-frame-name, .cf-object-type { margin: 0 0 8px; font-size: 15px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
+.cf-tag, .cf-badge { white-space: nowrap; }
+.cf-object-type { font-size: 13px; color: var(--cf-muted); }
+.cf-object-type:last-child { margin-bottom: 0; }
+.cf-vars, .cf-record { border-collapse: collapse; width: 100%; }
+.cf-vars th, .cf-record th { text-align: right; font-weight: 400; padding: 5px 10px 5px 0; vertical-align: middle; white-space: nowrap; }
+.cf-record th { font-family: var(--cf-font-code); font-size: 14px; }
+/* One name-column width for every frame (measured in visualizer.ts). */
+.cf-vars > tr > th, .cf-vars > tbody > tr > th { box-sizing: border-box; width: var(--cf-names-width, auto); }
+.cf-vars td, .cf-record td { background: var(--cf-bg); border: 1px solid var(--cf-line); padding: 5px 10px; min-width: 56px; font-family: var(--cf-font-code); font-size: 14px; }
+/* Changed this step: outlined and bold, with the fill only as reinforcement. */
+.cf-vars tr.cf-changed td { background: var(--cf-changed); outline: 2px solid var(--cf-changed-line); outline-offset: -2px; }
+.cf-vars tr.cf-changed td .cf-val { font-weight: 700; }
+.cf-name { display: block; font-family: var(--cf-font-code); font-size: 14px; }
+.cf-type { display: block; font-size: 12px; color: var(--cf-muted); }
+.cf-object { background: var(--cf-object-bg); border: 1px solid var(--cf-object-line); border-radius: var(--cf-radius); padding: 8px 8px 8px; width: max-content; max-width: 100%; }
+.cf-object.cf-changed { outline: 2px solid var(--cf-changed-line); outline-offset: 2px; }
+.cf-object.cf-leaked { border-style: dashed; border-color: var(--cf-danger); }
+.cf-object .cf-record td { background: var(--cf-bg); min-width: 44px; }
+.cf-object .cf-record th { padding-right: 8px; }
+/* Created / freed this step. The text tag is the cue; motion only reinforces it. */
+.cf-tag { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 0 8px; }
+.cf-tag-new { color: var(--cf-accent-ink); background: var(--cf-accent-soft); }
+.cf-tag-freed { color: var(--cf-muted); background: var(--cf-frame-bg); border: 1px solid var(--cf-line-strong); }
+.cf-object.cf-new { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
+/* Freed: a dashed, uncoloured ghost. Text stays at full contrast (no opacity). */
+.cf-object.cf-freed { background: var(--cf-bg); border-style: dashed; border-color: var(--cf-line-strong); }
+.cf-object.cf-freed .cf-val, .cf-object.cf-freed td, .cf-object.cf-freed .cf-cell { color: var(--cf-muted); background: var(--cf-bg); }
+.cf-object.cf-freed .cf-object-name { text-decoration: line-through; text-decoration-color: var(--cf-muted); }
+.cf-badge { font-size: 12px; font-weight: 700; color: var(--cf-danger); border: 1px solid currentColor; border-radius: 999px; padding: 0 8px; }
+/* An array stays on one row while it fits. A long one wraps, with a gap
+   between rows and every cell keeping its index, so the rows read as one
+   sequence rather than a 2-D grid. Nothing scrolls sideways. */
+.cf-array { display: flex; flex-wrap: wrap; row-gap: 8px; max-width: 100%; padding: 1px 0 0 1px; }
+.cf-cell { display: flex; flex-direction: column; align-items: center; min-width: 40px; border: 1px solid var(--cf-line-strong); margin: -1px 0 0 -1px; background: var(--cf-bg); padding: 0 6px 4px; }
+.cf-cell .cf-val { overflow-wrap: normal; white-space: nowrap; }
+.cf-cell-end { border-style: dashed; border-color: var(--cf-line); background: transparent; min-height: 2.6em; }
+/* An array of arrays as a grid: numbered rows under each other. Declared
+   after .cf-vars td so a grid inside a variable keeps its own cells. */
+.cf-union-note { caption-side: top; text-align: left; white-space: nowrap; font-size: 12px; color: var(--cf-muted); padding: 0 0 2px; font-family: var(--cf-font); }
+.cf-grid { border-collapse: collapse; margin: 1px 0 0 1px; }
+.cf-grid td { background: var(--cf-bg); border: 1px solid var(--cf-line-strong); padding: 2px 8px; min-width: 40px; text-align: center; font-family: var(--cf-font-code); font-size: 14px; }
+.cf-grid th.cf-index { font-weight: 400; padding: 0 6px 2px; text-align: center; }
+.cf-grid tbody th.cf-index { text-align: right; padding: 0 6px 0 0; }
+.cf-grid td.cf-grid-corner { border: none; background: transparent; min-width: 0; padding: 0; }
+.cf-grid td.cf-grid-none { border: none; background: transparent; color: var(--cf-muted); font-family: var(--cf-font); text-align: left; }
+.cf-index { font-size: 12px; color: var(--cf-muted); font-family: var(--cf-font); }
+.cf-val { font-family: var(--cf-font-code); }
+/* Only text values may wrap; numbers and identifiers never break mid-value. */
+.cf-str, .cf-opaque { overflow-wrap: anywhere; }
+.cf-uninit { color: var(--cf-muted); text-decoration: underline dotted; text-underline-offset: 3px; }
+.cf-null { color: var(--cf-muted); }
+.cf-str { color: var(--cf-tok-string); }
+.cf-bad { display: inline-flex; align-items: center; gap: 4px; color: var(--cf-danger); font-family: var(--cf-font); font-weight: 700; font-size: 13px; }
+.cf-ptr { display: inline-flex; align-items: center; min-height: 18px; }
+.cf-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cf-arrow); display: inline-block; }
+/* A reference is an alias: hollow dot. A dangling pointer: brick dot. */
+.cf-dot.cf-ref { background: var(--cf-bg); box-shadow: inset 0 0 0 2px var(--cf-arrow); }
+.cf-dot.cf-dot-dangling { background: var(--cf-danger); margin-left: 6px; }
+.cf-arrow-dangling { stroke: var(--cf-danger); stroke-dasharray: 5 4; }
+/* A weak_ptr: a dashed arrow in the usual colour (it can reach the object, but doesn't own it). */
+.cf-arrow-weak { stroke-dasharray: 6 4; }
+.cf-key .cf-dash { width: 22px; height: 0; border-top: 2px dashed var(--cf-arrow); display: inline-block; }
+/* A changed pointer waits, head included, until the boxes stop moving. */
+.cf-arrow-pending { visibility: hidden; }
+.cf-arrow-head { fill: none; stroke: none; }
+.cf-literal { background: var(--cf-frame-bg); border-color: var(--cf-line-strong); }
+/* Only the element that changed is outlined, not the whole array or struct. */
+.cf-changed-cell { background: var(--cf-changed) !important; outline: 2px solid var(--cf-changed-line); outline-offset: -2px; }
+.cf-changed-cell .cf-val { font-weight: 700; }
+.cf-empty { color: var(--cf-muted); font-size: 14px; margin: 0; }
+
+@media (prefers-reduced-motion: no-preference) {
+  .cf-changed td, .cf-object.cf-changed { transition: background-color 600ms cubic-bezier(0.16, 1, 0.3, 1); }
+  /* pathLength="1" on every arrow, so the dash covers arrows of any length. */
+  .cf-arrow-new { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cf-draw 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+  @keyframes cf-draw { to { stroke-dashoffset: 0; } }
+  /* The head lands with the line: the draw is front-loaded, nearly done by 40%. */
+  .cf-arrow-head.cf-arrow-new { stroke-dasharray: none; animation: cf-head-in 420ms linear both; }
+  /* Dashed arrows can't draw in with a dash: they fade in with their heads. */
+  .cf-arrow-weak.cf-arrow-new { stroke-dasharray: 6 4; stroke-dashoffset: 0; animation: cf-head-in 420ms linear both; }
+  @keyframes cf-head-in { 0%, 38% { opacity: 0; } 55% { opacity: 1; } }
+  /* A new object grows in from its slot; the arrow then draws to it. */
+  .cf-object.cf-new { animation: cf-appear 360ms cubic-bezier(0.16, 1, 0.3, 1) both; }
+  @keyframes cf-appear { from { opacity: 0; transform: translateY(-6px) scale(0.96); outline-color: transparent; } }
+  /* A freed object fades back and shrinks slightly: it is going away. */
+  .cf-object.cf-freed { animation: cf-release 420ms cubic-bezier(0.16, 1, 0.3, 1) both; }
+  @keyframes cf-release { from { background: var(--cf-object-bg); border-color: var(--cf-object-line); transform: scale(1.02); } }
+  /* The leaked badge pops in on the step the last pointer left. */
+  .cf-just-leaked .cf-badge { animation: cf-pop 360ms cubic-bezier(0.16, 1, 0.3, 1) both; }
+  @keyframes cf-pop { from { transform: scale(0.6); opacity: 0; } }
+}
+`;
+// ../renderer/src/visualizer.ts
+var BREAK = /(?:#|\/\/)\s*break\s*$/;
+/** Lines ending in a `#break` (or `// break`) comment (1-based): breakpoints written into the program. */
+var commentBreakpoints = (source) => source.split("\n").flatMap((line, i) => BREAK.test(line) ? [i + 1] : []);
+var endedRun = (step) => step.event === "exception" || step.event === "limit";
+var TEMPLATE = `
+<div class="cf-root">
+  <div class="cf-left">
+    <div class="cf-head">
+      <div class="cf-code" role="region" aria-label="Program code" tabindex="0"><ol></ol></div>
+      <button class="cf-link cf-code-toggle" type="button" data-action="toggle-code">Show all code</button>
+      <div class="cf-legend">
+        <span class="cf-l-focus">${icons.focusLine} <span class="cf-l-focus-text">line that just ran</span></span>
+        <span class="cf-l-next">${icons.nextLine} next line to run</span>
+        <span class="cf-l-bp" hidden><span class="cf-bp-dot"></span> breakpoint: Next and Back stop here <button class="cf-link" type="button" data-action="clear-breakpoints">Clear</button></span>
+      </div>
+      <p class="cf-caption" aria-live="polite"></p>
+    </div>
+    <div class="cf-controls" role="group" aria-label="Step through the program">
+      <div class="cf-buttons">
+        <button class="cf-btn" data-go="first" aria-label="First step" title="First step (Home)">${icons.first}</button>
+        <button class="cf-btn" data-go="back" aria-label="Previous step" title="Previous step (←)">${icons.back}</button>
+        <button class="cf-btn cf-primary" data-go="next" title="Next step (→)">Next ${icons.next}</button>
+        <button class="cf-btn" data-go="last" aria-label="Last step" title="Last step (End)">${icons.last}</button>
+      </div>
+      <span class="cf-count" aria-hidden="true"></span>
+      <input class="cf-slider" type="range" min="0" value="0" aria-label="Step">
+    </div>
+    <div class="cf-input" hidden>
+      <h3 id="cf-in-label">Input</h3>
+      <pre aria-labelledby="cf-in-label"><span class="cf-in-read"></span><span class="cf-in-rest"></span></pre>
+    </div>
+    <div class="cf-files" hidden>
+      <div class="cf-files-head">
+        <h3 id="cf-files-label">Files</h3>
+        <button class="cf-link" type="button" data-action="copy-file">Copy</button>
+      </div>
+      <div class="cf-file-tabs" role="tablist" aria-labelledby="cf-files-label"></div>
+      <pre class="cf-file-text" role="tabpanel" tabindex="0"></pre>
+    </div>
+  </div>
+  <div class="cf-right">
+    <div class="cf-output"><h3 id="cf-out-label">Output</h3><pre aria-labelledby="cf-out-label"></pre>
+      <form class="cf-prompt" hidden>
+        <input type="text" class="cf-prompt-input" aria-label="Input for the program" autocomplete="off" spellcheck="false">
+        <button class="cf-btn cf-primary" type="submit">Enter</button>
+        <button class="cf-link" type="button" data-action="end-input" title="Let the program find that there is no more input (end of file)">No more input</button>
+      </form>
+    </div>
+    <div class="cf-memory">
+      <div><h3 class="cf-frames-title">Frames</h3><div class="cf-frames-slot"></div></div>
+      <div><h3 class="cf-objects-title">Objects</h3><div class="cf-objects-slot"></div></div>
+      <svg class="cf-arrows" aria-hidden="true"></svg>
+    </div>
+    <label class="cf-toggle" hidden><input type="checkbox" data-action="cumulative"> Keep finished calls on screen</label>
+    <label class="cf-toggle" hidden><input type="checkbox" data-action="grids"> Draw 2D arrays as grids</label>
+    <p class="cf-key" aria-hidden="true">
+      <span class="cf-k-ptr"><span class="cf-dot"></span> pointer: holds an address</span>
+      <span class="cf-k-ref"><span class="cf-dot cf-ref"></span> reference: another name for an existing variable</span>
+      <span class="cf-k-dangling"><span class="cf-dot cf-dot-dangling"></span> dangling: still holds the address of freed memory</span>
+      <span class="cf-k-weak"><span class="cf-dash"></span> weak_ptr: can reach the object, but doesn't own it</span>
+    </p>
+  </div>
+</div>`;
+function mountVisualizer(host, options) {
+	const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+	const style = document.createElement("style");
+	style.textContent = styles;
+	shadow.replaceChildren(style);
+	shadow.append(document.createRange().createContextualFragment(TEMPLATE));
+	const $ = (sel) => shadow.querySelector(sel);
+	const code = $(".cf-code ol");
+	const slider = $(".cf-slider");
+	const count = $(".cf-count");
+	const output = $(".cf-output pre");
+	const prompt = $(".cf-prompt");
+	const promptInput = $(".cf-prompt-input");
+	const inputBox = $(".cf-input");
+	const inputRead = $(".cf-in-read");
+	const inputRest = $(".cf-in-rest");
+	const filesBox = $(".cf-files");
+	const fileTabs = $(".cf-file-tabs");
+	const fileText = $(".cf-file-text");
+	const copyFile = $("[data-action=copy-file]");
+	let openFile;
+	const caption = $(".cf-caption");
+	const legendFocus = $(".cf-l-focus-text");
+	const legendNext = $(".cf-l-next");
+	const memory = $(".cf-memory");
+	const framesSlot = $(".cf-frames-slot");
+	const objectsSlot = $(".cf-objects-slot");
+	const svg = $(".cf-arrows");
+	const key = $(".cf-key");
+	const cumulativeBox = $("[data-action=cumulative]");
+	const gridsBox = $("[data-action=grids]");
+	const buttons = Object.fromEntries([...shadow.querySelectorAll("[data-go]")].map((b) => [b.dataset.go, b]));
+	let trace = hideVariables(options.trace, hiddenPatterns(options.source));
+	let layouts = computeHeapLayouts(trace.steps);
+	let showAllFrames = false;
+	let cumulative = !!options.cumulative;
+	cumulativeBox.checked = cumulative;
+	const hasCalls = () => trace.steps.some((s, i) => i > 0 && s.frames.length < trace.steps[i - 1].frames.length);
+	let grids = options.grids !== false;
+	gridsBox.checked = grids;
+	const syncToggle = () => {
+		cumulativeBox.parentElement.hidden = !hasCalls();
+		gridsBox.parentElement.hidden = !trace.steps.some((s) => hasGrid(s, trace.language));
+	};
+	/** Calls that finished by step `upTo`, as they were when they returned. */
+	const finishedUpTo = (upTo) => {
+		const order = [];
+		const frames = /* @__PURE__ */ new Map();
+		for (let i = 0; i <= upTo; i++) for (const f of trace.steps[i].frames) {
+			if (!frames.has(f.id)) order.push(f.id);
+			frames.set(f.id, f);
+		}
+		for (const f of [...trace.steps[upTo].frames, ...trace.steps[upTo].paused ?? []]) frames.delete(f.id);
+		return {
+			frames,
+			order
+		};
+	};
+	const codeBox = $(".cf-code");
+	const root = $(".cf-root");
+	root.classList.toggle("cf-codeless", options.showCode === false);
+	const framesTitle = $(".cf-frames-title");
+	const objectsTitle = $(".cf-objects-title");
+	const setTitles = () => {
+		const manual = LANGUAGES[trace.language].manualMemory;
+		framesTitle.textContent = manual ? "Stack" : "Frames";
+		objectsTitle.textContent = manual ? "Heap" : "Objects";
+	};
+	setTitles();
+	/** Scrolls the code panel (never the page) so `li` is in view. */
+	const revealLine = (li, center = false) => {
+		if (!(li instanceof HTMLElement)) return;
+		const top = li.getBoundingClientRect().top - codeBox.getBoundingClientRect().top + codeBox.scrollTop;
+		const bottom = top + li.offsetHeight;
+		const view = codeBox.clientHeight;
+		if (center) codeBox.scrollTop = top - (view - li.offsetHeight) / 2;
+		else if (top < codeBox.scrollTop) codeBox.scrollTop = top - 8;
+		else if (bottom > codeBox.scrollTop + view) codeBox.scrollTop = bottom - view + 8;
+	};
+	/** Bring the next line into view, then make sure the highlighted one is too (the compact phone view centers it). */
+	const revealCurrent = () => {
+		const compact = codeBox.clientHeight > 0 && codeBox.clientHeight < 200 && !codeBox.classList.contains("cf-expanded");
+		revealLine(code.querySelector("li.cf-next"), compact);
+		revealLine(code.querySelector("li.cf-focus"), compact);
+	};
+	const codeResize = new ResizeObserver(() => revealCurrent());
+	codeResize.observe(codeBox);
+	codeResize.observe(code);
+	let current = 0;
+	let changed = /* @__PURE__ */ new Set();
+	let shown = false;
+	const head = $(".cf-head");
+	const controls = $(".cf-controls");
+	/**
+	* Phones pin the code and caption to the top and the controls to the
+	* bottom: scroll the page just enough that what this step changed shows
+	* in the space between them.
+	*/
+	const followChange = () => {
+		if (getComputedStyle(head).position !== "sticky") return;
+		const target = memory.querySelector(".cf-changed-cell, .cf-changed, .cf-object.cf-new");
+		if (!target) return;
+		const t = target.getBoundingClientRect();
+		const top = head.getBoundingClientRect().bottom + 12;
+		const bottom = controls.getBoundingClientRect().top - 12;
+		const by = t.top < top ? t.top - top : t.bottom > bottom ? Math.min(t.bottom - bottom, t.top - top) : 0;
+		if (Math.abs(by) > 1) window.scrollBy({
+			top: by,
+			behavior: prefersReducedMotion() ? "auto" : "smooth"
+		});
+	};
+	let sourceLines = [];
+	let breakpoints = new Set(options.breakpoints ?? []);
+	const legendBp = $(".cf-l-bp");
+	const showBreakpoints = () => {
+		[...code.children].forEach((li, i) => {
+			const on = breakpoints.has(i + 1);
+			li.classList.toggle("cf-bp", on);
+			li.querySelector(".cf-lineno")?.setAttribute("aria-pressed", String(on));
+		});
+		legendBp.hidden = breakpoints.size === 0;
+		buttons.next.title = breakpoints.size ? "Next breakpoint (→; Shift+→ for one step)" : "Next step (→)";
+		buttons.back.title = breakpoints.size ? "Previous breakpoint (←; Shift+← for one step)" : "Previous step (←)";
+	};
+	/** The step `dir` away from the current one, or the next breakpoint stop that way. */
+	const stepTo = (dir, single = false) => {
+		if (single || !breakpoints.size) return current + dir;
+		for (let i = current + dir; i >= 0 && i < trace.steps.length; i += dir) {
+			const s = trace.steps[i];
+			if (s.event === "step" && breakpoints.has(s.line)) return i;
+		}
+		return dir > 0 ? trace.steps.length - 1 : 0;
+	};
+	const renderCode = (source) => {
+		sourceLines = source.split("\n");
+		const count = source.replace(/\n$/, "").split("\n").length;
+		breakpoints = new Set([...breakpoints].filter((n) => n <= count));
+		for (const n of commentBreakpoints(source)) breakpoints.add(n);
+		code.replaceChildren(...source.replace(/\n$/, "").split("\n").map((line, i) => {
+			const li = document.createElement("li");
+			li.innerHTML = `<span class="cf-marker"></span><button class="cf-lineno" type="button" tabindex="-1" aria-pressed="false" aria-label="Breakpoint on line ${i + 1}" title="Click to stop here when stepping">${i + 1}</button><code>${highlightLine(line, trace.language) || " "}</code>`;
+			const indent = (line.match(/^[ \t]*/)?.[0] ?? "").replace(/\t/g, "    ").length;
+			li.style.setProperty("--cf-hang", `${indent + 2}ch`);
+			return li;
+		}));
+		showBreakpoints();
+	};
+	let drawnAt;
+	const redrawArrows = () => drawArrows(memory, svg, changed, drawnAt);
+	let stopFollowing = () => {};
+	let framesWidth = 0;
+	let namesWidth = 0;
+	let heapWidth = 0;
+	const MAX_OBJECT = 360;
+	const measureFramesWidth = () => {
+		const probe = document.createElement("div");
+		probe.className = "cf-measure";
+		probe.style.setProperty("--cf-names-width", "auto");
+		memory.firstElementChild.append(probe);
+		const n = trace.steps.length;
+		const stride = Math.max(1, Math.ceil(n / 300));
+		const heapProbe = document.createElement("div");
+		heapProbe.className = "cf-measure";
+		memory.firstElementChild.append(heapProbe);
+		let widest = 0;
+		heapWidth = 0;
+		for (let i = 0; i < n; i += stride) {
+			const s = trace.steps[i];
+			const { frames, objects } = renderMemory(document, s, trace.language, /* @__PURE__ */ new Set(), trace.steps[i - 1], {
+				layout: layouts[i],
+				showAllFrames,
+				grids,
+				...cumulative ? { finished: finishedUpTo(i) } : {}
+			});
+			probe.replaceChildren(frames);
+			widest = Math.max(widest, probe.getBoundingClientRect().width);
+			for (const th of probe.querySelectorAll(".cf-vars > tr > th, .cf-vars > tbody > tr > th")) namesWidth = Math.max(namesWidth, th.getBoundingClientRect().width);
+			heapProbe.replaceChildren(objects);
+			for (const row of heapProbe.querySelectorAll(".cf-heap-row")) {
+				const boxes = [...row.children].filter((c) => c instanceof HTMLElement && c.offsetParent !== null);
+				if (boxes.length < 2) continue;
+				const gap = parseFloat(getComputedStyle(row).columnGap) || 0;
+				const width = boxes.reduce((sum, b) => sum + Math.min(MAX_OBJECT, b.getBoundingClientRect().width), gap * (boxes.length - 1));
+				heapWidth = Math.max(heapWidth, width);
+			}
+		}
+		probe.remove();
+		heapProbe.remove();
+		framesWidth = widest;
+	};
+	const holdFramesWidth = () => {
+		const col = framesSlot.parentElement;
+		if (!framesWidth) {
+			namesWidth = 0;
+			measureFramesWidth();
+		}
+		col.style.minWidth = `min(${Math.ceil(framesWidth)}px, 62cqi)`;
+		col.style.setProperty("--cf-names-width", `${Math.ceil(namesWidth)}px`);
+		const memoryStyle = getComputedStyle(memory);
+		const extra = (parseFloat(memoryStyle.columnGap) || 0) + (parseFloat(memoryStyle.paddingLeft) || 0) + (parseFloat(memoryStyle.paddingRight) || 0);
+		root.style.setProperty("--cf-diagram-min", heapWidth ? `${Math.ceil(framesWidth + heapWidth + extra)}px` : "0px");
+	};
+	let captionWidth = 0;
+	const MAX_CAPTION_LINES = 4;
+	const holdCaptionHeight = () => {
+		const width = caption.getBoundingClientRect().width;
+		if (!width || Math.abs(width - captionWidth) < 1) return;
+		captionWidth = width;
+		const texts = trace.steps.map((s, i) => ({
+			text: describeStep(trace, i, sourceLines),
+			error: endedRun(s)
+		})).sort((a, b) => b.text.length - a.text.length).slice(0, 8);
+		const probe = document.createElement("p");
+		probe.setAttribute("aria-hidden", "true");
+		probe.style.cssText = `position: absolute; visibility: hidden; pointer-events: none; min-height: 0; width: ${width}px`;
+		caption.after(probe);
+		let tallest = 0;
+		for (const { text, error } of texts) {
+			probe.className = error ? "cf-caption cf-error" : "cf-caption";
+			probe.textContent = text;
+			tallest = Math.max(tallest, probe.getBoundingClientRect().height);
+		}
+		const style = getComputedStyle(probe);
+		const cap = MAX_CAPTION_LINES * parseFloat(style.lineHeight) + parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+		probe.remove();
+		caption.style.setProperty("--cf-caption-min", tallest ? `${Math.ceil(Math.min(tallest, cap || tallest))}px` : "0px");
+	};
+	const captionResize = new ResizeObserver(() => holdCaptionHeight());
+	captionResize.observe(caption);
+	const render = () => {
+		const step = trace.steps[current];
+		const n = trace.steps.length;
+		if (!step) return;
+		const prev = trace.steps[current - 1];
+		const markerTop = (cls) => code.querySelector(`li.${cls} .cf-marker svg`)?.getBoundingClientRect().top;
+		const slide = !prefersReducedMotion();
+		const was = {
+			"cf-focus": markerTop("cf-focus"),
+			"cf-next": markerTop("cf-next")
+		};
+		for (const li of code.querySelectorAll("li.cf-focus, li.cf-next")) {
+			li.classList.remove("cf-focus", "cf-next", "cf-crash");
+			li.removeAttribute("aria-current");
+			li.querySelector(".cf-marker").innerHTML = "";
+		}
+		const mark = (line, cls, icon) => {
+			const li = code.children[line - 1];
+			if (!li) return;
+			li.classList.add(...cls);
+			li.querySelector(".cf-marker").innerHTML = icon;
+			return li;
+		};
+		const crashed = endedRun(step);
+		const returnsAfterCallee = step.event === "return" && !!prev && prev.frames.at(-1)?.id !== step.frames.at(-1)?.id;
+		const focusLine = crashed ? step.line : !prev ? null : step.event === "resume" || returnsAfterCallee ? step.line : step.resumedLine ?? prev.line;
+		const nextLine = !crashed && step.line !== focusLine ? step.line : null;
+		if (nextLine !== null) mark(nextLine, ["cf-next"], icons.nextLine);
+		options.onLines?.({
+			focus: focusLine,
+			next: nextLine,
+			crashed
+		});
+		((focusLine === null ? void 0 : mark(focusLine, crashed ? ["cf-focus", "cf-crash"] : ["cf-focus"], icons.focusLine)) ?? code.querySelector("li.cf-next"))?.setAttribute("aria-current", "step");
+		legendFocus.textContent = step.event === "limit" ? "line where it was stopped" : crashed ? "line that crashed" : "line that just ran";
+		legendFocus.parentElement.classList.toggle("cf-l-crash", crashed);
+		legendFocus.parentElement.hidden = focusLine === null;
+		legendNext.hidden = !code.querySelector("li.cf-next");
+		revealCurrent();
+		if (slide) for (const [cls, top] of Object.entries(was)) {
+			const icon = code.querySelector(`li.${cls} .cf-marker svg`);
+			if (top === void 0 || !icon) continue;
+			const dy = top - icon.getBoundingClientRect().top;
+			if (Math.abs(dy) > .5) icon.animate([{ transform: `translateY(${dy}px)` }, { transform: "none" }], {
+				duration: 240,
+				easing: EASE
+			});
+		}
+		const compact = codeBox.clientHeight > 0 && codeBox.clientHeight < 200 && !codeBox.classList.contains("cf-expanded");
+		const nextLi = code.querySelector("li.cf-next");
+		if (compact && nextLi) {
+			const nextTop = nextLi.getBoundingClientRect().top - codeBox.getBoundingClientRect().top;
+			if (!(nextTop >= 0 && nextTop + nextLi.offsetHeight <= codeBox.clientHeight)) legendNext.hidden = true;
+		}
+		const animate = memory.isConnected && !prefersReducedMotion() && framesSlot.childElementCount > 0;
+		const before = animate ? snapshot(memory) : null;
+		changed = changedKeys(prev, step);
+		const { frames, objects, hasStatic } = renderMemory(document, step, trace.language, changed, prev, {
+			layout: layouts[current],
+			showAllFrames,
+			grids,
+			...cumulative ? { finished: finishedUpTo(current) } : {}
+		});
+		framesSlot.replaceChildren(frames);
+		objectsSlot.replaceChildren(objects);
+		framesTitle.hidden = hasStatic;
+		const hasRef = !!memory.querySelector(".cf-dot.cf-ref");
+		const hasDangling = !!memory.querySelector(".cf-dot-dangling");
+		const hasWeak = !!memory.querySelector(".cf-dot.cf-weak");
+		$(".cf-k-ptr").hidden = !hasRef;
+		$(".cf-k-ref").hidden = !hasRef;
+		$(".cf-k-dangling").hidden = !hasDangling;
+		$(".cf-k-weak").hidden = !hasWeak;
+		key.hidden = !hasRef && !hasDangling && !hasWeak;
+		holdFramesWidth();
+		if (shown) followChange();
+		shown = true;
+		const text = describeStep(trace, current, sourceLines);
+		if (animate && caption.textContent !== text) caption.animate([{ opacity: .35 }, { opacity: 1 }], {
+			duration: 200,
+			easing: "ease-out"
+		});
+		caption.textContent = text;
+		caption.classList.toggle("cf-error", crashed);
+		const waiting = !!trace.awaitingInput && current === n - 1;
+		output.textContent = waiting ? trace.stdout : trace.stdout.slice(0, step.stdoutLength);
+		if (options.hideEmptyOutput) output.parentElement.hidden = !output.textContent;
+		const asking = waiting && !!options.onInput;
+		if (prompt.hidden === asking) {
+			prompt.hidden = !asking;
+			for (const c of prompt.elements) c.disabled = false;
+			if (asking) promptInput.focus({ preventScroll: true });
+		}
+		const stdin = trace.stdin ?? "";
+		inputBox.hidden = !stdin && !trace.steps.some((s) => s.inputEnded);
+		const consumed = step.stdinConsumed ?? 0;
+		inputRead.textContent = stdin.slice(0, consumed);
+		inputRest.textContent = stdin.slice(consumed);
+		inputRead.title = "Already read by the program";
+		inputRest.title = "Not read yet";
+		if (!stdin) inputRest.textContent = "(no input given)";
+		output.scrollTop = output.scrollHeight;
+		showFiles();
+		slider.max = String(n - 1);
+		slider.value = String(current);
+		slider.setAttribute("aria-valuetext", `Step ${current + 1} of ${n}, line ${step.line}`);
+		count.textContent = `Step ${current + 1} of ${n}`;
+		buttons.first.disabled = buttons.back.disabled = current === 0;
+		buttons.next.disabled = buttons.last.disabled = current === n - 1;
+		stopFollowing();
+		if (before) {
+			animateLayout(memory, before, memory);
+			drawnAt = void 0;
+			stopFollowing = followFor(320, redrawArrows, () => {
+				drawnAt = performance.now();
+				redrawArrows();
+			});
+		} else {
+			drawnAt = performance.now();
+			requestAnimationFrame(redrawArrows);
+		}
+		options.onStep?.(current);
+	};
+	const go = (i) => {
+		const clamped = Math.max(0, Math.min(trace.steps.length - 1, i));
+		if (clamped === current && code.children.length) return render();
+		current = clamped;
+		render();
+	};
+	const onClick = (e) => {
+		const action = e.target.closest("[data-action]")?.dataset.action;
+		if (action === "cumulative") {
+			cumulative = cumulativeBox.checked;
+			framesWidth = 0;
+			options.onCumulative?.(cumulative);
+			return render();
+		}
+		if (action === "grids") {
+			grids = gridsBox.checked;
+			framesWidth = 0;
+			options.onGrids?.(grids);
+			return render();
+		}
+		if (action === "show-frames") {
+			showAllFrames = true;
+			framesWidth = 0;
+			return render();
+		}
+		if (action === "end-input") {
+			sendInput(null);
+			return;
+		}
+		if (action === "copy-file") {
+			const text = fileText.textContent ?? "";
+			const done = (label) => {
+				copyFile.textContent = label;
+				setTimeout(() => copyFile.textContent = "Copy", 1500);
+			};
+			const select = () => {
+				getSelection()?.selectAllChildren(fileText);
+				done("Press Ctrl+C");
+			};
+			if (navigator.clipboard) navigator.clipboard.writeText(text).then(() => done("Copied"), select);
+			else select();
+			return;
+		}
+		const fileTab = e.target.closest(".cf-file-tab");
+		if (fileTab) return openTab(fileTab.dataset.file);
+		if (action === "clear-breakpoints") {
+			breakpoints.clear();
+			showBreakpoints();
+			options.onBreakpoints?.([]);
+			return;
+		}
+		const lineno = e.target.closest(".cf-lineno");
+		if (lineno) {
+			const line = Number(lineno.textContent);
+			if (!breakpoints.delete(line)) breakpoints.add(line);
+			showBreakpoints();
+			options.onBreakpoints?.([...breakpoints].sort((a, b) => a - b));
+			return;
+		}
+		if (action === "toggle-code") {
+			const expanded = codeBox.classList.toggle("cf-expanded");
+			e.target.textContent = expanded ? "Show less code" : "Show all code";
+			return;
+		}
+		const which = e.target.closest("[data-go]")?.dataset.go;
+		if (which === "first") go(0);
+		else if (which === "back") go(stepTo(-1, e.shiftKey));
+		else if (which === "next") go(stepTo(1, e.shiftKey));
+		else if (which === "last") go(trace.steps.length - 1);
+	};
+	/**
+	* Files: a tab per file, showing the open one's text at this step with what
+	* this step wrote to it marked. A step that reads or writes a file opens its
+	* tab, so the file in the caption is the one on screen.
+	*/
+	function showFiles(follow = true) {
+		const any = Object.keys(trace.files ?? {}).length > 0 || trace.steps.some((s) => s.files);
+		filesBox.hidden = !any;
+		if (!any) return;
+		const files = filesAt(trace, current);
+		const names = Object.keys(files);
+		const changed = new Map(fileChanges(trace, current).map((c) => [c.name, c]));
+		const touched = [...changed.keys(), ...(trace.steps[current]?.fileEvents ?? []).map((e) => e.file)].filter((n) => n in files);
+		if (follow && touched.length) openFile = touched[0];
+		if (!openFile || !(openFile in files)) openFile = names[0];
+		fileTabs.replaceChildren(...names.map((name) => {
+			const tab = document.createElement("button");
+			tab.type = "button";
+			tab.className = "cf-file-tab";
+			tab.setAttribute("role", "tab");
+			tab.dataset.file = name;
+			tab.textContent = name;
+			const open = name === openFile;
+			tab.setAttribute("aria-selected", String(open));
+			tab.tabIndex = open ? 0 : -1;
+			if (changed.has(name)) {
+				tab.classList.add("cf-file-changed");
+				tab.title = "Changed on this step";
+			}
+			return tab;
+		}));
+		fileTabs.hidden = names.length < 2 && !changed.size;
+		const name = openFile;
+		fileText.setAttribute("aria-label", name ?? "");
+		copyFile.setAttribute("aria-label", `Copy ${name}`);
+		const text = name ? files[name] : "";
+		const fresh = name && changed.get(name)?.added || "";
+		fileText.replaceChildren(text.slice(0, text.length - fresh.length));
+		if (fresh) {
+			const mark = document.createElement("mark");
+			mark.textContent = fresh;
+			mark.title = "Written on this step";
+			fileText.append(mark);
+		}
+		$("#cf-files-label").textContent = names.length === 1 && fileTabs.hidden ? `File: ${names[0]}` : "Files";
+	}
+	/** Opens file `name`'s tab (the learner's choice stays until a step touches another file). */
+	const openTab = (name, focus = false) => {
+		openFile = name;
+		showFiles(false);
+		if (focus) fileTabs.querySelector(`[data-file="${CSS.escape(name)}"]`)?.focus();
+	};
+	/** Hands a typed line (or the end of input) to the host, once. */
+	const sendInput = (line) => {
+		if (prompt.hidden || promptInput.disabled) return;
+		for (const c of prompt.elements) c.disabled = true;
+		options.onInput?.(line);
+	};
+	const onSubmit = (e) => {
+		e.preventDefault();
+		sendInput(promptInput.value);
+		promptInput.value = "";
+	};
+	const onKey = (e) => {
+		if (e.target === slider || e.target === promptInput || e.altKey || e.ctrlKey || e.metaKey) return;
+		const tab = e.target.closest?.(".cf-file-tab");
+		if (tab && [
+			"ArrowLeft",
+			"ArrowRight",
+			"Home",
+			"End"
+		].includes(e.key)) {
+			const tabs = [...fileTabs.querySelectorAll(".cf-file-tab")];
+			const at = tabs.indexOf(tab);
+			const to = e.key === "Home" ? 0 : e.key === "End" ? tabs.length - 1 : (at + (e.key === "ArrowRight" ? 1 : -1) + tabs.length) % tabs.length;
+			e.preventDefault();
+			openTab(tabs[to].dataset.file, true);
+			return;
+		}
+		const action = {
+			ArrowRight: () => go(stepTo(1, e.shiftKey)),
+			ArrowLeft: () => go(stepTo(-1, e.shiftKey)),
+			Home: () => go(0),
+			End: () => go(trace.steps.length - 1)
+		}[e.key];
+		if (action) {
+			e.preventDefault();
+			action();
+		}
+	};
+	const onSlide = () => go(Number(slider.value));
+	shadow.addEventListener("click", onClick);
+	shadow.addEventListener("keydown", onKey);
+	slider.addEventListener("input", onSlide);
+	prompt.addEventListener("submit", onSubmit);
+	memory.addEventListener("scroll", redrawArrows, { passive: true });
+	const resize = new ResizeObserver(() => {
+		if (!framesWidth && memory.offsetParent) holdFramesWidth();
+		requestAnimationFrame(redrawArrows);
+	});
+	resize.observe(memory);
+	document.fonts?.ready.then(() => {
+		captionWidth = 0;
+		holdCaptionHeight();
+		framesWidth = 0;
+		holdFramesWidth();
+		redrawArrows();
+	});
+	renderCode(options.source);
+	syncToggle();
+	current = Math.max(0, Math.min(trace.steps.length - 1, options.step ?? 0));
+	render();
+	return {
+		get step() {
+			return current;
+		},
+		get length() {
+			return trace.steps.length;
+		},
+		go,
+		setBreakpoints(lines) {
+			breakpoints = new Set(lines);
+			showBreakpoints();
+		},
+		setCumulative(on) {
+			cumulative = cumulativeBox.checked = on;
+			framesWidth = 0;
+			render();
+		},
+		setGrids(on) {
+			grids = gridsBox.checked = on;
+			framesWidth = 0;
+			render();
+		},
+		setTrace(next, source, step = 0) {
+			trace = hideVariables(next, hiddenPatterns(source));
+			framesWidth = 0;
+			layouts = computeHeapLayouts(next.steps);
+			showAllFrames = false;
+			setTitles();
+			syncToggle();
+			renderCode(source);
+			captionWidth = 0;
+			holdCaptionHeight();
+			current = Math.max(0, Math.min(next.steps.length - 1, step));
+			prompt.hidden = true;
+			render();
+		},
+		destroy() {
+			stopFollowing();
+			resize.disconnect();
+			codeResize.disconnect();
+			captionResize.disconnect();
+			shadow.removeEventListener("click", onClick);
+			shadow.removeEventListener("keydown", onKey);
+			prompt.removeEventListener("submit", onSubmit);
+			shadow.replaceChildren();
+		}
+	};
+}
+// ../renderer/src/compile-errors.ts
+var C_HEADERS = {};
+for (const [header, names] of Object.entries({
+	"stdio.h": "printf scanf puts putchar getchar gets fgets fopen fclose fprintf sprintf snprintf sscanf perror",
+	"stdlib.h": "malloc calloc realloc free exit atoi atof atol strtol rand srand abs qsort",
+	"string.h": "strlen strcpy strncpy strcmp strncmp strcat strncat strchr strstr strdup memcpy memmove memset memcmp",
+	"math.h": "sqrt pow fabs floor ceil round sin cos tan log log10 exp fmod",
+	"ctype.h": "isdigit isalpha isalnum isspace isupper islower toupper tolower",
+	"stdbool.h": "bool true false",
+	"stddef.h": "NULL size_t",
+	"time.h": "time clock",
+	"assert.h": "assert"
+})) for (const name of names.split(" ")) C_HEADERS[name] = header;
+new Set("ArrayList List LinkedList HashMap Map TreeMap HashSet Set TreeSet Scanner Arrays Collections Random Stack Queue Deque ArrayDeque Iterator".split(" "));
+// src/index.ts
+/** Where the live iframe points by default: the site codeflip.js came from, or
+* codeflip.dev when this module was bundled into someone else's site from npm. */
+var scriptOrigin = (() => {
+	try {
+		const url = new URL(import.meta.url);
+		return url.pathname.endsWith("/codeflip.js") ? url.origin : "https://codeflip.dev";
+	} catch {
+		return "https://codeflip.dev";
+	}
+})();
+var STYLE = `
+:host { display: block; }
+:host([hidden]) { display: none; }
+iframe { display: block; width: 100%; height: 480px; border: 1px solid #e4e7eb; border-radius: 8px; background: #fff; }
+.error { margin: 0; padding: 12px 16px; border-radius: 8px; background: #fef3f2; color: #b42318; font: 600 15px/1.5 system-ui, sans-serif; }
+`;
+var CodeFlipElement = class extends HTMLElement {
+	static observedAttributes = [
+		"lang",
+		"stdin",
+		"files",
+		"cumulative",
+		"grid",
+		"example",
+		"link",
+		"breakpoints",
+		"host",
+		"trace-src"
+	];
+	#iframe = null;
+	#viz = null;
+	#step = 0;
+	#connected = false;
+	#onMessage = (e) => this.#message(e);
+	#queued = false;
+	#observer = new MutationObserver(() => this.#schedule());
+	get step() {
+		return this.#viz?.step ?? this.#step;
+	}
+	set step(step) {
+		this.#step = step;
+		if (this.#viz) this.#viz.go(step);
+		else this.#iframe?.contentWindow?.postMessage({
+			type: "code-flip:go",
+			step
+		}, "*");
+	}
+	/** The program: a `<script type="text/plain">` child, else the text content. */
+	/** The `breakpoints="3,7"` attribute as line numbers. */
+	#breakpoints() {
+		return (this.getAttribute("breakpoints") ?? "").split(/[,\s]+/).map(Number).filter((n) => Number.isInteger(n) && n > 0);
+	}
+	get source() {
+		return dedent(this.querySelector("script[type='text/plain']")?.textContent ?? this.textContent ?? "");
+	}
+	connectedCallback() {
+		this.#connected = true;
+		this.#step = this.getAttribute("step") === "end" ? Number.POSITIVE_INFINITY : Math.max(0, (Number(this.getAttribute("step")) || 1) - 1);
+		window.addEventListener("message", this.#onMessage);
+		this.#observer.observe(this, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+		if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", () => this.#schedule(), { once: true });
+		else this.#schedule();
+	}
+	disconnectedCallback() {
+		this.#connected = false;
+		this.#observer.disconnect();
+		window.removeEventListener("message", this.#onMessage);
+		this.#viz?.destroy();
+		this.#viz = null;
+		this.#iframe = null;
+	}
+	attributeChangedCallback() {
+		if (this.#connected) this.#schedule();
+	}
+	/** Render once per batch of changes. */
+	#schedule() {
+		if (this.#queued) return;
+		this.#queued = true;
+		queueMicrotask(() => {
+			this.#queued = false;
+			if (this.#connected && document.readyState !== "loading") this.#render();
+		});
+	}
+	#root() {
+		const root = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+		root.replaceChildren(Object.assign(document.createElement("style"), { textContent: STYLE }));
+		return root;
+	}
+	#render() {
+		this.#viz?.destroy();
+		this.#viz = null;
+		const traceSrc = this.getAttribute("trace-src");
+		if (traceSrc) this.#renderTrace(traceSrc);
+		else this.#renderIframe();
+	}
+	#renderIframe() {
+		const host = (this.getAttribute("host") ?? scriptOrigin).replace(/\/$/, "");
+		const params = new URLSearchParams();
+		const example = this.getAttribute("example");
+		const link = this.getAttribute("link");
+		if (link || example) {
+			if (example && !link) params.set("example", example);
+		} else {
+			params.set("code", this.source);
+			params.set("lang", this.getAttribute("lang") ?? "c");
+		}
+		const stdin = this.getAttribute("stdin");
+		if (stdin) params.set("stdin", stdin);
+		const files = this.getAttribute("files");
+		if (files !== null) {
+			if (isFilesJson(files)) params.set("files", files);
+			else console.warn("<code-flip>: files must be a JSON object of file name to text, like files='{\"in.txt\": \"1 2\\n\"}'");
+		}
+		if (this.#step) params.set("step", this.#step === Number.POSITIVE_INFINITY ? "end" : String(this.#step + 1));
+		if (this.hasAttribute("cumulative") && this.getAttribute("cumulative") !== "false") params.set("cumulative", "1");
+		if (this.getAttribute("grid") === "false") params.set("grid", "0");
+		if (this.#breakpoints().length) params.set("bp", this.#breakpoints().join(","));
+		const iframe = document.createElement("iframe");
+		iframe.src = link ? `${host}/embed/${encodeURIComponent(link)}#${params}` : `${host}/embed#${params}`;
+		iframe.title = this.getAttribute("title") ?? "Step-by-step visualization of a program";
+		iframe.loading = "lazy";
+		this.#iframe = iframe;
+		this.#root().append(iframe);
+	}
+	async #renderTrace(url) {
+		const root = this.#root();
+		let trace;
+		try {
+			const res = await fetch(url);
+			if (!res.ok) throw new Error(`${res.status}`);
+			trace = await res.json();
+		} catch {
+			return this.#fail(root, `Couldn't load the trace from ${url}.`);
+		}
+		const mount = document.createElement("div");
+		root.append(mount);
+		this.#viz = mountVisualizer(mount, {
+			trace,
+			source: this.source,
+			step: this.#step,
+			cumulative: this.hasAttribute("cumulative") && this.getAttribute("cumulative") !== "false",
+			grids: this.getAttribute("grid") !== "false",
+			breakpoints: this.#breakpoints(),
+			onStep: (step) => this.#emit("code-flip-step", {
+				step,
+				steps: trace.steps.length
+			})
+		});
+		this.#emit("code-flip-ready", { steps: trace.steps.length });
+	}
+	#fail(root, message) {
+		root.append(Object.assign(document.createElement("p"), {
+			className: "error",
+			textContent: message
+		}));
+		this.#emit("code-flip-error", { message });
+	}
+	#message(e) {
+		if (!this.#iframe || e.source !== this.#iframe.contentWindow) return;
+		const d = e.data;
+		if (d?.type === "code-flip:resize" && typeof d.height === "number") this.#iframe.style.height = `${d.height + 2}px`;
+		else if (d?.type === "code-flip:ready") this.#emit("code-flip-ready", { steps: d.steps });
+		else if (d?.type === "code-flip:step") {
+			this.#step = d.step ?? 0;
+			this.#emit("code-flip-step", {
+				step: d.step,
+				steps: d.steps
+			});
+		} else if (d?.type === "code-flip:error") this.#emit("code-flip-error", { message: d.message });
+	}
+	#emit(type, detail) {
+		this.dispatchEvent(new CustomEvent(type, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+/** `{"name": "text", …}`. */
+function isFilesJson(json) {
+	try {
+		const v = JSON.parse(json);
+		return typeof v === "object" && v !== null && !Array.isArray(v) && Object.values(v).every((t) => typeof t === "string");
+	} catch {
+		return false;
+	}
+}
+/** Removes the indentation shared by every line, and leading/trailing blank lines. */
+function dedent(text) {
+	const lines = text.replace(/^\s*\n/, "").replace(/\s+$/, "").split("\n");
+	const indent = Math.min(...lines.filter((l) => l.trim()).map((l) => l.match(/^[ \t]*/)[0].length));
+	return `${lines.map((l) => l.slice(Number.isFinite(indent) ? indent : 0)).join("\n")}\n`;
+}
+function defineCodeFlip(name = "code-flip") {
+	if (!customElements.get(name)) customElements.define(name, class extends CodeFlipElement {});
+}
+export { CodeFlipElement, dedent, defineCodeFlip };