@tldraw/editor 4.3.0 → 4.4.0-canary.15cff7ea86f8

package/src/lib/editor/Editor.ts

@@ -149,6 +149,7 @@ 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 { SpatialIndexManager } from './managers/SpatialIndexManager/SpatialIndexManager'
 import { TextManager } from './managers/TextManager/TextManager'
 import { TickManager } from './managers/TickManager/TickManager'
 import { UserPreferencesManager } from './managers/UserPreferencesManager/UserPreferencesManager'
@@ -308,6 +309,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		this.snaps = new SnapManager(this)
 
+		this._spatialIndex = new SpatialIndexManager(this)
+		this.disposables.add(() => this._spatialIndex.dispose())
+
 		this.disposables.add(this.timers.dispose)
 
 		this._cameraOptions.set({ ...DEFAULT_CAMERA_OPTIONS, ...cameraOptions })
@@ -895,6 +899,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	readonly snaps: SnapManager
 
+	private readonly _spatialIndex: SpatialIndexManager
+
 	/**
 	 * A manager for the any asynchronous events and making sure they're
 	 * cleaned up upon disposal.
@@ -5135,6 +5141,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	private _notVisibleShapes = notVisibleShapes(this)
+	private _culledShapesCache: Set<TLShapeId> | null = null
 
 	/**
 	 * Get culled shapes (those that should not render), taking into account which shapes are selected or editing.
@@ -5146,16 +5153,41 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const notVisibleShapes = this.getNotVisibleShapes()
 		const selectedShapeIds = this.getSelectedShapeIds()
 		const editingId = this.getEditingShapeId()
-		const culledShapes = new Set<TLShapeId>(notVisibleShapes)
+		const nextValue = new Set<TLShapeId>(notVisibleShapes)
 		// we don't cull the shape we are editing
 		if (editingId) {
-			culledShapes.delete(editingId)
+			nextValue.delete(editingId)
 		}
 		// we also don't cull selected shapes
 		selectedShapeIds.forEach((id) => {
-			culledShapes.delete(id)
+			nextValue.delete(id)
 		})
-		return culledShapes
+
+		// Cache optimization: return same Set object if contents unchanged
+		// This allows consumers to use === comparison and prevents unnecessary re-renders
+		const prevValue = this._culledShapesCache
+		if (prevValue) {
+			// If sizes differ, contents must differ
+			if (prevValue.size !== nextValue.size) {
+				this._culledShapesCache = nextValue
+				return nextValue
+			}
+
+			// Check if all elements are the same
+			for (const id of prevValue) {
+				if (!nextValue.has(id)) {
+					// Found a difference, update cache and return new set
+					this._culledShapesCache = nextValue
+					return nextValue
+				}
+			}
+
+			// Loop completed without finding differences - contents identical
+			return prevValue
+		}
+
+		this._culledShapesCache = nextValue
+		return nextValue
 	}
 
 	/**
@@ -5222,11 +5254,18 @@ export class Editor extends EventEmitter<TLEventMap> {
 		let inMarginClosestToEdgeDistance = Infinity
 		let inMarginClosestToEdgeHit: TLShape | null = null
 
+		// Use larger margin for spatial search to account for edge distance checks
+		const searchMargin = Math.max(innerMargin, outerMargin, this.options.hitTestMargin / zoomLevel)
+		const candidateIds = this._spatialIndex.getShapeIdsAtPoint(point, searchMargin)
+
 		const shapesToCheck = (
 			opts.renderingOnly
 				? this.getCurrentPageRenderingShapesSorted()
 				: this.getCurrentPageShapesSorted()
 		).filter((shape) => {
+			// Frames have labels positioned above the shape (outside bounds), so always include them
+			if (!candidateIds.has(shape.id) && !this.isShapeOfType(shape, 'frame')) return false
+
 			if (
 				(shape.isLocked && !hitLocked) ||
 				this.isShapeHidden(shape) ||
@@ -5412,11 +5451,41 @@ export class Editor extends EventEmitter<TLEventMap> {
 		point: VecLike,
 		opts = {} as { margin?: number; hitInside?: boolean }
 	): TLShape[] {
+		const margin = opts.margin ?? 0
+		const candidateIds = this._spatialIndex.getShapeIdsAtPoint(point, margin)
+
+		// Get all page shapes in z-index order and filter to candidates that pass isPointInShape
+		// Frames are always checked because their labels can be outside their bounds
 		return this.getCurrentPageShapesSorted()
-			.filter((shape) => !this.isShapeHidden(shape) && this.isPointInShape(shape, point, opts))
+			.filter((shape) => {
+				if (this.isShapeHidden(shape)) return false
+				if (!candidateIds.has(shape.id) && !this.isShapeOfType(shape, 'frame')) return false
+				return this.isPointInShape(shape, point, opts)
+			})
 			.reverse()
 	}
 
+	/**
+	 * Get shape IDs within the given bounds.
+	 *
+	 * Note: Uses shape page bounds only. Frames with labels outside their bounds
+	 * may not be included even if the label is within the search bounds.
+	 *
+	 * Note: Results are unordered. If you need z-order, combine with sorted shapes:
+	 * ```ts
+	 * const candidates = editor.getShapeIdsInsideBounds(bounds)
+	 * const sorted = editor.getCurrentPageShapesSorted().filter(s => candidates.has(s.id))
+	 * ```
+	 *
+	 * @param bounds - The bounds to search within.
+	 * @returns Unordered set of shape IDs within the given bounds.
+	 *
+	 * @internal
+	 */
+	getShapeIdsInsideBounds(bounds: Box): Set<TLShapeId> {
+		return this._spatialIndex.getShapeIdsInsideBounds(bounds)
+	}
+
 	/**
 	 * Test whether a point (in the current page space) will will a shape. This method takes into account masks,
 	 * such as when a shape is the child of a frame and is partially clipped by the frame.
@@ -10475,7 +10544,16 @@ export class Editor extends EventEmitter<TLEventMap> {
 								}
 							}
 
-							const zoom = cz + (delta ?? 0) * zoomSpeed * cz
+							// because we can't for sure detect whether a user is using a mouse or a trackpad,
+							// we need to check the input mode preference, and only invert the zoom direction
+							// if the user has specifically set it to a mouse.
+							const isZoomDirectionInverted =
+								(this.user.getUserPreferences().isZoomDirectionInverted && inputMode === 'mouse') ??
+								false
+							const deltaValue = delta ?? 0
+							const finalDelta = isZoomDirectionInverted ? -deltaValue : deltaValue
+
+							const zoom = cz + finalDelta * zoomSpeed * cz
 							this._setCamera(new Vec(cx + x / zoom - x / cz, cy + y / zoom - y / cz, zoom), {
 								immediate: true,
 							})

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

@@ -9,60 +9,34 @@ import { Editor } from '../Editor'
  * @returns Incremental derivation of non visible shapes.
  */
 export function notVisibleShapes(editor: Editor) {
-	return computed<Set<TLShapeId>>('notVisibleShapes', function updateNotVisibleShapes(prevValue) {
-		const shapeIds = editor.getCurrentPageShapeIds()
-		const nextValue = new Set<TLShapeId>()
-
-		// Extract viewport bounds once to avoid repeated property access
+	return computed<Set<TLShapeId>>('notVisibleShapes', function (prevValue) {
+		const allShapeIds = editor.getCurrentPageShapeIds()
 		const viewportPageBounds = editor.getViewportPageBounds()
-		const viewMinX = viewportPageBounds.minX
-		const viewMinY = viewportPageBounds.minY
-		const viewMaxX = viewportPageBounds.maxX
-		const viewMaxY = viewportPageBounds.maxY
+		const visibleIds = editor.getShapeIdsInsideBounds(viewportPageBounds)
 
-		for (const id of shapeIds) {
-			const pageBounds = editor.getShapePageBounds(id)
-
-			// Hybrid check: if bounds exist and shape overlaps viewport, it's visible.
-			// This inlines Box.Collides to avoid function call overhead and the
-			// redundant Contains check that Box.Includes was doing.
-			if (
-				pageBounds !== undefined &&
-				pageBounds.maxX >= viewMinX &&
-				pageBounds.minX <= viewMaxX &&
-				pageBounds.maxY >= viewMinY &&
-				pageBounds.minY <= viewMaxY
-			) {
-				continue
-			}
+		const nextValue = new Set<TLShapeId>()
 
-			// Shape is outside viewport or has no bounds - check if it can be culled.
-			// We defer getShape and canCull checks until here since most shapes are
-			// typically visible and we can skip these calls for them.
-			const shape = editor.getShape(id)
-			if (!shape) continue
+		// Non-visible shapes are all shapes minus visible shapes
+		for (const id of allShapeIds) {
+			if (!visibleIds.has(id)) {
+				const shape = editor.getShape(id)
+				if (!shape) continue
 
-			const canCull = editor.getShapeUtil(shape.type).canCull(shape)
-			if (!canCull) continue
+				const canCull = editor.getShapeUtil(shape.type).canCull(shape)
+				if (!canCull) continue
 
-			nextValue.add(id)
+				nextValue.add(id)
+			}
 		}
 
-		if (isUninitialized(prevValue)) {
+		if (isUninitialized(prevValue) || prevValue.size !== nextValue.size) {
 			return nextValue
 		}
 
-		// If there are more or less shapes, we know there's a change
-		if (prevValue.size !== nextValue.size) return nextValue
-
-		// If any of the old shapes are not in the new set, we know there's a change
 		for (const prev of prevValue) {
-			if (!nextValue.has(prev)) {
-				return nextValue
-			}
+			if (!nextValue.has(prev)) return nextValue
 		}
 
-		// If we've made it here, we know that the set is the same
 		return prevValue
 	})
 }

package/src/lib/editor/managers/SpatialIndexManager/RBushIndex.ts

@@ -0,0 +1,144 @@
+import type { TLShapeId } from '@tldraw/tlschema'
+import RBush from 'rbush'
+import { Box } from '../../../primitives/Box'
+
+/**
+ * Element stored in the R-tree spatial index.
+ * Contains bounds (minX, minY, maxX, maxY) and shape ID.
+ */
+export interface SpatialElement {
+	minX: number
+	minY: number
+	maxX: number
+	maxY: number
+	id: TLShapeId
+}
+
+/**
+ * Custom RBush class for tldraw shapes.
+ */
+class TldrawRBush extends RBush<SpatialElement> {}
+
+/**
+ * Wrapper around RBush R-tree for efficient spatial queries.
+ * Maintains a map of elements currently in the tree for efficient updates.
+ */
+export class RBushIndex {
+	private rBush: TldrawRBush
+	private elementsInTree: Map<TLShapeId, SpatialElement>
+
+	constructor() {
+		this.rBush = new TldrawRBush()
+		this.elementsInTree = new Map()
+	}
+
+	/**
+	 * Search for shapes within the given bounds.
+	 * Returns set of shape IDs that intersect with the bounds.
+	 */
+	search(bounds: Box): Set<TLShapeId> {
+		const results = this.rBush.search({
+			minX: bounds.minX,
+			minY: bounds.minY,
+			maxX: bounds.maxX,
+			maxY: bounds.maxY,
+		})
+		return new Set(results.map((e: SpatialElement) => e.id))
+	}
+
+	/**
+	 * Insert or update a shape in the spatial index.
+	 * If the shape already exists, it will be removed first to prevent duplicates.
+	 */
+	upsert(id: TLShapeId, bounds: Box): void {
+		// Remove existing entry to prevent map-tree desync
+		const existing = this.elementsInTree.get(id)
+		if (existing) {
+			this.rBush.remove(existing)
+		}
+
+		const element: SpatialElement = {
+			minX: bounds.minX,
+			minY: bounds.minY,
+			maxX: bounds.maxX,
+			maxY: bounds.maxY,
+			id,
+		}
+		this.rBush.insert(element)
+		this.elementsInTree.set(id, element)
+	}
+
+	/**
+	 * Remove a shape from the spatial index.
+	 */
+	remove(id: TLShapeId): void {
+		const element = this.elementsInTree.get(id)
+		if (element) {
+			this.rBush.remove(element)
+			this.elementsInTree.delete(id)
+		}
+	}
+
+	/**
+	 * Bulk load elements into the spatial index.
+	 * More efficient than individual inserts for initial loading.
+	 */
+	bulkLoad(elements: SpatialElement[]): void {
+		this.rBush.load(elements)
+		for (const element of elements) {
+			this.elementsInTree.set(element.id, element)
+		}
+	}
+
+	/**
+	 * Clear all elements from the spatial index.
+	 */
+	clear(): void {
+		this.rBush.clear()
+		this.elementsInTree.clear()
+	}
+
+	/**
+	 * Check if a shape is in the spatial index.
+	 */
+	has(id: TLShapeId): boolean {
+		return this.elementsInTree.has(id)
+	}
+
+	/**
+	 * Get the number of elements in the spatial index.
+	 */
+	getSize(): number {
+		return this.elementsInTree.size
+	}
+
+	/**
+	 * Get all shape IDs currently in the spatial index.
+	 */
+	getAllShapeIds(): TLShapeId[] {
+		return Array.from(this.elementsInTree.keys())
+	}
+
+	/**
+	 * Get the bounds currently stored in the spatial index for a shape.
+	 * Returns undefined if the shape is not in the index.
+	 */
+	getBounds(id: TLShapeId): Box | undefined {
+		const element = this.elementsInTree.get(id)
+		if (!element) return undefined
+		return new Box(
+			element.minX,
+			element.minY,
+			element.maxX - element.minX,
+			element.maxY - element.minY
+		)
+	}
+
+	/**
+	 * Dispose of the spatial index.
+	 * Clears all data structures to prevent memory leaks.
+	 */
+	dispose(): void {
+		this.clear()
+	}
+}

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

@@ -0,0 +1,214 @@
+import { Computed, RESET_VALUE, computed, isUninitialized } from '@tldraw/state'
+import type { RecordsDiff } from '@tldraw/store'
+import type { TLRecord } from '@tldraw/tlschema'
+import { TLPageId, TLShape, TLShapeId, isShape } from '@tldraw/tlschema'
+import { objectMapValues } from '@tldraw/utils'
+import { Box } from '../../../primitives/Box'
+import type { Editor } from '../../Editor'
+import { RBushIndex, type SpatialElement } from './RBushIndex'
+
+/**
+ * Manages spatial indexing for efficient shape location queries.
+ *
+ * Uses an R-tree (via RBush) to enable O(log n) spatial queries instead of O(n) iteration.
+ * Handles shapes with computed bounds (arrows, groups, custom shapes) by checking all shapes'
+ * bounds on each update using the reactive bounds cache.
+ *
+ * Key features:
+ * - Incremental updates using filterHistory pattern
+ * - Leverages existing bounds cache reactivity for dependency tracking
+ * - Works with any custom shape type with computed bounds
+ * - Per-page index (rebuilds on page change)
+ * - Optimized for viewport culling queries
+ *
+ * @internal
+ */
+export class SpatialIndexManager {
+	private rbush: RBushIndex
+	private spatialIndexComputed: Computed<number>
+	private lastPageId: TLPageId | null = null
+
+	constructor(public readonly editor: Editor) {
+		this.rbush = new RBushIndex()
+		this.spatialIndexComputed = this.createSpatialIndexComputed()
+	}
+
+	private createSpatialIndexComputed() {
+		const shapeHistory = this.editor.store.query.filterHistory('shape')
+
+		return computed<number>('spatialIndex', (_prevValue, lastComputedEpoch) => {
+			if (isUninitialized(_prevValue)) {
+				return this.buildFromScratch(lastComputedEpoch)
+			}
+
+			const shapeDiff = shapeHistory.getDiffSince(lastComputedEpoch)
+
+			if (shapeDiff === RESET_VALUE) {
+				return this.buildFromScratch(lastComputedEpoch)
+			}
+
+			const currentPageId = this.editor.getCurrentPageId()
+			if (this.lastPageId !== currentPageId) {
+				return this.buildFromScratch(lastComputedEpoch)
+			}
+
+			// No shape changes - index is already up to date
+			if (shapeDiff.length === 0) {
+				return lastComputedEpoch
+			}
+
+			// Process incremental updates
+			this.processIncrementalUpdate(shapeDiff)
+
+			return lastComputedEpoch
+		})
+	}
+
+	private buildFromScratch(epoch: number): number {
+		this.rbush.clear()
+		this.lastPageId = this.editor.getCurrentPageId()
+
+		const shapes = this.editor.getCurrentPageShapes()
+		const elements: SpatialElement[] = []
+
+		// Collect all shape elements for bulk loading
+		for (const shape of shapes) {
+			const bounds = this.editor.getShapePageBounds(shape.id)
+			if (bounds) {
+				elements.push({
+					minX: bounds.minX,
+					minY: bounds.minY,
+					maxX: bounds.maxX,
+					maxY: bounds.maxY,
+					id: shape.id,
+				})
+			}
+		}
+
+		// Bulk load for efficiency
+		this.rbush.bulkLoad(elements)
+
+		return epoch
+	}
+
+	private processIncrementalUpdate(shapeDiff: RecordsDiff<TLRecord>[]): void {
+		// Track shapes we've already processed from the diff
+		const processedShapeIds = new Set<TLShapeId>()
+
+		// 1. Process shape additions, removals, and updates from diff
+		for (const changes of shapeDiff) {
+			// Handle additions (only for shapes on current page)
+			for (const shape of objectMapValues(changes.added) as TLShape[]) {
+				if (isShape(shape) && this.editor.getAncestorPageId(shape) === this.lastPageId) {
+					const bounds = this.editor.getShapePageBounds(shape.id)
+					if (bounds) {
+						this.rbush.upsert(shape.id, bounds)
+					}
+					processedShapeIds.add(shape.id)
+				}
+			}
+
+			// Handle removals
+			for (const shape of objectMapValues(changes.removed) as TLShape[]) {
+				if (isShape(shape)) {
+					this.rbush.remove(shape.id)
+					processedShapeIds.add(shape.id)
+				}
+			}
+
+			// Handle updated shapes: page changes and bounds updates
+			for (const [, to] of objectMapValues(changes.updated) as [TLShape, TLShape][]) {
+				if (!isShape(to)) continue
+				processedShapeIds.add(to.id)
+
+				const isOnPage = this.editor.getAncestorPageId(to) === this.lastPageId
+
+				if (isOnPage) {
+					const bounds = this.editor.getShapePageBounds(to.id)
+					if (bounds) {
+						this.rbush.upsert(to.id, bounds)
+					}
+				} else {
+					this.rbush.remove(to.id)
+				}
+			}
+		}
+
+		// 2. Check remaining shapes in index for bounds changes
+		// This handles shapes with computed bounds (arrows bound to moved shapes, groups with moved children, etc.)
+		const allShapeIds = this.rbush.getAllShapeIds()
+
+		for (const shapeId of allShapeIds) {
+			if (processedShapeIds.has(shapeId)) continue
+
+			const currentBounds = this.editor.getShapePageBounds(shapeId)
+			const indexedBounds = this.rbush.getBounds(shapeId)
+
+			if (!this.areBoundsEqual(currentBounds, indexedBounds)) {
+				if (currentBounds) {
+					this.rbush.upsert(shapeId, currentBounds)
+				} else {
+					this.rbush.remove(shapeId)
+				}
+			}
+		}
+	}
+
+	private areBoundsEqual(a: Box | undefined, b: Box | undefined): boolean {
+		if (!a && !b) return true
+		if (!a || !b) return false
+		return a.minX === b.minX && a.minY === b.minY && a.maxX === b.maxX && a.maxY === b.maxY
+	}
+
+	/**
+	 * Get shape IDs within the given bounds.
+	 * Optimized for viewport culling queries.
+	 *
+	 * Note: Results are unordered. If you need z-order, combine with sorted shapes:
+	 * ```ts
+	 * const candidates = editor.spatialIndex.getShapeIdsInsideBounds(bounds)
+	 * const sorted = editor.getCurrentPageShapesSorted().filter(s => candidates.has(s.id))
+	 * ```
+	 *
+	 * @param bounds - The bounds to search within
+	 * @returns Unordered set of shape IDs within the bounds
+	 *
+	 * @public
+	 */
+	getShapeIdsInsideBounds(bounds: Box): Set<TLShapeId> {
+		this.spatialIndexComputed.get()
+		return this.rbush.search(bounds)
+	}
+
+	/**
+	 * Get shape IDs at a point (with optional margin).
+	 * Creates a small bounding box around the point and searches the spatial index.
+	 *
+	 * Note: Results are unordered. If you need z-order, combine with sorted shapes:
+	 * ```ts
+	 * const candidates = editor.spatialIndex.getShapeIdsAtPoint(point, margin)
+	 * const sorted = editor.getCurrentPageShapesSorted().filter(s => candidates.has(s.id))
+	 * ```
+	 *
+	 * @param point - The point to search at
+	 * @param margin - The margin around the point to search (default: 0)
+	 * @returns Unordered set of shape IDs that could potentially contain the point
+	 *
+	 * @public
+	 */
+	getShapeIdsAtPoint(point: { x: number; y: number }, margin = 0): Set<TLShapeId> {
+		this.spatialIndexComputed.get()
+		return this.rbush.search(new Box(point.x - margin, point.y - margin, margin * 2, margin * 2))
+	}
+
+	/**
+	 * Dispose of the spatial index manager.
+	 * Clears the R-tree to prevent memory leaks.
+	 *
+	 * @public
+	 */
+	dispose(): void {
+		this.rbush.dispose()
+		this.lastPageId = null
+	}
+}

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

@@ -31,6 +31,7 @@ describe('UserPreferencesManager', () => {
 		isDynamicSizeMode: false,
 		isPasteAtCursorMode: false,
 		inputMode: null,
+		isZoomDirectionInverted: false,
 		...overrides,
 	})
 
@@ -235,6 +236,7 @@ describe('UserPreferencesManager', () => {
 				isWrapMode: mockUserPreferences.isWrapMode,
 				isDynamicResizeMode: mockUserPreferences.isDynamicSizeMode,
 				inputMode: mockUserPreferences.inputMode,
+				isZoomDirectionInverted: mockUserPreferences.isZoomDirectionInverted,
 			})
 		})
 
@@ -475,6 +477,24 @@ describe('UserPreferencesManager', () => {
 				expect(userPreferencesManager.getInputMode()).toBe('mouse')
 			})
 		})
+
+		describe('getIsZoomDirectionInverted', () => {
+			it('should return user zoom direction inverted setting', () => {
+				expect(userPreferencesManager.getIsZoomDirectionInverted()).toBe(false)
+			})
+
+			it('should return default when null', () => {
+				userPreferencesAtom.set({ ...mockUserPreferences, isZoomDirectionInverted: null })
+				expect(userPreferencesManager.getIsZoomDirectionInverted()).toBe(
+					defaultUserPreferences.isZoomDirectionInverted
+				)
+			})
+
+			it('should return true when inverted', () => {
+				userPreferencesAtom.set({ ...mockUserPreferences, isZoomDirectionInverted: true })
+				expect(userPreferencesManager.getIsZoomDirectionInverted()).toBe(true)
+			})
+		})
 	})
 
 	describe('reactive behavior', () => {
@@ -536,6 +556,7 @@ describe('UserPreferencesManager', () => {
 				isWrapMode: null,
 				isDynamicSizeMode: null,
 				isPasteAtCursorMode: null,
+				isZoomDirectionInverted: null,
 			})
 
 			userPreferencesAtom.set(nullPrefs)
@@ -558,6 +579,9 @@ describe('UserPreferencesManager', () => {
 			expect(userPreferencesManager.getIsPasteAtCursorMode()).toBe(
 				defaultUserPreferences.isPasteAtCursorMode
 			)
+			expect(userPreferencesManager.getIsZoomDirectionInverted()).toBe(
+				defaultUserPreferences.isZoomDirectionInverted
+			)
 		})
 
 		it('should handle matchMedia with null response', () => {

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

@@ -51,6 +51,7 @@ export class UserPreferencesManager {
 			isDynamicResizeMode: this.getIsDynamicResizeMode(),
 			enhancedA11yMode: this.getEnhancedA11yMode(),
 			inputMode: this.getInputMode(),
+			isZoomDirectionInverted: this.getIsZoomDirectionInverted(),
 		}
 	}
 
@@ -131,4 +132,11 @@ export class UserPreferencesManager {
 	@computed getInputMode() {
 		return this.user.userPreferences.get().inputMode ?? defaultUserPreferences.inputMode
 	}
+
+	@computed getIsZoomDirectionInverted() {
+		return (
+			this.user.userPreferences.get().isZoomDirectionInverted ??
+			defaultUserPreferences.isZoomDirectionInverted
+		)
+	}
 }

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '4.3.0'
+export const version = '4.4.0-canary.15cff7ea86f8'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2026-01-21T11:56:39.106Z',
-	patch: '2026-01-21T11:56:39.106Z',
+	minor: '2026-01-26T14:52:43.591Z',
+	patch: '2026-01-26T14:52:43.591Z',
 }