@inkbar/react 0.7.0 → 0.8.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, createContext, createElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { InkError, createMemorySignatureStore, createSignatureLibrary, createSnapshotHistory, isAbandonedNote, openDocument, readonly, repliesTo, threadOf, threadRoot, writable } from "@inkbar/core";
-import { COLOR_COLUMNS, FONT_FAMILIES, MARKUP_ICONS, MARKUP_KINDS, SHAPE_COLUMNS, SHAPE_ICONS, SHAPE_KINDS, SIGNATURE_FONTS, SIGNATURE_LABELS, SIGNATURE_TABS, TOOL_LABELS, ZOOM_LEVELS, colorMenuModel, createFocusReturn, createPluginHost, createSearchController, createSignatureDraft, createToolOptions, cssVariableDefaults, findAnnouncer, findCountText, focusInitialMenuItem, fontFamilyValue, handleFindKey, handleMenuKeys, handleRadioKeys, handleTabKeys, highlightMenuModel, lineStyleMenuModel, menuItems, mountViewer, observeAnnotationElement, pageSelectionText, shapeMenuModel, shouldKeepOpenOnAnnotation, signatureMenuModel, signaturePreview, textStyleMenuModel, threadDeleteLabel, threadPopoverLabel, trackToolStyle, unknownCommand, viewerSearchOf } from "@inkbar/core/dom";
+import { InkError, createMemorySignatureStore, createSignatureLibrary, createSnapshotHistory, isAbandonedNote, openDocument, readonly, repliesTo, signField, threadOf, threadRoot, writable } from "@inkbar/core";
+import { COLOR_COLUMNS, FONT_FAMILIES, FORM_LABELS, MARKUP_ICONS, MARKUP_KINDS, SHAPE_COLUMNS, SHAPE_ICONS, SHAPE_KINDS, SIGNATURE_FONTS, SIGNATURE_LABELS, SIGNATURE_TABS, TOOL_LABELS, ZOOM_LEVELS, attachHistoryKeys, colorMenuModel, createFocusReturn, createPluginHost, createSearchController, createSignatureDraft, createToolOptions, cssVariableDefaults, findAnnouncer, findCountText, focusInitialMenuItem, fontFamilyValue, handleFindKey, handleMenuKeys, handleRadioKeys, handleTabKeys, highlightMenuModel, keepHistoryFocus, lineStyleMenuModel, menuItems, mountViewer, observeAnnotationElement, pageSelectionText, shapeMenuModel, shouldKeepOpenOnAnnotation, signatureMenuModel, signaturePreview, textStyleMenuModel, threadDeleteLabel, threadPopoverLabel, trackToolStyle, unknownCommand, viewerSearchOf, watchDetached } from "@inkbar/core/dom";
 import { Dialog, Popover, Select, Slot, Toolbar } from "radix-ui";
 import { createPortal, flushSync } from "react-dom";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -253,6 +253,30 @@ function useCommand(id) {
 	};
 }
 //#endregion
+//#region src/hooks/useForm.ts
+const NO_FIELDS = [];
+const NO_VALUES = Object.freeze({});
+/** The open document's form: its fields, their values, and `set` and `reset`. */
+function useForm() {
+	const { document } = useInkContext("useForm()");
+	const form = document?.form;
+	const fields = useReadable(form?.fields, NO_FIELDS);
+	const values = useReadable(form?.values, NO_VALUES);
+	const actions = useMemo(() => ({
+		set: (v) => form?.set(v),
+		reset: (names) => form?.reset(names)
+	}), [form]);
+	return useMemo(() => ({
+		fields,
+		values,
+		...actions
+	}), [
+		fields,
+		values,
+		actions
+	]);
+}
+//#endregion
 //#region src/use-latest.ts
 /**
 * A ref that always holds the latest render's value, for callbacks that outlive a render
@@ -290,7 +314,7 @@ function isDevelopment() {
 function setTestHook(el, doc) {
 	if (el && isDevelopment()) el.__inkDocument = doc;
 }
-function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsChange, onChange, tool, onToolChange, tools: hostTools, plugins: pluginsProp, decorateAnnotation, fonts: fontsProp, signatures: signatureStore, signatureFonts: signatureFontsProp, page, onPageChange, zoom, onZoomChange, history, asChild = false, onReady, onError, onActivate, children, ref, ...rest }) {
+function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsChange, onChange, fields, onFieldsChange, onFormAction, formHighlight, tool, onToolChange, tools: hostTools, plugins: pluginsProp, decorateAnnotation, fonts: fontsProp, signatures: signatureStore, signatureFonts: signatureFontsProp, page, onPageChange, zoom, onZoomChange, history, asChild = false, onReady, onError, onActivate, children, ref, ...rest }) {
 	const rootElRef = useRef(null);
 	const [rootEl, setRootElState] = useState(null);
 	const setRootEl = useCallback((el) => {
@@ -320,6 +344,9 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		defaults,
 		annotations,
 		controlled: controlledProp,
+		fields,
+		onFieldsChange,
+		onFormAction,
 		history,
 		historyEnabled,
 		onAnnotationsChange,
@@ -336,6 +363,16 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		tool: internalTool,
 		tools
 	});
+	/**
+	* Hands `e` to `onError` one microtask later, as `onFieldsChange` and `onFormAction` are: a
+	* script or a press reports from inside its own work. Dropped once `doc` is no longer open.
+	*/
+	const reportErrorFor = useCallback((doc, e) => {
+		queueMicrotask(() => {
+			if (documentRef.current !== doc) return;
+			flushSync(() => latest.current.onError?.(e));
+		});
+	}, [latest]);
 	const snapshotHistory = useMemo(() => createSnapshotHistory({
 		apply: (list) => documentRef.current?.annotations.replaceAll(list, "history"),
 		enabled: () => latest.current.historyEnabled
@@ -431,6 +468,7 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		/** The plugins told of `opened`, and the snapshot history's hold on its store. */
 		let told = null;
 		let detach = noop;
+		let stopFormErrors = noop;
 		const run = async () => {
 			try {
 				const doc = await openDocument(source, {
@@ -450,6 +488,16 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 								});
 							});
 						}
+					} : { mode: "uncontrolled" },
+					fields: latest.current.fields !== void 0 ? {
+						mode: "controlled",
+						initial: latest.current.fields,
+						onChange: (next, change) => {
+							queueMicrotask(() => {
+								if (cancelled) return;
+								flushSync(() => latest.current.onFieldsChange?.(next, change));
+							});
+						}
 					} : { mode: "uncontrolled" }
 				});
 				if (cancelled) {
@@ -459,6 +507,13 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 				opened = doc;
 				const current = latest.current.annotations;
 				if (doc.annotations.mode === "controlled" && current !== void 0) doc.annotations.setControlledValue(current);
+				const currentFields = latest.current.fields;
+				if (currentFields !== void 0) doc.form.setControlledValue(currentFields);
+				let held = [];
+				stopFormErrors = doc.form.on("error", (e) => {
+					if (held) held.push(e);
+					else reportErrorFor(doc, e);
+				});
 				documentRef.current = doc;
 				if (doc.annotations.mode === "controlled") detach = snapshotHistory.attach(doc.annotations);
 				told = plugins;
@@ -467,8 +522,14 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 				setOverride(null);
 				setTestHook(rootElRef.current, doc);
 				const s = doc.status.get();
-				if (s.state === "ready") latest.current.onReady?.(doc);
-				else if (s.state === "error") latest.current.onError?.(s.error);
+				try {
+					if (s.state === "ready") latest.current.onReady?.(doc);
+					else if (s.state === "error") latest.current.onError?.(s.error);
+				} finally {
+					const early = held;
+					held = void 0;
+					for (const e of early) reportErrorFor(doc, e);
+				}
 			} catch (cause) {
 				if (cancelled) return;
 				const error = cause instanceof InkError ? cause : new InkError("InvalidPdf", cause instanceof Error ? cause.message : String(cause), {}, cause);
@@ -486,6 +547,7 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 			cancelled = true;
 			told?.document.set(null);
 			detach();
+			stopFormErrors();
 			opened?.destroy();
 			documentRef.current = null;
 			setDocument(null);
@@ -496,11 +558,15 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		password,
 		snapshotHistory,
 		latest,
-		plugins
+		plugins,
+		reportErrorFor
 	]);
 	useLayoutEffect(() => {
 		if (annotations && document?.annotations.mode === "controlled") document.annotations.setControlledValue(annotations);
 	}, [annotations, document]);
+	useLayoutEffect(() => {
+		if (fields && document) document.form.setControlledValue(fields);
+	}, [fields, document]);
 	useEffect(() => {
 		if (tool) setInternalTool(tool);
 	}, [tool]);
@@ -512,6 +578,16 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 	}, [latest]);
 	const reportZoom = useCallback((z) => latest.current.onZoomChange?.(z), [latest]);
 	const reportPage = useCallback((p) => latest.current.onPageChange?.(p), [latest]);
+	const reportFormAction = useCallback((a) => {
+		const doc = documentRef.current;
+		queueMicrotask(() => {
+			if (documentRef.current !== doc) return;
+			flushSync(() => latest.current.onFormAction?.(a));
+		});
+	}, [latest]);
+	const reportError = useCallback((e) => {
+		if (documentRef.current) reportErrorFor(documentRef.current, e);
+	}, [reportErrorFor]);
 	const setViewport = useCallback((vp, tc) => {
 		viewportRef.current = vp;
 		setViewportState(vp);
@@ -545,6 +621,31 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		pluginHistory
 	]);
 	const latestHistory = useLatest(inkHistory);
+	useEffect(() => {
+		if (!rootEl) return;
+		const stopKeys = attachHistoryKeys(rootEl, () => {
+			const doc = documentRef.current;
+			if (!doc) return null;
+			const snap = doc.annotations.mode === "controlled";
+			const on = latest.current.historyEnabled;
+			return {
+				canUndo: snap ? on && snapshotHistory.canUndo.get() : doc.history.canUndo.get(),
+				canRedo: snap ? on && snapshotHistory.canRedo.get() : doc.history.canRedo.get(),
+				undo: () => latestHistory.current.undo(),
+				redo: () => latestHistory.current.redo()
+			};
+		});
+		const stopFocus = keepHistoryFocus(rootEl, () => rootEl.querySelector("[data-ink-scroll]"));
+		return () => {
+			stopKeys();
+			stopFocus();
+		};
+	}, [
+		rootEl,
+		latestHistory,
+		latest,
+		snapshotHistory
+	]);
 	/** The document's tool style; it batches through `history`, whichever mode is on. */
 	const styleTracker = useMemo(() => document ? trackToolStyle({
 		store: document.annotations,
@@ -624,7 +725,10 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		viewportEl: plugins.root,
 		history: inkHistory,
 		rootEl,
-		setViewport
+		setViewport,
+		formHighlight,
+		reportFormAction,
+		reportError
 	}), [
 		assets,
 		document,
@@ -654,7 +758,10 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		plugins,
 		inkHistory,
 		rootEl,
-		setViewport
+		setViewport,
+		formHighlight,
+		reportFormAction,
+		reportError
 	]);
 	useEffect(() => {
 		if (!rootEl || !search) return;
@@ -687,6 +794,77 @@ function cx(...parts) {
 	return out === "" ? void 0 : out;
 }
 //#endregion
+//#region src/components/InkFormAlert.tsx
+function InkFormAlert({ message, shown, fallback, onClose }) {
+	const uid = useId();
+	const panel = useRef(null);
+	const ok = useRef(null);
+	/** Where focus was when the alert opened. */
+	const returnTo = useRef(null);
+	const open = message !== null;
+	const wasOpen = useRef(false);
+	useLayoutEffect(() => {
+		if (!open) {
+			wasOpen.current = false;
+			return;
+		}
+		if (!wasOpen.current) {
+			wasOpen.current = true;
+			const active = document.activeElement;
+			returnTo.current = active instanceof HTMLElement && active !== document.body ? active : null;
+		}
+		ok.current?.focus({ preventScroll: true });
+	}, [open, shown]);
+	const close = () => {
+		const hadFocus = !!panel.current?.contains(document.activeElement);
+		onClose();
+		if (!hadFocus) return;
+		(returnTo.current?.isConnected === true ? returnTo.current : fallback())?.focus({ preventScroll: true });
+	};
+	if (!open) return null;
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		ref: panel,
+		role: "alertdialog",
+		"aria-labelledby": `${uid}-title`,
+		"aria-describedby": `${uid}-message`,
+		className: "ink-dialog ink-form-alert",
+		"data-ink-form-alert": "",
+		"data-state": "open",
+		tabIndex: -1,
+		onKeyDown: (e) => {
+			if (e.key !== "Escape" || e.defaultPrevented) return;
+			e.preventDefault();
+			e.stopPropagation();
+			close();
+		},
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				id: `${uid}-title`,
+				className: "ink-dialog-title",
+				children: FORM_LABELS.alert
+			}),
+			/* @__PURE__ */ jsx("p", {
+				id: `${uid}-message`,
+				className: "ink-form-alert-message",
+				"data-ink-form-alert-message": "",
+				children: message
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "ink-dialog-actions",
+				children: /* @__PURE__ */ jsx("button", {
+					ref: ok,
+					type: "button",
+					className: "ink-button",
+					"data-variant": "primary",
+					"data-ink-form-alert-ok": "",
+					onClick: close,
+					children: FORM_LABELS.ok
+				})
+			})
+		]
+	}), document.body);
+}
+//#endregion
 //#region src/components/InkAnnotation.tsx
 function readState(el) {
 	const s = el.dataset.state;
@@ -782,245 +960,214 @@ function InkPage({ page, host, mount, error, customAnnotations = false, renderAn
 	}), t.el, t.annotation.id)) : null] });
 }
 //#endregion
-//#region src/components/InkViewport.tsx
-function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2, loading, empty, error, renderAnnotation, renderPageError, className, ...rest }) {
-	const ctx = useInkContext("InkViewport");
-	const scroll = useRef(null);
-	const custom = !!renderAnnotation;
-	const latest = useLatest({
-		ctx,
-		mode,
-		rotation,
-		gap,
-		buffer,
-		custom
+//#region src/components/InkSignatureDialog.tsx
+function InkSignatureDialog({ open, onOpenChange, fonts, select = true, onSave, onCloseAutoFocus, className }) {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
+			className: "ink-dialog-overlay",
+			"data-ink-dialog-overlay": ""
+		}), /* @__PURE__ */ jsxs(Dialog.Content, {
+			className: cx("ink-dialog ink-signature-dialog", className),
+			"data-ink-signature-dialog": "",
+			"aria-modal": "true",
+			"aria-describedby": void 0,
+			onOpenAutoFocus: (e) => {
+				e.preventDefault();
+				e.currentTarget.querySelector("[role=\"tab\"][aria-selected=\"true\"]")?.focus({ preventScroll: true });
+			},
+			onCloseAutoFocus,
+			children: [/* @__PURE__ */ jsx(Dialog.Title, {
+				className: "ink-dialog-title",
+				children: SIGNATURE_LABELS.dialog
+			}), /* @__PURE__ */ jsx(SignatureForm, {
+				fonts,
+				select,
+				onSave,
+				onClose: () => onOpenChange(false)
+			})]
+		})] })
 	});
-	const engine = useRef(null);
-	/** Page hosts, mounts and errors the engine reported; InkPage renders portals for them. */
-	const [pages, setPages] = useState([]);
-	/**
-	* Numbered before each build starts, so the pages a build mounts carry its own number. A
-	* rebuild gives each page a new host and mount, so pages from an earlier build must remount,
-	* not be reused.
-	*/
-	const buildCount = useRef(0);
-	/** The construction options the engine was last built with, so a rebuild runs only on a change. */
-	const builtWith = useRef(null);
-	/** The zoom and page last reported to the host. */
-	const lastReportedZoom = useRef(void 0);
-	const lastReportedPage = useRef(void 0);
+}
+const IDLE = {
+	tab: "draw",
+	padEmpty: true,
+	name: "",
+	font: "",
+	image: void 0,
+	imageError: void 0,
+	saveError: void 0,
+	canSave: false,
+	saving: false
+};
+/** The dialog's body, mounted while it is open: one draft per opening. */
+function SignatureForm({ fonts, select, onSave, onClose }) {
+	const ctx = useInkContext("InkSignatureDialog");
+	const { setTool } = useTool();
+	const [, setOptions] = useToolOptions("signature");
+	const [draft] = useState(() => createSignatureDraft({ fonts: fonts ?? ctx.signatureFonts }));
+	const s = useReadable(draft.state, IDLE);
+	const uid = useId();
+	const padHost = useRef(null);
 	useEffect(() => {
-		const { ctx: c, mode: m, rotation: r, gap: g, buffer: b, custom: cu } = latest.current;
-		const doc = c.document;
-		const el = scroll.current;
-		lastReportedZoom.current = void 0;
-		lastReportedPage.current = void 0;
-		if (!doc || !el || c.status.state !== "ready") return;
-		let first = true;
-		let stops = [];
-		buildCount.current += 1;
-		builtWith.current = {
-			gap: g,
-			buffer: b,
-			custom: cu
-		};
-		const e = mountViewer({
-			container: el,
-			document: doc,
-			zoom: c.zoomModel ?? "fit-width",
-			...c.pageModel === void 0 ? {} : { page: c.pageModel },
-			mode: m,
-			rotation: r,
-			gap: g,
-			buffer: b,
-			tool: c.tool,
-			...c.hostTools ? { tools: c.hostTools } : {},
-			...c.pluginHost ? { plugins: c.pluginHost } : {},
-			...c.search ? { search: c.search } : {},
-			decorateAnnotation: (a) => latest.current.ctx.decorateAnnotation(a),
-			...c.toolStyle ? { toolStyle: c.toolStyle } : {},
-			toolHistory: { batch: (fn) => latest.current.ctx.history.batch(fn) },
-			toolOptions: c.toolOptions,
-			fonts: [...c.fonts],
-			signatureLibrary: () => latest.current.ctx.signatures,
-			customAnnotations: cu,
-			onActivate: (id) => latest.current.ctx.setActivated(id),
-			onBuild: (vp, tc) => {
-				latest.current.ctx.setViewport(vp, tc);
-				if (first) {
-					first = false;
-					lastReportedZoom.current = vp.zoom.get();
-					lastReportedPage.current = 0;
-				}
-				for (const stop of stops) stop();
-				const reportZoom = (z) => {
-					if (z === lastReportedZoom.current) return;
-					lastReportedZoom.current = z;
-					latest.current.ctx.reportZoom(z);
-				};
-				const reportPage = (p) => {
-					if (p === lastReportedPage.current) return;
-					lastReportedPage.current = p;
-					latest.current.ctx.reportPage(p);
-				};
-				const followTool = (id) => {
-					if (id !== latest.current.ctx.tool) latest.current.ctx.setTool(id);
-				};
-				stops = [
-					vp.zoom.subscribe(reportZoom),
-					vp.currentPage.subscribe(reportPage),
-					tc.active.subscribe(followTool)
-				];
-				reportZoom(vp.zoom.get());
-				reportPage(vp.currentPage.get());
-			},
-			onPageMount: (page, mount, host) => {
-				const build = buildCount.current;
-				const custom = builtWith.current?.custom ?? false;
-				setPages((prev) => [...prev, {
-					build,
-					page,
-					host,
-					mount,
-					error: null,
-					custom
-				}]);
-			},
-			onPageUnmount: (page) => setPages((prev) => prev.filter((p) => p.page !== page)),
-			onPageError: (page, err) => setPages((prev) => prev.map((p) => p.page === page ? {
-				...p,
-				error: err
-			} : p))
-		});
-		engine.current = e;
-		return () => {
-			for (const stop of stops) stop();
-			e.destroy();
-			engine.current = null;
-			builtWith.current = null;
-			c.setViewport(null, null);
-			setPages((prev) => prev.length === 0 ? prev : []);
-		};
-	}, [
-		ctx.document,
-		ctx.status.state,
-		ctx.pluginHost,
-		ctx.search,
-		latest
-	]);
-	const { viewportEl } = ctx;
-	useLayoutEffect(() => {
-		const el = scroll.current;
-		viewportEl.set(el);
+		const host = padHost.current;
+		const detach = host ? draft.attachPad(host) : void 0;
 		return () => {
-			if (viewportEl.get() === el) viewportEl.set(null);
-		};
-	}, [viewportEl]);
-	const { onDecorateAnnotationChange } = ctx;
-	useEffect(() => onDecorateAnnotationChange(() => engine.current?.redecorate()), [onDecorateAnnotationChange]);
-	useEffect(() => {
-		const built = builtWith.current;
-		if (!engine.current || !built) return;
-		if (built.gap === gap && built.buffer === buffer && built.custom === custom) return;
-		buildCount.current += 1;
-		builtWith.current = {
-			gap,
-			buffer,
-			custom
+			detach?.();
+			draft.destroy();
 		};
-		engine.current.rebuild({
-			gap,
-			buffer,
-			customAnnotations: custom
-		});
-	}, [
-		gap,
-		buffer,
-		custom
-	]);
-	useEffect(() => {
-		const vp = engine.current?.viewport;
-		const z = ctx.zoomModel;
-		if (vp && z !== void 0 && z !== vp.zoom.get()) vp.setZoom(z);
-	}, [ctx.zoomModel]);
-	useEffect(() => {
-		const vp = engine.current?.viewport;
-		const p = ctx.pageModel;
-		if (!vp || p === void 0 || p === lastReportedPage.current) return;
-		if (p !== vp.currentPage.get()) vp.scrollToPage(p);
-	}, [ctx.pageModel]);
-	useEffect(() => {
-		const tc = engine.current?.tools;
-		if (tc && tc.active.get() !== ctx.tool) tc.set(ctx.tool);
-	}, [ctx.tool]);
-	useEffect(() => {
-		const vp = engine.current?.viewport;
-		if (vp && vp.mode.get() !== mode) vp.setMode(mode);
-	}, [mode]);
-	useEffect(() => {
-		const vp = engine.current?.viewport;
-		if (vp && vp.rotation.get() !== rotation) vp.setRotation(rotation);
-	}, [rotation]);
-	const state = ctx.status.state;
-	const err = ctx.status.state === "error" ? ctx.status.error : null;
-	return /* @__PURE__ */ jsxs("div", {
-		...rest,
-		className: cx("ink-viewport-root", className),
-		"data-ink-viewport-root": "",
-		"data-state": state,
-		children: [
-			state === "loading" ? /* @__PURE__ */ jsx("div", {
-				className: "ink-status",
-				role: "status",
-				"aria-live": "polite",
-				children: loading === void 0 ? "Loading document…" : loading
-			}) : err ? /* @__PURE__ */ jsx("div", {
-				className: "ink-status ink-error",
-				role: "alert",
-				children: typeof error === "function" ? error({ error: err }) : error !== void 0 ? error : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
-					className: "ink-error-title",
-					children: "This document could not be opened."
-				}), /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("code", {
-					className: "ink-error-code",
-					title: err.message,
-					children: err.code
-				}) })] })
-			}) : state === "idle" ? /* @__PURE__ */ jsx("div", {
-				className: "ink-status ink-empty",
-				children: empty
-			}) : null,
-			/* @__PURE__ */ jsx("div", {
-				ref: scroll,
-				className: "ink-scroll",
-				"data-ink-scroll": "",
-				tabIndex: 0,
-				role: "document",
-				"aria-label": "Document"
-			}),
-			pages.map((p) => /* @__PURE__ */ jsx(InkPage, {
-				page: p.page,
-				host: p.host,
-				mount: p.mount,
-				error: p.error,
-				customAnnotations: p.custom,
-				renderAnnotation,
-				renderPageError
-			}, `${p.build}:${p.page}`))
-		]
-	});
-}
-//#endregion
-//#region src/components/InkToolbar.tsx
-function InkToolbar({ label = "Document tools", asChild = false, className, children, ...rest }) {
-	return /* @__PURE__ */ jsx(Toolbar.Root, {
-		asChild,
-		orientation: "horizontal",
-		"aria-label": label,
-		"data-ink-toolbar": "",
-		className: cx("ink-toolbar", className),
-		...rest,
-		children
+	}, [draft]);
+	const save = () => {
+		draft.save(ctx.signatures).then((t) => {
+			if (!t) return;
+			if (select) {
+				setOptions({ templateId: t.id });
+				setTool("signature");
+			}
+			onSave?.(t);
+			onClose();
+		}, () => {});
+	};
+	const tabId = (tab) => `${uid}-tab-${tab}`;
+	const panelId = (tab) => `${uid}-panel-${tab}`;
+	const panel = (tab) => ({
+		role: "tabpanel",
+		id: panelId(tab),
+		"aria-labelledby": tabId(tab),
+		className: "ink-tab-panel",
+		"data-key": tab,
+		hidden: s.tab !== tab
 	});
+	const shown = s.name.trim() || SIGNATURE_LABELS.namePlaceholder;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("div", {
+			role: "tablist",
+			"aria-label": SIGNATURE_LABELS.tabs,
+			className: "ink-tabs",
+			onKeyDown: (e) => handleTabKeys(e.nativeEvent, e.currentTarget),
+			children: SIGNATURE_TABS.map((tab) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "tab",
+				id: tabId(tab),
+				"aria-controls": panelId(tab),
+				"aria-selected": s.tab === tab,
+				tabIndex: s.tab === tab ? 0 : -1,
+				className: "ink-tab",
+				"data-key": tab,
+				"data-state": s.tab === tab ? "active" : "inactive",
+				onClick: () => draft.setTab(tab),
+				children: SIGNATURE_LABELS[tab]
+			}, tab))
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			...panel("draw"),
+			children: [/* @__PURE__ */ jsx("div", {
+				ref: padHost,
+				className: "ink-signature-pad-host",
+				"data-ink-signature-pad-host": "",
+				role: "img",
+				"aria-label": SIGNATURE_LABELS.pad
+			}), /* @__PURE__ */ jsx("div", {
+				className: "ink-dialog-row",
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "ink-button",
+					"data-ink-signature-clear": "",
+					disabled: s.padEmpty,
+					onClick: () => draft.clearPad(),
+					children: SIGNATURE_LABELS.clear
+				})
+			})]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			...panel("type"),
+			children: [/* @__PURE__ */ jsxs("label", {
+				className: "ink-field",
+				children: [/* @__PURE__ */ jsx("span", { children: SIGNATURE_LABELS.name }), /* @__PURE__ */ jsx("input", {
+					type: "text",
+					className: "ink-input",
+					"data-ink-signature-name": "",
+					autoComplete: "name",
+					placeholder: SIGNATURE_LABELS.namePlaceholder,
+					value: s.name,
+					onChange: (e) => draft.setName(e.target.value)
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				role: "radiogroup",
+				"aria-label": SIGNATURE_LABELS.fonts,
+				className: "ink-signature-fonts",
+				onKeyDown: (e) => handleRadioKeys(e.nativeEvent, e.currentTarget),
+				children: draft.fonts.map((font) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					role: "radio",
+					"aria-checked": s.font === font,
+					"aria-label": font,
+					tabIndex: s.font === font ? 0 : -1,
+					className: "ink-signature-font",
+					"data-key": font,
+					"data-state": s.font === font ? "checked" : "unchecked",
+					onClick: () => draft.setFont(font),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "ink-signature-font-sample",
+						style: { fontFamily: fontFamilyValue(font) },
+						children: shown
+					})
+				}, font))
+			})]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			...panel("image"),
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "ink-field",
+					children: [/* @__PURE__ */ jsx("span", { children: SIGNATURE_LABELS.file }), /* @__PURE__ */ jsx("input", {
+						type: "file",
+						accept: "image/png,image/jpeg",
+						className: "ink-input",
+						"data-ink-signature-file": "",
+						onChange: (e) => void draft.chooseFile(e.target.files?.[0])
+					})]
+				}),
+				s.image?.kind === "image" ? /* @__PURE__ */ jsx("img", {
+					className: "ink-signature-image",
+					src: s.image.imagedata,
+					alt: ""
+				}) : null,
+				s.imageError ? /* @__PURE__ */ jsx("p", {
+					className: "ink-field-error",
+					role: "alert",
+					children: s.imageError
+				}) : null
+			]
+		}),
+		s.saveError ? /* @__PURE__ */ jsx("p", {
+			className: "ink-field-error",
+			role: "alert",
+			"data-ink-signature-save-error": "",
+			children: s.saveError
+		}) : null,
+		/* @__PURE__ */ jsxs("div", {
+			className: "ink-dialog-actions",
+			children: [/* @__PURE__ */ jsx(Dialog.Close, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "ink-button",
+					"data-ink-signature-cancel": "",
+					children: SIGNATURE_LABELS.cancel
+				})
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "ink-button",
+				"data-variant": "primary",
+				"data-ink-signature-save": "",
+				disabled: !s.canSave,
+				onClick: save,
+				children: SIGNATURE_LABELS.save
+			})]
+		})
+	] });
 }
 //#endregion
 //#region src/components/InkIcon.tsx
@@ -1041,1014 +1188,1270 @@ function InkIcon({ icon, size = 18 }) {
 	});
 }
 //#endregion
-//#region src/components/InkToolButton.tsx
-const ICONS = {
-	"select-text": TextCursor,
-	select: SquareDashedMousePointer,
-	highlight: Highlighter,
-	"redact-area": Square,
-	sketch: PenTool,
-	draw: PenLine,
-	note: MessageSquare,
-	freetext: Type,
-	signature: Signature
-};
-function InkToolButton({ tool, label, asChild = false, className, children, onClick, ...rest }) {
-	const { hostTools, pluginHost } = useInkContext("InkToolButton");
-	const { tool: current, setTool } = useTool();
-	const active = current === tool;
-	/** A host or plugin tool by this id, for the name and icon core has none for. */
-	const own = [...hostTools ?? [], ...pluginHost?.tools ?? []].find((t) => t.id === tool);
-	const name = label ?? TOOL_LABELS[tool] ?? own?.label ?? tool;
-	const icon = ICONS[tool] ?? own?.icon;
-	return /* @__PURE__ */ jsx(Toolbar.Button, {
-		asChild,
-		className: cx("ink-tool-button", className),
-		"data-ink-tool-button": "",
-		"data-tool": tool,
-		"data-state": active ? "on" : "off",
-		"aria-pressed": active,
-		"aria-label": name,
-		title: name,
-		onClick: (e) => {
-			onClick?.(e);
-			if (!e.defaultPrevented) setTool(tool);
-		},
-		...rest,
-		children: typeof children === "function" ? children({
-			active,
-			label: name
-		}) : children ?? (icon ? /* @__PURE__ */ jsx(InkIcon, { icon }) : null)
+//#region src/components/SignatureMenuPanel.tsx
+const NO_TEMPLATES$2 = [];
+/** A saved signature drawn small: ink as filled outlines, an image as itself. */
+function SignaturePreview({ template }) {
+	if (template.kind === "image") return /* @__PURE__ */ jsx("span", {
+		className: "ink-signature-preview",
+		"data-kind": "image",
+		children: /* @__PURE__ */ jsx("img", {
+			src: template.imagedata,
+			alt: "",
+			draggable: false
+		})
 	});
-}
-//#endregion
-//#region src/components/InkCommand.tsx
-function InkCommand({ id, asChild = false, children, disabled, onClick, ...rest }) {
-	const { run, enabled, busy, status, label, icon } = useCommand(id);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "ink-command",
-		children: [/* @__PURE__ */ jsx(Toolbar.Button, {
-			asChild,
-			type: "button",
-			"data-command": id,
-			"aria-label": label || void 0,
-			title: label || void 0,
-			"aria-hidden": label ? void 0 : true,
-			"aria-busy": busy,
-			"aria-disabled": busy || void 0,
-			...rest,
-			disabled: disabled === true || !enabled && !busy,
-			onClick: (e) => {
-				onClick?.(e);
-				if (!e.defaultPrevented) run();
-			},
-			children: typeof children === "function" ? children({
-				label,
-				busy
-			}) : children ?? (icon ? /* @__PURE__ */ jsx(InkIcon, { icon }) : label)
-		}), /* @__PURE__ */ jsx("span", {
-			className: "ink-command-status",
-			role: "status",
-			children: status
-		})]
+	const { viewBox, paths } = signaturePreview(template);
+	return /* @__PURE__ */ jsx("span", {
+		className: "ink-signature-preview",
+		"data-kind": "ink",
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox,
+			"aria-hidden": "true",
+			children: paths.map((d, i) => /* @__PURE__ */ jsx("path", {
+				d,
+				fill: "currentColor"
+			}, i))
+		})
 	});
 }
-//#endregion
-//#region src/components/InkToolbarSeparator.tsx
-/**
-* A divider between groups of controls in a horizontal toolbar. Not focusable. A plain div
-* rather than Radix's separator, which reads as horizontal inside a horizontal toolbar.
-*/
-function InkToolbarSeparator({ className, ...rest }) {
-	return /* @__PURE__ */ jsx("div", {
-		role: "separator",
-		"aria-orientation": "vertical",
-		className: cx("ink-toolbar-separator", className),
-		"data-ink-toolbar-separator": "",
-		...rest
-	});
+function SignatureMenuPanel({ items, menu, onChoose, onCreate }) {
+	const { signatures } = useInkContext("SignatureMenuPanel");
+	const templates = useReadable(signatures.templates, NO_TEMPLATES$2);
+	const removeError = useReadable(signatures.removeError, void 0);
+	/** The row of a removed signature, until focus lands on what took its place. */
+	const removedRow = useRef(null);
+	useEffect(() => {
+		const row = removedRow.current;
+		const panel = menu.current;
+		if (row === null || !panel) return;
+		removedRow.current = null;
+		const rows = panel.querySelectorAll(".ink-signature-item");
+		(rows[Math.min(row, rows.length - 1)] ?? panel.querySelector("[data-ink-signature-create]"))?.focus({ preventScroll: true });
+	}, [templates, menu]);
+	const remove = (id, row) => {
+		removedRow.current = row;
+		signatures.remove(id).catch(() => {
+			removedRow.current = null;
+		});
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		items.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+			role: "group",
+			"aria-label": SIGNATURE_LABELS.saved,
+			className: "ink-signature-list",
+			"data-ink-menu-columns": 2,
+			children: items.map((item, row) => [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "menuitemradio",
+				"aria-checked": item.checked,
+				"aria-label": item.label,
+				tabIndex: -1,
+				className: "ink-select-item ink-menu-item ink-signature-item",
+				"data-ink-select-item": "",
+				"data-key": item.id,
+				"data-state": item.checked ? "checked" : "unchecked",
+				onClick: () => onChoose(item.template),
+				children: /* @__PURE__ */ jsx(SignaturePreview, { template: item.template })
+			}, `${item.id}-choose`), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "menuitem",
+				"aria-label": item.removeLabel,
+				title: item.removeLabel,
+				tabIndex: -1,
+				className: "ink-menu-item ink-signature-remove",
+				"data-ink-signature-remove": "",
+				"data-key": item.id,
+				onClick: () => remove(item.id, row),
+				children: /* @__PURE__ */ jsx(InkIcon, {
+					icon: Trash2,
+					size: 16
+				})
+			}, `${item.id}-remove`)])
+		}), /* @__PURE__ */ jsx("div", {
+			role: "separator",
+			className: "ink-select-separator"
+		})] }) : null,
+		/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			role: "menuitem",
+			tabIndex: -1,
+			className: "ink-select-item ink-menu-item ink-signature-create",
+			"data-ink-select-item": "",
+			"data-ink-signature-create": "",
+			onClick: onCreate,
+			children: [/* @__PURE__ */ jsx(InkIcon, {
+				icon: Plus,
+				size: 16
+			}), SIGNATURE_LABELS.create]
+		}),
+		removeError ? /* @__PURE__ */ jsx("p", {
+			className: "ink-field-error ink-signature-remove-error",
+			role: "alert",
+			"data-ink-signature-remove-error": "",
+			children: removeError
+		}) : null
+	] });
 }
 //#endregion
-//#region src/components/InkUndo.tsx
-function InkUndo({ asChild = false, className, children, disabled, onClick, ...rest }) {
-	const { canUndo, undo } = useHistory();
-	return /* @__PURE__ */ jsx(Toolbar.Button, {
-		asChild,
-		className: cx("ink-undo", className),
-		"data-ink-undo": "",
-		"aria-label": "Undo",
-		title: "Undo",
-		...rest,
-		disabled: disabled === true || !canUndo,
-		onClick: (e) => {
-			onClick?.(e);
-			if (!e.defaultPrevented) undo();
+//#region src/components/InkSignFieldPopover.tsx
+const NO_TEMPLATES$1 = [];
+/** The field's own button, which focus returns to. */
+const control = (req) => req?.anchor.querySelector("button.ink-form-control") ?? null;
+function InkSignFieldPopover({ request, onClose }) {
+	const ctx = useInkContext("InkSignFieldPopover");
+	const { signatures, reportError } = ctx;
+	const templates = useReadable(signatures.templates, NO_TEMPLATES$1);
+	const model = useMemo(() => signatureMenuModel(templates, {}), [templates]);
+	/** The field the dialog signs once its signature is saved. */
+	const [creatingFor, setCreatingFor] = useState(null);
+	const menu = useRef(null);
+	/**
+	* The request the menu was last open for, kept to return focus once it closes. A request
+	* that replaces the open one takes over, so focus returns to the field asked for last.
+	*/
+	const last = useRef(null);
+	/** Set while the menu closes for the dialog, which takes focus instead of the field. */
+	const toDialog = useRef(false);
+	const anchor = useMemo(() => ({ current: request?.anchor ?? null }), [request]);
+	const doc = ctx.document;
+	useEffect(() => {
+		if (request) signatures.clearRemoveError();
+	}, [request, signatures]);
+	const close = useLatest(onClose);
+	useEffect(() => {
+		if (!request) return;
+		last.current = request;
+		return watchDetached(request.anchor, () => close.current());
+	}, [request, close]);
+	/** Focus goes back to the field's button, or to the scroll element once the field's box has gone. */
+	const returnFocus = (req) => {
+		const c = control(req);
+		(c?.isConnected ? c : ctx.viewportEl.get())?.focus({ preventScroll: true });
+	};
+	/** Signs the request's field with `t`; a refusal (signed, read-only by now) goes to `onError`. */
+	const sign = (req, t) => {
+		if (!doc) return;
+		try {
+			signField(doc, req.field, req.widget, t);
+		} catch (e) {
+			if (!(e instanceof InkError)) throw e;
+			reportError(e);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Popover.Root, {
+		open: request !== null,
+		onOpenChange: (next) => !next && onClose(),
+		children: [/* @__PURE__ */ jsx(Popover.Anchor, { virtualRef: anchor }), /* @__PURE__ */ jsx(Popover.Portal, { children: request ? /* @__PURE__ */ jsx(Popover.Content, {
+			ref: menu,
+			role: "menu",
+			"aria-label": SIGNATURE_LABELS.menu,
+			className: "ink-select-content ink-menu-content",
+			"data-ink-select-content": "",
+			"data-ink-menu": "signature",
+			"data-ink-sign-field-menu": request.field,
+			side: "bottom",
+			align: "start",
+			sideOffset: 4,
+			collisionPadding: 8,
+			onOpenAutoFocus: (e) => {
+				e.preventDefault();
+				focusInitialMenuItem(e.currentTarget);
+			},
+			onCloseAutoFocus: (e) => {
+				e.preventDefault();
+				if (!toDialog.current) returnFocus(last.current);
+				toDialog.current = false;
+			},
+			onInteractOutside: (e) => {
+				const target = e.detail.originalEvent.target;
+				if (target instanceof Node && request.anchor.contains(target)) e.preventDefault();
+			},
+			onKeyDown: (e) => handleMenuKeys(e.nativeEvent, e.currentTarget),
+			children: /* @__PURE__ */ jsx(SignatureMenuPanel, {
+				items: model.items,
+				menu,
+				onChoose: (t) => {
+					onClose();
+					sign(request, t);
+				},
+				onCreate: () => {
+					toDialog.current = true;
+					setCreatingFor(request);
+					onClose();
+				}
+			})
+		}) : null })]
+	}), /* @__PURE__ */ jsx(InkSignatureDialog, {
+		open: creatingFor !== null,
+		onOpenChange: (next) => {
+			if (!next) setCreatingFor(null);
 		},
-		children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: Undo2 })
-	});
-}
-//#endregion
-//#region src/components/InkRedo.tsx
-function InkRedo({ asChild = false, className, children, disabled, onClick, ...rest }) {
-	const { canRedo, redo } = useHistory();
-	return /* @__PURE__ */ jsx(Toolbar.Button, {
-		asChild,
-		className: cx("ink-redo", className),
-		"data-ink-redo": "",
-		"aria-label": "Redo",
-		title: "Redo",
-		...rest,
-		disabled: disabled === true || !canRedo,
-		onClick: (e) => {
-			onClick?.(e);
-			if (!e.defaultPrevented) redo();
+		select: false,
+		onSave: (t) => {
+			if (creatingFor) sign(creatingFor, t);
 		},
-		children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: Redo2 })
-	});
+		onCloseAutoFocus: (e) => {
+			e.preventDefault();
+			returnFocus(last.current);
+		}
+	})] });
 }
 //#endregion
-//#region src/components/InkSearchButton.tsx
-/**
-* Opens the find bar; pressed while it is open. Pressing it again focuses the field. Place it
-* in a toolbar next to `InkFindBar`, which it needs for the field to focus. Disabled until a
-* document is open.
-*/
-function InkSearchButton({ asChild = false, className, children, disabled, onClick, ...rest }) {
-	const { rootEl } = useInkContext("InkSearchButton");
-	const { state, open } = useSearch();
-	const { isReady } = useDocument();
-	return /* @__PURE__ */ jsx(Toolbar.Button, {
-		...rest,
-		asChild,
-		className: cx("ink-search-button", className),
-		"data-ink-search-button": "",
-		"aria-label": "Find",
-		title: "Find",
-		"aria-pressed": state.open,
-		"data-state": state.open ? "on" : "off",
-		disabled: !isReady || !!disabled,
-		onClick: (e) => {
-			onClick?.(e);
-			if (e.defaultPrevented) return;
-			flushSync(() => open());
-			const field = rootEl?.querySelector("[data-ink-find-bar] input");
-			field?.focus();
-			field?.select();
-		},
-		children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: Search })
-	});
+//#region src/components/InkViewport.tsx
+/** A key per document, so the field menu and its dialog start afresh for each one. */
+const documentKeys = /* @__PURE__ */ new WeakMap();
+let documentKeyCount = 0;
+function documentKey(doc) {
+	if (!doc) return 0;
+	let key = documentKeys.get(doc);
+	if (key === void 0) {
+		key = ++documentKeyCount;
+		documentKeys.set(doc, key);
+	}
+	return key;
 }
-//#endregion
-//#region src/components/InkFindBar.tsx
-/**
-* The find bar: a field, the match count, previous and next, a match-case toggle and close,
-* a view of the root's search state. Place it anywhere inside `InkRoot`: it portals itself
-* into `[data-ink-viewport-root]`, the positioned ancestor the theme floats it from over the
-* top-right of the pages (as `InkThreadPopover` anchors to the root's overlay rather than
-* where it is written). It renders nothing until `InkViewport` has mounted, and is hidden
-* while the search is closed. While it is mounted it registers with the search controller,
-* which is what lets Ctrl/Cmd+F open it.
-*
-* Enter in the field steps to the next match, Shift+Enter to the previous, Escape closes.
-* Closing returns focus to where it was before the bar opened, else to the document.
-*/
-function InkFindBar({ className, ...rest }) {
-	const ctx = useInkContext("InkFindBar");
-	const { state, setQuery, setMatchCase, next, previous, close } = useSearch();
-	const scroll = useReadable(ctx.viewportEl, null);
-	/** The viewport root: the scroll element's parent, once InkViewport has mounted. */
-	const target = scroll?.parentElement ?? null;
-	const bar = useRef(null);
-	const field = useRef(null);
-	const live = useRef(null);
-	/** Where focus was when the bar opened, and whether it was open on the last pass. */
-	const before = useRef(null);
-	const wasOpen = useRef(false);
-	useLayoutEffect(() => {
-		const el = bar.current;
-		const input = field.current;
-		if (!el || !input) return;
-		if (state.open !== wasOpen.current) {
-			wasOpen.current = state.open;
-			const doc = el.ownerDocument;
-			if (state.open) {
-				const active = doc.activeElement;
-				before.current = active instanceof HTMLElement && active !== doc.body && !el.contains(active) ? active : null;
-				input.focus();
-				input.select();
-			} else {
-				if (el.contains(doc.activeElement) || doc.activeElement === doc.body) (before.current?.isConnected && !el.contains(before.current) ? before.current : scroll)?.focus({ preventScroll: true });
-				before.current = null;
-			}
-		}
-		if (input.value !== state.query) {
-			input.value = state.query;
-			if (el.ownerDocument.activeElement === input) input.select();
-		}
-	}, [
-		state.open,
-		state.query,
-		scroll
-	]);
-	const { search } = ctx;
-	useEffect(() => {
-		if (!search || !target) return;
-		return search.attachBar();
-	}, [search, target]);
+function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2, loading, empty, error, renderAnnotation, renderPageError, className, ...rest }) {
+	const ctx = useInkContext("InkViewport");
+	const scroll = useRef(null);
+	const custom = !!renderAnnotation;
+	const latest = useLatest({
+		ctx,
+		mode,
+		rotation,
+		gap,
+		buffer,
+		custom
+	});
+	const engine = useRef(null);
+	/** Page hosts, mounts and errors the engine reported; InkPage renders portals for them. */
+	const [pages, setPages] = useState([]);
+	/**
+	* Numbered before each build starts, so the pages a build mounts carry its own number. A
+	* rebuild gives each page a new host and mount, so pages from an earlier build must remount,
+	* not be reused.
+	*/
+	const buildCount = useRef(0);
+	/** The construction options the engine was last built with, so a rebuild runs only on a change. */
+	const builtWith = useRef(null);
+	/** The zoom and page last reported to the host. */
+	const lastReportedZoom = useRef(void 0);
+	const lastReportedPage = useRef(void 0);
+	/** The signature field whose menu is open. */
+	const [signRequest, setSignRequest] = useState(null);
+	/** The form script's message on show, and how many have been shown. */
+	const [alert, setAlert] = useState(null);
 	useEffect(() => {
-		const el = live.current;
-		if (!search || !el) return;
-		const announce = findAnnouncer();
-		const say = (s) => {
-			const text = announce(s);
-			if (el.textContent !== text) el.textContent = text;
+		const { ctx: c, mode: m, rotation: r, gap: g, buffer: b, custom: cu } = latest.current;
+		const doc = c.document;
+		const el = scroll.current;
+		lastReportedZoom.current = void 0;
+		lastReportedPage.current = void 0;
+		if (!doc || !el || c.status.state !== "ready") return;
+		let first = true;
+		let stops = [];
+		buildCount.current += 1;
+		builtWith.current = {
+			gap: g,
+			buffer: b,
+			custom: cu
 		};
-		say(search.state.get());
-		return search.state.subscribe(say);
-	}, [search, target]);
+		const e = mountViewer({
+			container: el,
+			document: doc,
+			zoom: c.zoomModel ?? "fit-width",
+			...c.pageModel === void 0 ? {} : { page: c.pageModel },
+			mode: m,
+			rotation: r,
+			gap: g,
+			buffer: b,
+			tool: c.tool,
+			...c.hostTools ? { tools: c.hostTools } : {},
+			...c.pluginHost ? { plugins: c.pluginHost } : {},
+			...c.search ? { search: c.search } : {},
+			decorateAnnotation: (a) => latest.current.ctx.decorateAnnotation(a),
+			...c.toolStyle ? { toolStyle: c.toolStyle } : {},
+			toolHistory: { batch: (fn) => latest.current.ctx.history.batch(fn) },
+			toolOptions: c.toolOptions,
+			fonts: [...c.fonts],
+			signatureLibrary: () => latest.current.ctx.signatures,
+			customAnnotations: cu,
+			...c.formHighlight === void 0 ? {} : { formHighlight: c.formHighlight },
+			onSignField: (req) => setSignRequest((open) => open?.widget === req.widget ? null : req),
+			onFormAction: (a) => latest.current.ctx.reportFormAction(a),
+			onFormAlert: (message) => setAlert((prev) => ({
+				message,
+				shown: (prev?.shown ?? 0) + 1
+			})),
+			onActivate: (id) => latest.current.ctx.setActivated(id),
+			onBuild: (vp, tc) => {
+				latest.current.ctx.setViewport(vp, tc);
+				if (first) {
+					first = false;
+					lastReportedZoom.current = vp.zoom.get();
+					lastReportedPage.current = 0;
+				}
+				for (const stop of stops) stop();
+				const reportZoom = (z) => {
+					if (z === lastReportedZoom.current) return;
+					lastReportedZoom.current = z;
+					latest.current.ctx.reportZoom(z);
+				};
+				const reportPage = (p) => {
+					if (p === lastReportedPage.current) return;
+					lastReportedPage.current = p;
+					latest.current.ctx.reportPage(p);
+				};
+				const followTool = (id) => {
+					if (id !== latest.current.ctx.tool) latest.current.ctx.setTool(id);
+				};
+				stops = [
+					vp.zoom.subscribe(reportZoom),
+					vp.currentPage.subscribe(reportPage),
+					tc.active.subscribe(followTool)
+				];
+				reportZoom(vp.zoom.get());
+				reportPage(vp.currentPage.get());
+			},
+			onPageMount: (page, mount, host) => {
+				const build = buildCount.current;
+				const custom = builtWith.current?.custom ?? false;
+				setPages((prev) => [...prev, {
+					build,
+					page,
+					host,
+					mount,
+					error: null,
+					custom
+				}]);
+			},
+			onPageUnmount: (page) => setPages((prev) => prev.filter((p) => p.page !== page)),
+			onPageError: (page, err) => setPages((prev) => prev.map((p) => p.page === page ? {
+				...p,
+				error: err
+			} : p))
+		});
+		engine.current = e;
+		return () => {
+			for (const stop of stops) stop();
+			e.destroy();
+			engine.current = null;
+			builtWith.current = null;
+			c.setViewport(null, null);
+			setPages((prev) => prev.length === 0 ? prev : []);
+			setSignRequest(null);
+			setAlert(null);
+		};
+	}, [
+		ctx.document,
+		ctx.status.state,
+		ctx.pluginHost,
+		ctx.search,
+		latest
+	]);
+	const { viewportEl } = ctx;
+	useLayoutEffect(() => {
+		const el = scroll.current;
+		viewportEl.set(el);
+		return () => {
+			if (viewportEl.get() === el) viewportEl.set(null);
+		};
+	}, [viewportEl]);
+	const { onDecorateAnnotationChange } = ctx;
+	useEffect(() => onDecorateAnnotationChange(() => engine.current?.redecorate()), [onDecorateAnnotationChange]);
 	useEffect(() => {
-		const el = bar.current;
-		if (!search || !el) return;
-		const onKeyDown = (e) => {
-			if (e.key !== "Escape" || e.defaultPrevented || e.isComposing) return;
-			e.preventDefault();
-			e.stopPropagation();
-			search.close();
+		const built = builtWith.current;
+		if (!engine.current || !built) return;
+		if (built.gap === gap && built.buffer === buffer && built.custom === custom) return;
+		buildCount.current += 1;
+		builtWith.current = {
+			gap,
+			buffer,
+			custom
 		};
-		el.addEventListener("keydown", onKeyDown);
-		return () => el.removeEventListener("keydown", onKeyDown);
-	}, [search, target]);
-	if (!target) return null;
-	return createPortal(/* @__PURE__ */ jsxs("div", {
+		engine.current.rebuild({
+			gap,
+			buffer,
+			customAnnotations: custom
+		});
+	}, [
+		gap,
+		buffer,
+		custom
+	]);
+	useEffect(() => {
+		const vp = engine.current?.viewport;
+		const z = ctx.zoomModel;
+		if (vp && z !== void 0 && z !== vp.zoom.get()) vp.setZoom(z);
+	}, [ctx.zoomModel]);
+	useEffect(() => {
+		const vp = engine.current?.viewport;
+		const p = ctx.pageModel;
+		if (!vp || p === void 0 || p === lastReportedPage.current) return;
+		if (p !== vp.currentPage.get()) vp.scrollToPage(p);
+	}, [ctx.pageModel]);
+	useEffect(() => {
+		const tc = engine.current?.tools;
+		if (tc && tc.active.get() !== ctx.tool) tc.set(ctx.tool);
+	}, [ctx.tool]);
+	useEffect(() => {
+		engine.current?.setFormHighlight(ctx.formHighlight ?? true);
+	}, [ctx.formHighlight]);
+	useEffect(() => {
+		const vp = engine.current?.viewport;
+		if (vp && vp.mode.get() !== mode) vp.setMode(mode);
+	}, [mode]);
+	useEffect(() => {
+		const vp = engine.current?.viewport;
+		if (vp && vp.rotation.get() !== rotation) vp.setRotation(rotation);
+	}, [rotation]);
+	const state = ctx.status.state;
+	const err = ctx.status.state === "error" ? ctx.status.error : null;
+	return /* @__PURE__ */ jsxs("div", {
 		...rest,
-		ref: bar,
-		className: cx("ink-find-bar", className),
-		"data-ink-find-bar": "",
-		role: "search",
-		hidden: !state.open,
+		className: cx("ink-viewport-root", className),
+		"data-ink-viewport-root": "",
+		"data-state": state,
 		children: [
-			/* @__PURE__ */ jsx("input", {
-				ref: field,
-				type: "text",
-				"aria-label": "Find in document",
-				autoComplete: "off",
-				spellCheck: false,
-				onInput: (e) => setQuery(e.currentTarget.value),
-				onKeyDown: (e) => {
-					if (e.key !== "Enter" || e.nativeEvent.isComposing) return;
-					e.preventDefault();
-					if (e.shiftKey) previous();
-					else next();
-				}
+			state === "loading" ? /* @__PURE__ */ jsx("div", {
+				className: "ink-status",
+				role: "status",
+				"aria-live": "polite",
+				children: loading === void 0 ? "Loading document…" : loading
+			}) : err ? /* @__PURE__ */ jsx("div", {
+				className: "ink-status ink-error",
+				role: "alert",
+				children: typeof error === "function" ? error({ error: err }) : error !== void 0 ? error : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+					className: "ink-error-title",
+					children: "This document could not be opened."
+				}), /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("code", {
+					className: "ink-error-code",
+					title: err.message,
+					children: err.code
+				}) })] })
+			}) : state === "idle" ? /* @__PURE__ */ jsx("div", {
+				className: "ink-status ink-empty",
+				children: empty
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				ref: scroll,
+				className: "ink-scroll",
+				"data-ink-scroll": "",
+				tabIndex: 0,
+				role: "document",
+				"aria-label": "Document"
 			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "ink-find-count",
-				"data-ink-find-count": "",
-				children: findCountText(state)
-			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				"data-ink-find-previous": "",
-				"aria-label": "Previous match",
-				title: "Previous match",
-				onClick: () => previous(),
-				children: /* @__PURE__ */ jsx(InkIcon, { icon: ChevronUp })
-			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				"data-ink-find-next": "",
-				"aria-label": "Next match",
-				title: "Next match",
-				onClick: () => next(),
-				children: /* @__PURE__ */ jsx(InkIcon, { icon: ChevronDown })
-			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				"data-ink-find-match-case": "",
-				"aria-label": "Match case",
-				title: "Match case",
-				"aria-pressed": state.matchCase,
-				onClick: () => setMatchCase(!state.matchCase),
-				children: /* @__PURE__ */ jsx(InkIcon, { icon: CaseSensitive })
-			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				"data-ink-find-close": "",
-				"aria-label": "Close find",
-				title: "Close find",
-				onClick: () => close(),
-				children: /* @__PURE__ */ jsx(InkIcon, { icon: X })
-			}),
-			/* @__PURE__ */ jsx("div", {
-				ref: live,
-				className: "ink-visually-hidden",
-				"data-ink-find-status": "",
-				"aria-live": "polite"
+			pages.map((p) => /* @__PURE__ */ jsx(InkPage, {
+				page: p.page,
+				host: p.host,
+				mount: p.mount,
+				error: p.error,
+				customAnnotations: p.custom,
+				renderAnnotation,
+				renderPageError
+			}, `${p.build}:${p.page}`)),
+			/* @__PURE__ */ jsx(InkSignFieldPopover, {
+				request: signRequest,
+				onClose: () => setSignRequest(null)
+			}, documentKey(ctx.document)),
+			/* @__PURE__ */ jsx(InkFormAlert, {
+				message: alert?.message ?? null,
+				shown: alert?.shown ?? 0,
+				fallback: () => scroll.current,
+				onClose: () => setAlert(null)
 			})
 		]
-	}), target);
+	});
 }
 //#endregion
-//#region src/components/InkZoomIn.tsx
-function InkZoomIn({ asChild = false, className, children, onClick, ...rest }) {
-	const { zoomIn } = useZoom();
-	return /* @__PURE__ */ jsx(Toolbar.Button, {
+//#region src/components/InkToolbar.tsx
+function InkToolbar({ label = "Document tools", asChild = false, className, children, ...rest }) {
+	return /* @__PURE__ */ jsx(Toolbar.Root, {
 		asChild,
-		className: cx("ink-zoom-in", className),
-		"data-ink-zoom-in": "",
-		"aria-label": "Zoom in",
-		title: "Zoom in",
+		orientation: "horizontal",
+		"aria-label": label,
+		"data-ink-toolbar": "",
+		className: cx("ink-toolbar", className),
 		...rest,
-		onClick: (e) => {
-			onClick?.(e);
-			if (!e.defaultPrevented) zoomIn();
-		},
-		children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: ZoomIn })
+		children
 	});
 }
 //#endregion
-//#region src/components/InkZoomOut.tsx
-function InkZoomOut({ asChild = false, className, children, onClick, ...rest }) {
-	const { zoomOut } = useZoom();
+//#region src/components/InkToolButton.tsx
+const ICONS = {
+	"select-text": TextCursor,
+	select: SquareDashedMousePointer,
+	highlight: Highlighter,
+	"redact-area": Square,
+	sketch: PenTool,
+	draw: PenLine,
+	note: MessageSquare,
+	freetext: Type,
+	signature: Signature
+};
+function InkToolButton({ tool, label, asChild = false, className, children, onClick, ...rest }) {
+	const { hostTools, pluginHost } = useInkContext("InkToolButton");
+	const { tool: current, setTool } = useTool();
+	const active = current === tool;
+	/** A host or plugin tool by this id, for the name and icon core has none for. */
+	const own = [...hostTools ?? [], ...pluginHost?.tools ?? []].find((t) => t.id === tool);
+	const name = label ?? TOOL_LABELS[tool] ?? own?.label ?? tool;
+	const icon = ICONS[tool] ?? own?.icon;
 	return /* @__PURE__ */ jsx(Toolbar.Button, {
 		asChild,
-		className: cx("ink-zoom-out", className),
-		"data-ink-zoom-out": "",
-		"aria-label": "Zoom out",
-		title: "Zoom out",
-		...rest,
+		className: cx("ink-tool-button", className),
+		"data-ink-tool-button": "",
+		"data-tool": tool,
+		"data-state": active ? "on" : "off",
+		"aria-pressed": active,
+		"aria-label": name,
+		title: name,
 		onClick: (e) => {
 			onClick?.(e);
-			if (!e.defaultPrevented) zoomOut();
+			if (!e.defaultPrevented) setTool(tool);
 		},
-		children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: ZoomOut })
+		...rest,
+		children: typeof children === "function" ? children({
+			active,
+			label: name
+		}) : children ?? (icon ? /* @__PURE__ */ jsx(InkIcon, { icon }) : null)
 	});
 }
 //#endregion
-//#region src/components/InkZoomSelect.tsx
-const CUSTOM = "custom:";
-const level = (z) => ZOOM_LEVELS.find((l) => Math.abs(l - z) < .001);
-const percent = (z) => `${Math.round(z * 100)}%`;
-const FITS = [{
-	value: "fit-width",
-	label: "Fit width"
-}, {
-	value: "fit-page",
-	label: "Fit page"
-}];
-function Item$1({ value, label }) {
-	return /* @__PURE__ */ jsxs(Select.Item, {
-		value,
-		className: "ink-select-item",
-		"data-ink-select-item": "",
-		children: [/* @__PURE__ */ jsx(Select.ItemText, { children: label }), /* @__PURE__ */ jsx(Select.ItemIndicator, {
-			className: "ink-select-indicator",
-			children: /* @__PURE__ */ jsx(InkIcon, {
-				icon: Check,
-				size: 16
-			})
+//#region src/components/InkCommand.tsx
+function InkCommand({ id, asChild = false, children, disabled, onClick, ...rest }) {
+	const { run, enabled, busy, status, label, icon } = useCommand(id);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ink-command",
+		children: [/* @__PURE__ */ jsx(Toolbar.Button, {
+			asChild,
+			type: "button",
+			"data-command": id,
+			"aria-label": label || void 0,
+			title: label || void 0,
+			"aria-hidden": label ? void 0 : true,
+			"aria-busy": busy,
+			"aria-disabled": busy || void 0,
+			...rest,
+			disabled: disabled === true || !enabled && !busy,
+			onClick: (e) => {
+				onClick?.(e);
+				if (!e.defaultPrevented) run();
+			},
+			children: typeof children === "function" ? children({
+				label,
+				busy
+			}) : children ?? (icon ? /* @__PURE__ */ jsx(InkIcon, { icon }) : label)
+		}), /* @__PURE__ */ jsx("span", {
+			className: "ink-command-status",
+			role: "status",
+			children: status
 		})]
 	});
 }
-function InkZoomSelect({ className, ...rest }) {
-	const { zoom, scale, setZoom } = useZoom();
-	/** A numeric zoom that is not one of the levels (zoom in and out multiply). */
-	const custom = typeof zoom === "number" && level(zoom) === void 0 ? zoom : null;
-	const value = typeof zoom !== "number" ? zoom : custom === null ? String(level(zoom)) : `${CUSTOM}${zoom}`;
-	/** The levels, with a custom zoom in its place among them. */
-	const levels = ZOOM_LEVELS.map((l) => ({
-		z: l,
-		value: String(l),
-		label: percent(l)
-	}));
-	if (custom !== null) levels.push({
-		z: custom,
-		value: `${CUSTOM}${custom}`,
-		label: percent(scale)
+//#endregion
+//#region src/components/InkToolbarSeparator.tsx
+/**
+* A divider between groups of controls in a horizontal toolbar. Not focusable. A plain div
+* rather than Radix's separator, which reads as horizontal inside a horizontal toolbar.
+*/
+function InkToolbarSeparator({ className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "vertical",
+		className: cx("ink-toolbar-separator", className),
+		"data-ink-toolbar-separator": "",
+		...rest
 	});
-	levels.sort((a, b) => a.z - b.z);
-	function onValueChange(v) {
-		if (v === value) return;
-		const next = v === "fit-width" || v === "fit-page" ? v : Number(v.replace(CUSTOM, ""));
-		setZoom(next);
-	}
-	return /* @__PURE__ */ jsxs(Select.Root, {
-		value,
-		onValueChange,
-		children: [/* @__PURE__ */ jsxs(Select.Trigger, {
-			className: cx("ink-zoom-select ink-select-trigger", className),
-			"data-ink-zoom-select": "",
-			"aria-label": "Zoom",
-			...rest,
-			children: [/* @__PURE__ */ jsx(Select.Value, { className: "ink-select-value" }), /* @__PURE__ */ jsx(Select.Icon, {
-				className: "ink-select-icon",
-				children: /* @__PURE__ */ jsx(InkIcon, {
-					icon: ChevronDown,
-					size: 16
-				})
-			})]
-		}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Content, {
-			className: "ink-select-content",
-			"data-ink-select-content": "",
-			position: "popper",
-			side: "top",
-			sideOffset: 4,
-			children: /* @__PURE__ */ jsxs(Select.Viewport, { children: [
-				FITS.map((o) => /* @__PURE__ */ jsx(Item$1, {
-					value: o.value,
-					label: o.label
-				}, o.value)),
-				/* @__PURE__ */ jsx(Select.Separator, { className: "ink-select-separator" }),
-				levels.map((o) => /* @__PURE__ */ jsx(Item$1, {
-					value: o.value,
-					label: o.label
-				}, o.value))
-			] })
-		}) })]
+}
+//#endregion
+//#region src/components/InkUndo.tsx
+function InkUndo({ asChild = false, className, children, disabled, onClick, ...rest }) {
+	const { canUndo, undo } = useHistory();
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		asChild,
+		className: cx("ink-undo", className),
+		"data-ink-undo": "",
+		"aria-label": "Undo",
+		title: "Undo",
+		...rest,
+		disabled: disabled === true || !canUndo,
+		onClick: (e) => {
+			onClick?.(e);
+			if (!e.defaultPrevented) undo();
+		},
+		children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: Undo2 })
 	});
 }
 //#endregion
-//#region src/components/InkPageInput.tsx
-function InkPageInput({ className, onKeyDown: onKeyDownProp, ...rest }) {
-	const { current, count, goTo } = usePage();
-	const [draft, setDraft] = useState(String(current + 1));
-	useEffect(() => {
-		setDraft(String(current + 1));
-	}, [current]);
-	const input = useRef(null);
-	const latest = useLatest({
-		current,
-		count,
-		goTo
-	});
-	/** 1-based in the input, 0-based in the viewport. Out of range resets to the current page. */
-	const commit = useCallback((value) => {
-		const { current: page, count: total, goTo: go } = latest.current;
-		const n = Number(value);
-		if (Number.isInteger(n) && n >= 1 && n <= total) {
-			if (n - 1 !== page) go(n - 1);
-		} else setDraft(String(page + 1));
-	}, [latest]);
-	useEffect(() => {
-		const el = input.current;
-		if (!el) return;
-		const onNativeChange = () => commit(el.value);
-		el.addEventListener("change", onNativeChange);
-		return () => el.removeEventListener("change", onNativeChange);
-	}, [commit]);
-	function onKeyDown(e) {
-		onKeyDownProp?.(e);
-		if (e.defaultPrevented || e.key !== "Enter") return;
-		e.preventDefault();
-		commit(draft);
-	}
-	return /* @__PURE__ */ jsx("input", {
-		ref: input,
-		className: cx("ink-page-input", className),
-		"data-ink-page-input": "",
-		type: "number",
-		inputMode: "numeric",
-		"aria-label": "Page",
-		min: 1,
-		max: count,
-		value: draft,
-		onChange: (e) => setDraft(e.target.value),
-		onKeyDown,
-		...rest
-	});
-}
-//#endregion
-//#region src/components/InkPageCount.tsx
-function InkPageCount({ className, ...rest }) {
-	const { count } = usePage();
-	return /* @__PURE__ */ jsx("span", {
-		className: cx("ink-page-count", className),
-		"data-ink-page-count": "",
-		"aria-live": "polite",
-		...rest,
-		children: `of ${count}`
-	});
-}
-//#endregion
-//#region src/components/InkPrevPage.tsx
-function InkPrevPage({ asChild = false, className, children, disabled, onClick, ...rest }) {
-	const { current, previous } = usePage();
+//#region src/components/InkRedo.tsx
+function InkRedo({ asChild = false, className, children, disabled, onClick, ...rest }) {
+	const { canRedo, redo } = useHistory();
 	return /* @__PURE__ */ jsx(Toolbar.Button, {
 		asChild,
-		className: cx("ink-prev-page", className),
-		"data-ink-prev-page": "",
-		"aria-label": "Previous page",
-		title: "Previous page",
-		disabled: disabled === true || current <= 0,
+		className: cx("ink-redo", className),
+		"data-ink-redo": "",
+		"aria-label": "Redo",
+		title: "Redo",
 		...rest,
+		disabled: disabled === true || !canRedo,
 		onClick: (e) => {
 			onClick?.(e);
-			if (!e.defaultPrevented) previous();
+			if (!e.defaultPrevented) redo();
 		},
-		children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: ChevronLeft })
+		children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: Redo2 })
 	});
 }
 //#endregion
-//#region src/components/InkNextPage.tsx
-function InkNextPage({ asChild = false, className, children, disabled, onClick, ...rest }) {
-	const { current, count, next } = usePage();
+//#region src/components/InkSearchButton.tsx
+/**
+* Opens the find bar; pressed while it is open. Pressing it again focuses the field. Place it
+* in a toolbar next to `InkFindBar`, which it needs for the field to focus. Disabled until a
+* document is open.
+*/
+function InkSearchButton({ asChild = false, className, children, disabled, onClick, ...rest }) {
+	const { rootEl } = useInkContext("InkSearchButton");
+	const { state, open } = useSearch();
+	const { isReady } = useDocument();
 	return /* @__PURE__ */ jsx(Toolbar.Button, {
-		asChild,
-		className: cx("ink-next-page", className),
-		"data-ink-next-page": "",
-		"aria-label": "Next page",
-		title: "Next page",
-		disabled: disabled === true || current >= count - 1,
 		...rest,
+		asChild,
+		className: cx("ink-search-button", className),
+		"data-ink-search-button": "",
+		"aria-label": "Find",
+		title: "Find",
+		"aria-pressed": state.open,
+		"data-state": state.open ? "on" : "off",
+		disabled: !isReady || !!disabled,
 		onClick: (e) => {
 			onClick?.(e);
-			if (!e.defaultPrevented) next();
+			if (e.defaultPrevented) return;
+			flushSync(() => open());
+			const field = rootEl?.querySelector("[data-ink-find-bar] input");
+			field?.focus();
+			field?.select();
 		},
-		children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: ChevronRight })
+		children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: Search })
 	});
 }
 //#endregion
-//#region src/components/InkColorMenu.tsx
-function InkColorMenu({ property, label, className, children, standalone = false, group, fallback, disabled, ...rest }) {
-	const Wrap = standalone ? Fragment : Toolbar.Button;
-	const { current, supported, set } = useToolStyle(group);
-	const [open, setOpen] = useState(false);
-	const model = colorMenuModel(property, current, supported, fallback);
-	const name = label ?? model.label;
-	/** ArrowDown opens on the first item; a click opens on the checked one. */
-	const focusFirst = useRef(false);
-	const input = useRef(null);
-	const apply = useRef((_hex) => {});
-	apply.current = (hex) => set(model.custom(hex));
-	const bindInput = useCallback((el) => {
-		input.current = el;
-		el?.addEventListener("change", () => apply.current(el.value));
-	}, []);
+//#region src/components/InkFindBar.tsx
+/**
+* The find bar: a field, the match count, previous and next, a match-case toggle and close,
+* a view of the root's search state. Place it anywhere inside `InkRoot`: it portals itself
+* into `[data-ink-viewport-root]`, the positioned ancestor the theme floats it from over the
+* top-right of the pages (as `InkThreadPopover` anchors to the root's overlay rather than
+* where it is written). It renders nothing until `InkViewport` has mounted, and is hidden
+* while the search is closed. While it is mounted it registers with the search controller,
+* which is what lets Ctrl/Cmd+F open it.
+*
+* Enter in the field steps to the next match, Shift+Enter to the previous, Escape closes.
+* Closing returns focus to where it was before the bar opened, else to the document.
+*/
+function InkFindBar({ className, ...rest }) {
+	const ctx = useInkContext("InkFindBar");
+	const { state, setQuery, setMatchCase, next, previous, close } = useSearch();
+	const scroll = useReadable(ctx.viewportEl, null);
+	/** The viewport root: the scroll element's parent, once InkViewport has mounted. */
+	const target = scroll?.parentElement ?? null;
+	const bar = useRef(null);
+	const field = useRef(null);
+	const live = useRef(null);
+	/** Where focus was when the bar opened, and whether it was open on the last pass. */
+	const before = useRef(null);
+	const wasOpen = useRef(false);
+	useLayoutEffect(() => {
+		const el = bar.current;
+		const input = field.current;
+		if (!el || !input) return;
+		if (state.open !== wasOpen.current) {
+			wasOpen.current = state.open;
+			const doc = el.ownerDocument;
+			if (state.open) {
+				const active = doc.activeElement;
+				before.current = active instanceof HTMLElement && active !== doc.body && !el.contains(active) ? active : null;
+				input.focus();
+				input.select();
+			} else {
+				if (el.contains(doc.activeElement) || doc.activeElement === doc.body) (before.current?.isConnected && !el.contains(before.current) ? before.current : scroll)?.focus({ preventScroll: true });
+				before.current = null;
+			}
+		}
+		if (input.value !== state.query) {
+			input.value = state.query;
+			if (el.ownerDocument.activeElement === input) input.select();
+		}
+	}, [
+		state.open,
+		state.query,
+		scroll
+	]);
+	const { search } = ctx;
 	useEffect(() => {
-		if (input.current) input.current.value = model.customValue.toLowerCase();
-	}, [model.customValue]);
+		if (!search || !target) return;
+		return search.attachBar();
+	}, [search, target]);
 	useEffect(() => {
-		if (!model.enabled) setOpen(false);
-	}, [model.enabled]);
-	const trigger = model.trigger;
-	const swatchStyle = trigger.kind === "color" ? { "--ink-swatch": trigger.color } : void 0;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Popover.Root, {
-		open,
-		onOpenChange: setOpen,
-		children: [/* @__PURE__ */ jsx(Wrap, {
-			...standalone ? {} : { asChild: true },
-			children: /* @__PURE__ */ jsx(Popover.Trigger, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: cx("ink-menu-trigger ink-color-menu", className),
-					"data-ink-color-menu": property,
-					"data-state": open ? "open" : "closed",
-					"data-mixed": model.mixed ? "" : void 0,
-					"aria-label": name,
-					title: name,
-					"aria-haspopup": "menu",
-					disabled: disabled === true || !model.enabled,
-					...rest,
-					onKeyDown: (e) => {
-						rest.onKeyDown?.(e);
-						if (e.key !== "ArrowDown" || e.defaultPrevented || open || !model.enabled) return;
-						e.preventDefault();
-						focusFirst.current = true;
-						setOpen(true);
-					},
-					children: children ?? /* @__PURE__ */ jsx("span", {
-						className: "ink-swatch",
-						"data-ink-swatch": "",
-						"data-property": property,
-						"data-kind": trigger.kind,
-						"data-color": trigger.kind === "color" ? trigger.color : void 0,
-						style: swatchStyle,
-						"aria-hidden": "true"
-					})
-				})
-			})
-		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
-			role: "menu",
-			"aria-label": name,
-			className: "ink-select-content ink-menu-content",
-			"data-ink-select-content": "",
-			"data-ink-menu": `color-${property}`,
-			side: "bottom",
-			align: "start",
-			sideOffset: 4,
-			collisionPadding: 8,
-			onOpenAutoFocus: (e) => {
-				e.preventDefault();
-				const menu = e.currentTarget;
-				if (focusFirst.current) menuItems(menu)[0]?.focus({ preventScroll: true });
-				else focusInitialMenuItem(menu);
-				focusFirst.current = false;
-			},
-			onKeyDown: (e) => handleMenuKeys(e.nativeEvent, e.currentTarget),
-			children: [
-				model.noFill ? /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					role: "menuitemradio",
-					"aria-checked": model.noFill.checked,
-					tabIndex: -1,
-					className: "ink-select-item ink-menu-item",
-					"data-ink-select-item": "",
-					"data-state": model.noFill.checked ? "checked" : "unchecked",
-					onClick: () => set(model.noFill.patch),
-					children: ["No fill", model.noFill.checked ? /* @__PURE__ */ jsx("span", {
-						className: "ink-select-indicator",
-						children: /* @__PURE__ */ jsx(InkIcon, {
-							icon: Check,
-							size: 16
-						})
-					}) : null]
-				}) : null,
-				/* @__PURE__ */ jsx("div", {
-					role: "group",
-					"aria-label": "Colours",
-					className: "ink-color-grid",
-					"data-ink-menu-columns": COLOR_COLUMNS,
-					children: model.swatches.map((sw) => /* @__PURE__ */ jsx("button", {
-						type: "button",
-						role: "menuitemradio",
-						"aria-label": sw.label,
-						"aria-checked": sw.checked,
-						tabIndex: -1,
-						className: "ink-swatch-item",
-						"data-state": sw.checked ? "checked" : "unchecked",
-						style: { "--ink-swatch": sw.color },
-						onClick: () => set(sw.patch)
-					}, sw.key))
-				}),
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
-					role: "menuitem",
-					tabIndex: -1,
-					className: "ink-select-item ink-menu-item",
-					"data-ink-select-item": "",
-					onClick: () => input.current?.click(),
-					children: "Custom…"
+		const el = live.current;
+		if (!search || !el) return;
+		const announce = findAnnouncer();
+		const say = (s) => {
+			const text = announce(s);
+			if (el.textContent !== text) el.textContent = text;
+		};
+		say(search.state.get());
+		return search.state.subscribe(say);
+	}, [search, target]);
+	useEffect(() => {
+		const el = bar.current;
+		if (!search || !el) return;
+		const onKeyDown = (e) => {
+			if (e.key !== "Escape" || e.defaultPrevented || e.isComposing) return;
+			e.preventDefault();
+			e.stopPropagation();
+			search.close();
+		};
+		el.addEventListener("keydown", onKeyDown);
+		return () => el.removeEventListener("keydown", onKeyDown);
+	}, [search, target]);
+	if (!target) return null;
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		...rest,
+		ref: bar,
+		className: cx("ink-find-bar", className),
+		"data-ink-find-bar": "",
+		role: "search",
+		hidden: !state.open,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref: field,
+				type: "text",
+				"aria-label": "Find in document",
+				autoComplete: "off",
+				spellCheck: false,
+				onInput: (e) => setQuery(e.currentTarget.value),
+				onKeyDown: (e) => {
+					if (e.key !== "Enter" || e.nativeEvent.isComposing) return;
+					e.preventDefault();
+					if (e.shiftKey) previous();
+					else next();
+				}
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "ink-find-count",
+				"data-ink-find-count": "",
+				children: findCountText(state)
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-ink-find-previous": "",
+				"aria-label": "Previous match",
+				title: "Previous match",
+				onClick: () => previous(),
+				children: /* @__PURE__ */ jsx(InkIcon, { icon: ChevronUp })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-ink-find-next": "",
+				"aria-label": "Next match",
+				title: "Next match",
+				onClick: () => next(),
+				children: /* @__PURE__ */ jsx(InkIcon, { icon: ChevronDown })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-ink-find-match-case": "",
+				"aria-label": "Match case",
+				title: "Match case",
+				"aria-pressed": state.matchCase,
+				onClick: () => setMatchCase(!state.matchCase),
+				children: /* @__PURE__ */ jsx(InkIcon, { icon: CaseSensitive })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-ink-find-close": "",
+				"aria-label": "Close find",
+				title: "Close find",
+				onClick: () => close(),
+				children: /* @__PURE__ */ jsx(InkIcon, { icon: X })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: live,
+				className: "ink-visually-hidden",
+				"data-ink-find-status": "",
+				"aria-live": "polite"
+			})
+		]
+	}), target);
+}
+//#endregion
+//#region src/components/InkZoomIn.tsx
+function InkZoomIn({ asChild = false, className, children, onClick, ...rest }) {
+	const { zoomIn } = useZoom();
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		asChild,
+		className: cx("ink-zoom-in", className),
+		"data-ink-zoom-in": "",
+		"aria-label": "Zoom in",
+		title: "Zoom in",
+		...rest,
+		onClick: (e) => {
+			onClick?.(e);
+			if (!e.defaultPrevented) zoomIn();
+		},
+		children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: ZoomIn })
+	});
+}
+//#endregion
+//#region src/components/InkZoomOut.tsx
+function InkZoomOut({ asChild = false, className, children, onClick, ...rest }) {
+	const { zoomOut } = useZoom();
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		asChild,
+		className: cx("ink-zoom-out", className),
+		"data-ink-zoom-out": "",
+		"aria-label": "Zoom out",
+		title: "Zoom out",
+		...rest,
+		onClick: (e) => {
+			onClick?.(e);
+			if (!e.defaultPrevented) zoomOut();
+		},
+		children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: ZoomOut })
+	});
+}
+//#endregion
+//#region src/components/InkZoomSelect.tsx
+const CUSTOM = "custom:";
+const level = (z) => ZOOM_LEVELS.find((l) => Math.abs(l - z) < .001);
+const percent = (z) => `${Math.round(z * 100)}%`;
+const FITS = [{
+	value: "fit-width",
+	label: "Fit width"
+}, {
+	value: "fit-page",
+	label: "Fit page"
+}];
+function Item$1({ value, label }) {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		value,
+		className: "ink-select-item",
+		"data-ink-select-item": "",
+		children: [/* @__PURE__ */ jsx(Select.ItemText, { children: label }), /* @__PURE__ */ jsx(Select.ItemIndicator, {
+			className: "ink-select-indicator",
+			children: /* @__PURE__ */ jsx(InkIcon, {
+				icon: Check,
+				size: 16
+			})
+		})]
+	});
+}
+function InkZoomSelect({ className, ...rest }) {
+	const { zoom, scale, setZoom } = useZoom();
+	/** A numeric zoom that is not one of the levels (zoom in and out multiply). */
+	const custom = typeof zoom === "number" && level(zoom) === void 0 ? zoom : null;
+	const value = typeof zoom !== "number" ? zoom : custom === null ? String(level(zoom)) : `${CUSTOM}${zoom}`;
+	/** The levels, with a custom zoom in its place among them. */
+	const levels = ZOOM_LEVELS.map((l) => ({
+		z: l,
+		value: String(l),
+		label: percent(l)
+	}));
+	if (custom !== null) levels.push({
+		z: custom,
+		value: `${CUSTOM}${custom}`,
+		label: percent(scale)
+	});
+	levels.sort((a, b) => a.z - b.z);
+	function onValueChange(v) {
+		if (v === value) return;
+		const next = v === "fit-width" || v === "fit-page" ? v : Number(v.replace(CUSTOM, ""));
+		setZoom(next);
+	}
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		value,
+		onValueChange,
+		children: [/* @__PURE__ */ jsxs(Select.Trigger, {
+			className: cx("ink-zoom-select ink-select-trigger", className),
+			"data-ink-zoom-select": "",
+			"aria-label": "Zoom",
+			...rest,
+			children: [/* @__PURE__ */ jsx(Select.Value, { className: "ink-select-value" }), /* @__PURE__ */ jsx(Select.Icon, {
+				className: "ink-select-icon",
+				children: /* @__PURE__ */ jsx(InkIcon, {
+					icon: ChevronDown,
+					size: 16
 				})
-			]
+			})]
+		}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Content, {
+			className: "ink-select-content",
+			"data-ink-select-content": "",
+			position: "popper",
+			side: "top",
+			sideOffset: 4,
+			children: /* @__PURE__ */ jsxs(Select.Viewport, { children: [
+				FITS.map((o) => /* @__PURE__ */ jsx(Item$1, {
+					value: o.value,
+					label: o.label
+				}, o.value)),
+				/* @__PURE__ */ jsx(Select.Separator, { className: "ink-select-separator" }),
+				levels.map((o) => /* @__PURE__ */ jsx(Item$1, {
+					value: o.value,
+					label: o.label
+				}, o.value))
+			] })
 		}) })]
-	}), /* @__PURE__ */ jsx("input", {
-		ref: bindInput,
-		type: "color",
-		className: "ink-color-input",
-		"aria-label": "Custom colour",
-		"data-ink-color-input": property,
-		tabIndex: -1,
-		defaultValue: model.customValue.toLowerCase()
-	})] });
+	});
 }
 //#endregion
-//#region src/components/InkShapeMenu.tsx
-function InkShapeMenu({ className, children, ...rest }) {
-	const { tool, setTool } = useTool();
-	const [options, setOptions] = useToolOptions("shape");
-	const [open, setOpen] = useState(false);
-	const model = shapeMenuModel(options, SHAPE_KINDS);
-	const active = tool === "shape";
-	/** ArrowDown opens on the first item; a click opens on the checked one. */
-	const focusFirst = useRef(false);
-	return /* @__PURE__ */ jsx(Popover.Root, {
-		open,
-		onOpenChange: setOpen,
-		children: /* @__PURE__ */ jsx(Popover.Anchor, {
-			asChild: true,
-			children: /* @__PURE__ */ jsxs("div", {
-				role: "group",
-				"aria-label": "Shape",
-				className: cx("ink-split-button ink-shape-menu", className),
-				"data-ink-shape-menu": "",
-				...rest,
-				children: [
-					/* @__PURE__ */ jsx(Toolbar.Button, {
-						className: "ink-tool-button ink-shape-button",
-						"data-ink-tool-button": "",
-						"data-ink-shape-button": "",
-						"data-tool": "shape",
-						"data-kind": model.kind,
-						"data-state": active ? "on" : "off",
-						"aria-pressed": active,
-						"aria-label": model.label,
-						title: model.label,
-						onClick: () => setTool("shape"),
-						children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: SHAPE_ICONS[model.kind] })
-					}),
-					/* @__PURE__ */ jsx(Toolbar.Button, {
-						asChild: true,
-						children: /* @__PURE__ */ jsx(Popover.Trigger, {
-							asChild: true,
-							children: /* @__PURE__ */ jsx("button", {
-								type: "button",
-								className: "ink-menu-trigger ink-shape-menu-trigger",
-								"data-ink-shape-menu-trigger": "",
-								"data-state": open ? "open" : "closed",
-								"aria-label": "Choose shape",
-								title: "Choose shape",
-								"aria-haspopup": "menu",
-								onKeyDown: (e) => {
-									if (e.key !== "ArrowDown" || e.defaultPrevented || open) return;
-									e.preventDefault();
-									focusFirst.current = true;
-									setOpen(true);
-								},
-								children: /* @__PURE__ */ jsx(InkIcon, { icon: ChevronDown })
-							})
-						})
-					}),
-					/* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, {
-						role: "menu",
-						"aria-label": "Shapes",
-						className: "ink-select-content ink-menu-content",
-						"data-ink-select-content": "",
-						"data-ink-menu": "shape",
-						side: "bottom",
-						align: "start",
-						sideOffset: 4,
-						collisionPadding: 8,
-						onOpenAutoFocus: (e) => {
-							e.preventDefault();
-							const menu = e.currentTarget;
-							if (focusFirst.current) menuItems(menu)[0]?.focus({ preventScroll: true });
-							else focusInitialMenuItem(menu);
-							focusFirst.current = false;
-						},
-						onKeyDown: (e) => handleMenuKeys(e.nativeEvent, e.currentTarget),
-						children: /* @__PURE__ */ jsx("div", {
-							role: "group",
-							"aria-label": "Shapes",
-							className: "ink-shape-grid",
-							"data-ink-menu-columns": SHAPE_COLUMNS,
-							children: model.items.map((item) => /* @__PURE__ */ jsxs("button", {
-								type: "button",
-								role: "menuitemradio",
-								"aria-checked": item.checked,
-								tabIndex: -1,
-								className: "ink-select-item ink-menu-item ink-shape-item",
-								"data-ink-select-item": "",
-								"data-key": item.kind,
-								"data-state": item.checked ? "checked" : "unchecked",
-								onClick: () => {
-									setOptions({ kind: item.kind });
-									setTool("shape");
-									setOpen(false);
-								},
-								children: [/* @__PURE__ */ jsx(InkIcon, {
-									icon: SHAPE_ICONS[item.kind],
-									size: 16
-								}), item.label]
-							}, item.kind))
-						})
-					}) })
-				]
-			})
-		})
+//#region src/components/InkPageInput.tsx
+function InkPageInput({ className, onKeyDown: onKeyDownProp, ...rest }) {
+	const { current, count, goTo } = usePage();
+	const [draft, setDraft] = useState(String(current + 1));
+	useEffect(() => {
+		setDraft(String(current + 1));
+	}, [current]);
+	const input = useRef(null);
+	const latest = useLatest({
+		current,
+		count,
+		goTo
+	});
+	/** 1-based in the input, 0-based in the viewport. Out of range resets to the current page. */
+	const commit = useCallback((value) => {
+		const { current: page, count: total, goTo: go } = latest.current;
+		const n = Number(value);
+		if (Number.isInteger(n) && n >= 1 && n <= total) {
+			if (n - 1 !== page) go(n - 1);
+		} else setDraft(String(page + 1));
+	}, [latest]);
+	useEffect(() => {
+		const el = input.current;
+		if (!el) return;
+		const onNativeChange = () => commit(el.value);
+		el.addEventListener("change", onNativeChange);
+		return () => el.removeEventListener("change", onNativeChange);
+	}, [commit]);
+	function onKeyDown(e) {
+		onKeyDownProp?.(e);
+		if (e.defaultPrevented || e.key !== "Enter") return;
+		e.preventDefault();
+		commit(draft);
+	}
+	return /* @__PURE__ */ jsx("input", {
+		ref: input,
+		className: cx("ink-page-input", className),
+		"data-ink-page-input": "",
+		type: "number",
+		inputMode: "numeric",
+		"aria-label": "Page",
+		min: 1,
+		max: count,
+		value: draft,
+		onChange: (e) => setDraft(e.target.value),
+		onKeyDown,
+		...rest
+	});
+}
+//#endregion
+//#region src/components/InkPageCount.tsx
+function InkPageCount({ className, ...rest }) {
+	const { count } = usePage();
+	return /* @__PURE__ */ jsx("span", {
+		className: cx("ink-page-count", className),
+		"data-ink-page-count": "",
+		"aria-live": "polite",
+		...rest,
+		children: `of ${count}`
+	});
+}
+//#endregion
+//#region src/components/InkPrevPage.tsx
+function InkPrevPage({ asChild = false, className, children, disabled, onClick, ...rest }) {
+	const { current, previous } = usePage();
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		asChild,
+		className: cx("ink-prev-page", className),
+		"data-ink-prev-page": "",
+		"aria-label": "Previous page",
+		title: "Previous page",
+		disabled: disabled === true || current <= 0,
+		...rest,
+		onClick: (e) => {
+			onClick?.(e);
+			if (!e.defaultPrevented) previous();
+		},
+		children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: ChevronLeft })
 	});
 }
 //#endregion
-//#region src/components/InkSignatureDialog.tsx
-function InkSignatureDialog({ open, onOpenChange, fonts, onSave, onCloseAutoFocus, className }) {
-	return /* @__PURE__ */ jsx(Dialog.Root, {
-		open,
-		onOpenChange,
-		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
-			className: "ink-dialog-overlay",
-			"data-ink-dialog-overlay": ""
-		}), /* @__PURE__ */ jsxs(Dialog.Content, {
-			className: cx("ink-dialog ink-signature-dialog", className),
-			"data-ink-signature-dialog": "",
-			"aria-modal": "true",
-			"aria-describedby": void 0,
-			onOpenAutoFocus: (e) => {
-				e.preventDefault();
-				e.currentTarget.querySelector("[role=\"tab\"][aria-selected=\"true\"]")?.focus({ preventScroll: true });
-			},
-			onCloseAutoFocus,
-			children: [/* @__PURE__ */ jsx(Dialog.Title, {
-				className: "ink-dialog-title",
-				children: SIGNATURE_LABELS.dialog
-			}), /* @__PURE__ */ jsx(SignatureForm, {
-				fonts,
-				onSave,
-				onClose: () => onOpenChange(false)
-			})]
-		})] })
+//#region src/components/InkNextPage.tsx
+function InkNextPage({ asChild = false, className, children, disabled, onClick, ...rest }) {
+	const { current, count, next } = usePage();
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		asChild,
+		className: cx("ink-next-page", className),
+		"data-ink-next-page": "",
+		"aria-label": "Next page",
+		title: "Next page",
+		disabled: disabled === true || current >= count - 1,
+		...rest,
+		onClick: (e) => {
+			onClick?.(e);
+			if (!e.defaultPrevented) next();
+		},
+		children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: ChevronRight })
 	});
 }
-const IDLE = {
-	tab: "draw",
-	padEmpty: true,
-	name: "",
-	font: "",
-	image: void 0,
-	imageError: void 0,
-	saveError: void 0,
-	canSave: false,
-	saving: false
-};
-/** The dialog's body, mounted while it is open: one draft per opening. */
-function SignatureForm({ fonts, onSave, onClose }) {
-	const ctx = useInkContext("InkSignatureDialog");
-	const { setTool } = useTool();
-	const [, setOptions] = useToolOptions("signature");
-	const [draft] = useState(() => createSignatureDraft({ fonts: fonts ?? ctx.signatureFonts }));
-	const s = useReadable(draft.state, IDLE);
-	const uid = useId();
-	const padHost = useRef(null);
+//#endregion
+//#region src/components/InkColorMenu.tsx
+function InkColorMenu({ property, label, className, children, standalone = false, group, fallback, disabled, ...rest }) {
+	const Wrap = standalone ? Fragment : Toolbar.Button;
+	const { current, supported, set } = useToolStyle(group);
+	const [open, setOpen] = useState(false);
+	const model = colorMenuModel(property, current, supported, fallback);
+	const name = label ?? model.label;
+	/** ArrowDown opens on the first item; a click opens on the checked one. */
+	const focusFirst = useRef(false);
+	const input = useRef(null);
+	const apply = useRef((_hex) => {});
+	apply.current = (hex) => set(model.custom(hex));
+	const bindInput = useCallback((el) => {
+		input.current = el;
+		el?.addEventListener("change", () => apply.current(el.value));
+	}, []);
 	useEffect(() => {
-		const host = padHost.current;
-		const detach = host ? draft.attachPad(host) : void 0;
-		return () => {
-			detach?.();
-			draft.destroy();
-		};
-	}, [draft]);
-	const save = () => {
-		draft.save(ctx.signatures).then((t) => {
-			if (!t) return;
-			setOptions({ templateId: t.id });
-			setTool("signature");
-			onSave?.(t);
-			onClose();
-		}, () => {});
-	};
-	const tabId = (tab) => `${uid}-tab-${tab}`;
-	const panelId = (tab) => `${uid}-panel-${tab}`;
-	const panel = (tab) => ({
-		role: "tabpanel",
-		id: panelId(tab),
-		"aria-labelledby": tabId(tab),
-		className: "ink-tab-panel",
-		"data-key": tab,
-		hidden: s.tab !== tab
-	});
-	const shown = s.name.trim() || SIGNATURE_LABELS.namePlaceholder;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsx("div", {
-			role: "tablist",
-			"aria-label": SIGNATURE_LABELS.tabs,
-			className: "ink-tabs",
-			onKeyDown: (e) => handleTabKeys(e.nativeEvent, e.currentTarget),
-			children: SIGNATURE_TABS.map((tab) => /* @__PURE__ */ jsx("button", {
-				type: "button",
-				role: "tab",
-				id: tabId(tab),
-				"aria-controls": panelId(tab),
-				"aria-selected": s.tab === tab,
-				tabIndex: s.tab === tab ? 0 : -1,
-				className: "ink-tab",
-				"data-key": tab,
-				"data-state": s.tab === tab ? "active" : "inactive",
-				onClick: () => draft.setTab(tab),
-				children: SIGNATURE_LABELS[tab]
-			}, tab))
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			...panel("draw"),
-			children: [/* @__PURE__ */ jsx("div", {
-				ref: padHost,
-				className: "ink-signature-pad-host",
-				"data-ink-signature-pad-host": "",
-				role: "img",
-				"aria-label": SIGNATURE_LABELS.pad
-			}), /* @__PURE__ */ jsx("div", {
-				className: "ink-dialog-row",
+		if (input.current) input.current.value = model.customValue.toLowerCase();
+	}, [model.customValue]);
+	useEffect(() => {
+		if (!model.enabled) setOpen(false);
+	}, [model.enabled]);
+	const trigger = model.trigger;
+	const swatchStyle = trigger.kind === "color" ? { "--ink-swatch": trigger.color } : void 0;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Popover.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(Wrap, {
+			...standalone ? {} : { asChild: true },
+			children: /* @__PURE__ */ jsx(Popover.Trigger, {
+				asChild: true,
 				children: /* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: "ink-button",
-					"data-ink-signature-clear": "",
-					disabled: s.padEmpty,
-					onClick: () => draft.clearPad(),
-					children: SIGNATURE_LABELS.clear
-				})
-			})]
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			...panel("type"),
-			children: [/* @__PURE__ */ jsxs("label", {
-				className: "ink-field",
-				children: [/* @__PURE__ */ jsx("span", { children: SIGNATURE_LABELS.name }), /* @__PURE__ */ jsx("input", {
-					type: "text",
-					className: "ink-input",
-					"data-ink-signature-name": "",
-					autoComplete: "name",
-					placeholder: SIGNATURE_LABELS.namePlaceholder,
-					value: s.name,
-					onChange: (e) => draft.setName(e.target.value)
-				})]
-			}), /* @__PURE__ */ jsx("div", {
-				role: "radiogroup",
-				"aria-label": SIGNATURE_LABELS.fonts,
-				className: "ink-signature-fonts",
-				onKeyDown: (e) => handleRadioKeys(e.nativeEvent, e.currentTarget),
-				children: draft.fonts.map((font) => /* @__PURE__ */ jsx("button", {
-					type: "button",
-					role: "radio",
-					"aria-checked": s.font === font,
-					"aria-label": font,
-					tabIndex: s.font === font ? 0 : -1,
-					className: "ink-signature-font",
-					"data-key": font,
-					"data-state": s.font === font ? "checked" : "unchecked",
-					onClick: () => draft.setFont(font),
-					children: /* @__PURE__ */ jsx("span", {
-						className: "ink-signature-font-sample",
-						style: { fontFamily: fontFamilyValue(font) },
-						children: shown
+					className: cx("ink-menu-trigger ink-color-menu", className),
+					"data-ink-color-menu": property,
+					"data-state": open ? "open" : "closed",
+					"data-mixed": model.mixed ? "" : void 0,
+					"aria-label": name,
+					title: name,
+					"aria-haspopup": "menu",
+					disabled: disabled === true || !model.enabled,
+					...rest,
+					onKeyDown: (e) => {
+						rest.onKeyDown?.(e);
+						if (e.key !== "ArrowDown" || e.defaultPrevented || open || !model.enabled) return;
+						e.preventDefault();
+						focusFirst.current = true;
+						setOpen(true);
+					},
+					children: children ?? /* @__PURE__ */ jsx("span", {
+						className: "ink-swatch",
+						"data-ink-swatch": "",
+						"data-property": property,
+						"data-kind": trigger.kind,
+						"data-color": trigger.kind === "color" ? trigger.color : void 0,
+						style: swatchStyle,
+						"aria-hidden": "true"
 					})
-				}, font))
-			})]
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			...panel("image"),
+				})
+			})
+		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
+			role: "menu",
+			"aria-label": name,
+			className: "ink-select-content ink-menu-content",
+			"data-ink-select-content": "",
+			"data-ink-menu": `color-${property}`,
+			side: "bottom",
+			align: "start",
+			sideOffset: 4,
+			collisionPadding: 8,
+			onOpenAutoFocus: (e) => {
+				e.preventDefault();
+				const menu = e.currentTarget;
+				if (focusFirst.current) menuItems(menu)[0]?.focus({ preventScroll: true });
+				else focusInitialMenuItem(menu);
+				focusFirst.current = false;
+			},
+			onKeyDown: (e) => handleMenuKeys(e.nativeEvent, e.currentTarget),
 			children: [
-				/* @__PURE__ */ jsxs("label", {
-					className: "ink-field",
-					children: [/* @__PURE__ */ jsx("span", { children: SIGNATURE_LABELS.file }), /* @__PURE__ */ jsx("input", {
-						type: "file",
-						accept: "image/png,image/jpeg",
-						className: "ink-input",
-						"data-ink-signature-file": "",
-						onChange: (e) => void draft.chooseFile(e.target.files?.[0])
-					})]
-				}),
-				s.image?.kind === "image" ? /* @__PURE__ */ jsx("img", {
-					className: "ink-signature-image",
-					src: s.image.imagedata,
-					alt: ""
+				model.noFill ? /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "menuitemradio",
+					"aria-checked": model.noFill.checked,
+					tabIndex: -1,
+					className: "ink-select-item ink-menu-item",
+					"data-ink-select-item": "",
+					"data-state": model.noFill.checked ? "checked" : "unchecked",
+					onClick: () => set(model.noFill.patch),
+					children: ["No fill", model.noFill.checked ? /* @__PURE__ */ jsx("span", {
+						className: "ink-select-indicator",
+						children: /* @__PURE__ */ jsx(InkIcon, {
+							icon: Check,
+							size: 16
+						})
+					}) : null]
 				}) : null,
-				s.imageError ? /* @__PURE__ */ jsx("p", {
-					className: "ink-field-error",
-					role: "alert",
-					children: s.imageError
-				}) : null
-			]
-		}),
-		s.saveError ? /* @__PURE__ */ jsx("p", {
-			className: "ink-field-error",
-			role: "alert",
-			"data-ink-signature-save-error": "",
-			children: s.saveError
-		}) : null,
-		/* @__PURE__ */ jsxs("div", {
-			className: "ink-dialog-actions",
-			children: [/* @__PURE__ */ jsx(Dialog.Close, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx("button", {
+				/* @__PURE__ */ jsx("div", {
+					role: "group",
+					"aria-label": "Colours",
+					className: "ink-color-grid",
+					"data-ink-menu-columns": COLOR_COLUMNS,
+					children: model.swatches.map((sw) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						role: "menuitemradio",
+						"aria-label": sw.label,
+						"aria-checked": sw.checked,
+						tabIndex: -1,
+						className: "ink-swatch-item",
+						"data-state": sw.checked ? "checked" : "unchecked",
+						style: { "--ink-swatch": sw.color },
+						onClick: () => set(sw.patch)
+					}, sw.key))
+				}),
+				/* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: "ink-button",
-					"data-ink-signature-cancel": "",
-					children: SIGNATURE_LABELS.cancel
+					role: "menuitem",
+					tabIndex: -1,
+					className: "ink-select-item ink-menu-item",
+					"data-ink-select-item": "",
+					onClick: () => input.current?.click(),
+					children: "Custom…"
 				})
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: "ink-button",
-				"data-variant": "primary",
-				"data-ink-signature-save": "",
-				disabled: !s.canSave,
-				onClick: save,
-				children: SIGNATURE_LABELS.save
-			})]
-		})
-	] });
+			]
+		}) })]
+	}), /* @__PURE__ */ jsx("input", {
+		ref: bindInput,
+		type: "color",
+		className: "ink-color-input",
+		"aria-label": "Custom colour",
+		"data-ink-color-input": property,
+		tabIndex: -1,
+		defaultValue: model.customValue.toLowerCase()
+	})] });
 }
 //#endregion
-//#region src/components/InkSignatureMenu.tsx
-const NO_TEMPLATES = [];
-/** A saved signature drawn small: ink as filled outlines, an image as itself. */
-function SignaturePreview({ template }) {
-	if (template.kind === "image") return /* @__PURE__ */ jsx("span", {
-		className: "ink-signature-preview",
-		"data-kind": "image",
-		children: /* @__PURE__ */ jsx("img", {
-			src: template.imagedata,
-			alt: "",
-			draggable: false
-		})
-	});
-	const { viewBox, paths } = signaturePreview(template);
-	return /* @__PURE__ */ jsx("span", {
-		className: "ink-signature-preview",
-		"data-kind": "ink",
-		children: /* @__PURE__ */ jsx("svg", {
-			viewBox,
-			"aria-hidden": "true",
-			children: paths.map((d, i) => /* @__PURE__ */ jsx("path", {
-				d,
-				fill: "currentColor"
-			}, i))
+//#region src/components/InkShapeMenu.tsx
+function InkShapeMenu({ className, children, ...rest }) {
+	const { tool, setTool } = useTool();
+	const [options, setOptions] = useToolOptions("shape");
+	const [open, setOpen] = useState(false);
+	const model = shapeMenuModel(options, SHAPE_KINDS);
+	const active = tool === "shape";
+	/** ArrowDown opens on the first item; a click opens on the checked one. */
+	const focusFirst = useRef(false);
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsx(Popover.Anchor, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("div", {
+				role: "group",
+				"aria-label": "Shape",
+				className: cx("ink-split-button ink-shape-menu", className),
+				"data-ink-shape-menu": "",
+				...rest,
+				children: [
+					/* @__PURE__ */ jsx(Toolbar.Button, {
+						className: "ink-tool-button ink-shape-button",
+						"data-ink-tool-button": "",
+						"data-ink-shape-button": "",
+						"data-tool": "shape",
+						"data-kind": model.kind,
+						"data-state": active ? "on" : "off",
+						"aria-pressed": active,
+						"aria-label": model.label,
+						title: model.label,
+						onClick: () => setTool("shape"),
+						children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: SHAPE_ICONS[model.kind] })
+					}),
+					/* @__PURE__ */ jsx(Toolbar.Button, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Popover.Trigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "ink-menu-trigger ink-shape-menu-trigger",
+								"data-ink-shape-menu-trigger": "",
+								"data-state": open ? "open" : "closed",
+								"aria-label": "Choose shape",
+								title: "Choose shape",
+								"aria-haspopup": "menu",
+								onKeyDown: (e) => {
+									if (e.key !== "ArrowDown" || e.defaultPrevented || open) return;
+									e.preventDefault();
+									focusFirst.current = true;
+									setOpen(true);
+								},
+								children: /* @__PURE__ */ jsx(InkIcon, { icon: ChevronDown })
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, {
+						role: "menu",
+						"aria-label": "Shapes",
+						className: "ink-select-content ink-menu-content",
+						"data-ink-select-content": "",
+						"data-ink-menu": "shape",
+						side: "bottom",
+						align: "start",
+						sideOffset: 4,
+						collisionPadding: 8,
+						onOpenAutoFocus: (e) => {
+							e.preventDefault();
+							const menu = e.currentTarget;
+							if (focusFirst.current) menuItems(menu)[0]?.focus({ preventScroll: true });
+							else focusInitialMenuItem(menu);
+							focusFirst.current = false;
+						},
+						onKeyDown: (e) => handleMenuKeys(e.nativeEvent, e.currentTarget),
+						children: /* @__PURE__ */ jsx("div", {
+							role: "group",
+							"aria-label": "Shapes",
+							className: "ink-shape-grid",
+							"data-ink-menu-columns": SHAPE_COLUMNS,
+							children: model.items.map((item) => /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								role: "menuitemradio",
+								"aria-checked": item.checked,
+								tabIndex: -1,
+								className: "ink-select-item ink-menu-item ink-shape-item",
+								"data-ink-select-item": "",
+								"data-key": item.kind,
+								"data-state": item.checked ? "checked" : "unchecked",
+								onClick: () => {
+									setOptions({ kind: item.kind });
+									setTool("shape");
+									setOpen(false);
+								},
+								children: [/* @__PURE__ */ jsx(InkIcon, {
+									icon: SHAPE_ICONS[item.kind],
+									size: 16
+								}), item.label]
+							}, item.kind))
+						})
+					}) })
+				]
+			})
 		})
 	});
 }
+//#endregion
+//#region src/components/InkSignatureMenu.tsx
+const NO_TEMPLATES = [];
 function InkSignatureMenu({ className, children, fonts, ...rest }) {
 	const { tool, setTool } = useTool();
 	const [options, setOptions] = useToolOptions("signature");
 	const { signatures } = useInkContext("InkSignatureMenu");
 	const templates = useReadable(signatures.templates, NO_TEMPLATES);
-	const removeError = useReadable(signatures.removeError, void 0);
 	const model = signatureMenuModel(templates, options);
 	const [open, setOpen] = useState(false);
 	const [creating, setCreating] = useState(false);
@@ -2059,25 +2462,9 @@ function InkSignatureMenu({ className, children, fonts, ...rest }) {
 	const focusFirst = useRef(false);
 	/** Set while the menu closes for the dialog, which takes focus instead of the trigger. */
 	const toDialog = useRef(false);
-	/** The row of a removed signature, until focus lands on what took its place. */
-	const removedRow = useRef(null);
 	useEffect(() => {
 		if (open) signatures.clearRemoveError();
 	}, [open, signatures]);
-	useEffect(() => {
-		const row = removedRow.current;
-		const panel = menu.current;
-		if (row === null || !panel) return;
-		removedRow.current = null;
-		const rows = panel.querySelectorAll(".ink-signature-item");
-		(rows[Math.min(row, rows.length - 1)] ?? panel.querySelector("[data-ink-signature-create]"))?.focus({ preventScroll: true });
-	}, [templates]);
-	const remove = (id, row) => {
-		removedRow.current = row;
-		signatures.remove(id).catch(() => {
-			removedRow.current = null;
-		});
-	};
 	return /* @__PURE__ */ jsx(Popover.Root, {
 		open,
 		onOpenChange: setOpen,
@@ -2128,7 +2515,7 @@ function InkSignatureMenu({ className, children, fonts, ...rest }) {
 							})
 						})
 					}),
-					/* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
+					/* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, {
 						ref: menu,
 						role: "menu",
 						"aria-label": SIGNATURE_LABELS.menu,
@@ -2151,71 +2538,20 @@ function InkSignatureMenu({ className, children, fonts, ...rest }) {
 							toDialog.current = false;
 						},
 						onKeyDown: (e) => handleMenuKeys(e.nativeEvent, e.currentTarget),
-						children: [
-							model.items.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-								role: "group",
-								"aria-label": SIGNATURE_LABELS.saved,
-								className: "ink-signature-list",
-								"data-ink-menu-columns": 2,
-								children: model.items.map((item, row) => [/* @__PURE__ */ jsx("button", {
-									type: "button",
-									role: "menuitemradio",
-									"aria-checked": item.checked,
-									"aria-label": item.label,
-									tabIndex: -1,
-									className: "ink-select-item ink-menu-item ink-signature-item",
-									"data-ink-select-item": "",
-									"data-key": item.id,
-									"data-state": item.checked ? "checked" : "unchecked",
-									onClick: () => {
-										setOptions({ templateId: item.id });
-										setTool("signature");
-										setOpen(false);
-									},
-									children: /* @__PURE__ */ jsx(SignaturePreview, { template: item.template })
-								}, `${item.id}-choose`), /* @__PURE__ */ jsx("button", {
-									type: "button",
-									role: "menuitem",
-									"aria-label": item.removeLabel,
-									title: item.removeLabel,
-									tabIndex: -1,
-									className: "ink-menu-item ink-signature-remove",
-									"data-ink-signature-remove": "",
-									"data-key": item.id,
-									onClick: () => remove(item.id, row),
-									children: /* @__PURE__ */ jsx(InkIcon, {
-										icon: Trash2,
-										size: 16
-									})
-								}, `${item.id}-remove`)])
-							}), /* @__PURE__ */ jsx("div", {
-								role: "separator",
-								className: "ink-select-separator"
-							})] }) : null,
-							/* @__PURE__ */ jsxs("button", {
-								type: "button",
-								role: "menuitem",
-								tabIndex: -1,
-								className: "ink-select-item ink-menu-item ink-signature-create",
-								"data-ink-select-item": "",
-								"data-ink-signature-create": "",
-								onClick: () => {
-									toDialog.current = true;
-									setOpen(false);
-									setCreating(true);
-								},
-								children: [/* @__PURE__ */ jsx(InkIcon, {
-									icon: Plus,
-									size: 16
-								}), SIGNATURE_LABELS.create]
-							}),
-							removeError ? /* @__PURE__ */ jsx("p", {
-								className: "ink-field-error ink-signature-remove-error",
-								role: "alert",
-								"data-ink-signature-remove-error": "",
-								children: removeError
-							}) : null
-						]
+						children: /* @__PURE__ */ jsx(SignatureMenuPanel, {
+							items: model.items,
+							menu,
+							onChoose: (t) => {
+								setOptions({ templateId: t.id });
+								setTool("signature");
+								setOpen(false);
+							},
+							onCreate: () => {
+								toDialog.current = true;
+								setOpen(false);
+								setCreating(true);
+							}
+						})
 					}) }),
 					/* @__PURE__ */ jsx(InkSignatureDialog, {
 						open: creating,
@@ -2866,6 +3202,6 @@ function ThreadForm({ editingRoot, locked, deleteLabel, onSubmit, onRemove, onCl
 	});
 }
 //#endregion
-export { InkAnnotation, InkColorMenu, InkCommand, InkFindBar, InkHighlightMenu, InkIcon, InkLineStyleMenu, InkNextPage, InkPage, InkPageCount, InkPageInput, InkPrevPage, InkRedo, InkRoot, InkSearchButton, InkShapeMenu, InkSignatureDialog, InkSignatureMenu, InkTextStyleMenu, InkThreadPopover, InkToolButton, InkToolbar, InkToolbarSeparator, InkUndo, InkViewport, InkZoomIn, InkZoomOut, InkZoomSelect, useAnnotations, useCommand, useDocument, useEmbedded, useHistory, useInkContext, usePage, useReadable, useSearch, useSelection, useTool, useToolOptions, useToolStyle, useZoom };
+export { InkAnnotation, InkColorMenu, InkCommand, InkFindBar, InkHighlightMenu, InkIcon, InkLineStyleMenu, InkNextPage, InkPage, InkPageCount, InkPageInput, InkPrevPage, InkRedo, InkRoot, InkSearchButton, InkShapeMenu, InkSignatureDialog, InkSignatureMenu, InkTextStyleMenu, InkThreadPopover, InkToolButton, InkToolbar, InkToolbarSeparator, InkUndo, InkViewport, InkZoomIn, InkZoomOut, InkZoomSelect, useAnnotations, useCommand, useDocument, useEmbedded, useForm, useHistory, useInkContext, usePage, useReadable, useSearch, useSelection, useTool, useToolOptions, useToolStyle, useZoom };
 
 //# sourceMappingURL=index.mjs.map