@tldraw/editor 3.16.0-canary.e9c30b532b82 → 3.16.0-canary.eb473ba53051

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()

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

@@ -58,8 +58,12 @@ export class FocusManager {
 
 	private handleKeyDown(keyEvent: KeyboardEvent) {
 		const container = this.editor.getContainer()
-		if (this.editor.isIn('select.editing_shape')) return
-		if (document.activeElement === container && this.editor.getSelectedShapeIds().length > 0) return
+		const activeEl = document.activeElement
+		// Edit mode should remove the focus ring, however if the active element's
+		// parent is the contextual toolbar, then allow it.
+		if (this.editor.isIn('select.editing_shape') && !activeEl?.closest('.tlui-contextual-toolbar'))
+			return
+		if (activeEl === container && this.editor.getSelectedShapeIds().length > 0) return
 		if (['Tab', 'ArrowUp', 'ArrowDown'].includes(keyEvent.key)) {
 			container.classList.remove('tl-container__no-focus-ring')
 		}

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

@@ -1,30 +1,31 @@
 import { TLShape, TLShapeId, createShapeId } from '@tldraw/tlschema'
+import { Mock, Mocked, vi } from 'vitest'
 import { Editor } from '../../Editor'
 import { FontManager, TLFontFace } from './FontManager'
 
 // Mock the Editor class
-jest.mock('../../Editor')
+vi.mock('../../Editor')
 
 // Mock globals
-global.FontFace = jest.fn().mockImplementation((family, src, descriptors) => ({
+global.FontFace = vi.fn().mockImplementation((family, src, descriptors) => ({
 	family,
 	src,
 	...descriptors,
-	load: jest.fn(() => Promise.resolve()),
+	load: vi.fn(() => Promise.resolve()),
 }))
 
 Object.defineProperty(global.document, 'fonts', {
 	value: {
-		add: jest.fn(),
-		[Symbol.iterator]: jest.fn(() => [].values()),
+		add: vi.fn(),
+		[Symbol.iterator]: vi.fn(() => [].values()),
 	},
 	configurable: true,
 })
 
-global.queueMicrotask = jest.fn((fn) => Promise.resolve().then(fn))
+global.queueMicrotask = vi.fn((fn) => Promise.resolve().then(fn))
 
 describe('FontManager', () => {
-	let editor: jest.Mocked<Editor>
+	let editor: Mocked<Editor>
 	let fontManager: FontManager
 	let mockAssetUrls: { [key: string]: string }
 
@@ -50,30 +51,30 @@ describe('FontManager', () => {
 	})
 
 	beforeEach(() => {
-		jest.clearAllMocks()
+		vi.clearAllMocks()
 
 		mockAssetUrls = {
 			'test-font.woff2': 'https://example.com/fonts/test-font.woff2',
 		}
 
 		const mockShapeUtil = {
-			getFontFaces: jest.fn(() => []),
+			getFontFaces: vi.fn(() => []),
 		}
 
 		const mockStore = {
-			createComputedCache: jest.fn(() => ({
-				get: jest.fn(() => []),
+			createComputedCache: vi.fn(() => ({
+				get: vi.fn(() => []),
 			})),
-			createCache: jest.fn(() => ({
-				get: jest.fn(() => ({ get: jest.fn(() => []) })),
+			createCache: vi.fn(() => ({
+				get: vi.fn(() => ({ get: vi.fn(() => []) })),
 			})),
 		}
 
 		editor = {
 			store: mockStore,
-			getShapeUtil: jest.fn(() => mockShapeUtil),
-			getCurrentPageShapeIds: jest.fn(() => new Set()),
-			getShape: jest.fn(),
+			getShapeUtil: vi.fn(() => mockShapeUtil),
+			getCurrentPageShapeIds: vi.fn(() => new Set()),
+			getShape: vi.fn(),
 			isDisposed: false,
 		} as any
 
@@ -127,7 +128,7 @@ describe('FontManager', () => {
 			const shapes = shapeIds.map(createMockShape)
 
 			editor.getCurrentPageShapeIds.mockReturnValue(new Set(shapeIds))
-			editor.getShape.mockImplementation((id) => shapes.find((s) => s.id === id))
+			editor.getShape.mockImplementation((id: any) => shapes.find((s) => s.id === id))
 
 			await expect(fontManager.loadRequiredFontsForCurrentPage(3)).resolves.toBeUndefined()
 		})
@@ -150,12 +151,12 @@ describe('FontManager', () => {
 			const font = createMockFont()
 			const error = new Error('Font load failed')
 
-			;(global.FontFace as jest.Mock).mockReturnValue({
+			;(global.FontFace as Mock).mockReturnValue({
 				family: font.family,
-				load: jest.fn(() => Promise.reject(error)),
+				load: vi.fn(() => Promise.reject(error)),
 			})
 
-			const consoleSpy = jest.spyOn(console, 'error').mockImplementation()
+			const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
 
 			await fontManager.ensureFontIsLoaded(font)
 
@@ -198,7 +199,7 @@ describe('FontManager', () => {
 
 			fontManager.requestFonts(fonts)
 
-			const callback = (queueMicrotask as jest.Mock).mock.calls[0][0]
+			const callback = (queueMicrotask as Mock).mock.calls[0][0]
 			expect(() => callback()).not.toThrow()
 		})
 	})
@@ -213,7 +214,7 @@ describe('FontManager', () => {
   src: url("mock-data-url");
 }`
 
-			jest.spyOn(fontManager, 'toEmbeddedCssDeclaration').mockResolvedValue(mockCssDeclaration)
+			vi.spyOn(fontManager, 'toEmbeddedCssDeclaration').mockResolvedValue(mockCssDeclaration)
 
 			const result = await fontManager.toEmbeddedCssDeclaration(font)
 
@@ -227,7 +228,7 @@ describe('FontManager', () => {
 			const font = createMockFont()
 
 			// Simple spy to verify the method is called
-			const spy = jest.spyOn(fontManager, 'toEmbeddedCssDeclaration').mockResolvedValue('mock-css')
+			const spy = vi.spyOn(fontManager, 'toEmbeddedCssDeclaration').mockResolvedValue('mock-css')
 
 			await fontManager.toEmbeddedCssDeclaration(font)
 

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

@@ -1,4 +1,5 @@
 import { BaseRecord, RecordId, Store, StoreSchema, createRecordType } from '@tldraw/store'
+import { vi } from 'vitest'
 import { TLHistoryBatchOptions } from '../../types/history-types'
 import { HistoryManager } from './HistoryManager'
 
@@ -489,7 +490,7 @@ describe('HistoryManager constructor and lifecycle', () => {
 	})
 
 	it('should initialize with optional annotateError callback', () => {
-		const mockAnnotateError = jest.fn()
+		const mockAnnotateError = vi.fn()
 		const manager = new HistoryManager({ store, annotateError: mockAnnotateError })
 		expect(manager).toBeDefined()
 	})
@@ -503,7 +504,7 @@ describe('HistoryManager constructor and lifecycle', () => {
 	})
 
 	it('should handle errors in batch operations with annotateError', () => {
-		const mockAnnotateError = jest.fn()
+		const mockAnnotateError = vi.fn()
 		const manager = new HistoryManager({ store, annotateError: mockAnnotateError })
 
 		const errorFn = () => {
@@ -515,7 +516,7 @@ describe('HistoryManager constructor and lifecycle', () => {
 	})
 
 	it('should handle nested batch error scenarios', () => {
-		const mockAnnotateError = jest.fn()
+		const mockAnnotateError = vi.fn()
 		const manager = new HistoryManager({ store, annotateError: mockAnnotateError })
 
 		const nestedErrorFn = () => {
@@ -695,7 +696,7 @@ describe('HistoryManager error scenarios and edge cases', () => {
 	describe('squashToMark error handling', () => {
 		it('should handle non-existent mark gracefully', () => {
 			store.update(ids.a, (s) => ({ ...s, value: 1 }))
-			const consoleSpy = jest.spyOn(console, 'error').mockImplementation()
+			const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
 
 			manager.squashToMark('non-existent-mark')
 
@@ -707,7 +708,7 @@ describe('HistoryManager error scenarios and edge cases', () => {
 		})
 
 		it('should handle empty stack when squashing', () => {
-			const consoleSpy = jest.spyOn(console, 'error').mockImplementation()
+			const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
 
 			manager.squashToMark('non-existent')
 
@@ -780,7 +781,7 @@ describe('HistoryManager error scenarios and edge cases', () => {
 		})
 
 		it('should maintain batch state correctly during errors', () => {
-			const mockAnnotateError = jest.fn()
+			const mockAnnotateError = vi.fn()
 			const errorManager = new HistoryManager({ store, annotateError: mockAnnotateError })
 
 			try {

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

@@ -1,33 +1,34 @@
 import { TLScribble } from '@tldraw/tlschema'
+import { Mock, Mocked, vi } from 'vitest'
 import { Editor } from '../../Editor'
 import { ScribbleItem, ScribbleManager } from './ScribbleManager'
 
 // Mock the Editor class
-jest.mock('../../Editor')
-jest.mock('@tldraw/utils', () => ({
-	uniqueId: jest.fn(() => 'test-id'),
+vi.mock('../../Editor')
+vi.mock('@tldraw/utils', () => ({
+	uniqueId: vi.fn(() => 'test-id'),
 }))
 
 describe('ScribbleManager', () => {
-	let editor: jest.Mocked<Editor>
+	let editor: Mocked<Editor>
 	let scribbleManager: ScribbleManager
-	let mockUniqueId: jest.Mock
+	let mockUniqueId: Mock
 
-	beforeEach(() => {
+	beforeEach(async () => {
 		editor = {
-			updateInstanceState: jest.fn(),
-			run: jest.fn((fn) => fn()),
+			updateInstanceState: vi.fn(),
+			run: vi.fn((fn) => fn()),
 		} as any
 
-		const { uniqueId } = jest.requireMock('@tldraw/utils')
-		mockUniqueId = uniqueId
+		const { uniqueId } = await vi.importMock('@tldraw/utils')
+		mockUniqueId = uniqueId as Mock
 		mockUniqueId.mockReturnValue('test-id')
 
 		scribbleManager = new ScribbleManager(editor)
 	})
 
 	afterEach(() => {
-		jest.clearAllMocks()
+		vi.clearAllMocks()
 	})
 
 	describe('constructor and initialization', () => {

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

@@ -1,4 +1,12 @@
-import { TLFrameShape, TLGroupShape, TLPageId, TLShapeId, createShapeId } from '@tldraw/tlschema'
+import {
+	TLFrameShape,
+	TLGroupShape,
+	TLPageId,
+	TLShape,
+	TLShapeId,
+	createShapeId,
+} from '@tldraw/tlschema'
+import { Mocked, vi } from 'vitest'
 import { Box } from '../../../primitives/Box'
 import { Vec } from '../../../primitives/Vec'
 import { Editor } from '../../Editor'
@@ -7,32 +15,33 @@ import { HandleSnaps } from './HandleSnaps'
 import { GapsSnapIndicator, PointsSnapIndicator, SnapManager } from './SnapManager'
 
 // Mock the Editor class
-jest.mock('../../Editor')
-jest.mock('./BoundsSnaps')
-jest.mock('./HandleSnaps')
+vi.mock('../../Editor')
+vi.mock('./BoundsSnaps')
+vi.mock('./HandleSnaps')
 
 describe('SnapManager', () => {
-	let editor: jest.Mocked<Editor>
+	let editor: Mocked<Editor>
 	let snapManager: SnapManager
 
 	const createMockShape = (
 		id: TLShapeId,
 		type: string = 'geo',
 		parentId: TLShapeId | string = 'page:page'
-	) => ({
-		id,
-		type,
-		parentId,
-		x: 0,
-		y: 0,
-		rotation: 0,
-		index: 'a1' as const,
-		opacity: 1,
-		isLocked: false,
-		meta: {},
-		props: {},
-		typeName: 'shape' as const,
-	})
+	) =>
+		({
+			id,
+			type,
+			parentId,
+			x: 0,
+			y: 0,
+			rotation: 0,
+			index: 'a1' as const,
+			opacity: 1,
+			isLocked: false,
+			meta: {},
+			props: {},
+			typeName: 'shape' as const,
+		}) as TLShape
 
 	const createMockFrameShape = (id: TLShapeId): TLFrameShape =>
 		({
@@ -54,26 +63,26 @@ describe('SnapManager', () => {
 
 	beforeEach(() => {
 		editor = {
-			getZoomLevel: jest.fn(() => 1),
-			getViewportPageBounds: jest.fn(() => new Box(0, 0, 1000, 1000)),
-			getSelectedShapeIds: jest.fn(() => []),
-			getSelectedShapes: jest.fn(() => []),
-			findCommonAncestor: jest.fn(() => createShapeId('page')),
-			getCurrentPageId: jest.fn(() => 'page:page' as TLPageId),
-			getSortedChildIdsForParent: jest.fn(() => []),
-			getShape: jest.fn(),
-			getShapeUtil: jest.fn(() => ({
-				canSnap: jest.fn(() => true),
+			getZoomLevel: vi.fn(() => 1),
+			getViewportPageBounds: vi.fn(() => new Box(0, 0, 1000, 1000)),
+			getSelectedShapeIds: vi.fn(() => []),
+			getSelectedShapes: vi.fn(() => []),
+			findCommonAncestor: vi.fn(() => createShapeId('page')),
+			getCurrentPageId: vi.fn(() => 'page:page' as TLPageId),
+			getSortedChildIdsForParent: vi.fn(() => []),
+			getShape: vi.fn(),
+			getShapeUtil: vi.fn(() => ({
+				canSnap: vi.fn(() => true),
 			})),
-			getShapePageBounds: jest.fn(),
-			isShapeOfType: jest.fn(),
+			getShapePageBounds: vi.fn(),
+			isShapeOfType: vi.fn(),
 		} as any
 
 		snapManager = new SnapManager(editor)
 	})
 
 	afterEach(() => {
-		jest.clearAllMocks()
+		vi.clearAllMocks()
 	})
 
 	describe('constructor and initialization', () => {
@@ -304,7 +313,7 @@ describe('SnapManager', () => {
 			editor.getSortedChildIdsForParent.mockReturnValue([shapeId])
 			editor.getShape.mockReturnValue(shape as any)
 			editor.getShapeUtil.mockReturnValue({
-				canSnap: jest.fn(() => false),
+				canSnap: vi.fn(() => false),
 			} as any)
 
 			const result = snapManager.getSnappableShapes()
@@ -329,7 +338,7 @@ describe('SnapManager', () => {
 			const frameShape = createMockFrameShape(frameId)
 
 			editor.getSortedChildIdsForParent.mockReturnValue([frameId])
-			editor.getShape.mockReturnValue(frameShape as any)
+			editor.getShape.mockReturnValue(frameShape)
 			editor.isShapeOfType.mockImplementation((_shape, type) => type === 'frame')
 			editor.getShapePageBounds.mockReturnValue(new Box(10, 10, 50, 50))
 
@@ -348,14 +357,12 @@ describe('SnapManager', () => {
 				.mockReturnValueOnce([childId]) // Inside group
 
 			editor.getShape.mockImplementation((id) => {
-				if (id === groupId) return groupShape as any
-				if (id === childId) return childShape as any
+				if (id === groupId) return groupShape
+				if (id === childId) return childShape
 				return undefined
 			})
 
-			editor.isShapeOfType.mockImplementation(
-				(shape, type) => shape && (shape as any).type === type
-			)
+			editor.isShapeOfType.mockImplementation((shape: any, type) => shape && shape.type === type)
 
 			editor.getShapePageBounds.mockReturnValue(new Box(10, 10, 50, 50))
 
@@ -372,26 +379,26 @@ describe('SnapManager', () => {
 
 			// Override the getCurrentCommonAncestor mock for this specific test
 			const originalGetCurrentCommonAncestor = snapManager.getCurrentCommonAncestor
-			jest.spyOn(snapManager, 'getCurrentCommonAncestor').mockReturnValue(parentFrameId)
+			vi.spyOn(snapManager, 'getCurrentCommonAncestor').mockReturnValue(parentFrameId)
 
 			editor.getSortedChildIdsForParent.mockReturnValueOnce([childFrameId]) // Children of parent frame
 
-			editor.getShape.mockImplementation((id) => {
+			editor.getShape.mockImplementation((id: any) => {
 				if (id === parentFrameId) return parentFrame as any
 				if (id === childFrameId) return childFrame as any
 				return undefined
 			})
 
-			editor.isShapeOfType.mockImplementation((shape, type) => type === 'frame')
+			editor.isShapeOfType.mockImplementation((shape: any, type: any) => type === 'frame')
 			editor.getShapePageBounds.mockReturnValue(new Box(10, 10, 50, 50))
 
 			const result = snapManager.getSnappableShapes()
 			expect(result.has(childFrameId)).toBe(true)
 
 			// Restore original method
-			jest
-				.spyOn(snapManager, 'getCurrentCommonAncestor')
-				.mockImplementation(originalGetCurrentCommonAncestor)
+			vi.spyOn(snapManager, 'getCurrentCommonAncestor').mockImplementation(
+				originalGetCurrentCommonAncestor
+			)
 		})
 
 		it('should handle missing shape bounds gracefully', () => {
@@ -422,7 +429,7 @@ describe('SnapManager', () => {
 
 			// Override the getCurrentCommonAncestor mock for this specific test
 			const originalGetCurrentCommonAncestor = snapManager.getCurrentCommonAncestor
-			jest.spyOn(snapManager, 'getCurrentCommonAncestor').mockReturnValue(undefined)
+			vi.spyOn(snapManager, 'getCurrentCommonAncestor').mockReturnValue(undefined)
 
 			editor.getCurrentPageId.mockReturnValue('page:current' as TLPageId)
 			editor.getSortedChildIdsForParent.mockReturnValue([shapeId])
@@ -433,9 +440,9 @@ describe('SnapManager', () => {
 			expect(editor.getSortedChildIdsForParent).toHaveBeenCalledWith('page:current')
 
 			// Restore original method
-			jest
-				.spyOn(snapManager, 'getCurrentCommonAncestor')
-				.mockImplementation(originalGetCurrentCommonAncestor)
+			vi.spyOn(snapManager, 'getCurrentCommonAncestor').mockImplementation(
+				originalGetCurrentCommonAncestor
+			)
 		})
 	})
 
@@ -470,7 +477,7 @@ describe('SnapManager', () => {
 
 			// Test with second set of shapes
 			editor.getSortedChildIdsForParent.mockReturnValue([shapeId1, shapeId2])
-			editor.getShape.mockImplementation((id) => {
+			editor.getShape.mockImplementation((id: any) => {
 				if (id === shapeId1) return createMockShape(shapeId1) as any
 				if (id === shapeId2) return createMockShape(shapeId2) as any
 				return undefined