@tldraw/editor 4.2.2 → 4.2.3

package/src/lib/editor/Editor.ts

@@ -21,6 +21,7 @@ import {
 	PageRecordType,
 	StyleProp,
 	StylePropValue,
+	TLArrowShape,
 	TLAsset,
 	TLAssetId,
 	TLAssetPartial,
@@ -29,12 +30,12 @@ import {
 	TLBindingId,
 	TLBindingUpdate,
 	TLCamera,
-	TLCreateShapePartial,
 	TLCursor,
 	TLCursorType,
 	TLDOCUMENT_ID,
 	TLDocument,
 	TLFrameShape,
+	TLGeoShape,
 	TLGroupShape,
 	TLHandle,
 	TLINSTANCE_ID,
@@ -42,6 +43,8 @@ import {
 	TLInstance,
 	TLInstancePageState,
 	TLInstancePresence,
+	TLNoteShape,
+	TLPOINTER_ID,
 	TLPage,
 	TLPageId,
 	TLParentId,
@@ -51,6 +54,8 @@ import {
 	TLShapePartial,
 	TLStore,
 	TLStoreSnapshot,
+	TLUnknownBinding,
+	TLUnknownShape,
 	TLVideoAsset,
 	createBindingId,
 	createShapeId,
@@ -108,6 +113,7 @@ import {
 	MIDDLE_MOUSE_BUTTON,
 	RIGHT_MOUSE_BUTTON,
 	STYLUS_ERASER_BUTTON,
+	ZOOM_TO_FIT_PADDING,
 } from '../constants'
 import { exportToSvg } from '../exports/exportToSvg'
 import { getSvgAsImage } from '../exports/getSvgAsImage'
@@ -133,6 +139,7 @@ import {
 	parseDeepLinkString,
 } from '../utils/deepLinks'
 import { getIncrementedName } from '../utils/getIncrementedName'
+import { isAccelKey } from '../utils/keyboard'
 import { getReorderingShapesChanges } from '../utils/reorderShapes'
 import { TLTextOptions, TiptapEditor } from '../utils/richText'
 import { applyRotationToSnapshotShapes, getRotationSnapshot } from '../utils/rotation'
@@ -146,18 +153,22 @@ import { EdgeScrollManager } from './managers/EdgeScrollManager/EdgeScrollManage
 import { FocusManager } from './managers/FocusManager/FocusManager'
 import { FontManager } from './managers/FontManager/FontManager'
 import { HistoryManager } from './managers/HistoryManager/HistoryManager'
-import { InputsManager } from './managers/InputsManager/InputsManager'
 import { ScribbleManager } from './managers/ScribbleManager/ScribbleManager'
 import { SnapManager } from './managers/SnapManager/SnapManager'
 import { TextManager } from './managers/TextManager/TextManager'
 import { TickManager } from './managers/TickManager/TickManager'
 import { UserPreferencesManager } from './managers/UserPreferencesManager/UserPreferencesManager'
-import { ShapeUtil, TLEditStartInfo, TLGeometryOpts, TLResizeMode } from './shapes/ShapeUtil'
+import { ShapeUtil, TLGeometryOpts, TLResizeMode } from './shapes/ShapeUtil'
 import { RootState } from './tools/RootState'
 import { StateNode, TLStateNodeConstructor } from './tools/StateNode'
 import { TLContent } from './types/clipboard-types'
 import { TLEventMap } from './types/emit-types'
-import { TLEventInfo, TLPointerEventInfo } from './types/event-types'
+import {
+	TLEventInfo,
+	TLPinchEventInfo,
+	TLPointerEventInfo,
+	TLWheelEventInfo,
+} from './types/event-types'
 import { TLExternalAsset, TLExternalContent } from './types/external-content'
 import { TLHistoryBatchOptions } from './types/history-types'
 import {
@@ -188,7 +199,7 @@ export type TLResizeShapeOptions = Partial<{
 /** @public */
 export interface TLEditorOptions {
 	/**
-	 * The Store instance to use for keeping the editor's data. This may be prepopulated, e.g. by loading
+	 * The Store instance to use for keeping the app's data. This may be prepopulated, e.g. by loading
 	 * from a server or database.
 	 */
 	store: TLStore
@@ -326,8 +337,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		this._tickManager = new TickManager(this)
 
-		this.inputs = new InputsManager(this)
-
 		class NewRoot extends RootState {
 			static override initial = initialState ?? ''
 		}
@@ -438,7 +447,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		let deletedBindings = new Map<TLBindingId, BindingOnDeleteOptions<any>>()
 		const deletedShapeIds = new Set<TLShapeId>()
 		const invalidParents = new Set<TLShapeId>()
-		let invalidBindingTypes = new Set<TLBinding['type']>()
+		let invalidBindingTypes = new Set<string>()
 		this.disposables.add(
 			this.sideEffects.registerOperationCompleteHandler(() => {
 				// this needs to be cleared here because further effects may delete more shapes
@@ -701,7 +710,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 							if (filtered.length > 0) {
 								const commonGroupAncestor = this.findCommonAncestor(
 									compact(filtered.map((id) => this.getShape(id))),
-									(shape) => this.isShapeOfType(shape, 'group')
+									(shape) => this.isShapeOfType<TLGroupShape>(shape, 'group')
 								)
 
 								if (commonGroupAncestor) {
@@ -862,7 +871,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	/**
-	 * A set of functions to call when the editor is disposed.
+	 * A set of functions to call when the app is disposed.
 	 *
 	 * @public
 	 */
@@ -875,21 +884,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	isDisposed = false
 
-	/**
-	 * A manager for the editor's tick events.
-	 *
-	 * @internal */
-	private readonly _tickManager: TickManager
-
-	/**
-	 * A manager for the editor's input state.
-	 *
-	 * @public
-	 */
-	readonly inputs: InputsManager
+	/** @internal */
+	private readonly _tickManager
 
 	/**
-	 * A manager for the editor's snapping feature.
+	 * A manager for the app's snapping feature.
 	 *
 	 * @public
 	 */
@@ -974,7 +973,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		this.disposables.clear()
 		this.store.dispose()
 		this.isDisposed = true
-		this.emit('dispose')
 	}
 
 	/* ------------------- Shape Utils ------------------ */
@@ -984,7 +982,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	shapeUtils: { readonly [K in string]?: ShapeUtil<TLShape> }
+	shapeUtils: { readonly [K in string]?: ShapeUtil<TLUnknownShape> }
 
 	styleProps: { [key: string]: Map<StyleProp<any>, string> }
 
@@ -1003,8 +1001,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	getShapeUtil<K extends TLShape['type']>(type: K): ShapeUtil<Extract<TLShape, { type: K }>>
-	getShapeUtil<S extends TLShape>(shape: S | TLShapePartial<S> | S['type']): ShapeUtil<S>
+	getShapeUtil<S extends TLUnknownShape>(shape: S | TLShapePartial<S>): ShapeUtil<S>
+	getShapeUtil<S extends TLUnknownShape>(type: S['type']): ShapeUtil<S>
 	getShapeUtil<T extends ShapeUtil>(type: T extends ShapeUtil<infer R> ? R['type'] : string): T
 	getShapeUtil(arg: string | { type: string }) {
 		const type = typeof arg === 'string' ? arg : arg.type
@@ -1018,8 +1016,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @param shape - A shape, shape partial, or shape type.
 	 */
-	hasShapeUtil(shape: TLShape | TLShapePartial<TLShape>): boolean
-	hasShapeUtil(type: TLShape['type']): boolean
+	hasShapeUtil<S extends TLUnknownShape>(shape: S | TLShapePartial<S>): boolean
+	hasShapeUtil<S extends TLUnknownShape>(type: S['type']): boolean
 	hasShapeUtil<T extends ShapeUtil>(
 		type: T extends ShapeUtil<infer R> ? R['type'] : string
 	): boolean
@@ -1034,7 +1032,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	bindingUtils: { readonly [K in string]?: BindingUtil<TLBinding> }
+	bindingUtils: { readonly [K in string]?: BindingUtil<TLUnknownBinding> }
 
 	/**
 	 * Get a binding util from a binding itself.
@@ -1051,8 +1049,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	getBindingUtil<K extends TLBinding['type']>(type: K): BindingUtil<Extract<TLBinding, { type: K }>>
-	getBindingUtil<S extends TLBinding>(binding: S | { type: S['type'] }): BindingUtil<S>
+	getBindingUtil<S extends TLUnknownBinding>(binding: S | { type: S['type'] }): BindingUtil<S>
+	getBindingUtil<S extends TLUnknownBinding>(type: S['type']): BindingUtil<S>
 	getBindingUtil<T extends BindingUtil>(
 		type: T extends BindingUtil<infer R> ? R['type'] : string
 	): T
@@ -1066,7 +1064,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/* --------------------- History -------------------- */
 
 	/**
-	 * A manager for the editor's history.
+	 * A manager for the app's history.
 	 *
 	 * @readonly
 	 */
@@ -1090,18 +1088,14 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	/**
-	 * Whether the editor can undo.
+	 * Whether the app can undo.
 	 *
 	 * @public
 	 */
-	@computed canUndo(): boolean {
+	@computed getCanUndo(): boolean {
 		return this.history.getNumUndos() > 0
 	}
 
-	getCanUndo() {
-		return this.canUndo()
-	}
-
 	/**
 	 * Redo to the next mark.
 	 *
@@ -1119,24 +1113,20 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this
 	}
 
+	clearHistory() {
+		this.history.clear()
+		return this
+	}
+
 	/**
-	 * Whether the editor can redo.
+	 * Whether the app can redo.
 	 *
 	 * @public
 	 */
-	@computed canRedo(): boolean {
+	@computed getCanRedo(): boolean {
 		return this.history.getNumRedos() > 0
 	}
 
-	getCanRedo() {
-		return this.canRedo()
-	}
-
-	clearHistory() {
-		this.history.clear()
-		return this
-	}
-
 	/**
 	 * Create a new "mark", or stopping point, in the undo redo history. Creating a mark will clear
 	 * any redos. You typically want to do this just before a user interaction begins or is handled.
@@ -1310,7 +1300,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 					}),
 					selectionCount: this.getSelectedShapes().length,
 					editingShape: editingShapeId ? this.getShape(editingShapeId) : undefined,
-					inputs: this.inputs.toJson(),
+					inputs: this.inputs,
 					pageState: this.getCurrentPageState(),
 					instanceState: this.getInstanceState(),
 					collaboratorCount: this.getCollaboratorsOnCurrentPage().length,
@@ -1335,7 +1325,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * we're in a transaction that's about to be rolled back due to the same error we're currently
 	 * reporting.
 	 *
-	 * Instead, to listen to changes to this value, you need to listen to editor's `crash` event.
+	 * Instead, to listen to changes to this value, you need to listen to app's `crash` event.
 	 *
 	 * @internal
 	 */
@@ -2038,7 +2028,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	/**
-	 * The id of the editor's only selected shape.
+	 * The id of the app's only selected shape.
 	 *
 	 * @returns Null if there is no shape or more than one selected shape, otherwise the selected shape's id.
 	 *
@@ -2050,7 +2040,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	/**
-	 * The editor's only selected shape.
+	 * The app's only selected shape.
 	 *
 	 * @returns Null if there is no shape or more than one selected shape, otherwise the selected shape.
 	 *
@@ -2230,7 +2220,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				throw Error(`Editor.setFocusedGroup: Shape with id ${id} does not exist`)
 			}
 
-			if (!this.isShapeOfType(shape, 'group')) {
+			if (!this.isShapeOfType<TLGroupShape>(shape, 'group')) {
 				throw Error(
 					`Editor.setFocusedGroup: Cannot set focused group to shape of type ${shape.type}`
 				)
@@ -2258,7 +2248,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (focusedGroup) {
 			// If we have a focused layer, look for an ancestor of the focused shape that is a group
 			const match = this.findShapeAncestor(focusedGroup, (shape) =>
-				this.isShapeOfType(shape, 'group')
+				this.isShapeOfType<TLGroupShape>(shape, 'group')
 			)
 			// If we have an ancestor that can become a focused layer, set it as the focused layer
 			this.setFocusedGroup(match?.id ?? null)
@@ -2291,29 +2281,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return editingShapeId ? this.getShape(editingShapeId) : undefined
 	}
 
-	/**
-	 * Whether the shape can be edited.
-	 *
-	 * @param shape - The shape (or shape id) to check if it can be edited.
-	 * @param info - The info about the edit start.
-	 *
-	 * @public
-	 * @returns true if the shape can be edited, false otherwise.
-	 */
-	canEditShape<T extends TLShape | TLShapeId>(shape: T | null, info?: TLEditStartInfo): shape is T {
-		const id = typeof shape === 'string' ? shape : (shape?.id ?? null)
-		if (!id) return false // no shape
-		if (id === this.getEditingShapeId()) return false // already editing this shape
-		const _shape = this.getShape(id)
-		if (!_shape) return false // no shape
-		const util = this.getShapeUtil(_shape)
-		const _info: TLEditStartInfo = info ?? { type: 'unknown' }
-		if (!util.canEdit(_shape, _info)) return false // shape is not editable
-		if (this.getIsReadonly() && !util.canEditInReadonly(_shape)) return false // readonly and no exception
-		if (this.isShapeOrAncestorLocked(_shape) && !util.canEditWhileLocked(_shape)) return false // locked and no exception. Note here: we're not distinguishing between a locked shape and a shape that is the descendant of a locked shape.
-		return true // shape is editable
-	}
-
 	/**
 	 * Set the current editing shape.
 	 *
@@ -2329,59 +2296,44 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	setEditingShape(shape: TLShapeId | TLShape | null): this {
 		const id = typeof shape === 'string' ? shape : (shape?.id ?? null)
+		this.setRichTextEditor(null)
+		const prevEditingShapeId = this.getEditingShapeId()
+		if (id !== prevEditingShapeId) {
+			if (id) {
+				const shape = this.getShape(id)
+				if (shape && this.getShapeUtil(shape).canEdit(shape)) {
+					this.run(
+						() => {
+							this._updateCurrentPageState({ editingShapeId: id })
+							if (prevEditingShapeId) {
+								const prevEditingShape = this.getShape(prevEditingShapeId)
+								if (prevEditingShape) {
+									this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape)
+								}
+							}
+							this.getShapeUtil(shape).onEditStart?.(shape)
+						},
+						{ history: 'ignore' }
+					)
+					return this
+				}
+			}
 
-		if (!id) {
-			// setting the editing shape to null
+			// Either we just set the editing id to null, or the shape was missing or not editable
 			this.run(
 				() => {
-					// Clean up the previous editing shape
-					const prevEditingShapeId = this.getEditingShapeId()
+					this._updateCurrentPageState({ editingShapeId: null })
+					this._currentRichTextEditor.set(null)
 					if (prevEditingShapeId) {
 						const prevEditingShape = this.getShape(prevEditingShapeId)
 						if (prevEditingShape) {
 							this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape)
 						}
 					}
-
-					// Clean up the editing shape state and rich text editor
-					this._updateCurrentPageState({ editingShapeId: null })
-					this._currentRichTextEditor.set(null)
 				},
 				{ history: 'ignore' }
 			)
-
-			return this
 		}
-
-		// id was provided but the next editing shape was not editable or didn't exist, so do nothing
-		if (!this.canEditShape(id)) return this
-
-		// id was provided and the next editing shape is editable, so set the rich text editor to null
-		this.run(
-			() => {
-				// Clean up the previous editing shape
-				const prevEditingShapeId = this.getEditingShapeId()
-				if (prevEditingShapeId) {
-					const prevEditingShape = this.getShape(prevEditingShapeId)
-					if (prevEditingShape) {
-						this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape)
-					}
-				}
-
-				// Clean up the editing shape state and rich text editor
-				this._updateCurrentPageState({ editingShapeId: null })
-				this._currentRichTextEditor.set(null)
-
-				// Set the new editing shape
-				this.select(id)
-				this._updateCurrentPageState({ editingShapeId: id })
-
-				const nextEditingShape = this.getShape(id)! // shape should be there because canEditShape checked it. Possible small chance that onEditEnd deleted it?
-				this.getShapeUtil(nextEditingShape).onEditStart?.(nextEditingShape)
-			},
-			{ history: 'ignore' }
-		)
-
 		return this
 	}
 
@@ -2585,26 +2537,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.getCurrentPageState().croppingShapeId
 	}
 
-	/**
-	 * Whether the shape can be cropped.
-	 *
-	 * @param shape - The shape (or shape id) to check if it can be cropped.
-	 *
-	 * @public
-	 * @returns true if the shape can be cropped, false otherwise.
-	 */
-	canCropShape<T extends TLShape | TLShapeId>(shape: T | null): shape is T {
-		if (!shape) return false
-		const id = typeof shape === 'string' ? shape : (shape?.id ?? null)
-		if (!id) return false
-		const _shape = this.getShape(id)
-		if (!_shape) return false
-		const util = this.getShapeUtil(_shape)
-		if (!util.canCrop(_shape)) return false
-		if (this.isShapeOrAncestorLocked(_shape)) return false
-		return true
-	}
-
 	/**
 	 * Set the current cropping shape.
 	 *
@@ -2626,8 +2558,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 				() => {
 					if (!id) {
 						this.updateCurrentPageState({ croppingShapeId: null })
-					} else if (this.canCropShape(id)) {
-						this.updateCurrentPageState({ croppingShapeId: id })
+					} else {
+						const shape = this.getShape(id)!
+						const util = this.getShapeUtil(shape)
+						if (shape && util.canCrop(shape)) {
+							this.updateCurrentPageState({ croppingShapeId: id })
+						}
 					}
 				},
 				{ history: 'ignore' }
@@ -2737,52 +2673,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.getCamera().z
 	}
 
-	private _debouncedZoomLevel = atom('debounced zoom level', 1)
-
-	/**
-	 * Get the debounced zoom level. When the camera is moving, this returns the zoom level
-	 * from when the camera started moving rather than the current zoom level. This can be
-	 * used to avoid expensive re-renders during camera movements.
-	 *
-	 * This behavior is controlled by the `useDebouncedZoom` option. When `useDebouncedZoom`
-	 * is `false`, this method always returns the current zoom level.
-	 *
-	 * @public
-	 */
-	@computed getDebouncedZoomLevel() {
-		if (this.options.debouncedZoom) {
-			if (this.getCameraState() === 'idle') {
-				return this.getZoomLevel()
-			} else {
-				return this._debouncedZoomLevel.get()
-			}
-		}
-
-		return this.getZoomLevel()
-	}
-
-	@computed private _getAboveDebouncedZoomThreshold() {
-		return this.getCurrentPageShapeIds().size > this.options.debouncedZoomThreshold
-	}
-
-	/**
-	 * Get the efficient zoom level. This returns the current zoom level if there are less than 300 shapes on the page,
-	 * otherwise it returns the debounced zoom level. This can be used to avoid expensive re-renders during camera movements.
-	 *
-	 * @public
-	 * @example
-	 * ```ts
-	 * editor.getEfficientZoomLevel()
-	 * ```
-	 *
-	 * @public
-	 */
-	@computed getEfficientZoomLevel() {
-		return this._getAboveDebouncedZoomThreshold()
-			? this.getDebouncedZoomLevel()
-			: this.getZoomLevel()
-	}
-
 	/**
 	 * Get the camera's initial or reset zoom level.
 	 *
@@ -3109,8 +2999,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 			// Dispatch a new pointer move because the pointer's page will have changed
 			// (its screen position will compute to a new page position given the new camera position)
-			const currentScreenPoint = this.inputs.getCurrentScreenPoint()
-			const currentPagePoint = this.inputs.getCurrentPagePoint()
+			const { currentScreenPoint, currentPagePoint } = this.inputs
 
 			// compare the next page point (derived from the current camera) to the current page point
 			if (
@@ -3274,7 +3163,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * ```ts
 	 * editor.zoomIn()
 	 * editor.zoomIn(editor.getViewportScreenCenter(), { animation: { duration: 200 } })
-	 * editor.zoomIn(editor.inputs.getCurrentScreenPoint(), { animation: { duration: 200 } })
+	 * editor.zoomIn(editor.inputs.currentScreenPoint, { animation: { duration: 200 } })
 	 * ```
 	 *
 	 * @param point - The screen point to zoom in on. Defaults to the screen center
@@ -3319,7 +3208,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * ```ts
 	 * editor.zoomOut()
 	 * editor.zoomOut(editor.getViewportScreenCenter(), { animation: { duration: 120 } })
-	 * editor.zoomOut(editor.inputs.getCurrentScreenPoint(), { animation: { duration: 120 } })
+	 * editor.zoomOut(editor.inputs.currentScreenPoint, { animation: { duration: 120 } })
 	 * ```
 	 *
 	 * @param point - The point to zoom out on. Defaults to the viewport screen center.
@@ -3376,17 +3265,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		const selectionPageBounds = this.getSelectionPageBounds()
 		if (selectionPageBounds) {
-			const currentZoom = this.getZoomLevel()
-			// If already at 100%, zoom to fit the selection in the viewport
-			// Otherwise, zoom to 100% centered on the selection
-			if (Math.abs(currentZoom - 1) < 0.01) {
-				this.zoomToBounds(selectionPageBounds, opts)
-			} else {
-				this.zoomToBounds(selectionPageBounds, {
-					targetZoom: 1,
-					...opts,
-				})
-			}
+			this.zoomToBounds(selectionPageBounds, {
+				targetZoom: Math.max(1, this.getZoomLevel()),
+				...opts,
+			})
 		}
 		return this
 	}
@@ -3443,8 +3325,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		const viewportScreenBounds = this.getViewportScreenBounds()
 
-		const inset =
-			opts?.inset ?? Math.min(this.options.zoomToFitPadding, viewportScreenBounds.width * 0.28)
+		const inset = opts?.inset ?? Math.min(ZOOM_TO_FIT_PADDING, viewportScreenBounds.width * 0.28)
 
 		const baseZoom = this.getBaseZoom()
 		const zoomMin = cameraOptions.zoomSteps[0]
@@ -3754,23 +3635,22 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (_willSetInitialBounds) {
 			// If we have just received the initial bounds, don't center the camera.
 			this.updateInstanceState({ screenBounds: screenBounds.toJson(), insets })
-			this.emit('resize', screenBounds.toJson())
 			this.setCamera(this.getCamera())
 		} else {
 			if (center && !this.getInstanceState().followingUserId) {
 				// Get the page center before the change, make the change, and restore it
 				const before = this.getViewportPageBounds().center
 				this.updateInstanceState({ screenBounds: screenBounds.toJson(), insets })
-				this.emit('resize', screenBounds.toJson())
 				this.centerOnPoint(before)
 			} else {
 				// Otherwise,
 				this.updateInstanceState({ screenBounds: screenBounds.toJson(), insets })
-				this.emit('resize', screenBounds.toJson())
 				this._setCamera(Vec.From({ ...this.getCamera() }))
 			}
 		}
 
+		this._tickCameraState()
+
 		return this
 	}
 
@@ -4176,19 +4056,18 @@ export class Editor extends EventEmitter<TLEventMap> {
 	// box just for rendering, and we only update after the camera stops moving.
 	private _cameraState = atom('camera state', 'idle' as 'idle' | 'moving')
 	private _cameraStateTimeoutRemaining = 0
-	private _decayCameraStateTimeout(elapsed: number) {
+	_decayCameraStateTimeout(elapsed: number) {
 		this._cameraStateTimeoutRemaining -= elapsed
 		if (this._cameraStateTimeoutRemaining > 0) return
 		this.off('tick', this._decayCameraStateTimeout)
 		this._cameraState.set('idle')
 	}
-	private _tickCameraState() {
+	_tickCameraState() {
 		// always reset the timeout
 		this._cameraStateTimeoutRemaining = this.options.cameraMovingTimeoutMs
 		// If the state is idle, then start the tick
 		if (this._cameraState.__unsafe__getWithoutCapture() !== 'idle') return
 		this._cameraState.set('moving')
-		this._debouncedZoomLevel.set(unsafe__withoutCapture(() => this.getCamera().z))
 		this.on('tick', this._decayCameraStateTimeout)
 	}
 
@@ -5248,10 +5127,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 			// Check labels first
 			if (
-				this.isShapeOfType(shape, 'frame') ||
-				((this.isShapeOfType(shape, 'note') ||
-					this.isShapeOfType(shape, 'arrow') ||
-					(this.isShapeOfType(shape, 'geo') && shape.props.fill === 'none')) &&
+				this.isShapeOfType<TLFrameShape>(shape, 'frame') ||
+				((this.isShapeOfType<TLNoteShape>(shape, 'note') ||
+					this.isShapeOfType<TLArrowShape>(shape, 'arrow') ||
+					(this.isShapeOfType<TLGeoShape>(shape, 'geo') && shape.props.fill === 'none')) &&
 					this.getShapeUtil(shape).getText(shape)?.trim())
 			) {
 				for (const childGeometry of (geometry as Group2d).children) {
@@ -5261,7 +5140,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				}
 			}
 
-			if (this.isShapeOfType(shape, 'frame')) {
+			if (this.isShapeOfType<TLFrameShape>(shape, 'frame')) {
 				// On the rare case that we've hit a frame (not its label), test again hitInside to be forced true;
 				// this prevents clicks from passing through the body of a frame to shapes behind it.
 
@@ -5542,7 +5421,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @example
 	 * ```ts
-	 * const isArrowShape = isShapeOfType(someShape, 'arrow')
+	 * const isArrowShape = isShapeOfType<TLArrowShape>(someShape, 'arrow')
 	 * ```
 	 *
 	 * @param util - the TLShapeUtil constructor to test against
@@ -5550,16 +5429,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	isShapeOfType<K extends TLShape['type']>(
-		shape: TLShape,
-		type: K
-	): shape is Extract<TLShape, { type: K }>
-	isShapeOfType<T extends TLShape>(
-		shape: TLShape,
+	isShapeOfType<T extends TLUnknownShape>(shape: TLUnknownShape, type: T['type']): shape is T
+	isShapeOfType<T extends TLUnknownShape>(
+		shapeId: TLUnknownShape['id'],
+		type: T['type']
+	): shapeId is T['id']
+	isShapeOfType<T extends TLUnknownShape>(
+		arg: TLUnknownShape | TLUnknownShape['id'],
 		type: T['type']
-	): shape is Extract<TLShape, { type: T['type'] }>
-	isShapeOfType<T extends TLShape = TLShape>(shapeId: TLShapeId, type: T['type']): boolean
-	isShapeOfType(arg: TLShape | TLShapeId, type: TLShape['type']) {
+	) {
 		const shape = typeof arg === 'string' ? this.getShape(arg) : arg
 		if (!shape) return false
 		return shape.type === type
@@ -5955,7 +5833,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		while (node) {
 			if (
-				this.isShapeOfType(node, 'group') &&
+				this.isShapeOfType<TLGroupShape>(node, 'group') &&
 				focusedGroup?.id !== node.id &&
 				!this.hasAncestor(focusedGroup, node.id) &&
 				(filter?.(node) ?? true)
@@ -5997,15 +5875,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * Get all bindings of a certain type _from_ a particular shape. These are the bindings whose
 	 * `fromId` matched the shape's ID.
 	 */
-	getBindingsFromShape<K extends TLBinding['type']>(
-		shape: TLShape | TLShapeId,
-		type: K
-	): Extract<TLBinding, { type: K }>[]
-	getBindingsFromShape<Binding extends TLBinding = TLBinding>(
-		shape: TLShape | TLShapeId,
-		type: Binding['type']
-	): Binding[]
-	getBindingsFromShape<Binding extends TLBinding = TLBinding>(
+	getBindingsFromShape<Binding extends TLUnknownBinding = TLBinding>(
 		shape: TLShape | TLShapeId,
 		type: Binding['type']
 	): Binding[] {
@@ -6019,15 +5889,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * Get all bindings of a certain type _to_ a particular shape. These are the bindings whose
 	 * `toId` matches the shape's ID.
 	 */
-	getBindingsToShape<K extends TLBinding['type']>(
-		shape: TLShape | TLShapeId,
-		type: K
-	): Extract<TLBinding, { type: K }>[]
-	getBindingsToShape<Binding extends TLBinding = TLBinding>(
-		shape: TLShape | TLShapeId,
-		type: Binding['type']
-	): Binding[]
-	getBindingsToShape<Binding extends TLBinding = TLBinding>(
+	getBindingsToShape<Binding extends TLUnknownBinding = TLBinding>(
 		shape: TLShape | TLShapeId,
 		type: Binding['type']
 	): Binding[] {
@@ -6041,15 +5903,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * Get all bindings involving a particular shape. This includes bindings where the shape is the
 	 * `fromId` or `toId`. If a type is provided, only bindings of that type are returned.
 	 */
-	getBindingsInvolvingShape<K extends TLBinding['type']>(
-		shape: TLShape | TLShapeId,
-		type: K
-	): Extract<TLBinding, { type: K }>[]
-	getBindingsInvolvingShape<Binding extends TLBinding = TLBinding>(
-		shape: TLShape | TLShapeId,
-		type?: Binding['type']
-	): Binding[]
-	getBindingsInvolvingShape<Binding extends TLBinding = TLBinding>(
+	getBindingsInvolvingShape<Binding extends TLUnknownBinding = TLBinding>(
 		shape: TLShape | TLShapeId,
 		type?: Binding['type']
 	): Binding[] {
@@ -6071,7 +5925,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			if (!fromShape || !toShape) continue
 			if (!this.canBindShapes({ fromShape, toShape, binding: partial })) continue
 
-			const util = this.getBindingUtil(partial.type)
+			const util = this.getBindingUtil<TLUnknownBinding>(partial.type)
 			const defaultProps = util.getDefaultProps()
 			const binding = this.store.schema.types.binding.create({
 				...partial,
@@ -6176,7 +6030,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const toShapeType = typeof toShape === 'string' ? toShape : toShape.type
 		const bindingType = typeof binding === 'string' ? binding : binding.type
 
-		const canBindOpts = { fromShapeType, toShapeType, bindingType } as const
+		const canBindOpts = { fromShapeType, toShapeType, bindingType }
 
 		if (fromShapeType === toShapeType) {
 			return this.getShapeUtil(fromShapeType).canBind(canBindOpts)
@@ -6717,7 +6571,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const shapesToFlipFirstPass = compact(ids.map((id) => this.getShape(id)))
 
 		for (const shape of shapesToFlipFirstPass) {
-			if (this.isShapeOfType(shape, 'group')) {
+			if (this.isShapeOfType<TLGroupShape>(shape, 'group')) {
 				const childrenOfGroups = compact(
 					this.getSortedChildIdsForParent(shape.id).map((id) => this.getShape(id))
 				)
@@ -7774,14 +7628,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 		// then if the shape is flipped in one axis only, we need to apply an extra rotation
 		// to make sure the shape is mirrored correctly
 		if (Math.sign(scale.x) * Math.sign(scale.y) < 0) {
-			// We need to compute the new local rotation that will result in the negated page rotation.
-			// For a shape with local rotation `localRot` and parent page rotation `parentRot`:
-			// - pageRot = parentRot + localRot
-			// - newPageRot = -pageRot (we want to negate the page rotation)
-			// - newPageRot = parentRot + newLocalRot (parent hasn't changed)
-			// - Therefore: newLocalRot = -pageRot - parentRot = -(parentRot + localRot) - parentRot = -localRot - 2*parentRot
-			const parentRotation = this.getShapeParentTransform(id).rotation()
-			const rotation = -options.initialShape.rotation - 2 * parentRotation
+			let { rotation } = Mat.Decompose(options.initialPageTransform)
+			rotation -= 2 * rotation
 			this.updateShapes([{ id, type, rotation }])
 		}
 
@@ -7801,13 +7649,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 		)
 
 		// now calculate how far away the shape is from where it needs to be
+		const pageBounds = this.getShapePageBounds(id)!
 		const pageTransform = this.getShapePageTransform(id)!
-		// We need to use the local bounds center transformed to page space, not the axis-aligned
-		// page bounds center. This is because the page bounds are axis-aligned and their center
-		// changes when the rotation changes, but we want to use the same reference point as
-		// preScaleShapePageCenter (which used initialBounds.center transformed by the page transform).
-		const currentLocalBounds = this.getShapeGeometry(id).bounds
-		const currentPageCenter = Mat.applyToPoint(pageTransform, currentLocalBounds.center)
+		const currentPageCenter = pageBounds.center
 		const shapePageTransformOrigin = pageTransform.point()
 		if (!currentPageCenter || !shapePageTransformOrigin) return this
 		const pageDelta = Vec.Sub(postScaleShapePageCenter, currentPageCenter)
@@ -7848,7 +7692,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	canCreateShape(shape: OptionalKeys<TLShapePartial<TLShape>, 'id'> | TLShape['id']): boolean {
+	canCreateShape<T extends TLUnknownShape>(
+		shape: OptionalKeys<TLShapePartial<T>, 'id'> | T['id']
+	): boolean {
 		return this.canCreateShapes([shape])
 	}
 
@@ -7859,8 +7705,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	canCreateShapes(
-		shapes: (TLShape['id'] | OptionalKeys<TLShapePartial<TLShape>, 'id'>)[]
+	canCreateShapes<T extends TLUnknownShape>(
+		shapes: (T['id'] | OptionalKeys<TLShapePartial<T>, 'id'>)[]
 	): boolean {
 		return shapes.length + this.getCurrentPageShapeIds().size <= this.options.maxShapesPerPage
 	}
@@ -7878,7 +7724,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	createShape<TShape extends TLShape>(shape: TLCreateShapePartial<TShape>): this {
+	createShape<T extends TLUnknownShape>(shape: OptionalKeys<TLShapePartial<T>, 'id'>): this {
 		this.createShapes([shape])
 		return this
 	}
@@ -7896,7 +7742,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	createShapes<TShape extends TLShape = TLShape>(shapes: TLCreateShapePartial<TShape>[]): this {
+	createShapes<T extends TLUnknownShape>(shapes: OptionalKeys<TLShapePartial<T>, 'id'>[]): this {
 		if (!Array.isArray(shapes)) {
 			throw Error('Editor.createShapes: must provide an array of shapes or shape partials')
 		}
@@ -8255,12 +8101,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			)
 		)
 		const sortedShapeIds = shapesToGroup.sort(sortByIndex).map((s) => s.id)
-		const childBounds = compact(shapesToGroup.map((shape) => this.getShapePageBounds(shape)))
-		const pageBounds = Box.Common(childBounds)
-
-		if (!pageBounds.isValid()) {
-			throw Error(`Editor.groupShapes: group bounds are invalid (NaN).`)
-		}
+		const pageBounds = Box.Common(compact(shapesToGroup.map((id) => this.getShapePageBounds(id))))
 
 		const { x, y } = pageBounds.point
 
@@ -8282,7 +8123,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const highestIndex = shapesWithRootParent[shapesWithRootParent.length - 1]?.index
 
 		this.run(() => {
-			this.createShapes([
+			this.createShapes<TLGroupShape>([
 				{
 					id: groupId,
 					type: 'group',
@@ -8352,7 +8193,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const groups: TLGroupShape[] = []
 
 		shapesToUngroup.forEach((shape) => {
-			if (this.isShapeOfType(shape, 'group')) {
+			if (this.isShapeOfType<TLGroupShape>(shape, 'group')) {
 				groups.push(shape)
 			} else {
 				idsToSelect.add(shape.id)
@@ -8398,7 +8239,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	updateShape<T extends TLShape = TLShape>(partial: TLShapePartial<T> | null | undefined) {
+	updateShape<T extends TLUnknownShape>(partial: TLShapePartial<T> | null | undefined) {
 		this.updateShapes([partial])
 		return this
 	}
@@ -8415,7 +8256,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	updateShapes<T extends TLShape>(partials: (TLShapePartial<T> | null | undefined)[]) {
+	updateShapes<T extends TLUnknownShape>(partials: (TLShapePartial<T> | null | undefined)[]) {
 		const compactedPartials: TLShapePartial<T>[] = Array(partials.length)
 
 		for (let i = 0, n = partials.length; i < n; i++) {
@@ -8567,7 +8408,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @internal
 	 */
 	private _extractSharedStyles(shape: TLShape, sharedStyleMap: SharedStyleMap) {
-		if (this.isShapeOfType(shape, 'group')) {
+		if (this.isShapeOfType<TLGroupShape>(shape, 'group')) {
 			// For groups, ignore the styles of the group shape and instead include the styles of the
 			// group's children. These are the shapes that would have their styles changed if the
 			// user called `setStyle` on the current selection.
@@ -8687,7 +8528,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				// For groups, ignore the opacity of the group shape and instead include
 				// the opacity of the group's children. These are the shapes that would have
 				// their opacity changed if the user called `setOpacity` on the current selection.
-				if (this.isShapeOfType(shape, 'group')) {
+				if (this.isShapeOfType<TLGroupShape>(shape, 'group')) {
 					for (const childId of this.getSortedChildIdsForParent(shape.id)) {
 						addShape(childId)
 					}
@@ -8748,7 +8589,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			// We can have many deep levels of grouped shape
 			// Making a recursive function to look through all the levels
 			const addShapeById = (shape: TLShape) => {
-				if (this.isShapeOfType(shape, 'group')) {
+				if (this.isShapeOfType<TLGroupShape>(shape, 'group')) {
 					const childIds = this.getSortedChildIdsForParent(shape)
 					for (const childId of childIds) {
 						addShapeById(this.getShape(childId)!)
@@ -8832,7 +8673,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			// We can have many deep levels of grouped shape
 			// Making a recursive function to look through all the levels
 			const addShapeById = (shape: TLShape) => {
-				if (this.isShapeOfType(shape, 'group')) {
+				if (this.isShapeOfType<TLGroupShape>(shape, 'group')) {
 					const childIds = this.getSortedChildIdsForParent(shape.id)
 					for (const childId of childIds) {
 						addShapeById(this.getShape(childId)!)
@@ -9257,7 +9098,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		for (const shape of this.getSelectedShapes()) {
 			if (lowestDepth === 0) break
 
-			const isFrame = this.isShapeOfType(shape, 'frame')
+			const isFrame = this.isShapeOfType<TLFrameShape>(shape, 'frame')
 			const ancestors = this.getShapeAncestors(shape)
 			if (isFrame) ancestors.push(shape)
 
@@ -9285,30 +9126,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 			}
 		}
 
-		if (point) {
-			const shapesById = new Map<TLShapeId, TLShape>(shapes.map((shape) => [shape.id, shape]))
-			const rootShapesFromContent = compact(rootShapeIds.map((id) => shapesById.get(id)))
-			if (rootShapesFromContent.length > 0) {
-				const targetParent = this.getShapeAtPoint(point, {
-					hitInside: true,
-					hitFrameInside: true,
-					hitLocked: true,
-					filter: (shape) => {
-						const util = this.getShapeUtil(shape)
-						if (!util.canReceiveNewChildrenOfType) return false
-						return rootShapesFromContent.every((rootShape) =>
-							util.canReceiveNewChildrenOfType!(shape, rootShape.type)
-						)
-					},
-				})
-
-				// When pasting at a specific point (e.g. paste-at-cursor) prefer the
-				// parent under the pointer so that we don't keep using the original
-				// selection's parent (which can keep shapes clipped inside frames).
-				pasteParentId = targetParent ? targetParent.id : currentPageId
-			}
-		}
-
 		let isDuplicating = false
 
 		if (!isPageId(pasteParentId)) {
@@ -9320,8 +9137,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 					if (rootShapeIds.length === 1) {
 						const rootShape = shapes.find((s) => s.id === rootShapeIds[0])!
 						if (
-							this.isShapeOfType(parent, 'frame') &&
-							this.isShapeOfType(rootShape, 'frame') &&
+							this.isShapeOfType<TLFrameShape>(parent, 'frame') &&
+							this.isShapeOfType<TLFrameShape>(rootShape, 'frame') &&
 							rootShape.props.w === parent?.props.w &&
 							rootShape.props.h === parent?.props.h
 						) {
@@ -9496,11 +9313,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 				const onlyRoot = rootShapes[0] as TLFrameShape
 				// If the old bounds are in the viewport...
 				// todo: replace frame references with shapes that can accept children
-				if (this.isShapeOfType(onlyRoot, 'frame')) {
+				if (this.isShapeOfType<TLFrameShape>(onlyRoot, 'frame')) {
 					while (
 						this.getShapesAtPoint(point).some(
 							(shape) =>
-								this.isShapeOfType(shape, 'frame') &&
+								this.isShapeOfType<TLFrameShape>(shape, 'frame') &&
 								shape.props.w === onlyRoot.props.w &&
 								shape.props.h === onlyRoot.props.h
 						)
@@ -9646,6 +9463,126 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 	/* --------------------- Events --------------------- */
 
+	/**
+	 * The app's current input state.
+	 *
+	 * @public
+	 */
+	inputs = {
+		/** The most recent pointer down's position in the current page space. */
+		originPagePoint: new Vec(),
+		/** The most recent pointer down's position in screen space. */
+		originScreenPoint: new Vec(),
+		/** The previous pointer position in the current page space. */
+		previousPagePoint: new Vec(),
+		/** The previous pointer position in screen space. */
+		previousScreenPoint: new Vec(),
+		/** The most recent pointer position in the current page space. */
+		currentPagePoint: new Vec(),
+		/** The most recent pointer position in screen space. */
+		currentScreenPoint: new Vec(),
+		/** A set containing the currently pressed keys. */
+		keys: new Set<string>(),
+		/** A set containing the currently pressed buttons. */
+		buttons: new Set<number>(),
+		/** Whether the input is from a pe. */
+		isPen: false,
+		/** Whether the shift key is currently pressed. */
+		shiftKey: false,
+		/** Whether the meta key is currently pressed. */
+		metaKey: false,
+		/** Whether the control or command key is currently pressed. */
+		ctrlKey: false,
+		/** Whether the alt or option key is currently pressed. */
+		altKey: false,
+		/** Whether the user is dragging. */
+		isDragging: false,
+		/** Whether the user is pointing. */
+		isPointing: false,
+		/** Whether the user is pinching. */
+		isPinching: false,
+		/** Whether the user is editing. */
+		isEditing: false,
+		/** Whether the user is panning. */
+		isPanning: false,
+		/** Whether the user is spacebar panning. */
+		isSpacebarPanning: false,
+		/** Velocity of mouse pointer, in pixels per millisecond */
+		pointerVelocity: new Vec(),
+	}
+
+	/**
+	 * Update the input points from a pointer, pinch, or wheel event.
+	 *
+	 * @param info - The event info.
+	 */
+	private _updateInputsFromEvent(
+		info: TLPointerEventInfo | TLPinchEventInfo | TLWheelEventInfo
+	): void {
+		const {
+			pointerVelocity,
+			previousScreenPoint,
+			previousPagePoint,
+			currentScreenPoint,
+			currentPagePoint,
+			originScreenPoint,
+			originPagePoint,
+		} = this.inputs
+
+		const { screenBounds } = this.store.unsafeGetWithoutCapture(TLINSTANCE_ID)!
+		const { x: cx, y: cy, z: cz } = unsafe__withoutCapture(() => this.getCamera())
+
+		const sx = info.point.x - screenBounds.x
+		const sy = info.point.y - screenBounds.y
+		const sz = info.point.z ?? 0.5
+
+		previousScreenPoint.setTo(currentScreenPoint)
+		previousPagePoint.setTo(currentPagePoint)
+
+		// The "screen bounds" is relative to the user's actual screen.
+		// The "screen point" is relative to the "screen bounds";
+		// it will be 0,0 when its actual screen position is equal
+		// to screenBounds.point. This is confusing!
+		currentScreenPoint.set(sx, sy)
+		const nx = sx / cz - cx
+		const ny = sy / cz - cy
+		if (isFinite(nx) && isFinite(ny)) {
+			currentPagePoint.set(nx, ny, sz)
+		}
+
+		this.inputs.isPen = info.type === 'pointer' && info.isPen
+
+		// Reset velocity on pointer down, or when a pinch starts or ends
+		if (info.name === 'pointer_down' || this.inputs.isPinching) {
+			pointerVelocity.set(0, 0)
+			originScreenPoint.setTo(currentScreenPoint)
+			originPagePoint.setTo(currentPagePoint)
+		}
+
+		// todo: We only have to do this if there are multiple users in the document
+		this.run(
+			() => {
+				this.store.put([
+					{
+						id: TLPOINTER_ID,
+						typeName: 'pointer',
+						x: currentPagePoint.x,
+						y: currentPagePoint.y,
+						lastActivityTimestamp:
+							// If our pointer moved only because we're following some other user, then don't
+							// update our last activity timestamp; otherwise, update it to the current timestamp.
+							info.type === 'pointer' && info.pointerId === INTERNAL_POINTER_IDS.CAMERA_MOVE
+								? (this.store.unsafeGetWithoutCapture(TLPOINTER_ID)?.lastActivityTimestamp ??
+									this._tickManager.now)
+								: this._tickManager.now,
+						meta: {},
+					},
+				])
+			},
+			{ history: 'ignore' }
+		)
+	}
+
 	/**
 	 * Dispatch a cancel event.
 	 *
@@ -9715,22 +9652,19 @@ export class Editor extends EventEmitter<TLEventMap> {
 				// weird but true: what `inputs` calls screen-space is actually viewport space. so
 				// we need to convert back into true screen space first. we should fix this...
 				Vec.Add(
-					this.inputs.getCurrentScreenPoint(),
+					this.inputs.currentScreenPoint,
 					this.store.unsafeGetWithoutCapture(TLINSTANCE_ID)!.screenBounds
 				),
 			pointerId: options?.pointerId ?? 0,
 			button: options?.button ?? 0,
-			isPen: options?.isPen ?? this.inputs.getIsPen(),
-			shiftKey: options?.shiftKey ?? this.inputs.getShiftKey(),
-			altKey: options?.altKey ?? this.inputs.getAltKey(),
-			ctrlKey: options?.ctrlKey ?? this.inputs.getCtrlKey(),
-			metaKey: options?.metaKey ?? this.inputs.getMetaKey(),
-			accelKey: false,
+			isPen: options?.isPen ?? this.inputs.isPen,
+			shiftKey: options?.shiftKey ?? this.inputs.shiftKey,
+			altKey: options?.altKey ?? this.inputs.altKey,
+			ctrlKey: options?.ctrlKey ?? this.inputs.ctrlKey,
+			metaKey: options?.metaKey ?? this.inputs.metaKey,
+			accelKey: options?.accelKey ?? isAccelKey(this.inputs),
 		}
 
-		// needs to be calculated second
-		event.accelKey = options?.accelKey ?? this.inputs.getAccelKey()
-
 		if (options?.immediate) {
 			this._flushEventForTick(event)
 		} else {
@@ -10103,16 +10037,16 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/** @internal */
 	@bind
 	_setShiftKeyTimeout() {
-		this.inputs.setShiftKey(false)
+		this.inputs.shiftKey = false
 		this.dispatch({
 			type: 'keyboard',
 			name: 'key_up',
 			key: 'Shift',
-			shiftKey: this.inputs.getShiftKey(),
-			ctrlKey: this.inputs.getCtrlKey(),
-			altKey: this.inputs.getAltKey(),
-			metaKey: this.inputs.getMetaKey(),
-			accelKey: this.inputs.getAccelKey(),
+			shiftKey: this.inputs.shiftKey,
+			ctrlKey: this.inputs.ctrlKey,
+			altKey: this.inputs.altKey,
+			metaKey: this.inputs.metaKey,
+			accelKey: isAccelKey(this.inputs),
 			code: 'ShiftLeft',
 		})
 	}
@@ -10123,16 +10057,16 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/** @internal */
 	@bind
 	_setAltKeyTimeout() {
-		this.inputs.setAltKey(false)
+		this.inputs.altKey = false
 		this.dispatch({
 			type: 'keyboard',
 			name: 'key_up',
 			key: 'Alt',
-			shiftKey: this.inputs.getShiftKey(),
-			ctrlKey: this.inputs.getCtrlKey(),
-			altKey: this.inputs.getAltKey(),
-			metaKey: this.inputs.getMetaKey(),
-			accelKey: this.inputs.getAccelKey(),
+			shiftKey: this.inputs.shiftKey,
+			ctrlKey: this.inputs.ctrlKey,
+			altKey: this.inputs.altKey,
+			metaKey: this.inputs.metaKey,
+			accelKey: isAccelKey(this.inputs),
 			code: 'AltLeft',
 		})
 	}
@@ -10143,16 +10077,16 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/** @internal */
 	@bind
 	_setCtrlKeyTimeout() {
-		this.inputs.setCtrlKey(false)
+		this.inputs.ctrlKey = false
 		this.dispatch({
 			type: 'keyboard',
 			name: 'key_up',
 			key: 'Ctrl',
-			shiftKey: this.inputs.getShiftKey(),
-			ctrlKey: this.inputs.getCtrlKey(),
-			altKey: this.inputs.getAltKey(),
-			metaKey: this.inputs.getMetaKey(),
-			accelKey: this.inputs.getAccelKey(),
+			shiftKey: this.inputs.shiftKey,
+			ctrlKey: this.inputs.ctrlKey,
+			altKey: this.inputs.altKey,
+			metaKey: this.inputs.metaKey,
+			accelKey: isAccelKey(this.inputs),
 			code: 'ControlLeft',
 		})
 	}
@@ -10163,16 +10097,16 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/** @internal */
 	@bind
 	_setMetaKeyTimeout() {
-		this.inputs.setMetaKey(false)
+		this.inputs.metaKey = false
 		this.dispatch({
 			type: 'keyboard',
 			name: 'key_up',
 			key: 'Meta',
-			shiftKey: this.inputs.getShiftKey(),
-			ctrlKey: this.inputs.getCtrlKey(),
-			altKey: this.inputs.getAltKey(),
-			metaKey: this.inputs.getMetaKey(),
-			accelKey: this.inputs.getAccelKey(),
+			shiftKey: this.inputs.shiftKey,
+			ctrlKey: this.inputs.ctrlKey,
+			altKey: this.inputs.altKey,
+			metaKey: this.inputs.metaKey,
+			accelKey: isAccelKey(this.inputs),
 			code: 'MetaLeft',
 		})
 	}
@@ -10180,6 +10114,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/** @internal */
 	private _restoreToolId = 'select'
 
+	/** @internal */
+	private _pinchStart = 1
+
 	/** @internal */
 	private _didPinch = false
 
@@ -10286,54 +10223,55 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (info.type === 'misc') {
 			// stop panning if the interaction is cancelled or completed
 			if (info.name === 'cancel' || info.name === 'complete') {
-				this.inputs.setIsDragging(false)
+				this.inputs.isDragging = false
 
-				if (this.inputs.getIsPanning()) {
-					this.inputs.setIsPanning(false)
-					this.inputs.setIsSpacebarPanning(false)
+				if (this.inputs.isPanning) {
+					this.inputs.isPanning = false
+					this.inputs.isSpacebarPanning = false
 					this.setCursor({ type: this._prevCursor, rotation: 0 })
 				}
 			}
 
 			this.root.handleEvent(info)
-			this.emit('event', info)
 			return
 		}
 
 		if (info.shiftKey) {
 			clearTimeout(this._shiftKeyTimeout)
 			this._shiftKeyTimeout = -1
-			inputs.setShiftKey(true)
-		} else if (!info.shiftKey && inputs.getShiftKey() && this._shiftKeyTimeout === -1) {
+			inputs.shiftKey = true
+		} else if (!info.shiftKey && inputs.shiftKey && this._shiftKeyTimeout === -1) {
 			this._shiftKeyTimeout = this.timers.setTimeout(this._setShiftKeyTimeout, 150)
 		}
 
 		if (info.altKey) {
 			clearTimeout(this._altKeyTimeout)
 			this._altKeyTimeout = -1
-			inputs.setAltKey(true)
-		} else if (!info.altKey && inputs.getAltKey() && this._altKeyTimeout === -1) {
+			inputs.altKey = true
+		} else if (!info.altKey && inputs.altKey && this._altKeyTimeout === -1) {
 			this._altKeyTimeout = this.timers.setTimeout(this._setAltKeyTimeout, 150)
 		}
 
 		if (info.ctrlKey) {
 			clearTimeout(this._ctrlKeyTimeout)
 			this._ctrlKeyTimeout = -1
-			inputs.setCtrlKey(true)
-		} else if (!info.ctrlKey && inputs.getCtrlKey() && this._ctrlKeyTimeout === -1) {
+			inputs.ctrlKey = true
+		} else if (!info.ctrlKey && inputs.ctrlKey && this._ctrlKeyTimeout === -1) {
 			this._ctrlKeyTimeout = this.timers.setTimeout(this._setCtrlKeyTimeout, 150)
 		}
 
 		if (info.metaKey) {
 			clearTimeout(this._metaKeyTimeout)
 			this._metaKeyTimeout = -1
-			inputs.setMetaKey(true)
-		} else if (!info.metaKey && inputs.getMetaKey() && this._metaKeyTimeout === -1) {
+			inputs.metaKey = true
+		} else if (!info.metaKey && inputs.metaKey && this._metaKeyTimeout === -1) {
 			this._metaKeyTimeout = this.timers.setTimeout(this._setMetaKeyTimeout, 150)
 		}
 
-		if (!inputs.getIsPointing()) {
-			inputs.setIsDragging(false)
+		const { originPagePoint, currentPagePoint } = inputs
+
+		if (!inputs.isPointing) {
+			inputs.isDragging = false
 		}
 
 		const instanceState = this.store.unsafeGetWithoutCapture(TLINSTANCE_ID)!
@@ -10344,29 +10282,29 @@ export class Editor extends EventEmitter<TLEventMap> {
 			case 'pinch': {
 				if (cameraOptions.isLocked) return
 				clearTimeout(this._longPressTimeout)
-				this.inputs.updateFromEvent(info)
+				this._updateInputsFromEvent(info)
 
 				switch (info.name) {
 					case 'pinch_start': {
-						if (inputs.getIsPinching()) return
+						if (inputs.isPinching) return
 
-						if (!inputs.getIsEditing()) {
+						if (!inputs.isEditing) {
+							this._pinchStart = this.getCamera().z
 							if (!this._selectedShapeIdsAtPointerDown.length) {
 								this._selectedShapeIdsAtPointerDown = [...pageState.selectedShapeIds]
 							}
 
 							this._didPinch = true
 
-							inputs.setIsPinching(true)
+							inputs.isPinching = true
 
 							this.interrupt()
 						}
 
-						this.emit('event', info)
 						return // Stop here!
 					}
 					case 'pinch': {
-						if (!inputs.getIsPinching()) return
+						if (!inputs.isPinching) return
 
 						const {
 							point: { z = 1 },
@@ -10397,14 +10335,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 							{ immediate: true }
 						)
 
-						this.emit('event', info)
 						return // Stop here!
 					}
 					case 'pinch_end': {
-						if (!inputs.getIsPinching()) return this
+						if (!inputs.isPinching) return this
 
 						// Stop pinching
-						inputs.setIsPinching(false)
+						inputs.isPinching = false
 
 						// Stash and clear the shapes that were selected when the pinch started
 						const { _selectedShapeIdsAtPointerDown: shapesToReselect } = this
@@ -10424,7 +10361,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 							}
 						}
 
-						this.emit('event', info)
 						return // Stop here!
 					}
 				}
@@ -10432,7 +10368,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			case 'wheel': {
 				if (cameraOptions.isLocked) return
 
-				this.inputs.updateFromEvent(info)
+				this._updateInputsFromEvent(info)
 
 				const { panSpeed, zoomSpeed } = cameraOptions
 				let wheelBehavior = cameraOptions.wheelBehavior
@@ -10463,7 +10399,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 					switch (behavior) {
 						case 'zoom': {
 							// Zoom in on current screen point using the wheel delta
-							const { x, y } = this.inputs.getCurrentScreenPoint()
+							const { x, y } = this.inputs.currentScreenPoint
 							let delta = dz
 
 							// If we're forcing zoom, then we need to do the wheel normalization math here
@@ -10480,8 +10416,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 								immediate: true,
 							})
 							this.maybeTrackPerformance('Zooming')
-							this.root.handleEvent(info)
-							this.emit('event', info)
 							return
 						}
 						case 'pan': {
@@ -10490,8 +10424,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 								immediate: true,
 							})
 							this.maybeTrackPerformance('Panning')
-							this.root.handleEvent(info)
-							this.emit('event', info)
 							return
 						}
 					}
@@ -10500,9 +10432,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 			}
 			case 'pointer': {
 				// Ignore pointer events while we're pinching
-				if (inputs.getIsPinching()) return
+				if (inputs.isPinching) return
 
-				this.inputs.updateFromEvent(info)
+				this._updateInputsFromEvent(info)
 				const { isPen } = info
 				const { isPenMode } = instanceState
 
@@ -10511,7 +10443,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 						// If we're in pen mode and the input is not a pen type, then stop here
 						if (isPenMode && !isPen) return
 
-						if (!this.inputs.getIsPanning()) {
+						if (!this.inputs.isPanning) {
 							// Start a long press timeout
 							this._longPressTimeout = this.timers.setTimeout(() => {
 								const vsb = this.getViewportScreenBounds()
@@ -10521,7 +10453,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 									// viewport bounds, and will be again when this event is handled...
 									// so we need to counter-adjust from the stored value so that the
 									// new value is set correctly.
-									point: this.inputs.getOriginScreenPoint().clone().addXY(vsb.x, vsb.y),
+									point: this.inputs.originScreenPoint.clone().addXY(vsb.x, vsb.y),
 									name: 'long_press',
 								})
 							}, this.options.longPressDurationMs)
@@ -10538,8 +10470,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 						inputs.buttons.add(info.button)
 
 						// Start pointing and stop dragging
-						inputs.setIsPointing(true)
-						inputs.setIsDragging(false)
+						inputs.isPointing = true
+						inputs.isDragging = false
 
 						// If pen mode is off but we're not already in pen mode, turn that on
 						if (!isPenMode && isPen) this.updateInstanceState({ isPenMode: true })
@@ -10551,16 +10483,16 @@ export class Editor extends EventEmitter<TLEventMap> {
 							this.setCurrentTool('eraser')
 						} else if (info.button === MIDDLE_MOUSE_BUTTON) {
 							// Middle mouse pan activates panning unless we're already panning (with spacebar)
-							if (!this.inputs.getIsPanning()) {
+							if (!this.inputs.isPanning) {
 								this._prevCursor = this.getInstanceState().cursor.type
 							}
-							this.inputs.setIsPanning(true)
+							this.inputs.isPanning = true
 							clearTimeout(this._longPressTimeout)
 						}
 
 						// We might be panning because we did a middle mouse click, or because we're holding spacebar and started a regular click
 						// Also stop here, we don't want the state chart to receive the event
-						if (this.inputs.getIsPanning()) {
+						if (this.inputs.isPanning) {
 							this.stopCameraAnimation()
 							this.setCursor({ type: 'grabbing', rotation: 0 })
 							return this
@@ -10575,10 +10507,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 						const { x: cx, y: cy, z: cz } = unsafe__withoutCapture(() => this.getCamera())
 
 						// If we've started panning, then clear any long press timeout
-						if (this.inputs.getIsPanning() && this.inputs.getIsPointing()) {
+						if (this.inputs.isPanning && this.inputs.isPointing) {
 							// Handle spacebar / middle mouse button panning
-							const currentScreenPoint = this.inputs.getCurrentScreenPoint()
-							const previousScreenPoint = this.inputs.getPreviousScreenPoint()
+							const { currentScreenPoint, previousScreenPoint } = this.inputs
 							const offset = Vec.Sub(currentScreenPoint, previousScreenPoint)
 							this.setCamera(new Vec(cx + offset.x / cz, cy + offset.y / cz, cz), {
 								immediate: true,
@@ -10588,25 +10519,24 @@ export class Editor extends EventEmitter<TLEventMap> {
 						}
 
 						if (
-							inputs.getIsPointing() &&
-							!inputs.getIsDragging() &&
-							Vec.Dist2(inputs.getOriginPagePoint(), inputs.getCurrentPagePoint()) *
-								this.getZoomLevel() >
+							inputs.isPointing &&
+							!inputs.isDragging &&
+							Vec.Dist2(originPagePoint, currentPagePoint) * this.getZoomLevel() >
 								(instanceState.isCoarsePointer
 									? this.options.coarseDragDistanceSquared
 									: this.options.dragDistanceSquared) /
 									cz
 						) {
 							// Start dragging
-							inputs.setIsDragging(true)
+							inputs.isDragging = true
 							clearTimeout(this._longPressTimeout)
 						}
 						break
 					}
 					case 'pointer_up': {
 						// Stop dragging / pointing
-						inputs.setIsDragging(false)
-						inputs.setIsPointing(false)
+						inputs.isDragging = false
+						inputs.isPointing = false
 						clearTimeout(this._longPressTimeout)
 
 						// Remove the button from the buttons set
@@ -10623,12 +10553,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 							info.button = 0
 						}
 
-						if (inputs.getIsPanning()) {
+						if (inputs.isPanning) {
 							if (!inputs.keys.has('Space')) {
-								inputs.setIsPanning(false)
-								inputs.setIsSpacebarPanning(false)
+								inputs.isPanning = false
+								inputs.isSpacebarPanning = false
 							}
-							const slideDirection = this.inputs.getPointerVelocity()
+							const slideDirection = this.inputs.pointerVelocity
 							const slideSpeed = Math.min(2, slideDirection.len())
 
 							switch (info.button) {
@@ -10672,49 +10602,44 @@ export class Editor extends EventEmitter<TLEventMap> {
 						// Add the key from the keys set
 						inputs.keys.add(info.code)
 
-						if (this.options.spacebarPanning) {
-							// If the space key is pressed (but meta / control isn't!) activate panning
-							if (info.code === 'Space' && !info.ctrlKey) {
-								if (!this.inputs.getIsPanning()) {
-									this._prevCursor = instanceState.cursor.type
-								}
-
-								this.inputs.setIsPanning(true)
-								this.inputs.setIsSpacebarPanning(true)
-								clearTimeout(this._longPressTimeout)
-								this.setCursor({
-									type: this.inputs.getIsPointing() ? 'grabbing' : 'grab',
-									rotation: 0,
-								})
+						// If the space key is pressed (but meta / control isn't!) activate panning
+						if (info.code === 'Space' && !info.ctrlKey) {
+							if (!this.inputs.isPanning) {
+								this._prevCursor = instanceState.cursor.type
 							}
 
-							if (this.inputs.getIsSpacebarPanning()) {
-								let offset: Vec | undefined
-								switch (info.code) {
-									case 'ArrowUp': {
-										offset = new Vec(0, -1)
-										break
-									}
-									case 'ArrowRight': {
-										offset = new Vec(1, 0)
-										break
-									}
-									case 'ArrowDown': {
-										offset = new Vec(0, 1)
-										break
-									}
-									case 'ArrowLeft': {
-										offset = new Vec(-1, 0)
-										break
-									}
-								}
+							this.inputs.isPanning = true
+							this.inputs.isSpacebarPanning = true
+							clearTimeout(this._longPressTimeout)
+							this.setCursor({ type: this.inputs.isPointing ? 'grabbing' : 'grab', rotation: 0 })
+						}
 
-								if (offset) {
-									const bounds = this.getViewportPageBounds()
-									const next = bounds.clone().translate(offset.mulV({ x: bounds.w, y: bounds.h }))
-									this._animateToViewport(next, { animation: { duration: 320 } })
+						if (this.inputs.isSpacebarPanning) {
+							let offset: Vec | undefined
+							switch (info.code) {
+								case 'ArrowUp': {
+									offset = new Vec(0, -1)
+									break
+								}
+								case 'ArrowRight': {
+									offset = new Vec(1, 0)
+									break
+								}
+								case 'ArrowDown': {
+									offset = new Vec(0, 1)
+									break
+								}
+								case 'ArrowLeft': {
+									offset = new Vec(-1, 0)
+									break
 								}
 							}
+
+							if (offset) {
+								const bounds = this.getViewportPageBounds()
+								const next = bounds.clone().translate(offset.mulV({ x: bounds.w, y: bounds.h }))
+								this._animateToViewport(next, { animation: { duration: 320 } })
+							}
 						}
 
 						break
@@ -10723,17 +10648,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 						// Remove the key from the keys set
 						inputs.keys.delete(info.code)
 
-						if (this.options.spacebarPanning) {
-							// If we've lifted the space key,
-							if (info.code === 'Space') {
-								if (this.inputs.buttons.has(MIDDLE_MOUSE_BUTTON)) {
-									// If we're still middle dragging, continue panning
-								} else {
-									// otherwise, stop panning
-									this.inputs.setIsPanning(false)
-									this.inputs.setIsSpacebarPanning(false)
-									this.setCursor({ type: this._prevCursor, rotation: 0 })
-								}
+						// If we've lifted the space key,
+						if (info.code === 'Space') {
+							if (this.inputs.buttons.has(MIDDLE_MOUSE_BUTTON)) {
+								// If we're still middle dragging, continue panning
+							} else {
+								// otherwise, stop panning
+								this.inputs.isPanning = false
+								this.inputs.isSpacebarPanning = false
+								this.setCursor({ type: this._prevCursor, rotation: 0 })
 							}
 						}
 						break
@@ -10807,10 +10730,7 @@ function alertMaxShapes(editor: Editor, pageId = editor.getCurrentPageId()) {
 
 function applyPartialToRecordWithProps<
 	T extends UnknownRecord & { type: string; props: object; meta: object },
->(
-	prev: T,
-	partial?: T extends T ? Omit<Partial<T>, 'props'> & { props?: Partial<T['props']> } : never
-): T {
+>(prev: T, partial?: Partial<T> & { props?: Partial<T['props']> }): T {
 	if (!partial) return prev
 	let next = null as null | T
 	const entries = Object.entries(partial)