@tldraw/editor 5.5.2 → 5.6.0-canary.0091c91994d6

package/src/lib/license/LicenseManager.ts

@@ -29,6 +29,7 @@ export const FLAGS = {
 	FEAT_COLLABORATION: 1 << 6,
 	// Commenting is the first sub-feature of collaboration.
 	FEAT_COMMENTING: 1 << 7,
+	TRACKED: 1 << 8,
 }
 const HIGHEST_FLAG = Math.max(...Object.values(FLAGS))
 
@@ -42,6 +43,31 @@ const NUMBER_OF_KNOWN_PROPERTIES = Object.keys(PROPERTIES).length
 
 const LICENSE_EMAIL = 'sales@tldraw.com'
 
+/**
+ * tldraw's own public domains. A page served from one of these hosts — or any subdomain of one — is
+ * licensed without a key, because we own them: minting and rotating keys for our own properties was
+ * a recurring source of expired and wrong-domain deployments.
+ *
+ * This list ships in the bundle, so it holds only domains we already serve from publicly. tldraw's
+ * private domains are deliberately absent and keep using a real license key.
+ */
+const CANONICAL_TLDRAW_HOSTS = [
+	'tldraw.com',
+	'tldraw.dev',
+	'tldraw.club',
+	'tldraw.workers.dev',
+	'tldraw.xyz',
+]
+
+/** Our VS Code extension, whose webviews are served from `vscode-webview:` with a random hostname. */
+const CANONICAL_VSCODE_EXTENSION_ID = 'tldraw-org.tldraw-vscode'
+
+/** Marks a license as the keyless canonical-host grant, which is never tracked. */
+const CANONICAL_HOST_LICENSE_ID = 'tldraw-canonical-host'
+
+/** The canonical-host grant has no key behind it, and so no expiry date to fall due. */
+const CANONICAL_HOST_NEVER_EXPIRES = new Date(8640000000000000)
+
 const WATERMARK_TRACK_SRC = `${getDefaultCdnBaseUrl()}/watermarks/watermark-track.svg`
 
 /** @internal */
@@ -114,7 +140,7 @@ export interface ValidLicenseKeyResult {
 }
 
 /** @internal */
-export type TrackType = 'unlicensed' | 'with_watermark' | 'evaluation' | null
+export type TrackType = 'unlicensed' | 'with_watermark' | 'evaluation' | 'tracked' | null
 
 /** @internal */
 export class LicenseManager {
@@ -214,7 +240,59 @@ export class LicenseManager {
 		return host === 'localhost' || host === '::1' || /^127(?:\.\d{1,3}){3}$/.test(host)
 	}
 
+	/** Whether the page is served from one of tldraw's own domains, a subdomain of one, or our VS Code extension. */
+	private isCanonicalTldrawHost() {
+		if (window.location.protocol === 'vscode-webview:') {
+			const extensionId = new URL(window.location.href).searchParams.get('extensionId')
+			return extensionId === CANONICAL_VSCODE_EXTENSION_ID
+		}
+		const hostname = window.location.hostname.toLowerCase()
+		return CANONICAL_TLDRAW_HOSTS.some((host) => hostname === host || hostname.endsWith(`.${host}`))
+	}
+
+	/**
+	 * The license tldraw's own domains get without a key. It keeps the watermark — our properties
+	 * advertise the SDK the same way any other watermarked deployment does — and grants the
+	 * collaboration features our apps are built on.
+	 *
+	 * Every expiry-derived field is a literal rather than something computed from a date, because
+	 * there is no key here to expire: the grant lasts as long as the host is ours.
+	 */
+	private getCanonicalHostLicense(): ValidLicenseKeyResult {
+		return {
+			isLicenseParseable: true,
+			license: {
+				id: CANONICAL_HOST_LICENSE_ID,
+				hosts: [window.location.hostname.toLowerCase()],
+				flags: FLAGS.WITH_WATERMARK | FLAGS.FEAT_COLLABORATION | FLAGS.FEAT_COMMENTING,
+				expiryDate: CANONICAL_HOST_NEVER_EXPIRES.toISOString(),
+			},
+			isDevelopment: this.isDevelopment,
+			isDomainValid: true,
+			expiryDate: CANONICAL_HOST_NEVER_EXPIRES,
+			isAnnualLicense: false,
+			isAnnualLicenseExpired: false,
+			isPerpetualLicense: false,
+			isPerpetualLicenseExpired: false,
+			isInternalLicense: false,
+			isNativeLicense: false,
+			isLicensedWithWatermark: true,
+			isEvaluationLicense: false,
+			isEvaluationLicenseExpired: false,
+			isCollaborationEnabled: true,
+			isCommentingEnabled: true,
+			daysSinceExpiry: 0,
+		}
+	}
+
 	private getTrackType(result: LicenseFromKeyResult, licenseState: LicenseState): TrackType {
+		// Our own domains are licensed without a key, and the watermark ping exists to tell us about
+		// deployments we don't already know about. Reporting our own apps back to ourselves would only
+		// add noise to the numbers we read, so the canonical-host grant is never tracked.
+		if ('license' in result && result.license.id === CANONICAL_HOST_LICENSE_ID) {
+			return null
+		}
+
 		// Track watermark for unlicensed production deployments
 		if (licenseState === 'unlicensed-production') {
 			return 'unlicensed'
@@ -233,6 +311,10 @@ export class LicenseManager {
 			return 'evaluation'
 		}
 
+		if (this.isFlagEnabled(result.license.flags, FLAGS.TRACKED)) {
+			return 'tracked'
+		}
+
 		// Track licenses that show watermarks
 		if (licenseState === 'licensed-with-watermark') {
 			return 'with_watermark'
@@ -323,6 +405,12 @@ export class LicenseManager {
 	}
 
 	async getLicenseFromKey(licenseKey?: string): Promise<LicenseFromKeyResult> {
+		// A key that is provided still wins, so an app on one of our hosts can opt into a different
+		// license — a native or feature-specific key — just by passing it.
+		if (!licenseKey && this.isCanonicalTldrawHost()) {
+			return this.getCanonicalHostLicense()
+		}
+
 		if (!licenseKey) {
 			if (!this.isDevelopment) {
 				this.outputNoLicenseKeyProvided()

package/src/lib/options.ts

@@ -313,7 +313,7 @@ export const defaultTldrawOptions = {
 	collaboratorIdleTimeoutMs: 3000,
 	collaboratorCheckIntervalMs: 1200,
 	cameraMovingTimeoutMs: 64,
-	hitTestMargin: 3,
+	hitTestMargin: 4.5,
 	coarseHitTestMargin: 4,
 	edgeScrollDelay: 200,
 	edgeScrollEaseDuration: 200,

package/src/lib/test/useCursor.test.tsx

@@ -0,0 +1,36 @@
+import { act, render } from '@testing-library/react'
+import { createTLStore } from '../config/createTLStore'
+import { Editor } from '../editor/Editor'
+import { getCursor } from '../hooks/useCursor'
+import { TL_CONTAINER_CLASS, TldrawEditor } from '../TldrawEditor'
+
+describe('useCursor', () => {
+	it('maps the static schema cursor types to their css variables', async () => {
+		let editor: Editor
+		const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
+		await act(async () => {
+			render(<TldrawEditor store={store} onMount={(e) => void (editor = e)} />)
+		})
+		const container = document.querySelector(`.${TL_CONTAINER_CLASS}`) as HTMLElement
+
+		for (const type of ['rotate', 'resize-edge', 'resize-corner', 'default'] as const) {
+			act(() => editor.setCursor({ type, rotation: 0 }))
+			expect(container.style.getPropertyValue('--tl-cursor')).toBe(`var(--tl-cursor-${type})`)
+		}
+	})
+})
+
+describe('getCursor', () => {
+	it('returns the css variable for the static cursor types', () => {
+		for (const type of ['rotate', 'resize-edge', 'resize-corner', 'default'] as const) {
+			expect(getCursor(type)).toBe(`var(--tl-cursor-${type})`)
+			expect(getCursor(type, Math.PI / 2, '#000000')).toBe(`var(--tl-cursor-${type})`)
+		}
+	})
+
+	it('encodes the colour so a hex value does not end the data url as a fragment', () => {
+		const css = getCursor('ew-resize', 0, '#000000')
+		expect(css).toContain("style='color: %23000000;'")
+		expect(css).not.toContain('#')
+	})
+})

package/src/lib/test/useDocumentEvents.test.tsx

@@ -5,6 +5,34 @@ import { Editor } from '../editor/Editor'
 import { TLKeyboardEventInfo } from '../editor/types/event-types'
 import { TL_CONTAINER_CLASS, TldrawEditor } from '../TldrawEditor'
 
+async function renderEditor() {
+	let editor!: Editor
+	const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
+	await act(async () => {
+		render(<TldrawEditor store={store} autoFocus onMount={(e) => void (editor = e)} />)
+	})
+	const container = document.querySelector<HTMLElement>(`.${TL_CONTAINER_CLASS}`)!
+	return { editor, container }
+}
+
+function keyDown(container: HTMLElement, init: KeyboardEventInit) {
+	act(() => {
+		container.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, ...init }))
+	})
+}
+
+function keyUp(container: HTMLElement, init: KeyboardEventInit) {
+	act(() => {
+		container.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true, ...init }))
+	})
+}
+
+function blurWindow() {
+	act(() => {
+		window.dispatchEvent(new Event('blur'))
+	})
+}
+
 describe('useDocumentEvents drop handling', () => {
 	// The container's native drop listener used to stop propagation before the event reached
 	// React's root, so React onDrop handlers inside the canvas never fired.
@@ -33,28 +61,6 @@ describe('useDocumentEvents drop handling', () => {
 })
 
 describe('useDocumentEvents window blur', () => {
-	async function renderEditor() {
-		let editor!: Editor
-		const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
-		await act(async () => {
-			render(<TldrawEditor store={store} autoFocus onMount={(e) => void (editor = e)} />)
-		})
-		const container = document.querySelector<HTMLElement>(`.${TL_CONTAINER_CLASS}`)!
-		return { editor, container }
-	}
-
-	function keyDown(container: HTMLElement, init: KeyboardEventInit) {
-		act(() => {
-			container.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, ...init }))
-		})
-	}
-
-	function blurWindow() {
-		act(() => {
-			window.dispatchEvent(new Event('blur'))
-		})
-	}
-
 	afterEach(() => {
 		cleanup()
 	})
@@ -105,3 +111,128 @@ describe('useDocumentEvents window blur', () => {
 		expect(onEvent).not.toHaveBeenCalled()
 	})
 })
+
+// Browsers report `metaKey` as still true on the keyup of Meta itself.
+const metaKeyUp: KeyboardEventInit = { key: 'Meta', code: 'MetaLeft', metaKey: true }
+
+describe('useDocumentEvents meta release', () => {
+	afterEach(() => {
+		cleanup()
+	})
+
+	// macOS never delivers the keyup of a non-modifier key pressed while Meta is held, so the
+	// arrow from a Cmd+Arrow shortcut stayed held and the next plain arrow nudged diagonally.
+	it('releases keys whose keyup macOS swallowed while Meta was held', async () => {
+		const { editor, container } = await renderEditor()
+
+		keyDown(container, { key: 'Meta', code: 'MetaLeft', metaKey: true })
+		keyDown(container, { key: 'ArrowUp', code: 'ArrowUp', metaKey: true })
+		expect([...editor.inputs.keys]).toEqual(['MetaLeft', 'ArrowUp'])
+
+		// no keyup for ArrowUp ever arrives
+		keyUp(container, metaKeyUp)
+		expect([...editor.inputs.keys]).toEqual([])
+	})
+
+	// A key held from before Meta went down still gets its own keyup, so releasing it here
+	// would drop a key the user is still holding.
+	it('leaves keys held from before Meta went down', async () => {
+		const { editor, container } = await renderEditor()
+
+		keyDown(container, { key: ' ', code: 'Space' })
+		keyDown(container, { key: 'Meta', code: 'MetaLeft', metaKey: true })
+		keyUp(container, metaKeyUp)
+
+		expect([...editor.inputs.keys]).toEqual(['Space'])
+	})
+
+	// That key keeps auto-repeating, and once Cmd is down those repeats carry `metaKey`.
+	// Counting them would release a key that is still physically down - and a repeat never
+	// puts it back, since the editor treats key_repeat as a noop.
+	it('leaves a key that was already repeating when Meta went down', async () => {
+		const { editor, container } = await renderEditor()
+
+		keyDown(container, { key: 'ArrowUp', code: 'ArrowUp' })
+		keyDown(container, { key: 'Meta', code: 'MetaLeft', metaKey: true })
+		keyDown(container, { key: 'ArrowUp', code: 'ArrowUp', metaKey: true, repeat: true })
+		keyUp(container, metaKeyUp)
+
+		expect([...editor.inputs.keys]).toEqual(['ArrowUp'])
+	})
+
+	// Idle.onKeyUp re-enters shape editing on Enter, so replaying a key_up here stole the
+	// focus that cmd+Enter's a11y action had just put on the style toolbar.
+	it('does not fire tool key_up handlers for the keys it releases', async () => {
+		const { editor, container } = await renderEditor()
+		const keyUps: TLKeyboardEventInfo[] = []
+		editor.on('event', (info) => {
+			if (info.type === 'keyboard' && info.name === 'key_up') keyUps.push(info)
+		})
+
+		keyDown(container, { key: 'Meta', code: 'MetaLeft', metaKey: true })
+		keyDown(container, { key: 'Enter', code: 'Enter', metaKey: true })
+		keyUp(container, metaKeyUp)
+
+		expect([...editor.inputs.keys]).toEqual([])
+		expect(keyUps.map((info) => info.code)).toEqual(['MetaLeft'])
+	})
+
+	// A still-held modifier keeps its own keyup, and reporting it as up would start the
+	// editor's 150ms release: `ShiftLeft` would leave `inputs.keys` and shrink the nudge step.
+	it('leaves a still-held modifier alone', async () => {
+		const { editor, container } = await renderEditor()
+
+		keyDown(container, { key: 'Shift', code: 'ShiftLeft', shiftKey: true })
+		keyDown(container, { key: 'Meta', code: 'MetaLeft', shiftKey: true, metaKey: true })
+		keyDown(container, { key: 'ArrowUp', code: 'ArrowUp', shiftKey: true, metaKey: true })
+
+		keyUp(container, { ...metaKeyUp, shiftKey: true })
+		expect([...editor.inputs.keys]).toEqual(['ShiftLeft'])
+
+		await act(async () => {
+			await new Promise((resolve) => setTimeout(resolve, 200))
+		})
+		expect([...editor.inputs.keys]).toEqual(['ShiftLeft'])
+		expect(editor.inputs.getShiftKey()).toBe(true)
+	})
+
+	// Letting go of Cmd while still holding the arrow: the arrow is dropped as owed a keyup,
+	// but it is genuinely down, and its repeats say so. Without this, nudging stopped dead
+	// mid-gesture and stayed dead for as long as the key was held.
+	it('takes back a dropped key that is still repeating', async () => {
+		const { editor, container } = await renderEditor()
+
+		keyDown(container, { key: 'Meta', code: 'MetaLeft', metaKey: true })
+		keyDown(container, { key: 'ArrowUp', code: 'ArrowUp', metaKey: true })
+		keyUp(container, metaKeyUp)
+		expect([...editor.inputs.keys]).toEqual([])
+
+		keyDown(container, { key: 'ArrowUp', code: 'ArrowUp', repeat: true })
+		expect([...editor.inputs.keys]).toEqual(['ArrowUp'])
+	})
+
+	it('does not disturb keys held without Meta', async () => {
+		const { editor, container } = await renderEditor()
+
+		keyDown(container, { key: 'ArrowUp', code: 'ArrowUp' })
+		keyUp(container, { key: 'ArrowUp', code: 'ArrowUp' })
+		keyDown(container, { key: 'ArrowRight', code: 'ArrowRight' })
+
+		expect([...editor.inputs.keys]).toEqual(['ArrowRight'])
+	})
+
+	// Browsers report `metaKey: true` on Meta's own keyup, which left `getMetaKey()` true
+	// until some later event happened to report it false.
+	it('releases meta itself, though its keyup reports metaKey as still down', async () => {
+		const { editor, container } = await renderEditor()
+
+		keyDown(container, { key: 'Meta', code: 'MetaLeft', metaKey: true })
+		expect(editor.inputs.getMetaKey()).toBe(true)
+
+		keyUp(container, metaKeyUp)
+		await act(async () => {
+			await new Promise((resolve) => setTimeout(resolve, 200))
+		})
+		expect(editor.inputs.getMetaKey()).toBe(false)
+	})
+})

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

@@ -484,3 +484,76 @@ test('a buffered newer schema reports a load error without announcing a successf
 	client.close()
 	expect(client.db.storeSnapshot).not.toHaveBeenCalled()
 })
+
+test('a client created on the same key while a closed client is still flushing waits for that flush', async () => {
+	const inFlightWrite = promiseWithResolve<void>()
+	const { client, tick } = testClient()
+	client.db.storeSnapshot.mockImplementationOnce(() => inFlightWrite)
+	await tick()
+	client.store.put([PageRecordType.create({ name: 'first', index: 'a0' as IndexKey })])
+	await tick()
+	expect(client.db.storeSnapshot).toHaveBeenCalledTimes(1) // still in flight
+	client.store.put([PageRecordType.create({ name: 'during write', index: 'a1' as IndexKey })])
+	client.close()
+
+	// remount on the same key while the old client is still flushing
+	const loadSpy = vi.spyOn(LocalIndexedDb.prototype, 'load')
+	const next = testClient()
+	await tick()
+	// reading now would miss the queued edit, then erase it on the first write
+	expect(loadSpy).not.toHaveBeenCalled()
+	expect(next.onLoad).not.toHaveBeenCalled()
+
+	inFlightWrite.resolve()
+	await tick()
+	expect(client.db.storeChanges).toHaveBeenCalledTimes(1)
+	for (let i = 0; i < 20; i++) await Promise.resolve()
+	await next.tick()
+	expect(loadSpy).toHaveBeenCalledTimes(1)
+	expect(next.onLoad).toHaveBeenCalledTimes(1)
+	loadSpy.mockRestore()
+})
+
+test('two clients closing on the same key flush in order', async () => {
+	const writes: string[] = []
+	const inFlightWrite = promiseWithResolve<void>()
+
+	const a = testClient()
+	const b = testClient()
+	await a.tick()
+	await b.tick()
+	// hold a's first write in flight
+	a.client.db.storeSnapshot.mockImplementation(() => {
+		writes.push('a')
+		return inFlightWrite
+	})
+	a.client.db.storeChanges.mockImplementation(() => {
+		writes.push('a')
+		return Promise.resolve()
+	})
+	b.client.db.storeSnapshot.mockImplementation(() => {
+		writes.push('b')
+		return Promise.resolve()
+	})
+	b.client.db.storeChanges.mockImplementation(() => {
+		writes.push('b')
+		return Promise.resolve()
+	})
+
+	a.client.store.put([PageRecordType.create({ name: 'a1', index: 'a0' as IndexKey })])
+	await a.tick()
+	expect(writes).toEqual(['a']) // in flight
+	a.client.store.put([PageRecordType.create({ name: 'a2', index: 'a1' as IndexKey })])
+	a.client.close()
+
+	b.client.store.put([PageRecordType.create({ name: 'b1', index: 'a2' as IndexKey })])
+	b.client.close()
+	await b.tick()
+	// b's snapshot landing first would lose a's queued changes
+	expect(writes).toEqual(['a'])
+
+	inFlightWrite.resolve()
+	await a.tick()
+	await b.tick()
+	expect(writes).toEqual(['a', 'a', 'b'])
+})

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

@@ -1,7 +1,7 @@
 import { Signal, transact } from '@tldraw/state'
 import { RecordsDiff, SerializedSchema, UnknownRecord, squashRecordDiffs } from '@tldraw/store'
 import { TLStore } from '@tldraw/tlschema'
-import { assert } from '@tldraw/utils'
+import { assert, noop } from '@tldraw/utils'
 import {
 	TAB_ID,
 	TLSessionStateSnapshot,
@@ -64,6 +64,9 @@ export class BroadcastChannelMock {
 
 const BC = typeof BroadcastChannel === 'undefined' ? BroadcastChannelMock : BroadcastChannel
 
+// Flushes still running for closed clients, by key. See connect() and close().
+const pendingFlushes = new Map<string, Promise<void>>()
+
 /** @internal */
 export class TLLocalSyncClient {
 	private disposables = new Set<() => void>()
@@ -238,6 +241,11 @@ export class TLLocalSyncClient {
 			this.channel.close()
 		})
 
+		// our first write is a full snapshot, so it would erase whatever a client that just closed
+		// on this key is still flushing
+		await pendingFlushes.get(this.persistenceKey)
+		if (this.didDispose) return
+
 		try {
 			data = await this.db.load({ sessionId: this.sessionId })
 		} catch (error: any) {
@@ -313,8 +321,6 @@ export class TLLocalSyncClient {
 		if (this.didDispose) return
 		this.debug('closing')
 		this.didDispose = true
-		// Store listeners normally run on the next frame; collect the last edits before removal.
-		this.store._flushHistory()
 		this.disposables.forEach((d) => d())
 		if (this.scheduledPersistTimeout) {
 			clearTimeout(this.scheduledPersistTimeout)
@@ -323,7 +329,18 @@ export class TLLocalSyncClient {
 		if (typeof window !== 'undefined' && (window as any).tlsync === this) {
 			delete (window as any).tlsync
 		}
-		this.flushAndCloseDb()
+		// flush now when the key is idle: close() runs during teardown, where a deferred write may
+		// never run. wait when it isn't, or our snapshot lands first and gets overwritten.
+		// connect() awaits this, so it must never reject
+		const previous = pendingFlushes.get(this.persistenceKey)
+		const flush = (previous ? previous.then(() => this.flushAndCloseDb()) : this.flushAndCloseDb())
+			.catch(noop)
+			.then(() => {
+				if (pendingFlushes.get(this.persistenceKey) === flush) {
+					pendingFlushes.delete(this.persistenceKey)
+				}
+			})
+		pendingFlushes.set(this.persistenceKey, flush)
 	}
 
 	/**
@@ -332,17 +349,16 @@ export class TLLocalSyncClient {
 	 * store), and only when something is queued: shouldDoFullDBWrite stays true until the first
 	 * persist, so an unconditional flush would rewrite the whole document on every no-op close.
 	 */
-	private flushAndCloseDb() {
+	private flushAndCloseDb(): Promise<void> {
 		// A persist in flight can't be joined (persistIfNeeded bails while one is running) and,
 		// now that we're disposed, won't schedule a follow-up. Edits queued during that write
 		// would be lost if the db closed now, so wait for it and flush again.
 		if (this.persistPromise) {
-			this.persistPromise.then(() => this.flushAndCloseDb())
-			return
+			return this.persistPromise.then(() => this.flushAndCloseDb())
 		}
 		if (this.didLoad && this.diffQueue.length > 0) this.persistIfNeeded()
 		// the db waits for the transaction the flush just opened before actually closing
-		this.db.close()
+		return this.db.close()
 	}
 
 	private isPersisting = false

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 = '5.5.2'
+export const version = '5.6.0-canary.0091c91994d6'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-09-30T10:03:27.724Z',
-	patch: '2026-10-02T13:35:40.683Z',
+	minor: '2026-10-28T11:15:20.344Z',
+	patch: '2026-10-28T11:15:20.344Z',
 }