@inkbar/core 0.4.0 → 0.6.0

package/dist/dom.mjs

@@ -1,4 +1,4 @@
-import { B as isBubble, Bt as isStandardCallout, D as acceptSuggestion, E as withoutReplies, G as resizedBox, H as keepsAspect, It as confidenceBucket, J as translated, K as resizedRect, Kt as isKnown, L as hasCallout, Q as deriveRect, Qt as mergeLineRects, R as hasCornerHandles, Rt as calloutStroke, S as isThreadRoot, T as threadRoot, U as movedEndpoint, Ut as LINE_ENDINGS, V as isTextMarkup, Vt as withCalloutBounds, W as movedTip, X as openDocument, Y as withBox, Yt as cssVariableDefaults, _ as defaultEnds, _n as InkError, b as isAbandonedNote, d as recogniseStroke, en as readonly, f as DEFAULT_CORNER_RADIUS, fn as rectsIntersect, g as constrain, h as SHAPE_KINDS, i as createInkTemplate, in as invertMatrix, k as createToolStyle, l as placeSignature, m as DEFAULT_SHAPE_SIZE, nn as applyMatrix, o as createMemorySignatureStore, p as DEFAULT_SHAPE_OPTIONS, q as scaled, r as createImageTemplate, s as createSignatureLibrary, tn as writable, un as rectFromPoints, v as isPointerOnlyKind, vn as isInkError, w as threadOf, y as shapeInput, z as hasRectGeometry, zt as freeTextBox } from "./signatures-DF2VmNVa.mjs";
+import { $t as derived, B as isTextMarkup, Bt as withCalloutBounds, E as withoutReplies, G as resizedRect, Gt as isKnown, H as movedEndpoint, Ht as LINE_ENDINGS, I as hasCallout, J as withBox, Jt as cssVariableDefaults, K as scaled, L as hasCornerHandles, Lt as calloutStroke, O as createToolStyle, Qt as createRecordStore, R as hasRectGeometry, Rt as freeTextBox, S as isThreadRoot, T as threadRoot, U as movedTip, V as keepsAspect, W as resizedBox, Y as openDocument, Z as deriveRect, Zt as mergeLineRects, _ as defaultEnds, b as isAbandonedNote, bn as isInkError, d as recogniseStroke, dn as rectFromPoints, en as readonly, f as DEFAULT_CORNER_RADIUS, g as constrain, h as SHAPE_KINDS, i as createInkTemplate, in as invertMatrix, l as placeSignature, m as DEFAULT_SHAPE_SIZE, mn as rectsIntersect, nn as applyMatrix, o as createMemorySignatureStore, p as DEFAULT_SHAPE_OPTIONS, q as translated, r as createImageTemplate, s as createSignatureLibrary, tn as writable, tt as isProduction, v as isPointerOnlyKind, w as threadOf, y as shapeInput, yn as InkError, z as isBubble, zt as isStandardCallout } from "./signatures-D68fuLlt.mjs";
 import { ALargeSmall, AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, Check, ChevronDown, ChevronLeft, ChevronRight, Circle, CircleDashed, Hexagon, Highlighter, ICON_ATTRIBUTES, Italic, MessageCircle, MessageSquare, MessageSquareText, Minus, MoveUpRight, PenLine, PenTool, Plus, RectangleHorizontal, Redo2, Search, Signature, Slash, SpellCheck2, Square, SquareDashed, SquareDashedMousePointer, Star, Strikethrough, TextCursor, Trash2, Type, Underline, Undo2, ZoomIn, ZoomOut } from "@inkbar/icons";
 import { getStroke } from "perfect-freehand";
 //#region src/dom/transform.ts
@@ -500,7 +500,7 @@ function createViewport(opts) {
 			});
 			sync();
 		},
-		scrollToRect(page, rect) {
+		scrollToRect(page, rect, o) {
 			if (mode.get() === "single" && currentPage.get() !== page) {
 				currentPage.set(page);
 				relayout();
@@ -508,11 +508,13 @@ function createViewport(opts) {
 			const box = boxFor(page);
 			if (!box) return;
 			const css = transformFor(page).toCssRect(rect);
-			const o = origin();
-			const top = o.y + box.top + css.top;
-			if (top < container.scrollTop || top + css.height > container.scrollTop + container.clientHeight) container.scrollTop = Math.max(0, top - (container.clientHeight - css.height) / 2);
-			const left = o.x + box.left + css.left;
-			if (left < container.scrollLeft || left + css.width > container.scrollLeft + container.clientWidth) container.scrollLeft = Math.max(0, left - (container.clientWidth - css.width) / 2);
+			const at = origin();
+			const to = { behavior: o?.behavior ?? "auto" };
+			const top = at.y + box.top + css.top;
+			if (top < container.scrollTop || top + css.height > container.scrollTop + container.clientHeight) to.top = Math.max(0, top - (container.clientHeight - css.height) / 2);
+			const left = at.x + box.left + css.left;
+			if (left < container.scrollLeft || left + css.width > container.scrollLeft + container.clientWidth) to.left = Math.max(0, left - (container.clientWidth - css.width) / 2);
+			if (to.top !== void 0 || to.left !== void 0) container.scrollTo(to);
 			sync();
 		},
 		transformFor,
@@ -629,7 +631,7 @@ function watchDevicePixelRatio(view, current, onChange) {
 }
 //#endregion
 //#region src/dom/page-renderer.ts
-const isCancellation$1 = (error) => error?.name === "RenderingCancelledException";
+const isCancellation$2 = (error) => error?.name === "RenderingCancelledException";
 function createPageRenderer(opts) {
 	const { document: doc, page, host } = opts;
 	const view = host.ownerDocument.defaultView;
@@ -715,7 +717,7 @@ function createPageRenderer(opts) {
 			opts.onRendered?.();
 		} catch (error) {
 			if (canvas && canvas !== current) release(canvas);
-			if (!((destroyed || gen !== generation) && isCancellation$1(error)) && !destroyed) opts.onError?.(error);
+			if (!((destroyed || gen !== generation) && isCancellation$2(error)) && !destroyed) opts.onError?.(error);
 		} finally {
 			if (gen === generation) settle();
 		}
@@ -966,6 +968,8 @@ const CORNERS$1 = [
 ];
 /** Width in CSS px of the band along a mask's edge that takes presses. */
 const MASK_EDGE = 6;
+/** Width in CSS px of the band straddling a text box's edge, which drags the box. */
+const TEXT_EDGE = 6;
 /**
 * Syncs an element's edit handles (`.ink-handle[data-handle]`) with `spec`. Each is an 8px
 * `position:absolute; pointer-events:auto` box centred on its point; its look is the theme's.
@@ -999,15 +1003,62 @@ function syncHandles(node, spec) {
 		h.style.top = `${at.y - HANDLE_PX / 2}px`;
 	}
 }
+/** Width in CSS px a thin stroke's invisible hit twin is widened to. */
+const HIT_STROKE = 8;
+/**
+* True when `a` is drawn as a stroke alone (a line, polyline, ink, or an unfilled square,
+* circle or polygon with a border), so a press beside the stroke would miss it. These get an
+* invisible, wider hit twin of their geometry.
+*/
+function hasHitTwin(a) {
+	switch (a.type) {
+		case "line":
+		case "polyline":
+		case "ink": return true;
+		case "polygon":
+		case "square":
+		case "circle": return a.interiorColor === void 0 && a.width > 0;
+		default: return false;
+	}
+}
+/** The width in CSS px of `a`'s hit twin: 8px, or the drawn stroke if that is wider. */
+function hitWidth(a, t) {
+	return Math.max(HIT_STROKE, "width" in a ? t.toCssLength(a.width) : 0);
+}
 /**
 * The CSS box an annotation's default visual occupies. Usually `toCssRect(a.rect)`. Stroked
 * paths (lines, polylines, polygons, ink) use the bounds of their own points instead of
 * `rect` (which may already carry stroke padding, as a derived ink rect does), padded once by
 * half their stroke width on every side, at least 1px in all, so a horizontal or vertical
-* line still has a box to draw and hit-test in. Custom elements do not use this: they sit on
-* `toCssRect(a.rect)`.
+* line still has a box to draw and hit-test in. A shape with a hit twin (see `hasHitTwin`)
+* is padded by at least 4px more, so its wider hit area is not clipped. Custom elements do
+* not use this: they sit on `toCssRect(a.rect)`.
 */
 function annotationBox(a, t) {
+	const drawn = handleBox(a, t);
+	if (!hasHitTwin(a)) return drawn;
+	const pad = hitPad(a, t);
+	return {
+		left: drawn.left - pad,
+		top: drawn.top - pad,
+		width: drawn.width + pad * 2,
+		height: drawn.height + pad * 2
+	};
+}
+/**
+* How far past `handleBox` a shape with a hit twin extends its element: the twin's overhang
+* beyond the drawn stroke, and at least 4px.
+*/
+function hitPad(a, t) {
+	const overhang = Math.max(0, hitWidth(a, t) - t.toCssLength("width" in a ? a.width : 0));
+	return Math.max(HIT_STROKE / 2, overhang / 2);
+}
+/**
+* The CSS box an annotation's edit handles and resizing work on: `annotationBox` without the
+* padding its hit twin needs. `toCssRect(a.rect)` for a rect-shaped annotation; the padded
+* bounds of its points for a stroked path.
+*/
+function handleBox(a, t) {
 	const points = a.type === "line" ? [a.start, a.end] : a.type === "polyline" || a.type === "polygon" ? a.vertices : a.type === "ink" ? a.inklist.flat() : void 0;
 	if (!points || points.length === 0 || !("width" in a)) return t.toCssRect(a.rect);
 	const box = t.toCssRect(pointBounds(points));
@@ -1200,7 +1251,7 @@ function renderAnnotationContent(el, a, t) {
 			text.style.height = `${inner.height}px`;
 		}
 		text.style.pointerEvents = "auto";
-		el.append(text);
+		el.append(text, edgeBand(doc, box, freeTextLocalBox(a, t)));
 		appendSelectionFrame(el, a, t);
 		return;
 	}
@@ -1210,6 +1261,8 @@ function renderAnnotationContent(el, a, t) {
 	}
 	const svg = boxSvg(doc, box.width, box.height);
 	svg.classList.add("ink-annotation-shape");
+	/** Invisible wider copies of stroke-only geometry, added once the drawn shapes are. */
+	const twins = [];
 	switch (a.type) {
 		case "highlight":
 			for (const q of a.quads) svg.append(node("polygon", {
@@ -1252,23 +1305,34 @@ function renderAnnotationContent(el, a, t) {
 		case "square":
 		case "circle": {
 			const sw = t.toCssLength(a.width);
-			const shape = a.type === "square" ? node("rect", {
-				x: sw / 2,
-				y: sw / 2,
-				width: Math.max(0, box.width - sw),
-				height: Math.max(0, box.height - sw),
-				...a.cornerRadius ? { rx: t.toCssLength(a.cornerRadius) } : {}
-			}) : node("ellipse", {
-				cx: box.width / 2,
-				cy: box.height / 2,
-				rx: Math.max(0, box.width / 2 - sw / 2),
-				ry: Math.max(0, box.height / 2 - sw / 2)
-			});
+			const pad = hasHitTwin(a) ? hitPad(a, t) : 0;
+			const w = box.width - pad * 2;
+			const h = box.height - pad * 2;
+			const geometry = a.type === "square" ? {
+				name: "rect",
+				attrs: {
+					x: pad + sw / 2,
+					y: pad + sw / 2,
+					width: Math.max(0, w - sw),
+					height: Math.max(0, h - sw),
+					...a.cornerRadius ? { rx: t.toCssLength(a.cornerRadius) } : {}
+				}
+			} : {
+				name: "ellipse",
+				attrs: {
+					cx: box.width / 2,
+					cy: box.height / 2,
+					rx: Math.max(0, w / 2 - sw / 2),
+					ry: Math.max(0, h / 2 - sw / 2)
+				}
+			};
+			const shape = node(geometry.name, geometry.attrs);
 			shape.setAttribute("fill", a.interiorColor ?? "none");
 			shape.setAttribute("stroke", a.color);
 			shape.setAttribute("stroke-width", String(sw));
 			dash(shape, a.dashes, t);
 			svg.append(shape);
+			if (hasHitTwin(a)) twins.push(hitTwin(node, geometry.name, geometry.attrs, hitWidth(a, t)));
 			svg.setAttribute("opacity", String(a.opacity));
 			break;
 		}
@@ -1320,6 +1384,10 @@ function renderAnnotationContent(el, a, t) {
 			});
 			dash(stroked, a.dashes, t);
 			svg.append(stroked);
+			if (hasHitTwin(a)) twins.push(hitTwin(node, stroked.tagName, {
+				points: stroked.getAttribute("points"),
+				"stroke-linejoin": "round"
+			}, hitWidth(a, t)));
 			const ends = endingKinds(a);
 			if (ends && pts.length >= 2) for (const [name, kind, tip, other] of [[
 				"head",
@@ -1344,6 +1412,11 @@ function renderAnnotationContent(el, a, t) {
 				});
 				ending.setAttribute("data-ending", name);
 				svg.append(ending);
+				twins.push(hitTwin(node, "path", {
+					d,
+					"stroke-linejoin": "round",
+					"stroke-linecap": "round"
+				}, hitWidth(a, t)));
 			}
 			svg.setAttribute("opacity", String(a.opacity));
 			break;
@@ -1356,14 +1429,54 @@ function renderAnnotationContent(el, a, t) {
 					d: outlinePath(outline),
 					fill: a.color
 				}));
+				twins.push(hitTwin(node, "polyline", {
+					points: path.map(local).join(" "),
+					"stroke-linejoin": "round",
+					"stroke-linecap": "round"
+				}, hitWidth(a, t)));
 			});
 			svg.setAttribute("opacity", String(a.opacity));
 	}
 	for (const shape of svg.children) shape.setAttribute("pointer-events", "visiblePainted");
+	svg.append(...twins);
 	el.append(svg);
 	appendCommentMarker(el, a, t);
 }
 /**
+* An invisible copy of a stroke-only shape's geometry, `width` CSS px wide, that takes
+* presses on the stroke alone (`[data-ink-hit-stroke]`), so a thin line is easy to hit.
+*/
+function hitTwin(node, name, attrs, width) {
+	const twin = node(name, attrs);
+	twin.setAttribute("data-ink-hit-stroke", "");
+	twin.setAttribute("fill", "none");
+	twin.setAttribute("stroke", "transparent");
+	twin.setAttribute("stroke-width", String(width));
+	twin.setAttribute("pointer-events", "stroke");
+	return twin;
+}
+/**
+* The band a press on a free text's edge lands on: an invisible `rect[data-ink-edge]` stroke
+* `TEXT_EDGE` px wide along the text box's edge, half inside it and half out, in its own SVG
+* over the element. A press inside the box edits it; one on the band selects and drags it.
+* It is there whether or not the box draws a border. Geometry only.
+*/
+function edgeBand(doc, el, box) {
+	const svg = boxSvg(doc, el.width, el.height);
+	const band = doc.createElementNS(SVG$2, "rect");
+	band.setAttribute("x", String(box.left));
+	band.setAttribute("y", String(box.top));
+	band.setAttribute("width", String(box.width));
+	band.setAttribute("height", String(box.height));
+	band.setAttribute("fill", "none");
+	band.setAttribute("stroke", "transparent");
+	band.setAttribute("stroke-width", String(TEXT_EDGE));
+	band.setAttribute("pointer-events", "stroke");
+	band.setAttribute("data-ink-edge", "");
+	svg.append(band);
+	return svg;
+}
+/**
 * A stamp's `img.ink-stamp`, filling the element's box. The image is upright in user space
 * turned by the stamp's `rotation` (anticlockwise), and the page turns it again on screen
 * (clockwise), so it is drawn turned by the difference: a signature placed against the page's
@@ -1660,7 +1773,8 @@ const SAME_PX = .5;
 const MIN_WIDTH_EM = 2;
 /**
 * Opens an editor on `el`, the overlay element showing `a` (or a stand-in for a box not in the
-* store yet). `Escape` commits; a press outside the editor, or focus leaving it, commits too.
+* store yet), with the caret at `opts.caret` or after the text. `Escape` commits; a press
+* outside the editor, or focus leaving it, commits too.
 * Closing while the editor has focus hands focus to `el`. Keys typed in the
 * editor stop there, so no viewport or tool shortcut sees them. Opening a second editor on the
 * same element commits the first.
@@ -1716,7 +1830,7 @@ function editFreeText(el, a, opts) {
 		return Math.abs(grown) < SAME_PX ? 0 : grown;
 	};
 	let closed = false;
-	const finish = (commit) => {
+	const finish = (commit, how) => {
 		if (closed) return;
 		closed = true;
 		const contents = read();
@@ -1730,27 +1844,27 @@ function editFreeText(el, a, opts) {
 		box?.style.removeProperty("visibility");
 		el.style.height = `${base.height}px`;
 		refitBubble(el, a, opts.transform, base);
-		if (commit) opts.commit(contents, next, grown);
+		if (commit) opts.commit(contents, next, grown, how);
 		else opts.cancel();
 	};
 	const onOutside = (e) => {
 		if (e.target instanceof Node && field.contains(e.target)) return;
 		closingPresses.add(e);
-		finish(true);
+		finish(true, "press");
 	};
 	view?.addEventListener("pointerdown", onOutside, true);
 	field.addEventListener("keydown", (e) => {
 		e.stopPropagation();
 		if (e.key === "Escape" && !e.isComposing) {
 			e.preventDefault();
-			finish(true);
+			finish(true, "escape");
 		}
 	});
 	field.addEventListener("focusout", (e) => {
 		if (!doc.hasFocus()) return;
 		const to = e.relatedTarget;
 		if (to instanceof Node && field.contains(to)) return;
-		finish(true);
+		finish(true, "focus");
 	});
 	field.addEventListener("paste", (e) => {
 		e.preventDefault();
@@ -1762,14 +1876,17 @@ function editFreeText(el, a, opts) {
 	field.focus({ preventScroll: true });
 	const selection = doc.getSelection();
 	if (selection) {
-		const range = doc.createRange();
-		range.selectNodeContents(field);
-		range.collapse(false);
+		let range = opts.caret && caretIn(field, opts.caret);
+		if (!range) {
+			range = doc.createRange();
+			range.selectNodeContents(field);
+			range.collapse(false);
+		}
 		selection.removeAllRanges();
 		selection.addRange(range);
 	}
 	grow();
-	const editor = { close: (commit) => finish(commit) };
+	const editor = { close: (commit) => finish(commit, "api") };
 	editors.set(el, editor);
 	return editor;
 }
@@ -1785,37 +1902,44 @@ function canEditFreeText(a, el) {
 * Opens an editor on the overlay element `el` for the free-text box `id`, wired to the store: a
 * commit is one `update` with the text and the grown rect (none when neither changed), and an
 * empty box is removed, as an abandoned note is. A speech bubble is the exception: its outline
-* shows without text, so it is kept. Returns undefined when the box cannot be
-* edited (`canEditFreeText`).
+* shows without text, so it is kept. `onClose` runs after the store change, with what closed
+* the editor; `caret` is a client point to put the caret at (`editFreeText`). Returns
+* undefined when the box cannot be edited (`canEditFreeText`).
 */
-function editFreeTextIn(store, el, id, transform) {
+function editFreeTextIn(store, el, id, transform, opts = {}) {
 	const a = store._getProposed(id) ?? store.get(id);
 	if (!canEditFreeText(a, el)) return void 0;
 	const current = () => {
 		const now = store._getProposed(id) ?? store.get(id);
 		return now?.type === "freetext" ? now : void 0;
 	};
+	const write = (contents, grown) => {
+		const now = current();
+		if (!now) return;
+		if (contents.trim() === "" && !isBubble(now)) {
+			store.remove(id);
+			return;
+		}
+		if (grown === 0) {
+			if (contents !== now.contents) store.update(id, { contents });
+			return;
+		}
+		store.update(id, {
+			contents,
+			...grownFreeText(now, grown, transform)
+		});
+	};
 	return editFreeText(el, a, {
 		transform,
-		commit(contents, _rect, grown) {
-			const now = current();
-			if (!now) return;
-			if (contents.trim() === "" && !isBubble(now)) {
-				store.remove(id);
-				return;
-			}
-			if (grown === 0) {
-				if (contents !== now.contents) store.update(id, { contents });
-				return;
-			}
-			store.update(id, {
-				contents,
-				...grownFreeText(now, grown, transform)
-			});
+		caret: opts.caret,
+		commit(contents, _rect, grown, how) {
+			write(contents, grown);
+			opts.onClose?.(how);
 		},
 		cancel() {
 			const now = current();
 			if (now && now.contents.trim() === "" && !isBubble(now)) store.remove(id);
+			opts.onClose?.("api");
 		}
 	});
 }
@@ -1844,6 +1968,28 @@ function grownFreeText(a, grown, t) {
 	};
 	return withBox(a, box, resized.callout.map((p, i) => i === last ? p : down(p)));
 }
+/**
+* A collapsed range at the text position under a client point, if that position is in `field`.
+* The editor lies over the box with the same look, so a point on the box lands on the same
+* character in the editor.
+*/
+function caretIn(field, at) {
+	const doc = field.ownerDocument;
+	let node;
+	let offset = 0;
+	if (typeof doc.caretPositionFromPoint === "function") {
+		const p = doc.caretPositionFromPoint(at.clientX, at.clientY);
+		if (p) ({offsetNode: node, offset} = p);
+	} else if (typeof doc.caretRangeFromPoint === "function") {
+		const r = doc.caretRangeFromPoint(at.clientX, at.clientY);
+		if (r) ({startContainer: node, startOffset: offset} = r);
+	}
+	if (!node || !field.contains(node)) return void 0;
+	const range = doc.createRange();
+	range.setStart(node, offset);
+	range.collapse(true);
+	return range;
+}
 /** `plaintext-only` where the browser has it, else `true` (paste and formatting are then guarded). */
 function makeEditable(field) {
 	try {
@@ -1874,7 +2020,7 @@ function insertText(field, text) {
 }
 //#endregion
 //#region src/pdfjs/render-region.ts
-const isCancellation = (error) => error?.name === "RenderingCancelledException";
+const isCancellation$1 = (error) => error?.name === "RenderingCancelledException";
 /**
 * Draws `userRect` of `page` (0-based) into `canvas` at `scale` device pixels per user-space
 * unit (times `/UserUnit`, as PDF.js applies it), turned by `rotation`: the page's /Rotate plus
@@ -1917,7 +2063,7 @@ async function renderRegion(doc, page, userRect, scale, canvas, signal, rotation
 	try {
 		await task.promise;
 	} catch (error) {
-		if (signal?.aborted && isCancellation(error)) throw signal.reason;
+		if (signal?.aborted && isCancellation$1(error)) throw signal.reason;
 		throw error;
 	} finally {
 		signal?.removeEventListener("abort", cancel);
@@ -2160,27 +2306,69 @@ const LABELS = {
 	mask: "Mask",
 	redact: "Redaction"
 };
-/** The `data-confidence` bucket for a suggested redaction; undefined for everything else. */
-function confidenceAttr(a) {
-	return a.type === "redact" && a.suggestion ? confidenceBucket(a.suggestion.confidence) : void 0;
-}
 function ariaLabel(a) {
-	const base = a.type === "redact" && a.origin === "suggested" ? "Suggested redaction" : a.subject === "Signature" && (a.type === "ink" || a.type === "stamp") ? "Signature" : LABELS[a.type];
+	const base = a.subject === "Signature" && (a.type === "ink" || a.type === "stamp") ? "Signature" : LABELS[a.type];
 	const named = hasComment(a) ? `${base} with comment` : base;
 	return a.author ? `${named} by ${a.author}` : named;
 }
 /** Reading order in user space: top edge first (y grows upwards), then left edge. */
-function readingOrder(a, b) {
+function readingOrder$1(a, b) {
 	return b.rect.y + b.rect.height - (a.rect.y + a.rect.height) || a.rect.x - b.rect.x;
 }
+/** A decoration's data key: lower-case kebab, as written after `data-`. */
+const DECORATION_KEY = /^[a-z][a-z0-9-]*$/;
+/**
+* `data-*` keys core writes on an annotation element or inside it; a decoration cannot set
+* them. `data-ink-*` is core's too.
+*/
+const RESERVED_DATA = /* @__PURE__ */ new Set([
+	"annotation",
+	"type",
+	"source",
+	"locked",
+	"state",
+	"custom",
+	"handle",
+	"framed",
+	"align",
+	"bubble",
+	"border",
+	"icon",
+	"ending"
+]);
+/** Skipped decoration keys and classes already warned about. */
+const warnedDecorations = /* @__PURE__ */ new Set();
+function warnDecoration(what, why) {
+	if (isProduction() || warnedDecorations.has(what)) return;
+	warnedDecorations.add(what);
+	console.warn(`[inkbar] annotation decoration: skipped ${what}: ${why}`);
+}
+function usableData(key) {
+	if (!DECORATION_KEY.test(key)) {
+		warnDecoration(`data key "${key}"`, "keys are lower-case kebab");
+		return false;
+	}
+	if (RESERVED_DATA.has(key) || key === "ink" || key.startsWith("ink-")) {
+		warnDecoration(`data key "${key}"`, "core sets it");
+		return false;
+	}
+	return true;
+}
+function usableClass(name) {
+	if (name.startsWith("ink-")) {
+		warnDecoration(`class "${name}"`, "`ink-` classes are core's");
+		return false;
+	}
+	if (name === "" || /\s/.test(name)) {
+		warnDecoration(`class "${name}"`, "not a single class name");
+		return false;
+	}
+	return true;
+}
 function setFlag(node, key, on) {
 	if (on) node.dataset[key] = "";
 	else delete node.dataset[key];
 }
-function setData(node, key, value) {
-	if (value === void 0) delete node.dataset[key];
-	else node.dataset[key] = value;
-}
 function createOverlay(opts) {
 	const { store, page } = opts;
 	const doc = opts.host.ownerDocument;
@@ -2199,6 +2387,8 @@ function createOverlay(opts) {
 	/** What each element's content was last drawn from; absent when it has none of ours. */
 	const drawn = /* @__PURE__ */ new Map();
 	const hovered = /* @__PURE__ */ new Set();
+	/** The decoration each element last got, so a later one can drop what it no longer has. */
+	const decorated = /* @__PURE__ */ new WeakMap();
 	let order = [];
 	let destroyed = false;
 	function stateOf(id, selected) {
@@ -2213,7 +2403,17 @@ function createOverlay(opts) {
 		node.setAttribute("aria-pressed", String(state === "selected"));
 		node.tabIndex = !anyHere || state === "selected" ? 0 : -1;
 		const a = store.get(id);
-		syncHandles(node, a && !a.locked && state === "selected" && selectToolActive() ? handleSpec(node, a) : { kind: "none" });
+		syncHandles(node, a && !a.locked && state === "selected" && editsSelection() ? handleSpec(node, a) : { kind: "none" });
+	}
+	/** `handleBox` relative to an element at `left`,`top`. */
+	function handleLocalBox(a, left, top) {
+		const box = handleBox(a, transform);
+		return {
+			left: box.left - left,
+			top: box.top - top,
+			width: box.width,
+			height: box.height
+		};
 	}
 	/**
 	* Line ends for a line, corners for what a corner drag resizes (a free text's on its text
@@ -2242,8 +2442,7 @@ function createOverlay(opts) {
 			...freeTextLocalBox(a, transform)
 		} : {
 			kind: "corners",
-			width: parseFloat(node.style.width) || 0,
-			height: parseFloat(node.style.height) || 0
+			...handleLocalBox(a, left, top)
 		};
 		if (!hasCallout(a)) return corners;
 		const tip = transform.toCss(a.callout[0]);
@@ -2257,11 +2456,13 @@ function createOverlay(opts) {
 	}
 	/**
 	* True while the tool controller marks the tool root (an ancestor) with a select tool,
-	* `data-ink-tool="select"` or `"select-text"`.
+	* `data-ink-tool="select"` or `"select-text"`, or with `data-ink-made`: what a creation tool
+	* just made can be moved and resized too.
 	*/
-	function selectToolActive() {
-		const tool = opts.host.closest("[data-ink-tool]")?.getAttribute("data-ink-tool");
-		return tool === "select" || tool === "select-text";
+	function editsSelection() {
+		const root = opts.host.closest("[data-ink-tool]");
+		const tool = root?.getAttribute("data-ink-tool");
+		return tool === "select" || tool === "select-text" || root?.hasAttribute("data-ink-made") === true;
 	}
 	const toolRoot = opts.host.closest("[data-ink-tool]") ?? opts.host.closest("[data-ink-viewport]");
 	const Observer = doc.defaultView?.MutationObserver;
@@ -2273,16 +2474,48 @@ function createOverlay(opts) {
 		});
 		toolObserver.observe(toolRoot, {
 			attributes: true,
-			attributeFilter: ["data-ink-tool"]
+			attributeFilter: ["data-ink-tool", "data-ink-made"]
 		});
 	}
 	function applyAttributes(node, a) {
 		node.dataset.type = a.type;
 		node.dataset.source = a.source;
 		setFlag(node, "locked", a.locked === true);
-		setData(node, "origin", a.type === "redact" ? a.origin : void 0);
-		setData(node, "confidence", confidenceAttr(a));
 		node.setAttribute("aria-label", ariaLabel(a));
+		applyDecoration(node, a);
+	}
+	/** The app's data attributes, classes and description, from `decorate`; a throw adds none. */
+	function applyDecoration(node, a) {
+		let decoration;
+		try {
+			decoration = opts.decorate?.(a);
+		} catch (error) {
+			console.error(error);
+		}
+		const prev = decorated.get(node);
+		if (!decoration && !prev) return;
+		const next = {
+			data: /* @__PURE__ */ new Set(),
+			classes: /* @__PURE__ */ new Set(),
+			description: false
+		};
+		for (const [key, value] of Object.entries(decoration?.data ?? {})) {
+			if (!usableData(key)) continue;
+			node.setAttribute(`data-${key}`, value);
+			next.data.add(key);
+		}
+		for (const name of decoration?.classes ?? []) {
+			if (!usableClass(name)) continue;
+			node.classList.add(name);
+			next.classes.add(name);
+		}
+		if (decoration?.description) {
+			node.setAttribute("aria-description", decoration.description);
+			next.description = true;
+		} else if (prev?.description) node.removeAttribute("aria-description");
+		for (const key of prev?.data ?? []) if (!next.data.has(key)) node.removeAttribute(`data-${key}`);
+		for (const name of prev?.classes ?? []) if (!next.classes.has(name)) node.classList.remove(name);
+		decorated.set(node, next);
 	}
 	function applyGeometry(node, a) {
 		const box = opts.isCustom?.(a) === true ? transform.toCssRect(a.rect) : annotationBox(a, transform);
@@ -2496,7 +2729,7 @@ function createOverlay(opts) {
 	}
 	function render() {
 		if (destroyed) return;
-		const current = withoutReplies(store.list.get()).filter((a) => a.page === page).sort(readingOrder);
+		const current = withoutReplies(store.list.get()).filter((a) => a.page === page).sort(readingOrder$1);
 		const ids = new Set(current.map((a) => a.id));
 		const active = doc.activeElement;
 		let focusId = [...elements].find(([, n]) => n === active)?.[0];
@@ -2561,6 +2794,13 @@ function createOverlay(opts) {
 			render();
 		},
 		elementFor: (id) => elements.get(id),
+		redecorate() {
+			if (destroyed) return;
+			for (const [id, node] of elements) {
+				const a = store.get(id);
+				if (a) applyDecoration(node, a);
+			}
+		},
 		destroy() {
 			if (destroyed) return;
 			closeEditors();
@@ -2580,114 +2820,1730 @@ function createOverlay(opts) {
 	};
 }
 //#endregion
-//#region src/dom/page-mount.ts
-/** Canvas, text layer and annotation overlay for one page, stacked in that order. */
-function createPageMount(opts) {
-	const { document, page, host, transform } = opts;
-	const callbacks = (layer) => ({
-		...opts.onError ? { onError: (error) => opts.onError?.(error, layer) } : {},
-		...opts.onRendered ? { onRendered: () => opts.onRendered?.(layer) } : {}
-	});
-	const renderer = createPageRenderer({
-		document,
-		page,
-		host,
-		transform,
-		...opts.devicePixelRatio === void 0 ? {} : { devicePixelRatio: opts.devicePixelRatio },
-		...callbacks("canvas")
-	});
-	const textLayer = createTextLayer({
-		document,
-		page,
-		host,
-		transform,
-		...callbacks("text")
-	});
-	const overlay = createOverlay({
-		host,
-		page,
-		store: opts.store,
-		transform,
-		document,
-		...opts.devicePixelRatio === void 0 ? {} : { devicePixelRatio: opts.devicePixelRatio },
-		...opts.onActivate ? { onActivate: (id) => opts.onActivate?.(id) } : {},
-		...opts.isCustom ? { isCustom: (a) => opts.isCustom?.(a) === true } : {}
+//#region src/dom/plugins/api/command.ts
+const DEFAULT_ERROR_STATUS = "Something went wrong.";
+/** A failure that is the run being cancelled, not a bug: not logged, no error status. */
+function isCancellation(error) {
+	if (isInkError(error) && error.code === "DocumentDestroyed") return true;
+	return error instanceof Error && error.name === "AbortError";
+}
+function createCommand(ctx, id, label, run, opts = {}) {
+	const status = writable("");
+	let controller = null;
+	ctx.onDocument(() => () => {
+		controller?.abort();
+		status.set("");
 	});
-	return {
-		renderer,
-		textLayer,
-		overlay,
-		update(next) {
-			renderer.update(next);
-			textLayer.update(next);
-			overlay.update(next);
-		},
-		destroy() {
-			overlay.destroy();
-			textLayer.destroy();
-			renderer.destroy();
+	return ctx.commands.add({
+		id,
+		label,
+		...opts.icon && { icon: opts.icon },
+		...opts.enabled && { enabled: opts.enabled },
+		status: readonly(status),
+		async run() {
+			const doc = ctx.document.get();
+			if (!doc) return;
+			const own = new AbortController();
+			controller = own;
+			status.set("");
+			try {
+				const result = await run({
+					doc,
+					signal: own.signal
+				});
+				if (!own.signal.aborted) status.set(result ?? "");
+			} catch (error) {
+				if (own.signal.aborted || isCancellation(error)) return;
+				console.error(error);
+				status.set(opts.errorStatus ?? DEFAULT_ERROR_STATUS);
+			} finally {
+				if (controller === own) controller = null;
+			}
 		}
-	};
+	});
 }
 //#endregion
-//#region src/dom/tools/options.ts
-function createToolOptions(tools = []) {
-	const byId = /* @__PURE__ */ new Map();
-	const views = /* @__PURE__ */ new Map();
-	const entry = (id) => {
-		const w = byId.get(id);
-		if (!w) throw new RangeError(`Unknown tool ${id}`);
-		return w;
-	};
-	function register(list) {
-		for (const t of list) {
-			if (byId.has(t.id)) continue;
-			const w = writable({ ...t.defaultOptions ?? {} });
-			byId.set(t.id, w);
-			views.set(t.id, readonly(w));
-		}
-	}
-	register(tools);
-	return {
-		readable(id) {
-			entry(id);
-			return views.get(id);
-		},
-		get: (id) => entry(id).get(),
-		merge(id, patch) {
-			const w = entry(id);
-			w.set({
-				...w.get(),
-				...patch
-			});
-		},
-		register
+//#region src/dom/annotation-element.ts
+/** The overlay element drawn for annotation `id` under `root`, if it is in the DOM. */
+function annotationElementFor(root, id) {
+	return root.querySelector(`[data-annotation="${CSS.escape(id)}"]`);
+}
+/**
+* Resolves the overlay element for `id` and keeps resolving while `root`'s subtree changes:
+* the overlay creates and removes these elements outside any framework (a page mounts as it
+* scrolls into view), so a popover anchored to one has to follow. Calls `onChange` once now
+* and again whenever the answer changes. The returned function stops observing.
+*/
+function observeAnnotationElement(root, id, onChange) {
+	let last;
+	const resolve = () => {
+		const found = annotationElementFor(root, id);
+		if (found === last) return;
+		last = found;
+		onChange(found);
 	};
+	resolve();
+	const observer = new MutationObserver(resolve);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	return () => observer.disconnect();
 }
 //#endregion
-//#region src/dom/tools/controller.ts
-/** Host-relative CSS point for a client point. */
-function cssIn(host, e) {
-	const r = host.getBoundingClientRect();
-	return {
-		x: e.clientX - r.left,
-		y: e.clientY - r.top
-	};
+//#region src/dom/popover-focus.ts
+/**
+* A press that will activate an annotation is not a dismissal: the popover follows the
+* activation. Mirrors the overlay's rule: a press on the annotation element or on its drawn
+* shape activates; a press on a custom element's own content belongs to that content.
+*/
+function shouldKeepOpenOnAnnotation(target) {
+	if (!(target instanceof Element)) return false;
+	const annotation = target.closest("[data-annotation]");
+	if (!annotation) return false;
+	return target === annotation || !annotation.hasAttribute("data-custom");
 }
-/** Like `cssIn`, clamped to the host's box, so a drag past the page edge stops at the edge. */
-function clampedCssIn(host, e) {
-	const r = host.getBoundingClientRect();
+function createFocusReturn(opts) {
+	let fallbacks = [];
+	/** Set by `beforeRemove`: the close comes from removing the anchor's annotation. */
+	let removing = false;
 	return {
-		x: Math.min(Math.max(e.clientX - r.left, 0), r.width),
-		y: Math.min(Math.max(e.clientY - r.top, 0), r.height)
+		beforeRemove(anchor, prefer) {
+			fallbacks = [];
+			removing = true;
+			const siblings = anchor?.parentElement ? [...anchor.parentElement.children].filter((el) => el instanceof HTMLElement && el.hasAttribute("data-annotation")) : [];
+			const i = anchor ? siblings.indexOf(anchor) : -1;
+			if (i >= 0) {
+				const after = siblings.slice(i + 1);
+				const preferred = prefer ? after.filter((el) => el.matches(prefer)) : [];
+				fallbacks.push(...preferred, ...after, ...siblings.slice(0, i).reverse());
+			}
+		},
+		onCloseAutoFocus(event, anchor) {
+			event.preventDefault();
+			const plan = fallbacks;
+			const removed = removing;
+			fallbacks = [];
+			removing = false;
+			const root = opts.root();
+			if (!root) return;
+			const activated = opts.activated();
+			if (activated !== null && annotationElementFor(root, activated)) return;
+			const active = root.ownerDocument.activeElement;
+			if (active && active !== root && root.contains(active)) return;
+			const scroll = root.querySelector("[data-ink-scroll]");
+			(removed ? [...plan, scroll] : [
+				anchor,
+				...plan,
+				scroll
+			]).find((el) => el?.isConnected)?.focus({ preventScroll: true });
+		}
 	};
 }
-/** The mounted page under a client point, with the point in CSS px and user space. */
-function hitFor(ctx, e) {
-	const hit = ctx.viewport.pageAtCss(e.clientX, e.clientY);
-	if (!hit) return void 0;
-	const css = cssIn(hit.host, e);
-	return {
+//#endregion
+//#region src/dom/viewer/dom.ts
+/** `document.createElement` with attributes and children. */
+function h(tag, attrs = {}, ...children) {
+	const el = document.createElement(tag);
+	for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+	el.append(...children);
+	return el;
+}
+function button$1(label, onClick) {
+	const b = h("button", { type: "button" }, label);
+	b.addEventListener("click", onClick);
+	return b;
+}
+//#endregion
+//#region src/dom/viewer/popover.ts
+/** Space between the anchor and the panel, and between the panel and the window edge. */
+const GAP = 6;
+const MARGIN = 8;
+const TABBABLE$1 = "button, input, select, textarea, a[href], [tabindex]";
+/**
+* Positions `panel` (fixed) below the `anchor` rectangle, or above it when only that fits,
+* kept inside the window. For panels anchored to something other than an annotation.
+*/
+function placePanel(panel, anchor) {
+	const { innerWidth: vw, innerHeight: vh } = window;
+	panel.style.position = "fixed";
+	panel.style.left = "0px";
+	panel.style.top = "0px";
+	const w = panel.offsetWidth;
+	const ht = panel.offsetHeight;
+	let top = anchor.bottom + GAP;
+	if (top + ht > vh - MARGIN && anchor.top - GAP - ht >= MARGIN) top = anchor.top - GAP - ht;
+	top = Math.max(MARGIN, Math.min(top, vh - ht - MARGIN));
+	const left = Math.max(MARGIN, Math.min(anchor.left, vw - w - MARGIN));
+	panel.style.left = `${left}px`;
+	panel.style.top = `${top}px`;
+}
+/**
+* Calls `onChange` with `el` while it is under `root` and null while it is not: once now, then
+* whenever that changes. Returns a function that stops observing.
+*/
+function observeElement(root, el, onChange) {
+	let last;
+	const resolve = () => {
+		const found = root.contains(el) ? el : null;
+		if (found === last) return;
+		last = found;
+		onChange(found);
+	};
+	resolve();
+	const observer = new MutationObserver(resolve);
+	observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+	return () => observer.disconnect();
+}
+/**
+* Creates a non-modal `role="dialog"` panel on `<body>`, marked `data-ink-popover` so the theme
+* gives it its tokens, that an app anchors to an annotation with `show(id)` (for instance on
+* `viewer.activated`), or to any element in the viewer with `showAt(el)`. The panel follows the annotation's element as pages mount and unmount:
+* it hides while the element is gone and comes back with it. Tab loops inside the panel, and
+* Escape or a press outside calls `onDismiss`. Call `destroy` when done.
+*/
+function createPopover(opts) {
+	const { root, focusReturn } = opts;
+	const panel = h("div", {
+		...opts.attrs,
+		role: "dialog",
+		"data-ink-popover": "",
+		hidden: ""
+	});
+	document.body.append(panel);
+	/** What the panel is anchored to: an annotation id, or an element from `showAt`. */
+	let anchored = null;
+	let anchor = null;
+	let stopObserving = () => void 0;
+	/** The element that had focus in the panel when the anchor went away. */
+	let stranded = null;
+	const place = () => {
+		if (!anchor || panel.hidden) return;
+		placePanel(panel, anchor.getBoundingClientRect());
+	};
+	const resizes = new ResizeObserver(place);
+	resizes.observe(panel);
+	const onAnchor = (el, closing = false) => {
+		if (anchor) resizes.unobserve(anchor);
+		anchor = el;
+		if (!el) {
+			const active = document.activeElement;
+			if (!closing && !panel.hidden && active instanceof HTMLElement && panel.contains(active)) {
+				const scroll = root.querySelector("[data-ink-scroll]");
+				if (scroll) {
+					stranded = active;
+					scroll.focus({ preventScroll: true });
+				}
+			}
+			panel.hidden = true;
+			return;
+		}
+		resizes.observe(el);
+		const wasHidden = panel.hidden;
+		panel.hidden = false;
+		place();
+		if (wasHidden && stranded) {
+			const back = stranded;
+			stranded = null;
+			const scroll = root.querySelector("[data-ink-scroll]");
+			if (panel.contains(back) && document.activeElement === scroll) back.focus({ preventScroll: true });
+		}
+	};
+	const onKey = (e) => {
+		if (e.key !== "Escape" || panel.hidden || e.defaultPrevented) return;
+		const target = e.target;
+		if (!(target instanceof Node) || !(panel.contains(target) || root.contains(target))) return;
+		e.preventDefault();
+		opts.onDismiss();
+	};
+	const onPress = (e) => {
+		if (panel.hidden || panel.contains(e.target)) return;
+		if (shouldKeepOpenOnAnnotation(e.target)) return;
+		opts.onDismiss();
+	};
+	const onTab = (e) => {
+		if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey) return;
+		const tabbable = [...panel.querySelectorAll(TABBABLE$1)].filter((el) => !el.disabled && el.tabIndex >= 0);
+		const first = tabbable[0];
+		const last = tabbable.at(-1);
+		if (!first || !last) return;
+		const active = document.activeElement;
+		if (e.shiftKey ? active !== first : active !== last) return;
+		e.preventDefault();
+		(e.shiftKey ? last : first).focus();
+	};
+	panel.addEventListener("keydown", onTab);
+	document.addEventListener("keydown", onKey);
+	document.addEventListener("pointerdown", onPress, true);
+	document.addEventListener("scroll", place, true);
+	window.addEventListener("resize", place);
+	return {
+		panel,
+		get anchor() {
+			return anchor;
+		},
+		show(id) {
+			if (id === anchored) return;
+			stopObserving();
+			anchored = id;
+			stopObserving = observeAnnotationElement(root, id, onAnchor);
+		},
+		showAt(el) {
+			if (el === anchored) return;
+			stopObserving();
+			anchored = el;
+			stopObserving = observeElement(root, el, onAnchor);
+		},
+		hide() {
+			if (anchored === null) return;
+			stopObserving();
+			stopObserving = () => void 0;
+			const element = typeof anchored === "string" ? null : anchored;
+			anchored = null;
+			const back = anchor;
+			stranded = null;
+			onAnchor(null, true);
+			queueMicrotask(() => {
+				if (anchored !== null || !panel.isConnected) return;
+				if (element?.isConnected) {
+					const active = document.activeElement;
+					if (!(active && active !== root && root.contains(active))) element.focus({ preventScroll: true });
+					return;
+				}
+				focusReturn.onCloseAutoFocus(new Event("closeautofocus", { cancelable: true }), back);
+			});
+		},
+		destroy() {
+			stopObserving();
+			resizes.disconnect();
+			document.removeEventListener("keydown", onKey);
+			document.removeEventListener("pointerdown", onPress, true);
+			panel.removeEventListener("keydown", onTab);
+			document.removeEventListener("scroll", place, true);
+			window.removeEventListener("resize", place);
+			panel.remove();
+		}
+	};
+}
+//#endregion
+//#region src/dom/plugins/api/card.ts
+function el(tag, className, ...children) {
+	const e = document.createElement(tag);
+	e.className = className;
+	e.append(...children);
+	return e;
+}
+function createCard(ctx, records, opts) {
+	/** Made on first open, in the viewer root the mark is in. */
+	let popover = null;
+	let root = null;
+	/** The record on show. */
+	let shown = null;
+	/** Set while an action runs: the action decides what happens after it. */
+	let acting = false;
+	/** The mark whose card is open: its `aria-expanded` is true. */
+	let expanded = null;
+	const expand = (mark) => {
+		expanded?.setAttribute("aria-expanded", "false");
+		expanded = mark;
+		mark?.setAttribute("aria-expanded", "true");
+	};
+	/** The shown record as it stands now, while it still has a mark. */
+	const current = () => {
+		const record = shown === null ? void 0 : records.find(shown);
+		return record && opts.marked(record) ? record : void 0;
+	};
+	const close = () => {
+		shown = null;
+		expand(null);
+		popover?.hide();
+	};
+	/** Runs `fn` as one undo step, then re-renders, or closes and moves focus on. */
+	const act = (fn) => {
+		if (!popover || !root || shown === null) return;
+		const marks = opts.marks(root);
+		const i = popover.anchor ? marks.indexOf(popover.anchor) : -1;
+		const after = i < 0 ? [] : [...marks.slice(i + 1), ...marks.slice(0, i).reverse()];
+		acting = true;
+		try {
+			ctx.history.batch(fn);
+		} finally {
+			acting = false;
+		}
+		const record = current();
+		if (record) return render(record);
+		after.find((m) => m.isConnected)?.focus({ preventScroll: true });
+		close();
+	};
+	/** Fills the panel from `record`, keeping focus on the same action. */
+	const render = (record) => {
+		const spec = opts.spec(record);
+		const panel = popover.panel;
+		const buttons = () => [...panel.querySelectorAll(".ink-card-actions > button")];
+		const focused = buttons().indexOf(document.activeElement);
+		panel.className = spec.className ? `ink-card ${spec.className}` : "ink-card";
+		panel.setAttribute("aria-label", spec.label ?? spec.title);
+		const parts = [el("p", "ink-card-title", spec.title)];
+		if (spec.meta !== void 0) {
+			const meta = el("p", "ink-card-meta", spec.meta);
+			if (spec.swatch !== void 0) {
+				const swatch = el("span", "ink-card-swatch");
+				swatch.style.background = spec.swatch;
+				meta.prepend(swatch);
+			}
+			parts.push(meta);
+		}
+		if (spec.body !== void 0) parts.push(el("p", "ink-card-body", spec.body));
+		const actions = el("div", "ink-card-actions");
+		for (const [label, fn] of Object.entries(spec.actions)) {
+			const button = el("button", "", label);
+			button.type = "button";
+			button.addEventListener("click", () => act(fn));
+			actions.append(button);
+		}
+		parts.push(actions);
+		panel.replaceChildren(...parts);
+		if (focused >= 0) {
+			const now = buttons();
+			(now[focused] ?? now[0])?.focus({ preventScroll: true });
+		}
+	};
+	ctx.onDocument(() => {
+		const stop = records.list.subscribe(() => {
+			if (acting || shown === null) return;
+			const record = current();
+			if (record) render(record);
+			else close();
+		});
+		return () => {
+			stop();
+			shown = null;
+			expand(null);
+			popover?.destroy();
+			popover = null;
+			root = null;
+		};
+	});
+	return {
+		open(record, mark) {
+			const viewer = mark.closest("[data-ink-root]");
+			if (!viewer) return;
+			if (viewer !== root) {
+				popover?.destroy();
+				root = viewer;
+				popover = createPopover({
+					root: viewer,
+					attrs: { class: "ink-card" },
+					focusReturn: createFocusReturn({
+						root: () => viewer,
+						activated: () => null
+					}),
+					onDismiss: close
+				});
+			}
+			shown = record.id;
+			render(record);
+			popover.showAt(mark);
+			expand(mark);
+			popover.panel.querySelector(".ink-card-actions > button")?.focus();
+		},
+		expanded: (mark) => mark === expanded
+	};
+}
+//#endregion
+//#region src/dom/plugins/api/marks.ts
+/** Events stopped on a mark, so the viewer's root never sees a press on it. */
+const STOPPED = [
+	"pointerdown",
+	"pointerup",
+	"mousedown",
+	"mouseup",
+	"click"
+];
+/** Attributes the plugin's `attrs` cannot set: core sets them, or they have options of their own. */
+const RESERVED = /* @__PURE__ */ new Set([
+	"style",
+	"class",
+	"type"
+]);
+function createMarks(ctx, records, opts) {
+	const applied = /* @__PURE__ */ new WeakMap();
+	const marked = (record) => opts.where?.(record) ?? true;
+	const spec = opts.card?.bind(opts);
+	const card = spec && createCard(ctx, records, {
+		spec,
+		marked,
+		marks: (root) => [...root.querySelectorAll(`.ink-plugin-layer[data-plugin="${ctx.id}"] > button`)].filter((mark) => applied.has(mark))
+	});
+	/** What activating a mark does. */
+	const activate = (record, mark) => {
+		card?.open(record, mark);
+		opts.onActivate?.(record, mark);
+	};
+	const create = (doc) => {
+		const mark = doc.createElement("button");
+		if (opts.className) mark.className = opts.className;
+		for (const type of STOPPED) mark.addEventListener(type, (e) => e.stopPropagation());
+		mark.addEventListener("click", () => {
+			const state = applied.get(mark);
+			if (state) activate(state.record, mark);
+		});
+		return mark;
+	};
+	/** Brings `mark` up to date with `record`, placed through `transform`. */
+	const apply = (mark, record, transform) => {
+		const prev = applied.get(mark);
+		const style = opts.style?.(record) ?? {};
+		const styleNames = Object.keys(style).map(toCssName);
+		const attrs = Object.fromEntries(Object.entries(opts.attrs?.(record) ?? {}).filter(([name]) => !RESERVED.has(name.toLowerCase())));
+		for (const name of prev?.style ?? []) if (!styleNames.includes(name)) mark.style.removeProperty(name);
+		for (const key of prev?.attrs ?? []) if (!(key in attrs)) mark.removeAttribute(key);
+		for (const [key, value] of Object.entries(style)) mark.style.setProperty(toCssName(key), value);
+		for (const [name, value] of Object.entries(attrs)) mark.setAttribute(name, value);
+		mark.type = "button";
+		mark.style.position = "absolute";
+		mark.dataset.record = record.id;
+		mark.dataset.plugin = ctx.id;
+		mark.setAttribute("aria-label", opts.label(record));
+		if (card) {
+			mark.setAttribute("aria-haspopup", "dialog");
+			mark.setAttribute("aria-expanded", String(card.expanded(mark)));
+		}
+		const r = transform.toCssRect(opts.rect(record));
+		mark.style.left = `${r.left}px`;
+		mark.style.top = `${r.top}px`;
+		mark.style.width = `${r.width}px`;
+		mark.style.height = `${r.height}px`;
+		applied.set(mark, {
+			record,
+			style: styleNames,
+			attrs: Object.keys(attrs)
+		});
+	};
+	/**
+	* Makes `el`'s marks match the page's records, in list order: marks that stay are moved,
+	* new ones inserted, the rest removed.
+	*/
+	const draw = (el, page, transform) => {
+		const list = records.list.get().filter((r) => r.page === page && marked(r));
+		const ids = new Set(list.map((r) => r.id));
+		const kept = /* @__PURE__ */ new Map();
+		for (const mark of [...el.children]) {
+			const id = mark.dataset.record;
+			if (id !== void 0 && ids.has(id) && !kept.has(id)) kept.set(id, mark);
+			else mark.remove();
+		}
+		let next = el.firstElementChild;
+		for (const record of list) {
+			const mark = kept.get(record.id) ?? create(el.ownerDocument);
+			apply(mark, record, transform);
+			if (mark === next) next = mark.nextElementSibling;
+			else el.insertBefore(mark, next);
+		}
+	};
+	let scrolling = false;
+	/** Ids that started to get a mark in the change under way, read once it settles. */
+	const fresh = /* @__PURE__ */ new Set();
+	/** Scrolls to the first fresh record still marked, so a batch of adds scrolls once. */
+	const reveal = () => {
+		const [first] = [...fresh].map((id) => records.find(id)).filter((r) => r !== void 0 && marked(r)).sort(readingOrder((r) => opts.rect(r)));
+		fresh.clear();
+		if (first) ctx.scrollTo(first.page, opts.rect(first), { behavior: reducedMotion() ? "instant" : "smooth" });
+	};
+	/** Notes a record that starts to get a mark; replaces (undo, redo, reset) never count. */
+	const watch = (change) => {
+		const record = change.kind === "add" ? change.record : change.kind === "update" && !marked(change.before) ? change.after : void 0;
+		if (!record || !marked(record)) return;
+		if (fresh.size === 0) queueMicrotask(reveal);
+		fresh.add(record.id);
+	};
+	const layer = ctx.layer({ render: draw });
+	ctx.onDocument(() => {
+		const stopDraw = records.list.subscribe(() => layer.invalidate());
+		const stopWatch = records.store()?.on("change", (change) => {
+			if (scrolling) watch(change);
+		});
+		return () => {
+			stopDraw();
+			stopWatch?.();
+			fresh.clear();
+		};
+	});
+	const handle = {
+		refresh: () => layer.invalidate(),
+		scrollToFirst() {
+			scrolling = true;
+			return handle;
+		}
+	};
+	return handle;
+}
+/** Page first, then top to bottom and left to right, by each record's rect in user space. */
+function readingOrder(rect) {
+	return (a, b) => {
+		const ra = rect(a);
+		const rb = rect(b);
+		return a.page - b.page || rb.y + rb.height - (ra.y + ra.height) || ra.x - rb.x;
+	};
+}
+function reducedMotion() {
+	return globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+}
+/** `borderColor` → `border-color`, as `setProperty` takes it; `--custom` names stay as given. */
+function toCssName(key) {
+	return key.startsWith("--") ? key : key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+}
+//#endregion
+//#region src/dom/plugins/api/links.ts
+function isObject(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+/** Links `type` annotations to records; registers one `onAnnotationEdit` listener. */
+function createLink(deps, type, spec) {
+	const linkOf = (a) => {
+		if (a.type !== type) return void 0;
+		const own = a.custom?.[deps.plugin];
+		const id = isObject(own) ? own[deps.name] : void 0;
+		return typeof id === "string" ? id : void 0;
+	};
+	deps.onAnnotationEdit((edit) => {
+		if (edit.kind === "add") return;
+		const annotation = edit.kind === "remove" ? edit.annotation : edit.after;
+		const id = linkOf(annotation);
+		const record = id === void 0 ? void 0 : deps.find(id);
+		if (!record) return;
+		if (edit.kind === "remove") spec.onRemoved?.(record, annotation);
+		else spec.onChanged?.(record, annotation);
+	});
+	return {
+		add(record) {
+			const doc = deps.document();
+			if (!doc) return void 0;
+			const { color, custom, ...fields } = spec.from(record);
+			const own = custom?.[deps.plugin];
+			return doc.annotations.add({
+				...fields,
+				type,
+				color: color ?? doc.annotations.defaults.color(type),
+				custom: {
+					...custom,
+					[deps.plugin]: {
+						...isObject(own) ? own : {},
+						[deps.name]: record.id
+					}
+				}
+			});
+		},
+		of(record) {
+			const doc = deps.document();
+			return doc ? doc.annotations.list.get().filter((a) => linkOf(a) === record.id) : [];
+		}
+	};
+}
+//#endregion
+//#region src/dom/plugins/api/records.ts
+const EMPTY$1 = Object.freeze([]);
+/** The list of whichever store `source` holds, `[]` for none; emits on swaps and changes. */
+function listOf(source) {
+	const read = (store) => store?.list.get() ?? EMPTY$1;
+	return {
+		get: () => read(source.get()),
+		subscribe(fn) {
+			let last = read(source.get());
+			let stopList;
+			const emit = (next) => {
+				if (Object.is(next, last) || next.length === 0 && last.length === 0) return;
+				last = next;
+				fn(next);
+			};
+			const follow = (store) => {
+				stopList?.();
+				stopList = store?.list.subscribe(emit);
+				emit(read(store));
+			};
+			follow(source.get());
+			const stopSource = source.subscribe(follow);
+			return () => {
+				stopSource();
+				stopList?.();
+			};
+		}
+	};
+}
+function matches(record, match) {
+	return Object.entries(match).every(([k, v]) => record[k] === v);
+}
+/**
+* Builds a handle over `source`, a plugin store from `ctx.store`. Every call reads the store
+* `source` holds then.
+*/
+function createRecords(deps, source, base = source) {
+	const current = () => source.get();
+	const all = () => current()?.list.get() ?? EMPTY$1;
+	return {
+		list: listOf(source),
+		all,
+		find: (id) => current()?.get(id),
+		has: (id) => current()?.get(id) !== void 0,
+		where: (match) => all().filter(typeof match === "function" ? match : (r) => matches(r, match)),
+		add: (record) => current()?.add(record),
+		addMissing(records) {
+			const store = current();
+			if (!store) return [];
+			const added = [];
+			deps.batch(() => {
+				for (const record of records) if (!store.get(record.id)) added.push(store.add(record));
+			});
+			return added;
+		},
+		update: (id, patch) => current()?.update(id, patch),
+		remove: (id) => current()?.remove(id),
+		in(doc) {
+			const captured = deps.storesDocument() === doc ? base.get() : null;
+			return createRecords(deps, derived(base, (store) => store && store === captured ? store : null), base);
+		},
+		store: current,
+		annotates: (type, spec) => createLink({
+			plugin: deps.plugin,
+			name: deps.name,
+			onAnnotationEdit: (fn) => deps.onAnnotationEdit(fn),
+			document: () => current() ? deps.storesDocument() : null,
+			find: (id) => current()?.get(id)
+		}, type, spec)
+	};
+}
+//#endregion
+//#region src/dom/plugins/api/api.ts
+function createPluginApi(ctx, options) {
+	let storesDocument = null;
+	ctx.onDocument((doc) => {
+		storesDocument = doc;
+		return () => {
+			storesDocument = null;
+		};
+	});
+	const batch = (fn) => ctx.history.batch(fn);
+	return {
+		...ctx,
+		records(name, opts) {
+			const source = ctx.store(name, opts ?? options.records?.[name]);
+			return createRecords({
+				batch,
+				storesDocument: () => storesDocument,
+				plugin: ctx.id,
+				name,
+				onAnnotationEdit: (fn) => ctx.onAnnotationEdit(fn)
+			}, source);
+		},
+		batch,
+		command: (id, label, run, opts) => createCommand(ctx, id, label, run, opts),
+		marks: (records, opts) => createMarks(ctx, records, opts)
+	};
+}
+//#endregion
+//#region src/dom/plugins/define.ts
+const PLUGIN_ID = /^[a-z][a-z0-9-]*$/;
+function checkId(id) {
+	if (!PLUGIN_ID.test(id)) throw new InkError("InvalidPluginId", `Plugin id ${JSON.stringify(id)} must be lower-case kebab`, { id });
+}
+function definePlugin(plugin, setup) {
+	if (typeof plugin !== "string") {
+		checkId(plugin.id);
+		return plugin;
+	}
+	const id = plugin;
+	checkId(id);
+	return (options = {}) => ({
+		id,
+		setup: (ctx) => setup?.(createPluginApi(ctx, options), options)
+	});
+}
+//#endregion
+//#region src/dom/plugins/commands.ts
+/**
+* The error for a command id no plugin registered, naming the ids that were. Bindings log it
+* rather than throw, and show the control as it is before the plugins are set up.
+*/
+function unknownCommand(id, registered) {
+	const known = registered.length > 0 ? registered.join(", ") : "none";
+	return new InkError("UnknownCommand", `No plugin registered a command ${id} (registered: ${known})`, {
+		id,
+		registered
+	});
+}
+const EMPTY = {
+	get: () => "",
+	subscribe: () => () => {}
+};
+/**
+* A boolean readable computed from `sources`. Like `derived`, it subscribes to the sources only
+* while it has subscribers of its own; `watch` re-reads them, so a source can be swapped while
+* subscribed (a document's status when the document changes).
+*/
+function computed(compute, watch) {
+	const subs = /* @__PURE__ */ new Set();
+	let cached = false;
+	let stop;
+	const changed = () => {
+		const next = compute();
+		if (next === cached) return;
+		cached = next;
+		for (const sub of [...subs]) sub(next);
+	};
+	return {
+		get: () => stop ? cached : compute(),
+		subscribe(sub) {
+			if (!stop) {
+				cached = compute();
+				stop = watch(changed);
+			}
+			subs.add(sub);
+			return () => {
+				if (!subs.delete(sub) || subs.size > 0) return;
+				stop?.();
+				stop = void 0;
+			};
+		}
+	};
+}
+/** True while `document` holds a document whose status is ready. */
+function documentReady(document) {
+	return computed(() => document.get()?.status.get().state === "ready", (changed) => {
+		let stopStatus;
+		const follow = (doc) => {
+			stopStatus?.();
+			stopStatus = doc?.status.subscribe(changed);
+			changed();
+		};
+		const stopDocument = document.subscribe(follow);
+		follow(document.get());
+		return () => {
+			stopDocument();
+			stopStatus?.();
+		};
+	});
+}
+/**
+* Plugin commands by namespaced id. A command is busy from `run()` until the promise its spec
+* returned settles, and is disabled meanwhile, so a double click runs it once.
+*/
+function createCommandRegistry(opts) {
+	const commands = /* @__PURE__ */ new Map();
+	const ready = documentReady(opts.document);
+	return {
+		commands,
+		add(plugin, spec) {
+			const id = `${plugin}.${spec.id}`;
+			if (commands.has(id)) throw new InkError("DuplicateId", `A command with id ${id} already exists`, { id });
+			if (!spec.label.trim()) throw new InkError("InvalidCommandLabel", `Command ${id} needs a label`, { id });
+			const busy = writable(false);
+			const allowed = spec.enabled ?? ready;
+			const enabled = computed(() => allowed.get() && !busy.get(), (changed) => {
+				const stops = [allowed.subscribe(changed), busy.subscribe(changed)];
+				return () => {
+					for (const stop of stops) stop();
+				};
+			});
+			const command = {
+				id,
+				label: spec.label,
+				icon: spec.icon,
+				enabled,
+				busy: readonly(busy),
+				status: spec.status ?? EMPTY,
+				async run() {
+					if (!enabled.get()) return;
+					busy.set(true);
+					try {
+						await spec.run();
+					} catch (error) {
+						if (!(isInkError(error) && error.code === "DocumentDestroyed")) console.error(error);
+					} finally {
+						busy.set(false);
+					}
+				}
+			};
+			commands.set(id, command);
+			return command;
+		}
+	};
+}
+//#endregion
+//#region src/dom/plugins/layer.ts
+function createLayerRegistry() {
+	const layers = [];
+	const listeners = /* @__PURE__ */ new Set();
+	const emit = (event) => {
+		for (const listener of [...listeners]) listener(event);
+	};
+	return {
+		layers,
+		watchLayers(listener) {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		add(layer) {
+			layers.push(layer);
+			emit({
+				type: "add",
+				layer
+			});
+			return { invalidate: (page) => emit({
+				type: "invalidate",
+				layer,
+				page
+			}) };
+		}
+	};
+}
+/** Runs a plugin's drawing; a throw is logged so one plugin cannot break the page. */
+function guard$1(fn) {
+	try {
+		fn();
+	} catch (error) {
+		console.error(error);
+	}
+}
+const CHILD_RULE = ":where(.ink-plugin-layer > *) { pointer-events: auto; }";
+/** One sheet per window: a constructed sheet can only be adopted in its own window. */
+const childSheets = /* @__PURE__ */ new WeakMap();
+/**
+* Puts the children's `pointer-events: auto` rule in the document or shadow root `el` lives
+* in: an adopted sheet, again if the host has since replaced its adopted sheets, or one
+* `<style>` element where adopted sheets are missing. A layer not yet connected gets it on a
+* later draw, which calls this again.
+*/
+function adoptChildRule(el) {
+	if (!el.isConnected) return;
+	const root = el.getRootNode();
+	const doc = el.ownerDocument;
+	const win = doc.defaultView;
+	if (!root.adoptedStyleSheets || !win) {
+		const parent = root === doc ? doc.head ?? doc.documentElement : root;
+		if ([...parent.children].some((c) => c.matches("style[data-ink-plugin-layer]"))) return;
+		const style = doc.createElement("style");
+		style.dataset.inkPluginLayer = "";
+		style.textContent = CHILD_RULE;
+		parent.append(style);
+		return;
+	}
+	let sheet = childSheets.get(win);
+	if (!sheet) {
+		sheet = new win.CSSStyleSheet();
+		sheet.replaceSync(CHILD_RULE);
+		childSheets.set(win, sheet);
+	}
+	if (!root.adoptedStyleSheets.includes(sheet)) root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+}
+/**
+* Mounts `source`'s layers on the pages the engine mounts, and follows it: a layer added later
+* is drawn on every mounted page, and an invalidate redraws its page, or all of them.
+*
+* @internal For bindings, which mount plugin layers; plugin authors add a layer with
+* `ctx.layer`.
+*/
+function createPluginLayers(source) {
+	const pages = /* @__PURE__ */ new Map();
+	const draw = (layer, el, page, t) => {
+		adoptChildRule(el);
+		guard$1(() => layer.render(el, page, t));
+	};
+	const add = (layer, page, state) => {
+		const el = state.host.ownerDocument.createElement("div");
+		el.className = "ink-plugin-layer";
+		el.dataset.plugin = layer.plugin;
+		el.style.cssText = "position:absolute;inset:0;pointer-events:none;";
+		state.host.append(el);
+		state.elements.set(layer, el);
+		draw(layer, el, page, state.transform);
+	};
+	return {
+		mount(page, host, transform) {
+			const state = {
+				host,
+				transform,
+				elements: /* @__PURE__ */ new Map()
+			};
+			pages.set(page, state);
+			for (const layer of source.layers) add(layer, page, state);
+			return {
+				update(next) {
+					state.transform = next;
+					for (const [layer, el] of state.elements) draw(layer, el, page, next);
+				},
+				destroy() {
+					if (pages.get(page) === state) pages.delete(page);
+					for (const [layer, el] of state.elements) {
+						if (layer.destroy) guard$1(() => layer.destroy?.(el, page));
+						el.remove();
+					}
+					state.elements.clear();
+				}
+			};
+		},
+		destroy: source.watchLayers((event) => {
+			if (event.type === "add") {
+				for (const [page, state] of pages) add(event.layer, page, state);
+				return;
+			}
+			const redraw = (page, state) => {
+				const el = state.elements.get(event.layer);
+				if (el) draw(event.layer, el, page, state.transform);
+			};
+			if (event.page === void 0) for (const [page, state] of pages) redraw(page, state);
+			else {
+				const state = pages.get(event.page);
+				if (state) redraw(event.page, state);
+			}
+		})
+	};
+}
+//#endregion
+//#region src/dom/plugins/host.ts
+/**
+* `value` seen with `extra` laid over it, read-only. Everything else is read from and written to
+* `value` itself, and its methods are bound to it, so a method always runs on the original
+* (a class instance keeps its `#private` fields, and `this.id` is the plugin's own id).
+*/
+function withProps(value, extra) {
+	const bound = /* @__PURE__ */ new Map();
+	const own = (key) => Object.hasOwn(extra, key);
+	return new Proxy(Object.create(null), {
+		get(_, key) {
+			if (own(key)) return extra[key];
+			const v = Reflect.get(value, key, value);
+			if (typeof v !== "function") return v;
+			let entry = bound.get(key);
+			if (entry?.fn !== v) {
+				entry = {
+					fn: v,
+					bound: v.bind(value)
+				};
+				bound.set(key, entry);
+			}
+			return entry.bound;
+		},
+		set: (_, key, v) => !own(key) && Reflect.set(value, key, v, value),
+		defineProperty(target, key, d) {
+			if (own(key) || !Reflect.defineProperty(value, key, d)) return false;
+			const defined = Reflect.getOwnPropertyDescriptor(value, key);
+			if (defined && !defined.configurable) Reflect.defineProperty(target, key, defined);
+			return true;
+		},
+		deleteProperty: (_, key) => !own(key) && Reflect.deleteProperty(value, key),
+		has: (_, key) => own(key) || Reflect.has(value, key),
+		ownKeys: () => [.../* @__PURE__ */ new Set([...Reflect.ownKeys(value), ...Reflect.ownKeys(extra)])],
+		getOwnPropertyDescriptor(target, key) {
+			const d = Reflect.getOwnPropertyDescriptor(own(key) ? extra : value, key);
+			const fixed = Reflect.getOwnPropertyDescriptor(target, key)?.configurable === false;
+			return d && {
+				...d,
+				configurable: !fixed
+			};
+		},
+		getPrototypeOf: () => Reflect.getPrototypeOf(value)
+	});
+}
+/** Runs a plugin callback; a throw is logged so one plugin cannot break the others. */
+function guard(fn) {
+	try {
+		return fn();
+	} catch (error) {
+		console.error(error);
+		return;
+	}
+}
+/**
+* @internal For bindings and `createViewer`, which place a viewer's plugins; plugin authors use
+* `definePlugin` and never call it.
+*/
+function createPluginHost(opts) {
+	const seen = /* @__PURE__ */ new Set();
+	for (const plugin of opts.plugins) {
+		if (seen.has(plugin.id)) throw new InkError("DuplicatePlugin", `A plugin with id ${plugin.id} is registered twice`, { id: plugin.id });
+		seen.add(plugin.id);
+	}
+	const registry = createCommandRegistry({ document: opts.document });
+	const tools = [];
+	const decorators = [];
+	const layers = createLayerRegistry();
+	const requests = [];
+	const documentFns = [];
+	const editFns = [];
+	const setupCleanups = [];
+	const redecorators = /* @__PURE__ */ new Set();
+	let opened = null;
+	let destroyed = false;
+	/** Creates a requested store for the open document and has its history track it. */
+	const openStore = (request, state, history) => {
+		const store = createRecordStore(request.key, {
+			initial: request.opts.initial?.(state.doc) ?? [],
+			...request.opts.onChange && { onChange: request.opts.onChange }
+		});
+		state.stores.push(store);
+		state.detach.push(history.track(store));
+		request.current.set(store);
+	};
+	const runOnDocument = (fn, state) => {
+		const cleanup = guard(() => fn(state.doc));
+		if (typeof cleanup === "function") state.cleanups.push(cleanup);
+	};
+	const open = (doc) => {
+		const history = opts.history();
+		const state = {
+			doc,
+			stores: [],
+			detach: [],
+			cleanups: []
+		};
+		opened = state;
+		for (const request of requests) openStore(request, state, history);
+		for (const fn of editFns) state.detach.push(history.react(fn));
+		for (const fn of documentFns) runOnDocument(fn, state);
+	};
+	const close = () => {
+		const state = opened;
+		if (!state) return;
+		opened = null;
+		for (const detach of state.detach) detach();
+		for (const store of state.stores) store.destroy();
+		for (const request of requests) request.current.set(null);
+		for (const cleanup of state.cleanups.reverse()) guard(cleanup);
+	};
+	const contextFor = (plugin) => {
+		const storeNames = /* @__PURE__ */ new Set();
+		return {
+			id: plugin.id,
+			document: opts.document,
+			history: { batch: (fn) => opts.history().batch(fn) },
+			activated: opts.activated,
+			setActivated: (id) => opts.setActivated(id),
+			root: opts.root,
+			commands: { add: (spec) => registry.add(plugin.id, spec) },
+			tools: { add(tool) {
+				const id = `${plugin.id}.${tool.id}`;
+				if (tools.some((t) => t.id === id)) throw new InkError("DuplicateId", `A tool with id ${id} already exists`, { id });
+				tools.push(withProps(tool, { id }));
+			} },
+			decorate(fn) {
+				decorators.push(fn);
+			},
+			redecorate() {
+				for (const listener of [...redecorators]) listener();
+			},
+			store(name, storeOpts = {}) {
+				const key = `${plugin.id}.${name}`;
+				if (storeNames.has(name)) throw new InkError("DuplicateId", `A store with key ${key} already exists`, { key });
+				storeNames.add(name);
+				const request = {
+					key,
+					opts: storeOpts,
+					current: writable(null)
+				};
+				requests.push(request);
+				if (opened) openStore(request, opened, opts.history());
+				return readonly(request.current);
+			},
+			onDocument(fn) {
+				documentFns.push(fn);
+				if (opened) runOnDocument(fn, opened);
+			},
+			onAnnotationEdit(fn) {
+				editFns.push(fn);
+				if (opened) opened.detach.push(opts.history().react(fn));
+			},
+			layer(spec) {
+				return layers.add(withProps(spec, { plugin: plugin.id }));
+			},
+			scrollTo(page, rect, scrollOpts) {
+				opts.viewport?.()?.scrollToRect(page, rect, scrollOpts);
+			}
+		};
+	};
+	for (const plugin of opts.plugins) {
+		let cleanup;
+		try {
+			cleanup = plugin.setup(contextFor(plugin));
+		} catch (error) {
+			for (const done of setupCleanups.reverse()) guard(done);
+			throw error;
+		}
+		if (typeof cleanup === "function") setupCleanups.push(cleanup);
+	}
+	const current = opts.document.get();
+	if (current) open(current);
+	const stopDocument = opts.document.subscribe((doc) => {
+		close();
+		if (doc) open(doc);
+	});
+	return {
+		commands: registry.commands,
+		command: (id) => registry.commands.get(id),
+		tools,
+		decorate(annotation) {
+			const all = [opts.decorate?.(), ...decorators];
+			let merged;
+			for (const fn of all) {
+				const d = fn && guard(() => fn(annotation));
+				if (!d) continue;
+				merged ??= {};
+				if (d.data) merged = {
+					...merged,
+					data: {
+						...d.data,
+						...merged.data
+					}
+				};
+				if (d.classes) merged = {
+					...merged,
+					classes: [...merged.classes ?? [], ...d.classes]
+				};
+				if (merged.description === void 0 && d.description !== void 0) merged = {
+					...merged,
+					description: d.description
+				};
+			}
+			return merged;
+		},
+		layers: layers.layers,
+		watchLayers: (listener) => layers.watchLayers(listener),
+		watchRedecorate(listener) {
+			const run = () => listener();
+			redecorators.add(run);
+			return () => {
+				redecorators.delete(run);
+			};
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			stopDocument();
+			close();
+			for (const cleanup of setupCleanups.reverse()) guard(cleanup);
+		}
+	};
+}
+//#endregion
+//#region src/dom/page-mount.ts
+/**
+* Canvas, text layer, annotation overlay and any plugin layers for one page, stacked in that
+* order.
+*/
+function createPageMount(opts) {
+	const { document, page, host, transform } = opts;
+	const callbacks = (layer) => ({
+		...opts.onError ? { onError: (error) => opts.onError?.(error, layer) } : {},
+		...opts.onRendered ? { onRendered: () => opts.onRendered?.(layer) } : {}
+	});
+	const renderer = createPageRenderer({
+		document,
+		page,
+		host,
+		transform,
+		...opts.devicePixelRatio === void 0 ? {} : { devicePixelRatio: opts.devicePixelRatio },
+		...callbacks("canvas")
+	});
+	const textLayer = createTextLayer({
+		document,
+		page,
+		host,
+		transform,
+		...callbacks("text")
+	});
+	const overlay = createOverlay({
+		host,
+		page,
+		store: opts.store,
+		transform,
+		document,
+		...opts.devicePixelRatio === void 0 ? {} : { devicePixelRatio: opts.devicePixelRatio },
+		...opts.onActivate ? { onActivate: (id) => opts.onActivate?.(id) } : {},
+		...opts.isCustom ? { isCustom: (a) => opts.isCustom?.(a) === true } : {},
+		...opts.decorate ? { decorate: opts.decorate } : {}
+	});
+	const layers = opts.layers?.mount(page, host, transform);
+	return {
+		renderer,
+		textLayer,
+		overlay,
+		update(next) {
+			renderer.update(next);
+			textLayer.update(next);
+			overlay.update(next);
+			layers?.update(next);
+		},
+		destroy() {
+			layers?.destroy();
+			overlay.destroy();
+			textLayer.destroy();
+			renderer.destroy();
+		}
+	};
+}
+//#endregion
+//#region src/dom/tools/options.ts
+function createToolOptions(tools = []) {
+	const byId = /* @__PURE__ */ new Map();
+	const views = /* @__PURE__ */ new Map();
+	const entry = (id) => {
+		const w = byId.get(id);
+		if (!w) throw new RangeError(`Unknown tool ${id}`);
+		return w;
+	};
+	function register(list) {
+		for (const t of list) {
+			if (byId.has(t.id)) continue;
+			const w = writable({ ...t.defaultOptions ?? {} });
+			byId.set(t.id, w);
+			views.set(t.id, readonly(w));
+		}
+	}
+	register(tools);
+	return {
+		readable(id) {
+			entry(id);
+			return views.get(id);
+		},
+		get: (id) => entry(id).get(),
+		merge(id, patch) {
+			const w = entry(id);
+			w.set({
+				...w.get(),
+				...patch
+			});
+		},
+		register
+	};
+}
+//#endregion
+//#region src/dom/tools/selection-edit.ts
+const CORNERS = [
+	"nw",
+	"ne",
+	"sw",
+	"se"
+];
+const ENDS = ["start", "end"];
+const CALLOUT = "callout";
+/** Pointer travel, CSS px, before a press on an annotation becomes a move. */
+const DRAG_THRESHOLD = 3;
+function createSelectionEdit(ctx, opts = {}) {
+	let mode = { kind: "idle" };
+	const batch = (fn) => ctx.history ? ctx.history.batch(fn) : fn();
+	const reset = () => {
+		if (mode.kind === "marquee") mode.el.remove();
+		if (mode.kind === "move") {
+			for (const el of mode.els) el.style.transform = "";
+			ctx.root.removeAttribute("data-ink-dragging");
+		}
+		if (mode.kind === "resize" && mode.el) {
+			mode.el.style.transform = "";
+			mode.el.style.transformOrigin = "";
+			mode.el.style.visibility = "";
+		}
+		if (mode.kind === "resize") mode.preview?.remove();
+		if (mode.kind === "endpoint") {
+			mode.preview.remove();
+			if (mode.el) mode.el.style.visibility = "";
+		}
+		mode = { kind: "idle" };
+	};
+	const elementIn = (root, id) => root.querySelector(`[data-annotation="${CSS.escape(id)}"]`) ?? void 0;
+	const previewFor = (host, a) => {
+		const preview = host.ownerDocument.createElement("div");
+		preview.className = "ink-annotation ink-edit-preview";
+		preview.dataset.inkPreview = "";
+		preview.dataset.type = a.type;
+		preview.style.cssText = "position:absolute;pointer-events:none;";
+		return preview;
+	};
+	/** Shows `draft` in `preview` beside `el`, which is hidden meanwhile. */
+	const showPreview = (preview, el, draft, start) => {
+		drawPreview(preview, draft, start);
+		if (el) el.style.visibility = "hidden";
+		if (!preview.isConnected) (el?.parentElement ?? start.host).append(preview);
+	};
+	function startHandle(e, hit, a, handle) {
+		const el = elementIn(hit.host, a.id);
+		if (CORNERS.includes(handle) && hasCornerHandles(a)) {
+			const text = a.type === "freetext";
+			mode = {
+				kind: "resize",
+				id: a.id,
+				start: hit,
+				corner: handle,
+				box: text ? hit.transform.toCssRect(freeTextBox(a)) : handleBox(a, hit.transform),
+				el,
+				locked: keepsAspect(a),
+				preview: text && (a.fringe !== void 0 || hasCallout(a)) ? previewFor(hit.host, a) : void 0
+			};
+		} else if (ENDS.includes(handle) && a.type === "line" || handle === CALLOUT && hasCallout(a)) {
+			const preview = previewFor(hit.host, a);
+			mode = {
+				kind: "endpoint",
+				id: a.id,
+				start: hit,
+				which: handle,
+				from: hit.transform.toCss(endOf(a, handle)),
+				el,
+				preview
+			};
+		} else return false;
+		e.stopPropagation();
+		e.preventDefault();
+		return true;
+	}
+	return {
+		reset,
+		onPointerDown(e, hit, annotationId) {
+			if (!hit) return;
+			reset();
+			if (annotationId !== void 0) {
+				const a = ctx.store.get(annotationId);
+				if (!a) return;
+				const markup = isTextMarkup(a);
+				if (markup && !opts.marquee) return;
+				const handle = handleOf(e.target);
+				if (handle !== void 0 && !a.locked && startHandle(e, hit, a, handle)) return true;
+				const selected = ctx.store.selection.get();
+				if (e.shiftKey) {
+					e.stopPropagation();
+					ctx.store.select(selected.includes(annotationId) ? selected.filter((s) => s !== annotationId) : [...selected, annotationId]);
+					return;
+				}
+				if (inText(e.target) && canEditFreeText(a, elementIn(hit.host, annotationId))) {
+					e.stopPropagation();
+					ctx.store.select([annotationId]);
+					ctx.onActivate?.(annotationId);
+					mode = {
+						kind: "edit",
+						id: annotationId,
+						start: hit,
+						caret: {
+							clientX: e.clientX,
+							clientY: e.clientY
+						}
+					};
+					e.preventDefault();
+					return true;
+				}
+				const narrow = selected.length > 1 && selected.includes(annotationId);
+				if (narrow) e.stopPropagation();
+				else if (markup) {
+					e.stopPropagation();
+					ctx.store.select([annotationId]);
+					ctx.onActivate?.(annotationId);
+				}
+				mode = {
+					kind: "press",
+					id: annotationId,
+					start: hit,
+					narrow
+				};
+				e.preventDefault();
+				return true;
+			}
+			if (!opts.marquee) {
+				if (!e.shiftKey) ctx.store.select([]);
+				return;
+			}
+			const el = hit.host.ownerDocument.createElement("div");
+			el.className = "ink-marquee";
+			el.dataset.inkMarquee = "";
+			el.style.cssText = `position:absolute;pointer-events:none;left:${hit.css.x}px;top:${hit.css.y}px;width:0;height:0;`;
+			hit.host.append(el);
+			mode = {
+				kind: "marquee",
+				start: hit,
+				el,
+				additive: e.shiftKey
+			};
+			if (!e.shiftKey) ctx.store.select([]);
+			e.preventDefault();
+			return true;
+		},
+		onPointerMove(e) {
+			if (mode.kind === "idle") return;
+			if (e.buttons === 0 || !mode.start.host.isConnected) {
+				reset();
+				return;
+			}
+			const { start } = mode;
+			if (mode.kind === "edit") return;
+			if (mode.kind === "resize") {
+				const { box, el, preview } = mode;
+				const next = resizeCss(box, mode.corner, cornerAt(mode, e), minCss(start), {
+					aspect: mode.locked || e.shiftKey,
+					page: start.transform
+				});
+				if (preview) {
+					const a = ctx.store.get(mode.id);
+					if (a?.type !== "freetext") return;
+					const draft = {
+						...a,
+						...resizedBox(a, userBox(start.transform, next))
+					};
+					showPreview(preview, el, draft, start);
+				} else if (el) {
+					const ox = box.left - (parseFloat(el.style.left) || 0);
+					const oy = box.top - (parseFloat(el.style.top) || 0);
+					el.style.transformOrigin = `${ox}px ${oy}px`;
+					el.style.transform = `translate(${next.left - box.left}px, ${next.top - box.top}px) scale(${next.width / box.width}, ${next.height / box.height})`;
+				}
+				return;
+			}
+			if (mode.kind === "endpoint") {
+				const a = ctx.store.get(mode.id);
+				if (!a) return;
+				const patch = endPatch(a, mode.which, endAt(mode, e));
+				if (!patch) return;
+				showPreview(mode.preview, mode.el, {
+					...a,
+					...patch
+				}, start);
+				return;
+			}
+			const css = cssIn(start.host, e);
+			const dx = css.x - start.css.x;
+			const dy = css.y - start.css.y;
+			if (mode.kind === "press") {
+				if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+				const a = ctx.store.get(mode.id);
+				if (!a || a.locked) {
+					mode = { kind: "idle" };
+					return;
+				}
+				const selected = ctx.store.selection.get();
+				const pressed = mode.id;
+				const ids = selected.includes(pressed) ? selected.filter((id) => {
+					const m = ctx.store.get(id);
+					return m !== void 0 && !m.locked && (id === pressed || !isTextMarkup(m));
+				}) : [pressed];
+				mode = {
+					kind: "move",
+					ids,
+					start,
+					els: ids.map((id) => elementIn(ctx.root, id)).filter((el) => el !== void 0)
+				};
+				ctx.root.setAttribute("data-ink-dragging", "");
+			}
+			if (mode.kind === "move") {
+				for (const el of mode.els) el.style.transform = `translate(${dx}px, ${dy}px)`;
+				return;
+			}
+			mode.el.style.left = `${Math.min(start.css.x, css.x)}px`;
+			mode.el.style.top = `${Math.min(start.css.y, css.y)}px`;
+			mode.el.style.width = `${Math.abs(dx)}px`;
+			mode.el.style.height = `${Math.abs(dy)}px`;
+		},
+		onPointerCancel() {
+			reset();
+		},
+		onPointerUp(e) {
+			const current = mode;
+			reset();
+			if (current.kind !== "idle" && !current.start.host.isConnected) return;
+			switch (current.kind) {
+				case "press":
+					if (current.narrow) {
+						ctx.store.select([current.id]);
+						ctx.onActivate?.(current.id);
+					}
+					return;
+				case "edit": {
+					const el = elementIn(current.start.host, current.id);
+					const a = ctx.store.get(current.id);
+					if (!el || !canEditFreeText(a, el) || editorFor(el)) return;
+					editFreeTextIn(ctx.store, el, a.id, ctx.viewport.transformFor(a.page), { caret: current.caret });
+					return;
+				}
+				case "move": {
+					const { start } = current;
+					const end = start.transform.fromCss(cssIn(start.host, e));
+					const dx = end.x - start.user.x;
+					const dy = end.y - start.user.y;
+					batch(() => {
+						for (const id of current.ids) {
+							const a = ctx.store.get(id);
+							if (a && !a.locked) ctx.store.update(id, translated(a, dx, dy));
+						}
+					});
+					return;
+				}
+				case "resize": {
+					const { start, box } = current;
+					const next = resizeCss(box, current.corner, cornerAt(current, e), minCss(start), {
+						aspect: current.locked || e.shiftKey,
+						page: start.transform
+					});
+					if (next.left === box.left && next.top === box.top && next.width === box.width && next.height === box.height) return;
+					const a = ctx.store.get(current.id);
+					if (!a || a.locked) return;
+					const to = userBox(start.transform, next);
+					if (a.type === "freetext") {
+						ctx.store.update(a.id, resizedBox(a, to));
+						return;
+					}
+					const from = hasRectGeometry(a) ? a.rect : start.transform.fromCssRect(box);
+					ctx.store.update(a.id, scaled(a, from, to));
+					return;
+				}
+				case "endpoint": {
+					const a = ctx.store.get(current.id);
+					if (!a || a.locked) return;
+					const css = cssIn(current.start.host, e);
+					if (css.x === current.start.css.x && css.y === current.start.css.y) return;
+					const patch = endPatch(a, current.which, endAt(current, e));
+					if (patch) ctx.store.update(a.id, patch);
+					return;
+				}
+				case "marquee": {
+					const { start } = current;
+					const box = rectFromPoints(start.user, start.transform.fromCss(cssIn(start.host, e)));
+					if (box.width === 0 && box.height === 0) return;
+					const ids = withoutReplies(ctx.store.list.get()).filter((a) => a.page === start.page && rectsIntersect(a.rect, box)).map((a) => a.id);
+					ctx.store.select(current.additive ? [.../* @__PURE__ */ new Set([...ctx.store.selection.get(), ...ids])] : ids);
+					return;
+				}
+			}
+		},
+		onKeyDown(e) {
+			if (e.key === "Escape") {
+				reset();
+				ctx.store.select([]);
+				return;
+			}
+			if (e.key !== "Delete" && e.key !== "Backspace") return;
+			if (e.defaultPrevented) return;
+			if ((e.target instanceof Element ? e.target : null)?.closest("[data-annotation], input, textarea, [contenteditable]:not([contenteditable=\"false\"])")) return;
+			for (const id of ctx.store.selection.get()) if (ctx.store.get(id)?.locked !== true) ctx.store.remove(id);
+		}
+	};
+}
+/** The handle (`nw`, `start`, ...) a press landed on, if it landed on one. */
+function handleOf(target) {
+	if (!(target instanceof Element)) return void 0;
+	return target.closest("[data-handle]")?.getAttribute("data-handle") ?? void 0;
+}
+/** True when a press landed inside a free text's drawn text box. */
+function inText(target) {
+	return target instanceof Element && target.closest(".ink-free-text") !== null;
+}
+/** The point a line's end or a callout's tip handle sits on. */
+function endOf(a, which) {
+	if (which === "callout") return hasCallout(a) ? a.callout[0] : void 0;
+	return a.type === "line" ? a[which] : void 0;
+}
+/** The patch that moves a line's end, or a callout's tip, to `to`; undefined for neither. */
+function endPatch(a, which, to) {
+	if (which === "callout") return hasCallout(a) ? movedTip(a, to) : void 0;
+	return a.type === "line" ? movedEndpoint(a, which, to) : void 0;
+}
+/** A resized CSS box in user space, at least `MIN_SIZE` a side. */
+function userBox(t, css) {
+	const r = t.fromCssRect(css);
+	return {
+		...r,
+		width: Math.max(1, r.width),
+		height: Math.max(1, r.height)
+	};
+}
+/** Draws `a` into the preview element at its own box. */
+function drawPreview(el, a, start) {
+	const box = annotationBox(a, start.transform);
+	el.style.left = `${box.left}px`;
+	el.style.top = `${box.top}px`;
+	el.style.width = `${box.width}px`;
+	el.style.height = `${box.height}px`;
+	renderAnnotationContent(el, a, start.transform);
+}
+/** Keeps a CSS point on the page. */
+function onPage(start, x, y) {
+	const { cssWidth, cssHeight } = start.transform;
+	return {
+		x: Math.min(Math.max(x, 0), cssWidth),
+		y: Math.min(Math.max(y, 0), cssHeight)
+	};
+}
+/**
+* Where the dragged line end is now, in user space: where it started plus the pointer's
+* travel, kept on the page.
+*/
+function endAt(mode, e) {
+	const { start, from } = mode;
+	const css = cssIn(start.host, e);
+	return start.transform.fromCss(onPage(start, from.x + css.x - start.css.x, from.y + css.y - start.css.y));
+}
+/**
+* Where the dragged corner is now: where it started plus the pointer's travel since the
+* press, kept on the page. Keeping the press's offset from the corner means a click on a
+* handle, with no drag, leaves the box as it was.
+*/
+function cornerAt(mode, e) {
+	const { start, box, corner } = mode;
+	const css = cssIn(start.host, e);
+	return onPage(start, (corner[1] === "w" ? box.left : box.left + box.width) + css.x - start.css.x, (corner[0] === "n" ? box.top : box.top + box.height) + css.y - start.css.y);
+}
+/** `MIN_SIZE` points as CSS px on the press's page. */
+function minCss(start) {
+	return start.transform.toCssLength(1);
+}
+/**
+* `box` with its `corner` dragged to `p` and the opposite corner fixed, at least `min` a side.
+* With `aspect`, the box keeps its proportions: it scales by the larger of the two axes'
+* changes, kept on the page.
+*/
+function resizeCss(box, corner, p, min, opts) {
+	const west = corner[1] === "w";
+	const north = corner[0] === "n";
+	/** The fixed corner. */
+	const fx = west ? box.left + box.width : box.left;
+	const fy = north ? box.top + box.height : box.top;
+	let width = Math.max(west ? fx - p.x : p.x - fx, min);
+	let height = Math.max(north ? fy - p.y : p.y - fy, min);
+	if (opts.aspect && box.width > 0 && box.height > 0) {
+		const roomX = west ? fx : opts.page.cssWidth - fx;
+		const roomY = north ? fy : opts.page.cssHeight - fy;
+		const lo = min / Math.min(box.width, box.height);
+		const hi = Math.min(roomX / box.width, roomY / box.height);
+		const s = Math.min(Math.max(width / box.width, height / box.height, lo), Math.max(hi, lo));
+		width = box.width * s;
+		height = box.height * s;
+	}
+	return {
+		left: west ? fx - width : fx,
+		top: north ? fy - height : fy,
+		width,
+		height
+	};
+}
+//#endregion
+//#region src/dom/tools/controller.ts
+/** Host-relative CSS point for a client point. */
+function cssIn(host, e) {
+	const r = host.getBoundingClientRect();
+	return {
+		x: e.clientX - r.left,
+		y: e.clientY - r.top
+	};
+}
+/** Like `cssIn`, clamped to the host's box, so a drag past the page edge stops at the edge. */
+function clampedCssIn(host, e) {
+	const r = host.getBoundingClientRect();
+	return {
+		x: Math.min(Math.max(e.clientX - r.left, 0), r.width),
+		y: Math.min(Math.max(e.clientY - r.top, 0), r.height)
+	};
+}
+/** The mounted page under a client point, with the point in CSS px and user space. */
+function hitFor(ctx, e) {
+	const hit = ctx.viewport.pageAtCss(e.clientX, e.clientY);
+	if (!hit) return void 0;
+	const css = cssIn(hit.host, e);
+	return {
 		...hit,
 		css,
 		user: hit.transform.fromCss(css)
@@ -2710,26 +4566,92 @@ function createToolController$1(opts) {
 			activeGroup: () => current?.styleGroup,
 			active
 		}),
-		options: () => registry.get(current?.id ?? active.get())
+		options: () => registry.get(current?.id ?? active.get()),
+		made(ids) {
+			if (current?.kind !== "one-shot" || ids.length === 0) return;
+			clearMade();
+			made = [...ids];
+			ctx.root.dataset.inkMade = "";
+			stopMade = [ctx.store.list.subscribe(checkMade), ctx.store.selection.subscribe(checkMade)];
+		},
+		done() {
+			clearMade();
+			ctx.store.select([]);
+			set("select-text");
+		}
 	};
 	const originalCursor = ctx.root.style.cursor;
 	/** The pointer between a primary press and its release or cancel. */
 	let pressed;
 	/** Pointers whose release belongs to a tool that is no longer active. */
 	const swallow = /* @__PURE__ */ new Set();
+	/** What the active one-shot tool made; undefined while it is ready. */
+	let made;
+	let stopMade = [];
+	/** Whether the press now under way found the tool made (see the top of the file). */
+	let pressFoundMade = false;
+	/** Moves and resizes what the active one-shot tool made. */
+	let madeEdit;
+	/** The press now under way went to `madeEdit`, not the tool. */
+	let editingMade = false;
+	function clearMade() {
+		stopMade.forEach((stop) => stop());
+		stopMade = [];
+		made = void 0;
+		delete ctx.root.dataset.inkMade;
+	}
+	/** Leaves the made state when its items are gone, or switches when the selection moved on. */
+	function checkMade() {
+		if (!made) return;
+		const store = ctx.store;
+		if (!made.some((id) => (store.get(id) ?? store._getProposed(id)) !== void 0)) {
+			clearMade();
+			return;
+		}
+		const selected = store.selection.get();
+		if (!made.some((id) => selected.includes(id))) set("select-text");
+	}
 	/** True for events from a pointer other than the one whose press is live. */
 	const foreign = (e) => pressed !== void 0 && pressed !== e.pointerId;
+	const readFirst = () => {
+		pressFoundMade = made !== void 0;
+	};
+	const readAfterEditor = () => {
+		pressFoundMade ||= made !== void 0;
+	};
 	const onDown = (e) => {
 		if (!e.isPrimary || e.button !== 0 || inCustomContent(e.target)) return;
 		if (foreign(e)) return;
 		swallow.delete(e.pointerId);
-		pressed = e.pointerId;
 		const annotationId = (e.target instanceof Element ? e.target : null)?.closest("[data-annotation]")?.getAttribute("data-annotation") ?? void 0;
+		if (current?.kind === "one-shot") {
+			if (pressFoundMade && annotationId === void 0 && !onScrollBar(e, ctx.root)) {
+				e.preventDefault();
+				swallow.add(e.pointerId);
+				ctx.done();
+				return;
+			}
+			const a = annotationId === void 0 ? void 0 : ctx.store.get(annotationId);
+			if (a && made?.includes(a.id) && madeEdit) {
+				pressed = e.pointerId;
+				editingMade = true;
+				if (madeEdit.onPointerDown(e, hitFor(ctx, e), a.id) === true) capture(e.pointerId);
+				return;
+			}
+			if (a && (!isTextMarkup(a) || pressFoundMade)) set("select-text");
+		}
+		pressed = e.pointerId;
 		if (current?.onPointerDown?.(e, hitFor(ctx, e), annotationId) === true) capture(e.pointerId);
 	};
 	const onMove = (e) => {
 		if (!e.isPrimary || foreign(e)) return;
-		if (pressed === e.pointerId && e.buttons === 0) pressed = void 0;
+		const missed = pressed === e.pointerId && e.buttons === 0;
+		if (missed) pressed = void 0;
+		if (editingMade) {
+			madeEdit?.onPointerMove(e, hitFor(ctx, e));
+			if (missed) editingMade = false;
+			return;
+		}
 		current?.onPointerMove?.(e, hitFor(ctx, e));
 	};
 	const onUp = (e) => {
@@ -2739,7 +4661,10 @@ function createToolController$1(opts) {
 			release(e.pointerId);
 			return;
 		}
-		current?.onPointerUp?.(e, hitFor(ctx, e));
+		if (editingMade) {
+			editingMade = false;
+			madeEdit?.onPointerUp(e, hitFor(ctx, e));
+		} else current?.onPointerUp?.(e, hitFor(ctx, e));
 		release(e.pointerId);
 	};
 	const onCancel = (e) => {
@@ -2747,13 +4672,41 @@ function createToolController$1(opts) {
 		if (e.type === "lostpointercapture" && pressed !== e.pointerId) return;
 		if (pressed === e.pointerId) pressed = void 0;
 		swallow.delete(e.pointerId);
-		current?.onPointerCancel?.(e);
+		if (editingMade) {
+			editingMade = false;
+			madeEdit?.onPointerCancel();
+		} else current?.onPointerCancel?.(e);
 	};
 	const onKey = (e) => {
 		if (inCustomContent(e.target)) return;
+		if (made && e.key === "Escape" && !e.defaultPrevented) {
+			e.preventDefault();
+			ctx.done();
+			return;
+		}
+		if (made && (e.key === "Delete" || e.key === "Backspace")) {
+			madeEdit?.onKeyDown(e);
+			return;
+		}
 		current?.onKeyDown?.(e);
 		if (isViewportEnter(e, ctx.root)) editSelectedText(e);
 	};
+	/**
+	* Escape in an editor on a made text box, however it was opened (a press inside, Enter, a
+	* double-click): commits and ends the tool. Captured, as the editor keeps its keys to itself.
+	*/
+	const onEditorEscape = (e) => {
+		if (!made || e.key !== "Escape" || e.isComposing || e.defaultPrevented) return;
+		const target = e.target instanceof Element ? e.target : null;
+		if (!target?.closest("[data-ink-editor]")) return;
+		const el = target.closest("[data-annotation]");
+		const id = el?.getAttribute("data-annotation");
+		if (!el || !id || !made.includes(id)) return;
+		e.preventDefault();
+		e.stopPropagation();
+		editorFor(el)?.close(true);
+		ctx.done();
+	};
 	function editSelectedText(e) {
 		const selected = ctx.store.selection.get();
 		if (selected.length !== 1) return;
@@ -2774,26 +4727,35 @@ function createToolController$1(opts) {
 			if (ctx.root.hasPointerCapture?.(id)) ctx.root.releasePointerCapture(id);
 		} catch {}
 	}
+	const doc = ctx.root.ownerDocument;
+	doc.defaultView?.addEventListener("pointerdown", readFirst, { capture: true });
+	doc.addEventListener("pointerdown", readAfterEditor, { capture: true });
 	ctx.root.addEventListener("pointerdown", onDown, { capture: true });
 	ctx.root.addEventListener("pointermove", onMove);
 	ctx.root.addEventListener("pointerup", onUp);
 	ctx.root.addEventListener("pointercancel", onCancel);
 	ctx.root.addEventListener("lostpointercapture", onCancel);
 	ctx.root.addEventListener("keydown", onKey);
+	ctx.root.addEventListener("keydown", onEditorEscape, { capture: true });
 	function set(id, options) {
 		const next = byId.get(id);
 		if (!next) throw new RangeError(`Unknown tool ${id}`);
 		if (options) registry.merge(id, options);
 		if (pressed !== void 0) {
-			current?.onPointerCancel?.(new PointerEvent("pointercancel", {
+			if (editingMade) madeEdit?.onPointerCancel();
+			else current?.onPointerCancel?.(new PointerEvent("pointercancel", {
 				pointerId: pressed,
 				isPrimary: true
 			}));
 			swallow.add(pressed);
 			pressed = void 0;
 		}
+		editingMade = false;
+		madeEdit?.reset();
 		current?.deactivate();
+		clearMade();
 		current = next;
+		madeEdit = next.kind === "one-shot" ? createSelectionEdit(ctx) : void 0;
 		next.activate(ctx);
 		ctx.root.dataset.inkTool = id;
 		ctx.root.style.cursor = next.cursor;
@@ -2812,14 +4774,20 @@ function createToolController$1(opts) {
 			return registry.readable(id);
 		},
 		destroy() {
+			madeEdit?.reset();
+			madeEdit = void 0;
 			current?.deactivate();
+			clearMade();
 			current = void 0;
+			doc.defaultView?.removeEventListener("pointerdown", readFirst, { capture: true });
+			doc.removeEventListener("pointerdown", readAfterEditor, { capture: true });
 			ctx.root.removeEventListener("pointerdown", onDown, { capture: true });
 			ctx.root.removeEventListener("pointermove", onMove);
 			ctx.root.removeEventListener("pointerup", onUp);
 			ctx.root.removeEventListener("pointercancel", onCancel);
 			ctx.root.removeEventListener("lostpointercapture", onCancel);
 			ctx.root.removeEventListener("keydown", onKey);
+			ctx.root.removeEventListener("keydown", onEditorEscape, { capture: true });
 			delete ctx.root.dataset.inkTool;
 			ctx.root.style.cursor = originalCursor;
 		}
@@ -2841,12 +4809,25 @@ function isViewportEnter(e, root) {
 	return target.closest("[data-ink-text-layer], [data-ink-canvas-layer]") !== null;
 }
 /**
+* True for a press on `root` itself outside its client area: on a scroll bar (or its border).
+* Client coordinates only, so a synthetic press gives the same answer as a real one.
+*/
+function onScrollBar(e, root) {
+	if (e.target !== root) return false;
+	const r = root.getBoundingClientRect();
+	const x = e.clientX - r.left - root.clientLeft;
+	const y = e.clientY - r.top - root.clientTop;
+	return x < 0 || y < 0 || x >= root.clientWidth || y >= root.clientHeight;
+}
+/**
 * True for a target inside a custom annotation element (`data-custom`) but not that element
 * itself: the host's buttons and inputs there own their presses and keys, as in the overlay.
 */
 function inCustomContent(target) {
 	if (!(target instanceof Element)) return false;
 	if (target.closest("[data-ink-editor]")) return true;
+	const layer = target.closest(".ink-plugin-layer");
+	if (layer && layer !== target) return true;
 	const el = target.closest("[data-annotation]");
 	return el !== null && el !== target && el.hasAttribute("data-custom") && target.closest("[data-handle]") === null;
 }
@@ -2917,6 +4898,7 @@ function freehandTool(opts) {
 	};
 	return {
 		id: opts.id,
+		kind: "sticky",
 		cursor: "crosshair",
 		styleGroup: "ink",
 		activate(c) {
@@ -3123,7 +5105,7 @@ function freetextTool() {
 		};
 		const editor = editFreeText(el, draftBox, {
 			transform: t,
-			commit(contents, rect) {
+			commit(contents, rect, _grown, how) {
 				done();
 				if (contents.trim() === "") return refocus();
 				const created = c.store.add({
@@ -3133,7 +5115,9 @@ function freetextTool() {
 					rect
 				});
 				c.store.select([created.id]);
+				c.made([created.id]);
 				refocus(created.id);
+				if (how === "escape") c.done();
 			},
 			cancel() {
 				done();
@@ -3159,6 +5143,7 @@ function freetextTool() {
 	};
 	return {
 		id: "freetext",
+		kind: "one-shot",
 		cursor: "text",
 		styleGroup: "text",
 		defaultOptions: {},
@@ -3263,6 +5248,7 @@ function highlightTool() {
 	};
 	return {
 		id: "highlight",
+		kind: "sticky",
 		cursor: "text",
 		styleGroup: "markup",
 		defaultOptions: { ...DEFAULT_HIGHLIGHT_OPTIONS },
@@ -3306,10 +5292,12 @@ function noteTool() {
 			}
 		});
 		c.store.select([a.id]);
+		c.made([a.id]);
 		return a.id;
 	};
 	return {
 		id: "note",
+		kind: "one-shot",
 		cursor: "copy",
 		activate(c) {
 			ctx = c;
@@ -3378,17 +5366,24 @@ function redactAreaTool() {
 	let ctx;
 	let start;
 	let draft;
+	/** Selects what the tool just added, together, and reports it made. */
+	const made = (c, ids) => {
+		c.store.select(ids);
+		c.made(ids);
+	};
 	/** Text redactions from the live selection, one per page. False when nothing is selected. */
 	const fromSelection = () => {
 		if (!ctx) return false;
 		const selections = ctx.selectionQuads();
 		if (selections.length === 0) return false;
-		for (const s of selections) ctx.store.add(ctx.toolStyle.resolve("redact", {
+		const c = ctx;
+		const ids = selections.map((s) => c.store.add(c.toolStyle.resolve("redact", {
 			type: "redact",
 			page: s.page,
 			quads: s.quads
-		}));
-		ctx.clearSelection();
+		})).id);
+		c.clearSelection();
+		made(c, ids);
 		return true;
 	};
 	const clear = () => {
@@ -3398,6 +5393,7 @@ function redactAreaTool() {
 	};
 	return {
 		id: "redact-area",
+		kind: "one-shot",
 		cursor: "crosshair",
 		styleGroup: "redact",
 		activate(c) {
@@ -3428,422 +5424,49 @@ function redactAreaTool() {
 			if (!draft) {
 				draft = start.host.ownerDocument.createElement("div");
 				draft.className = "ink-draft";
-				draft.dataset.inkDraft = "redact";
-				draft.style.position = "absolute";
-				draft.style.pointerEvents = "none";
-				start.host.append(draft);
-			}
-			draft.style.left = `${Math.min(start.css.x, css.x)}px`;
-			draft.style.top = `${Math.min(start.css.y, css.y)}px`;
-			draft.style.width = `${Math.abs(css.x - start.css.x)}px`;
-			draft.style.height = `${Math.abs(css.y - start.css.y)}px`;
-		},
-		onPointerCancel() {
-			clear();
-		},
-		onPointerUp(e) {
-			if (!ctx || !start) return;
-			if (!start.host.isConnected) {
-				clear();
-				return;
-			}
-			const css = clampedCssIn(start.host, e);
-			const width = Math.abs(css.x - start.css.x);
-			const height = Math.abs(css.y - start.css.y);
-			if (width >= MIN_CSS$1 && height >= MIN_CSS$1) {
-				const rect = start.transform.fromCssRect({
-					left: Math.min(start.css.x, css.x),
-					top: Math.min(start.css.y, css.y),
-					width,
-					height
-				});
-				ctx.store.add(ctx.toolStyle.resolve("redact", {
-					type: "redact",
-					page: start.page,
-					rect
-				}));
-			} else fromSelection();
-			clear();
-		},
-		onKeyDown(e) {
-			if (!!ctx && isViewportEnter(e, ctx.root) && fromSelection()) e.preventDefault();
-		}
-	};
-}
-//#endregion
-//#region src/dom/tools/selection-edit.ts
-const CORNERS = [
-	"nw",
-	"ne",
-	"sw",
-	"se"
-];
-const ENDS = ["start", "end"];
-const CALLOUT = "callout";
-/** Pointer travel, CSS px, before a press on an annotation becomes a move. */
-const DRAG_THRESHOLD = 3;
-function createSelectionEdit(ctx, opts = {}) {
-	let mode = { kind: "idle" };
-	const batch = (fn) => ctx.history ? ctx.history.batch(fn) : fn();
-	const reset = () => {
-		if (mode.kind === "marquee") mode.el.remove();
-		if (mode.kind === "move") for (const el of mode.els) el.style.transform = "";
-		if (mode.kind === "resize" && mode.el) {
-			mode.el.style.transform = "";
-			mode.el.style.transformOrigin = "";
-			mode.el.style.visibility = "";
-		}
-		if (mode.kind === "resize") mode.preview?.remove();
-		if (mode.kind === "endpoint") {
-			mode.preview.remove();
-			if (mode.el) mode.el.style.visibility = "";
-		}
-		mode = { kind: "idle" };
-	};
-	const elementIn = (root, id) => root.querySelector(`[data-annotation="${CSS.escape(id)}"]`) ?? void 0;
-	const previewFor = (host, a) => {
-		const preview = host.ownerDocument.createElement("div");
-		preview.className = "ink-annotation ink-edit-preview";
-		preview.dataset.inkPreview = "";
-		preview.dataset.type = a.type;
-		preview.style.cssText = "position:absolute;pointer-events:none;";
-		return preview;
-	};
-	/** Shows `draft` in `preview` beside `el`, which is hidden meanwhile. */
-	const showPreview = (preview, el, draft, start) => {
-		drawPreview(preview, draft, start);
-		if (el) el.style.visibility = "hidden";
-		if (!preview.isConnected) (el?.parentElement ?? start.host).append(preview);
-	};
-	function startHandle(e, hit, a, handle) {
-		const el = elementIn(hit.host, a.id);
-		if (CORNERS.includes(handle) && hasCornerHandles(a)) {
-			const text = a.type === "freetext";
-			mode = {
-				kind: "resize",
-				id: a.id,
-				start: hit,
-				corner: handle,
-				box: text ? hit.transform.toCssRect(freeTextBox(a)) : el ? boxOf(el) : annotationBox(a, hit.transform),
-				el,
-				locked: keepsAspect(a),
-				preview: text && (a.fringe !== void 0 || hasCallout(a)) ? previewFor(hit.host, a) : void 0
-			};
-		} else if (ENDS.includes(handle) && a.type === "line" || handle === CALLOUT && hasCallout(a)) {
-			const preview = previewFor(hit.host, a);
-			mode = {
-				kind: "endpoint",
-				id: a.id,
-				start: hit,
-				which: handle,
-				from: hit.transform.toCss(endOf(a, handle)),
-				el,
-				preview
-			};
-		} else return false;
-		e.stopPropagation();
-		e.preventDefault();
-		return true;
-	}
-	return {
-		reset,
-		onPointerDown(e, hit, annotationId) {
-			if (!hit) return;
-			reset();
-			if (annotationId !== void 0) {
-				const a = ctx.store.get(annotationId);
-				if (!a) return;
-				const markup = isTextMarkup(a);
-				if (markup && !opts.marquee) return;
-				const handle = handleOf(e.target);
-				if (handle !== void 0 && !a.locked && startHandle(e, hit, a, handle)) return true;
-				const selected = ctx.store.selection.get();
-				if (e.shiftKey) {
-					e.stopPropagation();
-					ctx.store.select(selected.includes(annotationId) ? selected.filter((s) => s !== annotationId) : [...selected, annotationId]);
-					return;
-				}
-				const narrow = selected.length > 1 && selected.includes(annotationId);
-				if (narrow) e.stopPropagation();
-				else if (markup) {
-					e.stopPropagation();
-					ctx.store.select([annotationId]);
-					ctx.onActivate?.(annotationId);
-				}
-				mode = {
-					kind: "press",
-					id: annotationId,
-					start: hit,
-					narrow
-				};
-				e.preventDefault();
-				return true;
-			}
-			if (!opts.marquee) return;
-			const el = hit.host.ownerDocument.createElement("div");
-			el.className = "ink-marquee";
-			el.dataset.inkMarquee = "";
-			el.style.cssText = `position:absolute;pointer-events:none;left:${hit.css.x}px;top:${hit.css.y}px;width:0;height:0;`;
-			hit.host.append(el);
-			mode = {
-				kind: "marquee",
-				start: hit,
-				el,
-				additive: e.shiftKey
-			};
-			if (!e.shiftKey) ctx.store.select([]);
-			e.preventDefault();
-			return true;
-		},
-		onPointerMove(e) {
-			if (mode.kind === "idle") return;
-			if (e.buttons === 0 || !mode.start.host.isConnected) {
-				reset();
-				return;
-			}
-			const { start } = mode;
-			if (mode.kind === "resize") {
-				const { box, el, preview } = mode;
-				const next = resizeCss(box, mode.corner, cornerAt(mode, e), minCss(start), {
-					aspect: mode.locked || e.shiftKey,
-					page: start.transform
-				});
-				if (preview) {
-					const a = ctx.store.get(mode.id);
-					if (a?.type !== "freetext") return;
-					const draft = {
-						...a,
-						...resizedBox(a, userBox(start.transform, next))
-					};
-					showPreview(preview, el, draft, start);
-				} else if (el) {
-					el.style.transformOrigin = "0 0";
-					el.style.transform = `translate(${next.left - box.left}px, ${next.top - box.top}px) scale(${next.width / box.width}, ${next.height / box.height})`;
-				}
-				return;
-			}
-			if (mode.kind === "endpoint") {
-				const a = ctx.store.get(mode.id);
-				if (!a) return;
-				const patch = endPatch(a, mode.which, endAt(mode, e));
-				if (!patch) return;
-				showPreview(mode.preview, mode.el, {
-					...a,
-					...patch
-				}, start);
-				return;
-			}
-			const css = cssIn(start.host, e);
-			const dx = css.x - start.css.x;
-			const dy = css.y - start.css.y;
-			if (mode.kind === "press") {
-				if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
-				const a = ctx.store.get(mode.id);
-				if (!a || a.locked) {
-					mode = { kind: "idle" };
-					return;
-				}
-				const selected = ctx.store.selection.get();
-				const pressed = mode.id;
-				const ids = selected.includes(pressed) ? selected.filter((id) => {
-					const m = ctx.store.get(id);
-					return m !== void 0 && !m.locked && (id === pressed || !isTextMarkup(m));
-				}) : [pressed];
-				mode = {
-					kind: "move",
-					ids,
-					start,
-					els: ids.map((id) => elementIn(ctx.root, id)).filter((el) => el !== void 0)
-				};
-			}
-			if (mode.kind === "move") {
-				for (const el of mode.els) el.style.transform = `translate(${dx}px, ${dy}px)`;
-				return;
+				draft.dataset.inkDraft = "redact";
+				draft.style.position = "absolute";
+				draft.style.pointerEvents = "none";
+				start.host.append(draft);
 			}
-			mode.el.style.left = `${Math.min(start.css.x, css.x)}px`;
-			mode.el.style.top = `${Math.min(start.css.y, css.y)}px`;
-			mode.el.style.width = `${Math.abs(dx)}px`;
-			mode.el.style.height = `${Math.abs(dy)}px`;
+			draft.style.left = `${Math.min(start.css.x, css.x)}px`;
+			draft.style.top = `${Math.min(start.css.y, css.y)}px`;
+			draft.style.width = `${Math.abs(css.x - start.css.x)}px`;
+			draft.style.height = `${Math.abs(css.y - start.css.y)}px`;
 		},
 		onPointerCancel() {
-			reset();
+			clear();
 		},
 		onPointerUp(e) {
-			const current = mode;
-			reset();
-			if (current.kind !== "idle" && !current.start.host.isConnected) return;
-			switch (current.kind) {
-				case "press":
-					if (current.narrow) {
-						ctx.store.select([current.id]);
-						ctx.onActivate?.(current.id);
-					}
-					return;
-				case "move": {
-					const { start } = current;
-					const end = start.transform.fromCss(cssIn(start.host, e));
-					const dx = end.x - start.user.x;
-					const dy = end.y - start.user.y;
-					batch(() => {
-						for (const id of current.ids) {
-							const a = ctx.store.get(id);
-							if (a && !a.locked) ctx.store.update(id, translated(a, dx, dy));
-						}
-					});
-					return;
-				}
-				case "resize": {
-					const { start, box } = current;
-					const next = resizeCss(box, current.corner, cornerAt(current, e), minCss(start), {
-						aspect: current.locked || e.shiftKey,
-						page: start.transform
-					});
-					if (next.left === box.left && next.top === box.top && next.width === box.width && next.height === box.height) return;
-					const a = ctx.store.get(current.id);
-					if (!a || a.locked) return;
-					const to = userBox(start.transform, next);
-					if (a.type === "freetext") {
-						ctx.store.update(a.id, resizedBox(a, to));
-						return;
-					}
-					const from = hasRectGeometry(a) ? a.rect : start.transform.fromCssRect(box);
-					ctx.store.update(a.id, scaled(a, from, to));
-					return;
-				}
-				case "endpoint": {
-					const a = ctx.store.get(current.id);
-					if (!a || a.locked) return;
-					const css = cssIn(current.start.host, e);
-					if (css.x === current.start.css.x && css.y === current.start.css.y) return;
-					const patch = endPatch(a, current.which, endAt(current, e));
-					if (patch) ctx.store.update(a.id, patch);
-					return;
-				}
-				case "marquee": {
-					const { start } = current;
-					const box = rectFromPoints(start.user, start.transform.fromCss(cssIn(start.host, e)));
-					if (box.width === 0 && box.height === 0) return;
-					const ids = withoutReplies(ctx.store.list.get()).filter((a) => a.page === start.page && rectsIntersect(a.rect, box)).map((a) => a.id);
-					ctx.store.select(current.additive ? [.../* @__PURE__ */ new Set([...ctx.store.selection.get(), ...ids])] : ids);
-					return;
-				}
+			if (!ctx || !start) return;
+			if (!start.host.isConnected) {
+				clear();
+				return;
 			}
+			const css = clampedCssIn(start.host, e);
+			const width = Math.abs(css.x - start.css.x);
+			const height = Math.abs(css.y - start.css.y);
+			if (width >= MIN_CSS$1 && height >= MIN_CSS$1) {
+				const rect = start.transform.fromCssRect({
+					left: Math.min(start.css.x, css.x),
+					top: Math.min(start.css.y, css.y),
+					width,
+					height
+				});
+				const a = ctx.store.add(ctx.toolStyle.resolve("redact", {
+					type: "redact",
+					page: start.page,
+					rect
+				}));
+				made(ctx, [a.id]);
+			} else fromSelection();
+			clear();
 		},
 		onKeyDown(e) {
-			if (e.key === "Escape") {
-				reset();
-				ctx.store.select([]);
-				return;
-			}
-			if (e.key !== "Delete" && e.key !== "Backspace") return;
-			if (e.defaultPrevented) return;
-			if ((e.target instanceof Element ? e.target : null)?.closest("[data-annotation], input, textarea, [contenteditable]:not([contenteditable=\"false\"])")) return;
-			for (const id of ctx.store.selection.get()) if (ctx.store.get(id)?.locked !== true) ctx.store.remove(id);
+			if (!!ctx && isViewportEnter(e, ctx.root) && fromSelection()) e.preventDefault();
 		}
 	};
 }
-/** The handle (`nw`, `start`, ...) a press landed on, if it landed on one. */
-function handleOf(target) {
-	if (!(target instanceof Element)) return void 0;
-	return target.closest("[data-handle]")?.getAttribute("data-handle") ?? void 0;
-}
-/** An overlay element's CSS box, from its inline geometry. */
-function boxOf(el) {
-	return {
-		left: parseFloat(el.style.left) || 0,
-		top: parseFloat(el.style.top) || 0,
-		width: parseFloat(el.style.width) || 0,
-		height: parseFloat(el.style.height) || 0
-	};
-}
-/** The point a line's end or a callout's tip handle sits on. */
-function endOf(a, which) {
-	if (which === "callout") return hasCallout(a) ? a.callout[0] : void 0;
-	return a.type === "line" ? a[which] : void 0;
-}
-/** The patch that moves a line's end, or a callout's tip, to `to`; undefined for neither. */
-function endPatch(a, which, to) {
-	if (which === "callout") return hasCallout(a) ? movedTip(a, to) : void 0;
-	return a.type === "line" ? movedEndpoint(a, which, to) : void 0;
-}
-/** A resized CSS box in user space, at least `MIN_SIZE` a side. */
-function userBox(t, css) {
-	const r = t.fromCssRect(css);
-	return {
-		...r,
-		width: Math.max(1, r.width),
-		height: Math.max(1, r.height)
-	};
-}
-/** Draws `a` into the preview element at its own box. */
-function drawPreview(el, a, start) {
-	const box = annotationBox(a, start.transform);
-	el.style.left = `${box.left}px`;
-	el.style.top = `${box.top}px`;
-	el.style.width = `${box.width}px`;
-	el.style.height = `${box.height}px`;
-	renderAnnotationContent(el, a, start.transform);
-}
-/** Keeps a CSS point on the page. */
-function onPage(start, x, y) {
-	const { cssWidth, cssHeight } = start.transform;
-	return {
-		x: Math.min(Math.max(x, 0), cssWidth),
-		y: Math.min(Math.max(y, 0), cssHeight)
-	};
-}
-/**
-* Where the dragged line end is now, in user space: where it started plus the pointer's
-* travel, kept on the page.
-*/
-function endAt(mode, e) {
-	const { start, from } = mode;
-	const css = cssIn(start.host, e);
-	return start.transform.fromCss(onPage(start, from.x + css.x - start.css.x, from.y + css.y - start.css.y));
-}
-/**
-* Where the dragged corner is now: where it started plus the pointer's travel since the
-* press, kept on the page. Keeping the press's offset from the corner means a click on a
-* handle, with no drag, leaves the box as it was.
-*/
-function cornerAt(mode, e) {
-	const { start, box, corner } = mode;
-	const css = cssIn(start.host, e);
-	return onPage(start, (corner[1] === "w" ? box.left : box.left + box.width) + css.x - start.css.x, (corner[0] === "n" ? box.top : box.top + box.height) + css.y - start.css.y);
-}
-/** `MIN_SIZE` points as CSS px on the press's page. */
-function minCss(start) {
-	return start.transform.toCssLength(1);
-}
-/**
-* `box` with its `corner` dragged to `p` and the opposite corner fixed, at least `min` a side.
-* With `aspect`, the box keeps its proportions: it scales by the larger of the two axes'
-* changes, kept on the page.
-*/
-function resizeCss(box, corner, p, min, opts) {
-	const west = corner[1] === "w";
-	const north = corner[0] === "n";
-	/** The fixed corner. */
-	const fx = west ? box.left + box.width : box.left;
-	const fy = north ? box.top + box.height : box.top;
-	let width = Math.max(west ? fx - p.x : p.x - fx, min);
-	let height = Math.max(north ? fy - p.y : p.y - fy, min);
-	if (opts.aspect && box.width > 0 && box.height > 0) {
-		const roomX = west ? fx : opts.page.cssWidth - fx;
-		const roomY = north ? fy : opts.page.cssHeight - fy;
-		const lo = min / Math.min(box.width, box.height);
-		const hi = Math.min(roomX / box.width, roomY / box.height);
-		const s = Math.min(Math.max(width / box.width, height / box.height, lo), Math.max(hi, lo));
-		width = box.width * s;
-		height = box.height * s;
-	}
-	return {
-		left: west ? fx - width : fx,
-		top: north ? fy - height : fy,
-		width,
-		height
-	};
-}
 //#endregion
 //#region src/dom/tools/select.ts
 /**
@@ -3921,6 +5544,15 @@ function shapeTool() {
 	};
 	/** The input with the shape group's style and, for a bubble, the text group's text style. */
 	const styled = (c, input) => {
+		if (input.type === "line") {
+			const line = c.toolStyle.resolve("shape", input);
+			const arrow = input.intent === "LineArrow";
+			return {
+				...line,
+				head: line.head ?? "None",
+				tail: line.tail ?? (arrow ? "OpenArrow" : "None")
+			};
+		}
 		if (input.type !== "freetext") return c.toolStyle.resolve("shape", input);
 		const shape = c.toolStyle.resolve("shape", {
 			...input,
@@ -3955,7 +5587,9 @@ function shapeTool() {
 	let waiting;
 	const openEditor = (c, a) => {
 		const el = c.root.querySelector(`[data-annotation="${CSS.escape(a.id)}"]`);
-		return el !== null && editFreeTextIn(c.store, el, a.id, c.viewport.transformFor(a.page)) !== void 0;
+		return el !== null && editFreeTextIn(c.store, el, a.id, c.viewport.transformFor(a.page), { onClose: (how) => {
+			if (how === "escape" && ctx === c) c.done();
+		} }) !== void 0;
 	};
 	/**
 	* Opens the in-place editor on a new bubble. When a controlled host has not applied it yet,
@@ -3977,6 +5611,7 @@ function shapeTool() {
 		if (!input) return;
 		const created = c.store.add(styled(c, input));
 		c.store.select([created.id]);
+		c.made([created.id]);
 		if (isBubble(created)) edit(c, created);
 	};
 	const paint = (c, from, e) => {
@@ -4045,6 +5680,7 @@ function shapeTool() {
 	};
 	return {
 		id: "shape",
+		kind: "one-shot",
 		cursor: "crosshair",
 		styleGroup: "shape",
 		defaultOptions: { ...DEFAULT_SHAPE_OPTIONS },
@@ -4114,6 +5750,7 @@ function signatureTool() {
 		const input = placeSignature(t, page, at, 150, rotation);
 		const a = c.store.add(input.type === "ink" ? c.toolStyle.resolve("ink", input) : input);
 		c.store.select([a.id]);
+		c.made([a.id]);
 	};
 	/**
 	* Places the selected template, from the library at once, or after reloading it when the
@@ -4137,6 +5774,7 @@ function signatureTool() {
 	};
 	return {
 		id: "signature",
+		kind: "one-shot",
 		cursor: "copy",
 		defaultOptions: {},
 		activate(c) {
@@ -4647,9 +6285,11 @@ const COLOR_LABELS = {
 const COLOR_COLUMNS = 12;
 /**
 * What a colour menu shows for a style: the palette with the matching swatch checked, "No fill"
-* for `fill`, and the trigger's swatch. Shared by the bindings and the vanilla menu.
+* for `fill`, and the trigger's swatch. Shared by the bindings and the vanilla menu. `fallback`
+* is the colour new annotations get while the style leaves it unset: the trigger shows it
+* rather than an empty swatch.
 */
-function colorMenuModel(property, current, supported) {
+function colorMenuModel(property, current, supported, fallback) {
 	const value = current[property];
 	const enabled = supported.has(property);
 	const color = typeof value === "string" && value !== "mixed" ? value.toUpperCase() : void 0;
@@ -4662,6 +6302,9 @@ function colorMenuModel(property, current, supported) {
 	const trigger = !enabled ? { kind: "empty" } : value === "mixed" ? { kind: "mixed" } : value === null ? { kind: "none" } : typeof value === "string" ? {
 		kind: "color",
 		color: value
+	} : fallback !== void 0 ? {
+		kind: "color",
+		color: fallback
 	} : { kind: "empty" };
 	return {
 		label: COLOR_LABELS[property],
@@ -4679,7 +6322,7 @@ function colorMenuModel(property, current, supported) {
 			checked: value === null,
 			patch: { fill: null }
 		} : null,
-		customValue: color ?? "#000000",
+		customValue: color ?? fallback?.toUpperCase() ?? "#000000",
 		custom: (hex) => patchFor(hex.toUpperCase())
 	};
 }
@@ -4955,7 +6598,7 @@ function handleTabKeys(e, tablist) {
 	tabs[next].focus({ preventScroll: true });
 	tabs[next].click();
 }
-const TABBABLE$1 = [
+const TABBABLE = [
 	"a[href]",
 	"button:not(:disabled)",
 	"input:not(:disabled):not([type=\"hidden\"])",
@@ -4964,104 +6607,26 @@ const TABBABLE$1 = [
 	"[tabindex]"
 ].map((s) => `${s}:not([tabindex="-1"])`).join(", ");
 /**
-* Keeps Tab inside `container`, a modal: Tab from its last stop goes to its first, and
-* Shift+Tab from the first to the last.
-*/
-function trapTab(e, container) {
-	if (e.key !== "Tab" || e.defaultPrevented) return;
-	const stops = [...container.querySelectorAll(TABBABLE$1)].filter((el) => !el.matches(":disabled") && el.getClientRects().length > 0);
-	if (stops.length === 0) {
-		e.preventDefault();
-		return;
-	}
-	const first = stops[0];
-	const last = stops[stops.length - 1];
-	const active = document.activeElement;
-	if (e.shiftKey && (active === first || !container.contains(active))) {
-		e.preventDefault();
-		last.focus();
-	} else if (!e.shiftKey && (active === last || !container.contains(active))) {
-		e.preventDefault();
-		first.focus();
-	}
-}
-//#endregion
-//#region src/dom/annotation-element.ts
-/** The overlay element drawn for annotation `id` under `root`, if it is in the DOM. */
-function annotationElementFor(root, id) {
-	return root.querySelector(`[data-annotation="${CSS.escape(id)}"]`);
-}
-/**
-* Resolves the overlay element for `id` and keeps resolving while `root`'s subtree changes:
-* the overlay creates and removes these elements outside any framework (a page mounts as it
-* scrolls into view), so a popover anchored to one has to follow. Calls `onChange` once now
-* and again whenever the answer changes. The returned function stops observing.
-*/
-function observeAnnotationElement(root, id, onChange) {
-	let last;
-	const resolve = () => {
-		const found = annotationElementFor(root, id);
-		if (found === last) return;
-		last = found;
-		onChange(found);
-	};
-	resolve();
-	const observer = new MutationObserver(resolve);
-	observer.observe(root, {
-		childList: true,
-		subtree: true
-	});
-	return () => observer.disconnect();
-}
-//#endregion
-//#region src/dom/popover-focus.ts
-/**
-* A press that will activate an annotation is not a dismissal: the popover follows the
-* activation. Mirrors the overlay's rule: a press on the annotation element or on its drawn
-* shape activates; a press on a custom element's own content belongs to that content.
+* Keeps Tab inside `container`, a modal: Tab from its last stop goes to its first, and
+* Shift+Tab from the first to the last.
 */
-function shouldKeepOpenOnAnnotation(target) {
-	if (!(target instanceof Element)) return false;
-	const annotation = target.closest("[data-annotation]");
-	if (!annotation) return false;
-	return target === annotation || !annotation.hasAttribute("data-custom");
-}
-function createFocusReturn(opts) {
-	let fallbacks = [];
-	/** Set by `beforeRemove`: the close comes from removing the anchor's annotation. */
-	let removing = false;
-	return {
-		beforeRemove(anchor, prefer) {
-			fallbacks = [];
-			removing = true;
-			const siblings = anchor?.parentElement ? [...anchor.parentElement.children].filter((el) => el instanceof HTMLElement && el.hasAttribute("data-annotation")) : [];
-			const i = anchor ? siblings.indexOf(anchor) : -1;
-			if (i >= 0) {
-				const after = siblings.slice(i + 1);
-				const preferred = prefer ? after.filter((el) => el.matches(prefer)) : [];
-				fallbacks.push(...preferred, ...after, ...siblings.slice(0, i).reverse());
-			}
-		},
-		onCloseAutoFocus(event, anchor) {
-			event.preventDefault();
-			const plan = fallbacks;
-			const removed = removing;
-			fallbacks = [];
-			removing = false;
-			const root = opts.root();
-			if (!root) return;
-			const activated = opts.activated();
-			if (activated !== null && annotationElementFor(root, activated)) return;
-			const active = root.ownerDocument.activeElement;
-			if (active && active !== root && root.contains(active)) return;
-			const scroll = root.querySelector("[data-ink-scroll]");
-			(removed ? [...plan, scroll] : [
-				anchor,
-				...plan,
-				scroll
-			]).find((el) => el?.isConnected)?.focus({ preventScroll: true });
-		}
-	};
+function trapTab(e, container) {
+	if (e.key !== "Tab" || e.defaultPrevented) return;
+	const stops = [...container.querySelectorAll(TABBABLE)].filter((el) => !el.matches(":disabled") && el.getClientRects().length > 0);
+	if (stops.length === 0) {
+		e.preventDefault();
+		return;
+	}
+	const first = stops[0];
+	const last = stops[stops.length - 1];
+	const active = document.activeElement;
+	if (e.shiftKey && (active === first || !container.contains(active))) {
+		e.preventDefault();
+		last.focus();
+	} else if (!e.shiftKey && (active === last || !container.contains(active))) {
+		e.preventDefault();
+		first.focus();
+	}
 }
 //#endregion
 //#region src/dom/viewer-engine.ts
@@ -5076,7 +6641,15 @@ function mountViewer(opts) {
 	let stopKeys = () => void 0;
 	let stopActive = () => void 0;
 	let destroyed = false;
-	const hostTools = opts.tools ?? [];
+	const plugins = opts.plugins;
+	const hostTools = [...opts.tools ?? [], ...plugins?.tools ?? []];
+	/** Plugin layers follow the host for the engine's life, across rebuilds. */
+	const layers = plugins && createPluginLayers(plugins);
+	const decorate = plugins ? (a) => plugins.decorate(a) : (a) => opts.decorateAnnotation?.(a);
+	/** A plugin's `ctx.redecorate()` reaches every page this engine has mounted. */
+	const stopRedecorate = plugins?.watchRedecorate(() => {
+		for (const mount of pages.values()) mount.overlay.redecorate();
+	});
 	/** Option values outlive rebuilds: every controller shares this registry. */
 	const toolOptions = opts.toolOptions ?? createToolOptions();
 	/** Without a host style, the engine's own follows the active tool across rebuilds. */
@@ -5105,6 +6678,8 @@ function mountViewer(opts) {
 			store: doc.annotations,
 			onActivate: (id) => opts.onActivate?.(id),
 			isCustom: () => isCustom,
+			decorate,
+			...layers ? { layers } : {},
 			onError: (cause, layer) => {
 				failed.add(layer);
 				if (error) return;
@@ -5281,232 +6856,20 @@ function mountViewer(opts) {
 			if (next.customAnnotations !== void 0) custom = next.customAnnotations;
 			build(state);
 		},
+		redecorate() {
+			if (destroyed) return;
+			for (const mount of pages.values()) mount.overlay.redecorate();
+		},
 		destroy() {
 			if (destroyed) return;
 			destroyed = true;
 			teardown();
+			layers?.destroy();
+			stopRedecorate?.();
 		}
 	};
 }
 //#endregion
-//#region src/dom/viewer/dom.ts
-/** `document.createElement` with attributes and children. */
-function h(tag, attrs = {}, ...children) {
-	const el = document.createElement(tag);
-	for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
-	el.append(...children);
-	return el;
-}
-function button$1(label, onClick) {
-	const b = h("button", { type: "button" }, label);
-	b.addEventListener("click", onClick);
-	return b;
-}
-//#endregion
-//#region src/dom/viewer/popover.ts
-/** Space between the anchor and the panel, and between the panel and the window edge. */
-const GAP = 6;
-const MARGIN = 8;
-const TABBABLE = "button, input, select, textarea, a[href], [tabindex]";
-/**
-* Fixed-positions `panel` below `anchor` (above it when only that fits), clamped to the
-* window. Shared by the annotation popovers and the trigger-anchored menus.
-*/
-function placePanel(panel, anchor) {
-	const { innerWidth: vw, innerHeight: vh } = window;
-	const w = panel.offsetWidth;
-	const ht = panel.offsetHeight;
-	let top = anchor.bottom + GAP;
-	if (top + ht > vh - MARGIN && anchor.top - GAP - ht >= MARGIN) top = anchor.top - GAP - ht;
-	top = Math.max(MARGIN, Math.min(top, vh - ht - MARGIN));
-	const left = Math.max(MARGIN, Math.min(anchor.left, vw - w - MARGIN));
-	panel.style.position = "fixed";
-	panel.style.left = `${left}px`;
-	panel.style.top = `${top}px`;
-}
-function createPopover(opts) {
-	const { root, focusReturn } = opts;
-	const panel = h("div", {
-		...opts.attrs,
-		role: "dialog",
-		hidden: ""
-	});
-	document.body.append(panel);
-	let anchoredId = null;
-	let anchor = null;
-	let stopObserving = () => void 0;
-	/** The element that had focus in the panel when the anchor went away. */
-	let stranded = null;
-	const place = () => {
-		if (!anchor || panel.hidden) return;
-		placePanel(panel, anchor.getBoundingClientRect());
-	};
-	const resizes = new ResizeObserver(place);
-	resizes.observe(panel);
-	const onAnchor = (el, closing = false) => {
-		if (anchor) resizes.unobserve(anchor);
-		anchor = el;
-		if (!el) {
-			const active = document.activeElement;
-			if (!closing && !panel.hidden && active instanceof HTMLElement && panel.contains(active)) {
-				const scroll = root.querySelector("[data-ink-scroll]");
-				if (scroll) {
-					stranded = active;
-					scroll.focus({ preventScroll: true });
-				}
-			}
-			panel.hidden = true;
-			return;
-		}
-		resizes.observe(el);
-		const wasHidden = panel.hidden;
-		panel.hidden = false;
-		place();
-		if (wasHidden && stranded) {
-			const back = stranded;
-			stranded = null;
-			const scroll = root.querySelector("[data-ink-scroll]");
-			if (panel.contains(back) && document.activeElement === scroll) back.focus({ preventScroll: true });
-		}
-	};
-	const onKey = (e) => {
-		if (e.key !== "Escape" || panel.hidden || e.defaultPrevented) return;
-		const target = e.target;
-		if (!(target instanceof Node) || !(panel.contains(target) || root.contains(target))) return;
-		e.preventDefault();
-		opts.onDismiss();
-	};
-	const onPress = (e) => {
-		if (panel.hidden || panel.contains(e.target)) return;
-		if (shouldKeepOpenOnAnnotation(e.target)) return;
-		opts.onDismiss();
-	};
-	const onTab = (e) => {
-		if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey) return;
-		const tabbable = [...panel.querySelectorAll(TABBABLE)].filter((el) => !el.disabled && el.tabIndex >= 0);
-		const first = tabbable[0];
-		const last = tabbable.at(-1);
-		if (!first || !last) return;
-		const active = document.activeElement;
-		if (e.shiftKey ? active !== first : active !== last) return;
-		e.preventDefault();
-		(e.shiftKey ? last : first).focus();
-	};
-	panel.addEventListener("keydown", onTab);
-	document.addEventListener("keydown", onKey);
-	document.addEventListener("pointerdown", onPress, true);
-	document.addEventListener("scroll", place, true);
-	window.addEventListener("resize", place);
-	return {
-		panel,
-		get anchor() {
-			return anchor;
-		},
-		show(id) {
-			if (id === anchoredId) return;
-			stopObserving();
-			anchoredId = id;
-			stopObserving = observeAnnotationElement(root, id, onAnchor);
-		},
-		hide() {
-			if (anchoredId === null) return;
-			stopObserving();
-			stopObserving = () => void 0;
-			anchoredId = null;
-			const back = anchor;
-			stranded = null;
-			onAnchor(null, true);
-			queueMicrotask(() => {
-				if (anchoredId !== null || !panel.isConnected) return;
-				focusReturn.onCloseAutoFocus(new Event("closeautofocus", { cancelable: true }), back);
-			});
-		},
-		destroy() {
-			stopObserving();
-			resizes.disconnect();
-			document.removeEventListener("keydown", onKey);
-			document.removeEventListener("pointerdown", onPress, true);
-			panel.removeEventListener("keydown", onTab);
-			document.removeEventListener("scroll", place, true);
-			window.removeEventListener("resize", place);
-			panel.remove();
-		}
-	};
-}
-//#endregion
-//#region src/dom/viewer/suggestion-card.ts
-function createSuggestionCard(opts) {
-	const { root, store, activated, focusReturn } = opts;
-	const popover = createPopover({
-		root,
-		attrs: {
-			class: "ink-suggestion-card",
-			"data-ink-suggestion-card": "",
-			"aria-label": "Suggested redaction"
-		},
-		focusReturn,
-		onDismiss: close
-	});
-	/** The suggestion as last rendered. */
-	let shown = null;
-	function suggestion(id) {
-		const a = id ? store.get(id) : void 0;
-		return a?.type === "redact" && a.origin === "suggested" ? a : null;
-	}
-	function target() {
-		const selection = store.selection.get();
-		return suggestion(activated.get()) ?? (selection.length === 1 ? suggestion(selection[0]) : null);
-	}
-	function update() {
-		const t = target();
-		if (t === shown) return;
-		const previous = shown;
-		shown = t;
-		if (!t) {
-			popover.hide();
-			return;
-		}
-		const hadFocus = popover.panel.contains(document.activeElement);
-		const opening = previous === null || previous.id !== t.id;
-		render(t);
-		popover.show(t.id);
-		if ((opening || hadFocus) && !popover.panel.hidden) popover.panel.querySelector("button")?.focus();
-	}
-	function render(a) {
-		const { suggestion: s } = a;
-		const bucket = s ? confidenceBucket(s.confidence) : void 0;
-		popover.panel.replaceChildren(h("p", { class: "ink-suggestion-reason" }, h("strong", {}, s?.reason ?? "Suggested redaction"), ...bucket ? [h("span", {
-			class: "ink-suggestion-confidence",
-			"data-confidence": bucket
-		}, `${bucket} confidence`)] : []), ...s?.explanation ? [h("p", { class: "ink-suggestion-explanation" }, s.explanation)] : [], h("div", { class: "ink-suggestion-actions" }, button$1("Accept", accept), ...a.locked ? [] : [button$1("Dismiss", dismiss)]));
-	}
-	function close() {
-		activated.set(null);
-		store.select([]);
-	}
-	function accept() {
-		if (shown) acceptSuggestion(store, shown.id);
-		close();
-	}
-	/** Locked annotations cannot be removed: Dismiss is not offered for them. */
-	function dismiss() {
-		if (!shown || shown.locked) return;
-		focusReturn.beforeRemove(popover.anchor, "[data-origin=\"suggested\"]");
-		store.remove(shown.id);
-		close();
-	}
-	const stops = [
-		store.list.subscribe(update),
-		store.selection.subscribe(update),
-		activated.subscribe(update)
-	];
-	update();
-	return { destroy() {
-		for (const stop of stops) stop();
-		popover.destroy();
-	} };
-}
-//#endregion
 //#region src/dom/viewer/thread-popover.ts
 function createThreadPopover(opts) {
 	const { root, store, activated, focusReturn } = opts;
@@ -5675,8 +7038,14 @@ function createThreadForm(n, actions) {
 }
 //#endregion
 //#region src/dom/viewer/create-viewer.ts
+const noop = () => void 0;
+const passThrough = {
+	batch: (fn) => fn(),
+	track: () => noop,
+	react: () => noop
+};
 function createViewer(el, opts) {
-	const { source: initial, assets, password, defaults, history, threads: withThreads = true, suggestions: withSuggestions = true, onReady, onError, onActivate, onBuild, onPageMount, onPageUnmount, onPageError, toolStyle: _toolStyle, toolOptions: _toolOptions, signatureLibrary: _signatureLibrary, signatures: signatureStore, ...view } = opts;
+	const { source: initial, assets, password, defaults, history, plugins, threads: withThreads = true, onReady, onError, onActivate, onBuild, onPageMount, onPageUnmount, onPageError, toolStyle: _toolStyle, toolOptions: _toolOptions, signatureLibrary: _signatureLibrary, signatures: signatureStore, ...view } = opts;
 	/** One library for the viewer's life, so templates and the menu outlive each document. */
 	const signatures = createSignatureLibrary(signatureStore ?? createMemorySignatureStore());
 	/** Tool options persist for the viewer's life; the tool style is per document. */
@@ -5686,8 +7055,9 @@ function createViewer(el, opts) {
 	const engine = writable(null);
 	const viewport = writable(null);
 	const tools = writable(null);
-	/** The activated annotation: the note thread and the suggestion card open from it. */
+	/** The activated annotation: the note thread opens from it. */
 	const activated = writable(null);
+	const rootEl = writable(null);
 	const root = h("div", {
 		"data-ink-root": "",
 		"data-state": "idle"
@@ -5706,6 +7076,24 @@ function createViewer(el, opts) {
 	}, scroll);
 	root.append(viewportRoot);
 	el.append(root);
+	rootEl.set(scroll);
+	/**
+	* One host for the viewer's life. It reads the history when a document opens, and `current`
+	* is set before it notifies, so that is the new document's. With no document open, a
+	* command's `batch` just runs its function.
+	*/
+	const host = createPluginHost({
+		plugins: plugins ?? [],
+		document: readonly(current),
+		history: () => current.get()?.history ?? passThrough,
+		activated: readonly(activated),
+		setActivated: (id) => {
+			if (id === null || current.get()?.annotations.get(id)) activated.set(id);
+		},
+		root: readonly(rootEl),
+		decorate: () => view.decorateAnnotation,
+		viewport: () => viewport.get()
+	});
 	const focusReturn = createFocusReturn({
 		root: () => root,
 		activated: () => activated.get()
@@ -5734,20 +7122,15 @@ function createViewer(el, opts) {
 		renderStatus(s);
 		status.set(s);
 	}
-	/** Mounts the engine and the popovers for a ready document; returns their teardown. */
+	/** Mounts the engine and the thread popover for a ready document; returns their teardown. */
 	function start(doc) {
 		const store = doc.annotations;
-		const popovers = [withThreads ? createThreadPopover({
-			root,
-			store,
-			activated,
-			focusReturn
-		}) : null, withSuggestions ? createSuggestionCard({
+		const threads = withThreads ? createThreadPopover({
 			root,
 			store,
 			activated,
 			focusReturn
-		}) : null];
+		}) : null;
 		const stopList = store.list.subscribe(() => {
 			const id = activated.get();
 			if (id !== null && !store.get(id)) activated.set(null);
@@ -5760,6 +7143,7 @@ function createViewer(el, opts) {
 		};
 		const mounted = mountViewer({
 			...view,
+			plugins: host,
 			container: scroll,
 			document: doc,
 			toolOptions,
@@ -5800,7 +7184,7 @@ function createViewer(el, opts) {
 		engine.set(mounted);
 		return () => {
 			stopList();
-			for (const p of popovers) p?.destroy();
+			threads?.destroy();
 			activated.set(null);
 			engine.set(null);
 			mounted.destroy();
@@ -5856,22 +7240,41 @@ function createViewer(el, opts) {
 		});
 	}
 	open(initial);
-	return {
+	const viewer = {
 		element: root,
 		status: readonly(status),
 		document: readonly(current),
 		engine: readonly(engine),
 		viewport: readonly(viewport),
 		tools: readonly(tools),
+		activated: readonly(activated),
+		setActivated: (id) => {
+			if (id === null || current.get()?.annotations.get(id)) activated.set(id);
+		},
+		commands: { get: (id) => host.command(id) },
 		open,
 		destroy() {
 			if (destroyed) return;
 			destroyed = true;
 			loads++;
 			close();
+			host.destroy();
 			root.remove();
 		}
 	};
+	toolsByViewer.set(viewer, [...view.tools ?? [], ...host.tools]);
+	commandIdsByViewer.set(viewer, () => [...host.commands.keys()]);
+	return viewer;
+}
+const toolsByViewer = /* @__PURE__ */ new WeakMap();
+/** The host tools a viewer was given (its own and its plugins'), for the controls' labels and icons. */
+function hostToolsOf(viewer) {
+	return toolsByViewer.get(viewer) ?? [];
+}
+const commandIdsByViewer = /* @__PURE__ */ new WeakMap();
+/** The ids of the commands a viewer's plugins registered, for the error on an unknown one. */
+function hostCommandIdsOf(viewer) {
+	return commandIdsByViewer.get(viewer)?.() ?? [];
 }
 //#endregion
 //#region src/dom/viewer/controls.ts
@@ -5983,15 +7386,16 @@ function historyButton(viewer, action) {
 	return b;
 }
 /**
-* Sets the tool; pressed while it is the active one. A host tool's button has no icon (append
-* your own) and is named by `label`, else by the tool id.
+* Sets the tool; pressed while it is the active one. A host or plugin tool's button takes the
+* tool's own `label` and `icon`; `opts.label` wins, and without either it is named by the tool id.
 */
 function createToolButton(viewer, tool, opts = {}) {
-	const b = button(opts.label ?? TOOL_LABELS[tool] ?? tool, {
+	const own = hostToolsOf(viewer).find((t) => t.id === tool);
+	const b = button(opts.label ?? TOOL_LABELS[tool] ?? own?.label ?? tool, {
 		class: "ink-tool-button",
 		"data-ink-tool-button": "",
 		"data-tool": tool
-	}, TOOL_ICONS[tool]);
+	}, TOOL_ICONS[tool] ?? own?.icon);
 	const show = (active) => {
 		const on = active === tool;
 		b.dataset.state = on ? "on" : "off";
@@ -6001,6 +7405,48 @@ function createToolButton(viewer, tool, opts = {}) {
 	follow(viewer.tools, b, (tools, watch) => watch(tools.active, show), () => show(null));
 	return b;
 }
+/**
+* A plugin command as a button with its status text beside it. The button is named by the
+* command's label and disabled while the command is, except while it runs: then it keeps focus,
+* with `aria-busy` and `aria-disabled`, and a press does nothing. The status is a live region. A command without an icon shows its label as the button's text. For an id no
+* plugin registered it logs `InkError('UnknownCommand')` to the console and returns the same
+* markup disabled, `aria-hidden` and unnamed.
+*/
+function createCommandButton(viewer, id) {
+	const command = viewer.commands.get(id);
+	const status = h("span", {
+		class: "ink-command-status",
+		role: "status"
+	});
+	if (!command) {
+		console.error(unknownCommand(id, hostCommandIdsOf(viewer)));
+		const pending = h("button", {
+			type: "button",
+			"data-command": id,
+			"aria-hidden": "true"
+		});
+		pending.disabled = true;
+		return h("div", { class: "ink-command" }, pending, status);
+	}
+	const b = button(command.label, { "data-command": id }, command.icon);
+	if (!command.icon) b.textContent = command.label;
+	b.addEventListener("click", () => void command.run());
+	const sync = () => {
+		const busy = command.busy.get();
+		b.disabled = !command.enabled.get() && !busy;
+		b.setAttribute("aria-busy", String(busy));
+		if (busy) b.setAttribute("aria-disabled", "true");
+		else b.removeAttribute("aria-disabled");
+	};
+	command.enabled.subscribe(sync);
+	command.busy.subscribe(sync);
+	sync();
+	command.status.subscribe((text) => {
+		status.textContent = text;
+	});
+	status.textContent = command.status.get();
+	return h("div", { class: "ink-command" }, b, status);
+}
 function createZoomIn(viewer) {
 	const b = button("Zoom in", {
 		class: "ink-zoom-in",
@@ -6188,7 +7634,7 @@ function createMenu(trigger, opts) {
 	let panel = null;
 	let teardown = null;
 	const place = () => {
-		if (panel) placePanel(panel, trigger.getBoundingClientRect());
+		if (panel) placePanel(panel, (opts.anchor ?? trigger).getBoundingClientRect());
 	};
 	function close(restoreFocus = false) {
 		if (!panel) return;
@@ -6404,7 +7850,7 @@ function createColorMenu(viewer, opts) {
 	/** What the menu reads and writes: the whole tool style, or one group's view of it. */
 	let style = null;
 	let stops = [];
-	const model = () => colorMenuModel(property, style?.current.get() ?? {}, style?.supported.get() ?? /* @__PURE__ */ new Set());
+	const model = () => colorMenuModel(property, style?.current.get() ?? {}, style?.supported.get() ?? /* @__PURE__ */ new Set(), opts.fallback?.get());
 	function refresh() {
 		const m = model();
 		trigger.disabled = !m.enabled;
@@ -6518,6 +7964,7 @@ function createColorMenu(viewer, opts) {
 	};
 	follow(viewer.engine.get());
 	viewer.engine.subscribe(follow);
+	opts.fallback?.subscribe(refresh);
 	return trigger;
 }
 //#endregion
@@ -6801,6 +8248,7 @@ function createShapeMenu(viewer) {
 	}
 	const menu = createMenu(trigger, {
 		label: "Shapes",
+		anchor: root,
 		attrs: { "data-ink-menu": "shape" },
 		render: (panel) => paint(panel, model())
 	});
@@ -6859,10 +8307,13 @@ function createHighlightMenu(viewer) {
 	}, main, trigger);
 	main.disabled = true;
 	trigger.disabled = true;
+	/** The colour the chosen kind gets while the markup style leaves it unset. */
+	const defaultColour = writable(void 0);
 	const colour = createColorMenu(viewer, {
 		property: "border",
 		group: "markup",
-		label: COLOUR_LABEL
+		label: COLOUR_LABEL,
+		fallback: defaultColour
 	});
 	colour.setAttribute("role", "menuitem");
 	colour.tabIndex = -1;
@@ -6883,6 +8334,7 @@ function createHighlightMenu(viewer) {
 		const on = tools?.active.get() === "highlight";
 		main.dataset.state = on ? "on" : "off";
 		main.setAttribute("aria-pressed", String(on));
+		defaultColour.set(viewer.document.get()?.annotations.defaults.color(m.kind));
 		menu.refresh();
 	}
 	function paint(panel, m) {
@@ -6929,6 +8381,7 @@ function createHighlightMenu(viewer) {
 	}
 	const menu = createMenu(trigger, {
 		label: "Highlights",
+		anchor: root,
 		attrs: { "data-ink-menu": "highlight" },
 		owns: (t) => t instanceof Element && t.closest("[data-ink-menu=\"color-border\"]") !== null,
 		render: (panel) => paint(panel, model())
@@ -6938,7 +8391,11 @@ function createHighlightMenu(viewer) {
 		for (const stop of stops) stop();
 		stops = [];
 		tools = next;
-		if (tools) stops = [tools.active.subscribe(refresh), tools.options("highlight").subscribe(refresh)];
+		if (tools) stops = [
+			tools.active.subscribe(refresh),
+			tools.options("highlight").subscribe(refresh),
+			viewer.document.subscribe(refresh)
+		];
 		if (!tools) menu.close();
 		refresh();
 	};
@@ -7695,6 +9152,7 @@ function createSignatureMenu(viewer, opts = {}) {
 	}
 	const menu = createMenu(trigger, {
 		label: SIGNATURE_LABELS.menu,
+		anchor: root,
 		attrs: { "data-ink-menu": "signature" },
 		render: (panel) => paint(panel, model())
 	});
@@ -7731,6 +9189,6 @@ function createSignatureMenu(viewer, opts = {}) {
 	return root;
 }
 //#endregion
-export { ARROWHEAD_CHOICES, ARROWHEAD_ENDING, COLOR_COLUMNS, COLOR_LABELS, DASH_PATTERN, DEFAULT_CORNER_RADIUS, DEFAULT_FREETEXT_WIDTH, DEFAULT_HIGHLIGHT_OPTIONS, DEFAULT_SHAPE_SIZE, FONT_FAMILIES, LINE_WEIGHTS, MARKUP_ICONS, MARKUP_KINDS, MARKUP_LABELS, PALETTE, SHAPE_COLUMNS, SHAPE_ICONS, SHAPE_KINDS, SHAPE_LABELS, SIGNATURE_FONTS, SIGNATURE_IMAGE_MAX_LENGTH, SIGNATURE_IMAGE_MAX_SIDE, SIGNATURE_IMAGE_TYPES, SIGNATURE_LABELS, SIGNATURE_TABS, TOOL_LABELS, ZOOM_LEVELS, annotationElementFor, arrowheadChoice, attachViewportKeys, builtinTools, clampFontSize, colorMenuModel, computeCssLayout, confidenceAttr, createColorMenu, createFocusReturn, createHighlightMenu, createIcon, createImageSignature, createLineStyleMenu, createMenu, createNextPage, createOverlay, createPageCount, createPageInput, createPageMount, createPageRenderer, createPageTransform, createPrevPage, createRedo, createShapeMenu, createSignatureDialog, createSignatureDraft, createSignatureMenu, createSignaturePad, createSignaturePreview, createTextLayer, createTextStyleMenu, createToolButton, createToolController, createToolOptions, createToolbar, createToolbarSeparator, createTypedSignature, createUndo, createViewer, createViewport, createZoomIn, createZoomOut, createZoomSelect, cssRectsToUserRects, cssVariableDefaults, editFreeText, fitZoomCss, focusInitialMenuItem, fontFamilyValue, freetextTool, getSelectionQuads, handleMenuKeys, handleRadioKeys, handleTabKeys, highlightMenuModel, highlightTool, hitFor, lineStyleMenuModel, menuItems, mostVisiblePageCss, mountViewer, normalizeRotation, noteTool, observeAnnotationElement, redactAreaTool, renderAnnotationContent, renderTypedSignature, selectTextTool, selectTool, shapeMenuModel, shapeTool, shouldKeepOpenOnAnnotation, signatureMenuModel, signaturePreview, signatureTool, textStyleMenuModel, threadDeleteLabel, threadPopoverLabel, trackToolStyle, trapTab, visibleRangeCss, withHostTools };
+export { ARROWHEAD_CHOICES, ARROWHEAD_ENDING, COLOR_COLUMNS, COLOR_LABELS, DASH_PATTERN, DEFAULT_CORNER_RADIUS, DEFAULT_FREETEXT_WIDTH, DEFAULT_HIGHLIGHT_OPTIONS, DEFAULT_SHAPE_SIZE, FONT_FAMILIES, LINE_WEIGHTS, MARKUP_ICONS, MARKUP_KINDS, MARKUP_LABELS, PALETTE, SHAPE_COLUMNS, SHAPE_ICONS, SHAPE_KINDS, SHAPE_LABELS, SIGNATURE_FONTS, SIGNATURE_IMAGE_MAX_LENGTH, SIGNATURE_IMAGE_MAX_SIDE, SIGNATURE_IMAGE_TYPES, SIGNATURE_LABELS, SIGNATURE_TABS, TOOL_LABELS, ZOOM_LEVELS, annotationElementFor, arrowheadChoice, attachViewportKeys, builtinTools, clampFontSize, colorMenuModel, computeCssLayout, createColorMenu, createCommandButton, createFocusReturn, createHighlightMenu, createIcon, createImageSignature, createLineStyleMenu, createMenu, createNextPage, createOverlay, createPageCount, createPageInput, createPageMount, createPageRenderer, createPageTransform, createPluginHost, createPluginLayers, createPopover, createPrevPage, createRedo, createShapeMenu, createSignatureDialog, createSignatureDraft, createSignatureMenu, createSignaturePad, createSignaturePreview, createTextLayer, createTextStyleMenu, createToolButton, createToolController, createToolOptions, createToolbar, createToolbarSeparator, createTypedSignature, createUndo, createViewer, createViewport, createZoomIn, createZoomOut, createZoomSelect, cssRectsToUserRects, cssVariableDefaults, definePlugin, editFreeText, fitZoomCss, focusInitialMenuItem, fontFamilyValue, freetextTool, getSelectionQuads, handleMenuKeys, handleRadioKeys, handleTabKeys, highlightMenuModel, highlightTool, hitFor, lineStyleMenuModel, menuItems, mostVisiblePageCss, mountViewer, normalizeRotation, noteTool, observeAnnotationElement, placePanel, redactAreaTool, renderAnnotationContent, renderTypedSignature, selectTextTool, selectTool, shapeMenuModel, shapeTool, shouldKeepOpenOnAnnotation, signatureMenuModel, signaturePreview, signatureTool, textStyleMenuModel, threadDeleteLabel, threadPopoverLabel, trackToolStyle, trapTab, unknownCommand, visibleRangeCss, withHostTools };
 
 //# sourceMappingURL=dom.mjs.map