@inkbar/core 0.4.0 → 0.5.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 readonly, 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, 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, _n as isInkError, b as isAbandonedNote, d as recogniseStroke, dn as rectsIntersect, en as writable, f as DEFAULT_CORNER_RADIUS, g as constrain, gn as InkError, h as SHAPE_KINDS, i as createInkTemplate, l as placeSignature, ln as rectFromPoints, m as DEFAULT_SHAPE_SIZE, o as createMemorySignatureStore, p as DEFAULT_SHAPE_OPTIONS, q as translated, r as createImageTemplate, rn as invertMatrix, s as createSignatureLibrary, tn as applyMatrix, tt as isProduction, v as isPointerOnlyKind, w as threadOf, y as shapeInput, z as isBubble, zt as isStandardCallout } from "./signatures-CMapTKrC.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
@@ -966,6 +966,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 +1001,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 +1249,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 +1259,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 +1303,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 +1382,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 +1410,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 +1427,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 +1771,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 +1828,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 +1842,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 +1874,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 +1900,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 +1966,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 {
@@ -2160,12 +2304,8 @@ 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;
 }
@@ -2173,14 +2313,60 @@ function ariaLabel(a) {
 function readingOrder(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 +2385,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 +2401,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 +2440,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 +2454,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 +2472,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);
@@ -2561,6 +2792,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();
@@ -2611,7 +2849,8 @@ function createPageMount(opts) {
 		document,
 		...opts.devicePixelRatio === void 0 ? {} : { devicePixelRatio: opts.devicePixelRatio },
 		...opts.onActivate ? { onActivate: (id) => opts.onActivate?.(id) } : {},
-		...opts.isCustom ? { isCustom: (a) => opts.isCustom?.(a) === true } : {}
+		...opts.isCustom ? { isCustom: (a) => opts.isCustom?.(a) === true } : {},
+		...opts.decorate ? { decorate: opts.decorate } : {}
 	});
 	return {
 		renderer,
@@ -2665,135 +2904,643 @@ function createToolOptions(tools = []) {
 	};
 }
 //#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)
-	};
-}
-function createToolController$1(opts) {
-	const byId = new Map(opts.tools.map((t) => [t.id, t]));
-	const active = writable(opts.initial ?? "select-text");
-	let current;
-	const registry = opts.options ?? createToolOptions();
-	registry.register(opts.tools);
-	const ctx = {
-		...opts.ctx,
-		get signatures() {
-			return opts.ctx.signatures;
-		},
-		toolStyle: opts.ctx.toolStyle ?? createToolStyle({
-			store: opts.ctx.store,
-			history: opts.ctx.history ?? { batch: (fn) => fn() },
-			activeGroup: () => current?.styleGroup,
-			active
-		}),
-		options: () => registry.get(current?.id ?? active.get())
-	};
-	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();
-	/** True for events from a pointer other than the one whose press is live. */
-	const foreign = (e) => pressed !== void 0 && pressed !== e.pointerId;
-	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?.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;
-		current?.onPointerMove?.(e, hitFor(ctx, e));
-	};
-	const onUp = (e) => {
-		if (!e.isPrimary || e.button !== 0 || foreign(e)) return;
-		if (pressed === e.pointerId) pressed = void 0;
-		if (swallow.delete(e.pointerId)) {
-			release(e.pointerId);
-			return;
+//#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");
 		}
-		current?.onPointerUp?.(e, hitFor(ctx, e));
-		release(e.pointerId);
+		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 onCancel = (e) => {
-		if (!e.isPrimary || foreign(e)) return;
-		if (e.type === "lostpointercapture" && pressed !== e.pointerId) return;
-		if (pressed === e.pointerId) pressed = void 0;
-		swallow.delete(e.pointerId);
-		current?.onPointerCancel?.(e);
+	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;
 	};
-	const onKey = (e) => {
-		if (inCustomContent(e.target)) return;
-		current?.onKeyDown?.(e);
-		if (isViewportEnter(e, ctx.root)) editSelectedText(e);
+	/** 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 editSelectedText(e) {
-		const selected = ctx.store.selection.get();
-		if (selected.length !== 1) return;
-		const id = selected[0];
-		const a = ctx.store.get(id);
-		const el = ctx.root.querySelector(`[data-annotation="${CSS.escape(id)}"]`);
-		if (!canEditFreeText(a, el) || !el) return;
+	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();
-		editFreeTextIn(ctx.store, el, id, ctx.viewport.transformFor(a.page));
-	}
-	function capture(id) {
-		try {
-			ctx.root.setPointerCapture?.(id);
-		} catch {}
-	}
-	function release(id) {
-		try {
-			if (ctx.root.hasPointerCapture?.(id)) ctx.root.releasePointerCapture(id);
-		} catch {}
+		return 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);
-	function set(id, options) {
+	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)
+	};
+}
+function createToolController$1(opts) {
+	const byId = new Map(opts.tools.map((t) => [t.id, t]));
+	const active = writable(opts.initial ?? "select-text");
+	let current;
+	const registry = opts.options ?? createToolOptions();
+	registry.register(opts.tools);
+	const ctx = {
+		...opts.ctx,
+		get signatures() {
+			return opts.ctx.signatures;
+		},
+		toolStyle: opts.ctx.toolStyle ?? createToolStyle({
+			store: opts.ctx.store,
+			history: opts.ctx.history ?? { batch: (fn) => fn() },
+			activeGroup: () => current?.styleGroup,
+			active
+		}),
+		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);
+		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;
+		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) => {
+		if (!e.isPrimary || e.button !== 0 || foreign(e)) return;
+		if (pressed === e.pointerId) pressed = void 0;
+		if (swallow.delete(e.pointerId)) {
+			release(e.pointerId);
+			return;
+		}
+		if (editingMade) {
+			editingMade = false;
+			madeEdit?.onPointerUp(e, hitFor(ctx, e));
+		} else current?.onPointerUp?.(e, hitFor(ctx, e));
+		release(e.pointerId);
+	};
+	const onCancel = (e) => {
+		if (!e.isPrimary || foreign(e)) return;
+		if (e.type === "lostpointercapture" && pressed !== e.pointerId) return;
+		if (pressed === e.pointerId) pressed = void 0;
+		swallow.delete(e.pointerId);
+		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;
+		const id = selected[0];
+		const a = ctx.store.get(id);
+		const el = ctx.root.querySelector(`[data-annotation="${CSS.escape(id)}"]`);
+		if (!canEditFreeText(a, el) || !el) return;
+		e.preventDefault();
+		editFreeTextIn(ctx.store, el, id, ctx.viewport.transformFor(a.page));
+	}
+	function capture(id) {
+		try {
+			ctx.root.setPointerCapture?.(id);
+		} catch {}
+	}
+	function release(id) {
+		try {
+			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 +3559,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,6 +3594,17 @@ 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.
 */
@@ -2917,6 +3681,7 @@ function freehandTool(opts) {
 	};
 	return {
 		id: opts.id,
+		kind: "sticky",
 		cursor: "crosshair",
 		styleGroup: "ink",
 		activate(c) {
@@ -3123,7 +3888,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 +3898,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 +3926,7 @@ function freetextTool() {
 	};
 	return {
 		id: "freetext",
+		kind: "one-shot",
 		cursor: "text",
 		styleGroup: "text",
 		defaultOptions: {},
@@ -3263,6 +4031,7 @@ function highlightTool() {
 	};
 	return {
 		id: "highlight",
+		kind: "sticky",
 		cursor: "text",
 		styleGroup: "markup",
 		defaultOptions: { ...DEFAULT_HIGHLIGHT_OPTIONS },
@@ -3306,10 +4075,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;
@@ -3363,487 +4134,122 @@ function focusWhenDrawn(ctx, id) {
 	let frames = 0;
 	const view = doc.defaultView;
 	const tick = () => {
-		if (doc.activeElement !== ctx.root) return;
-		const el = find();
-		if (el) el.focus({ preventScroll: true });
-		else if (++frames < FOCUS_FRAMES) view?.requestAnimationFrame(tick);
-	};
-	view?.requestAnimationFrame(tick);
-}
-//#endregion
-//#region src/dom/tools/redact-area.ts
-/** Smallest drag, in CSS px on each axis, that draws a box rather than counting as a click. */
-const MIN_CSS$1 = 3;
-function redactAreaTool() {
-	let ctx;
-	let start;
-	let draft;
-	/** 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", {
-			type: "redact",
-			page: s.page,
-			quads: s.quads
-		}));
-		ctx.clearSelection();
-		return true;
-	};
-	const clear = () => {
-		draft?.remove();
-		draft = void 0;
-		start = void 0;
-	};
-	return {
-		id: "redact-area",
-		cursor: "crosshair",
-		styleGroup: "redact",
-		activate(c) {
-			ctx = c;
-		},
-		deactivate() {
-			clear();
-			ctx = void 0;
-		},
-		onPointerDown(e, hit, annotationId) {
-			if (!hit) return;
-			if (annotationId !== void 0) {
-				const a = ctx?.store.get(annotationId);
-				if (!a || !isTextMarkup(a)) return;
-				e.stopPropagation();
-			}
-			start = hit;
-			e.preventDefault();
-			return true;
-		},
-		onPointerMove(e) {
-			if (!start) return;
-			if (e.buttons === 0 || !start.host.isConnected) {
-				clear();
-				return;
-			}
-			const css = clampedCssIn(start.host, e);
-			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;
+		if (doc.activeElement !== ctx.root) return;
+		const el = find();
+		if (el) el.focus({ preventScroll: true });
+		else if (++frames < FOCUS_FRAMES) view?.requestAnimationFrame(tick);
 	};
-	/** 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);
+	view?.requestAnimationFrame(tick);
+}
+//#endregion
+//#region src/dom/tools/redact-area.ts
+/** Smallest drag, in CSS px on each axis, that draws a box rather than counting as a click. */
+const MIN_CSS$1 = 3;
+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);
 	};
-	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();
+	/** 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;
+		const c = ctx;
+		const ids = selections.map((s) => c.store.add(c.toolStyle.resolve("redact", {
+			type: "redact",
+			page: s.page,
+			quads: s.quads
+		})).id);
+		c.clearSelection();
+		made(c, ids);
 		return true;
-	}
+	};
+	const clear = () => {
+		draft?.remove();
+		draft = void 0;
+		start = void 0;
+	};
 	return {
-		reset,
+		id: "redact-area",
+		kind: "one-shot",
+		cursor: "crosshair",
+		styleGroup: "redact",
+		activate(c) {
+			ctx = c;
+		},
+		deactivate() {
+			clear();
+			ctx = void 0;
+		},
 		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;
+				const a = ctx?.store.get(annotationId);
+				if (!a || !isTextMarkup(a)) return;
+				e.stopPropagation();
 			}
-			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([]);
+			start = hit;
 			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);
+			if (!start) return;
+			if (e.buttons === 0 || !start.host.isConnected) {
+				clear();
 				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;
+			const css = clampedCssIn(start.host, e);
+			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);
 			}
-			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 +4327,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 +4370,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 +4394,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 +4463,7 @@ function shapeTool() {
 	};
 	return {
 		id: "shape",
+		kind: "one-shot",
 		cursor: "crosshair",
 		styleGroup: "shape",
 		defaultOptions: { ...DEFAULT_SHAPE_OPTIONS },
@@ -4114,6 +4533,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 +4557,7 @@ function signatureTool() {
 	};
 	return {
 		id: "signature",
+		kind: "one-shot",
 		cursor: "copy",
 		defaultOptions: {},
 		activate(c) {
@@ -4647,9 +5068,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 +5085,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 +5105,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())
 	};
 }
@@ -5031,35 +5457,190 @@ function createFocusReturn(opts) {
 	/** 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());
-			}
+		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 });
+		}
+	};
+}
+//#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]";
+/**
+* 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`;
+}
+/**
+* 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`). 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);
+	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;
 		},
-		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 });
+		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();
 		}
 	};
 }
@@ -5105,6 +5686,7 @@ function mountViewer(opts) {
 			store: doc.annotations,
 			onActivate: (id) => opts.onActivate?.(id),
 			isCustom: () => isCustom,
+			decorate: (a) => opts.decorateAnnotation?.(a),
 			onError: (cause, layer) => {
 				failed.add(layer);
 				if (error) return;
@@ -5281,6 +5863,10 @@ 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;
@@ -5289,224 +5875,6 @@ function mountViewer(opts) {
 	};
 }
 //#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;
@@ -5676,7 +6044,7 @@ function createThreadForm(n, actions) {
 //#endregion
 //#region src/dom/viewer/create-viewer.ts
 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, 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,7 +6054,7 @@ 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 root = h("div", {
 		"data-ink-root": "",
@@ -5734,20 +6102,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);
@@ -5800,7 +6163,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();
@@ -5863,6 +6226,10 @@ function createViewer(el, opts) {
 		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);
+		},
 		open,
 		destroy() {
 			if (destroyed) return;
@@ -6188,7 +6555,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 +6771,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 +6885,7 @@ function createColorMenu(viewer, opts) {
 	};
 	follow(viewer.engine.get());
 	viewer.engine.subscribe(follow);
+	opts.fallback?.subscribe(refresh);
 	return trigger;
 }
 //#endregion
@@ -6801,6 +7169,7 @@ function createShapeMenu(viewer) {
 	}
 	const menu = createMenu(trigger, {
 		label: "Shapes",
+		anchor: root,
 		attrs: { "data-ink-menu": "shape" },
 		render: (panel) => paint(panel, model())
 	});
@@ -6859,10 +7228,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 +7255,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 +7302,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 +7312,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 +8073,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 +8110,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, createFocusReturn, createHighlightMenu, createIcon, createImageSignature, createLineStyleMenu, createMenu, createNextPage, createOverlay, createPageCount, createPageInput, createPageMount, createPageRenderer, createPageTransform, 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, 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, visibleRangeCss, withHostTools };
 
 //# sourceMappingURL=dom.mjs.map