@inkbar/core 0.10.0 → 0.11.0

package/dist/dom.mjs

@@ -228,6 +228,347 @@ function mostVisiblePageCss(layout, scrollTop, viewportHeight) {
 	return best;
 }
 //#endregion
+//#region src/dom/pinch.ts
+const midpoint = (a, b) => ({
+	x: (a.x + b.x) / 2,
+	y: (a.y + b.y) / 2
+});
+function pinchFrame(start, now, startScale, minZoom, maxZoom) {
+	const from = Math.hypot(start[1].x - start[0].x, start[1].y - start[0].y);
+	const to = Math.hypot(now[1].x - now[0].x, now[1].y - now[0].y);
+	const zoom = from > 0 ? Math.min(maxZoom, Math.max(minZoom, startScale * to / from)) : startScale;
+	const anchor = midpoint(start[0], start[1]);
+	const mid = midpoint(now[0], now[1]);
+	return {
+		zoom,
+		factor: from > 0 ? zoom / startScale : 1,
+		anchor,
+		pan: {
+			x: mid.x - anchor.x,
+			y: mid.y - anchor.y
+		}
+	};
+}
+const SETTLE_MS = 150;
+/**
+* The pinch preview: a transform on the pages element, which the browser composites without
+* laying anything out. `settle` covers what a preview can show but the committed layout
+* cannot reach (mainly scroll clamped at the content edges): the pages start where the fingers
+* left them and slide into place.
+*/
+function createZoomPreview(container, pagesEl) {
+	const win = container.ownerDocument.defaultView ?? window;
+	let frame = 0;
+	let timer;
+	function stopSettling() {
+		if (frame) win.cancelAnimationFrame(frame);
+		frame = 0;
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+		pagesEl.removeEventListener("transitionend", onTransitionEnd);
+		pagesEl.style.removeProperty("transition");
+	}
+	function settled() {
+		stopSettling();
+		pagesEl.style.removeProperty("transform");
+	}
+	const onTransitionEnd = (e) => {
+		if (e.target === pagesEl && e.propertyName === "transform") settled();
+	};
+	function clear() {
+		stopSettling();
+		pagesEl.style.removeProperty("transform");
+		pagesEl.style.removeProperty("transform-origin");
+	}
+	return {
+		show(factor, anchor, pan) {
+			stopSettling();
+			const x = anchor.x + container.scrollLeft - pagesEl.offsetLeft;
+			const y = anchor.y + container.scrollTop - pagesEl.offsetTop;
+			pagesEl.style.transformOrigin = `${x}px ${y}px`;
+			pagesEl.style.transform = `translate(${pan.x}px, ${pan.y}px) scale(${factor})`;
+		},
+		clear,
+		settle(offset) {
+			clear();
+			pagesEl.style.transform = `translate(${offset.x}px, ${offset.y}px)`;
+			frame = win.requestAnimationFrame(() => {
+				frame = 0;
+				getComputedStyle(pagesEl).transform;
+				pagesEl.style.transition = `transform ${SETTLE_MS}ms ease-out`;
+				pagesEl.style.removeProperty("transform");
+				pagesEl.addEventListener("transitionend", onTransitionEnd);
+				timer = setTimeout(settled, 200);
+			});
+		},
+		destroy: clear
+	};
+}
+/**
+* Tracks touches on the container with touch events, which every touch browser sends as one
+* stream (pointer events may be cancelled once the browser decides to pan). The first two
+* fingers down start a pinch; a third is ignored. The pinch ends when either of its fingers
+* lifts or is cancelled, and any finger still down then starts nothing until every finger has
+* lifted. While two fingers are down their moves are prevented, so the browser neither pans
+* nor zooms underneath; one finger's moves never are, so a one-finger scroll stays native. A
+* move the browser will not let us cancel means it is scrolling natively already: that travel
+* is left to it, and only what the fingers do after it is scrolled here.
+* The viewport claims pinch on the container (`touch-action: pan-x pan-y`), which keeps the
+* page from zooming as well; the tool controller turns off one-finger panning on the pages
+* element while a drag tool is ready, and two fingers still land here. A finger
+* that lands alone starts afresh, so an end the browser never sent leaves nothing behind.
+*/
+function attachTouchPinch(opts) {
+	const { container, preview } = opts;
+	let pinch;
+	let spent = false;
+	/** The touches that went down on the container, by identifier. */
+	const mine = /* @__PURE__ */ new Set();
+	const down = (list) => [...list].filter((t) => mine.has(t.identifier));
+	function at(t) {
+		const r = container.getBoundingClientRect();
+		return {
+			x: t.clientX - r.left - container.clientLeft,
+			y: t.clientY - r.top - container.clientTop
+		};
+	}
+	const onStart = (e) => {
+		const live = new Set([...e.touches].map((t) => t.identifier));
+		for (const id of mine) if (!live.has(id)) mine.delete(id);
+		for (const t of e.changedTouches) mine.add(t.identifier);
+		const fingers = down(e.touches);
+		if (fingers.length === 1) {
+			if (pinch) preview.clear();
+			pinch = void 0;
+			spent = false;
+		}
+		if (pinch || spent || fingers.length < 2) return;
+		const [a, b] = fingers;
+		const start = [at(a), at(b)];
+		const scale = opts.scale();
+		pinch = {
+			ids: [a.identifier, b.identifier],
+			start,
+			scale,
+			last: pinchFrame(start, start, scale, opts.minZoom, opts.maxZoom),
+			scrolled: {
+				x: 0,
+				y: 0
+			},
+			mid: midpoint(start[0], start[1])
+		};
+	};
+	const onMove = (e) => {
+		if (down(e.touches).length >= 2 && e.cancelable) e.preventDefault();
+		if (!pinch) return;
+		const ids = pinch.ids;
+		const touches = [...e.touches];
+		const a = touches.find((t) => t.identifier === ids[0]);
+		const b = touches.find((t) => t.identifier === ids[1]);
+		if (!a || !b) return;
+		const now = [at(a), at(b)];
+		const mid = midpoint(now[0], now[1]);
+		const native = !e.cancelable;
+		if (native) {
+			const dx = mid.x - pinch.mid.x;
+			const dy = mid.y - pinch.mid.y;
+			pinch.start = [{
+				x: pinch.start[0].x + dx,
+				y: pinch.start[0].y + dy
+			}, {
+				x: pinch.start[1].x + dx,
+				y: pinch.start[1].y + dy
+			}];
+		}
+		pinch.mid = mid;
+		const frame = pinchFrame(pinch.start, now, pinch.scale, opts.minZoom, opts.maxZoom);
+		const { scrolled } = pinch;
+		if (!native) {
+			const took = opts.scrollBy({
+				x: frame.pan.x - scrolled.x,
+				y: frame.pan.y - scrolled.y
+			});
+			scrolled.x += took.x;
+			scrolled.y += took.y;
+		}
+		pinch.last = {
+			...frame,
+			anchor: {
+				x: frame.anchor.x + scrolled.x,
+				y: frame.anchor.y + scrolled.y
+			},
+			pan: {
+				x: frame.pan.x - scrolled.x,
+				y: frame.pan.y - scrolled.y
+			}
+		};
+		preview.show(pinch.last.factor, pinch.last.anchor, pinch.last.pan);
+	};
+	const onEnd = (e) => {
+		const ended = [...e.changedTouches].map((t) => t.identifier);
+		for (const id of ended) mine.delete(id);
+		if (pinch && pinch.ids.some((id) => ended.includes(id))) {
+			const { last } = pinch;
+			pinch = void 0;
+			spent = true;
+			preview.clear();
+			opts.commit(last);
+		}
+		if (down(e.touches).length === 0) spent = false;
+	};
+	const listen = { passive: false };
+	container.addEventListener("touchstart", onStart, listen);
+	container.addEventListener("touchmove", onMove, listen);
+	container.addEventListener("touchend", onEnd, listen);
+	container.addEventListener("touchcancel", onEnd, listen);
+	return { destroy() {
+		container.removeEventListener("touchstart", onStart);
+		container.removeEventListener("touchmove", onMove);
+		container.removeEventListener("touchend", onEnd);
+		container.removeEventListener("touchcancel", onEnd);
+		mine.clear();
+		pinch = void 0;
+		spent = false;
+	} };
+}
+const WHEEL_STEP = 1.1;
+/**
+* The zoom factor one wheel event stands for. A trackpad pinch arrives as ctrl+wheel events
+* with small pixel deltas, which zoom smoothly. A mouse wheel notch with ctrl held arrives in
+* line or page mode, or as one large pixel delta, and is one small step, whatever its size.
+*/
+function wheelFactor(e) {
+	if (e.deltaMode !== 0 || Math.abs(e.deltaY) >= 50) return e.deltaY < 0 ? WHEEL_STEP : e.deltaY > 0 ? 1 / WHEEL_STEP : 1;
+	return Math.exp(-e.deltaY / 100);
+}
+const IDLE_MS = 150;
+const TOUCH_TYPES = [
+	"touchstart",
+	"touchend",
+	"touchcancel"
+];
+/**
+* A trackpad pinch over the container. Browsers report it as ctrl+wheel events, which are
+* taken over so the page does not zoom; a run of them is one pinch, anchored at the pointer
+* where it began and committed once the events stop, or as soon as the container scrolls (a
+* plain wheel, a scroll bar), so the scroll moves the committed layout and not the preview.
+* Safari also has gesture events, which give the scale directly; while one of those runs,
+* ctrl+wheel is ignored so nothing counts twice. Safari on a touch screen sends gesture events
+* for a touch pinch too, which `attachTouchPinch` already handles: while a finger is down on
+* the container they are prevented and otherwise ignored. The wheel listener is non-passive
+* because it has to call `preventDefault`.
+*/
+function attachTrackpadPinch(opts) {
+	const { container, preview } = opts;
+	const win = container.ownerDocument.defaultView ?? window;
+	let run;
+	let gesturing = false;
+	/** A finger is down on the container. */
+	let touching = false;
+	let timer;
+	function at(e) {
+		const r = container.getBoundingClientRect();
+		return {
+			x: e.clientX - r.left - container.clientLeft,
+			y: e.clientY - r.top - container.clientTop
+		};
+	}
+	function update(e, next) {
+		if (!run) {
+			const scale = opts.scale();
+			const anchor = at(e);
+			run = {
+				anchor,
+				scale,
+				factor: 1,
+				last: pinchFrame([anchor, anchor], [anchor, anchor], scale, opts.minZoom, opts.maxZoom)
+			};
+		}
+		run.factor = next(run.factor);
+		const zoom = Math.min(opts.maxZoom, Math.max(opts.minZoom, run.scale * run.factor));
+		run.last = {
+			zoom,
+			factor: zoom / run.scale,
+			anchor: run.anchor,
+			pan: {
+				x: 0,
+				y: 0
+			}
+		};
+		preview.show(run.last.factor, run.last.anchor, run.last.pan);
+	}
+	function end() {
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+		if (!run) return;
+		const { last } = run;
+		run = void 0;
+		preview.clear();
+		opts.commit(last);
+	}
+	const onWheel = (e) => {
+		if (!e.ctrlKey) {
+			if (!gesturing) end();
+			return;
+		}
+		if (gesturing) return;
+		e.preventDefault();
+		update(e, (f) => f * wheelFactor(e));
+		if (timer !== void 0) clearTimeout(timer);
+		timer = setTimeout(end, IDLE_MS);
+	};
+	const onScroll = () => {
+		if (!gesturing) end();
+	};
+	const onTouch = (e) => {
+		touching = e.type === "touchstart" || e.touches.length > 0;
+	};
+	const onGestureStart = (e) => {
+		e.preventDefault();
+		if (touching) return;
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+		end();
+		gesturing = true;
+		update(e, () => 1);
+	};
+	const onGestureChange = (e) => {
+		e.preventDefault();
+		if (!gesturing) return;
+		update(e, () => e.scale);
+	};
+	const onGestureEnd = (e) => {
+		e.preventDefault();
+		if (!gesturing) return;
+		gesturing = false;
+		end();
+	};
+	container.addEventListener("wheel", onWheel, { passive: false });
+	container.addEventListener("scroll", onScroll, { passive: true });
+	const hasGestures = "GestureEvent" in win;
+	if (hasGestures) {
+		for (const type of TOUCH_TYPES) container.addEventListener(type, onTouch, { passive: true });
+		container.addEventListener("gesturestart", onGestureStart);
+		container.addEventListener("gesturechange", onGestureChange);
+		container.addEventListener("gestureend", onGestureEnd);
+	}
+	return { destroy() {
+		container.removeEventListener("wheel", onWheel);
+		container.removeEventListener("scroll", onScroll);
+		if (hasGestures) {
+			for (const type of TOUCH_TYPES) container.removeEventListener(type, onTouch);
+			container.removeEventListener("gesturestart", onGestureStart);
+			container.removeEventListener("gesturechange", onGestureChange);
+			container.removeEventListener("gestureend", onGestureEnd);
+		}
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+		run = void 0;
+		gesturing = false;
+		preview.clear();
+	} };
+}
+//#endregion
 //#region src/dom/viewport.ts
 function sameList$1(a, b) {
 	return a.length === b.length && a.every((v, i) => v === b[i]);
@@ -252,10 +593,13 @@ function createViewport(opts) {
 	});
 	const previousStyle = {
 		overflow: container.style.overflow,
-		position: container.style.position
+		position: container.style.position,
+		touchAction: container.style.touchAction
 	};
 	container.dataset.inkViewport = "";
 	container.style.overflow = "auto";
+	const pinchZoom = opts.pinchZoom ?? true;
+	if (pinchZoom) container.style.touchAction = "pan-x pan-y";
 	if (getComputedStyle(container).position === "static") container.style.position = "relative";
 	const pagesEl = container.ownerDocument.createElement("div");
 	pagesEl.className = "ink-pages";
@@ -422,6 +766,21 @@ function createViewport(opts) {
 		}
 		return best;
 	}
+	/** The page and user-space point under `anchor` (container-relative), from the current layout. */
+	function userAt(anchor) {
+		const o = origin();
+		const x = container.scrollLeft + anchor.x - o.x;
+		const y = container.scrollTop + anchor.y - o.y;
+		const box = anchorBox(layout.get(), y);
+		if (!box) return void 0;
+		return {
+			page: box.index,
+			user: transformFor(box.index).fromCss({
+				x: x - box.left,
+				y: y - box.top
+			})
+		};
+	}
 	/**
 	* Keeps the user-space point under `anchorCss` still while `change` alters the layout.
 	* The anchor is taken in layout space, so it holds in the margins and gaps too: there it
@@ -433,25 +792,103 @@ function createViewport(opts) {
 			x: container.clientWidth / 2,
 			y: container.clientHeight / 2
 		};
-		const o = origin();
-		const x = container.scrollLeft + anchor.x - o.x;
-		const y = container.scrollTop + anchor.y - o.y;
-		const old = anchorBox(layout.get(), y);
-		const user = old ? transformFor(old.index).fromCss({
-			x: x - old.left,
-			y: y - old.top
-		}) : void 0;
+		const at = userAt(anchor);
 		change();
 		relayout();
-		if (!old || !user) return;
-		const box = boxFor(old.index);
+		if (!at) return;
+		const box = boxFor(at.page);
 		if (!box) return;
-		const after = transformFor(old.index).toCss(user);
-		const o2 = origin();
-		container.scrollLeft = o2.x + box.left + after.x - anchor.x;
-		container.scrollTop = o2.y + box.top + after.y - anchor.y;
+		const after = transformFor(at.page).toCss(at.user);
+		const o = origin();
+		container.scrollLeft = o.x + box.left + after.x - anchor.x;
+		container.scrollTop = o.y + box.top + after.y - anchor.y;
+		sync();
+	}
+	/**
+	* The translation a pinch preview applies, from the current layout. While the zoomed pages
+	* would still be narrower than the container, the committed layout centres them (and leaves
+	* nothing to scroll sideways), so the preview puts them there instead of following the fingers.
+	*/
+	function previewPan(factor, anchor, pan) {
+		const l = layout.get();
+		const widest = l.boxes.reduce((max, b) => Math.max(max, b.width), 0);
+		const inner = innerSize().width;
+		if (widest * factor >= inner) return pan;
+		const o = origin();
+		const ox = anchor.x + container.scrollLeft - o.x;
+		const shown = o.x - container.scrollLeft + ox + (l.width / 2 - ox) * factor + pan.x;
+		const centred = o.x + inner / 2;
+		return {
+			x: pan.x + centred - shown,
+			y: pan.y
+		};
+	}
+	/**
+	* Ends a pinch: one zoom change around the point that started between the fingers, then any
+	* travel the touch pinch could not scroll as it went (all of it, for a trackpad pinch) as a
+	* scroll, so that point ends up where the preview last showed it.
+	* When the scroll's edges stop it getting there, the preview eases the difference out. A
+	* pinch that did not zoom changes no zoom, so a fit mode stays: a two-finger pan only
+	* scrolls, and a two-finger tap changes nothing.
+	*/
+	function commitPinch(frame) {
+		if (destroyed) return;
+		const zoomed = Math.abs(frame.factor - 1) >= .001;
+		if (!zoomed && Math.hypot(frame.pan.x, frame.pan.y) < 1) return;
+		const at = userAt(frame.anchor);
+		const shown = previewPan(frame.factor, frame.anchor, frame.pan);
+		if (zoomed) withAnchor(frame.anchor, () => zoom.set(clamp(frame.zoom)));
+		container.scrollLeft -= frame.pan.x;
+		container.scrollTop -= frame.pan.y;
 		sync();
+		const box = at && boxFor(at.page);
+		if (!at || !box) return;
+		const css = transformFor(at.page).toCss(at.user);
+		const o = origin();
+		const actual = {
+			x: o.x + box.left + css.x - container.scrollLeft,
+			y: o.y + box.top + css.y - container.scrollTop
+		};
+		const dx = frame.anchor.x + shown.x - actual.x;
+		const dy = frame.anchor.y + shown.y - actual.y;
+		if (Math.abs(dx) > 1 || Math.abs(dy) > 1) preview?.settle({
+			x: dx,
+			y: dy
+		});
 	}
+	const basePreview = pinchZoom ? createZoomPreview(container, pagesEl) : void 0;
+	const preview = basePreview && {
+		...basePreview,
+		show: (factor, anchor, pan) => basePreview.show(factor, anchor, previewPan(factor, anchor, pan))
+	};
+	const pinch = preview ? attachTouchPinch({
+		container,
+		preview,
+		scale: () => scale.get(),
+		minZoom,
+		maxZoom,
+		scrollBy: (delta) => {
+			const { scrollLeft, scrollTop } = container;
+			container.scrollTo({
+				left: scrollLeft - delta.x,
+				top: scrollTop - delta.y,
+				behavior: "instant"
+			});
+			return {
+				x: scrollLeft - container.scrollLeft,
+				y: scrollTop - container.scrollTop
+			};
+		},
+		commit: commitPinch
+	}) : void 0;
+	const trackpadPinch = preview ? attachTrackpadPinch({
+		container,
+		preview,
+		scale: () => scale.get(),
+		minZoom,
+		maxZoom,
+		commit: commitPinch
+	}) : void 0;
 	const viewport = {
 		zoom: readonly(zoom),
 		scale: readonly(scale),
@@ -523,6 +960,9 @@ function createViewport(opts) {
 		destroy() {
 			if (destroyed) return;
 			destroyed = true;
+			pinch?.destroy();
+			trackpadPinch?.destroy();
+			preview?.destroy();
 			ro.disconnect();
 			container.removeEventListener("scroll", onScroll);
 			if (scrollFrame) cancelAnimationFrame(scrollFrame);
@@ -536,6 +976,7 @@ function createViewport(opts) {
 			delete container.dataset.inkViewport;
 			container.style.overflow = previousStyle.overflow;
 			container.style.position = previousStyle.position;
+			container.style.touchAction = previousStyle.touchAction;
 		}
 	};
 	relayout();
@@ -3744,6 +4185,7 @@ function createPluginHost(opts) {
 	const editFns = [];
 	const setupCleanups = [];
 	const redecorators = /* @__PURE__ */ new Set();
+	const pressListeners = /* @__PURE__ */ new Set();
 	const marks = createMarksRegistry();
 	const selections = /* @__PURE__ */ new Map();
 	let opened = null;
@@ -3784,8 +4226,21 @@ function createPluginHost(opts) {
 		for (const request of requests) request.current.set(null);
 		for (const cleanup of state.cleanups.reverse()) guard(cleanup);
 	};
-	const contextFor = (plugin) => {
+	const contextFor = (plugin, owned) => {
 		const storeNames = /* @__PURE__ */ new Set();
+		const listenForPress = (kind) => (fn) => {
+			const entry = {
+				plugin: plugin.id,
+				kind,
+				fn
+			};
+			pressListeners.add(entry);
+			owned.add(entry);
+			return () => {
+				pressListeners.delete(entry);
+				owned.delete(entry);
+			};
+		};
 		const ctx = {
 			id: plugin.id,
 			document: opts.document,
@@ -3834,7 +4289,9 @@ function createPluginHost(opts) {
 			scrollTo(page, rect, scrollOpts) {
 				opts.viewport?.()?.scrollToRect(page, rect, scrollOpts);
 			},
-			search: opts.search ?? inertSearch
+			search: opts.search ?? inertSearch,
+			onPress: listenForPress("press"),
+			onLongPress: listenForPress("long-press")
 		};
 		internals$1.set(ctx, {
 			marks,
@@ -3913,13 +4370,22 @@ function createPluginHost(opts) {
 	};
 	for (const plugin of opts.plugins) {
 		let cleanup;
+		const owned = /* @__PURE__ */ new Set();
+		const dropPresses = () => {
+			for (const entry of owned) pressListeners.delete(entry);
+			owned.clear();
+		};
 		try {
-			cleanup = plugin.setup(contextFor(plugin));
+			cleanup = plugin.setup(contextFor(plugin, owned));
 		} catch (error) {
+			dropPresses();
 			for (const done of setupCleanups.reverse()) guard(done);
 			throw error;
 		}
-		if (typeof cleanup === "function") setupCleanups.push(cleanup);
+		setupCleanups.push(() => {
+			dropPresses();
+			if (typeof cleanup === "function") cleanup();
+		});
 	}
 	const current = opts.document.get();
 	if (current) open(current);
@@ -3968,6 +4434,16 @@ function createPluginHost(opts) {
 				redecorators.delete(run);
 			};
 		},
+		emitPress(kind, press) {
+			for (const entry of [...pressListeners]) {
+				if (entry.kind !== kind || !pressListeners.has(entry)) continue;
+				try {
+					entry.fn(press);
+				} catch (error) {
+					console.error(`Plugin ${entry.plugin} threw in a ${kind} listener`, error);
+				}
+			}
+		},
 		destroy() {
 			if (destroyed) return;
 			destroyed = true;
@@ -5138,6 +5614,48 @@ function createToolOptions(tools = []) {
 		register
 	};
 }
+const defaultSlop = (pointerType) => pointerType === "mouse" ? 4 : 10;
+function createPressTracker(opts) {
+	const longPressMs = opts.longPressMs ?? 500;
+	const slopFor = opts.slop ?? defaultSlop;
+	let live;
+	function cancel() {
+		if (live?.timer !== void 0) clearTimeout(live.timer);
+		live = void 0;
+	}
+	return {
+		down(e, press) {
+			cancel();
+			const l = {
+				pointerId: e.pointerId,
+				x: e.clientX,
+				y: e.clientY,
+				slop: slopFor(press.pointerType),
+				press,
+				timer: void 0,
+				done: false
+			};
+			if (press.pointerType !== "mouse") l.timer = setTimeout(() => {
+				l.timer = void 0;
+				l.done = true;
+				opts.onLongPress(press);
+			}, longPressMs);
+			live = l;
+		},
+		move(e) {
+			if (live?.pointerId !== e.pointerId) return;
+			if (Math.hypot(e.clientX - live.x, e.clientY - live.y) > live.slop) cancel();
+		},
+		up(e) {
+			if (live?.pointerId !== e.pointerId) return;
+			const { press, done } = live;
+			cancel();
+			if (!done) opts.onPress(press);
+		},
+		cancel,
+		destroy: cancel
+	};
+}
 //#endregion
 //#region src/dom/tools/selection-edit.ts
 const CORNERS = [
@@ -5612,6 +6130,7 @@ function createToolController$1(opts) {
 			clearMade();
 			made = [...ids];
 			ctx.root.dataset.inkMade = "";
+			applyClaim();
 			stopMade = [ctx.store.list.subscribe(checkMade), ctx.store.selection.subscribe(checkMade)];
 		},
 		done() {
@@ -5623,6 +6142,8 @@ function createToolController$1(opts) {
 	const originalCursor = ctx.root.style.cursor;
 	/** The pointer between a primary press and its release or cancel. */
 	let pressed;
+	/** Whether `pressed` is a touch, which a second touch turns into a pinch. */
+	let pressedTouch = false;
 	/** Pointers whose release belongs to a tool that is no longer active. */
 	const swallow = /* @__PURE__ */ new Set();
 	/** What the active one-shot tool made; undefined while it is ready. */
@@ -5630,16 +6151,51 @@ function createToolController$1(opts) {
 	let stopMade = [];
 	/** Whether the press now under way found the tool made (see the top of the file). */
 	let pressFoundMade = false;
+	/** Whether the press now under way commits an open editor or closes an open popover. */
+	let pressDismisses = false;
 	/** Moves and resizes what the active one-shot tool made. */
 	let madeEdit;
 	/** The press now under way went to `madeEdit`, not the tool. */
 	let editingMade = false;
+	const presses = createPressTracker({
+		onPress: (press) => opts.onPress?.("press", press),
+		onLongPress: (press) => opts.onPress?.("long-press", press)
+	});
 	function clearMade() {
 		stopMade.forEach((stop) => stop());
 		stopMade = [];
 		made = void 0;
 		delete ctx.root.dataset.inkMade;
+		applyClaim();
 	}
+	/**
+	* Turns off one-finger panning on the pages element while a claiming tool is ready. The
+	* viewport never sets `touch-action` there, so removing the property restores it. A host
+	* without a pages element (no `createViewport`) gets no claim.
+	*/
+	function applyClaim() {
+		const pages = pagesOf();
+		if (!pages) return;
+		if (claiming()) pages.style.touchAction = "pinch-zoom";
+		else pages.style.removeProperty("touch-action");
+	}
+	function pagesOf() {
+		return ctx.root.querySelector(":scope > [data-ink-pages]");
+	}
+	/** True while the active tool claims touch: it claims it and, if one-shot, is still ready. */
+	function claiming() {
+		return current?.claimsTouch === true && made === void 0;
+	}
+	/**
+	* Safari on iPad can let a one-finger drag scroll the container despite the claim's
+	* `touch-action`, then cancel the tool's gesture. So a claimed one-finger move on the pages
+	* also cancels the browser's scroll. Two fingers are left to the pinch handler or the browser.
+	*/
+	const onTouchMove = (e) => {
+		if (!e.cancelable || e.touches.length !== 1 || !claiming()) return;
+		const pages = pagesOf();
+		if (pages && e.target instanceof Node && pages.contains(e.target)) e.preventDefault();
+	};
 	/** Leaves the made state when its items are gone, or switches when the selection moved on. */
 	function checkMade() {
 		if (!made) return;
@@ -5653,17 +6209,32 @@ function createToolController$1(opts) {
 	}
 	/** True for events from a pointer other than the one whose press is live. */
 	const foreign = (e) => pressed !== void 0 && pressed !== e.pointerId;
-	const readFirst = () => {
+	const readFirst = (e) => {
 		pressFoundMade = made !== void 0;
+		pressDismisses = dismisses(e.target, ctx.root.ownerDocument);
 	};
 	const readAfterEditor = () => {
 		pressFoundMade ||= made !== void 0;
 	};
 	const onDown = (e) => {
+		if (e.pointerType === "touch" && !e.isPrimary) {
+			presses.cancel();
+			if (pressedTouch) cancelPressed();
+			return;
+		}
+		if (e.pointerType === "pen" && pressedTouch && pressed !== void 0) {
+			presses.cancel();
+			cancelPressed();
+		}
 		if (!e.isPrimary || e.button !== 0 || inCustomContent(e.target)) return;
 		if (foreign(e)) return;
 		swallow.delete(e.pointerId);
-		const annotationId = (e.target instanceof Element ? e.target : null)?.closest("[data-annotation]")?.getAttribute("data-annotation") ?? void 0;
+		pressedTouch = e.pointerType === "touch";
+		const target = e.target instanceof Element ? e.target : null;
+		const annotationId = target?.closest("[data-annotation]")?.getAttribute("data-annotation") ?? void 0;
+		const hit = hitFor(ctx, e);
+		const reportable = (current?.id === "select-text" || current?.id === "select") && annotationId === void 0 && target?.closest("a[href], [data-handle]") == null && !pressDismisses && !closedEditor(e) && hit !== void 0;
+		presses.cancel();
 		if (current?.kind === "one-shot") {
 			if (pressFoundMade && annotationId === void 0 && !onScrollBar(e, ctx.root)) {
 				e.preventDefault();
@@ -5675,18 +6246,26 @@ function createToolController$1(opts) {
 			if (a && made?.includes(a.id) && madeEdit) {
 				pressed = e.pointerId;
 				editingMade = true;
-				if (madeEdit.onPointerDown(e, hitFor(ctx, e), a.id) === true) capture(e.pointerId);
+				if (madeEdit.onPointerDown(e, hit, a.id) === true) capture(e.pointerId);
 				return;
 			}
 			if (a && (!isTextMarkup(a) || pressFoundMade)) set("select-text");
 		}
 		pressed = e.pointerId;
-		if (current?.onPointerDown?.(e, hitFor(ctx, e), annotationId) === true) capture(e.pointerId);
+		if (current?.onPointerDown?.(e, hit, annotationId) === true) capture(e.pointerId);
+		if (reportable && pressed === e.pointerId) presses.down(e, {
+			page: hit.page,
+			point: hit.user,
+			pointerType: pointerTypeOf(e)
+		});
 	};
 	const onMove = (e) => {
 		if (!e.isPrimary || foreign(e)) return;
 		const missed = pressed === e.pointerId && e.buttons === 0;
-		if (missed) pressed = void 0;
+		if (missed) {
+			pressed = void 0;
+			presses.cancel();
+		} else presses.move(e);
 		if (editingMade) {
 			madeEdit?.onPointerMove(e, hitFor(ctx, e));
 			if (missed) editingMade = false;
@@ -5706,12 +6285,14 @@ function createToolController$1(opts) {
 			madeEdit?.onPointerUp(e, hitFor(ctx, e));
 		} else current?.onPointerUp?.(e, hitFor(ctx, e));
 		release(e.pointerId);
+		presses.up(e);
 	};
 	const onCancel = (e) => {
 		if (!e.isPrimary || foreign(e)) return;
 		if (e.type === "lostpointercapture" && pressed !== e.pointerId) return;
 		if (pressed === e.pointerId) pressed = void 0;
 		swallow.delete(e.pointerId);
+		presses.cancel();
 		if (editingMade) {
 			editingMade = false;
 			madeEdit?.onPointerCancel();
@@ -5777,6 +6358,7 @@ function createToolController$1(opts) {
 	ctx.root.addEventListener("lostpointercapture", onCancel);
 	ctx.root.addEventListener("keydown", onKey);
 	ctx.root.addEventListener("keydown", onEditorEscape, { capture: true });
+	ctx.root.addEventListener("touchmove", onTouchMove, { passive: false });
 	const loggedUnknown = /* @__PURE__ */ new Set();
 	function logUnknownOnce(id) {
 		if (loggedUnknown.has(id)) return;
@@ -5790,15 +6372,8 @@ function createToolController$1(opts) {
 			return;
 		}
 		if (options) registry.merge(id, options);
-		if (pressed !== void 0) {
-			if (editingMade) madeEdit?.onPointerCancel();
-			else current?.onPointerCancel?.(new PointerEvent("pointercancel", {
-				pointerId: pressed,
-				isPrimary: true
-			}));
-			swallow.add(pressed);
-			pressed = void 0;
-		}
+		presses.cancel();
+		cancelPressed();
 		editingMade = false;
 		madeEdit?.reset();
 		current?.deactivate();
@@ -5808,8 +6383,22 @@ function createToolController$1(opts) {
 		next.activate(ctx);
 		ctx.root.dataset.inkTool = id;
 		ctx.root.style.cursor = next.cursor;
+		applyClaim();
 		active.set(id);
 	}
+	/** Ends the live press's gesture, if any, and keeps its release from every tool. */
+	function cancelPressed() {
+		if (pressed === void 0) return;
+		if (editingMade) {
+			editingMade = false;
+			madeEdit?.onPointerCancel();
+		} else current?.onPointerCancel?.(new PointerEvent("pointercancel", {
+			pointerId: pressed,
+			isPrimary: true
+		}));
+		swallow.add(pressed);
+		pressed = void 0;
+	}
 	set(opts.initial ?? "select-text");
 	if (current === void 0 && opts.initial !== void 0 && opts.initial !== "select-text") set("select-text");
 	return {
@@ -5827,11 +6416,12 @@ function createToolController$1(opts) {
 			return registry.readable(id);
 		},
 		destroy() {
+			presses.destroy();
 			madeEdit?.reset();
 			madeEdit = void 0;
 			current?.deactivate();
-			clearMade();
 			current = void 0;
+			clearMade();
 			doc.defaultView?.removeEventListener("pointerdown", readFirst, { capture: true });
 			doc.removeEventListener("pointerdown", readAfterEditor, { capture: true });
 			ctx.root.removeEventListener("pointerdown", onDown, { capture: true });
@@ -5841,6 +6431,7 @@ function createToolController$1(opts) {
 			ctx.root.removeEventListener("lostpointercapture", onCancel);
 			ctx.root.removeEventListener("keydown", onKey);
 			ctx.root.removeEventListener("keydown", onEditorEscape, { capture: true });
+			ctx.root.removeEventListener("touchmove", onTouchMove);
 			delete ctx.root.dataset.inkTool;
 			ctx.root.style.cursor = originalCursor;
 		}
@@ -5861,6 +6452,18 @@ function isViewportEnter(e, root) {
 	if (target.matches(".ink-page[data-page]")) return true;
 	return target.closest("[data-ink-text-layer], [data-ink-canvas-layer]") !== null;
 }
+function pointerTypeOf(e) {
+	return e.pointerType === "touch" || e.pointerType === "pen" ? e.pointerType : "mouse";
+}
+/**
+* True when a press on `target` commits an open free-text editor (which has focus while open) or
+* closes an open Inkbar popover (a press outside it does).
+*/
+function dismisses(target, doc) {
+	if (doc.activeElement?.closest("[data-ink-editor]")) return true;
+	const node = target instanceof Node ? target : null;
+	return [...doc.querySelectorAll("[data-ink-popover]")].some((panel) => !panel.hidden && !panel.contains(node));
+}
 /**
 * True for a press on `root` itself outside its client area: on a scroll bar (or its border).
 * Client coordinates only, so a synthetic press gives the same answer as a real one.
@@ -5914,6 +6517,7 @@ function freehandTool(opts) {
 	/** Adds a sample. A release reports 0 pressure, so it repeats the last sample's instead. */
 	const sample = (s, e, release = false) => {
 		const css = clampedCssIn(s.from.host, e);
+		s.travel = Math.max(s.travel, Math.hypot(e.clientX - s.origin.x, e.clientY - s.origin.y));
 		s.css.push(css);
 		s.user.push(s.from.transform.fromCss(css));
 		const p = release ? s.pressure?.[s.pressure.length - 1] : pressureOf(e);
@@ -5956,6 +6560,7 @@ function freehandTool(opts) {
 		label: opts.label,
 		icon: opts.icon,
 		kind: "sticky",
+		claimsTouch: true,
 		cursor: "crosshair",
 		styleGroup: "ink",
 		activate(c) {
@@ -5974,7 +6579,13 @@ function freehandTool(opts) {
 				css: [],
 				user: [],
 				pressure: void 0,
-				startedAt: Date.now()
+				startedAt: Date.now(),
+				pointerType: e.pointerType,
+				origin: {
+					x: e.clientX,
+					y: e.clientY
+				},
+				travel: 0
 			};
 			sample(stroke, e);
 			e.stopPropagation();
@@ -6005,6 +6616,7 @@ function freehandTool(opts) {
 			const end = clampedCssIn(s.from.host, e);
 			if (end.x !== last.x || end.y !== last.y) sample(s, e, true);
 			clear();
+			if (s.pointerType === "touch" && s.travel <= 10) return;
 			opts.commit(ctx, {
 				page: s.from.page,
 				points: s.user,
@@ -8287,6 +8899,7 @@ function freetextTool() {
 		label: "Text box",
 		icon: Type,
 		kind: "one-shot",
+		claimsTouch: true,
 		cursor: "text",
 		styleGroup: "text",
 		defaultOptions: {},
@@ -8543,6 +9156,7 @@ function redactAreaTool() {
 		label: "Mark for redaction",
 		icon: Square,
 		kind: "one-shot",
+		claimsTouch: true,
 		cursor: "crosshair",
 		styleGroup: "redact",
 		activate(c) {
@@ -8833,6 +9447,7 @@ function shapeTool() {
 		icon: Shapes,
 		kind: "one-shot",
 		cursor: "crosshair",
+		claimsTouch: true,
 		styleGroup: "shape",
 		defaultOptions: { ...DEFAULT_SHAPE_OPTIONS },
 		activate(c) {
@@ -9383,6 +9998,7 @@ function mountViewer(opts) {
 	const pages = /* @__PURE__ */ new Map();
 	let gap = opts.gap;
 	let buffer = opts.buffer;
+	let pinchZoom = opts.pinchZoom;
 	let custom = opts.customAnnotations ?? false;
 	let viewport;
 	let tools;
@@ -9637,6 +10253,7 @@ function mountViewer(opts) {
 			...state.rotation === void 0 ? {} : { rotation: state.rotation },
 			...gap === void 0 ? {} : { gap },
 			...buffer === void 0 ? {} : { buffer },
+			...pinchZoom === void 0 ? {} : { pinchZoom },
 			onMount: mountPage,
 			onUpdate: (page, _host, transform) => pages.get(page)?.update(transform),
 			onUnmount: unmountPage
@@ -9646,6 +10263,7 @@ function mountViewer(opts) {
 			...state.tool === void 0 ? {} : { initial: state.tool },
 			tools: list,
 			options: toolOptions,
+			...plugins && { onPress: (kind, press) => plugins.emitPress(kind, press) },
 			ctx: {
 				toolStyle,
 				store: doc.annotations,
@@ -9731,6 +10349,7 @@ function mountViewer(opts) {
 			teardown();
 			if (next.gap !== void 0) gap = next.gap;
 			if (next.buffer !== void 0) buffer = next.buffer;
+			if (next.pinchZoom !== void 0) pinchZoom = next.pinchZoom;
 			if (next.customAnnotations !== void 0) custom = next.customAnnotations;
 			build(state);
 		},
@@ -14501,6 +15120,6 @@ function createHighlightMenu(viewer) {
 	return root;
 }
 //#endregion
-export { ARROWHEAD_CHOICES, ARROWHEAD_ENDING, COLOR_COLUMNS, COLOR_LABELS, DASH_PATTERN, DEFAULT_CORNER_RADIUS, DEFAULT_FREETEXT_WIDTH, DEFAULT_HIGHLIGHT_OPTIONS, DEFAULT_SHAPE_SIZE, FONT_FAMILIES, FORM_LABELS, LINE_WEIGHTS, MARKUP_ICONS, MARKUP_KINDS, MARKUP_LABELS, PALETTE, SHAPE_COLUMNS, SHAPE_ICONS, SHAPE_KINDS, SHAPE_LABELS, SIGNATURE_FONTS, SIGNATURE_IMAGE_MAX_LENGTH, SIGNATURE_IMAGE_MAX_SIDE, SIGNATURE_IMAGE_TYPES, SIGNATURE_LABELS, SIGNATURE_TABS, THUMBNAIL_WIDTH, TOOL_LABELS, ZOOM_LEVELS, allTools, annotationElementFor, arrowheadChoice, attachFileKeys, attachHistoryKeys, attachViewportKeys, clampFontSize, colorMenuModel, computeCssLayout, createColorMenu, createCommandButton, createDownloadButton, createFindBar, createFocusReturn, createFormAlert, createHighlightMenu, createIcon, createImageSignature, createLineStyleMenu, createMenu, createNextPage, createOverlay, createPageCount, createPageInput, createPageMount, createPageRenderer, createPageTransform, createPluginHost, createPluginLayers, createPopover, createPrevPage, createPrintButton, createRecordList, createRecordListController, createRedo, createSearchButton, createSearchController, createSearchResults, createShapeMenu, createSidebar, createSidebarController, createSignFieldMenu, createSignatureDialog, createSignatureDraft, createSignatureMenu, createSignaturePad, createSignaturePreview, createTextLayer, createTextStyleMenu, createThumbnail, createThumbnailPainter, createThumbnails, createThumbnailsController, createToolButton, createToolController, createToolOptions, createToolbar, createToolbarSeparator, createTypedSignature, createUndo, createViewer, createViewport, createZoomIn, createZoomOut, createZoomSelect, cssRectsToUserRects, cssVariableDefaults, definePlugin, downloadDocument, drawTool, editFreeText, findAnnouncer, findCountText, fitZoomCss, focusInitialMenuItem, fontFamilyValue, freetextTool, getSelectionQuads, handleFindKey, handleMenuKeys, handleRadioKeys, handleResultsFieldKey, handleTabKeys, highlightMenuModel, highlightTool, hitFor, isBlankQuery, keepHistoryFocus, lineStyleMenuModel, menuItems, mostVisiblePageCss, mountViewer, normalizeRotation, noteTool, observeAnnotationElement, pageSelectionText, placePanel, printDocument, recordsSource, redactAreaTool, renderAnnotationContent, renderTypedSignature, searchSource, selectTextTool, selectTool, shapeMenuModel, shapeTool, shouldKeepOpenOnAnnotation, sidebarBadge, signField, signatureMenuModel, signaturePreview, signatureTool, sketchTool, textStyleMenuModel, threadDeleteLabel, threadPopoverLabel, thumbnailSize, trackToolStyle, trapTab, unknownCommand, unknownTool, viewerSearchOf, visibleRangeCss, watchDetached, withHostTools };
+export { ARROWHEAD_CHOICES, ARROWHEAD_ENDING, COLOR_COLUMNS, COLOR_LABELS, DASH_PATTERN, DEFAULT_CORNER_RADIUS, DEFAULT_FREETEXT_WIDTH, DEFAULT_HIGHLIGHT_OPTIONS, DEFAULT_SHAPE_SIZE, FONT_FAMILIES, FORM_LABELS, LINE_WEIGHTS, MARKUP_ICONS, MARKUP_KINDS, MARKUP_LABELS, PALETTE, SHAPE_COLUMNS, SHAPE_ICONS, SHAPE_KINDS, SHAPE_LABELS, SIGNATURE_FONTS, SIGNATURE_IMAGE_MAX_LENGTH, SIGNATURE_IMAGE_MAX_SIDE, SIGNATURE_IMAGE_TYPES, SIGNATURE_LABELS, SIGNATURE_TABS, THUMBNAIL_WIDTH, TOOL_LABELS, ZOOM_LEVELS, allTools, annotationElementFor, arrowheadChoice, attachFileKeys, attachHistoryKeys, attachTouchPinch, attachTrackpadPinch, attachViewportKeys, clampFontSize, colorMenuModel, computeCssLayout, createColorMenu, createCommandButton, createDownloadButton, createFindBar, createFocusReturn, createFormAlert, createHighlightMenu, createIcon, createImageSignature, createLineStyleMenu, createMenu, createNextPage, createOverlay, createPageCount, createPageInput, createPageMount, createPageRenderer, createPageTransform, createPluginHost, createPluginLayers, createPopover, createPrevPage, createPrintButton, createRecordList, createRecordListController, createRedo, createSearchButton, createSearchController, createSearchResults, createShapeMenu, createSidebar, createSidebarController, createSignFieldMenu, createSignatureDialog, createSignatureDraft, createSignatureMenu, createSignaturePad, createSignaturePreview, createTextLayer, createTextStyleMenu, createThumbnail, createThumbnailPainter, createThumbnails, createThumbnailsController, createToolButton, createToolController, createToolOptions, createToolbar, createToolbarSeparator, createTypedSignature, createUndo, createViewer, createViewport, createZoomIn, createZoomOut, createZoomPreview, createZoomSelect, cssRectsToUserRects, cssVariableDefaults, definePlugin, downloadDocument, drawTool, editFreeText, findAnnouncer, findCountText, fitZoomCss, focusInitialMenuItem, fontFamilyValue, freetextTool, getSelectionQuads, handleFindKey, handleMenuKeys, handleRadioKeys, handleResultsFieldKey, handleTabKeys, highlightMenuModel, highlightTool, hitFor, isBlankQuery, keepHistoryFocus, lineStyleMenuModel, menuItems, mostVisiblePageCss, mountViewer, normalizeRotation, noteTool, observeAnnotationElement, pageSelectionText, pinchFrame, placePanel, printDocument, recordsSource, redactAreaTool, renderAnnotationContent, renderTypedSignature, searchSource, selectTextTool, selectTool, shapeMenuModel, shapeTool, shouldKeepOpenOnAnnotation, sidebarBadge, signField, signatureMenuModel, signaturePreview, signatureTool, sketchTool, textStyleMenuModel, threadDeleteLabel, threadPopoverLabel, thumbnailSize, trackToolStyle, trapTab, unknownCommand, unknownTool, viewerSearchOf, visibleRangeCss, watchDetached, wheelFactor, withHostTools };
 
 //# sourceMappingURL=dom.mjs.map