@tldraw/editor 3.16.0-canary.c2c4563957ce → 3.16.0-canary.c434355348c5

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))
 
@@ -36,11 +36,12 @@ export interface LicenseInfo {
 
 /** @internal */
 export type LicenseState =
-	| 'pending'
-	| 'licensed'
-	| 'licensed-with-watermark'
-	| 'unlicensed'
-	| 'internal-expired'
+	| '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'
@@ -69,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 =
@@ -96,11 +103,13 @@ export class LicenseManager {
 
 		this.getLicenseFromKey(licenseKey)
 			.then((result) => {
-				const licenseState = getLicenseState(result)
+				const licenseState = getLicenseState(
+					result,
+					(messages: string[]) => this.outputMessages(messages),
+					this.isDevelopment
+				)
 
-				if (!this.isDevelopment && licenseState === 'unlicensed') {
-					fetch(WATERMARK_TRACK_SRC)
-				}
+				this.maybeTrack(result, licenseState)
 
 				this.state.set(licenseState)
 			})
@@ -121,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('/')
@@ -207,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,
@@ -219,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)
 
@@ -284,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) {
@@ -305,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
 	}
@@ -322,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) {
@@ -371,13 +422,74 @@ export class LicenseManager {
 	static className = 'tl-watermark_SEE-LICENSE'
 }
 
-export function getLicenseState(result: LicenseFromKeyResult): LicenseState {
-	if (!result.isLicenseParseable) return 'unlicensed'
-	if (!result.isDomainValid && !result.isDevelopment) return 'unlicensed'
+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'
+		}
+	}
+
+	// Handle expired regular licenses (both annual and perpetual)
 	if (result.isPerpetualLicenseExpired || result.isAnnualLicenseExpired) {
-		// Check if it's an expired internal license with valid domain
-		const internalExpired = result.isInternalLicense && result.isDomainValid
-		return internalExpired ? 'internal-expired' : 'unlicensed'
+		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

package/src/lib/license/LicenseProvider.tsx

@@ -1,5 +1,5 @@
 import { useValue } from '@tldraw/state-react'
-import { createContext, ReactNode, useContext, useState } from 'react'
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react'
 import { LicenseManager } from './LicenseManager'
 
 /** @internal */
@@ -8,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,
@@ -18,11 +25,29 @@ export function LicenseProvider({
 }) {
 	const [licenseManager] = useState(() => new LicenseManager(licenseKey))
 	const licenseState = useValue(licenseManager.state)
+	const [showEditor, setShowEditor] = useState(true)
 
-	// If internal license has expired, don't render the editor at all
-	if (licenseState === 'internal-expired') {
-		return <div data-testid="tl-license-expired" style={{ display: 'none' }} />
+	// 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.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}
 		>

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 = '3.16.0-canary.c2c4563957ce'
+export const version = '3.16.0-canary.c434355348c5'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-09-03T11:25:43.960Z',
-	patch: '2025-09-03T11:25:43.960Z',
+	minor: '2025-09-05T09:18:07.583Z',
+	patch: '2025-09-05T09:18:07.583Z',
 }