@pmndrs/klipp 0.0.0-stage → 0.14.0

package/dist/dom/InputControllerDom.d.ts

@@ -0,0 +1,15 @@
+import type { ConsumedInput } from '../core/input/consumedInput.js';
+import { InputController } from '../core/input/InputController.js';
+import { InputSystem } from './InputSystem.js';
+/**
+ * `InputController` reading mouse, touch, wheel and gesture input from a DOM element. The page keeps its own
+ * scrolling and pinch zoom over the element unless `wheel` or `pinch` is mapped.
+ */
+export declare class InputControllerDom extends InputController {
+    readonly inputSystem: InputSystem;
+    /** Listens to `element`, calling `onInput` for every event that changes the input. */
+    connect: (element: HTMLElement, onInput?: () => void) => void;
+    disconnect: () => void;
+    protected readInput(): ConsumedInput;
+    private claimPageGestures;
+}

package/dist/dom/InputControllerDom.js

@@ -0,0 +1,31 @@
+import { InputController } from "../core/input/InputController.js";
+import { InputSystem } from "./InputSystem.js";
+//#region src/dom/InputControllerDom.ts
+/**
+* `InputController` reading mouse, touch, wheel and gesture input from a DOM element. The page keeps its own
+* scrolling and pinch zoom over the element unless `wheel` or `pinch` is mapped.
+*/
+var InputControllerDom = class extends InputController {
+	inputSystem = new InputSystem();
+	/** Listens to `element`, calling `onInput` for every event that changes the input. */
+	connect = (element, onInput) => {
+		this.claimPageGestures();
+		this.inputSystem.connect(element, onInput);
+	};
+	disconnect = () => {
+		this.inputSystem.disconnect();
+	};
+	readInput() {
+		this.claimPageGestures();
+		return this.inputSystem.consume(this.input);
+	}
+	claimPageGestures() {
+		const { wheel, safariGesture } = this.inputSystem;
+		const zoom = !!this.config.pinch;
+		wheel.preventPageScroll = !!this.config.wheel;
+		wheel.preventPageZoom = zoom;
+		safariGesture.preventPageZoom = zoom;
+	}
+};
+//#endregion
+export { InputControllerDom };

package/dist/dom/InputSystem.d.ts

@@ -0,0 +1,40 @@
+import type { ConsumedInput } from '../core/input/consumedInput.js';
+import * as mouse from '../input-sources/mouse.js';
+import * as safariGesture from '../input-sources/safariGesture.js';
+import * as touch from '../input-sources/touch.js';
+import * as wheel from '../input-sources/wheel.js';
+import { type InteractiveArea } from '../input-sources/isInsideInteractiveArea.js';
+export type { InteractiveArea } from '../input-sources/isInsideInteractiveArea.js';
+export { MouseButton } from '../input-sources/mouse.js';
+/** Mouse, touch, wheel and Safari gesture input from a DOM element, read once per frame. */
+export declare class InputSystem {
+    readonly mouse: mouse.MouseState;
+    readonly touch: touch.TouchState;
+    readonly wheel: wheel.WheelState;
+    readonly safariGesture: safariGesture.SafariGestureState;
+    private _interactiveArea;
+    private element;
+    private disconnectSources;
+    /** Suppress the native right-click menu. */
+    get suppressContextMenu(): boolean;
+    set suppressContextMenu(suppress: boolean);
+    /** Restrict gesture starts to a normalized region. */
+    get interactiveArea(): InteractiveArea | null;
+    set interactiveArea(area: InteractiveArea | null);
+    /** Lock diagonal two-finger input to pinch or rotation. */
+    get lockTouchAxis(): boolean;
+    set lockTouchAxis(lock: boolean);
+    /**
+     * Attaches listeners to `element`, calling `onInput` for every event that changes the input. Safe to call
+     * again with a new element - disconnects the old one first.
+     */
+    connect: (element: HTMLElement, onInput?: () => void) => void;
+    /** Detaches every listener. A pointer lock stays: it belongs to the document, release it with `exitPointerLock`. */
+    disconnect: () => void;
+    requestPointerLock: () => void;
+    exitPointerLock: () => void;
+    /** Starts a new frame in every source and writes it to `out`. */
+    consume: (out: ConsumedInput) => ConsumedInput;
+    /** Whether `clientX/Y` falls within `interactiveArea`. A locked pointer counts as inside: its position is frozen. */
+    isInsideInteractiveArea(clientX: number, clientY: number): boolean;
+}

package/dist/dom/InputSystem.js

@@ -0,0 +1,113 @@
+import { isInsideInteractiveArea } from "../input-sources/isInsideInteractiveArea.js";
+import { MouseButton, connect, create, update } from "../input-sources/mouse.js";
+import { connect as connect$1, create as create$1, update as update$1 } from "../input-sources/touch.js";
+import { connect as connect$2, create as create$2, update as update$2 } from "../input-sources/safariGesture.js";
+import { connect as connect$3, create as create$3, update as update$3 } from "../input-sources/wheel.js";
+//#region src/dom/InputSystem.ts
+/** Mouse, touch, wheel and Safari gesture input from a DOM element, read once per frame. */
+var InputSystem = class {
+	mouse = create();
+	touch = create$1();
+	wheel = create$3();
+	safariGesture = create$2();
+	_interactiveArea = null;
+	element = null;
+	disconnectSources = null;
+	/** Suppress the native right-click menu. */
+	get suppressContextMenu() {
+		return this.mouse.suppressContextMenu;
+	}
+	set suppressContextMenu(suppress) {
+		this.mouse.suppressContextMenu = suppress;
+	}
+	/** Restrict gesture starts to a normalized region. */
+	get interactiveArea() {
+		return this._interactiveArea;
+	}
+	set interactiveArea(area) {
+		this._interactiveArea = area;
+		this.mouse.interactiveArea = area;
+		this.touch.interactiveArea = area;
+		this.wheel.interactiveArea = area;
+		this.safariGesture.interactiveArea = area;
+	}
+	/** Lock diagonal two-finger input to pinch or rotation. */
+	get lockTouchAxis() {
+		return this.touch.lockTouchAxis;
+	}
+	set lockTouchAxis(lock) {
+		this.touch.lockTouchAxis = lock;
+		this.safariGesture.lockTouchAxis = lock;
+	}
+	/**
+	* Attaches listeners to `element`, calling `onInput` for every event that changes the input. Safe to call
+	* again with a new element - disconnects the old one first.
+	*/
+	connect = (element, onInput) => {
+		this.disconnect();
+		this.element = element;
+		const disconnectMouse = connect(this.mouse, element, onInput);
+		const disconnectTouch = connect$1(this.touch, element, onInput);
+		const disconnectWheel = connect$3(this.wheel, element, onInput);
+		const disconnectSafariGesture = connect$2(this.safariGesture, element, onInput);
+		this.disconnectSources = () => {
+			disconnectMouse();
+			disconnectTouch();
+			disconnectWheel();
+			disconnectSafariGesture();
+		};
+	};
+	/** Detaches every listener. A pointer lock stays: it belongs to the document, release it with `exitPointerLock`. */
+	disconnect = () => {
+		this.disconnectSources?.();
+		this.disconnectSources = null;
+		this.element = null;
+	};
+	requestPointerLock = () => {
+		this.element?.requestPointerLock();
+	};
+	exitPointerLock = () => {
+		if (document.pointerLockElement === this.element) document.exitPointerLock();
+	};
+	/** Starts a new frame in every source and writes it to `out`. */
+	consume = (out) => {
+		update(this.mouse);
+		update$1(this.touch);
+		update$3(this.wheel);
+		update$2(this.safariGesture);
+		const { drag, buttons, lockedMovement } = this.mouse;
+		out.leftDx = drag.left[0];
+		out.leftDy = drag.left[1];
+		out.middleDx = drag.middle[0];
+		out.middleDy = drag.middle[1];
+		out.rightDx = drag.right[0];
+		out.rightDy = drag.right[1];
+		out.lockedDx = lockedMovement[0];
+		out.lockedDy = lockedMovement[1];
+		out.leftHeld = buttons.pressed.has("left");
+		out.middleHeld = buttons.pressed.has("middle");
+		out.rightHeld = buttons.pressed.has("right");
+		const touchState = this.touch;
+		out.touchOneDx = touchState.drag.one[0];
+		out.touchOneDy = touchState.drag.one[1];
+		out.touchTwoDx = touchState.drag.two[0];
+		out.touchTwoDy = touchState.drag.two[1];
+		out.touchThreeDx = touchState.drag.three[0];
+		out.touchThreeDy = touchState.drag.three[1];
+		out.touchRotateDelta = touchState.twistDelta + this.safariGesture.twistDelta;
+		out.touchOneHeld = touchState.fingers === 1;
+		out.touchTwoHeld = touchState.fingers === 2;
+		out.touchThreeHeld = touchState.fingers === 3;
+		out.wheelDeltaX = this.wheel.deltaX;
+		out.wheelDeltaY = this.wheel.deltaY;
+		out.pinchDelta = touchState.pinchDelta + this.wheel.pinchDelta + this.safariGesture.pinchDelta;
+		return out;
+	};
+	/** Whether `clientX/Y` falls within `interactiveArea`. A locked pointer counts as inside: its position is frozen. */
+	isInsideInteractiveArea(clientX, clientY) {
+		if (!this.element) return true;
+		return isInsideInteractiveArea(this.element, this._interactiveArea, clientX, clientY);
+	}
+};
+//#endregion
+export { InputSystem, MouseButton };

package/dist/dom/index.d.ts

@@ -0,0 +1,3 @@
+export { DebugOverlay, type DebugZone } from './DebugOverlay.js';
+export { InputControllerDom } from './InputControllerDom.js';
+export { InputSystem, MouseButton, type InteractiveArea } from './InputSystem.js';

package/dist/dom/index.js

@@ -0,0 +1,5 @@
+import { MouseButton } from "../input-sources/mouse.js";
+import { InputSystem } from "./InputSystem.js";
+import { InputControllerDom } from "./InputControllerDom.js";
+import { DebugOverlay } from "./DebugOverlay.js";
+export { DebugOverlay, InputControllerDom, InputSystem, MouseButton };

package/dist/input-sources/buttonInput.d.ts

@@ -0,0 +1,15 @@
+/** Which buttons are held, and which went down or up since the last `clear`. */
+export type ButtonInput<T> = {
+    readonly pressed: Set<T>;
+    readonly justPressed: Set<T>;
+    readonly justReleased: Set<T>;
+};
+export declare const create: <T>() => ButtonInput<T>;
+/** Marks `button` as held. Pressing a held button again is not a new press. */
+export declare function press<T>(state: ButtonInput<T>, button: T): void;
+/** Releases `button` if it was held. */
+export declare function release<T>(state: ButtonInput<T>, button: T): void;
+/** Releases every held button, for when the page loses focus mid-press. */
+export declare function releaseAll<T>(state: ButtonInput<T>): void;
+/** Starts a new frame: forgets which buttons just went down or up, keeps what is held. */
+export declare function clear<T>(state: ButtonInput<T>): void;

package/dist/input-sources/buttonInput.js

@@ -0,0 +1,23 @@
+//#region src/input-sources/buttonInput.ts
+var create = () => ({
+	pressed: /* @__PURE__ */ new Set(),
+	justPressed: /* @__PURE__ */ new Set(),
+	justReleased: /* @__PURE__ */ new Set()
+});
+/** Marks `button` as held. Pressing a held button again is not a new press. */
+function press(state, button) {
+	if (state.pressed.has(button)) return;
+	state.pressed.add(button);
+	state.justPressed.add(button);
+}
+/** Releases `button` if it was held. */
+function release(state, button) {
+	if (state.pressed.delete(button)) state.justReleased.add(button);
+}
+/** Starts a new frame: forgets which buttons just went down or up, keeps what is held. */
+function clear(state) {
+	if (state.justPressed.size > 0) state.justPressed.clear();
+	if (state.justReleased.size > 0) state.justReleased.clear();
+}
+//#endregion
+export { clear, create, press, release };

package/dist/input-sources/isInsideInteractiveArea.d.ts

@@ -0,0 +1,9 @@
+/** Normalized input region within the element. */
+export type InteractiveArea = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/** Whether `clientX/Y` falls within `area` of `element`. A locked pointer counts as inside: its position is frozen. */
+export declare function isInsideInteractiveArea(element: HTMLElement, area: InteractiveArea | null, clientX: number, clientY: number): boolean;

package/dist/input-sources/isInsideInteractiveArea.js

@@ -0,0 +1,11 @@
+//#region src/input-sources/isInsideInteractiveArea.ts
+/** Whether `clientX/Y` falls within `area` of `element`. A locked pointer counts as inside: its position is frozen. */
+function isInsideInteractiveArea(element, area, clientX, clientY) {
+	if (!area || document.pointerLockElement === element) return true;
+	const rect = element.getBoundingClientRect();
+	const x = (clientX - rect.left) / rect.width;
+	const y = (clientY - rect.top) / rect.height;
+	return x >= area.x && x <= area.x + area.width && y >= area.y && y <= area.y + area.height;
+}
+//#endregion
+export { isInsideInteractiveArea };

package/dist/input-sources/mouse.d.ts

@@ -0,0 +1,47 @@
+import type { Vec2 } from 'math';
+import type { ButtonInput } from './buttonInput.js';
+import { type InteractiveArea } from './isInsideInteractiveArea.js';
+/** `PointerEvent.buttons` bit of each mouse button. */
+export declare const MouseButton: {
+    readonly left: 1;
+    readonly right: 2;
+    readonly middle: 4;
+};
+export type MouseButtonName = keyof typeof MouseButton;
+/** Mouse buttons and movement, summed per frame. */
+export type MouseState = {
+    /** Which buttons are held, and which went down or up this frame. */
+    readonly buttons: ButtonInput<MouseButtonName>;
+    /** Movement this frame while each button was held, in pixels. */
+    readonly drag: Record<MouseButtonName, Vec2>;
+    /** Movement this frame while the pointer was locked with no button held. */
+    readonly lockedMovement: Vec2;
+    /** Whether the pointer is locked to the element. */
+    locked: boolean;
+    /** Only presses that start inside this normalized region count. */
+    interactiveArea: InteractiveArea | null;
+    /** Suppress the native right-click menu. */
+    suppressContextMenu: boolean;
+    /** Internal. */
+    pending: MousePending;
+};
+type MousePending = {
+    drag: Record<MouseButtonName, Vec2>;
+    lockedMovement: Vec2;
+    /** Button changes since the last update, in order, as an index into `buttonNames` plus `DOWN` for a press. */
+    changes: number[];
+    changeCount: number;
+    /** `event.buttons` as of the last event. */
+    held: number;
+    pointerId: number | null;
+    x: number;
+    y: number;
+    /** The next move sets the position instead of measuring from it, since it went stale. */
+    reanchor: boolean;
+};
+export declare const create: () => MouseState;
+/** Listens to `element`'s mouse. Returns a function that stops; a pointer lock it holds stays. */
+export declare function connect(state: MouseState, element: HTMLElement, onInput?: () => void): () => void;
+/** Starts a new frame: the input gathered since the last call becomes this frame's. */
+export declare function update(state: MouseState): void;
+export {};

package/dist/input-sources/mouse.js

@@ -0,0 +1,171 @@
+import { clear, create as create$1, press, release } from "./buttonInput.js";
+import { isInsideInteractiveArea } from "./isInsideInteractiveArea.js";
+import { suppressNativeGestures } from "./suppressNativeGestures.js";
+//#region src/input-sources/mouse.ts
+/** `PointerEvent.buttons` bit of each mouse button. */
+var MouseButton = {
+	left: 1,
+	right: 2,
+	middle: 4
+};
+var DOWN = 8;
+var buttonNames = [
+	"left",
+	"right",
+	"middle"
+];
+var create = () => ({
+	buttons: create$1(),
+	drag: {
+		left: [0, 0],
+		middle: [0, 0],
+		right: [0, 0]
+	},
+	lockedMovement: [0, 0],
+	locked: false,
+	interactiveArea: null,
+	suppressContextMenu: false,
+	pending: {
+		drag: {
+			left: [0, 0],
+			middle: [0, 0],
+			right: [0, 0]
+		},
+		lockedMovement: [0, 0],
+		changes: [],
+		changeCount: 0,
+		held: 0,
+		pointerId: null,
+		x: 0,
+		y: 0,
+		reanchor: false
+	}
+});
+/** Queues a press or release for every button that differs between the last event and `held`. */
+function setHeld(pending, held) {
+	for (let i = 0; i < buttonNames.length; i++) {
+		const bit = MouseButton[buttonNames[i]];
+		if ((pending.held & bit) === (held & bit)) continue;
+		pending.changes[pending.changeCount++] = i | (held & bit ? DOWN : 0);
+	}
+	pending.held = held;
+}
+function addDrag(pending, buttons, dx, dy) {
+	for (const name of buttonNames) {
+		if ((buttons & MouseButton[name]) === 0) continue;
+		const drag = pending.drag[name];
+		drag[0] += dx;
+		drag[1] += dy;
+	}
+}
+/** Listens to `element`'s mouse. Returns a function that stops; a pointer lock it holds stays. */
+function connect(state, element, onInput) {
+	const pending = state.pending;
+	const isLocked = () => document.pointerLockElement === element;
+	const release = () => {
+		pending.pointerId = null;
+		setHeld(pending, 0);
+	};
+	const onPointerDown = (event) => {
+		if (event.pointerType !== "mouse") return;
+		if (!isInsideInteractiveArea(element, state.interactiveArea, event.clientX, event.clientY)) return;
+		if (pending.pointerId !== null && pending.pointerId !== event.pointerId) return;
+		pending.pointerId = event.pointerId;
+		pending.x = event.clientX;
+		pending.y = event.clientY;
+		setHeld(pending, event.buttons);
+		try {
+			element.setPointerCapture(event.pointerId);
+		} catch {}
+		onInput?.();
+	};
+	const onPointerMove = (event) => {
+		if (event.pointerType !== "mouse") return;
+		if (pending.pointerId !== event.pointerId) {
+			if (!isLocked()) return;
+			pending.lockedMovement[0] += event.movementX;
+			pending.lockedMovement[1] += event.movementY;
+			onInput?.();
+			return;
+		}
+		setHeld(pending, event.buttons);
+		if (pending.reanchor) pending.reanchor = false;
+		else if (isLocked()) addDrag(pending, event.buttons, event.movementX, event.movementY);
+		else addDrag(pending, event.buttons, event.clientX - pending.x, event.clientY - pending.y);
+		pending.x = event.clientX;
+		pending.y = event.clientY;
+		onInput?.();
+	};
+	const onPointerUp = (event) => {
+		if (event.pointerType !== "mouse" || pending.pointerId !== event.pointerId) return;
+		release();
+		onInput?.();
+	};
+	const onContextMenu = (event) => {
+		if (state.suppressContextMenu) event.preventDefault();
+	};
+	const onPointerLockChange = () => {
+		const locked = isLocked();
+		if (state.locked && !locked && pending.pointerId !== null) pending.reanchor = true;
+		state.locked = locked;
+	};
+	const onPointerLockError = () => {
+		console.warn("requestPointerLock() failed - the browser rejected the request.");
+	};
+	const onBlur = () => release();
+	const onVisibilityChange = () => {
+		if (document.hidden) release();
+	};
+	const restoreStyles = suppressNativeGestures(element);
+	element.addEventListener("pointerdown", onPointerDown);
+	element.addEventListener("pointermove", onPointerMove);
+	element.addEventListener("pointerup", onPointerUp);
+	element.addEventListener("pointercancel", onPointerUp);
+	element.addEventListener("lostpointercapture", onPointerUp);
+	element.addEventListener("contextmenu", onContextMenu);
+	document.addEventListener("pointerlockchange", onPointerLockChange);
+	document.addEventListener("pointerlockerror", onPointerLockError);
+	document.addEventListener("visibilitychange", onVisibilityChange);
+	window.addEventListener("blur", onBlur);
+	state.locked = isLocked();
+	return () => {
+		restoreStyles();
+		element.removeEventListener("pointerdown", onPointerDown);
+		element.removeEventListener("pointermove", onPointerMove);
+		element.removeEventListener("pointerup", onPointerUp);
+		element.removeEventListener("pointercancel", onPointerUp);
+		element.removeEventListener("lostpointercapture", onPointerUp);
+		element.removeEventListener("contextmenu", onContextMenu);
+		document.removeEventListener("pointerlockchange", onPointerLockChange);
+		document.removeEventListener("pointerlockerror", onPointerLockError);
+		document.removeEventListener("visibilitychange", onVisibilityChange);
+		window.removeEventListener("blur", onBlur);
+		release();
+		pending.reanchor = false;
+		state.locked = false;
+	};
+}
+var copyAndZero = (out, source) => {
+	out[0] = source[0];
+	out[1] = source[1];
+	source[0] = 0;
+	source[1] = 0;
+};
+/** Starts a new frame: the input gathered since the last call becomes this frame's. */
+function update(state) {
+	const pending = state.pending;
+	clear(state.buttons);
+	for (let i = 0; i < pending.changeCount; i++) {
+		const change = pending.changes[i];
+		const button = buttonNames[change & -9];
+		if (change & DOWN) press(state.buttons, button);
+		else release(state.buttons, button);
+	}
+	pending.changeCount = 0;
+	copyAndZero(state.drag.left, pending.drag.left);
+	copyAndZero(state.drag.middle, pending.drag.middle);
+	copyAndZero(state.drag.right, pending.drag.right);
+	copyAndZero(state.lockedMovement, pending.lockedMovement);
+}
+//#endregion
+export { MouseButton, connect, create, update };

package/dist/input-sources/safariGesture.d.ts

@@ -0,0 +1,32 @@
+import { type InteractiveArea } from './isInsideInteractiveArea.js';
+/** Safari's trackpad pinch and rotate, summed per frame. Pinches on a touch screen are left to `touch`. */
+export type SafariGestureState = {
+    /** Pinch this frame, as the change in `ln(scale)`. Spreading is positive. */
+    pinchDelta: number;
+    /** Rotation this frame, in radians. */
+    twistDelta: number;
+    /** Only gestures that start inside this normalized region count. */
+    interactiveArea: InteractiveArea | null;
+    /** Each gesture keeps only the stronger of pinch and twist. */
+    lockTouchAxis: boolean;
+    /** Keep the gesture from zooming the page. */
+    preventPageZoom: boolean;
+    /** Internal. */
+    pending: {
+        pinchDelta: number;
+        twistDelta: number;
+        active: boolean;
+        scale: number;
+        rotationDegrees: number;
+        twistTotalDegrees: number;
+        axisLock: 'pinch' | 'twist' | null;
+        /** Touch pointers down on the element, which iOS also reports as gestures. */
+        touchIds: number[];
+        touchCount: number;
+    };
+};
+export declare const create: () => SafariGestureState;
+/** Listens to `element`'s Safari gesture events. Returns a function that stops. */
+export declare function connect(state: SafariGestureState, element: HTMLElement, onInput?: () => void): () => void;
+/** Starts a new frame: the input gathered since the last call becomes this frame's. */
+export declare function update(state: SafariGestureState): void;

package/dist/input-sources/safariGesture.js

@@ -0,0 +1,107 @@
+import { isInsideInteractiveArea } from "./isInsideInteractiveArea.js";
+import { dominantGesture } from "./touch.js";
+import { degreesToRadians } from "math";
+//#region src/input-sources/safariGesture.ts
+var create = () => ({
+	pinchDelta: 0,
+	twistDelta: 0,
+	interactiveArea: null,
+	lockTouchAxis: false,
+	preventPageZoom: true,
+	pending: {
+		pinchDelta: 0,
+		twistDelta: 0,
+		active: false,
+		scale: 1,
+		rotationDegrees: 0,
+		twistTotalDegrees: 0,
+		axisLock: null,
+		touchIds: [],
+		touchCount: 0
+	}
+});
+/** Listens to `element`'s Safari gesture events. Returns a function that stops. */
+function connect(state, element, onInput) {
+	const pending = state.pending;
+	const end = () => {
+		pending.active = false;
+	};
+	const liftAll = () => {
+		end();
+		pending.touchIds.fill(-1);
+		pending.touchCount = 0;
+	};
+	const onPointerDown = (event) => {
+		if (event.pointerType !== "touch" || pending.touchIds.indexOf(event.pointerId) !== -1) return;
+		pending.touchIds[pending.touchCount++] = event.pointerId;
+	};
+	const onPointerUp = (event) => {
+		if (event.pointerType !== "touch") return;
+		const index = pending.touchIds.indexOf(event.pointerId);
+		if (index === -1 || index >= pending.touchCount) return;
+		pending.touchIds[index] = pending.touchIds[--pending.touchCount];
+		pending.touchIds[pending.touchCount] = -1;
+	};
+	const onGestureStart = (event) => {
+		const gesture = event;
+		if (!isInsideInteractiveArea(element, state.interactiveArea, gesture.clientX, gesture.clientY)) return;
+		if (event.cancelable && state.preventPageZoom) event.preventDefault();
+		if (pending.touchCount > 0) return;
+		pending.active = true;
+		pending.scale = gesture.scale;
+		pending.rotationDegrees = gesture.rotation;
+		pending.twistTotalDegrees = 0;
+		pending.axisLock = null;
+	};
+	const onGestureChange = (event) => {
+		if (!pending.active) return;
+		const gesture = event;
+		if (event.cancelable && state.preventPageZoom) event.preventDefault();
+		if (pending.touchCount > 0) {
+			end();
+			return;
+		}
+		const pinchStep = Math.log(gesture.scale / pending.scale);
+		const rotationStep = gesture.rotation - pending.rotationDegrees;
+		pending.scale = gesture.scale;
+		pending.rotationDegrees = gesture.rotation;
+		pending.twistTotalDegrees += rotationStep;
+		if (state.lockTouchAxis && !pending.axisLock) pending.axisLock = dominantGesture(gesture.scale - 1, pending.twistTotalDegrees);
+		if (pending.axisLock !== "twist") pending.pinchDelta += pinchStep;
+		if (pending.axisLock !== "pinch") pending.twistDelta += degreesToRadians(rotationStep);
+		onInput?.();
+	};
+	const onVisibilityChange = () => {
+		if (document.hidden) liftAll();
+	};
+	element.addEventListener("pointerdown", onPointerDown);
+	element.addEventListener("pointerup", onPointerUp);
+	element.addEventListener("pointercancel", onPointerUp);
+	element.addEventListener("lostpointercapture", onPointerUp);
+	element.addEventListener("gesturestart", onGestureStart);
+	element.addEventListener("gesturechange", onGestureChange);
+	element.addEventListener("gestureend", end);
+	document.addEventListener("visibilitychange", onVisibilityChange);
+	window.addEventListener("blur", liftAll);
+	return () => {
+		element.removeEventListener("pointerdown", onPointerDown);
+		element.removeEventListener("pointerup", onPointerUp);
+		element.removeEventListener("pointercancel", onPointerUp);
+		element.removeEventListener("lostpointercapture", onPointerUp);
+		element.removeEventListener("gesturestart", onGestureStart);
+		element.removeEventListener("gesturechange", onGestureChange);
+		element.removeEventListener("gestureend", end);
+		document.removeEventListener("visibilitychange", onVisibilityChange);
+		window.removeEventListener("blur", liftAll);
+		liftAll();
+	};
+}
+/** Starts a new frame: the input gathered since the last call becomes this frame's. */
+function update(state) {
+	state.pinchDelta = state.pending.pinchDelta;
+	state.twistDelta = state.pending.twistDelta;
+	state.pending.pinchDelta = 0;
+	state.pending.twistDelta = 0;
+}
+//#endregion
+export { connect, create, update };

package/dist/input-sources/suppressNativeGestures.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Turns off native touch scrolling and text selection on `element`, which would fight a drag. Returns a
+ * function that restores the inline styles from before the first of any overlapping calls.
+ */
+export declare function suppressNativeGestures(element: HTMLElement): () => void;

package/dist/input-sources/suppressNativeGestures.js

@@ -0,0 +1,32 @@
+//#region src/input-sources/suppressNativeGestures.ts
+var suppressed = /* @__PURE__ */ new WeakMap();
+/**
+* Turns off native touch scrolling and text selection on `element`, which would fight a drag. Returns a
+* function that restores the inline styles from before the first of any overlapping calls.
+*/
+function suppressNativeGestures(element) {
+	let entry = suppressed.get(element);
+	if (!entry) {
+		entry = {
+			count: 0,
+			touchAction: element.style.touchAction,
+			userSelect: element.style.userSelect
+		};
+		suppressed.set(element, entry);
+		element.style.touchAction = "none";
+		element.style.userSelect = "none";
+	}
+	entry.count++;
+	let restored = false;
+	return () => {
+		if (restored) return;
+		restored = true;
+		const current = suppressed.get(element);
+		if (--current.count > 0) return;
+		element.style.touchAction = current.touchAction;
+		element.style.userSelect = current.userSelect;
+		suppressed.delete(element);
+	};
+}
+//#endregion
+export { suppressNativeGestures };