@tldraw/editor 5.2.0-next.e2b8d10bf10e → 5.2.0

package/src/lib/editor/managers/TickManager/TickManager.test.ts

@@ -1,5 +1,4 @@
 import { Mock, Mocked, vi } from 'vitest'
-import { Vec } from '../../../primitives/Vec'
 import { Editor } from '../../Editor'
 import { TickManager } from './TickManager'
 
@@ -21,17 +20,6 @@ describe('TickManager', () => {
 	let tickManager: TickManager
 	let mockEmit: Mock
 	let mockDisposablesAdd: Mock
-	let mockInputs: {
-		_currentScreenPoint: Vec
-		getCurrentScreenPoint(): Vec
-		currentScreenPoint: Vec
-		setCurrentScreenPoint(value: Vec): void
-		_pointerVelocity: Vec
-		getPointerVelocity(): Vec
-		pointerVelocity: Vec
-		setPointerVelocity(value: Vec): void
-		updatePointerVelocity(elapsed: number): void
-	}
 
 	beforeEach(() => {
 		vi.clearAllMocks()
@@ -52,39 +40,11 @@ describe('TickManager', () => {
 		mockEmit = vi.fn()
 		mockDisposablesAdd = vi.fn()
 
-		// Create a mock inputs object with getters and setters
-		mockInputs = {
-			_currentScreenPoint: new Vec(100, 100),
-			getCurrentScreenPoint() {
-				return this._currentScreenPoint
-			},
-			get currentScreenPoint() {
-				return this.getCurrentScreenPoint()
-			},
-			setCurrentScreenPoint(value: Vec) {
-				this._currentScreenPoint = value
-			},
-			_pointerVelocity: new Vec(0, 0),
-			getPointerVelocity() {
-				return this._pointerVelocity
-			},
-			get pointerVelocity() {
-				return this.getPointerVelocity()
-			},
-			setPointerVelocity(value: Vec) {
-				this._pointerVelocity = value
-			},
-			updatePointerVelocity(_elapsed: number) {
-				// Mock implementation - no-op for tests
-			},
-		}
-
 		editor = {
 			emit: mockEmit,
 			disposables: {
 				add: mockDisposablesAdd,
 			},
-			inputs: mockInputs as unknown as Editor['inputs'],
 		} as unknown as Mocked<Editor>
 
 		tickManager = new TickManager(editor)

package/src/lib/editor/managers/TickManager/TickManager.ts

@@ -40,7 +40,6 @@ export class TickManager {
 		const elapsed = now - this.now
 		this.now = now
 
-		this.editor.inputs.updatePointerVelocity(elapsed)
 		this.editor.emit('frame', elapsed)
 		this.editor.emit('tick', elapsed)
 		this.cancelRaf = throttleToNextFrame(this.tick)

package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.test.ts

@@ -1,4 +1,5 @@
 import { atom } from '@tldraw/state'
+import { createUserId } from '@tldraw/tlschema'
 import { Mocked, vi } from 'vitest'
 import { TLCurrentUser } from '../../../config/createTLCurrentUser'
 import { TLUserPreferences, defaultUserPreferences } from '../../../config/TLUserPreferences'
@@ -296,8 +297,17 @@ describe('UserPreferencesManager', () => {
 			userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
 		})
 
-		describe('getId', () => {
-			it('should return user id', () => {
+		describe('getExternalId / getRecordId', () => {
+			it('should return the raw external user id', () => {
+				expect(userPreferencesManager.getExternalId()).toBe(mockUserPreferences.id)
+			})
+
+			it('should return the prefixed record id', () => {
+				expect(userPreferencesManager.getRecordId()).toBe(createUserId(mockUserPreferences.id))
+			})
+
+			it('getId() still returns the external id', () => {
+				// eslint-disable-next-line @typescript-eslint/no-deprecated
 				expect(userPreferencesManager.getId()).toBe(mockUserPreferences.id)
 			})
 		})

package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.ts

@@ -1,4 +1,5 @@
 import { atom, computed } from '@tldraw/state'
+import { createUserId, TLUserId } from '@tldraw/tlschema'
 import { TLCurrentUser } from '../../../config/createTLCurrentUser'
 import { TLUserPreferences, defaultUserPreferences } from '../../../config/TLUserPreferences'
 import { getGlobalWindow } from '../../../utils/dom'
@@ -39,7 +40,7 @@ export class UserPreferencesManager {
 	}
 	@computed getUserPreferences() {
 		return {
-			id: this.getId(),
+			id: this.getExternalId(),
 			name: this.getName(),
 			locale: this.getLocale(),
 			color: this.getColor(),
@@ -89,10 +90,34 @@ export class UserPreferencesManager {
 		)
 	}
 
-	@computed getId() {
+	/**
+	 * The current user's raw, app-provided id — the value set in the user's
+	 * {@link @tldraw/editor#TLUserPreferences}. Use this when you need the id your application
+	 * assigned to the user. To compare against or look up store records, use
+	 * {@link UserPreferencesManager.getRecordId} instead.
+	 */
+	@computed getExternalId(): string {
 		return this.user.userPreferences.get().id
 	}
 
+	/**
+	 * @deprecated Use {@link UserPreferencesManager.getExternalId} for the raw app-provided id, or
+	 * {@link UserPreferencesManager.getRecordId} for the prefixed `TLUserId` record id.
+	 */
+	@computed getId() {
+		return this.getExternalId()
+	}
+
+	/**
+	 * The current user's id as a tldraw {@link @tldraw/tlschema#TLUserId} record id (prefixed
+	 * with `user:`). Use this when comparing against or looking up store records, such as a
+	 * presence record's `userId` or `followingUserId`. For the raw, app-provided id, use
+	 * {@link UserPreferencesManager.getExternalId}.
+	 */
+	@computed getRecordId(): TLUserId {
+		return createUserId(this.getExternalId())
+	}
+
 	@computed getName() {
 		return this.user.userPreferences.get().name?.trim() ?? defaultUserPreferences.name
 	}

package/src/lib/editor/overlays/strokeShapeIndicators.ts

@@ -0,0 +1,86 @@
+import { createComputedCache } from '@tldraw/store'
+import { TLShape, TLShapeId } from '@tldraw/tlschema'
+import type { Editor } from '../Editor'
+
+const indicatorPathCache = createComputedCache(
+	'shapeIndicatorPath',
+	(editor: Editor, shape: TLShape) => {
+		const util = editor.getShapeUtil(shape)
+		return util.getIndicatorPath(shape)
+	},
+	{
+		areRecordsEqual(a, b) {
+			return a.props === b.props
+		},
+	}
+)
+
+/**
+ * Combine every batchable shape indicator into a single page-space `Path2D` and
+ * emit one stroke call. Shapes whose indicator needs an evenodd clip (e.g.
+ * arrows with labels or complex arrowheads) can't be batched — they still
+ * stroke individually inside a save/restore with `ctx.clip` applied.
+ *
+ * Shared by any overlay util that paints shape indicators (e.g. collaborator
+ * selections).
+ *
+ * @public
+ */
+export function strokeShapeIndicators(
+	editor: Editor,
+	ctx: CanvasRenderingContext2D,
+	shapeIds: TLShapeId[]
+): void {
+	if (shapeIds.length === 0) return
+
+	const batched = new Path2D()
+
+	for (const shapeId of shapeIds) {
+		const shape = editor.getShape(shapeId)
+		if (!shape || shape.isLocked) continue
+
+		const pageTransform = editor.getShapePageTransform(shape)
+		if (!pageTransform) continue
+
+		const indicatorPath = indicatorPathCache.get(editor, shape.id)
+		if (!indicatorPath) continue
+
+		if (indicatorPath instanceof Path2D) {
+			batched.addPath(indicatorPath, pageTransform)
+			continue
+		}
+
+		const { path, clipPath, additionalPaths } = indicatorPath
+
+		if (!clipPath) {
+			batched.addPath(path, pageTransform)
+			if (additionalPaths) {
+				for (const p of additionalPaths) batched.addPath(p, pageTransform)
+			}
+			continue
+		}
+
+		// Clipped case: fall back to an individual stroke. Rare (arrows with
+		// labels / complex arrowheads), so the extra save/restore/stroke
+		// pair per such shape isn't worth batching away.
+		ctx.save()
+		ctx.transform(
+			pageTransform.a,
+			pageTransform.b,
+			pageTransform.c,
+			pageTransform.d,
+			pageTransform.e,
+			pageTransform.f
+		)
+		ctx.save()
+		ctx.clip(clipPath, 'evenodd')
+		ctx.stroke(path)
+		ctx.restore()
+		if (additionalPaths) {
+			for (const p of additionalPaths) ctx.stroke(p)
+		}
+		ctx.restore()
+	}
+
+	ctx.stroke(batched)
+}

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

@@ -982,6 +982,47 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 * @public
 	 */
 	onEditEnd?(shape: Shape): void
+
+	/**
+	 * Provide an app-owned element to be rendered inside the shape, alongside the output of
+	 * {@link ShapeUtil.component}. While the shape remains mounted, tldraw guarantees the
+	 * element keeps the same DOM position: it is never unmounted, recreated, or relocated by
+	 * reordering, reparenting, culling, or re-renders. When adopting the element, tldraw uses
+	 * `Node.moveBefore` where available so stateful content like cross-origin iframes keeps
+	 * its state across the move, falling back to `appendChild` elsewhere.
+	 *
+	 * Pair this with {@link ShapeUtil.onReleaseAppOwnedElement} to reclaim the element before
+	 * the shape or editor unmounts.
+	 *
+	 * This is called once per shape mount, not on every prop change, so the adopted element is
+	 * not refreshed when the shape's props change. If the element's content depends on props,
+	 * return a stable element and mutate it in place (for example from {@link ShapeUtil.component}
+	 * or an effect) rather than returning a different element.
+	 *
+	 * @param shape - The shape.
+	 * @returns The element to adopt, or null to render nothing.
+	 * @public
+	 */
+	getAppOwnedElement?(shape: Shape): HTMLElement | null
+
+	/**
+	 * A callback called before the shape's app-owned element slot is destroyed: when the shape
+	 * unmounts (for example when it is deleted or the current page changes) or when the whole
+	 * editor unmounts, including error teardown. The slot is still connected to the document
+	 * when this is called, so the app can move the element to another connected parent with
+	 * `Node.moveBefore` to preserve its state. An element left in the slot is destroyed along
+	 * with it.
+	 *
+	 * This is not only a "shape deleted" signal: it also fires on page changes, editor unmount,
+	 * and (in dev under React StrictMode) on the throwaway mount/unmount cycle while the shape
+	 * still exists. Make it safe to call when the shape is still present, and check the store
+	 * (`this.editor.getShape(shape.id)`) if you need to distinguish deletion from a remount.
+	 *
+	 * @param shape - The shape.
+	 * @param element - The element returned by {@link ShapeUtil.getAppOwnedElement}.
+	 * @public
+	 */
+	onReleaseAppOwnedElement?(shape: Shape, element: HTMLElement): void
 }
 
 /**

package/src/lib/editor/tools/BaseBoxShapeTool/children/Pointing.ts

@@ -4,6 +4,7 @@ import { Vec } from '../../../../primitives/Vec'
 import type { Editor } from '../../../Editor'
 import { TLBaseBoxShape } from '../../../shapes/BaseBoxShapeUtil'
 import { TLPointerEventInfo } from '../../../types/event-types'
+import { cancelShapeCreationOnLongPress } from '../../cancelShapeCreationOnLongPress'
 import { StateNode } from '../../StateNode'
 import type { BaseBoxShapeTool } from '../BaseBoxShapeTool'
 
@@ -65,6 +66,10 @@ export class Pointing extends StateNode {
 		this.complete()
 	}
 
+	override onLongPress() {
+		cancelShapeCreationOnLongPress(this.editor, () => this.cancel())
+	}
+
 	override onCancel() {
 		this.cancel()
 	}

package/src/lib/editor/tools/cancelShapeCreationOnLongPress.ts

@@ -0,0 +1,31 @@
+import type { Editor } from '../Editor'
+
+/**
+ * Shared handler for a long-press in a discrete shape-creation tool's pointing
+ * state (geo, note, line, text, arrow, frame). On a coarse pointer this cancels
+ * any pending creation so the long-press leaves no shape behind (issue #8277).
+ * It does not open a context menu — that is a select-tool surface, reached on
+ * touch only from the select tool, and on desktop from a right-click (which the
+ * editor routes through the select tool).
+ *
+ * Gated on `isCoarsePointer`: on a fine pointer (mouse) the long-press timer
+ * powers the deliberate "pause before drag to start a precise arrow" gesture,
+ * which we must not disturb. The bug only manifests on coarse pointers, because
+ * that is also where the browser fires `contextmenu` at the long-press mark.
+ *
+ * The `cancelPendingCreation` callback is the tool's own cleanup — it knows
+ * whether it needs to `bailToMark` a shape it created early or simply transition
+ * back to idle. Continuous-gesture tools (draw, highlight, eraser, laser) are
+ * excluded: their press is their own action, so they handle (or ignore) the
+ * long-press themselves.
+ *
+ * @internal
+ */
+export function cancelShapeCreationOnLongPress(
+	editor: Editor,
+	cancelPendingCreation: () => void
+): void {
+	if (!editor.getInstanceState().isCoarsePointer) return
+
+	cancelPendingCreation()
+}

package/src/lib/editor/types/event-types.ts

@@ -63,6 +63,13 @@ export type TLPointerEventInfo = TLBaseEventInfo & {
 	pointerId: number
 	button: number
 	isPen: boolean
+	/**
+	 * Whether this pen event appears to be direct manipulation on the display (e.g. Apple Pencil on
+	 * an iPad or a Surface Pen on a touchscreen) rather than indirect input from a desktop graphics
+	 * tablet (e.g. a Wacom Intuos). Only direct-display pens should auto-enable pen mode. Drawing and
+	 * pressure behavior is driven by `isPen` and applies to all pens regardless of this flag.
+	 */
+	isPenDirect?: boolean
 } & TLPointerEventTarget
 
 /** @public */

package/src/lib/globals/environment.ts

@@ -17,6 +17,10 @@ const tlenv = {
 	isWebview: false,
 	isDarwin: false,
 	hasCanvasSupport: false,
+	// Whether the device has a touch screen (an integrated coarse pointer, e.g. an iPad or a
+	// touchscreen laptop). Unlike `isCoarsePointer`, this reflects the device's hardware rather than
+	// the pointer currently in use, so it stays stable when a pen or mouse is used.
+	isTouchDevice: false,
 }
 
 let isForcedFinePointer = false
@@ -32,6 +36,9 @@ if (typeof window !== 'undefined') {
 	}
 	tlenv.hasCanvasSupport = 'Promise' in window && 'HTMLCanvasElement' in window
 	isForcedFinePointer = tlenv.isFirefox && !tlenv.isAndroid && !tlenv.isIos
+	tlenv.isTouchDevice =
+		('navigator' in window && window.navigator.maxTouchPoints > 0) ||
+		(typeof window.matchMedia === 'function' && window.matchMedia('(any-pointer: coarse)').matches)
 }
 
 /**

package/src/lib/hooks/EditorComponentsContext.tsx

@@ -2,7 +2,6 @@ import { ComponentType, RefAttributes, createContext, useContext } from 'react'
 import type { TLCanvasComponentProps } from '../components/default-components/DefaultCanvas'
 import type { TLErrorFallbackComponent } from '../components/default-components/DefaultErrorFallback'
 import type { TLGridProps } from '../components/default-components/DefaultGrid'
-import type { TLSelectionBackgroundProps } from '../components/default-components/DefaultSelectionBackground'
 import type { TLShapeErrorFallbackComponent } from '../components/default-components/DefaultShapeErrorFallback'
 import type { TLShapeWrapperProps } from '../components/default-components/DefaultShapeWrapper'
 
@@ -14,7 +13,6 @@ export interface TLEditorComponents {
 	InFrontOfTheCanvas?: ComponentType | null
 	LoadingScreen?: ComponentType | null
 	OnTheCanvas?: ComponentType | null
-	SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null
 	ShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null
 	Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null
 	SvgDefs?: ComponentType | null

package/src/lib/hooks/useCanvasEvents.ts

@@ -8,6 +8,7 @@ import {
 	setPointerCapture,
 } from '../utils/dom'
 import { getPointerInfo } from '../utils/getPointerInfo'
+import { getPointerEventButton, isDirectDisplayPen, isSecondaryClickEvent } from '../utils/pointer'
 import { useEditor } from './useEditor'
 
 export function useCanvasEvents() {
@@ -17,12 +18,16 @@ export function useCanvasEvents() {
 
 	const events = useMemo(
 		function canvasEvents() {
+			let isSecondaryClickPointerDown = false
+
 			function onPointerDown(e: React.PointerEvent) {
 				if (editor.wasEventAlreadyHandled(e)) return
+				const button = getPointerEventButton(e)
+				isSecondaryClickPointerDown = button === 2
 
 				// With right-click panning disabled, fire right_click on press and let the
 				// native contextmenu through so the menu opens at the pointer-down location.
-				if (e.button === 2 && !editor.options.rightClickPanning) {
+				if (button === 2 && !editor.options.rightClickPanning) {
 					editor.dispatch({
 						type: 'pointer',
 						target: 'canvas',
@@ -32,7 +37,11 @@ export function useCanvasEvents() {
 					return
 				}
 
-				if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return
+				if (button !== 0 && button !== 1 && button !== 2 && button !== 5) return
+
+				// Detect direct-display pen input (Apple Pencil, Surface Pen on a touchscreen) so we
+				// only auto-enable pen mode for it, not for an indirect desktop tablet stylus.
+				const isPenDirect = isDirectDisplayPen(e)
 
 				setPointerCapture(e.currentTarget, e)
 
@@ -41,17 +50,19 @@ export function useCanvasEvents() {
 					target: 'canvas',
 					name: 'pointer_down',
 					...getPointerInfo(editor, e),
+					isPenDirect,
 				})
 			}
 
 			function onPointerUp(e: React.PointerEvent) {
 				if (editor.wasEventAlreadyHandled(e)) return
-				if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return
+				const button = isSecondaryClickPointerDown ? 2 : getPointerEventButton(e)
+				if (button !== 0 && button !== 1 && button !== 2 && button !== 5) return
 
 				const rightClickPanning = editor.options.rightClickPanning
 				// Check before dispatch (which resets isPanning)
 				const wasRightClickPanning =
-					rightClickPanning && e.button === 2 && editor.inputs.getIsPanning()
+					rightClickPanning && button === 2 && editor.inputs.getIsPanning()
 
 				releasePointerCapture(e.currentTarget, e)
 
@@ -60,10 +71,11 @@ export function useCanvasEvents() {
 					target: 'canvas',
 					name: 'pointer_up',
 					...getPointerInfo(editor, e),
+					button,
 				})
 
 				// Static right-click: fire contextmenu at the pointer-up location
-				if (rightClickPanning && e.button === 2 && !wasRightClickPanning) {
+				if (rightClickPanning && button === 2 && !wasRightClickPanning) {
 					const contextMenuEvent = new PointerEvent('contextmenu', {
 						bubbles: true,
 						clientX: e.clientX,
@@ -76,6 +88,7 @@ export function useCanvasEvents() {
 					})
 					e.currentTarget.dispatchEvent(contextMenuEvent)
 				}
+				isSecondaryClickPointerDown = false
 			}
 
 			function onPointerEnter(e: React.PointerEvent) {
@@ -171,16 +184,15 @@ export function useCanvasEvents() {
 				// Synthetic events — our own dispatch from onPointerUp, or tests using
 				// fireEvent.contextMenu — pass through so Radix can open the menu.
 				if (!e.nativeEvent.isTrusted) return
-				// Only suppress the native browser contextmenu when it follows a real
-				// right-click (button=2 with no ctrl modifier). For those, our pointer
-				// handling has already decided what to do (either we'll dispatch a
-				// synthetic contextmenu on pointerup to open the menu at the release
-				// position, or we panned and don't want a menu at all).
+				// Only suppress the native browser contextmenu when it follows a
+				// secondary click. For those, our pointer handling has already
+				// decided what to do (either we'll dispatch a synthetic contextmenu on
+				// pointerup to open the menu at the release position, or we panned and
+				// don't want a menu at all).
 				//
 				// Other contextmenu sources must reach Radix so the menu opens:
-				// - ctrl+click on macOS (button=0, or button=2 with ctrlKey=true)
 				// - long-press on touch devices (button=0, pointerType=touch)
-				if (e.button !== 2 || e.ctrlKey) return
+				if (!isSecondaryClickEvent(e)) return
 				preventDefault(e)
 			}
 

package/src/lib/hooks/useEditorComponents.tsx

@@ -33,7 +33,6 @@ export function EditorComponentsProvider({
 			InFrontOfTheCanvas: null,
 			LoadingScreen: DefaultLoadingScreen,
 			OnTheCanvas: null,
-			SelectionBackground: null,
 			ShapeWrapper: DefaultShapeWrapper,
 			Spinner: DefaultSpinner,
 			SvgDefs: DefaultSvgDefs,

package/src/lib/hooks/usePresence.ts

@@ -1,5 +1,5 @@
 import { useValue } from '@tldraw/state-react'
-import { TLInstancePresence } from '@tldraw/tlschema'
+import { TLInstancePresence, TLUserId } from '@tldraw/tlschema'
 import { useEditor } from './useEditor'
 
 // TODO: maybe move this to a computed property on the App class?
@@ -7,7 +7,7 @@ import { useEditor } from './useEditor'
  * @returns The latest presence of the user matching userId
  * @public
  */
-export function usePresence(userId: string): TLInstancePresence | null {
+export function usePresence(userId: TLUserId): TLInstancePresence | null {
 	const editor = useEditor()
 
 	const latestPresence = useValue(

package/src/lib/hooks/useScreenBounds.ts

@@ -11,6 +11,9 @@ export function useScreenBounds(ref: React.RefObject<HTMLElement | null>) {
 		const updateBounds = throttle(
 			() => {
 				if (!ref.current) return
+				// If the container's document has been torn down (e.g. an iframe
+				// being removed), there's nothing to measure — bail.
+				if (!ref.current.ownerDocument.body) return
 				editor.updateViewportScreenBounds(ref.current)
 			},
 			200,

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

@@ -60,22 +60,30 @@ describe('LicenseManager', () => {
 			expect(result).toMatchObject({ isLicenseParseable: false, reason: 'no-key-provided' })
 		})
 
-		it('Signals that it is development mode when localhost', async () => {
-			const schemes = ['http', 'https']
-			for (const scheme of schemes) {
-				// @ts-ignore
-				delete window.location
-				// @ts-ignore
-				window.location = new URL(`${scheme}://localhost:3000`)
-
-				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: false,
-					isDevelopment: true,
-				})
+		it('Signals that it is development mode for loopback hosts', async () => {
+			process.env.NODE_ENV = 'production'
+			try {
+				const schemes = ['http', 'https']
+				const hosts = ['localhost', '127.0.0.1', '127.0.0.2', '[::1]']
+				for (const scheme of schemes) {
+					for (const host of hosts) {
+						// @ts-ignore
+						delete window.location
+						// @ts-ignore
+						window.location = new URL(`${scheme}://${host}:3000`)
+
+						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: false,
+							isDevelopment: true,
+						})
+					}
+				}
+			} finally {
+				process.env.NODE_ENV = 'test'
 			}
 		})
 

package/src/lib/license/LicenseManager.ts

@@ -125,14 +125,20 @@ export class LicenseManager {
 	}
 
 	private getIsDevelopment() {
-		// If we are using https on a non-localhost domain we assume it's a production env and a development one otherwise
+		// If we are using https on a non-loopback 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' ||
+			this.isLoopbackHost(window.location.hostname) ||
 			process.env.NODE_ENV !== 'production'
 		)
 	}
 
+	private isLoopbackHost(hostname: string) {
+		// localhost, IPv4 loopback (127.0.0.0/8) and IPv6 loopback (::1) are all local development hosts
+		const host = hostname.toLowerCase().replace(/^\[|\]$/g, '')
+		return host === 'localhost' || host === '::1' || /^127(?:\.\d{1,3}){3}$/.test(host)
+	}
+
 	private getTrackType(result: LicenseFromKeyResult, licenseState: LicenseState): TrackType {
 		// Track watermark for unlicensed production deployments
 		if (licenseState === 'unlicensed-production') {

package/src/lib/primitives/Vec.ts

@@ -1,5 +1,8 @@
 import { VecModel } from '@tldraw/tlschema'
 import { EASINGS } from './easings'
+
+const { easeInQuad, easeInOutQuad } = EASINGS
+
 function clamp(n: number, min: number, max?: number): number {
 	return Math.max(min, typeof max !== 'undefined' ? Math.min(n, max) : n)
 }
@@ -634,13 +637,13 @@ export class Vec {
 	 * @param steps - The number of points to return.
 	 * @param ease - The easing to use.
 	 */
-	static PointsBetween(A: VecModel, B: VecModel, steps = 6, ease = EASINGS.easeInQuad): Vec[] {
+	static PointsBetween(A: VecModel, B: VecModel, steps = 6, ease = easeInQuad): Vec[] {
 		const results: Vec[] = []
 
 		for (let i = 0; i < steps; i++) {
 			const t = ease(i / (steps - 1))
 			const point = Vec.Lrp(A, B, t)
-			point.z = Math.min(1, 0.5 + Math.abs(0.5 - EASINGS.easeInOutQuad(t)) * 0.65)
+			point.z = Math.min(1, 0.5 + Math.abs(0.5 - easeInOutQuad(t)) * 0.65)
 			results.push(point)
 		}