@tldraw/editor 5.6.0-next.c4e9c54a816e → 5.6.0-next.f151f7f3ebd6

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

@@ -1,4 +1,4 @@
-import { computed, EMPTY_ARRAY, transact } from '@tldraw/state'
+import { atom, computed, EMPTY_ARRAY, transact } from '@tldraw/state'
 import { AtomMap } from '@tldraw/store'
 import { TLFontFace, TLShape, TLShapeId } from '@tldraw/tlschema'
 import {
@@ -102,6 +102,29 @@ export class FontManager {
 		return this.fontStates.get(font) ?? null
 	}
 
+	// One signal for consumers that deliberately avoid per-shape font tracking (the
+	// spatial index); otherwise their cached text bounds stay at the fallback-font size.
+	private readonly fontLoadEpoch = atom('font load epoch', 0)
+
+	/** @internal */
+	getFontLoadEpoch(): number {
+		return this.fontLoadEpoch.get()
+	}
+
+	private isFontLoadEpochBumpPending = false
+
+	private setFontState(font: TLFontFace, state: FontState['state']) {
+		this.fontStates.update(font, (s) => ({ ...s, state }))
+		// Each bump rebuilds the whole spatial index, and fonts finish loading in
+		// separate callbacks, so coalesce loads that land in the same frame.
+		if (this.isFontLoadEpochBumpPending) return
+		this.isFontLoadEpochBumpPending = true
+		this.editor.timers.requestAnimationFrame(() => {
+			this.isFontLoadEpochBumpPending = false
+			this.fontLoadEpoch.update((n) => n + 1)
+		})
+	}
+
 	ensureFontIsLoaded(font: TLFontFace): Promise<void> {
 		const existingState = this.getFontState(font)
 		if (existingState) return existingState.loadingPromise
@@ -123,7 +146,7 @@ export class FontManager {
 						return
 					}
 					this.editor.getContainerDocument().fonts.add(instance)
-					this.fontStates.update(font, (s) => ({ ...s, state: 'ready' }))
+					this.setFontState(font, 'ready')
 				})
 				.catch((err) => {
 					if (isStale()) {
@@ -132,7 +155,7 @@ export class FontManager {
 						return
 					}
 					console.error(err)
-					this.fontStates.update(font, (s) => ({ ...s, state: 'error' }))
+					this.setFontState(font, 'error')
 				}),
 		}
 

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

@@ -177,6 +177,38 @@ describe(HistoryManager, () => {
 		expect(editor.getCount()).toBe(3)
 	})
 
+	// Callers mark before code that may change nothing, such as a shape util's double-click
+	// handler (#11075), so an empty stopping point must not cost an extra undo or redo
+	it('treats back-to-back stopping points as one on undo and redo', () => {
+		editor.history._mark('stop at 0')
+		editor.increment()
+		editor.history._mark('nothing follows this mark')
+		editor.history._mark('stop at 1')
+		editor.increment()
+		expect(editor.getCount()).toBe(2)
+
+		editor.history.undo()
+		expect(editor.getCount()).toBe(1)
+		editor.history.undo()
+		expect(editor.getCount()).toBe(0)
+
+		editor.history.redo()
+		expect(editor.getCount()).toBe(1)
+		editor.history.redo()
+		expect(editor.getCount()).toBe(2)
+	})
+
+	it('skips a trailing stopping point with no changes after it on undo', () => {
+		editor.history._mark('stop at 0')
+		editor.increment()
+		editor.history._mark('nothing follows this mark')
+
+		editor.history.undo()
+		expect(editor.getCount()).toBe(0)
+		editor.history.redo()
+		expect(editor.getCount()).toBe(1)
+	})
+
 	it('allows squashing of commands', () => {
 		editor.increment()
 

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

@@ -444,13 +444,11 @@ export class ScribbleManager {
 			}
 		}
 
-		// Remove completed items in individual fade mode
+		// Keep starting scribbles with no point yet, or addPoint can't find them (#7681).
 		if (session.options.fadeMode === 'individual') {
-			for (let i = session.items.length - 1; i >= 0; i--) {
-				if (session.items[i].scribble.points.length === 0) {
-					session.items.splice(i, 1)
-				}
-			}
+			session.items = session.items.filter(
+				({ scribble }) => scribble.points.length > 0 || scribble.state === 'starting'
+			)
 		}
 	}
 

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

@@ -41,6 +41,7 @@ export class SpatialIndexManager {
 	private rbush: RBushIndex
 	private spatialIndexComputed: Computed<number>
 	private lastPageId: TLPageId | null = null
+	private lastFontLoadEpoch = -1
 
 	// Bumps only when the rbush content may have changed. Consumers subscribe
 	// via the computed; a stable epoch lets prop-only diffs skip downstream
@@ -66,21 +67,28 @@ export class SpatialIndexManager {
 		const bindingHistory = this.editor.store.query.filterHistory('binding')
 
 		return computed<number>('spatialIndex', (_prevValue, lastComputedEpoch) => {
-			// These three reads are the computed's only tracked dependencies.
-			// Every input to a shape's page bounds is a shape or binding record,
-			// so the two histories cover all invalidation; the rebuild/update
-			// paths below run without capture to avoid registering a dependency
-			// per checked shape on every update (and ~page-size dependencies on
-			// every rebuild).
+			// These four reads are the computed's only tracked dependencies: shape
+			// and binding record changes, plus font loads (measured text resizes
+			// when its font swaps in). Theme changes that resize shapes without a
+			// record diff (e.g. `updateTheme({ fontSize })`) are not tracked, so
+			// the index stays stale for those until the next rebuild.
+			// The rebuild/update paths below run without capture to avoid
+			// registering a dependency per checked shape on every update (and
+			// ~page-size dependencies on every rebuild).
 			const shapeDiff = shapeHistory.getDiffSince(lastComputedEpoch)
 			const bindingDiff = bindingHistory.getDiffSince(lastComputedEpoch)
 			const currentPageId = this.editor.getCurrentPageId()
+			const fontLoadEpoch = this.editor.fonts.getFontLoadEpoch()
 
 			if (
 				isUninitialized(_prevValue) ||
 				shapeDiff === RESET_VALUE ||
 				bindingDiff === RESET_VALUE ||
-				this.lastPageId !== currentPageId
+				this.lastPageId !== currentPageId ||
+				// Which shapes a font load resizes isn't known without visiting
+				// every shape, so rebuild; loads are rare and bounded by the
+				// number of distinct fonts.
+				this.lastFontLoadEpoch !== fontLoadEpoch
 			) {
 				return unsafe__withoutCapture(() => this.rebuildAndBumpEpoch())
 			}
@@ -97,6 +105,7 @@ export class SpatialIndexManager {
 	private buildFromScratch(): void {
 		this.rbush.clear()
 		this.lastPageId = this.editor.getCurrentPageId()
+		this.lastFontLoadEpoch = this.editor.fonts.getFontLoadEpoch()
 
 		const elements: SpatialElement[] = []
 		for (const shape of this.editor.getCurrentPageShapes()) {

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -200,6 +200,24 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 */
 	createShapeForAsset?(asset: TLAsset, position: VecModel): TLShapePartial | null
 
+	/**
+	 * The shape's name, translated, as a screen reader should announce it.
+	 *
+	 * Return `undefined` — the default — and the shape is announced by its tool's label, under the
+	 * `tool.<type>` convention. Override this when the name isn't that: a geo shape is a "Rectangle"
+	 * or an "Ellipse" rather than a "Shape", so it names itself from its geo style.
+	 *
+	 * Resolve the name through {@link translateMessage} and the editor's `i18n` rather than
+	 * returning English, so it follows the user's locale and still reads as words when an app
+	 * supplies no translations.
+	 *
+	 * @param shape - The shape.
+	 * @public
+	 */
+	getShapeName(_shape: Shape): string | undefined {
+		return undefined
+	}
+
 	/**
 	 * Get the shape's geometry.
 	 *

package/src/lib/hooks/useDocumentEvents.ts

@@ -18,6 +18,10 @@ export function useDocumentEvents() {
 	// blur release below needs the key remembered per code.
 	const heldKeysRef = useRef(new Map<string, string>())
 
+	// Non-modifier keys pressed while Meta was down. macOS never delivers their keyup, so
+	// `inputs.keys` would count them as held for good; see the Meta branch in `handleKeyUp`.
+	const keysPressedWithMetaRef = useRef(new Set<string>())
+
 	// Prevent the browser's default drag and drop behavior on our container (UI, etc)
 	useEffect(() => {
 		if (!container) return
@@ -217,6 +221,12 @@ export function useDocumentEvents() {
 			}
 
 			heldKeysRef.current.set(e.code, e.key)
+			// Only a fresh press counts. A key held from before Meta went down keeps auto-
+			// repeating, and those repeats carry `metaKey` too, which would make it look like
+			// it was pressed during the Meta window.
+			if (!e.repeat && e.metaKey && !MODIFIER_CODES.has(e.code)) {
+				keysPressedWithMetaRef.current.add(e.code)
+			}
 			editor.dispatch(info)
 		}
 
@@ -232,6 +242,13 @@ export function useDocumentEvents() {
 				return
 			}
 
+			// The native `metaKey` is still true on Meta's own keyup. Reported as-is it matches
+			// neither branch of the editor's modifier handling - which ignores `metaKey` on a
+			// key_up, then only arms the 150ms release when it reads false - so a cmd tap left
+			// `getMetaKey()` true until some later event happened to say otherwise.
+			const isMetaRelease = e.code === 'MetaLeft' || e.code === 'MetaRight'
+			const metaKey = isMetaRelease ? false : e.metaKey
+
 			const info: TLKeyboardEventInfo = {
 				type: 'keyboard',
 				name: 'key_up',
@@ -239,13 +256,32 @@ export function useDocumentEvents() {
 				code: e.code,
 				shiftKey: e.shiftKey,
 				altKey: e.altKey,
-				ctrlKey: e.metaKey || e.ctrlKey,
-				metaKey: e.metaKey,
-				accelKey: isAccelKey(e),
+				ctrlKey: metaKey || e.ctrlKey,
+				metaKey,
+				accelKey: isAccelKey({ ctrlKey: e.ctrlKey, metaKey }),
 			}
 
 			heldKeysRef.current.delete(e.code)
+			keysPressedWithMetaRef.current.delete(e.code)
 			editor.dispatch(info)
+
+			// macOS swallows the keyup of a non-modifier key pressed while Meta is held, so a
+			// stuck ArrowUp from Cmd+ArrowUp made every later arrow nudge diagonally: the nudge
+			// sums all held arrows. Anything held from before the Meta window still gets its
+			// own keyup, so only drop what was pressed inside it. That is still one too many -
+			// the key you are *still* holding is not owed anything - and the key_repeat case
+			// in `Editor.dispatch` is what takes that one back.
+			//
+			// Drop them rather than replaying a key_up: a tool's onKeyUp is a real action at
+			// the wrong moment, and a synthetic Enter re-entered shape editing and stole the
+			// focus that cmd+Enter's a11y action had just put on the style toolbar.
+			if (isMetaRelease) {
+				for (const code of keysPressedWithMetaRef.current) {
+					editor.inputs.keys.delete(code)
+					heldKeysRef.current.delete(code)
+				}
+				keysPressedWithMetaRef.current.clear()
+			}
 		}
 
 		function handleTouchStart(e: TouchEvent) {
@@ -334,6 +370,7 @@ export function useDocumentEvents() {
 				})
 			}
 			heldKeys.clear()
+			keysPressedWithMetaRef.current.clear()
 		}
 
 		win.addEventListener('blur', handleWindowBlur)
@@ -343,6 +380,17 @@ export function useDocumentEvents() {
 	}, [editor])
 }
 
+const MODIFIER_CODES = new Set([
+	'ShiftLeft',
+	'ShiftRight',
+	'AltLeft',
+	'AltRight',
+	'ControlLeft',
+	'ControlRight',
+	'MetaLeft',
+	'MetaRight',
+])
+
 function areShortcutsDisabled(editor: Editor) {
 	return (
 		editor.menus.hasOpenMenus() ||

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

@@ -88,6 +88,45 @@ describe('LicenseManager', () => {
 			}
 		})
 
+		it('Signals that it is development mode for blob URLs created by a development page', async () => {
+			process.env.NODE_ENV = 'production'
+			try {
+				const origins = ['http://example.com', 'https://localhost:3000', 'https://127.0.0.1']
+				for (const origin of origins) {
+					// @ts-ignore
+					delete window.location
+					// @ts-ignore
+					window.location = new URL(`blob:${origin}/6ec2dc7a-afe9-45d9-bd71-1749f9568d28`)
+
+					const testEnvLicenseManager = new LicenseManager('', keyPair.publicKey)
+					const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+					const result = await testEnvLicenseManager.getLicenseFromKey(licenseKey)
+					expect(result).toMatchObject({ isLicenseParseable: true, isDevelopment: true })
+				}
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+
+		it('Signals that it is not development mode for blob URLs created by a production page', async () => {
+			process.env.NODE_ENV = 'production'
+			try {
+				// @ts-ignore
+				delete window.location
+				// @ts-ignore
+				window.location = new URL(
+					'blob:https://www.example.com/6ec2dc7a-afe9-45d9-bd71-1749f9568d28'
+				)
+
+				const testEnvLicenseManager = new LicenseManager('', keyPair.publicKey)
+				const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+				const result = await testEnvLicenseManager.getLicenseFromKey(licenseKey)
+				expect(result).toMatchObject({ isLicenseParseable: true, isDevelopment: false })
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+
 		it('Signals that it is development mode when NODE_ENV is not production', async () => {
 			process.env.NODE_ENV = 'development'
 			// @ts-ignore
@@ -370,6 +409,46 @@ describe('LicenseManager', () => {
 			expect(result.isDomainValid).toBe(false)
 		})
 
+		it('Succeeds if the page is a blob URL created by a licensed host', async () => {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('blob:https://www.example.com/6ec2dc7a-afe9-45d9-bd71-1749f9568d28')
+
+			const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+			const result = (await licenseManager.getLicenseFromKey(licenseKey)) as ValidLicenseKeyResult
+			expect(result.isDomainValid).toBe(true)
+		})
+
+		it('Succeeds if the page is a blob URL created by a wildcard-licensed host', async () => {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('blob:https://sub.example.com/6ec2dc7a-afe9-45d9-bd71-1749f9568d28')
+
+			const permissiveHostsInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			permissiveHostsInfo[PROPERTIES.HOSTS] = ['*.example.com']
+			const permissiveLicenseKey = await generateLicenseKey(
+				JSON.stringify(permissiveHostsInfo),
+				keyPair
+			)
+			const result = (await licenseManager.getLicenseFromKey(
+				permissiveLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isDomainValid).toBe(true)
+		})
+
+		it('Fails if the page is a blob URL created by an unlicensed host', async () => {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('blob:https://www.foo.com/6ec2dc7a-afe9-45d9-bd71-1749f9568d28')
+
+			const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+			const result = (await licenseManager.getLicenseFromKey(licenseKey)) as ValidLicenseKeyResult
+			expect(result.isDomainValid).toBe(false)
+		})
+
 		it('Succeeds if it is a vscode extension', async () => {
 			// @ts-ignore
 			delete window.location
@@ -599,6 +678,131 @@ describe('LicenseManager', () => {
 		)
 	})
 
+	describe('Canonical tldraw hosts', () => {
+		let fetchSpy: ReturnType<typeof vi.fn>
+
+		beforeEach(() => {
+			process.env.NODE_ENV = 'production'
+			fetchSpy = vi.fn(() => Promise.resolve(new Response()))
+			vi.stubGlobal('fetch', fetchSpy)
+		})
+
+		afterEach(() => {
+			vi.unstubAllGlobals()
+			process.env.NODE_ENV = 'test'
+		})
+
+		// The shared licenseManager was built against jsdom's localhost default, so it's in dev mode.
+		// Build one on the host itself so these run the constructor path a real page on our domains
+		// takes: production dev detection, license state, feature flags and the tracking ping.
+		async function createManagerOnHost(url: string, licenseKey = '') {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL(url)
+
+			const manager = new LicenseManager(licenseKey, keyPair.publicKey)
+			await vi.waitFor(() => expect(manager.state.get()).not.toBe('pending'))
+			return manager
+		}
+
+		it('Licenses tldraw-owned hosts with a watermark when no key is provided', async () => {
+			const hosts = [
+				'https://tldraw.com',
+				'https://www.tldraw.com',
+				'https://makereal.tldraw.com',
+				'https://tldraw.dev',
+				'https://staging.tldraw.dev',
+				'https://preview.tldraw.club',
+				'https://fairies.tldraw.workers.dev',
+				'https://teach.tldraw.xyz',
+			]
+
+			for (const host of hosts) {
+				const manager = await createManagerOnHost(host)
+
+				expect(manager.isDevelopment).toBe(false)
+				expect(await manager.getLicenseFromKey('')).toMatchObject({
+					isLicenseParseable: true,
+					isDomainValid: true,
+					isLicensedWithWatermark: true,
+					isCollaborationEnabled: true,
+					isCommentingEnabled: true,
+					isAnnualLicenseExpired: false,
+					isPerpetualLicenseExpired: false,
+					daysSinceExpiry: 0,
+				})
+				expect(manager.state.get()).toBe('licensed-with-watermark')
+				expect(manager.featureFlags.get()).toEqual({ collaboration: true, commenting: true })
+				manager.dispose()
+			}
+		})
+
+		it('Does not license hosts that merely look like ours', async () => {
+			const hosts = [
+				'https://nottldraw.com',
+				'https://tldraw.com.example.com',
+				'https://eviltldraw.dev',
+				'https://tldraw.co',
+				'https://tldraw.workers.dev.example.com',
+			]
+
+			for (const host of hosts) {
+				const manager = await createManagerOnHost(host)
+
+				expect(await manager.getLicenseFromKey('')).toMatchObject({
+					isLicenseParseable: false,
+					reason: 'no-key-provided',
+				})
+				expect(manager.state.get()).toBe('unlicensed-production')
+				expect(manager.featureFlags.get()).toEqual({ collaboration: false, commenting: false })
+				manager.dispose()
+			}
+		})
+
+		it('Never sends a watermark tracking ping for our own domains', async () => {
+			const manager = await createManagerOnHost('https://makereal.tldraw.com')
+
+			expect(manager.state.get()).toBe('licensed-with-watermark')
+			expect(fetchSpy).not.toHaveBeenCalled()
+			manager.dispose()
+		})
+
+		it('Still tracks a real watermarked key on one of our domains', async () => {
+			const licenseKey = await generateLicenseKey(
+				JSON.stringify([
+					'a-real-key',
+					['*.tldraw.com'],
+					FLAGS.ANNUAL_LICENSE | FLAGS.WITH_WATERMARK,
+					expiryDate,
+				]),
+				keyPair
+			)
+			const manager = await createManagerOnHost('https://makereal.tldraw.com', licenseKey)
+
+			expect(manager.state.get()).toBe('licensed-with-watermark')
+			expect(fetchSpy).toHaveBeenCalledTimes(1)
+			const trackUrl = new URL(fetchSpy.mock.calls[0][0] as string)
+			expect(trackUrl.searchParams.get('license_type')).toBe('with_watermark')
+			expect(trackUrl.searchParams.get('license_id')).toBe('a-real-key')
+			manager.dispose()
+		})
+
+		it('Lets an explicitly provided key win over the canonical-host grant', async () => {
+			const licenseKey = await generateLicenseKey(
+				JSON.stringify(['a-real-key', ['*.tldraw.com'], FLAGS.ANNUAL_LICENSE, expiryDate]),
+				keyPair
+			)
+			const manager = await createManagerOnHost('https://tldraw.com', licenseKey)
+
+			const result = (await manager.getLicenseFromKey(licenseKey)) as ValidLicenseKeyResult
+			expect(result.license.id).toBe('a-real-key')
+			expect(result.isLicensedWithWatermark).toBe(false)
+			expect(manager.state.get()).toBe('licensed')
+			manager.dispose()
+		})
+	})
+
 	describe('License types and flags', () => {
 		it('Checks for internal license', async () => {
 			const internalLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)

package/src/lib/license/LicenseManager.ts

@@ -42,6 +42,28 @@ 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',
+]
+
+/** 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 */
@@ -185,11 +207,10 @@ export class LicenseManager {
 	}
 
 	private getIsDevelopment() {
-		const protocol = window.location.protocol
-		const hostname = window.location.hostname
+		const { protocol, hostname } = this.getOriginLocation()
 
 		// Tauri uses `tauri://localhost` on macOS and Linux and `http://tauri.localhost` on Windows.
-		if (hostname.toLowerCase().endsWith('.localhost')) {
+		if (hostname.endsWith('.localhost')) {
 			return process.env.NODE_ENV !== 'production'
 		}
 
@@ -200,13 +221,70 @@ export class LicenseManager {
 		)
 	}
 
+	private getOriginLocation() {
+		// A document loaded from `blob:https://example.com/<uuid>` has protocol `blob:` and an empty
+		// hostname, but its origin is the page that created the blob. Opaque origins ('null': custom
+		// schemes, file:, about:) keep using the location.
+		const { origin, protocol, hostname } = window.location
+		const source = origin && origin !== 'null' ? new URL(origin) : { protocol, hostname }
+		return { protocol: source.protocol, hostname: source.hostname.toLowerCase() }
+	}
+
 	private isLoopbackHost(hostname: string) {
 		// localhost, IPv4 loopback (127.0.0.0/8) and IPv6 loopback (::1) are all local development hosts
 		const host = hostname.toLowerCase().replace(/^\[|\]$/g, '')
 		return host === 'localhost' || host === '::1' || /^127(?:\.\d{1,3}){3}$/.test(host)
 	}
 
+	/** Whether the page is served from one of tldraw's own domains, or a subdomain of one. */
+	private isCanonicalTldrawHost() {
+		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'
@@ -315,6 +393,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()
@@ -398,7 +482,7 @@ export class LicenseManager {
 	}
 
 	private isDomainValid(licenseInfo: LicenseInfo) {
-		const currentHostname = window.location.hostname.toLowerCase()
+		const currentHostname = this.getOriginLocation().hostname
 
 		return licenseInfo.hosts.some((host) => {
 			const normalizedHostOrUrlRegex = host.toLowerCase().trim()

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,