@tldraw/editor 5.3.0-next.91d2a20b898c → 5.3.0-next.aefb8773a7eb

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

@@ -4,6 +4,7 @@ import { publishDates } from '../../version'
 import { str2ab } from '../utils/licensing'
 import {
 	FLAGS,
+	getEnabledFeatures,
 	getLicenseState,
 	LicenseManager,
 	PROPERTIES,
@@ -508,6 +509,62 @@ describe('LicenseManager', () => {
 			expect(result.isEvaluationLicense).toBe(true)
 			expect(result.isEvaluationLicenseExpired).toBe(true)
 		})
+
+		it('Checks for the commenting feature flag', async () => {
+			const commentingLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			commentingLicenseInfo[PROPERTIES.FLAGS] |= FLAGS.FEAT_COMMENTING
+			const commentingLicenseKey = await generateLicenseKey(
+				JSON.stringify(commentingLicenseInfo),
+				keyPair
+			)
+			const result = (await licenseManager.getLicenseFromKey(
+				commentingLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isCommentingEnabled).toBe(true)
+			expect(result.isCollaborationEnabled).toBe(false)
+		})
+
+		it('Checks for the collaboration feature flag', async () => {
+			const collaborationLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			collaborationLicenseInfo[PROPERTIES.FLAGS] |= FLAGS.FEAT_COLLABORATION
+			const collaborationLicenseKey = await generateLicenseKey(
+				JSON.stringify(collaborationLicenseInfo),
+				keyPair
+			)
+			const result = (await licenseManager.getLicenseFromKey(
+				collaborationLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isCollaborationEnabled).toBe(true)
+			// The collaboration umbrella grants the commenting sub-feature.
+			expect(result.isCommentingEnabled).toBe(true)
+		})
+
+		it('Leaves feature flags off when no feature bits are set', async () => {
+			const standardLicenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+			const result = (await licenseManager.getLicenseFromKey(
+				standardLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isCollaborationEnabled).toBe(false)
+			expect(result.isCommentingEnabled).toBe(false)
+		})
+
+		it('Enables features synchronously in development, before validation resolves', () => {
+			process.env.NODE_ENV = 'development'
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('https://www.example.com')
+
+			try {
+				// No await: the feature flags should already reflect development (all enabled) rather
+				// than the fail-closed default, which only lifts once async validation resolves.
+				const devLicenseManager = new LicenseManager('', keyPair.publicKey)
+				expect(devLicenseManager.isFeatureEnabled('commenting')).toBe(true)
+				expect(devLicenseManager.isFeatureEnabled('collaboration')).toBe(true)
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
 	})
 
 	describe('Expiry date timezone handling', () => {
@@ -793,6 +850,8 @@ function getDefaultLicenseResult(overrides: Partial<ValidLicenseKeyResult>): Val
 		isLicensedWithWatermark: false,
 		isEvaluationLicense: false,
 		isEvaluationLicenseExpired: false,
+		isCollaborationEnabled: false,
+		isCommentingEnabled: false,
 		daysSinceExpiry: 0,
 		// WatermarkManager does not check these fields, it relies on the calculated values like isAnnualLicenseExpired
 		license: {
@@ -1094,3 +1153,90 @@ describe('getLicenseState', () => {
 		})
 	})
 })
+
+describe('getEnabledFeatures', () => {
+	it('enables every feature in development regardless of flags', () => {
+		const result = getDefaultLicenseResult({
+			isCollaborationEnabled: false,
+			isCommentingEnabled: false,
+		})
+		expect(getEnabledFeatures(result, 'unlicensed', true)).toEqual({
+			collaboration: true,
+			commenting: true,
+		})
+	})
+
+	it('reflects the license flags for a valid licensed state', () => {
+		const result = getDefaultLicenseResult({
+			isCollaborationEnabled: false,
+			isCommentingEnabled: true,
+		})
+		expect(getEnabledFeatures(result, 'licensed', false)).toEqual({
+			collaboration: false,
+			commenting: true,
+		})
+	})
+
+	it('still grants features while showing a watermark', () => {
+		const result = getDefaultLicenseResult({
+			isCollaborationEnabled: true,
+			isCommentingEnabled: true,
+		})
+		expect(getEnabledFeatures(result, 'licensed-with-watermark', false)).toEqual({
+			collaboration: true,
+			commenting: true,
+		})
+	})
+
+	it.each(['unlicensed', 'unlicensed-production', 'expired', 'pending'] as const)(
+		'disables all features for the %s state in production',
+		(state) => {
+			const result = getDefaultLicenseResult({
+				isCollaborationEnabled: true,
+				isCommentingEnabled: true,
+			})
+			expect(getEnabledFeatures(result, state, false)).toEqual({
+				collaboration: false,
+				commenting: false,
+			})
+		}
+	)
+
+	it('enables every feature for an evaluation license regardless of flags', () => {
+		const result = getDefaultLicenseResult({
+			isEvaluationLicense: true,
+			isCollaborationEnabled: false,
+			isCommentingEnabled: false,
+		})
+		expect(getEnabledFeatures(result, 'licensed', false)).toEqual({
+			collaboration: true,
+			commenting: true,
+		})
+	})
+
+	it('disables all features for an expired evaluation license', () => {
+		const result = getDefaultLicenseResult({
+			isEvaluationLicense: true,
+			isEvaluationLicenseExpired: true,
+			isCollaborationEnabled: false,
+			isCommentingEnabled: false,
+		})
+		expect(getEnabledFeatures(result, 'expired', false)).toEqual({
+			collaboration: false,
+			commenting: false,
+		})
+	})
+
+	it('disables all features when the license is not parseable', () => {
+		expect(
+			getEnabledFeatures(
+				{ isLicenseParseable: false, reason: 'no-key-provided' },
+				'licensed',
+				false
+			)
+		).toEqual({
+			collaboration: false,
+			commenting: false,
+		})
+	})
+})

package/src/lib/license/LicenseManager.ts

@@ -1,4 +1,4 @@
-import { atom } from '@tldraw/state'
+import { atom, transact } from '@tldraw/state'
 import { publishDates, version } from '../../version'
 import { getDefaultCdnBaseUrl } from '../utils/assets'
 import { importPublicKey, str2ab } from '../utils/licensing'
@@ -22,6 +22,12 @@ export const FLAGS = {
 	// Native means the license is for native apps which switches
 	// on special-case logic.
 	NATIVE_LICENSE: 1 << 5,
+
+	// -- FEATURE FLAGS --
+	// Collaboration is the umbrella flag for collaboration features; it grants all sub-features.
+	FEAT_COLLABORATION: 1 << 6,
+	// Commenting is the first sub-feature of collaboration.
+	FEAT_COMMENTING: 1 << 7,
 }
 const HIGHEST_FLAG = Math.max(...Object.values(FLAGS))
 
@@ -45,6 +51,23 @@ export interface LicenseInfo {
 	expiryDate: string
 }
 
+/**
+ * Names of the licensable product features gated by the license. `collaboration` is an umbrella
+ * that also grants all of its sub-features (currently just `commenting`).
+ *
+ * @internal
+ */
+export type LicenseFeatureName = 'collaboration' | 'commenting'
+
+const NO_FEATURES: Readonly<Record<LicenseFeatureName, boolean>> = {
+	collaboration: false,
+	commenting: false,
+}
+const ALL_FEATURES: Readonly<Record<LicenseFeatureName, boolean>> = {
+	collaboration: true,
+	commenting: true,
+}
+
 /** @internal */
 export type LicenseState =
 	| 'pending' // License validation is in progress
@@ -84,6 +107,8 @@ export interface ValidLicenseKeyResult {
 	isLicensedWithWatermark: boolean
 	isEvaluationLicense: boolean
 	isEvaluationLicenseExpired: boolean
+	isCollaborationEnabled: boolean
+	isCommentingEnabled: boolean
 	daysSinceExpiry: number
 }
 
@@ -98,6 +123,9 @@ export class LicenseManager {
 	public isTest: boolean
 	public isCryptoAvailable: boolean
 	state = atom<LicenseState>('license state', 'pending')
+	featureFlags = atom<Record<LicenseFeatureName, boolean>>('license feature flags', {
+		...NO_FEATURES,
+	})
 	public verbose = true
 
 	constructor(licenseKey: string | undefined, testPublicKey?: string) {
@@ -106,6 +134,14 @@ export class LicenseManager {
 		this.publicKey = testPublicKey || this.publicKey
 		this.isCryptoAvailable = !!crypto.subtle
 
+		// In development every feature is enabled (see `getEnabledFeatures`), and that doesn't depend
+		// on the async validation result. Reflect it eagerly so features aren't reported as disabled
+		// during the validation window — or left disabled if validation rejects (the `.catch` below
+		// never sets `featureFlags`). In production the fail-closed default stands until validation.
+		if (this.isDevelopment) {
+			this.featureFlags.set({ ...ALL_FEATURES })
+		}
+
 		this.getLicenseFromKey(licenseKey)
 			.then((result) => {
 				const licenseState = getLicenseState(
@@ -116,7 +152,12 @@ export class LicenseManager {
 
 				this.maybeTrack(result, licenseState)
 
-				this.state.set(licenseState)
+				// Update both atoms atomically so dependents never observe the license state and the
+				// feature flags out of sync mid-update.
+				transact(() => {
+					this.state.set(licenseState)
+					this.featureFlags.set(getEnabledFeatures(result, licenseState, this.isDevelopment))
+				})
 			})
 			.catch((error) => {
 				console.error('License validation failed:', error)
@@ -124,6 +165,14 @@ export class LicenseManager {
 			})
 	}
 
+	/**
+	 * Returns whether a given licensable feature is enabled. Reactive: reading this inside a signal
+	 * recomputes when license validation resolves.
+	 */
+	isFeatureEnabled(feature: LicenseFeatureName): boolean {
+		return this.featureFlags.get()[feature]
+	}
+
 	private getIsDevelopment() {
 		// If we are using https on a non-loopback domain we assume it's a production env and a development one otherwise
 		return (
@@ -286,6 +335,12 @@ export class LicenseManager {
 			const isPerpetualLicenseExpired =
 				isPerpetualLicense && this.isPerpetualLicenseExpired(expiryDate)
 
+			// The collaboration umbrella grants all of its sub-features, so commenting is enabled
+			// by either the commenting flag or the collaboration flag.
+			const isCollaborationEnabled = this.isFlagEnabled(licenseInfo.flags, FLAGS.FEAT_COLLABORATION)
+			const isCommentingEnabled =
+				isCollaborationEnabled || this.isFlagEnabled(licenseInfo.flags, FLAGS.FEAT_COMMENTING)
+
 			// For perpetual licenses, the calendar expiry date only gates access to future
 			// major/minor releases; it does not "expire" the license itself. While the user
 			// is still on a covered version we report `daysSinceExpiry` as 0 so consumers
@@ -309,6 +364,8 @@ export class LicenseManager {
 				isEvaluationLicense,
 				isEvaluationLicenseExpired:
 					isEvaluationLicense && this.isEvaluationLicenseExpired(expiryDate),
+				isCollaborationEnabled,
+				isCommentingEnabled,
 				daysSinceExpiry,
 			}
 			this.outputLicenseInfoIfNeeded(result)
@@ -483,6 +540,45 @@ export class LicenseManager {
 	static className = 'tl-watermark_SEE-LICENSE'
 }
 
+/**
+ * Derives which licensable features are enabled from the parse result and the derived license
+ * state. In development every feature is enabled so SDK developers can build against them; in
+ * production a feature requires both an active, valid license and the corresponding flag.
+ *
+ * @internal
+ */
+export function getEnabledFeatures(
+	result: LicenseFromKeyResult,
+	licenseState: LicenseState,
+	isDevelopment: boolean
+): Record<LicenseFeatureName, boolean> {
+	// Development gets all features so SDK developers can build against them.
+	if (isDevelopment) {
+		return { ...ALL_FEATURES }
+	}
+
+	// Features require an active, valid license. Both the 30-day grace-period 'licensed' state and
+	// the watermark state count as valid; unlicensed/expired/pending do not.
+	if (
+		!result.isLicenseParseable ||
+		(licenseState !== 'licensed' && licenseState !== 'licensed-with-watermark')
+	) {
+		return { ...NO_FEATURES }
+	}
+
+	// Evaluation licenses get every feature so prospects can trial the whole product without us
+	// having to mint per-feature evaluation keys. Expired evaluation licenses are already excluded
+	// above: they resolve to the 'expired' state.
+	if (result.isEvaluationLicense) {
+		return { ...ALL_FEATURES }
+	}
+
+	return {
+		collaboration: result.isCollaborationEnabled,
+		commenting: result.isCommentingEnabled,
+	}
+}
+
 export function getLicenseState(
 	result: LicenseFromKeyResult,
 	outputMessages: (messages: string[]) => void,

package/src/lib/license/useLicenseManagerState.ts

@@ -1,7 +1,23 @@
 import { useValue } from '@tldraw/state-react'
-import { LicenseManager, LicenseState } from './LicenseManager'
+import { LicenseFeatureName, LicenseManager, LicenseState } from './LicenseManager'
 
 /** @internal */
 export function useLicenseManagerState(licenseManager: LicenseManager): LicenseState {
 	return useValue('watermarkState', () => licenseManager.state.get(), [licenseManager])
 }
+
+/**
+ * Reactively reads whether a licensable feature is enabled for the current license. Re-renders when
+ * license validation resolves.
+ *
+ * @internal
+ */
+export function useLicenseFeatureFlag(
+	licenseManager: LicenseManager,
+	feature: LicenseFeatureName
+): boolean {
+	return useValue('licenseFeature', () => licenseManager.isFeatureEnabled(feature), [
+		licenseManager,
+		feature,
+	])
+}

package/src/lib/test/EditorPortal.test.tsx

@@ -0,0 +1,48 @@
+import { act, render, screen } from '@testing-library/react'
+import { EditorPortal } from '../components/EditorPortal'
+import { createTLStore } from '../config/createTLStore'
+import { TL_CONTAINER_CLASS, TldrawEditor } from '../TldrawEditor'
+
+/** Mounted in a canvas slot — the deep-in-the-tree case the portal exists for. */
+function Portaled() {
+	return (
+		<EditorPortal>
+			<div data-testid="portaled" />
+		</EditorPortal>
+	)
+}
+
+describe('EditorPortal', () => {
+	async function renderEditor() {
+		const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
+		await act(async () => {
+			render(<TldrawEditor store={store} components={{ InFrontOfTheCanvas: Portaled }} />)
+		})
+		return document.querySelector(`.${TL_CONTAINER_CLASS}`)!
+	}
+
+	it('renders its children into the editor container', async () => {
+		const container = await renderEditor()
+		expect(container.contains(screen.getByTestId('portaled'))).toBe(true)
+	})
+
+	it('renders into a host that comes after everything the editor renders', async () => {
+		const container = await renderEditor()
+		const host = container.querySelector('.tl-portal-host')!
+		expect(host.contains(screen.getByTestId('portaled'))).toBe(true)
+		// Last of the container's rendered children. Managers append their own nodes after this one
+		// (the text measurement element, say) but those are `tabIndex = -1` and out of the tab order.
+		const rendered = [...container.children].filter((el) => !el.matches('.tl-text-measure'))
+		expect(rendered.at(-1)).toBe(host)
+	})
+
+	// The tab order guarantee: mounted in a canvas slot, the portaled content still lands after
+	// everything the editor renders itself — including (in tldraw) the UI's skip link, which only
+	// works while nothing precedes it. Portaling straight into the container lands it ahead of them.
+	it('places its children after the rest of the editor in document order', async () => {
+		await renderEditor()
+		const portaled = screen.getByTestId('portaled')
+		const canvas = screen.getByTestId('canvas')
+		expect(canvas.compareDocumentPosition(portaled) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+	})
+})

package/src/lib/utils/collaborators.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+import { isCursorInViewport } from './collaborators'
+
+// The viewport (page coords) all cases test against; zoom 1 so the 12/16px margins map 1:1.
+const viewport = { minX: 0, minY: 0, maxX: 100, maxY: 100 }
+
+describe('isCursorInViewport', () => {
+	it('is true for a cursor well inside the viewport', () => {
+		expect(isCursorInViewport({ x: 50, y: 50 }, viewport, 1)).toBe(true)
+	})
+
+	it('keeps a cursor just past the left/top edges (12/16px margin)', () => {
+		expect(isCursorInViewport({ x: -11, y: 50 }, viewport, 1)).toBe(true) // within 12 of left
+		expect(isCursorInViewport({ x: -13, y: 50 }, viewport, 1)).toBe(false) // past it
+		expect(isCursorInViewport({ x: 50, y: -15 }, viewport, 1)).toBe(true) // within 16 of top
+		expect(isCursorInViewport({ x: 50, y: -17 }, viewport, 1)).toBe(false) // past it
+	})
+
+	it('culls a cursor beyond the right/bottom edges', () => {
+		// Asymmetric with the left/top edges: the max checks subtract the margin rather than add
+		// it, so the cull starts *inside* the far edge (maxX - 12, maxY - 16) — a known quirk
+		// carried over from the pre-canvas implementation.
+		expect(isCursorInViewport({ x: 87, y: 50 }, viewport, 1)).toBe(true) // < maxX - 12 (88)
+		expect(isCursorInViewport({ x: 89, y: 50 }, viewport, 1)).toBe(false) // > 88, culled
+		expect(isCursorInViewport({ x: 50, y: 83 }, viewport, 1)).toBe(true) // < maxY - 16 (84)
+		expect(isCursorInViewport({ x: 50, y: 85 }, viewport, 1)).toBe(false) // > 84, culled
+	})
+
+	it('scales the margins by zoom', () => {
+		// At zoom 2 the left margin is 12/2 = 6px, so -7 is now culled where -11 survived at zoom 1.
+		expect(isCursorInViewport({ x: -5, y: 50 }, viewport, 2)).toBe(true)
+		expect(isCursorInViewport({ x: -7, y: 50 }, viewport, 2)).toBe(false)
+	})
+})

package/src/lib/utils/collaborators.ts

@@ -0,0 +1,25 @@
+import { VecLike } from '../primitives/Vec'
+
+/**
+ * Whether a collaborator's cursor (page coords) is inside the viewport, with a small margin for the
+ * cursor glyph so it isn't culled the instant its hotspot crosses the edge.
+ *
+ * Single source of truth for the cursor/hint split: the DOM cursor layer renders a collaborator
+ * when this is true, and `CollaboratorHintOverlayUtil` draws the viewport-edge hint when it's
+ * false. Sharing the predicate keeps those two exhaustive and mutually exclusive — a margin change
+ * can't open a dead zone (neither renders) or a double-render (both).
+ *
+ * @public
+ */
+export function isCursorInViewport(
+	cursor: VecLike,
+	viewport: { minX: number; minY: number; maxX: number; maxY: number },
+	zoom: number
+): boolean {
+	return !(
+		cursor.x < viewport.minX - 12 / zoom ||
+		cursor.y < viewport.minY - 16 / zoom ||
+		cursor.x > viewport.maxX - 12 / zoom ||
+		cursor.y > viewport.maxY - 16 / zoom
+	)
+}

package/src/lib/utils/getHtmlLayerTransform.ts

@@ -0,0 +1,22 @@
+import { modulate } from '@tldraw/utils'
+import type { Editor } from '../editor/Editor'
+import { toDomPrecision } from '../primitives/utils'
+
+/**
+ * The CSS `transform` that puts a 1px-sized html layer into page space under the current camera.
+ * Shared by every camera-tracked DOM layer (the canvas's shape layer, the collaborator cursor
+ * layer) so they line up exactly and can't drift apart.
+ *
+ * The offset compensates for the layer's 1px width/height when zoomed, so it registers precisely
+ * with the other layers.
+ *
+ * @internal
+ */
+export function getHtmlLayerTransform(editor: Editor): string {
+	const { x, y, z } = editor.getCamera()
+	const offset =
+		z >= 1 ? modulate(z, [1, 8], [0.125, 0.5], true) : modulate(z, [0.1, 1], [-2, 0.125], true)
+	return `scale(${toDomPrecision(z)}) translate(${toDomPrecision(x + offset)}px,${toDomPrecision(
+		y + offset
+	)}px)`
+}

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '5.3.0-next.91d2a20b898c'
+export const version = '5.3.0-next.aefb8773a7eb'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-07-15T09:31:43.721Z',
-	patch: '2026-07-15T09:31:43.721Z',
+	minor: '2026-08-05T09:54:21.039Z',
+	patch: '2026-08-05T09:54:21.039Z',
 }

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

@@ -1,51 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var usePassThroughMouseOverEvents_exports = {};
-__export(usePassThroughMouseOverEvents_exports, {
-  usePassThroughMouseOverEvents: () => usePassThroughMouseOverEvents
-});
-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");
-      if (!cvs) return;
-      const newEvent = new PointerEvent(e.type, e);
-      newEvent.isSpecialRedispatchedEvent = true;
-      cvs.dispatchEvent(newEvent);
-    }
-    const elm = ref.current;
-    if (!elm) return;
-    elm.addEventListener("mouseover", onMouseOver, { passive: false });
-    return () => {
-      elm.removeEventListener("mouseover", onMouseOver);
-    };
-  }, [container, editor, ref]);
-}
-//# sourceMappingURL=usePassThroughMouseOverEvents.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/hooks/usePassThroughMouseOverEvents.ts"],
-  "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 | null>) {\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,KAAoC;AACjF,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-esm/lib/hooks/usePassThroughMouseOverEvents.mjs

@@ -1,31 +0,0 @@
-import { useEffect } from "react";
-import { preventDefault } from "../utils/dom.mjs";
-import { useContainer } from "./useContainer.mjs";
-import { useMaybeEditor } from "./useEditor.mjs";
-function usePassThroughMouseOverEvents(ref) {
-  if (!ref) throw Error("usePassThroughWheelEvents must be passed a ref");
-  const container = useContainer();
-  const editor = useMaybeEditor();
-  useEffect(() => {
-    function onMouseOver(e) {
-      if (!editor?.getInstanceState().isFocused) return;
-      if (e.isSpecialRedispatchedEvent) return;
-      preventDefault(e);
-      const cvs = container.querySelector(".tl-canvas");
-      if (!cvs) return;
-      const newEvent = new PointerEvent(e.type, e);
-      newEvent.isSpecialRedispatchedEvent = true;
-      cvs.dispatchEvent(newEvent);
-    }
-    const elm = ref.current;
-    if (!elm) return;
-    elm.addEventListener("mouseover", onMouseOver, { passive: false });
-    return () => {
-      elm.removeEventListener("mouseover", onMouseOver);
-    };
-  }, [container, editor, ref]);
-}
-export {
-  usePassThroughMouseOverEvents
-};
-//# sourceMappingURL=usePassThroughMouseOverEvents.mjs.map

package/dist-esm/lib/hooks/usePassThroughMouseOverEvents.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/hooks/usePassThroughMouseOverEvents.ts"],
-  "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 | null>) {\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,SAAoB,iBAAiB;AACrC,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAGxB,SAAS,8BAA8B,KAAoC;AACjF,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,YAAY,aAAa;AAC/B,QAAM,SAAS,eAAe;AAE9B,YAAU,MAAM;AACf,aAAS,YAAY,GAAe;AACnC,UAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAC3C,UAAK,EAAU,2BAA4B;AAC3C,qBAAe,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/src/lib/hooks/usePassThroughMouseOverEvents.ts

@@ -1,32 +0,0 @@
-import { RefObject, useEffect } from 'react'
-import { preventDefault } from '../utils/dom'
-import { useContainer } from './useContainer'
-import { useMaybeEditor } from './useEditor'
-
-/** @public */
-export function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement | null>) {
-	if (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')
-	const container = useContainer()
-	const editor = useMaybeEditor()
-
-	useEffect(() => {
-		function onMouseOver(e: MouseEvent) {
-			if (!editor?.getInstanceState().isFocused) return
-			if ((e as any).isSpecialRedispatchedEvent) return
-			preventDefault(e)
-			const cvs = container.querySelector('.tl-canvas')
-			if (!cvs) return
-			const newEvent = new PointerEvent(e.type, e as any)
-			;(newEvent as any).isSpecialRedispatchedEvent = true
-			cvs.dispatchEvent(newEvent)
-		}
-
-		const elm = ref.current
-		if (!elm) return
-
-		elm.addEventListener('mouseover', onMouseOver, { passive: false })
-		return () => {
-			elm.removeEventListener('mouseover', onMouseOver)
-		}
-	}, [container, editor, ref])
-}