fix(editor): address low-severity manager audit findings (tldraw#8895)

In order to address the low-severity editor manager audit findings, this
PR tightens several manager contracts without changing `Editor`
accessors. It centralizes blur completion in `FocusManager`, reduces
collaborator visibility work, lazily starts the collaborator visibility
clock, names the small-screen edge-scroll tuning constants, and makes
pointer velocity smoothing elapsed-aware.

Relates to tldraw#8894.

### Change type

- [x] `improvement`

### Test plan

1. `cd packages/editor && yarn test run`
2. `cd packages/tldraw && yarn test run src/test/Editor.test.tsx -t
"Editor.TickManager"`
3. `yarn typecheck`
4. `yarn api-check`

- [x] Unit tests
- [ ] End to end tests

### Code changes

| Section         | LOC change |
| --------------- | ---------- |
| Core code       | +67 / -77  |
| Tests           | +163 / -0  |
| Config/tooling  | +1 / -1    |

Author: steveruizok

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-	"recommendations": ["esbenp.prettier-vscode"]
+	"recommendations": ["oxc.oxc-vscode"]
 }

packages/editor/src/lib/editor/Editor.ts

@@ -10372,11 +10372,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	blur({ blurContainer = true } = {}): this {
 		if (!this.getIsFocused()) return this
-		if (blurContainer) {
-			this.focusManager.blur()
-		} else {
-			this.complete() // stop any interaction
-		}
+		this.focusManager.blur({ blurContainer })
 		this.updateInstanceState({ isFocused: false })
 		return this
 	}

packages/editor/src/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.test.ts

@@ -0,0 +1,132 @@
+import { PageRecordType, type TLInstancePresence } from '@tldraw/tlschema'
+import { vi } from 'vitest'
+import type { Editor } from '../../Editor'
+import { CollaboratorsManager } from './CollaboratorsManager'
+
+const currentPageId = PageRecordType.createId('page')
+
+function createPresence(userId: string): TLInstancePresence {
+	return {
+		typeName: 'instance_presence',
+		id: `instance_presence:${userId}` as TLInstancePresence['id'],
+		userId,
+		userName: userId,
+		lastActivityTimestamp: Date.now(),
+		color: '#000000',
+		camera: null,
+		selectedShapeIds: [],
+		currentPageId,
+		brush: null,
+		scribbles: [],
+		screenBounds: null,
+		followingUserId: null,
+		cursor: null,
+		chatMessage: '',
+		meta: {},
+	}
+}
+
+function createEditor(presences: TLInstancePresence[] = []) {
+	const setInterval = vi.fn(() => 123)
+	const getInstanceState = vi.fn(() => ({
+		followingUserId: null,
+		highlightedUserIds: [],
+	}))
+	const userGetId = vi.fn(() => 'current-user')
+
+	const editor = {
+		options: {
+			collaboratorCheckIntervalMs: 1000,
+			collaboratorIdleTimeoutMs: 3000,
+			collaboratorInactiveTimeoutMs: 5000,
+		},
+		timers: {
+			setInterval,
+		},
+		user: {
+			getId: userGetId,
+		},
+		store: {
+			query: {
+				records: vi.fn(() => ({
+					get: () => presences,
+				})),
+			},
+		},
+		getInstanceState,
+		getCurrentPageId: vi.fn(() => currentPageId),
+	} as unknown as Editor
+
+	return { editor, setInterval, getInstanceState, userGetId }
+}
+
+describe(CollaboratorsManager, () => {
+	afterEach(() => {
+		vi.clearAllMocks()
+	})
+
+	it('starts the visibility clock on the first visible collaborators read', () => {
+		const { editor, setInterval } = createEditor()
+		const manager = new CollaboratorsManager(editor)
+
+		expect(setInterval).not.toHaveBeenCalled()
+
+		expect(manager.getVisibleCollaborators()).toEqual([])
+
+		expect(setInterval).toHaveBeenCalledTimes(1)
+		expect(setInterval).toHaveBeenCalledWith(expect.any(Function), 1000)
+	})
+
+	it('only starts the visibility clock once across repeated reads', () => {
+		const { editor, setInterval } = createEditor()
+		const manager = new CollaboratorsManager(editor)
+
+		manager.getVisibleCollaborators()
+		manager.getVisibleCollaborators()
+		manager.getVisibleCollaborators()
+
+		expect(setInterval).toHaveBeenCalledTimes(1)
+	})
+
+	it('reads instance state once when filtering visible collaborators', () => {
+		const { editor, getInstanceState } = createEditor([
+			createPresence('user-1'),
+			createPresence('user-2'),
+		])
+		const manager = new CollaboratorsManager(editor)
+
+		expect(manager.getVisibleCollaborators()).toHaveLength(2)
+
+		expect(getInstanceState).toHaveBeenCalledTimes(1)
+	})
+
+	it('hides idle collaborators that are following us', () => {
+		const presence = createPresence('peer')
+		presence.lastActivityTimestamp = Date.now() - 4000
+		presence.followingUserId = 'current-user'
+		const { editor } = createEditor([presence])
+		const manager = new CollaboratorsManager(editor)
+
+		expect(manager.getVisibleCollaborators()).toEqual([])
+	})
+
+	it('shows idle collaborators that are following us when they have a chat message', () => {
+		const presence = createPresence('peer')
+		presence.lastActivityTimestamp = Date.now() - 4000
+		presence.followingUserId = 'current-user'
+		presence.chatMessage = 'hi'
+		const { editor } = createEditor([presence])
+		const manager = new CollaboratorsManager(editor)
+
+		expect(manager.getVisibleCollaborators()).toHaveLength(1)
+	})
+
+	it('shows idle collaborators that are not following us', () => {
+		const presence = createPresence('peer')
+		presence.lastActivityTimestamp = Date.now() - 4000
+		const { editor } = createEditor([presence])
+		const manager = new CollaboratorsManager(editor)
+
+		expect(manager.getVisibleCollaborators()).toHaveLength(1)
+	})
+})

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

@@ -1,10 +1,6 @@
 import { EMPTY_ARRAY, atom, computed } from '@tldraw/state'
-import { TLInstancePresence } from '@tldraw/tlschema'
+import type { TLInstancePresence } from '@tldraw/tlschema'
 import { maxBy } from '@tldraw/utils'
-import {
-	getCollaboratorStateFromElapsedTime,
-	shouldShowCollaborator,
-} from '../../../utils/collaboratorState'
 import type { Editor } from '../../Editor'
 
 /**
@@ -17,12 +13,19 @@ import type { Editor } from '../../Editor'
  * @public
  */
 export class CollaboratorsManager {
-	constructor(private readonly editor: Editor) {
+	constructor(private readonly editor: Editor) {}
+
+	private _visibilityClockStarted = false
+
+	private _startVisibilityClock() {
+		if (this._visibilityClockStarted) return
+		this._visibilityClockStarted = true
+
 		// Editor disposes `editor.timers` on its own teardown, so the interval is
 		// automatically cleared when the editor is disposed.
-		editor.timers.setInterval(() => {
+		this.editor.timers.setInterval(() => {
 			this._visibilityClock.set(Date.now())
-		}, editor.options.collaboratorCheckIntervalMs)
+		}, this.editor.options.collaboratorCheckIntervalMs)
 	}
 
 	/**
@@ -75,14 +78,39 @@ export class CollaboratorsManager {
 	 */
 	@computed
 	getVisibleCollaborators(): TLInstancePresence[] {
+		const { editor } = this
+		const { collaboratorInactiveTimeoutMs, collaboratorIdleTimeoutMs } = editor.options
+
+		this._startVisibilityClock()
 		this._visibilityClock.get()
 		const now = Date.now()
-		return this.getCollaborators().filter((presence) => {
+		const collaborators = this.getCollaborators()
+		if (!collaborators.length) return EMPTY_ARRAY
+
+		const { followingUserId, highlightedUserIds } = this.editor.getInstanceState()
+		const currentUserId = this.editor.user.getId()
+
+		return collaborators.filter((presence) => {
+			const { lastActivityTimestamp, userId, chatMessage } = presence
+
 			// Treat a missing `lastActivityTimestamp` as "active right now" (elapsed = 0)
 			// so newly-joined peers aren't immediately classified as idle/inactive.
-			const elapsed = Math.max(0, now - (presence.lastActivityTimestamp ?? now))
-			const state = getCollaboratorStateFromElapsedTime(this.editor, elapsed)
-			return shouldShowCollaborator(this.editor, presence, state)
+			const elapsed = Math.max(0, now - (lastActivityTimestamp ?? now))
+
+			if (elapsed > collaboratorInactiveTimeoutMs) {
+				// Inactive: If they're inactive, only show if we're following them or they're highlighted
+				return followingUserId === userId || highlightedUserIds.includes(userId)
+			}
+
+			if (elapsed > collaboratorIdleTimeoutMs) {
+				// Idle: If they're idle and following us, hide them unless they have a chat message or are highlighted
+				if (presence.followingUserId === currentUserId) {
+					return !!(chatMessage || highlightedUserIds.includes(userId))
+				}
+			}
+
+			// Active
+			return true
 		})
 	}
 

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

@@ -2,6 +2,10 @@ import { EASINGS } from '../../../primitives/easings'
 import { Vec } from '../../../primitives/Vec'
 import type { Editor } from '../../Editor'
 
+// Tuned for touch/small-screen feel; adjust together with coarsePointerWidth.
+const EDGE_SCROLL_SMALL_SCREEN_THRESHOLD_PX = 1000
+const EDGE_SCROLL_SMALL_SCREEN_SPEED_FACTOR = 0.612
+
 /** @public */
 export class EdgeScrollManager {
 	constructor(public editor: Editor) {}
@@ -115,8 +119,14 @@ export class EdgeScrollManager {
 		const screenBounds = editor.getViewportScreenBounds()
 
 		// Determines how much the speed is affected by the screen size
-		const screenSizeFactorX = screenBounds.w < 1000 ? 0.612 : 1
-		const screenSizeFactorY = screenBounds.h < 1000 ? 0.612 : 1
+		const screenSizeFactorX =
+			screenBounds.w < EDGE_SCROLL_SMALL_SCREEN_THRESHOLD_PX
+				? EDGE_SCROLL_SMALL_SCREEN_SPEED_FACTOR
+				: 1
+		const screenSizeFactorY =
+			screenBounds.h < EDGE_SCROLL_SMALL_SCREEN_THRESHOLD_PX
+				? EDGE_SCROLL_SMALL_SCREEN_SPEED_FACTOR
+				: 1
 
 		// Determines the base speed of the scroll
 		const zoomLevel = editor.getZoomLevel()

packages/editor/src/lib/editor/managers/FocusManager/FocusManager.test.ts

@@ -334,6 +334,13 @@ describe('FocusManager', () => {
 
 			expect(callOrder).toEqual(['complete', 'blur'])
 		})
+
+		it('should complete without blurring the container when blurContainer is false', () => {
+			focusManager.blur({ blurContainer: false })
+
+			expect(editor.complete).toHaveBeenCalled()
+			expect(mockContainer.blur).not.toHaveBeenCalled()
+		})
 	})
 
 	describe('dispose', () => {

packages/editor/src/lib/editor/managers/FocusManager/FocusManager.ts

@@ -80,9 +80,9 @@ export class FocusManager {
 		this.editor.getContainer().focus()
 	}
 
-	blur() {
+	blur({ blurContainer = true } = {}) {
 		this.editor.complete() // stop any interaction
-		this.editor.getContainer().blur() // blur the container
+		if (blurContainer) this.editor.getContainer().blur() // blur the container
 	}
 
 	dispose() {

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

@@ -7,6 +7,9 @@ import { isAccelKey } from '../../../utils/keyboard'
 import type { Editor } from '../../Editor'
 import { TLPinchEventInfo, TLPointerEventInfo, TLWheelEventInfo } from '../../types/event-types'
 
+const POINTER_VELOCITY_REFERENCE_INTERVAL_MS = 16
+const POINTER_VELOCITY_REFERENCE_SMOOTHING = 0.5
+
 /** @public */
 export class InputsManager {
 	constructor(private readonly editor: Editor) {}
@@ -473,8 +476,14 @@ export class InputsManager {
 		const length = delta.len()
 		const direction = length ? delta.div(length) : new Vec(0, 0)
 
-		// consider adjusting this with an easing rather than a linear interpolation
-		const next = pointerVelocity.clone().lrp(direction.mul(length / elapsed), 0.5)
+		// Preserve the old 16ms smoothing with alpha = 1 - (1 - 0.5)^(elapsed / 16).
+		const smoothing =
+			1 -
+			Math.pow(
+				1 - POINTER_VELOCITY_REFERENCE_SMOOTHING,
+				elapsed / POINTER_VELOCITY_REFERENCE_INTERVAL_MS
+			)
+		const next = pointerVelocity.clone().lrp(direction.mul(length / elapsed), smoothing)
 
 		// if the velocity is very small, just set it to 0
 		if (Math.abs(next.x) < 0.01) next.x = 0

packages/editor/src/lib/hooks/usePeerIds.ts

@@ -4,6 +4,7 @@ import { useEditor } from './useEditor'
 
 /**
  * Reactive list of peer user IDs for collaborators currently shown in the UI.
+ * This list includes user ids who are not on the user's current page.
  * Mirrors {@link Editor.getVisibleCollaborators} — peers fade out as they
  * transition to idle/inactive, without requiring a manual re-render.
  *