@tldraw/editor 5.3.0-canary.fceaae5e9feb → 5.3.0-internal.fba91ed55f6c

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

@@ -4,6 +4,7 @@ import { publishDates } from '../../version'
 import { str2ab } from '../utils/licensing'
 import {
 	FLAGS,
+	getEnabledFeatures,
 	getLicenseState,
 	LicenseManager,
 	PROPERTIES,
@@ -508,6 +509,116 @@ describe('LicenseManager', () => {
 			expect(result.isEvaluationLicense).toBe(true)
 			expect(result.isEvaluationLicenseExpired).toBe(true)
 		})
+
+		it('Checks for the commenting feature flag', async () => {
+			const commentingLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			commentingLicenseInfo[PROPERTIES.FLAGS] |= FLAGS.FEAT_COMMENTING
+			const commentingLicenseKey = await generateLicenseKey(
+				JSON.stringify(commentingLicenseInfo),
+				keyPair
+			)
+			const result = (await licenseManager.getLicenseFromKey(
+				commentingLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isCommentingEnabled).toBe(true)
+			expect(result.isCollaborationEnabled).toBe(false)
+		})
+
+		it('Checks for the collaboration feature flag', async () => {
+			const collaborationLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			collaborationLicenseInfo[PROPERTIES.FLAGS] |= FLAGS.FEAT_COLLABORATION
+			const collaborationLicenseKey = await generateLicenseKey(
+				JSON.stringify(collaborationLicenseInfo),
+				keyPair
+			)
+			const result = (await licenseManager.getLicenseFromKey(
+				collaborationLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isCollaborationEnabled).toBe(true)
+			// The collaboration umbrella grants the commenting sub-feature.
+			expect(result.isCommentingEnabled).toBe(true)
+		})
+
+		it('Leaves feature flags off when no feature bits are set', async () => {
+			const standardLicenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+			const result = (await licenseManager.getLicenseFromKey(
+				standardLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isCollaborationEnabled).toBe(false)
+			expect(result.isCommentingEnabled).toBe(false)
+		})
+
+		it('Enables features synchronously in development, before validation resolves', () => {
+			process.env.NODE_ENV = 'development'
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('https://www.example.com')
+
+			try {
+				// No await: the feature flags should already reflect development (all enabled) rather
+				// than the fail-closed default, which only lifts once async validation resolves.
+				const devLicenseManager = new LicenseManager('', keyPair.publicKey)
+				expect(devLicenseManager.isFeatureEnabled('commenting')).toBe(true)
+				expect(devLicenseManager.isFeatureEnabled('collaboration')).toBe(true)
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+	})
+
+	describe('Expiry date timezone handling', () => {
+		afterEach(() => {
+			vi.useRealTimers()
+		})
+
+		// The named expiry date is minted as a date-only string and should mean "the license
+		// is fully usable through the end of that day in UTC", giving every user the same
+		// cutoff regardless of their local timezone.
+		async function makeEvaluationLicenseWithExpiry(expiry: string) {
+			const licenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			licenseInfo[PROPERTIES.FLAGS] = FLAGS.EVALUATION_LICENSE
+			licenseInfo[PROPERTIES.EXPIRY_DATE] = expiry
+			return generateLicenseKey(JSON.stringify(licenseInfo), keyPair)
+		}
+
+		it('Keeps the license valid through the end of the named expiry day (UTC)', async () => {
+			const key = await makeEvaluationLicenseWithExpiry('2026-06-26')
+
+			// The final moment of the named day is still valid.
+			vi.useFakeTimers()
+			vi.setSystemTime(new Date('2026-06-26T23:59:59.000Z'))
+			expect(
+				((await licenseManager.getLicenseFromKey(key)) as ValidLicenseKeyResult)
+					.isEvaluationLicenseExpired
+			).toBe(false)
+		})
+
+		it('Expires the license at the start of the day after the named expiry day (UTC)', async () => {
+			const key = await makeEvaluationLicenseWithExpiry('2026-06-26')
+
+			vi.useFakeTimers()
+			vi.setSystemTime(new Date('2026-06-27T00:00:01.000Z'))
+			expect(
+				((await licenseManager.getLicenseFromKey(key)) as ValidLicenseKeyResult)
+					.isEvaluationLicenseExpired
+			).toBe(true)
+		})
+
+		it('Does not expire early for users west of UTC who are still on the named day locally', async () => {
+			const key = await makeEvaluationLicenseWithExpiry('2026-06-26')
+
+			// Under the old logic a user west of UTC parsed the date one calendar day early and
+			// expired at the *start* of that day, losing most of a day. With the uniform UTC
+			// cutoff the license stays valid all through June 26 for everyone, no matter their
+			// local offset. 1pm UTC on June 26 is well before the cutoff, so it is still valid.
+			vi.useFakeTimers()
+			vi.setSystemTime(new Date('2026-06-26T13:00:00.000Z'))
+			expect(
+				((await licenseManager.getLicenseFromKey(key)) as ValidLicenseKeyResult)
+					.isEvaluationLicenseExpired
+			).toBe(false)
+		})
 	})
 
 	describe('License expiry and grace period', () => {
@@ -540,38 +651,54 @@ describe('LicenseManager', () => {
 		})
 
 		it('Handles grace period correctly - 20 days expired should still be within grace period', async () => {
-			const expiredLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
-			const expiredDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 20) // 20 days ago
-			expiredLicenseInfo[PROPERTIES.EXPIRY_DATE] = expiredDate.toISOString()
-
-			const expiredLicenseKey = await generateLicenseKey(
-				JSON.stringify(expiredLicenseInfo),
-				keyPair
-			)
-
-			// Test the getLicenseFromKey method to verify grace period calculation
-			const result = (await licenseManager.getLicenseFromKey(
-				expiredLicenseKey
-			)) as ValidLicenseKeyResult
-			expect(result.isAnnualLicense).toBe(true)
-			expect(result.isAnnualLicenseExpired).toBe(false) // Within 30-day grace period
-			expect(result.daysSinceExpiry).toBe(20)
+			// Pin the clock and use a date-only UTC expiry so the calculation is timezone
+			// independent. The named day is fully usable, so an expiry 20 calendar days before
+			// "now" has been past its usable window for 19 full days.
+			vi.useFakeTimers()
+			vi.setSystemTime(new Date('2026-06-26T12:00:00.000Z'))
+			try {
+				const expiredLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+				expiredLicenseInfo[PROPERTIES.EXPIRY_DATE] = '2026-06-06' // 20 days before now
+
+				const expiredLicenseKey = await generateLicenseKey(
+					JSON.stringify(expiredLicenseInfo),
+					keyPair
+				)
+
+				// Test the getLicenseFromKey method to verify grace period calculation
+				const result = (await licenseManager.getLicenseFromKey(
+					expiredLicenseKey
+				)) as ValidLicenseKeyResult
+				expect(result.isAnnualLicense).toBe(true)
+				expect(result.isAnnualLicenseExpired).toBe(false) // Within 30-day grace period
+				expect(result.daysSinceExpiry).toBe(19)
+			} finally {
+				vi.useRealTimers()
+			}
 		})
 
 		it('Calculates days since expiry correctly', async () => {
-			const expiredLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
-			const expiredDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 15) // 15 days ago
-			expiredLicenseInfo[PROPERTIES.EXPIRY_DATE] = expiredDate.toISOString()
-
-			const expiredLicenseKey = await generateLicenseKey(
-				JSON.stringify(expiredLicenseInfo),
-				keyPair
-			)
-
-			const result = (await licenseManager.getLicenseFromKey(
-				expiredLicenseKey
-			)) as ValidLicenseKeyResult
-			expect(result.daysSinceExpiry).toBe(15)
+			// Pin the clock and use a date-only UTC expiry so the calculation is timezone
+			// independent. The named day is fully usable, so an expiry 15 calendar days before
+			// "now" has been past its usable window for 14 full days.
+			vi.useFakeTimers()
+			vi.setSystemTime(new Date('2026-06-26T12:00:00.000Z'))
+			try {
+				const expiredLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+				expiredLicenseInfo[PROPERTIES.EXPIRY_DATE] = '2026-06-11' // 15 days before now
+
+				const expiredLicenseKey = await generateLicenseKey(
+					JSON.stringify(expiredLicenseInfo),
+					keyPair
+				)
+
+				const result = (await licenseManager.getLicenseFromKey(
+					expiredLicenseKey
+				)) as ValidLicenseKeyResult
+				expect(result.daysSinceExpiry).toBe(14)
+			} finally {
+				vi.useRealTimers()
+			}
 		})
 	})
 
@@ -723,6 +850,8 @@ function getDefaultLicenseResult(overrides: Partial<ValidLicenseKeyResult>): Val
 		isLicensedWithWatermark: false,
 		isEvaluationLicense: false,
 		isEvaluationLicenseExpired: false,
+		isCollaborationEnabled: false,
+		isCommentingEnabled: false,
 		daysSinceExpiry: 0,
 		// WatermarkManager does not check these fields, it relies on the calculated values like isAnnualLicenseExpired
 		license: {
@@ -1024,3 +1153,65 @@ describe('getLicenseState', () => {
 		})
 	})
 })
+
+describe('getEnabledFeatures', () => {
+	it('enables every feature in development regardless of flags', () => {
+		const result = getDefaultLicenseResult({
+			isCollaborationEnabled: false,
+			isCommentingEnabled: false,
+		})
+		expect(getEnabledFeatures(result, 'unlicensed', true)).toEqual({
+			collaboration: true,
+			commenting: true,
+		})
+	})
+
+	it('reflects the license flags for a valid licensed state', () => {
+		const result = getDefaultLicenseResult({
+			isCollaborationEnabled: false,
+			isCommentingEnabled: true,
+		})
+		expect(getEnabledFeatures(result, 'licensed', false)).toEqual({
+			collaboration: false,
+			commenting: true,
+		})
+	})
+
+	it('still grants features while showing a watermark', () => {
+		const result = getDefaultLicenseResult({
+			isCollaborationEnabled: true,
+			isCommentingEnabled: true,
+		})
+		expect(getEnabledFeatures(result, 'licensed-with-watermark', false)).toEqual({
+			collaboration: true,
+			commenting: true,
+		})
+	})
+
+	it.each(['unlicensed', 'unlicensed-production', 'expired', 'pending'] as const)(
+		'disables all features for the %s state in production',
+		(state) => {
+			const result = getDefaultLicenseResult({
+				isCollaborationEnabled: true,
+				isCommentingEnabled: true,
+			})
+			expect(getEnabledFeatures(result, state, false)).toEqual({
+				collaboration: false,
+				commenting: false,
+			})
+		}
+	)
+
+	it('disables all features when the license is not parseable', () => {
+		expect(
+			getEnabledFeatures(
+				{ isLicenseParseable: false, reason: 'no-key-provided' },
+				'licensed',
+				false
+			)
+		).toEqual({
+			collaboration: false,
+			commenting: false,
+		})
+	})
+})

package/src/lib/license/LicenseManager.ts

@@ -1,4 +1,4 @@
-import { atom } from '@tldraw/state'
+import { atom, transact } from '@tldraw/state'
 import { publishDates, version } from '../../version'
 import { getDefaultCdnBaseUrl } from '../utils/assets'
 import { importPublicKey, str2ab } from '../utils/licensing'
@@ -22,6 +22,12 @@ export const FLAGS = {
 	// Native means the license is for native apps which switches
 	// on special-case logic.
 	NATIVE_LICENSE: 1 << 5,
+
+	// -- FEATURE FLAGS --
+	// Collaboration is the umbrella flag for collaboration features; it grants all sub-features.
+	FEAT_COLLABORATION: 1 << 6,
+	// Commenting is the first sub-feature of collaboration.
+	FEAT_COMMENTING: 1 << 7,
 }
 const HIGHEST_FLAG = Math.max(...Object.values(FLAGS))
 
@@ -45,6 +51,23 @@ export interface LicenseInfo {
 	expiryDate: string
 }
 
+/**
+ * Names of the licensable product features gated by the license. `collaboration` is an umbrella
+ * that also grants all of its sub-features (currently just `commenting`).
+ *
+ * @internal
+ */
+export type LicenseFeatureName = 'collaboration' | 'commenting'
+
+const NO_FEATURES: Readonly<Record<LicenseFeatureName, boolean>> = {
+	collaboration: false,
+	commenting: false,
+}
+const ALL_FEATURES: Readonly<Record<LicenseFeatureName, boolean>> = {
+	collaboration: true,
+	commenting: true,
+}
+
 /** @internal */
 export type LicenseState =
 	| 'pending' // License validation is in progress
@@ -84,6 +107,8 @@ export interface ValidLicenseKeyResult {
 	isLicensedWithWatermark: boolean
 	isEvaluationLicense: boolean
 	isEvaluationLicenseExpired: boolean
+	isCollaborationEnabled: boolean
+	isCommentingEnabled: boolean
 	daysSinceExpiry: number
 }
 
@@ -98,6 +123,9 @@ export class LicenseManager {
 	public isTest: boolean
 	public isCryptoAvailable: boolean
 	state = atom<LicenseState>('license state', 'pending')
+	featureFlags = atom<Record<LicenseFeatureName, boolean>>('license feature flags', {
+		...NO_FEATURES,
+	})
 	public verbose = true
 
 	constructor(licenseKey: string | undefined, testPublicKey?: string) {
@@ -106,6 +134,14 @@ export class LicenseManager {
 		this.publicKey = testPublicKey || this.publicKey
 		this.isCryptoAvailable = !!crypto.subtle
 
+		// In development every feature is enabled (see `getEnabledFeatures`), and that doesn't depend
+		// on the async validation result. Reflect it eagerly so features aren't reported as disabled
+		// during the validation window — or left disabled if validation rejects (the `.catch` below
+		// never sets `featureFlags`). In production the fail-closed default stands until validation.
+		if (this.isDevelopment) {
+			this.featureFlags.set({ ...ALL_FEATURES })
+		}
+
 		this.getLicenseFromKey(licenseKey)
 			.then((result) => {
 				const licenseState = getLicenseState(
@@ -116,7 +152,12 @@ export class LicenseManager {
 
 				this.maybeTrack(result, licenseState)
 
-				this.state.set(licenseState)
+				// Update both atoms atomically so dependents never observe the license state and the
+				// feature flags out of sync mid-update.
+				transact(() => {
+					this.state.set(licenseState)
+					this.featureFlags.set(getEnabledFeatures(result, licenseState, this.isDevelopment))
+				})
 			})
 			.catch((error) => {
 				console.error('License validation failed:', error)
@@ -124,6 +165,14 @@ export class LicenseManager {
 			})
 	}
 
+	/**
+	 * Returns whether a given licensable feature is enabled. Reactive: reading this inside a signal
+	 * recomputes when license validation resolves.
+	 */
+	isFeatureEnabled(feature: LicenseFeatureName): boolean {
+		return this.featureFlags.get()[feature]
+	}
+
 	private getIsDevelopment() {
 		// If we are using https on a non-loopback domain we assume it's a production env and a development one otherwise
 		return (
@@ -286,6 +335,12 @@ export class LicenseManager {
 			const isPerpetualLicenseExpired =
 				isPerpetualLicense && this.isPerpetualLicenseExpired(expiryDate)
 
+			// The collaboration umbrella grants all of its sub-features, so commenting is enabled
+			// by either the commenting flag or the collaboration flag.
+			const isCollaborationEnabled = this.isFlagEnabled(licenseInfo.flags, FLAGS.FEAT_COLLABORATION)
+			const isCommentingEnabled =
+				isCollaborationEnabled || this.isFlagEnabled(licenseInfo.flags, FLAGS.FEAT_COMMENTING)
+
 			// For perpetual licenses, the calendar expiry date only gates access to future
 			// major/minor releases; it does not "expire" the license itself. While the user
 			// is still on a covered version we report `daysSinceExpiry` as 0 so consumers
@@ -309,6 +364,8 @@ export class LicenseManager {
 				isEvaluationLicense,
 				isEvaluationLicenseExpired:
 					isEvaluationLicense && this.isEvaluationLicenseExpired(expiryDate),
+				isCollaborationEnabled,
+				isCommentingEnabled,
 				daysSinceExpiry,
 			}
 			this.outputLicenseInfoIfNeeded(result)
@@ -372,14 +429,26 @@ export class LicenseManager {
 	}
 
 	private getExpirationDateWithoutGracePeriod(expiryDate: Date) {
-		return new Date(expiryDate.getFullYear(), expiryDate.getMonth(), expiryDate.getDate())
+		// The named expiry date is the last day the license is fully usable, so the license
+		// expires at the end of that day, i.e. the start of the following day. We work in UTC
+		// (the expiry date is minted and parsed as a UTC date-only string) so the cutoff is a
+		// single predictable instant for every user regardless of their local timezone.
+		return new Date(
+			Date.UTC(
+				expiryDate.getUTCFullYear(),
+				expiryDate.getUTCMonth(),
+				expiryDate.getUTCDate() + 1 // Add 1 day so the named date is fully usable
+			)
+		)
 	}
 
 	private getExpirationDateWithGracePeriod(expiryDate: Date) {
 		return new Date(
-			expiryDate.getFullYear(),
-			expiryDate.getMonth(),
-			expiryDate.getDate() + GRACE_PERIOD_DAYS + 1 // Add 1 day to include the expiration day
+			Date.UTC(
+				expiryDate.getUTCFullYear(),
+				expiryDate.getUTCMonth(),
+				expiryDate.getUTCDate() + GRACE_PERIOD_DAYS + 1 // Add 1 day to include the expiration day
+			)
 		)
 	}
 
@@ -471,6 +540,38 @@ export class LicenseManager {
 	static className = 'tl-watermark_SEE-LICENSE'
 }
 
+/**
+ * Derives which licensable features are enabled from the parse result and the derived license
+ * state. In development every feature is enabled so SDK developers can build against them; in
+ * production a feature requires both an active, valid license and the corresponding flag.
+ *
+ * @internal
+ */
+export function getEnabledFeatures(
+	result: LicenseFromKeyResult,
+	licenseState: LicenseState,
+	isDevelopment: boolean
+): Record<LicenseFeatureName, boolean> {
+	// Development gets all features so SDK developers can build against them.
+	if (isDevelopment) {
+		return { ...ALL_FEATURES }
+	}
+
+	// Features require an active, valid license. Both the 30-day grace-period 'licensed' state and
+	// the watermark state count as valid; unlicensed/expired/pending do not.
+	if (
+		!result.isLicenseParseable ||
+		(licenseState !== 'licensed' && licenseState !== 'licensed-with-watermark')
+	) {
+		return { ...NO_FEATURES }
+	}
+
+	return {
+		collaboration: result.isCollaborationEnabled,
+		commenting: result.isCommentingEnabled,
+	}
+}
+
 export function getLicenseState(
 	result: LicenseFromKeyResult,
 	outputMessages: (messages: string[]) => void,

package/src/lib/license/useLicenseManagerState.ts

@@ -1,7 +1,23 @@
 import { useValue } from '@tldraw/state-react'
-import { LicenseManager, LicenseState } from './LicenseManager'
+import { LicenseFeatureName, LicenseManager, LicenseState } from './LicenseManager'
 
 /** @internal */
 export function useLicenseManagerState(licenseManager: LicenseManager): LicenseState {
 	return useValue('watermarkState', () => licenseManager.state.get(), [licenseManager])
 }
+
+/**
+ * Reactively reads whether a licensable feature is enabled for the current license. Re-renders when
+ * license validation resolves.
+ *
+ * @internal
+ */
+export function useLicenseFeatureFlag(
+	licenseManager: LicenseManager,
+	feature: LicenseFeatureName
+): boolean {
+	return useValue('licenseFeature', () => licenseManager.isFeatureEnabled(feature), [
+		licenseManager,
+		feature,
+	])
+}

package/src/lib/options.ts

@@ -86,6 +86,7 @@ export interface TldrawOptions {
 	readonly collaboratorCheckIntervalMs: number
 	readonly cameraMovingTimeoutMs: number
 	readonly hitTestMargin: number
+	readonly coarseHitTestMargin: number
 	readonly edgeScrollDelay: number
 	readonly edgeScrollEaseDuration: number
 	readonly edgeScrollSpeed: number
@@ -312,7 +313,8 @@ export const defaultTldrawOptions = {
 	collaboratorIdleTimeoutMs: 3000,
 	collaboratorCheckIntervalMs: 1200,
 	cameraMovingTimeoutMs: 64,
-	hitTestMargin: 8,
+	hitTestMargin: 3,
+	coarseHitTestMargin: 4,
 	edgeScrollDelay: 200,
 	edgeScrollEaseDuration: 200,
 	edgeScrollSpeed: 25,

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.0-canary.fceaae5e9feb'
+export const version = '5.3.0-internal.fba91ed55f6c'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-07-01T09:33:16.670Z',
-	patch: '2026-07-01T09:33:16.670Z',
+	minor: '2026-07-17T10:57:42.512Z',
+	patch: '2026-07-17T10:57:42.512Z',
 }