@tldraw/editor 3.16.0-canary.ca33603d9bda → 3.16.0-canary.cb18f446a36f

package/dist-cjs/lib/hooks/useGestureEvents.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useGestureEvents.ts"],
-  "sourcesContent": ["import type { AnyHandlerEventTypes, EventTypes, GestureKey, Handler } from '@use-gesture/core/types'\nimport { createUseGesture, pinchAction, wheelAction } from '@use-gesture/react'\nimport * as React from 'react'\nimport { TLWheelEventInfo } from '../editor/types/event-types'\nimport { Vec } from '../primitives/Vec'\nimport { preventDefault, stopEventPropagation } from '../utils/dom'\nimport { isAccelKey } from '../utils/keyboard'\nimport { normalizeWheel } from '../utils/normalizeWheel'\nimport { useEditor } from './useEditor'\n\n/*\n\n# How does pinching work?\n\nThe pinching handler is fired under two circumstances: \n- when a user is on a MacBook trackpad and is ZOOMING with a two-finger pinch\n- when a user is on a touch device and is ZOOMING with a two-finger pinch\n- when a user is on a touch device and is PANNING with two fingers\n\nZooming is much more expensive than panning (because it causes shapes to render), \nso we want to be sure that we don't zoom while two-finger panning. \n\nIn order to do this, we keep track of a \"pinchState\", which is either:\n- \"zooming\"\n- \"panning\"\n- \"not sure\"\n\nIf a user is on a trackpad, the pinchState will be set to \"zooming\". \n\nIf the user is on a touch screen, then we start in the \"not sure\" state and switch back and forth\nbetween \"zooming\", \"panning\", and \"not sure\" based on what the user is doing with their fingers.\n\nIn the \"not sure\" state, we examine whether the user has moved the center of the gesture far enough\nto suggest that they're panning; or else that they've moved their fingers further apart or closer\ntogether enough to suggest that they're zooming. \n\nIn the \"panning\" state, we check whether the user's fingers have moved far enough apart to suggest\nthat they're zooming. If they have, we switch to the \"zooming\" state.\n\nIn the \"zooming\" state, we just stay zooming\u2014it's not YET possible to switch back to panning.\n\ntodo: compare velocities of change in order to determine whether the user has switched back to panning\n*/\n\ntype check<T extends AnyHandlerEventTypes, Key extends GestureKey> = undefined extends T[Key]\n\t? EventTypes[Key]\n\t: T[Key]\ntype PinchHandler = Handler<'pinch', check<EventTypes, 'pinch'>>\n\nconst useGesture = createUseGesture([wheelAction, pinchAction])\n\n/**\n * GOTCHA\n *\n * UseGesture fires a wheel event 140ms after the gesture actually ends, with a momentum-adjusted\n * delta. This creates a messed up interaction where after you stop scrolling suddenly the dang page\n * jumps a tick. why do they do this? you are asking the wrong person. it seems intentional though.\n * anyway we want to ignore that last event, but there's no way to directly detect it so we need to\n * keep track of timestamps. Yes this is awful, I am sorry.\n */\nlet lastWheelTime = undefined as undefined | number\n\nconst isWheelEndEvent = (time: number) => {\n\tif (lastWheelTime === undefined) {\n\t\tlastWheelTime = time\n\t\treturn false\n\t}\n\n\tif (time - lastWheelTime > 120 && time - lastWheelTime < 160) {\n\t\tlastWheelTime = time\n\t\treturn true\n\t}\n\n\tlastWheelTime = time\n\treturn false\n}\n\nexport function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {\n\tconst editor = useEditor()\n\n\tconst events = React.useMemo(() => {\n\t\tlet pinchState = 'not sure' as 'not sure' | 'zooming' | 'panning'\n\n\t\tconst onWheel: Handler<'wheel', WheelEvent> = ({ event }) => {\n\t\t\tif (!editor.getInstanceState().isFocused) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tpinchState = 'not sure'\n\n\t\t\tif (isWheelEndEvent(Date.now())) {\n\t\t\t\t// ignore wheelEnd events\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Awful tht we need to put this logic here, but basically\n\t\t\t// we don't want to handle the the wheel event (or call prevent\n\t\t\t// default on the evnet) if the user is wheeling over an a shape\n\t\t\t// that is scrollable which they're currently editing.\n\n\t\t\tconst editingShapeId = editor.getEditingShapeId()\n\t\t\tif (editingShapeId) {\n\t\t\t\tconst shape = editor.getShape(editingShapeId)\n\t\t\t\tif (shape) {\n\t\t\t\t\tconst util = editor.getShapeUtil(shape)\n\t\t\t\t\tif (util.canScroll(shape)) {\n\t\t\t\t\t\tconst bounds = editor.getShapePageBounds(editingShapeId)\n\t\t\t\t\t\tif (bounds?.containsPoint(editor.inputs.currentPagePoint)) {\n\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tpreventDefault(event)\n\t\t\tstopEventPropagation(event)\n\t\t\tconst delta = normalizeWheel(event)\n\n\t\t\tif (delta.x === 0 && delta.y === 0) return\n\n\t\t\tconst info: TLWheelEventInfo = {\n\t\t\t\ttype: 'wheel',\n\t\t\t\tname: 'wheel',\n\t\t\t\tdelta,\n\t\t\t\tpoint: new Vec(event.clientX, event.clientY),\n\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\taltKey: event.altKey,\n\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t}\n\n\t\t\teditor.dispatch(info)\n\t\t}\n\n\t\tlet initDistanceBetweenFingers = 1 // the distance between the two fingers when the pinch starts\n\t\tlet initZoom = 1 // the browser's zoom level when the pinch starts\n\t\tlet currDistanceBetweenFingers = 0\n\t\tconst initPointBetweenFingers = new Vec()\n\t\tconst prevPointBetweenFingers = new Vec()\n\n\t\tconst onPinchStart: PinchHandler = (gesture) => {\n\t\t\tconst elm = ref.current\n\t\t\tpinchState = 'not sure'\n\n\t\t\tconst { event, origin, da } = gesture\n\n\t\t\tif (event instanceof WheelEvent) return\n\t\t\tif (!(event.target === elm || elm?.contains(event.target as Node))) return\n\n\t\t\tprevPointBetweenFingers.x = origin[0]\n\t\t\tprevPointBetweenFingers.y = origin[1]\n\t\t\tinitPointBetweenFingers.x = origin[0]\n\t\t\tinitPointBetweenFingers.y = origin[1]\n\t\t\tinitDistanceBetweenFingers = da[0]\n\t\t\tinitZoom = editor.getZoomLevel()\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pinch',\n\t\t\t\tname: 'pinch_start',\n\t\t\t\tpoint: { x: origin[0], y: origin[1], z: editor.getZoomLevel() },\n\t\t\t\tdelta: { x: 0, y: 0 },\n\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\taltKey: event.altKey,\n\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t})\n\t\t}\n\n\t\t// let timeout: any\n\t\tconst updatePinchState = (isSafariTrackpadPinch: boolean) => {\n\t\t\tif (isSafariTrackpadPinch) {\n\t\t\t\tpinchState = 'zooming'\n\t\t\t}\n\n\t\t\tif (pinchState === 'zooming') {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Initial: [touch]-------origin-------[touch]\n\t\t\t// Current: [touch]-----------origin----------[touch]\n\t\t\t//                          |----|     |------------|\n\t\t\t//             originDistance ^           ^ touchDistance\n\n\t\t\t// How far have the two touch points moved towards or away from eachother?\n\t\t\tconst touchDistance = Math.abs(currDistanceBetweenFingers - initDistanceBetweenFingers)\n\t\t\t// How far has the point between the touches moved?\n\t\t\tconst originDistance = Vec.Dist(initPointBetweenFingers, prevPointBetweenFingers)\n\n\t\t\tswitch (pinchState) {\n\t\t\t\tcase 'not sure': {\n\t\t\t\t\tif (touchDistance > 24) {\n\t\t\t\t\t\tpinchState = 'zooming'\n\t\t\t\t\t} else if (originDistance > 16) {\n\t\t\t\t\t\tpinchState = 'panning'\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'panning': {\n\t\t\t\t\t// Slightly more touch distance needed to go from panning to zooming\n\t\t\t\t\tif (touchDistance > 64) {\n\t\t\t\t\t\tpinchState = 'zooming'\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst onPinch: PinchHandler = (gesture) => {\n\t\t\tconst elm = ref.current\n\t\t\tconst { event, origin, offset, da } = gesture\n\n\t\t\tif (event instanceof WheelEvent) return\n\t\t\tif (!(event.target === elm || elm?.contains(event.target as Node))) return\n\n\t\t\t// In (desktop) Safari, a two finger trackpad pinch will be a \"gesturechange\" event\n\t\t\t// and will have 0 touches; on iOS, a two-finger pinch will be a \"pointermove\" event\n\t\t\t// with two touches.\n\t\t\tconst isSafariTrackpadPinch =\n\t\t\t\tgesture.type === 'gesturechange' || gesture.type === 'gestureend'\n\n\t\t\t// The distance between the two touch points\n\t\t\tcurrDistanceBetweenFingers = da[0]\n\n\t\t\t// Only update the zoom if the pointers are far enough apart;\n\t\t\t// a very small touchDistance means that the user has probably\n\t\t\t// pinched out and their fingers are touching; this produces\n\t\t\t// very unstable zooming behavior.\n\n\t\t\tconst dx = origin[0] - prevPointBetweenFingers.x\n\t\t\tconst dy = origin[1] - prevPointBetweenFingers.y\n\n\t\t\tprevPointBetweenFingers.x = origin[0]\n\t\t\tprevPointBetweenFingers.y = origin[1]\n\n\t\t\tupdatePinchState(isSafariTrackpadPinch)\n\n\t\t\tswitch (pinchState) {\n\t\t\t\tcase 'zooming': {\n\t\t\t\t\tconst currZoom = offset[0] ** editor.getCameraOptions().zoomSpeed\n\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pinch',\n\t\t\t\t\t\tname: 'pinch',\n\t\t\t\t\t\tpoint: { x: origin[0], y: origin[1], z: currZoom },\n\t\t\t\t\t\tdelta: { x: dx, y: dy },\n\t\t\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\t\t\taltKey: event.altKey,\n\t\t\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t\t\t})\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'panning': {\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pinch',\n\t\t\t\t\t\tname: 'pinch',\n\t\t\t\t\t\tpoint: { x: origin[0], y: origin[1], z: initZoom },\n\t\t\t\t\t\tdelta: { x: dx, y: dy },\n\t\t\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\t\t\taltKey: event.altKey,\n\t\t\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t\t\t})\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst onPinchEnd: PinchHandler = (gesture) => {\n\t\t\tconst elm = ref.current\n\t\t\tconst { event, origin, offset } = gesture\n\n\t\t\tif (event instanceof WheelEvent) return\n\t\t\tif (!(event.target === elm || elm?.contains(event.target as Node))) return\n\n\t\t\tconst scale = offset[0] ** editor.getCameraOptions().zoomSpeed\n\n\t\t\tpinchState = 'not sure'\n\n\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pinch',\n\t\t\t\t\tname: 'pinch_end',\n\t\t\t\t\tpoint: { x: origin[0], y: origin[1], z: scale },\n\t\t\t\t\tdelta: { x: origin[0], y: origin[1] },\n\t\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\t\taltKey: event.altKey,\n\t\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t\t})\n\t\t\t})\n\t\t}\n\n\t\treturn {\n\t\t\tonWheel,\n\t\t\tonPinchStart,\n\t\t\tonPinchEnd,\n\t\t\tonPinch,\n\t\t}\n\t}, [editor, ref])\n\n\tuseGesture(events, {\n\t\ttarget: ref,\n\t\teventOptions: { passive: false },\n\t\tpinch: {\n\t\t\tfrom: () => {\n\t\t\t\tconst { zoomSpeed } = editor.getCameraOptions()\n\t\t\t\tconst level = editor.getZoomLevel() ** (1 / zoomSpeed)\n\t\t\t\treturn [level, 0]\n\t\t\t}, // Return the camera z to use when pinch starts\n\t\t\tscaleBounds: () => {\n\t\t\t\tconst baseZoom = editor.getBaseZoom()\n\t\t\t\tconst { zoomSteps, zoomSpeed } = editor.getCameraOptions()\n\t\t\t\tconst zoomMin = zoomSteps[0] * baseZoom\n\t\t\t\tconst zoomMax = zoomSteps[zoomSteps.length - 1] * baseZoom\n\n\t\t\t\treturn {\n\t\t\t\t\tmax: zoomMax ** (1 / zoomSpeed),\n\t\t\t\t\tmin: zoomMin ** (1 / zoomSpeed),\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t})\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { AnyHandlerEventTypes, EventTypes, GestureKey, Handler } from '@use-gesture/core/types'\nimport { createUseGesture, pinchAction, wheelAction } from '@use-gesture/react'\nimport * as React from 'react'\nimport { TLWheelEventInfo } from '../editor/types/event-types'\nimport { Vec } from '../primitives/Vec'\nimport { preventDefault } from '../utils/dom'\nimport { isAccelKey } from '../utils/keyboard'\nimport { normalizeWheel } from '../utils/normalizeWheel'\nimport { useEditor } from './useEditor'\n\n/*\n\n# How does pinching work?\n\nThe pinching handler is fired under two circumstances: \n- when a user is on a MacBook trackpad and is ZOOMING with a two-finger pinch\n- when a user is on a touch device and is ZOOMING with a two-finger pinch\n- when a user is on a touch device and is PANNING with two fingers\n\nZooming is much more expensive than panning (because it causes shapes to render), \nso we want to be sure that we don't zoom while two-finger panning. \n\nIn order to do this, we keep track of a \"pinchState\", which is either:\n- \"zooming\"\n- \"panning\"\n- \"not sure\"\n\nIf a user is on a trackpad, the pinchState will be set to \"zooming\". \n\nIf the user is on a touch screen, then we start in the \"not sure\" state and switch back and forth\nbetween \"zooming\", \"panning\", and \"not sure\" based on what the user is doing with their fingers.\n\nIn the \"not sure\" state, we examine whether the user has moved the center of the gesture far enough\nto suggest that they're panning; or else that they've moved their fingers further apart or closer\ntogether enough to suggest that they're zooming. \n\nIn the \"panning\" state, we check whether the user's fingers have moved far enough apart to suggest\nthat they're zooming. If they have, we switch to the \"zooming\" state.\n\nIn the \"zooming\" state, we just stay zooming\u2014it's not YET possible to switch back to panning.\n\ntodo: compare velocities of change in order to determine whether the user has switched back to panning\n*/\n\ntype check<T extends AnyHandlerEventTypes, Key extends GestureKey> = undefined extends T[Key]\n\t? EventTypes[Key]\n\t: T[Key]\ntype PinchHandler = Handler<'pinch', check<EventTypes, 'pinch'>>\n\nconst useGesture = createUseGesture([wheelAction, pinchAction])\n\n/**\n * GOTCHA\n *\n * UseGesture fires a wheel event 140ms after the gesture actually ends, with a momentum-adjusted\n * delta. This creates a messed up interaction where after you stop scrolling suddenly the dang page\n * jumps a tick. why do they do this? you are asking the wrong person. it seems intentional though.\n * anyway we want to ignore that last event, but there's no way to directly detect it so we need to\n * keep track of timestamps. Yes this is awful, I am sorry.\n */\nlet lastWheelTime = undefined as undefined | number\n\nconst isWheelEndEvent = (time: number) => {\n\tif (lastWheelTime === undefined) {\n\t\tlastWheelTime = time\n\t\treturn false\n\t}\n\n\tif (time - lastWheelTime > 120 && time - lastWheelTime < 160) {\n\t\tlastWheelTime = time\n\t\treturn true\n\t}\n\n\tlastWheelTime = time\n\treturn false\n}\n\nexport function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {\n\tconst editor = useEditor()\n\n\tconst events = React.useMemo(() => {\n\t\tlet pinchState = 'not sure' as 'not sure' | 'zooming' | 'panning'\n\n\t\tconst onWheel: Handler<'wheel', WheelEvent> = ({ event }) => {\n\t\t\tif (!editor.getInstanceState().isFocused) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tpinchState = 'not sure'\n\n\t\t\tif (isWheelEndEvent(Date.now())) {\n\t\t\t\t// ignore wheelEnd events\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Awful tht we need to put this logic here, but basically\n\t\t\t// we don't want to handle the the wheel event (or call prevent\n\t\t\t// default on the evnet) if the user is wheeling over an a shape\n\t\t\t// that is scrollable which they're currently editing.\n\n\t\t\tconst editingShapeId = editor.getEditingShapeId()\n\t\t\tif (editingShapeId) {\n\t\t\t\tconst shape = editor.getShape(editingShapeId)\n\t\t\t\tif (shape) {\n\t\t\t\t\tconst util = editor.getShapeUtil(shape)\n\t\t\t\t\tif (util.canScroll(shape)) {\n\t\t\t\t\t\tconst bounds = editor.getShapePageBounds(editingShapeId)\n\t\t\t\t\t\tif (bounds?.containsPoint(editor.inputs.currentPagePoint)) {\n\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tpreventDefault(event)\n\t\t\tevent.stopPropagation()\n\t\t\tconst delta = normalizeWheel(event)\n\n\t\t\tif (delta.x === 0 && delta.y === 0) return\n\n\t\t\tconst info: TLWheelEventInfo = {\n\t\t\t\ttype: 'wheel',\n\t\t\t\tname: 'wheel',\n\t\t\t\tdelta,\n\t\t\t\tpoint: new Vec(event.clientX, event.clientY),\n\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\taltKey: event.altKey,\n\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t}\n\n\t\t\teditor.dispatch(info)\n\t\t}\n\n\t\tlet initDistanceBetweenFingers = 1 // the distance between the two fingers when the pinch starts\n\t\tlet initZoom = 1 // the browser's zoom level when the pinch starts\n\t\tlet currDistanceBetweenFingers = 0\n\t\tconst initPointBetweenFingers = new Vec()\n\t\tconst prevPointBetweenFingers = new Vec()\n\n\t\tconst onPinchStart: PinchHandler = (gesture) => {\n\t\t\tconst elm = ref.current\n\t\t\tpinchState = 'not sure'\n\n\t\t\tconst { event, origin, da } = gesture\n\n\t\t\tif (event instanceof WheelEvent) return\n\t\t\tif (!(event.target === elm || elm?.contains(event.target as Node))) return\n\n\t\t\tprevPointBetweenFingers.x = origin[0]\n\t\t\tprevPointBetweenFingers.y = origin[1]\n\t\t\tinitPointBetweenFingers.x = origin[0]\n\t\t\tinitPointBetweenFingers.y = origin[1]\n\t\t\tinitDistanceBetweenFingers = da[0]\n\t\t\tinitZoom = editor.getZoomLevel()\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pinch',\n\t\t\t\tname: 'pinch_start',\n\t\t\t\tpoint: { x: origin[0], y: origin[1], z: editor.getZoomLevel() },\n\t\t\t\tdelta: { x: 0, y: 0 },\n\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\taltKey: event.altKey,\n\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t})\n\t\t}\n\n\t\t// let timeout: any\n\t\tconst updatePinchState = (isSafariTrackpadPinch: boolean) => {\n\t\t\tif (isSafariTrackpadPinch) {\n\t\t\t\tpinchState = 'zooming'\n\t\t\t}\n\n\t\t\tif (pinchState === 'zooming') {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Initial: [touch]-------origin-------[touch]\n\t\t\t// Current: [touch]-----------origin----------[touch]\n\t\t\t//                          |----|     |------------|\n\t\t\t//             originDistance ^           ^ touchDistance\n\n\t\t\t// How far have the two touch points moved towards or away from eachother?\n\t\t\tconst touchDistance = Math.abs(currDistanceBetweenFingers - initDistanceBetweenFingers)\n\t\t\t// How far has the point between the touches moved?\n\t\t\tconst originDistance = Vec.Dist(initPointBetweenFingers, prevPointBetweenFingers)\n\n\t\t\tswitch (pinchState) {\n\t\t\t\tcase 'not sure': {\n\t\t\t\t\tif (touchDistance > 24) {\n\t\t\t\t\t\tpinchState = 'zooming'\n\t\t\t\t\t} else if (originDistance > 16) {\n\t\t\t\t\t\tpinchState = 'panning'\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'panning': {\n\t\t\t\t\t// Slightly more touch distance needed to go from panning to zooming\n\t\t\t\t\tif (touchDistance > 64) {\n\t\t\t\t\t\tpinchState = 'zooming'\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst onPinch: PinchHandler = (gesture) => {\n\t\t\tconst elm = ref.current\n\t\t\tconst { event, origin, offset, da } = gesture\n\n\t\t\tif (event instanceof WheelEvent) return\n\t\t\tif (!(event.target === elm || elm?.contains(event.target as Node))) return\n\n\t\t\t// In (desktop) Safari, a two finger trackpad pinch will be a \"gesturechange\" event\n\t\t\t// and will have 0 touches; on iOS, a two-finger pinch will be a \"pointermove\" event\n\t\t\t// with two touches.\n\t\t\tconst isSafariTrackpadPinch =\n\t\t\t\tgesture.type === 'gesturechange' || gesture.type === 'gestureend'\n\n\t\t\t// The distance between the two touch points\n\t\t\tcurrDistanceBetweenFingers = da[0]\n\n\t\t\t// Only update the zoom if the pointers are far enough apart;\n\t\t\t// a very small touchDistance means that the user has probably\n\t\t\t// pinched out and their fingers are touching; this produces\n\t\t\t// very unstable zooming behavior.\n\n\t\t\tconst dx = origin[0] - prevPointBetweenFingers.x\n\t\t\tconst dy = origin[1] - prevPointBetweenFingers.y\n\n\t\t\tprevPointBetweenFingers.x = origin[0]\n\t\t\tprevPointBetweenFingers.y = origin[1]\n\n\t\t\tupdatePinchState(isSafariTrackpadPinch)\n\n\t\t\tswitch (pinchState) {\n\t\t\t\tcase 'zooming': {\n\t\t\t\t\tconst currZoom = offset[0] ** editor.getCameraOptions().zoomSpeed\n\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pinch',\n\t\t\t\t\t\tname: 'pinch',\n\t\t\t\t\t\tpoint: { x: origin[0], y: origin[1], z: currZoom },\n\t\t\t\t\t\tdelta: { x: dx, y: dy },\n\t\t\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\t\t\taltKey: event.altKey,\n\t\t\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t\t\t})\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'panning': {\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pinch',\n\t\t\t\t\t\tname: 'pinch',\n\t\t\t\t\t\tpoint: { x: origin[0], y: origin[1], z: initZoom },\n\t\t\t\t\t\tdelta: { x: dx, y: dy },\n\t\t\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\t\t\taltKey: event.altKey,\n\t\t\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t\t\t})\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst onPinchEnd: PinchHandler = (gesture) => {\n\t\t\tconst elm = ref.current\n\t\t\tconst { event, origin, offset } = gesture\n\n\t\t\tif (event instanceof WheelEvent) return\n\t\t\tif (!(event.target === elm || elm?.contains(event.target as Node))) return\n\n\t\t\tconst scale = offset[0] ** editor.getCameraOptions().zoomSpeed\n\n\t\t\tpinchState = 'not sure'\n\n\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pinch',\n\t\t\t\t\tname: 'pinch_end',\n\t\t\t\t\tpoint: { x: origin[0], y: origin[1], z: scale },\n\t\t\t\t\tdelta: { x: origin[0], y: origin[1] },\n\t\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\t\taltKey: event.altKey,\n\t\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t\t})\n\t\t\t})\n\t\t}\n\n\t\treturn {\n\t\t\tonWheel,\n\t\t\tonPinchStart,\n\t\t\tonPinchEnd,\n\t\t\tonPinch,\n\t\t}\n\t}, [editor, ref])\n\n\tuseGesture(events, {\n\t\ttarget: ref,\n\t\teventOptions: { passive: false },\n\t\tpinch: {\n\t\t\tfrom: () => {\n\t\t\t\tconst { zoomSpeed } = editor.getCameraOptions()\n\t\t\t\tconst level = editor.getZoomLevel() ** (1 / zoomSpeed)\n\t\t\t\treturn [level, 0]\n\t\t\t}, // Return the camera z to use when pinch starts\n\t\t\tscaleBounds: () => {\n\t\t\t\tconst baseZoom = editor.getBaseZoom()\n\t\t\t\tconst { zoomSteps, zoomSpeed } = editor.getCameraOptions()\n\t\t\t\tconst zoomMin = zoomSteps[0] * baseZoom\n\t\t\t\tconst zoomMax = zoomSteps[zoomSteps.length - 1] * baseZoom\n\n\t\t\t\treturn {\n\t\t\t\t\tmax: zoomMax ** (1 / zoomSpeed),\n\t\t\t\t\tmin: zoomMin ** (1 / zoomSpeed),\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t})\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-cjs/lib/hooks/useHandleEvents.js

@@ -44,7 +44,7 @@ function useHandleEvents(id, handleId) {
   const editor = (0, import_useEditor.useEditor)();
   return React.useMemo(() => {
     const onPointerDown = (e) => {
-      if (e.isKilled) return;
+      if (editor.wasEventAlreadyHandled(e)) return;
       const target = (0, import_dom.loopToHtmlElement)(e.currentTarget);
       (0, import_dom.setPointerCapture)(target, e);
       const { shape, handle } = getHandle(editor, id, handleId);
@@ -55,12 +55,12 @@ function useHandleEvents(id, handleId) {
         handle,
         shape,
         name: "pointer_down",
-        ...(0, import_getPointerInfo.getPointerInfo)(e)
+        ...(0, import_getPointerInfo.getPointerInfo)(editor, e)
       });
     };
     let lastX, lastY;
     const onPointerMove = (e) => {
-      if (e.isKilled) return;
+      if (editor.wasEventAlreadyHandled(e)) return;
       if (e.clientX === lastX && e.clientY === lastY) return;
       lastX = e.clientX;
       lastY = e.clientY;
@@ -72,11 +72,11 @@ function useHandleEvents(id, handleId) {
         handle,
         shape,
         name: "pointer_move",
-        ...(0, import_getPointerInfo.getPointerInfo)(e)
+        ...(0, import_getPointerInfo.getPointerInfo)(editor, e)
       });
     };
     const onPointerUp = (e) => {
-      if (e.isKilled) return;
+      if (editor.wasEventAlreadyHandled(e)) return;
       const target = (0, import_dom.loopToHtmlElement)(e.currentTarget);
       (0, import_dom.releasePointerCapture)(target, e);
       const { shape, handle } = getHandle(editor, id, handleId);
@@ -87,7 +87,7 @@ function useHandleEvents(id, handleId) {
         handle,
         shape,
         name: "pointer_up",
-        ...(0, import_getPointerInfo.getPointerInfo)(e)
+        ...(0, import_getPointerInfo.getPointerInfo)(editor, e)
       });
     };
     return {

package/dist-cjs/lib/hooks/useHandleEvents.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useHandleEvents.ts"],
-  "sourcesContent": ["import { TLArrowShape, TLLineShape, TLShapeId } from '@tldraw/tlschema'\nimport * as React from 'react'\nimport { Editor } from '../editor/Editor'\nimport { loopToHtmlElement, releasePointerCapture, setPointerCapture } from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\nimport { useEditor } from './useEditor'\n\nfunction getHandle(editor: Editor, id: TLShapeId, handleId: string) {\n\tconst shape = editor.getShape<TLArrowShape | TLLineShape>(id)!\n\tconst handles = editor.getShapeHandles(shape)!\n\treturn { shape, handle: handles.find((h) => h.id === handleId) }\n}\n\nexport function useHandleEvents(id: TLShapeId, handleId: string) {\n\tconst editor = useEditor()\n\n\treturn React.useMemo(() => {\n\t\tconst onPointerDown = (e: React.PointerEvent) => {\n\t\t\tif ((e as any).isKilled) return\n\n\t\t\t// Must set pointer capture on an HTML element!\n\t\t\tconst target = loopToHtmlElement(e.currentTarget)\n\t\t\tsetPointerCapture(target, e)\n\n\t\t\tconst { shape, handle } = getHandle(editor, id, handleId)\n\n\t\t\tif (!handle) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'handle',\n\t\t\t\thandle,\n\t\t\t\tshape,\n\t\t\t\tname: 'pointer_down',\n\t\t\t\t...getPointerInfo(e),\n\t\t\t})\n\t\t}\n\n\t\t// Track the last screen point\n\t\tlet lastX: number, lastY: number\n\n\t\tconst onPointerMove = (e: React.PointerEvent) => {\n\t\t\tif ((e as any).isKilled) return\n\t\t\tif (e.clientX === lastX && e.clientY === lastY) return\n\t\t\tlastX = e.clientX\n\t\t\tlastY = e.clientY\n\n\t\t\tconst { shape, handle } = getHandle(editor, id, handleId)\n\n\t\t\tif (!handle) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'handle',\n\t\t\t\thandle,\n\t\t\t\tshape,\n\t\t\t\tname: 'pointer_move',\n\t\t\t\t...getPointerInfo(e),\n\t\t\t})\n\t\t}\n\n\t\tconst onPointerUp = (e: React.PointerEvent) => {\n\t\t\tif ((e as any).isKilled) return\n\n\t\t\tconst target = loopToHtmlElement(e.currentTarget)\n\t\t\treleasePointerCapture(target, e)\n\n\t\t\tconst { shape, handle } = getHandle(editor, id, handleId)\n\n\t\t\tif (!handle) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'handle',\n\t\t\t\thandle,\n\t\t\t\tshape,\n\t\t\t\tname: 'pointer_up',\n\t\t\t\t...getPointerInfo(e),\n\t\t\t})\n\t\t}\n\n\t\treturn {\n\t\t\tonPointerDown,\n\t\t\tonPointerMove,\n\t\t\tonPointerUp,\n\t\t}\n\t}, [editor, id, handleId])\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AAEvB,iBAA4E;AAC5E,4BAA+B;AAC/B,uBAA0B;AAE1B,SAAS,UAAU,QAAgB,IAAe,UAAkB;AACnE,QAAM,QAAQ,OAAO,SAAqC,EAAE;AAC5D,QAAM,UAAU,OAAO,gBAAgB,KAAK;AAC5C,SAAO,EAAE,OAAO,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,OAAO,QAAQ,EAAE;AAChE;AAEO,SAAS,gBAAgB,IAAe,UAAkB;AAChE,QAAM,aAAS,4BAAU;AAEzB,SAAO,MAAM,QAAQ,MAAM;AAC1B,UAAM,gBAAgB,CAAC,MAA0B;AAChD,UAAK,EAAU,SAAU;AAGzB,YAAM,aAAS,8BAAkB,EAAE,aAAa;AAChD,wCAAkB,QAAQ,CAAC;AAE3B,YAAM,EAAE,OAAO,OAAO,IAAI,UAAU,QAAQ,IAAI,QAAQ;AAExD,UAAI,CAAC,OAAQ;AAEb,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,OAAG,sCAAe,CAAC;AAAA,MACpB,CAAC;AAAA,IACF;AAGA,QAAI,OAAe;AAEnB,UAAM,gBAAgB,CAAC,MAA0B;AAChD,UAAK,EAAU,SAAU;AACzB,UAAI,EAAE,YAAY,SAAS,EAAE,YAAY,MAAO;AAChD,cAAQ,EAAE;AACV,cAAQ,EAAE;AAEV,YAAM,EAAE,OAAO,OAAO,IAAI,UAAU,QAAQ,IAAI,QAAQ;AAExD,UAAI,CAAC,OAAQ;AAEb,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,OAAG,sCAAe,CAAC;AAAA,MACpB,CAAC;AAAA,IACF;AAEA,UAAM,cAAc,CAAC,MAA0B;AAC9C,UAAK,EAAU,SAAU;AAEzB,YAAM,aAAS,8BAAkB,EAAE,aAAa;AAChD,4CAAsB,QAAQ,CAAC;AAE/B,YAAM,EAAE,OAAO,OAAO,IAAI,UAAU,QAAQ,IAAI,QAAQ;AAExD,UAAI,CAAC,OAAQ;AAEb,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,OAAG,sCAAe,CAAC;AAAA,MACpB,CAAC;AAAA,IACF;AAEA,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD,GAAG,CAAC,QAAQ,IAAI,QAAQ,CAAC;AAC1B;",
+  "sourcesContent": ["import { TLArrowShape, TLLineShape, TLShapeId } from '@tldraw/tlschema'\nimport * as React from 'react'\nimport { Editor } from '../editor/Editor'\nimport { loopToHtmlElement, releasePointerCapture, setPointerCapture } from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\nimport { useEditor } from './useEditor'\n\nfunction getHandle(editor: Editor, id: TLShapeId, handleId: string) {\n\tconst shape = editor.getShape<TLArrowShape | TLLineShape>(id)!\n\tconst handles = editor.getShapeHandles(shape)!\n\treturn { shape, handle: handles.find((h) => h.id === handleId) }\n}\n\nexport function useHandleEvents(id: TLShapeId, handleId: string) {\n\tconst editor = useEditor()\n\n\treturn React.useMemo(() => {\n\t\tconst onPointerDown = (e: React.PointerEvent) => {\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\n\t\t\t// Must set pointer capture on an HTML element!\n\t\t\tconst target = loopToHtmlElement(e.currentTarget)\n\t\t\tsetPointerCapture(target, e)\n\n\t\t\tconst { shape, handle } = getHandle(editor, id, handleId)\n\n\t\t\tif (!handle) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'handle',\n\t\t\t\thandle,\n\t\t\t\tshape,\n\t\t\t\tname: 'pointer_down',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t})\n\t\t}\n\n\t\t// Track the last screen point\n\t\tlet lastX: number, lastY: number\n\n\t\tconst onPointerMove = (e: React.PointerEvent) => {\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\tif (e.clientX === lastX && e.clientY === lastY) return\n\t\t\tlastX = e.clientX\n\t\t\tlastY = e.clientY\n\n\t\t\tconst { shape, handle } = getHandle(editor, id, handleId)\n\n\t\t\tif (!handle) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'handle',\n\t\t\t\thandle,\n\t\t\t\tshape,\n\t\t\t\tname: 'pointer_move',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t})\n\t\t}\n\n\t\tconst onPointerUp = (e: React.PointerEvent) => {\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\n\t\t\tconst target = loopToHtmlElement(e.currentTarget)\n\t\t\treleasePointerCapture(target, e)\n\n\t\t\tconst { shape, handle } = getHandle(editor, id, handleId)\n\n\t\t\tif (!handle) return\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'handle',\n\t\t\t\thandle,\n\t\t\t\tshape,\n\t\t\t\tname: 'pointer_up',\n\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t})\n\t\t}\n\n\t\treturn {\n\t\t\tonPointerDown,\n\t\t\tonPointerMove,\n\t\t\tonPointerUp,\n\t\t}\n\t}, [editor, id, handleId])\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AAEvB,iBAA4E;AAC5E,4BAA+B;AAC/B,uBAA0B;AAE1B,SAAS,UAAU,QAAgB,IAAe,UAAkB;AACnE,QAAM,QAAQ,OAAO,SAAqC,EAAE;AAC5D,QAAM,UAAU,OAAO,gBAAgB,KAAK;AAC5C,SAAO,EAAE,OAAO,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,OAAO,QAAQ,EAAE;AAChE;AAEO,SAAS,gBAAgB,IAAe,UAAkB;AAChE,QAAM,aAAS,4BAAU;AAEzB,SAAO,MAAM,QAAQ,MAAM;AAC1B,UAAM,gBAAgB,CAAC,MAA0B;AAChD,UAAI,OAAO,uBAAuB,CAAC,EAAG;AAGtC,YAAM,aAAS,8BAAkB,EAAE,aAAa;AAChD,wCAAkB,QAAQ,CAAC;AAE3B,YAAM,EAAE,OAAO,OAAO,IAAI,UAAU,QAAQ,IAAI,QAAQ;AAExD,UAAI,CAAC,OAAQ;AAEb,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,OAAG,sCAAe,QAAQ,CAAC;AAAA,MAC5B,CAAC;AAAA,IACF;AAGA,QAAI,OAAe;AAEnB,UAAM,gBAAgB,CAAC,MAA0B;AAChD,UAAI,OAAO,uBAAuB,CAAC,EAAG;AACtC,UAAI,EAAE,YAAY,SAAS,EAAE,YAAY,MAAO;AAChD,cAAQ,EAAE;AACV,cAAQ,EAAE;AAEV,YAAM,EAAE,OAAO,OAAO,IAAI,UAAU,QAAQ,IAAI,QAAQ;AAExD,UAAI,CAAC,OAAQ;AAEb,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,OAAG,sCAAe,QAAQ,CAAC;AAAA,MAC5B,CAAC;AAAA,IACF;AAEA,UAAM,cAAc,CAAC,MAA0B;AAC9C,UAAI,OAAO,uBAAuB,CAAC,EAAG;AAEtC,YAAM,aAAS,8BAAkB,EAAE,aAAa;AAChD,4CAAsB,QAAQ,CAAC;AAE/B,YAAM,EAAE,OAAO,OAAO,IAAI,UAAU,QAAQ,IAAI,QAAQ;AAExD,UAAI,CAAC,OAAQ;AAEb,aAAO,SAAS;AAAA,QACf,MAAM;AAAA,QACN,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,OAAG,sCAAe,QAAQ,CAAC;AAAA,MAC5B,CAAC;AAAA,IACF;AAEA,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD,GAAG,CAAC,QAAQ,IAAI,QAAQ,CAAC;AAC1B;",
   "names": []
 }

package/dist-cjs/lib/hooks/usePassThroughMouseOverEvents.js

@@ -24,11 +24,14 @@ module.exports = __toCommonJS(usePassThroughMouseOverEvents_exports);
 var import_react = require("react");
 var import_dom = require("../utils/dom");
 var import_useContainer = require("./useContainer");
+var import_useEditor = require("./useEditor");
 function usePassThroughMouseOverEvents(ref) {
   if (!ref) throw Error("usePassThroughWheelEvents must be passed a ref");
   const container = (0, import_useContainer.useContainer)();
+  const editor = (0, import_useEditor.useMaybeEditor)();
   (0, import_react.useEffect)(() => {
     function onMouseOver(e) {
+      if (!editor?.getInstanceState().isFocused) return;
       if (e.isSpecialRedispatchedEvent) return;
       (0, import_dom.preventDefault)(e);
       const cvs = container.querySelector(".tl-canvas");
@@ -43,6 +46,6 @@ function usePassThroughMouseOverEvents(ref) {
     return () => {
       elm.removeEventListener("mouseover", onMouseOver);
     };
-  }, [container, ref]);
+  }, [container, editor, ref]);
 }
 //# sourceMappingURL=usePassThroughMouseOverEvents.js.map

package/dist-cjs/lib/hooks/usePassThroughMouseOverEvents.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/usePassThroughMouseOverEvents.ts"],
-  "sourcesContent": ["import { RefObject, useEffect } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\n\n/** @public */\nexport function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\n\tuseEffect(() => {\n\t\tfunction onMouseOver(e: MouseEvent) {\n\t\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\t\t\tpreventDefault(e)\n\t\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\t\tif (!cvs) return\n\t\t\tconst newEvent = new PointerEvent(e.type, e as any)\n\t\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\t\tcvs.dispatchEvent(newEvent)\n\t\t}\n\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\telm.addEventListener('mouseover', onMouseOver, { passive: false })\n\t\treturn () => {\n\t\t\telm.removeEventListener('mouseover', onMouseOver)\n\t\t}\n\t}, [container, ref])\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AACrC,iBAA+B;AAC/B,0BAA6B;AAGtB,SAAS,8BAA8B,KAA6B;AAC1E,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,gBAAY,kCAAa;AAE/B,8BAAU,MAAM;AACf,aAAS,YAAY,GAAe;AACnC,UAAK,EAAU,2BAA4B;AAC3C,qCAAe,CAAC;AAChB,YAAM,MAAM,UAAU,cAAc,YAAY;AAChD,UAAI,CAAC,IAAK;AACV,YAAM,WAAW,IAAI,aAAa,EAAE,MAAM,CAAQ;AACjD,MAAC,SAAiB,6BAA6B;AAChD,UAAI,cAAc,QAAQ;AAAA,IAC3B;AAEA,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AAEV,QAAI,iBAAiB,aAAa,aAAa,EAAE,SAAS,MAAM,CAAC;AACjE,WAAO,MAAM;AACZ,UAAI,oBAAoB,aAAa,WAAW;AAAA,IACjD;AAAA,EACD,GAAG,CAAC,WAAW,GAAG,CAAC;AACpB;",
+  "sourcesContent": ["import { RefObject, useEffect } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\nimport { useMaybeEditor } from './useEditor'\n\n/** @public */\nexport function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\tconst editor = useMaybeEditor()\n\n\tuseEffect(() => {\n\t\tfunction onMouseOver(e: MouseEvent) {\n\t\t\tif (!editor?.getInstanceState().isFocused) return\n\t\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\t\t\tpreventDefault(e)\n\t\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\t\tif (!cvs) return\n\t\t\tconst newEvent = new PointerEvent(e.type, e as any)\n\t\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\t\tcvs.dispatchEvent(newEvent)\n\t\t}\n\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\telm.addEventListener('mouseover', onMouseOver, { passive: false })\n\t\treturn () => {\n\t\t\telm.removeEventListener('mouseover', onMouseOver)\n\t\t}\n\t}, [container, editor, ref])\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AACrC,iBAA+B;AAC/B,0BAA6B;AAC7B,uBAA+B;AAGxB,SAAS,8BAA8B,KAA6B;AAC1E,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,gBAAY,kCAAa;AAC/B,QAAM,aAAS,iCAAe;AAE9B,8BAAU,MAAM;AACf,aAAS,YAAY,GAAe;AACnC,UAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAC3C,UAAK,EAAU,2BAA4B;AAC3C,qCAAe,CAAC;AAChB,YAAM,MAAM,UAAU,cAAc,YAAY;AAChD,UAAI,CAAC,IAAK;AACV,YAAM,WAAW,IAAI,aAAa,EAAE,MAAM,CAAQ;AACjD,MAAC,SAAiB,6BAA6B;AAChD,UAAI,cAAc,QAAQ;AAAA,IAC3B;AAEA,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AAEV,QAAI,iBAAiB,aAAa,aAAa,EAAE,SAAS,MAAM,CAAC;AACjE,WAAO,MAAM;AACZ,UAAI,oBAAoB,aAAa,WAAW;AAAA,IACjD;AAAA,EACD,GAAG,CAAC,WAAW,QAAQ,GAAG,CAAC;AAC5B;",
   "names": []
 }

package/dist-cjs/lib/hooks/useSelectionEvents.js

@@ -31,14 +31,14 @@ function useSelectionEvents(handle) {
   const events = (0, import_react.useMemo)(
     function selectionEvents() {
       const onPointerDown = (e) => {
-        if (e.isKilled) return;
+        if (editor.wasEventAlreadyHandled(e)) return;
         if (e.button === import_constants.RIGHT_MOUSE_BUTTON) {
           editor.dispatch({
             type: "pointer",
             target: "selection",
             handle,
             name: "right_click",
-            ...(0, import_getPointerInfo.getPointerInfo)(e)
+            ...(0, import_getPointerInfo.getPointerInfo)(editor, e)
           });
           return;
         }
@@ -55,13 +55,13 @@ function useSelectionEvents(handle) {
           type: "pointer",
           target: "selection",
           handle,
-          ...(0, import_getPointerInfo.getPointerInfo)(e)
+          ...(0, import_getPointerInfo.getPointerInfo)(editor, e)
         });
-        (0, import_dom.stopEventPropagation)(e);
+        editor.markEventAsHandled(e);
       };
       let lastX, lastY;
       function onPointerMove(e) {
-        if (e.isKilled) return;
+        if (editor.wasEventAlreadyHandled(e)) return;
         if (e.button !== 0) return;
         if (e.clientX === lastX && e.clientY === lastY) return;
         lastX = e.clientX;
@@ -71,18 +71,18 @@ function useSelectionEvents(handle) {
           type: "pointer",
           target: "selection",
           handle,
-          ...(0, import_getPointerInfo.getPointerInfo)(e)
+          ...(0, import_getPointerInfo.getPointerInfo)(editor, e)
         });
       }
       const onPointerUp = (e) => {
-        if (e.isKilled) return;
+        if (editor.wasEventAlreadyHandled(e)) return;
         if (e.button !== 0) return;
         editor.dispatch({
           name: "pointer_up",
           type: "pointer",
           target: "selection",
           handle,
-          ...(0, import_getPointerInfo.getPointerInfo)(e)
+          ...(0, import_getPointerInfo.getPointerInfo)(editor, e)
         });
       };
       return {

package/dist-cjs/lib/hooks/useSelectionEvents.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useSelectionEvents.ts"],
-  "sourcesContent": ["import { useMemo } from 'react'\nimport { RIGHT_MOUSE_BUTTON } from '../constants'\nimport { TLSelectionHandle } from '../editor/types/selection-types'\nimport {\n\tloopToHtmlElement,\n\treleasePointerCapture,\n\tsetPointerCapture,\n\tstopEventPropagation,\n} from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\nimport { useEditor } from './useEditor'\n\n/** @public */\nexport function useSelectionEvents(handle: TLSelectionHandle) {\n\tconst editor = useEditor()\n\n\tconst events = useMemo(\n\t\tfunction selectionEvents() {\n\t\t\tconst onPointerDown: React.PointerEventHandler = (e) => {\n\t\t\t\tif ((e as any).isKilled) return\n\n\t\t\t\tif (e.button === RIGHT_MOUSE_BUTTON) {\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\t\thandle,\n\t\t\t\t\t\tname: 'right_click',\n\t\t\t\t\t\t...getPointerInfo(e),\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tif (e.button !== 0) return\n\n\t\t\t\t// Because the events are probably set on SVG elements,\n\t\t\t\t// we need to instead place pointer capture on the first HTML\n\t\t\t\t// element above the event's target; and set a listener to\n\t\t\t\t// remove pointer capture when the pointer is released.\n\n\t\t\t\tconst elm = loopToHtmlElement(e.currentTarget)\n\n\t\t\t\tfunction releaseCapture() {\n\t\t\t\t\telm.removeEventListener('pointerup', releaseCapture)\n\t\t\t\t\treleasePointerCapture(elm, e)\n\t\t\t\t}\n\n\t\t\t\tsetPointerCapture(elm, e)\n\t\t\t\telm.addEventListener('pointerup', releaseCapture)\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\tname: 'pointer_down',\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle,\n\t\t\t\t\t...getPointerInfo(e),\n\t\t\t\t})\n\t\t\t\tstopEventPropagation(e)\n\t\t\t}\n\n\t\t\t// Track the last screen point\n\t\t\tlet lastX: number, lastY: number\n\n\t\t\tfunction onPointerMove(e: React.PointerEvent) {\n\t\t\t\tif ((e as any).isKilled) return\n\t\t\t\tif (e.button !== 0) return\n\t\t\t\tif (e.clientX === lastX && e.clientY === lastY) return\n\t\t\t\tlastX = e.clientX\n\t\t\t\tlastY = e.clientY\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\tname: 'pointer_move',\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle,\n\t\t\t\t\t...getPointerInfo(e),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tconst onPointerUp: React.PointerEventHandler = (e) => {\n\t\t\t\tif ((e as any).isKilled) return\n\t\t\t\tif (e.button !== 0) return\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\tname: 'pointer_up',\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle,\n\t\t\t\t\t...getPointerInfo(e),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tonPointerDown,\n\t\t\t\tonPointerMove,\n\t\t\t\tonPointerUp,\n\t\t\t}\n\t\t},\n\t\t[editor, handle]\n\t)\n\n\treturn events\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwB;AACxB,uBAAmC;AAEnC,iBAKO;AACP,4BAA+B;AAC/B,uBAA0B;AAGnB,SAAS,mBAAmB,QAA2B;AAC7D,QAAM,aAAS,4BAAU;AAEzB,QAAM,aAAS;AAAA,IACd,SAAS,kBAAkB;AAC1B,YAAM,gBAA2C,CAAC,MAAM;AACvD,YAAK,EAAU,SAAU;AAEzB,YAAI,EAAE,WAAW,qCAAoB;AACpC,iBAAO,SAAS;AAAA,YACf,MAAM;AAAA,YACN,QAAQ;AAAA,YACR;AAAA,YACA,MAAM;AAAA,YACN,OAAG,sCAAe,CAAC;AAAA,UACpB,CAAC;AACD;AAAA,QACD;AAEA,YAAI,EAAE,WAAW,EAAG;AAOpB,cAAM,UAAM,8BAAkB,EAAE,aAAa;AAE7C,iBAAS,iBAAiB;AACzB,cAAI,oBAAoB,aAAa,cAAc;AACnD,gDAAsB,KAAK,CAAC;AAAA,QAC7B;AAEA,0CAAkB,KAAK,CAAC;AACxB,YAAI,iBAAiB,aAAa,cAAc;AAEhD,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,OAAG,sCAAe,CAAC;AAAA,QACpB,CAAC;AACD,6CAAqB,CAAC;AAAA,MACvB;AAGA,UAAI,OAAe;AAEnB,eAAS,cAAc,GAAuB;AAC7C,YAAK,EAAU,SAAU;AACzB,YAAI,EAAE,WAAW,EAAG;AACpB,YAAI,EAAE,YAAY,SAAS,EAAE,YAAY,MAAO;AAChD,gBAAQ,EAAE;AACV,gBAAQ,EAAE;AAEV,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,OAAG,sCAAe,CAAC;AAAA,QACpB,CAAC;AAAA,MACF;AAEA,YAAM,cAAyC,CAAC,MAAM;AACrD,YAAK,EAAU,SAAU;AACzB,YAAI,EAAE,WAAW,EAAG;AAEpB,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,OAAG,sCAAe,CAAC;AAAA,QACpB,CAAC;AAAA,MACF;AAEA,aAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAC,QAAQ,MAAM;AAAA,EAChB;AAEA,SAAO;AACR;",
+  "sourcesContent": ["import { useMemo } from 'react'\nimport { RIGHT_MOUSE_BUTTON } from '../constants'\nimport { TLSelectionHandle } from '../editor/types/selection-types'\nimport { loopToHtmlElement, releasePointerCapture, setPointerCapture } from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\nimport { useEditor } from './useEditor'\n\n/** @public */\nexport function useSelectionEvents(handle: TLSelectionHandle) {\n\tconst editor = useEditor()\n\n\tconst events = useMemo(\n\t\tfunction selectionEvents() {\n\t\t\tconst onPointerDown: React.PointerEventHandler = (e) => {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\n\t\t\t\tif (e.button === RIGHT_MOUSE_BUTTON) {\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\t\thandle,\n\t\t\t\t\t\tname: 'right_click',\n\t\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tif (e.button !== 0) return\n\n\t\t\t\t// Because the events are probably set on SVG elements,\n\t\t\t\t// we need to instead place pointer capture on the first HTML\n\t\t\t\t// element above the event's target; and set a listener to\n\t\t\t\t// remove pointer capture when the pointer is released.\n\n\t\t\t\tconst elm = loopToHtmlElement(e.currentTarget)\n\n\t\t\t\tfunction releaseCapture() {\n\t\t\t\t\telm.removeEventListener('pointerup', releaseCapture)\n\t\t\t\t\treleasePointerCapture(elm, e)\n\t\t\t\t}\n\n\t\t\t\tsetPointerCapture(elm, e)\n\t\t\t\telm.addEventListener('pointerup', releaseCapture)\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\tname: 'pointer_down',\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle,\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t})\n\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t}\n\n\t\t\t// Track the last screen point\n\t\t\tlet lastX: number, lastY: number\n\n\t\t\tfunction onPointerMove(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tif (e.button !== 0) return\n\t\t\t\tif (e.clientX === lastX && e.clientY === lastY) return\n\t\t\t\tlastX = e.clientX\n\t\t\t\tlastY = e.clientY\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\tname: 'pointer_move',\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle,\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tconst onPointerUp: React.PointerEventHandler = (e) => {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tif (e.button !== 0) return\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\tname: 'pointer_up',\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle,\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tonPointerDown,\n\t\t\t\tonPointerMove,\n\t\t\t\tonPointerUp,\n\t\t\t}\n\t\t},\n\t\t[editor, handle]\n\t)\n\n\treturn events\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwB;AACxB,uBAAmC;AAEnC,iBAA4E;AAC5E,4BAA+B;AAC/B,uBAA0B;AAGnB,SAAS,mBAAmB,QAA2B;AAC7D,QAAM,aAAS,4BAAU;AAEzB,QAAM,aAAS;AAAA,IACd,SAAS,kBAAkB;AAC1B,YAAM,gBAA2C,CAAC,MAAM;AACvD,YAAI,OAAO,uBAAuB,CAAC,EAAG;AAEtC,YAAI,EAAE,WAAW,qCAAoB;AACpC,iBAAO,SAAS;AAAA,YACf,MAAM;AAAA,YACN,QAAQ;AAAA,YACR;AAAA,YACA,MAAM;AAAA,YACN,OAAG,sCAAe,QAAQ,CAAC;AAAA,UAC5B,CAAC;AACD;AAAA,QACD;AAEA,YAAI,EAAE,WAAW,EAAG;AAOpB,cAAM,UAAM,8BAAkB,EAAE,aAAa;AAE7C,iBAAS,iBAAiB;AACzB,cAAI,oBAAoB,aAAa,cAAc;AACnD,gDAAsB,KAAK,CAAC;AAAA,QAC7B;AAEA,0CAAkB,KAAK,CAAC;AACxB,YAAI,iBAAiB,aAAa,cAAc;AAEhD,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,OAAG,sCAAe,QAAQ,CAAC;AAAA,QAC5B,CAAC;AACD,eAAO,mBAAmB,CAAC;AAAA,MAC5B;AAGA,UAAI,OAAe;AAEnB,eAAS,cAAc,GAAuB;AAC7C,YAAI,OAAO,uBAAuB,CAAC,EAAG;AACtC,YAAI,EAAE,WAAW,EAAG;AACpB,YAAI,EAAE,YAAY,SAAS,EAAE,YAAY,MAAO;AAChD,gBAAQ,EAAE;AACV,gBAAQ,EAAE;AAEV,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,OAAG,sCAAe,QAAQ,CAAC;AAAA,QAC5B,CAAC;AAAA,MACF;AAEA,YAAM,cAAyC,CAAC,MAAM;AACrD,YAAI,OAAO,uBAAuB,CAAC,EAAG;AACtC,YAAI,EAAE,WAAW,EAAG;AAEpB,eAAO,SAAS;AAAA,UACf,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,UACR;AAAA,UACA,OAAG,sCAAe,QAAQ,CAAC;AAAA,QAC5B,CAAC;AAAA,MACF;AAEA,aAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAC,QAAQ,MAAM;AAAA,EAChB;AAEA,SAAO;AACR;",
   "names": []
 }

package/dist-cjs/lib/license/LicenseManager.js

@@ -25,16 +25,26 @@ __export(LicenseManager_exports, {
 });
 module.exports = __toCommonJS(LicenseManager_exports);
 var import_state = require("@tldraw/state");
-var import_utils = require("@tldraw/utils");
 var import_version = require("../../version");
 var import_assets = require("../utils/assets");
 var import_licensing = require("../utils/licensing");
-const GRACE_PERIOD_DAYS = 5;
+const GRACE_PERIOD_DAYS = 30;
 const FLAGS = {
+  // -- MUTUALLY EXCLUSIVE FLAGS --
+  // Annual means the license expires after a time period, usually 1 year.
   ANNUAL_LICENSE: 1,
-  PERPETUAL_LICENSE: 2,
-  INTERNAL_LICENSE: 4,
-  WITH_WATERMARK: 8
+  // 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));
 const PROPERTIES = {
@@ -59,10 +69,12 @@ class LicenseManager {
     this.publicKey = testPublicKey || this.publicKey;
     this.isCryptoAvailable = !!crypto.subtle;
     this.getLicenseFromKey(licenseKey).then((result) => {
-      const licenseState = getLicenseState(result);
-      if (!this.isDevelopment && licenseState === "unlicensed") {
-        (0, import_utils.fetch)(WATERMARK_TRACK_SRC);
-      }
+      const licenseState = getLicenseState(
+        result,
+        (messages) => this.outputMessages(messages),
+        this.isDevelopment
+      );
+      this.maybeTrack(result, licenseState);
       this.state.set(licenseState);
     }).catch((error) => {
       console.error("License validation failed:", error);
@@ -74,6 +86,37 @@ class LicenseManager {
     if (testEnvironment === "production") return false;
     return !["https:", "vscode-webview:"].includes(window.location.protocol) || window.location.hostname === "localhost";
   }
+  getTrackType(result, licenseState) {
+    if (licenseState === "unlicensed-production") {
+      return "unlicensed";
+    }
+    if (this.isDevelopment) {
+      return null;
+    }
+    if (!result.isLicenseParseable) {
+      return null;
+    }
+    if (result.isEvaluationLicense) {
+      return "evaluation";
+    }
+    if (licenseState === "licensed-with-watermark") {
+      return "with_watermark";
+    }
+    return null;
+  }
+  maybeTrack(result, licenseState) {
+    const trackType = this.getTrackType(result, licenseState);
+    if (!trackType) {
+      return;
+    }
+    const url = new URL(WATERMARK_TRACK_SRC);
+    url.searchParams.set("version", import_version.version);
+    url.searchParams.set("license_type", trackType);
+    if ("license" in result) {
+      url.searchParams.set("license_id", result.license.id);
+    }
+    fetch(url.toString());
+  }
   async extractLicenseKey(licenseKey) {
     const [data, signature] = licenseKey.split(".");
     const [prefix, encodedData] = data.split("/");
@@ -141,6 +184,8 @@ class LicenseManager {
       const expiryDate = new Date(licenseInfo.expiryDate);
       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 = {
         license: licenseInfo,
         isLicenseParseable: true,
@@ -152,7 +197,11 @@ class LicenseManager {
         isPerpetualLicense,
         isPerpetualLicenseExpired: isPerpetualLicense && this.isPerpetualLicenseExpired(expiryDate),
         isInternalLicense: this.isFlagEnabled(licenseInfo.flags, FLAGS.INTERNAL_LICENSE),
-        isLicensedWithWatermark: this.isFlagEnabled(licenseInfo.flags, FLAGS.WITH_WATERMARK)
+        isNativeLicense: this.isNativeLicense(licenseInfo),
+        isLicensedWithWatermark: this.isFlagEnabled(licenseInfo.flags, FLAGS.WITH_WATERMARK),
+        isEvaluationLicense,
+        isEvaluationLicenseExpired: isEvaluationLicense && this.isEvaluationLicenseExpired(expiryDate),
+        daysSinceExpiry
       };
       this.outputLicenseInfoIfNeeded(result);
       return result;
@@ -164,13 +213,16 @@ class LicenseManager {
   isDomainValid(licenseInfo) {
     const currentHostname = window.location.hostname.toLowerCase();
     return licenseInfo.hosts.some((host) => {
-      const normalizedHost = host.toLowerCase().trim();
-      if (normalizedHost === currentHostname || `www.${normalizedHost}` === currentHostname || normalizedHost === `www.${currentHostname}`) {
+      const normalizedHostOrUrlRegex = host.toLowerCase().trim();
+      if (normalizedHostOrUrlRegex === currentHostname || `www.${normalizedHostOrUrlRegex}` === currentHostname || normalizedHostOrUrlRegex === `www.${currentHostname}`) {
         return true;
       }
       if (host === "*") {
         return true;
       }
+      if (this.isNativeLicense(licenseInfo)) {
+        return new RegExp(normalizedHostOrUrlRegex).test(window.location.href);
+      }
       if (host.includes("*")) {
         const globToRegex = new RegExp(host.replace(/\*/g, ".*?"));
         return globToRegex.test(currentHostname) || globToRegex.test(`www.${currentHostname}`);
@@ -178,13 +230,16 @@ 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;
         }
       }
       return false;
     });
   }
+  isNativeLicense(licenseInfo) {
+    return this.isFlagEnabled(licenseInfo.flags, FLAGS.NATIVE_LICENSE);
+  }
   getExpirationDateWithoutGracePeriod(expiryDate) {
     return new Date(expiryDate.getFullYear(), expiryDate.getMonth(), expiryDate.getDate());
   }
@@ -198,14 +253,7 @@ class LicenseManager {
   }
   isAnnualLicenseExpired(expiryDate) {
     const expiration = this.getExpirationDateWithGracePeriod(expiryDate);
-    const isExpired = /* @__PURE__ */ new Date() >= expiration;
-    if (!isExpired && /* @__PURE__ */ 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 /* @__PURE__ */ new Date() >= expiration;
   }
   isPerpetualLicenseExpired(expiryDate) {
     const expiration = this.getExpirationDateWithGracePeriod(expiryDate);
@@ -215,6 +263,18 @@ class LicenseManager {
     };
     return dates.major >= expiration || dates.minor >= expiration;
   }
+  getDaysSinceExpiry(expiryDate) {
+    const now = /* @__PURE__ */ new Date();
+    const expiration = this.getExpirationDateWithoutGracePeriod(expiryDate);
+    const diffTime = now.getTime() - expiration.getTime();
+    const diffDays = Math.floor(diffTime / (1e3 * 60 * 60 * 24));
+    return Math.max(0, diffDays);
+  }
+  isEvaluationLicenseExpired(expiryDate) {
+    const now = /* @__PURE__ */ new Date();
+    const expiration = this.getExpirationDateWithoutGracePeriod(expiryDate);
+    return now >= expiration;
+  }
   isFlagEnabled(flags, flag) {
     return (flags & flag) === flag;
   }
@@ -224,18 +284,6 @@ class LicenseManager {
     this.outputMessages(["Invalid tldraw license key", `Reason: ${msg}`]);
   }
   outputLicenseInfoIfNeeded(result) {
-    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 (result.license.flags >= HIGHEST_FLAG * 2) {
       this.outputMessages([
         "This tldraw license contains some unknown flags.",
@@ -264,12 +312,59 @@ class LicenseManager {
   }
   static className = "tl-watermark_SEE-LICENSE";
 }
-function getLicenseState(result) {
-  if (!result.isLicenseParseable) return "unlicensed";
-  if (!result.isDomainValid && !result.isDevelopment) return "unlicensed";
+function getLicenseState(result, outputMessages, isDevelopment) {
+  if (!result.isLicenseParseable) {
+    if (isDevelopment) {
+      return "unlicensed";
+    }
+    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";
+  }
+  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 {
+      return "licensed";
+    }
+  }
   if (result.isPerpetualLicenseExpired || result.isAnnualLicenseExpired) {
-    const internalExpired = result.isInternalLicense && result.isDomainValid;
-    return internalExpired ? "internal-expired" : "unlicensed";
+    outputMessages([
+      "Your tldraw license has been expired for more than 30 days!",
+      `Please reach out to ${LICENSE_EMAIL} to renew your license.`
+    ]);
+    return "expired";
+  }
+  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.`
+    ]);
+    return "licensed";
   }
   if (result.isLicensedWithWatermark) {
     return "licensed-with-watermark";