@tldraw/editor 3.16.0-canary.cf24aedcd577 → 3.16.0-canary.d98fc0b9bd6a

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "3.16.0-canary.cf24aedcd577",
+  "version": "3.16.0-canary.d98fc0b9bd6a",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -34,27 +34,28 @@
     "src"
   ],
   "scripts": {
-    "test-ci": "lazy inherit",
-    "test": "yarn run -T jest",
+    "test-ci": "yarn run -T vitest run --passWithNoTests",
+    "test": "yarn run -T vitest --passWithNoTests",
     "benchmark": "yarn run -T tsx ./internal/scripts/benchmark.ts",
-    "test-coverage": "lazy inherit",
+    "test-coverage": "yarn run -T vitest run --coverage --passWithNoTests",
     "build": "yarn run -T tsx ../../internal/scripts/build-package.ts",
     "build-api": "yarn run -T tsx ../../internal/scripts/build-api.ts",
     "prepack": "yarn run -T tsx ../../internal/scripts/prepack.ts",
     "postpack": "../../internal/scripts/postpack.sh",
     "pack-tarball": "yarn pack",
-    "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
+    "lint": "yarn run -T tsx ../../internal/scripts/lint.ts",
+    "context": "yarn run -T tsx ../../internal/scripts/context.ts"
   },
   "dependencies": {
     "@tiptap/core": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
-    "@tldraw/state": "3.16.0-canary.cf24aedcd577",
-    "@tldraw/state-react": "3.16.0-canary.cf24aedcd577",
-    "@tldraw/store": "3.16.0-canary.cf24aedcd577",
-    "@tldraw/tlschema": "3.16.0-canary.cf24aedcd577",
-    "@tldraw/utils": "3.16.0-canary.cf24aedcd577",
-    "@tldraw/validate": "3.16.0-canary.cf24aedcd577",
+    "@tldraw/state": "3.16.0-canary.d98fc0b9bd6a",
+    "@tldraw/state-react": "3.16.0-canary.d98fc0b9bd6a",
+    "@tldraw/store": "3.16.0-canary.d98fc0b9bd6a",
+    "@tldraw/tlschema": "3.16.0-canary.d98fc0b9bd6a",
+    "@tldraw/utils": "3.16.0-canary.d98fc0b9bd6a",
+    "@tldraw/validate": "3.16.0-canary.d98fc0b9bd6a",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",
@@ -69,41 +70,17 @@
   },
   "devDependencies": {
     "@peculiar/webcrypto": "^1.5.0",
-    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^15.0.7",
     "@types/benchmark": "^2.1.5",
     "@types/react": "^18.3.18",
     "@types/wicg-file-system-access": "^2020.9.8",
     "benchmark": "^2.1.4",
     "fake-indexeddb": "^4.0.2",
-    "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.7.0",
     "lazyrepo": "0.0.0-alpha.27",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "resize-observer-polyfill": "^1.5.1"
-  },
-  "jest": {
-    "preset": "../../internal/config/jest/node/jest-preset.js",
-    "testEnvironment": "../../../packages/utils/patchedJestJsDom.js",
-    "fakeTimers": {
-      "enableGlobally": true
-    },
-    "testPathIgnorePatterns": [
-      "^.+\\.*.css$"
-    ],
-    "moduleNameMapper": {
-      "^~(.*)": "<rootDir>/src/$1",
-      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
-    },
-    "setupFiles": [
-      "raf/polyfill",
-      "jest-canvas-mock",
-      "<rootDir>/setupTests.js"
-    ],
-    "setupFilesAfterEnv": [
-      "../../internal/config/setupJest.ts"
-    ]
+    "resize-observer-polyfill": "^1.5.1",
+    "vitest": "^3.2.4"
   },
   "module": "dist-esm/index.mjs",
   "source": "src/index.ts",

package/src/lib/components/default-components/DefaultCollaboratorHint.tsx

@@ -44,7 +44,7 @@ export function DefaultCollaboratorHint({
 				href={`#${cursorHintId}`}
 				color={color}
 				strokeWidth={3}
-				stroke="var(--color-background)"
+				stroke="var(--tl-color-background)"
 			/>
 			<use href={`#${cursorHintId}`} color={color} opacity={opacity} />
 		</svg>

package/src/lib/components/default-components/DefaultErrorFallback.tsx

@@ -75,7 +75,7 @@ export const DefaultErrorFallback: TLErrorFallbackComponent = ({ error, editor }
 
 		// if we can't find a theme class from the app or from a parent, we have
 		// to fall back on using a media query:
-		if (typeof window !== 'undefined' && 'matchMedia' in window) {
+		if (typeof window !== 'undefined' && window.matchMedia) {
 			setIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches)
 		}
 	}, [isDarkModeFromApp])

package/src/lib/components/default-components/DefaultScribble.tsx

@@ -21,7 +21,7 @@ export function DefaultScribble({ scribble, zoom, color, opacity, className }: T
 			<path
 				className="tl-scribble"
 				d={getSvgPathFromPoints(scribble.points, false)}
-				stroke={color ?? `var(--color-${scribble.color})`}
+				stroke={color ?? `var(--tl-color-${scribble.color})`}
 				fill="none"
 				strokeWidth={8 / zoom}
 				opacity={opacity ?? scribble.opacity}

package/src/lib/components/default-components/DefaultShapeIndicator.tsx

@@ -87,7 +87,11 @@ export const DefaultShapeIndicator = memo(function DefaultShapeIndicator({
 
 	return (
 		<svg ref={rIndicator} className={classNames('tl-overlays__item', className)} aria-hidden="true">
-			<g className="tl-shape-indicator" stroke={color ?? 'var(--color-selected)'} opacity={opacity}>
+			<g
+				className="tl-shape-indicator"
+				stroke={color ?? 'var(--tl-color-selected)'}
+				opacity={opacity}
+			>
 				<InnerIndicator editor={editor} id={shapeId} />
 			</g>
 		</svg>

package/src/lib/config/TLUserPreferences.ts

@@ -135,7 +135,7 @@ function getRandomColor() {
 
 /** @internal */
 export function userPrefersReducedMotion() {
-	if (typeof window !== 'undefined' && 'matchMedia' in window) {
+	if (typeof window !== 'undefined' && window.matchMedia) {
 		return window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
 	}
 

package/src/lib/editor/Editor.test.ts

@@ -1,3 +1,4 @@
+import { vi } from 'vitest'
 import {
 	Box,
 	Geometry2d,
@@ -59,8 +60,8 @@ beforeEach(() => {
 		getContainer: () => document.body,
 	})
 	editor.setCameraOptions({ isLocked: true })
-	editor.setCamera = jest.fn()
-	editor.user.getAnimationSpeed = jest.fn()
+	editor.setCamera = vi.fn()
+	editor.user.getAnimationSpeed = vi.fn()
 })
 
 describe('centerOnPoint', () => {
@@ -94,13 +95,13 @@ describe('updateShape', () => {
 
 describe('zoomToFit', () => {
 	it('no-op when isLocked is set', () => {
-		editor.getCurrentPageShapeIds = jest.fn(() => new Set([createShapeId('box1')]))
+		editor.getCurrentPageShapeIds = vi.fn(() => new Set([createShapeId('box1')]))
 		editor.zoomToFit()
 		expect(editor.setCamera).not.toHaveBeenCalled()
 	})
 
 	it('sets camera when isLocked is set and force flag is set', () => {
-		editor.getCurrentPageShapeIds = jest.fn(() => new Set([createShapeId('box1')]))
+		editor.getCurrentPageShapeIds = vi.fn(() => new Set([createShapeId('box1')]))
 		editor.zoomToFit({ force: true })
 		expect(editor.setCamera).toHaveBeenCalled()
 	})
@@ -144,13 +145,13 @@ describe('zoomOut', () => {
 
 describe('zoomToSelection', () => {
 	it('no-op when isLocked is set', () => {
-		editor.getSelectionPageBounds = jest.fn(() => Box.From({ x: 0, y: 0, w: 100, h: 100 }))
+		editor.getSelectionPageBounds = vi.fn(() => Box.From({ x: 0, y: 0, w: 100, h: 100 }))
 		editor.zoomToSelection()
 		expect(editor.setCamera).not.toHaveBeenCalled()
 	})
 
 	it('sets camera when isLocked is set and force flag is set', () => {
-		editor.getSelectionPageBounds = jest.fn(() => Box.From({ x: 0, y: 0, w: 100, h: 100 }))
+		editor.getSelectionPageBounds = vi.fn(() => Box.From({ x: 0, y: 0, w: 100, h: 100 }))
 		editor.zoomToSelection({ force: true })
 		expect(editor.setCamera).toHaveBeenCalled()
 	})
@@ -286,7 +287,7 @@ describe('getShapesAtPoint', () => {
 
 	it('filters out hidden shapes', () => {
 		// Create a spy to mock isShapeHidden
-		const isShapeHiddenSpy = jest.spyOn(editor, 'isShapeHidden')
+		const isShapeHiddenSpy = vi.spyOn(editor, 'isShapeHidden')
 		isShapeHiddenSpy.mockImplementation((shape) => {
 			return typeof shape === 'string' ? shape === ids.shape3 : shape.id === ids.shape3
 		})
@@ -352,7 +353,7 @@ describe('getShapesAtPoint', () => {
 
 	it('returns empty array when all shapes are hidden', () => {
 		// Mock all shapes as hidden
-		const isShapeHiddenSpy = jest.spyOn(editor, 'isShapeHidden')
+		const isShapeHiddenSpy = vi.spyOn(editor, 'isShapeHidden')
 		isShapeHiddenSpy.mockReturnValue(true)
 
 		const shapes = editor.getShapesAtPoint({ x: 50, y: 50 })
@@ -692,7 +693,7 @@ describe('selectAll', () => {
 		const initialSelectedIds = editor.getSelectedShapeIds()
 
 		// Spy on setSelectedShapes to verify it's not called
-		const setSelectedShapesSpy = jest.spyOn(editor, 'setSelectedShapes')
+		const setSelectedShapesSpy = vi.spyOn(editor, 'setSelectedShapes')
 
 		// Call selectAll
 		editor.selectAll()
@@ -713,7 +714,7 @@ describe('selectAll', () => {
 		const initialSelectedIds = editor.getSelectedShapeIds()
 
 		// Spy on setSelectedShapes to verify it's not called
-		const setSelectedShapesSpy = jest.spyOn(editor, 'setSelectedShapes')
+		const setSelectedShapesSpy = vi.spyOn(editor, 'setSelectedShapes')
 
 		// Call selectAll
 		editor.selectAll()
@@ -818,7 +819,7 @@ describe('selectAll', () => {
 		const initialSelectedIds = Array.from(editor.getSelectedShapeIds())
 
 		// Spy on setSelectedShapes to verify it's not called
-		const setSelectedShapesSpy = jest.spyOn(editor, 'setSelectedShapes')
+		const setSelectedShapesSpy = vi.spyOn(editor, 'setSelectedShapes')
 
 		// Call selectAll
 		editor.selectAll()

package/src/lib/editor/Editor.ts

@@ -6333,7 +6333,17 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 			this.createShapes(shapesToCreate)
 			this.createBindings(bindingsToCreate)
-			this.setSelectedShapes(compact(ids.map((id) => shapeIds.get(id))))
+
+			this.setSelectedShapes(
+				compact(
+					ids.map((oldId) => {
+						const newId = shapeIds.get(oldId)
+						if (!newId) return null
+						if (!this.getShape(newId)) return null
+						return newId
+					})
+				)
+			)
 
 			if (offset !== undefined) {
 				// If we've offset the duplicated shapes, check to see whether their new bounds is entirely

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

@@ -1,12 +1,13 @@
+import { Mocked, vi } from 'vitest'
 import { Editor } from '../../Editor'
 import { TLClickEventInfo, TLPointerEventInfo } from '../../types/event-types'
 import { ClickManager } from './ClickManager'
 
 // Mock the Editor class
-jest.mock('../../Editor')
+vi.mock('../../Editor')
 
 describe('ClickManager', () => {
-	let editor: jest.Mocked<Editor>
+	let editor: Mocked<Editor>
 	let clickManager: ClickManager
 	let mockTimers: any
 
@@ -29,14 +30,14 @@ describe('ClickManager', () => {
 	})
 
 	beforeEach(() => {
-		jest.useFakeTimers()
+		vi.useFakeTimers()
 		mockTimers = {
-			setTimeout: jest.fn((fn, delay) => setTimeout(fn, delay)),
+			setTimeout: vi.fn((fn, delay) => setTimeout(fn, delay)),
 		}
 
 		editor = {
 			timers: mockTimers,
-			dispatch: jest.fn(),
+			dispatch: vi.fn(),
 			options: {
 				doubleClickDurationMs: 300,
 				multiClickDurationMs: 300,
@@ -46,7 +47,7 @@ describe('ClickManager', () => {
 			inputs: {
 				currentScreenPoint: { x: 0, y: 0 },
 			},
-			getInstanceState: jest.fn(() => ({
+			getInstanceState: vi.fn(() => ({
 				isCoarsePointer: false,
 			})),
 		} as any
@@ -55,8 +56,8 @@ describe('ClickManager', () => {
 	})
 
 	afterEach(() => {
-		jest.useRealTimers()
-		jest.clearAllMocks()
+		vi.useRealTimers()
+		vi.clearAllMocks()
 	})
 
 	describe('constructor and initial state', () => {
@@ -100,7 +101,7 @@ describe('ClickManager', () => {
 			clickManager.handlePointerEvent(pointerEvent)
 			expect(clickManager.clickState).toBe('pendingDouble')
 
-			jest.advanceTimersByTime(350)
+			vi.advanceTimersByTime(350)
 
 			expect(clickManager.clickState).toBe('idle')
 		})
@@ -141,7 +142,7 @@ describe('ClickManager', () => {
 			clickManager.handlePointerEvent(firstDown)
 			clickManager.handlePointerEvent(secondDown)
 
-			jest.advanceTimersByTime(350)
+			vi.advanceTimersByTime(350)
 
 			expect(editor.dispatch).toHaveBeenCalledWith(
 				expect.objectContaining({
@@ -235,7 +236,7 @@ describe('ClickManager', () => {
 			clickManager.handlePointerEvent(pointerDown) // second
 			clickManager.handlePointerEvent(pointerDown) // third
 
-			jest.advanceTimersByTime(350)
+			vi.advanceTimersByTime(350)
 
 			expect(editor.dispatch).toHaveBeenCalledWith(
 				expect.objectContaining({
@@ -255,7 +256,7 @@ describe('ClickManager', () => {
 			clickManager.handlePointerEvent(pointerDown) // third
 			clickManager.handlePointerEvent(pointerDown) // fourth
 
-			jest.advanceTimersByTime(350)
+			vi.advanceTimersByTime(350)
 
 			expect(editor.dispatch).toHaveBeenCalledWith(
 				expect.objectContaining({
@@ -277,7 +278,7 @@ describe('ClickManager', () => {
 				editor.options.doubleClickDurationMs
 			)
 
-			jest.clearAllMocks()
+			vi.clearAllMocks()
 
 			// Second click - should use multiClickDurationMs
 			clickManager.handlePointerEvent(pointerDown)
@@ -392,7 +393,7 @@ describe('ClickManager', () => {
 			clickManager.cancelDoubleClickTimeout()
 
 			// Advance time - should not dispatch settle event
-			jest.advanceTimersByTime(350)
+			vi.advanceTimersByTime(350)
 
 			expect(editor.dispatch).not.toHaveBeenCalled()
 			expect(clickManager.clickState).toBe('idle')

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

@@ -1,19 +1,20 @@
+import { Mock, Mocked, vi } from 'vitest'
 import { Box } from '../../../primitives/Box'
 import { Vec } from '../../../primitives/Vec'
 import { Editor } from '../../Editor'
 import { EdgeScrollManager } from './EdgeScrollManager'
 
 // Mock the Editor class
-jest.mock('../../Editor')
+vi.mock('../../Editor')
 
 describe('EdgeScrollManager', () => {
-	let editor: jest.Mocked<
+	let editor: Mocked<
 		Editor & {
-			user: { getEdgeScrollSpeed: jest.Mock }
-			getCamera: jest.Mock
-			getCameraOptions: jest.Mock
-			getZoomLevel: jest.Mock
-			getViewportScreenBounds: jest.Mock
+			user: { getEdgeScrollSpeed: Mock }
+			getCamera: Mock
+			getCameraOptions: Mock
+			getZoomLevel: Mock
+			getViewportScreenBounds: Mock
 		}
 	>
 	let edgeScrollManager: EdgeScrollManager
@@ -33,33 +34,33 @@ describe('EdgeScrollManager', () => {
 				isPanning: false,
 			},
 			user: {
-				getEdgeScrollSpeed: jest.fn(() => 1),
+				getEdgeScrollSpeed: vi.fn(() => 1),
 			},
-			getViewportScreenBounds: jest.fn(() => new Box(0, 0, 1000, 600)),
-			getInstanceState: jest.fn(
+			getViewportScreenBounds: vi.fn(() => new Box(0, 0, 1000, 600)),
+			getInstanceState: vi.fn(
 				() =>
 					({
 						isCoarsePointer: false,
 						insets: [false, false, false, false], // [top, right, bottom, left]
 					}) as any
 			),
-			getCameraOptions: jest.fn(() => ({
+			getCameraOptions: vi.fn(() => ({
 				isLocked: false,
 				panSpeed: 1,
 				zoomSpeed: 1,
 				zoomSteps: [1],
 				wheelBehavior: 'pan' as const,
 			})),
-			getZoomLevel: jest.fn(() => 1),
-			getCamera: jest.fn(() => new Vec(0, 0, 1)),
-			setCamera: jest.fn(),
+			getZoomLevel: vi.fn(() => 1),
+			getCamera: vi.fn(() => new Vec(0, 0, 1)),
+			setCamera: vi.fn(),
 		} as any
 
 		edgeScrollManager = new EdgeScrollManager(editor as any)
 	})
 
 	afterEach(() => {
-		jest.clearAllMocks()
+		vi.clearAllMocks()
 	})
 
 	describe('constructor and initialization', () => {

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

@@ -1,58 +1,59 @@
+import { Mock, Mocked, vi } from 'vitest'
 import { Editor } from '../../Editor'
 import { FocusManager } from './FocusManager'
 
 // Mock the Editor class
-jest.mock('../../Editor')
+vi.mock('../../Editor')
 
 describe('FocusManager', () => {
-	let editor: jest.Mocked<
+	let editor: Mocked<
 		Editor & {
 			sideEffects: {
-				registerAfterChangeHandler: jest.Mock
+				registerAfterChangeHandler: Mock
 			}
-			getInstanceState: jest.Mock
-			updateInstanceState: jest.Mock
-			getContainer: jest.Mock
-			isIn: jest.Mock
-			getSelectedShapeIds: jest.Mock
-			complete: jest.Mock
+			getInstanceState: Mock
+			updateInstanceState: Mock
+			getContainer: Mock
+			isIn: Mock
+			getSelectedShapeIds: Mock
+			complete: Mock
 		}
 	>
 	let focusManager: FocusManager
 	let mockContainer: HTMLElement
-	let mockDispose: jest.Mock
+	let mockDispose: Mock
 	let originalAddEventListener: typeof document.body.addEventListener
 	let originalRemoveEventListener: typeof document.body.removeEventListener
 
 	beforeEach(() => {
 		// Create mock container element
 		mockContainer = document.createElement('div')
-		mockContainer.focus = jest.fn()
-		mockContainer.blur = jest.fn()
-		jest.spyOn(mockContainer.classList, 'add')
-		jest.spyOn(mockContainer.classList, 'remove')
+		mockContainer.focus = vi.fn()
+		mockContainer.blur = vi.fn()
+		vi.spyOn(mockContainer.classList, 'add')
+		vi.spyOn(mockContainer.classList, 'remove')
 
 		// Create mock dispose function
-		mockDispose = jest.fn()
+		mockDispose = vi.fn()
 
 		// Mock editor
 		editor = {
 			sideEffects: {
-				registerAfterChangeHandler: jest.fn(() => mockDispose),
+				registerAfterChangeHandler: vi.fn(() => mockDispose),
 			},
-			getInstanceState: jest.fn(() => ({ isFocused: false })),
-			updateInstanceState: jest.fn(),
-			getContainer: jest.fn(() => mockContainer),
-			isIn: jest.fn(() => false),
-			getSelectedShapeIds: jest.fn(() => []),
-			complete: jest.fn(),
+			getInstanceState: vi.fn(() => ({ isFocused: false })),
+			updateInstanceState: vi.fn(),
+			getContainer: vi.fn(() => mockContainer),
+			isIn: vi.fn(() => false),
+			getSelectedShapeIds: vi.fn(() => []),
+			complete: vi.fn(),
 		} as any
 
 		// Mock document.body event listeners
 		originalAddEventListener = document.body.addEventListener
 		originalRemoveEventListener = document.body.removeEventListener
-		document.body.addEventListener = jest.fn()
-		document.body.removeEventListener = jest.fn()
+		document.body.addEventListener = vi.fn()
+		document.body.removeEventListener = vi.fn()
 	})
 
 	afterEach(() => {
@@ -65,7 +66,7 @@ describe('FocusManager', () => {
 			focusManager.dispose()
 		}
 
-		jest.clearAllMocks()
+		vi.clearAllMocks()
 	})
 
 	describe('constructor', () => {
@@ -131,7 +132,7 @@ describe('FocusManager', () => {
 			const handler = handlerCall[1]
 
 			// Clear previous calls
-			jest.clearAllMocks()
+			vi.clearAllMocks()
 
 			// Simulate focus state change
 			const prev = { isFocused: false }
@@ -149,7 +150,7 @@ describe('FocusManager', () => {
 			const handlerCall = editor.sideEffects.registerAfterChangeHandler.mock.calls[0]
 			const handler = handlerCall[1]
 
-			jest.clearAllMocks()
+			vi.clearAllMocks()
 
 			// Simulate no focus state change
 			const prev = { isFocused: true }
@@ -170,7 +171,7 @@ describe('FocusManager', () => {
 			// Get the handler before clearing mocks
 			const handlerCall = editor.sideEffects.registerAfterChangeHandler.mock.calls[0]
 			handler = handlerCall[1]
-			jest.clearAllMocks()
+			vi.clearAllMocks()
 		})
 
 		it('should add focused class when editor is focused', () => {
@@ -205,11 +206,11 @@ describe('FocusManager', () => {
 			focusManager = new FocusManager(editor)
 
 			// Get the keydown handler that was registered
-			const addEventListenerCalls = (document.body.addEventListener as jest.Mock).mock.calls
-			const keydownCall = addEventListenerCalls.find((call) => call[0] === 'keydown')
-			keydownHandler = keydownCall[1]
+			const addEventListenerCalls = (document.body.addEventListener as Mock).mock.calls
+			const keydownCall = addEventListenerCalls.find((call: any) => call[0] === 'keydown')
+			keydownHandler = keydownCall![1]
 
-			jest.clearAllMocks()
+			vi.clearAllMocks()
 		})
 
 		it('should remove no-focus-ring class on Tab key', () => {
@@ -283,11 +284,11 @@ describe('FocusManager', () => {
 			focusManager = new FocusManager(editor)
 
 			// Get the mousedown handler that was registered
-			const addEventListenerCalls = (document.body.addEventListener as jest.Mock).mock.calls
-			const mousedownCall = addEventListenerCalls.find((call) => call[0] === 'mousedown')
-			mousedownHandler = mousedownCall[1]
+			const addEventListenerCalls = (document.body.addEventListener as Mock).mock.calls
+			const mousedownCall = addEventListenerCalls.find((call: any) => call[0] === 'mousedown')
+			mousedownHandler = mousedownCall![1]
 
-			jest.clearAllMocks()
+			vi.clearAllMocks()
 		})
 
 		it('should add no-focus-ring class on mouse down', () => {
@@ -326,7 +327,7 @@ describe('FocusManager', () => {
 		it('should complete before bluring', () => {
 			const callOrder: string[] = []
 			editor.complete.mockImplementation(() => callOrder.push('complete'))
-			mockContainer.blur = jest.fn(() => callOrder.push('blur'))
+			mockContainer.blur = vi.fn(() => callOrder.push('blur'))
 
 			focusManager.blur()
 
@@ -337,7 +338,7 @@ describe('FocusManager', () => {
 	describe('dispose', () => {
 		beforeEach(() => {
 			focusManager = new FocusManager(editor)
-			jest.clearAllMocks()
+			vi.clearAllMocks()
 		})
 
 		it('should remove keyboard event listener', () => {
@@ -376,7 +377,7 @@ describe('FocusManager', () => {
 			const handlerCall = editor.sideEffects.registerAfterChangeHandler.mock.calls[0]
 			const handler = handlerCall[1]
 
-			jest.clearAllMocks()
+			vi.clearAllMocks()
 
 			// Rapid focus changes
 			editor.getInstanceState.mockReturnValue({ isFocused: true })
@@ -394,9 +395,9 @@ describe('FocusManager', () => {
 
 		it('should handle keyboard navigation while editing', () => {
 			focusManager = new FocusManager(editor)
-			const addEventListenerCalls = (document.body.addEventListener as jest.Mock).mock.calls
-			const keydownCall = addEventListenerCalls.find((call) => call[0] === 'keydown')
-			const keydownHandler = keydownCall[1]
+			const addEventListenerCalls = (document.body.addEventListener as Mock).mock.calls
+			const keydownCall = addEventListenerCalls.find((call: any) => call[0] === 'keydown')
+			const keydownHandler = keydownCall![1]
 
 			editor.isIn.mockReturnValue(true) // Editing mode
 
@@ -409,15 +410,15 @@ describe('FocusManager', () => {
 
 		it('should handle mouse and keyboard interaction sequence', () => {
 			focusManager = new FocusManager(editor)
-			const addEventListenerCalls = (document.body.addEventListener as jest.Mock).mock.calls
+			const addEventListenerCalls = (document.body.addEventListener as Mock).mock.calls
 
-			const mousedownCall = addEventListenerCalls.find((call) => call[0] === 'mousedown')
-			const keydownCall = addEventListenerCalls.find((call) => call[0] === 'keydown')
+			const mousedownCall = addEventListenerCalls.find((call: any) => call[0] === 'mousedown')
+			const keydownCall = addEventListenerCalls.find((call: any) => call[0] === 'keydown')
 
-			const mousedownHandler = mousedownCall[1]
-			const keydownHandler = keydownCall[1]
+			const mousedownHandler = mousedownCall![1]
+			const keydownHandler = keydownCall![1]
 
-			jest.clearAllMocks()
+			vi.clearAllMocks()
 
 			// Mouse down adds no-focus-ring
 			mousedownHandler()