@tldraw/editor 5.5.0-next.f9308d324e1c → 5.5.0

package/src/lib/exports/parseCss.test.ts

@@ -119,6 +119,10 @@ test('parseCss', () => {
 		    },
 		  ],
 		  "imports": [
+		    {
+		      "extras": "",
+		      "url": "https://example.com/font.css",
+		    },
 		    {
 		      "extras": " screen and (min-width: 900px)",
 		      "url": "thing.css",

package/src/lib/exports/parseCss.ts

@@ -2,7 +2,7 @@ import { safeParseUrl } from '@tldraw/utils'
 
 export interface ParsedFontFace {
 	fontFace: string
-	urls: { original: string; resolved: string | null; embedded?: Promise<string | null> }[]
+	urls: { original: string; resolved: string | null }[]
 	fontFamilies: Set<string>
 }
 
@@ -18,7 +18,7 @@ export interface ParsedFontFace {
 // Parse @import declarations:
 // https://developer.mozilla.org/en-US/docs/Web/CSS/@import#formal_syntax
 const importsRegex =
-	/@import\s+(?:"([^"]+)"|'([^']+)'|url\s*\(\s*(?:"([^"]+)"|'([^']+)'|([^'")]+))\s*\))([^;]+);/gi
+	/@import\s+(?:"([^"]+)"|'([^']+)'|url\s*\(\s*(?:"([^"]+)"|'([^']+)'|([^'")]+))\s*\))([^;]*);/gi
 
 // Locate @font-face declarations:
 const fontFaceRegex = /@font-face\s*{([^}]+)}/gi

package/src/lib/hooks/EditorComponentsContext.tsx

@@ -5,6 +5,7 @@ import type { TLErrorFallbackComponent } from '../components/default-components/
 import type { TLGridProps } from '../components/default-components/DefaultGrid'
 import type { TLShapeErrorFallbackComponent } from '../components/default-components/DefaultShapeErrorFallback'
 import type { TLShapeWrapperProps } from '../components/default-components/DefaultShapeWrapper'
+import type { TLSpinnerProps } from '../components/default-components/DefaultSpinner'
 
 /** @public */
 export interface TLEditorComponents {
@@ -16,7 +17,7 @@ export interface TLEditorComponents {
 	LoadingScreen?: ComponentType | null
 	OnTheCanvas?: ComponentType | null
 	ShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null
-	Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null
+	Spinner?: ComponentType<TLSpinnerProps> | null
 	SvgDefs?: ComponentType | null
 
 	// These will always have defaults

package/src/lib/hooks/useCanvasEvents.ts

@@ -19,6 +19,9 @@ export function useCanvasEvents() {
 	const events = useMemo(
 		function canvasEvents() {
 			let isSecondaryClickPointerDown = false
+			// The button each accepted press started with, by pointer id. pointercancel
+			// reports button -1, so the synthetic pointer_up needs the original.
+			const pointerDownButtons = new Map<number, number>()
 
 			function onPointerDown(e: React.PointerEvent) {
 				if (editor.wasEventAlreadyHandled(e)) return
@@ -45,6 +48,15 @@ export function useCanvasEvents() {
 
 				setPointerCapture(e.currentTarget, e)
 
+				// Only remember presses the editor will act on. A rejected palm in pen mode
+				// must not overwrite the button of the pen press it lands on top of, or the
+				// pen's pointercancel would release the wrong button and skip the
+				// stylus-eraser tool restore.
+				const isPenMode = editor.getInstanceState().isPenMode
+				if (!editor.inputs.getIsPinching() && !(isPenMode && e.pointerType !== 'pen')) {
+					pointerDownButtons.set(e.pointerId, button)
+				}
+
 				editor.dispatch({
 					type: 'pointer',
 					target: 'canvas',
@@ -56,6 +68,7 @@ export function useCanvasEvents() {
 
 			function onPointerUp(e: React.PointerEvent) {
 				if (editor.wasEventAlreadyHandled(e)) return
+				pointerDownButtons.delete(e.pointerId)
 				const button = isSecondaryClickPointerDown ? 2 : getPointerEventButton(e)
 				if (button !== 0 && button !== 1 && button !== 2 && button !== 5) return
 
@@ -91,6 +104,34 @@ export function useCanvasEvents() {
 				isSecondaryClickPointerDown = false
 			}
 
+			function onPointerCancel(e: React.PointerEvent) {
+				if (editor.wasEventAlreadyHandled(e)) return
+				const pointerDownButton = pointerDownButtons.get(e.pointerId)
+				pointerDownButtons.delete(e.pointerId)
+				// In pen mode a cancelled touch is usually a rejected palm, and the pen's own
+				// interaction must survive it.
+				if (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return
+
+				releasePointerCapture(e.currentTarget, e)
+
+				// Nothing to end if the press itself was filtered out (pen mode, unsupported
+				// button), or if this pointer never started an accepted press.
+				if (!editor.inputs.getIsPointing() || pointerDownButton === undefined) return
+
+				// The browser has taken the pointer (edge swipe, incoming call) and will never send
+				// pointerup, so end the gesture here or the tool stays stuck in its pointing or
+				// dragging state and the next touch continues it.
+				editor.interrupt()
+				editor.dispatch({
+					type: 'pointer',
+					target: 'canvas',
+					name: 'pointer_up',
+					...getPointerInfo(editor, e),
+					button: pointerDownButton,
+				})
+				isSecondaryClickPointerDown = false
+			}
+
 			function onPointerEnter(e: React.PointerEvent) {
 				if (editor.wasEventAlreadyHandled(e)) return
 				if (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return
@@ -201,6 +242,7 @@ export function useCanvasEvents() {
 			return {
 				onPointerDown,
 				onPointerUp,
+				onPointerCancel,
 				onPointerEnter,
 				onPointerLeave,
 				onDragOver,

package/src/lib/hooks/useIdentity.tsx

@@ -1,4 +1,4 @@
-import { areArraysShallowEqual, areObjectsShallowEqual } from '@tldraw/utils'
+import { areArraysShallowEqual, areObjectsShallowEqual, isEqual } from '@tldraw/utils'
 import { useRef } from 'react'
 
 function useIdentity<T>(value: T, isEqual: (a: T, b: T) => boolean): T {
@@ -49,3 +49,14 @@ const areNullableObjectsShallowEqual = (
 export function useShallowObjectIdentity<T extends object | null | undefined>(obj: T): T {
 	return useIdentity(obj, areNullableObjectsShallowEqual)
 }
+
+/**
+ * For small option objects that may nest (e.g. camera constraints), where a shallow comparison
+ * would still see a fresh identity on every render. Functions and class instances inside still
+ * compare by reference, so an inline callback or a fresh `Extension.configure()` counts as a change.
+ *
+ * @internal
+ */
+export function useDeepObjectIdentity<T extends object | null | undefined>(obj: T): T {
+	return useIdentity(obj, isEqual)
+}

package/src/lib/license/LicenseManager.ts

@@ -1,4 +1,5 @@
 import { atom, transact } from '@tldraw/state'
+import { noop } from '@tldraw/utils'
 import { publishDates, version } from '../../version'
 import { getDefaultCdnBaseUrl } from '../utils/assets'
 import { importPublicKey, str2ab } from '../utils/licensing'
@@ -127,6 +128,7 @@ export class LicenseManager {
 		...NO_FEATURES,
 	})
 	public verbose = true
+	private isDisposed = false
 
 	constructor(licenseKey: string | undefined, testPublicKey?: string) {
 		this.isTest = process.env.NODE_ENV === 'test'
@@ -144,6 +146,9 @@ export class LicenseManager {
 
 		this.getLicenseFromKey(licenseKey)
 			.then((result) => {
+				// replaced by a manager for a newer key: this one's messages, tracking ping and state
+				// would describe a key the app no longer uses
+				if (this.isDisposed) return
 				const licenseState = getLicenseState(
 					result,
 					(messages: string[]) => this.outputMessages(messages),
@@ -160,11 +165,17 @@ export class LicenseManager {
 				})
 			})
 			.catch((error) => {
+				if (this.isDisposed) return
 				console.error('License validation failed:', error)
 				this.state.set('unlicensed')
 			})
 	}
 
+	/** Ignore the pending validation: nothing is logged, tracked or set once the manager is replaced. */
+	dispose() {
+		this.isDisposed = true
+	}
+
 	/**
 	 * Returns whether a given licensable feature is enabled. Reactive: reading this inside a signal
 	 * recomputes when license validation resolves.
@@ -247,8 +258,9 @@ export class LicenseManager {
 			url.searchParams.set('environment', process.env.NODE_ENV)
 		}
 
+		// best-effort: a blocked or offline request must not surface as an unhandled rejection
 		// eslint-disable-next-line no-restricted-globals
-		fetch(url.toString())
+		fetch(url.toString()).catch(noop)
 	}
 
 	private async extractLicenseKey(licenseKey: string): Promise<LicenseInfo> {

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

@@ -0,0 +1,76 @@
+import { act, render } from '@testing-library/react'
+import { vi } from 'vitest'
+import { LicenseFromKeyResult, LicenseManager } from './LicenseManager'
+import { LICENSE_TIMEOUT, LicenseProvider, useLicenseContext } from './LicenseProvider'
+
+const NO_KEY: LicenseFromKeyResult = { isLicenseParseable: false, reason: 'no-key-provided' }
+
+describe('LicenseProvider', () => {
+	const managers: LicenseManager[] = []
+	function Probe() {
+		managers.push(useLicenseContext())
+		return null
+	}
+	const renderWithKey = (licenseKey: string | undefined) => (
+		<LicenseProvider licenseKey={licenseKey}>
+			<Probe />
+		</LicenseProvider>
+	)
+
+	beforeEach(() => {
+		managers.length = 0
+	})
+	afterEach(() => {
+		vi.restoreAllMocks()
+		vi.useRealTimers()
+	})
+
+	it('creates a new license manager when the license key changes', async () => {
+		const rendered = await act(async () => render(renderWithKey(undefined)))
+		const initial = managers.at(-1)!
+
+		await act(async () => rendered.rerender(renderWithKey('not-a-real-key')))
+		const changed = managers.at(-1)!
+		expect(changed).not.toBe(initial)
+
+		// same key again: the manager is stable
+		await act(async () => rendered.rerender(renderWithKey('not-a-real-key')))
+		expect(managers.at(-1)).toBe(changed)
+	})
+
+	it('shows the editor again when a new key arrives after the gate closed', async () => {
+		// validation never settles so the test drives the state by hand
+		vi.spyOn(LicenseManager.prototype, 'getLicenseFromKey').mockReturnValue(new Promise(() => {}))
+		vi.useFakeTimers()
+
+		const rendered = await act(async () => render(renderWithKey('expired-key')))
+		const expired = managers.at(-1)!
+		act(() => expired.state.set('expired'))
+		act(() => vi.advanceTimersByTime(LICENSE_TIMEOUT))
+		expect(rendered.queryByTestId('tl-license-expired')).not.toBeNull()
+
+		await act(async () => rendered.rerender(renderWithKey('fresh-key')))
+		expect(rendered.queryByTestId('tl-license-expired')).toBeNull()
+		expect(managers.at(-1)).not.toBe(expired)
+	})
+
+	it('ignores the validation result of a manager replaced by a new key', async () => {
+		const resolvers: ((result: LicenseFromKeyResult) => void)[] = []
+		vi.spyOn(LicenseManager.prototype, 'getLicenseFromKey').mockImplementation(
+			() => new Promise((resolve) => resolvers.push(resolve))
+		)
+		const track = vi.spyOn(LicenseManager.prototype as any, 'maybeTrack')
+
+		const rendered = await act(async () => render(renderWithKey(undefined)))
+		const orphan = managers.at(-1)!
+		await act(async () => rendered.rerender(renderWithKey('real-key')))
+		expect(managers.at(-1)).not.toBe(orphan)
+
+		await act(async () => resolvers[0](NO_KEY))
+		expect(orphan.state.get()).toBe('pending')
+		expect(track).not.toHaveBeenCalled()
+
+		await act(async () => resolvers[1](NO_KEY))
+		expect(managers.at(-1)!.state.get()).toBe('unlicensed')
+	})
+})

package/src/lib/license/LicenseProvider.tsx

@@ -1,5 +1,5 @@
 import { useValue } from '@tldraw/state-react'
-import { createContext, ReactNode, useContext, useEffect, useState } from 'react'
+import { createContext, ReactNode, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { useMaybeEditor } from '../hooks/useEditor'
 import { LicenseManager } from './LicenseManager'
 
@@ -46,21 +46,35 @@ export function LicenseProvider({
 	licenseKey?: string
 	children: ReactNode
 }) {
-	const [licenseManager] = useState(() => new LicenseManager(licenseKey))
+	// Keyed on the license key: the editor is recreated when the key changes, and must not be
+	// handed a manager that validated the old key.
+	const licenseManager = useMemo(() => new LicenseManager(licenseKey), [licenseKey])
 	const licenseState = useValue(licenseManager.state)
-	const [showEditor, setShowEditor] = useState(true)
+	// The manager whose LICENSE_TIMEOUT elapsed; compared by identity so a new key un-gates the editor.
+	const [gatedManager, setGatedManager] = useState<LicenseManager | null>(null)
+	const showEditor = gatedManager !== licenseManager
+
+	// Dispose only the replaced manager, never on cleanup: strict mode re-runs effects with the
+	// same manager, and disposing it there would silence the live one.
+	const previousManager = useRef<LicenseManager | null>(null)
+	useEffect(() => {
+		if (previousManager.current && previousManager.current !== licenseManager) {
+			previousManager.current.dispose()
+		}
+		previousManager.current = licenseManager
+	}, [licenseManager])
 
 	// When license expires or no license in production, show for 5 seconds then hide
 	useEffect(() => {
 		if (shouldHideEditorAfterDelay(licenseState) && showEditor) {
 			// eslint-disable-next-line no-restricted-globals
 			const timer = setTimeout(() => {
-				setShowEditor(false)
+				setGatedManager(licenseManager)
 			}, LICENSE_TIMEOUT)
 
 			return () => clearTimeout(timer)
 		}
-	}, [licenseState, showEditor])
+	}, [licenseManager, licenseState, showEditor])
 
 	// If license is expired or no license in production and 5 seconds have passed, don't render anything (blank screen)
 	if (shouldHideEditorAfterDelay(licenseState) && !showEditor) {

package/src/lib/test/preserveFocus.test.tsx

@@ -0,0 +1,81 @@
+import { act, render } from '@testing-library/react'
+import { createTLStore } from '../config/createTLStore'
+import { Editor } from '../editor/Editor'
+import { TldrawEditor } from '../TldrawEditor'
+
+// The `tldraw_preserve_focus` search param switches the editor into preserve-focus mode, where
+// a pointerdown inside the container focuses the editor and a pointerdown elsewhere blurs it.
+describe('preserve-focus mode', () => {
+	const mounted: Element[] = []
+
+	beforeEach(() => {
+		window.history.replaceState(null, '', '?tldraw_preserve_focus')
+	})
+
+	afterEach(() => {
+		window.history.replaceState(null, '', '/')
+		for (const el of mounted.splice(0)) el.remove()
+	})
+
+	function pointerDown(target: EventTarget) {
+		act(() => {
+			target.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }))
+		})
+	}
+
+	async function mount(root: Element | ShadowRoot) {
+		const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
+		const container = document.createElement('div')
+		root.appendChild(container)
+		mounted.push(container)
+		let editor: Editor | undefined
+		let unmount = () => {}
+		await act(async () => {
+			unmount = render(
+				<TldrawEditor
+					store={store}
+					onMount={(e) => {
+						editor = e
+					}}
+				/>,
+				{ container }
+			).unmount
+		})
+		return { editor: editor!, unmount }
+	}
+
+	it('focuses on a canvas pointerdown and blurs on a pointerdown outside', async () => {
+		const { editor } = await mount(document.body)
+		expect(editor.getIsFocused()).toBe(false)
+
+		pointerDown(editor.getContainer().querySelector('.tl-canvas')!)
+		expect(editor.getIsFocused()).toBe(true)
+
+		pointerDown(document.body)
+		expect(editor.getIsFocused()).toBe(false)
+	})
+
+	it('keeps focus when the editor is inside an open shadow root', async () => {
+		// The body listener sees the event retargeted to the shadow host, so a check on
+		// `e.target` alone would blur the editor right after the container focused it.
+		const host = document.createElement('div')
+		document.body.appendChild(host)
+		mounted.push(host)
+		const { editor } = await mount(host.attachShadow({ mode: 'open' }))
+
+		pointerDown(editor.getContainer().querySelector('.tl-canvas')!)
+		expect(editor.getIsFocused()).toBe(true)
+
+		pointerDown(document.body)
+		expect(editor.getIsFocused()).toBe(false)
+	})
+
+	it('removes the body listener on unmount', async () => {
+		const { editor, unmount } = await mount(document.body)
+		const blur = vi.spyOn(editor, 'blur')
+
+		act(() => unmount())
+		pointerDown(document.body)
+		expect(blur).not.toHaveBeenCalled()
+	})
+})

package/src/lib/utils/debug-flags.ts

@@ -43,12 +43,6 @@ export const debugFlags = {
 	throwToBlob: createDebugValue('throwToBlob', {
 		defaults: { all: false },
 	}),
-	reconnectOnPing: createDebugValue('reconnectOnPing', {
-		defaults: { all: false },
-	}),
-	debugCursors: createDebugValue('debugCursors', {
-		defaults: { all: false },
-	}),
 	forceSrgb: createDebugValue('forceSrgbColors', { defaults: { all: false } }),
 	debugGeometry: createDebugValue('debugGeometry', { defaults: { all: false } }),
 	hideShapes: createDebugValue('hideShapes', { defaults: { all: false } }),

package/src/lib/utils/deepLinks.test.ts

@@ -81,6 +81,21 @@ describe('parseDeepLinkString', () => {
 		expect(() => parseDeepLinkString('v')).toThrow('Invalid deep link string')
 	})
 
+	it('throws on a viewport link with no area', () => {
+		expect(() => parseDeepLinkString('v0.0.0.0')).toThrow('Invalid deep link string')
+		expect(() => parseDeepLinkString('v100.100.0.200')).toThrow('Invalid deep link string')
+		expect(() => parseDeepLinkString('v100.100.200.0')).toThrow('Invalid deep link string')
+		expect(() => parseDeepLinkString('v100.100.-200.-100')).toThrow('Invalid deep link string')
+	})
+
+	it('accepts a viewport link positioned at the origin', () => {
+		expect(parseDeepLinkString('v0.0.200.100')).toEqual({
+			type: 'viewport',
+			bounds: new Box(0, 0, 200, 100),
+			pageId: undefined,
+		})
+	})
+
 	it('throws on an unknown link type', () => {
 		expect(() => parseDeepLinkString('xabc')).toThrow('Invalid deep link string')
 	})

package/src/lib/utils/deepLinks.ts

@@ -74,9 +74,14 @@ export function parseDeepLinkString(deepLinkString: string): TLDeepLink {
 		case 'v': {
 			const [x, y, w, h, pageId] = deepLinkString.slice(1).split('.')
 			const bounds = new Box(Number(x), Number(y), Number(w), Number(h))
-			// Number('abc') is NaN rather than an error, so without this check a malformed
-			// viewport link would bypass the caller's fallback and park the camera at the origin
-			if (![bounds.x, bounds.y, bounds.w, bounds.h].every(Number.isFinite)) {
+			// Number('abc') is NaN rather than an error, and a box with no area parses cleanly but
+			// can only be zoomed to by clamping to max zoom at its corner. Both bypass the caller's
+			// fallback and park the camera at the origin, so both count as an invalid link here.
+			const isUsableViewport =
+				[bounds.x, bounds.y, bounds.w, bounds.h].every(Number.isFinite) &&
+				bounds.w > 0 &&
+				bounds.h > 0
+			if (!isUsableViewport) {
 				throw Error('Invalid deep link string')
 			}
 			return {

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

@@ -1,5 +1,5 @@
 import { createTLSchema } from '@tldraw/tlschema'
-import { openDB } from 'idb'
+import { deleteDB, openDB } from 'idb'
 import { vi } from 'vitest'
 import { hardReset } from './hardReset'
 import { getAllIndexDbNames, LocalIndexedDb } from './LocalIndexedDb'
@@ -10,6 +10,7 @@ describe('LocalIndexedDb', () => {
 		vi.useRealTimers()
 	})
 	afterEach(async () => {
+		vi.restoreAllMocks()
 		await hardReset({ shouldReload: false })
 	})
 	describe('#storeSnapshot', () => {
@@ -106,6 +107,34 @@ describe('LocalIndexedDb', () => {
 		})
 	})
 
+	it('commits a write that is still in flight when the db is closed', async () => {
+		const db = new LocalIndexedDb('test-0')
+		const write = db.storeSnapshot({ schema, snapshot: { 'shape:1': { id: 'shape:1' } } })
+		await db.close()
+		await write
+
+		const reopened = new LocalIndexedDb('test-0')
+		expect((await reopened.load())?.records).toEqual([{ id: 'shape:1' }])
+		await reopened.close()
+	})
+
+	it('rejects a transaction that aborts after its requests succeeded while closing', async () => {
+		const db = new LocalIndexedDb('test-0')
+		let closing: Promise<void> | undefined
+		// A commit can fail after every request succeeded, so the request promises cannot report it.
+		// @ts-expect-error Exercise the transaction boundary directly to inject a commit failure.
+		const write = db.tx('readwrite', ['records'], async (tx) => {
+			await tx.objectStore('records').put({ id: 'shape:1' }, 'shape:1')
+			closing = db.close()
+			tx.abort()
+		})
+		try {
+			await expect(write).rejects.toMatchObject({ name: 'AbortError' })
+		} finally {
+			await closing
+		}
+	})
+
 	describe('#storeChanges', () => {
 		it('allows merging changes into an existing store', async () => {
 			const db = new LocalIndexedDb('test-0')
@@ -174,6 +203,72 @@ describe('LocalIndexedDb', () => {
 		})
 	})
 
+	describe('#pruneSessions', () => {
+		it('keeps the 10 most recent session rows and the current session', async () => {
+			const db = new LocalIndexedDb('test-0')
+			let now = 1000
+			vi.spyOn(Date, 'now').mockImplementation(() => now++)
+
+			// the current session is the oldest row of 14
+			const sessionIds = ['current', ...Array.from({ length: 13 }, (_, i) => `other-${i}`)]
+			for (const sessionId of sessionIds) {
+				await db.storeChanges({
+					schema,
+					changes: { added: {}, updated: {}, removed: {} },
+					sessionId,
+					sessionStateSnapshot: { sessionId } as any,
+				})
+			}
+
+			await db.pruneSessions({ keepSessionId: 'current' })
+
+			const remaining = await Promise.all(
+				sessionIds.map(async (sessionId) => [
+					sessionId,
+					((await db.load({ sessionId })).sessionStateSnapshot as any)?.sessionId === sessionId,
+				])
+			)
+			expect(Object.fromEntries(remaining)).toEqual({
+				current: true,
+				'other-0': false,
+				'other-1': false,
+				'other-2': false,
+				'other-3': true,
+				'other-4': true,
+				'other-5': true,
+				'other-6': true,
+				'other-7': true,
+				'other-8': true,
+				'other-9': true,
+				'other-10': true,
+				'other-11': true,
+				'other-12': true,
+			})
+
+			await db.close()
+		})
+
+		it('is a no-op when there are at most 10 rows', async () => {
+			const db = new LocalIndexedDb('test-0')
+			for (let i = 0; i < 10; i++) {
+				await db.storeChanges({
+					schema,
+					changes: { added: {}, updated: {}, removed: {} },
+					sessionId: `session-${i}`,
+					sessionStateSnapshot: { i } as any,
+				})
+			}
+
+			await db.pruneSessions()
+
+			for (let i = 0; i < 10; i++) {
+				expect((await db.load({ sessionId: `session-${i}` })).sessionStateSnapshot).toEqual({ i })
+			}
+
+			await db.close()
+		})
+	})
+
 	it('migrates legacy asset storage into the new format', async () => {
 		const legacyAssetsDb = await openDB('TLDRAW_ASSET_STORE_v1test-0', 1, {
 			upgrade(database) {
@@ -239,4 +334,29 @@ describe('LocalIndexedDb', () => {
 			(await window.indexedDB.databases()).find((db) => db.name === 'TLDRAW_ASSET_STORE_v1test-0')
 		).toBeUndefined()
 	})
+
+	it('closes its connection so another tab can delete the database', async () => {
+		const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+		const db = new LocalIndexedDb('test-0')
+		await db.storeSnapshot({ schema, snapshot: {} })
+
+		// Simulates a hard reset from another tab. Without the blocking handler this never
+		// resolves because our open connection blocks the delete.
+		let timeout: ReturnType<typeof setTimeout>
+		const result = await Promise.race([
+			deleteDB('TLDRAW_DOCUMENT_v2test-0').then(() => 'deleted'),
+			new Promise<string>((resolve) => {
+				timeout = setTimeout(() => resolve('blocked'), 1000)
+			}),
+		])
+		clearTimeout(timeout!)
+		expect(result).toBe('deleted')
+		expect(warn).toHaveBeenCalledWith(
+			'Closing TLDRAW_DOCUMENT_v2test-0 so another tab can delete or upgrade it'
+		)
+		warn.mockRestore()
+
+		// the next write on the closed connection surfaces as an error rather than hanging
+		await expect(db.storeSnapshot({ schema, snapshot: {} })).rejects.toThrow()
+	})
 })