@tldraw/editor 4.1.0-canary.8e597b345c40 → 4.1.0-canary.95d46c96eb30

package/dist-esm/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.1.0-canary.8e597b345c40'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2025-09-18T14:54:05.125Z',\n\tpatch: '2025-09-18T14:54:05.125Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.1.0-canary.95d46c96eb30'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2025-10-07T11:02:50.479Z',\n\tpatch: '2025-10-07T11:02:50.479Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/editor.css

@@ -1321,6 +1321,10 @@ input,
 	flex: 1;
 }
 
+.tl-bookmark__copy_container:has(.tl-bookmark__link:only-child) {
+	justify-content: center;
+}
+
 .tl-bookmark__heading,
 .tl-bookmark__description,
 .tl-bookmark__link {
@@ -1353,7 +1357,7 @@ input,
 	line-clamp: 3;
 	text-overflow: ellipsis;
 	display: -webkit-box;
-	color: var(--tl-color-text-2);
+	color: var(--tl-color-text-1);
 	margin: var(--tl-space-2) 0px;
 }
 
@@ -1365,11 +1369,12 @@ input,
 	font-size: 12px;
 	pointer-events: all;
 	display: flex;
-	color: var(--tl-color-text-2);
+	color: var(--tl-color-text-1);
 	align-items: center;
 	cursor: var(--tl-cursor-pointer);
 	width: fit-content;
 	max-width: 100%;
+	text-decoration: none;
 }
 
 .tl-bookmark__link > span {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "4.1.0-canary.8e597b345c40",
+  "version": "4.1.0-canary.95d46c96eb30",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -50,12 +50,12 @@
     "@tiptap/core": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
-    "@tldraw/state": "4.1.0-canary.8e597b345c40",
-    "@tldraw/state-react": "4.1.0-canary.8e597b345c40",
-    "@tldraw/store": "4.1.0-canary.8e597b345c40",
-    "@tldraw/tlschema": "4.1.0-canary.8e597b345c40",
-    "@tldraw/utils": "4.1.0-canary.8e597b345c40",
-    "@tldraw/validate": "4.1.0-canary.8e597b345c40",
+    "@tldraw/state": "4.1.0-canary.95d46c96eb30",
+    "@tldraw/state-react": "4.1.0-canary.95d46c96eb30",
+    "@tldraw/store": "4.1.0-canary.95d46c96eb30",
+    "@tldraw/tlschema": "4.1.0-canary.95d46c96eb30",
+    "@tldraw/utils": "4.1.0-canary.95d46c96eb30",
+    "@tldraw/validate": "4.1.0-canary.95d46c96eb30",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",

package/src/index.ts

@@ -331,7 +331,6 @@ export {
 	type LicenseFromKeyResult,
 	type LicenseInfo,
 	type LicenseState,
-	type TestEnvironment,
 	type ValidLicenseKeyResult,
 } from './lib/license/LicenseManager'
 export { LICENSE_TIMEOUT } from './lib/license/LicenseProvider'

package/src/lib/editor/Editor.ts

@@ -69,6 +69,7 @@ import {
 	JsonObject,
 	PerformanceTracker,
 	Result,
+	ZERO_INDEX_KEY,
 	annotateError,
 	assert,
 	assertExists,
@@ -2019,7 +2020,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	/**
-	 * @internal
+	 * Get the page bounds of all the provided shapes.
+	 *
+	 * @public
 	 */
 	getShapesPageBounds(shapeIds: TLShapeId[]): Box | null {
 		const bounds = compact(shapeIds.map((id) => this.getShapePageBounds(id)))
@@ -5661,7 +5664,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const children = this._parentIdsToChildIds.get()[parentId]
 
 		if (!children || children.length === 0) {
-			return 'a1' as IndexKey
+			return getIndexAbove(ZERO_INDEX_KEY)
 		}
 		const shape = this.getShape(children[children.length - 1])!
 		return getIndexAbove(shape.index)

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -328,6 +328,16 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 */
 	shouldClipChild?(child: TLShape): boolean
 
+	/**
+	 * Whether a specific shape should hide in the minimap.
+	 *
+	 * If not defined, the default behavior is to show all shapes in the minimap.
+	 *
+	 * @returns boolean indicating if this shape should hide in the minimap
+	 * @public
+	 */
+	hideInMinimap?(_shape: Shape): boolean
+
 	/**
 	 * Whether the shape should hide its resize handles when selected.
 	 *

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

@@ -36,13 +36,15 @@ describe('LicenseManager', () => {
 	let licenseManager: LicenseManager
 
 	beforeAll(() => {
+		process.env.NODE_ENV = 'production'
 		return new Promise((resolve) => {
 			generateKeyPair().then((kp) => {
 				keyPair = kp
-				licenseManager = new LicenseManager('', keyPair.publicKey, 'production')
+				licenseManager = new LicenseManager('', keyPair.publicKey)
 				resolve(void 0)
 			})
 		})
+		process.env.NODE_ENV = 'test'
 	})
 
 	beforeEach(() => {
@@ -58,7 +60,7 @@ describe('LicenseManager', () => {
 			expect(result).toMatchObject({ isLicenseParseable: false, reason: 'no-key-provided' })
 		})
 
-		it('Signals that it is development mode when appropriate', async () => {
+		it('Signals that it is development mode when localhost', async () => {
 			const schemes = ['http', 'https']
 			for (const scheme of schemes) {
 				// @ts-ignore
@@ -66,7 +68,7 @@ describe('LicenseManager', () => {
 				// @ts-ignore
 				window.location = new URL(`${scheme}://localhost:3000`)
 
-				const testEnvLicenseManager = new LicenseManager('', keyPair.publicKey, 'development')
+				const testEnvLicenseManager = new LicenseManager('', keyPair.publicKey)
 				const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
 				const result = await testEnvLicenseManager.getLicenseFromKey(licenseKey)
 				expect(result).toMatchObject({
@@ -77,6 +79,66 @@ describe('LicenseManager', () => {
 			}
 		})
 
+		it('Signals that it is development mode when NODE_ENV is not production', async () => {
+			process.env.NODE_ENV = 'development'
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL(`https://www.example.com`)
+
+			const testEnvLicenseManager = new LicenseManager('', keyPair.publicKey)
+			const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+			const result = await testEnvLicenseManager.getLicenseFromKey(licenseKey)
+			expect(result).toMatchObject({
+				isLicenseParseable: true,
+				isDomainValid: true,
+				isDevelopment: true,
+			})
+			const licenseState = testEnvLicenseManager.state.get()
+			expect(licenseState).toBe('unlicensed')
+			process.env.NODE_ENV = 'test'
+		})
+
+		it('Signals that it is development mode when NODE_ENV is "test"', async () => {
+			process.env.NODE_ENV = 'test'
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL(`https://www.example.com`)
+
+			const testEnvLicenseManager = new LicenseManager('', keyPair.publicKey)
+			const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+			const result = await testEnvLicenseManager.getLicenseFromKey(licenseKey)
+			expect(result).toMatchObject({
+				isLicenseParseable: true,
+				isDomainValid: true,
+				isDevelopment: true,
+			})
+			const licenseState = testEnvLicenseManager.state.get()
+			expect(licenseState).toBe('unlicensed')
+			process.env.NODE_ENV = 'test'
+		})
+
+		it('Signals that it is not development mode when NODE_ENV is production', async () => {
+			process.env.NODE_ENV = 'production'
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL(`https://www.example.com`)
+
+			const testEnvLicenseManager = new LicenseManager('', keyPair.publicKey)
+			const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+			const result = await testEnvLicenseManager.getLicenseFromKey(licenseKey)
+			expect(result).toMatchObject({
+				isLicenseParseable: true,
+				isDomainValid: true,
+				isDevelopment: false,
+			})
+			const licenseState = testEnvLicenseManager.state.get()
+			expect(licenseState).toBe('unlicensed-production')
+			process.env.NODE_ENV = 'test'
+		})
+
 		it('Cleanses out valid keys that accidentally have zero-width characters or newlines', async () => {
 			const cleanLicenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
 			const dirtyLicenseKey = cleanLicenseKey + '\u200B\u200D\uFEFF\n\r'
@@ -85,10 +147,12 @@ describe('LicenseManager', () => {
 		})
 
 		it('Fails if garbage key provided', async () => {
-			const badPublicKeyLicenseManager = new LicenseManager('', 'badpublickey', 'production')
+			process.env.NODE_ENV = 'production'
+			const badPublicKeyLicenseManager = new LicenseManager('', 'badpublickey')
 			const invalidLicenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
 			const result = await badPublicKeyLicenseManager.getLicenseFromKey(invalidLicenseKey)
 			expect(result).toMatchObject({ isLicenseParseable: false, reason: 'invalid-license-key' })
+			process.env.NODE_ENV = 'test'
 		})
 
 		it('Fails if non-JSON parseable message is provided', async () => {

package/src/lib/license/LicenseManager.ts

@@ -87,9 +87,6 @@ export interface ValidLicenseKeyResult {
 	daysSinceExpiry: number
 }
 
-/** @internal */
-export type TestEnvironment = 'development' | 'production'
-
 /** @internal */
 export type TrackType = 'unlicensed' | 'with_watermark' | 'evaluation' | null
 
@@ -103,13 +100,9 @@ export class LicenseManager {
 	state = atom<LicenseState>('license state', 'pending')
 	public verbose = true
 
-	constructor(
-		licenseKey: string | undefined,
-		testPublicKey?: string,
-		testEnvironment?: TestEnvironment
-	) {
+	constructor(licenseKey: string | undefined, testPublicKey?: string) {
 		this.isTest = process.env.NODE_ENV === 'test'
-		this.isDevelopment = this.getIsDevelopment(testEnvironment)
+		this.isDevelopment = this.getIsDevelopment()
 		this.publicKey = testPublicKey || this.publicKey
 		this.isCryptoAvailable = !!crypto.subtle
 
@@ -131,14 +124,12 @@ export class LicenseManager {
 			})
 	}
 
-	private getIsDevelopment(testEnvironment?: TestEnvironment) {
-		if (testEnvironment === 'development') return true
-		if (testEnvironment === 'production') return false
-
+	private getIsDevelopment() {
 		// If we are using https on a non-localhost domain we assume it's a production env and a development one otherwise
 		return (
 			!['https:', 'vscode-webview:'].includes(window.location.protocol) ||
-			window.location.hostname === 'localhost'
+			window.location.hostname === 'localhost' ||
+			process.env.NODE_ENV !== 'production'
 		)
 	}
 
@@ -181,6 +172,9 @@ export class LicenseManager {
 		if ('license' in result) {
 			url.searchParams.set('license_id', result.license.id)
 		}
+		if (process.env.NODE_ENV) {
+			url.searchParams.set('environment', process.env.NODE_ENV)
+		}
 
 		// eslint-disable-next-line no-restricted-globals
 		fetch(url.toString())
@@ -415,22 +409,27 @@ export class LicenseManager {
 		// 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) {
-			this.outputMessages([
-				'This tldraw license contains some unknown flags.',
-				'You may want to update tldraw packages to a newer version to get access to new functionality.',
-			])
+			this.outputMessages(
+				[
+					'Warning: This tldraw license contains some unknown flags.',
+					'This will still work, however, you may want to update tldraw packages to a newer version to get access to new functionality.',
+				],
+				'warning'
+			)
 		}
 	}
 
-	private outputMessages(messages: string[]) {
+	private outputMessages(messages: string[], type: 'warning' | 'error' = 'error') {
 		if (this.isTest) return
 		if (this.verbose) {
 			this.outputDelimiter()
 			for (const message of messages) {
+				const color = type === 'warning' ? 'orange' : 'crimson'
+				const bgColor = type === 'warning' ? 'orange' : 'crimson'
 				// eslint-disable-next-line no-console
 				console.log(
 					`%c${message}`,
-					`color: white; background: crimson; padding: 2px; border-radius: 3px;`
+					`color: ${color}; background: ${bgColor}; padding: 2px; border-radius: 3px;`
 				)
 			}
 			this.outputDelimiter()

package/src/lib/license/Watermark.tsx

@@ -208,22 +208,22 @@ To remove the watermark, please purchase a license at tldraw.dev.
 }
 
 @media (hover: hover) {
-	.${className}[data-licensed='false'] > button {
+	.${className} > button {
 		pointer-events: none;
 	}
 
-	.${className}[data-licensed='false']:hover {
+	.${className}:hover {
 		background-color: var(--tl-color-background);
 		transition: background-color 0.2s ease-in-out;
 		transition-delay: 0.32s;
 	}
 
-	.${className}[data-licensed='false']:hover > button {
+	.${className}:hover > button {
 		animation: ${className}_delayed_link 0.2s forwards ease-in-out;
 		animation-delay: 0.32s;
 	}
 
-	.${className}[data-licensed='false'] > button:focus-visible {
+	.${className} > button:focus-visible {
 		opacity: 1;
 	}
 }

package/src/lib/primitives/geometry/Geometry2d.ts

@@ -120,6 +120,8 @@ export abstract class Geometry2d {
 	distanceToLineSegment(A: VecLike, B: VecLike, filters?: Geometry2dFilters) {
 		if (Vec.Equals(A, B)) return this.distanceToPoint(A, false, filters)
 		const { vertices } = this
+		if (vertices.length === 0) throw Error('nearest point not found')
+		if (vertices.length === 1) return Vec.Dist(A, vertices[0])
 		let nearest: Vec | undefined
 		let dist = Infinity
 		let d: number, p: Vec, q: Vec
@@ -175,6 +177,8 @@ export abstract class Geometry2d {
 	interpolateAlongEdge(t: number, _filters?: Geometry2dFilters): Vec {
 		const { vertices } = this
 
+		if (vertices.length === 0) return new Vec(0, 0)
+		if (vertices.length === 1) return vertices[0]
 		if (t <= 0) return vertices[0]
 
 		const distanceToTravel = t * this.length
@@ -209,6 +213,8 @@ export abstract class Geometry2d {
 		let closestDistance = Infinity
 		let distanceTraveled = 0
 
+		if (vertices.length === 0 || vertices.length === 1) return 0
+
 		for (let i = 0; i < (this.isClosed ? vertices.length : vertices.length - 1); i++) {
 			const curr = vertices[i]
 			const next = vertices[(i + 1) % vertices.length]

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 = '4.1.0-canary.8e597b345c40'
+export const version = '4.1.0-canary.95d46c96eb30'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-09-18T14:54:05.125Z',
-	patch: '2025-09-18T14:54:05.125Z',
+	minor: '2025-10-07T11:02:50.479Z',
+	patch: '2025-10-07T11:02:50.479Z',
 }