@tldraw/editor 3.16.0-canary.f60032f16651 → 3.16.0-canary.ffc5da6dc09f

package/src/lib/license/LicenseManager.ts

@@ -1,16 +1,16 @@
 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,
+	ANNUAL_LICENSE: 1,
+	PERPETUAL_LICENSE: 1 << 1,
+	INTERNAL_LICENSE: 1 << 2,
+	WITH_WATERMARK: 1 << 3,
+	EVALUATION_LICENSE: 1 << 4,
 }
 const HIGHEST_FLAG = Math.max(...Object.values(FLAGS))
 
@@ -33,6 +33,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'
@@ -61,11 +70,17 @@ export interface ValidLicenseKeyResult {
 	isPerpetualLicenseExpired: boolean
 	isInternalLicense: 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 +88,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 +101,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 +130,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 +257,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,
@@ -215,6 +272,10 @@ export class LicenseManager {
 				isPerpetualLicenseExpired: isPerpetualLicense && this.isPerpetualLicenseExpired(expiryDate),
 				isInternalLicense: this.isFlagEnabled(licenseInfo.flags, FLAGS.INTERNAL_LICENSE),
 				isLicensedWithWatermark: this.isFlagEnabled(licenseInfo.flags, FLAGS.WITH_WATERMARK),
+				isEvaluationLicense,
+				isEvaluationLicenseExpired:
+					isEvaluationLicense && this.isEvaluationLicenseExpired(expiryDate),
+				daysSinceExpiry,
 			}
 			this.outputLicenseInfoIfNeeded(result)
 
@@ -280,15 +341,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 +354,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 +386,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 +422,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'
 		}
-		return true
+
+		// 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'
+		}
+	}
+
+	// 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 false
+	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,6 +8,13 @@ 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,
@@ -16,5 +24,30 @@ export function LicenseProvider({
 	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' }} />
+}

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,15 +153,15 @@ To remove the watermark, please purchase a license at tldraw.dev.
 
 	.${className} {
 		position: absolute;
-		bottom: var(--space-2);
-		right: var(--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;
 		align-items: center;
 		justify-content: center;
-		z-index: var(--layer-watermark) !important;
-		background-color: color-mix(in srgb, var(--color-background) 62%, transparent);
+		z-index: var(--tl-layer-watermark) !important;
+		background-color: color-mix(in srgb, var(--tl-color-background) 62%, transparent);
 		opacity: 1;
 		border-radius: 5px;
 		pointer-events: all;
@@ -108,7 +175,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
 		height: 32px;
 		pointer-events: all;
 		cursor: inherit;
-		color: var(--color-text);
+		color: var(--tl-color-text);
 		opacity: .38;
 		border: 0;
 		padding: 0;
@@ -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;
 	}
@@ -137,7 +204,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
 		}
 
 		.${className}:hover {
-			background-color: var(--color-background);
+			background-color: var(--tl-color-background);
 			transition: background-color 0.2s ease-in-out;
 			transition-delay: 0.32s;
 		}

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 {
@@ -53,6 +55,7 @@ export interface TldrawOptions {
 	readonly flattenImageBoundsPadding: number
 	readonly laserDelayMs: number
 	readonly maxExportDelayMs: number
+	readonly tooltipDelayMs: number
 	/**
 	 * How long should previews created by {@link Editor.createTemporaryAssetPreview} last before
 	 * they expire? Defaults to 3 minutes.
@@ -97,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: [
@@ -124,6 +131,7 @@ export const defaultTldrawOptions = {
 	flattenImageBoundsPadding: 16,
 	laserDelayMs: 1200,
 	maxExportDelayMs: 5000,
+	tooltipDelayMs: 700,
 	temporaryAssetPreviewLifetimeMs: 180000,
 	actionShortcutsLocation: 'swap',
 	createTextOnCanvasDoubleClick: true,