@embedpdf/web 3.0.0-next.14 → 3.0.0-next.15

package/dist/index.js

@@ -1,12 +1,14 @@
 //#region src/file-picker.ts
 /**
 * A one-shot file dialog. Opens a throwaway `<input type=file>`, resolves the
-* chosen `File`, or `null` when the dialog is dismissed. MUST be called
+* chosen `File`, or `null` when the dialog is dismissed. Must be called
 * synchronously from a user gesture (a click) or the browser refuses to open it.
 *
 * A `File` is a `Blob`, which is a `BinarySource` everywhere in the stack, so the
 * caller can hand the result straight to the engine — this module stays a pure
-* DOM utility with no EmbedPDF types.
+* DOM utility with no EmbedPDF types. It also holds the default provider for
+* the annotation plugin's file prompt ({@link pickRequestedFile}), and its
+* one install per document ({@link installFilePickerProvider}).
 */
 const IMAGE_ACCEPT = "image/png,image/jpeg,application/pdf";
 /** Open the file dialog; resolve the picked file, or null if cancelled. */
@@ -22,21 +24,16 @@ function pickImageFile(options = {}) {
 		const finish = (value) => {
 			if (settled) return;
 			settled = true;
-			window.removeEventListener("focus", onFocus);
 			input.remove();
 			resolve(value);
 		};
-		const onFocus = () => {
-			setTimeout(() => finish(null), 300);
-		};
 		input.addEventListener("change", () => finish(input.files?.[0] ?? null), { once: true });
 		input.addEventListener("cancel", () => finish(null), { once: true });
-		window.addEventListener("focus", onFocus, { once: true });
 		document.body.appendChild(input);
 		input.click();
 	});
 }
-/** The same dialog with NO type filter — any file (attachments). */
+/** The same dialog with no type filter — any file (attachments). */
 const pickFile = (options = {}) => pickImageFile({
 	accept: "*/*",
 	...options
@@ -49,34 +46,287 @@ const pickFile = (options = {}) => pickImageFile({
 function saveFile(bytes, name, mimeType) {
 	const blob = bytes instanceof Blob ? bytes : new Blob([bytes], { type: mimeType ?? "application/octet-stream" });
 	const url = URL.createObjectURL(blob);
-	const a = document.createElement("a");
-	a.href = url;
-	a.download = name;
-	a.style.display = "none";
-	document.body.appendChild(a);
-	a.click();
-	a.remove();
+	const anchor = document.createElement("a");
+	anchor.href = url;
+	anchor.download = name;
+	anchor.style.display = "none";
+	document.body.appendChild(anchor);
+	anchor.click();
+	anchor.remove();
 	setTimeout(() => URL.revokeObjectURL(url), 1e3);
 }
+/**
+* The browser's default for a plugin's file prompt (the annotation plugin's
+* `FilePickerProvider`): the file dialog, honouring the request's `accept`
+* filter. A picked `File` carries its own name and type, so it goes straight
+* through as the engine's file source; a dismissed dialog answers `null`.
+*/
+async function pickRequestedFile(request) {
+	const file = await pickFile({ accept: request.accept ?? "*/*" });
+	return file ? { data: file } : null;
+}
+/** How many mounted installs each document's port has: one is the rule. */
+const filePickerInstalls = /* @__PURE__ */ new WeakMap();
+/**
+* Install `provider` as a document's file picker, until the call it returns
+* removes it. A document has one port, so a second install while the first
+* is there silently replaces it: `onRepeat` hears of it (an adapter warns in
+* development, saying where to install it once).
+*/
+function installFilePickerProvider(annotation, provider, onRepeat) {
+	const installed = (filePickerInstalls.get(annotation) ?? 0) + 1;
+	filePickerInstalls.set(annotation, installed);
+	if (installed > 1) onRepeat();
+	const remove = annotation.setFilePickerProvider(provider);
+	return () => {
+		filePickerInstalls.set(annotation, (filePickerInstalls.get(annotation) ?? 1) - 1);
+		remove();
+	};
+}
+//#endregion
+//#region src/clock.ts
+/**
+* The browser's clock. A page without `requestAnimationFrame` (some test
+* environments) gets a clock without frames, and plugins then skip animation.
+*/
+function browserClock() {
+	const clock = {
+		now: () => performance.now(),
+		after(ms, run) {
+			const timer = setTimeout(run, ms);
+			return () => clearTimeout(timer);
+		}
+	};
+	if (typeof requestAnimationFrame === "function") clock.nextFrame = (run) => {
+		const frame = requestAnimationFrame(run);
+		return () => cancelAnimationFrame(frame);
+	};
+	return clock;
+}
+//#endregion
+//#region src/css-text.ts
+/**
+* Style records as CSS text. This package hands styles out as records with
+* camelCase names (`strokeWidth`, `fontFamily`) and lengths with their units,
+* the shape a style object takes in React, Vue and Angular. A framework whose
+* `style` is a string (Svelte) turns a record into CSS text with
+* {@link cssText}: `stroke-width: …; font-family: …`. Paint values are
+* `var(--epdf-…, …)`, which only work in `style`, never in an SVG
+* presentation attribute.
+*/
+/** `strokeWidth` → `stroke-width`. */
+const cssNameOf = (name) => name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+/** A style record as CSS text, leaving out what is `undefined` or `null`. */
+function cssText(style) {
+	return Object.entries(style).filter((entry) => entry[1] != null).map(([name, value]) => `${cssNameOf(name)}: ${value}`).join("; ");
+}
+//#endregion
+//#region src/focusable.ts
+/**
+* Which elements take keyboard focus, for the keyboard models (a toolbar's
+* stops, a menu's items, a dialog's tab order). Decided from the markup only,
+* never from layout, so it answers the same before the first paint: `hidden`,
+* `inert` and `disabled` count; a `display: none` from a stylesheet doesn't.
+*/
+/** Elements that can take focus, before {@link canTakeFocus} rules out the disabled and the hidden. */
+const FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"area[href]",
+	"button",
+	"input:not([type=\"hidden\"])",
+	"select",
+	"textarea",
+	"iframe",
+	"summary",
+	"[tabindex]",
+	"[contenteditable]:not([contenteditable=\"false\"])"
+].join(", ");
+/** Form controls the `disabled` attribute takes focus from. */
+const DISABLEABLE = /* @__PURE__ */ new Set([
+	"BUTTON",
+	"INPUT",
+	"SELECT",
+	"TEXTAREA",
+	"FIELDSET",
+	"OPTGROUP",
+	"OPTION"
+]);
+/** Whether an element can take focus now: focusable markup, not disabled, not hidden or inert. */
+function canTakeFocus(element) {
+	if (!element.matches(FOCUSABLE_SELECTOR)) return false;
+	if (DISABLEABLE.has(element.tagName) && element.disabled) return false;
+	return element.closest("[hidden], [inert]") === null;
+}
+/** Whether Tab stops at an element: it takes focus and its `tabIndex` isn't negative. */
+function isTabbable(element) {
+	return canTakeFocus(element) && element.tabIndex >= 0;
+}
+/**
+* The elements `root` shows, in order: a `<slot>` that has elements assigned shows them, and what
+* is inside them, in place of its own content. A slot in a hidden or inert part shows nothing.
+*/
+function shownElementsIn(root) {
+	const shown = [];
+	const visit = (parent) => {
+		for (const child of parent.children) {
+			if (child.localName === "slot") {
+				const assigned = child.assignedElements({ flatten: true });
+				if (assigned.length > 0) {
+					if (child.closest("[hidden], [inert]") !== null) continue;
+					for (const element of assigned) {
+						shown.push(element);
+						visit(element);
+					}
+					continue;
+				}
+			}
+			shown.push(child);
+			visit(child);
+		}
+	};
+	visit(root);
+	return shown;
+}
+/**
+* The elements inside `root` that can take focus, in the order they show: through a `<slot>`,
+* the page's elements the browser shows there (a web component's slotted children).
+*/
+function focusablesIn(root) {
+	if (root.querySelector("slot") === null) return [...root.querySelectorAll(FOCUSABLE_SELECTOR)].filter(canTakeFocus);
+	return shownElementsIn(root).filter((element) => element instanceof HTMLElement && canTakeFocus(element));
+}
+/** The elements inside `root` that Tab stops at, in document order. */
+function tabbablesIn(root) {
+	return focusablesIn(root).filter((element) => element.tabIndex >= 0);
+}
+/**
+* The element that has focus, looking into shadow roots: the document's
+* `activeElement` is only the outermost shadow host. Null when nothing has
+* focus (the body).
+*/
+function deepActiveElementOf(doc) {
+	let active = doc.activeElement;
+	while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+	return active === doc.body ? null : active;
+}
+/**
+* Whether the element with focus is `container` or inside it, as the page shows it: through
+* shadow roots, and from an element slotted into a shadow root to its slot, so a control
+* slotted into a viewer counts as inside the viewer, as its keys do.
+*/
+function containsFocus(container) {
+	let node = deepActiveElementOf(container.ownerDocument);
+	while (node) {
+		if (node === container) return true;
+		node = node.assignedSlot ?? node.parentNode ?? node.host ?? null;
+	}
+	return false;
+}
+/**
+* Whether a control says it can't be used now, through `disabled` or
+* `aria-disabled="true"`: the keyboard models pass over it.
+*/
+function isUnavailable(element) {
+	if (DISABLEABLE.has(element.tagName) && element.disabled) return true;
+	return element.getAttribute("aria-disabled") === "true";
+}
+/** Input types that type text, so they keep Left, Right, Home and End for the caret. */
+const TEXT_INPUT_TYPES = /* @__PURE__ */ new Set([
+	"",
+	"text",
+	"search",
+	"url",
+	"tel",
+	"email",
+	"password"
+]);
+/** Input types that change their value with the arrow keys, both ways. */
+const STEPPED_INPUT_TYPES = /* @__PURE__ */ new Set([
+	"number",
+	"range",
+	"radio",
+	"date",
+	"datetime-local",
+	"month",
+	"time",
+	"week"
+]);
+/** Roles of widgets that move with the arrow keys themselves. */
+const ARROW_ROLES = /* @__PURE__ */ new Set([
+	"slider",
+	"spinbutton",
+	"combobox",
+	"textbox",
+	"listbox",
+	"tree",
+	"grid"
+]);
+/**
+* Whether a focused control uses `key` itself, so a keyboard model around it
+* must leave the key alone: a text field moves its caret with Left, Right,
+* Home and End; a select changes with Up and Down; a slider takes them all.
+*/
+function usesKey(element, key) {
+	const horizontal = key === "ArrowLeft" || key === "ArrowRight" || key === "Home" || key === "End";
+	const vertical = key === "ArrowUp" || key === "ArrowDown";
+	if (!horizontal && !vertical) return false;
+	if (element.isContentEditable || element.tagName === "TEXTAREA") return true;
+	if (element.tagName === "SELECT") return vertical;
+	if (element.tagName === "INPUT") {
+		const type = (element.getAttribute("type") ?? "").toLowerCase();
+		return STEPPED_INPUT_TYPES.has(type) || TEXT_INPUT_TYPES.has(type) && horizontal;
+	}
+	const role = element.getAttribute("role");
+	return role !== null && ARROW_ROLES.has(role);
+}
+//#endregion
+//#region src/text-field-event.ts
+/** Telling a key or a copy meant for a text field from one meant for the viewer around it. */
+/**
+* Whether an event comes from a text field: an input, a text area, a select or editable
+* content. Read from the event's first target, so a field inside a shadow root counts too
+* (a listener on the document sees the shadow host as the target).
+*/
+function isFromTextField(event) {
+	const element = event.composedPath?.()[0] ?? event.target;
+	if (!element || !element.tagName) return false;
+	return element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "SELECT" || element.isContentEditable;
+}
 //#endregion
 //#region src/clipboard.ts
+/**
+* Clipboard wiring for text selection — the environmental half of copy.
+*
+* The selection plugin is deliberately DOM-free: its public capability ends
+* at `readText()` (data). Everything that touches `navigator.clipboard` or
+* the native `copy` event lives here, structurally typed so this module
+* stays a pure DOM utility with no EmbedPDF dependencies (the selection
+* capability satisfies {@link ClipboardSelectionSource} as-is).
+*/
 const PREFETCH_DEBOUNCE_MS = 150;
 /**
 * Wire clipboard copy for a selection. Two delivery paths, both fed by the
 * prefetched text:
 *
 *   - the native `copy` event (menu Edit→Copy, or ctrl/cmd+C while the page
-*     has a DOM selection or focused editable — e.g. the viewer shell's
-*     focus sink): answered SYNCHRONOUSLY from the cache;
+*     has a DOM selection): answered synchronously from the cache;
 *   - ctrl/cmd+C with no DOM selection (canvas-rendered viewers usually
 *     have none, and browsers don't dispatch `copy` then): a keydown
 *     fallback writes via the async Clipboard API inside the keystroke's
 *     user-activation window.
 *
+* A selection the user may not copy is never copied by either path, nor by
+* the browser: the key and the copy are prevented, and `onRefused` says so.
+* Keys and copies in a text field are the field's, and left alone. With an
+* element as `target`, only the keys and copies made while focus is inside it
+* are its own.
+*
 * Returns the unwire function. Mount once per document view (not per page).
 */
 function wireSelectionClipboard(selection, options = {}) {
 	const target = options.target ?? document;
+	const doc = target.ownerDocument ?? target;
+	const isOurs = () => target === doc || containsFocus(target);
 	const prefetch = options.prefetch ?? true;
 	let cached = null;
 	let generation = 0;
@@ -89,40 +339,58 @@ function wireSelectionClipboard(selection, options = {}) {
 			if (gen === generation) cached = text;
 		}, () => {});
 	};
-	const offCommit = selection.onCommit(() => {
+	const offCommit = selection.onCommitted(() => {
 		if (timer) clearTimeout(timer);
 		timer = null;
 		refresh();
 	});
-	const offChange = selection.onChange(() => {
+	const offChange = selection.onChanged(() => {
 		generation++;
 		cached = null;
 		if (timer) clearTimeout(timer);
 		timer = setTimeout(refresh, PREFETCH_DEBOUNCE_MS);
 	});
-	const onCopy = (e) => {
+	/** Whether there is a selection the user may not copy: the copy is then refused. */
+	const isRefused = () => selection.hasSelection() && !selection.canCopy();
+	const refuse = (event) => {
+		event.preventDefault();
+		options.onRefused?.();
+	};
+	const onCopy = (event) => {
+		if (!isOurs() || isFromTextField(event)) return;
+		if (isRefused()) return refuse(event);
 		if (cached == null || cached === "" || !selection.hasSelection()) return;
-		e.clipboardData?.setData("text/plain", cached);
-		e.preventDefault();
+		event.clipboardData?.setData("text/plain", cached);
+		event.preventDefault();
 	};
-	const onKeyDown = (e) => {
-		if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== "c" || e.shiftKey || e.altKey) return;
+	const onKeyDown = (event) => {
+		if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "c" || event.shiftKey || event.altKey || event.defaultPrevented || !isOurs() || isFromTextField(event)) return;
+		if (isRefused()) return refuse(event);
 		if (!selection.hasSelection() || !selection.canCopy()) return;
-		const dom = target.getSelection?.();
+		const dom = domSelectionOf(target);
 		if (dom && !dom.isCollapsed) return;
 		copySelection(selection);
 	};
-	target.addEventListener("copy", onCopy);
-	target.addEventListener("keydown", onKeyDown);
+	doc.addEventListener("copy", onCopy);
+	doc.addEventListener("keydown", onKeyDown);
 	return () => {
 		offCommit();
 		offChange();
 		if (timer) clearTimeout(timer);
-		target.removeEventListener("copy", onCopy);
-		target.removeEventListener("keydown", onKeyDown);
+		doc.removeEventListener("copy", onCopy);
+		doc.removeEventListener("keydown", onKeyDown);
 	};
 }
 /**
+* The DOM selection the browser copies from: the target's root's (its shadow root, where the
+* browser keeps one there, or its document), else its owner document's.
+*/
+function domSelectionOf(target) {
+	const root = target.getRootNode();
+	if (typeof root.getSelection === "function") return root.getSelection();
+	return target.ownerDocument?.getSelection() ?? null;
+}
+/**
 * Toolbar/menu path: read the selected text and write it to the clipboard
 * via the async Clipboard API. Call from a user-gesture handler (browsers
 * require a secure context + user activation for clipboard writes). Resolves
@@ -135,21 +403,77 @@ async function copySelection(selection) {
 	return text;
 }
 //#endregion
+//#region src/command-shortcuts.ts
+/**
+* Keyboard shortcuts for commands: one `keydown` listener runs the command a
+* key matches. Matching is the commands plugin's; what this module adds is the
+* browser's part: the platform, whether a key was typed into a text field, and
+* the default action a shortcut replaces. Structurally typed, so it needs no EmbedPDF
+* package (the commands host capability satisfies {@link ShortcutCommands}).
+*/
+/** Whether this is an Apple platform, where `Mod` is Cmd and shortcuts show as `⌘K`. */
+const isMacPlatform = () => typeof navigator !== "undefined" && /Mac|iP(hone|ad|od)/.test(navigator.platform);
+/**
+* Run a command when its shortcut is pressed, and return the function that stops listening.
+* Keys typed into a text field are left alone, except a command's that says it runs from text
+* fields (`shortcutInTextFields`, as Find does). A command that's turned off or not allowed
+* still takes its key, so the browser doesn't do something else with it (Cmd+P printing the
+* page), and `onRefused` says why. A key whose command only can't run right now keeps its
+* browser default.
+*/
+function bindCommandShortcuts(commands, options = {}) {
+	const isMac = options.isMac ?? isMacPlatform();
+	const target = options.target ?? window;
+	const onKeyDown = (event) => {
+		const stroke = event;
+		if (stroke.defaultPrevented) return;
+		const match = commands.matchStroke(stroke, {
+			isMac,
+			inTextField: isFromTextField(stroke)
+		});
+		if (!match) return;
+		if (match.refusal) {
+			stroke.preventDefault();
+			options.onRefused?.(match.commandId, match.refusal);
+			return;
+		}
+		if (!commands.canExecute(match.commandId)) return;
+		stroke.preventDefault();
+		commands.execute(match.commandId).catch(() => {});
+	};
+	target.addEventListener("keydown", onKeyDown);
+	return () => target.removeEventListener("keydown", onKeyDown);
+}
+//#endregion
 //#region src/anchored-position.ts
 /**
-* THE anchored projection: anchor → screen position, in one pure call —
+* The anchored projection: anchor → screen position, in one pure call —
 * projection, avoid-point transform, and the shared placement policy.
 * Frameworks recompute this inside their native reactive primitive
 * (a React render, a Vue `computed`, an Angular signal, a Svelte
 * `$derived`); nothing here schedules anything.
+*
+* Null when there is nothing to show: the page isn't shown, or the box is so
+* far out of view that the UI around it can't reach into it.
 */
-function projectAnchoredTarget(projector, anchor, placement, gap) {
-	const box = projector.toScreen(anchor.pon, anchor.bounds);
+function projectAnchoredTarget(projector, anchor, { placement, gap, pinned = false }, fit) {
+	const env = anchor.boundsIn ? projector.viewEnv(anchor.page) : null;
+	const bounds = env && anchor.boundsIn ? anchor.boundsIn(env) : anchor.bounds;
+	if (!bounds) return null;
+	const box = projector.toScreen(anchor.page, bounds);
 	if (!box) return null;
-	return positionAnchoredRect(box, placement, gap, anchor.avoid?.length ? projector.toScreenPoint(anchor.pon, anchor.avoid[0]) : null);
+	const view = projector.view();
+	const reach = Math.abs(gap) + (fit ? Math.max(fit.size.width, fit.size.height) : 0);
+	if (view && !overlaps(box, view, reach)) return null;
+	const avoid = anchor.avoid?.length ? projector.toScreenPoint(anchor.page, anchor.avoid[0]) : null;
+	return fit && !pinned ? fitAnchoredRect(box, placement, gap, fit, avoid) : positionAnchoredRect(box, placement, gap, avoid);
+}
+/** Whether `box`, grown by `margin` on every side, touches `view`. */
+function overlaps(box, view, margin) {
+	return box.x - margin < view.x + view.width && box.x + box.width + margin > view.x && box.y - margin < view.y + view.height && box.y + box.height + margin > view.y;
 }
 /**
-* The one genuinely BROWSER-driven invalidation: an element in normal
+* The one genuinely browser-driven invalidation: an element in normal
 * document flow moves when the document scrolls or the window resizes —
 * no state change announces it. `<PageView>`'s binding registers this;
 * the Stage never does (its camera is state, delivered through render).
@@ -162,31 +486,256 @@ function observeClientGeometry(callback) {
 		window.removeEventListener("resize", callback);
 	};
 }
-function positionAnchoredRect(box, placement, gap, avoid) {
-	const cx = box.x + box.width / 2;
-	const cy = box.y + box.height / 2;
-	switch (placement) {
-		case "bottom": return {
-			left: cx,
-			top: Math.max(box.y + box.height, avoid ? avoid.y : -Infinity) + gap,
-			transform: "translate(-50%, 0)"
+/**
+* The area anchored UI stays inside: the surface's own box (`'overlay'` space, the element's
+* positioned parent) or the window (`'client'` space). Null while the element has no
+* positioned parent to measure.
+*/
+function anchoredViewOf(element, space) {
+	if (space === "client") {
+		const { clientWidth, clientHeight } = element.ownerDocument.documentElement;
+		return {
+			x: 0,
+			y: 0,
+			width: clientWidth,
+			height: clientHeight
 		};
+	}
+	const container = element.offsetParent;
+	return container ? {
+		x: 0,
+		y: 0,
+		width: container.clientWidth,
+		height: container.clientHeight
+	} : null;
+}
+/** Whether two measurements give the same sizes, so a placement made from the first still holds. */
+function sameAnchoredFit(left, right) {
+	return left !== null && left.size.width === right.size.width && left.size.height === right.size.height && left.view.width === right.view.width && left.view.height === right.view.height;
+}
+/**
+* Measure anchored UI's `element` and the area it stays inside ({@link anchoredViewOf}) now, and
+* again whenever either resizes: `report` hears every measurement (keep it when
+* {@link sameAnchoredFit} says it changed). A camera move changes neither, so it measures nothing.
+* Returns the function that stops measuring.
+*/
+function observeAnchoredFit(element, space, report) {
+	const measure = () => {
+		const view = anchoredViewOf(element, space);
+		if (!view) return;
+		report({
+			size: {
+				width: element.offsetWidth,
+				height: element.offsetHeight
+			},
+			view
+		});
+	};
+	measure();
+	const observer = new ResizeObserver(measure);
+	observer.observe(element);
+	if (space === "overlay" && element.offsetParent) observer.observe(element.offsetParent);
+	else window.addEventListener("resize", measure);
+	return () => {
+		observer.disconnect();
+		window.removeEventListener("resize", measure);
+	};
+}
+/** A placement's side and how it lines up along that side. */
+function splitPlacement(placement) {
+	const [side, align] = placement.split("-");
+	return {
+		side,
+		align: align ?? "center"
+	};
+}
+function placeAround(box, placement, gap, avoid) {
+	const { side, align } = splitPlacement(placement);
+	const along = (start, length) => align === "start" ? start : align === "end" ? start + length : start + length / 2;
+	const alongShift = align === "start" ? 0 : align === "end" ? 1 : .5;
+	switch (side) {
+		case "bottom": {
+			const edge = Math.max(box.y + box.height, avoid ? avoid.y : -Infinity);
+			return {
+				x: along(box.x, box.width),
+				y: edge + gap,
+				shiftX: alongShift,
+				shiftY: 0
+			};
+		}
 		case "left": return {
-			left: Math.min(box.x, avoid ? avoid.x : Infinity) - gap,
-			top: cy,
-			transform: "translate(-100%, -50%)"
+			x: Math.min(box.x, avoid ? avoid.x : Infinity) - gap,
+			y: along(box.y, box.height),
+			shiftX: 1,
+			shiftY: alongShift
 		};
 		case "right": return {
-			left: Math.max(box.x + box.width, avoid ? avoid.x : -Infinity) + gap,
-			top: cy,
-			transform: "translate(0, -50%)"
+			x: Math.max(box.x + box.width, avoid ? avoid.x : -Infinity) + gap,
+			y: along(box.y, box.height),
+			shiftX: 0,
+			shiftY: alongShift
+		};
+		default: {
+			const edge = Math.min(box.y, avoid ? avoid.y : Infinity);
+			return {
+				x: along(box.x, box.width),
+				y: edge - gap,
+				shiftX: alongShift,
+				shiftY: 1
+			};
+		}
+	}
+}
+const shiftCss = (shift) => shift === 0 ? "0" : `${-shift * 100}%`;
+/**
+* Place an upright element around `box` (screen px). `avoid` is a screen
+* point the element must clear (e.g. the rotate knob): the element extends
+* only the edge it sits on, and only when the point protrudes past that
+* edge — so it clears the obstacle without ever shifting along the side.
+* When the point is on another side (e.g. a 90° shape, knob at mid-height
+* for a `top` placement) the edge is untouched.
+*/
+function positionAnchoredRect(box, placement, gap, avoid) {
+	const placed = placeAround(box, placement, gap, avoid);
+	return {
+		left: placed.x,
+		top: placed.y,
+		transform: `translate(${shiftCss(placed.shiftX)}, ${shiftCss(placed.shiftY)})`,
+		placement
+	};
+}
+const OPPOSITE = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+/** The same placement on the other side of the box: `'top-end'` becomes `'bottom-end'`. */
+const opposite = (placement) => {
+	const { side, align } = splitPlacement(placement);
+	const flipped = OPPOSITE[side];
+	return align === "center" ? flipped : `${flipped}-${align}`;
+};
+/**
+* Place an element of a known size around `box`, inside `fit.view`. It sits
+* where `placement` says when it fits there; otherwise on the opposite side,
+* lined up the same way, when that fits or has more room. Then, while `box`
+* is in view, it moves along both axes to stay inside the view, `gap` from
+* its edges; UI whose box scrolled out of view goes with it. The result is
+* the element's top-left corner, with no transform.
+*/
+function fitAnchoredRect(box, placement, gap, fit, avoid) {
+	const { size, view } = fit;
+	const inner = {
+		left: view.x + gap,
+		top: view.y + gap,
+		right: view.x + view.width - gap,
+		bottom: view.y + view.height - gap
+	};
+	const cornerOn = (at) => {
+		const placed = placeAround(box, at, gap, avoid);
+		return {
+			x: placed.x - placed.shiftX * size.width,
+			y: placed.y - placed.shiftY * size.height
 		};
-		default: return {
-			left: cx,
-			top: Math.min(box.y, avoid ? avoid.y : Infinity) - gap,
-			transform: "translate(-50%, -100%)"
+	};
+	const fits = (at, corner) => {
+		const { side } = splitPlacement(at);
+		if (side === "top") return corner.y >= inner.top;
+		if (side === "bottom") return corner.y + size.height <= inner.bottom;
+		if (side === "left") return corner.x >= inner.left;
+		return corner.x + size.width <= inner.right;
+	};
+	/** The space between the box and the view's edge on a placement's side. */
+	const roomOn = (at) => {
+		const { side } = splitPlacement(at);
+		if (side === "top") return box.y - view.y;
+		if (side === "bottom") return view.y + view.height - (box.y + box.height);
+		if (side === "left") return box.x - view.x;
+		return view.x + view.width - (box.x + box.width);
+	};
+	let chosen = placement;
+	let corner = cornerOn(chosen);
+	if (!fits(chosen, corner)) {
+		const other = opposite(chosen);
+		const otherCorner = cornerOn(other);
+		if (fits(other, otherCorner) || roomOn(other) > roomOn(chosen)) {
+			chosen = other;
+			corner = otherCorner;
+		}
+	}
+	if (box.x < view.x + view.width && box.x + box.width > view.x && box.y < view.y + view.height && box.y + box.height > view.y) {
+		const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+		corner = {
+			x: clamp(corner.x, inner.left, inner.right - size.width),
+			y: clamp(corner.y, inner.top, inner.bottom - size.height)
 		};
 	}
+	return {
+		left: corner.x,
+		top: corner.y,
+		transform: "none",
+		placement: chosen
+	};
+}
+//#endregion
+//#region src/annotation-frame.ts
+const turnCss = (rotation) => rotation ? `rotate(${rotation}deg)` : void 0;
+/** A frame in the page layer's pixels: where it is, its turn, and the size and scale a look is drawn at. */
+function frameInPixels(frame, page) {
+	const { box } = frame;
+	const topLeft = page.toPixels({
+		x: box.x,
+		y: box.y
+	});
+	const bottomRight = page.toPixels({
+		x: box.x + box.width,
+		y: box.y + box.height
+	});
+	const width = bottomRight.x - topLeft.x;
+	const height = bottomRight.y - topLeft.y;
+	const scale = frame.scale * page.zoom || 1;
+	return {
+		left: topLeft.x,
+		top: topLeft.y,
+		width,
+		height,
+		transform: turnCss(frame.rotation),
+		rotationOnScreen: ((frame.rotation + page.rotation) % 360 + 360) % 360,
+		scale,
+		design: {
+			width: width / scale,
+			height: height / scale
+		}
+	};
+}
+/**
+* A raster inside its frame, as CSS percentages of the frame. `raster`'s box
+* is relative to the frame's box, as the annotation plugin hands it out.
+*/
+function rasterInFrame(raster, frame) {
+	const percent = (part, whole) => `${whole > 0 ? part / whole * 100 : 0}%`;
+	return {
+		left: percent(raster.box.x, frame.box.width),
+		top: percent(raster.box.y, frame.box.height),
+		width: percent(raster.box.width, frame.box.width),
+		height: percent(raster.box.height, frame.box.height),
+		transform: turnCss(raster.rotation)
+	};
+}
+/**
+* The frame a look draws into. A `scaled` look (the default) draws at the
+* annotation's 100% size (`design`) inside an element of that size, which
+* the layer scales by `scale` from its top-left corner; an unscaled look
+* draws at the frame's size on screen.
+*/
+function lookFrameOf(frame, scaled) {
+	return {
+		width: scaled ? frame.design.width : frame.width,
+		height: scaled ? frame.design.height : frame.height,
+		rotation: frame.rotationOnScreen,
+		scale: frame.scale
+	};
 }
 //#endregion
 //#region src/cursor.ts
@@ -198,17 +747,28 @@ function svgCursor({ svg, hotspot, fallback = "crosshair" }) {
 	if (!/\swidth\s*=/.test(openTag) || !/\sheight\s*=/.test(openTag)) throw new Error("[web] svgCursor: the <svg> needs explicit width/height attributes — browsers ignore cursor images without an intrinsic size");
 	return `url("${`data:image/svg+xml,${encodeURIComponent(svg)}`}")${hotspot ? ` ${Math.round(hotspot.x)} ${Math.round(hotspot.y)}` : ""}, ${fallback}`;
 }
+/**
+* A tool's cursors as CSS cursor values, for the interaction hub's `setToolCursor(toolId,
+* cursors)`: a string stays as it is, an SVG becomes its `url(…)` cursor, falling back to the
+* keyword it replaces unless it names its own fallback.
+*/
+function toolCursorsOf(cursors) {
+	return Object.fromEntries(Object.entries(cursors).map(([keyword, image]) => [keyword, typeof image === "string" ? image : svgCursor(image.fallback === void 0 ? {
+		...image,
+		fallback: keyword
+	} : image)]));
+}
 //#endregion
 //#region src/external-uri.ts
 /**
-* External-URI hygiene for PDF link annotations — written ONCE here so every
+* External-URI hygiene for PDF link annotations — written once here so every
 * framework adapter (react, vue, svelte, angular) shares the same policy.
 *
 * PDFs are untrusted input: a link's `/URI` can carry anything, including
 * `javascript:` payloads. The default allowlist covers what a document link
 * legitimately opens; everything else (javascript:, file:, data:, vbscript:,
 * custom app schemes) resolves to `null` and the adapters render the link
-* WITHOUT an href — activation still reports through the plugin, so an
+* without an href — activation still reports through the plugin, so an
 * embedder that needs a custom scheme can handle it in `onActivate`.
 */
 const DEFAULT_ALLOWED_SCHEMES = /* @__PURE__ */ new Set([
@@ -217,38 +777,64 @@ const DEFAULT_ALLOWED_SCHEMES = /* @__PURE__ */ new Set([
 	"mailto:",
 	"tel:"
 ]);
+/** A URI that names its scheme (RFC 3986: a letter, then letters, digits, `+`, `-` or `.`). */
+const SCHEME = /^[a-z][a-z\d+.-]*:/i;
+/**
+* The absolute address a link means, never read against the page around the viewer: one with
+* a scheme as written; a scheme-relative `//host` on https; a bare `www.` host on https, as an
+* address bar reads it. Anything else is relative to the document (`/help`, `../x`, `page2.html`)
+* and has no document address to resolve against here, so it means nothing: read against the
+* host page, it would open the app's own pages.
+*/
+function absoluteUri(uri) {
+	if (SCHEME.test(uri)) return uri;
+	if (uri.startsWith("//")) return `https:${uri}`;
+	if (/^www\./i.test(uri)) return `https://${uri}`;
+	return null;
+}
 /**
-* Validate a link URI for opening in the browser. Returns the URI when its
-* scheme is allowed (scheme-relative and bare URIs resolve as https), else
-* `null`. Never throws — a malformed URI is just an unopenable one.
+* Validate a link URI for opening in the browser. Returns the absolute URI to open when its
+* scheme is allowed (scheme-relative and bare `www.` URIs become https), else `null`. Never
+* throws — a malformed URI is just an unopenable one.
 */
 function sanitizeExternalUri(uri, allowedSchemes = DEFAULT_ALLOWED_SCHEMES) {
-	const trimmed = uri.trim();
-	if (!trimmed) return null;
-	const allowed = new Set([...allowedSchemes].map((s) => s.endsWith(":") ? s.toLowerCase() : `${s.toLowerCase()}:`));
+	const absolute = absoluteUri(uri.trim());
+	if (!absolute) return null;
+	const allowed = new Set([...allowedSchemes].map((scheme) => scheme.endsWith(":") ? scheme.toLowerCase() : `${scheme.toLowerCase()}:`));
 	try {
-		const url = new URL(trimmed, "https://invalid.example/");
-		return allowed.has(url.protocol) ? trimmed : null;
+		return allowed.has(new URL(absolute).protocol) ? absolute : null;
 	} catch {
 		return null;
 	}
 }
+/**
+* Open a link target in a new tab when its address is allowed (`http`,
+* `https`, `mailto`, `tel`); anything else is refused. True when it opened.
+* Call it inside the user's click (the link plugin's `activate()` does), so
+* the click is still the gesture that opens the tab.
+*/
+function openExternalUri(uri) {
+	const href = sanitizeExternalUri(uri);
+	if (!href || typeof window === "undefined") return false;
+	window.open(href, "_blank", "noopener,noreferrer");
+	return true;
+}
 //#endregion
 //#region src/actions-ui.ts
 /**
-* The DEFAULT actions UI adapter — the origin×phase visibility matrix plus
-* the browser fallbacks, written ONCE here so every framework binding
-* (react, angular, …) ships the SAME policy instead of forking it per
+* The default actions UI adapter — the origin×phase visibility matrix plus
+* the browser fallbacks, written once here so every framework binding
+* (react, angular, …) ships the same policy instead of forking it per
 * framework. Types are structural twins of `@embedpdf/plugin-actions`'
 * adapter contract (declared here so this package stays plugin-free, per
 * the layering law); assignability is checked where a binding installs it.
 *
-* The matrix (defaults only — an embedder override receives EVERY effect
+* The matrix (defaults only — an embedder override receives every effect
 * with its context attached and decides for itself):
 * - URIs open through `sanitizeExternalUri` in a new tab (the dispatcher
 *   already policy-gated the node; blocked schemes are dropped here).
 * - Print: hover/lifecycle-origin requests never open the dialog; user
-*   requests fall back to `globalThis.print`. The `doc.print` AUTHORITY
+*   requests fall back to `globalThis.print`. The `doc.print` authority
 *   gate is upstream in the plugin and not overridable.
 * - Alert: document-open nags (lifecycle origin, boot phase) never reach
 *   `window.alert` — the boot-nag gap, closed.
@@ -257,28 +843,28 @@ function sanitizeExternalUri(uri, allowedSchemes = DEFAULT_ALLOWED_SCHEMES) {
 const createDefaultActionsUiAdapter = (options = {}) => {
 	const overridesOf = () => typeof options.overrides === "function" ? options.overrides() : options.overrides;
 	return {
-		openUri: (uri, opts) => {
+		openUri: (uri, options) => {
 			const current = overridesOf();
 			if (current?.openUri) {
-				current.openUri(uri, opts);
+				current.openUri(uri, options);
 				return;
 			}
 			const href = sanitizeExternalUri(uri);
 			if (href && typeof window !== "undefined") window.open(href, "_blank", "noopener,noreferrer");
 		},
-		print: (opts) => {
+		print: (options) => {
 			const current = overridesOf();
-			if (current?.print) current.print(opts);
-			else if (opts && opts.origin !== "user") {} else if (typeof globalThis.print === "function") globalThis.print();
+			if (current?.print) current.print(options);
+			else if (options && options.origin !== "user") {} else if (typeof globalThis.print === "function") globalThis.print();
 		},
-		alert: (message, opts) => {
+		alert: (message, options) => {
 			const current = overridesOf();
-			if (current?.alert) current.alert(message, opts);
-			else if (opts.origin === "lifecycle" || opts.phase === "boot") {} else if (typeof globalThis.alert === "function") globalThis.alert(message);
+			if (current?.alert) current.alert(message, options);
+			else if (options.origin === "lifecycle" || options.phase === "boot") {} else if (typeof globalThis.alert === "function") globalThis.alert(message);
 		},
-		gotoPage: (page, opts) => {
+		gotoPage: (page, effectContext) => {
 			const current = overridesOf();
-			if (current?.gotoPage) current.gotoPage(page, opts);
+			if (current?.gotoPage) current.gotoPage(page, effectContext);
 			else options.goToPage?.(page);
 		}
 	};
@@ -311,7 +897,7 @@ function bindPaintedImage(image, source, callbacks) {
 		});
 	};
 	image.addEventListener("load", onLoad, { once: true });
-	source.objectUrl(controller.signal).then((objectUrl) => {
+	source.objectUrl().abortWith(controller.signal).then((objectUrl) => {
 		if (controller.signal.aborted) {
 			objectUrl.revoke();
 			return;
@@ -361,7 +947,7 @@ const vibrationFeedback = {
 };
 /**
 * A provider for native iOS shells: forwards each call to a WKWebView script
-* message handler the HOST APP installed under `handlerName` — an explicit
+* message handler the host app installed under `handlerName` — an explicit
 * contract between the embedder and their own app, never a global this library
 * sniffs on its own. The message shape is
 * `{ family: 'selection' } | { family: 'impact', weight } | { family: 'notify', kind }`;
@@ -376,21 +962,21 @@ const wkFeedback = (handlerName, fallback = vibrationFeedback) => {
 	};
 	return {
 		selection: () => {
-			const h = handler();
-			if (h) h.postMessage({ family: "selection" });
+			const messageHandler = handler();
+			if (messageHandler) messageHandler.postMessage({ family: "selection" });
 			else fallback.selection();
 		},
 		impact: (weight = "light") => {
-			const h = handler();
-			if (h) h.postMessage({
+			const messageHandler = handler();
+			if (messageHandler) messageHandler.postMessage({
 				family: "impact",
 				weight
 			});
 			else fallback.impact(weight);
 		},
 		notify: (kind) => {
-			const h = handler();
-			if (h) h.postMessage({
+			const messageHandler = handler();
+			if (messageHandler) messageHandler.postMessage({
 				family: "notify",
 				kind
 			});
@@ -403,46 +989,46 @@ const wkFeedback = (handlerName, fallback = vibrationFeedback) => {
 /** The per-notch step for discrete wheels — the zoom buttons' ratio. */
 const NOTCH = 1.2;
 /** Zoom factor for a ctrl/cmd wheel event (the caller decides zoom vs pan). */
-function wheelZoomFactor(e) {
-	if (e.deltaMode !== 0) return Math.pow(NOTCH, -Math.sign(e.deltaY));
-	if (e.ctrlKey) {
-		if (Math.abs(e.deltaY) >= 100) return Math.pow(NOTCH, -Math.sign(e.deltaY));
-		return Math.exp(-e.deltaY / 100);
+function wheelZoomFactor(sample) {
+	if (sample.deltaMode !== 0) return Math.pow(NOTCH, -Math.sign(sample.deltaY));
+	if (sample.ctrlKey) {
+		if (Math.abs(sample.deltaY) >= 100) return Math.pow(NOTCH, -Math.sign(sample.deltaY));
+		return Math.exp(-sample.deltaY / 100);
 	}
-	return Math.exp(-e.deltaY * .0015);
+	return Math.exp(-sample.deltaY * .0015);
 }
 //#endregion
 //#region src/stage-gestures.ts
 /**
-* Stage gesture controller — the ONE DOM input binding for a Stage surface,
+* Stage gesture controller — the one DOM input binding for a Stage surface,
 * shared by every framework adapter (React, Angular, …) so the feel can never
 * drift between them.
 *
 * The premise (see the stage plugin's camera doctrine): desktop inputs arrive
 * with physics already applied by the OS — momentum lives in the wheel stream,
-* a trackpad pinch is one pre-arbitrated gesture stream. Touch arrives RAW:
+* a trackpad pinch is one pre-arbitrated gesture stream. Touch arrives raw:
 * with `touch-action: none` the platform scroller is out of the loop, so the
 * ballistics (velocity → fling) and the arbitration (is this contact a scroll,
 * a pinch, a tap, or a tool gesture?) must be synthesized here.
 *
-* Arbitration is MODALITY-AWARE:
+* Arbitration is modality-aware:
 *   - touch  — navigation-first: one finger pans (whatever tool is armed), two
 *     fingers pinch-zoom around their centroid, release velocity flings, a tap
 *     forwards as a click, a double-tap zoom-toggles, a long-press hands the
 *     gesture to the interaction hub (text selection), and a second finger
-*     landing mid-tool-gesture CANCELS it into a pinch (the Notes/Procreate
+*     landing mid-tool-gesture cancels it into a pinch (the Notes/Procreate
 *     convention).
 *   - mouse/pen — tool-first, exactly the pre-existing behavior: with a hub,
 *     every down/move/up forwards (pan is the pan tool's job); without one,
 *     dragging pans. Wheel and Safari-trackpad gesture events are unchanged.
 *
-* Camera writes are rAF-COALESCED: pointer events only update gesture state;
+* Camera writes are rAF-coalesced: pointer events only update gesture state;
 * one animation-frame tick applies at most one pan and one zoom per frame,
 * inside the host's begin/endGesture transaction. Events may arrive at 120 Hz;
 * the camera moves at display rate.
 *
-* Dependency note: this module speaks to the stage through the STRUCTURAL
-* {@link StageGestureHost} interface (satisfied by `StageCapability`) and to
+* Dependency note: this module speaks to the stage through the structural
+* {@link StageGestureHost} interface (satisfied by `StageHostCapability`) and to
 * the interaction hub through {@link StageGestureSink} (a closure the adapter
 * builds) — @embedpdf/web stays free of plugin imports, per the layering law.
 */
@@ -450,7 +1036,7 @@ function wheelZoomFactor(e) {
 * Release velocity from a trail of pointer samples: the mean velocity over the
 * trailing `windowMs` (first-to-last inside the window). Null when the trail is
 * too thin or too stale to trust — the standard "held still, then let go"
-* case, which must NOT fling. Pure; exported for tests.
+* case, which must not fling. Pure; exported for tests.
 */
 function computeReleaseVelocity(samples, now, windowMs = 100) {
 	let firstIdx = -1;
@@ -469,7 +1055,7 @@ function computeReleaseVelocity(samples, now, windowMs = 100) {
 	};
 }
 /** Attach the gesture controller to a Stage container. Returns the detach fn. */
-function createStageGestureController(el, host, options) {
+function createStageGestureController(element, host, options) {
 	const zoomGestures = options.zoomGestures ?? true;
 	const wheelZoom = options.wheelZoomFactor ?? wheelZoomFactor;
 	const sink = options.sink ?? null;
@@ -513,25 +1099,25 @@ function createStageGestureController(el, host, options) {
 	let mX = 0;
 	let mY = 0;
 	let mCount = 0;
-	const clickCount = (e) => {
+	const clickCount = (event) => {
 		const now = Date.now();
-		mCount = now - mLast <= 400 && Math.hypot(e.clientX - mX, e.clientY - mY) <= 6 ? mCount + 1 : 1;
+		mCount = now - mLast <= 400 && Math.hypot(event.clientX - mX, event.clientY - mY) <= 6 ? mCount + 1 : 1;
 		mLast = now;
-		mX = e.clientX;
-		mY = e.clientY;
+		mX = event.clientX;
+		mY = event.clientY;
 		return mCount;
 	};
 	const vpt = (clientX, clientY) => {
-		const r = el.getBoundingClientRect();
+		const rect = element.getBoundingClientRect();
 		return {
-			x: clientX - r.left,
-			y: clientY - r.top
+			x: clientX - rect.left,
+			y: clientY - rect.top
 		};
 	};
 	const touches = () => {
 		const out = [];
-		pointers.forEach((p) => {
-			if (p.kind === "touch") out.push(p);
+		pointers.forEach((pointer) => {
+			if (pointer.kind === "touch") out.push(pointer);
 		});
 		return out;
 	};
@@ -581,8 +1167,8 @@ function createStageGestureController(el, host, options) {
 		if (trail.length > 16) trail.shift();
 	};
 	const maybeFling = () => {
-		const v = computeReleaseVelocity(trail, performance.now());
-		if (v && Math.hypot(v.vx, v.vy) >= FLING_MIN) host.fling(v.vx, v.vy);
+		const velocity = computeReleaseVelocity(trail, performance.now());
+		if (velocity && Math.hypot(velocity.vx, velocity.vy) >= FLING_MIN) host.fling(velocity.vx, velocity.vy);
 	};
 	const flushPanTo = (x, y) => {
 		const dx = x - lastApplied.x;
@@ -619,12 +1205,12 @@ function createStageGestureController(el, host, options) {
 	const tick = () => {
 		frame = 0;
 		if (mode === "pan" || mode === "mousedrag") {
-			const p = pointers.get(panId);
-			if (p && dirty) flushPanTo(p.x, p.y);
+			const pointer = pointers.get(panId);
+			if (pointer && dirty) flushPanTo(pointer.x, pointer.y);
 			frame = requestAnimationFrame(tick);
 		} else if (mode === "pinch") {
-			const [a, b] = touches();
-			if (a && b && dirty) flushPinch(a.x, a.y, b.x, b.y);
+			const [first, second] = touches();
+			if (first && second && dirty) flushPinch(first.x, first.y, second.x, second.y);
 			frame = requestAnimationFrame(tick);
 		}
 	};
@@ -632,14 +1218,14 @@ function createStageGestureController(el, host, options) {
 		if (!frame) frame = requestAnimationFrame(tick);
 	};
 	const enterPinch = () => {
-		const [a, b] = touches();
-		if (!a || !b) return;
+		const [first, second] = touches();
+		if (!first || !second) return;
 		mode = "pinch";
 		lastApplied = {
-			x: (a.x + b.x) / 2,
-			y: (a.y + b.y) / 2
+			x: (first.x + second.x) / 2,
+			y: (first.y + second.y) / 2
 		};
-		lastSpan = Math.hypot(a.x - b.x, a.y - b.y);
+		lastSpan = Math.hypot(first.x - second.x, first.y - second.y);
 		trail = [];
 		dirty = false;
 		ensureFrames();
@@ -652,30 +1238,30 @@ function createStageGestureController(el, host, options) {
 		touchToolGesture = true;
 		sink.longPress(downEvent);
 	};
-	const onDown = (e) => {
-		const kind = e.pointerType || "mouse";
+	const onDown = (event) => {
+		const kind = event.pointerType || "mouse";
 		if (kind === "touch") lastTouchAt = performance.now();
 		if (kind !== "touch") {
-			if (kind === "mouse" && e.button !== 0) return;
+			if (kind === "mouse" && event.button !== 0) return;
 			if (mode !== "idle") return;
-			pointers.set(e.pointerId, {
-				id: e.pointerId,
+			pointers.set(event.pointerId, {
+				id: event.pointerId,
 				kind,
-				x: e.clientX,
-				y: e.clientY,
-				downX: e.clientX,
-				downY: e.clientY
+				x: event.clientX,
+				y: event.clientY,
+				downX: event.clientX,
+				downY: event.clientY
 			});
 			if (sink) {
 				mode = "tool";
-				sink.down(e, clickCount(e));
+				sink.down(event, clickCount(event));
 			} else {
 				mode = "mousedrag";
 				begin();
-				panId = e.pointerId;
+				panId = event.pointerId;
 				lastApplied = {
-					x: e.clientX,
-					y: e.clientY
+					x: event.clientX,
+					y: event.clientY
 				};
 				ensureFrames();
 			}
@@ -683,55 +1269,55 @@ function createStageGestureController(el, host, options) {
 		}
 		switch (mode) {
 			case "idle": {
-				pointers.set(e.pointerId, {
-					id: e.pointerId,
+				pointers.set(event.pointerId, {
+					id: event.pointerId,
 					kind,
-					x: e.clientX,
-					y: e.clientY,
-					downX: e.clientX,
-					downY: e.clientY
+					x: event.clientX,
+					y: event.clientY,
+					downX: event.clientX,
+					downY: event.clientY
 				});
-				const moving = host.cameraInMotion();
-				if (!moving && sink?.claimsPoint?.(e)) {
+				const moving = host.isMoving();
+				if (!moving && sink?.claimsPoint?.(event)) {
 					mode = "tool";
 					touchToolGesture = true;
-					sink.down(e, 1);
+					sink.down(event, 1);
 					break;
 				}
 				mode = "pending";
-				downEvent = e;
+				downEvent = event;
 				suppressTap = moving;
 				begin(true);
 				trail = [];
-				pushSample(e.clientX, e.clientY);
+				pushSample(event.clientX, event.clientY);
 				clearLongPress();
 				if (sink && !suppressTap) longPressTimer = setTimeout(onLongPress, LONG_PRESS_MS);
 				break;
 			}
 			case "pending":
 			case "pan":
-				pointers.set(e.pointerId, {
-					id: e.pointerId,
+				pointers.set(event.pointerId, {
+					id: event.pointerId,
 					kind,
-					x: e.clientX,
-					y: e.clientY,
-					downX: e.clientX,
-					downY: e.clientY
+					x: event.clientX,
+					y: event.clientY,
+					downX: event.clientX,
+					downY: event.clientY
 				});
 				clearLongPress();
 				enterPinch();
 				break;
 			case "tool":
 				if (!touchToolGesture) return;
-				sink?.cancel(e);
+				sink?.cancel(event);
 				touchToolGesture = false;
-				pointers.set(e.pointerId, {
-					id: e.pointerId,
+				pointers.set(event.pointerId, {
+					id: event.pointerId,
 					kind,
-					x: e.clientX,
-					y: e.clientY,
-					downX: e.clientX,
-					downY: e.clientY
+					x: event.clientX,
+					y: event.clientY,
+					downX: event.clientX,
+					downY: event.clientY
 				});
 				begin(true);
 				enterPinch();
@@ -740,71 +1326,71 @@ function createStageGestureController(el, host, options) {
 			case "mousedrag": return;
 		}
 	};
-	const onWindowMove = (e) => {
-		const p = pointers.get(e.pointerId);
-		if (!p) return;
-		if (p.kind === "touch") lastTouchAt = performance.now();
-		p.x = e.clientX;
-		p.y = e.clientY;
+	const onWindowMove = (event) => {
+		const pointer = pointers.get(event.pointerId);
+		if (!pointer) return;
+		if (pointer.kind === "touch") lastTouchAt = performance.now();
+		pointer.x = event.clientX;
+		pointer.y = event.clientY;
 		switch (mode) {
 			case "pending":
-				pushSample(p.x, p.y);
-				if (Math.hypot(p.x - p.downX, p.y - p.downY) > SLOP) {
+				pushSample(pointer.x, pointer.y);
+				if (Math.hypot(pointer.x - pointer.downX, pointer.y - pointer.downY) > SLOP) {
 					clearLongPress();
 					mode = "pan";
-					panId = p.id;
+					panId = pointer.id;
 					lastApplied = {
-						x: p.x,
-						y: p.y
+						x: pointer.x,
+						y: pointer.y
 					};
 					ensureFrames();
 				}
 				break;
 			case "pan":
-				if (p.id !== panId) break;
+				if (pointer.id !== panId) break;
 				if (!panArmed) {
 					const nowT = performance.now();
 					if (nowT < panGraceUntil) {
 						const dt = nowT - graceSample.t;
 						if (dt >= 8) {
-							const speed = Math.hypot(p.x - graceSample.x, p.y - graceSample.y) / dt;
+							const speed = Math.hypot(pointer.x - graceSample.x, pointer.y - graceSample.y) / dt;
 							graceSample = {
 								t: nowT,
-								x: p.x,
-								y: p.y
+								x: pointer.x,
+								y: pointer.y
 							};
 							if (speed < SETTLE_SPEED) panGraceUntil = 0;
 						}
-						p.downX = p.x;
-						p.downY = p.y;
+						pointer.downX = pointer.x;
+						pointer.downY = pointer.y;
 						break;
 					}
-					if (Math.hypot(p.x - p.downX, p.y - p.downY) <= SLOP) break;
+					if (Math.hypot(pointer.x - pointer.downX, pointer.y - pointer.downY) <= SLOP) break;
 					panArmed = true;
 					lastApplied = {
-						x: p.x,
-						y: p.y
+						x: pointer.x,
+						y: pointer.y
 					};
 					trail = [];
 					spanTrail = [];
 				}
-				pushSample(p.x, p.y);
+				pushSample(pointer.x, pointer.y);
 				dirty = true;
 				break;
 			case "pinch":
 				dirty = true;
 				break;
 			case "tool":
-				sink?.move(e);
+				sink?.move(event);
 				break;
 			case "mousedrag":
-				if (p.id === panId) dirty = true;
+				if (pointer.id === panId) dirty = true;
 				break;
 			case "idle": break;
 		}
 	};
-	const onHoverMove = (e) => {
-		if (mode === "idle" && sink) sink.hover(e);
+	const onHoverMove = (event) => {
+		if (mode === "idle" && sink) sink.hover(event);
 	};
 	const backToSingleFinger = () => {
 		const rest = touches();
@@ -828,28 +1414,28 @@ function createStageGestureController(el, host, options) {
 		dirty = false;
 		return true;
 	};
-	const onUp = (e) => {
-		const p = pointers.get(e.pointerId);
-		if (!p) return;
-		if (p.kind === "touch") lastTouchAt = performance.now();
-		pointers.delete(e.pointerId);
+	const onUp = (event) => {
+		const pointer = pointers.get(event.pointerId);
+		if (!pointer) return;
+		if (pointer.kind === "touch") lastTouchAt = performance.now();
+		pointers.delete(event.pointerId);
 		switch (mode) {
 			case "pending": {
 				clearLongPress();
 				end();
 				const now = performance.now();
-				const isDouble = now - lastTapT <= DOUBLE_TAP_MS && Math.hypot(e.clientX - lastTapX, e.clientY - lastTapY) <= DOUBLE_TAP_RADIUS;
+				const isDouble = now - lastTapT <= DOUBLE_TAP_MS && Math.hypot(event.clientX - lastTapX, event.clientY - lastTapY) <= DOUBLE_TAP_RADIUS;
 				if (suppressTap) lastTapT = 0;
 				else if (zoomGestures && isDouble) {
 					lastTapT = 0;
-					host.doubleTapZoom(vpt(e.clientX, e.clientY));
+					host.doubleTapZoom(vpt(event.clientX, event.clientY));
 				} else {
 					lastTapT = now;
-					lastTapX = e.clientX;
-					lastTapY = e.clientY;
+					lastTapX = event.clientX;
+					lastTapY = event.clientY;
 					if (sink && downEvent) {
 						sink.down(downEvent, 1);
-						sink.up(e);
+						sink.up(event);
 					}
 				}
 				toIdle();
@@ -858,18 +1444,18 @@ function createStageGestureController(el, host, options) {
 			case "pan":
 				if (!panArmed) {
 					const now = performance.now();
-					const v = computeReleaseVelocity(trail, now);
+					const velocity = computeReleaseVelocity(trail, now);
 					const vs = computeReleaseVelocity(spanTrail, now);
 					end();
-					if (v) {
-						const speed = Math.hypot(v.vx, v.vy);
-						if (speed >= FLING_MIN && speed > Math.abs(vs?.vx ?? 0)) host.fling(v.vx, v.vy);
+					if (velocity) {
+						const speed = Math.hypot(velocity.vx, velocity.vy);
+						if (speed >= FLING_MIN && speed > Math.abs(vs?.vx ?? 0)) host.fling(velocity.vx, velocity.vy);
 					}
 					toIdle();
 					break;
 				}
-				flushPanTo(e.clientX, e.clientY);
-				pushSample(e.clientX, e.clientY);
+				flushPanTo(event.clientX, event.clientY);
+				pushSample(event.clientX, event.clientY);
 				end();
 				maybeFling();
 				toIdle();
@@ -901,23 +1487,23 @@ function createStageGestureController(el, host, options) {
 				break;
 			}
 			case "tool":
-				sink?.up(e);
+				sink?.up(event);
 				toIdle();
 				break;
 			case "mousedrag":
-				if (p.id !== panId) break;
-				flushPanTo(e.clientX, e.clientY);
+				if (pointer.id !== panId) break;
+				flushPanTo(event.clientX, event.clientY);
 				end();
 				toIdle();
 				break;
 			case "idle": break;
 		}
 	};
-	const onCancel = (e) => {
-		if (!pointers.get(e.pointerId)) return;
-		pointers.delete(e.pointerId);
+	const onCancel = (event) => {
+		if (!pointers.get(event.pointerId)) return;
+		pointers.delete(event.pointerId);
 		if (mode === "tool") {
-			sink?.cancel(e);
+			sink?.cancel(event);
 			toIdle();
 			return;
 		}
@@ -925,51 +1511,51 @@ function createStageGestureController(el, host, options) {
 		end();
 		toIdle();
 	};
-	const onWheel = (e) => {
-		e.preventDefault();
-		if (zoomGestures && (e.ctrlKey || e.metaKey)) host.zoomAround(vpt(e.clientX, e.clientY), wheelZoom(e));
+	const onWheel = (event) => {
+		event.preventDefault();
+		if (zoomGestures && (event.ctrlKey || event.metaKey)) host.zoomAround(vpt(event.clientX, event.clientY), wheelZoom(event));
 		else {
-			const dx = e.shiftKey ? e.deltaY : e.deltaX;
-			const dy = e.shiftKey ? e.deltaX : e.deltaY;
+			const dx = event.shiftKey ? event.deltaY : event.deltaX;
+			const dy = event.shiftKey ? event.deltaX : event.deltaY;
 			host.panBy(-dx, -dy);
 		}
 	};
 	let lastScale = 1;
-	const onGestureStart = (e) => {
-		e.preventDefault();
-		lastScale = e.scale ?? 1;
+	const onGestureStart = (event) => {
+		event.preventDefault();
+		lastScale = event.scale ?? 1;
 	};
-	const onGestureChange = (e) => {
-		e.preventDefault();
+	const onGestureChange = (event) => {
+		event.preventDefault();
 		if (touches().length > 0 || performance.now() - lastTouchAt < 500) return;
-		const g = e;
-		const scale = g.scale ?? 1;
-		if (zoomGestures && scale > 0) host.zoomAround(vpt(g.clientX, g.clientY), scale / lastScale);
+		const gesture = event;
+		const scale = gesture.scale ?? 1;
+		if (zoomGestures && scale > 0) host.zoomAround(vpt(gesture.clientX, gesture.clientY), scale / lastScale);
 		lastScale = scale;
 	};
-	el.addEventListener("pointerdown", onDown);
-	el.addEventListener("pointermove", onHoverMove);
+	element.addEventListener("pointerdown", onDown);
+	element.addEventListener("pointermove", onHoverMove);
 	window.addEventListener("pointermove", onWindowMove);
 	window.addEventListener("pointerup", onUp);
 	window.addEventListener("pointercancel", onCancel);
-	el.addEventListener("wheel", onWheel, { passive: false });
+	element.addEventListener("wheel", onWheel, { passive: false });
 	const hasGestureEvents = "GestureEvent" in window;
 	if (hasGestureEvents) {
-		el.addEventListener("gesturestart", onGestureStart);
-		el.addEventListener("gesturechange", onGestureChange);
-		el.addEventListener("gestureend", onGestureStart);
+		element.addEventListener("gesturestart", onGestureStart);
+		element.addEventListener("gesturechange", onGestureChange);
+		element.addEventListener("gestureend", onGestureStart);
 	}
 	return () => {
-		el.removeEventListener("pointerdown", onDown);
-		el.removeEventListener("pointermove", onHoverMove);
+		element.removeEventListener("pointerdown", onDown);
+		element.removeEventListener("pointermove", onHoverMove);
 		window.removeEventListener("pointermove", onWindowMove);
 		window.removeEventListener("pointerup", onUp);
 		window.removeEventListener("pointercancel", onCancel);
-		el.removeEventListener("wheel", onWheel);
+		element.removeEventListener("wheel", onWheel);
 		if (hasGestureEvents) {
-			el.removeEventListener("gesturestart", onGestureStart);
-			el.removeEventListener("gesturechange", onGestureChange);
-			el.removeEventListener("gestureend", onGestureStart);
+			element.removeEventListener("gesturestart", onGestureStart);
+			element.removeEventListener("gesturechange", onGestureChange);
+			element.removeEventListener("gestureend", onGestureStart);
 		}
 		clearLongPress();
 		stopFrames();
@@ -979,49 +1565,49 @@ function createStageGestureController(el, host, options) {
 //#endregion
 //#region src/selection-handles.ts
 /** Bind one handle element. Returns the detach fn. */
-function attachSelectionHandle(el, options) {
+function attachSelectionHandle(element, options) {
 	let active = null;
-	const onMove = (e) => {
-		if (!active || e.pointerId !== active.pointerId) return;
+	const onMove = (event) => {
+		if (!active || event.pointerId !== active.pointerId) return;
 		active.session.move({
-			x: active.base.x + (e.clientX - active.baseClient.x),
-			y: active.base.y + (e.clientY - active.baseClient.y)
+			x: active.base.x + (event.clientX - active.baseClient.x),
+			y: active.base.y + (event.clientY - active.baseClient.y)
 		});
 	};
-	const onUp = (e) => {
-		if (!active || e.pointerId !== active.pointerId) return;
-		const s = active.session;
+	const onUp = (event) => {
+		if (!active || event.pointerId !== active.pointerId) return;
+		const session = active.session;
 		active = null;
-		s.end();
+		session.end();
 	};
-	const onDown = (e) => {
+	const onDown = (event) => {
 		if (active) return;
 		const armed = options.arm();
 		if (!armed) return;
-		e.preventDefault();
-		e.stopPropagation();
+		event.preventDefault();
+		event.stopPropagation();
 		try {
-			el.setPointerCapture(e.pointerId);
+			element.setPointerCapture(event.pointerId);
 		} catch {}
 		active = {
 			session: armed.session,
 			base: armed.base,
 			baseClient: {
-				x: e.clientX,
-				y: e.clientY
+				x: event.clientX,
+				y: event.clientY
 			},
-			pointerId: e.pointerId
+			pointerId: event.pointerId
 		};
 	};
-	el.addEventListener("pointerdown", onDown);
-	el.addEventListener("pointermove", onMove);
-	el.addEventListener("pointerup", onUp);
-	el.addEventListener("pointercancel", onUp);
+	element.addEventListener("pointerdown", onDown);
+	element.addEventListener("pointermove", onMove);
+	element.addEventListener("pointerup", onUp);
+	element.addEventListener("pointercancel", onUp);
 	return () => {
-		el.removeEventListener("pointerdown", onDown);
-		el.removeEventListener("pointermove", onMove);
-		el.removeEventListener("pointerup", onUp);
-		el.removeEventListener("pointercancel", onUp);
+		element.removeEventListener("pointerdown", onDown);
+		element.removeEventListener("pointermove", onMove);
+		element.removeEventListener("pointerup", onUp);
+		element.removeEventListener("pointercancel", onUp);
 		active = null;
 	};
 }
@@ -1036,7 +1622,7 @@ function attachSelectionHandle(el, options) {
 *     stage plugin's job)
 *   • device-pixel-ratio observation → `setDevicePixelRatio` (dppx changes
 *     re-subscribe, since the media query's value itself moves)
-*   • pointer-sample normalization — the ONE place a PointerEvent becomes a
+*   • pointer-sample normalization — the one place a PointerEvent becomes a
 *     page-resolved, source-stamped sample for the interaction hub
 *   • the gesture controller (wheel, Safari trackpad gestures, synthesized
 *     touch physics) from `./stage-gestures`
@@ -1045,24 +1631,24 @@ function attachSelectionHandle(el, options) {
 * surfaces, cursor-style subscription, overlay slots.
 *
 * Dependency note: like the gesture controller, this module speaks to the
-* stage and the hub through STRUCTURAL interfaces ({@link StageSurfaceHost},
+* stage and the hub through structural interfaces ({@link StageSurfaceHost},
 * {@link StageSurfaceHub}) — satisfied by `StageCapability` and
-* `InteractionCapability`, imported by neither. @embedpdf/web stays free of
+* `InteractionHostCapability`, imported by neither. @embedpdf/web stays free of
 * plugin imports, per the layering law.
 *
 * Browser-only by nature (ResizeObserver, matchMedia): call from a mounted
 * effect / browser platform check, exactly like the gesture controller.
 */
 /** Attach the full surface binding. Returns the detach fn. */
-function createStageSurface(el, stage, options = {}) {
+function createStageSurface(element, stage, options = {}) {
 	const hub = options.hub ?? null;
 	const cleanups = [];
-	const setViewport = () => stage.setViewport({
-		width: el.clientWidth,
-		height: el.clientHeight
+	const setViewport = () => stage.setViewportSize({
+		width: element.clientWidth,
+		height: element.clientHeight
 	});
 	const ro = new ResizeObserver(setViewport);
-	ro.observe(el);
+	ro.observe(element);
 	setViewport();
 	cleanups.push(() => ro.disconnect());
 	let mq = null;
@@ -1074,42 +1660,42 @@ function createStageSurface(el, stage, options = {}) {
 	};
 	reportDpr();
 	cleanups.push(() => mq?.removeEventListener("change", reportDpr));
-	const sampleOf = (phase, e, clickCount = 1, gesture) => {
-		const r = el.getBoundingClientRect();
+	const sampleOf = (phase, event, clickCount = 1, gesture) => {
+		const rect = element.getBoundingClientRect();
 		const viewport = {
-			x: e.clientX - r.left,
-			y: e.clientY - r.top
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
 		};
 		return {
 			phase,
 			viewport,
-			page: stage.pageAt(viewport) ?? void 0,
-			project: (pon) => stage.pointOnPage(pon, viewport),
+			page: stage.getPageAt(viewport) ?? void 0,
+			project: (page) => stage.viewportToPage(page, viewport),
 			modifiers: {
-				shift: e.shiftKey,
-				alt: e.altKey,
-				ctrl: e.ctrlKey,
-				meta: e.metaKey
+				shift: event.shiftKey,
+				alt: event.altKey,
+				ctrl: event.ctrlKey,
+				meta: event.metaKey
 			},
 			clickCount,
-			pointerType: e.pointerType || "mouse",
+			pointerType: event.pointerType || "mouse",
 			...gesture ? { gesture } : {},
 			...options.source ? { source: options.source } : {}
 		};
 	};
-	const forward = (phase, e, clickCount = 1, gesture) => {
-		hub?.dispatch(sampleOf(phase, e, clickCount, gesture));
+	const forward = (phase, event, clickCount = 1, gesture) => {
+		hub?.dispatchPointer(sampleOf(phase, event, clickCount, gesture));
 	};
 	const sink = hub ? {
-		down: (e, clickCount) => forward("down", e, clickCount),
-		move: (e) => forward("move", e),
-		up: (e) => forward("up", e),
-		cancel: (e) => forward("cancel", e),
-		hover: (e) => forward("move", e),
-		longPress: (e) => forward("down", e, 2, "long-press"),
-		claimsPoint: (e) => !!hub.activeTool().touchDirect || hub.wouldClaimTouch(sampleOf("down", e))
+		down: (event, clickCount) => forward("down", event, clickCount),
+		move: (event) => forward("move", event),
+		up: (event) => forward("up", event),
+		cancel: (event) => forward("cancel", event),
+		hover: (event) => forward("move", event),
+		longPress: (event) => forward("down", event, 2, "long-press"),
+		claimsPoint: (event) => hub.getActiveTool().touch === "draw" || hub.wouldClaimTouch(sampleOf("down", event))
 	} : null;
-	cleanups.push(createStageGestureController(el, stage, {
+	cleanups.push(createStageGestureController(element, stage, {
 		zoomGestures: options.zoomGestures,
 		wheelZoomFactor: options.wheelZoomFactor,
 		sink
@@ -1121,8 +1707,8 @@ function createStageSurface(el, stage, options = {}) {
 //#endregion
 //#region src/byte-store.ts
 /** Open (creating on first use) one IndexedDB object store keyed by id. */
-function indexedDbByteStore(dbName, opts = {}) {
-	const storeName = opts.storeName ?? "bytes";
+function indexedDbByteStore(dbName, options = {}) {
+	const storeName = options.storeName ?? "bytes";
 	const open = () => new Promise((resolve, reject) => {
 		const request = indexedDB.open(dbName, 1);
 		request.onupgradeneeded = () => {
@@ -1158,34 +1744,51 @@ function indexedDbByteStore(dbName, opts = {}) {
 }
 //#endregion
 //#region src/web-font.ts
+/** What every family {@link mountWebFont} mounts starts with. */
+const FAMILY_PREFIX = "epdf-";
+/**
+* The CSS family a registered font's key is mounted under: the key in the
+* viewer's own namespace, so a family of the same name on the page (its own
+* `@font-face`, or an installed font) never stands in for it. The annotation
+* plugin's CSS for a registered font names the same family.
+*/
+function webFontFamily(key) {
+	return `${FAMILY_PREFIX}${key}`;
+}
+/** The key a family from {@link webFontFamily} was made from; any other family as it is. */
+function fontKeyOfWebFamily(family) {
+	return family.startsWith(FAMILY_PREFIX) ? family.slice(5) : family;
+}
 /**
 * Mount a registered font for the DOM: the engine lays text out with the
 * font's bytes, the browser needs the same face as a `@font-face` so the
 * live editor and the vector renderer show the glyphs the appearance stream
-* will bake. The family name is the font's KEY — the CSS family the
-* annotation plugin emits for a registered font (`cssFontFamily`) — so
-* mounting under the key is what makes the two agree.
+* will bake. The face's family is {@link webFontFamily} of the key.
 *
 * Returns the unmount. Idempotent per (document, key): a second mount of a
 * key already in the document's font set is a no-op that still returns an
-* unmount of its own (the face leaves when the LAST holder unmounts).
+* unmount of its own (the face leaves when the last holder unmounts).
 */
 async function mountWebFont(key, data, options = {}) {
+	return mountFace(webFontFamily(key), data, options);
+}
+/** Mount one face under `family`, refcounted per (document, family). */
+async function mountFace(family, data, options) {
 	const doc = options.document ?? document;
 	const fonts = doc.fonts;
 	if (!fonts || typeof FontFace === "undefined") return () => {};
 	const holders = holdersOf(doc);
-	const existing = holders.get(key);
+	const existing = holders.get(family);
 	if (existing) {
 		existing.count++;
-		return () => release(holders, key);
+		return () => release(holders, family);
 	}
 	const buffer = data instanceof Uint8Array ? data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength) : data;
-	const face = new FontFace(key, buffer, {
+	const face = new FontFace(family, buffer, {
 		weight: options.weight !== void 0 ? String(options.weight) : void 0,
 		style: options.style
 	});
-	holders.set(key, {
+	holders.set(family, {
 		face,
 		doc,
 		count: 1
@@ -1194,11 +1797,47 @@ async function mountWebFont(key, data, options = {}) {
 		await face.load();
 		fonts.add(face);
 	} catch {
-		holders.delete(key);
+		holders.delete(family);
 		return () => {};
 	}
 	notifyFontChange(doc);
-	return () => release(holders, key);
+	return () => release(holders, family);
+}
+/**
+* Mount a program under its own family, as it is (already in the viewer's
+* namespace), in its own weight and style, so CSS asking for that style takes
+* it as it is and never fakes a bold or an italic. Refcounted per document
+* like {@link mountWebFont}; resolves with the unmount.
+*/
+async function mountFontProgram(program, options = {}) {
+	const bytes = await program.load();
+	return mountFace(program.family, bytes, {
+		...options,
+		weight: program.weight,
+		style: program.style
+	});
+}
+/**
+* The programs one layer has mounted: each mounted once, however often it's
+* asked for, and all let go together when the layer goes (a program another
+* layer holds stays, refcounted per document). A mount after the release
+* holds again, for a layer that comes back (React's strict mode runs effects
+* twice).
+*/
+function createFontMounts(options = {}) {
+	const held = /* @__PURE__ */ new Map();
+	return {
+		mount(programs) {
+			for (const program of programs) {
+				if (held.has(program.family)) continue;
+				held.set(program.family, mountFontProgram(program, options).catch(() => () => {}));
+			}
+		},
+		release() {
+			for (const unmount of held.values()) unmount.then((off) => off());
+			held.clear();
+		}
+	};
 }
 const HOLDERS = /* @__PURE__ */ new WeakMap();
 const LISTENERS = /* @__PURE__ */ new WeakMap();
@@ -1230,12 +1869,12 @@ function holdersOf(doc) {
 	}
 	return map;
 }
-function release(holders, key) {
-	const holder = holders.get(key);
+function release(holders, family) {
+	const holder = holders.get(family);
 	if (!holder) return;
 	holder.count--;
 	if (holder.count > 0) return;
-	holders.delete(key);
+	holders.delete(family);
 	try {
 		holder.doc.fonts.delete(holder.face);
 	} catch {}
@@ -1311,11 +1950,11 @@ function webFontMetrics(cssFamily, doc = typeof document === "undefined" ? void
 		CONTEXTS.set(doc, ctx);
 	}
 	ctx.font = `${face.style ?? "normal"} ${face.weight ?? 400} 100px ${cssFamily}`;
-	const m = ctx.measureText("Hg");
-	if (typeof m.fontBoundingBoxAscent !== "number" || typeof m.fontBoundingBoxDescent !== "number") return null;
+	const metrics = ctx.measureText("Hg");
+	if (typeof metrics.fontBoundingBoxAscent !== "number" || typeof metrics.fontBoundingBoxDescent !== "number") return null;
 	return {
-		ascent: m.fontBoundingBoxAscent / 100,
-		descent: m.fontBoundingBoxDescent / 100
+		ascent: metrics.fontBoundingBoxAscent / 100,
+		descent: metrics.fontBoundingBoxDescent / 100
 	};
 }
 /**
@@ -1348,7 +1987,7 @@ function firstLineShiftFor(cssFamily, fontSize, measure = webFontMetrics) {
 //#endregion
 //#region src/rich-text-editor.ts
 /**
-* Rich text editor binding — the ONE contentEditable mechanics module for a
+* Rich text editor binding — the one contentEditable mechanics module for a
 * FreeText annotation, shared by every framework adapter (React, Angular,
 * Vue, Svelte…) so editing can never drift between them:
 *
@@ -1361,7 +2000,7 @@ function firstLineShiftFor(cssFamily, fontSize, measure = webFontMetrics) {
 *   • hold re-renders during IME composition, paste as plain text, forward
 *     Cmd/Ctrl+B/I/U as commands
 *
-* The browser owns typing; this module only translates. The POLICY — what a
+* The browser owns typing; this module only translates. The policy — what a
 * command does to the document, when to commit, what a family maps to —
 * belongs to the host (the annotation plugin), reached through the
 * structural {@link RichTextEditorHost}: @embedpdf/web imports no plugin,
@@ -1372,9 +2011,9 @@ function firstLineShiftFor(cssFamily, fontSize, measure = webFontMetrics) {
 * runs concatenated, a hard break inside a run is a `\r` too. The same
 * arithmetic the core's run algebra uses.
 *
-* Known limits (by design, recorded in the plan): the browser's native undo
-* stack does not span a host-driven restyle; DOM line wrapping approximates
-* the engine's layout, the appearance stream is the truth.
+* Known limits, by design: the browser's native undo stack does not span a
+* host-driven restyle; DOM line wrapping approximates the engine's layout,
+* the appearance stream is the truth.
 */
 const ELEMENT_NODE = 1;
 const TEXT_NODE = 3;
@@ -1395,16 +2034,16 @@ function lastChild(node) {
 * Chrome does for a new styled line. Every other break is a hard line break.
 */
 function isTrailingBreak(node, root) {
-	for (let n = node;;) {
-		const parent = n.parentNode;
+	for (let current = node;;) {
+		const parent = current.parentNode;
 		if (!parent) return false;
-		if (lastChild(parent) !== n) return false;
+		if (lastChild(parent) !== current) return false;
 		if (parent === root || isBlock(parent)) return true;
-		n = parent;
+		current = parent;
 	}
 }
 function contains(root, node) {
-	for (let n = node; n; n = n.parentNode) if (n === root) return true;
+	for (let current = node; current; current = current.parentNode) if (current === root) return true;
 	return false;
 }
 const HEX = /^#([0-9a-f]{6})$/i;
@@ -1412,17 +2051,17 @@ const RGB = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i;
 function cssColorToHex(css) {
 	const trimmed = css.trim();
 	if (HEX.test(trimmed)) return trimmed.toUpperCase();
-	const m = RGB.exec(trimmed);
-	if (!m) return void 0;
-	const hex = (n) => Math.max(0, Math.min(255, Number(n))).toString(16).padStart(2, "0");
-	return `#${hex(m[1])}${hex(m[2])}${hex(m[3])}`.toUpperCase();
+	const match = RGB.exec(trimmed);
+	if (!match) return void 0;
+	const hex = (channel) => Math.max(0, Math.min(255, Number(channel))).toString(16).padStart(2, "0");
+	return `#${hex(match[1])}${hex(match[2])}${hex(match[3])}`.toUpperCase();
 }
 function firstFamily(css) {
 	const first = css.split(",")[0]?.trim().replace(/^["']|["']$/g, "");
 	return first ? first : void 0;
 }
-function round2(n) {
-	return Math.round(n * 100) / 100;
+function round2(value) {
+	return Math.round(value * 100) / 100;
 }
 /** The inline style declarations a span carries, as a style delta. Only what
 *  the span itself sets: an unset property means "inherit", never a value. */
@@ -1436,7 +2075,7 @@ function styleDeltaOf(style, scale) {
 	}
 	if (style.fontStyle) delta.italic = style.fontStyle === "italic" || style.fontStyle === "oblique";
 	const decoration = style.textDecorationLine || style.textDecoration;
-	if (decoration) delta.decoration = decoration.split(/\s+/).filter((p) => p === "underline" || p === "line-through");
+	if (decoration) delta.decoration = decoration.split(/\s+/).filter((keyword) => keyword === "underline" || keyword === "line-through");
 	if (style.color) {
 		const hex = cssColorToHex(style.color);
 		if (hex) delta.color = hex;
@@ -1449,7 +2088,7 @@ function styleDeltaOf(style, scale) {
 	}
 	if (style.fontFamily) {
 		const family = firstFamily(style.fontFamily);
-		if (family) delta.family = family;
+		if (family) delta.family = fontKeyOfWebFamily(family);
 	}
 	if (style.letterSpacing) {
 		const px = parseFloat(style.letterSpacing);
@@ -1461,7 +2100,7 @@ function applyStyleDelta(style, delta, scale, cssFontFamily) {
 	if (delta.weight !== void 0) style.fontWeight = String(delta.weight);
 	if (delta.italic !== void 0) style.fontStyle = delta.italic ? "italic" : "normal";
 	if (delta.decoration !== void 0) {
-		const lines = delta.decoration.map((d) => d === "word" ? "underline" : d);
+		const lines = delta.decoration.map((decoration) => decoration === "word" ? "underline" : decoration);
 		style.textDecoration = lines.length ? [...new Set(lines)].join(" ") : "none";
 	}
 	if (delta.color !== void 0) style.color = delta.color;
@@ -1478,9 +2117,9 @@ function mergeDelta(base, over) {
 		...over
 	};
 }
-function sameDelta(a, b) {
-	const da = a ?? {};
-	const db = b ?? {};
+function sameDelta(left, right) {
+	const da = left ?? {};
+	const db = right ?? {};
 	const keys = /* @__PURE__ */ new Set([...Object.keys(da), ...Object.keys(db)]);
 	for (const key of keys) {
 		const va = da[key];
@@ -1656,25 +2295,25 @@ function offsetOfPosition(root, position) {
 	if (!contains(root, position.node)) return 0;
 	const events = collectOffsets(root);
 	if (position.node.nodeType === TEXT_NODE) {
-		const event = events.find((e) => e.kind === "text" && e.node === position.node);
+		const event = events.find((event) => event.kind === "text" && event.node === position.node);
 		return event ? event.at + Math.min(position.offset, event.length) : 0;
 	}
 	if (isBreak(position.node)) {
-		const event = events.find((e) => e.kind === "break" && e.node === position.node);
+		const event = events.find((event) => event.kind === "break" && event.node === position.node);
 		if (event) return event.at + (position.offset > 0 ? 1 : 0);
-		const exit = events.find((e) => e.kind === "exit" && e.node === position.node.parentNode);
+		const exit = events.find((event) => event.kind === "exit" && event.node === position.node.parentNode);
 		return exit ? exit.at : 0;
 	}
 	const child = position.node.childNodes[position.offset];
 	if (child) {
-		const event = events.find((e) => e.node === child || e.kind !== "exit" && contains(child, e.node));
+		const event = events.find((event) => event.node === child || event.kind !== "exit" && contains(child, event.node));
 		if (event) return event.at;
 	}
 	if (position.node === root) {
 		const last = events[events.length - 1];
 		return last ? last.at + last.length : 0;
 	}
-	const exit = events.find((e) => e.kind === "exit" && e.node === position.node);
+	const exit = events.find((event) => event.kind === "exit" && event.node === position.node);
 	return exit ? exit.at : 0;
 }
 function indexIn(parent, node) {
@@ -1685,26 +2324,26 @@ function indexIn(parent, node) {
 *  else the empty block / the slot after a hard break the offset names. */
 function positionOfOffset(root, offset) {
 	const events = collectOffsets(root);
-	const text = events.find((e) => e.kind === "text" && offset >= e.at && offset <= e.at + e.length);
+	const text = events.find((event) => event.kind === "text" && offset >= event.at && offset <= event.at + event.length);
 	if (text) return {
 		node: text.node,
 		offset: offset - text.at
 	};
-	const block = events.find((e) => e.kind === "enter" && isBlock(e.node) && e.at === offset);
+	const block = events.find((event) => event.kind === "enter" && isBlock(event.node) && event.at === offset);
 	if (block) return {
 		node: block.node,
 		offset: 0
 	};
-	const after = events.find((e) => e.kind === "break" && e.at + 1 === offset);
+	const after = events.find((event) => event.kind === "break" && event.at + 1 === offset);
 	if (after && after.node.parentNode) return {
 		node: after.node.parentNode,
 		offset: indexIn(after.node.parentNode, after.node) + 1
 	};
 	for (let i = events.length - 1; i >= 0; i--) {
-		const e = events[i];
-		if (e.kind === "text") return {
-			node: e.node,
-			offset: e.length
+		const event = events[i];
+		if (event.kind === "text") return {
+			node: event.node,
+			offset: event.length
 		};
 	}
 	const first = root.childNodes[0];
@@ -1715,20 +2354,20 @@ function positionOfOffset(root, offset) {
 }
 /** The selection's range as the shadow tree sees it: the standard
 *  `getComposedRanges` (options form, then the earlier positional form). */
-function composedRange(sel, shadowRoot) {
-	const s = sel;
-	if (typeof s.getComposedRanges !== "function") return null;
+function composedRange(selection, shadowRoot) {
+	const composable = selection;
+	if (typeof composable.getComposedRanges !== "function") return null;
 	for (const args of [[{ shadowRoots: [shadowRoot] }], [shadowRoot]]) try {
-		const ranges = s.getComposedRanges(...args);
+		const ranges = composable.getComposedRanges(...args);
 		if (ranges.length) return ranges[0];
 	} catch {}
 	return null;
 }
-function documentsEqual(a, b) {
-	if (a.paragraphs.length !== b.paragraphs.length) return false;
-	for (let i = 0; i < a.paragraphs.length; i++) {
-		const pa = a.paragraphs[i];
-		const pb = b.paragraphs[i];
+function documentsEqual(left, right) {
+	if (left.paragraphs.length !== right.paragraphs.length) return false;
+	for (let i = 0; i < left.paragraphs.length; i++) {
+		const pa = left.paragraphs[i];
+		const pb = right.paragraphs[i];
 		if ((pa.align ?? "left") !== (pb.align ?? "left") || (pa.dir ?? "ltr") !== (pb.dir ?? "ltr")) return false;
 		if (pa.runs.length !== pb.runs.length) return false;
 		for (let j = 0; j < pa.runs.length; j++) {
@@ -1740,21 +2379,21 @@ function documentsEqual(a, b) {
 	return true;
 }
 /** Bind one contentEditable element. Returns the Svelte-action-shaped handle. */
-function attachRichTextEditor(el, host, initial) {
-	const root = el;
-	const doc = el.ownerDocument;
-	const rootNode = el.getRootNode();
+function attachRichTextEditor(element, host, initial) {
+	const root = element;
+	const doc = element.ownerDocument;
+	const rootNode = element.getRootNode();
 	const activeElement = () => rootNode.activeElement;
 	const liveRange = () => {
-		const sel = doc.getSelection();
-		if (!sel) return null;
+		const selection = doc.getSelection();
+		if (!selection) return null;
 		if (rootNode !== doc) {
-			const composed = composedRange(sel, rootNode);
+			const composed = composedRange(selection, rootNode);
 			if (composed) return composed;
 			const shadowSel = rootNode.getSelection?.();
 			if (shadowSel && shadowSel.rangeCount > 0) return shadowSel.getRangeAt(0);
 		}
-		return sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
+		return selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
 	};
 	let props = initial;
 	let rendered = null;
@@ -1779,23 +2418,23 @@ function attachRichTextEditor(el, host, initial) {
 		};
 	};
 	const select = (range) => {
-		const sel = doc.getSelection();
-		if (!sel) return;
+		const selection = doc.getSelection();
+		if (!selection) return;
 		const start = positionOfOffset(root, range.start);
 		const end = positionOfOffset(root, range.end);
 		if (!start || !end) return;
-		if (typeof sel.setBaseAndExtent === "function") {
-			sel.setBaseAndExtent(start.node, start.offset, end.node, end.offset);
+		if (typeof selection.setBaseAndExtent === "function") {
+			selection.setBaseAndExtent(start.node, start.offset, end.node, end.offset);
 			return;
 		}
 		const domRange = doc.createRange();
 		domRange.setStart(start.node, start.offset);
 		domRange.setEnd(end.node, end.offset);
-		sel.removeAllRanges();
-		sel.addRange(domRange);
+		selection.removeAllRanges();
+		selection.addRange(domRange);
 	};
 	const refreshLineModel = () => {
-		const bodyStyle = doc.defaultView?.getComputedStyle(el) ?? el.style;
+		const bodyStyle = doc.defaultView?.getComputedStyle(element) ?? element.style;
 		const body = {
 			family: bodyStyle.fontFamily || "Helvetica",
 			weight: bodyStyle.fontWeight || "400",
@@ -1812,7 +2451,7 @@ function attachRichTextEditor(el, host, initial) {
 			if (!measured.has(key)) measured.set(key, webFontMetrics(family, doc, face));
 			return measured.get(key);
 		};
-		const runs = Array.from(el.querySelectorAll("span, b, strong, i, em")).map((node) => {
+		const runs = Array.from(element.querySelectorAll("span, b, strong, i, em")).map((node) => {
 			const style = doc.defaultView?.getComputedStyle(node) ?? node.style;
 			const face = {
 				family: style.fontFamily || body.family,
@@ -1827,7 +2466,7 @@ function attachRichTextEditor(el, host, initial) {
 		const measure = measureFor(body);
 		const lineHeight = lineModelFor(body.family, measure).lineHeight;
 		const shift = firstLineShiftFor(body.family, size, measure);
-		el.style.lineHeight = String(lineHeight);
+		element.style.lineHeight = String(lineHeight);
 		for (const run of runs) run.node.style.lineHeight = String(run.lineHeight);
 		applyFirstLineShift(root, shift);
 	};
@@ -1857,28 +2496,28 @@ function attachRichTextEditor(el, host, initial) {
 		composing = false;
 		serialiseAndReport();
 	};
-	const onKeyDown = (e) => {
-		if (!(e.metaKey || e.ctrlKey) || e.altKey) return;
-		const key = e.key.toLowerCase();
+	const onKeyDown = (event) => {
+		if (!(event.metaKey || event.ctrlKey) || event.altKey) return;
+		const key = event.key.toLowerCase();
 		const command = key === "b" ? "bold" : key === "i" ? "italic" : key === "u" ? "underline" : null;
 		if (!command) return;
-		e.preventDefault();
+		event.preventDefault();
 		host.onCommand(command);
 	};
-	const onPaste = (e) => {
-		e.preventDefault();
-		const text = e.clipboardData?.getData("text/plain") ?? "";
+	const onPaste = (event) => {
+		event.preventDefault();
+		const text = event.clipboardData?.getData("text/plain") ?? "";
 		doc.execCommand("insertText", false, text);
 	};
 	const onSelectionChange = () => {
-		if (activeElement() !== el) return;
+		if (activeElement() !== element) return;
 		host.onSelectionChange(currentSelection());
 	};
-	el.addEventListener("input", onInput);
-	el.addEventListener("compositionstart", onCompositionStart);
-	el.addEventListener("compositionend", onCompositionEnd);
-	el.addEventListener("keydown", onKeyDown);
-	el.addEventListener("paste", onPaste);
+	element.addEventListener("input", onInput);
+	element.addEventListener("compositionstart", onCompositionStart);
+	element.addEventListener("compositionend", onCompositionEnd);
+	element.addEventListener("keydown", onKeyDown);
+	element.addEventListener("paste", onPaste);
 	doc.addEventListener("selectionchange", onSelectionChange);
 	render(initial.document, false);
 	const stopObservingFonts = observeWebFonts(doc, refreshLineModel);
@@ -1888,7 +2527,7 @@ function attachRichTextEditor(el, host, initial) {
 			props = next;
 			if (composing) return;
 			if (!rendered || scaleChanged || !documentsEqual(next.document, rendered)) {
-				render(next.document, activeElement() === el);
+				render(next.document, activeElement() === element);
 				return;
 			}
 			refreshLineModel();
@@ -1897,16 +2536,2565 @@ function attachRichTextEditor(el, host, initial) {
 		select,
 		detach() {
 			stopObservingFonts();
-			el.removeEventListener("input", onInput);
-			el.removeEventListener("compositionstart", onCompositionStart);
-			el.removeEventListener("compositionend", onCompositionEnd);
-			el.removeEventListener("keydown", onKeyDown);
-			el.removeEventListener("paste", onPaste);
+			element.removeEventListener("input", onInput);
+			element.removeEventListener("compositionstart", onCompositionStart);
+			element.removeEventListener("compositionend", onCompositionEnd);
+			element.removeEventListener("keydown", onKeyDown);
+			element.removeEventListener("paste", onPaste);
 			doc.removeEventListener("selectionchange", onSelectionChange);
 		}
 	};
 }
 //#endregion
-export { applyFirstLineShift, attachRichTextEditor, attachSelectionHandle, bindPaintedImage, computeReleaseVelocity, copySelection, createDefaultActionsUiAdapter, createStageGestureController, createStageSurface, firstLineShiftFor, indexedDbByteStore, lineModelFor, mountWebFont, observeClientGeometry, offsetOfPosition, pickFile, pickImageFile, positionAnchoredRect, positionOfOffset, projectAnchoredTarget, renderRichText, sanitizeExternalUri, saveFile, serializeRichText, styleDeltaOf, svgCursor, vibrationFeedback, webFontMetrics, wheelZoomFactor, wireSelectionClipboard, wkFeedback };
+//#region src/picture-or-painting.ts
+function pictureOrPainting(look) {
+	if (!look.pending && !look.loaded) return null;
+	if (look.picture && look.picture.version === look.version && !look.pending) return {
+		kind: "picture",
+		picture: look.picture
+	};
+	const painting = look.paint();
+	if (painting) return {
+		kind: "painting",
+		painting
+	};
+	return look.picture ? {
+		kind: "picture",
+		picture: look.picture
+	} : null;
+}
+//#endregion
+//#region src/theme.ts
+/**
+* A dash variable holds an SVG dash array, while its setting says `'solid'` or
+* `'dashed'`: solid has no dashes, and dashed is 4 pixels on, 3 off.
+*/
+const DASH_KEYWORDS = {
+	solid: "none",
+	dashed: "4 3"
+};
+/** Every theming variable, in the order the theming page lists them. */
+const EPDF_VARIABLES = {
+	accent: {
+		setting: "viewer.accent",
+		default: "#3858e9"
+	},
+	"page-background": {
+		setting: "viewer.page.background",
+		default: "#ffffff"
+	},
+	"page-shadow": {
+		setting: "viewer.page.shadow",
+		default: "0 6px 18px rgb(0 0 0 / 0.18)"
+	},
+	"annotation-accent": {
+		setting: "annotation.chrome.accent",
+		follows: "accent",
+		default: "#3858e9"
+	},
+	"annotation-outline": {
+		setting: "annotation.chrome.outline.color",
+		follows: "annotation-accent",
+		default: "#3858e9"
+	},
+	"annotation-outline-width": {
+		setting: "annotation.chrome.outline.width",
+		default: "1"
+	},
+	"annotation-outline-dash": {
+		setting: "annotation.chrome.outline.style",
+		keywords: DASH_KEYWORDS,
+		default: "none"
+	},
+	"annotation-handle-fill": {
+		setting: "annotation.chrome.handles.fill",
+		default: "#ffffff"
+	},
+	"annotation-handle-stroke": {
+		setting: "annotation.chrome.handles.stroke",
+		follows: "annotation-accent",
+		default: "#3858e9"
+	},
+	"annotation-rotation-handle-fill": {
+		setting: "annotation.chrome.rotationHandle.fill",
+		follows: "annotation-handle-fill",
+		default: "#ffffff"
+	},
+	"annotation-rotation-handle-stroke": {
+		setting: "annotation.chrome.rotationHandle.stroke",
+		follows: "annotation-handle-stroke",
+		default: "#3858e9"
+	},
+	"annotation-guide": {
+		setting: "annotation.chrome.guides.color",
+		default: "#e91e63"
+	},
+	"annotation-rotation-guide": {
+		setting: "annotation.chrome.guides.rotationColor",
+		follows: "annotation-accent",
+		default: "#3858e9"
+	},
+	"annotation-guide-width": {
+		setting: "annotation.chrome.guides.width",
+		default: "1.5"
+	},
+	"annotation-guide-dash": {
+		setting: "annotation.chrome.guides.style",
+		keywords: DASH_KEYWORDS,
+		default: "none"
+	},
+	"annotation-marquee-fill": {
+		setting: "annotation.chrome.marquee.fill",
+		follows: "annotation-accent",
+		accentPercent: 8,
+		default: "color-mix(in srgb, #3858e9 8%, transparent)"
+	},
+	"annotation-marquee-stroke": {
+		setting: "annotation.chrome.marquee.stroke",
+		follows: "annotation-accent",
+		default: "#3858e9"
+	},
+	"annotation-text-outline": {
+		setting: "annotation.chrome.textOutline",
+		follows: "annotation-accent",
+		default: "#3858e9"
+	},
+	"readout-background": {
+		setting: "annotation.chrome.readout.background",
+		default: "rgb(0 0 0 / 0.8)"
+	},
+	"readout-color": {
+		setting: "annotation.chrome.readout.color",
+		default: "#ffffff"
+	},
+	"ghost-opacity": {
+		setting: "annotation.tools[].ghost.opacity",
+		default: "0.5"
+	},
+	"text-selection": {
+		setting: "selection.color",
+		follows: "accent",
+		accentPercent: 35,
+		default: "color-mix(in srgb, #3858e9 35%, transparent)"
+	},
+	"text-selection-handle": {
+		setting: "selection.handles.color",
+		follows: "accent",
+		default: "#3858e9"
+	},
+	"text-selection-handle-shadow": {
+		setting: "selection.handles.shadow",
+		default: "0 1px 4px rgb(0 0 0 / 0.35)"
+	},
+	"search-highlight": {
+		setting: "search.highlight.color",
+		default: "#ffd500"
+	},
+	"search-highlight-active": {
+		setting: "search.highlight.activeColor",
+		default: "#ff9632"
+	},
+	"search-blend-mode": {
+		setting: "search.highlight.blendMode",
+		default: "multiply"
+	},
+	"form-focus": {
+		setting: "form.focus.color",
+		follows: "accent",
+		default: "#3858e9"
+	},
+	"form-field-border": {
+		setting: "form.fields.border",
+		follows: "accent",
+		accentPercent: 55,
+		default: "color-mix(in srgb, #3858e9 55%, transparent)"
+	},
+	"form-field-background": {
+		setting: "form.fields.background",
+		default: "rgb(255 255 255 / 0.92)"
+	},
+	"form-field-color": {
+		setting: "form.fields.color",
+		default: "#1f2a44"
+	},
+	"scrollbar-thumb": { default: "rgb(0 0 0 / 0.4)" },
+	"toolbar-surface": { default: "#ffffff" },
+	"toolbar-border": { default: "rgb(0 0 0 / 0.15)" },
+	"toolbar-active": { default: "rgb(0 0 0 / 0.12)" },
+	"font-mono": { default: "ui-monospace, monospace" }
+};
+/**
+* The CSS value for a painted part: its own variable, then the variables of the
+* parts its default follows (the part it follows, its plugin's accent,
+* `--epdf-accent`), then the setting's value. Put it in a style (`style.stroke`),
+* not an SVG attribute, because attributes don't read `var()`.
+*
+* `paint('annotation-outline', '#3858e9')` is
+* `var(--epdf-annotation-outline, var(--epdf-annotation-accent, var(--epdf-accent, #3858e9)))`,
+* `paint('annotation-rotation-handle-fill', '#ffffff')` is
+* `var(--epdf-annotation-rotation-handle-fill, var(--epdf-annotation-handle-fill, #ffffff))`,
+* and `paint('search-highlight', '#ffd500')` is `var(--epdf-search-highlight, #ffd500)`.
+*/
+function paint(name, settingValue) {
+	const definition = EPDF_VARIABLES[name];
+	const value = String(settingValue);
+	const css = definition.keywords?.[value] ?? value;
+	const followed = definition.accentPercent === void 0 ? definition.follows : void 0;
+	return `var(--epdf-${name}, ${followed ? paint(followed, css) : css})`;
+}
+/**
+* The default of a translucent part, such as "the accent at 35%": the accent it
+* follows, variables included, mixed with transparent. Use it as the setting's
+* value while the part's own setting is unset.
+*
+* The accent variables sit inside the mix, not in {@link paint}'s lookup: there
+* a set `--epdf-accent` would paint at full strength, and CSS can't mix a
+* variable only when it's set. So a part's own setting, when you give one, wins
+* over the accent variables, though not over the part's own variable.
+*
+* `mixAccent('text-selection', '#3858e9')` is
+* `color-mix(in srgb, var(--epdf-accent, #3858e9) 35%, transparent)`.
+*/
+function mixAccent(name, accentValue) {
+	const { follows, accentPercent } = EPDF_VARIABLES[name];
+	return `color-mix(in srgb, ${paint(follows, accentValue)} ${accentPercent}%, transparent)`;
+}
+/**
+* The CSS value for a part you style yourself, which has no setting: its
+* variable, then its built-in look.
+*
+* `paintDefault('scrollbar-thumb')` is `var(--epdf-scrollbar-thumb, rgb(0 0 0 / 0.4))`.
+*/
+function paintDefault(name) {
+	return `var(--epdf-${name}, ${EPDF_VARIABLES[name].default})`;
+}
+/** The value at a dotted path of a theme, or `undefined`. */
+function valueAt(theme, path) {
+	let node = theme;
+	for (const key of path) {
+		if (typeof node !== "object" || node === null) return void 0;
+		node = node[key];
+	}
+	return node;
+}
+/**
+* The CSS variables that set a theme, for a style on an element around the viewer: CSS variables
+* win over settings, and reach everything inside the element. A part left out keeps its own
+* look, so the parts that follow the accent follow a new `accent`.
+*
+* `epdfThemeVariables({ accent: '#e91e63', page: { shadow: 'none' } })` is
+* `{ '--epdf-accent': '#e91e63', '--epdf-page-shadow': 'none' }`.
+*/
+function epdfThemeVariables(theme) {
+	const variables = {};
+	for (const [name, definition] of Object.entries(EPDF_VARIABLES)) {
+		if (!definition.setting) continue;
+		const value = valueAt(theme, definition.setting.replace(/^viewer\./, "").replace("[]", "").split("."));
+		if (value === void 0 || value === null) continue;
+		const css = String(value);
+		variables[`--epdf-${name}`] = definition.keywords?.[css] ?? css;
+	}
+	return variables;
+}
+//#endregion
+//#region src/page-pixels.ts
+/** A box in page points as a box in the page layer's pixels. */
+function rectInPixels(rect, page) {
+	const topLeft = page.toPixels({
+		x: rect.x,
+		y: rect.y
+	});
+	const bottomRight = page.toPixels({
+		x: rect.x + rect.width,
+		y: rect.y + rect.height
+	});
+	return {
+		left: topLeft.x,
+		top: topLeft.y,
+		width: bottomRight.x - topLeft.x,
+		height: bottomRight.y - topLeft.y
+	};
+}
+/**
+* A quad's corners in the page layer's pixels, in drawing order (upper left,
+* upper right, lower right, lower left). The map is affine, so mapping the
+* corners is exact, for turned text too.
+*/
+function quadInPixels(quad, page) {
+	return [
+		quad.upperLeft,
+		quad.upperRight,
+		quad.lowerRight,
+		quad.lowerLeft
+	].map((point) => page.toPixels(point));
+}
+/** Points as an SVG `points` attribute: `"x,y x,y …"`. */
+function svgPoints(points) {
+	return points.map((point) => `${point.x},${point.y}`).join(" ");
+}
+/** Whether a quad is an upright box: drawn as a positioned box instead of a polygon. */
+function isUprightQuad(quad) {
+	return quad.upperLeft.y === quad.upperRight.y && quad.lowerLeft.y === quad.lowerRight.y && quad.upperLeft.x === quad.lowerLeft.x;
+}
+//#endregion
+//#region src/event-isolation.ts
+/**
+* Keeping a page's own listeners out of controls drawn over it. The Stage
+* listens natively on an ancestor of every page: a press that bubbles to it
+* starts a tool gesture or reads as a click outside (ending an edit), and a
+* wheel pans or zooms the page. A control that owns its gestures stops them
+* with a native listener on itself, which runs during real DOM bubbling,
+* before the Stage's. A framework's own event system may run too late: React
+* dispatches from its root, above the Stage.
+*/
+/**
+* Stop presses that begin inside `element` from reaching the page, and tell `onPress` about each
+* one. A control that needs the press itself (a link or a form field sending its PDF "mouse down"
+* action) must take it here: once the press stops at the element, a framework that dispatches
+* from its root (React) never sees it. Returns the detach.
+*/
+function isolatePointerDown(element, onPress) {
+	const stop = (event) => {
+		event.stopPropagation();
+		onPress?.(event);
+	};
+	element.addEventListener("pointerdown", stop);
+	return () => element.removeEventListener("pointerdown", stop);
+}
+/**
+* Stop wheel events inside `element` from reaching the page, so the browser
+* scrolls the element itself (a list box) instead of the Stage panning or
+* zooming. Returns the detach.
+*/
+function isolateWheel(element) {
+	const stop = (event) => event.stopPropagation();
+	element.addEventListener("wheel", stop);
+	return () => element.removeEventListener("wheel", stop);
+}
+//#endregion
+//#region src/outside-press.ts
+/**
+* Call `onPress` when a pointer press starts anywhere in `element`'s document
+* outside `element`: how a menu closes when the user presses somewhere else,
+* in the viewer or on the page around it. Where the press landed is read from
+* its composed path: at the document, an event from inside a shadow root is
+* retargeted to the shadow host, so `element.contains(event.target)` would
+* call every press inside a shadow-rooted menu an outside one. Listens in the
+* capture phase, so a handler that stops the press can't keep a menu open.
+* Returns the stop.
+*/
+function observeOutsidePress(element, onPress) {
+	const doc = element.ownerDocument;
+	const listener = (event) => {
+		if (!event.composedPath().includes(element)) onPress(event);
+	};
+	doc.addEventListener("pointerdown", listener, true);
+	return () => doc.removeEventListener("pointerdown", listener, true);
+}
+//#endregion
+//#region src/anchor-equality.ts
+const sameBox = (left, right) => left.x === right.x && left.y === right.y && left.width === right.width && left.height === right.height;
+/** The same page and box (a text selection's menu anchor). */
+function samePageBounds(left, right) {
+	if (left === right) return true;
+	if (!left || !right) return false;
+	return left.page.objectNumber === right.page.objectNumber && sameBox(left.bounds, right.bounds);
+}
+/** The same annotation selection anchor: page, box and rotation handle. */
+function sameSelectionAnchor(left, right) {
+	if (left === right) return true;
+	if (!left || !right) return false;
+	return samePageBounds(left, right) && left.rotationHandle?.x === right.rotationHandle?.x && left.rotationHandle?.y === right.rotationHandle?.y;
+}
+/** The same annotation anchor: page, box, and how it follows the view. */
+function sameAnnotationAnchor(left, right) {
+	if (left === right) return true;
+	if (!left || !right) return false;
+	return samePageBounds(left, right) && left.boundsIn === right.boundsIn;
+}
+/** The same creation draft: what it draws, its points so far, whether it can finish, and its box. */
+function sameCreationDraftAnchor(left, right) {
+	if (left === right) return true;
+	if (!left || !right) return false;
+	return left.kind === right.kind && left.subtype === right.subtype && left.pointCount === right.pointCount && left.minPoints === right.minPoints && left.canFinish === right.canFinish && samePageBounds(left, right);
+}
+/** The same turn in progress: page, pointer and angle. */
+function sameRotationAnchor(left, right) {
+	if (left === right) return true;
+	if (!left || !right) return false;
+	return left.page.objectNumber === right.page.objectNumber && left.at.x === right.at.x && left.at.y === right.at.y && left.angle === right.angle;
+}
+const samePoint = (left, right) => left.x === right.x && left.y === right.y;
+const sameQuad = (left, right) => samePoint(left.upperLeft, right.upperLeft) && samePoint(left.upperRight, right.upperRight) && samePoint(left.lowerLeft, right.lowerLeft) && samePoint(left.lowerRight, right.lowerRight);
+/**
+* The same selection ends. The glyph quads compare corner by corner, so an
+* end that turns without moving its bounding box still counts as moved.
+*/
+function sameSelectionEndpoints(left, right) {
+	if (left === right) return true;
+	if (!left || !right) return false;
+	return left.start.page.objectNumber === right.start.page.objectNumber && left.end.page.objectNumber === right.end.page.objectNumber && left.start.advance === right.start.advance && left.end.advance === right.end.advance && sameQuad(left.start.glyphQuad, right.start.glyphQuad) && sameQuad(left.end.glyphQuad, right.end.glyphQuad);
+}
+//#endregion
+//#region src/annotation-scene.ts
+/**
+* An annotation's painted scene as SVG elements. The annotation core turns a
+* render item into its scene (`scene(item)` in `@embedpdf/core-annotation`):
+* rects, ellipses, lines, polygons, paths and text, each with its paint.
+* {@link svgShapesOf} turns that scene into one SVG element description per
+* node (its tag, its attributes under their SVG names, and its text), so a
+* framework adapter draws it with one loop and no per-kind logic. The scene's
+* types are mirrored structurally, so this package stays free of EmbedPDF
+* imports.
+*/
+/** The faces shapes draw their text in, each once: a renderer mounts them while it shows the shapes. */
+function fontProgramsOf(shapes) {
+	const programs = /* @__PURE__ */ new Map();
+	const walk = (each) => {
+		for (const shape of each) {
+			if (shape.program) programs.set(shape.program.family, shape.program);
+			if (shape.children) walk(shape.children);
+		}
+	};
+	walk(shapes);
+	return [...programs.values()];
+}
+/** A node's paint as SVG presentation attributes; everything else about its look is the core's. */
+function paintAttributes(nodePaint, miterLimit) {
+	const attributes = {
+		fill: nodePaint.fill ?? "none",
+		stroke: nodePaint.stroke ?? "none",
+		"stroke-linejoin": nodePaint.join ?? "miter",
+		"stroke-miterlimit": miterLimit
+	};
+	if (nodePaint.fillRule !== void 0) attributes["fill-rule"] = nodePaint.fillRule;
+	if (nodePaint.width !== void 0) attributes["stroke-width"] = nodePaint.width;
+	if (nodePaint.opacity !== void 0) attributes.opacity = nodePaint.opacity;
+	if (nodePaint.lineCap !== void 0) attributes["stroke-linecap"] = nodePaint.lineCap;
+	if (nodePaint.dash) attributes["stroke-dasharray"] = nodePaint.dash.join(" ");
+	return attributes;
+}
+/**
+* Each scene node as one SVG element, in drawing order, in the scene's own
+* page-point units. A clipped node comes inside an `svg` of its clip box,
+* which shows only what's inside it (no ids, so every framework draws it the
+* same).
+*/
+function svgShapesOf(nodes, options) {
+	return nodes.map((node) => {
+		const shape = svgShapeOf(node, options);
+		if (!node.clip) return shape;
+		const { x, y, width, height } = node.clip;
+		return {
+			tag: "svg",
+			attributes: {
+				x,
+				y,
+				width,
+				height,
+				viewBox: `${x} ${y} ${width} ${height}`,
+				overflow: "hidden"
+			},
+			children: [shape]
+		};
+	});
+}
+function svgShapeOf(node, options) {
+	const painted = paintAttributes(node.paint, options.miterLimit);
+	const blend = node.paint.blend ? { blend: node.paint.blend } : {};
+	switch (node.kind) {
+		case "rect": return {
+			tag: "rect",
+			attributes: {
+				x: node.rect.x,
+				y: node.rect.y,
+				width: node.rect.width,
+				height: node.rect.height,
+				...painted
+			},
+			...blend
+		};
+		case "ellipse": return {
+			tag: "ellipse",
+			attributes: {
+				cx: node.rect.x + node.rect.width / 2,
+				cy: node.rect.y + node.rect.height / 2,
+				rx: node.rect.width / 2,
+				ry: node.rect.height / 2,
+				...painted
+			},
+			...blend
+		};
+		case "line": return {
+			tag: "line",
+			attributes: {
+				x1: node.a.x,
+				y1: node.a.y,
+				x2: node.b.x,
+				y2: node.b.y,
+				...painted
+			},
+			...blend
+		};
+		case "path": return {
+			tag: "path",
+			attributes: {
+				d: node.d,
+				...painted
+			},
+			...blend
+		};
+		case "text": return {
+			tag: "text",
+			attributes: {
+				x: node.at.x,
+				y: node.at.y,
+				...node.rotation ? { transform: `rotate(${node.rotation} ${node.at.x} ${node.at.y})` } : {},
+				"font-size": node.fontSize,
+				...node.fontFamily ? { "font-family": node.fontFamily } : {},
+				...painted
+			},
+			text: node.text,
+			...blend
+		};
+		case "poly": return {
+			tag: node.closed ? "polygon" : "polyline",
+			attributes: {
+				points: node.points.map((point) => `${point.x},${point.y}`).join(" "),
+				...painted
+			},
+			...blend
+		};
+		case "glyphs": {
+			const drawn = node.text.split("").flatMap((character, index) => /\s/.test(character) ? [] : [{
+				character,
+				x: node.at.x + (node.offsets[index] ?? 0)
+			}]);
+			return {
+				tag: "text",
+				attributes: {
+					x: drawn.map((glyph) => glyph.x).join(" "),
+					y: node.at.y,
+					...node.rotation ? { transform: `rotate(${node.rotation} ${node.at.x} ${node.at.y})` } : {},
+					"font-size": node.fontSize,
+					"font-family": node.fontFamily,
+					...node.fontWeight !== void 0 ? { "font-weight": node.fontWeight } : {},
+					...node.fontStyle !== void 0 ? { "font-style": node.fontStyle } : {},
+					...painted
+				},
+				text: drawn.map((glyph) => glyph.character).join(""),
+				...node.program ? { program: node.program } : {},
+				...blend
+			};
+		}
+	}
+}
+/**
+* The `viewBox` an item's scene draws in: its box, in page points. `null`
+* while the box has no area (a drawing at its first press): draw nothing then.
+*
+* The `<svg>` fills the item's frame, so the viewBox and the element's size
+* stay proportional (their ratio is the zoom). Never clamp either one: a
+* clamped element with a shrinking viewBox scales its content up, and a
+* cloudy border's scallops flood the page.
+*/
+function sceneViewBox(box) {
+	if (box.width <= 0 || box.height <= 0) return null;
+	return `${box.x} ${box.y} ${box.width} ${box.height}`;
+}
+/** How opaque a tool's ghost paints: `--epdf-ghost-opacity` wins over the tool's own. */
+function ghostOpacity(opacity) {
+	return paint("ghost-opacity", opacity);
+}
+//#endregion
+//#region src/annotation-chrome.ts
+/**
+* The chrome settings as paint. A color left `null` follows the part it
+* names, and in the end the accent: the chrome's own, else the viewer's.
+*/
+function annotationChromePaint(chrome, viewerAccent) {
+	const accent = chrome.accent ?? viewerAccent;
+	const guideLine = {
+		strokeWidth: paint("annotation-guide-width", chrome.guides.width),
+		strokeDasharray: paint("annotation-guide-dash", chrome.guides.style)
+	};
+	return {
+		outline: {
+			stroke: paint("annotation-outline", chrome.outline.color ?? accent),
+			strokeWidth: paint("annotation-outline-width", chrome.outline.width),
+			strokeDasharray: paint("annotation-outline-dash", chrome.outline.style)
+		},
+		handle: {
+			fill: paint("annotation-handle-fill", chrome.handles.fill),
+			stroke: paint("annotation-handle-stroke", chrome.handles.stroke ?? accent)
+		},
+		rotationHandle: {
+			fill: paint("annotation-rotation-handle-fill", chrome.rotationHandle.fill ?? chrome.handles.fill),
+			stroke: paint("annotation-rotation-handle-stroke", chrome.rotationHandle.stroke ?? chrome.handles.stroke ?? accent)
+		},
+		guide: {
+			stroke: paint("annotation-guide", chrome.guides.color),
+			...guideLine
+		},
+		rotationGuide: {
+			stroke: paint("annotation-rotation-guide", chrome.guides.rotationColor ?? accent),
+			...guideLine
+		},
+		marquee: {
+			fill: paint("annotation-marquee-fill", chrome.marquee.fill ?? mixAccent("annotation-marquee-fill", accent)),
+			stroke: paint("annotation-marquee-stroke", chrome.marquee.stroke ?? accent)
+		},
+		textOutline: paint("annotation-text-outline", chrome.textOutline ?? accent)
+	};
+}
+/**
+* Each chrome node in the page layer's pixels, in drawing order. The plugin
+* already sized the screen-constant parts (handle grab zones, the rotation
+* handle's offset) for the page's zoom; this only places them.
+*/
+function chromeInPixels(nodes, page) {
+	return nodes.map((node) => {
+		switch (node.kind) {
+			case "handle": return {
+				kind: "handle",
+				at: page.toPixels(node.at),
+				rotation: node.rot ?? 0,
+				role: node.role,
+				active: node.active
+			};
+			case "guide": {
+				const start = node.axis === "x" ? {
+					x: node.at,
+					y: node.lo
+				} : {
+					x: node.lo,
+					y: node.at
+				};
+				const end = node.axis === "x" ? {
+					x: node.at,
+					y: node.hi
+				} : {
+					x: node.hi,
+					y: node.at
+				};
+				return {
+					kind: "guide",
+					from: page.toPixels(start),
+					to: page.toPixels(end)
+				};
+			}
+			case "obb": return {
+				kind: "turned-outline",
+				points: svgPoints(node.corners.map((corner) => page.toPixels(corner)))
+			};
+			case "rotate-guides": return {
+				kind: "rotation-guides",
+				lines: node.lines.map((chord) => ({
+					from: page.toPixels(chord.a),
+					to: page.toPixels(chord.b),
+					opacity: chord.role === "axis" ? .35 : .8
+				}))
+			};
+			case "rotate-knob": return {
+				kind: "rotation-handle",
+				at: page.toPixels(node.at),
+				from: page.toPixels(node.from)
+			};
+			case "marquee": return {
+				kind: "marquee",
+				box: rectInPixels(node.rect, page)
+			};
+			case "outline": return {
+				kind: "outline",
+				box: rectInPixels(node.rect, page)
+			};
+		}
+	});
+}
+//#endregion
+//#region src/text-box-editor.ts
+/**
+* Make `element` the editor of a text box. Typing shows at once and reaches
+* the engine in one write after a pause (or when the edit ends), not one
+* write per keystroke.
+*/
+function attachTextBoxEditor(element, annotation) {
+	let item = null;
+	let binding = null;
+	let shownEditing = null;
+	const host = {
+		onInput: (document) => {
+			if (item?.ref) annotation.draftRichText(item.ref, document);
+		},
+		onSelectionChange: (range) => {
+			if (item?.ref) annotation.setTextSelection(item.ref, range);
+		},
+		onCommand: (command) => void annotation.text.toggleFormat(command),
+		cssFontFamily: (family) => annotation.getCssFontFamily(family)
+	};
+	const stopPress = (event) => event.stopPropagation();
+	const refocus = (event) => {
+		if (event.relatedTarget == null && element.isConnected && item && annotation.getEditingId() === item.id) element.focus();
+	};
+	element.addEventListener("pointerdown", stopPress);
+	element.addEventListener("blur", refocus);
+	return {
+		update(next, scale) {
+			item = next;
+			if (next && !binding) binding = attachRichTextEditor(element, host, {
+				document: next.richText,
+				scale
+			});
+			else if (!next && binding) {
+				binding.detach();
+				binding = null;
+			}
+			if (next) binding?.update({
+				document: next.richText,
+				scale
+			});
+			const editing = next?.editing ?? false;
+			if (editing === shownEditing) return;
+			shownEditing = editing;
+			element.contentEditable = editing ? "true" : "false";
+			if (editing) {
+				element.focus();
+				element.scrollTop = 0;
+			}
+		},
+		detach() {
+			binding?.detach();
+			binding = null;
+			element.removeEventListener("pointerdown", stopPress);
+			element.removeEventListener("blur", refocus);
+		}
+	};
+}
+/**
+* A text box editor that follows its inputs: what each framework's binding
+* holds between renders. The update runs right after an attach, in the same
+* call, so the element never shows an editor without its text.
+*/
+function createTextBoxEditorFollower() {
+	let attached = null;
+	const detach = () => {
+		attached?.editor.detach();
+		attached = null;
+	};
+	return {
+		follow(element, annotation, item, scale) {
+			if (!(attached !== null && attached.element === element && attached.annotation === annotation)) {
+				detach();
+				if (element && annotation) attached = {
+					element,
+					annotation,
+					editor: attachTextBoxEditor(element, annotation)
+				};
+			}
+			attached?.editor.update(item, scale);
+		},
+		detach
+	};
+}
+/**
+* Pixels per point for an editor element you draw yourself (a renderer's own
+* text box): the box's width on the page over its width in points, or the
+* page's view scale while there is no box. Inside a look the layer scales
+* (`lookScale`, 1 outside one), the element draws at the annotation's 100%
+* size and the look's scale does the rest.
+*/
+function textBoxEditorScaleOf(item, page, lookScale) {
+	return (item && item.box.width > 0 ? rectInPixels(item.box, page).width / item.box.width : page.viewScale) / lookScale;
+}
+/**
+* A text box's body style at `scale` pixels per point: font, size, color and
+* alignment. No line height: the editor binding states the engine's line
+* model per face on the element itself.
+*/
+function textBoxStyleOf(css, scale) {
+	return {
+		fontFamily: css.fontFamily,
+		fontSize: `${css.fontSize * scale}px`,
+		color: css.color,
+		fontWeight: css.fontWeight,
+		fontStyle: css.fontStyle,
+		textDecoration: css.textDecoration,
+		textAlign: css.align
+	};
+}
+/**
+* The editor element of a free text box in the page layer's pixels: the
+* engine's text plate (`SetPlateRect` and its `re W n` clip), the box inset
+* by its padding. Place it there with no CSS padding, so its edge is the
+* plate's: CSS padding doesn't clip overflow, and scrolled lines would paint
+* over the border band. The box never grows with its text.
+*/
+function textPlateInPixels(item, page) {
+	const box = rectInPixels(item.box, page);
+	const scale = item.box.width > 0 ? box.width / item.box.width : 1;
+	const inset = item.css.padding * scale;
+	return {
+		left: box.left + inset,
+		top: box.top + inset,
+		width: Math.max(0, box.width - 2 * inset),
+		height: Math.max(0, box.height - 2 * inset),
+		scale
+	};
+}
+//#endregion
+//#region src/annotation-renderers.ts
+const isLook = (renderer) => "for" in renderer;
+/**
+* The behaviors `interactive` renderers registered, counted per capability
+* and renderer entry, because the layer mounts once per page: the first page
+* registers, the last one unregisters. The entry's identity is the key, so a
+* renderer list must be defined once, never anew on every render.
+*/
+const registered = /* @__PURE__ */ new WeakMap();
+let generatedIds = 0;
+/**
+* Register a behavior for each `interactive` look in `renderers`, so the
+* plugin lets that renderer take the pointer. Call it when a layer mounts (and
+* again when its renderer list changes); call what it returns when it
+* unmounts. `activeToolId` is read whenever an `interactive` function is asked.
+*/
+function registerRendererBehaviors(annotation, renderers, activeToolId) {
+	const releases = [];
+	for (const renderer of renderers) {
+		if (!isLook(renderer) || !renderer.interactive) continue;
+		let perCapability = registered.get(annotation);
+		if (!perCapability) registered.set(annotation, perCapability = /* @__PURE__ */ new Map());
+		let entry = perCapability.get(renderer);
+		if (!entry) {
+			const id = renderer.id ?? `renderer:${++generatedIds}`;
+			const interactive = renderer.interactive;
+			const engaged = typeof interactive === "function" ? (record) => interactive({
+				annotation: record,
+				toolId: activeToolId()
+			}) : () => true;
+			entry = {
+				id,
+				count: 0,
+				unregister: annotation.registerBehavior({
+					id,
+					matches: renderer.for,
+					engaged
+				})
+			};
+			perCapability.set(renderer, entry);
+		}
+		entry.count++;
+		const owned = entry;
+		releases.push(() => {
+			owned.count--;
+			if (owned.count === 0) {
+				owned.unregister();
+				registered.get(annotation)?.delete(renderer);
+			}
+		});
+	}
+	return () => releases.forEach((release) => release());
+}
+/** The behavior id a renderer entry answers for: a sibling plugin's own, or the one registered for it. */
+function rendererBehaviorId(annotation, renderer) {
+	if ("behavior" in renderer) return renderer.behavior;
+	return registered.get(annotation)?.get(renderer)?.id ?? null;
+}
+/** The first of your looks that draws this annotation, or `null`. */
+function lookRendererFor(record, renderers) {
+	return renderers?.find((renderer) => isLook(renderer) && renderer.for(record)) ?? null;
+}
+/**
+* The drawing an annotation gets. Ownership beats looks: an engaged
+* behavior's renderer is authoritative; `for` rules apply only to what the
+* layer owns, and draw without the pointer. `typing` is whether this
+* annotation's text box is being typed in.
+*/
+function annotationDrawingOf(record, annotation, renderers, typing) {
+	const behavior = annotation.getBehaviorFor(record);
+	if (behavior) {
+		const entry = renderers?.find((renderer) => rendererBehaviorId(annotation, renderer) === behavior.id);
+		if (entry && "behavior" in entry) return {
+			kind: "owned",
+			entry
+		};
+		if (entry) return {
+			kind: "look",
+			entry,
+			interactive: true,
+			inert: false
+		};
+		return {
+			kind: "native",
+			inert: true
+		};
+	}
+	const look = lookRendererFor(record, renderers);
+	if (!look) return {
+		kind: "native",
+		inert: false
+	};
+	return {
+		kind: "look",
+		entry: look,
+		interactive: false,
+		inert: !typing
+	};
+}
+/**
+* The key of the text box being typed in (the one that is `editing` and has a
+* ref), or `null`. An annotation with this key is `typing` for
+* {@link annotationDrawingOf}: while it is, a look's own editor takes the keys.
+*/
+function editingTextKeyOf(texts, keyOf) {
+	const editing = texts.find((text) => text.editing && text.ref !== null);
+	return editing?.ref ? keyOf(editing.ref) : null;
+}
+/**
+* The text boxes the layer draws itself: all of them but the ones whose
+* annotation a look of yours draws, which that look edits with its own editor
+* (a renderer's rich text editor). `items` are the page's render items, which
+* carry each annotation; the same array comes back when there is no look.
+*/
+function layerTextBoxesOf(texts, items, renderers, keyOf) {
+	const looks = renderers?.filter((renderer) => isLook(renderer)) ?? [];
+	if (looks.length === 0) return texts;
+	const annotations = /* @__PURE__ */ new Map();
+	for (const item of items) if (item.ref !== null && item.annotation) annotations.set(keyOf(item.ref), item.annotation);
+	return texts.filter((text) => {
+		const annotation = text.ref !== null ? annotations.get(keyOf(text.ref)) : void 0;
+		return !annotation || lookRendererFor(annotation, looks) === null;
+	});
+}
+//#endregion
+//#region src/object-urls.ts
+/** An object URL for bytes. Revoke it when nothing shows it any more. */
+function objectUrlOf(picture) {
+	const body = new ArrayBuffer(picture.bytes.byteLength);
+	new Uint8Array(body).set(picture.bytes);
+	const blob = new Blob([body], picture.mimeType ? { type: picture.mimeType } : {});
+	const url = URL.createObjectURL(blob);
+	return {
+		url,
+		revoke: () => URL.revokeObjectURL(url)
+	};
+}
+/**
+* Load a picture and hand its object URL to `onUrl` once it's there (nothing
+* for `null`). What it returns cancels: a load still running is dropped, and
+* the URL is revoked. Keep showing the previous URL until `onUrl` brings the
+* next one, so a swap never flickers.
+*/
+function loadObjectUrl(load, onUrl) {
+	let cancelled = false;
+	let made = null;
+	load().then((picture) => {
+		if (cancelled || !picture) return;
+		made = objectUrlOf(picture);
+		onUrl(made.url);
+	});
+	return () => {
+		cancelled = true;
+		made?.revoke();
+	};
+}
+/** A picture's key: its item's key and the state it draws. */
+const pictureKey = (itemKey, state) => `${itemKey}|${state ?? ""}`;
+/**
+* The picture an item shows, from {@link loadAppearanceUrls}: the one of the
+* state it's in (`'Off'` when it names none), or its only picture when it has
+* no states; `null` until it's loaded.
+*/
+function shownAppearance(urls, itemKey, appearanceState) {
+	return urls[pictureKey(itemKey, appearanceState ?? "Off")] ?? urls[pictureKey(itemKey, null)] ?? null;
+}
+/**
+* The engine's picture of an annotation as a renderer gets it (its
+* `appearance`): `{ url }` once {@link loadAppearanceUrls} has loaded the one
+* of the state it shows, else `null`.
+*/
+function bakedAppearanceOf(urls, itemKey, appearanceState) {
+	const baked = shownAppearance(urls, itemKey, appearanceState);
+	return baked ? { url: baked.url } : null;
+}
+/** What a layer shows, for {@link loadAppearanceUrls}. */
+function createShownUrls() {
+	let shown = [];
+	const holder = {
+		replace(revokers) {
+			const before = shown;
+			shown = revokers;
+			before.forEach((revoke) => revoke());
+		},
+		release: () => holder.replace([])
+	};
+	return holder;
+}
+/**
+* Load a page's pictures, every state of every item, and hand their URLs to
+* `onLoaded` once all of them are there; the set `shown` held before is
+* revoked then. {@link shownAppearance} picks an item's: a check box that
+* changes shows its other picture at once. What it returns cancels: the load
+* is aborted and the URLs it made are revoked, unless it already handed them
+* over. Start it again when the page's appearance epoch or the appearance
+* scale changes, never mid-gesture.
+*/
+function loadAppearanceUrls(shown, load, keyOf, onLoaded) {
+	return loadPictureUrls(shown, load, (picture) => pictureKey(keyOf(picture.ref), picture.state), onLoaded);
+}
+function loadPictureUrls(shown, load, keyOf, onLoaded) {
+	const controller = new AbortController();
+	/** The URLs this load made and hasn't handed over. */
+	let made = [];
+	const drop = () => {
+		made.forEach((revoke) => revoke());
+		made = [];
+	};
+	const urlOf = async (picture) => {
+		const url = await picture.image.objectUrl().abortWith(controller.signal);
+		if (controller.signal.aborted) {
+			url.revoke();
+			throw controller.signal.reason;
+		}
+		made.push(url.revoke);
+		return url.url;
+	};
+	(async () => {
+		try {
+			const pictures = await load(controller.signal);
+			const minted = await Promise.all(pictures.map(urlOf));
+			if (controller.signal.aborted) return;
+			const urls = {};
+			pictures.forEach((picture, index) => {
+				urls[keyOf(picture)] = {
+					url: minted[index],
+					box: picture.rect,
+					version: picture.version
+				};
+			});
+			onLoaded(urls);
+			shown.replace(made);
+			made = [];
+		} catch {
+			controller.abort();
+			drop();
+		}
+	})();
+	return () => {
+		controller.abort();
+		drop();
+	};
+}
+//#endregion
+//#region src/comment-threads.ts
+/**
+* Each thread with its page's display index and label. A thread whose page
+* was just deleted reads `-1` and `'?'` for the one render before it goes.
+*/
+function enrichCommentThreads(threads, pages) {
+	const byPageObjectNumber = new Map(pages.map((page) => [page.ref.objectNumber, page]));
+	return threads.map((thread) => {
+		const page = byPageObjectNumber.get(thread.page.objectNumber);
+		return {
+			...thread,
+			pageIndex: page ? page.index : -1,
+			pageLabel: page ? page.label ?? String(page.index + 1) : "?"
+		};
+	});
+}
+//#endregion
+//#region src/form-field.ts
+/** The form settings as colors: an unset focus color is the accent, an unset edge the accent at 55%. */
+function formColorsOf(settings, accent) {
+	return {
+		focus: paint("form-focus", settings.focus.color ?? accent),
+		border: paint("form-field-border", settings.fields.border ?? mixAccent("form-field-border", accent)),
+		background: paint("form-field-background", settings.fields.background),
+		text: paint("form-field-color", settings.fields.color)
+	};
+}
+/** One of the 14 standard PDF fonts as CSS: a family that looks like it, its weight and style. */
+function cssFontOf(pdfFont) {
+	const name = pdfFont ?? "helvetica";
+	return {
+		fontFamily: name.startsWith("courier") ? "\"Courier New\", Courier, monospace" : name.startsWith("times") ? "\"Times New Roman\", Times, serif" : "Helvetica, Arial, sans-serif",
+		fontWeight: name.includes("bold") ? 700 : 400,
+		fontStyle: name.includes("italic") || name.includes("oblique") ? "italic" : "normal"
+	};
+}
+/** Pixels per page point where the widget is drawn. */
+const scaleOf = (field, frame) => field.box.width > 0 ? frame.width / field.box.width : 1;
+/**
+* A text field's editor style. A font size of 0 means "fit the box" in PDF:
+* the box height for one line, Acrobat's 12 pt for several.
+*/
+function textFieldStyleOf(field, frame, colors) {
+	const scale = scaleOf(field, frame);
+	const fontSize = field.look.fontSize ? field.look.fontSize * scale : field.multiline ? 12 * scale : Math.max(6, frame.height * .72);
+	return {
+		...cssFontOf(field.look.fontFamily),
+		fontSize: `${fontSize}px`,
+		textAlign: field.look.textAlign,
+		color: field.look.color ?? colors.text,
+		background: field.look.background ?? colors.background,
+		...field.comb && field.maxLength ? { letterSpacing: `${frame.width / field.maxLength / 2}px` } : {}
+	};
+}
+/** A list box's style: the field's own look, the settings where it has none (12 pt for a fitted size). */
+function listBoxStyleOf(field, frame, colors) {
+	const scale = scaleOf(field, frame);
+	return {
+		...cssFontOf(field.look.fontFamily),
+		fontSize: `${(field.look.fontSize || 12) * scale}px`,
+		textAlign: field.look.textAlign,
+		color: field.look.color ?? colors.text,
+		background: field.look.background ?? colors.background,
+		borderWidth: `${Math.max(1, field.look.borderWidth * scale)}px`,
+		borderStyle: field.look.borderStyle === "dashed" ? "dashed" : "solid",
+		borderColor: field.look.border ?? colors.border
+	};
+}
+/**
+* Send a widget's pointer and focus events (`/AA`: enter, exit, down, up,
+* focus, blur) to `notify`, from native listeners on the widget's box. Put
+* them on the always-active box, never on the control inside: "may edit this
+* field" and "may receive PDF action events" are different rights, and a
+* session that may not fill still sees hover tooltips. Focus is `focusin` and
+* `focusout`, so the control's focus reaches the box, and a blur arrives
+* after the control's own blur handler started its commit. Returns the
+* detach.
+*/
+function bindWidgetEvents(box, notify) {
+	const handlers = [
+		["pointerenter", "cursorEnter"],
+		["pointerleave", "cursorExit"],
+		["pointerdown", "mouseDown"],
+		["pointerup", "mouseUp"],
+		["focusin", "focus"],
+		["focusout", "blur"]
+	].map(([type, kind]) => {
+		const handler = () => notify(kind);
+		box.addEventListener(type, handler);
+		return [type, handler];
+	});
+	return () => handlers.forEach(([type, handler]) => box.removeEventListener(type, handler));
+}
+/**
+* A checkbox or radio button pressed: a checked checkbox clears, a radio
+* button always selects its own value. The value is written first, then the
+* widget's action runs (Acrobat's order), so an action script reads the new
+* state; a read-only toggle writes nothing and still runs its action.
+*/
+function pressToggle(form, toggle, activate) {
+	const written = toggle.disabled ? void 0 : form.setValue(toggle.fieldRef, { value: toggle.kind === "checkbox" && toggle.checked ? null : toggle.exportValue });
+	Promise.resolve(written).then(activate, activate);
+}
+/**
+* The editing policy of one text field: typing drafts, blur or Enter
+* commits, Escape discards. A commit keeps the typed text until the field
+* shows it (at once, as the form shows a fill before the engine answers), so
+* a blur never shows the old value for a moment. A value the form's
+* validation refuses stays typed, as in Acrobat; a write the engine refuses
+* puts the field's value back.
+*/
+function createTextFieldEditor(form, field, value) {
+	let state = {
+		focused: false,
+		draft: value
+	};
+	let fieldValue = value;
+	let cancelled = false;
+	/** The text of the commit on its way, until the field shows it or the commit settles. */
+	let committing = null;
+	const listeners = /* @__PURE__ */ new Set();
+	const set = (patch) => {
+		const next = {
+			...state,
+			...patch
+		};
+		if (next.focused === state.focused && next.draft === state.draft) return;
+		state = next;
+		listeners.forEach((listener) => listener());
+	};
+	const commit = (typed) => {
+		committing = typed;
+		const settled = (keepTyped) => {
+			if (committing !== typed) return;
+			committing = null;
+			if (!state.focused) set({ draft: keepTyped ? typed : fieldValue });
+		};
+		form.commitDraftText(field).then((result) => settled(result?.status === "rejected"), () => settled(false));
+	};
+	return {
+		getState: () => state,
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		setValue(next) {
+			fieldValue = next;
+			if (state.focused || committing !== null && next !== committing) return;
+			committing = null;
+			set({ draft: next });
+		},
+		focus: () => set({ focused: true }),
+		input(text) {
+			set({ draft: text });
+			form.draftText(field, text);
+		},
+		keyDown(key, multiline) {
+			if (key === "Escape") {
+				cancelled = true;
+				return true;
+			}
+			return key === "Enter" && !multiline;
+		},
+		blur() {
+			const typed = state.draft;
+			if (cancelled || typed === fieldValue) {
+				cancelled = false;
+				form.discardDraftText(field);
+				set({
+					focused: false,
+					draft: fieldValue
+				});
+				return;
+			}
+			commit(typed);
+			set({
+				focused: false,
+				draft: typed
+			});
+		}
+	};
+}
+/** A list box's optimistic selection, starting at the engine's. */
+function createOptimisticSelection(confirmed) {
+	let shown = [...confirmed];
+	let engine = confirmed;
+	let engineSignature = JSON.stringify(confirmed);
+	const listeners = /* @__PURE__ */ new Set();
+	const show = (values) => {
+		shown = [...values];
+		listeners.forEach((listener) => listener());
+	};
+	const rollback = () => show(engine);
+	return {
+		get: () => shown,
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		setConfirmed(values) {
+			engine = values;
+			const signature = JSON.stringify(values);
+			if (signature === engineSignature) return;
+			engineSignature = signature;
+			show(values);
+		},
+		choose(values, write) {
+			show(values);
+			try {
+				const result = write(values);
+				if (result) result.then(void 0, rollback);
+			} catch {
+				rollback();
+			}
+		}
+	};
+}
+/**
+* Show `values` as a native `<select>`'s selection, set on each option. A
+* `value` binding can't hold several values, and setting the options also
+* puts a choice back when its write fails before the framework renders
+* again. Setting the same selection again changes nothing the user sees,
+* scroll position included.
+*/
+function showSelectedOptions(select, values) {
+	for (const option of Array.from(select.options)) option.selected = values.includes(option.value);
+}
+//#endregion
+//#region src/form-styles.ts
+/**
+* The styles of the form layer's elements, the same in every framework: the
+* box over each widget, the text field's editor, the list box and the focus
+* ring. Each is a style record (camelCase names, lengths with their units),
+* the shape a style object takes in React, Vue and Angular; Svelte writes one
+* as CSS text with `cssText`. Each is a type alias, so it fits Vue's
+* `CSSProperties` (see the note in `form-field`). The field's own look inside them comes from
+* `form-field` ({@link textFieldStyleOf}, {@link listBoxStyleOf}); its colors
+* from the form settings ({@link formColorsOf}).
+*/
+/** A control that fills the widget's box it sits in: every native control the layer draws. */
+const FORM_CONTROL_FILL = Object.freeze({
+	position: "absolute",
+	inset: "0",
+	width: "100%",
+	height: "100%",
+	boxSizing: "border-box",
+	margin: "0"
+});
+/**
+* The style of a widget's box at `frame` (the widget's box in the page
+* layer's pixels). `edge: false` leaves the edge out, for a control that draws
+* its own (a list box) or never has one (a button).
+*/
+function widgetBoxStyleOf(widget, frame, colors, { edge = true } = {}) {
+	return {
+		position: "absolute",
+		left: `${frame.left}px`,
+		top: `${frame.top}px`,
+		width: `${frame.width}px`,
+		height: `${frame.height}px`,
+		pointerEvents: "auto",
+		...edge && widget.look.border === null ? { boxShadow: `inset 0 0 0 1px ${colors.border}` } : {}
+	};
+}
+/**
+* The style of a text field's editor, the `<input>` or `<textarea>` that is
+* always there: focused, it shows the field's text in its own font with a
+* focus ring; at rest it is see-through over the field's picture. A disabled
+* control would swallow clicks, and the box below runs the widget's action
+* (the read-only "button" pattern), so a disabled one lets them through.
+*
+* With the engine's `layout` of the text being typed, the editor writes it
+* where the engine will draw it: in the engine's face (mounted), at the size
+* it draws (a fitted size resolved), in the box inside the border, a line of
+* the face's height (one line centred, as the engine centres it).
+*/
+function textFieldEditorStyleOf(field, frame, colors, focused, layout = null) {
+	const scale = scaleOf(field, frame);
+	const pixels = (points) => `${points * scale}px`;
+	return {
+		...FORM_CONTROL_FILL,
+		border: "none",
+		outline: focused ? `2px solid ${colors.focus}` : "none",
+		outlineOffset: "-2px",
+		padding: "0 2px",
+		...textFieldStyleOf(field, frame, colors),
+		...layout ? {
+			fontFamily: layout.fontFamily,
+			fontWeight: layout.fontWeight,
+			fontStyle: layout.fontStyle,
+			fontSize: pixels(layout.fontSize),
+			lineHeight: pixels(layout.lineHeight),
+			padding: [
+				layout.padding.top,
+				layout.padding.right,
+				layout.padding.bottom,
+				layout.padding.left
+			].map(pixels).join(" "),
+			...layout.comb ? {
+				letterSpacing: pixels(layout.letterSpacing),
+				textAlign: "left"
+			} : {}
+		} : {},
+		resize: "none",
+		cursor: "text",
+		opacity: focused ? 1 : 0,
+		...field.disabled ? { pointerEvents: "none" } : {}
+	};
+}
+/**
+* The style of a list box's `<select>`, filling the widget's box: the field's
+* own look ({@link listBoxStyleOf}) with its own border, so the box adds no
+* edge. The focus ring is drawn above it ({@link formFocusRingStyleOf}).
+*/
+function listBoxControlStyleOf(field, frame, colors) {
+	return {
+		...FORM_CONTROL_FILL,
+		padding: "0",
+		borderRadius: "0",
+		outline: "none",
+		...listBoxStyleOf(field, frame, colors),
+		cursor: field.disabled ? "default" : "pointer",
+		...field.disabled ? { pointerEvents: "none" } : {}
+	};
+}
+/**
+* The style of a field's focus ring in `color` (the form's focus color): an
+* element of its own above the field's picture and its control. An outline on
+* the box would sit under an opaque child, so a rectangular checkbox or a
+* dropdown would look unfocused while it has the focus.
+*/
+function formFocusRingStyleOf(color) {
+	return {
+		position: "absolute",
+		inset: "0",
+		zIndex: 1,
+		boxSizing: "border-box",
+		outline: `2px solid ${color}`,
+		outlineOffset: "-2px",
+		pointerEvents: "none"
+	};
+}
+//#endregion
+//#region src/link-anchor.ts
+/**
+* A page link's anchor: which links a page layer shows, where each anchor
+* sits and what it does natively. Links are real `<a>` elements on purpose: a website
+* link gets an `href` (middle-click, copy link, the status-bar preview and
+* keyboard focus come free); every other click follows the link through the
+* link plugin's `activate()`. The plugin's link type is mirrored
+* structurally, so this package stays free of EmbedPDF imports.
+*/
+/**
+* The links a page layer shows anchors for. One owner per pixel: while the
+* active tool edits annotations, a link attached to an annotation stands
+* down so its parent can be selected and moved; a document's own links
+* navigate under every tool that enables link navigation.
+*/
+function navigableLinksOf(links, annotationEditEnabled) {
+	return annotationEditEnabled ? links.filter((link) => !link.attached) : links;
+}
+/**
+* The anchor's native `href`: only for a website the browser may open and
+* nothing chained after it. Blocked schemes, targets inside the document and
+* action chains activate through the plugin instead: a native navigation
+* would run the first action and silently drop the rest.
+*/
+function linkHrefOf(link) {
+	const chained = (link.activate?.root?.next.length ?? 0) > 0;
+	if (link.target.kind !== "uri" || chained || link.target.uri === void 0) return null;
+	return sanitizeExternalUri(link.target.uri);
+}
+/**
+* The anchor for `link` on a page layer: its box from the link's `bounds`,
+* its `href`, and the label `labelOf` (the link plugin's `getLabel`) gives it.
+*/
+function linkAnchorOf(link, page, labelOf) {
+	return {
+		link,
+		box: rectInPixels(link.bounds, page),
+		href: linkHrefOf(link),
+		label: labelOf(link)
+	};
+}
+/**
+* Whether a click on an anchor with an `href` stays the browser's: a click
+* with a modifier key opens a background tab or a new window. Every other
+* click is prevented and follows the link through the plugin.
+*/
+function isModifiedClick(event) {
+	return event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+}
+//#endregion
+//#region src/link-events.ts
+/**
+* The context a click or a key follows `link` with: its `/A` tree (the
+* actions plugin runs it instead of the target), the annotation it is, its
+* page, and the view it was followed in (a page destination moves that one).
+*/
+function linkActivateContextOf(link, page, stage) {
+	return {
+		activate: link.activate,
+		ref: link.ref,
+		page,
+		...stage ? { stage } : {}
+	};
+}
+/**
+* Send `link`'s own event for a press, a release or a focus change: only for
+* a link that is an annotation, and only with the actions plugin.
+*/
+function sendLinkEvent(actions, link, page, event) {
+	if (!actions || !link.ref) return;
+	const source = {
+		kind: "link",
+		annotation: link.ref,
+		page
+	};
+	actions.dispatch({
+		scope: "annotation",
+		event,
+		ref: link.ref,
+		page,
+		source
+	});
+}
+/**
+* Tell the layer's hover pump the pointer entered `link`: only a link that is
+* an annotation with hover trees has enter and exit events. Leaving is
+* `pump.hover(null)`.
+*/
+function hoverLink(pump, link, page) {
+	if (!pump || !link.ref || !link.hoverEvents) return;
+	pump.hover({
+		ref: link.ref,
+		page,
+		source: {
+			kind: "link",
+			annotation: link.ref,
+			page
+		},
+		events: link.hoverEvents
+	});
+}
+//#endregion
+//#region src/search-highlights.ts
+/**
+* A search layer's paint: each line of each match on a page, as a piece to
+* draw in the page layer's pixels. An upright line is a box (a positioned
+* element with rounded corners); a turned one is its true quad (an SVG
+* polygon). The active match's lines take the active color. The plugin's hit
+* is mirrored structurally, so this package stays free of EmbedPDF imports.
+*/
+/** Every line of `hits` as a piece to draw, in hit order. */
+function searchHighlightsOf(hits, options) {
+	const { page } = options;
+	return hits.flatMap((hit) => hit.segments.map(({ quad }, line) => {
+		const active = hit === options.active;
+		const fill = active ? options.activeColor : options.color;
+		const key = `${hit.start}:${line}`;
+		if (!isUprightQuad(quad)) return {
+			key,
+			hit,
+			active,
+			fill,
+			box: null,
+			points: svgPoints(quadInPixels(quad, page))
+		};
+		const topLeft = page.toPixels(quad.upperLeft);
+		const bottomRight = page.toPixels(quad.lowerRight);
+		return {
+			key,
+			hit,
+			active,
+			fill,
+			box: {
+				left: topLeft.x,
+				top: topLeft.y,
+				width: bottomRight.x - topLeft.x,
+				height: bottomRight.y - topLeft.y
+			},
+			points: null
+		};
+	}));
+}
+//#endregion
+//#region src/press-click.ts
+/**
+* Telling a click from a drag on something drawn over a page (a search
+* match). The press still reaches the page, so a drag that starts there
+* selects text; only a press that stays put counts as a click.
+*/
+/**
+* How far (CSS px) a press may travel and still count as a click. A mouse or
+* pen press that travels 4 px starts selecting text (the selection plugin's
+* default drag threshold); a finger wobbles more on its own, and the Stage
+* treats a touch that stays within 10 px as a tap.
+*/
+const CLICK_SLOP_PX = {
+	mouse: 4,
+	pen: 4,
+	touch: 10
+};
+function createClickDetector() {
+	let started = null;
+	return {
+		press(event) {
+			started = {
+				x: event.clientX,
+				y: event.clientY,
+				slop: CLICK_SLOP_PX[event.pointerType] ?? CLICK_SLOP_PX.mouse
+			};
+		},
+		isClick(event) {
+			const start = started;
+			started = null;
+			return !start || Math.hypot(event.clientX - start.x, event.clientY - start.y) < start.slop;
+		}
+	};
+}
+//#endregion
+//#region src/page-projector.ts
+/**
+* A client-space projector for one page. `mounted` says whether the page
+* element is in the document yet: until it is, every projection is `null`,
+* and the anchored UI waits for the first measurable pass. The view is the
+* window. Pair it with {@link observeClientGeometry}, which reports the
+* browser-driven moves (document scroll, window resize) no state announces.
+* Every member reads `page` when it runs, so a page context whose members
+* change keeps one projector.
+*/
+function clientPageProjector(page, mounted) {
+	const isThisPage = (other) => other.objectNumber === page.ref.objectNumber;
+	const transformOf = () => typeof page.transform === "function" ? page.transform() : page.transform;
+	return {
+		space: "client",
+		toScreen: (other, rect) => isThisPage(other) && mounted() ? page.toClientRect(rect) : null,
+		toScreenPoint: (other, at) => isThisPage(other) && mounted() ? page.toClientPoint(at) : null,
+		viewEnv: (other) => {
+			if (!isThisPage(other)) return null;
+			const transform = transformOf();
+			return {
+				scale: transform.viewScale,
+				rotation: transform.rotation,
+				zoom: transform.zoom
+			};
+		},
+		view: () => typeof document === "undefined" ? null : {
+			x: 0,
+			y: 0,
+			width: document.documentElement.clientWidth,
+			height: document.documentElement.clientHeight
+		}
+	};
+}
+/**
+* The Stage's projector: anchored UI positions through the camera, in the Stage's own box
+* (`'overlay'` space). `stage()` gives the lens when a projection runs, or null without one
+* (nothing projects then). It reads only the Stage's state, so the binding's revision (the
+* visible pages) is what tells anchored UI to place itself again, in the same render as the
+* pages.
+*/
+function stageViewProjector(stage) {
+	return {
+		space: "overlay",
+		toScreen: (page, rect) => stage()?.pageRectToViewport(page, rect) ?? null,
+		toScreenPoint: (page, at) => {
+			const rect = stage()?.pageRectToViewport(page, {
+				x: at.x,
+				y: at.y,
+				width: 0,
+				height: 0
+			});
+			return rect ? {
+				x: rect.x,
+				y: rect.y
+			} : null;
+		},
+		viewEnv: (page) => {
+			const transform = stage()?.getPageFrame(page)?.transform;
+			return transform ? {
+				scale: transform.viewScale,
+				rotation: transform.rotation,
+				zoom: transform.zoom
+			} : null;
+		},
+		view: () => {
+			const size = stage()?.getViewportSize();
+			return size && size.width > 0 && size.height > 0 ? {
+				x: 0,
+				y: 0,
+				...size
+			} : null;
+		}
+	};
+}
+//#endregion
+//#region src/page-context.ts
+/**
+* The client-space conversions of a page whose content box `box()` measures on screen when a
+* conversion runs: client pixels to box-local view pixels, then the transform undoes the turn
+* and the scale. `toPagePoint` and `toClientPoint` read the same live box, so they never drift.
+*/
+function pageClientSpace(transform, box) {
+	return {
+		toPagePoint: (clientX, clientY) => {
+			const origin = box();
+			return transform().viewToPage({
+				x: clientX - origin.left,
+				y: clientY - origin.top
+			});
+		},
+		toClientPoint: (point) => {
+			const origin = box();
+			const viewPoint = transform().pageToView(point);
+			return {
+				x: origin.left + viewPoint.x,
+				y: origin.top + viewPoint.y
+			};
+		},
+		toClientRect: (rect) => {
+			const origin = box();
+			const viewRect = transform().pageToViewRect(rect);
+			return {
+				x: origin.left + viewRect.x,
+				y: origin.top + viewRect.y,
+				width: viewRect.width,
+				height: viewRect.height
+			};
+		}
+	};
+}
+/**
+* Build a page context. `getRect` is the page's content box on screen (the turned content
+* element's bounding box), read when a conversion runs.
+*/
+function makePageContext(documentId, view, ref, pageIndex, frame, transform, getRect, getViewDemand) {
+	return {
+		documentId,
+		view,
+		ref,
+		pageIndex,
+		frame,
+		transform,
+		...getViewDemand ? { getViewDemand } : {},
+		...pageClientSpace(() => transform, getRect)
+	};
+}
+/**
+* A page context that reads every member through `current()`: the same object for a surface's
+* lifetime, current in what it answers. For an adapter whose layers keep the object they were
+* given once (a Svelte component reads `page.transform` in a template and follows the zoom).
+*/
+function livePageContext(current) {
+	return {
+		get documentId() {
+			return current().documentId;
+		},
+		get ref() {
+			return current().ref;
+		},
+		get pageIndex() {
+			return current().pageIndex;
+		},
+		get frame() {
+			return current().frame;
+		},
+		get transform() {
+			return current().transform;
+		},
+		get view() {
+			return current().view;
+		},
+		get getViewDemand() {
+			return current().getViewDemand;
+		},
+		toPagePoint: (clientX, clientY) => current().toPagePoint(clientX, clientY),
+		toClientPoint: (point) => current().toClientPoint(point),
+		toClientRect: (rect) => current().toClientRect(rect)
+	};
+}
+//#endregion
+//#region src/page-layers.ts
+/** Every answer `painted()` gives, one object each, so the same answer is the same object. */
+const ANSWERS = [false, true].map((annotations) => [false, true].map((formFields) => Object.freeze({
+	annotations,
+	formFields
+})));
+const pages = /* @__PURE__ */ new WeakMap();
+/** The layers of one page surface, by the page ref it hands its layers. */
+function pageLayersOf(pageRef) {
+	let layers = pages.get(pageRef);
+	if (!layers) {
+		layers = createPageLayers();
+		pages.set(pageRef, layers);
+	}
+	return layers;
+}
+function createPageLayers() {
+	const painters = {
+		annotations: 0,
+		formFields: 0
+	};
+	const listeners = /* @__PURE__ */ new Set();
+	let painted = ANSWERS[0][0];
+	let notifying = false;
+	const update = () => {
+		const next = ANSWERS[painters.annotations > 0 ? 1 : 0][painters.formFields > 0 ? 1 : 0];
+		if (next === painted) return;
+		painted = next;
+		if (notifying) return;
+		notifying = true;
+		queueMicrotask(() => {
+			notifying = false;
+			listeners.forEach((listener) => listener());
+		});
+	};
+	return {
+		paint(part) {
+			painters[part] += 1;
+			update();
+			let released = false;
+			return () => {
+				if (released) return;
+				released = true;
+				painters[part] -= 1;
+				update();
+			};
+		},
+		painted: () => painted,
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		}
+	};
+}
+/**
+* What the page's picture draws, as the render plugin's layer options: a part
+* the props name is drawn or left out as they say; any other part is drawn
+* when no layer on the page paints it and the user may read it. Both are
+* always given, so a picture that leaves the annotations to a layer still
+* draws the form fields.
+*/
+function pictureLayerOptionsOf(painted, props, may) {
+	return {
+		includeAnnotations: props.annotations ?? (!painted.annotations && may.annotations),
+		includeFormFields: props.formFields ?? (!painted.formFields && may.formFields)
+	};
+}
+/**
+* The parts a picture draws that a layer on the page paints too, because the
+* props asked for them: drawn twice.
+*/
+function partsDrawnTwice(painted, props) {
+	const twice = [];
+	if (props.annotations === true && painted.annotations) twice.push("annotations");
+	if (props.formFields === true && painted.formFields) twice.push("formFields");
+	return twice;
+}
+//#endregion
+//#region src/page-surface.ts
+/**
+* Lay out a page surface. `footprint` is where the page's footprint sits in the surface's
+* parent (a Stage page's device-snapped `screenX`/`screenY`); the outer box sits one band further
+* out, so the content keeps its place. Without it the outer box is at 0, 0 (a `PageView`, placed
+* by the page around it).
+*/
+function pageSurfaceLayout(transform, frame, footprint) {
+	const { viewWidth, viewHeight, contentWidth, contentHeight, rotation } = transform;
+	return {
+		outer: {
+			left: footprint ? footprint.x - frame.left : 0,
+			top: footprint ? footprint.y - frame.top : 0,
+			width: viewWidth + frame.left + frame.right,
+			height: viewHeight + frame.top + frame.bottom
+		},
+		shadow: {
+			left: frame.left,
+			top: frame.top,
+			width: viewWidth,
+			height: viewHeight
+		},
+		content: {
+			left: frame.left + (viewWidth - contentWidth) / 2,
+			top: frame.top + (viewHeight - contentHeight) / 2,
+			width: contentWidth,
+			height: contentHeight
+		},
+		turn: rotation ? `rotate(${rotation}deg)` : null
+	};
+}
+/**
+* What a Stage page's view wants rendered, read live from the Stage when the render layer asks:
+* the page's visible part at its device width, or a zero box (want nothing) while the page is
+* off screen, at `offScreenDeviceWidth`. Visibility is the Stage's data, so no adapter derives
+* camera math or keeps a copy of it.
+*/
+function stagePageDemand(stage, pageObjectNumber, offScreenDeviceWidth) {
+	const visible = stage.listVisiblePages().find((visiblePage) => visiblePage.ref.objectNumber === pageObjectNumber);
+	return visible ? {
+		desiredDeviceWidth: visible.transform.deviceWidth,
+		visibleRect: visible.visibleRect
+	} : {
+		desiredDeviceWidth: offScreenDeviceWidth,
+		visibleRect: {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		}
+	};
+}
+/** One CSS pixel per 1/96 inch, one PDF point per 1/72 inch. */
+const CSS_PIXELS_PER_POINT = 96 / 72;
+/**
+* What a `PageView` builds its page transform from: no camera, so the scale (view pixels per
+* point) is `width` over the page's width. The base scale is physical 100% on the web, a point
+* at 96/72 CSS pixels times the page's /UserUnit, so `transform.zoom` still means something: a
+* thumbnail-sized page reads as zoomed out. Without a page yet, a 1 × 1 placeholder.
+*/
+function pageViewTransformInput(page, width, dpr) {
+	return {
+		pageSize: page ? {
+			width: page.size.width,
+			height: page.size.height
+		} : {
+			width: 1,
+			height: 1
+		},
+		rotation: page?.rotation ?? 0,
+		scale: page ? width / page.size.width : 1,
+		baseScale: CSS_PIXELS_PER_POINT * (page?.userUnit ?? 1),
+		dpr
+	};
+}
+//#endregion
+//#region src/page-pointer.ts
+/**
+* A multi-click counter. `pointerdown.detail` is 0 or 1 in several browsers, so clicks are
+* counted here from timing and distance: the standard double and triple click. Input is
+* normalized in the adapter; the hub and its handlers stay pure.
+*/
+function createClickCounter(maxGapMs = 400, maxDistancePx = 6) {
+	let last = 0;
+	let lastX = 0;
+	let lastY = 0;
+	let count = 0;
+	return (now, x, y) => {
+		count = now - last <= maxGapMs && Math.hypot(x - lastX, y - lastY) <= maxDistancePx ? count + 1 : 1;
+		last = now;
+		lastX = x;
+		lastY = y;
+		return count;
+	};
+}
+/**
+* Listen to the pointer on `element` for the page `page()` gives when an event arrives (a zoom
+* changes it, and a drag carries on through it), and dispatch every event to `hub`. A press
+* starts on the element; while it lasts the window listens, so a drag goes on outside the page.
+* Returns the function that stops listening.
+*/
+function attachPagePointer(element, hub, page) {
+	const clicks = createClickCounter();
+	const sample = (phase, event, clickCount = 1) => {
+		const current = page();
+		const rect = element.getBoundingClientRect();
+		return {
+			phase,
+			viewport: {
+				x: event.clientX - rect.left,
+				y: event.clientY - rect.top
+			},
+			page: {
+				ref: current.ref,
+				point: current.toPagePoint(event.clientX, event.clientY),
+				scale: current.transform.viewScale,
+				rotation: current.transform.rotation,
+				zoom: current.transform.zoom
+			},
+			project: (target) => target.kind === current.ref.kind && target.objectNumber === current.ref.objectNumber ? current.toPagePoint(event.clientX, event.clientY) : null,
+			modifiers: {
+				shift: event.shiftKey,
+				alt: event.altKey,
+				ctrl: event.ctrlKey,
+				meta: event.metaKey
+			},
+			clickCount,
+			pointerType: event.pointerType || "mouse"
+		};
+	};
+	let dragging = false;
+	const down = (event) => {
+		if (event.button !== 0) return;
+		dragging = true;
+		hub.dispatchPointer(sample("down", event, clicks(Date.now(), event.clientX, event.clientY)));
+	};
+	const hover = (event) => {
+		if (dragging) return;
+		hub.dispatchPointer(sample("move", event));
+	};
+	const drag = (event) => {
+		if (!dragging) return;
+		hub.dispatchPointer(sample("move", event));
+	};
+	const up = (event) => {
+		if (!dragging) return;
+		dragging = false;
+		hub.dispatchPointer(sample("up", event));
+	};
+	element.addEventListener("pointerdown", down);
+	element.addEventListener("pointermove", hover);
+	window.addEventListener("pointermove", drag);
+	window.addEventListener("pointerup", up);
+	return () => {
+		element.removeEventListener("pointerdown", down);
+		element.removeEventListener("pointermove", hover);
+		window.removeEventListener("pointermove", drag);
+		window.removeEventListener("pointerup", up);
+	};
+}
+//#endregion
+//#region src/scrollbar.ts
+/**
+* The thumb from the metrics and the track's length: one formula for drawing, dragging and
+* paging, so they never disagree. The thumb never gets shorter than `minThumbSize`, and its
+* position stays proportional over the travel that leaves.
+*/
+function scrollbarLayout(metrics, vertical, trackPx, minThumbSize) {
+	const client = vertical ? metrics.clientHeight : metrics.clientWidth;
+	const total = vertical ? metrics.scrollHeight : metrics.scrollWidth;
+	const offset = vertical ? metrics.scrollTop : metrics.scrollLeft;
+	const maxOffset = Math.max(0, total - client);
+	const thumbLength = Math.min(trackPx, Math.max(minThumbSize, total > 0 ? client / total * trackPx : 0));
+	const travel = Math.max(0, trackPx - thumbLength);
+	return {
+		client,
+		offset,
+		maxOffset,
+		thumbLength,
+		travel,
+		thumbPosition: maxOffset > 0 ? offset / maxOffset * travel : 0
+	};
+}
+const clamp01 = (value) => Math.min(1, Math.max(0, value));
+/**
+* Pointer capture where the browser allows it: a pointer already released (a pen or touch race,
+* a synthetic event in a test) throws, and the press must still work, only without capture.
+*/
+const capturePointer = (element, pointerId) => {
+	try {
+		element.setPointerCapture(pointerId);
+	} catch {}
+};
+/** The pointer's position along the track, in pixels from its start. */
+const positionOnTrack = (event, track) => {
+	const rect = track.element.getBoundingClientRect();
+	return track.vertical ? event.clientY - rect.top : event.clientX - rect.left;
+};
+/**
+* One scrollbar's press handling. `onDragging` hears when a drag starts and ends, for the bar's
+* `data-dragging` and to keep it shown.
+*/
+function createScrollbarPresses(onDragging) {
+	let drag = null;
+	let paging = null;
+	let lastPointer = 0;
+	const stopPaging = () => {
+		if (!paging) return;
+		clearTimeout(paging.timer);
+		clearInterval(paging.timer);
+		paging = null;
+	};
+	const beginDrag = (grab, applied, layout) => {
+		drag = {
+			grab,
+			applied,
+			max: layout.maxOffset,
+			travel: layout.travel
+		};
+		onDragging(true);
+	};
+	return {
+		pressThumb(event, track) {
+			if (event.button !== 0) return;
+			event.preventDefault();
+			event.stopPropagation();
+			capturePointer(event.target, event.pointerId);
+			const layout = track.layout;
+			beginDrag(positionOnTrack(event, track) - layout.thumbPosition, layout.offset, layout);
+		},
+		pressTrack(event, track, mode) {
+			if (event.button !== 0 || event.target !== event.currentTarget) return;
+			event.preventDefault();
+			capturePointer(event.currentTarget, event.pointerId);
+			const position = lastPointer = positionOnTrack(event, track);
+			const { layout, stage, vertical } = track;
+			if (mode === "jump") {
+				const wanted = layout.travel > 0 ? clamp01((position - layout.thumbLength / 2) / layout.travel) * layout.maxOffset : 0;
+				stage.scrollTo(vertical ? { top: wanted } : { left: wanted });
+				beginDrag(layout.thumbLength / 2, wanted, layout);
+				return;
+			}
+			const direction = position < layout.thumbPosition ? -1 : 1;
+			const step = () => {
+				const live = track.liveLayout();
+				if (direction === 1 ? lastPointer <= live.thumbPosition + live.thumbLength : lastPointer >= live.thumbPosition) {
+					stopPaging();
+					return;
+				}
+				const distance = direction * live.client * .9;
+				stage.scrollBy(vertical ? { top: distance } : { left: distance });
+			};
+			step();
+			paging = { timer: window.setTimeout(() => {
+				if (paging) paging.timer = window.setInterval(step, 80);
+			}, 350) };
+		},
+		move(event, track) {
+			if (drag) {
+				if (drag.travel <= 0) return;
+				const wanted = clamp01((positionOnTrack(event, track) - drag.grab) / drag.travel) * drag.max;
+				const delta = wanted - drag.applied;
+				if (delta) {
+					track.stage.panBy(track.vertical ? 0 : -delta, track.vertical ? -delta : 0);
+					drag.applied = wanted;
+				}
+			} else if (paging) lastPointer = positionOnTrack(event, track);
+		},
+		release() {
+			drag = null;
+			stopPaging();
+			onDragging(false);
+		}
+	};
+}
+//#endregion
+//#region src/toolbar-measure.ts
+/** The keys the measurement layer reports lengths under, the ones the metrics look up. */
+const toolbarMeasureKey = {
+	/** A unit (`NormalizedUnit.key`) at one variant. */
+	unit: (unitKey, variant) => `u:${unitKey}@${variant}`,
+	/** A group in its collapsed form. */
+	group: (groupId) => `g:${groupId}`,
+	/** A shed group's disclosure trigger, measured with the whole group behind it. */
+	groupTrigger: (groupId) => `gt:${groupId}`,
+	/** The "More" button. */
+	overflowTrigger: "t:"
+};
+function createToolbarLengths() {
+	const byOrientation = {
+		horizontal: /* @__PURE__ */ new Map(),
+		vertical: /* @__PURE__ */ new Map()
+	};
+	return {
+		report(orientation, key, length) {
+			const lengths = byOrientation[orientation];
+			const previous = lengths.get(key);
+			if (previous !== void 0 && Math.abs(previous - length) <= .5) return false;
+			lengths.set(key, length);
+			return true;
+		},
+		metrics(orientation, gap, separatorWidth) {
+			const lengths = byOrientation[orientation];
+			return {
+				unit: (key, variant) => lengths.get(toolbarMeasureKey.unit(key, variant)),
+				groupCollapsed: (groupId) => lengths.get(toolbarMeasureKey.group(groupId)),
+				groupTrigger: (groupId) => lengths.get(toolbarMeasureKey.groupTrigger(groupId)),
+				overflowTrigger: lengths.get(toolbarMeasureKey.overflowTrigger) ?? 32,
+				gap,
+				separator: separatorWidth + gap
+			};
+		}
+	};
+}
+/** Report one side of an element's border box now and whenever it resizes. */
+function observeBorderBox(element, side, onLength) {
+	const report = () => onLength(element.getBoundingClientRect()[side]);
+	report();
+	const observer = new ResizeObserver(report);
+	observer.observe(element);
+	return () => observer.disconnect();
+}
+/**
+* Report an element's width (its border box) now and whenever it resizes. Put
+* it on every element of a horizontal toolbar's measurement layer, and on a
+* custom slot's `<slot>` socket, which is measured live where it renders.
+* Returns the detach.
+*/
+function observeWidth(element, onWidth) {
+	return observeBorderBox(element, "width", onWidth);
+}
+/** {@link observeWidth} for a vertical toolbar: an element's border-box height. */
+function observeHeight(element, onHeight) {
+	return observeBorderBox(element, "height", onHeight);
+}
+/** An element's length along a toolbar: {@link observeWidth} or {@link observeHeight}. */
+function observeLength(element, orientation, onLength) {
+	return observeBorderBox(element, orientation === "vertical" ? "height" : "width", onLength);
+}
+/** Report one side of an element's content box now, then on changes over half a pixel. */
+function observeContentBox(element, side, onLength) {
+	let last = side === "width" ? element.clientWidth : element.clientHeight;
+	onLength(last);
+	const observer = new ResizeObserver((entries) => {
+		const length = entries[entries.length - 1]?.contentRect[side];
+		if (length === void 0 || Math.abs(last - length) <= .5) return;
+		last = length;
+		onLength(length);
+	});
+	observer.observe(element);
+	return () => observer.disconnect();
+}
+/**
+* Report the width a toolbar has to fill (its content box) now and whenever
+* it changes by more than half a pixel. Returns the detach.
+*/
+function observeContentWidth(element, onWidth) {
+	return observeContentBox(element, "width", onWidth);
+}
+/**
+* The height a vertical toolbar has to fill, like {@link observeContentWidth}.
+* The toolbar fits the height it's given, so its container needs one.
+*/
+function observeContentHeight(element, onHeight) {
+	return observeContentBox(element, "height", onHeight);
+}
+/** The room along a toolbar: {@link observeContentWidth} or {@link observeContentHeight}. */
+function observeContentLength(element, orientation, onLength) {
+	return observeContentBox(element, orientation === "vertical" ? "height" : "width", onLength);
+}
+//#endregion
+//#region src/orientation.ts
+/** The writing direction an element lays out in: its computed CSS `direction`. */
+function directionOf(element) {
+	return element.ownerDocument.defaultView?.getComputedStyle(element).direction === "rtl" ? "rtl" : "ltr";
+}
+//#endregion
+//#region src/roving-focus.ts
+/**
+* One tab stop for a row of controls, and arrow keys along it (the ARIA
+* roving tabindex, as toolbars and tab lists use it): Tab enters the row at
+* the control that had focus last, else its first, and the arrows, Home and
+* End move between its controls. The arrows follow the row's orientation, Left and Right swap in
+* right-to-left text, a control that can't be used now is passed over, and a
+* control that uses an arrow key itself (a text field, a select) keeps it.
+*/
+/** The move `key` asks for in a row running `orientation`, or null for a key the row leaves alone. */
+function rovingMoveOf(key, orientation, direction) {
+	if (key === "Home") return "first";
+	if (key === "End") return "last";
+	if (orientation === "vertical") {
+		if (key === "ArrowDown") return "next";
+		if (key === "ArrowUp") return "previous";
+		return null;
+	}
+	const forward = direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+	const backward = direction === "rtl" ? "ArrowRight" : "ArrowLeft";
+	if (key === forward) return "next";
+	if (key === backward) return "previous";
+	return null;
+}
+/**
+* The index `move` lands on among `count` stops, from `current` (-1 for
+* none), passing over the stops `available` rejects. With `loop`, next and
+* previous wrap around the ends; without it they stop there. -1 when there is
+* nowhere to go.
+*/
+function rovingTargetOf(move, current, count, available, loop) {
+	if (move === "first" || move === "last") {
+		const step = move === "first" ? 1 : -1;
+		for (let i = move === "first" ? 0 : count - 1; i >= 0 && i < count; i += step) if (available(i)) return i;
+		return -1;
+	}
+	const step = move === "next" ? 1 : -1;
+	for (let taken = 1; taken <= count; taken += 1) {
+		let index = current + step * taken;
+		if (index < 0 || index >= count) {
+			if (!loop) return -1;
+			index = (index % count + count) % count;
+		}
+		if (index === current) return -1;
+		if (available(index)) return index;
+	}
+	return -1;
+}
+/**
+* Make the stops of `container` one tab stop with arrow keys between them.
+* Keys count only while a stop itself has focus, so keys inside a menu or
+* another control the row holds are theirs; a key with Alt, Control, Meta or
+* Shift, or one a handler already took (`defaultPrevented`), is left alone.
+*/
+function attachRovingFocus(container, options) {
+	const direction = options.direction ?? (() => directionOf(container));
+	const loop = options.loop ?? true;
+	/**
+	* The stop that had focus last. Until one has, the tab stop follows the
+	* first usable stop, wherever the row's first render put it.
+	*/
+	let used = null;
+	const giveTabStop = (stops) => {
+		const tabStop = used !== null && stops.includes(used) && !isUnavailable(used) ? used : stops.find((stop) => !isUnavailable(stop)) ?? null;
+		for (const stop of stops) {
+			const tabIndex = stop === tabStop ? 0 : -1;
+			if (stop.tabIndex !== tabIndex) stop.tabIndex = tabIndex;
+		}
+	};
+	const refresh = () => giveTabStop(options.stops());
+	const onKeyDown = (event) => {
+		if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+		const stops = options.stops();
+		const target = event.target;
+		const from = stops.indexOf(target);
+		if (from < 0 || usesKey(target, event.key)) return;
+		const move = rovingMoveOf(event.key, options.orientation, direction());
+		if (!move) return;
+		const to = rovingTargetOf(move, from, stops.length, (index) => !isUnavailable(stops[index]), loop);
+		if (to < 0) return;
+		event.preventDefault();
+		const next = stops[to];
+		used = next;
+		giveTabStop(stops);
+		next.focus();
+	};
+	const onFocusIn = (event) => {
+		const stops = options.stops();
+		const target = event.target;
+		if (!stops.includes(target)) return;
+		used = target;
+		giveTabStop(stops);
+	};
+	container.addEventListener("keydown", onKeyDown);
+	container.addEventListener("focusin", onFocusIn);
+	refresh();
+	return {
+		refresh,
+		detach() {
+			container.removeEventListener("keydown", onKeyDown);
+			container.removeEventListener("focusin", onFocusIn);
+		}
+	};
+}
+//#endregion
+//#region src/toolbar-focus.ts
+/**
+* A toolbar's keyboard: one tab stop, and arrow keys along the bar
+* ({@link attachRovingFocus}). Each item of the live row (a command, your own
+* item, a folded group, the "More" button) sits in an element marked with
+* {@link TOOLBAR_ITEM_ATTRIBUTE}, and the first element in it that takes focus
+* is the item's stop: the rest of a custom item's controls are its own.
+*/
+/** The attribute on the element around each item of a toolbar's live row. */
+const TOOLBAR_ITEM_ATTRIBUTE = "data-epdf-toolbar-item";
+/**
+* A toolbar's stops: the first element of each item that takes focus, in
+* order. A menu an item holds open is not part of its stop.
+*/
+function toolbarStopsOf(toolbar) {
+	const stops = [];
+	for (const item of toolbar.querySelectorAll(`[${TOOLBAR_ITEM_ATTRIBUTE}]`)) {
+		const stop = focusablesIn(item).find((element) => {
+			const menu = element.closest("[role=\"menu\"]");
+			return menu === null || !item.contains(menu);
+		});
+		if (stop) stops.push(stop);
+	}
+	return stops;
+}
+/** Arrow keys between a toolbar's items, along its orientation; `refresh()` after each render. */
+function attachToolbarFocus(toolbar, orientation) {
+	return attachRovingFocus(toolbar, {
+		orientation,
+		stops: () => toolbarStopsOf(toolbar)
+	});
+}
+//#endregion
+//#region src/menu-keys.ts
+/**
+* The keyboard of an open menu (the ARIA menu button pattern). The menu
+* takes focus on its first item; Up, Down, Home and End move between items,
+* passing over the ones that can't be used now; typing jumps to the next item
+* that starts with what was typed; Enter and Space pick; Escape closes the
+* menu and gives focus back to its button, and Tab closes it and moves on
+* from that button. While the menu is open, its button says so with
+* `aria-expanded`.
+*/
+/** How long typed letters keep adding to one search, in milliseconds. */
+const TYPEAHEAD_RESET_MS = 500;
+/** The menu's items when no `items` is given: its menu-item roles, in order. */
+const MENU_ITEM_SELECTOR = "[role=\"menuitem\"], [role=\"menuitemradio\"], [role=\"menuitemcheckbox\"]";
+/**
+* The item typeahead lands on: the first one from `current` on, wrapping, that
+* is available and whose label starts with `query` (any case). A one-letter
+* query starts after `current`, so typing the same letter again moves on, and
+* a query of one letter repeated ("ppp") cycles like that letter. -1 when no
+* item matches.
+*/
+function typeaheadMatchOf(labels, current, query, available) {
+	const typed = query.toLocaleLowerCase();
+	const search = typed.length > 1 && [...typed].every((letter) => letter === typed[0]) ? typed[0] : typed;
+	const offset = search.length === 1 ? 1 : 0;
+	const count = labels.length;
+	for (let taken = 0; taken < count; taken += 1) {
+		const index = ((current + offset + taken) % count + count) % count;
+		if (available(index) && labels[index].toLocaleLowerCase().startsWith(search)) return index;
+	}
+	return -1;
+}
+/**
+* The words typeahead matches an item by: its `aria-label`, else its text,
+* without the marks a row may start with (a bullet, a check, an icon glyph).
+*/
+function menuItemLabelOf(item) {
+	return (item.getAttribute("aria-label") ?? item.textContent ?? "").trim().replace(/^[^\p{L}\p{N}]+/u, "");
+}
+/**
+* Drive an open `menu` from the keyboard until the returned detach runs.
+* Detaching (the menu closed) gives focus back to the trigger when focus was
+* in the menu or went nowhere, and never when the user moved it elsewhere.
+*/
+function attachMenuKeys(menu, options) {
+	const { trigger, close } = options;
+	const items = options.items ?? (() => [...menu.querySelectorAll(MENU_ITEM_SELECTOR)]);
+	let typed = "";
+	let typedAt = Number.NEGATIVE_INFINITY;
+	const listed = () => {
+		const list = items();
+		for (const item of list) if (item.tabIndex !== -1) item.tabIndex = -1;
+		return list;
+	};
+	const available = (list) => (index) => !isUnavailable(list[index]);
+	const onKeyDown = (event) => {
+		if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+		const list = listed();
+		const from = list.indexOf(event.target);
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close();
+			trigger?.focus();
+			return;
+		}
+		if (event.key === "Tab") {
+			close();
+			trigger?.focus();
+			return;
+		}
+		if ((event.key === "Enter" || event.key === " " && typed === "") && from >= 0) {
+			event.preventDefault();
+			if (!isUnavailable(list[from])) list[from].click();
+			return;
+		}
+		const move = event.shiftKey ? null : rovingMoveOf(event.key, "vertical", "ltr");
+		if (move) {
+			event.preventDefault();
+			const to = rovingTargetOf(move, from, list.length, available(list), true);
+			if (to >= 0) list[to].focus();
+			return;
+		}
+		if (event.key.length === 1) {
+			if (event.timeStamp - typedAt > TYPEAHEAD_RESET_MS) typed = "";
+			typed += event.key;
+			typedAt = event.timeStamp;
+			const to = typeaheadMatchOf(list.map(menuItemLabelOf), from, typed, available(list));
+			if (to >= 0) {
+				event.preventDefault();
+				list[to].focus();
+			}
+		}
+	};
+	const onKeyUp = (event) => {
+		if (event.key === " " && !event.defaultPrevented) event.preventDefault();
+	};
+	menu.addEventListener("keydown", onKeyDown);
+	menu.addEventListener("keyup", onKeyUp);
+	trigger?.setAttribute("aria-expanded", "true");
+	const initial = options.initialFocus ?? "first";
+	if (initial !== "none") {
+		const list = listed();
+		const to = rovingTargetOf(initial, -1, list.length, available(list), false);
+		if (to >= 0) list[to].focus();
+	}
+	return () => {
+		menu.removeEventListener("keydown", onKeyDown);
+		menu.removeEventListener("keyup", onKeyUp);
+		trigger?.setAttribute("aria-expanded", "false");
+		const active = deepActiveElementOf(menu.ownerDocument);
+		if (trigger && (active === null || menu.contains(active))) trigger.focus();
+	};
+}
+//#endregion
+//#region src/focus-trap.ts
+/**
+* Keep keyboard focus inside a dialog or sheet while it's open. It takes
+* focus when the trap starts, unless focus is inside already (the control you
+* name, else its first one that Tab stops at, else the container itself); Tab
+* and Shift+Tab go round its controls without leaving it; focus that lands
+* outside comes back; and when the trap is released, focus returns to where it
+* was before. Traps nest: only the one started last acts, until it's released.
+*/
+/**
+* Move focus into `container` unless it's there already: to `initialFocus`, else its first
+* control Tab stops at, else the container itself. Focus already inside stays where it is, so a
+* control that took focus as it appeared (a search field asking for the cursor) keeps it.
+*/
+function moveFocusInto(container, initialFocus) {
+	if (containsFocus(container)) return;
+	if (initialFocus) {
+		initialFocus.focus();
+		return;
+	}
+	const first = tabbablesIn(container)[0];
+	if (first) {
+		first.focus();
+		return;
+	}
+	if (!container.hasAttribute("tabindex")) container.tabIndex = -1;
+	container.focus();
+}
+/** The traps holding focus now, the innermost last. */
+const activeTraps = [];
+/** Trap focus in `container` until the returned release runs. */
+function attachFocusTrap(container, options = {}) {
+	const doc = container.ownerDocument;
+	const before = deepActiveElementOf(doc);
+	const isInnermost = () => activeTraps[activeTraps.length - 1] === container;
+	/** The control that had focus last inside the trap, to go back to. */
+	let last = null;
+	const focusInside = (edge) => {
+		const tabbables = tabbablesIn(container);
+		const target = edge === "first" ? tabbables[0] : tabbables[tabbables.length - 1];
+		if (target) {
+			target.focus();
+			return;
+		}
+		if (!container.hasAttribute("tabindex")) container.tabIndex = -1;
+		container.focus();
+	};
+	const onKeyDown = (event) => {
+		if (event.key !== "Tab" || event.defaultPrevented || !isInnermost()) return;
+		const tabbables = tabbablesIn(container);
+		const active = deepActiveElementOf(doc);
+		const first = tabbables[0];
+		const lastTabbable = tabbables[tabbables.length - 1];
+		const atStart = active === container || active === first || !first;
+		const atEnd = active === lastTabbable || !lastTabbable;
+		if (event.shiftKey ? atStart : atEnd) {
+			event.preventDefault();
+			focusInside(event.shiftKey ? "last" : "first");
+		}
+	};
+	const onFocusIn = (event) => {
+		if (!isInnermost()) return;
+		const path = event.composedPath();
+		if (path.includes(container)) {
+			last = path[0];
+			return;
+		}
+		if (last?.isConnected && container.contains(last)) last.focus();
+		else focusInside("first");
+	};
+	activeTraps.push(container);
+	container.addEventListener("keydown", onKeyDown);
+	doc.addEventListener("focusin", onFocusIn, true);
+	moveFocusInto(container, options.initialFocus);
+	if (last === null && containsFocus(container)) last = deepActiveElementOf(doc);
+	return () => {
+		const index = activeTraps.lastIndexOf(container);
+		if (index >= 0) activeTraps.splice(index, 1);
+		container.removeEventListener("keydown", onKeyDown);
+		doc.removeEventListener("focusin", onFocusIn, true);
+		if (options.returnFocus !== false && before?.isConnected) before.focus();
+	};
+}
+//#endregion
+//#region src/surface-focus.ts
+/** Whether an element has text that `select()` selects. */
+const hasSelectableText = (element) => element.tagName === "INPUT" || element.tagName === "TEXTAREA";
+function createSurfaceFocusFollower() {
+	let current = null;
+	let taken = 0;
+	return { follow(element, shell, request, options = {}) {
+		if (shell !== current) {
+			current = shell;
+			taken = 0;
+		}
+		if (request === 0) {
+			taken = 0;
+			return;
+		}
+		if (request === taken || !element) return;
+		taken = request;
+		element.focus();
+		if (options.select && hasSelectableText(element)) element.select();
+	} };
+}
+//#endregion
+//#region src/standard-commands-platform.ts
+/**
+* The browser's part of the standard commands (`createStandardCommands` in
+* `@embedpdf/plugin-commands/standard`): copying the selected text, handing
+* the document to the user as a download, and the print dialog. Every
+* framework adapter builds its `standardCommands` from this one object.
+*/
+const standardCommandsBrowser = {
+	copySelection,
+	saveFile: (bytes, fileName) => saveFile(bytes, fileName, "application/pdf"),
+	print: () => window.print()
+};
+//#endregion
+export { EPDF_VARIABLES, FORM_CONTROL_FILL, TOOLBAR_ITEM_ATTRIBUTE, anchoredViewOf, annotationChromePaint, annotationDrawingOf, applyFirstLineShift, attachFocusTrap, attachMenuKeys, attachPagePointer, attachRichTextEditor, attachRovingFocus, attachSelectionHandle, attachTextBoxEditor, attachToolbarFocus, bakedAppearanceOf, bindCommandShortcuts, bindPaintedImage, bindWidgetEvents, browserClock, canTakeFocus, chromeInPixels, clientPageProjector, computeReleaseVelocity, containsFocus, copySelection, createClickCounter, createClickDetector, createDefaultActionsUiAdapter, createFontMounts, createOptimisticSelection, createScrollbarPresses, createShownUrls, createStageGestureController, createStageSurface, createSurfaceFocusFollower, createTextBoxEditorFollower, createTextFieldEditor, createToolbarLengths, cssFontOf, cssText, deepActiveElementOf, directionOf, editingTextKeyOf, enrichCommentThreads, epdfThemeVariables, firstLineShiftFor, fitAnchoredRect, focusablesIn, fontProgramsOf, formColorsOf, formFocusRingStyleOf, frameInPixels, ghostOpacity, hoverLink, indexedDbByteStore, installFilePickerProvider, isMacPlatform, isModifiedClick, isTabbable, isUnavailable, isUprightQuad, isolatePointerDown, isolateWheel, layerTextBoxesOf, lineModelFor, linkActivateContextOf, linkAnchorOf, linkHrefOf, listBoxControlStyleOf, listBoxStyleOf, livePageContext, loadAppearanceUrls, loadObjectUrl, lookFrameOf, lookRendererFor, makePageContext, menuItemLabelOf, mixAccent, mountFontProgram, mountWebFont, moveFocusInto, navigableLinksOf, objectUrlOf, observeAnchoredFit, observeClientGeometry, observeContentHeight, observeContentLength, observeContentWidth, observeHeight, observeLength, observeOutsidePress, observeWidth, offsetOfPosition, openExternalUri, pageClientSpace, pageLayersOf, pageSurfaceLayout, pageViewTransformInput, paint, paintDefault, partsDrawnTwice, pickFile, pickImageFile, pickRequestedFile, pictureLayerOptionsOf, pictureOrPainting, positionAnchoredRect, positionOfOffset, pressToggle, projectAnchoredTarget, quadInPixels, rasterInFrame, rectInPixels, registerRendererBehaviors, renderRichText, rendererBehaviorId, rovingMoveOf, rovingTargetOf, sameAnchoredFit, sameAnnotationAnchor, sameCreationDraftAnchor, samePageBounds, sameRotationAnchor, sameSelectionAnchor, sameSelectionEndpoints, sanitizeExternalUri, saveFile, sceneViewBox, scrollbarLayout, searchHighlightsOf, sendLinkEvent, serializeRichText, showSelectedOptions, shownAppearance, stagePageDemand, stageViewProjector, standardCommandsBrowser, styleDeltaOf, svgCursor, svgPoints, svgShapesOf, tabbablesIn, textBoxEditorScaleOf, textBoxStyleOf, textFieldEditorStyleOf, textFieldStyleOf, textPlateInPixels, toolCursorsOf, toolbarMeasureKey, toolbarStopsOf, typeaheadMatchOf, usesKey, vibrationFeedback, webFontMetrics, wheelZoomFactor, widgetBoxStyleOf, wireSelectionClipboard, wkFeedback };
 
 //# sourceMappingURL=index.js.map