@tldraw/editor 5.4.0-next.ef99ab47e5ce → 5.4.0

package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.test.ts

@@ -113,16 +113,16 @@ describe('UserPreferencesManager', () => {
 			const mockAddEventListener = vi.fn()
 			let changeHandler: (e: MediaQueryListEvent) => void
 
-			mockMatchMedia.mockReturnValue({
+			mockMatchMedia.mockImplementation((query: string) => ({
 				matches: false,
 				addEventListener: (event: string, handler: any) => {
-					if (event === 'change') {
+					if (event === 'change' && query === '(prefers-color-scheme: dark)') {
 						changeHandler = handler
 					}
 					mockAddEventListener(event, handler)
 				},
 				removeEventListener: vi.fn(),
-			})
+			}))
 
 			userPreferencesManager = new UserPreferencesManager(mockUser, 'system')
 
@@ -367,6 +367,67 @@ describe('UserPreferencesManager', () => {
 					defaultUserPreferences.animationSpeed
 				)
 			})
+
+			describe('following the OS reduce-motion setting', () => {
+				let reducedMotionChangeHandler: ((e: MediaQueryListEvent) => void) | undefined
+				let osPrefersReducedMotion: boolean
+
+				const mountWithOs = (prefersReducedMotion: boolean) => {
+					osPrefersReducedMotion = prefersReducedMotion
+					reducedMotionChangeHandler = undefined
+					mockMatchMedia.mockImplementation((query: string) => {
+						const isReducedMotion = query === '(prefers-reduced-motion: reduce)'
+						return {
+							matches: isReducedMotion ? osPrefersReducedMotion : false,
+							addEventListener: (event: string, handler: any) => {
+								if (isReducedMotion && event === 'change') reducedMotionChangeHandler = handler
+							},
+							removeEventListener: vi.fn(),
+						}
+					})
+					userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
+				}
+
+				it('resolves an unset speed to 0 when the OS prefers reduced motion', () => {
+					userPreferencesAtom.set({ ...mockUserPreferences, animationSpeed: null })
+					mountWithOs(true)
+					expect(userPreferencesManager.getAnimationSpeed()).toBe(0)
+				})
+
+				it('tracks a live OS change while the speed is unset', () => {
+					userPreferencesAtom.set({ ...mockUserPreferences, animationSpeed: null })
+					mountWithOs(false)
+					expect(userPreferencesManager.getAnimationSpeed()).toBe(1)
+
+					reducedMotionChangeHandler!({ matches: true } as MediaQueryListEvent)
+					expect(userPreferencesManager.getAnimationSpeed()).toBe(0)
+
+					reducedMotionChangeHandler!({ matches: false } as MediaQueryListEvent)
+					expect(userPreferencesManager.getAnimationSpeed()).toBe(1)
+				})
+
+				it('ignores the OS once the user has set a speed explicitly', () => {
+					userPreferencesAtom.set({ ...mockUserPreferences, animationSpeed: 1 })
+					mountWithOs(true)
+					expect(userPreferencesManager.getAnimationSpeed()).toBe(1)
+
+					userPreferencesAtom.set({ ...mockUserPreferences, animationSpeed: 0 })
+					reducedMotionChangeHandler!({ matches: false } as MediaQueryListEvent)
+					expect(userPreferencesManager.getAnimationSpeed()).toBe(0)
+				})
+
+				it('removes the reduce-motion listener on dispose', () => {
+					const removeEventListener = vi.fn()
+					mockMatchMedia.mockReturnValue({
+						matches: false,
+						addEventListener: vi.fn(),
+						removeEventListener,
+					})
+					userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
+					userPreferencesManager.dispose()
+					expect(removeEventListener).toHaveBeenCalledTimes(2)
+				})
+			})
 		})
 
 		describe('getAreKeyboardShortcutsEnabled', () => {

package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.ts

@@ -7,9 +7,11 @@ import { getGlobalWindow } from '../../../utils/dom'
 /** @public */
 export class UserPreferencesManager {
 	systemColorScheme = atom<'dark' | 'light'>('systemColorScheme', 'light')
+	private readonly systemPrefersReducedMotion = atom('systemPrefersReducedMotion', false)
 	disposables = new Set<() => void>()
 	dispose() {
 		this.disposables.forEach((d) => d())
+		this.disposables.clear()
 	}
 	constructor(
 		private readonly user: TLCurrentUser,
@@ -30,6 +32,16 @@ export class UserPreferencesManager {
 		}
 		darkModeMediaQuery?.addEventListener('change', handleChange)
 		this.disposables.add(() => darkModeMediaQuery?.removeEventListener('change', handleChange))
+
+		const reducedMotionMediaQuery = getGlobalWindow().matchMedia('(prefers-reduced-motion: reduce)')
+		this.systemPrefersReducedMotion.set(!!reducedMotionMediaQuery?.matches)
+		const handleReducedMotionChange = (e: MediaQueryListEvent) => {
+			this.systemPrefersReducedMotion.set(e.matches)
+		}
+		reducedMotionMediaQuery?.addEventListener('change', handleReducedMotionChange)
+		this.disposables.add(() =>
+			reducedMotionMediaQuery?.removeEventListener('change', handleReducedMotionChange)
+		)
 	}
 
 	updateUserPreferences(userPreferences: Partial<TLUserPreferences>) {
@@ -80,7 +92,12 @@ export class UserPreferencesManager {
 	}
 
 	@computed getAnimationSpeed() {
-		return this.user.userPreferences.get().animationSpeed ?? defaultUserPreferences.animationSpeed
+		// Until the user explicitly sets a speed, follow the OS reduce-motion setting live rather
+		// than the value `defaultUserPreferences` captured at module load.
+		return (
+			this.user.userPreferences.get().animationSpeed ??
+			(this.systemPrefersReducedMotion.get() ? 0 : 1)
+		)
 	}
 
 	@computed getAreKeyboardShortcutsEnabled() {

package/src/lib/editor/overlays/OverlayManager.ts

@@ -1,4 +1,5 @@
 import { atom, computed } from '@tldraw/state'
+import { WeakCache } from '@tldraw/utils'
 import { Geometry2d } from '../../primitives/geometry/Geometry2d'
 import { VecLike } from '../../primitives/Vec'
 import type { Editor } from '../Editor'
@@ -119,7 +120,7 @@ export class OverlayManager {
 	// while getActiveOverlayEntries() keeps returning the same overlay
 	// instances; when its reactive deps change, getOverlays() emits fresh
 	// objects and stale entries fall out by GC.
-	private _geometryCache = new WeakMap<TLOverlay, Geometry2d | null>()
+	private _geometryCache = new WeakCache<TLOverlay, Geometry2d | null>()
 
 	/**
 	 * Get hit-test geometry for an overlay, cached by overlay identity. Lets
@@ -130,12 +131,7 @@ export class OverlayManager {
 	 * @public
 	 */
 	getOverlayGeometry(overlay: TLOverlay): Geometry2d | null {
-		const cached = this._geometryCache.get(overlay)
-		if (cached !== undefined) return cached
-		const util = this.getOverlayUtil(overlay)
-		const geometry = util.getGeometry(overlay)
-		this._geometryCache.set(overlay, geometry)
-		return geometry
+		return this._geometryCache.get(overlay, (o) => this.getOverlayUtil(o).getGeometry(o))
 	}
 
 	/**

package/src/lib/editor/overlays/strokeShapeIndicators.ts

@@ -40,7 +40,6 @@ export function strokeShapeIndicators(
 		if (!shape || shape.isLocked) continue
 
 		const pageTransform = editor.getShapePageTransform(shape)
-		if (!pageTransform) continue
 
 		const indicatorPath = indicatorPathCache.get(editor, shape.id)
 		if (!indicatorPath) continue

package/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx

@@ -93,7 +93,11 @@ export abstract class BaseFrameLikeShapeUtil<
 			const currentChildren = compact(
 				editor.getSortedChildIdsForParent(shape).map((id) => editor.getShape(id))
 			)
-			if (previousChildren.every((s) => !currentChildren.find((c) => c.index === s.index))) {
+			if (
+				previousChildren.every(
+					(s) => !currentChildren.find((c) => c.index === initialIndices.get(s.id))
+				)
+			) {
 				canRestoreOriginalIndices = true
 			}
 		}

package/src/lib/editor/shapes/shared/getPerfectDashProps.ts

@@ -87,6 +87,9 @@ export function getPerfectDashProps(
 
 	dashCount = Math.floor(totalLength / dashLength / (2 * ratio))
 	dashCount -= dashCount % snap
+	// A path shorter than one dash period (or of zero length, where the count is NaN) would
+	// otherwise divide by zero below and produce an invalid dasharray; draw a single dash instead
+	if (!(dashCount >= 1)) dashCount = 1
 
 	if (dashCount < 3 && style === 'dashed') {
 		if (totalLength / strokeWidth < 4) {

package/src/lib/editor/tools/BaseBoxShapeTool/children/Pointing.ts

@@ -75,7 +75,10 @@ export class Pointing extends StateNode {
 	}
 
 	override onComplete() {
-		this.complete()
+		// `complete` arrives mid-press from undo, menus opening, page changes, and focus loss,
+		// none of which is a release; committing here would drop a default-size shape the user
+		// never asked for. Match the text and arrow tools and leave nothing behind.
+		this.cancel()
 	}
 
 	override onInterrupt() {

package/src/lib/editor/tools/StateNode.test.ts

@@ -238,6 +238,70 @@ describe('StateNode.addChild', () => {
 	})
 })
 
+describe('StateNode.enter', () => {
+	let idleExits = 0
+
+	class Idle extends StateNode {
+		static override id = 'idle'
+		override onExit() {
+			idleExits++
+		}
+	}
+
+	class Pointing extends StateNode {
+		static override id = 'pointing'
+	}
+
+	class ToolWithEnterTransition extends StateNode {
+		static override id = 'enterTransition'
+		static override initial = 'idle'
+		static override children() {
+			return [Idle, Pointing]
+		}
+
+		override onEnter(info: { startPointing?: boolean }) {
+			if (info?.startPointing) this.transition('pointing', info)
+		}
+	}
+
+	class OtherTool extends StateNode {
+		static override id = 'other'
+	}
+
+	let editor: Editor
+
+	beforeEach(() => {
+		idleExits = 0
+		editor = new Editor({
+			initialState: 'other',
+			shapeUtils: [],
+			bindingUtils: [],
+			tools: [OtherTool, ToolWithEnterTransition],
+			store: createTLStore({ shapeUtils: [], bindingUtils: [] }),
+			getContainer: () => document.body,
+		})
+	})
+
+	it('enters the initial child when onEnter does not transition', () => {
+		editor.setCurrentTool('enterTransition')
+		expect(editor.root.getPath()).toBe('root.enterTransition.idle')
+		expect(editor.root.children!['enterTransition'].children!['idle'].getIsActive()).toBe(true)
+	})
+
+	it('does not enter the initial child on top of a child that onEnter transitioned to', () => {
+		editor.setCurrentTool('enterTransition', { startPointing: true })
+		const tool = editor.root.children!['enterTransition']
+		expect(editor.root.getPath()).toBe('root.enterTransition.pointing')
+		expect(tool.children!['pointing'].getIsActive()).toBe(true)
+		expect(tool.children!['idle'].getIsActive()).toBe(false)
+		// The stale (never re-entered) idle child must not get a spurious onExit
+		expect(idleExits).toBe(0)
+
+		editor.setCurrentTool('other')
+		expect(tool.children!['pointing'].getIsActive()).toBe(false)
+	})
+})
+
 describe('current tool id mask', () => {
 	// Tool mask test classes
 	class ToolA extends StateNode {

package/src/lib/editor/tools/StateNode.ts

@@ -152,7 +152,9 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 			}
 
 			if (prevChildState?.id !== nextChildState.id) {
-				prevChildState?.exit(info, id)
+				// The previous child is inactive when transitioning from a parent's onEnter (or from a
+				// node that was already exited); exiting it again would fire a spurious onExit
+				if (prevChildState?.getIsActive()) prevChildState.exit(info, id)
 				currState._current.set(nextChildState)
 				nextChildState.enter(info, prevChildState?.id || 'initial')
 				if (!nextChildState.getIsActive()) break
@@ -188,10 +190,18 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 			this.editor.performance._notifyInteractionStart(this.id, this.getPath())
 		}
 
+		const currentBeforeEnter = this.getCurrent()
 		this._isActive.set(true)
 		this.onEnter?.(info, from)
 
-		if (this.children && this.initial && this.getIsActive()) {
+		// If onEnter already transitioned to a child, entering the initial child on top of it would
+		// leave that child active but orphaned
+		if (
+			this.children &&
+			this.initial &&
+			this.getIsActive() &&
+			this.getCurrent() === currentBeforeEnter
+		) {
 			const initial = this.children[this.initial]
 			this._current.set(initial)
 			initial.enter(info, from)

package/src/lib/globals/editors.test.ts

@@ -0,0 +1,76 @@
+import { createTLStore } from '../..'
+import { Editor } from '../editor/Editor'
+import { tleditors } from './editors'
+
+const editors: Editor[] = []
+
+function createTestEditor() {
+	const editor = new Editor({
+		shapeUtils: [],
+		bindingUtils: [],
+		tools: [],
+		store: createTLStore({ shapeUtils: [], bindingUtils: [] }),
+		getContainer: () => document.body,
+	})
+	editors.push(editor)
+	return editor
+}
+
+afterEach(() => {
+	for (const editor of editors) {
+		editor.dispose()
+	}
+	editors.length = 0
+	expect(tleditors.getMounted()).toEqual([])
+})
+
+describe('tleditors', () => {
+	it('tracks editors as they mount and unmount', () => {
+		const editor = createTestEditor()
+		expect(tleditors.getMounted()).toEqual([])
+
+		editor.emit('mount')
+		expect(tleditors.getMounted()).toEqual([editor])
+
+		editor.emit('unmount')
+		expect(tleditors.getMounted()).toEqual([])
+	})
+
+	it('does not add the same editor twice', () => {
+		const editor = createTestEditor()
+		editor.emit('mount')
+		editor.emit('mount')
+		expect(tleditors.getMounted()).toEqual([editor])
+	})
+
+	it('removes an editor when it is disposed while mounted', () => {
+		const editor = createTestEditor()
+		editor.emit('mount')
+		expect(tleditors.getMounted()).toEqual([editor])
+
+		editor.dispose()
+		expect(tleditors.getMounted()).toEqual([])
+		expect(editor.getIsMounted()).toBe(false)
+	})
+
+	it('removes an editor on dispose even if the unmount listener was removed', () => {
+		const editor = createTestEditor()
+		editor.emit('mount')
+		editor.removeAllListeners('unmount')
+
+		editor.dispose()
+		expect(tleditors.getMounted()).toEqual([])
+	})
+
+	it('tracks multiple mounted editors', () => {
+		const editorA = createTestEditor()
+		const editorB = createTestEditor()
+
+		editorA.emit('mount')
+		editorB.emit('mount')
+		expect(tleditors.getMounted()).toEqual([editorA, editorB])
+
+		editorA.emit('unmount')
+		expect(tleditors.getMounted()).toEqual([editorB])
+	})
+})

package/src/lib/globals/editors.ts

@@ -0,0 +1,53 @@
+import { Signal, atom } from '@tldraw/state'
+import type { Editor } from '../editor/Editor'
+
+const mounted = atom<readonly Editor[]>('mounted editors', [])
+
+/**
+ * A global registry of currently mounted editor instances. Use it to discover live editors from
+ * outside the React tree, for example from sidebar chrome, keyboard shortcuts, or multi-editor
+ * layouts.
+ *
+ * @example
+ * ```ts
+ * tleditors.getMounted() // readonly Editor[]
+ *
+ * const editors = useValue('mounted editors', () => tleditors.getMounted(), [])
+ * ```
+ *
+ * @public
+ */
+export const tleditors = {
+	/**
+	 * A reactive list of currently mounted editor instances.
+	 *
+	 * An editor is added when it emits the `mount` event and removed when it emits `unmount`
+	 * (including when the editor is disposed while still mounted).
+	 *
+	 * @public
+	 */
+	mounted: mounted as Signal<readonly Editor[]>,
+
+	/**
+	 * Get the currently mounted editor instances.
+	 *
+	 * @public
+	 */
+	getMounted(): readonly Editor[] {
+		return mounted.get()
+	},
+}
+
+/** @internal */
+export function registerMountedEditor(editor: Editor) {
+	const current = mounted.get()
+	if (current.includes(editor)) return
+	mounted.set([...current, editor])
+}
+
+/** @internal */
+export function unregisterMountedEditor(editor: Editor) {
+	const current = mounted.get()
+	if (!current.includes(editor)) return
+	mounted.set(current.filter((e) => e !== editor))
+}

package/src/lib/globals/menus.test.ts

@@ -0,0 +1,33 @@
+import { tlmenus } from './menus'
+
+describe('tlmenus', () => {
+	afterEach(() => {
+		tlmenus.clearOpenMenus()
+		tlmenus._hiddenMenus = []
+	})
+
+	it('reports whether a menu is open with and without a context', () => {
+		tlmenus.addOpenMenu('main')
+		tlmenus.addOpenMenu('main', 'editor-1')
+
+		expect(tlmenus.isMenuOpen('main')).toBe(true)
+		expect(tlmenus.isMenuOpen('main', 'editor-1')).toBe(true)
+		expect(tlmenus.isMenuOpen('main', 'editor-2')).toBe(false)
+		expect(tlmenus.isMenuOpen('other')).toBe(false)
+	})
+
+	it('hides and restores the open menus of a context', () => {
+		tlmenus.addOpenMenu('main', 'editor-1')
+		tlmenus.addOpenMenu('main', 'editor-2')
+
+		tlmenus.hideOpenMenus('editor-1')
+		expect(tlmenus.getOpenMenus()).toEqual(['main-editor-2'])
+
+		tlmenus.showOpenMenus('editor-1')
+		expect(tlmenus.getOpenMenus().sort()).toEqual(['main-editor-1', 'main-editor-2'])
+
+		// closing the real menu afterwards leaves nothing behind
+		tlmenus.deleteOpenMenu('main', 'editor-1')
+		expect(tlmenus.hasOpenMenus('editor-1')).toBe(false)
+	})
+})

package/src/lib/globals/menus.ts

@@ -106,10 +106,12 @@ export const tlmenus = {
 	 * @public
 	 */
 	hideOpenMenus(contextId?: string) {
+		// ids read back from the store already carry their context suffix, so they are deleted
+		// (and later re-added) as-is rather than suffixed again
 		this._hiddenMenus = [...this.getOpenMenus(contextId)]
 		if (this._hiddenMenus.length === 0) return
 		for (const menu of this._hiddenMenus) {
-			this.deleteOpenMenu(menu, contextId)
+			this.deleteOpenMenu(menu)
 		}
 	},
 
@@ -128,10 +130,15 @@ export const tlmenus = {
 	 */
 	showOpenMenus(contextId?: string) {
 		if (this._hiddenMenus.length === 0) return
+		const stillHidden: string[] = []
 		for (const menu of this._hiddenMenus) {
-			this.addOpenMenu(menu, contextId)
+			if (!contextId || menu.endsWith('-' + contextId)) {
+				this.addOpenMenu(menu)
+			} else {
+				stillHidden.push(menu)
+			}
 		}
-		this._hiddenMenus = []
+		this._hiddenMenus = stillHidden
 	},
 
 	/**
@@ -148,7 +155,7 @@ export const tlmenus = {
 	 * @public
 	 */
 	isMenuOpen(id: string, contextId?: string): boolean {
-		return this.getOpenMenus(contextId).includes(`${id}-${contextId}`)
+		return this.getOpenMenus(contextId).includes(contextId ? `${id}-${contextId}` : id)
 	},
 
 	/**

package/src/lib/hooks/useCanvasEvents.ts

@@ -153,6 +153,7 @@ export function useCanvasEvents() {
 				if (e.dataTransfer?.files?.length) {
 					const files = Array.from(e.dataTransfer.files)
 
+					editor.markHistoryStoppingPoint('drop')
 					await editor.putExternalContent({
 						type: 'files',
 						files,
@@ -163,6 +164,7 @@ export function useCanvasEvents() {
 
 				const url = e.dataTransfer.getData('url')
 				if (url) {
+					editor.markHistoryStoppingPoint('drop')
 					await editor.putExternalContent({
 						type: 'url',
 						url,

package/src/lib/hooks/useDocumentEvents.ts

@@ -1,5 +1,5 @@
 import { useValue } from '@tldraw/state-react'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import { Editor } from '../editor/Editor'
 import { TLKeyboardEventInfo } from '../editor/types/event-types'
 import { activeElementShouldCaptureKeys, preventDefault } from '../utils/dom'
@@ -14,6 +14,10 @@ export function useDocumentEvents() {
 	const isEditing = useValue('isEditing', () => editor.getEditingShapeId(), [editor])
 	const isAppFocused = useValue('isFocused', () => editor.getIsFocused(), [editor])
 
+	// `inputs.keys` only stores codes, but tools match `onKeyUp` on `info.key`, so the window
+	// blur release below needs the key remembered per code.
+	const heldKeysRef = useRef(new Map<string, string>())
+
 	// Prevent the browser's default drag and drop behavior on our container (UI, etc)
 	useEffect(() => {
 		if (!container) return
@@ -29,8 +33,12 @@ export function useDocumentEvents() {
 			// re-dispatched, which would lead to an infinite loop.
 			if ((e as any).isSpecialRedispatchedEvent) return
 			preventDefault(e)
-			e.stopPropagation()
 			const cvs = container.querySelector('.tl-canvas')
+			// A drop on the canvas itself already reaches the canvas (and any shape's own React
+			// drop handlers) by bubbling; stopping it here would hide it from React, which
+			// delegates from the root above this container.
+			if (cvs?.contains(e.target as Node | null)) return
+			e.stopPropagation()
 			if (!cvs) return
 			const newEvent = new DragEvent(e.type, e)
 			;(newEvent as any).isSpecialRedispatchedEvent = true
@@ -208,6 +216,7 @@ export function useDocumentEvents() {
 				accelKey: isAccelKey(e),
 			}
 
+			heldKeysRef.current.set(e.code, e.key)
 			editor.dispatch(info)
 		}
 
@@ -235,24 +244,26 @@ export function useDocumentEvents() {
 				accelKey: isAccelKey(e),
 			}
 
+			heldKeysRef.current.delete(e.code)
 			editor.dispatch(info)
 		}
 
 		function handleTouchStart(e: TouchEvent) {
 			if (container.contains(e.target as Node)) {
-				// Center point of the touch area
-				const touchXPosition = e.touches[0].pageX
+				// Center point of the touch area, measured from the edge of the window the touch
+				// has to reach to trigger the navigation
+				const touchXPosition = e.touches[0].clientX
 				// Size of the touch area
 				const touchXRadius = e.touches[0].radiusX || 0
 
-				// We set a threshold (10px) on both sizes of the screen,
-				// if the touch area overlaps with the screen edges
-				// it's likely to trigger the navigation. We prevent the
-				// touchstart event in that case.
-				// todo: make this relative to the actual window, not the editor's screen bounds
+				// If the touch area overlaps with the screen edges it's likely to trigger the
+				// navigation. We prevent the touchstart event in that case. The gesture belongs to
+				// the window, so an editor inset from the window's edges — beside a sidebar, say —
+				// is not near an edge the system reacts to.
+				const windowWidth = editor.getContainerWindow().innerWidth
 				if (
 					touchXPosition - touchXRadius < 10 ||
-					touchXPosition + touchXRadius > editor.getViewportScreenBounds().width - 10
+					touchXPosition + touchXRadius > windowWidth - 10
 				) {
 					if ((e.target as HTMLElement)?.tagName === 'BUTTON') {
 						// Force a click before bailing
@@ -276,10 +287,13 @@ export function useDocumentEvents() {
 
 		container.addEventListener('wheel', handleWheel, { passive: false })
 
+		// Not the shared `preventDefault` reference: the DOM dedupes identical listeners, so with two
+		// editors in one document the first cleanup would otherwise remove it for both.
+		const handleGesture = (e: Event) => preventDefault(e)
 		const ownerDoc = container.ownerDocument
-		ownerDoc.addEventListener('gesturestart', preventDefault)
-		ownerDoc.addEventListener('gesturechange', preventDefault)
-		ownerDoc.addEventListener('gestureend', preventDefault)
+		ownerDoc.addEventListener('gesturestart', handleGesture)
+		ownerDoc.addEventListener('gesturechange', handleGesture)
+		ownerDoc.addEventListener('gestureend', handleGesture)
 
 		container.addEventListener('keydown', handleKeyDown)
 		container.addEventListener('keyup', handleKeyUp)
@@ -289,14 +303,44 @@ export function useDocumentEvents() {
 
 			container.removeEventListener('wheel', handleWheel)
 
-			ownerDoc.removeEventListener('gesturestart', preventDefault)
-			ownerDoc.removeEventListener('gesturechange', preventDefault)
-			ownerDoc.removeEventListener('gestureend', preventDefault)
+			ownerDoc.removeEventListener('gesturestart', handleGesture)
+			ownerDoc.removeEventListener('gesturechange', handleGesture)
+			ownerDoc.removeEventListener('gestureend', handleGesture)
 
 			container.removeEventListener('keydown', handleKeyDown)
 			container.removeEventListener('keyup', handleKeyUp)
 		}
 	}, [editor, container, isAppFocused, isEditing])
+
+	// Alt+Tab / Cmd+Tab away while holding a key delivers the keyup to the other app, so without
+	// this Space-panning (grab cursor, drags pan) stuck until the key was pressed again (#10442).
+	// Replaying a key_up per held key runs the normal release path, including tool onKeyUp.
+	useEffect(() => {
+		const win = editor.getContainerWindow()
+
+		const handleWindowBlur = () => {
+			const heldKeys = heldKeysRef.current
+			for (const code of [...editor.inputs.keys]) {
+				editor.dispatch({
+					type: 'keyboard',
+					name: 'key_up',
+					key: heldKeys.get(code) ?? code,
+					code,
+					shiftKey: false,
+					altKey: false,
+					ctrlKey: false,
+					metaKey: false,
+					accelKey: false,
+				})
+			}
+			heldKeys.clear()
+		}
+
+		win.addEventListener('blur', handleWindowBlur)
+		return () => {
+			win.removeEventListener('blur', handleWindowBlur)
+		}
+	}, [editor])
 }
 
 function areShortcutsDisabled(editor: Editor) {