tldraw 4.3.0-canary.fd6b7f2a8adc → 4.3.0-next.085293d79c32

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tldraw",
   "description": "A tiny little drawing editor.",
-  "version": "4.3.0-canary.fd6b7f2a8adc",
+  "version": "4.3.0-next.085293d79c32",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -55,15 +55,15 @@
     "src"
   ],
   "dependencies": {
-    "@tiptap/core": "^3.6.2",
-    "@tiptap/extension-code": "^3.6.2",
-    "@tiptap/extension-highlight": "^3.6.2",
-    "@tiptap/extension-list": "^3.6.2",
-    "@tiptap/pm": "^3.6.2",
-    "@tiptap/react": "^3.6.2",
-    "@tiptap/starter-kit": "^3.6.2",
-    "@tldraw/editor": "4.3.0-canary.fd6b7f2a8adc",
-    "@tldraw/store": "4.3.0-canary.fd6b7f2a8adc",
+    "@tiptap/core": "^3.12.1",
+    "@tiptap/extension-code": "^3.12.1",
+    "@tiptap/extension-highlight": "^3.12.1",
+    "@tiptap/extension-list": "^3.12.1",
+    "@tiptap/pm": "^3.12.1",
+    "@tiptap/react": "^3.12.1",
+    "@tiptap/starter-kit": "^3.12.1",
+    "@tldraw/editor": "4.3.0-next.085293d79c32",
+    "@tldraw/store": "4.3.0-next.085293d79c32",
     "classnames": "^2.5.1",
     "hotkeys-js": "^3.13.9",
     "idb": "^7.1.1",
@@ -71,19 +71,21 @@
     "radix-ui": "^1.4.2"
   },
   "peerDependencies": {
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react": "^18.2.0 || ^19.2.1",
+    "react-dom": "^18.2.0 || ^19.2.1"
   },
   "devDependencies": {
     "@peculiar/webcrypto": "^1.5.0",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/react": "^16.0.0",
     "@types/classnames": "^2.3.4",
     "@types/lz-string": "^1.5.0",
-    "@types/react": "^18.3.18",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "chokidar-cli": "^3.0.0",
     "lazyrepo": "0.0.0-alpha.27",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
     "resize-observer-polyfill": "^1.5.1",
     "vitest": "^3.2.4"
   },

package/src/index.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 
 import { registerTldrawLibraryVersion } from '@tldraw/editor'
+export { getPointsFromDrawSegment, getPointsFromDrawSegments } from './lib/shapes/draw/getPath'
 export {
 	PathBuilder,
 	PathBuilderGeometry2d,
@@ -21,6 +22,7 @@ export {
 	type SolidPathBuilderOpts,
 } from './lib/shapes/shared/PathBuilder'
 export { usePrefersReducedMotion } from './lib/shapes/shared/usePrefersReducedMotion'
+export { startEditingShapeWithRichText } from './lib/tools/SelectTool/selectHelpers'
 export { DefaultA11yAnnouncer, useSelectedShapesAnnouncer } from './lib/ui/components/A11y'
 export { AccessibilityMenu } from './lib/ui/components/AccessibilityMenu'
 export { ColorSchemeMenu } from './lib/ui/components/ColorSchemeMenu'
@@ -176,7 +178,10 @@ export {
 	type TLDefaultFont,
 	type TLDefaultFonts,
 } from './lib/shapes/shared/defaultFonts'
+export { getStroke } from './lib/shapes/shared/freehand/getStroke'
+export { getStrokeOutlinePoints } from './lib/shapes/shared/freehand/getStrokeOutlinePoints'
 export { getStrokePoints } from './lib/shapes/shared/freehand/getStrokePoints'
+export { setStrokePointRadii } from './lib/shapes/shared/freehand/setStrokePointRadii'
 export { getSvgPathFromStrokePoints } from './lib/shapes/shared/freehand/svg'
 export { type StrokeOptions, type StrokePoint } from './lib/shapes/shared/freehand/types'
 export { PlainTextLabel, type PlainTextLabelProps } from './lib/shapes/shared/PlainTextLabel'
@@ -432,6 +437,7 @@ export {
 	type TLUiToolbarToggleItemProps,
 } from './lib/ui/components/primitives/TldrawUiToolbar'
 export {
+	hideAllTooltips,
 	TldrawUiTooltip,
 	TldrawUiTooltipProvider,
 	type TldrawUiTooltipProps,
@@ -566,7 +572,6 @@ export {
 	CenteredTopPanelContainer,
 	type CenteredTopPanelContainerProps,
 } from './lib/ui/components/TopPanel/CenteredTopPanelContainer'
-export { DefaultTopPanel } from './lib/ui/components/TopPanel/DefaultTopPanel'
 export {
 	DefaultZoomMenu,
 	type TLUiZoomMenuProps,
@@ -685,7 +690,6 @@ export {
 	tipTapDefaultExtensions,
 } from './lib/utils/text/richText'
 export { truncateStringWithEllipsis } from './lib/utils/text/text'
-export { TextDirection } from './lib/utils/text/textDirection'
 export {
 	buildFromV1Document,
 	TLV1AlignStyle,

package/src/lib/Tldraw.test.tsx

@@ -1,7 +1,10 @@
 import { act, screen } from '@testing-library/react'
 import { BaseBoxShapeUtil, Editor, StateNode, TLStateNodeConstructor } from '@tldraw/editor'
 import { useState } from 'react'
-import { renderTldrawComponent } from '../test/testutils/renderTldrawComponent'
+import {
+	renderTldrawComponent,
+	renderTldrawComponentWithEditor,
+} from '../test/testutils/renderTldrawComponent'
 import { Tldraw } from './Tldraw'
 
 describe('<Tldraw />', () => {
@@ -125,4 +128,46 @@ describe('<Tldraw />', () => {
 		expect(editor!.root.children!['hand']).toBeDefined()
 		expect(editor!.root.children!['zoom']).toBeDefined()
 	})
+
+	it('keyboard shortcuts work when hideUi is true', async () => {
+		const { editor } = await renderTldrawComponentWithEditor(
+			(onMount) => <Tldraw hideUi onMount={onMount} />,
+			{ waitForPatterns: false }
+		)
+
+		// Focus the editor so keyboard shortcuts are active
+		await act(async () => {
+			editor.focus()
+		})
+
+		// Start on select tool
+		expect(editor.getCurrentToolId()).toBe('select')
+
+		// Simulate pressing 'd' key to switch to draw tool
+		// hotkeys-js uses keyCode to identify keys, so we need to include it
+		await act(async () => {
+			document.body.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'd', code: 'KeyD', keyCode: 68, bubbles: true })
+			)
+			document.body.dispatchEvent(
+				new KeyboardEvent('keyup', { key: 'd', code: 'KeyD', keyCode: 68, bubbles: true })
+			)
+		})
+
+		// Should now be on draw tool
+		expect(editor.getCurrentToolId()).toBe('draw')
+
+		// Simulate pressing 'h' key to switch to hand tool
+		await act(async () => {
+			document.body.dispatchEvent(
+				new KeyboardEvent('keydown', { key: 'h', code: 'KeyH', keyCode: 72, bubbles: true })
+			)
+			document.body.dispatchEvent(
+				new KeyboardEvent('keyup', { key: 'h', code: 'KeyH', keyCode: 72, bubbles: true })
+			)
+		})
+
+		// Should now be on hand tool
+		expect(editor.getCurrentToolId()).toBe('hand')
+	})
 })

package/src/lib/canvas/TldrawSelectionForeground.tsx

@@ -63,7 +63,7 @@ export const TldrawSelectionForeground = track(function TldrawSelectionForegroun
 
 	if (onlyShape && editor.isShapeHidden(onlyShape)) return null
 
-	const zoom = editor.getZoomLevel()
+	const zoom = editor.getEfficientZoomLevel()
 	const isChangingStyle = editor.getInstanceState().isChangingStyle
 
 	const width = expandedBounds.width
@@ -532,7 +532,7 @@ export const MobileRotateHandle = function RotateHandle({
 	const events = useSelectionEvents('mobile_rotate')
 
 	const editor = useEditor()
-	const zoom = useValue('zoom level', () => editor.getZoomLevel(), [editor])
+	const zoom = useValue('zoom level', () => editor.getEfficientZoomLevel(), [editor])
 	const bgRadius = Math.max(14 * (1 / zoom), 20 / Math.max(1, zoom))
 	const msg = useTranslation()
 	return (

package/src/lib/defaultEmbedDefinitions.ts

@@ -626,7 +626,7 @@ export const embedShapePermissionDefaults = {
 	// [REASON] We want to allow embeds to link back to their original sites (e.g. YouTube).
 	'allow-popups': true,
 	// [MDN] Lets the sandboxed document open new windows without those windows inheriting the sandboxing. For example, this can safely sandbox an advertisement without forcing the same restrictions upon the page the ad links to.
-	// [REASON] We shouldn't allow popups as a embed could pretend to be us by opening a mocked version of tldraw. This is very unobvious when it is performed as an action within our app.
+	// [REASON] We shouldn't allow popups as an embed could pretend to be us by opening a mocked version of tldraw. This is very unobvious when it is performed as an action within our app.
 	'allow-popups-to-escape-sandbox': false,
 	// [MDN] Lets the resource start a presentation session.
 	// [REASON] Prevents embed from navigating away from tldraw and pretending to be us.
@@ -669,6 +669,7 @@ export interface EmbedDefinition {
 	readonly instructionLink?: string
 	readonly backgroundColor?: string
 	readonly embedOnPaste?: boolean
+	readonly canEditWhileLocked?: boolean
 	// TODO: FIXME this is ugly be required because some embeds have their own border radius for example spotify embeds
 	readonly overrideOutlineRadius?: number
 	// eslint-disable-next-line @typescript-eslint/method-signature-style

package/src/lib/defaultExternalContentHandlers.ts

@@ -307,8 +307,8 @@ export async function defaultHandleExternalSvgTextContent(
 ) {
 	const position =
 		point ??
-		(editor.inputs.shiftKey
-			? editor.inputs.currentPagePoint
+		(editor.inputs.getShiftKey()
+			? editor.inputs.getCurrentPagePoint()
 			: editor.getViewportPageBounds().center)
 
 	const svg = new DOMParser().parseFromString(text, 'image/svg+xml').querySelector('svg')
@@ -345,8 +345,8 @@ export function defaultHandleExternalEmbedContent<T>(
 ) {
 	const position =
 		point ??
-		(editor.inputs.shiftKey
-			? editor.inputs.currentPagePoint
+		(editor.inputs.getShiftKey()
+			? editor.inputs.getCurrentPagePoint()
 			: editor.getViewportPageBounds().center)
 
 	const { width, height } = embed as { width: number; height: number }
@@ -388,8 +388,8 @@ export async function defaultHandleExternalFileContent(
 
 	const position =
 		point ??
-		(editor.inputs.shiftKey
-			? editor.inputs.currentPagePoint
+		(editor.inputs.getShiftKey()
+			? editor.inputs.getCurrentPagePoint()
 			: editor.getViewportPageBounds().center)
 
 	const pagePoint = new Vec(position.x, position.y)
@@ -446,8 +446,8 @@ export async function defaultHandleExternalTextContent(
 ) {
 	const p =
 		point ??
-		(editor.inputs.shiftKey
-			? editor.inputs.currentPagePoint
+		(editor.inputs.getShiftKey()
+			? editor.inputs.getCurrentPagePoint()
 			: editor.getViewportPageBounds().center)
 
 	const defaultProps = editor.getShapeUtil<TLTextShape>('text').getDefaultProps()
@@ -568,8 +568,8 @@ export async function defaultHandleExternalUrlContent(
 
 	const position =
 		point ??
-		(editor.inputs.shiftKey
-			? editor.inputs.currentPagePoint
+		(editor.inputs.getShiftKey()
+			? editor.inputs.getCurrentPagePoint()
 			: editor.getViewportPageBounds().center)
 
 	// Use the new function to create the bookmark

package/src/lib/defaultSideEffects.ts

@@ -34,10 +34,15 @@ export function registerDefaultSideEffects(editor: Editor) {
 								editor.getInstanceState().isToolLocked
 							) {
 								editor.setCurrentTool('select.editing_shape', {
+									target: 'shape',
+									shape: shape,
 									isCreatingTextWhileToolLocked: true,
 								})
 							} else {
-								editor.setCurrentTool('select.editing_shape')
+								editor.setCurrentTool('select.editing_shape', {
+									target: 'shape',
+									shape: shape,
+								})
 							}
 						}
 					} else if (prev.editingShapeId && !next.editingShapeId) {

package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts

@@ -48,19 +48,19 @@ describe('ArrowShapeOptions', () => {
 			const util = editor.getShapeUtil<ArrowShapeUtil>('arrow')
 
 			// Test without alt key, not precise
-			editor.inputs.altKey = false
+			editor.inputs.setAltKey(false)
 			expect(util.options.shouldBeExact(editor, false)).toBe(false)
 
 			// Test without alt key, precise
-			editor.inputs.altKey = false
+			editor.inputs.setAltKey(false)
 			expect(util.options.shouldBeExact(editor, true)).toBe(false)
 
 			// Test with alt key, not precise
-			editor.inputs.altKey = true
+			editor.inputs.setAltKey(true)
 			expect(util.options.shouldBeExact(editor, false)).toBe(true)
 
 			// Test with alt key, precise
-			editor.inputs.altKey = true
+			editor.inputs.setAltKey(true)
 			expect(util.options.shouldBeExact(editor, true)).toBe(true)
 		})
 
@@ -68,59 +68,19 @@ describe('ArrowShapeOptions', () => {
 			const util = editor.getShapeUtil<ArrowShapeUtil>('arrow')
 
 			// Test without ctrl key
-			editor.inputs.ctrlKey = false
+			editor.inputs.setCtrlKey(false)
 			expect(util.options.shouldIgnoreTargets(editor)).toBe(false)
 
 			// Test with ctrl key
-			editor.inputs.ctrlKey = true
+			editor.inputs.setCtrlKey(true)
 			expect(util.options.shouldIgnoreTargets(editor)).toBe(true)
 		})
 	})
 
 	describe('shouldIgnoreTargets option', () => {
-		it('should not bind to shapes when shouldIgnoreTargets returns true', () => {
-			editor.setCurrentTool('arrow')
-
-			// Simulate ctrl key held (default shouldIgnoreTargets behavior)
-			editor.inputs.ctrlKey = true
-
-			editor.pointerDown(50, 50) // Start outside any shape
-			editor.pointerMove(150, 150) // Move to center of box1
-			editor.pointerUp()
-
-			const createdArrow = editor
-				.getCurrentPageShapes()
-				.find((s) => s.type === 'arrow') as TLArrowShape
-			expect(createdArrow).toBeDefined()
-
-			const arrowBindings = getArrowBindings(editor, createdArrow)
-			expect(arrowBindings.start).toBeUndefined()
-			expect(arrowBindings.end).toBeUndefined()
-		})
-
-		it('should bind to shapes when shouldIgnoreTargets returns false', () => {
-			editor.setCurrentTool('arrow')
-
-			// Simulate no ctrl key (default shouldIgnoreTargets behavior)
-			editor.inputs.ctrlKey = false
-
-			editor.pointerDown(50, 50) // Start outside any shape
-			editor.pointerMove(150, 150) // Move to center of box1
-			editor.pointerUp()
-
-			const createdArrow = editor
-				.getCurrentPageShapes()
-				.find((s) => s.type === 'arrow') as TLArrowShape
-			expect(createdArrow).toBeDefined()
-
-			const arrowBindings = getArrowBindings(editor, createdArrow)
-			expect(arrowBindings.end).toBeDefined()
-			expect(arrowBindings.end?.toId).toBe(ids.box1)
-		})
-
 		it('should work with updateArrowTargetState function', () => {
 			// Test that updateArrowTargetState returns null when shouldIgnoreTargets is true
-			editor.inputs.ctrlKey = true
+			editor.inputs.setCtrlKey(true)
 
 			const targetState = updateArrowTargetState({
 				editor,
@@ -135,7 +95,7 @@ describe('ArrowShapeOptions', () => {
 		})
 
 		it('should return valid target state when shouldIgnoreTargets is false', () => {
-			editor.inputs.ctrlKey = false
+			editor.inputs.setCtrlKey(false)
 
 			const targetState = updateArrowTargetState({
 				editor,
@@ -153,8 +113,8 @@ describe('ArrowShapeOptions', () => {
 
 	describe('shouldBeExact option', () => {
 		it('should affect arrow targeting behavior when true', () => {
-			editor.inputs.altKey = true // shouldBeExact = true
-			editor.inputs.ctrlKey = false // shouldIgnoreTargets = false
+			editor.inputs.setAltKey(true) // shouldBeExact = true
+			editor.inputs.setCtrlKey(false) // shouldIgnoreTargets = false
 
 			const targetState = updateArrowTargetState({
 				editor,
@@ -170,8 +130,8 @@ describe('ArrowShapeOptions', () => {
 		})
 
 		it('should affect arrow targeting behavior when false', () => {
-			editor.inputs.altKey = false // shouldBeExact = false
-			editor.inputs.ctrlKey = false // shouldIgnoreTargets = false
+			editor.inputs.setAltKey(false) // shouldBeExact = false
+			editor.inputs.setCtrlKey(false) // shouldIgnoreTargets = false
 
 			const targetState = updateArrowTargetState({
 				editor,
@@ -194,21 +154,21 @@ describe('ArrowShapeOptions', () => {
 			class CustomArrowShapeUtil extends ArrowShapeUtil {
 				override options = {
 					...baseUtil.options,
-					shouldBeExact: (editor: any, _isPrecise: boolean) => editor.inputs.shiftKey, // Use shift instead of alt
+					shouldBeExact: (editor: any, _isPrecise: boolean) => editor.inputs.getShiftKey(), // Use shift instead of alt
 				}
 			}
 
 			const customUtil = new CustomArrowShapeUtil(editor)
 
 			// Test with shift key
-			editor.inputs.shiftKey = true
-			editor.inputs.altKey = false
+			editor.inputs.setShiftKey(true)
+			editor.inputs.setAltKey(false)
 			expect(customUtil.options.shouldBeExact(editor, false)).toBe(true)
 			expect(customUtil.options.shouldBeExact(editor, true)).toBe(true)
 
 			// Test without shift key
-			editor.inputs.shiftKey = false
-			editor.inputs.altKey = true // Alt key should not matter for custom implementation
+			editor.inputs.setShiftKey(false)
+			editor.inputs.setAltKey(true) // Alt key should not matter for custom implementation
 			expect(customUtil.options.shouldBeExact(editor, false)).toBe(false)
 			expect(customUtil.options.shouldBeExact(editor, true)).toBe(false)
 		})
@@ -219,20 +179,20 @@ describe('ArrowShapeOptions', () => {
 			class CustomArrowShapeUtil extends ArrowShapeUtil {
 				override options = {
 					...baseUtil.options,
-					shouldIgnoreTargets: (editor: any) => editor.inputs.shiftKey, // Use shift instead of ctrl
+					shouldIgnoreTargets: (editor: any) => editor.inputs.getShiftKey(), // Use shift instead of ctrl
 				}
 			}
 
 			const customUtil = new CustomArrowShapeUtil(editor)
 
 			// Test with shift key
-			editor.inputs.shiftKey = true
-			editor.inputs.ctrlKey = false
+			editor.inputs.setShiftKey(true)
+			editor.inputs.setCtrlKey(false)
 			expect(customUtil.options.shouldIgnoreTargets(editor)).toBe(true)
 
 			// Test without shift key
-			editor.inputs.shiftKey = false
-			editor.inputs.ctrlKey = true // Ctrl key should not matter for custom implementation
+			editor.inputs.setShiftKey(false)
+			editor.inputs.setCtrlKey(true) // Ctrl key should not matter for custom implementation
 			expect(customUtil.options.shouldIgnoreTargets(editor)).toBe(false)
 		})
 
@@ -244,11 +204,13 @@ describe('ArrowShapeOptions', () => {
 					...baseUtil.options,
 					shouldBeExact: (editor: any, isPrecise: boolean) => {
 						// Custom logic: exact when both alt and shift are pressed, and only if precise
-						return editor.inputs.altKey && editor.inputs.shiftKey && isPrecise
+						return editor.inputs.getAltKey() && editor.inputs.getShiftKey() && isPrecise
 					},
 					shouldIgnoreTargets: (editor: any) => {
 						// Custom logic: ignore targets when any modifier key is pressed
-						return editor.inputs.altKey || editor.inputs.ctrlKey || editor.inputs.shiftKey
+						return (
+							editor.inputs.getAltKey() || editor.inputs.getCtrlKey() || editor.inputs.getShiftKey()
+						)
 					},
 				}
 			}
@@ -256,48 +218,35 @@ describe('ArrowShapeOptions', () => {
 			const customUtil = new CustomArrowShapeUtil(editor)
 
 			// Test shouldBeExact with both keys and precise
-			editor.inputs.altKey = true
-			editor.inputs.shiftKey = true
+			editor.inputs.setAltKey(true)
+			editor.inputs.setShiftKey(true)
 			expect(customUtil.options.shouldBeExact(editor, true)).toBe(true)
 
 			// Test shouldBeExact with both keys but not precise
-			editor.inputs.altKey = true
-			editor.inputs.shiftKey = true
+			editor.inputs.setAltKey(true)
+			editor.inputs.setShiftKey(true)
 			expect(customUtil.options.shouldBeExact(editor, false)).toBe(false)
 
 			// Test shouldBeExact with only one key
-			editor.inputs.altKey = true
-			editor.inputs.shiftKey = false
+			editor.inputs.setAltKey(true)
+			editor.inputs.setShiftKey(false)
 			expect(customUtil.options.shouldBeExact(editor, true)).toBe(false)
 
 			// Test shouldIgnoreTargets with any key
-			editor.inputs.altKey = false
-			editor.inputs.ctrlKey = false
-			editor.inputs.shiftKey = true
+			editor.inputs.setAltKey(false)
+			editor.inputs.setCtrlKey(false)
+			editor.inputs.setShiftKey(true)
 			expect(customUtil.options.shouldIgnoreTargets(editor)).toBe(true)
 
 			// Test shouldIgnoreTargets with no keys
-			editor.inputs.altKey = false
-			editor.inputs.ctrlKey = false
-			editor.inputs.shiftKey = false
+			editor.inputs.setAltKey(false)
+			editor.inputs.setCtrlKey(false)
+			editor.inputs.setShiftKey(false)
 			expect(customUtil.options.shouldIgnoreTargets(editor)).toBe(false)
 		})
 	})
 
 	describe('Integration with arrow tool states', () => {
-		it('should respect shouldIgnoreTargets in idle state', () => {
-			editor.setCurrentTool('arrow')
-			editor.expectToBeIn('arrow.idle')
-
-			// Move to a position over box1
-			editor.inputs.ctrlKey = true // shouldIgnoreTargets = true
-			editor.pointerMove(150, 150)
-
-			// The arrow tool should not show any target highlighting
-			// (This is more of an integration test - exact assertions would depend on internal state)
-			expect(editor.getCurrentToolId()).toBe('arrow')
-		})
-
 		it('should allow custom shouldBeExact logic based on isPrecise - example from arrow precise-exact', () => {
 			// This replicates the logic from the arrows-precise-exact example
 			const baseUtil = editor.getShapeUtil<ArrowShapeUtil>('arrow')
@@ -315,10 +264,10 @@ describe('ArrowShapeOptions', () => {
 
 			try {
 				editor.setCurrentTool('arrow')
-				editor.inputs.ctrlKey = false // Allow binding
+				editor.inputs.setCtrlKey(false) // Allow binding
 
 				// Set up fast pointer velocity to ensure precise remains false
-				editor.inputs.pointerVelocity = { x: 2, y: 2, len: () => 2.8 } as any
+				editor.inputs.setPointerVelocity({ x: 2, y: 2, len: () => 2.8 } as any)
 
 				const targetState = updateArrowTargetState({
 					editor,
@@ -352,47 +301,5 @@ describe('ArrowShapeOptions', () => {
 				baseUtil.options.shouldBeExact = originalShouldBeExact
 			}
 		})
-
-		it('should respect shouldIgnoreTargets when starting arrow creation', () => {
-			editor.setCurrentTool('arrow')
-
-			// Start creating arrow with ctrl held (shouldIgnoreTargets = true)
-			editor.inputs.ctrlKey = true
-			editor.pointerDown(150, 150) // Start in center of box1
-
-			// Even though we're starting in a shape, no binding should be created
-			editor.pointerMove(200, 200)
-			editor.pointerUp()
-
-			const createdArrow = editor
-				.getCurrentPageShapes()
-				.find((s) => s.type === 'arrow') as TLArrowShape
-			expect(createdArrow).toBeDefined()
-
-			const arrowBindings = getArrowBindings(editor, createdArrow)
-			expect(arrowBindings.start).toBeUndefined()
-			expect(arrowBindings.end).toBeUndefined()
-		})
-
-		it('should respect shouldBeExact during arrow creation', () => {
-			editor.setCurrentTool('arrow')
-
-			// Create arrow with alt held (shouldBeExact = true)
-			editor.inputs.altKey = true
-			editor.inputs.ctrlKey = false // Allow binding
-
-			editor.pointerDown(50, 50) // Start outside shapes
-			editor.pointerMove(150, 150) // Move to center of box1
-			editor.pointerUp()
-
-			const createdArrow = editor
-				.getCurrentPageShapes()
-				.find((s) => s.type === 'arrow') as TLArrowShape
-			expect(createdArrow).toBeDefined()
-
-			const arrowBindings = getArrowBindings(editor, createdArrow)
-			expect(arrowBindings.end).toBeDefined()
-			expect(arrowBindings.end?.props.isExact).toBe(true)
-		})
 	})
 })

package/src/lib/shapes/arrow/ArrowShapeTool.test.ts

@@ -144,7 +144,7 @@ describe('When pointing a start shape', () => {
 		expect(getArrowTargetState(editor)).not.toBeNull()
 
 		// Fake some velocity
-		editor.inputs.pointerVelocity = new Vec(1, 1)
+		editor.inputs.setPointerVelocity(new Vec(1, 1))
 
 		editor.pointerMove(375, 500)
 
@@ -189,7 +189,7 @@ describe('When pointing an end shape', () => {
 		expect(editor.getHintingShapeIds().length).toBe(0)
 
 		// Fake some velocity
-		editor.inputs.pointerVelocity = new Vec(1, 1)
+		editor.inputs.setPointerVelocity(new Vec(1, 1))
 
 		// Move onto shape
 		editor.pointerMove(375, 375)
@@ -227,7 +227,7 @@ describe('When pointing an end shape', () => {
 	it('unbinds and rebinds', () => {
 		editor.setCurrentTool('arrow').pointerDown(0, 0)
 
-		editor.inputs.pointerVelocity = new Vec(1, 1)
+		editor.inputs.setPointerVelocity(new Vec(1, 1))
 
 		editor.pointerMove(375, 375)
 
@@ -283,7 +283,7 @@ describe('When pointing an end shape', () => {
 		})
 
 		// Build up some velocity
-		editor.inputs.pointerVelocity = new Vec(1, 1)
+		editor.inputs.setPointerVelocity(new Vec(1, 1))
 		editor.pointerMove(325, 325)
 		expect(getArrowTargetState(editor)).not.toBeNull()
 
@@ -403,7 +403,7 @@ describe('When pointing an end shape', () => {
 
 	it('begins imprecise when moving quickly', () => {
 		editor.setCurrentTool('arrow').pointerDown(0, 0)
-		editor.inputs.pointerVelocity = new Vec(1, 1)
+		editor.inputs.setPointerVelocity(new Vec(1, 1))
 		editor.pointerMove(370, 370)
 
 		const arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
@@ -435,7 +435,7 @@ describe('When pointing an end shape', () => {
 
 		expect(getArrowTargetState(editor)).toBeNull()
 
-		editor.inputs.pointerVelocity = new Vec(0.001, 0.001)
+		editor.inputs.setPointerVelocity(new Vec(0.001, 0.001))
 		editor.pointerMove(375, 375)
 
 		arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
@@ -588,7 +588,7 @@ describe('precision timeout configuration', () => {
 
 		editor.setCurrentTool('arrow').pointerDown(0, 0)
 		// Use high velocity to avoid precise mode immediately
-		editor.inputs.pointerVelocity = new Vec(1, 1)
+		editor.inputs.setPointerVelocity(new Vec(1, 1))
 		editor.pointerMove(100, 100)
 
 		const arrow = editor.getCurrentPageShapes()[
@@ -630,7 +630,7 @@ describe('precision timeout configuration', () => {
 
 		editor.setCurrentTool('arrow').pointerDown(0, 0)
 		// Use high velocity to avoid precise mode immediately
-		editor.inputs.pointerVelocity = new Vec(1, 1)
+		editor.inputs.setPointerVelocity(new Vec(1, 1))
 		editor.pointerMove(100, 100)
 
 		const arrow = editor.getCurrentPageShapes()[