@typbase/codemirror 0.3.2 → 0.4.1

package/dist/index.mjs

@@ -1,7 +1,7 @@
-import { acceptCompletion, autocompletion, closeBracketsKeymap, completionKeymap, snippet, startCompletion } from "@codemirror/autocomplete";
+import { acceptCompletion, autocompletion, closeBracketsKeymap, closeCompletion, completionKeymap, snippet, startCompletion } from "@codemirror/autocomplete";
 import { indentService } from "@codemirror/language";
 import { Decoration, EditorView, ViewPlugin, WidgetType, hoverTooltip, keymap, showTooltip } from "@codemirror/view";
-import { ChangeSet, EditorSelection, EditorState, Facet, Prec, RangeSetBuilder, StateEffect, StateField, countColumn, findColumn } from "@codemirror/state";
+import { ChangeSet, EditorSelection, EditorState, Facet, RangeSetBuilder, StateEffect, StateField, countColumn, findColumn } from "@codemirror/state";
 import { copyLineDown, copyLineUp, indentLess, indentMore, insertBlankLine, moveLineDown, moveLineUp, redo, redoSelection, simplifySelection, standardKeymap, toggleBlockComment, toggleLineComment, undo, undoSelection } from "@codemirror/commands";
 import { linter, nextDiagnostic, setDiagnostics } from "@codemirror/lint";
 import { closeSearchPanel, findNext, findPrevious, gotoLine, openSearchPanel, selectNextOccurrence, selectSelectionMatches } from "@codemirror/search";
@@ -20,15 +20,29 @@ const typstSyntaxHighlighting = (fileId, typstState) => StateField.define({
 	}
 });
 function buildDecorations$2(state, fileId, typstState) {
-	const builder = new RangeSetBuilder();
 	let tokens;
+	let equations;
 	try {
 		tokens = typstState.highlight(fileId, state.doc.toString());
+		equations = typstState.extractEquations(fileId, state.doc.toString());
 	} catch (error) {
 		console.error("[typst] highlight panicked:", error);
 		return Decoration.none;
 	}
-	for (const token of tokens) builder.add(token.range.start, token.range.end, Decoration.mark({ class: token.tag }));
+	const builder = new RangeSetBuilder();
+	const equationMark = Decoration.mark({ class: "typ-equation" });
+	let nextEquation = 0;
+	for (const token of tokens) {
+		while (nextEquation < equations.length && equations[nextEquation].from <= token.range.start) {
+			const equation = equations[nextEquation++];
+			builder.add(equation.from, equation.to, equationMark);
+		}
+		builder.add(token.range.start, token.range.end, Decoration.mark({ class: token.tag }));
+	}
+	for (; nextEquation < equations.length; nextEquation++) {
+		const equation = equations[nextEquation];
+		builder.add(equation.from, equation.to, equationMark);
+	}
 	return builder.finish();
 }
 const parseBackticks = (str, into) => {
@@ -372,8 +386,19 @@ function cursorAddVertical(view, offset) {
 }
 //#endregion
 //#region src/keymap.ts
+/**
+* Whether the editor is running vim bindings. Vim handles keys from a DOM
+* listener that CodeMirror's keymap runs before, so Escape has to be left
+* unhandled or it never reaches the vim plugin. Set through the same
+* compartment as the vim extension.
+*/
+const vimKeymapFacet = Facet.define({ combine: (values) => values.some(Boolean) });
+/**
+* The app's shortcuts dialog mirrors the common entries here. When a chord
+* changes, update `EDITOR_SHORTCUTS` in `apps/web/src/lib/keybindings.ts` too.
+*/
 const typstKeymap = keymap.of([
-	...completionKeymap,
+	...completionKeymap.filter((binding) => binding.key !== "Escape"),
 	...closeBracketsKeymap,
 	{
 		key: "Tab",
@@ -488,7 +513,13 @@ const typstKeymap = keymap.of([
 	},
 	{
 		key: "Escape",
-		run: simplifySelection
+		run: (view) => {
+			if (view.state.facet(vimKeymapFacet)) {
+				closeCompletion(view);
+				return false;
+			}
+			return closeCompletion(view) || simplifySelection(view);
+		}
 	},
 	{
 		key: "Mod-Alt-ArrowUp",
@@ -524,7 +555,7 @@ const typstKeymap = keymap.of([
 		run: selectNextOccurrence,
 		preventDefault: true
 	},
-	...standardKeymap
+	...standardKeymap.filter((binding) => binding.key !== "Escape")
 ]);
 //#endregion
 //#region src/language.ts
@@ -583,6 +614,25 @@ const typstLanguageData = EditorState.languageData.of(() => [{
 }]);
 //#endregion
 //#region src/notebook.ts
+/** Every type, in the order the menu lists them. */
+const NOTEBOOK_CELL_TYPES = [
+	"prose",
+	"code",
+	"log",
+	"hidden"
+];
+/** True when the cell renders in place rather than showing source plus output. */
+function rendersInPlace(kind) {
+	return kind === "prose";
+}
+/** True when the cell's source is not part of what the reader sees. */
+function hidesSource(kind) {
+	return kind === "log" || kind === "hidden";
+}
+/** True when the cell has an output area below its source. */
+function hasOutput(kind) {
+	return kind === "code" || kind === "log";
+}
 /** The options of the notebook extension active in this state, if any. */
 const notebookOptionsFacet = Facet.define({ combine: (values) => values.at(-1) });
 function notebookOptions(state) {
@@ -590,13 +640,12 @@ function notebookOptions(state) {
 }
 /** Re-renders notebooks from cached frames without recompiling. */
 const notebookRefreshEffect = StateEffect.define();
-/** Asks the plugin to recompile and report the result through `onRun`. */
-const notebookRunEffect = StateEffect.define();
-/** First position that belongs to the cell (marker line, or content). */
+/** First position that belongs to the cell (attribute line, or content). */
 function cellStart(cell) {
 	return cell.marker_end > cell.marker_start ? cell.marker_start : cell.content_start;
 }
-function hasMarker(cell) {
+/** True when the cell opened with an attribute line rather than a heading. */
+function hasAttribute(cell) {
 	return cell.marker_end > cell.marker_start;
 }
 /** Index of the cell containing `pos`. Gaps belong to the cell above. */
@@ -615,128 +664,137 @@ function blockEnd(cells, index, text) {
 	const next = cells[index + 1];
 	return next ? cellStart(next) : text.length;
 }
-/** The marker line for a cell type. Markup is the unlabeled default. */
-function markerText(type) {
-	return type === "code" ? "// %% [code]" : "// %%";
+/**
+* The attribute line for a cell type. Prose needs no `kind=`, so a plain cell is
+* three characters.
+*/
+function attributeText(type, name) {
+	const fields = [name ? `name=${name}` : "", type === "prose" ? "" : `kind=${type}`].filter(Boolean);
+	return fields.length ? `//% ${fields.join(" ")}` : "//%";
 }
-function insertCellText(text, cells, index, where, type, content = "") {
-	const marker = markerText(type);
-	if (where === "end" || cells.length === 0) {
-		const from = text.length;
-		const insert = `${from === 0 || text.endsWith("\n\n") ? "" : text.endsWith("\n") ? "\n" : "\n\n"}${marker}\n${content ? `${content}\n` : ""}`;
-		return {
-			changes: {
-				from,
-				insert
-			},
-			anchor: from + insert.length
-		};
-	}
+/**
+* Matches a whole attribute line, indentation and newline included. The rest of
+* the line is taken whole rather than field by field, because this is a text
+* cleaner for exports and the engine already decided what is an attribute.
+*/
+const ATTRIBUTE_LINE = /^[ \t]*\/\/%[^\r\n]*\r?\n?/gm;
+/**
+* Removes cell attribute lines. Notebooks are comments-plus-content, so a
+* cleaned file is the same document for anyone who does not know the
+* convention. Only `//%` goes: any other comment is left as written.
+*/
+function stripCellAttributes(text) {
+	return text.replace(ATTRIBUTE_LINE, "");
+}
+/**
+* Splits a cell at `pos` inside its content. The new cell takes the text from
+* `pos` and inherits the old cell's kind, because a split is a continuation.
+*/
+function splitCellText(text, cells, index, pos) {
 	const cell = cells[index];
-	const from = where === "above" ? cellStart(cell) : blockEnd(cells, index, text);
+	if (!cell || pos < cell.content_start || pos > cell.content_end) return null;
+	const trimmed = text.slice(pos, cell.content_end).replace(/^\n+/, "");
+	const insert = `\n\n${attributeText(cell.kind, cell.name)}\n\n${trimmed}`;
 	return {
 		changes: {
-			from,
-			insert: `${marker}\n${content ? `${content}\n` : ""}\n`
+			from: pos,
+			to: cell.content_end,
+			insert
 		},
-		anchor: from + marker.length + 1 + content.length
+		anchor: pos + 2 + attributeText(cell.kind, cell.name).length + 2
 	};
 }
-function duplicateCellText(text, cells, index) {
-	const cell = cells[index];
-	return insertCellText(text, cells, index, "below", cell.kind, text.slice(cell.content_start, cell.content_end));
-}
-function deleteCellText(text, cells, index) {
+/**
+* Merges a cell into the one above. The result takes the lower cell's kind,
+* since that is the one the reader was last looking at.
+*/
+function mergeCellText(cells, index) {
 	const cell = cells[index];
-	if (cells.length <= 1) return {
-		changes: {
-			from: 0,
-			to: text.length,
-			insert: ""
-		},
-		anchor: 0
-	};
+	const above = cells[index - 1];
+	if (!cell || !above) return null;
 	const from = cellStart(cell);
+	const head = above.content_end > above.content_start ? above.content_end : from;
+	const gap = text_between_gap(head, cell.content_start);
 	return {
 		changes: {
-			from,
-			to: blockEnd(cells, index, text),
-			insert: ""
+			from: head,
+			to: cell.content_start,
+			insert: gap
 		},
-		anchor: from
+		anchor: head
 	};
 }
-function moveCellText(text, cells, index, delta) {
-	const target = index + delta;
-	if (target < 0 || target >= cells.length) return null;
-	const aStart = cellStart(cells[index]);
-	const aEnd = blockEnd(cells, index, text);
-	const bStart = cellStart(cells[target]);
-	const bEnd = blockEnd(cells, target, text);
-	const from = Math.min(aStart, bStart);
-	const to = Math.max(aEnd, bEnd);
-	const a = text.slice(aStart, aEnd).trimEnd();
-	const b = text.slice(bStart, bEnd).trimEnd();
-	return {
+/** The whitespace between two offsets, which a merge keeps as a separator. */
+function text_between_gap(from, to) {
+	return from < to ? "\n\n" : "";
+}
+/**
+* Rewrites a cell's attribute line. A cell that began at a heading has no line
+* to rewrite, so one is inserted.
+*/
+function setCellTypeText(text, cells, index, type) {
+	const cell = cells[index];
+	if (!cell) return null;
+	if (cell.kind === type) return null;
+	const attribute = attributeText(type, cell.name);
+	if (hasAttribute(cell)) return {
 		changes: {
-			from,
-			to,
-			insert: `${delta < 0 ? `${a}\n\n${b}` : `${b}\n\n${a}`}${to < text.length ? "\n\n" : "\n"}`
+			from: cell.marker_start,
+			to: cell.marker_end,
+			insert: attribute
 		},
-		anchor: delta < 0 ? bStart : bStart + b.length + 2
+		anchor: cell.content_start + (attribute.length - (cell.marker_end - cell.marker_start))
 	};
-}
-function splitCellText(text, cells, index, pos) {
-	const cell = cells[index];
-	if (pos < cell.content_start || pos > cell.content_end) return null;
 	return {
 		changes: {
-			from: pos,
-			insert: `\n\n${markerText(cell.kind)}\n\n`
+			from: cellStart(cell),
+			insert: `${attribute}\n`
 		},
-		anchor: pos
+		anchor: cell.content_start + attribute.length + 1
 	};
 }
-function mergeCellText(text, cells, index) {
-	const cell = cells[index];
-	if (index === 0 || !hasMarker(cell)) return null;
+/** Appends a cell of `type` after `index` (or at the end of the document). */
+function insertCellText(text, cells, index, type, content = "") {
+	const attribute = attributeText(type);
+	const at = blockEnd(cells, index, text);
+	const prefix = text.slice(Math.max(0, at - 2), at).includes("\n\n") || at === 0 ? "" : "\n\n";
 	return {
 		changes: {
-			from: cell.marker_start,
-			to: cell.content_start,
-			insert: ""
+			from: at,
+			insert: `${prefix}${attribute}\n${content}\n\n`
 		},
-		anchor: cell.marker_start
+		anchor: at + prefix.length + attribute.length + 1 + content.length
 	};
 }
-function setCellTypeText(text, cells, index, type) {
+function deleteCellText(cells, index, docLength) {
 	const cell = cells[index];
-	const marker = markerText(type);
-	if (hasMarker(cell)) return {
+	if (!cell) return null;
+	const next = cells[index + 1];
+	const nextStart = next ? cellStart(next) : docLength;
+	const from = hasAttribute(cell) ? cell.marker_start : cell.content_start;
+	if (!cells.length || index === 0 && !next && from === 0) return {
 		changes: {
-			from: cell.marker_start,
-			to: cell.marker_end,
-			insert: marker
+			from: 0,
+			to: docLength,
+			insert: ""
 		},
-		anchor: cell.content_start + (marker.length - (cell.marker_end - cell.marker_start))
+		anchor: 0
 	};
 	return {
 		changes: {
-			from: cellStart(cell),
-			insert: `${marker}\n`
+			from,
+			to: nextStart,
+			insert: ""
 		},
-		anchor: cell.content_start + marker.length + 1
+		anchor: from
 	};
 }
-/** Matches a whole cell marker line, indentation and newline included. */
-const MARKER_LINE = /^[ \t]*\/\/[ \t]*%%(?:[ \t]*\[(?:code|markup|text)\])?[ \t]*\r?\n?/gm;
-/**
-* Removes `// %%` cell markers. Notebooks are comments-plus-content, so a
-* cleaned file is the same document for anyone who does not know the
-* convention.
-*/
-function stripCellMarkers(text) {
-	return text.replace(MARKER_LINE, "");
+/** Copies a cell's kind, name, and body below it. */
+function duplicateCellText(text, cells, index) {
+	const cell = cells[index];
+	if (!cell) return null;
+	const body = text.slice(cell.content_start, cell.content_end);
+	return insertCellText(text, cells, index, cell.kind, body);
 }
 function dispatchEdit(view, edit) {
 	view.dispatch({
@@ -746,22 +804,13 @@ function dispatchEdit(view, edit) {
 	});
 	return true;
 }
-/** Compiles and reports through `onRun`, but does not move the cursor. */
-function runCell(view, index) {
-	if (!notebookOptions(view.state) || index < 0) return false;
-	view.dispatch({ effects: notebookRunEffect.of({ index }) });
-	return true;
-}
-function runAllCells(view) {
-	if (!notebookOptions(view.state)) return false;
-	view.dispatch({ effects: notebookRunEffect.of({ index: "all" }) });
-	return true;
-}
+/** Selects a cell's content so the keyboard commands act on it. */
 function focusCell(view, index, edge = "start") {
 	const cell = cellsOf(view.state)[index];
 	if (!cell) return false;
+	const pos = edge === "start" ? cell.content_start : cell.content_end;
 	view.dispatch({
-		selection: { anchor: edge === "start" ? cell.content_start : cell.content_end },
+		selection: { anchor: pos },
 		scrollIntoView: true
 	});
 	view.focus();
@@ -770,148 +819,105 @@ function focusCell(view, index, edge = "start") {
 function currentCell(view) {
 	return cellIndexAt(cellsOf(view.state), view.state.selection.main.head);
 }
-function insertCell(view, where) {
-	return insertCellAt(view, currentCell(view), where);
-}
-function insertCellAt(view, index, where) {
+/** Inserts a cell below `index`, or at the end of the document. */
+function insertCell(view, type, content = "", index = -1) {
 	const cells = cellsOf(view.state);
-	if (index < 0 || !cells[index]) return false;
-	const type = cells[index]?.kind ?? "markup";
-	return dispatchEdit(view, insertCellText(view.state.doc.toString(), cells, index, where, type));
-}
-function duplicateCell(view) {
-	return duplicateCellAt(view, currentCell(view));
+	const edit = insertCellText(view.state.doc.toString(), cells, index >= 0 ? index : cells.length ? currentCell(view) : -1, type, content);
+	return edit ? dispatchEdit(view, edit) : false;
 }
-function duplicateCellAt(view, index) {
+function duplicateCell(view, index = -1) {
 	const cells = cellsOf(view.state);
-	if (index < 0 || !cells[index]) return false;
-	return dispatchEdit(view, duplicateCellText(view.state.doc.toString(), cells, index));
+	const at = index >= 0 ? index : currentCell(view);
+	const edit = duplicateCellText(view.state.doc.toString(), cells, at);
+	return edit ? dispatchEdit(view, edit) : false;
 }
-function deleteCell(view) {
-	return deleteCellAt(view, currentCell(view));
-}
-function deleteCellAt(view, index) {
-	const cells = cellsOf(view.state);
-	if (index < 0 || !cells[index]) return false;
-	return dispatchEdit(view, deleteCellText(view.state.doc.toString(), cells, index));
+function deleteCell(view, index = -1) {
+	const edit = deleteCellText(cellsOf(view.state), index >= 0 ? index : currentCell(view), view.state.doc.length);
+	return edit ? dispatchEdit(view, edit) : false;
 }
+/** Moves the active cell up or down. */
 function moveCell(view, delta) {
-	return moveCellAt(view, currentCell(view), delta);
-}
-function moveCellAt(view, index, delta) {
-	const cells = cellsOf(view.state);
-	if (index < 0 || !cells[index]) return false;
-	const edit = moveCellText(view.state.doc.toString(), cells, index, delta);
-	if (!edit) return false;
-	return dispatchEdit(view, edit);
-}
-function splitCell(view) {
 	const cells = cellsOf(view.state);
 	const index = currentCell(view);
-	if (index < 0) return false;
-	const edit = splitCellText(view.state.doc.toString(), cells, index, view.state.selection.main.head);
-	if (!edit) return false;
-	return dispatchEdit(view, edit);
-}
-function mergeCell(view) {
-	const cells = cellsOf(view.state);
-	const index = currentCell(view);
-	if (index < 0) return false;
-	const edit = mergeCellText(view.state.doc.toString(), cells, index);
-	if (!edit) return false;
-	return dispatchEdit(view, edit);
-}
-function toggleCellType(view, index) {
-	const cells = cellsOf(view.state);
-	const cell = cells[index];
-	if (!cell) return false;
-	const next = cell.kind === "code" ? "markup" : "code";
-	return dispatchEdit(view, setCellTypeText(view.state.doc.toString(), cells, index, next));
+	const next = index + delta;
+	if (next < 0 || next >= cells.length || index < 0) return false;
+	const text = view.state.doc.toString();
+	const first = cells[index];
+	const second = cells[next];
+	const from = cellStart(first);
+	const to = cellStart(second);
+	const firstEnd = blockEnd(cells, index, text);
+	const secondEnd = blockEnd(cells, next, text);
+	view.dispatch({
+		changes: [{
+			from,
+			to: firstEnd,
+			insert: text.slice(to, secondEnd)
+		}, {
+			from: to,
+			to: secondEnd,
+			insert: text.slice(from, firstEnd)
+		}],
+		selection: { anchor: from },
+		scrollIntoView: true
+	});
+	return true;
 }
 function setCellType(view, index, type) {
 	const cells = cellsOf(view.state);
-	if (!cells[index]) return false;
-	return dispatchEdit(view, setCellTypeText(view.state.doc.toString(), cells, index, type));
+	const edit = setCellTypeText(view.state.doc.toString(), cells, index, type);
+	return edit ? dispatchEdit(view, edit) : false;
 }
-function runAndAdvance(view) {
-	const cells = cellsOf(view.state);
-	const index = currentCell(view);
-	if (index < 0) return false;
-	runCell(view, index);
-	if (cells[index + 1]) focusCell(view, index + 1);
-	else dispatchEdit(view, insertCellText(view.state.doc.toString(), cells, index, "below", cells[index]?.kind ?? "markup"));
-	return true;
-}
-function runAndInsert(view) {
+function splitCell(view) {
 	const cells = cellsOf(view.state);
 	const index = currentCell(view);
-	if (index < 0) return false;
-	runCell(view, index);
-	return dispatchEdit(view, insertCellText(view.state.doc.toString(), cells, index, "below", cells[index]?.kind ?? "markup"));
-}
-function runCurrent(view) {
-	const index = currentCell(view);
-	return index < 0 ? false : runCell(view, index);
+	const edit = splitCellText(view.state.doc.toString(), cells, index, view.state.selection.main.from);
+	return edit ? dispatchEdit(view, edit) : false;
 }
-/** Arrow keys at a cell's first or last line move between cells. */
-function boundaryMove(view, direction) {
-	const { state } = view;
-	const range = state.selection.main;
-	if (!range.empty) return false;
-	const cells = cellsOf(state);
-	const index = cellIndexAt(cells, range.head);
-	const cell = cells[index];
-	if (!cell) return false;
-	if (direction === -1) {
-		const first = state.doc.lineAt(cell.content_start);
-		if (range.head < first.from || range.head > first.to || index === 0) return false;
-		return focusCell(view, index - 1, "end");
-	}
-	const last = state.doc.lineAt(cell.content_end);
-	if (range.head < last.from || range.head > last.to || index >= cells.length - 1) return false;
-	return focusCell(view, index + 1);
+function mergeCell(view) {
+	const edit = mergeCellText(cellsOf(view.state), currentCell(view));
+	return edit ? dispatchEdit(view, edit) : false;
 }
 /**
-* Notebook keymap. Mounted with high precedence so Alt-ArrowUp/Down move
-* cells instead of lines and Escape reaches command mode.
+* The editor's cell commands. Everything here is also in the cell menu, and
+* every one of them is a text edit, so the undo stack covers them all.
 */
-const notebookKeymap = Prec.high(keymap.of([
-	{
-		key: "Shift-Enter",
-		run: runAndAdvance
-	},
+const notebookKeymap = keymap.of([
 	{
 		key: "Mod-Enter",
-		run: runCurrent
+		preventDefault: true,
+		run: (view) => focusCell(view, currentCell(view), "end")
 	},
 	{
-		key: "Alt-Enter",
-		run: runAndInsert
+		key: "Mod-Shift-Enter",
+		preventDefault: true,
+		run: (view) => splitCell(view)
 	},
 	{
-		key: "Alt-ArrowUp",
+		key: "Mod-Shift-ArrowUp",
+		preventDefault: true,
 		run: (view) => moveCell(view, -1)
 	},
 	{
-		key: "Alt-ArrowDown",
+		key: "Mod-Shift-ArrowDown",
+		preventDefault: true,
 		run: (view) => moveCell(view, 1)
-	},
-	{
-		key: "Escape",
-		run: (view) => {
-			notebookOptions(view.state)?.onCommandMode?.();
-			return true;
-		}
-	},
-	{
-		key: "ArrowUp",
-		run: (view) => boundaryMove(view, -1)
-	},
-	{
-		key: "ArrowDown",
-		run: (view) => boundaryMove(view, 1)
 	}
-]));
+]);
+//#endregion
+//#region src/sync.ts
+/**
+* Keeps the engine's sources in step with the editor, without rendering.
+*/
+const typstSourceSync = (fileId, prelude, typstState) => EditorState.transactionExtender.of((transaction) => {
+	if (!transaction.docChanged) return null;
+	try {
+		typstState.syncSource(fileId, transaction.newDoc.toString(), prelude.value);
+	} catch (error) {
+		console.error("[typst] source sync panicked:", error);
+	}
+	return null;
+});
 //#endregion
 //#region src/diagnostics.ts
 /**
@@ -919,7 +925,7 @@ const notebookKeymap = Prec.high(keymap.of([
 * diagnostics of every compile here, so the linter source can reuse them
 * instead of compiling the same text a second time.
 */
-const diagnosticsCache = /* @__PURE__ */ new Map();
+const diagnosticsCache = new LRUCache({ max: 2 });
 function rememberDiagnostics(path, text, diagnostics) {
 	diagnosticsCache.set(path, {
 		text,
@@ -958,11 +964,6 @@ function toLintDiagnostics(typstDiagnostics) {
 }
 /**
 * Typst diagnostics as a CodeMirror linter source.
-*
-* This runs in every editor mode and combines with other sources (the
-* spellcheck linter), so neither one replaces the other. The WYSIWYG plugin's
-* compile feeds the cache. Split and source mode fall back to a compile here
-* so they get diagnostics too.
 */
 const typstLinter = (fileId, spaceId, path, prelude, typstState, options = {}) => linter(async (view) => {
 	const text = view.state.doc.toString();
@@ -970,14 +971,14 @@ const typstLinter = (fileId, spaceId, path, prelude, typstState, options = {}) =
 	if (cached) return toLintDiagnostics(cached);
 	let result;
 	try {
-		result = typstState.compilePaged(fileId, text, prelude.value);
+		result = typstState.diagnosePaged(fileId, text, prelude.value);
 	} catch (error) {
 		console.error("[typst] diagnostics compile panicked:", error);
 		options.onPanic?.(fileId);
 		return [];
 	}
 	if (result.requests.length > 0 && options.onRequests) {
-		if (await options.onRequests(result.requests, spaceId)) result = typstState.compilePaged(fileId, text, prelude.value);
+		if (await options.onRequests(result.requests, spaceId)) result = typstState.diagnosePaged(fileId, text, prelude.value);
 	}
 	rememberDiagnostics(path, text, result.diagnostics);
 	options.onCompile?.();
@@ -986,6 +987,26 @@ const typstLinter = (fileId, spaceId, path, prelude, typstState, options = {}) =
 //#endregion
 //#region src/frames.ts
 const containerCache = new LRUCache({ max: 128 });
+const SVG_NS = "http://www.w3.org/2000/svg";
+let sharedDefs;
+/**
+* Places the glyph and gradient definitions a frame set references.
+*/
+function installSharedDefs(defs) {
+	if (!defs) return;
+	if (!sharedDefs || !sharedDefs.isConnected) {
+		const host = document.createElementNS(SVG_NS, "svg");
+		host.setAttribute("width", "0");
+		host.setAttribute("height", "0");
+		host.setAttribute("aria-hidden", "true");
+		host.style.position = "absolute";
+		sharedDefs = document.createElementNS(SVG_NS, "defs");
+		host.append(sharedDefs);
+		document.body.append(host);
+	}
+	sharedDefs.innerHTML = "";
+	sharedDefs.innerHTML = defs;
+}
 const openInNewTab = (url) => {
 	window.open(url, "_blank", "noopener,noreferrer");
 };
@@ -1147,46 +1168,46 @@ var TypstWidget = class extends WidgetType {
 };
 //#endregion
 //#region src/notebook-widgets.ts
-function iconSpan(name) {
+function icon(name, size) {
 	const span = document.createElement("span");
 	span.className = "ms-icon material-symbols-rounded";
-	span.textContent = name;
 	span.setAttribute("aria-hidden", "true");
+	if (size !== void 0) span.style.fontSize = `calc(${size}px * var(--ui-size, 1))`;
+	span.textContent = name;
 	return span;
 }
-/** Fallback labels for consumers that enable cells without i18n strings. */
-const FALLBACK_LABELS = {
-	run: "Run cell",
-	code: "Code",
-	markup: "Text",
-	moveUp: "Move cell up",
-	moveDown: "Move cell down",
-	duplicate: "Duplicate cell",
-	remove: "Delete cell",
-	clearOutput: "Clear output",
-	toggleSource: "Collapse cell",
-	noOutput: "No output",
-	error: "Cell error"
-};
-/** Buttons must not hand the mousedown to CodeMirror's selection handling. */
-function actionButton(icon, label, onClick, className = "") {
-	const button = document.createElement("button");
-	button.type = "button";
-	button.className = `tb-cell-btn ${className}`.trim();
-	button.title = label;
-	button.setAttribute("aria-label", label);
-	button.append(iconSpan(icon));
-	button.addEventListener("mousedown", (event) => event.preventDefault());
-	button.addEventListener("click", (event) => {
+/** A button that must not hand the mousedown to CodeMirror's selection. */
+function button(name, label, onClick, className = "") {
+	const element = document.createElement("button");
+	element.type = "button";
+	element.className = `tb-cell-btn${className ? ` ${className}` : ""}`;
+	element.title = label;
+	element.setAttribute("aria-label", label);
+	element.append(icon(name, RAIL_ICON_SIZE));
+	element.addEventListener("mousedown", (event) => event.preventDefault());
+	element.addEventListener("click", (event) => {
 		event.preventDefault();
 		event.stopPropagation();
-		onClick(event);
+		onClick();
 	});
-	return button;
+	return element;
 }
-var NotebookHeaderWidget = class extends WidgetType {
+/**
+* Icon size across the rail: the chip glyph, its overflow button, and the menu's
+* items, which is the same row and `UiMenuItem`'s default.
+*/
+const RAIL_ICON_SIZE = 20;
+/** The glyph and label for a cell kind. */
+const KIND_PRESENTATION = {
+	prose: "notes",
+	code: "code",
+	log: "terminal",
+	hidden: "visibility_off"
+};
+var NotebookRailWidget = class extends WidgetType {
 	view;
 	args;
+	menu = null;
 	constructor(view, args) {
 		super();
 		this.view = view;
@@ -1195,48 +1216,139 @@ var NotebookHeaderWidget = class extends WidgetType {
 	eq(other) {
 		const a = this.args;
 		const b = other.args;
-		return a.index === b.index && a.kind === b.kind && a.counter === b.counter && a.count === b.count && a.collapsed === b.collapsed && a.labels === b.labels;
+		return a.index === b.index && a.kind === b.kind && a.name === b.name && a.collapsed === b.collapsed && a.held === b.held && a.labels === b.labels;
+	}
+	ignoreEvent(event) {
+		return event.type === "mousedown" && event.target.classList.contains("tb-cell-rail");
 	}
 	toDOM() {
-		const { index, kind, labels } = this.args;
-		const header = document.createElement("div");
-		header.className = "tb-cell-header";
-		header.dataset.kind = kind;
-		header.dataset.cell = String(index);
-		const run = actionButton("play_arrow", labels.run, () => runCell(this.view, index));
-		run.classList.add("tb-cell-btn--run");
-		header.append(run);
-		if (this.args.counter) {
-			const chip = document.createElement("span");
-			chip.className = "tb-cell-counter";
-			chip.textContent = this.args.count === void 0 ? "[ ]" : `[${this.args.count}]`;
-			header.append(chip);
+		const { index, kind, name, labels } = this.args;
+		const rail = document.createElement("div");
+		rail.className = "tb-cell-rail";
+		rail.dataset.kind = kind;
+		rail.dataset.cell = String(index);
+		const chip = document.createElement("span");
+		chip.className = "tb-cell-chip";
+		chip.append(icon(KIND_PRESENTATION[kind], RAIL_ICON_SIZE));
+		chip.append(document.createTextNode(name || labels[kind]));
+		rail.append(chip);
+		if (this.args.held) {
+			const held = document.createElement("span");
+			held.className = "tb-cell-held";
+			held.textContent = labels.held;
+			rail.append(held);
 		}
-		header.append(actionButton(kind === "code" ? "code" : "notes", kind === "code" ? labels.code : labels.markup, () => toggleCellType(this.view, index), "tb-cell-btn--type"));
-		const spacer = document.createElement("span");
-		spacer.className = "tb-cell-spacer";
-		header.append(spacer);
-		const actions = document.createElement("span");
-		actions.className = "tb-cell-actions";
-		actions.append(actionButton("arrow_upward", labels.moveUp, () => moveCellAt(this.view, index, -1)), actionButton("arrow_downward", labels.moveDown, () => moveCellAt(this.view, index, 1)), actionButton("content_copy", labels.duplicate, () => duplicateCellAt(this.view, index)), actionButton(this.args.collapsed ? "unfold_more" : "unfold_less", labels.toggleSource, () => {
-			notebookOptions(this.view.state)?.onToggleCollapse?.(index);
-			this.view.dispatch({ effects: notebookRefreshEffect.of(null) });
-		}), actionButton("delete_sweep", labels.clearOutput, () => {
-			notebookOptions(this.view.state)?.onClearOutput?.(index);
-			this.view.dispatch({ effects: notebookRefreshEffect.of(null) });
-		}), actionButton("delete", labels.remove, () => deleteCellAt(this.view, index)));
-		header.append(actions);
-		header.addEventListener("mousedown", (event) => {
-			if (event.target?.closest("button")) return;
+		const menu = button("more_vert", labels.menu, () => this.toggleMenu(rail), "tb-cell-btn--menu");
+		rail.append(menu);
+		rail.addEventListener("mousedown", (event) => {
+			if (event.target.closest("button")) return;
 			event.preventDefault();
 			focusCell(this.view, index);
 		});
-		return header;
+		return rail;
 	}
-	get estimatedHeight() {
-		return 24;
+	toggleMenu(anchor) {
+		if (this.menu) {
+			this.closeMenu();
+			return;
+		}
+		const { labels, index, collapsed, held } = this.args;
+		const items = [
+			{
+				command: "toggleSource",
+				label: labels.toggleSource,
+				name: collapsed ? "unfold_more" : "unfold_less"
+			},
+			{
+				command: "split",
+				label: labels.split,
+				name: "call_split"
+			},
+			{
+				command: "merge",
+				label: labels.merge,
+				name: "merge_type"
+			},
+			{
+				command: "moveUp",
+				label: labels.moveUp,
+				name: "keyboard_double_arrow_up"
+			},
+			{
+				command: "moveDown",
+				label: labels.moveDown,
+				name: "keyboard_double_arrow_down"
+			},
+			{
+				command: "duplicate",
+				label: labels.duplicate,
+				name: "content_copy"
+			},
+			{
+				command: "copy",
+				label: labels.copy,
+				name: "content_paste"
+			},
+			{
+				command: held ? "release" : "hold",
+				label: held ? labels.release : labels.hold,
+				name: held ? "play_arrow" : "pause"
+			},
+			{
+				command: "clearOutput",
+				label: labels.clearOutput,
+				name: "delete_sweep"
+			},
+			{
+				command: "remove",
+				label: labels.remove,
+				name: "delete"
+			}
+		];
+		const menu = document.createElement("div");
+		menu.className = "menu tb-cell-menu";
+		menu.setAttribute("role", "menu");
+		for (const item of items) {
+			const entry = document.createElement("button");
+			entry.type = "button";
+			entry.className = "menu__item";
+			entry.setAttribute("role", "menuitem");
+			entry.append(icon(item.name, RAIL_ICON_SIZE));
+			entry.append(document.createTextNode(item.label));
+			entry.addEventListener("click", () => {
+				this.closeMenu();
+				this.args.onCommand(item.command, index);
+			});
+			menu.append(entry);
+		}
+		document.body.append(menu);
+		const box = anchor.getBoundingClientRect();
+		menu.style.position = "fixed";
+		menu.style.left = `${Math.round(box.left)}px`;
+		menu.style.top = `${Math.round(box.bottom + 4)}px`;
+		this.menu = menu;
+		const dismiss = (event) => {
+			if (menu.contains(event.target)) return;
+			this.closeMenu();
+		};
+		setTimeout(() => document.addEventListener("mousedown", dismiss), 0);
+		document.addEventListener("keyup", this.onEscape);
+	}
+	onEscape = (event) => {
+		if (event.key === "Escape") this.closeMenu();
+	};
+	closeMenu() {
+		this.menu?.remove();
+		this.menu = null;
+		document.removeEventListener("keyup", this.onEscape);
+	}
+	destroy() {
+		this.closeMenu();
 	}
 };
+/**
+* A cell's output: its frames and the diagnostics whose span falls inside it.
+*/
 var NotebookOutputWidget = class extends WidgetType {
 	view;
 	fileId;
@@ -1251,30 +1363,25 @@ var NotebookOutputWidget = class extends WidgetType {
 		this.args = args;
 		this.openExternal = openExternal;
 	}
-	/** Hash of everything the DOM depends on, since DOM identity is expensive. */
 	get key() {
 		const frames = this.args.frames.map((frame) => {
 			const size = frameSize(frame);
 			return `${frame.render.hash}:${Math.round(size.width)}x${Math.round(size.height)}`;
 		}).join(",");
 		const diagnostics = this.args.diagnostics.map((diagnostic) => diagnostic.message).join("|");
-		return `${this.args.index}:${this.args.cleared}:${this.args.hasRun}:${frames}:${diagnostics}`;
+		return `${this.args.index}:${this.args.cleared}:${this.args.held}:${frames}:${diagnostics}`;
 	}
 	eq(other) {
 		return this.key === other.key;
 	}
 	toDOM() {
 		const root = document.createElement("div");
-		const { cleared, labels } = this.args;
+		const { cleared, held, labels } = this.args;
 		root.className = "tb-cell-output";
 		if (cleared) {
 			root.classList.add("tb-cell-output--cleared");
 			return root;
 		}
-		if (!(this.args.frames.length > 0 || this.args.diagnostics.length > 0 || this.args.hasRun)) {
-			root.classList.add("tb-cell-output--empty");
-			return root;
-		}
 		const body = document.createElement("div");
 		body.className = "tb-cell-output-body";
 		for (const diagnostic of this.args.diagnostics) {
@@ -1300,7 +1407,12 @@ var NotebookOutputWidget = class extends WidgetType {
 			holder.append(container);
 			body.append(holder);
 		}
-		if (!this.args.frames.length && !this.args.diagnostics.length && this.args.hasRun) {
+		if (held) {
+			const note = document.createElement("div");
+			note.className = "tb-cell-stale";
+			note.textContent = labels.held;
+			body.append(note);
+		} else if (!this.args.frames.length && !this.args.diagnostics.length) {
 			const empty = document.createElement("div");
 			empty.className = "tb-cell-empty";
 			empty.textContent = labels.noOutput;
@@ -1315,51 +1427,109 @@ var NotebookOutputWidget = class extends WidgetType {
 		return height + 16;
 	}
 };
+/**
+* The height an off-screen cell's output reserves, without building any of it.
+*/
+var NotebookOutputSpacer = class extends WidgetType {
+	height;
+	constructor(height) {
+		super();
+		this.height = height;
+	}
+	eq(other) {
+		return this.height === other.height;
+	}
+	toDOM() {
+		const root = document.createElement("div");
+		root.className = "tb-cell-output tb-cell-output--offscreen";
+		return root;
+	}
+	get estimatedHeight() {
+		return this.height;
+	}
+};
 function decorateNotebook(args) {
-	const { view, state, cells, frames, diagnostics, fileId, typstState, locked, onExternalLink, options } = args;
+	const { view, state, cells, frames, diagnostics, fileId, typstState, locked, readOnly, renderFrames, activeIndex, onCommand, onExternalLink, options } = args;
 	const decorations = [];
 	const byCell = cells.map(() => []);
 	for (const frame of frames) {
 		const index = cellIndexAt(cells, frame.range.start);
 		if (index >= 0) byCell[index].push(frame);
 	}
-	const counter = options.counters?.() ?? false;
+	const labels = options.labels ?? FALLBACK_LABELS;
+	const cellState = (index) => options.state?.(index) ?? {};
+	const visible = /* @__PURE__ */ new Set();
+	for (const range of view.visibleRanges) {
+		const from = cellIndexAt(cells, range.from);
+		const to = cellIndexAt(cells, range.to);
+		for (let index = Math.max(0, from); index <= Math.min(cells.length - 1, to); index++) visible.add(index);
+	}
 	cells.forEach((cell, index) => {
-		const cellState = options.state?.(index) ?? {};
-		const headerPos = state.doc.lineAt(cellStart(cell)).from;
-		decorations.push(Decoration.widget({
-			widget: new NotebookHeaderWidget(view, {
-				index,
-				kind: cell.kind,
-				counter,
-				count: cellState.count,
-				collapsed: cellState.collapsed ?? false,
-				labels: options.labels ?? FALLBACK_LABELS
-			}),
-			side: -1
-		}).range(headerPos));
-		if (hasMarker(cell)) decorations.push(Decoration.line({ class: "tb-cell-marker" }).range(state.doc.lineAt(cell.marker_start).from));
-		if (cellState.collapsed && cell.content_end > cell.content_start) decorations.push(Decoration.replace({}).range(cell.content_start, cell.content_end));
-		if (cell.kind === "markup") {
-			if (cellState.collapsed) return;
+		const own = cellState(index);
+		const firstLine = state.doc.lineAt(cellStart(cell)).from;
+		if (index === activeIndex) decorations.push(Decoration.line({ class: "tb-cell-active" }).range(firstLine));
+		if (!readOnly) {
+			decorations.push(Decoration.widget({
+				widget: new NotebookRailWidget(view, {
+					index,
+					kind: cell.kind,
+					name: cell.name,
+					collapsed: own.collapsed ?? false,
+					held: own.held ?? false,
+					labels,
+					onCommand
+				}),
+				block: !hasAttribute(cell),
+				side: -1
+			}).range(firstLine));
+			if (hasAttribute(cell)) decorations.push(Decoration.line({ class: "tb-cell-attribute" }).range(state.doc.lineAt(cell.marker_start).from));
+		}
+		const contentStart = cell.content_start;
+		const contentEnd = cell.content_end;
+		const hideSource = (own.collapsed ?? false) || hidesSource(cell.kind);
+		if (hideSource && contentEnd > contentStart) decorations.push(Decoration.replace({}).range(contentStart, contentEnd));
+		if (hideSource) {
+			if (renderFrames) pushDiagnostics(decorations, state, cell, diagnostics);
+			return;
+		}
+		if (rendersInPlace(cell.kind)) {
+			if (!renderFrames) return;
 			for (const frame of byCell[index] ?? []) {
 				const { start, end } = frame.range;
 				if (!frame.render || end <= start) continue;
 				if (frameIsInactive(view, state, start, end)) decorations.push(Decoration.replace({ widget: new TypstWidget(view, frame, locked, fileId, typstState, onExternalLink) }).range(start, end));
 				else decorations.push(...frameActiveDecorations(view, state, frame));
 			}
+			if (renderFrames) pushDiagnostics(decorations, state, cell, diagnostics);
+			return;
+		}
+		if (!hasOutput(cell.kind)) return;
+		if (!renderFrames) return;
+		const outputPos = contentEnd > contentStart ? state.doc.lineAt(contentEnd).to : contentStart;
+		const held = own.held ?? false;
+		const output = held ? own.frozen ?? {
+			frames: [],
+			diagnostics: []
+		} : {
+			frames: byCell[index] ?? [],
+			diagnostics: cellDiagnosticsFor(cell, diagnostics)
+		};
+		if (!visible.has(index)) {
+			decorations.push(Decoration.widget({
+				widget: new NotebookOutputSpacer(outputHeight(output.frames)),
+				block: true,
+				side: 1
+			}).range(outputPos));
 			return;
 		}
-		const outputPos = cell.content_end > cell.content_start ? state.doc.lineAt(cell.content_end).to : cell.content_start;
-		const cellDiagnostics = diagnostics.filter((diagnostic) => diagnostic.range.start >= cell.content_start && diagnostic.range.start <= cell.content_end);
 		decorations.push(Decoration.widget({
 			widget: new NotebookOutputWidget(view, fileId, typstState, {
 				index,
-				frames: byCell[index] ?? [],
-				diagnostics: cellDiagnostics,
-				cleared: cellState.cleared ?? false,
-				hasRun: cellState.count !== void 0,
-				labels: options.labels ?? FALLBACK_LABELS
+				frames: output.frames,
+				diagnostics: output.diagnostics,
+				cleared: own.cleared ?? false,
+				held,
+				labels
 			}, onExternalLink),
 			block: true,
 			side: 1
@@ -1367,9 +1537,79 @@ function decorateNotebook(args) {
 	});
 	return decorations;
 }
+function outputHeight(frames) {
+	let height = 0;
+	for (const frame of frames) height += frameSize(frame).height;
+	return height + 16;
+}
+/** The diagnostics whose span starts inside a cell's content. */
+function cellDiagnosticsFor(cell, diagnostics) {
+	return diagnostics.filter((diagnostic) => diagnostic.range.start >= cell.content_start && diagnostic.range.start <= cell.content_end);
+}
+/**
+* A cell's diagnostics as a block under its content, so an error is locatable
+* by cell rather than only in the lint panel.
+*/
+function pushDiagnostics(decorations, state, cell, diagnostics) {
+	const own = cellDiagnosticsFor(cell, diagnostics);
+	if (!own.length) return;
+	const pos = cell.content_end > cell.content_start ? state.doc.lineAt(cell.content_end).to : cell.content_start;
+	decorations.push(Decoration.widget({
+		widget: new NotebookDiagnosticsWidget(own),
+		block: true,
+		side: 1
+	}).range(pos));
+}
+var NotebookDiagnosticsWidget = class extends WidgetType {
+	diagnostics;
+	constructor(diagnostics) {
+		super();
+		this.diagnostics = diagnostics;
+	}
+	eq(other) {
+		return this.diagnostics.length === other.diagnostics.length && this.diagnostics.every((diagnostic, index) => diagnostic.message === other.diagnostics[index]?.message);
+	}
+	toDOM() {
+		const root = document.createElement("div");
+		root.className = "tb-cell-diagnostics";
+		for (const diagnostic of this.diagnostics) {
+			const item = document.createElement("div");
+			item.className = `tb-cell-diagnostic tb-cell-diagnostic--${diagnostic.severity}`;
+			item.textContent = diagnostic.message;
+			root.append(item);
+		}
+		return root;
+	}
+	get estimatedHeight() {
+		return this.diagnostics.length * 22 + 8;
+	}
+};
+const FALLBACK_LABELS = {
+	code: "Code",
+	prose: "Text",
+	log: "Log",
+	hidden: "Hidden",
+	menu: "Cell actions",
+	split: "Split cell",
+	merge: "Merge with the cell above",
+	moveUp: "Move cell up",
+	moveDown: "Move cell down",
+	duplicate: "Duplicate cell",
+	remove: "Delete cell",
+	copy: "Copy cell",
+	hold: "Hold output",
+	release: "Release output",
+	clearOutput: "Clear output",
+	toggleSource: "Collapse cell",
+	noOutput: "No output",
+	held: "Held"
+};
 //#endregion
 //#region src/widgets.ts
-const compileCache = new LRUCache({ max: 8 });
+/**
+* Compiled frames per cache key, where the key is `path:revision:appRevision`.
+*/
+const compileCache = new LRUCache({ max: 2 });
 const updateFlagStore = /* @__PURE__ */ new Set();
 /**
 * Dispatch this to recompile even when the document did not change. Used when
@@ -1390,11 +1630,14 @@ function editorRenderWidth(scrollDOM, contentDOM) {
 const tooltipsStateEffect = StateEffect.define();
 const tooltipsStateField = StateField.define({
 	create() {
-		return [];
+		return {
+			tooltips: [],
+			ranges: []
+		};
 	},
-	update(frames, transaction) {
+	update(overlays, transaction) {
 		const effect = transaction.effects.find((e) => e.is(tooltipsStateEffect));
-		return effect ? effect.value : frames;
+		return effect ? effect.value : overlays;
 	}
 });
 /**
@@ -1440,25 +1683,27 @@ function measureLineHeights(view, frames) {
 	}
 	return heights;
 }
-function decorate({ fileId, spaceId, path, prelude, locked, update, updateInWidget: _updateInWidget, widthChanged, forced, typstState, revision, onRequests, onPanic, onCompile, onExternalLink, notebook }) {
+function decorate({ fileId, spaceId, path, prelude, locked, update, updateInWidget: _updateInWidget, widthChanged, forced, typstState, revision, onRequests, onPanic, onCompile, onExternalLink, notebook, renderFrames = true }) {
 	const text = update.state.doc.toString();
 	const isFlaggedForUpdate = updateFlagStore.has(path);
 	const cacheKey = compileCacheKey(path, typstState, revision);
 	let frames;
 	let tooltips;
+	let equationRanges;
 	let diagnostics;
 	if (forced || update.docChanged || widthChanged || !compileCache.has(cacheKey)) {
 		if (isFlaggedForUpdate) updateFlagStore.delete(path);
 		else updateFlagStore.add(path);
 		let compileResult;
 		try {
-			compileResult = typstState.compilePaged(fileId, text, prelude);
+			compileResult = typstState.compilePaged(fileId, text, prelude, update.state.selection.main.from);
 		} catch (error) {
 			console.error("[typst] compile panicked:", error);
 			onPanic?.(fileId);
 			return {
 				decorations: Decoration.none,
 				tooltips: [],
+				equationRanges: [],
 				frames: [],
 				active: []
 			};
@@ -1470,21 +1715,18 @@ function decorate({ fileId, spaceId, path, prelude, locked, update, updateInWidg
 			if (!wasUpdated) return;
 			update.view.dispatch({ effects: typstRecompileEffect.of(null) });
 		});
-		({frames, tooltips} = compileResult);
+		installSharedDefs(compileResult.defs);
+		({frames, tooltips, equation_ranges: equationRanges} = compileResult);
 		diagnostics = compileResult.diagnostics;
 		compileCache.set(cacheKey, {
 			frames,
 			tooltips,
-			diagnostics
-		});
-		notebook?.onCompile?.({
-			text,
-			frames,
+			equationRanges,
 			diagnostics
 		});
 	} else {
 		const cached = compileCache.get(cacheKey);
-		({frames, tooltips, diagnostics} = cached);
+		({frames, tooltips, equationRanges, diagnostics} = cached);
 	}
 	const { view, state } = update;
 	if (notebook) {
@@ -1497,12 +1739,19 @@ function decorate({ fileId, spaceId, path, prelude, locked, update, updateInWidg
 			return {
 				decorations: Decoration.none,
 				tooltips: [],
+				equationRanges: [],
 				frames: [],
 				active: []
 			};
 		}
 		notebook.onCells?.(cells);
-		notebook.onActiveCell?.(cells.length ? cellIndexAt(cells, state.selection.main.head) : null);
+		notebook.onCompile?.({
+			text,
+			frames,
+			diagnostics
+		});
+		const activeIndex = cells.length ? cellIndexAt(cells, state.selection.main.head) : null;
+		notebook.onActiveCell?.(activeIndex);
 		return {
 			decorations: Decoration.set(decorateNotebook({
 				view,
@@ -1513,10 +1762,15 @@ function decorate({ fileId, spaceId, path, prelude, locked, update, updateInWidg
 				fileId,
 				typstState,
 				locked,
+				readOnly: notebook.readOnly?.() ?? false,
+				renderFrames,
+				activeIndex,
 				onExternalLink,
+				onCommand: (command, index) => notebook.onCommand?.(command, index),
 				options: notebook
 			}), true),
 			tooltips,
+			equationRanges,
 			frames,
 			active: []
 		};
@@ -1533,6 +1787,7 @@ function decorate({ fileId, spaceId, path, prelude, locked, update, updateInWidg
 	return {
 		decorations: built.decorations,
 		tooltips,
+		equationRanges,
 		frames,
 		active: built.active
 	};
@@ -1552,6 +1807,7 @@ const typstStateField = StateField.define({
 const typstViewPlugin = (fileId, spaceId, path, text, prelude, locked, typstState, options = {}) => ViewPlugin.define((_view) => {
 	let firstUpdate = true;
 	let resizeTimer;
+	const renderFrames = options.renderFrames ?? true;
 	const remeasureKey = {};
 	/**
 	* A pass that shows a block's source runs while the block's widget is still
@@ -1591,12 +1847,9 @@ const typstViewPlugin = (fileId, spaceId, path, text, prelude, locked, typstStat
 	return {
 		update(update) {
 			let widthChanged = false;
-			const effects = update.transactions.flatMap((transaction) => transaction.effects);
-			const run = effects.find((effect) => effect.is(notebookRunEffect));
-			const refresh = effects.some((effect) => effect.is(notebookRefreshEffect));
+			const refresh = update.transactions.flatMap((transaction) => transaction.effects).some((effect) => effect.is(notebookRefreshEffect));
 			const forced = firstUpdate || update.transactions.some((transaction) => transaction.effects.some((effect) => effect.is(typstRecompileEffect)));
 			firstUpdate = false;
-			if (run) options.notebook?.onRun?.(run.value.index);
 			if (update.geometryChanged) {
 				const { scrollDOM, contentDOM } = update.view;
 				try {
@@ -1613,7 +1866,7 @@ const typstViewPlugin = (fileId, spaceId, path, text, prelude, locked, typstStat
 					update.view.dispatch({ effects: typstRecompileEffect.of(null) });
 				}, 150);
 			}
-			if (update.docChanged || update.selectionSet || update.focusChanged || forced || run || refresh) {
+			if (update.docChanged || update.selectionSet || update.focusChanged || forced || refresh) {
 				queueMicrotask(() => {
 					let result;
 					try {
@@ -1626,14 +1879,15 @@ const typstViewPlugin = (fileId, spaceId, path, text, prelude, locked, typstStat
 							update,
 							updateInWidget: false,
 							widthChanged,
-							forced: forced || Boolean(run),
+							forced,
 							typstState,
 							revision: options.revision,
 							onRequests: options.onRequests,
 							onPanic: options.onPanic,
 							onCompile: options.onCompile,
 							onExternalLink: options.onExternalLink,
-							notebook: options.notebook
+							notebook: options.notebook,
+							renderFrames
 						});
 					} catch (error) {
 						console.error("[typst] decorate panicked:", error);
@@ -1641,7 +1895,10 @@ const typstViewPlugin = (fileId, spaceId, path, text, prelude, locked, typstStat
 						return;
 					}
 					if (result) {
-						const stateEffects = [typstStateEffect.of({ decorations: result.decorations }), tooltipsStateEffect.of(result.tooltips)];
+						const stateEffects = [typstStateEffect.of({ decorations: result.decorations }), tooltipsStateEffect.of({
+							tooltips: result.tooltips,
+							ranges: result.equationRanges
+						})];
 						update.view.dispatch({ effects: stateEffects });
 						remeasureActive(update, result);
 					}
@@ -1680,7 +1937,13 @@ const tooltipViewPlugin = () => ViewPlugin.define((view) => ({ update(update) {
 		}
 		const state = view.state;
 		const pos = state.selection.main.from;
-		const tooltips = state.field(tooltipsStateField);
+		const { tooltips, ranges } = state.field(tooltipsStateField);
+		if (!tooltips.some(({ range }) => pos >= range.start && pos <= range.end)) {
+			if (ranges.some(([start, end]) => pos >= start && pos <= end)) {
+				view.dispatch({ effects: typstRecompileEffect.of(null) });
+				return;
+			}
+		}
 		let tooltip = null;
 		for (const { render, range } of tooltips) {
 			const { start, end } = range;
@@ -1694,8 +1957,8 @@ const tooltipViewPlugin = () => ViewPlugin.define((view) => ({ update(update) {
 				svg.setHTMLUnsafe(render.svg);
 				container.append(svg);
 				tooltip = {
-					pos: start + 1,
-					end: end - 1,
+					pos: start,
+					end,
 					create(tooltipView) {
 						return {
 							dom: container,
@@ -1704,8 +1967,8 @@ const tooltipViewPlugin = () => ViewPlugin.define((view) => ({ update(update) {
 								const endCoords = tooltipView.coordsAtPos(end);
 								return {
 									left: startCoords.left,
-									right: startCoords.right,
-									top: endCoords.top,
+									right: endCoords.right,
+									top: startCoords.top,
 									bottom: endCoords.bottom
 								};
 							}
@@ -1718,8 +1981,35 @@ const tooltipViewPlugin = () => ViewPlugin.define((view) => ({ update(update) {
 		view.dispatch({ effects: tooltipStateEffect.of(tooltip) });
 	});
 } }));
-//#endregion
-//#region src/plugin.ts
+const typstEditingExtensions = [EditorView.inputHandler.of((view, from, to, text) => {
+	if (text !== " " || from !== to) return false;
+	const { state } = view;
+	const pos = from;
+	const bracketPairs = {
+		"(": ")",
+		"[": "]",
+		"{": "}",
+		$: "$"
+	};
+	const before = state.doc.sliceString(pos - 1, pos);
+	const after = state.doc.sliceString(pos, pos + 1);
+	if (!bracketPairs[before] || after !== bracketPairs[before]) return false;
+	view.dispatch({
+		changes: {
+			from: pos,
+			to: pos,
+			insert: " "
+		},
+		selection: { anchor: pos + 1 }
+	});
+	return true;
+}), indentService.of((ctx, pos) => {
+	const last = Math.max(0, pos - 1);
+	const prev = ctx.lineAt(last).text;
+	if (prev.endsWith("$") && prev !== "$") return 0;
+	const indent = /[{[($]\s*$/.test(prev);
+	return ctx.lineIndent(last) + (indent ? ctx.unit : 0);
+})];
 const typstPlugin = (fileId, spaceId, path, text, prelude, locked, typstState, options = {}) => {
 	const extensions = [
 		typstStateField,
@@ -1730,43 +2020,14 @@ const typstPlugin = (fileId, spaceId, path, text, prelude, locked, typstState, o
 		autocompletion({ override: [(context) => autocomplete(context, fileId, typstState)] }),
 		typstKeymap,
 		typstLanguageData,
+		typstSourceSync(fileId, prelude, typstState),
 		typstSyntaxHighlighting(fileId, typstState),
 		typstHoverTooltip(fileId, typstState),
-		addSpaceBeforeClosingBracket,
-		indentService.of((ctx, pos) => {
-			const last = Math.max(0, pos - 1);
-			const prev = ctx.lineAt(last).text;
-			if (prev.endsWith("$") && prev !== "$") return 0;
-			const indent = /[{[($]\s*$/.test(prev);
-			return ctx.lineIndent(last) + (indent ? ctx.unit : 0);
-		})
+		typstEditingExtensions
 	];
 	if (options.notebook) extensions.push(notebookOptionsFacet.of(options.notebook), notebookKeymap);
 	return extensions;
 };
-const addSpaceBeforeClosingBracket = EditorView.inputHandler.of((view, from, to, text) => {
-	if (text === " ") {
-		const { state } = view;
-		const pos = from;
-		const bracketPairs = {
-			"(": ")",
-			"[": "]",
-			"{": "}",
-			$: "$"
-		};
-		const before = state.doc.sliceString(pos - 1, pos);
-		const after = state.doc.sliceString(pos, pos + 1);
-		if (bracketPairs[before] && after === bracketPairs[before]) view.dispatch({
-			changes: {
-				from: pos,
-				to: pos,
-				insert: " "
-			},
-			selection: { anchor: pos + 1 }
-		});
-	}
-	return false;
-});
 //#endregion
 //#region src/static-highlight.ts
 const KEYWORDS = /* @__PURE__ */ new Set([
@@ -2098,4 +2359,4 @@ function stringEnd(line, from) {
 	return line.length;
 }
 //#endregion
-export { TypstWidget, attachFrameInteractions, autocomplete, cellIndexAt, cellStart, cellsOf, compileCache, createFrameContainer, cursorAddVertical, cycleHeading, deleteCell, deleteCellAt, deleteCellText, duplicateCell, duplicateCellAt, duplicateCellText, focusCell, frameActiveDecorations, frameIsInactive, frameSize, hasMarker, insertAtCursor, insertCell, insertCellAt, insertCellText, insertFontFamily, insertTabLike, markerText, mergeCell, mergeCellText, moveCell, moveCellAt, moveCellText, notebookKeymap, notebookOptions, notebookOptionsFacet, notebookRefreshEffect, notebookRunEffect, parseBackticks, rememberDiagnostics, runAllCells, runCell, setCellType, setCellTypeText, splitCell, splitCellText, stripCellMarkers, syncFrameContainer, toLintDiagnostics, toggleAroundSelection, toggleCellType, toggleCode, toggleEmph, toggleEnum, toggleList, toggleListLike, toggleMath, toggleStrike, toggleStrong, toggleUnderline, tooltipStateField, tooltipViewPlugin, tooltipsStateEffect, tooltipsStateField, typstHoverTooltip, typstKeymap, typstLanguageData, typstLinter, typstPlugin, typstRecompileEffect, typstStateField, typstStaticHighlighting, typstSyntaxHighlighting, typstViewPlugin, wrapOrInsert };
+export { NOTEBOOK_CELL_TYPES, TypstWidget, attachFrameInteractions, attributeText, autocomplete, cellIndexAt, cellStart, cellsOf, compileCache, createFrameContainer, currentCell, cursorAddVertical, cycleHeading, deleteCell, deleteCellText, duplicateCell, duplicateCellText, focusCell, frameActiveDecorations, frameIsInactive, frameSize, hasAttribute, hasOutput, hidesSource, insertAtCursor, insertCell, insertCellText, insertFontFamily, insertTabLike, installSharedDefs, mergeCell, mergeCellText, moveCell, notebookKeymap, notebookOptions, notebookOptionsFacet, notebookRefreshEffect, parseBackticks, rememberDiagnostics, rendersInPlace, setCellType, setCellTypeText, splitCell, splitCellText, stripCellAttributes, syncFrameContainer, toLintDiagnostics, toggleAroundSelection, toggleCode, toggleEmph, toggleEnum, toggleList, toggleListLike, toggleMath, toggleStrike, toggleStrong, toggleUnderline, tooltipStateField, tooltipViewPlugin, tooltipsStateEffect, tooltipsStateField, typstEditingExtensions, typstHoverTooltip, typstKeymap, typstLanguageData, typstLinter, typstPlugin, typstRecompileEffect, typstSourceSync, typstStateField, typstStaticHighlighting, typstSyntaxHighlighting, typstViewPlugin, vimKeymapFacet, wrapOrInsert };