@tldraw/editor 5.3.1 → 5.4.0-canary.042da660fa66

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

@@ -316,6 +316,42 @@ describe('LicenseManager', () => {
 			expect(result.isDomainValid).toBe(true)
 		})
 
+		it('Fails if the wildcard domain is a prefix of the current hostname', async () => {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('https://sub.example.com.other.io')
+
+			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(false)
+		})
+
+		it('Fails if the current hostname only ends with the wildcard domain', async () => {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('https://notexample.com')
+
+			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(false)
+		})
+
 		it('Fails if has a subdomain wildcard isnt for the same base domain', async () => {
 			// @ts-ignore
 			delete window.location
@@ -422,6 +458,107 @@ describe('LicenseManager', () => {
 			expect(result.isDomainValid).toBe(true)
 		})
 
+		it('Is not development mode on a custom protocol', async () => {
+			process.env.NODE_ENV = 'production'
+			try {
+				// @ts-ignore
+				delete window.location
+				// @ts-ignore
+				window.location = new URL('app-bundle://app/index.html')
+
+				const nativeLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+				nativeLicenseInfo[PROPERTIES.FLAGS] = FLAGS.NATIVE_LICENSE
+				nativeLicenseInfo[PROPERTIES.HOSTS] = ['app-bundle:']
+				const nativeLicenseKey = await generateLicenseKey(
+					JSON.stringify(nativeLicenseInfo),
+					keyPair
+				)
+				const nativeLicenseManager = new LicenseManager('', keyPair.publicKey)
+				const result = (await nativeLicenseManager.getLicenseFromKey(
+					nativeLicenseKey
+				)) as ValidLicenseKeyResult
+				expect(result).toMatchObject({
+					isLicenseParseable: true,
+					isNativeLicense: true,
+					isDomainValid: true,
+					isDevelopment: false,
+				})
+				expect(getLicenseState(result, () => {}, result.isDevelopment)).toBe('licensed')
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+
+		it('Validates the domain on a custom protocol', async () => {
+			process.env.NODE_ENV = 'production'
+			try {
+				// @ts-ignore
+				delete window.location
+				// @ts-ignore
+				window.location = new URL('app-bundle://app/index.html')
+
+				const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+				const customProtocolLicenseManager = new LicenseManager('', keyPair.publicKey)
+				const result = (await customProtocolLicenseManager.getLicenseFromKey(
+					licenseKey
+				)) as ValidLicenseKeyResult
+				expect(result).toMatchObject({ isDomainValid: false, isDevelopment: false })
+				expect(getLicenseState(result, () => {}, result.isDevelopment)).toBe(
+					'unlicensed-production'
+				)
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+
+		it('Is development mode over http on a non-loopback host', async () => {
+			process.env.NODE_ENV = 'production'
+			try {
+				// @ts-ignore
+				delete window.location
+				// @ts-ignore
+				window.location = new URL('http://www.example.com')
+
+				const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+				const httpLicenseManager = new LicenseManager('', keyPair.publicKey)
+				const result = (await httpLicenseManager.getLicenseFromKey(
+					licenseKey
+				)) as ValidLicenseKeyResult
+				expect(result.isDevelopment).toBe(true)
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+
+		it.each([
+			['http://localhost:5173/', true],
+			['http://127.0.0.1:3000/', true],
+			['https://localhost:8443/', true],
+			['https://[::1]:8443/', true],
+			['http://192.168.1.5:3000/', true],
+			['http://staging-box/', true],
+			['https://www.example.com/', false],
+			['tauri://localhost/index.html', false],
+			['http://tauri.localhost/index.html', false],
+			['app://tauri.localhost/com.example.app', false],
+			['app-bundle://localhost/index.html', false],
+		])('Development mode at %s is %s', async (href, expected) => {
+			process.env.NODE_ENV = 'production'
+			try {
+				// @ts-ignore
+				delete window.location
+				// @ts-ignore
+				window.location = new URL(href)
+
+				const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+				const manager = new LicenseManager('', keyPair.publicKey)
+				const result = (await manager.getLicenseFromKey(licenseKey)) as ValidLicenseKeyResult
+				expect(result.isDevelopment).toBe(expected)
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+
 		it('Fails if it is a native app with the wrong protocol', async () => {
 			// @ts-ignore
 			delete window.location
@@ -437,6 +574,29 @@ describe('LicenseManager', () => {
 			)) as ValidLicenseKeyResult
 			expect(result.isDomainValid).toBe(false)
 		})
+
+		it.each(['tauri://localhost/index.html', 'http://tauri.localhost/index.html'])(
+			'Does not license an unrelated key at %s',
+			async (href) => {
+				process.env.NODE_ENV = 'production'
+				try {
+					// @ts-ignore
+					delete window.location
+					// @ts-ignore
+					window.location = new URL(href)
+
+					const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+					const manager = new LicenseManager('', keyPair.publicKey)
+					const result = (await manager.getLicenseFromKey(licenseKey)) as ValidLicenseKeyResult
+					expect(result).toMatchObject({ isDevelopment: false, isDomainValid: false })
+					expect(getLicenseState(result, () => {}, result.isDevelopment)).toBe(
+						'unlicensed-production'
+					)
+				} finally {
+					process.env.NODE_ENV = 'test'
+				}
+			}
+		)
 	})
 
 	describe('License types and flags', () => {

package/src/lib/license/LicenseManager.ts

@@ -174,10 +174,17 @@ export class LicenseManager {
 	}
 
 	private getIsDevelopment() {
-		// If we are using https on a non-loopback domain we assume it's a production env and a development one otherwise
+		const protocol = window.location.protocol
+		const hostname = window.location.hostname
+
+		// Tauri uses `tauri://localhost` on macOS and Linux and `http://tauri.localhost` on Windows.
+		if (hostname.toLowerCase().endsWith('.localhost')) {
+			return process.env.NODE_ENV !== 'production'
+		}
+
 		return (
-			!['https:', 'vscode-webview:'].includes(window.location.protocol) ||
-			this.isLoopbackHost(window.location.hostname) ||
+			protocol === 'http:' ||
+			(protocol === 'https:' && this.isLoopbackHost(hostname)) ||
 			process.env.NODE_ENV !== 'production'
 		)
 	}
@@ -407,7 +414,9 @@ export class LicenseManager {
 
 			// Glob testing, we only support '*.somedomain.com' right now.
 			if (host.includes('*')) {
-				const globToRegex = new RegExp(host.replace(/\*/g, '.*?'))
+				const globToRegex = new RegExp(
+					normalizedHostOrUrlRegex.replace(/\./g, '\\.').replace(/\*/g, '.*?') + '$'
+				)
 				return globToRegex.test(currentHostname) || globToRegex.test(`www.${currentHostname}`)
 			}
 

package/src/lib/license/LicenseProvider.tsx

@@ -1,13 +1,34 @@
 import { useValue } from '@tldraw/state-react'
 import { createContext, ReactNode, useContext, useEffect, useState } from 'react'
+import { useMaybeEditor } from '../hooks/useEditor'
 import { LicenseManager } from './LicenseManager'
 
 /** @internal */
-export const LicenseContext = createContext({} as LicenseManager)
+export const LicenseContext = createContext<LicenseManager | null>(null)
 
 /** @internal */
-export function useLicenseContext() {
-	return useContext(LicenseContext)
+export function useLicenseContext(): LicenseManager {
+	const licenseManager = useMaybeLicenseManager()
+	if (!licenseManager) {
+		throw new Error(
+			'useLicenseContext must be used inside of the <Tldraw /> or <TldrawEditor /> components, or inside an <EditorProvider /> wrapping an editor created by them'
+		)
+	}
+	return licenseManager
+}
+
+/**
+ * Returns the license manager for the current editor, or `null` if there is none. Reads the
+ * license context when inside `<TldrawEditor />`, and otherwise falls back to the license manager
+ * of the nearest editor, so UI mounted outside the editor tree (via `EditorProvider`) resolves the
+ * same license as the editor it belongs to.
+ *
+ * @internal
+ */
+export function useMaybeLicenseManager(): LicenseManager | null {
+	const licenseManager = useContext(LicenseContext)
+	const editor = useMaybeEditor()
+	return licenseManager ?? editor?.licenseManager ?? null
 }
 
 function shouldHideEditorAfterDelay(licenseState: string): boolean {

package/src/lib/license/useLicenseManagerState.ts

@@ -8,16 +8,18 @@ export function useLicenseManagerState(licenseManager: LicenseManager): LicenseS
 
 /**
  * Reactively reads whether a licensable feature is enabled for the current license. Re-renders when
- * license validation resolves.
+ * license validation resolves. Returns `false` when there is no license manager, so gated UI stays
+ * hidden when mounted without an editor or license context.
  *
  * @internal
  */
 export function useLicenseFeatureFlag(
-	licenseManager: LicenseManager,
+	licenseManager: LicenseManager | null,
 	feature: LicenseFeatureName
 ): boolean {
-	return useValue('licenseFeature', () => licenseManager.isFeatureEnabled(feature), [
-		licenseManager,
-		feature,
-	])
+	return useValue(
+		'licenseFeature',
+		() => (licenseManager ? licenseManager.isFeatureEnabled(feature) : false),
+		[licenseManager, feature]
+	)
 }

package/src/lib/primitives/geometry/Group2d.ts

@@ -1,4 +1,3 @@
-import { EMPTY_ARRAY } from '@tldraw/state'
 import { assert, invLerp, lerp } from '@tldraw/utils'
 import { Box } from '../Box'
 import { Mat } from '../Mat'
@@ -36,9 +35,15 @@ export class Group2d extends Geometry2d {
 
 	override getVertices(filters: Geometry2dFilters): Vec[] {
 		if (this.isExcludedByFilter(filters)) return []
-		return this.children
-			.filter((c) => !c.isExcludedByFilter(filters))
-			.flatMap((c) => c.getVertices(filters))
+		const vertices: Vec[] = []
+		for (const child of this.children) {
+			if (child.isExcludedByFilter(filters)) continue
+			const childVertices = child.getVertices(filters)
+			for (let i = 0, n = childVertices.length; i < n; i++) {
+				vertices.push(childVertices[i])
+			}
+		}
+		return vertices
 	}
 
 	override nearestPoint(point: VecLike, filters?: Geometry2dFilters): Vec {
@@ -84,9 +89,11 @@ export class Group2d extends Geometry2d {
 		hitInside: boolean,
 		filters = Geometry2dFilters.EXCLUDE_LABELS
 	): boolean {
-		return !!this.children
-			.filter((c) => !c.isExcludedByFilter(filters))
-			.find((c) => c.hitTestPoint(point, margin, hitInside))
+		for (const child of this.children) {
+			if (child.isExcludedByFilter(filters)) continue
+			if (child.hitTestPoint(point, margin, hitInside)) return true
+		}
+		return false
 	}
 
 	override hitTestLineSegment(
@@ -95,42 +102,71 @@ export class Group2d extends Geometry2d {
 		zoom: number,
 		filters = Geometry2dFilters.EXCLUDE_LABELS
 	): boolean {
-		return !!this.children
-			.filter((c) => !c.isExcludedByFilter(filters))
-			.find((c) => c.hitTestLineSegment(A, B, zoom))
+		for (const child of this.children) {
+			if (child.isExcludedByFilter(filters)) continue
+			if (child.hitTestLineSegment(A, B, zoom)) return true
+		}
+		return false
 	}
 
 	override intersectLineSegment(A: VecLike, B: VecLike, filters?: Geometry2dFilters) {
-		return this.children.flatMap((child) => {
-			if (child.isExcludedByFilter(filters)) return EMPTY_ARRAY
-			return child.intersectLineSegment(A, B, filters)
-		})
+		const result: VecLike[] = []
+		for (const child of this.children) {
+			if (child.isExcludedByFilter(filters)) continue
+			const hits = child.intersectLineSegment(A, B, filters)
+			for (let i = 0, n = hits.length; i < n; i++) {
+				result.push(hits[i])
+			}
+		}
+		return result
 	}
 
 	override intersectCircle(center: VecLike, radius: number, filters?: Geometry2dFilters) {
-		return this.children.flatMap((child) => {
-			if (child.isExcludedByFilter(filters)) return EMPTY_ARRAY
-			return child.intersectCircle(center, radius, filters)
-		})
+		const result: VecLike[] = []
+		for (const child of this.children) {
+			if (child.isExcludedByFilter(filters)) continue
+			const hits = child.intersectCircle(center, radius, filters)
+			for (let i = 0, n = hits.length; i < n; i++) {
+				result.push(hits[i])
+			}
+		}
+		return result
 	}
 
 	override getBoundsVertices(): Vec[] {
 		if (this.excludeFromShapeBounds) return []
-		return this.children.flatMap((child) => child.getBoundsVertices())
+		const vertices: Vec[] = []
+		for (const child of this.children) {
+			const childVertices = child.getBoundsVertices()
+			for (let i = 0, n = childVertices.length; i < n; i++) {
+				vertices.push(childVertices[i])
+			}
+		}
+		return vertices
 	}
 
 	override intersectPolygon(polygon: VecLike[], filters?: Geometry2dFilters) {
-		return this.children.flatMap((child) => {
-			if (child.isExcludedByFilter(filters)) return EMPTY_ARRAY
-			return child.intersectPolygon(polygon, filters)
-		})
+		const result: VecLike[] = []
+		for (const child of this.children) {
+			if (child.isExcludedByFilter(filters)) continue
+			const hits = child.intersectPolygon(polygon, filters)
+			for (let i = 0, n = hits.length; i < n; i++) {
+				result.push(hits[i])
+			}
+		}
+		return result
 	}
 
 	override intersectPolyline(polyline: VecLike[], filters?: Geometry2dFilters) {
-		return this.children.flatMap((child) => {
-			if (child.isExcludedByFilter(filters)) return EMPTY_ARRAY
-			return child.intersectPolyline(polyline, filters)
-		})
+		const result: VecLike[] = []
+		for (const child of this.children) {
+			if (child.isExcludedByFilter(filters)) continue
+			const hits = child.intersectPolyline(polyline, filters)
+			for (let i = 0, n = hits.length; i < n; i++) {
+				result.push(hits[i])
+			}
+		}
+		return result
 	}
 
 	override interpolateAlongEdge(t: number, filters?: Geometry2dFilters): Vec {

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

@@ -0,0 +1,39 @@
+import { normalizeWheel } from './normalizeWheel'
+
+function wheelEvent(props: Partial<WheelEvent>): WheelEvent {
+	return {
+		deltaX: 0,
+		deltaY: 0,
+		ctrlKey: false,
+		altKey: false,
+		metaKey: false,
+		shiftKey: false,
+		...props,
+	} as WheelEvent
+}
+
+describe('normalizeWheel', () => {
+	it('negates finite deltas for panning', () => {
+		const { x, y } = normalizeWheel(wheelEvent({ deltaX: 5, deltaY: 10 }))
+		expect(x).toBe(-5)
+		expect(y).toBe(-10)
+	})
+
+	it('coerces a non-finite deltaX to zero movement', () => {
+		const { x, y } = normalizeWheel(wheelEvent({ deltaX: NaN, deltaY: 10 }))
+		expect(x === 0).toBe(true)
+		expect(y).toBe(-10)
+	})
+
+	it('coerces a non-finite deltaY to zero movement', () => {
+		const { x, y } = normalizeWheel(wheelEvent({ deltaX: 5, deltaY: Infinity }))
+		expect(x).toBe(-5)
+		expect(y === 0).toBe(true)
+	})
+
+	it('does not produce a non-finite zoom delta when wheeling with a bad deltaY', () => {
+		const { z } = normalizeWheel(wheelEvent({ deltaY: NaN, ctrlKey: true }))
+		expect(Number.isFinite(z)).toBe(true)
+		expect(z === 0).toBe(true)
+	})
+})

package/src/lib/utils/normalizeWheel.ts

@@ -9,6 +9,12 @@ const MAX_ZOOM_STEP = 10
  * @internal */
 export function normalizeWheel(event: WheelEvent | React.WheelEvent<HTMLElement>) {
 	let { deltaY, deltaX } = event
+
+	// Coerce non-finite deltas to no movement so they can't propagate into the camera and
+	// crash validation. Also covers deltaZ below, which is derived from deltaY.
+	if (!Number.isFinite(deltaX)) deltaX = 0
+	if (!Number.isFinite(deltaY)) deltaY = 0
+
 	let deltaZ = 0
 
 	// wheeling

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.3.1'
+export const version = '5.4.0-canary.042da660fa66'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-08-05T11:39:54.978Z',
-	patch: '2026-08-14T10:46:20.010Z',
+	minor: '2026-08-19T12:47:12.111Z',
+	patch: '2026-08-19T12:47:12.111Z',
 }