@inkbar/core 0.10.0 → 0.12.0

package/dist/dom.mjs

@@ -1,5 +1,5 @@
-import { $ as deriveRect, B as isBubble, Bt as freeTextBox, C as isThreadRoot, Cn as isInkError, D as withoutReplies, E as threadRoot, G as resizedBox, H as keepsAspect, Ht as withCalloutBounds, J as translated, K as resizedRect, L as hasCallout, Qt as isKnown, R as hasCornerHandles, Sn as InkError, T as threadOf, U as movedEndpoint, V as isTextMarkup, Vt as isStandardCallout, W as movedTip, Wt as cssVariableDefaults, X as openDocument, Y as withBox, Yt as LINE_ENDINGS, Z as isBlankQuery, _ as constrain, _n as rectsIntersect, a as createInkTemplate, an as applyMatrix, b as shapeInput, c as createSignatureLibrary, en as mergeLineRects, f as recogniseStroke, g as SHAPE_KINDS, h as DEFAULT_SHAPE_SIZE, i as createImageTemplate, in as writable, k as createToolStyle, m as DEFAULT_SHAPE_OPTIONS, mn as rectFromPoints, nn as derived, p as DEFAULT_CORNER_RADIUS, q as scaled, qt as sameValue, rn as readonly, rt as isProduction, s as createMemorySignatureStore, sn as invertMatrix, t as signField, tn as createRecordStore, u as placeSignature, v as defaultEnds, x as isAbandonedNote, y as isPointerOnlyKind, z as hasRectGeometry, zt as calloutStroke } from "./sign-DZVDJhqT.mjs";
-import { ALargeSmall, AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, CaseSensitive, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CircleDashed, Download, Hexagon, Highlighter, ICON_ATTRIBUTES, Italic, MessageCircle, MessageSquare, MessageSquareText, Minus, MoveUpRight, PenLine, PenTool, Plus, Printer, RectangleHorizontal, Redo2, Search, Shapes, Signature, Slash, SpellCheck2, Square, SquareDashed, SquareDashedMousePointer, Star, Strikethrough, TextCursor, Trash2, Type, Underline, Undo2, X, ZoomIn, ZoomOut } from "@inkbar/icons";
+import { $ as withBox, A as threadRoot, C as isPointerOnlyKind, Cn as rectsIntersect, D as isThreadRoot, G as isTextMarkup, Gt as calloutStroke, H as hasCornerHandles, J as movedTip, Jt as withCalloutBounds, K as keepsAspect, Kt as freeTextBox, N as createToolStyle, On as InkError, Q as translated, S as defaultEnds, T as isAbandonedNote, U as hasRectGeometry, V as hasCallout, W as isBubble, X as resizedRect, Y as resizedBox, Yt as cssVariableDefaults, Z as scaled, _ as DEFAULT_CORNER_RADIUS, a as createInkTemplate, an as mergeLineRects, b as SHAPE_KINDS, bn as rectFromPoints, c as createSignatureLibrary, cn as readonly, ct as sameValue, d as placeSignature, en as LINE_ENDINGS, et as openDocument, fn as invertMatrix, ft as importedId, g as recogniseStroke, hn as quadContainsPoint, i as createImageTemplate, j as withoutReplies, k as threadOf, kn as isInkError, l as createStorageSignatureStore, ln as writable, lt as safeUrl, m as scopeStorage, on as createRecordStore, p as createMemoryStorage, q as movedEndpoint, qt as isStandardCallout, rn as isKnown, rt as deriveRect, sn as derived, st as isProduction, t as signField, tt as isBlankQuery, un as applyMatrix, v as DEFAULT_SHAPE_OPTIONS, w as shapeInput, x as constrain, xn as rectFromQuad, y as DEFAULT_SHAPE_SIZE, yn as rectContainsPoint } from "./sign-BSP7H3b7.mjs";
+import { ALargeSmall, AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowLeft, ArrowRight, Bold, CaseSensitive, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CircleDashed, Download, Hexagon, Highlighter, ICON_ATTRIBUTES, Italic, MessageCircle, MessageSquare, MessageSquareText, Minus, MoveUpRight, PenLine, PenTool, Plus, Printer, RectangleHorizontal, Redo2, Search, Shapes, Signature, Slash, SpellCheck2, Square, SquareDashed, SquareDashedMousePointer, Star, Strikethrough, TextCursor, Trash2, Type, Underline, Undo2, X, ZoomIn, ZoomOut } from "@inkbar/icons";
 import { getStroke } from "perfect-freehand";
 //#region src/dom/transform.ts
 /** Folds any integer multiple of 90 onto 0, 90, 180 or 270. Throws `RangeError` otherwise. */
@@ -228,6 +228,347 @@ function mostVisiblePageCss(layout, scrollTop, viewportHeight) {
 	return best;
 }
 //#endregion
+//#region src/dom/pinch.ts
+const midpoint = (a, b) => ({
+	x: (a.x + b.x) / 2,
+	y: (a.y + b.y) / 2
+});
+function pinchFrame(start, now, startScale, minZoom, maxZoom) {
+	const from = Math.hypot(start[1].x - start[0].x, start[1].y - start[0].y);
+	const to = Math.hypot(now[1].x - now[0].x, now[1].y - now[0].y);
+	const zoom = from > 0 ? Math.min(maxZoom, Math.max(minZoom, startScale * to / from)) : startScale;
+	const anchor = midpoint(start[0], start[1]);
+	const mid = midpoint(now[0], now[1]);
+	return {
+		zoom,
+		factor: from > 0 ? zoom / startScale : 1,
+		anchor,
+		pan: {
+			x: mid.x - anchor.x,
+			y: mid.y - anchor.y
+		}
+	};
+}
+const SETTLE_MS = 150;
+/**
+* The pinch preview: a transform on the pages element, which the browser composites without
+* laying anything out. `settle` covers what a preview can show but the committed layout
+* cannot reach (mainly scroll clamped at the content edges): the pages start where the fingers
+* left them and slide into place.
+*/
+function createZoomPreview(container, pagesEl) {
+	const win = container.ownerDocument.defaultView ?? window;
+	let frame = 0;
+	let timer;
+	function stopSettling() {
+		if (frame) win.cancelAnimationFrame(frame);
+		frame = 0;
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+		pagesEl.removeEventListener("transitionend", onTransitionEnd);
+		pagesEl.style.removeProperty("transition");
+	}
+	function settled() {
+		stopSettling();
+		pagesEl.style.removeProperty("transform");
+	}
+	const onTransitionEnd = (e) => {
+		if (e.target === pagesEl && e.propertyName === "transform") settled();
+	};
+	function clear() {
+		stopSettling();
+		pagesEl.style.removeProperty("transform");
+		pagesEl.style.removeProperty("transform-origin");
+	}
+	return {
+		show(factor, anchor, pan) {
+			stopSettling();
+			const x = anchor.x + container.scrollLeft - pagesEl.offsetLeft;
+			const y = anchor.y + container.scrollTop - pagesEl.offsetTop;
+			pagesEl.style.transformOrigin = `${x}px ${y}px`;
+			pagesEl.style.transform = `translate(${pan.x}px, ${pan.y}px) scale(${factor})`;
+		},
+		clear,
+		settle(offset) {
+			clear();
+			pagesEl.style.transform = `translate(${offset.x}px, ${offset.y}px)`;
+			frame = win.requestAnimationFrame(() => {
+				frame = 0;
+				getComputedStyle(pagesEl).transform;
+				pagesEl.style.transition = `transform ${SETTLE_MS}ms ease-out`;
+				pagesEl.style.removeProperty("transform");
+				pagesEl.addEventListener("transitionend", onTransitionEnd);
+				timer = setTimeout(settled, 200);
+			});
+		},
+		destroy: clear
+	};
+}
+/**
+* Tracks touches on the container with touch events, which every touch browser sends as one
+* stream (pointer events may be cancelled once the browser decides to pan). The first two
+* fingers down start a pinch; a third is ignored. The pinch ends when either of its fingers
+* lifts or is cancelled, and any finger still down then starts nothing until every finger has
+* lifted. While two fingers are down their moves are prevented, so the browser neither pans
+* nor zooms underneath; one finger's moves never are, so a one-finger scroll stays native. A
+* move the browser will not let us cancel means it is scrolling natively already: that travel
+* is left to it, and only what the fingers do after it is scrolled here.
+* The viewport claims pinch on the container (`touch-action: pan-x pan-y`), which keeps the
+* page from zooming as well; the tool controller turns off one-finger panning on the pages
+* element while a drag tool is ready, and two fingers still land here. A finger
+* that lands alone starts afresh, so an end the browser never sent leaves nothing behind.
+*/
+function attachTouchPinch(opts) {
+	const { container, preview } = opts;
+	let pinch;
+	let spent = false;
+	/** The touches that went down on the container, by identifier. */
+	const mine = /* @__PURE__ */ new Set();
+	const down = (list) => [...list].filter((t) => mine.has(t.identifier));
+	function at(t) {
+		const r = container.getBoundingClientRect();
+		return {
+			x: t.clientX - r.left - container.clientLeft,
+			y: t.clientY - r.top - container.clientTop
+		};
+	}
+	const onStart = (e) => {
+		const live = new Set([...e.touches].map((t) => t.identifier));
+		for (const id of mine) if (!live.has(id)) mine.delete(id);
+		for (const t of e.changedTouches) mine.add(t.identifier);
+		const fingers = down(e.touches);
+		if (fingers.length === 1) {
+			if (pinch) preview.clear();
+			pinch = void 0;
+			spent = false;
+		}
+		if (pinch || spent || fingers.length < 2) return;
+		const [a, b] = fingers;
+		const start = [at(a), at(b)];
+		const scale = opts.scale();
+		pinch = {
+			ids: [a.identifier, b.identifier],
+			start,
+			scale,
+			last: pinchFrame(start, start, scale, opts.minZoom, opts.maxZoom),
+			scrolled: {
+				x: 0,
+				y: 0
+			},
+			mid: midpoint(start[0], start[1])
+		};
+	};
+	const onMove = (e) => {
+		if (down(e.touches).length >= 2 && e.cancelable) e.preventDefault();
+		if (!pinch) return;
+		const ids = pinch.ids;
+		const touches = [...e.touches];
+		const a = touches.find((t) => t.identifier === ids[0]);
+		const b = touches.find((t) => t.identifier === ids[1]);
+		if (!a || !b) return;
+		const now = [at(a), at(b)];
+		const mid = midpoint(now[0], now[1]);
+		const native = !e.cancelable;
+		if (native) {
+			const dx = mid.x - pinch.mid.x;
+			const dy = mid.y - pinch.mid.y;
+			pinch.start = [{
+				x: pinch.start[0].x + dx,
+				y: pinch.start[0].y + dy
+			}, {
+				x: pinch.start[1].x + dx,
+				y: pinch.start[1].y + dy
+			}];
+		}
+		pinch.mid = mid;
+		const frame = pinchFrame(pinch.start, now, pinch.scale, opts.minZoom, opts.maxZoom);
+		const { scrolled } = pinch;
+		if (!native) {
+			const took = opts.scrollBy({
+				x: frame.pan.x - scrolled.x,
+				y: frame.pan.y - scrolled.y
+			});
+			scrolled.x += took.x;
+			scrolled.y += took.y;
+		}
+		pinch.last = {
+			...frame,
+			anchor: {
+				x: frame.anchor.x + scrolled.x,
+				y: frame.anchor.y + scrolled.y
+			},
+			pan: {
+				x: frame.pan.x - scrolled.x,
+				y: frame.pan.y - scrolled.y
+			}
+		};
+		preview.show(pinch.last.factor, pinch.last.anchor, pinch.last.pan);
+	};
+	const onEnd = (e) => {
+		const ended = [...e.changedTouches].map((t) => t.identifier);
+		for (const id of ended) mine.delete(id);
+		if (pinch && pinch.ids.some((id) => ended.includes(id))) {
+			const { last } = pinch;
+			pinch = void 0;
+			spent = true;
+			preview.clear();
+			opts.commit(last);
+		}
+		if (down(e.touches).length === 0) spent = false;
+	};
+	const listen = { passive: false };
+	container.addEventListener("touchstart", onStart, listen);
+	container.addEventListener("touchmove", onMove, listen);
+	container.addEventListener("touchend", onEnd, listen);
+	container.addEventListener("touchcancel", onEnd, listen);
+	return { destroy() {
+		container.removeEventListener("touchstart", onStart);
+		container.removeEventListener("touchmove", onMove);
+		container.removeEventListener("touchend", onEnd);
+		container.removeEventListener("touchcancel", onEnd);
+		mine.clear();
+		pinch = void 0;
+		spent = false;
+	} };
+}
+const WHEEL_STEP = 1.1;
+/**
+* The zoom factor one wheel event stands for. A trackpad pinch arrives as ctrl+wheel events
+* with small pixel deltas, which zoom smoothly. A mouse wheel notch with ctrl held arrives in
+* line or page mode, or as one large pixel delta, and is one small step, whatever its size.
+*/
+function wheelFactor(e) {
+	if (e.deltaMode !== 0 || Math.abs(e.deltaY) >= 50) return e.deltaY < 0 ? WHEEL_STEP : e.deltaY > 0 ? 1 / WHEEL_STEP : 1;
+	return Math.exp(-e.deltaY / 100);
+}
+const IDLE_MS = 150;
+const TOUCH_TYPES = [
+	"touchstart",
+	"touchend",
+	"touchcancel"
+];
+/**
+* A trackpad pinch over the container. Browsers report it as ctrl+wheel events, which are
+* taken over so the page does not zoom; a run of them is one pinch, anchored at the pointer
+* where it began and committed once the events stop, or as soon as the container scrolls (a
+* plain wheel, a scroll bar), so the scroll moves the committed layout and not the preview.
+* Safari also has gesture events, which give the scale directly; while one of those runs,
+* ctrl+wheel is ignored so nothing counts twice. Safari on a touch screen sends gesture events
+* for a touch pinch too, which `attachTouchPinch` already handles: while a finger is down on
+* the container they are prevented and otherwise ignored. The wheel listener is non-passive
+* because it has to call `preventDefault`.
+*/
+function attachTrackpadPinch(opts) {
+	const { container, preview } = opts;
+	const win = container.ownerDocument.defaultView ?? window;
+	let run;
+	let gesturing = false;
+	/** A finger is down on the container. */
+	let touching = false;
+	let timer;
+	function at(e) {
+		const r = container.getBoundingClientRect();
+		return {
+			x: e.clientX - r.left - container.clientLeft,
+			y: e.clientY - r.top - container.clientTop
+		};
+	}
+	function update(e, next) {
+		if (!run) {
+			const scale = opts.scale();
+			const anchor = at(e);
+			run = {
+				anchor,
+				scale,
+				factor: 1,
+				last: pinchFrame([anchor, anchor], [anchor, anchor], scale, opts.minZoom, opts.maxZoom)
+			};
+		}
+		run.factor = next(run.factor);
+		const zoom = Math.min(opts.maxZoom, Math.max(opts.minZoom, run.scale * run.factor));
+		run.last = {
+			zoom,
+			factor: zoom / run.scale,
+			anchor: run.anchor,
+			pan: {
+				x: 0,
+				y: 0
+			}
+		};
+		preview.show(run.last.factor, run.last.anchor, run.last.pan);
+	}
+	function end() {
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+		if (!run) return;
+		const { last } = run;
+		run = void 0;
+		preview.clear();
+		opts.commit(last);
+	}
+	const onWheel = (e) => {
+		if (!e.ctrlKey) {
+			if (!gesturing) end();
+			return;
+		}
+		if (gesturing) return;
+		e.preventDefault();
+		update(e, (f) => f * wheelFactor(e));
+		if (timer !== void 0) clearTimeout(timer);
+		timer = setTimeout(end, IDLE_MS);
+	};
+	const onScroll = () => {
+		if (!gesturing) end();
+	};
+	const onTouch = (e) => {
+		touching = e.type === "touchstart" || e.touches.length > 0;
+	};
+	const onGestureStart = (e) => {
+		e.preventDefault();
+		if (touching) return;
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+		end();
+		gesturing = true;
+		update(e, () => 1);
+	};
+	const onGestureChange = (e) => {
+		e.preventDefault();
+		if (!gesturing) return;
+		update(e, () => e.scale);
+	};
+	const onGestureEnd = (e) => {
+		e.preventDefault();
+		if (!gesturing) return;
+		gesturing = false;
+		end();
+	};
+	container.addEventListener("wheel", onWheel, { passive: false });
+	container.addEventListener("scroll", onScroll, { passive: true });
+	const hasGestures = "GestureEvent" in win;
+	if (hasGestures) {
+		for (const type of TOUCH_TYPES) container.addEventListener(type, onTouch, { passive: true });
+		container.addEventListener("gesturestart", onGestureStart);
+		container.addEventListener("gesturechange", onGestureChange);
+		container.addEventListener("gestureend", onGestureEnd);
+	}
+	return { destroy() {
+		container.removeEventListener("wheel", onWheel);
+		container.removeEventListener("scroll", onScroll);
+		if (hasGestures) {
+			for (const type of TOUCH_TYPES) container.removeEventListener(type, onTouch);
+			container.removeEventListener("gesturestart", onGestureStart);
+			container.removeEventListener("gesturechange", onGestureChange);
+			container.removeEventListener("gestureend", onGestureEnd);
+		}
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+		run = void 0;
+		gesturing = false;
+		preview.clear();
+	} };
+}
+//#endregion
 //#region src/dom/viewport.ts
 function sameList$1(a, b) {
 	return a.length === b.length && a.every((v, i) => v === b[i]);
@@ -244,6 +585,7 @@ function createViewport(opts) {
 	const rotation = writable(opts.rotation ?? 0);
 	const mode = writable(opts.mode ?? "continuous");
 	const currentPage = writable(0);
+	const readingLine = writable(0);
 	const mounted = writable([]);
 	const layout = writable({
 		boxes: [],
@@ -252,10 +594,13 @@ function createViewport(opts) {
 	});
 	const previousStyle = {
 		overflow: container.style.overflow,
-		position: container.style.position
+		position: container.style.position,
+		touchAction: container.style.touchAction
 	};
 	container.dataset.inkViewport = "";
 	container.style.overflow = "auto";
+	const pinchZoom = opts.pinchZoom ?? true;
+	if (pinchZoom) container.style.touchAction = "pan-x pan-y";
 	if (getComputedStyle(container).position === "static") container.style.position = "relative";
 	const pagesEl = container.ownerDocument.createElement("div");
 	pagesEl.className = "ink-pages";
@@ -359,6 +704,9 @@ function createViewport(opts) {
 		if (destroyed) return;
 		const l = layout.get();
 		const top = container.scrollTop - origin().y;
+		const end = container.scrollHeight - container.clientHeight;
+		const atEnd = end > 0 && container.scrollTop >= end - 1;
+		readingLine.set(top + (atEnd ? container.clientHeight : container.clientHeight / 3));
 		const wanted = visibleRangeCss(l, top, container.clientHeight, buffer);
 		const wantedSet = new Set(wanted);
 		for (const [page, host] of [...hosts]) {
@@ -381,6 +729,70 @@ function createViewport(opts) {
 		if (!sameList$1(mounted.get(), wanted)) mounted.set(wanted);
 		if (mode.get() === "continuous") currentPage.set(mostVisiblePageCss(l, top, container.clientHeight));
 	}
+	/**
+	* Absolute container scroll positions that frame `dest`, or `undefined` when its page has no
+	* box. No `left` means "leave the horizontal scroll where it is". Shared by
+	* `scrollToDestination` and `destinationY` so they cannot disagree.
+	*/
+	function destinationScroll(dest) {
+		const box = boxFor(dest.page);
+		if (!box) return void 0;
+		const t = transformFor(dest.page);
+		const at = origin();
+		const pageTop = mode.get() === "single" ? 0 : Math.max(0, at.y + box.top - gap);
+		const absTop = (css) => Math.max(0, at.y + box.top + css);
+		const absLeft = (css) => Math.max(0, at.x + box.left + css);
+		const known = (x, y) => {
+			const o = t.toCss({
+				x: 0,
+				y: 0
+			});
+			const dx = t.toCss({
+				x: 1,
+				y: 0
+			});
+			const dy = t.toCss({
+				x: 0,
+				y: 1
+			});
+			const p = t.toCss({
+				x: x ?? 0,
+				y: y ?? 0
+			});
+			const r = {};
+			if ((x !== void 0 || dx.y === o.y) && (y !== void 0 || dy.y === o.y)) r.top = p.y;
+			if ((x !== void 0 || dx.x === o.x) && (y !== void 0 || dy.x === o.x)) r.left = p.x;
+			return r;
+		};
+		switch (dest.fit) {
+			case "xyz": {
+				const c = known(dest.left, dest.top);
+				const r = { top: c.top === void 0 ? pageTop : absTop(c.top) };
+				if (c.left !== void 0) r.left = absLeft(c.left);
+				return r;
+			}
+			case "fith":
+			case "fitbh": {
+				const c = known(void 0, dest.top);
+				return { top: c.top === void 0 ? pageTop : absTop(c.top) };
+			}
+			case "fitv":
+			case "fitbv": {
+				const c = known(dest.left, void 0);
+				const r = { top: pageTop };
+				if (c.left !== void 0) r.left = absLeft(c.left);
+				return r;
+			}
+			case "fitr": {
+				const css = t.toCssRect(dest.rect);
+				return {
+					top: Math.max(0, at.y + box.top + css.top - (container.clientHeight - css.height) / 2),
+					left: Math.max(0, at.x + box.left + css.left - (container.clientWidth - css.width) / 2)
+				};
+			}
+			default: return { top: pageTop };
+		}
+	}
 	let scrollFrame = 0;
 	const onScroll = () => {
 		if (scrollFrame) return;
@@ -422,6 +834,21 @@ function createViewport(opts) {
 		}
 		return best;
 	}
+	/** The page and user-space point under `anchor` (container-relative), from the current layout. */
+	function userAt(anchor) {
+		const o = origin();
+		const x = container.scrollLeft + anchor.x - o.x;
+		const y = container.scrollTop + anchor.y - o.y;
+		const box = anchorBox(layout.get(), y);
+		if (!box) return void 0;
+		return {
+			page: box.index,
+			user: transformFor(box.index).fromCss({
+				x: x - box.left,
+				y: y - box.top
+			})
+		};
+	}
 	/**
 	* Keeps the user-space point under `anchorCss` still while `change` alters the layout.
 	* The anchor is taken in layout space, so it holds in the margins and gaps too: there it
@@ -433,25 +860,103 @@ function createViewport(opts) {
 			x: container.clientWidth / 2,
 			y: container.clientHeight / 2
 		};
-		const o = origin();
-		const x = container.scrollLeft + anchor.x - o.x;
-		const y = container.scrollTop + anchor.y - o.y;
-		const old = anchorBox(layout.get(), y);
-		const user = old ? transformFor(old.index).fromCss({
-			x: x - old.left,
-			y: y - old.top
-		}) : void 0;
+		const at = userAt(anchor);
 		change();
 		relayout();
-		if (!old || !user) return;
-		const box = boxFor(old.index);
+		if (!at) return;
+		const box = boxFor(at.page);
 		if (!box) return;
-		const after = transformFor(old.index).toCss(user);
-		const o2 = origin();
-		container.scrollLeft = o2.x + box.left + after.x - anchor.x;
-		container.scrollTop = o2.y + box.top + after.y - anchor.y;
+		const after = transformFor(at.page).toCss(at.user);
+		const o = origin();
+		container.scrollLeft = o.x + box.left + after.x - anchor.x;
+		container.scrollTop = o.y + box.top + after.y - anchor.y;
+		sync();
+	}
+	/**
+	* The translation a pinch preview applies, from the current layout. While the zoomed pages
+	* would still be narrower than the container, the committed layout centres them (and leaves
+	* nothing to scroll sideways), so the preview puts them there instead of following the fingers.
+	*/
+	function previewPan(factor, anchor, pan) {
+		const l = layout.get();
+		const widest = l.boxes.reduce((max, b) => Math.max(max, b.width), 0);
+		const inner = innerSize().width;
+		if (widest * factor >= inner) return pan;
+		const o = origin();
+		const ox = anchor.x + container.scrollLeft - o.x;
+		const shown = o.x - container.scrollLeft + ox + (l.width / 2 - ox) * factor + pan.x;
+		const centred = o.x + inner / 2;
+		return {
+			x: pan.x + centred - shown,
+			y: pan.y
+		};
+	}
+	/**
+	* Ends a pinch: one zoom change around the point that started between the fingers, then any
+	* travel the touch pinch could not scroll as it went (all of it, for a trackpad pinch) as a
+	* scroll, so that point ends up where the preview last showed it.
+	* When the scroll's edges stop it getting there, the preview eases the difference out. A
+	* pinch that did not zoom changes no zoom, so a fit mode stays: a two-finger pan only
+	* scrolls, and a two-finger tap changes nothing.
+	*/
+	function commitPinch(frame) {
+		if (destroyed) return;
+		const zoomed = Math.abs(frame.factor - 1) >= .001;
+		if (!zoomed && Math.hypot(frame.pan.x, frame.pan.y) < 1) return;
+		const at = userAt(frame.anchor);
+		const shown = previewPan(frame.factor, frame.anchor, frame.pan);
+		if (zoomed) withAnchor(frame.anchor, () => zoom.set(clamp(frame.zoom)));
+		container.scrollLeft -= frame.pan.x;
+		container.scrollTop -= frame.pan.y;
 		sync();
+		const box = at && boxFor(at.page);
+		if (!at || !box) return;
+		const css = transformFor(at.page).toCss(at.user);
+		const o = origin();
+		const actual = {
+			x: o.x + box.left + css.x - container.scrollLeft,
+			y: o.y + box.top + css.y - container.scrollTop
+		};
+		const dx = frame.anchor.x + shown.x - actual.x;
+		const dy = frame.anchor.y + shown.y - actual.y;
+		if (Math.abs(dx) > 1 || Math.abs(dy) > 1) preview?.settle({
+			x: dx,
+			y: dy
+		});
 	}
+	const basePreview = pinchZoom ? createZoomPreview(container, pagesEl) : void 0;
+	const preview = basePreview && {
+		...basePreview,
+		show: (factor, anchor, pan) => basePreview.show(factor, anchor, previewPan(factor, anchor, pan))
+	};
+	const pinch = preview ? attachTouchPinch({
+		container,
+		preview,
+		scale: () => scale.get(),
+		minZoom,
+		maxZoom,
+		scrollBy: (delta) => {
+			const { scrollLeft, scrollTop } = container;
+			container.scrollTo({
+				left: scrollLeft - delta.x,
+				top: scrollTop - delta.y,
+				behavior: "instant"
+			});
+			return {
+				x: scrollLeft - container.scrollLeft,
+				y: scrollTop - container.scrollTop
+			};
+		},
+		commit: commitPinch
+	}) : void 0;
+	const trackpadPinch = preview ? attachTrackpadPinch({
+		container,
+		preview,
+		scale: () => scale.get(),
+		minZoom,
+		maxZoom,
+		commit: commitPinch
+	}) : void 0;
 	const viewport = {
 		zoom: readonly(zoom),
 		scale: readonly(scale),
@@ -517,12 +1022,36 @@ function createViewport(opts) {
 			if (to.top !== void 0 || to.left !== void 0) container.scrollTo(to);
 			sync();
 		},
+		scrollToDestination(dest, o) {
+			if (!Number.isInteger(dest.page) || dest.page < 0 || dest.page >= doc.pages.length) return;
+			if (mode.get() === "single" && currentPage.get() !== dest.page) {
+				currentPage.set(dest.page);
+				relayout();
+			}
+			const to = destinationScroll(dest);
+			if (!to) return;
+			const scroll = {
+				top: to.top,
+				behavior: o?.behavior ?? "auto"
+			};
+			if (to.left !== void 0) scroll.left = to.left;
+			container.scrollTo(scroll);
+			sync();
+		},
+		destinationY(dest) {
+			const to = destinationScroll(dest);
+			return to ? to.top - origin().y : void 0;
+		},
+		readingLine: readonly(readingLine),
 		transformFor,
 		hostFor: (page) => hosts.get(page),
 		pageAtCss,
 		destroy() {
 			if (destroyed) return;
 			destroyed = true;
+			pinch?.destroy();
+			trackpadPinch?.destroy();
+			preview?.destroy();
 			ro.disconnect();
 			container.removeEventListener("scroll", onScroll);
 			if (scrollFrame) cancelAnimationFrame(scrollFrame);
@@ -536,6 +1065,7 @@ function createViewport(opts) {
 			delete container.dataset.inkViewport;
 			container.style.overflow = previousStyle.overflow;
 			container.style.position = previousStyle.position;
+			container.style.touchAction = previousStyle.touchAction;
 		}
 	};
 	relayout();
@@ -704,9 +1234,9 @@ function attachHistoryKeys(el, history) {
 	return () => el.removeEventListener("keydown", onKeydown);
 }
 /**
-* Keeps focus in the viewer when a focused Undo or Redo button inside `el` turns disabled
-* (it undid or redid the last step), which would otherwise drop focus to `<body>`, out of
-* reach of the undo and redo keys. Focus moves to `scroll()`, the viewer's scroll element,
+* Keeps focus in the viewer when a focused Undo, Redo, Back or Forward button inside `el` turns
+* disabled (it undid, redid or went back over the last step), which would otherwise drop focus
+* to `<body>`, out of reach of the viewer's keys. Focus moves to `scroll()`, the viewer's scroll element,
 * without scrolling. Returns a function that removes the listeners.
 *
 * Chrome and Firefox blur the button as it is disabled: its `focusout` comes while the
@@ -715,7 +1245,7 @@ function attachHistoryKeys(el, history) {
 * `focusout` (a click on content that takes no focus) is left alone.
 */
 function keepHistoryFocus(el, scroll) {
-	const isHistoryButton = (node) => node instanceof HTMLButtonElement && node.disabled && node.matches("[data-ink-undo], [data-ink-redo]");
+	const isHistoryButton = (node) => node instanceof HTMLButtonElement && node.disabled && node.matches("[data-ink-undo], [data-ink-redo], [data-ink-back], [data-ink-forward]");
 	const toScroll = () => {
 		const target = scroll();
 		if (!target?.isConnected) return;
@@ -3730,6 +4260,7 @@ function createPluginHost(opts) {
 		if (seen.has(plugin.id)) throw new InkError("DuplicatePlugin", `A plugin with id ${plugin.id} is registered twice`, { id: plugin.id });
 		seen.add(plugin.id);
 	}
+	const storage = opts.storage ?? createMemoryStorage();
 	const registry = createCommandRegistry({ document: opts.document });
 	const tools = [];
 	const decorators = [];
@@ -3744,6 +4275,7 @@ function createPluginHost(opts) {
 	const editFns = [];
 	const setupCleanups = [];
 	const redecorators = /* @__PURE__ */ new Set();
+	const pressListeners = /* @__PURE__ */ new Set();
 	const marks = createMarksRegistry();
 	const selections = /* @__PURE__ */ new Map();
 	let opened = null;
@@ -3784,8 +4316,21 @@ function createPluginHost(opts) {
 		for (const request of requests) request.current.set(null);
 		for (const cleanup of state.cleanups.reverse()) guard(cleanup);
 	};
-	const contextFor = (plugin) => {
+	const contextFor = (plugin, owned) => {
 		const storeNames = /* @__PURE__ */ new Set();
+		const listenForPress = (kind) => (fn) => {
+			const entry = {
+				plugin: plugin.id,
+				kind,
+				fn
+			};
+			pressListeners.add(entry);
+			owned.add(entry);
+			return () => {
+				pressListeners.delete(entry);
+				owned.delete(entry);
+			};
+		};
 		const ctx = {
 			id: plugin.id,
 			document: opts.document,
@@ -3834,7 +4379,10 @@ function createPluginHost(opts) {
 			scrollTo(page, rect, scrollOpts) {
 				opts.viewport?.()?.scrollToRect(page, rect, scrollOpts);
 			},
-			search: opts.search ?? inertSearch
+			search: opts.search ?? inertSearch,
+			storage: scopeStorage(storage, `plugin.${plugin.id}`),
+			onPress: listenForPress("press"),
+			onLongPress: listenForPress("long-press")
 		};
 		internals$1.set(ctx, {
 			marks,
@@ -3913,13 +4461,22 @@ function createPluginHost(opts) {
 	};
 	for (const plugin of opts.plugins) {
 		let cleanup;
+		const owned = /* @__PURE__ */ new Set();
+		const dropPresses = () => {
+			for (const entry of owned) pressListeners.delete(entry);
+			owned.clear();
+		};
 		try {
-			cleanup = plugin.setup(contextFor(plugin));
+			cleanup = plugin.setup(contextFor(plugin, owned));
 		} catch (error) {
+			dropPresses();
 			for (const done of setupCleanups.reverse()) guard(done);
 			throw error;
 		}
-		if (typeof cleanup === "function") setupCleanups.push(cleanup);
+		setupCleanups.push(() => {
+			dropPresses();
+			if (typeof cleanup === "function") cleanup();
+		});
 	}
 	const current = opts.document.get();
 	if (current) open(current);
@@ -3968,6 +4525,16 @@ function createPluginHost(opts) {
 				redecorators.delete(run);
 			};
 		},
+		emitPress(kind, press) {
+			for (const entry of [...pressListeners]) {
+				if (entry.kind !== kind || !pressListeners.has(entry)) continue;
+				try {
+					entry.fn(press);
+				} catch (error) {
+					console.error(`Plugin ${entry.plugin} threw in a ${kind} listener`, error);
+				}
+			}
+		},
 		destroy() {
 			if (destroyed) return;
 			destroyed = true;
@@ -5138,6 +5705,48 @@ function createToolOptions(tools = []) {
 		register
 	};
 }
+const defaultSlop = (pointerType) => pointerType === "mouse" ? 4 : 10;
+function createPressTracker(opts) {
+	const longPressMs = opts.longPressMs ?? 500;
+	const slopFor = opts.slop ?? defaultSlop;
+	let live;
+	function cancel() {
+		if (live?.timer !== void 0) clearTimeout(live.timer);
+		live = void 0;
+	}
+	return {
+		down(e, press) {
+			cancel();
+			const l = {
+				pointerId: e.pointerId,
+				x: e.clientX,
+				y: e.clientY,
+				slop: slopFor(press.pointerType),
+				press,
+				timer: void 0,
+				done: false
+			};
+			if (press.pointerType !== "mouse") l.timer = setTimeout(() => {
+				l.timer = void 0;
+				l.done = true;
+				opts.onLongPress(press);
+			}, longPressMs);
+			live = l;
+		},
+		move(e) {
+			if (live?.pointerId !== e.pointerId) return;
+			if (Math.hypot(e.clientX - live.x, e.clientY - live.y) > live.slop) cancel();
+		},
+		up(e) {
+			if (live?.pointerId !== e.pointerId) return;
+			const { press, done } = live;
+			cancel();
+			if (!done) opts.onPress(press);
+		},
+		cancel,
+		destroy: cancel
+	};
+}
 //#endregion
 //#region src/dom/tools/selection-edit.ts
 const CORNERS = [
@@ -5612,6 +6221,7 @@ function createToolController$1(opts) {
 			clearMade();
 			made = [...ids];
 			ctx.root.dataset.inkMade = "";
+			applyClaim();
 			stopMade = [ctx.store.list.subscribe(checkMade), ctx.store.selection.subscribe(checkMade)];
 		},
 		done() {
@@ -5623,6 +6233,8 @@ function createToolController$1(opts) {
 	const originalCursor = ctx.root.style.cursor;
 	/** The pointer between a primary press and its release or cancel. */
 	let pressed;
+	/** Whether `pressed` is a touch, which a second touch turns into a pinch. */
+	let pressedTouch = false;
 	/** Pointers whose release belongs to a tool that is no longer active. */
 	const swallow = /* @__PURE__ */ new Set();
 	/** What the active one-shot tool made; undefined while it is ready. */
@@ -5630,16 +6242,61 @@ function createToolController$1(opts) {
 	let stopMade = [];
 	/** Whether the press now under way found the tool made (see the top of the file). */
 	let pressFoundMade = false;
+	/** Whether the press now under way commits an open editor or closes an open popover. */
+	let pressDismisses = false;
 	/** Moves and resizes what the active one-shot tool made. */
 	let madeEdit;
 	/** The press now under way went to `madeEdit`, not the tool. */
 	let editingMade = false;
+	/** The root's cursor is the pointer for a link under it. */
+	let overLink = false;
+	/** The link last reported to `onLinkHover`. */
+	let hovered;
+	/** The press now under way had a modifier key down, so it does not follow a link. */
+	let pressModified = false;
+	const presses = createPressTracker({
+		onPress: (press) => {
+			const link = !pressModified && opts.onLink && opts.linkAt?.(press.page, press.point);
+			if (link) opts.onLink(link);
+			else opts.onPress?.("press", press);
+		},
+		onLongPress: (press) => opts.onPress?.("long-press", press)
+	});
 	function clearMade() {
 		stopMade.forEach((stop) => stop());
 		stopMade = [];
 		made = void 0;
 		delete ctx.root.dataset.inkMade;
+		applyClaim();
+	}
+	/**
+	* Turns off one-finger panning on the pages element while a claiming tool is ready. The
+	* viewport never sets `touch-action` there, so removing the property restores it. A host
+	* without a pages element (no `createViewport`) gets no claim.
+	*/
+	function applyClaim() {
+		const pages = pagesOf();
+		if (!pages) return;
+		if (claiming()) pages.style.touchAction = "pinch-zoom";
+		else pages.style.removeProperty("touch-action");
+	}
+	function pagesOf() {
+		return ctx.root.querySelector(":scope > [data-ink-pages]");
+	}
+	/** True while the active tool claims touch: it claims it and, if one-shot, is still ready. */
+	function claiming() {
+		return current?.claimsTouch === true && made === void 0;
 	}
+	/**
+	* Safari on iPad can let a one-finger drag scroll the container despite the claim's
+	* `touch-action`, then cancel the tool's gesture. So a claimed one-finger move on the pages
+	* also cancels the browser's scroll. Two fingers are left to the pinch handler or the browser.
+	*/
+	const onTouchMove = (e) => {
+		if (!e.cancelable || e.touches.length !== 1 || !claiming()) return;
+		const pages = pagesOf();
+		if (pages && e.target instanceof Node && pages.contains(e.target)) e.preventDefault();
+	};
 	/** Leaves the made state when its items are gone, or switches when the selection moved on. */
 	function checkMade() {
 		if (!made) return;
@@ -5651,19 +6308,36 @@ function createToolController$1(opts) {
 		const selected = store.selection.get();
 		if (!made.some((id) => selected.includes(id))) set("select-text");
 	}
+	/** True under the tools whose still presses are reported and may follow a link. */
+	const selecting = () => current?.id === "select-text" || current?.id === "select";
 	/** True for events from a pointer other than the one whose press is live. */
 	const foreign = (e) => pressed !== void 0 && pressed !== e.pointerId;
-	const readFirst = () => {
+	const readFirst = (e) => {
 		pressFoundMade = made !== void 0;
+		pressDismisses = dismisses(e.target, ctx.root.ownerDocument);
 	};
 	const readAfterEditor = () => {
 		pressFoundMade ||= made !== void 0;
 	};
 	const onDown = (e) => {
+		if (e.pointerType === "touch" && !e.isPrimary) {
+			presses.cancel();
+			if (pressedTouch) cancelPressed();
+			return;
+		}
+		if (e.pointerType === "pen" && pressedTouch && pressed !== void 0) {
+			presses.cancel();
+			cancelPressed();
+		}
 		if (!e.isPrimary || e.button !== 0 || inCustomContent(e.target)) return;
 		if (foreign(e)) return;
 		swallow.delete(e.pointerId);
-		const annotationId = (e.target instanceof Element ? e.target : null)?.closest("[data-annotation]")?.getAttribute("data-annotation") ?? void 0;
+		pressedTouch = e.pointerType === "touch";
+		const target = e.target instanceof Element ? e.target : null;
+		const annotationId = target?.closest("[data-annotation]")?.getAttribute("data-annotation") ?? void 0;
+		const hit = hitFor(ctx, e);
+		const reportable = selecting() && !onAnnotation(target) && !pressDismisses && !closedEditor(e) && hit !== void 0;
+		presses.cancel();
 		if (current?.kind === "one-shot") {
 			if (pressFoundMade && annotationId === void 0 && !onScrollBar(e, ctx.root)) {
 				e.preventDefault();
@@ -5675,25 +6349,56 @@ function createToolController$1(opts) {
 			if (a && made?.includes(a.id) && madeEdit) {
 				pressed = e.pointerId;
 				editingMade = true;
-				if (madeEdit.onPointerDown(e, hitFor(ctx, e), a.id) === true) capture(e.pointerId);
+				if (madeEdit.onPointerDown(e, hit, a.id) === true) capture(e.pointerId);
 				return;
 			}
 			if (a && (!isTextMarkup(a) || pressFoundMade)) set("select-text");
 		}
 		pressed = e.pointerId;
-		if (current?.onPointerDown?.(e, hitFor(ctx, e), annotationId) === true) capture(e.pointerId);
+		if (current?.onPointerDown?.(e, hit, annotationId) === true) capture(e.pointerId);
+		pressModified = e.shiftKey || e.ctrlKey || e.metaKey || e.altKey;
+		if (reportable && pressed === e.pointerId) presses.down(e, {
+			page: hit.page,
+			point: hit.user,
+			pointerType: pointerTypeOf(e)
+		});
 	};
 	const onMove = (e) => {
 		if (!e.isPrimary || foreign(e)) return;
 		const missed = pressed === e.pointerId && e.buttons === 0;
-		if (missed) pressed = void 0;
+		if (missed) {
+			pressed = void 0;
+			presses.cancel();
+		} else presses.move(e);
 		if (editingMade) {
 			madeEdit?.onPointerMove(e, hitFor(ctx, e));
 			if (missed) editingMade = false;
 			return;
 		}
 		current?.onPointerMove?.(e, hitFor(ctx, e));
-	};
+		if (pressed === void 0) hoverLink(e);
+	};
+	/** Shows the pointer cursor over a link a press would follow (see the top of the file). */
+	function hoverLink(e) {
+		const link = selecting() && !onAnnotation(e.target) ? linkUnder(e) : void 0;
+		hover(link);
+		const over = link !== void 0;
+		if (over === overLink || !current) return;
+		overLink = over;
+		ctx.root.style.cursor = over ? "pointer" : current.cursor;
+	}
+	/** Reports `link` as hovered when it is not already. */
+	function hover(link) {
+		if (link?.id === hovered?.id && link?.page === hovered?.page) return;
+		hovered = link;
+		opts.onLinkHover?.(link);
+	}
+	const onLeave = () => hover(void 0);
+	function linkUnder(e) {
+		if (!opts.linkAt || inCustomContent(e.target)) return void 0;
+		const hit = hitFor(ctx, e);
+		return hit && opts.linkAt(hit.page, hit.user);
+	}
 	const onUp = (e) => {
 		if (!e.isPrimary || e.button !== 0 || foreign(e)) return;
 		if (pressed === e.pointerId) pressed = void 0;
@@ -5706,12 +6411,14 @@ function createToolController$1(opts) {
 			madeEdit?.onPointerUp(e, hitFor(ctx, e));
 		} else current?.onPointerUp?.(e, hitFor(ctx, e));
 		release(e.pointerId);
+		presses.up(e);
 	};
 	const onCancel = (e) => {
 		if (!e.isPrimary || foreign(e)) return;
 		if (e.type === "lostpointercapture" && pressed !== e.pointerId) return;
 		if (pressed === e.pointerId) pressed = void 0;
 		swallow.delete(e.pointerId);
+		presses.cancel();
 		if (editingMade) {
 			editingMade = false;
 			madeEdit?.onPointerCancel();
@@ -5772,11 +6479,13 @@ function createToolController$1(opts) {
 	doc.addEventListener("pointerdown", readAfterEditor, { capture: true });
 	ctx.root.addEventListener("pointerdown", onDown, { capture: true });
 	ctx.root.addEventListener("pointermove", onMove);
+	ctx.root.addEventListener("pointerleave", onLeave);
 	ctx.root.addEventListener("pointerup", onUp);
 	ctx.root.addEventListener("pointercancel", onCancel);
 	ctx.root.addEventListener("lostpointercapture", onCancel);
 	ctx.root.addEventListener("keydown", onKey);
 	ctx.root.addEventListener("keydown", onEditorEscape, { capture: true });
+	ctx.root.addEventListener("touchmove", onTouchMove, { passive: false });
 	const loggedUnknown = /* @__PURE__ */ new Set();
 	function logUnknownOnce(id) {
 		if (loggedUnknown.has(id)) return;
@@ -5790,15 +6499,8 @@ function createToolController$1(opts) {
 			return;
 		}
 		if (options) registry.merge(id, options);
-		if (pressed !== void 0) {
-			if (editingMade) madeEdit?.onPointerCancel();
-			else current?.onPointerCancel?.(new PointerEvent("pointercancel", {
-				pointerId: pressed,
-				isPrimary: true
-			}));
-			swallow.add(pressed);
-			pressed = void 0;
-		}
+		presses.cancel();
+		cancelPressed();
 		editingMade = false;
 		madeEdit?.reset();
 		current?.deactivate();
@@ -5808,8 +6510,24 @@ function createToolController$1(opts) {
 		next.activate(ctx);
 		ctx.root.dataset.inkTool = id;
 		ctx.root.style.cursor = next.cursor;
+		overLink = false;
+		hover(void 0);
+		applyClaim();
 		active.set(id);
 	}
+	/** Ends the live press's gesture, if any, and keeps its release from every tool. */
+	function cancelPressed() {
+		if (pressed === void 0) return;
+		if (editingMade) {
+			editingMade = false;
+			madeEdit?.onPointerCancel();
+		} else current?.onPointerCancel?.(new PointerEvent("pointercancel", {
+			pointerId: pressed,
+			isPrimary: true
+		}));
+		swallow.add(pressed);
+		pressed = void 0;
+	}
 	set(opts.initial ?? "select-text");
 	if (current === void 0 && opts.initial !== void 0 && opts.initial !== "select-text") set("select-text");
 	return {
@@ -5827,20 +6545,24 @@ function createToolController$1(opts) {
 			return registry.readable(id);
 		},
 		destroy() {
+			presses.destroy();
 			madeEdit?.reset();
 			madeEdit = void 0;
 			current?.deactivate();
-			clearMade();
 			current = void 0;
+			clearMade();
 			doc.defaultView?.removeEventListener("pointerdown", readFirst, { capture: true });
 			doc.removeEventListener("pointerdown", readAfterEditor, { capture: true });
 			ctx.root.removeEventListener("pointerdown", onDown, { capture: true });
 			ctx.root.removeEventListener("pointermove", onMove);
+			ctx.root.removeEventListener("pointerleave", onLeave);
+			hover(void 0);
 			ctx.root.removeEventListener("pointerup", onUp);
 			ctx.root.removeEventListener("pointercancel", onCancel);
 			ctx.root.removeEventListener("lostpointercapture", onCancel);
 			ctx.root.removeEventListener("keydown", onKey);
 			ctx.root.removeEventListener("keydown", onEditorEscape, { capture: true });
+			ctx.root.removeEventListener("touchmove", onTouchMove);
 			delete ctx.root.dataset.inkTool;
 			ctx.root.style.cursor = originalCursor;
 		}
@@ -5861,6 +6583,23 @@ function isViewportEnter(e, root) {
 	if (target.matches(".ink-page[data-page]")) return true;
 	return target.closest("[data-ink-text-layer], [data-ink-canvas-layer]") !== null;
 }
+/** True for a target on an annotation, a resize handle or a host's own link. */
+function onAnnotation(target) {
+	if (!(target instanceof Element)) return false;
+	return target.closest("[data-annotation], a[href], [data-handle]") !== null;
+}
+function pointerTypeOf(e) {
+	return e.pointerType === "touch" || e.pointerType === "pen" ? e.pointerType : "mouse";
+}
+/**
+* True when a press on `target` commits an open free-text editor (which has focus while open) or
+* closes an open Inkbar popover (a press outside it does).
+*/
+function dismisses(target, doc) {
+	if (doc.activeElement?.closest("[data-ink-editor]")) return true;
+	const node = target instanceof Node ? target : null;
+	return [...doc.querySelectorAll("[data-ink-popover]")].some((panel) => !panel.hidden && !panel.contains(node));
+}
 /**
 * True for a press on `root` itself outside its client area: on a scroll bar (or its border).
 * Client coordinates only, so a synthetic press gives the same answer as a real one.
@@ -5914,6 +6653,7 @@ function freehandTool(opts) {
 	/** Adds a sample. A release reports 0 pressure, so it repeats the last sample's instead. */
 	const sample = (s, e, release = false) => {
 		const css = clampedCssIn(s.from.host, e);
+		s.travel = Math.max(s.travel, Math.hypot(e.clientX - s.origin.x, e.clientY - s.origin.y));
 		s.css.push(css);
 		s.user.push(s.from.transform.fromCss(css));
 		const p = release ? s.pressure?.[s.pressure.length - 1] : pressureOf(e);
@@ -5956,6 +6696,7 @@ function freehandTool(opts) {
 		label: opts.label,
 		icon: opts.icon,
 		kind: "sticky",
+		claimsTouch: true,
 		cursor: "crosshair",
 		styleGroup: "ink",
 		activate(c) {
@@ -5974,7 +6715,13 @@ function freehandTool(opts) {
 				css: [],
 				user: [],
 				pressure: void 0,
-				startedAt: Date.now()
+				startedAt: Date.now(),
+				pointerType: e.pointerType,
+				origin: {
+					x: e.clientX,
+					y: e.clientY
+				},
+				travel: 0
 			};
 			sample(stroke, e);
 			e.stopPropagation();
@@ -6005,6 +6752,7 @@ function freehandTool(opts) {
 			const end = clampedCssIn(s.from.host, e);
 			if (end.x !== last.x || end.y !== last.y) sample(s, e, true);
 			clear();
+			if (s.pointerType === "touch" && s.travel <= 10) return;
 			opts.commit(ctx, {
 				page: s.from.page,
 				points: s.user,
@@ -7011,44 +7759,55 @@ function annotsOrder(items, widget) {
 	})).sort((a, b) => a.at - b.at || a.i - b.i).map(({ item }) => item);
 }
 /**
-* One page's widget ids in Tab order: `R` reads rows top to bottom and each row left to right,
-* `C` reads columns left to right and each column top to bottom, and `S` follows `structure`
-* (the page's annotation ids in structure-tree order), with widgets the tree leaves out after
-* the rest in `/Annots` order. `W`, `A` or no `/Tabs` keep `/Annots` order. Positions are taken
-* as the page displays, after its `/Rotate`; without `info` the page is read unturned.
+* One page's stops in Tab order: `R` reads rows top to bottom and each row left to right, `C`
+* reads columns left to right and each column top to bottom, and `S` follows `structure` (the
+* page's stop ids in structure-tree order), with stops the tree leaves out after the rest in
+* `/Annots` order. `W` puts widgets first, each group in `/Annots` order; `A` or no `/Tabs`
+* keep `/Annots` order.
 */
-function pageTabOrder(widgets, order, info, page = 0, structure = []) {
-	const listed = annotsOrder(widgets, (w) => w);
-	if (order === "S") {
+function orderStops(items, tabs, structure = []) {
+	const listed = [...items].sort((a, b) => a.index - b.index);
+	if (tabs === "S") {
 		const at = new Map(structure.map((id, i) => [id, i]));
-		return listed.map((w, i) => ({
-			id: w.id,
+		return listed.map((item, i) => ({
+			id: item.id,
 			i,
-			at: at.get(w.id) ?? Infinity
-		})).sort((a, b) => a.at - b.at || a.i - b.i).map((w) => w.id);
+			at: at.get(item.id) ?? Infinity
+		})).sort((a, b) => a.at - b.at || a.i - b.i).map((item) => item.id);
 	}
-	if (order !== "R" && order !== "C") return listed.map((w) => w.id);
+	if (tabs === "W") return [...listed.filter((i) => i.widget), ...listed.filter((i) => !i.widget)].map((i) => i.id);
+	if (tabs !== "R" && tabs !== "C") return listed.map((i) => i.id);
+	return (tabs === "R" ? banded(listed, (b) => b.top, (b) => b.height, (b) => b.left) : banded(listed, (b) => b.left, (b) => b.width, (b) => b.top)).map((p) => p.id);
+}
+/**
+* One page's widget and link ids in Tab order (`orderStops`), so fields and links share one
+* reading order. A link is placed by its first quad, the line it starts on. Positions are taken
+* as the page displays, after its `/Rotate`; without `info` the page is read unturned.
+* `structure` holds the page's annotation ids as PDF.js reports them, which link ids wrap.
+*/
+function pageStopOrder(widgets, links, order, info, page = 0, structure = []) {
 	const transform = createPageTransform(info ?? unturned(page), 1);
-	const placed = listed.map((w, index) => ({
+	const listed = annotsOrder(widgets, (w) => w);
+	const items = [...listed.map((w, i) => ({
 		id: w.id,
-		index,
-		box: transform.toCssRect(w.rect)
-	}));
-	return (order === "R" ? banded(placed, (b) => b.top, (b) => b.height, (b) => b.left) : banded(placed, (b) => b.left, (b) => b.width, (b) => b.top)).map((p) => p.id);
+		box: transform.toCssRect(w.rect),
+		index: w.order ?? i,
+		widget: true
+	})), ...links.map((l, i) => ({
+		id: l.id,
+		box: transform.toCssRect(l.quads?.[0] ? rectFromQuad(l.quads[0]) : l.rect),
+		index: l.order ?? listed.length + i
+	}))];
+	const prefix = importedId(page, "");
+	const ids = new Set(links.map((l) => l.id));
+	return orderStops(items, order, structure.map((id) => ids.has(prefix + id) ? prefix + id : id));
 }
 /**
-* Widget ids in Tab order: pages in order, each by its `/Tabs` (`pageTabOrder`), with
-* `structure` the structure order of each `S` page. A page missing from `pages` is read
-* unturned.
+* One page's widget ids in Tab order (`orderStops`). Positions are taken as the page displays,
+* after its `/Rotate`; without `info` the page is read unturned.
 */
-function tabOrder(fields, tabs, pages = [], structure = /* @__PURE__ */ new Map()) {
-	const byPage = /* @__PURE__ */ new Map();
-	for (const field of fields) for (const w of field.widgets) {
-		const list = byPage.get(w.page) ?? [];
-		list.push(w);
-		byPage.set(w.page, list);
-	}
-	return [...byPage.keys()].sort((a, b) => a - b).flatMap((page) => pageTabOrder(byPage.get(page), tabs.get(page), pages[page], page, structure.get(page)));
+function pageTabOrder(widgets, order, info, page = 0, structure = []) {
+	return pageStopOrder(widgets, [], order, info, page, structure);
 }
 //#endregion
 //#region src/dom/palette.ts
@@ -8028,37 +8787,254 @@ function createFormLayer(opts) {
 	return layer;
 }
 //#endregion
-//#region src/dom/page-mount.ts
-/**
-* Canvas, text layer, form layer, annotation overlay and any plugin layers for one page, stacked
-* in that order.
-*/
-function createPageMount(opts) {
-	const { document, page, host, transform } = opts;
-	const callbacks = (layer) => ({
-		...opts.onError ? { onError: (error) => opts.onError?.(error, layer) } : {},
-		...opts.onRendered ? { onRendered: () => opts.onRendered?.(layer) } : {}
-	});
-	const renderer = createPageRenderer({
-		document,
-		page,
-		host,
-		transform,
-		...opts.devicePixelRatio === void 0 ? {} : { devicePixelRatio: opts.devicePixelRatio },
-		...callbacks("canvas")
-	});
-	const textLayer = createTextLayer({
-		document,
-		page,
-		host,
-		transform,
-		...callbacks("text")
+//#region src/dom/link-layer.ts
+const UNSUPPORTED = "This link is not supported";
+/** The page a Named action goes to from the link's own page, as a reader on it would expect. */
+function namedPage$1(action, page, count) {
+	const to = action === "NextPage" ? page + 1 : action === "PrevPage" ? page - 1 : action === "FirstPage" ? 0 : count - 1;
+	return Math.min(Math.max(to, 0), count - 1);
+}
+/** Draws `page`'s links (`document.links(page)`) over the page in `host`. */
+function createLinkLayer(opts) {
+	const { host, page, document: doc } = opts;
+	const ownerDoc = host.ownerDocument;
+	let transform = opts.transform;
+	let destroyed = false;
+	const element = ownerDoc.createElement("div");
+	element.className = "ink-link-layer";
+	element.dataset.inkLinkLayer = "";
+	element.style.cssText = "position:absolute;inset:0;pointer-events:none;";
+	host.append(element);
+	const name = (e) => {
+		if (e.text) return e.text;
+		const target = e.link.target;
+		if (target.kind === "url") return target.url;
+		if (target.kind === "unsupported" || e.dead) return UNSUPPORTED;
+		return e.to === void 0 ? "Go to link" : `Go to page ${e.to + 1}`;
+	};
+	const place = (el, rect) => {
+		const box = transform.toCssRect(rect);
+		el.style.left = `${box.left}px`;
+		el.style.top = `${box.top}px`;
+		el.style.width = `${box.width}px`;
+		el.style.height = `${box.height}px`;
+	};
+	const follow = (e) => {
+		if (!destroyed && !e.dead && e.link.target.kind !== "unsupported") opts.follow(e.link.target, { from: e.link.page });
+	};
+	/** Marks every piece of a wrapped link while its stop has a visible focus ring. */
+	const markFocus = (e, on) => {
+		for (const { el } of e.pieces) el.toggleAttribute("data-ink-focused", on);
+	};
+	/** Makes a link's stop inert: not followed, not a Tab stop, and titled with why. */
+	const disable = (el) => {
+		el.title = UNSUPPORTED;
+		el.setAttribute("aria-disabled", "true");
+		el.tabIndex = -1;
+	};
+	const readText = (e) => e.pieces.map((p) => opts.textUnder(p.rect).trim()).filter(Boolean).join(" ");
+	const entries = doc.links(page).map((link) => {
+		const target = link.target;
+		const rects = link.quads?.length ? link.quads.map(rectFromQuad) : [link.rect];
+		const e = {
+			link,
+			pieces: [],
+			text: "",
+			dead: false,
+			to: target.kind === "resolved" ? target.dest.page : target.kind === "named" ? namedPage$1(target.action, page, doc.pages.length) : void 0
+		};
+		rects.forEach((rect, i) => {
+			const stop = i === 0;
+			let el;
+			if (stop && target.kind === "url") {
+				const a = ownerDoc.createElement("a");
+				a.href = target.url;
+				el = a;
+			} else {
+				el = ownerDoc.createElement("span");
+				if (!stop) el.setAttribute("aria-hidden", "true");
+				else {
+					el.setAttribute("role", "link");
+					if (target.kind === "unsupported") disable(el);
+					else el.tabIndex = 0;
+				}
+			}
+			el.className = "ink-link";
+			el.dataset.inkLink = link.id;
+			el.style.cssText = "position:absolute;pointer-events:none;";
+			place(el, rect);
+			element.append(el);
+			e.pieces.push({
+				el,
+				rect
+			});
+		});
+		const stop = e.pieces[0].el;
+		stop.setAttribute("aria-label", name(e));
+		stop.addEventListener("click", (ev) => {
+			ev.preventDefault();
+			follow(e);
+		});
+		if (stop.tagName !== "A") stop.addEventListener("keydown", (ev) => {
+			if (ev.key !== "Enter" || ev.defaultPrevented) return;
+			ev.preventDefault();
+			follow(e);
+		});
+		stop.addEventListener("focus", () => markFocus(e, stop.matches(":focus-visible")));
+		stop.addEventListener("blur", () => markFocus(e, false));
+		return e;
 	});
-	const marks = opts.highlights?.mount(page, host, transform);
-	const form = document.form.fields.get().length > 0 ? createFormLayer({
-		host,
-		page,
-		transform,
+	const relabel = () => {
+		if (destroyed) return;
+		for (const e of entries) {
+			e.text = readText(e);
+			e.pieces[0].el.setAttribute("aria-label", name(e));
+		}
+	};
+	relabel();
+	for (const e of entries) {
+		const target = e.link.target;
+		if (target.kind !== "dest") continue;
+		const stop = e.pieces[0].el;
+		const settle = (page) => {
+			if (destroyed) return;
+			if (page === void 0) {
+				e.dead = true;
+				disable(stop);
+			} else e.to = page;
+			stop.setAttribute("aria-label", name(e));
+		};
+		doc.resolveDestination(target.raw).then((dest) => settle(dest?.page), () => settle(void 0));
+	}
+	return {
+		element,
+		update(next) {
+			if (destroyed) return;
+			transform = next;
+			for (const e of entries) for (const p of e.pieces) place(p.el, p.rect);
+		},
+		tabStops() {
+			if (destroyed) return [];
+			return entries.flatMap((e) => {
+				const stop = e.pieces[0].el;
+				return stop.tabIndex >= 0 ? [stop] : [];
+			});
+		},
+		relabel,
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			element.remove();
+		}
+	};
+}
+/** The text runs of `layer` (a text layer), measured once for any number of `textInBox` calls. */
+function textRuns(layer) {
+	const walker = layer.ownerDocument.createTreeWalker(layer, NodeFilter.SHOW_TEXT);
+	const runs = [];
+	for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+		const rect = node.parentElement?.getBoundingClientRect();
+		if (rect) runs.push({
+			node,
+			rect
+		});
+	}
+	return runs;
+}
+/**
+* The text of `runs` (from `textRuns`) whose characters sit in `box`, a client-coordinate box.
+* Runs that lie wholly inside count whole; runs that cross the edge count the characters whose
+* centre is inside, so a link over one word of a line is named by that word.
+*/
+function textInBox(runs, box) {
+	const inside = (x, y) => x >= box.left && x <= box.right && y >= box.top && y <= box.bottom;
+	const parts = [];
+	let range;
+	for (const { node: text, rect: run } of runs) {
+		if (run.right < box.left || run.left > box.right || run.bottom < box.top || run.top > box.bottom) continue;
+		let out = "";
+		if (run.left >= box.left && run.right <= box.right && run.top >= box.top && run.bottom <= box.bottom) out = text.data;
+		else {
+			range ??= text.ownerDocument.createRange();
+			for (let i = 0; i < text.data.length; i++) {
+				range.setStart(text, i);
+				range.setEnd(text, i + 1);
+				const c = range.getBoundingClientRect();
+				if (inside(c.left + c.width / 2, c.top + c.height / 2)) out += text.data[i];
+			}
+		}
+		if (out.trim()) parts.push(out.trim());
+	}
+	return parts.join(" ").replace(/\s+/g, " ");
+}
+//#endregion
+//#region src/dom/page-mount.ts
+/**
+* Canvas, text layer, links, search highlights, form layer, annotation overlay and any plugin
+* layers for one page, stacked in that order.
+*/
+function createPageMount(opts) {
+	const { document, page, host } = opts;
+	let transform = opts.transform;
+	const callbacks = (layer) => ({
+		...opts.onError ? { onError: (error) => opts.onError?.(error, layer) } : {},
+		...opts.onRendered ? { onRendered: () => opts.onRendered?.(layer) } : {}
+	});
+	const renderer = createPageRenderer({
+		document,
+		page,
+		host,
+		transform,
+		...opts.devicePixelRatio === void 0 ? {} : { devicePixelRatio: opts.devicePixelRatio },
+		...callbacks("canvas")
+	});
+	let named = false;
+	const text = callbacks("text");
+	const textLayer = createTextLayer({
+		document,
+		page,
+		host,
+		transform,
+		...text,
+		onRendered: () => {
+			if (!named) {
+				named = true;
+				links?.relabel();
+			}
+			text.onRendered?.();
+		}
+	});
+	let measured;
+	const links = document.links(page).length > 0 ? createLinkLayer({
+		host,
+		page,
+		transform,
+		document,
+		follow: (target, o) => opts.followLink?.(target, o),
+		textUnder: (rect) => {
+			if (!measured) {
+				measured = {
+					runs: textRuns(textLayer.element),
+					origin: host.getBoundingClientRect()
+				};
+				queueMicrotask(() => measured = void 0);
+			}
+			const box = transform.toCssRect(rect);
+			const left = measured.origin.left + box.left;
+			const top = measured.origin.top + box.top;
+			return textInBox(measured.runs, {
+				left,
+				top,
+				right: left + box.width,
+				bottom: top + box.height
+			});
+		}
+	}) : void 0;
+	const marks = opts.highlights?.mount(page, host, transform);
+	const form = document.form.fields.get().length > 0 ? createFormLayer({
+		host,
+		page,
+		transform,
 		document,
 		highlight: opts.formHighlight ?? true,
 		isActive: () => opts.formActive?.() ?? true,
@@ -8078,14 +9054,34 @@ function createPageMount(opts) {
 		...opts.decorate ? { decorate: opts.decorate } : {}
 	});
 	const layers = opts.layers?.mount(page, host, transform);
+	/**
+	* Each stop's place in the page's one order of fields and links, worked out on first use: the
+	* two sit in separate layers, so the order comes from the page, not the DOM.
+	*/
+	let ranks;
+	const rankOf = (stop) => {
+		ranks ??= new Map(pageStopOrder(document.form.fields.get().flatMap((f) => f.widgets.filter((w) => w.page === page)), document.links(page), document.form._tabs.get(page), document.pages[page], page, document.form._structure.get(page)).map((id, i) => [id, i]));
+		const id = stop.dataset.inkLink ?? stop.closest("[data-ink-widget]")?.dataset.inkWidget;
+		return (id === void 0 ? void 0 : ranks.get(id)) ?? Infinity;
+	};
 	return {
 		renderer,
 		textLayer,
 		overlay,
 		form,
+		links,
+		tabStops() {
+			const fields = form?.tabStops() ?? [];
+			const linked = links?.tabStops() ?? [];
+			if (fields.length === 0) return linked;
+			if (linked.length === 0) return fields;
+			return [...fields, ...linked].sort((a, b) => rankOf(a) - rankOf(b));
+		},
 		update(next) {
+			transform = next;
 			renderer.update(next);
 			textLayer.update(next);
+			links?.update(next);
 			overlay.update(next);
 			form?.update(next);
 			layers?.update(next);
@@ -8096,6 +9092,7 @@ function createPageMount(opts) {
 			form?.destroy();
 			overlay.destroy();
 			marks?.destroy();
+			links?.destroy();
 			textLayer.destroy();
 			renderer.destroy();
 		}
@@ -8287,6 +9284,7 @@ function freetextTool() {
 		label: "Text box",
 		icon: Type,
 		kind: "one-shot",
+		claimsTouch: true,
 		cursor: "text",
 		styleGroup: "text",
 		defaultOptions: {},
@@ -8543,6 +9541,7 @@ function redactAreaTool() {
 		label: "Mark for redaction",
 		icon: Square,
 		kind: "one-shot",
+		claimsTouch: true,
 		cursor: "crosshair",
 		styleGroup: "redact",
 		activate(c) {
@@ -8833,6 +9832,7 @@ function shapeTool() {
 		icon: Shapes,
 		kind: "one-shot",
 		cursor: "crosshair",
+		claimsTouch: true,
 		styleGroup: "shape",
 		defaultOptions: { ...DEFAULT_SHAPE_OPTIONS },
 		activate(c) {
@@ -9236,6 +10236,122 @@ function trapTab(e, container) {
 	}
 }
 //#endregion
+//#region src/dom/navigation.ts
+/** The positions kept on each side; past this, the oldest goes. */
+const LIMIT = 50;
+/**
+* Looks `raw` up in `doc` through its cached resolver.
+* `undefined` for anything unreadable, or when the document is not ready.
+*/
+async function resolve(doc, raw) {
+	try {
+		return await doc.resolveDestination(raw);
+	} catch {
+		return;
+	}
+}
+/** The page a Named action goes to from `current`, within `count` pages. */
+function namedPage(action, current, count) {
+	const to = action === "NextPage" ? current + 1 : action === "PrevPage" ? current - 1 : action === "FirstPage" ? 0 : count - 1;
+	return Math.min(Math.max(to, 0), count - 1);
+}
+/** Within a point: closer than that, two positions show the same view. */
+const near = (a, b) => a === void 0 || b === void 0 ? a === b : Math.abs(a - b) <= 1;
+/** Whether `b` is where `a` was, give or take a point of rounding. */
+function samePlace(a, b) {
+	if (!b || a.page !== b.page || a.fit !== b.fit) return false;
+	const p = a;
+	const q = b;
+	return near(p.left, q.left) && near(p.top, q.top);
+}
+function createNavigation(deps) {
+	const backStack = [];
+	const forwardStack = [];
+	const canGoBack = writable(false);
+	const canGoForward = writable(false);
+	const sync = () => {
+		canGoBack.set(backStack.length > 0);
+		canGoForward.set(forwardStack.length > 0);
+	};
+	const push = (stack, dest) => {
+		stack.push(dest);
+		if (stack.length > LIMIT) stack.shift();
+	};
+	const inRange = (page) => {
+		const count = deps.document()?.pages.length ?? 0;
+		return Number.isInteger(page) && page >= 0 && page < count;
+	};
+	/** Pops `from` and goes there, keeping the current position on `to`. Records no jump. */
+	const step = (from, to) => {
+		const vp = deps.viewport();
+		const dest = from.at(-1);
+		if (!vp || !dest) return;
+		from.pop();
+		const here = deps.here();
+		if (here) push(to, here);
+		vp.scrollToDestination(dest);
+		sync();
+	};
+	const goTo = (dest) => {
+		const vp = deps.viewport();
+		if (!vp || !inRange(dest.page)) return;
+		const here = deps.here();
+		vp.scrollToDestination(dest);
+		if (!here || samePlace(here, deps.here())) return;
+		push(backStack, here);
+		forwardStack.length = 0;
+		sync();
+	};
+	return {
+		canGoBack: readonly(canGoBack),
+		canGoForward: readonly(canGoForward),
+		back: () => step(backStack, forwardStack),
+		forward: () => step(forwardStack, backStack),
+		goTo,
+		async follow(target, opts) {
+			switch (target.kind) {
+				case "resolved":
+					goTo(target.dest);
+					return;
+				case "dest": {
+					const doc = deps.document();
+					if (!doc) return;
+					const dest = await resolve(doc, target.raw);
+					if (dest && deps.document() === doc) goTo(dest);
+					return;
+				}
+				case "named": {
+					const vp = deps.viewport();
+					const count = deps.document()?.pages.length ?? 0;
+					if (!vp || count === 0) return;
+					const current = opts?.from ?? vp.currentPage.get();
+					const page = namedPage(target.action, current, count);
+					if (page !== current) goTo({
+						page,
+						fit: "fit"
+					});
+					return;
+				}
+				case "url": {
+					const url = safeUrl(target.url);
+					if (url) deps.report({
+						kind: "open-url",
+						url,
+						newWindow: target.newWindow
+					});
+					return;
+				}
+				case "unsupported": return;
+			}
+		},
+		clear() {
+			backStack.length = 0;
+			forwardStack.length = 0;
+			sync();
+		}
+	};
+}
+//#endregion
 //#region src/dom/search/highlights.ts
 const NO_HITS = [];
 /** One box over the quad: its CSS bounding box, clipped to the quad when it is not upright. */
@@ -9383,6 +10499,7 @@ function mountViewer(opts) {
 	const pages = /* @__PURE__ */ new Map();
 	let gap = opts.gap;
 	let buffer = opts.buffer;
+	let pinchZoom = opts.pinchZoom;
 	let custom = opts.customAnnotations ?? false;
 	let viewport;
 	let tools;
@@ -9412,8 +10529,9 @@ function mountViewer(opts) {
 		tool: opts.tool
 	});
 	const toolStyle = opts.toolStyle ?? tracker.toolStyle;
+	const storage = opts.storage ?? createMemoryStorage();
 	const host = opts.signatureLibrary;
-	const own = host ? void 0 : createSignatureLibrary(opts.signatures ?? createMemorySignatureStore());
+	const own = host ? void 0 : createSignatureLibrary(opts.signatures ?? createStorageSignatureStore(storage));
 	/** The library now: a host getter is read each time, so a swapped library takes effect. */
 	const signatures = () => typeof host === "function" ? host() : host ?? own;
 	signatures().refresh();
@@ -9434,6 +10552,7 @@ function mountViewer(opts) {
 			formHighlight: highlight,
 			formActive: formsActive,
 			onSignField: (req) => opts.onSignField?.(req),
+			followLink: (target, o) => void navigation.follow(target, o),
 			...layers ? { layers } : {},
 			...highlights ? { highlights } : {},
 			onError: (cause, layer) => {
@@ -9461,26 +10580,25 @@ function mountViewer(opts) {
 		return id !== void 0 && FORM_TOOLS.has(id);
 	};
 	/**
-	* The first widget (`last`: the last) in Tab order on each page with a control to stop at,
-	* by page index.
+	* The first stop (`last`: the last) in Tab order on `page`, by its user-space rect, among the
+	* fields with a control to stop at (while fields take input) and the links Inkbar follows.
+	* `widgets` holds those fields' widgets by page.
 	*/
-	function tabEdges(last) {
-		const fields = doc.form.fields.get();
-		const byId = new Map(fields.flatMap((f) => hasControl(f) ? f.widgets.map((w) => [w.id, w]) : []));
+	function tabEdge(page, last, widgets) {
 		const state = doc.form.widgetState.get();
-		const edges = /* @__PURE__ */ new Map();
-		for (const id of tabOrder(fields, doc.form._tabs, doc.pages, doc.form._structure)) {
-			const w = byId.get(id);
-			if (!w || (state[id]?.hidden ?? (w.hidden || w.printOnly))) continue;
-			if (last || !edges.has(w.page)) edges.set(w.page, w);
-		}
-		return edges;
+		const shown = (widgets.get(page) ?? []).filter((w) => !(state[w.id]?.hidden ?? (w.hidden || w.printOnly)));
+		const links = doc.links(page).filter((l) => l.target.kind !== "unsupported");
+		if (shown.length === 0 && links.length === 0) return void 0;
+		const rects = new Map([...shown.map((w) => [w.id, w.rect]), ...links.map((l) => [l.id, l.quads?.[0] ? rectFromQuad(l.quads[0]) : l.rect])]);
+		const order = pageStopOrder(shown, links, doc.form._tabs.get(page), doc.pages[page], page, doc.form._structure.get(page));
+		const id = last ? order.at(-1) : order[0];
+		return id === void 0 ? void 0 : rects.get(id);
 	}
 	/** The page a Tab waits for: its stops were not mounted when the view scrolled to it. */
 	let tabWait;
-	/** The first stop of `page` (`back`: its last), once its form layer is mounted. */
+	/** The first stop of `page` (`back`: its last), once the page is mounted. */
 	const edgeStop = (page, back) => {
-		const stops = pages.get(page)?.form?.tabStops() ?? [];
+		const stops = pages.get(page)?.tabStops() ?? [];
 		return back ? stops.at(-1) : stops[0];
 	};
 	/**
@@ -9515,45 +10633,117 @@ function mountViewer(opts) {
 		tabWait = wait;
 	}
 	/**
-	* Tab on a page's last field stop (Shift+Tab on its first) goes to the first (last) stop of
-	* the next (previous) page that has fields, mounting it and scrolling it into view. A page
-	* that has not mounted once the view scrolls to it gets one more try, when it mounts or on the
-	* next frame; after that, focus moves on as the browser's Tab would. Past the last page's
-	* fields, Tab leaves the viewer as usual.
+	* Tab among a page's fields and links, and across pages. On a page with both, Tab follows the
+	* page's one order of them: they sit in two layers, so the browser's own Tab would visit one
+	* layer and then the other. Tab on a page's last stop (Shift+Tab on its first) goes to the
+	* first (last) stop of the next (previous) page that has any, mounting it and scrolling it
+	* into view. A page that has not mounted once the view scrolls to it gets one more try, when
+	* it mounts or on the next frame; after that, focus moves on as the browser's Tab would. Past
+	* the last page's stops, Tab leaves the viewer as usual.
 	*/
-	function onFormTab(e) {
+	function onPageTab(e) {
 		if (e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey || e.defaultPrevented) return;
 		const target = e.target;
-		if (!(target instanceof Element) || !target.closest("[data-ink-form-layer]")) return;
-		if (!formsActive()) return;
+		if (!(target instanceof HTMLElement) || !target.closest("[data-ink-form-layer], [data-ink-link-layer]")) return;
 		const back = e.shiftKey;
-		const from = [...pages].find(([, m]) => m.form?.element.contains(target));
+		const from = [...pages].find(([, m]) => m.form?.element.contains(target) || m.links?.element.contains(target));
 		if (!from) return;
 		const [page, mount] = from;
-		if (mount.form?.tabStops().at(back ? 0 : -1) !== target) return;
-		const edges = [...tabEdges(back)].filter(([p]) => back ? p < page : p > page).sort(([a], [b]) => back ? b - a : a - b);
-		for (const [next, widget] of edges) {
-			viewport.scrollToRect(next, widget.rect);
+		const stops = mount.tabStops();
+		const at = stops.indexOf(target);
+		if (at < 0) return;
+		const within = stops[back ? at - 1 : at + 1];
+		if (within) {
+			if (mount.form && mount.links) {
+				e.preventDefault();
+				within.focus();
+			}
+			return;
+		}
+		const fields = formsActive() ? doc.form.fields.get() : [];
+		const widgets = /* @__PURE__ */ new Map();
+		for (const f of fields) if (hasControl(f)) for (const w of f.widgets) {
+			const list = widgets.get(w.page) ?? [];
+			list.push(w);
+			widgets.set(w.page, list);
+		}
+		for (let next = page + (back ? -1 : 1); next >= 0 && next < doc.pages.length; next += back ? -1 : 1) {
+			const rect = tabEdge(next, back, widgets);
+			if (!rect) continue;
+			viewport.scrollToRect(next, rect);
 			const to = edgeStop(next, back);
 			if (to) {
 				e.preventDefault();
 				to.focus();
 				return;
 			}
-			if (!pages.get(next)?.form) {
+			if (!pages.has(next)) {
 				e.preventDefault();
 				awaitTabStop(next, back, target);
 				return;
 			}
 		}
 	}
-	el.addEventListener("keydown", onFormTab);
+	el.addEventListener("keydown", onPageTab);
+	/**
+	* The Tab key pressed now, and whether with Shift: set on its keydown, wherever focus is, and
+	* cleared once the browser has moved focus for it, so a pointer press never counts.
+	*/
+	let tabbing;
+	const onTabKey = (e) => {
+		if (e.key !== "Tab") return;
+		const press = { back: e.shiftKey };
+		tabbing = press;
+		setTimeout(() => {
+			if (tabbing === press) tabbing = void 0;
+		});
+	};
+	el.ownerDocument.addEventListener("keydown", onTabKey, true);
+	/**
+	* Tab from outside a page onto its fields and links starts at the page's first stop (Shift+Tab
+	* at its last). The browser enters by DOM order, which on a page with both is the first link or
+	* the last field, so stops before it in the page's order would be skipped.
+	*/
+	function onStopFocus(e) {
+		const target = e.target;
+		if (!tabbing || !(target instanceof HTMLElement)) return;
+		const on = [...pages.values()].find((m) => m.form?.element.contains(target) || m.links?.element.contains(target));
+		if (!on?.form || !on.links) return;
+		const from = e.relatedTarget;
+		if (from instanceof Node && (on.form.element.contains(from) || on.links.element.contains(from))) return;
+		const stops = on.tabStops();
+		if (!stops.includes(target)) return;
+		const edge = tabbing.back ? stops.at(-1) : stops[0];
+		if (edge && edge !== target) edge.focus();
+	}
+	el.addEventListener("focusin", onStopFocus);
+	const reportAction = (a) => (opts.onAction ?? opts.onFormAction)?.(a);
+	/**
+	* History of the jumps made in this document. "Here" is the point the rebuild anchor keeps:
+	* the top-left of the visible area as an `xyz` destination, so Back puts the view where it
+	* was. When that corner is in a gap, `top` is left out and the page lands at its top.
+	*/
+	const navigation = createNavigation({
+		viewport: () => destroyed ? void 0 : viewport,
+		document: () => destroyed ? void 0 : doc,
+		here: () => {
+			const a = scrollAnchor(viewport);
+			return a && {
+				page: a.page,
+				fit: "xyz",
+				left: a.user.x,
+				top: a.vertical ? a.user.y : void 0
+			};
+		},
+		report: reportAction
+	});
 	const stopForm = [
-		doc.form.on("action", (a) => opts.onFormAction?.(a)),
+		doc.form.on("action", reportAction),
 		doc.form.on("alert", (message) => opts.onFormAlert?.(message)),
-		doc.form.on("goto", (page) => {
-			if (!destroyed && page >= 0 && page < doc.pages.length) viewport.scrollToPage(page);
-		})
+		doc.form.on("goto", (page) => navigation.goTo({
+			page,
+			fit: "fit"
+		}))
 	];
 	/**
 	* The page whose open scripts ran last, and has not closed since. Page open and close events
@@ -9628,6 +10818,28 @@ function mountViewer(opts) {
 		el.scrollLeft += o.x + box.left + css.x - corner.x;
 		if (anchor.vertical) el.scrollTop += o.y + box.top + css.y - corner.y;
 	}
+	/**
+	* The link a press at user-space `point` on `page` follows: of the live links whose quads (or
+	* rect, without quads) hold the point, the topmost, which is the last in the file. Unsupported
+	* links are not live, and nor are destinations the page's link layer found go nowhere (it
+	* marks their stop `aria-disabled`).
+	*/
+	function linkAt(vp, page, point) {
+		const host = vp.hostFor(page);
+		const dead = (l) => host?.querySelector(`[data-ink-link-layer] [data-ink-link="${CSS.escape(l.id)}"]`)?.getAttribute("aria-disabled") === "true";
+		const links = doc.links(page);
+		for (let i = links.length - 1; i >= 0; i--) {
+			const l = links[i];
+			if ((l.quads?.length ? l.quads.some((q) => quadContainsPoint(q, point)) : rectContainsPoint(l.rect, point)) && l.target.kind !== "unsupported" && !dead(l)) return l;
+		}
+	}
+	/** The pieces of the hovered link, which carry `data-ink-hover` for the theme's tint. */
+	let hoveredPieces = [];
+	function markHover(vp, link) {
+		for (const piece of hoveredPieces) piece.removeAttribute("data-ink-hover");
+		hoveredPieces = link ? [...vp.hostFor(link.page)?.querySelectorAll(`[data-ink-link-layer] [data-ink-link="${CSS.escape(link.id)}"]`) ?? []] : [];
+		for (const piece of hoveredPieces) piece.setAttribute("data-ink-hover", "");
+	}
 	function build(state) {
 		const vp = createViewport({
 			container: el,
@@ -9637,6 +10849,7 @@ function mountViewer(opts) {
 			...state.rotation === void 0 ? {} : { rotation: state.rotation },
 			...gap === void 0 ? {} : { gap },
 			...buffer === void 0 ? {} : { buffer },
+			...pinchZoom === void 0 ? {} : { pinchZoom },
 			onMount: mountPage,
 			onUpdate: (page, _host, transform) => pages.get(page)?.update(transform),
 			onUnmount: unmountPage
@@ -9646,6 +10859,10 @@ function mountViewer(opts) {
 			...state.tool === void 0 ? {} : { initial: state.tool },
 			tools: list,
 			options: toolOptions,
+			...plugins && { onPress: (kind, press) => plugins.emitPress(kind, press) },
+			linkAt: (page, point) => linkAt(vp, page, point),
+			onLink: (link) => void navigation.follow(link.target, { from: link.page }),
+			onLinkHover: (link) => markHover(vp, link),
 			ctx: {
 				toolStyle,
 				store: doc.annotations,
@@ -9716,8 +10933,10 @@ function mountViewer(opts) {
 		get signatures() {
 			return signatures();
 		},
+		storage,
 		signatureFonts: opts.signatureFonts ? [...opts.signatureFonts] : SIGNATURE_FONTS,
 		pages,
+		navigation,
 		rebuild(next) {
 			if (destroyed) return;
 			const state = {
@@ -9731,6 +10950,7 @@ function mountViewer(opts) {
 			teardown();
 			if (next.gap !== void 0) gap = next.gap;
 			if (next.buffer !== void 0) buffer = next.buffer;
+			if (next.pinchZoom !== void 0) pinchZoom = next.pinchZoom;
 			if (next.customAnnotations !== void 0) custom = next.customAnnotations;
 			build(state);
 		},
@@ -9753,9 +10973,12 @@ function mountViewer(opts) {
 			layers?.destroy();
 			highlights?.destroy();
 			stopRedecorate?.();
-			el.removeEventListener("keydown", onFormTab);
+			el.removeEventListener("keydown", onPageTab);
+			el.ownerDocument.removeEventListener("keydown", onTabKey, true);
+			el.removeEventListener("focusin", onStopFocus);
 			tabWait?.cancel();
 			for (const stop of stopForm) stop();
+			navigation.clear();
 			if (!highlight) delete el.dataset.inkFormHighlight;
 		}
 	};
@@ -11055,9 +12278,9 @@ const passThrough = {
 	react: () => noop
 };
 function createViewer(el, opts) {
-	const { source: initial, assets, password, defaults, history, fields, annotations, plugins, threads: withThreads = true, onReady, onError, onActivate, onBuild, onPageMount, onPageUnmount, onPageError, formHighlight: initialHighlight, toolStyle: _toolStyle, toolOptions: _toolOptions, signatureLibrary: _signatureLibrary, onSignField: _onSignField, onFormAlert: _onFormAlert, signatures: signatureStore, search: _search, ...view } = opts;
+	const { source: initial, assets, password, defaults, history, fields, annotations, plugins, threads: withThreads = true, onReady, onError, onActivate, onBuild, onPageMount, onPageUnmount, onPageError, formHighlight: initialHighlight, toolStyle: _toolStyle, toolOptions: _toolOptions, signatureLibrary: _signatureLibrary, onSignField: _onSignField, onFormAlert: _onFormAlert, signatures: signatureStore, storage = createMemoryStorage(), search: _search, ...view } = opts;
 	/** One library for the viewer's life, so templates and the menu outlive each document. */
-	const signatures = createSignatureLibrary(signatureStore ?? createMemorySignatureStore());
+	const signatures = createSignatureLibrary(signatureStore ?? createStorageSignatureStore(storage));
 	/** Tool options persist for the viewer's life; the tool style is per document. */
 	const toolOptions = createToolOptions();
 	const status = writable({ state: "idle" });
@@ -11066,6 +12289,10 @@ function createViewer(el, opts) {
 	const engine = writable(null);
 	const viewport = writable(null);
 	const tools = writable(null);
+	/** The open document's history, and whether it can move, following each engine. */
+	const navigation = writable(null);
+	const canGoBack = writable(false);
+	const canGoForward = writable(false);
 	/** The activated annotation: the note thread opens from it. */
 	const activated = writable(null);
 	let formHighlight = initialHighlight ?? true;
@@ -11108,6 +12335,7 @@ function createViewer(el, opts) {
 	*/
 	const host = createPluginHost({
 		plugins: plugins ?? [],
+		storage,
 		document: readonly(current),
 		history: () => current.get()?.history ?? passThrough,
 		activated: readonly(activated),
@@ -11188,6 +12416,7 @@ function createViewer(el, opts) {
 			formHighlight,
 			toolOptions,
 			signatureLibrary: signatures,
+			storage,
 			onFormAlert: (message) => formAlert.show(message),
 			onSignField: (req) => {
 				signFieldMenu ??= createSignFieldMenu(viewer, {
@@ -11230,7 +12459,16 @@ function createViewer(el, opts) {
 			}
 		});
 		engine.set(mounted);
+		const nav = mounted.navigation;
+		const stopNav = [nav.canGoBack.subscribe(canGoBack.set), nav.canGoForward.subscribe(canGoForward.set)];
+		canGoBack.set(nav.canGoBack.get());
+		canGoForward.set(nav.canGoForward.get());
+		navigation.set(nav);
 		return () => {
+			for (const s of stopNav) s();
+			navigation.set(null);
+			canGoBack.set(false);
+			canGoForward.set(false);
 			stopForm();
 			releaseFormErrors = () => void 0;
 			signFieldMenu?.close();
@@ -11325,6 +12563,11 @@ function createViewer(el, opts) {
 			formHighlight = on;
 			engine.get()?.setFormHighlight(on);
 		},
+		canGoBack: readonly(canGoBack),
+		canGoForward: readonly(canGoForward),
+		back: () => navigation.get()?.back(),
+		forward: () => navigation.get()?.forward(),
+		follow: async (target) => navigation.get()?.follow(target),
 		commands: { get: (id) => host.command(id) },
 		search: viewerSearch,
 		records: (key) => host.records(key),
@@ -11349,6 +12592,7 @@ function createViewer(el, opts) {
 	internals.set(viewer, {
 		search,
 		host,
+		navigation: readonly(navigation),
 		destroyers,
 		destroyed: () => destroyed
 	});
@@ -11381,6 +12625,15 @@ function pluginHostOf(viewer) {
 	return found.host;
 }
 /**
+* @internal The open document's navigation, `null` while none is ready, for controls that jump
+* (the outline) and so must record history.
+*/
+function navigationOf(viewer) {
+	const found = internals.get(viewer);
+	if (!found) throw new Error("Not a viewer made by createViewer");
+	return found.navigation;
+}
+/**
 * @internal Runs `fn` when the viewer is destroyed, for what a control set up on it; at once
 * when it already is.
 */
@@ -11552,6 +12805,33 @@ function historyButton(viewer, action) {
 	return b;
 }
 /**
+* Returns to where the view was before the last jump (`viewer.back()`): a link, an outline
+* item or a form button that went to a page. Disabled while there is nowhere to go back to.
+*/
+function createBack(viewer) {
+	return navigationButton(viewer, "back");
+}
+/** Goes forward again after `createBack` (`viewer.forward()`); disabled until Back is used. */
+function createForward(viewer) {
+	return navigationButton(viewer, "forward");
+}
+function navigationButton(viewer, action) {
+	const back = action === "back";
+	const b = button(back ? "Back" : "Forward", {
+		class: `ink-${action}`,
+		[`data-ink-${action}`]: ""
+	}, back ? ArrowLeft : ArrowRight);
+	b.addEventListener("click", () => viewer[action]());
+	keepHistoryFocus(b, () => viewer.element.querySelector("[data-ink-scroll]"));
+	const can = back ? viewer.canGoBack : viewer.canGoForward;
+	const show = (on) => {
+		b.disabled = !on;
+	};
+	show(can.get());
+	onViewerDestroy(viewer, can.subscribe(show));
+	return b;
+}
+/**
 * True for `select-text` and `select`, which every viewer registers, and for any other tool id
 * the viewer was given.
 */
@@ -12610,6 +13890,29 @@ function sidebarBadge(badge) {
 	const text = String(badge).trim();
 	return text === "" || text === "0" ? null : text;
 }
+/** The sidebar's widths in CSS px, unless the host gives its own. */
+const SIDEBAR_WIDTH = {
+	default: 320,
+	min: 240,
+	max: 480
+};
+/** The widest the sidebar shows: `max`, and half the container once measured, but never below `min`. */
+const widthLimit = ({ min, max, container }) => container === void 0 ? max : Math.min(max, Math.max(min, Math.floor(container / 2)));
+/** The width the sidebar shows for the wanted `want`. */
+function shownSidebarWidth(want, limits) {
+	return Math.min(Math.max(want, limits.min), widthLimit(limits));
+}
+/** How far an arrow key moves the handle. */
+const KEY_STEP = 16;
+const isThenable = (value) => typeof value?.then === "function";
+/** Calls `fn` on storage so that neither a throw nor a rejection escapes. */
+function quietly(fn, then) {
+	try {
+		const result = fn();
+		if (isThenable(result)) result.then((value) => then?.(value), () => {});
+		else then?.(result);
+	} catch {}
+}
 const TRIGGER = "[data-ink-sidebar-trigger]";
 let count = 0;
 function sameIds(a, b) {
@@ -12637,6 +13940,20 @@ function createSidebarController(opts) {
 	let visible = opts.visible ?? true;
 	/** The options that last gave `onOpenChange`, called as a method of them. */
 	let handler = opts;
+	/** Likewise for `onWidthChange`. */
+	let widthHandler = opts;
+	const storage = opts.storage;
+	const name = opts.name;
+	let defaultWidth = opts.defaultWidth ?? SIDEBAR_WIDTH.default;
+	let minWidth = opts.minWidth ?? SIDEBAR_WIDTH.min;
+	let maxWidth = opts.maxWidth ?? SIDEBAR_WIDTH.max;
+	let widthControlled = opts.width !== void 0;
+	let width = opts.width ?? defaultWidth;
+	let resizing = false;
+	/** The width of the root's parent, once `bindHandle` has measured it. */
+	let container;
+	/** Set by a drag, key or reset: a late answer from storage no longer applies. */
+	let touched = false;
 	/** The trigger that holds the Tab stop in rail and tabs, once one has had focus. */
 	let current = null;
 	let destroyed = false;
@@ -12669,15 +13986,49 @@ function createSidebarController(opts) {
 		side,
 		panels,
 		open: resolve(opts.open !== void 0 ? opts.open : panels[0]?.id ?? null),
-		visible
+		visible,
+		width,
+		resizing
 	});
-	const publish = (open) => store.set({
+	const publish = (open = store.get().open) => store.set({
 		layout,
 		side,
 		panels,
 		open,
-		visible
+		visible,
+		width,
+		resizing
+	});
+	const widthKey = () => `sidebar.${name ?? side}.width`;
+	const limits = () => ({
+		min: minWidth,
+		max: maxWidth,
+		container
+	});
+	const shown = () => shownSidebarWidth(width, limits());
+	const clampWidth = (w) => Math.min(Math.max(w, minWidth), maxWidth);
+	if (!widthControlled && storage) quietly(() => storage.get(widthKey()), (saved) => {
+		if (destroyed || touched || widthControlled || typeof saved !== "number" || !Number.isFinite(saved) || saved <= 0 || saved === width) return;
+		width = saved;
+		publish();
 	});
+	/** A width the user chose: kept and reported when uncontrolled, only reported when controlled. */
+	function chooseWidth(next, save) {
+		touched = true;
+		if (!widthControlled) {
+			if (next !== width) {
+				width = next;
+				publish();
+			}
+			if (save && storage) quietly(() => storage.set(widthKey(), next));
+		}
+		widthHandler.onWidthChange?.(next);
+	}
+	function resetWidth() {
+		if (destroyed) return;
+		chooseWidth(defaultWidth, false);
+		if (!widthControlled && storage) quietly(() => storage.remove(widthKey()));
+	}
 	const isOpen = (id) => store.get().open.includes(id);
 	function update(next) {
 		if (destroyed) return;
@@ -12690,11 +14041,24 @@ function createSidebarController(opts) {
 		if (next.panels !== void 0 && !samePanels(next.panels, panels)) panels = next.panels;
 		if ("onOpenChange" in next) handler = next;
 		if (next.open !== void 0) controlled = true;
+		if ("onWidthChange" in next) widthHandler = next;
+		const shownBefore = shown();
+		const widthBefore = width;
+		const minBefore = minWidth;
+		const limitBefore = widthLimit(limits());
+		if (next.defaultWidth !== void 0) defaultWidth = next.defaultWidth;
+		if (next.minWidth !== void 0) minWidth = next.minWidth;
+		if (next.maxWidth !== void 0) maxWidth = next.maxWidth;
+		if (next.width !== void 0) {
+			widthControlled = true;
+			width = next.width;
+		}
+		const widthChanged = width !== widthBefore || shown() !== shownBefore || minWidth !== minBefore || widthLimit(limits()) !== limitBefore;
 		const arrived = !controlled && before.panels.length === 0 && before.open.length === 0 ? panels[0]?.id : void 0;
 		const asked = next.open !== void 0 ? idsOf(next.open) : arrived !== void 0 ? [arrived] : before.open;
 		let open = resolve(asked);
 		if (!controlled && layout === "tabs" && open.length === 0 && panels[0] !== void 0) open = [panels[0].id];
-		if (pending !== wasPending || layout !== before.layout || side !== before.side || visible !== before.visible || panels !== before.panels || !sameIds(open, before.open)) publish(open);
+		if (pending !== wasPending || layout !== before.layout || side !== before.side || visible !== before.visible || panels !== before.panels || widthChanged || !sameIds(open, before.open)) publish(open);
 		if (!(open.length === new Set(asked).size && open.every((id) => asked.includes(id)))) handler.onOpenChange?.(toValue(open));
 	}
 	function toggle(id) {
@@ -12825,6 +14189,123 @@ function createSidebarController(opts) {
 		bindings.add(unbind);
 		return unbind;
 	}
+	const panelsId = `${prefix}-panels`;
+	function handleAttrs() {
+		const attrs = {
+			"data-ink-sidebar-handle": "",
+			role: "separator",
+			"aria-orientation": "vertical",
+			"aria-label": "Resize sidebar",
+			"aria-valuemin": String(Math.round(minWidth)),
+			"aria-valuemax": String(Math.round(widthLimit(limits()))),
+			"aria-valuenow": String(Math.round(shown())),
+			tabindex: "0"
+		};
+		if (layout !== "stack") attrs["aria-controls"] = panelsId;
+		if (!visible || store.get().open.length === 0) attrs.hidden = "";
+		return attrs;
+	}
+	function bindHandle(el) {
+		/**
+		* The drag under way: its pointer, where it started, the width then, the last one chosen and
+		* whether it has chosen any.
+		*/
+		let drag = null;
+		const wider = () => side === "left" ? 1 : -1;
+		const setResizing = (on) => {
+			if (resizing === on) return;
+			resizing = on;
+			publish();
+		};
+		const onPointerDown = (e) => {
+			if (destroyed || drag) return;
+			if (e.pointerType === "mouse" && e.button !== 0) return;
+			e.preventDefault();
+			try {
+				el.setPointerCapture(e.pointerId);
+			} catch {}
+			drag = {
+				pointer: e.pointerId,
+				x: e.clientX,
+				width: shown(),
+				last: shown(),
+				moved: false
+			};
+			setResizing(true);
+		};
+		/** Ends the drag; saves only when it moved, so a press or a double-click writes nothing. */
+		const endDrag = () => {
+			if (!drag) return;
+			const { moved } = drag;
+			drag = null;
+			setResizing(false);
+			if (moved && !widthControlled && storage) quietly(() => storage.set(widthKey(), width));
+		};
+		const onPointerMove = (e) => {
+			if (!drag || e.pointerId !== drag.pointer) return;
+			if (e.pointerType === "mouse" && e.buttons === 0) return endDrag();
+			const next = clampWidth(drag.width + (e.clientX - drag.x) * wider());
+			if (next === drag.last) return;
+			drag.last = next;
+			drag.moved = true;
+			chooseWidth(next, false);
+		};
+		const onPointerEnd = (e) => {
+			if (drag && e.pointerId === drag.pointer) endDrag();
+		};
+		const onKeyDown = (e) => {
+			if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+			const now = shown();
+			let next;
+			if (e.key === "ArrowRight") next = clampWidth(now + KEY_STEP * wider());
+			else if (e.key === "ArrowLeft") next = clampWidth(now - KEY_STEP * wider());
+			else if (e.key === "Home") next = minWidth;
+			else if (e.key === "End") next = maxWidth;
+			else if (e.key === "Enter") next = null;
+			else return;
+			e.preventDefault();
+			if (next === null) resetWidth();
+			else chooseWidth(next, true);
+		};
+		const onDoubleClick = () => resetWidth();
+		const parent = (el.closest("[data-ink-sidebar]") ?? el.parentElement)?.parentElement;
+		let observer;
+		if (parent && typeof ResizeObserver !== "undefined") {
+			observer = new ResizeObserver((entries) => {
+				const measured = entries[entries.length - 1]?.contentRect.width;
+				if (measured === void 0 || measured === container || destroyed) return;
+				const before = shown();
+				const limitBefore = widthLimit(limits());
+				container = measured;
+				if (shown() !== before || widthLimit(limits()) !== limitBefore) publish();
+			});
+			observer.observe(parent);
+		}
+		el.addEventListener("pointerdown", onPointerDown);
+		el.addEventListener("pointermove", onPointerMove);
+		el.addEventListener("pointerup", onPointerEnd);
+		el.addEventListener("pointercancel", onPointerEnd);
+		el.addEventListener("lostpointercapture", onPointerEnd);
+		el.addEventListener("keydown", onKeyDown);
+		el.addEventListener("dblclick", onDoubleClick);
+		const unbind = () => {
+			if (!bindings.delete(unbind)) return;
+			observer?.disconnect();
+			el.removeEventListener("pointerdown", onPointerDown);
+			el.removeEventListener("pointermove", onPointerMove);
+			el.removeEventListener("pointerup", onPointerEnd);
+			el.removeEventListener("pointercancel", onPointerEnd);
+			el.removeEventListener("lostpointercapture", onPointerEnd);
+			el.removeEventListener("keydown", onKeyDown);
+			el.removeEventListener("dblclick", onDoubleClick);
+			if (drag) {
+				drag = null;
+				if (!destroyed) setResizing(false);
+			}
+		};
+		bindings.add(unbind);
+		return unbind;
+	}
 	const controller = {
 		state: readonly(store),
 		update,
@@ -12835,8 +14316,14 @@ function createSidebarController(opts) {
 			"data-layout": layout,
 			"data-side": side,
 			"data-state": store.get().open.length > 0 || pending && !controlled ? "open" : "closed",
+			...resizing && { "data-resizing": "" },
 			...!visible && { hidden: "" }
 		}),
+		rootStyle: () => ({ "--ink-sidebar-width": `${shown()}px` }),
+		panelsAttrs: () => ({ id: panelsId }),
+		handleAttrs,
+		bindHandle,
+		resetWidth,
 		tablistAttrs,
 		triggerAttrs,
 		panelAttrs,
@@ -12870,6 +14357,8 @@ function createSidebar(opts) {
 	const { content, ...options } = opts;
 	const controller = createSidebarController(options);
 	const root = h("div", { class: "ink-sidebar" });
+	const handle = h("div", { class: "ink-sidebar-handle" });
+	let panelsEl = null;
 	let shape = "";
 	const triggers = /* @__PURE__ */ new Map();
 	const panels = /* @__PURE__ */ new Map();
@@ -12905,6 +14394,7 @@ function createSidebar(opts) {
 		for (const [p, panel] of built) panels.set(p.id, panel);
 		if (s.layout === "stack") {
 			list = null;
+			panelsEl = null;
 			root.replaceChildren(...built.map(([p, panel]) => {
 				const header = makeTrigger(p, "ink-sidebar-header");
 				triggers.set(p.id, header);
@@ -12917,15 +14407,20 @@ function createSidebar(opts) {
 				triggers.set(p.id, t);
 				list.append(t);
 			}
-			root.replaceChildren(list, h("div", { class: "ink-sidebar-panels" }, ...built.map(([, panel]) => panel)));
+			panelsEl = h("div", { class: "ink-sidebar-panels" }, ...built.map(([, panel]) => panel));
+			root.replaceChildren(list, panelsEl);
 		}
+		root.append(handle);
 		paint(s);
 		if (focused !== void 0) triggers.get(focused)?.focus();
 	}
 	/** Attributes, labels and badges, in place: the focused trigger keeps focus. */
 	function paint(s) {
 		setAttrs(root, controller.rootAttrs());
+		for (const [name, value] of Object.entries(controller.rootStyle())) if (root.style.getPropertyValue(name) !== value) root.style.setProperty(name, value);
 		if (list) setAttrs(list, controller.tablistAttrs());
+		if (panelsEl) setAttrs(panelsEl, controller.panelsAttrs());
+		setAttrs(handle, controller.handleAttrs());
 		for (const p of s.panels) {
 			const t = triggers.get(p.id);
 			const panel = panels.get(p.id);
@@ -12959,9 +14454,11 @@ function createSidebar(opts) {
 	show(controller.state.get());
 	const stopState = controller.state.subscribe(show);
 	const unbind = controller.bindTriggers(root);
+	const unbindHandle = controller.bindHandle(handle);
 	onSidebarDestroy(controller, () => {
 		stopState();
 		unbind();
+		unbindHandle();
 	});
 	return {
 		element: root,
@@ -13805,6 +15302,581 @@ function createThumbnails(viewer, opts = {}) {
 	return root;
 }
 //#endregion
+//#region src/dom/outline/controller.ts
+/** How far, in CSS px, the view may drift after a jump before the jumped-to item lets go. */
+const PIN_SLACK = 2;
+/** How long typed characters keep adding to one type-ahead search, in ms. */
+const TYPE_AHEAD_MS = 500;
+let instances = 0;
+const hasChildren = (node) => node.item.children.length > 0;
+/**
+* `role="tree"` and its label, for the element holding an outline's items. The same as a
+* controller's `treeAttrs()`, without one, so markup rendered on the server has them too.
+*/
+function outlineTreeAttrs() {
+	return {
+		role: "tree",
+		"aria-label": "Outline"
+	};
+}
+function createOutlineController(deps) {
+	const prefix = deps.idPrefix ?? `ink-outline-${++instances}`;
+	const domId = (id) => `${prefix}-${id.replaceAll(".", "-")}`;
+	const items = writable([]);
+	const loading = writable(false);
+	const expanded = writable(/* @__PURE__ */ new Set());
+	const current = writable(null);
+	const focused = writable(null);
+	/** Every item, in document order. */
+	let nodes = [];
+	const byId = /* @__PURE__ */ new Map();
+	const byDomId = /* @__PURE__ */ new Map();
+	/** The items with a destination on a laid-out page, in document order, with its y. */
+	let placed = [];
+	/** `suffixMin[i]`: the least y from `placed[i]` on, which never decreases with `i`. */
+	let suffixMin = [];
+	/** The item the reading line has reached, before collapsed ancestors are applied. */
+	let reached = null;
+	let destroyed = false;
+	/** Bumped per document, so an outline read for an earlier one is dropped. */
+	let generation = 0;
+	/** The document the tree's elements live in, once a key or `bindScroll` has shown it. */
+	let ownerDoc = null;
+	/**
+	* The item last jumped to from the outline. It stays current until the reader scrolls away
+	* from where the jump landed (`line`, recorded once the jump settles): a destination centred
+	* in the view, or one sharing a page with later items, may otherwise not be the one the rule
+	* picks there.
+	*/
+	let pin = null;
+	/** Cancels the wait for the jump to settle. */
+	let cancelSettle = null;
+	let typed = "";
+	let typedTimer;
+	function index(roots) {
+		nodes = [];
+		byId.clear();
+		byDomId.clear();
+		const walk = (list, parent) => list.forEach((item, i) => {
+			const node = {
+				item,
+				parent,
+				level: parent ? parent.level + 1 : 1,
+				posinset: i + 1,
+				setsize: list.length
+			};
+			nodes.push(node);
+			byId.set(item.id, node);
+			byDomId.set(domId(item.id), node);
+			walk(item.children, node);
+		});
+		walk(roots, null);
+	}
+	const isExpanded = (node) => expanded.get().has(node.item.id);
+	/** Whether every ancestor of `node` is expanded. */
+	function shown(node) {
+		for (let p = node.parent; p; p = p.parent) if (!isExpanded(p)) return false;
+		return true;
+	}
+	/** The items a reader sees, in order: those whose ancestors are all expanded. */
+	function visible() {
+		const out = [];
+		const walk = (list) => {
+			for (const item of list) {
+				const node = byId.get(item.id);
+				out.push(node);
+				if (isExpanded(node)) walk(item.children);
+			}
+		};
+		walk(items.get());
+		return out;
+	}
+	/** `node`, or its outermost collapsed ancestor when one hides it. */
+	function showing(node) {
+		let out = node;
+		for (let p = node.parent; p; p = p.parent) if (!isExpanded(p)) out = p;
+		return out;
+	}
+	function mark() {
+		current.set(reached ? showing(reached).item.id : null);
+	}
+	/** Places every destination in the current layout. */
+	function place() {
+		const vp = deps.viewport.get();
+		placed = [];
+		if (vp) {
+			const shown = vp.currentPage.get();
+			for (const node of nodes) {
+				const target = node.item.target;
+				if (target.kind !== "resolved") continue;
+				const y = vp.destinationY(target.dest);
+				if (y !== void 0 && Number.isFinite(y)) placed.push({
+					node,
+					y
+				});
+				else if (y === void 0 && target.dest.page !== shown) placed.push({
+					node,
+					y: target.dest.page < shown ? -Infinity : Infinity
+				});
+			}
+		}
+		suffixMin = new Array(placed.length);
+		let least = Infinity;
+		for (let i = placed.length - 1; i >= 0; i--) {
+			least = Math.min(least, placed[i].y);
+			suffixMin[i] = least;
+		}
+	}
+	/**
+	* Finds the last placed item at or above the reading line. The last `i` with
+	* `suffixMin[i] <= line` is that item: nothing after it is at or above the line.
+	*/
+	function reach() {
+		const vp = deps.viewport.get();
+		if (!vp || placed.length === 0) reached = null;
+		else {
+			const line = vp.readingLine.get();
+			let lo = 0;
+			let hi = placed.length;
+			while (lo < hi) {
+				const mid = lo + hi >> 1;
+				if (suffixMin[mid] <= line) lo = mid + 1;
+				else hi = mid;
+			}
+			reached = lo > 0 ? placed[lo - 1].node : null;
+			if (pin && pin.line !== void 0 && Math.abs(line - pin.line) > PIN_SLACK) unpin();
+			if (pin) reached = pin.node;
+		}
+		mark();
+	}
+	/** The item holding the Tab stop: the focused one, else the current one, else the first. */
+	function tabStop() {
+		const f = focused.get();
+		if (f !== null && byId.has(f)) return f;
+		return current.get() ?? nodes[0]?.item.id ?? null;
+	}
+	const elementFor = (id) => ownerDoc?.getElementById(domId(id)) ?? null;
+	/** The item's own row: the item element holds its children too, which can run far below. */
+	const rowFor = (id) => ownerDoc?.getElementById(`${domId(id)}-row`) ?? null;
+	const focusInTree = () => {
+		const active = ownerDoc?.activeElement;
+		return !!active && byDomId.has(active.id);
+	};
+	/** Moves the Tab stop, and focus, to `id`. */
+	function moveTo(id) {
+		focused.set(id);
+		elementFor(id)?.focus();
+	}
+	function setExpanded(next) {
+		const hadFocus = focusInTree();
+		expanded.set(next);
+		const f = focused.get();
+		const node = f === null ? void 0 : byId.get(f);
+		if (node && !shown(node)) {
+			const to = showing(node).item.id;
+			focused.set(to);
+			if (hadFocus) elementFor(to)?.focus();
+		}
+		mark();
+	}
+	function unpin() {
+		pin = null;
+		cancelSettle?.();
+		cancelSettle = null;
+	}
+	/** Runs `fn` once the scroll a jump started has landed: on the next frame. */
+	function afterFrame(fn) {
+		const view = ownerDoc?.defaultView ?? globalThis;
+		if (typeof view.requestAnimationFrame === "function") {
+			const handle = view.requestAnimationFrame(fn);
+			return () => view.cancelAnimationFrame(handle);
+		}
+		const timer = setTimeout(fn, 0);
+		return () => clearTimeout(timer);
+	}
+	function load(doc) {
+		const mine = ++generation;
+		unpin();
+		index([]);
+		items.set([]);
+		expanded.set(/* @__PURE__ */ new Set());
+		focused.set(null);
+		reached = null;
+		place();
+		mark();
+		typed = "";
+		if (!doc) {
+			loading.set(false);
+			return;
+		}
+		loading.set(true);
+		const done = (list) => {
+			if (destroyed || mine !== generation) return;
+			index(list);
+			expanded.set(new Set(nodes.filter((n) => n.item.open && hasChildren(n)).map((n) => n.item.id)));
+			items.set(list);
+			place();
+			reach();
+			loading.set(false);
+		};
+		doc.outline().then(done, () => done([]));
+	}
+	let stopLine = null;
+	function watchViewport(vp) {
+		stopLine?.();
+		stopLine = null;
+		if (vp) {
+			const offLine = vp.readingLine.subscribe(reach);
+			const replace = () => {
+				place();
+				reach();
+			};
+			const offLayout = vp.layout.subscribe(() => {
+				if (pin?.line !== void 0) unpin();
+				replace();
+			});
+			const offPage = vp.currentPage.subscribe(replace);
+			stopLine = () => {
+				offLine();
+				offLayout();
+				offPage();
+			};
+		}
+		place();
+		reach();
+	}
+	const stopDocument = deps.document.subscribe(load);
+	const stopViewport = deps.viewport.subscribe(watchViewport);
+	load(deps.document.get());
+	watchViewport(deps.viewport.get());
+	function toggle(id) {
+		const node = byId.get(id);
+		if (destroyed || !node || !hasChildren(node)) return;
+		const next = new Set(expanded.get());
+		if (!next.delete(id)) next.add(id);
+		setExpanded(next);
+	}
+	function activate(id) {
+		const node = byId.get(id);
+		if (destroyed || !node) return;
+		focused.set(id);
+		const target = node.item.target;
+		const navigation = deps.navigation.get();
+		if (target.kind === "unsupported" || !navigation) return;
+		const follow = navigation.follow(target);
+		if (target.kind !== "resolved") return;
+		unpin();
+		const mine = {
+			node,
+			line: void 0
+		};
+		pin = mine;
+		reach();
+		follow.then(() => {
+			if (pin !== mine) return;
+			cancelSettle = afterFrame(() => {
+				cancelSettle = null;
+				const vp = deps.viewport.get();
+				if (pin !== mine || !vp) return;
+				mine.line = vp.readingLine.get();
+				reach();
+			});
+		});
+	}
+	/** The visible item whose title starts with what was typed, searching on from `from`. */
+	function typeAhead(char, from) {
+		clearTimeout(typedTimer);
+		typed += char.toLowerCase();
+		typedTimer = setTimeout(() => {
+			typed = "";
+		}, TYPE_AHEAD_MS);
+		const list = visible();
+		const at = list.indexOf(from);
+		const start = typed.length === 1 ? at + 1 : at;
+		for (let k = 0; k < list.length; k++) {
+			const node = list[(start + k) % list.length];
+			if (node.item.title.toLowerCase().startsWith(typed)) return node;
+		}
+	}
+	function onKeydown(e) {
+		if (destroyed || e.defaultPrevented || e.isComposing) return;
+		if (e.altKey || e.ctrlKey || e.metaKey) return;
+		const target = e.target;
+		if (target?.ownerDocument) ownerDoc = target.ownerDocument;
+		const el = target && typeof target.closest === "function" ? target.closest("[role=\"treeitem\"]") : null;
+		const stop = tabStop();
+		const node = el && byDomId.get(el.id) || (stop === null ? void 0 : byId.get(stop));
+		if (!node) return;
+		const list = visible();
+		const at = list.indexOf(node);
+		let to;
+		switch (e.key) {
+			case "ArrowDown":
+				to = list[at + 1] ?? node;
+				break;
+			case "ArrowUp":
+				to = list[at - 1] ?? node;
+				break;
+			case "Home":
+				to = list[0];
+				break;
+			case "End":
+				to = list.at(-1);
+				break;
+			case "ArrowRight":
+				to = node;
+				if (hasChildren(node)) {
+					if (!isExpanded(node)) toggle(node.item.id);
+					else to = byId.get(node.item.children[0].id);
+				}
+				break;
+			case "ArrowLeft":
+				to = node;
+				if (hasChildren(node) && isExpanded(node)) toggle(node.item.id);
+				else if (node.parent) to = node.parent;
+				break;
+			case "Enter":
+				e.preventDefault();
+				activate(node.item.id);
+				return;
+			case "*": {
+				const siblings = node.parent ? node.parent.item.children : items.get();
+				const next = new Set(expanded.get());
+				for (const s of siblings) if (s.children.length > 0) next.add(s.id);
+				setExpanded(next);
+				to = node;
+				break;
+			}
+			default:
+				if (e.key.length !== 1 || e.key === " " && typed === "") return;
+				to = typeAhead(e.key, node) ?? node;
+		}
+		e.preventDefault();
+		if (to) moveTo(to.item.id);
+	}
+	/** Scrolls `row` into view inside `scroller` by the least amount; never any ancestor. */
+	function scrollWithin(scroller, row) {
+		const box = scroller.getBoundingClientRect();
+		const r = row.getBoundingClientRect();
+		if (r.top < box.top) scroller.scrollTop -= box.top - r.top;
+		else if (r.bottom > box.bottom) scroller.scrollTop += Math.min(r.bottom - box.bottom, r.top - box.top);
+	}
+	/** The live `bindScroll` bindings, undone by `destroy`. */
+	const bindings = /* @__PURE__ */ new Set();
+	function bindScroll(scroller) {
+		if (destroyed) return () => void 0;
+		ownerDoc = scroller.ownerDocument;
+		const view = ownerDoc.defaultView;
+		/** Set while the current item waits for a hidden list to show. */
+		let pending = false;
+		let frame = 0;
+		function reveal() {
+			const id = current.get();
+			if (id === null) return;
+			const active = ownerDoc?.activeElement;
+			if (active && scroller.contains(active)) return;
+			if (scroller.clientHeight === 0) {
+				pending = true;
+				return;
+			}
+			pending = false;
+			const row = rowFor(id);
+			if (row && scroller.contains(row)) return scrollWithin(scroller, row);
+			if (view) {
+				view.cancelAnimationFrame(frame);
+				frame = view.requestAnimationFrame(() => {
+					const later = current.get() === id ? rowFor(id) : null;
+					if (later && scroller.contains(later)) scrollWithin(scroller, later);
+				});
+			}
+		}
+		const stopCurrent = current.subscribe(reveal);
+		const stopItems = items.subscribe(reveal);
+		const resize = view && "ResizeObserver" in view ? new view.ResizeObserver(() => {
+			if (pending) reveal();
+		}) : null;
+		resize?.observe(scroller);
+		reveal();
+		const unbind = () => {
+			if (!bindings.delete(unbind)) return;
+			stopCurrent();
+			stopItems();
+			resize?.disconnect();
+			if (view) view.cancelAnimationFrame(frame);
+		};
+		bindings.add(unbind);
+		return unbind;
+	}
+	return {
+		items: readonly(items),
+		loading: readonly(loading),
+		expanded: readonly(expanded),
+		current: readonly(current),
+		focused: readonly(focused),
+		toggle,
+		expandAll() {
+			if (destroyed) return;
+			setExpanded(new Set(nodes.filter(hasChildren).map((n) => n.item.id)));
+		},
+		collapseAll() {
+			if (destroyed) return;
+			setExpanded(/* @__PURE__ */ new Set());
+		},
+		activate,
+		treeAttrs: outlineTreeAttrs,
+		titleAttrs: (id) => ({ id: `${domId(id)}-title` }),
+		rowAttrs: (id) => ({ id: `${domId(id)}-row` }),
+		itemAttrs(id) {
+			const node = byId.get(id);
+			return {
+				role: "treeitem",
+				id: domId(id),
+				"aria-level": node ? String(node.level) : void 0,
+				"aria-setsize": node ? String(node.setsize) : void 0,
+				"aria-posinset": node ? String(node.posinset) : void 0,
+				"aria-expanded": node && hasChildren(node) ? String(isExpanded(node)) : void 0,
+				"aria-current": current.get() === id ? "location" : void 0,
+				"aria-disabled": node?.item.target.kind === "unsupported" ? "true" : void 0,
+				"aria-labelledby": `${domId(id)}-title`,
+				tabindex: tabStop() === id ? "0" : "-1"
+			};
+		},
+		onKeydown,
+		bindScroll,
+		destroy() {
+			if (destroyed) return;
+			for (const unbind of [...bindings]) unbind();
+			destroyed = true;
+			unpin();
+			generation++;
+			clearTimeout(typedTimer);
+			stopDocument();
+			stopViewport();
+			stopLine?.();
+			stopLine = null;
+		}
+	};
+}
+//#endregion
+//#region src/dom/outline/outline.ts
+/**
+* The open document's outline as a tree. Give it a height (it fills its parent's) and place it
+* anywhere, a sidebar panel for instance. Clicking an item, or Enter on it, follows it and can be
+* gone back from; its chevron expands and collapses it. The item the reader has reached is
+* marked and kept in view. It stops when the viewer is destroyed.
+*/
+function createOutline(viewer, opts = {}) {
+	const controller = createOutlineController({
+		document: viewer.document,
+		viewport: viewer.viewport,
+		navigation: navigationOf(viewer)
+	});
+	const tree = h("ul", {
+		class: "ink-outline-tree",
+		...controller.treeAttrs()
+	});
+	const empty = h("p", { class: "ink-outline-empty" }, opts.emptyText ?? "This document has no outline");
+	const root = h("div", {
+		class: "ink-outline",
+		"data-ink-outline": ""
+	}, tree, empty);
+	/** Each item's element and, for items with children, its group. */
+	const rows = /* @__PURE__ */ new Map();
+	function build(list, into) {
+		for (const item of list) {
+			const parent = item.children.length > 0;
+			const row = h("li", {
+				class: "ink-outline-item",
+				"data-ink-outline-item": item.id
+			}, h("div", {
+				class: "ink-outline-row",
+				...controller.rowAttrs(item.id)
+			}, parent ? h("span", {
+				class: "ink-outline-toggle",
+				"aria-hidden": "true"
+			}, createIcon(ChevronRight)) : h("span", {
+				class: "ink-outline-spacer",
+				"aria-hidden": "true"
+			}), h("span", {
+				class: "ink-outline-title",
+				...controller.titleAttrs(item.id)
+			}, item.title)));
+			if (item.bold) row.setAttribute("data-bold", "");
+			if (item.italic) row.setAttribute("data-italic", "");
+			row.style.setProperty("--ink-outline-level", String(item.id.split(".").length - 1));
+			let group = null;
+			if (parent) {
+				group = h("ul", {
+					class: "ink-outline-group",
+					role: "group"
+				});
+				build(item.children, group);
+				row.append(group);
+			}
+			rows.set(item.id, {
+				row,
+				group
+			});
+			into.append(row);
+		}
+	}
+	/** Brings every item's attributes and its group's visibility up to date. */
+	function sync() {
+		const open = controller.expanded.get();
+		for (const [id, { row, group }] of rows) {
+			for (const [name, value] of Object.entries(controller.itemAttrs(id))) if (value === void 0) row.removeAttribute(name);
+			else if (row.getAttribute(name) !== value) row.setAttribute(name, value);
+			if (group) group.hidden = !open.has(id);
+		}
+	}
+	/** The empty text shows once a document is read and has no outline. */
+	function status() {
+		const loading = controller.loading.get();
+		const none = controller.items.get().length === 0;
+		tree.hidden = none;
+		empty.hidden = loading || !none;
+		if (loading) root.setAttribute("aria-busy", "true");
+		else root.removeAttribute("aria-busy");
+	}
+	function render() {
+		rows.clear();
+		tree.replaceChildren();
+		build(controller.items.get(), tree);
+		sync();
+		status();
+	}
+	/**
+	* The item whose row holds `target`. Only rows take clicks, as in the bindings: a click on a
+	* group's padding or the item around its row belongs to no item, not to the parent.
+	*/
+	const itemOf = (target) => {
+		const row = target instanceof Element ? target.closest(".ink-outline-row")?.closest("[data-ink-outline-item]") : null;
+		return row && root.contains(row) ? row.dataset.inkOutlineItem ?? null : null;
+	};
+	tree.addEventListener("click", (e) => {
+		const id = itemOf(e.target);
+		if (id === null) return;
+		if (e.target.closest(".ink-outline-toggle")) controller.toggle(id);
+		else controller.activate(id);
+	});
+	tree.addEventListener("keydown", (e) => controller.onKeydown(e));
+	render();
+	const stops = [
+		controller.items.subscribe(render),
+		controller.loading.subscribe(status),
+		controller.expanded.subscribe(sync),
+		controller.current.subscribe(sync),
+		controller.focused.subscribe(sync)
+	];
+	const unbind = controller.bindScroll(root);
+	onViewerDestroy(viewer, () => {
+		unbind();
+		stops.forEach((stop) => stop());
+		controller.destroy();
+	});
+	return root;
+}
+//#endregion
 //#region src/dom/viewer/style-menu.ts
 /** A button that opens the line style menu: weight, solid or dashed, and arrowheads. */
 function createLineStyleMenu(viewer) {
@@ -14501,6 +16573,6 @@ function createHighlightMenu(viewer) {
 	return root;
 }
 //#endregion
-export { ARROWHEAD_CHOICES, ARROWHEAD_ENDING, COLOR_COLUMNS, COLOR_LABELS, DASH_PATTERN, DEFAULT_CORNER_RADIUS, DEFAULT_FREETEXT_WIDTH, DEFAULT_HIGHLIGHT_OPTIONS, DEFAULT_SHAPE_SIZE, FONT_FAMILIES, FORM_LABELS, LINE_WEIGHTS, MARKUP_ICONS, MARKUP_KINDS, MARKUP_LABELS, PALETTE, SHAPE_COLUMNS, SHAPE_ICONS, SHAPE_KINDS, SHAPE_LABELS, SIGNATURE_FONTS, SIGNATURE_IMAGE_MAX_LENGTH, SIGNATURE_IMAGE_MAX_SIDE, SIGNATURE_IMAGE_TYPES, SIGNATURE_LABELS, SIGNATURE_TABS, THUMBNAIL_WIDTH, TOOL_LABELS, ZOOM_LEVELS, allTools, annotationElementFor, arrowheadChoice, attachFileKeys, attachHistoryKeys, attachViewportKeys, clampFontSize, colorMenuModel, computeCssLayout, createColorMenu, createCommandButton, createDownloadButton, createFindBar, createFocusReturn, createFormAlert, createHighlightMenu, createIcon, createImageSignature, createLineStyleMenu, createMenu, createNextPage, createOverlay, createPageCount, createPageInput, createPageMount, createPageRenderer, createPageTransform, createPluginHost, createPluginLayers, createPopover, createPrevPage, createPrintButton, createRecordList, createRecordListController, createRedo, createSearchButton, createSearchController, createSearchResults, createShapeMenu, createSidebar, createSidebarController, createSignFieldMenu, createSignatureDialog, createSignatureDraft, createSignatureMenu, createSignaturePad, createSignaturePreview, createTextLayer, createTextStyleMenu, createThumbnail, createThumbnailPainter, createThumbnails, createThumbnailsController, createToolButton, createToolController, createToolOptions, createToolbar, createToolbarSeparator, createTypedSignature, createUndo, createViewer, createViewport, createZoomIn, createZoomOut, createZoomSelect, cssRectsToUserRects, cssVariableDefaults, definePlugin, downloadDocument, drawTool, editFreeText, findAnnouncer, findCountText, fitZoomCss, focusInitialMenuItem, fontFamilyValue, freetextTool, getSelectionQuads, handleFindKey, handleMenuKeys, handleRadioKeys, handleResultsFieldKey, handleTabKeys, highlightMenuModel, highlightTool, hitFor, isBlankQuery, keepHistoryFocus, lineStyleMenuModel, menuItems, mostVisiblePageCss, mountViewer, normalizeRotation, noteTool, observeAnnotationElement, pageSelectionText, placePanel, printDocument, recordsSource, redactAreaTool, renderAnnotationContent, renderTypedSignature, searchSource, selectTextTool, selectTool, shapeMenuModel, shapeTool, shouldKeepOpenOnAnnotation, sidebarBadge, signField, signatureMenuModel, signaturePreview, signatureTool, sketchTool, textStyleMenuModel, threadDeleteLabel, threadPopoverLabel, thumbnailSize, trackToolStyle, trapTab, unknownCommand, unknownTool, viewerSearchOf, visibleRangeCss, watchDetached, withHostTools };
+export { ARROWHEAD_CHOICES, ARROWHEAD_ENDING, COLOR_COLUMNS, COLOR_LABELS, DASH_PATTERN, DEFAULT_CORNER_RADIUS, DEFAULT_FREETEXT_WIDTH, DEFAULT_HIGHLIGHT_OPTIONS, DEFAULT_SHAPE_SIZE, FONT_FAMILIES, FORM_LABELS, LINE_WEIGHTS, MARKUP_ICONS, MARKUP_KINDS, MARKUP_LABELS, PALETTE, SHAPE_COLUMNS, SHAPE_ICONS, SHAPE_KINDS, SHAPE_LABELS, SIDEBAR_WIDTH, SIGNATURE_FONTS, SIGNATURE_IMAGE_MAX_LENGTH, SIGNATURE_IMAGE_MAX_SIDE, SIGNATURE_IMAGE_TYPES, SIGNATURE_LABELS, SIGNATURE_TABS, THUMBNAIL_WIDTH, TOOL_LABELS, ZOOM_LEVELS, allTools, annotationElementFor, arrowheadChoice, attachFileKeys, attachHistoryKeys, attachTouchPinch, attachTrackpadPinch, attachViewportKeys, clampFontSize, colorMenuModel, computeCssLayout, createBack, createColorMenu, createCommandButton, createDownloadButton, createFindBar, createFocusReturn, createFormAlert, createForward, createHighlightMenu, createIcon, createImageSignature, createLineStyleMenu, createMenu, createNextPage, createOutline, createOutlineController, createOverlay, createPageCount, createPageInput, createPageMount, createPageRenderer, createPageTransform, createPluginHost, createPluginLayers, createPopover, createPrevPage, createPrintButton, createRecordList, createRecordListController, createRedo, createSearchButton, createSearchController, createSearchResults, createShapeMenu, createSidebar, createSidebarController, createSignFieldMenu, createSignatureDialog, createSignatureDraft, createSignatureMenu, createSignaturePad, createSignaturePreview, createTextLayer, createTextStyleMenu, createThumbnail, createThumbnailPainter, createThumbnails, createThumbnailsController, createToolButton, createToolController, createToolOptions, createToolbar, createToolbarSeparator, createTypedSignature, createUndo, createViewer, createViewport, createZoomIn, createZoomOut, createZoomPreview, createZoomSelect, cssRectsToUserRects, cssVariableDefaults, definePlugin, downloadDocument, drawTool, editFreeText, findAnnouncer, findCountText, fitZoomCss, focusInitialMenuItem, fontFamilyValue, freetextTool, getSelectionQuads, handleFindKey, handleMenuKeys, handleRadioKeys, handleResultsFieldKey, handleTabKeys, highlightMenuModel, highlightTool, hitFor, isBlankQuery, keepHistoryFocus, lineStyleMenuModel, menuItems, mostVisiblePageCss, mountViewer, normalizeRotation, noteTool, observeAnnotationElement, outlineTreeAttrs, pageSelectionText, pinchFrame, placePanel, printDocument, recordsSource, redactAreaTool, renderAnnotationContent, renderTypedSignature, searchSource, selectTextTool, selectTool, shapeMenuModel, shapeTool, shouldKeepOpenOnAnnotation, sidebarBadge, signField, signatureMenuModel, signaturePreview, signatureTool, sketchTool, textStyleMenuModel, threadDeleteLabel, threadPopoverLabel, thumbnailSize, trackToolStyle, trapTab, unknownCommand, unknownTool, viewerSearchOf, visibleRangeCss, watchDetached, wheelFactor, withHostTools };
 
 //# sourceMappingURL=dom.mjs.map