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

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

@@ -1,28 +1,29 @@
+import { Mock, Mocked, vi } from 'vitest'
 import { Vec } from '../../../primitives/Vec'
 import { Editor } from '../../Editor'
 import { TickManager } from './TickManager'
 
 // Mock the Editor class
-jest.mock('../../Editor')
+vi.mock('../../Editor')
 
 // Mock Date.now to control time
-const mockDateNow = jest.fn()
+const mockDateNow = vi.fn()
 Date.now = mockDateNow
 
 // Mock requestAnimationFrame and cancelAnimationFrame
-const mockRequestAnimationFrame = jest.fn()
-const mockCancelAnimationFrame = jest.fn()
+const mockRequestAnimationFrame = vi.fn()
+const mockCancelAnimationFrame = vi.fn()
 global.requestAnimationFrame = mockRequestAnimationFrame
 global.cancelAnimationFrame = mockCancelAnimationFrame
 
 describe('TickManager', () => {
-	let editor: jest.Mocked<Editor>
+	let editor: Mocked<Editor>
 	let tickManager: TickManager
-	let mockEmit: jest.Mock
-	let mockDisposablesAdd: jest.Mock
+	let mockEmit: Mock
+	let mockDisposablesAdd: Mock
 
 	beforeEach(() => {
-		jest.clearAllMocks()
+		vi.clearAllMocks()
 
 		// Reset time
 		mockDateNow.mockReturnValue(1000)
@@ -37,8 +38,8 @@ describe('TickManager', () => {
 
 		mockCancelAnimationFrame.mockImplementation(() => {})
 
-		mockEmit = jest.fn()
-		mockDisposablesAdd = jest.fn()
+		mockEmit = vi.fn()
+		mockDisposablesAdd = vi.fn()
 
 		editor = {
 			emit: mockEmit,
@@ -90,7 +91,7 @@ describe('TickManager', () => {
 		})
 
 		it('should cancel existing RAF before starting new one', () => {
-			const mockCancel = jest.fn()
+			const mockCancel = vi.fn()
 			tickManager.cancelRaf = mockCancel
 
 			tickManager.start()
@@ -143,7 +144,7 @@ describe('TickManager', () => {
 		})
 
 		it('should update pointer velocity', () => {
-			const updatePointerVelocitySpy = jest.spyOn(tickManager as any, 'updatePointerVelocity')
+			const updatePointerVelocitySpy = vi.spyOn(tickManager as any, 'updatePointerVelocity')
 			tickManager.now = 1000
 			mockDateNow.mockReturnValue(1016)
 
@@ -176,7 +177,7 @@ describe('TickManager', () => {
 		})
 
 		it('should cancel RAF if exists', () => {
-			const mockCancel = jest.fn()
+			const mockCancel = vi.fn()
 			tickManager.cancelRaf = mockCancel
 
 			tickManager.dispose()

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

@@ -1,17 +1,15 @@
 import { atom } from '@tldraw/state'
+import { Mocked, vi } from 'vitest'
 import { TLUserPreferences, defaultUserPreferences } from '../../../config/TLUserPreferences'
 import { TLUser } from '../../../config/createTLUser'
 import { UserPreferencesManager } from './UserPreferencesManager'
 
 // Mock window.matchMedia
-const mockMatchMedia = jest.fn()
-Object.defineProperty(window, 'matchMedia', {
-	writable: true,
-	value: mockMatchMedia,
-})
+const mockMatchMedia = vi.fn()
+window.matchMedia = mockMatchMedia
 
 describe('UserPreferencesManager', () => {
-	let mockUser: jest.Mocked<TLUser>
+	let mockUser: Mocked<TLUser>
 	let mockUserPreferences: TLUserPreferences
 	let userPreferencesAtom: any
 	let userPreferencesManager: UserPreferencesManager
@@ -36,14 +34,14 @@ describe('UserPreferencesManager', () => {
 	})
 
 	beforeEach(() => {
-		jest.clearAllMocks()
+		vi.clearAllMocks()
 
 		mockUserPreferences = createMockUserPreferences()
 		userPreferencesAtom = atom('userPreferences', mockUserPreferences)
 
 		mockUser = {
 			userPreferences: userPreferencesAtom,
-			setUserPreferences: jest.fn((prefs) => {
+			setUserPreferences: vi.fn((prefs) => {
 				userPreferencesAtom.set(prefs)
 			}),
 		}
@@ -51,8 +49,8 @@ describe('UserPreferencesManager', () => {
 		// Default matchMedia mock - no dark mode preference
 		mockMatchMedia.mockReturnValue({
 			matches: false,
-			addEventListener: jest.fn(),
-			removeEventListener: jest.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
 		})
 	})
 
@@ -66,17 +64,14 @@ describe('UserPreferencesManager', () => {
 			expect(userPreferencesManager.systemColorScheme.get()).toBe('light')
 
 			// Restore matchMedia
-			Object.defineProperty(window, 'matchMedia', {
-				writable: true,
-				value: mockMatchMedia,
-			})
+			window.matchMedia = mockMatchMedia
 		})
 
 		it('should initialize with light system color scheme when dark mode not preferred', () => {
 			mockMatchMedia.mockReturnValue({
 				matches: false,
-				addEventListener: jest.fn(),
-				removeEventListener: jest.fn(),
+				addEventListener: vi.fn(),
+				removeEventListener: vi.fn(),
 			})
 
 			userPreferencesManager = new UserPreferencesManager(mockUser, false)
@@ -87,8 +82,8 @@ describe('UserPreferencesManager', () => {
 		it('should initialize with dark system color scheme when dark mode preferred', () => {
 			mockMatchMedia.mockReturnValue({
 				matches: true,
-				addEventListener: jest.fn(),
-				removeEventListener: jest.fn(),
+				addEventListener: vi.fn(),
+				removeEventListener: vi.fn(),
 			})
 
 			userPreferencesManager = new UserPreferencesManager(mockUser, false)
@@ -97,8 +92,8 @@ describe('UserPreferencesManager', () => {
 		})
 
 		it('should set up media query listener for color scheme changes', () => {
-			const mockAddEventListener = jest.fn()
-			const mockRemoveEventListener = jest.fn()
+			const mockAddEventListener = vi.fn()
+			const mockRemoveEventListener = vi.fn()
 
 			mockMatchMedia.mockReturnValue({
 				matches: false,
@@ -112,7 +107,7 @@ describe('UserPreferencesManager', () => {
 		})
 
 		it('should handle media query change events', () => {
-			const mockAddEventListener = jest.fn()
+			const mockAddEventListener = vi.fn()
 			let changeHandler: (e: MediaQueryListEvent) => void
 
 			mockMatchMedia.mockReturnValue({
@@ -123,7 +118,7 @@ describe('UserPreferencesManager', () => {
 					}
 					mockAddEventListener(event, handler)
 				},
-				removeEventListener: jest.fn(),
+				removeEventListener: vi.fn(),
 			})
 
 			userPreferencesManager = new UserPreferencesManager(mockUser, false)
@@ -153,11 +148,11 @@ describe('UserPreferencesManager', () => {
 
 	describe('dispose', () => {
 		it('should remove media query listener on dispose', () => {
-			const mockRemoveEventListener = jest.fn()
+			const mockRemoveEventListener = vi.fn()
 
 			mockMatchMedia.mockReturnValue({
 				matches: false,
-				addEventListener: jest.fn(),
+				addEventListener: vi.fn(),
 				removeEventListener: mockRemoveEventListener,
 			})
 
@@ -170,8 +165,8 @@ describe('UserPreferencesManager', () => {
 		it('should call all disposables', () => {
 			userPreferencesManager = new UserPreferencesManager(mockUser, false)
 
-			const mockDisposable1 = jest.fn()
-			const mockDisposable2 = jest.fn()
+			const mockDisposable1 = vi.fn()
+			const mockDisposable2 = vi.fn()
 
 			userPreferencesManager.disposables.add(mockDisposable1)
 			userPreferencesManager.disposables.add(mockDisposable2)

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

@@ -13,7 +13,7 @@ export class UserPreferencesManager {
 		private readonly user: TLUser,
 		private readonly inferDarkMode: boolean
 	) {
-		if (typeof window === 'undefined' || !('matchMedia' in window)) return
+		if (typeof window === 'undefined' || !window.matchMedia) return
 
 		const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
 		if (darkModeMediaQuery?.matches) {

package/src/lib/license/LicenseManager.test.ts

@@ -1,4 +1,5 @@
 import crypto from 'crypto'
+import { vi } from 'vitest'
 import { publishDates } from '../../version'
 import { str2ab } from '../utils/licensing'
 import {
@@ -9,8 +10,9 @@ import {
 	ValidLicenseKeyResult,
 } from './LicenseManager'
 
-jest.mock('../../version', () => {
+vi.mock('../../version', () => {
 	return {
+		version: '3.15.1',
 		publishDates: {
 			major: '2024-06-28T10:56:07.893Z',
 			minor: '2024-07-02T16:49:50.397Z',

package/src/lib/license/Watermark.test.tsx

@@ -1,10 +1,11 @@
 import { act, render, waitFor } from '@testing-library/react'
+import { vi } from 'vitest'
 import { TldrawEditor } from '../TldrawEditor'
 import { LicenseManager } from './LicenseManager'
 
 let mockLicenseState = 'unlicensed'
 
-jest.mock('./useLicenseManagerState', () => ({
+vi.mock('./useLicenseManagerState', () => ({
 	useLicenseManagerState: () => mockLicenseState,
 }))
 

package/src/lib/license/Watermark.tsx

@@ -86,15 +86,15 @@ To remove the watermark, please purchase a license at tldraw.dev.
 
 	.${className} {
 		position: absolute;
-		bottom: var(--space-2);
-		right: var(--space-2);
+		bottom: var(--tl-space-2);
+		right: var(--tl-space-2);
 		width: 96px;
 		height: 32px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		z-index: var(--layer-watermark) !important;
-		background-color: color-mix(in srgb, var(--color-background) 62%, transparent);
+		z-index: var(--tl-layer-watermark) !important;
+		background-color: color-mix(in srgb, var(--tl-color-background) 62%, transparent);
 		opacity: 1;
 		border-radius: 5px;
 		pointer-events: all;
@@ -108,7 +108,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
 		height: 32px;
 		pointer-events: all;
 		cursor: inherit;
-		color: var(--color-text);
+		color: var(--tl-color-text);
 		opacity: .38;
 		border: 0;
 		padding: 0;
@@ -137,7 +137,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
 		}
 
 		.${className}:hover {
-			background-color: var(--color-background);
+			background-color: var(--tl-color-background);
 			transition: background-color 0.2s ease-in-out;
 			transition-delay: 0.32s;
 		}

package/src/lib/options.ts

@@ -27,6 +27,8 @@ export interface TldrawOptions {
 	readonly multiClickDurationMs: number
 	readonly coarseDragDistanceSquared: number
 	readonly dragDistanceSquared: number
+	readonly uiDragDistanceSquared: number
+	readonly uiCoarseDragDistanceSquared: number
 	readonly defaultSvgPadding: number
 	readonly cameraSlideFriction: number
 	readonly gridSteps: readonly {
@@ -98,6 +100,10 @@ export const defaultTldrawOptions = {
 	multiClickDurationMs: 200,
 	coarseDragDistanceSquared: 36, // 6 squared
 	dragDistanceSquared: 16, // 4 squared
+	uiDragDistanceSquared: 16, // 4 squared
+	// it's really easy to accidentally drag from the toolbar on mobile, so we use a much larger
+	// threshold than usual here to try and prevent accidental drags.
+	uiCoarseDragDistanceSquared: 625, // 25 squared
 	defaultSvgPadding: 32,
 	cameraSlideFriction: 0.09,
 	gridSteps: [

package/src/lib/utils/sync/LocalIndexedDb.test.ts

@@ -1,12 +1,13 @@
 import { createTLSchema } from '@tldraw/tlschema'
 import { openDB } from 'idb'
+import { vi } from 'vitest'
 import { hardReset } from './hardReset'
 import { getAllIndexDbNames, LocalIndexedDb } from './LocalIndexedDb'
 
 const schema = createTLSchema({ shapes: {}, bindings: {} })
 describe('LocalIndexedDb', () => {
 	beforeEach(() => {
-		jest.useRealTimers()
+		vi.useRealTimers()
 	})
 	afterEach(async () => {
 		await hardReset({ shouldReload: false })

package/src/lib/utils/sync/TLLocalSyncClient.test.ts

@@ -1,6 +1,6 @@
 import { PageRecordType } from '@tldraw/tlschema'
 import { IndexKey, promiseWithResolve } from '@tldraw/utils'
-import { afterEach } from 'node:test'
+import { Mock, vi } from 'vitest'
 import { createTLStore } from '../../config/createTLStore'
 import { TLLocalSyncClient } from './TLLocalSyncClient'
 import { hardReset } from './hardReset'
@@ -10,20 +10,20 @@ class BroadcastChannelMock {
 	constructor(_name: string) {
 		// noop
 	}
-	postMessage = jest.fn((_msg: any) => {
+	postMessage = vi.fn((_msg: any) => {
 		// noop
 	})
-	close = jest.fn(() => {
+	close = vi.fn(() => {
 		// noop
 	})
 }
 
 function testClient(channel = new BroadcastChannelMock('test')) {
 	const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
-	const onLoad = jest.fn(() => {
+	const onLoad = vi.fn(() => {
 		return
 	})
-	const onLoadError = jest.fn(() => {
+	const onLoadError = vi.fn(() => {
 		return
 	})
 	const client = new TLLocalSyncClient(
@@ -36,26 +36,26 @@ function testClient(channel = new BroadcastChannelMock('test')) {
 		channel
 	)
 
-	client.db.storeSnapshot = jest.fn(() => Promise.resolve())
-	client.db.storeChanges = jest.fn(() => Promise.resolve())
+	client.db.storeSnapshot = vi.fn(() => Promise.resolve())
+	client.db.storeChanges = vi.fn(() => Promise.resolve())
 
 	return {
-		client: client as { db: { storeSnapshot: jest.Mock; storeChanges: jest.Mock } } & typeof client,
+		client: client as { db: { storeSnapshot: Mock; storeChanges: Mock } } & typeof client,
 		store,
 		onLoad,
 		onLoadError,
 		channel,
 		tick: async () => {
-			jest.advanceTimersByTime(500)
+			vi.advanceTimersByTime(500)
 			await Promise.resolve()
 			await client.db.pending()
-			jest.advanceTimersByTime(500)
+			vi.advanceTimersByTime(500)
 			await Promise.resolve()
 		},
 	}
 }
 
-const reloadMock = jest.fn()
+const reloadMock = vi.fn()
 
 beforeAll(() => {
 	Object.defineProperty(window, 'location', {
@@ -65,14 +65,14 @@ beforeAll(() => {
 })
 
 beforeEach(() => {
-	jest.clearAllMocks()
+	vi.clearAllMocks()
 })
 
 afterEach(async () => {
 	await hardReset({ shouldReload: false })
 })
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 test('the client connects on instantiation, announcing its schema', async () => {
 	const { channel, tick } = testClient()
@@ -86,7 +86,7 @@ test('the client connects on instantiation, announcing its schema', async () =>
 test('when a client receives an announce with a newer schema version it reloads itself', async () => {
 	const { client, channel, onLoadError, tick } = testClient()
 	await tick()
-	jest.advanceTimersByTime(10000)
+	vi.advanceTimersByTime(10000)
 	expect(reloadMock).not.toHaveBeenCalled()
 	channel.onmessage?.({
 		data: {
@@ -104,7 +104,7 @@ test('when a client receives an announce with a newer schema version it reloads
 test('when a client receives an announce with a newer schema version shortly after loading it does not reload but instead reports a loadError', async () => {
 	const { client, channel, onLoadError, tick } = testClient()
 	await tick()
-	jest.advanceTimersByTime(1000)
+	vi.advanceTimersByTime(1000)
 	expect(reloadMock).not.toHaveBeenCalled()
 	channel.onmessage?.({
 		data: {

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 = '3.16.0-canary.cf24aedcd577'
+export const version = '3.16.0-canary.d98fc0b9bd6a'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-08-11T15:30:09.531Z',
-	patch: '2025-08-11T15:30:09.531Z',
+	minor: '2025-08-20T08:36:55.202Z',
+	patch: '2025-08-20T08:36:55.202Z',
 }