@inkbar/core 0.1.1 → 0.2.0

package/dist/dom.mjs

@@ -1,4 +1,5 @@
 import { B as mergeLineRects, F as confidenceBucket, H as readonly, K as invertMatrix, L as cssVariableDefaults, Q as rectFromPoints, U as writable, W as applyMatrix, a as acceptSuggestion, at as InkError, et as rectsIntersect, i as threadRoot, nt as translateRect, o as openDocument, ot as isInkError, r as threadOf, t as isAbandonedNote, tt as translateQuad } from "./threads-BtvtrAhL.mjs";
+import { ChevronLeft, ChevronRight, Hand, Highlighter, ICON_ATTRIBUTES, MessageSquare, MousePointer2, Redo2, Square, Undo2, ZoomIn, ZoomOut } from "@inkbar/icons";
 //#region src/dom/transform.ts
 /** Folds any integer multiple of 90 onto 0, 90, 180 or 270. Throws `RangeError` otherwise. */
 function normalizeRotation(deg) {
@@ -2497,7 +2498,7 @@ function h(tag, attrs = {}, ...children) {
 	el.append(...children);
 	return el;
 }
-function button(label, onClick) {
+function button$1(label, onClick) {
 	const b = h("button", { type: "button" }, label);
 	b.addEventListener("click", onClick);
 	return b;
@@ -2757,11 +2758,11 @@ function threadItem(a) {
 function createThreadForm(n, actions) {
 	const textarea = h("textarea", { rows: "2" });
 	const send = h("button", { type: "submit" });
-	const remove = button("Delete", actions.remove);
+	const remove = button$1("Delete", actions.remove);
 	const element = h("form", {
 		class: "ink-thread-reply",
 		"data-ink-thread-reply": ""
-	}, textarea, h("div", { class: "ink-thread-actions" }, send, remove, button("Close", actions.close)));
+	}, textarea, h("div", { class: "ink-thread-actions" }, send, remove, button$1("Close", actions.close)));
 	const syncSend = () => {
 		send.disabled = !textarea.value.trim();
 	};
@@ -2835,7 +2836,7 @@ function createSuggestionCard(opts) {
 		popover.panel.replaceChildren(h("p", { class: "ink-suggestion-reason" }, h("strong", {}, s?.reason ?? "Suggested redaction"), ...bucket ? [h("span", {
 			class: "ink-suggestion-confidence",
 			"data-confidence": bucket
-		}, `${bucket} confidence`)] : []), ...s?.explanation ? [h("p", { class: "ink-suggestion-explanation" }, s.explanation)] : [], h("div", { class: "ink-suggestion-actions" }, button("Accept", accept), ...a.locked ? [] : [button("Dismiss", dismiss)]));
+		}, `${bucket} confidence`)] : []), ...s?.explanation ? [h("p", { class: "ink-suggestion-explanation" }, s.explanation)] : [], h("div", { class: "ink-suggestion-actions" }, button$1("Accept", accept), ...a.locked ? [] : [button$1("Dismiss", dismiss)]));
 	}
 	function close() {
 		activated.set(null);
@@ -2864,315 +2865,14 @@ function createSuggestionCard(opts) {
 	} };
 }
 //#endregion
-//#region src/dom/viewer/icons.ts
-const ICONS = {
-	hand: [
-		["path", { d: "M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" }],
-		["path", { d: "M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" }],
-		["path", { d: "M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" }],
-		["path", { d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" }]
-	],
-	"mouse-pointer-2": [["path", { d: "M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" }]],
-	highlighter: [["path", { d: "m9 11-6 6v3h9l3-3" }], ["path", { d: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" }]],
-	square: [["rect", {
-		width: "18",
-		height: "18",
-		x: "3",
-		y: "3",
-		rx: "2"
-	}]],
-	"message-square": [["path", { d: "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" }]],
-	"zoom-in": [
-		["circle", {
-			cx: "11",
-			cy: "11",
-			r: "8"
-		}],
-		["line", {
-			x1: "21",
-			x2: "16.65",
-			y1: "21",
-			y2: "16.65"
-		}],
-		["line", {
-			x1: "11",
-			x2: "11",
-			y1: "8",
-			y2: "14"
-		}],
-		["line", {
-			x1: "8",
-			x2: "14",
-			y1: "11",
-			y2: "11"
-		}]
-	],
-	"zoom-out": [
-		["circle", {
-			cx: "11",
-			cy: "11",
-			r: "8"
-		}],
-		["line", {
-			x1: "21",
-			x2: "16.65",
-			y1: "21",
-			y2: "16.65"
-		}],
-		["line", {
-			x1: "8",
-			x2: "14",
-			y1: "11",
-			y2: "11"
-		}]
-	]
-};
-const SVG = "http://www.w3.org/2000/svg";
-/** An 18px Lucide icon, hidden from assistive technology: its button carries the name. */
-function icon(name) {
-	const svg = document.createElementNS(SVG, "svg");
-	const attrs = {
-		xmlns: SVG,
-		width: "18",
-		height: "18",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "2",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round",
-		"aria-hidden": "true"
-	};
-	for (const [k, v] of Object.entries(attrs)) svg.setAttribute(k, v);
-	for (const [tag, shape] of ICONS[name]) {
-		const child = document.createElementNS(SVG, tag);
-		for (const [k, v] of Object.entries(shape)) child.setAttribute(k, v);
-		svg.append(child);
-	}
-	return svg;
-}
-//#endregion
-//#region src/dom/viewer/toolbar.ts
-const TOOLS = [
-	["view", "hand"],
-	["select", "mouse-pointer-2"],
-	["highlight", "highlighter"],
-	["redact-area", "square"],
-	["note", "message-square"]
-];
-/** A toolbar button with an icon; the label is its accessible name and tooltip. */
-function iconButton(label, attrs, name, onClick) {
-	const b = h("button", {
-		type: "button",
-		...attrs,
-		"aria-label": label,
-		title: label
-	});
-	b.append(icon(name));
-	b.addEventListener("click", onClick);
-	return b;
-}
-const group = (name, label, ...children) => h("div", {
-	class: "ink-toolbar-group",
-	"data-ink-toolbar-group": name,
-	role: "group",
-	"aria-label": label
-}, ...children);
-function createToolbar() {
-	let stops = [];
-	let bound = null;
-	const watch = (r, fn) => {
-		fn(r.get());
-		stops.push(r.subscribe(fn));
-	};
-	const toolButtons = TOOLS.map(([id, name]) => iconButton(TOOL_LABELS[id], {
-		class: "ink-tool-button",
-		"data-ink-tool-button": "",
-		"data-tool": id
-	}, name, () => bound?.tools.set(id)));
-	const showTool = (active) => {
-		for (const b of toolButtons) {
-			const on = b.dataset.tool === active;
-			b.dataset.state = on ? "on" : "off";
-			b.setAttribute("aria-pressed", String(on));
-		}
-	};
-	const zoomOut = iconButton("Zoom out", {
-		class: "ink-zoom-out",
-		"data-ink-zoom-out": ""
-	}, "zoom-out", () => bound?.viewport.zoomBy(.8));
-	const zoomIn = iconButton("Zoom in", {
-		class: "ink-zoom-in",
-		"data-ink-zoom-in": ""
-	}, "zoom-in", () => bound?.viewport.zoomBy(1.25));
-	const custom = h("option", { value: "custom" });
-	const zoomSelect = h("select", {
-		class: "ink-zoom-select",
-		"data-ink-zoom-select": "",
-		"aria-label": "Zoom"
-	}, h("option", { value: "fit-width" }, "Fit width"), h("option", { value: "fit-page" }, "Fit page"), ...ZOOM_LEVELS.map((l) => h("option", { value: String(l) }, `${Math.round(l * 100)}%`)));
-	zoomSelect.addEventListener("change", () => {
-		const v = zoomSelect.value;
-		if (v === "fit-width" || v === "fit-page") bound?.viewport.setZoom(v);
-		else if (v !== "custom") bound?.viewport.setZoom(Number(v));
-	});
-	const pageInput = h("input", {
-		class: "ink-page-input",
-		"data-ink-page-input": "",
-		type: "number",
-		inputmode: "numeric",
-		"aria-label": "Page",
-		min: "1"
-	});
-	const commitPage = () => {
-		if (!bound) return;
-		const { viewport } = bound;
-		const n = Number(pageInput.value);
-		const current = viewport.currentPage.get();
-		if (Number.isInteger(n) && n >= 1 && n <= bound.doc.pages.length) {
-			if (n - 1 !== current) viewport.scrollToPage(n - 1);
-		} else pageInput.value = String(current + 1);
-	};
-	pageInput.addEventListener("change", commitPage);
-	pageInput.addEventListener("keydown", (e) => {
-		if (e.key !== "Enter" || e.defaultPrevented) return;
-		e.preventDefault();
-		commitPage();
-	});
-	const pageCount = h("span", {
-		class: "ink-page-count",
-		"data-ink-page-count": "",
-		"aria-live": "polite"
-	});
-	const controls = [
-		...toolButtons,
-		zoomOut,
-		zoomSelect,
-		zoomIn,
-		pageInput
-	];
-	const element = h("div", {
-		class: "ink-toolbar ink-default-toolbar",
-		"data-ink-toolbar": "",
-		"data-ink-default-toolbar": "",
-		role: "toolbar",
-		"aria-label": "Document tools",
-		"aria-orientation": "horizontal"
-	}, group("tools", "Tools", ...toolButtons), group("zoom", "Zoom", zoomOut, zoomSelect, zoomIn), group("page", "Page", pageInput, pageCount));
-	const roving = rovingTabindex(element);
-	function stop() {
-		for (const s of stops) s();
-		stops = [];
-		bound = null;
-	}
-	function unbind() {
-		stop();
-		for (const c of controls) c.disabled = true;
-		showTool(null);
-		custom.remove();
-		zoomSelect.value = "fit-width";
-		pageInput.value = "";
-		pageCount.textContent = "";
-		roving.sync();
-	}
-	unbind();
-	return {
-		element,
-		bind(doc, viewport, tools) {
-			stop();
-			bound = {
-				doc,
-				viewport,
-				tools
-			};
-			for (const c of controls) c.disabled = false;
-			watch(tools.active, showTool);
-			watch(viewport.zoom, (z) => {
-				const level = typeof z === "number" ? ZOOM_LEVELS.find((l) => Math.abs(l - z) < .001) : void 0;
-				if (typeof z === "number" && level === void 0) {
-					custom.textContent = `${Math.round(z * 100)}%`;
-					zoomSelect.append(custom);
-					zoomSelect.value = "custom";
-				} else {
-					custom.remove();
-					zoomSelect.value = typeof z === "number" ? String(level) : z;
-				}
-			});
-			const count = doc.pages.length;
-			pageInput.max = String(count);
-			pageCount.textContent = `of ${count}`;
-			watch(viewport.currentPage, (p) => {
-				pageInput.value = String(p + 1);
-			});
-			roving.sync();
-		},
-		unbind,
-		destroy() {
-			stop();
-			roving.destroy();
-			element.remove();
-		}
-	};
-}
-/** Roving items, as in the bindings' Radix toolbar: buttons only. */
-const ITEMS = "button";
-/**
-* One Tab stop across the enabled buttons in `bar`: the current one has `tabindex="0"`, the
-* rest `-1`. ArrowLeft and ArrowRight move between them and wrap, Home and End go to the ends.
-* Inputs, selects and textareas, built in or added by the host, keep their own tabindex (a
-* Tab stop of their own by default) and their own arrow, Home and End keys.
-*/
-function rovingTabindex(bar) {
-	let current = null;
-	const items = () => [...bar.querySelectorAll(ITEMS)].filter((el) => !el.disabled && !el.closest("[hidden]"));
-	const sync = () => {
-		const list = items();
-		if (!current || !list.includes(current)) current = list[0] ?? null;
-		for (const el of bar.querySelectorAll(ITEMS)) el.tabIndex = el === current ? 0 : -1;
-	};
-	const onFocusIn = (e) => {
-		const target = e.target;
-		if (!items().includes(target)) return;
-		current = target;
-		sync();
-	};
-	const onKeyDown = (e) => {
-		if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;
-		const list = items();
-		const i = list.indexOf(e.target);
-		if (i < 0) return;
-		const last = list.length - 1;
-		const next = e.key === "ArrowRight" ? i === last ? 0 : i + 1 : e.key === "ArrowLeft" ? i === 0 ? last : i - 1 : e.key === "Home" ? 0 : e.key === "End" ? last : -1;
-		if (next < 0) return;
-		e.preventDefault();
-		list[next].focus();
-	};
-	const observer = new MutationObserver(sync);
-	observer.observe(bar, {
-		childList: true,
-		subtree: true,
-		attributes: true,
-		attributeFilter: ["disabled", "hidden"]
-	});
-	bar.addEventListener("focusin", onFocusIn);
-	bar.addEventListener("keydown", onKeyDown);
-	sync();
-	return {
-		sync,
-		destroy() {
-			observer.disconnect();
-			bar.removeEventListener("focusin", onFocusIn);
-			bar.removeEventListener("keydown", onKeyDown);
-		}
-	};
-}
-//#endregion
 //#region src/dom/viewer/create-viewer.ts
 function createViewer(el, opts) {
-	const { source: initial, assets, password, defaults, history, toolbar: withToolbar = true, notes: withNotes = true, suggestions: withSuggestions = true, onReady, onError, onActivate, onBuild, onPageMount, onPageUnmount, onPageError, ...view } = opts;
+	const { source: initial, assets, password, defaults, history, notes: withNotes = true, suggestions: withSuggestions = true, onReady, onError, onActivate, onBuild, onPageMount, onPageUnmount, onPageError, ...view } = opts;
 	const status = writable({ state: "idle" });
 	const current = writable(null);
 	const engine = writable(null);
+	const viewport = writable(null);
+	const tools = writable(null);
 	/** The activated annotation: the note thread and the suggestion card open from it. */
 	const activated = writable(null);
 	const root = h("div", {
@@ -3191,8 +2891,6 @@ function createViewer(el, opts) {
 		"data-ink-viewport-root": "",
 		"data-state": "idle"
 	}, scroll);
-	const toolbar = withToolbar ? createToolbar() : null;
-	if (toolbar) root.append(toolbar.element);
 	root.append(viewportRoot);
 	el.append(root);
 	const focusReturn = createFocusReturn({
@@ -3255,9 +2953,10 @@ function createViewer(el, opts) {
 				activated.set(id);
 				onActivate?.(id);
 			},
-			onBuild: (viewport, tools) => {
-				toolbar?.bind(doc, viewport, tools);
-				onBuild?.(viewport, tools);
+			onBuild: (vp, tc) => {
+				tools.set(tc);
+				viewport.set(vp);
+				onBuild?.(vp, tc);
 			},
 			onPageMount: (page, mount, host) => {
 				hosts.set(page, host);
@@ -3290,7 +2989,8 @@ function createViewer(el, opts) {
 			activated.set(null);
 			engine.set(null);
 			mounted.destroy();
-			toolbar?.unbind();
+			viewport.set(null);
+			tools.set(null);
 		};
 	}
 	let loads = 0;
@@ -3346,19 +3046,319 @@ function createViewer(el, opts) {
 		status: readonly(status),
 		document: readonly(current),
 		engine: readonly(engine),
-		toolbar: toolbar?.element ?? null,
+		viewport: readonly(viewport),
+		tools: readonly(tools),
 		open,
 		destroy() {
 			if (destroyed) return;
 			destroyed = true;
 			loads++;
 			close();
-			toolbar?.destroy();
 			root.remove();
 		}
 	};
 }
 //#endregion
-export { TOOL_LABELS, ZOOM_LEVELS, annotationElementFor, attachViewportKeys, builtinTools, computeCssLayout, confidenceAttr, createFocusReturn, createOverlay, createPageMount, createPageRenderer, createPageTransform, createTextLayer, createToolController, createViewer, createViewport, cssRectsToUserRects, cssVariableDefaults, fitZoomCss, getSelectionQuads, highlightTool, hitFor, mostVisiblePageCss, mountViewer, normalizeRotation, noteTool, observeAnnotationElement, redactAreaTool, renderAnnotationContent, selectTool, shouldKeepOpenOnAnnotation, viewTool, visibleRangeCss };
+//#region src/dom/viewer/controls.ts
+/**
+* Runs `connect` for every value `source` takes while it is set, undoing the previous run's
+* subscriptions first, and disables `control` while it is `null`.
+*/
+function follow(source, control, connect, reset) {
+	let stops = [];
+	const watch = (r, fn) => {
+		fn(r.get());
+		stops.push(r.subscribe(fn));
+	};
+	const run = (value) => {
+		for (const s of stops) s();
+		stops = [];
+		control.disabled = value === null;
+		if (value === null) reset?.();
+		else connect(value, watch);
+	};
+	run(source.get());
+	source.subscribe(run);
+}
+const SVG = "http://www.w3.org/2000/svg";
+const TOOL_ICONS = {
+	view: Hand,
+	select: MousePointer2,
+	highlight: Highlighter,
+	"redact-area": Square,
+	note: MessageSquare
+};
+/**
+* An `<svg>` drawing `icon` from `@inkbar/icons`, hidden from assistive technology: the
+* control it sits in carries the name. The theme sizes it with `--ink-icon-size`.
+*/
+function createIcon(icon) {
+	const svg = document.createElementNS(SVG, "svg");
+	const attrs = {
+		...ICON_ATTRIBUTES,
+		width: "18",
+		height: "18",
+		class: "ink-icon",
+		"aria-hidden": "true"
+	};
+	for (const [k, v] of Object.entries(attrs)) svg.setAttribute(k, v);
+	for (const [tag, shape] of icon) {
+		const child = document.createElementNS(SVG, tag);
+		for (const [k, v] of Object.entries(shape)) child.setAttribute(k, v);
+		svg.append(child);
+	}
+	return svg;
+}
+function button(label, attrs, icon) {
+	const b = h("button", {
+		type: "button",
+		...attrs,
+		"aria-label": label,
+		title: label
+	});
+	b.append(createIcon(icon));
+	return b;
+}
+/**
+* A toolbar following the WAI-ARIA toolbar pattern: its buttons share one Tab stop, with
+* arrow keys, Home and End to move between them. Fields and selects are Tab stops of their
+* own and keep their keys. Buttons added later join in.
+*/
+function createToolbar(opts = {}) {
+	const bar = h("div", {
+		class: "ink-toolbar",
+		"data-ink-toolbar": "",
+		role: "toolbar",
+		"aria-label": opts.label ?? "Document tools",
+		"aria-orientation": "horizontal"
+	});
+	rovingTabindex(bar);
+	return bar;
+}
+/** A divider between groups of controls in a horizontal toolbar. Not focusable. */
+function createToolbarSeparator() {
+	return h("div", {
+		role: "separator",
+		"aria-orientation": "vertical",
+		class: "ink-toolbar-separator",
+		"data-ink-toolbar-separator": ""
+	});
+}
+/** Undoes the last change to the document's annotations; disabled when there is none. */
+function createUndo(viewer) {
+	return historyButton(viewer, "undo");
+}
+/** Redoes the last undone change; disabled when there is none. */
+function createRedo(viewer) {
+	return historyButton(viewer, "redo");
+}
+function historyButton(viewer, action) {
+	const b = button(action === "undo" ? "Undo" : "Redo", {
+		class: `ink-${action}`,
+		[`data-ink-${action}`]: ""
+	}, action === "undo" ? Undo2 : Redo2);
+	b.addEventListener("click", () => viewer.document.get()?.history[action]());
+	follow(viewer.document, b, (doc, watch) => watch(action === "undo" ? doc.history.canUndo : doc.history.canRedo, (can) => {
+		b.disabled = !can;
+	}));
+	return b;
+}
+/** Sets the tool; pressed while it is the active one. */
+function createToolButton(viewer, tool, opts = {}) {
+	const b = button(opts.label ?? TOOL_LABELS[tool], {
+		class: "ink-tool-button",
+		"data-ink-tool-button": "",
+		"data-tool": tool
+	}, TOOL_ICONS[tool]);
+	const show = (active) => {
+		const on = active === tool;
+		b.dataset.state = on ? "on" : "off";
+		b.setAttribute("aria-pressed", String(on));
+	};
+	b.addEventListener("click", () => viewer.tools.get()?.set(tool));
+	follow(viewer.tools, b, (tools, watch) => watch(tools.active, show), () => show(null));
+	return b;
+}
+function createZoomIn(viewer) {
+	const b = button("Zoom in", {
+		class: "ink-zoom-in",
+		"data-ink-zoom-in": ""
+	}, ZoomIn);
+	b.addEventListener("click", () => viewer.viewport.get()?.zoomBy(1.25));
+	follow(viewer.viewport, b, () => void 0);
+	return b;
+}
+function createZoomOut(viewer) {
+	const b = button("Zoom out", {
+		class: "ink-zoom-out",
+		"data-ink-zoom-out": ""
+	}, ZoomOut);
+	b.addEventListener("click", () => viewer.viewport.get()?.zoomBy(.8));
+	follow(viewer.viewport, b, () => void 0);
+	return b;
+}
+/** Fit width, fit page and the zoom levels; a zoom between levels gets an option of its own. */
+function createZoomSelect(viewer) {
+	const custom = h("option", { value: "custom" });
+	const select = h("select", {
+		class: "ink-zoom-select",
+		"data-ink-zoom-select": "",
+		"aria-label": "Zoom"
+	}, h("option", { value: "fit-width" }, "Fit width"), h("option", { value: "fit-page" }, "Fit page"), ...ZOOM_LEVELS.map((l) => h("option", { value: String(l) }, `${Math.round(l * 100)}%`)));
+	select.addEventListener("change", () => {
+		const v = select.value;
+		const viewport = viewer.viewport.get();
+		if (v === "fit-width" || v === "fit-page") viewport?.setZoom(v);
+		else if (v !== "custom") viewport?.setZoom(Number(v));
+	});
+	follow(viewer.viewport, select, (viewport, watch) => watch(viewport.zoom, (z) => {
+		const level = typeof z === "number" ? ZOOM_LEVELS.find((l) => Math.abs(l - z) < .001) : void 0;
+		if (typeof z === "number" && level === void 0) {
+			custom.textContent = `${Math.round(z * 100)}%`;
+			const after = [...select.options].find((o) => o !== custom && Number(o.value) > z);
+			select.insertBefore(custom, after ?? null);
+			select.value = "custom";
+		} else {
+			custom.remove();
+			select.value = typeof z === "number" ? String(level) : z;
+		}
+	}), () => {
+		custom.remove();
+		select.value = "fit-width";
+	});
+	return select;
+}
+/**
+* The current page, 1-based. Enter or leaving the field goes to the page typed; a number out
+* of range puts the current page back.
+*/
+function createPageInput(viewer) {
+	const input = h("input", {
+		class: "ink-page-input",
+		"data-ink-page-input": "",
+		type: "number",
+		inputmode: "numeric",
+		"aria-label": "Page",
+		min: "1"
+	});
+	const commit = () => {
+		const viewport = viewer.viewport.get();
+		const doc = viewer.document.get();
+		if (!viewport || !doc) return;
+		const n = Number(input.value);
+		const current = viewport.currentPage.get();
+		if (Number.isInteger(n) && n >= 1 && n <= doc.pages.length) {
+			if (n - 1 !== current) viewport.scrollToPage(n - 1);
+		} else input.value = String(current + 1);
+	};
+	input.addEventListener("change", commit);
+	input.addEventListener("keydown", (e) => {
+		if (e.key !== "Enter" || e.defaultPrevented) return;
+		e.preventDefault();
+		commit();
+	});
+	follow(viewer.viewport, input, (viewport, watch) => {
+		input.max = String(viewer.document.get()?.pages.length ?? 1);
+		watch(viewport.currentPage, (p) => input.value = String(p + 1));
+	}, () => input.value = "");
+	return input;
+}
+/** "of 12": the page count, announced when it changes. */
+function createPageCount(viewer) {
+	const span = h("span", {
+		class: "ink-page-count",
+		"data-ink-page-count": "",
+		"aria-live": "polite"
+	});
+	const show = () => {
+		const doc = viewer.document.get();
+		span.textContent = doc && viewer.viewport.get() ? `of ${doc.pages.length}` : "";
+	};
+	show();
+	viewer.viewport.subscribe(show);
+	return span;
+}
+/** Disabled on the first page. */
+function createPrevPage(viewer) {
+	return pageButton(viewer, -1);
+}
+/** Disabled on the last page. */
+function createNextPage(viewer) {
+	return pageButton(viewer, 1);
+}
+function pageButton(viewer, step) {
+	const b = step < 0 ? button("Previous page", {
+		class: "ink-prev-page",
+		"data-ink-prev-page": ""
+	}, ChevronLeft) : button("Next page", {
+		class: "ink-next-page",
+		"data-ink-next-page": ""
+	}, ChevronRight);
+	b.addEventListener("click", () => {
+		const viewport = viewer.viewport.get();
+		viewport?.scrollToPage(viewport.currentPage.get() + step);
+	});
+	follow(viewer.viewport, b, (viewport, watch) => {
+		const last = (viewer.document.get()?.pages.length ?? 1) - 1;
+		watch(viewport.currentPage, (p) => {
+			b.disabled = step < 0 ? p <= 0 : p >= last;
+		});
+	});
+	return b;
+}
+/** Roving items, as in the bindings' Radix toolbar: buttons only. */
+const ITEMS = "button";
+/**
+* One Tab stop across the enabled buttons in `bar`: the current one has `tabindex="0"`, the
+* rest `-1`. ArrowLeft and ArrowRight move between them and wrap, Home and End go to the ends.
+* Inputs, selects and textareas, built in or added by the host, keep their own tabindex (a
+* Tab stop of their own by default) and their own arrow, Home and End keys.
+*/
+function rovingTabindex(bar) {
+	let current = null;
+	const items = () => [...bar.querySelectorAll(ITEMS)].filter((el) => !el.disabled && !el.closest("[hidden]"));
+	const sync = () => {
+		const list = items();
+		if (!current || !list.includes(current)) current = list[0] ?? null;
+		for (const el of bar.querySelectorAll(ITEMS)) el.tabIndex = el === current ? 0 : -1;
+	};
+	const onFocusIn = (e) => {
+		const target = e.target;
+		if (!items().includes(target)) return;
+		current = target;
+		sync();
+	};
+	const onKeyDown = (e) => {
+		if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;
+		const list = items();
+		const i = list.indexOf(e.target);
+		if (i < 0) return;
+		const last = list.length - 1;
+		const next = e.key === "ArrowRight" ? i === last ? 0 : i + 1 : e.key === "ArrowLeft" ? i === 0 ? last : i - 1 : e.key === "Home" ? 0 : e.key === "End" ? last : -1;
+		if (next < 0) return;
+		e.preventDefault();
+		list[next].focus();
+	};
+	const observer = new MutationObserver(sync);
+	observer.observe(bar, {
+		childList: true,
+		subtree: true,
+		attributes: true,
+		attributeFilter: ["disabled", "hidden"]
+	});
+	bar.addEventListener("focusin", onFocusIn);
+	bar.addEventListener("keydown", onKeyDown);
+	sync();
+	return {
+		sync,
+		destroy() {
+			observer.disconnect();
+			bar.removeEventListener("focusin", onFocusIn);
+			bar.removeEventListener("keydown", onKeyDown);
+		}
+	};
+}
+//#endregion
+export { TOOL_LABELS, ZOOM_LEVELS, annotationElementFor, attachViewportKeys, builtinTools, computeCssLayout, confidenceAttr, createFocusReturn, createIcon, createNextPage, createOverlay, createPageCount, createPageInput, createPageMount, createPageRenderer, createPageTransform, createPrevPage, createRedo, createTextLayer, createToolButton, createToolController, createToolbar, createToolbarSeparator, createUndo, createViewer, createViewport, createZoomIn, createZoomOut, createZoomSelect, cssRectsToUserRects, cssVariableDefaults, fitZoomCss, getSelectionQuads, highlightTool, hitFor, mostVisiblePageCss, mountViewer, normalizeRotation, noteTool, observeAnnotationElement, redactAreaTool, renderAnnotationContent, selectTool, shouldKeepOpenOnAnnotation, viewTool, visibleRangeCss };
 
 //# sourceMappingURL=dom.mjs.map