@tldraw/editor 5.3.0-next.fc37bd96825b → 5.3.1

package/src/lib/hooks/usePassThroughWheelEvents.ts

@@ -1,7 +1,50 @@
-import { RefObject, useEffect } from 'react'
+import { RefObject, useEffect, useRef } from 'react'
 import { preventDefault } from '../utils/dom'
 import { useContainer } from './useContainer'
 import { useMaybeEditor } from './useEditor'
+import { useEvent } from './useEvent'
+
+function isScrollableOverflow(overflow: string) {
+	return overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay'
+}
+
+// An element only consumes a wheel event when it's a real scroll container: its content overflows
+// AND its computed overflow is scrollable. Checking scrollHeight/scrollWidth alone is not enough —
+// an `overflow: visible` element whose content merely overflows (e.g. a comment pin whose hover
+// `transform: scale()` inflates scrollHeight past clientHeight) never scrolls, so the wheel must
+// still pass through to the canvas.
+function isScrollable(elm: HTMLElement) {
+	// Cheap first: if nothing overflows, it can't scroll — skip the getComputedStyle read. This runs
+	// per ancestor on every wheel event, so avoid resolving styles for the common (non-overflowing) case.
+	const overflowsY = elm.scrollHeight > elm.clientHeight
+	const overflowsX = elm.scrollWidth > elm.clientWidth
+	if (!overflowsY && !overflowsX) return false
+
+	const style = getComputedStyle(elm)
+	return (
+		(overflowsY && isScrollableOverflow(style.overflowY)) ||
+		(overflowsX && isScrollableOverflow(style.overflowX))
+	)
+}
+
+// Walk from the wheeled element up to (and including) the pass-through root, looking for a scroll
+// container. If one is found, the wheel belongs to it — don't redispatch it to the canvas.
+function hasScrollableElement(target: EventTarget | null, root: HTMLElement) {
+	if (!(target instanceof Node)) {
+		return isScrollable(root)
+	}
+
+	let elm: Element | null = target instanceof Element ? target : target.parentElement
+	while (elm) {
+		if (elm instanceof HTMLElement && isScrollable(elm)) {
+			return true
+		}
+		if (elm === root) return false
+		elm = elm.parentElement
+	}
+
+	return false
+}
 
 /** @public */
 export function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>) {
@@ -9,33 +52,49 @@ export function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>) {
 	const container = useContainer()
 	const editor = useMaybeEditor()
 
-	useEffect(() => {
-		function onWheel(e: WheelEvent) {
-			// Only pass through wheel events if the editor is focused
-			if (!editor?.getInstanceState().isFocused) return
-
-			if ((e as any).isSpecialRedispatchedEvent) return
-
-			// if the element is scrollable, don't redispatch the event
-			const elm = ref.current
-			if (elm && elm.scrollHeight > elm.clientHeight) {
-				return
-			}
-
-			preventDefault(e)
-			const cvs = container.querySelector('.tl-canvas')
-			if (!cvs) return
-			const newEvent = new WheelEvent('wheel', e as any)
-			;(newEvent as any).isSpecialRedispatchedEvent = true
-			cvs.dispatchEvent(newEvent)
+	const onWheel = useEvent((e: WheelEvent) => {
+		// Only pass through wheel events if the editor is focused
+		if (!editor?.getInstanceState().isFocused) return
+
+		if ((e as any).isSpecialRedispatchedEvent) return
+
+		// If the wheel is over a scrollable element, let it scroll instead of redispatching.
+		const elm = ref.current
+		if (elm && hasScrollableElement(e.target, elm)) {
+			return
 		}
 
+		preventDefault(e)
+		const cvs = container.querySelector('.tl-canvas')
+		if (!cvs) return
+		const newEvent = new WheelEvent('wheel', e as any)
+		;(newEvent as any).isSpecialRedispatchedEvent = true
+		cvs.dispatchEvent(newEvent)
+	})
+
+	// The element the listener is currently on, which isn't necessarily `ref.current`: a `RefObject`
+	// gives no notification when its element changes.
+	const attached = useRef<HTMLElement | null>(null)
+
+	// Deliberately no dependency array — this re-checks the ref after every render of the component
+	// that owns it, and re-attaches when the element has been swapped. A component that keeps the
+	// hook mounted while unmounting and remounting the element it points at (a comment pin culled
+	// while its anchor is off screen, say) would otherwise leave the listener on the discarded node
+	// and silently lose pass-through once the element comes back.
+	useEffect(() => {
 		const elm = ref.current
-		if (!elm) return
+		if (elm === attached.current) return
+		attached.current?.removeEventListener('wheel', onWheel)
+		attached.current = elm
+		elm?.addEventListener('wheel', onWheel, { passive: false })
+	})
 
-		elm.addEventListener('wheel', onWheel, { passive: false })
+	// Teardown is its own effect so the re-attach check above can skip returning a cleanup that
+	// would tear the listener down and rebuild it on every render.
+	useEffect(() => {
 		return () => {
-			elm.removeEventListener('wheel', onWheel)
+			attached.current?.removeEventListener('wheel', onWheel)
+			attached.current = null
 		}
-	}, [container, editor, ref])
+	}, [onWheel])
 }

package/src/lib/hooks/useTransform.ts

@@ -0,0 +1,38 @@
+import { useLayoutEffect } from 'react'
+import { VecLike } from '../primitives/Vec'
+
+/**
+ * Position an element by writing its `transform` directly, outside React's render output — the
+ * cheap path for elements that move at pointer/presence frequency.
+ * @public
+ */
+export function useTransform(
+	ref: React.RefObject<HTMLElement | SVGElement | null>,
+	x?: number,
+	y?: number,
+	scale?: number,
+	rotate?: number,
+	additionalOffset?: VecLike
+) {
+	// Read the offset into primitives so the effect can depend on them, not the object identity.
+	const additionalOffsetX = additionalOffset?.x
+	const additionalOffsetY = additionalOffset?.y
+
+	useLayoutEffect(() => {
+		const elm = ref.current
+		if (!elm) return
+		if (x === undefined) return
+
+		let trans = `translate(${x}px, ${y}px)`
+		if (scale !== undefined) {
+			trans += ` scale(${scale})`
+		}
+		if (rotate !== undefined) {
+			trans += ` rotate(${rotate}rad)`
+		}
+		if (additionalOffsetX !== undefined && additionalOffsetY !== undefined) {
+			trans += ` translate(${additionalOffsetX}px, ${additionalOffsetY}px)`
+		}
+		elm.style.transform = trans
+	}, [additionalOffsetX, additionalOffsetY, ref, rotate, scale, x, y])
+}

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/test/usePassThroughWheelEvents.test.tsx

@@ -0,0 +1,77 @@
+import { act, cleanup, render } from '@testing-library/react'
+import { useRef, useState } from 'react'
+import { createTLStore } from '../config/createTLStore'
+import { usePassThroughWheelEvents } from '../hooks/usePassThroughWheelEvents'
+import { TL_CONTAINER_CLASS, TldrawEditor } from '../TldrawEditor'
+
+let setVisible: (visible: boolean) => void
+let rerender: () => void
+
+/**
+ * The shape a comment pin has: the hook's owner stays mounted while the element the ref points at
+ * is culled and later remounted (the pin returns null when its anchor leaves the viewport).
+ */
+function Culled() {
+	const ref = useRef<HTMLButtonElement>(null)
+	usePassThroughWheelEvents(ref)
+	const [visible, _setVisible] = useState(true)
+	const [, setTick] = useState(0)
+	setVisible = _setVisible
+	rerender = () => setTick((t) => t + 1)
+	if (!visible) return null
+	return <button ref={ref} data-testid="marker" />
+}
+
+describe('usePassThroughWheelEvents', () => {
+	async function renderEditor() {
+		const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
+		await act(async () => {
+			render(<TldrawEditor store={store} components={{ InFrontOfTheCanvas: Culled }} />)
+		})
+		return document.querySelector(`.${TL_CONTAINER_CLASS}`)!
+	}
+
+	function wheelOverMarker(container: Element) {
+		const canvas = container.querySelector('.tl-canvas')!
+		const received: Event[] = []
+		canvas.addEventListener('wheel', (e) => received.push(e))
+		const marker = container.querySelector('[data-testid="marker"]')!
+		marker.dispatchEvent(new WheelEvent('wheel', { bubbles: true, cancelable: true, deltaY: 10 }))
+		return received
+	}
+
+	it('redispatches wheel events over the element to the canvas', async () => {
+		const container = await renderEditor()
+		expect(wheelOverMarker(container)).toHaveLength(1)
+	})
+
+	// The regression: the owner stays mounted across the cull, so an effect keyed on its deps never
+	// re-runs and the listener is left on the discarded element.
+	it('still redispatches after the element unmounts and remounts', async () => {
+		const container = await renderEditor()
+		await act(async () => setVisible(false))
+		await act(async () => setVisible(true))
+		expect(wheelOverMarker(container)).toHaveLength(1)
+	})
+
+	// The re-attach check runs on every render, so it has to be a no-op when the element hasn't
+	// changed — otherwise each render stacks another listener and one wheel redispatches many.
+	it('does not stack listeners across renders that leave the element in place', async () => {
+		const container = await renderEditor()
+		for (let i = 0; i < 3; i++) {
+			await act(async () => rerender())
+		}
+		expect(wheelOverMarker(container)).toHaveLength(1)
+	})
+
+	it('stops redispatching once the owner unmounts', async () => {
+		const container = await renderEditor()
+		const marker = container.querySelector('[data-testid="marker"]')!
+		const canvas = container.querySelector('.tl-canvas')!
+		const received: Event[] = []
+		canvas.addEventListener('wheel', (e) => received.push(e))
+		await act(async () => cleanup())
+		marker.dispatchEvent(new WheelEvent('wheel', { bubbles: true, cancelable: true, deltaY: 10 }))
+		expect(received).toHaveLength(0)
+	})
+})