tldraw 5.3.2 → 5.4.0-canary.042da660fa66

package/src/lib/ui.css

@@ -2104,7 +2104,8 @@ tldraw? probably.
 	align-items: center;
 }
 
-.tlui-people-menu__user__color {
+.tlui-people-menu__user__color,
+.tlui-people-menu__user__edit {
 	flex-shrink: 0;
 }
 
@@ -2150,7 +2151,8 @@ tldraw? probably.
 }
 
 .tlui-people-menu__item {
-	position: relative;
+	display: flex;
+	align-items: center;
 }
 
 .tlui-people-menu__item:last-of-type .tlui-button__menu {
@@ -2158,7 +2160,8 @@ tldraw? probably.
 }
 
 .tlui-people-menu__item__button {
-	padding: 0 11px;
+	padding-inline-start: 12px;
+	padding-inline-end: 0px;
 	overflow: hidden;
 }
 
@@ -2168,7 +2171,7 @@ tldraw? probably.
 	align-items: auto;
 	justify-content: flex-start;
 	flex-grow: 2;
-	gap: 11px;
+	gap: 12px;
 }
 
 .tlui-people-menu__name {
@@ -2179,18 +2182,9 @@ tldraw? probably.
 }
 
 .tlui-people-menu__item__follow {
-	position: absolute;
-	top: 0px;
-	inset-inline-end: 0px;
-	max-width: 40px;
 	flex-shrink: 0;
 }
 
-.tlui-people-menu__item[data-follow='true'],
-.tlui-people-menu__item:has(.tlui-button:focus-visible) {
-	padding-inline-end: 36px;
-}
-
 .tlui-people-menu__item[data-follow='true'] .tlui-people-menu__item__follow,
 .tlui-people-menu__item:has(.tlui-button:focus-visible) .tlui-people-menu__item__follow {
 	opacity: 1;
@@ -2201,9 +2195,6 @@ tldraw? probably.
 		opacity: 0;
 	}
 
-	.tlui-people-menu__item:hover {
-		padding-right: 36px;
-	}
 	.tlui-people-menu__item:hover .tlui-people-menu__item__follow {
 		opacity: 1;
 	}

package/src/test/TldrawEditor.test.tsx

@@ -13,6 +13,7 @@ import {
 	createTLStore,
 	noop,
 	react,
+	tleditors,
 	toRichText,
 } from '@tldraw/editor'
 import { StrictMode } from 'react'
@@ -181,6 +182,7 @@ describe('<TldrawEditor />', () => {
 
 		// mounted after render:
 		expect(editor.getIsMounted()).toBe(true)
+		expect(tleditors.getMounted()).toEqual([editor])
 
 		// getIsMounted is reactive:
 		const mountedValues: boolean[] = []
@@ -191,6 +193,7 @@ describe('<TldrawEditor />', () => {
 		// the unmount event fired and the mounted state flipped back to false:
 		expect(onUnmount).toHaveBeenCalledTimes(1)
 		expect(editor.getIsMounted()).toBe(false)
+		expect(tleditors.getMounted()).toEqual([])
 		expect(mountedValues).toEqual([true, false])
 
 		stop()

package/src/test/VideoShapeUtil.test.tsx

@@ -0,0 +1,126 @@
+import { act, fireEvent } from '@testing-library/react'
+import { AssetRecordType, Editor, TLAssetId, TLShapeId, createShapeId } from '@tldraw/editor'
+import { Tldraw } from '../lib/Tldraw'
+import { renderTldrawComponentWithEditor } from './testutils/renderTldrawComponent'
+
+const LOADING_BACKGROUND = 'var(--tl-color-low)'
+const LOADING_BORDER = '1px solid var(--tl-color-low-border)'
+
+let editor: Editor
+let videoShapeId: TLShapeId
+let videoAssetId: TLAssetId
+
+function getShapeContainer() {
+	const container = document.getElementById(videoShapeId)
+	expect(container).toBeTruthy()
+	return container!
+}
+
+beforeEach(async () => {
+	videoShapeId = createShapeId('video')
+	videoAssetId = AssetRecordType.createId('videoAsset')
+
+	const result = await renderTldrawComponentWithEditor((onMount) => <Tldraw onMount={onMount} />, {
+		waitForPatterns: false,
+	})
+	editor = result.editor
+})
+
+describe('VideoShapeUtil loading state', () => {
+	it('shows the loading plate when the asset record is missing', async () => {
+		await act(async () => {
+			editor.createShapes([
+				{ id: videoShapeId, type: 'video', x: 0, y: 0, props: { w: 100, h: 100 } },
+			])
+		})
+
+		const container = getShapeContainer()
+		expect(container.style.backgroundColor).toBe(LOADING_BACKGROUND)
+		expect(container.style.border).toBe(LOADING_BORDER)
+	})
+
+	it('shows the loading plate while the asset is uploading (no src)', async () => {
+		await act(async () => {
+			editor.createAssets([
+				{
+					id: videoAssetId,
+					type: 'video',
+					typeName: 'asset',
+					props: {
+						w: 100,
+						h: 100,
+						name: 'video.mp4',
+						isAnimated: true,
+						mimeType: 'video/mp4',
+						src: '',
+					},
+					meta: {},
+				},
+			])
+			editor.createShapes([
+				{
+					id: videoShapeId,
+					type: 'video',
+					x: 0,
+					y: 0,
+					props: { w: 100, h: 100, assetId: videoAssetId },
+				},
+			])
+		})
+
+		const container = getShapeContainer()
+		expect(container.style.backgroundColor).toBe(LOADING_BACKGROUND)
+		expect(container.style.border).toBe(LOADING_BORDER)
+	})
+
+	it('shows the loading plate until the video loads, then goes transparent', async () => {
+		await act(async () => {
+			editor.createAssets([
+				{
+					id: videoAssetId,
+					type: 'video',
+					typeName: 'asset',
+					props: {
+						w: 100,
+						h: 100,
+						name: 'video.mp4',
+						isAnimated: true,
+						mimeType: 'video/mp4',
+						src: 'http://localhost/video.mp4',
+					},
+					meta: {},
+				},
+			])
+			editor.createShapes([
+				{
+					id: videoShapeId,
+					type: 'video',
+					x: 0,
+					y: 0,
+					props: { w: 100, h: 100, assetId: videoAssetId },
+				},
+			])
+		})
+
+		// Wait for the async asset URL resolution so the <video> element renders
+		await act(async () => {
+			await new Promise((resolve) => setTimeout(resolve, 0))
+		})
+
+		const container = getShapeContainer()
+		const video = container.querySelector('video')
+		expect(video).toBeTruthy()
+
+		// The video element exists but hasn't fired loadeddata yet
+		expect(container.style.backgroundColor).toBe(LOADING_BACKGROUND)
+		expect(container.style.border).toBe(LOADING_BORDER)
+
+		await act(async () => {
+			fireEvent.loadedData(video!)
+		})
+
+		expect(container.style.backgroundColor).toBe('transparent')
+		// jsdom doesn't round-trip the `border: none` shorthand, so check the style directly
+		expect(container.style.borderStyle).toBe('none')
+	})
+})

package/src/test/bookmark-shapes.test.ts

@@ -1,5 +1,6 @@
 import { AssetRecordType, TLBookmarkShape, createShapeId, getHashForString } from '@tldraw/editor'
 import { vi } from 'vitest'
+import { defaultHandleExternalUrlAsset } from '../lib/defaultExternalContentHandlers'
 import {
 	createBookmarkFromUrl,
 	getBookmarkShapeHeight,
@@ -482,3 +483,112 @@ describe('createBookmarkFromUrl', () => {
 		expect(editor.getShapeGeometry(redone.id).bounds.height).toBe(shortHeight)
 	})
 })
+
+describe('defaultHandleExternalUrlAsset', () => {
+	const url = 'https://example.com/some/page'
+
+	let opts: any
+	let fetchMock: ReturnType<typeof vi.fn>
+
+	beforeEach(() => {
+		opts = {
+			toasts: { addToast: vi.fn(), removeToast: vi.fn(), clearToasts: vi.fn() },
+			msg: (id: string) => id,
+		}
+	})
+
+	afterEach(() => {
+		vi.unstubAllGlobals()
+	})
+
+	function mockResponseBody(html: string) {
+		fetchMock = vi.fn().mockResolvedValue({ text: async () => html })
+		vi.stubGlobal('fetch', fetchMock)
+	}
+
+	function mockPageHead(head: string) {
+		mockResponseBody(`<html><head>${head}</head><body></body></html>`)
+	}
+
+	it('leaves the image and favicon empty when the page provides neither', async () => {
+		mockPageHead('<title>Example</title>')
+
+		const asset = await defaultHandleExternalUrlAsset(editor, { type: 'url', url }, opts)
+
+		expect(asset.props.image).toBe('')
+		expect(asset.props.favicon).toBe('')
+	})
+
+	it('resolves relative image and favicon urls against the page', async () => {
+		mockPageHead(
+			'<meta property="og:image" content="/img/preview.png" />' +
+				'<link rel="icon" href="favicon.ico" />'
+		)
+
+		const asset = await defaultHandleExternalUrlAsset(editor, { type: 'url', url }, opts)
+
+		expect(asset.props.image).toBe('https://example.com/img/preview.png')
+		expect(asset.props.favicon).toBe('https://example.com/some/favicon.ico')
+	})
+
+	it('leaves absolute image urls alone', async () => {
+		mockPageHead('<meta property="og:image" content="https://cdn.example.com/preview.png" />')
+
+		const asset = await defaultHandleExternalUrlAsset(editor, { type: 'url', url }, opts)
+
+		expect(asset.props.image).toBe('https://cdn.example.com/preview.png')
+	})
+
+	it('toasts and returns a blank bookmark when the fetch throws', async () => {
+		const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+		fetchMock = vi.fn().mockRejectedValue(new Error('CORS'))
+		vi.stubGlobal('fetch', fetchMock)
+
+		const asset = await defaultHandleExternalUrlAsset(editor, { type: 'url', url }, opts)
+
+		expect(opts.toasts.addToast).toHaveBeenCalledWith(
+			expect.objectContaining({ severity: 'error' })
+		)
+		expect(asset.props.src).toBe(url)
+		expect(asset.props.image).toBe('')
+		expect(asset.props.title).toBe('')
+
+		consoleSpy.mockRestore()
+	})
+
+	// Pins behaviour we'd like to change, so that changing it is deliberate.
+	describe('behaviour to revisit', () => {
+		it('extracts nothing at all from a cross-origin page', async () => {
+			// `mode: 'no-cors'` makes the response opaque cross-origin, and an
+			// opaque body always reads as ''.
+			mockResponseBody('')
+
+			const asset = await defaultHandleExternalUrlAsset(editor, { type: 'url', url }, opts)
+
+			expect(fetchMock).toHaveBeenCalledWith(url, expect.objectContaining({ mode: 'no-cors' }))
+			expect(asset.props.image).toBe('')
+			expect(asset.props.favicon).toBe('')
+			expect(asset.props.description).toBe('')
+			expect(asset.props.title).toBe(url)
+			expect(opts.toasts.addToast).not.toHaveBeenCalled()
+		})
+
+		it('ignores twitter card tags, og:image:secure_url and <title>', async () => {
+			mockPageHead(
+				'<title>Example</title>' +
+					'<meta property="og:image:secure_url" content="https://cdn.example.com/secure.png" />' +
+					'<meta name="twitter:image" content="https://cdn.example.com/twitter.png" />' +
+					'<meta name="twitter:title" content="Example, from twitter" />' +
+					'<meta name="description" content="A plain meta description" />'
+			)
+
+			const asset = await defaultHandleExternalUrlAsset(editor, { type: 'url', url }, opts)
+
+			// cloudflare-workers-unfurl reads all four of these; this handler
+			// reads only the plain `og:` tags.
+			expect(asset.props.image).toBe('')
+			expect(asset.props.description).toBe('')
+			expect(asset.props.title).toBe(url)
+		})
+	})
+})

package/src/test/commands/alignShapes.test.tsx

@@ -38,14 +38,14 @@ describe('when less than two shapes are selected', () => {
 describe('when multiple shapes are selected', () => {
 	it('does, undoes and redoes command', () => {
 		editor.markHistoryStoppingPoint('align')
-		editor.alignShapes(editor.getSelectedShapeIds(), 'top')
+		editor.alignShapes(editor.getSelectedShapeIds(), 'center')
 		vi.advanceTimersByTime(1000)
 
-		editor.expectShapeToMatch({ id: ids.boxB, y: 0 })
+		editor.expectShapeToMatch({ id: ids.boxB, x: 225, y: 225 })
 		editor.undo()
-		editor.expectShapeToMatch({ id: ids.boxB, y: 100 })
+		editor.expectShapeToMatch({ id: ids.boxB, x: 100, y: 100 })
 		editor.redo()
-		editor.expectShapeToMatch({ id: ids.boxB, y: 0 })
+		editor.expectShapeToMatch({ id: ids.boxB, x: 225, y: 225 })
 	})
 
 	it('aligns top', () => {
@@ -114,28 +114,37 @@ describe('when multiple shapes are selected', () => {
 		)
 	})
 
+	it('aligns center on both axes', () => {
+		editor.alignShapes(editor.getSelectedShapeIds(), 'center')
+		vi.advanceTimersByTime(1000)
+
+		editor.expectShapeToMatch(
+			{ id: ids.boxA, x: 200, y: 200 },
+			{ id: ids.boxB, x: 225, y: 225 },
+			{ id: ids.boxC, x: 200, y: 200 }
+		)
+	})
+
 	it('aligns center, when shapes are rotated', () => {
 		editor.updateShapes([
 			{
 				id: ids.boxA,
 				type: 'geo',
-				rotation: PI,
+				rotation: 0.2,
 			},
 			{
 				id: ids.boxB,
 				type: 'geo',
-				rotation: PI,
+				rotation: 0.4,
 			},
 			{
 				id: ids.boxC,
 				type: 'geo',
-				rotation: PI,
+				rotation: 0.6,
 			},
 		])
 
-		editor.alignShapes(editor.getSelectedShapeIds(), 'center-vertical')
-		vi.advanceTimersByTime(1000)
-		editor.alignShapes(editor.getSelectedShapeIds(), 'center-horizontal')
+		editor.alignShapes(editor.getSelectedShapeIds(), 'center')
 		vi.advanceTimersByTime(1000)
 
 		const commonBounds = Box.Common([

package/src/test/commands/clipboard.test.ts

@@ -1,6 +1,9 @@
-import { createShapeId, TLArrowShape } from '@tldraw/editor'
+import { act, renderHook } from '@testing-library/react'
+import { createShapeId, EditorContext, TLArrowShape } from '@tldraw/editor'
+import { createElement } from 'react'
 import { vi } from 'vitest'
 import { getArrowBindings } from '../../lib/shapes/arrow/shared'
+import { useMenuClipboardEvents } from '../../lib/ui/hooks/useClipboardEvents'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -481,3 +484,35 @@ describe('When copying and pasting', () => {
 		expect(pastedPoint).toMatchObject({ x: 150, y: 150 }) // center of group
 	})
 })
+
+describe('When cutting', () => {
+	function renderCut() {
+		const { result } = renderHook(() => useMenuClipboardEvents(), {
+			wrapper: ({ children }) => createElement(EditorContext.Provider, { value: editor }, children),
+		})
+		return result.current.cut
+	}
+
+	it('marks a history stopping point so undo does not roll back earlier changes', async () => {
+		// the cut writes to the clipboard before it deletes anything
+		Object.assign(window.navigator, { clipboard: { write: vi.fn() } })
+		globalThis.ClipboardItem = class {} as any
+
+		const cut = renderCut()
+		editor.createShape({ id: ids.box1, type: 'geo', x: 0, y: 0 })
+		editor.markHistoryStoppingPoint('rename page')
+		editor.renamePage(editor.getCurrentPageId(), 'My page')
+		editor.select(ids.box1)
+
+		await act(async () => {
+			await cut('menu')
+		})
+		expect(editor.getShape(ids.box1)).toBeUndefined()
+
+		editor.undo()
+
+		// the cut is undone, but the page rename before it is not
+		expect(editor.getShape(ids.box1)).toBeDefined()
+		expect(editor.getCurrentPage().name).toBe('My page')
+	})
+})

package/src/test/flatten.test.ts

@@ -0,0 +1,135 @@
+import {
+	AssetRecordType,
+	TLImageAsset,
+	TLShapeId,
+	TLShapePartial,
+	createShapeId,
+} from '@tldraw/editor'
+import { vi } from 'vitest'
+import { flattenShapesToImages } from '../lib/ui/hooks/useFlatten'
+import { TestEditor } from './TestEditor'
+
+let editor: TestEditor
+let assetCount = 0
+
+function installFlattenMocks(target: TestEditor) {
+	// flattenShapesToImages calls editor.getSvgString and
+	// editor.getAssetForExternalContent. Mock both to bypass the real export
+	// pipeline (jsdom can't render SVGs and we don't need real pixels — these
+	// tests only care about which shapes end up in which group).
+	vi.spyOn(target, 'getSvgString').mockResolvedValue({
+		svg: '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"></svg>',
+		width: 10,
+		height: 10,
+		trimPadding: 0,
+	})
+	vi.spyOn(target, 'getAssetForExternalContent').mockImplementation(async () => {
+		const asset: TLImageAsset = {
+			id: AssetRecordType.createId(`flat-${assetCount++}`),
+			typeName: 'asset',
+			type: 'image',
+			props: {
+				w: 10,
+				h: 10,
+				name: 'asset.svg',
+				isAnimated: false,
+				mimeType: 'image/svg+xml',
+				src: 'data:image/svg+xml;base64,',
+			},
+			meta: {},
+		}
+		return asset
+	})
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+	assetCount = 0
+	installFlattenMocks(editor)
+})
+
+afterEach(() => {
+	editor?.dispose()
+})
+
+const box = (id: TLShapeId, x: number, y: number, w = 50, h = 50): TLShapePartial => ({
+	id,
+	type: 'geo',
+	x,
+	y,
+	props: { w, h, fill: 'solid' },
+})
+
+function getImageShapeCount() {
+	return editor.getCurrentPageShapes().filter((s) => s.type === 'image').length
+}
+
+describe('flattenShapesToImages clustering', () => {
+	const expand = 64
+
+	it('groups shapes within the expand threshold into one image', async () => {
+		const a = createShapeId('a')
+		const b = createShapeId('b')
+		// gap of 30 < 2 * 64 expand, so the expanded boxes intersect
+		editor.createShapes([box(a, 0, 0), box(b, 80, 0)])
+
+		await flattenShapesToImages(editor, [a, b], expand)
+
+		expect(getImageShapeCount()).toBe(1)
+	})
+
+	it('keeps shapes in separate images when their gap exceeds the expand threshold', async () => {
+		const a = createShapeId('a')
+		const b = createShapeId('b')
+		// gap of 200 > 2 * 64 expand, so the expanded boxes do not intersect
+		editor.createShapes([box(a, 0, 0), box(b, 250, 0)])
+
+		await flattenShapesToImages(editor, [a, b], expand)
+
+		expect(getImageShapeCount()).toBe(2)
+	})
+
+	it('merges all shapes into one group when a bridging shape connects them, independent of input order', async () => {
+		// Layout: A — gap — bridge — gap — C. A and C alone do not intersect
+		// each other's expanded bounds, but `bridge` sits in the middle and
+		// should pull them all into a single group regardless of where it
+		// appears in the list. The previous greedy pass would only merge
+		// `bridge` into the first group it touched, leaving C as a separate
+		// cluster when `bridge` came after C in the list — which made the
+		// result depend on selection order.
+		const a = createShapeId('a')
+		const bridge = createShapeId('bridge')
+		const c = createShapeId('c')
+
+		const orders: TLShapeId[][] = [
+			[a, bridge, c],
+			[a, c, bridge],
+			[bridge, a, c],
+			[c, bridge, a],
+		]
+
+		for (const order of orders) {
+			editor.dispose()
+			editor = new TestEditor()
+			assetCount = 0
+			installFlattenMocks(editor)
+			editor.createShapes([box(a, 0, 0), box(bridge, 100, 0), box(c, 200, 0)])
+
+			await flattenShapesToImages(editor, order, expand)
+
+			expect(getImageShapeCount(), `order ${order.join(',')}`).toBe(1)
+		}
+	})
+
+	it('uses a single Box.Common group when no expand value is provided', async () => {
+		// Two shapes far apart should still flatten to one image when called
+		// via the no-expand path (the default useFlatten() hook).
+		const a = createShapeId('a')
+		const b = createShapeId('b')
+		editor.createShapes([box(a, 0, 0), box(b, 1000, 0)])
+
+		await flattenShapesToImages(editor, [a, b])
+
+		expect(getImageShapeCount()).toBe(1)
+	})
+})

package/src/test/modifiers.test.ts

@@ -37,6 +37,110 @@ it('Ctrl Key', () => {
 	expect(editor.inputs.getCtrlKey()).toBe(false)
 })
 
+it('pointer down releases a modifier still in its debounce window', () => {
+	// Collect any synthetic key_up events fired when the release is flushed.
+	const keyUps: string[] = []
+	editor.on('event', (info) => {
+		if (info.type === 'keyboard' && info.name === 'key_up') keyUps.push(info.key)
+	})
+
+	// Hold then release meta via pointer events; the release is debounced for 150ms.
+	editor.pointerMove(100, 100, { metaKey: true })
+	editor.pointerMove(100, 100, { metaKey: false })
+	expect(editor.inputs.getMetaKey()).toBe(true) // still held during the debounce window
+
+	// A new interaction starts with the key physically up: the lingering modifier
+	// should be released immediately (same path as the timer), including its
+	// synthetic key_up, without waiting for the timeout.
+	editor.pointerDown(100, 100, { metaKey: false })
+	expect(editor.inputs.getMetaKey()).toBe(false)
+	expect(keyUps).toEqual(['Meta'])
+
+	// The pending timer must have been cancelled, so advancing past it does nothing
+	// and doesn't fire the synthetic key_up a second time.
+	vi.advanceTimersByTime(200)
+	expect(editor.inputs.getMetaKey()).toBe(false)
+	expect(keyUps).toEqual(['Meta'])
+})
+
+it('pointer down releases every modifier still in its debounce window', () => {
+	const keyUps: string[] = []
+	editor.on('event', (info) => {
+		if (info.type === 'keyboard' && info.name === 'key_up') keyUps.push(info.key)
+	})
+
+	editor.pointerMove(100, 100, { shiftKey: true, altKey: true, ctrlKey: true, metaKey: true })
+	editor.pointerMove(100, 100, { shiftKey: false, altKey: false, ctrlKey: false, metaKey: false })
+	expect(editor.inputs.getShiftKey()).toBe(true)
+	expect(editor.inputs.getAltKey()).toBe(true)
+	expect(editor.inputs.getCtrlKey()).toBe(true)
+	expect(editor.inputs.getMetaKey()).toBe(true)
+
+	editor.pointerDown(100, 100, { shiftKey: false, altKey: false, ctrlKey: false, metaKey: false })
+	expect(editor.inputs.getShiftKey()).toBe(false)
+	expect(editor.inputs.getAltKey()).toBe(false)
+	expect(editor.inputs.getCtrlKey()).toBe(false)
+	expect(editor.inputs.getMetaKey()).toBe(false)
+
+	// Each flushed modifier fires its synthetic key_up so tools can react.
+	expect(keyUps).toEqual(expect.arrayContaining(['Shift', 'Alt', 'Ctrl', 'Meta']))
+	expect(keyUps).toHaveLength(4)
+
+	// All four timers were cancelled, so nothing flips back or fires again.
+	vi.advanceTimersByTime(200)
+	expect(editor.inputs.getShiftKey()).toBe(false)
+	expect(editor.inputs.getAltKey()).toBe(false)
+	expect(editor.inputs.getCtrlKey()).toBe(false)
+	expect(editor.inputs.getMetaKey()).toBe(false)
+	expect(keyUps).toHaveLength(4)
+})
+
+it('pointer down clears stale key codes when flushing a debounced modifier', () => {
+	// A real key_down records the code, then the release is only seen via pointer
+	// flags (no keyboard key_up), so the code lingers in inputs.keys until flushed.
+	editor.keyDown('Shift')
+	expect(editor.inputs.keys.has('ShiftLeft')).toBe(true)
+
+	editor.pointerMove(100, 100, { shiftKey: false })
+	expect(editor.inputs.getShiftKey()).toBe(true) // debounced, still counted as held
+	expect(editor.inputs.keys.has('ShiftLeft')).toBe(true) // code not yet cleared
+
+	// The pointer down flushes the debounce through the timer's path, which clears
+	// both the modifier atom and the stale code.
+	editor.pointerDown(100, 100, { shiftKey: false })
+	expect(editor.inputs.getShiftKey()).toBe(false)
+	expect(editor.inputs.keys.has('ShiftLeft')).toBe(false)
+})
+
+it('does not re-release a modifier after its natural debounce timer fired', () => {
+	const keyUps: string[] = []
+	editor.on('event', (info) => {
+		if (info.type === 'keyboard' && info.name === 'key_up') keyUps.push(info.key)
+	})
+
+	// Hold then release shift via pointer events and let the 150ms timer fire on its
+	// own, which releases shift with a single synthetic key_up.
+	editor.pointerMove(100, 100, { shiftKey: true })
+	editor.pointerMove(100, 100, { shiftKey: false })
+	vi.advanceTimersByTime(200)
+	expect(editor.inputs.getShiftKey()).toBe(false)
+	expect(keyUps).toEqual(['Shift'])
+
+	// A later pointer down must not treat the already-fired timer as an active
+	// debounce and emit another synthetic key_up.
+	editor.pointerDown(100, 100, { shiftKey: false })
+	expect(keyUps).toEqual(['Shift'])
+})
+
+it('pointer down keeps a genuinely held modifier', () => {
+	// Shift is actually held during the pointer down (flag stays true), so it must
+	// not be cleared by the debounce-flush.
+	editor.pointerMove(100, 100, { shiftKey: true })
+	expect(editor.inputs.getShiftKey()).toBe(true)
+	editor.pointerDown(100, 100, { shiftKey: true })
+	expect(editor.inputs.getShiftKey()).toBe(true)
+})
+
 it('keyboard events carry currently-held modifiers', () => {
 	const keyboardEvents: TLKeyboardEventInfo[] = []
 	editor.on('event', (info) => {