@lvl99dotcom/paintcanvas 0.0.0-stage → 0.3.0

package/dist/lib/transform/geometry/index.js

@@ -0,0 +1,258 @@
+// src/lib/transform/geometry/index.ts
+/** The 8 move & scale handles: corners and edge centres */
+var SCALE_HANDLES = [
+	{
+		hx: -1,
+		hy: -1
+	},
+	{
+		hx: 0,
+		hy: -1
+	},
+	{
+		hx: 1,
+		hy: -1
+	},
+	{
+		hx: -1,
+		hy: 0
+	},
+	{
+		hx: 1,
+		hy: 0
+	},
+	{
+		hx: -1,
+		hy: 1
+	},
+	{
+		hx: 0,
+		hy: 1
+	},
+	{
+		hx: 1,
+		hy: 1
+	}
+];
+/** Distance (screen pixels) of the rotate handle beyond the top-centre handle */
+var ROTATE_HANDLE_DISTANCE = 24;
+/** Degrees per rotation step when Shift is held */
+var ROTATION_STEP = 45;
+var toRadians = (degrees) => degrees * Math.PI / 180;
+/**
+* Rotate a vector by an angle in degrees.
+*/
+var rotate = ({ x, y }, degrees) => {
+	const cos = Math.cos(toRadians(degrees));
+	const sin = Math.sin(toRadians(degrees));
+	return {
+		x: x * cos - y * sin,
+		y: x * sin + y * cos
+	};
+};
+/**
+* The box that exactly covers a rectangle, unrotated.
+*
+* @example
+* boxFromRect({ x: 0, y: 0, width: 10, height: 20 }); // { cx: 5, cy: 10, width: 10, height: 20, rotation: 0 }
+*/
+var boxFromRect = ({ x, y, width, height }) => ({
+	cx: x + width / 2,
+	cy: y + height / 2,
+	width,
+	height,
+	rotation: 0
+});
+/**
+* Where a handle is on the canvas.
+*/
+var handlePosition = (box, { hx, hy }) => {
+	const offset = rotate({
+		x: hx * box.width / 2,
+		y: hy * box.height / 2
+	}, box.rotation);
+	return {
+		x: box.cx + offset.x,
+		y: box.cy + offset.y
+	};
+};
+/**
+* The box's four corners in drawing order (top-left, top-right, bottom-right, bottom-left), for drawing its outline.
+*/
+var boxCorners = (box) => [
+	{
+		hx: -1,
+		hy: -1
+	},
+	{
+		hx: 1,
+		hy: -1
+	},
+	{
+		hx: 1,
+		hy: 1
+	},
+	{
+		hx: -1,
+		hy: 1
+	}
+].map((h) => handlePosition(box, h));
+/**
+* Where the rotate handle is, in screen units: `distance` beyond the top-centre handle, away from the box's centre, so it
+* turns with the box. Returns the handle and the top-centre handle (`anchor`) it is joined to by a line.
+*
+* @param toScreen - converts canvas points to screen points
+*
+* @example
+* rotateHandle({ cx: 50, cy: 50, width: 40, height: 20, rotation: 0 }); // { anchor: { x: 50, y: 40 }, handle: { x: 50, y: 16 } }
+*/
+var rotateHandle = (box, toScreen = (p) => p, distance = 24) => {
+	const anchor = toScreen(handlePosition(box, {
+		hx: 0,
+		hy: -1
+	}));
+	const centre = toScreen({
+		x: box.cx,
+		y: box.cy
+	});
+	let dx = anchor.x - centre.x;
+	let dy = anchor.y - centre.y;
+	let length = Math.hypot(dx, dy);
+	if (length === 0) {
+		({x: dx, y: dy} = rotate({
+			x: 0,
+			y: -1
+		}, box.rotation));
+		length = 1;
+	}
+	return {
+		anchor,
+		handle: {
+			x: anchor.x + dx / length * distance,
+			y: anchor.y + dy / length * distance
+		}
+	};
+};
+/**
+* Find the handle under a point, if any. Points and radius are in the same units (usually screen pixels).
+*
+* @param toScreen - converts canvas points to the point's units
+*/
+var handleAt = (box, handles, point, radius, toScreen = (p) => p) => handles.find((handle) => {
+	const position = toScreen(handlePosition(box, handle));
+	return Math.hypot(position.x - point.x, position.y - point.y) <= radius;
+});
+/**
+* Check whether a canvas point is inside the (possibly rotated) box.
+*/
+var isInsideBox = (box, point) => {
+	const local = rotate({
+		x: point.x - box.cx,
+		y: point.y - box.cy
+	}, -box.rotation);
+	return Math.abs(local.x) <= Math.abs(box.width) / 2 && Math.abs(local.y) <= Math.abs(box.height) / 2;
+};
+/**
+* Move the box by a distance. With `constrain` (Shift), it only moves along the axis it has moved furthest on.
+*
+* @param start - the box when the drag started
+*/
+var moveBox = (start, dx, dy, constrain) => {
+	if (constrain) {
+		if (Math.abs(dx) >= Math.abs(dy)) dy = 0;
+		else dx = 0;
+	}
+	return {
+		...start,
+		cx: start.cx + dx,
+		cy: start.cy + dy
+	};
+};
+/**
+* Scale the box by dragging a handle to a point, keeping the opposite side (or corner) fixed. Works on rotated boxes.
+* With `proportional` (Shift), the box keeps the original's proportions; edge handles then scale the other axis around its centre.
+*
+* @param start - the box when the drag started
+* @param aspect - original width ÷ height, kept when proportional
+*/
+var scaleBox = (start, handle, point, proportional, aspect) => {
+	const { hx, hy } = handle;
+	const anchor = handlePosition(start, {
+		hx: -hx || 0,
+		hy: -hy || 0
+	});
+	const local = rotate({
+		x: point.x - anchor.x,
+		y: point.y - anchor.y
+	}, -start.rotation);
+	let width = hx !== 0 ? hx * local.x : start.width;
+	let height = hy !== 0 ? hy * local.y : start.height;
+	if (proportional) {
+		const sign = (value) => value < 0 ? -1 : 1;
+		if (hx !== 0 && hy !== 0) {
+			if (Math.abs(width) / aspect >= Math.abs(height)) height = sign(height) * Math.abs(width) / aspect;
+			else width = sign(width) * Math.abs(height) * aspect;
+		} else if (hx !== 0) height = sign(start.height) * Math.abs(width) / aspect;
+		else width = sign(start.width) * Math.abs(height) * aspect;
+	}
+	const centreOffset = rotate({
+		x: hx !== 0 ? hx * width / 2 : 0,
+		y: hy !== 0 ? hy * height / 2 : 0
+	}, start.rotation);
+	return {
+		...start,
+		cx: anchor.x + centreOffset.x,
+		cy: anchor.y + centreOffset.y,
+		width,
+		height
+	};
+};
+/**
+* Rotate the box around its centre by how far the pointer has turned around it since the drag started.
+* With `snap` (Shift), the rotation is a multiple of 45°.
+*
+* @param start - the box when the drag started
+* @param from - pointer position when the drag started
+*/
+var rotateBox = (start, from, to, snap) => {
+	const angle = (p) => Math.atan2(p.y - start.cy, p.x - start.cx) * 180 / Math.PI;
+	let rotation = start.rotation + angle(to) - angle(from);
+	if (snap) rotation = Math.round(rotation / 45) * 45;
+	rotation = ((rotation + 180) % 360 + 360) % 360 - 180;
+	return {
+		...start,
+		rotation
+	};
+};
+/**
+* CSS resize cursor for a handle, taking the box's rotation into account.
+*
+* @example
+* resizeCursor({ hx: 1, hy: 0 }, 0); // "ew-resize"
+*/
+var resizeCursor = ({ hx, hy }, rotation) => {
+	const direction = ((Math.atan2(hy, hx) * 180 / Math.PI + rotation) % 180 + 180) % 180;
+	return [
+		"ew-resize",
+		"nwse-resize",
+		"ns-resize",
+		"nesw-resize"
+	][Math.round(direction / 45) % 4];
+};
+/**
+* Smallest unrotated rectangle containing the box (e.g. the area the transformed pixels now cover).
+*/
+var boxBounds = (box) => {
+	const corners = boxCorners(box);
+	const xs = corners.map((p) => p.x);
+	const ys = corners.map((p) => p.y);
+	const x = Math.min(...xs);
+	const y = Math.min(...ys);
+	return {
+		x,
+		y,
+		width: Math.max(...xs) - x,
+		height: Math.max(...ys) - y
+	};
+};
+export { ROTATE_HANDLE_DISTANCE, ROTATION_STEP, SCALE_HANDLES, boxBounds, boxCorners, boxFromRect, handleAt, handlePosition, isInsideBox, moveBox, resizeCursor, rotateBox, rotateHandle, scaleBox };

package/dist/lib/utils/array/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Return a copy of a list with one item moved from one index to another. Items in between shift to fill the gap.
+ *
+ * Indexes are clamped to the list bounds.
+ *
+ * @example
+ * moveItem(["a", "b", "c"], 0, 2); // ["b", "c", "a"]
+ * moveItem(["a", "b", "c"], 2, 0); // ["c", "a", "b"]
+ */
+export declare const moveItem: <T>(items: readonly T[], from: number, to: number) => T[];

package/dist/lib/utils/array/index.js

@@ -0,0 +1,21 @@
+// src/lib/utils/array/index.ts
+/**
+* Return a copy of a list with one item moved from one index to another. Items in between shift to fill the gap.
+*
+* Indexes are clamped to the list bounds.
+*
+* @example
+* moveItem(["a", "b", "c"], 0, 2); // ["b", "c", "a"]
+* moveItem(["a", "b", "c"], 2, 0); // ["c", "a", "b"]
+*/
+var moveItem = (items, from, to) => {
+	const result = [...items];
+	if (items.length === 0) return result;
+	const last = items.length - 1;
+	const fromIndex = Math.max(0, Math.min(from, last));
+	const toIndex = Math.max(0, Math.min(to, last));
+	const [item] = result.splice(fromIndex, 1);
+	result.splice(toIndex, 0, item);
+	return result;
+};
+export { moveItem };

package/dist/lib/utils/gestures/index.d.ts

@@ -0,0 +1,35 @@
+/** Touch gestures that can undo, redo, copy or paste */
+export declare const TOUCH_GESTURES: readonly ["tap2", "tap3", "swipeLeft3", "swipeRight3", "swipeUp3", "swipeDown3", "swipeOut3", "swipeIn3"];
+export type TouchGesture = (typeof TOUCH_GESTURES)[number];
+/** What each gesture is called in "My settings" */
+export declare const TOUCH_GESTURE_NAMES: Record<TouchGesture, string>;
+/** Actions a touch gesture can do */
+export declare const GESTURE_ACTIONS: readonly ["undo", "redo", "copy", "paste"];
+export type GestureAction = (typeof GESTURE_ACTIONS)[number];
+/** Which gesture does each action, or "off" */
+export type GestureSettings = Record<GestureAction, TouchGesture | "off">;
+/** The gestures each action starts with (copy and paste as iPadOS does them) */
+export declare const DEFAULT_GESTURES: GestureSettings;
+/**
+ * Keep only valid gestures from stored (untrusted) settings, using the defaults for anything missing or invalid. A
+ * gesture used by an earlier action is turned off for later ones, so one gesture never does two things.
+ *
+ * @example
+ * sanitiseGestures({ undo: "tap3", redo: "tap3" }); // { undo: "tap3", redo: "off", copy: "swipeIn3", paste: "swipeOut3" }
+ */
+export declare const sanitiseGestures: (input: unknown) => GestureSettings;
+/**
+ * Give an action a gesture. If another action had it, that action takes this action's old gesture instead (the two
+ * swap).
+ *
+ * @example
+ * assignGesture(DEFAULT_GESTURES, "undo", "tap3"); // undo: "tap3", redo: "tap2"
+ */
+export declare const assignGesture: (gestures: GestureSettings, action: GestureAction, gesture: TouchGesture | "off") => GestureSettings;
+/**
+ * The action a gesture does, if any.
+ *
+ * @example
+ * gestureAction(DEFAULT_GESTURES, "tap2"); // "undo"
+ */
+export declare const gestureAction: (gestures: GestureSettings, gesture: TouchGesture) => GestureAction | undefined;

package/dist/lib/utils/gestures/index.js

@@ -0,0 +1,81 @@
+// src/lib/utils/gestures/index.ts
+/** Touch gestures that can undo, redo, copy or paste */
+var TOUCH_GESTURES = [
+	"tap2",
+	"tap3",
+	"swipeLeft3",
+	"swipeRight3",
+	"swipeUp3",
+	"swipeDown3",
+	"swipeOut3",
+	"swipeIn3"
+];
+/** What each gesture is called in "My settings" */
+var TOUCH_GESTURE_NAMES = {
+	tap2: "Tap with two fingers",
+	tap3: "Tap with three fingers",
+	swipeLeft3: "Swipe left with three fingers",
+	swipeRight3: "Swipe right with three fingers",
+	swipeUp3: "Swipe up with three fingers",
+	swipeDown3: "Swipe down with three fingers",
+	swipeOut3: "Swipe out with three fingers",
+	swipeIn3: "Swipe in with three fingers"
+};
+/** Actions a touch gesture can do */
+var GESTURE_ACTIONS = [
+	"undo",
+	"redo",
+	"copy",
+	"paste"
+];
+/** The gestures each action starts with (copy and paste as iPadOS does them) */
+var DEFAULT_GESTURES = {
+	undo: "tap2",
+	redo: "tap3",
+	copy: "swipeIn3",
+	paste: "swipeOut3"
+};
+/**
+* Keep only valid gestures from stored (untrusted) settings, using the defaults for anything missing or invalid. A
+* gesture used by an earlier action is turned off for later ones, so one gesture never does two things.
+*
+* @example
+* sanitiseGestures({ undo: "tap3", redo: "tap3" }); // { undo: "tap3", redo: "off", copy: "swipeIn3", paste: "swipeOut3" }
+*/
+var sanitiseGestures = (input) => {
+	const value = typeof input === "object" && input !== null ? input : {};
+	const used = /* @__PURE__ */ new Set();
+	const result = { ...DEFAULT_GESTURES };
+	for (const action of GESTURE_ACTIONS) {
+		const chosen = value[action];
+		const gesture = chosen === "off" || TOUCH_GESTURES.includes(chosen) ? chosen : DEFAULT_GESTURES[action];
+		result[action] = gesture !== "off" && used.has(gesture) ? "off" : gesture;
+		if (result[action] !== "off") used.add(result[action]);
+	}
+	return result;
+};
+/**
+* Give an action a gesture. If another action had it, that action takes this action's old gesture instead (the two
+* swap).
+*
+* @example
+* assignGesture(DEFAULT_GESTURES, "undo", "tap3"); // undo: "tap3", redo: "tap2"
+*/
+var assignGesture = (gestures, action, gesture) => {
+	const result = {
+		...gestures,
+		[action]: gesture
+	};
+	if (gesture === "off") return result;
+	const other = GESTURE_ACTIONS.find((each) => each !== action && gestures[each] === gesture);
+	if (other) result[other] = gestures[action];
+	return result;
+};
+/**
+* The action a gesture does, if any.
+*
+* @example
+* gestureAction(DEFAULT_GESTURES, "tap2"); // "undo"
+*/
+var gestureAction = (gestures, gesture) => GESTURE_ACTIONS.find((action) => gestures[action] === gesture);
+export { DEFAULT_GESTURES, GESTURE_ACTIONS, TOUCH_GESTURES, TOUCH_GESTURE_NAMES, assignGesture, gestureAction, sanitiseGestures };

package/dist/lib/utils/navigation/index.d.ts

@@ -0,0 +1,51 @@
+import type { Point } from "../../classes/Viewport";
+import type { InputSettingsData } from "../../classes/InputSettings";
+/** Pixels per line when a wheel reports its movement in lines */
+export declare const WHEEL_LINE_PIXELS = 16;
+/** Pixels per page when a wheel reports its movement in pages */
+export declare const WHEEL_PAGE_PIXELS = 800;
+/** Largest wheel movement (pixels) counted for one zoom step, so one mouse wheel notch can't zoom too far */
+export declare const MAX_WHEEL_ZOOM_DELTA = 50;
+/** How strongly wheel movement zooms: each pixel changes the zoom by about 1% */
+export declare const WHEEL_ZOOM_SPEED = 0.01;
+/** What a wheel or trackpad movement does to the view */
+export type WheelAction = {
+    kind: "pan";
+    dx: number;
+    dy: number;
+} | {
+    kind: "zoom";
+    factor: number;
+} | null;
+/** The navigation settings a wheel movement depends on */
+export type NavigationSettings = Pick<InputSettingsData, "scrollPan" | "pinchZoom" | "modifierScrollZoom">;
+/**
+ * Convert a wheel movement to pixels.
+ *
+ * @example
+ * wheelPixels(3, WheelEvent.DOM_DELTA_LINE); // 48
+ */
+export declare const wheelPixels: (delta: number, deltaMode: number) => number;
+/**
+ * Decide what a wheel movement does:
+ *
+ * - With Ctrl held, or a trackpad pinch (which browsers report as Ctrl + wheel): zoom, if pinch zoom is on (or, where
+ *   Ctrl is the zoom key, if modifier zoom is on).
+ * - With Cmd held (Apple devices): zoom, if modifier zoom is on.
+ * - Otherwise: pan, if scroll panning is on.
+ *
+ * @example
+ * wheelAction({ deltaX: 0, deltaY: 10, deltaMode: 0, ctrlKey: false, metaKey: false }, settings, "Cmd");
+ * // { kind: "pan", dx: -0, dy: -10 }
+ */
+export declare const wheelAction: (event: Pick<WheelEvent, "deltaX" | "deltaY" | "deltaMode" | "ctrlKey" | "metaKey">, settings: NavigationSettings, modifier: "Cmd" | "Ctrl") => WheelAction;
+/**
+ * The midpoint of two touches and the distance between them, for two-finger pan and pinch.
+ *
+ * @example
+ * touchPair({ x: 0, y: 0 }, { x: 6, y: 8 }); // { mid: { x: 3, y: 4 }, distance: 10 }
+ */
+export declare const touchPair: (a: Point, b: Point) => {
+    mid: Point;
+    distance: number;
+};

package/dist/lib/utils/navigation/index.js

@@ -0,0 +1,59 @@
+// src/lib/utils/navigation/index.ts
+/** Pixels per line when a wheel reports its movement in lines */
+var WHEEL_LINE_PIXELS = 16;
+/** Pixels per page when a wheel reports its movement in pages */
+var WHEEL_PAGE_PIXELS = 800;
+/** Largest wheel movement (pixels) counted for one zoom step, so one mouse wheel notch can't zoom too far */
+var MAX_WHEEL_ZOOM_DELTA = 50;
+/** How strongly wheel movement zooms: each pixel changes the zoom by about 1% */
+var WHEEL_ZOOM_SPEED = .01;
+/**
+* Convert a wheel movement to pixels.
+*
+* @example
+* wheelPixels(3, WheelEvent.DOM_DELTA_LINE); // 48
+*/
+var wheelPixels = (delta, deltaMode) => delta * (deltaMode === 1 ? 16 : deltaMode === 2 ? 800 : 1);
+/**
+* Decide what a wheel movement does:
+*
+* - With Ctrl held, or a trackpad pinch (which browsers report as Ctrl + wheel): zoom, if pinch zoom is on (or, where
+*   Ctrl is the zoom key, if modifier zoom is on).
+* - With Cmd held (Apple devices): zoom, if modifier zoom is on.
+* - Otherwise: pan, if scroll panning is on.
+*
+* @example
+* wheelAction({ deltaX: 0, deltaY: 10, deltaMode: 0, ctrlKey: false, metaKey: false }, settings, "Cmd");
+* // { kind: "pan", dx: -0, dy: -10 }
+*/
+var wheelAction = (event, settings, modifier) => {
+	const dx = wheelPixels(event.deltaX, event.deltaMode);
+	const dy = wheelPixels(event.deltaY, event.deltaMode);
+	const zooms = event.ctrlKey ? settings.pinchZoom || modifier === "Ctrl" && settings.modifierScrollZoom : event.metaKey && modifier === "Cmd" && settings.modifierScrollZoom;
+	if (event.ctrlKey || event.metaKey) {
+		if (!zooms) return null;
+		return {
+			kind: "zoom",
+			factor: Math.exp(-Math.max(-50, Math.min(50, dy)) * WHEEL_ZOOM_SPEED)
+		};
+	}
+	return settings.scrollPan ? {
+		kind: "pan",
+		dx: -dx,
+		dy: -dy
+	} : null;
+};
+/**
+* The midpoint of two touches and the distance between them, for two-finger pan and pinch.
+*
+* @example
+* touchPair({ x: 0, y: 0 }, { x: 6, y: 8 }); // { mid: { x: 3, y: 4 }, distance: 10 }
+*/
+var touchPair = (a, b) => ({
+	mid: {
+		x: (a.x + b.x) / 2,
+		y: (a.y + b.y) / 2
+	},
+	distance: Math.hypot(b.x - a.x, b.y - a.y)
+});
+export { MAX_WHEEL_ZOOM_DELTA, WHEEL_LINE_PIXELS, WHEEL_PAGE_PIXELS, WHEEL_ZOOM_SPEED, touchPair, wheelAction, wheelPixels };

package/dist/lib/utils/random/index.d.ts

@@ -0,0 +1,18 @@
+/** A random number generator returning numbers from 0 (inclusive) to 1 (exclusive), like `Math.random` */
+export type RandomFn = () => number;
+/**
+ * A random whole number from 0 to 2³² − 1, e.g. a seed for `seededRandom`.
+ *
+ * @example
+ * randomSeed(); // 3141592653
+ */
+export declare const randomSeed: (random?: RandomFn) => number;
+/**
+ * A random number generator that always gives the same numbers for the same seed (mulberry32), so random variation can
+ * be repeated, e.g. to draw a received stroke the same way.
+ *
+ * @example
+ * const random = seededRandom(42);
+ * random(); // 0.6011037519201636, every time
+ */
+export declare const seededRandom: (seed: number) => RandomFn;

package/dist/lib/utils/random/index.js

@@ -0,0 +1,27 @@
+// src/lib/utils/random/index.ts
+/**
+* A random whole number from 0 to 2³² − 1, e.g. a seed for `seededRandom`.
+*
+* @example
+* randomSeed(); // 3141592653
+*/
+var randomSeed = (random = Math.random) => Math.floor(random() * 4294967296);
+/**
+* A random number generator that always gives the same numbers for the same seed (mulberry32), so random variation can
+* be repeated, e.g. to draw a received stroke the same way.
+*
+* @example
+* const random = seededRandom(42);
+* random(); // 0.6011037519201636, every time
+*/
+var seededRandom = (seed) => {
+	let state = seed >>> 0;
+	return () => {
+		state = state + 1831565813 >>> 0;
+		let t = state;
+		t = Math.imul(t ^ t >>> 15, t | 1);
+		t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+		return ((t ^ t >>> 14) >>> 0) / 4294967296;
+	};
+};
+export { randomSeed, seededRandom };

package/dist/lib/utils/shortcuts/index.d.ts

@@ -0,0 +1,74 @@
+import { Tool } from "../../classes/PaintCanvas";
+/** Actions that keyboard shortcuts trigger */
+export type ShortcutAction = {
+    type: "tool";
+    tool: Tool;
+} | {
+    type: "brush-smaller";
+} | {
+    type: "brush-bigger";
+} | {
+    type: "toggle-interface";
+} | {
+    type: "select-all";
+} | {
+    type: "deselect";
+} | {
+    type: "save";
+} | {
+    type: "undo";
+} | {
+    type: "redo";
+} | {
+    type: "cut";
+} | {
+    type: "delete";
+} | {
+    type: "copy";
+} | {
+    type: "paste";
+} | {
+    type: "cancel";
+} | {
+    type: "commit";
+};
+/** A key combination. `cmd` matches the Command key on macOS and Ctrl on Windows/Linux. */
+export interface KeyCombo {
+    /** Lowercase `KeyboardEvent.key` value */
+    key: string;
+    cmd?: boolean;
+    shift?: boolean;
+    alt?: boolean;
+}
+export interface Shortcut extends KeyCombo {
+    action: ShortcutAction;
+}
+/** All keyboard shortcuts */
+export declare const SHORTCUTS: readonly Shortcut[];
+/** Key held to pan temporarily (handled separately because it acts while held, not on press) */
+/**
+ * The symbol for the "cmd" key in shortcut labels: ⌘ on Apple devices, ^ (Control) elsewhere.
+ *
+ * @example
+ * cmdSymbol("MacIntel"); // "⌘"
+ * cmdSymbol("Win32"); // "^"
+ */
+export declare const cmdSymbol: (platform?: string) => string;
+export declare const HOLD_TO_PAN_KEY = " ";
+/** The parts of a keyboard event used to match shortcuts */
+export type KeyEventLike = Pick<KeyboardEvent, "key" | "metaKey" | "ctrlKey" | "shiftKey" | "altKey">;
+/**
+ * Find the action for a key press. Modifier keys must match exactly.
+ *
+ * @example
+ * matchShortcut({ key: "Z", metaKey: true, ctrlKey: false, shiftKey: true, altKey: false });
+ * // { type: "redo" }
+ */
+export declare const matchShortcut: (event: KeyEventLike, shortcuts?: readonly Shortcut[]) => ShortcutAction | undefined;
+/**
+ * Check if a key press happened while typing in a text field, where shortcuts must not apply.
+ *
+ * @example
+ * isTypingTarget(document.querySelector("textarea")); // true
+ */
+export declare const isTypingTarget: (target: EventTarget | null | undefined) => boolean;