@tldraw/editor 3.16.0-next.f9f54ec051f3 → 3.16.0-next.fe14f1b4181f

package/src/lib/exports/getSvgJsx.tsx

@@ -4,6 +4,7 @@ import {
 	TLGroupShape,
 	TLShape,
 	TLShapeId,
+	getColorValue,
 	getDefaultColorTheme,
 } from '@tldraw/tlschema'
 import { hasOwnProperty, promiseWithResolve, uniqueId } from '@tldraw/utils'
@@ -56,33 +57,21 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 		.filter(({ id }) => shapeIdsToInclude.has(id))
 
 	// --- Common bounding box of all shapes
+	const singleFrameShapeId =
+		ids.length === 1 && editor.isShapeOfType<TLFrameShape>(editor.getShape(ids[0])!, 'frame')
+			? ids[0]
+			: null
+
 	let bbox: null | Box = null
 	if (opts.bounds) {
-		bbox = opts.bounds
+		bbox = opts.bounds.clone().expandBy(padding)
 	} else {
-		for (const { id } of renderingShapes) {
-			const maskedPageBounds = editor.getShapeMaskedPageBounds(id)
-			if (!maskedPageBounds) continue
-			if (bbox) {
-				bbox.union(maskedPageBounds)
-			} else {
-				bbox = maskedPageBounds.clone()
-			}
-		}
+		bbox = getExportDefaultBounds(editor, renderingShapes, padding, singleFrameShapeId)
 	}
 
 	// no unmasked shapes to export
 	if (!bbox) return
 
-	const singleFrameShapeId =
-		ids.length === 1 && editor.isShapeOfType<TLFrameShape>(editor.getShape(ids[0])!, 'frame')
-			? ids[0]
-			: null
-	if (!singleFrameShapeId) {
-		// Expand by an extra 32 pixels
-		bbox.expandBy(padding)
-	}
-
 	// We want the svg image to be BIGGER THAN USUAL to account for image quality
 	const w = bbox.width * scale
 	const h = bbox.height * scale
@@ -119,6 +108,75 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 	return { jsx: svg, width: w, height: h, exportDelay }
 }
 
+/**
+ * Calculates the default bounds for an SVG export. This function handles:
+ * 1. Computing masked page bounds for each shape
+ * 2. Container logic: if a shape is marked as an export bounds container and it
+ *    contains all other shapes, use its bounds and skip padding
+ * 3. Otherwise, create a union of all shape bounds and apply padding
+ *
+ * The container logic is useful for cases like annotating on an image - if the image
+ * contains all annotations, we want to export exactly the image bounds without extra padding.
+ *
+ * @param editor - The editor instance
+ * @param renderingShapes - The shapes to include in the export
+ * @param padding - Padding to add around the bounds (only applied if no container bounds)
+ * @param singleFrameShapeId - If exporting a single frame, this is its ID (skips padding)
+ * @returns The calculated bounds box, or null if no shapes to export
+ */
+export function getExportDefaultBounds(
+	editor: Editor,
+	renderingShapes: TLRenderingShape[],
+	padding: number,
+	singleFrameShapeId: TLShapeId | null
+) {
+	let isBoundedByContainer = false
+	let bbox: null | Box = null
+
+	for (const { id } of renderingShapes) {
+		const maskedPageBounds = editor.getShapeMaskedPageBounds(id)
+		if (!maskedPageBounds) continue
+
+		// Check if this shape is an export bounds container (e.g., an image being annotated)
+		const shape = editor.getShape(id)!
+		const isContainer = editor.getShapeUtil(shape).isExportBoundsContainer(shape)
+
+		if (bbox) {
+			// Container logic: if this is a container and it contains all shapes processed so far,
+			// use the container's bounds instead of the union. This prevents extra padding around
+			// things like annotated images.
+			if (isContainer && Box.ContainsApproximately(maskedPageBounds, bbox)) {
+				isBoundedByContainer = true
+				bbox = maskedPageBounds.clone()
+			} else {
+				// If we were previously bounded by a container but this shape extends outside it,
+				// we're no longer bounded by a container
+				if (isBoundedByContainer && !Box.ContainsApproximately(bbox, maskedPageBounds)) {
+					isBoundedByContainer = false
+				}
+				// Expand the bounding box to include this shape
+				bbox.union(maskedPageBounds)
+			}
+		} else {
+			// First shape sets the initial bounds
+			isBoundedByContainer = isContainer
+			bbox = maskedPageBounds.clone()
+		}
+	}
+
+	// No unmasked shapes to export
+	if (!bbox) return null
+
+	// Only apply padding if:
+	// - Not exporting a single frame (frames have their own padding rules)
+	// - Not bounded by a container (containers define their own bounds precisely)
+	if (!singleFrameShapeId && !isBoundedByContainer) {
+		bbox.expandBy(padding)
+	}
+
+	return bbox
+}
+
 function SvgExport({
 	editor,
 	preserveAspectRatio,
@@ -373,8 +431,7 @@ function SvgExport({
 			| { options: { showColors: boolean } }
 		if (frameShapeUtil?.options.showColors) {
 			const shape = editor.getShape(singleFrameShapeId)! as TLFrameShape
-			const color = theme[shape.props.color]
-			backgroundColor = color.frame.fill
+			backgroundColor = getColorValue(theme, shape.props.color, 'frameFill')
 		} else {
 			backgroundColor = theme.solid
 		}

package/src/lib/hooks/useCanvasEvents.ts

@@ -1,5 +1,5 @@
 import { useValue } from '@tldraw/state-react'
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { RIGHT_MOUSE_BUTTON } from '../constants'
 import {
 	preventDefault,
@@ -16,9 +16,6 @@ export function useCanvasEvents() {
 
 	const events = useMemo(
 		function canvasEvents() {
-			// Track the last screen point
-			let lastX: number, lastY: number
-
 			function onPointerDown(e: React.PointerEvent) {
 				if ((e as any).isKilled) return
 
@@ -44,35 +41,9 @@ export function useCanvasEvents() {
 				})
 			}
 
-			function onPointerMove(e: React.PointerEvent) {
-				if ((e as any).isKilled) return
-
-				if (e.clientX === lastX && e.clientY === lastY) return
-				lastX = e.clientX
-				lastY = e.clientY
-
-				// For tools that benefit from a higher fidelity of events,
-				// we dispatch the coalesced events.
-				// N.B. Sometimes getCoalescedEvents isn't present on iOS, ugh.
-				const events =
-					currentTool.useCoalescedEvents && e.nativeEvent.getCoalescedEvents
-						? e.nativeEvent.getCoalescedEvents()
-						: [e]
-				for (const singleEvent of events) {
-					editor.dispatch({
-						type: 'pointer',
-						target: 'canvas',
-						name: 'pointer_move',
-						...getPointerInfo(singleEvent),
-					})
-				}
-			}
-
 			function onPointerUp(e: React.PointerEvent) {
 				if ((e as any).isKilled) return
 				if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return
-				lastX = e.clientX
-				lastY = e.clientY
 
 				releasePointerCapture(e.currentTarget, e)
 
@@ -108,15 +79,15 @@ export function useCanvasEvents() {
 				// check that e.target is an HTMLElement
 				if (!(e.target instanceof HTMLElement)) return
 
+				const editingShapeId = editor.getEditingShape()?.id
 				if (
+					// if the target is not inside the editing shape
+					!(editingShapeId && e.target.closest(`[data-shape-id="${editingShapeId}"]`)) &&
+					// and the target is not an clickable element
 					e.target.tagName !== 'A' &&
+					// or a TextArea.tsx ?
 					e.target.tagName !== 'TEXTAREA' &&
-					!e.target.isContentEditable &&
-					// When in EditingShape state, we are actually clicking on a 'DIV'
-					// not A/TEXTAREA/contenteditable element yet. So, to preserve cursor position
-					// for edit mode on mobile we need to not preventDefault.
-					// TODO: Find out if we still need this preventDefault in general though.
-					!(editor.getEditingShape() && e.target.className.includes('tl-text-content'))
+					!e.target.isContentEditable
 				) {
 					preventDefault(e)
 				}
@@ -158,7 +129,6 @@ export function useCanvasEvents() {
 
 			return {
 				onPointerDown,
-				onPointerMove,
 				onPointerUp,
 				onPointerEnter,
 				onPointerLeave,
@@ -169,8 +139,45 @@ export function useCanvasEvents() {
 				onClick,
 			}
 		},
-		[editor, currentTool]
+		[editor]
 	)
 
+	// onPointerMove is special: where we're only interested in the other events when they're
+	// happening _on_ the canvas (as opposed to outside of it, or on UI floating over it), we want
+	// the pointer position to be up to date regardless of whether it's over the tldraw canvas or
+	// not. So instead of returning a listener to be attached to the canvas, we directly attach a
+	// listener to the whole document instead.
+	useEffect(() => {
+		let lastX: number, lastY: number
+
+		function onPointerMove(e: PointerEvent) {
+			if ((e as any).isKilled) return
+			;(e as any).isKilled = true
+
+			if (e.clientX === lastX && e.clientY === lastY) return
+			lastX = e.clientX
+			lastY = e.clientY
+
+			// For tools that benefit from a higher fidelity of events,
+			// we dispatch the coalesced events.
+			// N.B. Sometimes getCoalescedEvents isn't present on iOS, ugh.
+			const events =
+				currentTool.useCoalescedEvents && e.getCoalescedEvents ? e.getCoalescedEvents() : [e]
+			for (const singleEvent of events) {
+				editor.dispatch({
+					type: 'pointer',
+					target: 'canvas',
+					name: 'pointer_move',
+					...getPointerInfo(singleEvent),
+				})
+			}
+		}
+
+		document.body.addEventListener('pointermove', onPointerMove)
+		return () => {
+			document.body.removeEventListener('pointermove', onPointerMove)
+		}
+	}, [editor, currentTool])
+
 	return events
 }

package/src/lib/hooks/usePassThroughWheelEvents.ts

@@ -1,14 +1,19 @@
 import { RefObject, useEffect } from 'react'
 import { preventDefault } from '../utils/dom'
 import { useContainer } from './useContainer'
+import { useMaybeEditor } from './useEditor'
 
 /** @public */
 export function usePassThroughWheelEvents(ref: RefObject<HTMLElement>) {
 	if (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')
 	const container = useContainer()
+	const editor = useMaybeEditor()
 
 	useEffect(() => {
 		function onWheel(e: WheelEvent) {
+			// Only pass through wheel events if the editor is focused
+			if (!editor?.getInstanceState().isFocused) return
+
 			if ((e as any).isSpecialRedispatchedEvent) return
 
 			// if the element is scrollable, don't redispatch the event
@@ -32,5 +37,5 @@ export function usePassThroughWheelEvents(ref: RefObject<HTMLElement>) {
 		return () => {
 			elm.removeEventListener('wheel', onWheel)
 		}
-	}, [container, ref])
+	}, [container, editor, ref])
 }

package/src/lib/hooks/useStateAttribute.ts

@@ -0,0 +1,15 @@
+import { react } from '@tldraw/state'
+import { useLayoutEffect } from 'react'
+import { useEditor } from './useEditor'
+
+export function useStateAttribute() {
+	const editor = useEditor()
+
+	// we use a layout effect because we don't want there to be any perceptible delay between the
+	// editor mounting and this attribute being applied, because styles may depend on it:
+	useLayoutEffect(() => {
+		return react('stateAttribute', () => {
+			editor.getContainer().setAttribute('data-state', editor.getPath())
+		})
+	}, [editor])
+}

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 {
@@ -53,6 +55,7 @@ export interface TldrawOptions {
 	readonly flattenImageBoundsPadding: number
 	readonly laserDelayMs: number
 	readonly maxExportDelayMs: number
+	readonly tooltipDelayMs: number
 	/**
 	 * How long should previews created by {@link Editor.createTemporaryAssetPreview} last before
 	 * they expire? Defaults to 3 minutes.
@@ -97,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: [
@@ -124,6 +131,7 @@ export const defaultTldrawOptions = {
 	flattenImageBoundsPadding: 16,
 	laserDelayMs: 1200,
 	maxExportDelayMs: 5000,
+	tooltipDelayMs: 700,
 	temporaryAssetPreviewLifetimeMs: 180000,
 	actionShortcutsLocation: 'swap',
 	createTextOnCanvasDoubleClick: true,

package/src/lib/primitives/Box.test.ts

@@ -510,6 +510,132 @@ describe('Box', () => {
 		})
 	})
 
+	describe('Box.ContainsApproximately', () => {
+		it('returns true when first box exactly contains second', () => {
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(10, 10, 50, 50)
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
+		})
+
+		it('returns false when first box clearly does not contain second', () => {
+			const boxA = new Box(0, 0, 50, 50)
+			const boxB = new Box(10, 10, 100, 100)
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(false)
+		})
+
+		it('returns true when containment is within default precision tolerance', () => {
+			// Box B extends very slightly outside A (within floating-point precision)
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(10, 10, 80, 80)
+			// Move B's max edges just slightly outside A's bounds
+			boxB.w = 90.000000000001 // maxX = 100.000000000001 (slightly beyond 100)
+			boxB.h = 90.000000000001 // maxY = 100.000000000001 (slightly beyond 100)
+
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
+			expect(Box.Contains(boxA, boxB)).toBe(false) // strict contains would fail
+		})
+
+		it('returns false when containment exceeds default precision tolerance', () => {
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(10, 10, 80, 80)
+			// Move B's max edges clearly outside A's bounds
+			boxB.w = 95 // maxX = 105 (clearly beyond 100)
+			boxB.h = 95 // maxY = 105 (clearly beyond 100)
+
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(false)
+		})
+
+		it('respects custom precision parameter', () => {
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(10, 10, 85, 85) // maxX=95, maxY=95
+
+			// With loose precision (10), should contain (95 is within 100-10=90 tolerance)
+			expect(Box.ContainsApproximately(boxA, boxB, 10)).toBe(true)
+
+			// With tight precision (4), should still contain (95 is within 100-4=96)
+			expect(Box.ContainsApproximately(boxA, boxB, 4)).toBe(true)
+
+			// Since 95 < 100, the precision parameter doesn't affect containment here
+			expect(Box.ContainsApproximately(boxA, boxB, 4.9)).toBe(true)
+		})
+
+		it('handles negative coordinates correctly', () => {
+			const boxA = new Box(-50, -50, 100, 100) // bounds: (-50,-50) to (50,50)
+			const boxB = new Box(-40, -40, 79.999999999, 79.999999999) // bounds: (-40,-40) to (39.999999999, 39.999999999)
+
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
+		})
+
+		it('handles edge case where boxes are identical', () => {
+			const boxA = new Box(10, 20, 100, 200)
+			const boxB = new Box(10, 20, 100, 200)
+
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
+		})
+
+		it('handles edge case where inner box touches outer box edges', () => {
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(0, 0, 100, 100) // exactly the same
+
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
+
+			// Slightly smaller inner box
+			const boxC = new Box(0.000001, 0.000001, 99.999998, 99.999998)
+			expect(Box.ContainsApproximately(boxA, boxC)).toBe(true)
+		})
+
+		it('handles floating-point precision issues in real-world scenarios', () => {
+			// Simulate common floating-point arithmetic issues
+			const containerBox = new Box(0, 0, 100, 100)
+
+			// Box that should be contained but has floating-point errors
+			const innerBox = new Box(10, 10, 80, 80)
+			// Simulate floating-point arithmetic that results in tiny overruns
+			innerBox.w = 90.00000000000001 // maxX = 100.00000000000001 (tiny overrun)
+			innerBox.h = 90.00000000000001 // maxY = 100.00000000000001 (tiny overrun)
+
+			expect(Box.ContainsApproximately(containerBox, innerBox)).toBe(true)
+			expect(Box.Contains(containerBox, innerBox)).toBe(false) // strict contains fails due to precision
+		})
+
+		it('fails when any edge exceeds tolerance', () => {
+			const boxA = new Box(10, 10, 100, 100) // bounds: (10,10) to (110,110)
+
+			// Test each edge exceeding tolerance
+			const testCases = [
+				{ name: 'left edge', box: new Box(5, 20, 80, 80) }, // minX too small
+				{ name: 'top edge', box: new Box(20, 5, 80, 80) }, // minY too small
+				{ name: 'right edge', box: new Box(20, 20, 95, 80) }, // maxX too large (20+95=115 > 110)
+				{ name: 'bottom edge', box: new Box(20, 20, 80, 95) }, // maxY too large (20+95=115 > 110)
+			]
+
+			testCases.forEach(({ box }) => {
+				expect(Box.ContainsApproximately(boxA, box, 1)).toBe(false) // tight precision
+			})
+		})
+
+		it('works with zero-sized dimensions', () => {
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(50, 50, 0, 0) // zero-sized box (point)
+
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
+		})
+
+		it('handles precision parameter edge cases', () => {
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(10, 10, 91, 91) // maxX=101, maxY=101 (clearly outside)
+
+			// Zero precision should work like strict Contains
+			expect(Box.ContainsApproximately(boxA, boxB, 0)).toBe(false)
+
+			// Small precision should still fail (101 > 100)
+			expect(Box.ContainsApproximately(boxA, boxB, 0.5)).toBe(false)
+
+			// Sufficient precision should succeed (101 <= 100 + 2)
+			expect(Box.ContainsApproximately(boxA, boxB, 2)).toBe(true)
+		})
+	})
+
 	describe('Box.Includes', () => {
 		it('returns true when boxes collide or contain', () => {
 			const boxA = new Box(0, 0, 50, 50)

package/src/lib/primitives/Box.ts

@@ -1,6 +1,6 @@
 import { BoxModel } from '@tldraw/tlschema'
 import { Vec, VecLike } from './Vec'
-import { PI, PI2, toPrecision } from './utils'
+import { approximatelyLte, PI, PI2, toPrecision } from './utils'
 
 /** @public */
 export type BoxLike = BoxModel | Box
@@ -417,6 +417,15 @@ export class Box {
 		return A.minX < B.minX && A.minY < B.minY && A.maxY > B.maxY && A.maxX > B.maxX
 	}
 
+	static ContainsApproximately(A: Box, B: Box, precision?: number) {
+		return (
+			approximatelyLte(A.minX, B.minX, precision) &&
+			approximatelyLte(A.minY, B.minY, precision) &&
+			approximatelyLte(B.maxX, A.maxX, precision) &&
+			approximatelyLte(B.maxY, A.maxY, precision)
+		)
+	}
+
 	static Includes(A: Box, B: Box) {
 		return Box.Collides(A, B) || Box.Contains(A, B)
 	}

package/src/lib/utils/EditorAtom.ts

@@ -0,0 +1,37 @@
+import { atom, Atom } from '@tldraw/state'
+import { WeakCache } from '@tldraw/utils'
+import { Editor } from '../editor/Editor'
+
+/**
+ * An Atom that is scoped to the lifetime of an Editor.
+ *
+ * This is useful for storing UI state for tldraw applications. Keeping state scoped to an editor
+ * instead of stored in a global atom can prevent issues with state being shared between editors
+ * when navigating between pages, or when multiple editor instances are used on the same page.
+ *
+ * @public
+ */
+export class EditorAtom<T> {
+	private states = new WeakCache<Editor, Atom<T>>()
+
+	constructor(
+		private name: string,
+		private getInitialState: (editor: Editor) => T
+	) {}
+
+	getAtom(editor: Editor): Atom<T> {
+		return this.states.get(editor, () => atom(this.name, this.getInitialState(editor)))
+	}
+
+	get(editor: Editor): T {
+		return this.getAtom(editor).get()
+	}
+
+	update(editor: Editor, update: (state: T) => T): T {
+		return this.getAtom(editor).update(update)
+	}
+
+	set(editor: Editor, state: T): T {
+		return this.getAtom(editor).set(state)
+	}
+}

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