@tldraw/editor 5.4.0-next.ef99ab47e5ce → 5.5.0-canary.078a77321dc3

package/src/lib/editor/derivations/shapeIdsInCurrentPage.ts

@@ -39,9 +39,13 @@ export function deriveShapeIdsInCurrentPage(store: TLStore, getCurrentPageId: ()
 	function fromScratch() {
 		const currentPageId = getCurrentPageId()
 		lastPageId = currentPageId
-		return new Set(
-			[...shapesIndex.get()].filter((id) => isShapeInPage(store, currentPageId, store.get(id)!))
-		)
+		const result = new Set<TLShapeId>()
+		for (const id of shapesIndex.get()) {
+			if (isShapeInPage(store, currentPageId, store.get(id)!)) {
+				result.add(id)
+			}
+		}
+		return result
 	}
 	return computed<Set<TLShapeId>>('_shapeIdsInCurrentPage', (prevValue, lastComputedEpoch) => {
 		if (isUninitialized(prevValue)) {

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

@@ -94,7 +94,7 @@ export class ClickManager {
 				switch (this._clickState) {
 					case 'pendingDouble': {
 						this._clickState = 'pendingOverflow'
-						this._clickTimeout = this._getClickTimeout(this._clickState)
+						this._getClickTimeout(this._clickState)
 						return {
 							...info,
 							type: 'click',
@@ -114,7 +114,7 @@ export class ClickManager {
 						// overflow
 					}
 				}
-				this._clickTimeout = this._getClickTimeout(this._clickState)
+				this._getClickTimeout(this._clickState)
 				return info
 			}
 			case 'pointer_up': {
@@ -141,10 +141,12 @@ export class ClickManager {
 				return info
 			}
 			case 'pointer_move': {
+				// Compare in client coordinates like _clickScreenPoint; the container-relative
+				// inputs screen point would add the container offset and cancel on any movement.
 				if (
 					this._clickState !== 'idle' &&
 					this._clickScreenPoint &&
-					Vec.Dist2(this._clickScreenPoint, this.editor.inputs.getCurrentScreenPoint()) >
+					Vec.Dist2(this._clickScreenPoint, info.point) >
 						(this.editor.getInstanceState().isCoarsePointer
 							? this.editor.options.coarseDragDistanceSquared
 							: this.editor.options.dragDistanceSquared)

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

@@ -1,6 +1,6 @@
 import { EMPTY_ARRAY, atom, computed } from '@tldraw/state'
 import type { TLInstancePresence } from '@tldraw/tlschema'
-import { areArraysShallowEqual, maxBy } from '@tldraw/utils'
+import { areArraysShallowEqual } from '@tldraw/utils'
 import type { Editor } from '../../Editor'
 
 /**
@@ -54,14 +54,14 @@ export class CollaboratorsManager {
 	getCollaborators(): TLInstancePresence[] {
 		const allPresenceRecords = this._getCollaboratorsQuery().get()
 		if (!allPresenceRecords.length) return EMPTY_ARRAY
-		const userIds = [...new Set(allPresenceRecords.map((c) => c.userId))].sort()
-		return userIds.map((id) => {
-			const latestPresence = maxBy(
-				allPresenceRecords.filter((c) => c.userId === id),
-				(p) => p.lastActivityTimestamp ?? 0
-			)
-			return latestPresence!
-		})
+		const latestByUserId = new Map<string, TLInstancePresence>()
+		for (const presence of allPresenceRecords) {
+			const latest = latestByUserId.get(presence.userId)
+			if (!latest || (presence.lastActivityTimestamp ?? 0) > (latest.lastActivityTimestamp ?? 0)) {
+				latestByUserId.set(presence.userId, presence)
+			}
+		}
+		return [...latestByUserId.keys()].sort().map((id) => latestByUserId.get(id)!)
 	}
 
 	/**

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

@@ -262,15 +262,46 @@ describe('EdgeScrollManager', () => {
 		})
 
 		it('should adjust scroll speed based on zoom level', () => {
-			editor.getZoomLevel.mockReturnValue(2)
 			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 
 			edgeScrollManager.updateEdgeScrolling(300)
+			const atZoom1 = (editor.setCamera.mock.calls[0][0] as Vec).x
+
+			editor.setCamera.mockClear()
+			edgeScrollManager = new EdgeScrollManager(editor)
+			editor.getZoomLevel.mockReturnValue(2)
+			edgeScrollManager.updateEdgeScrolling(300)
+			const atZoom2 = (editor.setCamera.mock.calls[0][0] as Vec).x
 
-			expect(editor.setCamera).toHaveBeenCalled()
-			const callArgs = editor.setCamera.mock.calls[0][0] as Vec
 			// Higher zoom should result in smaller camera movement
-			expect(Math.abs(callArgs.x)).toBeLessThan(25)
+			expect(atZoom2).toBeCloseTo(atZoom1 / 2)
+		})
+
+		it('should move the same distance per second regardless of tick rate', () => {
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
+
+			// Get past the delay and easing ramp so each tick moves at full speed
+			edgeScrollManager.updateEdgeScrolling(1000)
+			editor.setCamera.mockClear()
+
+			// One second of 60 Hz ticks
+			for (let i = 0; i < 60; i++) edgeScrollManager.updateEdgeScrolling(1000 / 60)
+			const at60Hz = editor.setCamera.mock.calls.reduce(
+				(sum, [camera]) => sum + (camera as Vec).x,
+				0
+			)
+
+			editor.setCamera.mockClear()
+
+			// One second of 120 Hz ticks
+			for (let i = 0; i < 120; i++) edgeScrollManager.updateEdgeScrolling(1000 / 120)
+			const at120Hz = editor.setCamera.mock.calls.reduce(
+				(sum, [camera]) => sum + (camera as Vec).x,
+				0
+			)
+
+			expect(at60Hz).toBeGreaterThan(0)
+			expect(at120Hz).toBeCloseTo(at60Hz)
 		})
 
 		it('should add scroll delta to current camera position', () => {

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

@@ -1,3 +1,4 @@
+import { FRAME_MS_60HZ } from '../../../constants'
 import { EASINGS } from '../../../primitives/easings'
 import { Vec } from '../../../primitives/Vec'
 import type { Editor } from '../../Editor'
@@ -51,10 +52,13 @@ export class EdgeScrollManager {
 								)
 							)
 						: 1
-				this.moveCameraWhenCloseToEdge({
-					x: edgeScrollProximityFactor.x * eased,
-					y: edgeScrollProximityFactor.y * eased,
-				})
+				this.moveCameraWhenCloseToEdge(
+					{
+						x: edgeScrollProximityFactor.x * eased,
+						y: edgeScrollProximityFactor.y * eased,
+					},
+					elapsed
+				)
 			}
 		}
 	}
@@ -112,7 +116,7 @@ export class EdgeScrollManager {
 	 * Moves the camera when the mouse is close to the edge of the screen.
 	 * @public
 	 */
-	private moveCameraWhenCloseToEdge(proximityFactor: { x: number; y: number }) {
+	private moveCameraWhenCloseToEdge(proximityFactor: { x: number; y: number }, elapsed: number) {
 		if (proximityFactor.x === 0 && proximityFactor.y === 0) return
 		const { editor } = this
 
@@ -128,9 +132,11 @@ export class EdgeScrollManager {
 				? EDGE_SCROLL_SMALL_SCREEN_SPEED_FACTOR
 				: 1
 
-		// Determines the base speed of the scroll
+		// Determines the base speed of the scroll. edgeScrollSpeed is px per 60 Hz frame, so scale
+		// by elapsed time or a 120 Hz display scrolls twice as fast.
 		const zoomLevel = editor.getZoomLevel()
-		const pxSpeed = editor.user.getEdgeScrollSpeed() * editor.options.edgeScrollSpeed
+		const pxSpeed =
+			editor.user.getEdgeScrollSpeed() * editor.options.edgeScrollSpeed * (elapsed / FRAME_MS_60HZ)
 		const scrollDeltaX = (pxSpeed * proximityFactor.x * screenSizeFactorX) / zoomLevel
 		const scrollDeltaY = (pxSpeed * proximityFactor.y * screenSizeFactorY) / zoomLevel
 

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

@@ -8,6 +8,7 @@ import {
 	mapObjectMapValues,
 	objectMapEntries,
 } from '@tldraw/utils'
+import { areShapesContentEqual } from '../../../utils/areShapesContentEqual'
 import type { Editor } from '../../Editor'
 
 interface FontState {
@@ -41,7 +42,7 @@ export class FontManager {
 			},
 			{
 				areResultsEqual: areArraysShallowEqual,
-				areRecordsEqual: (a, b) => a.props === b.props && a.meta === b.meta,
+				areRecordsEqual: areShapesContentEqual,
 			}
 		)
 

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

@@ -1,16 +1,39 @@
+import { InstancePresenceRecordType, TLPOINTER_ID, createUserId } from '@tldraw/tlschema'
+import { vi } from 'vitest'
 import { createTLStore } from '../../../config/createTLStore'
+import { TldrawOptions } from '../../../options'
 import { Editor } from '../../Editor'
+import { StateNode } from '../../tools/StateNode'
 
-function createTestEditor() {
+function createPresence(editor: Editor) {
+	return InstancePresenceRecordType.create({
+		id: InstancePresenceRecordType.createId('peer'),
+		userId: createUserId('peer'),
+		userName: 'Peer',
+		currentPageId: editor.getCurrentPageId(),
+	})
+}
+
+function createTestEditor(options?: Partial<TldrawOptions>) {
 	const store = createTLStore({})
 	store.ensureStoreIsUsable()
-	return new Editor({
+	// Attached to the document so that events dispatched on the container
+	// propagate to the window, where the activity listeners live.
+	const container = document.createElement('div')
+	document.body.appendChild(container)
+	const editor = new Editor({
 		store,
 		bindingUtils: [],
 		shapeUtils: [],
-		getContainer: () => document.createElement('div'),
+		getContainer: () => container,
 		tools: [],
+		options,
 	})
+	editor.disposables.add(() => container.remove())
+	// Input listeners only attach once the editor is mounted, which is normally
+	// emitted by `TldrawEditor` when the container is in the DOM.
+	editor.emit('mount')
+	return editor
 }
 
 describe('InputsManager', () => {
@@ -37,6 +60,179 @@ describe('InputsManager', () => {
 		expect(editor.inputs.getPointerVelocity().len()).toBeGreaterThan(0)
 	})
 
+	describe('markActivity', () => {
+		beforeEach(() => {
+			vi.useFakeTimers()
+		})
+
+		afterEach(() => {
+			vi.useRealTimers()
+		})
+
+		it('does nothing when there are no collaborators', () => {
+			editor.inputs.markActivity()
+
+			expect(editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp).toBe(0)
+		})
+
+		it('stamps the pointer record, preserving its position', () => {
+			editor.store.put([createPresence(editor)])
+			editor.store.put([{ ...editor.store.get(TLPOINTER_ID)!, x: 5, y: 6 }])
+
+			editor.inputs.markActivity()
+
+			expect(editor.store.get(TLPOINTER_ID)!).toMatchObject({
+				x: 5,
+				y: 6,
+				lastActivityTimestamp: Date.now(),
+			})
+		})
+
+		it('throttles stamps on the leading edge', () => {
+			editor.store.put([createPresence(editor)])
+
+			editor.inputs.markActivity()
+			const firstStamp = editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp
+
+			vi.advanceTimersByTime(500)
+			editor.inputs.markActivity()
+			expect(editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp).toBe(firstStamp)
+
+			vi.advanceTimersByTime(600)
+			editor.inputs.markActivity()
+			expect(editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp).toBe(firstStamp + 1100)
+		})
+
+		it('stamps on keyboard input in the container', () => {
+			editor.store.put([createPresence(editor)])
+
+			editor.getContainer().dispatchEvent(new KeyboardEvent('keydown', { key: 'a', code: 'KeyA' }))
+
+			expect(editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp).toBe(Date.now())
+		})
+
+		it('stamps on pointer input in the container', () => {
+			editor.store.put([createPresence(editor)])
+
+			editor.getContainer().dispatchEvent(new Event('pointermove', { bubbles: true }))
+
+			expect(editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp).toBe(Date.now())
+		})
+
+		it('stamps on text input that fires no keydown, e.g. IME and gesture typing', () => {
+			editor.store.put([createPresence(editor)])
+
+			editor.getContainer().dispatchEvent(new Event('beforeinput', { bubbles: true }))
+
+			expect(editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp).toBe(Date.now())
+		})
+
+		it('stamps on input elsewhere in the tab, outside the container', () => {
+			editor.store.put([createPresence(editor)])
+
+			document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'a', code: 'KeyA' }))
+
+			expect(editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp).toBe(Date.now())
+		})
+
+		it('keeps a minimum throttle window when the idle timeout is tiny', () => {
+			const tinyEditor = createTestEditor({ collaboratorIdleTimeoutMs: 0 })
+			try {
+				tinyEditor.store.put([createPresence(tinyEditor)])
+
+				tinyEditor.inputs.markActivity()
+				const stamp = tinyEditor.store.get(TLPOINTER_ID)!.lastActivityTimestamp
+
+				vi.advanceTimersByTime(50)
+				tinyEditor.inputs.markActivity()
+				expect(tinyEditor.store.get(TLPOINTER_ID)!.lastActivityTimestamp).toBe(stamp)
+			} finally {
+				tinyEditor.dispose()
+			}
+		})
+
+		it('attaches input listeners only while sharing with someone', () => {
+			const addEventListener = vi.spyOn(window, 'addEventListener')
+			const removeEventListener = vi.spyOn(window, 'removeEventListener')
+			const soloEditor = createTestEditor()
+			try {
+				expect(addEventListener).not.toHaveBeenCalled()
+
+				soloEditor.store.put([createPresence(soloEditor)])
+				expect(addEventListener).toHaveBeenCalledWith('pointermove', expect.anything(), {
+					capture: true,
+				})
+
+				soloEditor.store.remove([createPresence(soloEditor).id])
+				expect(removeEventListener).toHaveBeenCalledWith('pointermove', expect.anything(), {
+					capture: true,
+				})
+			} finally {
+				soloEditor.dispose()
+				addEventListener.mockRestore()
+				removeEventListener.mockRestore()
+			}
+		})
+
+		it('attaches no input listeners when construction fails before mount', () => {
+			class DuplicateTool extends StateNode {
+				static override id = 'duplicate-tool'
+			}
+
+			const addEventListener = vi.spyOn(window, 'addEventListener')
+			try {
+				const store = createTLStore({})
+				store.ensureStoreIsUsable()
+				expect(
+					() =>
+						new Editor({
+							store,
+							bindingUtils: [],
+							shapeUtils: [],
+							getContainer: () => document.createElement('div'),
+							// The duplicate id makes the constructor throw after the inputs
+							// manager is built, so the editor is never disposed.
+							tools: [DuplicateTool, DuplicateTool],
+						})
+				).toThrow()
+
+				expect(addEventListener).not.toHaveBeenCalled()
+			} finally {
+				addEventListener.mockRestore()
+			}
+		})
+
+		it('does not stamp on pointer moves with no DOM input, e.g. following a user', () => {
+			editor.store.put([createPresence(editor)])
+
+			editor.inputs.markActivity()
+			const stamp = editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp
+
+			vi.advanceTimersByTime(5000)
+			editor.inputs.updateFromEvent({
+				type: 'pointer',
+				name: 'pointer_move',
+				point: { x: 100, y: 50 },
+				pointerId: 1,
+				button: 0,
+				isPen: false,
+				target: 'canvas',
+				shiftKey: false,
+				altKey: false,
+				ctrlKey: false,
+				metaKey: false,
+				accelKey: false,
+			})
+
+			// The pointer position updates, but the activity clock doesn't.
+			expect(editor.store.get(TLPOINTER_ID)!).toMatchObject({
+				x: 100,
+				y: 50,
+				lastActivityTimestamp: stamp,
+			})
+		})
+	})
+
 	it('stops updating pointer velocity after dispose', () => {
 		const point = editor.inputs.getCurrentScreenPoint()
 		point.x = 0

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

@@ -1,8 +1,7 @@
-import { atom, computed, unsafe__withoutCapture } from '@tldraw/state'
+import { atom, computed, react, unsafe__withoutCapture } from '@tldraw/state'
 import { AtomSet } from '@tldraw/store'
 import { TLINSTANCE_ID, TLPOINTER_ID } from '@tldraw/tlschema'
-import { bind } from '@tldraw/utils'
-import { INTERNAL_POINTER_IDS } from '../../../constants'
+import { bind, throttle } from '@tldraw/utils'
 import { Vec } from '../../../primitives/Vec'
 import { isAccelKey } from '../../../utils/keyboard'
 import type { Editor } from '../../Editor'
@@ -12,11 +11,85 @@ import { EditorManager } from '../EditorManager'
 const POINTER_VELOCITY_REFERENCE_INTERVAL_MS = 16
 const POINTER_VELOCITY_REFERENCE_SMOOTHING = 0.5
 
+// How often `markActivity` is allowed to stamp the activity timestamp. Each
+// stamp re-broadcasts presence, so this must be long enough to keep input
+// bursts (e.g. typing, held keys) from flooding the network. It must also stay
+// comfortably shorter than `collaboratorIdleTimeoutMs` so a continuously-active
+// peer never flickers to idle between stamps; the throttle window is capped
+// below that option when it's configured shorter than the default, but never
+// below the floor, so a degenerate idle timeout can't disable throttling.
+const ACTIVITY_TIMESTAMP_THROTTLE_MS = 1000
+const ACTIVITY_TIMESTAMP_THROTTLE_FLOOR_MS = 100
+
+// DOM events that count as presence activity. `beforeinput` covers IME and
+// mobile keyboards (e.g. gesture typing), which often don't fire per-character
+// keydown events. `gesturestart`/`gesturechange` are Safari's proprietary
+// trackpad-pinch events, which produce neither pointer nor wheel events.
+const ACTIVITY_EVENTS = [
+	'pointerdown',
+	'pointermove',
+	'pointerup',
+	'keydown',
+	'beforeinput',
+	'wheel',
+	'gesturestart',
+	'gesturechange',
+]
+
 /** @public */
 export class InputsManager extends EditorManager {
 	constructor(editor: Editor) {
 		super(editor)
 		this.addEditorEvent('frame', this._onFrame)
+
+		// Track input only while mounted and sharing with someone: a solo user
+		// pays for no listeners at all, and the window is resolved on attach
+		// rather than up front, when the container is guaranteed to exist.
+		//
+		// The mount check must come first. This runs eagerly during the editor's
+		// constructor, where `editor.collaborators` isn't assigned yet, so reading
+		// collaborators here would throw; a never-mounted editor short-circuits
+		// before that, and re-runs once mount flips the atom.
+		this.register(
+			react('presence activity listeners', () => {
+				if (this.editor.getIsMounted() && this._getHasCollaborators()) {
+					this._attachActivityListeners()
+				} else {
+					this._detachActivityListeners()
+				}
+			})
+		)
+		this.register(() => {
+			this._detachActivityListeners()
+			this._throttledActivityStamp.cancel()
+		})
+	}
+
+	private _detachActivityListenersFn: null | (() => void) = null
+
+	/**
+	 * User input anywhere in the editor's tab counts as activity for collaborator presence —
+	 * presence means "this person is here", whether or not the input lands on the editor itself
+	 * (e.g. typing in a sidebar next to the canvas). Listen in the capture phase so input that
+	 * other handlers swallow still counts.
+	 */
+	private _attachActivityListeners() {
+		if (this._detachActivityListenersFn) return
+
+		const win = this.editor.getContainerWindow()
+		for (const name of ACTIVITY_EVENTS) {
+			win.addEventListener(name, this.markActivity, { capture: true })
+		}
+		this._detachActivityListenersFn = () => {
+			for (const name of ACTIVITY_EVENTS) {
+				win.removeEventListener(name, this.markActivity, { capture: true })
+			}
+		}
+	}
+
+	private _detachActivityListeners() {
+		this._detachActivityListenersFn?.()
+		this._detachActivityListenersFn = null
 	}
 
 	@bind
@@ -462,6 +535,53 @@ export class InputsManager extends EditorManager {
 		return this.editor.getCollaborators().length > 0 // could we do this more efficiently?
 	}
 
+	private readonly _throttledActivityStamp = throttle(
+		() => {
+			const pointer = this.editor.store.unsafeGetWithoutCapture(TLPOINTER_ID)
+			if (!pointer) return
+
+			this.editor.run(
+				() => {
+					this.editor.store.put([{ ...pointer, lastActivityTimestamp: Date.now() }])
+				},
+				{ history: 'ignore' }
+			)
+		},
+		// Stay comfortably below the idle timeout so a continuously-active peer
+		// never flickers to idle between throttled stamps.
+		Math.max(
+			ACTIVITY_TIMESTAMP_THROTTLE_FLOOR_MS,
+			Math.min(ACTIVITY_TIMESTAMP_THROTTLE_MS, this.editor.options.collaboratorIdleTimeoutMs / 3)
+		),
+		{ trailing: false }
+	)
+
+	/**
+	 * Mark the current user as active for collaborator presence. User input anywhere in the
+	 * editor's tab counts as activity automatically; call this to make input that doesn't produce
+	 * DOM events count too, so peers don't classify this user as idle or inactive while they're
+	 * still interacting. Calls are throttled on the leading edge, so it's safe to call from
+	 * high-frequency input events.
+	 *
+	 * @example
+	 * ```ts
+	 * // Gamepads are polled rather than event-driven, so stamp activity from the poll
+	 * editor.timers.setInterval(() => {
+	 * 	const isPressed = navigator
+	 * 		.getGamepads()
+	 * 		.some((pad) => pad?.buttons.some((button) => button.pressed))
+	 * 	if (isPressed) editor.inputs.markActivity()
+	 * }, 50)
+	 * ```
+	 */
+	@bind
+	markActivity() {
+		// Check for collaborators before consuming the throttle window, so input
+		// while alone doesn't delay the first stamp after a peer joins.
+		if (!this._getHasCollaborators()) return
+		this._throttledActivityStamp()
+	}
+
 	/**
 	 * The previous point used for velocity calculation (updated each tick, not each pointer event).
 	 * @internal
@@ -553,13 +673,12 @@ export class InputsManager extends EditorManager {
 							typeName: 'pointer',
 							x: pagePoint.x,
 							y: pagePoint.y,
+							// The activity timestamp is stamped by the container's input
+							// listeners (see `markActivity`), not by pointer position updates:
+							// synthetic moves, like the camera following another user, don't
+							// count as activity.
 							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.editor.store.unsafeGetWithoutCapture(TLPOINTER_ID)
-											?.lastActivityTimestamp ?? Date.now())
-									: Date.now(),
+								this.editor.store.unsafeGetWithoutCapture(TLPOINTER_ID)?.lastActivityTimestamp ?? 0,
 							meta: {},
 						},
 					])

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

@@ -1,4 +1,4 @@
-import { TLScribble, VecModel } from '@tldraw/tlschema'
+import { TLPageId, TLScribble, VecModel } from '@tldraw/tlschema'
 import { uniqueId } from '@tldraw/utils'
 import { Vec } from '../../../primitives/Vec'
 import type { Editor } from '../../Editor'
@@ -47,6 +47,7 @@ export interface ScribbleSessionOptions {
 // Internal session state (not exported)
 interface Session {
 	id: string
+	pageId: TLPageId
 	items: ScribbleItem[]
 	state: 'active' | 'stopping' | 'complete'
 	options: Required<Omit<ScribbleSessionOptions, 'id'>>
@@ -75,6 +76,7 @@ export class ScribbleManager {
 		const id = options.id ?? uniqueId()
 		const session: Session = {
 			id,
+			pageId: this.editor.getCurrentPageId(),
 			items: [],
 			state: 'active',
 			options: {
@@ -357,6 +359,15 @@ export class ScribbleManager {
 		if (this.sessions.size === 0 && currentScribbles.length === 0) return
 
 		this.editor.run(() => {
+			// Drop sessions from other pages, otherwise a still-fading laser trail
+			// keeps playing out over the page the user switched to (#10449).
+			const currentPageId = this.editor.getCurrentPageId()
+			for (const session of this.sessions.values()) {
+				if (session.pageId !== currentPageId) {
+					this.clearSession(session.id)
+				}
+			}
+
 			// Tick all sessions
 			for (const session of this.sessions.values()) {
 				this.tickSession(session, elapsed)

package/src/lib/editor/managers/SnapManager/BoundsSnaps.ts

@@ -206,12 +206,10 @@ export class BoundsSnaps {
 		const { editor } = this
 		return editor.store.createComputedCache<BoundsSnapPoint[], TLShape>('snapPoints', (shape) => {
 			const pageTransform = editor.getShapePageTransform(shape.id)
-			if (!pageTransform) return undefined
 			const boundsSnapGeometry = editor.getShapeUtil(shape).getBoundsSnapGeometry(shape)
 			const snapPoints =
 				boundsSnapGeometry.points ?? editor.getShapeGeometry(shape).bounds.cornersAndCenter
 
-			if (!pageTransform || !snapPoints) return undefined
 			return snapPoints.map((point, i) => {
 				const { x, y } = Mat.applyToPoint(pageTransform, point)
 				return { x, y, id: `${shape.id}:${i}` }

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

@@ -1,5 +1,5 @@
 import { BoxModel, TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema'
-import { objectMapKeys } from '@tldraw/utils'
+import { iterateGraphemes, objectMapKeys } from '@tldraw/utils'
 import type { Editor } from '../../Editor'
 import { EditorManager } from '../EditorManager'
 
@@ -94,10 +94,6 @@ export interface TLMeasureTextSpanOpts {
 
 const spaceCharacterRegex = /\s/
 
-// Iterate by grapheme cluster (e.g. emoji sequences, flags, accented letters)
-// rather than by code point, so a single glyph is measured as one unit.
-const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' })
-
 const initialDefaultStyles = Object.freeze({
 	'overflow-wrap': 'break-word',
 	'word-break': 'auto',
@@ -309,7 +305,7 @@ export class TextManager extends EditorManager {
 		for (const childNode of element.childNodes) {
 			if (childNode.nodeType !== Node.TEXT_NODE) continue
 
-			for (const { segment } of graphemeSegmenter.segment(childNode.textContent ?? '')) {
+			for (const segment of iterateGraphemes(childNode.textContent ?? '')) {
 				// place the range around the grapheme we're interested in
 				range.setStart(textNode, idx)
 				range.setEnd(textNode, idx + segment.length)