@tldraw/editor 3.16.0-canary.c1bcdabc9513 → 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))
 
@@ -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.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/primitives/Box.test.ts

@@ -510,6 +510,132 @@ describe('Box', () => {
 		})
 	})
 
+	describe('Box.ContainsApproximately', () => {
+		it('returns true when first box exactly contains second', () => {
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(10, 10, 50, 50)
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
+		})
+
+		it('returns false when first box clearly does not contain second', () => {
+			const boxA = new Box(0, 0, 50, 50)
+			const boxB = new Box(10, 10, 100, 100)
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(false)
+		})
+
+		it('returns true when containment is within default precision tolerance', () => {
+			// Box B extends very slightly outside A (within floating-point precision)
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(10, 10, 80, 80)
+			// Move B's max edges just slightly outside A's bounds
+			boxB.w = 90.000000000001 // maxX = 100.000000000001 (slightly beyond 100)
+			boxB.h = 90.000000000001 // maxY = 100.000000000001 (slightly beyond 100)
+
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
+			expect(Box.Contains(boxA, boxB)).toBe(false) // strict contains would fail
+		})
+
+		it('returns false when containment exceeds default precision tolerance', () => {
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(10, 10, 80, 80)
+			// Move B's max edges clearly outside A's bounds
+			boxB.w = 95 // maxX = 105 (clearly beyond 100)
+			boxB.h = 95 // maxY = 105 (clearly beyond 100)
+
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(false)
+		})
+
+		it('respects custom precision parameter', () => {
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(10, 10, 85, 85) // maxX=95, maxY=95
+
+			// With loose precision (10), should contain (95 is within 100-10=90 tolerance)
+			expect(Box.ContainsApproximately(boxA, boxB, 10)).toBe(true)
+
+			// With tight precision (4), should still contain (95 is within 100-4=96)
+			expect(Box.ContainsApproximately(boxA, boxB, 4)).toBe(true)
+
+			// Since 95 < 100, the precision parameter doesn't affect containment here
+			expect(Box.ContainsApproximately(boxA, boxB, 4.9)).toBe(true)
+		})
+
+		it('handles negative coordinates correctly', () => {
+			const boxA = new Box(-50, -50, 100, 100) // bounds: (-50,-50) to (50,50)
+			const boxB = new Box(-40, -40, 79.999999999, 79.999999999) // bounds: (-40,-40) to (39.999999999, 39.999999999)
+
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
+		})
+
+		it('handles edge case where boxes are identical', () => {
+			const boxA = new Box(10, 20, 100, 200)
+			const boxB = new Box(10, 20, 100, 200)
+
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
+		})
+
+		it('handles edge case where inner box touches outer box edges', () => {
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(0, 0, 100, 100) // exactly the same
+
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
+
+			// Slightly smaller inner box
+			const boxC = new Box(0.000001, 0.000001, 99.999998, 99.999998)
+			expect(Box.ContainsApproximately(boxA, boxC)).toBe(true)
+		})
+
+		it('handles floating-point precision issues in real-world scenarios', () => {
+			// Simulate common floating-point arithmetic issues
+			const containerBox = new Box(0, 0, 100, 100)
+
+			// Box that should be contained but has floating-point errors
+			const innerBox = new Box(10, 10, 80, 80)
+			// Simulate floating-point arithmetic that results in tiny overruns
+			innerBox.w = 90.00000000000001 // maxX = 100.00000000000001 (tiny overrun)
+			innerBox.h = 90.00000000000001 // maxY = 100.00000000000001 (tiny overrun)
+
+			expect(Box.ContainsApproximately(containerBox, innerBox)).toBe(true)
+			expect(Box.Contains(containerBox, innerBox)).toBe(false) // strict contains fails due to precision
+		})
+
+		it('fails when any edge exceeds tolerance', () => {
+			const boxA = new Box(10, 10, 100, 100) // bounds: (10,10) to (110,110)
+
+			// Test each edge exceeding tolerance
+			const testCases = [
+				{ name: 'left edge', box: new Box(5, 20, 80, 80) }, // minX too small
+				{ name: 'top edge', box: new Box(20, 5, 80, 80) }, // minY too small
+				{ name: 'right edge', box: new Box(20, 20, 95, 80) }, // maxX too large (20+95=115 > 110)
+				{ name: 'bottom edge', box: new Box(20, 20, 80, 95) }, // maxY too large (20+95=115 > 110)
+			]
+
+			testCases.forEach(({ box }) => {
+				expect(Box.ContainsApproximately(boxA, box, 1)).toBe(false) // tight precision
+			})
+		})
+
+		it('works with zero-sized dimensions', () => {
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(50, 50, 0, 0) // zero-sized box (point)
+
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
+		})
+
+		it('handles precision parameter edge cases', () => {
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(10, 10, 91, 91) // maxX=101, maxY=101 (clearly outside)
+
+			// Zero precision should work like strict Contains
+			expect(Box.ContainsApproximately(boxA, boxB, 0)).toBe(false)
+
+			// Small precision should still fail (101 > 100)
+			expect(Box.ContainsApproximately(boxA, boxB, 0.5)).toBe(false)
+
+			// Sufficient precision should succeed (101 <= 100 + 2)
+			expect(Box.ContainsApproximately(boxA, boxB, 2)).toBe(true)
+		})
+	})
+
 	describe('Box.Includes', () => {
 		it('returns true when boxes collide or contain', () => {
 			const boxA = new Box(0, 0, 50, 50)

package/src/lib/primitives/Box.ts

@@ -1,6 +1,6 @@
 import { BoxModel } from '@tldraw/tlschema'
 import { Vec, VecLike } from './Vec'
-import { PI, PI2, toPrecision } from './utils'
+import { approximatelyLte, PI, PI2, toPrecision } from './utils'
 
 /** @public */
 export type BoxLike = BoxModel | Box
@@ -417,6 +417,15 @@ export class Box {
 		return A.minX < B.minX && A.minY < B.minY && A.maxY > B.maxY && A.maxX > B.maxX
 	}
 
+	static ContainsApproximately(A: Box, B: Box, precision?: number) {
+		return (
+			approximatelyLte(A.minX, B.minX, precision) &&
+			approximatelyLte(A.minY, B.minY, precision) &&
+			approximatelyLte(B.maxX, A.maxX, precision) &&
+			approximatelyLte(B.maxY, A.maxY, precision)
+		)
+	}
+
 	static Includes(A: Box, B: Box) {
 		return Box.Collides(A, B) || Box.Contains(A, B)
 	}

package/src/lib/primitives/Vec.ts

@@ -240,11 +240,6 @@ export class Vec {
 		return Vec.EqualsXY(this, x, y)
 	}
 
-	/** @deprecated use `uni` instead */
-	norm() {
-		return this.uni()
-	}
-
 	toFixed() {
 		this.x = toFixed(this.x)
 		this.y = toFixed(this.y)