@tldraw/editor 3.16.0-canary.e9c30b532b82 → 3.16.0-canary.ea008b31887f

package/src/lib/license/LicenseManager.ts

@@ -1,16 +1,27 @@
 import { atom } from '@tldraw/state'
-import { fetch } from '@tldraw/utils'
-import { publishDates } from '../../version'
+import { publishDates, version } from '../../version'
 import { getDefaultCdnBaseUrl } from '../utils/assets'
 import { importPublicKey, str2ab } from '../utils/licensing'
 
-const GRACE_PERIOD_DAYS = 5
+const GRACE_PERIOD_DAYS = 30
 
 export const FLAGS = {
-	ANNUAL_LICENSE: 0x1,
-	PERPETUAL_LICENSE: 0x2,
-	INTERNAL_LICENSE: 0x4,
-	WITH_WATERMARK: 0x8,
+	// -- MUTUALLY EXCLUSIVE FLAGS --
+	// Annual means the license expires after a time period, usually 1 year.
+	ANNUAL_LICENSE: 1,
+	// Perpetual means the license never expires up to the max supported version.
+	PERPETUAL_LICENSE: 1 << 1,
+
+	// -- ADDITIVE FLAGS --
+	// Internal means the license is for internal use only.
+	INTERNAL_LICENSE: 1 << 2,
+	// Watermark means the product is watermarked.
+	WITH_WATERMARK: 1 << 3,
+	// Evaluation means the license is for evaluation purposes only.
+	EVALUATION_LICENSE: 1 << 4,
+	// Native means the license is for native apps which switches
+	// on special-case logic.
+	NATIVE_LICENSE: 1 << 5,
 }
 const HIGHEST_FLAG = Math.max(...Object.values(FLAGS))
 
@@ -33,6 +44,15 @@ export interface LicenseInfo {
 	flags: number
 	expiryDate: string
 }
+
+/** @internal */
+export type LicenseState =
+	| 'pending' // License validation is in progress
+	| 'licensed' // License is valid and active (no restrictions)
+	| 'licensed-with-watermark' // License is valid but shows watermark (evaluation licenses, WITH_WATERMARK licenses)
+	| 'unlicensed' // No valid license found or license is invalid (development)
+	| 'unlicensed-production' // No valid license in production deployment (missing, invalid, or wrong domain)
+	| 'expired' // License has been expired (30 days past expiration for regular licenses, immediately for evaluation licenses)
 /** @internal */
 export type InvalidLicenseReason =
 	| 'invalid-license-key'
@@ -60,12 +80,19 @@ export interface ValidLicenseKeyResult {
 	isPerpetualLicense: boolean
 	isPerpetualLicenseExpired: boolean
 	isInternalLicense: boolean
+	isNativeLicense: boolean
 	isLicensedWithWatermark: boolean
+	isEvaluationLicense: boolean
+	isEvaluationLicenseExpired: boolean
+	daysSinceExpiry: number
 }
 
 /** @internal */
 export type TestEnvironment = 'development' | 'production'
 
+/** @internal */
+export type TrackType = 'unlicensed' | 'with_watermark' | 'evaluation' | null
+
 /** @internal */
 export class LicenseManager {
 	private publicKey =
@@ -73,10 +100,7 @@ export class LicenseManager {
 	public isDevelopment: boolean
 	public isTest: boolean
 	public isCryptoAvailable: boolean
-	state = atom<'pending' | 'licensed' | 'licensed-with-watermark' | 'unlicensed'>(
-		'license state',
-		'pending'
-	)
+	state = atom<LicenseState>('license state', 'pending')
 	public verbose = true
 
 	constructor(
@@ -89,21 +113,22 @@ export class LicenseManager {
 		this.publicKey = testPublicKey || this.publicKey
 		this.isCryptoAvailable = !!crypto.subtle
 
-		this.getLicenseFromKey(licenseKey).then((result) => {
-			const isUnlicensed = isEditorUnlicensed(result)
+		this.getLicenseFromKey(licenseKey)
+			.then((result) => {
+				const licenseState = getLicenseState(
+					result,
+					(messages: string[]) => this.outputMessages(messages),
+					this.isDevelopment
+				)
 
-			if (!this.isDevelopment && isUnlicensed) {
-				fetch(WATERMARK_TRACK_SRC)
-			}
+				this.maybeTrack(result, licenseState)
 
-			if (isUnlicensed) {
+				this.state.set(licenseState)
+			})
+			.catch((error) => {
+				console.error('License validation failed:', error)
 				this.state.set('unlicensed')
-			} else if ((result as ValidLicenseKeyResult).isLicensedWithWatermark) {
-				this.state.set('licensed-with-watermark')
-			} else {
-				this.state.set('licensed')
-			}
-		})
+			})
 	}
 
 	private getIsDevelopment(testEnvironment?: TestEnvironment) {
@@ -117,6 +142,47 @@ export class LicenseManager {
 		)
 	}
 
+	private getTrackType(result: LicenseFromKeyResult, licenseState: LicenseState): TrackType {
+		// Track watermark for unlicensed production deployments
+		if (licenseState === 'unlicensed-production') {
+			return 'unlicensed'
+		}
+
+		if (this.isDevelopment) {
+			return null
+		}
+
+		if (!result.isLicenseParseable) {
+			return null
+		}
+
+		// Track evaluation licenses (for analytics, even though no watermark is shown)
+		if (result.isEvaluationLicense) {
+			return 'evaluation'
+		}
+
+		// Track licenses that show watermarks
+		if (licenseState === 'licensed-with-watermark') {
+			return 'with_watermark'
+		}
+
+		return null
+	}
+
+	private maybeTrack(result: LicenseFromKeyResult, licenseState: LicenseState): void {
+		const trackType = this.getTrackType(result, licenseState)
+		if (!trackType) {
+			return
+		}
+
+		const url = new URL(WATERMARK_TRACK_SRC)
+		url.searchParams.set('version', version)
+		url.searchParams.set('license_type', trackType)
+
+		// eslint-disable-next-line no-restricted-globals
+		fetch(url.toString())
+	}
+
 	private async extractLicenseKey(licenseKey: string): Promise<LicenseInfo> {
 		const [data, signature] = licenseKey.split('.')
 		const [prefix, encodedData] = data.split('/')
@@ -203,6 +269,9 @@ export class LicenseManager {
 			const isAnnualLicense = this.isFlagEnabled(licenseInfo.flags, FLAGS.ANNUAL_LICENSE)
 			const isPerpetualLicense = this.isFlagEnabled(licenseInfo.flags, FLAGS.PERPETUAL_LICENSE)
 
+			const isEvaluationLicense = this.isFlagEnabled(licenseInfo.flags, FLAGS.EVALUATION_LICENSE)
+			const daysSinceExpiry = this.getDaysSinceExpiry(expiryDate)
+
 			const result: ValidLicenseKeyResult = {
 				license: licenseInfo,
 				isLicenseParseable: true,
@@ -214,7 +283,12 @@ export class LicenseManager {
 				isPerpetualLicense,
 				isPerpetualLicenseExpired: isPerpetualLicense && this.isPerpetualLicenseExpired(expiryDate),
 				isInternalLicense: this.isFlagEnabled(licenseInfo.flags, FLAGS.INTERNAL_LICENSE),
+				isNativeLicense: this.isNativeLicense(licenseInfo),
 				isLicensedWithWatermark: this.isFlagEnabled(licenseInfo.flags, FLAGS.WITH_WATERMARK),
+				isEvaluationLicense,
+				isEvaluationLicenseExpired:
+					isEvaluationLicense && this.isEvaluationLicenseExpired(expiryDate),
+				daysSinceExpiry,
 			}
 			this.outputLicenseInfoIfNeeded(result)
 
@@ -231,6 +305,7 @@ export class LicenseManager {
 
 		return licenseInfo.hosts.some((host) => {
 			const normalizedHost = host.toLowerCase().trim()
+			const maybeProtocol = normalizedHost.endsWith(':') ? normalizedHost : undefined
 
 			// Allow the domain if listed and www variations, 'example.com' allows 'example.com' and 'www.example.com'
 			if (
@@ -262,10 +337,20 @@ export class LicenseManager {
 				}
 			}
 
+			// Native license support
+			// In this case, `normalizedHost` is actually a protocol, e.g. `app-bundle:`
+			if (this.isNativeLicense(licenseInfo) && window.location.protocol === maybeProtocol) {
+				return true
+			}
+
 			return false
 		})
 	}
 
+	private isNativeLicense(licenseInfo: LicenseInfo) {
+		return this.isFlagEnabled(licenseInfo.flags, FLAGS.NATIVE_LICENSE)
+	}
+
 	private getExpirationDateWithoutGracePeriod(expiryDate: Date) {
 		return new Date(expiryDate.getFullYear(), expiryDate.getMonth(), expiryDate.getDate())
 	}
@@ -280,15 +365,7 @@ export class LicenseManager {
 
 	private isAnnualLicenseExpired(expiryDate: Date) {
 		const expiration = this.getExpirationDateWithGracePeriod(expiryDate)
-		const isExpired = new Date() >= expiration
-		// If it is not expired yet (including the grace period), but after the expiry date we warn the users
-		if (!isExpired && new Date() >= this.getExpirationDateWithoutGracePeriod(expiryDate)) {
-			this.outputMessages([
-				'tldraw license is about to expire, you are in a grace period.',
-				`Please reach out to ${LICENSE_EMAIL} if you would like to renew your license.`,
-			])
-		}
-		return isExpired
+		return new Date() >= expiration
 	}
 
 	private isPerpetualLicenseExpired(expiryDate: Date) {
@@ -301,6 +378,21 @@ export class LicenseManager {
 		return dates.major >= expiration || dates.minor >= expiration
 	}
 
+	private getDaysSinceExpiry(expiryDate: Date): number {
+		const now = new Date()
+		const expiration = this.getExpirationDateWithoutGracePeriod(expiryDate)
+		const diffTime = now.getTime() - expiration.getTime()
+		const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
+		return Math.max(0, diffDays)
+	}
+
+	private isEvaluationLicenseExpired(expiryDate: Date): boolean {
+		// Evaluation licenses have no grace period - they expire immediately
+		const now = new Date()
+		const expiration = this.getExpirationDateWithoutGracePeriod(expiryDate)
+		return now >= expiration
+	}
+
 	private isFlagEnabled(flags: number, flag: number) {
 		return (flags & flag) === flag
 	}
@@ -318,19 +410,6 @@ export class LicenseManager {
 	}
 
 	private outputLicenseInfoIfNeeded(result: ValidLicenseKeyResult) {
-		if (result.isAnnualLicenseExpired) {
-			this.outputMessages([
-				'Your tldraw license has expired!',
-				`Please reach out to ${LICENSE_EMAIL} to renew.`,
-			])
-		}
-
-		if (!result.isDomainValid && !result.isDevelopment) {
-			this.outputMessages([
-				'This tldraw license key is not valid for this domain!',
-				`Please reach out to ${LICENSE_EMAIL} if you would like to use tldraw on other domains.`,
-			])
-		}
 		// If we added a new flag it will be twice the value of the currently highest flag.
 		// And if all the current flags are on we would get the `HIGHEST_FLAG * 2 - 1`, so anything higher than that means there are new flags.
 		if (result.license.flags >= HIGHEST_FLAG * 2) {
@@ -367,15 +446,80 @@ export class LicenseManager {
 	static className = 'tl-watermark_SEE-LICENSE'
 }
 
-export function isEditorUnlicensed(result: LicenseFromKeyResult) {
-	if (!result.isLicenseParseable) return true
-	if (!result.isDomainValid && !result.isDevelopment) return true
-	if (result.isPerpetualLicenseExpired || result.isAnnualLicenseExpired) {
-		if (result.isInternalLicense) {
-			throw new Error('License: Internal license expired.')
+export function getLicenseState(
+	result: LicenseFromKeyResult,
+	outputMessages: (messages: string[]) => void,
+	isDevelopment: boolean
+): LicenseState {
+	if (!result.isLicenseParseable) {
+		if (isDevelopment) {
+			return 'unlicensed'
+		}
+
+		// All unlicensed scenarios should not work in production
+		if (result.reason === 'no-key-provided') {
+			outputMessages([
+				'No tldraw license key provided!',
+				'A license is required for production deployments.',
+				`Please reach out to ${LICENSE_EMAIL} to purchase a license.`,
+			])
+		} else {
+			outputMessages([
+				'Invalid license key. tldraw requires a valid license for production use.',
+				`Please reach out to ${LICENSE_EMAIL} to purchase a license.`,
+			])
+		}
+		return 'unlicensed-production'
+	}
+
+	if (!result.isDomainValid && !result.isDevelopment) {
+		outputMessages([
+			'License key is not valid for this domain.',
+			'A license is required for production deployments.',
+			`Please reach out to ${LICENSE_EMAIL} to purchase a license.`,
+		])
+		return 'unlicensed-production'
+	}
+
+	// Handle evaluation licenses - they expire immediately with no grace period
+	if (result.isEvaluationLicense) {
+		if (result.isEvaluationLicenseExpired) {
+			outputMessages([
+				'Your tldraw evaluation license has expired!',
+				`Please reach out to ${LICENSE_EMAIL} to purchase a full license.`,
+			])
+			return 'expired'
+		} else {
+			// Valid evaluation license - tracked but no watermark shown
+			return 'licensed'
 		}
-		return true
 	}
 
-	return false
+	// Handle expired regular licenses (both annual and perpetual)
+	if (result.isPerpetualLicenseExpired || result.isAnnualLicenseExpired) {
+		outputMessages([
+			'Your tldraw license has been expired for more than 30 days!',
+			`Please reach out to ${LICENSE_EMAIL} to renew your license.`,
+		])
+		return 'expired'
+	}
+
+	// Check if license is past expiry date but within grace period
+	const daysSinceExpiry = result.daysSinceExpiry
+	if (daysSinceExpiry > 0 && !result.isEvaluationLicense) {
+		outputMessages([
+			'Your tldraw license has expired.',
+			`License expired ${daysSinceExpiry} days ago.`,
+			`Please reach out to ${LICENSE_EMAIL} to renew your license.`,
+		])
+		// Within 30-day grace period: still licensed (no watermark)
+		return 'licensed'
+	}
+
+	// License is valid, determine if it has watermark
+	if (result.isLicensedWithWatermark) {
+		return 'licensed-with-watermark'
+	}
+
+	return 'licensed'
 }

package/src/lib/license/LicenseProvider.tsx

@@ -1,4 +1,5 @@
-import { createContext, ReactNode, useContext, useState } from 'react'
+import { useValue } from '@tldraw/state-react'
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react'
 import { LicenseManager } from './LicenseManager'
 
 /** @internal */
@@ -7,14 +8,85 @@ export const LicenseContext = createContext({} as LicenseManager)
 /** @internal */
 export const useLicenseContext = () => useContext(LicenseContext)
 
+function shouldHideEditorAfterDelay(licenseState: string): boolean {
+	return licenseState === 'expired' || licenseState === 'unlicensed-production'
+}
+
+/** @internal */
+export const LICENSE_TIMEOUT = 5000
+
 /** @internal */
 export function LicenseProvider({
-	licenseKey,
+	licenseKey = getLicenseKeyFromEnv() ?? undefined,
 	children,
 }: {
 	licenseKey?: string
 	children: ReactNode
 }) {
 	const [licenseManager] = useState(() => new LicenseManager(licenseKey))
+	const licenseState = useValue(licenseManager.state)
+	const [showEditor, setShowEditor] = useState(true)
+
+	// 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)
+			}, LICENSE_TIMEOUT)
+
+			return () => clearTimeout(timer)
+		}
+	}, [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) {
+		return <LicenseGate />
+	}
+
 	return <LicenseContext.Provider value={licenseManager}>{children}</LicenseContext.Provider>
 }
+
+// Renders as a hidden div that can be detected by tests
+function LicenseGate() {
+	return <div data-testid="tl-license-expired" style={{ display: 'none' }} />
+}
+
+let envLicenseKey: string | undefined | null = undefined
+function getLicenseKeyFromEnv() {
+	if (envLicenseKey !== undefined) {
+		return envLicenseKey
+	}
+	// it's important here that we write out the full process.env.WHATEVER expression instead of
+	// doing something like process.env[someVariable]. This is because most bundlers do something
+	// like a find-replace inject environment variables, and so won't pick up on dynamic ones. It
+	// also means we can't do checks like `process.env && process.env.WHATEVER`, which is why we use
+	// the `getEnv` try/catch approach.
+
+	// framework-specific prefixes borrowed from the ones vercel uses, but trimmed down to just the
+	// react-y ones: https://vercel.com/docs/environment-variables/framework-environment-variables
+	envLicenseKey =
+		getEnv(() => process.env.TLDRAW_LICENSE_KEY) ||
+		getEnv(() => process.env.NEXT_PUBLIC_TLDRAW_LICENSE_KEY) ||
+		getEnv(() => process.env.REACT_APP_TLDRAW_LICENSE_KEY) ||
+		getEnv(() => process.env.GATSBY_TLDRAW_LICENSE_KEY) ||
+		getEnv(() => process.env.VITE_TLDRAW_LICENSE_KEY) ||
+		getEnv(() => process.env.PUBLIC_TLDRAW_LICENSE_KEY) ||
+		getEnv(() => (import.meta as any).env.TLDRAW_LICENSE_KEY) ||
+		getEnv(() => (import.meta as any).env.NEXT_PUBLIC_TLDRAW_LICENSE_KEY) ||
+		getEnv(() => (import.meta as any).env.REACT_APP_TLDRAW_LICENSE_KEY) ||
+		getEnv(() => (import.meta as any).env.GATSBY_TLDRAW_LICENSE_KEY) ||
+		getEnv(() => (import.meta as any).env.VITE_TLDRAW_LICENSE_KEY) ||
+		getEnv(() => (import.meta as any).env.PUBLIC_TLDRAW_LICENSE_KEY) ||
+		null
+
+	return envLicenseKey
+}
+
+function getEnv(cb: () => string | undefined) {
+	try {
+		return cb()
+	} catch {
+		return undefined
+	}
+}

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

@@ -28,12 +28,74 @@ export const Watermark = memo(function Watermark() {
 	return (
 		<>
 			<LicenseStyles />
-			<WatermarkInner src={isMobile ? WATERMARK_MOBILE_LOCAL_SRC : WATERMARK_DESKTOP_LOCAL_SRC} />
+			<WatermarkInner
+				src={isMobile ? WATERMARK_MOBILE_LOCAL_SRC : WATERMARK_DESKTOP_LOCAL_SRC}
+				isUnlicensed={licenseManagerState === 'unlicensed'}
+			/>
 		</>
 	)
 })
 
-const WatermarkInner = memo(function WatermarkInner({ src }: { src: string }) {
+const UnlicensedWatermark = memo(function UnlicensedWatermark({
+	isDebugMode,
+	isMobile,
+}: {
+	isDebugMode: boolean
+	isMobile: boolean
+}) {
+	const events = useCanvasEvents()
+	const ref = useRef<HTMLDivElement>(null)
+	usePassThroughWheelEvents(ref)
+
+	const url = 'https://tldraw.dev/?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark'
+
+	return (
+		<div
+			ref={ref}
+			className={LicenseManager.className}
+			data-debug={isDebugMode}
+			data-mobile={isMobile}
+			data-unlicensed={true}
+			data-testid="tl-watermark-unlicensed"
+			draggable={false}
+			{...events}
+		>
+			<button
+				draggable={false}
+				role="button"
+				onPointerDown={(e) => {
+					stopEventPropagation(e)
+					preventDefault(e)
+				}}
+				title="Unlicensed - click to get a license"
+				onClick={() => runtime.openWindow(url, '_blank')}
+				style={{
+					position: 'absolute',
+					pointerEvents: 'all',
+					cursor: 'pointer',
+					color: 'var(--tl-color-text)',
+					opacity: 0.8,
+					border: 0,
+					padding: 0,
+					backgroundColor: 'transparent',
+					fontSize: '11px',
+					fontWeight: '600',
+					textAlign: 'center',
+				}}
+			>
+				Unlicensed
+			</button>
+		</div>
+	)
+})
+
+const WatermarkInner = memo(function WatermarkInner({
+	src,
+	isUnlicensed,
+}: {
+	src: string
+	isUnlicensed: boolean
+}) {
 	const editor = useEditor()
 	const isDebugMode = useValue('debug mode', () => editor.getInstanceState().isDebugMode, [editor])
 	const isMobile = useValue('is mobile', () => editor.getViewportScreenBounds().width < 700, [
@@ -47,12 +109,17 @@ const WatermarkInner = memo(function WatermarkInner({ src }: { src: string }) {
 	const maskCss = `url('${src}') center 100% / 100% no-repeat`
 	const url = 'https://tldraw.dev/?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark'
 
+	if (isUnlicensed) {
+		return <UnlicensedWatermark isDebugMode={isDebugMode} isMobile={isMobile} />
+	}
+
 	return (
 		<div
 			ref={ref}
 			className={LicenseManager.className}
 			data-debug={isDebugMode}
 			data-mobile={isMobile}
+			data-testid="tl-watermark-licensed"
 			draggable={false}
 			{...events}
 		>
@@ -86,8 +153,8 @@ To remove the watermark, please purchase a license at tldraw.dev.
 
 	.${className} {
 		position: absolute;
-		bottom: var(--tl-space-2);
-		right: var(--tl-space-2);
+		bottom: max(var(--tl-space-2), env(safe-area-inset-bottom));
+		right: max(var(--tl-space-2), env(safe-area-inset-right));
 		width: 96px;
 		height: 32px;
 		display: flex;
@@ -116,12 +183,12 @@ To remove the watermark, please purchase a license at tldraw.dev.
 	}
 
 	.${className}[data-debug='true'] {
-		bottom: 46px;
+		bottom: max(46px, env(safe-area-inset-bottom));
 	}
 
 	.${className}[data-mobile='true'] {
 		border-radius: 4px 0px 0px 4px;
-		right: -2px;
+		right: max(-2px, calc(env(safe-area-inset-right) - 2px));
 		width: 8px;
 		height: 48px;
 	}

package/src/lib/license/useLicenseManagerState.ts

@@ -1,7 +1,7 @@
 import { useValue } from '@tldraw/state-react'
-import { LicenseManager } from './LicenseManager'
+import { LicenseManager, LicenseState } from './LicenseManager'
 
 /** @internal */
-export function useLicenseManagerState(licenseManager: LicenseManager) {
+export function useLicenseManagerState(licenseManager: LicenseManager): LicenseState {
 	return useValue('watermarkState', () => licenseManager.state.get(), [licenseManager])
 }

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 {
@@ -98,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: [