@tldraw/editor 3.16.0-canary.e5e61b17cef3 → 3.16.0-canary.e618c2fbc95d

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

@@ -23,13 +23,14 @@ describe('UserPreferencesManager', () => {
 		locale: 'en',
 		animationSpeed: 1,
 		areKeyboardShortcutsEnabled: true,
-		showUiLabels: false,
+		enhancedA11yMode: false,
 		edgeScrollSpeed: 1,
 		colorScheme: 'light',
 		isSnapMode: false,
 		isWrapMode: false,
 		isDynamicSizeMode: false,
 		isPasteAtCursorMode: false,
+		inputMode: null,
 		...overrides,
 	})
 
@@ -227,12 +228,13 @@ describe('UserPreferencesManager', () => {
 				color: mockUserPreferences.color,
 				animationSpeed: mockUserPreferences.animationSpeed,
 				areKeyboardShortcutsEnabled: mockUserPreferences.areKeyboardShortcutsEnabled,
-				showUiLabels: mockUserPreferences.showUiLabels,
+				enhancedA11yMode: mockUserPreferences.enhancedA11yMode,
 				isSnapMode: mockUserPreferences.isSnapMode,
 				colorScheme: mockUserPreferences.colorScheme,
 				isDarkMode: false, // light mode
 				isWrapMode: mockUserPreferences.isWrapMode,
 				isDynamicResizeMode: mockUserPreferences.isDynamicSizeMode,
+				inputMode: mockUserPreferences.inputMode,
 			})
 		})
 
@@ -376,14 +378,18 @@ describe('UserPreferencesManager', () => {
 			})
 		})
 
-		describe('getShowUiLabels', () => {
-			it('should return user show ui labels setting', () => {
-				expect(userPreferencesManager.getShowUiLabels()).toBe(mockUserPreferences.showUiLabels)
+		describe('getEnhancedA11yMode', () => {
+			it('should return user enhanced a11y mode setting', () => {
+				expect(userPreferencesManager.getEnhancedA11yMode()).toBe(
+					mockUserPreferences.enhancedA11yMode
+				)
 			})
 
-			it('should return default show ui labels when null', () => {
-				userPreferencesAtom.set({ ...mockUserPreferences, showUiLabels: null })
-				expect(userPreferencesManager.getShowUiLabels()).toBe(defaultUserPreferences.showUiLabels)
+			it('should return default enhanced a11y mode when null', () => {
+				userPreferencesAtom.set({ ...mockUserPreferences, enhancedA11yMode: null })
+				expect(userPreferencesManager.getEnhancedA11yMode()).toBe(
+					defaultUserPreferences.enhancedA11yMode
+				)
 			})
 		})
 
@@ -453,6 +459,22 @@ describe('UserPreferencesManager', () => {
 				)
 			})
 		})
+
+		describe('getInputMode', () => {
+			it('should return user input mode setting', () => {
+				expect(userPreferencesManager.getInputMode()).toBe(null)
+			})
+
+			it('should return trackpad if input mode is trackpad', () => {
+				userPreferencesAtom.set({ ...mockUserPreferences, inputMode: 'trackpad' })
+				expect(userPreferencesManager.getInputMode()).toBe('trackpad')
+			})
+
+			it('should return mouse if input mode is mouse', () => {
+				userPreferencesAtom.set({ ...mockUserPreferences, inputMode: 'mouse' })
+				expect(userPreferencesManager.getInputMode()).toBe('mouse')
+			})
+		})
 	})
 
 	describe('reactive behavior', () => {

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

@@ -49,7 +49,8 @@ export class UserPreferencesManager {
 			isDarkMode: this.getIsDarkMode(),
 			isWrapMode: this.getIsWrapMode(),
 			isDynamicResizeMode: this.getIsDynamicResizeMode(),
-			showUiLabels: this.getShowUiLabels(),
+			enhancedA11yMode: this.getEnhancedA11yMode(),
+			inputMode: this.getInputMode(),
 		}
 	}
 
@@ -121,7 +122,13 @@ export class UserPreferencesManager {
 		)
 	}
 
-	@computed getShowUiLabels() {
-		return this.user.userPreferences.get().showUiLabels ?? defaultUserPreferences.showUiLabels
+	@computed getEnhancedA11yMode() {
+		return (
+			this.user.userPreferences.get().enhancedA11yMode ?? defaultUserPreferences.enhancedA11yMode
+		)
+	}
+
+	@computed getInputMode() {
+		return this.user.userPreferences.get().inputMode ?? defaultUserPreferences.inputMode
 	}
 }

package/src/lib/hooks/useCanvasEvents.ts

@@ -1,12 +1,7 @@
 import { useValue } from '@tldraw/state-react'
 import React, { useEffect, useMemo } from 'react'
 import { RIGHT_MOUSE_BUTTON } from '../constants'
-import {
-	preventDefault,
-	releasePointerCapture,
-	setPointerCapture,
-	stopEventPropagation,
-} from '../utils/dom'
+import { preventDefault, releasePointerCapture, setPointerCapture } from '../utils/dom'
 import { getPointerInfo } from '../utils/getPointerInfo'
 import { useEditor } from './useEditor'
 
@@ -17,14 +12,14 @@ export function useCanvasEvents() {
 	const events = useMemo(
 		function canvasEvents() {
 			function onPointerDown(e: React.PointerEvent) {
-				if ((e as any).isKilled) return
+				if (editor.wasEventAlreadyHandled(e)) return
 
 				if (e.button === RIGHT_MOUSE_BUTTON) {
 					editor.dispatch({
 						type: 'pointer',
 						target: 'canvas',
 						name: 'right_click',
-						...getPointerInfo(e),
+						...getPointerInfo(editor, e),
 					})
 					return
 				}
@@ -37,12 +32,12 @@ export function useCanvasEvents() {
 					type: 'pointer',
 					target: 'canvas',
 					name: 'pointer_down',
-					...getPointerInfo(e),
+					...getPointerInfo(editor, e),
 				})
 			}
 
 			function onPointerUp(e: React.PointerEvent) {
-				if ((e as any).isKilled) return
+				if (editor.wasEventAlreadyHandled(e)) return
 				if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return
 
 				releasePointerCapture(e.currentTarget, e)
@@ -51,31 +46,33 @@ export function useCanvasEvents() {
 					type: 'pointer',
 					target: 'canvas',
 					name: 'pointer_up',
-					...getPointerInfo(e),
+					...getPointerInfo(editor, e),
 				})
 			}
 
 			function onPointerEnter(e: React.PointerEvent) {
-				if ((e as any).isKilled) return
+				if (editor.wasEventAlreadyHandled(e)) return
 				if (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return
 				const canHover = e.pointerType === 'mouse' || e.pointerType === 'pen'
 				editor.updateInstanceState({ isHoveringCanvas: canHover ? true : null })
 			}
 
 			function onPointerLeave(e: React.PointerEvent) {
-				if ((e as any).isKilled) return
+				if (editor.wasEventAlreadyHandled(e)) return
 				if (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return
 				const canHover = e.pointerType === 'mouse' || e.pointerType === 'pen'
 				editor.updateInstanceState({ isHoveringCanvas: canHover ? false : null })
 			}
 
 			function onTouchStart(e: React.TouchEvent) {
-				;(e as any).isKilled = true
+				if (editor.wasEventAlreadyHandled(e)) return
+				editor.markEventAsHandled(e)
 				preventDefault(e)
 			}
 
 			function onTouchEnd(e: React.TouchEvent) {
-				;(e as any).isKilled = true
+				if (editor.wasEventAlreadyHandled(e)) return
+				editor.markEventAsHandled(e)
 				// check that e.target is an HTMLElement
 				if (!(e.target instanceof HTMLElement)) return
 
@@ -94,12 +91,14 @@ export function useCanvasEvents() {
 			}
 
 			function onDragOver(e: React.DragEvent<Element>) {
+				if (editor.wasEventAlreadyHandled(e)) return
 				preventDefault(e)
 			}
 
 			async function onDrop(e: React.DragEvent<Element>) {
+				if (editor.wasEventAlreadyHandled(e)) return
 				preventDefault(e)
-				stopEventPropagation(e)
+				e.stopPropagation()
 
 				if (e.dataTransfer?.files?.length) {
 					const files = Array.from(e.dataTransfer.files)
@@ -124,7 +123,8 @@ export function useCanvasEvents() {
 			}
 
 			function onClick(e: React.MouseEvent) {
-				stopEventPropagation(e)
+				if (editor.wasEventAlreadyHandled(e)) return
+				e.stopPropagation()
 			}
 
 			return {
@@ -151,8 +151,8 @@ export function useCanvasEvents() {
 		let lastX: number, lastY: number
 
 		function onPointerMove(e: PointerEvent) {
-			if ((e as any).isKilled) return
-			;(e as any).isKilled = true
+			if (editor.wasEventAlreadyHandled(e)) return
+			editor.markEventAsHandled(e)
 
 			if (e.clientX === lastX && e.clientY === lastY) return
 			lastX = e.clientX
@@ -168,7 +168,7 @@ export function useCanvasEvents() {
 					type: 'pointer',
 					target: 'canvas',
 					name: 'pointer_move',
-					...getPointerInfo(singleEvent),
+					...getPointerInfo(editor, singleEvent),
 				})
 			}
 		}

package/src/lib/hooks/useDocumentEvents.ts

@@ -2,7 +2,7 @@ import { useValue } from '@tldraw/state-react'
 import { useEffect } from 'react'
 import { Editor } from '../editor/Editor'
 import { TLKeyboardEventInfo } from '../editor/types/event-types'
-import { activeElementShouldCaptureKeys, preventDefault, stopEventPropagation } from '../utils/dom'
+import { activeElementShouldCaptureKeys, preventDefault } from '../utils/dom'
 import { isAccelKey } from '../utils/keyboard'
 import { useContainer } from './useContainer'
 import { useEditor } from './useEditor'
@@ -29,7 +29,7 @@ export function useDocumentEvents() {
 			// re-dispatched, which would lead to an infinite loop.
 			if ((e as any).isSpecialRedispatchedEvent) return
 			preventDefault(e)
-			stopEventPropagation(e)
+			e.stopPropagation()
 			const cvs = container.querySelector('.tl-canvas')
 			if (!cvs) return
 			const newEvent = new DragEvent(e.type, e)
@@ -103,8 +103,8 @@ export function useDocumentEvents() {
 				preventDefault(e)
 			}
 
-			if ((e as any).isKilled) return
-			;(e as any).isKilled = true
+			if (editor.wasEventAlreadyHandled(e)) return
+			editor.markEventAsHandled(e)
 			const hasSelectedShapes = !!editor.getSelectedShapeIds().length
 
 			switch (e.key) {
@@ -211,8 +211,8 @@ export function useDocumentEvents() {
 		}
 
 		const handleKeyUp = (e: KeyboardEvent) => {
-			if ((e as any).isKilled) return
-			;(e as any).isKilled = true
+			if (editor.wasEventAlreadyHandled(e)) return
+			editor.markEventAsHandled(e)
 
 			if (areShortcutsDisabled(editor)) {
 				return

package/src/lib/hooks/useFixSafariDoubleTapZoomPencilEvents.ts

@@ -19,7 +19,7 @@ export function useFixSafariDoubleTapZoomPencilEvents(ref: React.RefObject<HTMLE
 
 		const handleEvent = (e: PointerEvent | TouchEvent) => {
 			if (e instanceof PointerEvent && e.pointerType === 'pen') {
-				;(e as any).isKilled = true
+				editor.markEventAsHandled(e)
 				const { target } = e
 
 				// Allow events to propagate if the app is editing a shape, or if the event is occurring in a text area or input

package/src/lib/hooks/useGestureEvents.ts

@@ -3,7 +3,7 @@ import { createUseGesture, pinchAction, wheelAction } from '@use-gesture/react'
 import * as React from 'react'
 import { TLWheelEventInfo } from '../editor/types/event-types'
 import { Vec } from '../primitives/Vec'
-import { preventDefault, stopEventPropagation } from '../utils/dom'
+import { preventDefault } from '../utils/dom'
 import { isAccelKey } from '../utils/keyboard'
 import { normalizeWheel } from '../utils/normalizeWheel'
 import { useEditor } from './useEditor'
@@ -113,7 +113,7 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
 			}
 
 			preventDefault(event)
-			stopEventPropagation(event)
+			event.stopPropagation()
 			const delta = normalizeWheel(event)
 
 			if (delta.x === 0 && delta.y === 0) return

package/src/lib/hooks/useHandleEvents.ts

@@ -16,7 +16,7 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
 
 	return React.useMemo(() => {
 		const onPointerDown = (e: React.PointerEvent) => {
-			if ((e as any).isKilled) return
+			if (editor.wasEventAlreadyHandled(e)) return
 
 			// Must set pointer capture on an HTML element!
 			const target = loopToHtmlElement(e.currentTarget)
@@ -32,7 +32,7 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
 				handle,
 				shape,
 				name: 'pointer_down',
-				...getPointerInfo(e),
+				...getPointerInfo(editor, e),
 			})
 		}
 
@@ -40,7 +40,7 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
 		let lastX: number, lastY: number
 
 		const onPointerMove = (e: React.PointerEvent) => {
-			if ((e as any).isKilled) return
+			if (editor.wasEventAlreadyHandled(e)) return
 			if (e.clientX === lastX && e.clientY === lastY) return
 			lastX = e.clientX
 			lastY = e.clientY
@@ -55,12 +55,12 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
 				handle,
 				shape,
 				name: 'pointer_move',
-				...getPointerInfo(e),
+				...getPointerInfo(editor, e),
 			})
 		}
 
 		const onPointerUp = (e: React.PointerEvent) => {
-			if ((e as any).isKilled) return
+			if (editor.wasEventAlreadyHandled(e)) return
 
 			const target = loopToHtmlElement(e.currentTarget)
 			releasePointerCapture(target, e)
@@ -75,7 +75,7 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
 				handle,
 				shape,
 				name: 'pointer_up',
-				...getPointerInfo(e),
+				...getPointerInfo(editor, e),
 			})
 		}
 

package/src/lib/hooks/useSelectionEvents.ts

@@ -1,12 +1,7 @@
 import { useMemo } from 'react'
 import { RIGHT_MOUSE_BUTTON } from '../constants'
 import { TLSelectionHandle } from '../editor/types/selection-types'
-import {
-	loopToHtmlElement,
-	releasePointerCapture,
-	setPointerCapture,
-	stopEventPropagation,
-} from '../utils/dom'
+import { loopToHtmlElement, releasePointerCapture, setPointerCapture } from '../utils/dom'
 import { getPointerInfo } from '../utils/getPointerInfo'
 import { useEditor } from './useEditor'
 
@@ -17,7 +12,7 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 	const events = useMemo(
 		function selectionEvents() {
 			const onPointerDown: React.PointerEventHandler = (e) => {
-				if ((e as any).isKilled) return
+				if (editor.wasEventAlreadyHandled(e)) return
 
 				if (e.button === RIGHT_MOUSE_BUTTON) {
 					editor.dispatch({
@@ -25,7 +20,7 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 						target: 'selection',
 						handle,
 						name: 'right_click',
-						...getPointerInfo(e),
+						...getPointerInfo(editor, e),
 					})
 					return
 				}
@@ -52,16 +47,16 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 					type: 'pointer',
 					target: 'selection',
 					handle,
-					...getPointerInfo(e),
+					...getPointerInfo(editor, e),
 				})
-				stopEventPropagation(e)
+				editor.markEventAsHandled(e)
 			}
 
 			// Track the last screen point
 			let lastX: number, lastY: number
 
 			function onPointerMove(e: React.PointerEvent) {
-				if ((e as any).isKilled) return
+				if (editor.wasEventAlreadyHandled(e)) return
 				if (e.button !== 0) return
 				if (e.clientX === lastX && e.clientY === lastY) return
 				lastX = e.clientX
@@ -72,12 +67,12 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 					type: 'pointer',
 					target: 'selection',
 					handle,
-					...getPointerInfo(e),
+					...getPointerInfo(editor, e),
 				})
 			}
 
 			const onPointerUp: React.PointerEventHandler = (e) => {
-				if ((e as any).isKilled) return
+				if (editor.wasEventAlreadyHandled(e)) return
 				if (e.button !== 0) return
 
 				editor.dispatch({
@@ -85,7 +80,7 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 					type: 'pointer',
 					target: 'selection',
 					handle,
-					...getPointerInfo(e),
+					...getPointerInfo(editor, e),
 				})
 			}
 

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

@@ -266,7 +266,7 @@ describe('LicenseManager', () => {
 			delete window.location
 			// @ts-ignore
 			window.location = new URL(
-				'vscode-webview:vscode-webview://1ipd8pun8ud7nd7hv9d112g7evi7m10vak9vviuvia66ou6aibp3/index.html?id=6ec2dc7a-afe9-45d9-bd71-1749f9568d28&origin=955b256f-37e1-4a72-a2f4-ad633e88239c&swVersion=4&extensionId=tldraw-org.tldraw-vscode&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app'
+				'vscode-webview://1ipd8pun8ud7nd7hv9d112g7evi7m10vak9vviuvia66ou6aibp3/index.html?id=6ec2dc7a-afe9-45d9-bd71-1749f9568d28&origin=955b256f-37e1-4a72-a2f4-ad633e88239c&swVersion=4&extensionId=tldraw-org.tldraw-vscode&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app'
 			)
 
 			const permissiveHostsInfo = JSON.parse(STANDARD_LICENSE_INFO)
@@ -286,7 +286,7 @@ describe('LicenseManager', () => {
 			delete window.location
 			// @ts-ignore
 			window.location = new URL(
-				'vscode-webview:vscode-webview://1ipd8pun8ud7nd7hv9d112g7evi7m10vak9vviuvia66ou6aibp3/index.html?id=6ec2dc7a-afe9-45d9-bd71-1749f9568d28&origin=955b256f-37e1-4a72-a2f4-ad633e88239c&swVersion=4&extensionId=tldraw-org.tldraw-vscode&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app'
+				'vscode-webview://1ipd8pun8ud7nd7hv9d112g7evi7m10vak9vviuvia66ou6aibp3/index.html?id=6ec2dc7a-afe9-45d9-bd71-1749f9568d28&origin=955b256f-37e1-4a72-a2f4-ad633e88239c&swVersion=4&extensionId=tldraw-org.tldraw-vscode&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app'
 			)
 
 			const permissiveHostsInfo = JSON.parse(STANDARD_LICENSE_INFO)
@@ -300,6 +300,70 @@ describe('LicenseManager', () => {
 			)) as ValidLicenseKeyResult
 			expect(result.isDomainValid).toBe(false)
 		})
+
+		it('Succeeds if it is a native app', async () => {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('app-bundle://app/index.html')
+
+			const nativeLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			nativeLicenseInfo[PROPERTIES.FLAGS] = FLAGS.NATIVE_LICENSE
+			nativeLicenseInfo[PROPERTIES.HOSTS] = ['app-bundle:']
+			const nativeLicenseKey = await generateLicenseKey(JSON.stringify(nativeLicenseInfo), keyPair)
+			const result = (await licenseManager.getLicenseFromKey(
+				nativeLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isDomainValid).toBe(true)
+		})
+
+		it('Succeeds if it is a native app with a wildcard', async () => {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('app-bundle://unique-id-123/index.html')
+
+			const nativeLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			nativeLicenseInfo[PROPERTIES.FLAGS] = FLAGS.NATIVE_LICENSE
+			nativeLicenseInfo[PROPERTIES.HOSTS] = ['^app-bundle://unique-id-123.*']
+			const nativeLicenseKey = await generateLicenseKey(JSON.stringify(nativeLicenseInfo), keyPair)
+			const result = (await licenseManager.getLicenseFromKey(
+				nativeLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isDomainValid).toBe(true)
+		})
+
+		it('Succeeds if it is a native app with a wildcard and search param', async () => {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('app-bundle://app/index.html?unique-id-123')
+
+			const nativeLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			nativeLicenseInfo[PROPERTIES.FLAGS] = FLAGS.NATIVE_LICENSE
+			nativeLicenseInfo[PROPERTIES.HOSTS] = ['^app-bundle://app.*unique-id-123.*']
+			const nativeLicenseKey = await generateLicenseKey(JSON.stringify(nativeLicenseInfo), keyPair)
+			const result = (await licenseManager.getLicenseFromKey(
+				nativeLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isDomainValid).toBe(true)
+		})
+
+		it('Fails if it is a native app with the wrong protocol', async () => {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('blah-blundle://app/index.html')
+
+			const nativeLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			nativeLicenseInfo[PROPERTIES.FLAGS] = FLAGS.NATIVE_LICENSE
+			nativeLicenseInfo[PROPERTIES.HOSTS] = ['app-bundle:']
+			const nativeLicenseKey = await generateLicenseKey(JSON.stringify(nativeLicenseInfo), keyPair)
+			const result = (await licenseManager.getLicenseFromKey(
+				nativeLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isDomainValid).toBe(false)
+		})
 	})
 
 	describe('License types and flags', () => {
@@ -316,6 +380,17 @@ describe('LicenseManager', () => {
 			expect(result.isInternalLicense).toBe(true)
 		})
 
+		it('Checks for native license', async () => {
+			const nativeLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			nativeLicenseInfo[PROPERTIES.FLAGS] = FLAGS.NATIVE_LICENSE
+			const nativeLicenseKey = await generateLicenseKey(JSON.stringify(nativeLicenseInfo), keyPair)
+
+			const result = (await licenseManager.getLicenseFromKey(
+				nativeLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isNativeLicense).toBe(true)
+		})
+
 		it('Checks for license with watermark', async () => {
 			const withWatermarkLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
 			withWatermarkLicenseInfo[PROPERTIES.FLAGS] |= FLAGS.WITH_WATERMARK
@@ -553,6 +628,7 @@ function getDefaultLicenseResult(overrides: Partial<ValidLicenseKeyResult>): Val
 		isAnnualLicense: true,
 		isAnnualLicenseExpired: false,
 		isInternalLicense: false,
+		isNativeLicense: false,
 		isDevelopment: false,
 		isDomainValid: true,
 		isPerpetualLicense: false,

package/src/lib/license/LicenseManager.ts

@@ -6,11 +6,22 @@ import { importPublicKey, str2ab } from '../utils/licensing'
 const GRACE_PERIOD_DAYS = 30
 
 export const FLAGS = {
+	// -- MUTUALLY EXCLUSIVE FLAGS --
+	// Annual means the license expires after a time period, usually 1 year.
 	ANNUAL_LICENSE: 1,
+	// Perpetual means the license never expires up to the max supported version.
 	PERPETUAL_LICENSE: 1 << 1,
+
+	// -- ADDITIVE FLAGS --
+	// Internal means the license is for internal use only.
 	INTERNAL_LICENSE: 1 << 2,
+	// Watermark means the product is watermarked.
 	WITH_WATERMARK: 1 << 3,
+	// Evaluation means the license is for evaluation purposes only.
 	EVALUATION_LICENSE: 1 << 4,
+	// Native means the license is for native apps which switches
+	// on special-case logic.
+	NATIVE_LICENSE: 1 << 5,
 }
 const HIGHEST_FLAG = Math.max(...Object.values(FLAGS))
 
@@ -69,6 +80,7 @@ export interface ValidLicenseKeyResult {
 	isPerpetualLicense: boolean
 	isPerpetualLicenseExpired: boolean
 	isInternalLicense: boolean
+	isNativeLicense: boolean
 	isLicensedWithWatermark: boolean
 	isEvaluationLicense: boolean
 	isEvaluationLicenseExpired: boolean
@@ -166,6 +178,9 @@ export class LicenseManager {
 		const url = new URL(WATERMARK_TRACK_SRC)
 		url.searchParams.set('version', version)
 		url.searchParams.set('license_type', trackType)
+		if ('license' in result) {
+			url.searchParams.set('license_id', result.license.id)
+		}
 
 		// eslint-disable-next-line no-restricted-globals
 		fetch(url.toString())
@@ -271,6 +286,7 @@ export class LicenseManager {
 				isPerpetualLicense,
 				isPerpetualLicenseExpired: isPerpetualLicense && this.isPerpetualLicenseExpired(expiryDate),
 				isInternalLicense: this.isFlagEnabled(licenseInfo.flags, FLAGS.INTERNAL_LICENSE),
+				isNativeLicense: this.isNativeLicense(licenseInfo),
 				isLicensedWithWatermark: this.isFlagEnabled(licenseInfo.flags, FLAGS.WITH_WATERMARK),
 				isEvaluationLicense,
 				isEvaluationLicenseExpired:
@@ -291,13 +307,13 @@ export class LicenseManager {
 		const currentHostname = window.location.hostname.toLowerCase()
 
 		return licenseInfo.hosts.some((host) => {
-			const normalizedHost = host.toLowerCase().trim()
+			const normalizedHostOrUrlRegex = host.toLowerCase().trim()
 
 			// Allow the domain if listed and www variations, 'example.com' allows 'example.com' and 'www.example.com'
 			if (
-				normalizedHost === currentHostname ||
-				`www.${normalizedHost}` === currentHostname ||
-				normalizedHost === `www.${currentHostname}`
+				normalizedHostOrUrlRegex === currentHostname ||
+				`www.${normalizedHostOrUrlRegex}` === currentHostname ||
+				normalizedHostOrUrlRegex === `www.${currentHostname}`
 			) {
 				return true
 			}
@@ -308,6 +324,12 @@ export class LicenseManager {
 				return true
 			}
 
+			// Native license support
+			// In this case, `normalizedHost` is actually a protocol, e.g. `app-bundle:`
+			if (this.isNativeLicense(licenseInfo)) {
+				return new RegExp(normalizedHostOrUrlRegex).test(window.location.href)
+			}
+
 			// Glob testing, we only support '*.somedomain.com' right now.
 			if (host.includes('*')) {
 				const globToRegex = new RegExp(host.replace(/\*/g, '.*?'))
@@ -318,7 +340,7 @@ export class LicenseManager {
 			if (window.location.protocol === 'vscode-webview:') {
 				const currentUrl = new URL(window.location.href)
 				const extensionId = currentUrl.searchParams.get('extensionId')
-				if (normalizedHost === extensionId) {
+				if (normalizedHostOrUrlRegex === extensionId) {
 					return true
 				}
 			}
@@ -327,6 +349,10 @@ export class LicenseManager {
 		})
 	}
 
+	private isNativeLicense(licenseInfo: LicenseInfo) {
+		return this.isFlagEnabled(licenseInfo.flags, FLAGS.NATIVE_LICENSE)
+	}
+
 	private getExpirationDateWithoutGracePeriod(expiryDate: Date) {
 		return new Date(expiryDate.getFullYear(), expiryDate.getMonth(), expiryDate.getDate())
 	}