tldraw 3.16.0-canary.2e83e38fb91b → 3.16.0-canary.344cec0354f3

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

@@ -47,13 +47,21 @@ describe('ArrowShapeOptions', () => {
 		it('should have correct default shouldBeExact behavior (alt key)', () => {
 			const util = editor.getShapeUtil<ArrowShapeUtil>('arrow')
 
-			// Test without alt key
+			// Test without alt key, not precise
 			editor.inputs.altKey = false
-			expect(util.options.shouldBeExact(editor)).toBe(false)
+			expect(util.options.shouldBeExact(editor, false)).toBe(false)
 
-			// Test with alt key
+			// Test without alt key, precise
+			editor.inputs.altKey = false
+			expect(util.options.shouldBeExact(editor, true)).toBe(false)
+
+			// Test with alt key, not precise
+			editor.inputs.altKey = true
+			expect(util.options.shouldBeExact(editor, false)).toBe(true)
+
+			// Test with alt key, precise
 			editor.inputs.altKey = true
-			expect(util.options.shouldBeExact(editor)).toBe(true)
+			expect(util.options.shouldBeExact(editor, true)).toBe(true)
 		})
 
 		it('should have correct default shouldIgnoreTargets behavior (ctrl key)', () => {
@@ -186,7 +194,7 @@ describe('ArrowShapeOptions', () => {
 			class CustomArrowShapeUtil extends ArrowShapeUtil {
 				override options = {
 					...baseUtil.options,
-					shouldBeExact: (editor: any) => editor.inputs.shiftKey, // Use shift instead of alt
+					shouldBeExact: (editor: any, _isPrecise: boolean) => editor.inputs.shiftKey, // Use shift instead of alt
 				}
 			}
 
@@ -195,12 +203,14 @@ describe('ArrowShapeOptions', () => {
 			// Test with shift key
 			editor.inputs.shiftKey = true
 			editor.inputs.altKey = false
-			expect(customUtil.options.shouldBeExact(editor)).toBe(true)
+			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
-			expect(customUtil.options.shouldBeExact(editor)).toBe(false)
+			expect(customUtil.options.shouldBeExact(editor, false)).toBe(false)
+			expect(customUtil.options.shouldBeExact(editor, true)).toBe(false)
 		})
 
 		it('should allow customizing shouldIgnoreTargets behavior', () => {
@@ -232,9 +242,9 @@ describe('ArrowShapeOptions', () => {
 			class CustomArrowShapeUtil extends ArrowShapeUtil {
 				override options = {
 					...baseUtil.options,
-					shouldBeExact: (editor: any) => {
-						// Custom logic: exact when both alt and shift are pressed
-						return editor.inputs.altKey && editor.inputs.shiftKey
+					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
 					},
 					shouldIgnoreTargets: (editor: any) => {
 						// Custom logic: ignore targets when any modifier key is pressed
@@ -245,15 +255,20 @@ describe('ArrowShapeOptions', () => {
 
 			const customUtil = new CustomArrowShapeUtil(editor)
 
-			// Test shouldBeExact with both keys
+			// Test shouldBeExact with both keys and precise
 			editor.inputs.altKey = true
 			editor.inputs.shiftKey = true
-			expect(customUtil.options.shouldBeExact(editor)).toBe(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
+			expect(customUtil.options.shouldBeExact(editor, false)).toBe(false)
 
 			// Test shouldBeExact with only one key
 			editor.inputs.altKey = true
 			editor.inputs.shiftKey = false
-			expect(customUtil.options.shouldBeExact(editor)).toBe(false)
+			expect(customUtil.options.shouldBeExact(editor, true)).toBe(false)
 
 			// Test shouldIgnoreTargets with any key
 			editor.inputs.altKey = false
@@ -283,6 +298,61 @@ describe('ArrowShapeOptions', () => {
 			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')
+			class ExampleArrowShapeUtil extends ArrowShapeUtil {
+				override options = {
+					...baseUtil.options,
+					shouldBeExact: (_editor: any, isPrecise: boolean) => isPrecise,
+				}
+			}
+
+			// Replace the util temporarily for testing
+			const customUtil = new ExampleArrowShapeUtil(editor)
+			const originalShouldBeExact = baseUtil.options.shouldBeExact
+			baseUtil.options.shouldBeExact = customUtil.options.shouldBeExact
+
+			try {
+				editor.setCurrentTool('arrow')
+				editor.inputs.ctrlKey = 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
+
+				const targetState = updateArrowTargetState({
+					editor,
+					pointInPageSpace: { x: 150, y: 150 },
+					arrow: undefined,
+					isPrecise: true, // Input precise
+					currentBinding: undefined,
+					oppositeBinding: undefined,
+				})
+
+				// With the custom logic, precise arrows should be exact
+				expect(targetState?.isExact).toBe(true)
+				expect(targetState?.isPrecise).toBe(true)
+
+				// Test with non-precise movement (and fast velocity to avoid auto-precise)
+				const nonPreciseTargetState = updateArrowTargetState({
+					editor,
+					pointInPageSpace: { x: 150, y: 150 },
+					arrow: undefined,
+					isPrecise: false, // Not precise
+					currentBinding: undefined,
+					oppositeBinding: undefined,
+				})
+
+				// Non-precise arrows should not be exact with this custom logic,
+				// but they might still become precise due to internal logic
+				// The key test is that shouldBeExact gets the final computed precise value
+				expect(nonPreciseTargetState).toBeDefined()
+			} finally {
+				// Restore original function
+				baseUtil.options.shouldBeExact = originalShouldBeExact
+			}
+		})
+
 		it('should respect shouldIgnoreTargets when starting arrow creation', () => {
 			editor.setCurrentTool('arrow')
 

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

@@ -1,6 +1,8 @@
 import { IndexKey, TLArrowShape, TLShapeId, Vec, createShapeId } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
+import { defaultShapeUtils } from '../../defaultShapeUtils'
+import { ArrowShapeUtil } from './ArrowShapeUtil'
 import { getArrowTargetState } from './arrowTargetState'
 import { getArrowBindings } from './shared'
 
@@ -26,8 +28,8 @@ function bindings(id: TLShapeId) {
 	return getArrowBindings(editor, editor.getShape(id) as TLArrowShape)
 }
 
-beforeEach(() => {
-	editor = new TestEditor()
+function init(opts?: ConstructorParameters<typeof TestEditor>[0]) {
+	editor = new TestEditor(opts)
 	editor
 		.selectAll()
 		.deleteShapes(editor.getSelectedShapeIds())
@@ -36,7 +38,9 @@ beforeEach(() => {
 			{ id: ids.box2, type: 'geo', x: 300, y: 300, props: { w: 100, h: 100 } },
 			{ id: ids.box3, type: 'geo', x: 350, y: 350, props: { w: 50, h: 50 } }, // overlapping box2, but smaller!
 		])
-})
+}
+
+beforeEach(init)
 
 it('enters the arrow state', () => {
 	editor.setCurrentTool('arrow')
@@ -578,6 +582,96 @@ describe('reparenting issue', () => {
 	})
 })
 
+describe('precision timeout configuration', () => {
+	it('uses a timeout when dragging arrow handles', () => {
+		// Create an arrow first
+
+		editor.setCurrentTool('arrow').pointerDown(0, 0)
+		// Use high velocity to avoid precise mode immediately
+		editor.inputs.pointerVelocity = new Vec(1, 1)
+		editor.pointerMove(100, 100)
+
+		const arrow = editor.getCurrentPageShapes()[
+			editor.getCurrentPageShapes().length - 1
+		] as TLArrowShape
+
+		editor.expectToBeIn('select.dragging_handle')
+
+		expect(bindings(arrow.id)).toMatchObject({
+			end: {
+				toId: ids.box1,
+				props: {
+					isPrecise: false,
+				},
+			},
+		})
+
+		vi.advanceTimersByTime(1000)
+
+		expect(bindings(arrow.id)).toMatchObject({
+			end: {
+				toId: ids.box1,
+				props: {
+					isPrecise: true,
+				},
+			},
+		})
+	})
+
+	it('allows configuring the pointingPreciseTimeout', () => {
+		init({
+			shapeUtils: [
+				...defaultShapeUtils.map((s) =>
+					s.type === 'arrow' ? ArrowShapeUtil.configure({ pointingPreciseTimeout: 2000 }) : s
+				),
+			],
+		})
+		// Create an arrow first
+
+		editor.setCurrentTool('arrow').pointerDown(0, 0)
+		// Use high velocity to avoid precise mode immediately
+		editor.inputs.pointerVelocity = new Vec(1, 1)
+		editor.pointerMove(100, 100)
+
+		const arrow = editor.getCurrentPageShapes()[
+			editor.getCurrentPageShapes().length - 1
+		] as TLArrowShape
+
+		editor.expectToBeIn('select.dragging_handle')
+
+		expect(bindings(arrow.id)).toMatchObject({
+			end: {
+				toId: ids.box1,
+				props: {
+					isPrecise: false,
+				},
+			},
+		})
+
+		vi.advanceTimersByTime(1000)
+
+		expect(bindings(arrow.id)).toMatchObject({
+			end: {
+				toId: ids.box1,
+				props: {
+					isPrecise: false,
+				},
+			},
+		})
+
+		vi.advanceTimersByTime(1000)
+
+		expect(bindings(arrow.id)).toMatchObject({
+			end: {
+				toId: ids.box1,
+				props: {
+					isPrecise: true,
+				},
+			},
+		})
+	})
+})
+
 describe('line bug', () => {
 	it('works as expected when binding to a straight line', () => {
 		editor.selectAll().deleteShapes(editor.getSelectedShapeIds())

package/src/lib/shapes/arrow/arrow-types.ts

@@ -81,7 +81,7 @@ export interface ArrowShapeOptions {
 	 */
 	readonly hoverPreciseTimeout: number
 	/**
-	 * When pointing at a shape using the arrow tool or draggin an arrow terminal handle, how long
+	 * When pointing at a shape using the arrow tool or dragging an arrow terminal handle, how long
 	 * should we wait before we assume the user is targeting precisely instead of imprecisely.
 	 */
 	readonly pointingPreciseTimeout: number
@@ -90,13 +90,11 @@ export interface ArrowShapeOptions {
 	 * When creating an arrow, should it stop exactly at the pointer, or should
 	 * it stop at the edge of the target shape.
 	 */
-	// eslint-disable-next-line @typescript-eslint/method-signature-style
-	readonly shouldBeExact: (editor: Editor) => boolean
+	shouldBeExact(editor: Editor, isPrecise: boolean): boolean
 	/**
 	 * When creating an arrow, should it bind to the target shape.
 	 */
-	// eslint-disable-next-line @typescript-eslint/method-signature-style
-	readonly shouldIgnoreTargets: (editor: Editor) => boolean
+	shouldIgnoreTargets(editor: Editor): boolean
 }
 
 /** @public */

package/src/lib/shapes/arrow/arrowTargetState.ts

@@ -27,6 +27,11 @@ import {
 	ElbowArrowSideDeltas,
 } from './elbow/definitions'
 
+/**
+ * Options passed to {@link updateArrowTargetState}.
+ *
+ * @public
+ */
 export interface UpdateArrowTargetStateOpts {
 	editor: Editor
 	pointInPageSpace: VecLike
@@ -37,6 +42,13 @@ export interface UpdateArrowTargetStateOpts {
 	oppositeBinding: TLArrowBinding | undefined
 }
 
+/**
+ * State representing what we're pointing to when drawing or updating an arrow. You can get this
+ * state using {@link getArrowTargetState}, and update it as part of an arrow interaction with
+ * {@link updateArrowTargetState} or {@link clearArrowTargetState}.
+ *
+ * @public
+ */
 export interface ArrowTargetState {
 	target: TLShape
 	arrowKind: TLArrowShapeKind
@@ -63,14 +75,32 @@ function getArrowTargetAtom(editor: Editor) {
 	return arrowTargetStore.get(editor, () => atom('arrowTarget', null))
 }
 
+/**
+ * Get the current arrow target state for an editor. See {@link ArrowTargetState} for more
+ * information.
+ *
+ * @public
+ */
 export function getArrowTargetState(editor: Editor) {
 	return getArrowTargetAtom(editor).get()
 }
 
+/**
+ * Clear the current arrow target state for an editor. See {@link ArrowTargetState} for more
+ * information.
+ *
+ * @public
+ */
 export function clearArrowTargetState(editor: Editor) {
 	getArrowTargetAtom(editor).set(null)
 }
 
+/**
+ * Update the current arrow target state for an editor. See {@link ArrowTargetState} for more
+ * information.
+ *
+ * @public
+ */
 export function updateArrowTargetState({
 	editor,
 	pointInPageSpace,
@@ -87,8 +117,6 @@ export function updateArrowTargetState({
 		return null
 	}
 
-	const isExact = util.options.shouldBeExact(editor)
-
 	const arrowKind = arrow ? arrow.props.kind : editor.getStyleForNextShape(ArrowShapeKindStyle)
 
 	const target = editor.getShapeAtPoint(pointInPageSpace, {
@@ -165,7 +193,7 @@ export function updateArrowTargetState({
 		}
 	}
 
-	let precise = isPrecise || isExact
+	let precise = isPrecise
 
 	if (!precise) {
 		// If we're switching to a new bound shape, then precise only if moving slowly
@@ -186,6 +214,9 @@ export function updateArrowTargetState({
 		}
 	}
 
+	const isExact = util.options.shouldBeExact(editor, precise)
+	if (isExact) precise = true
+
 	const shouldSnapCenter = !isExact && precise && targetGeometryInTargetSpace.isClosed
 	// const shouldSnapEdges = !isExact && (precise || !targetGeometryInTargetSpace.isClosed)
 	const shouldSnapEdges =

package/src/lib/shapes/arrow/toolStates/Pointing.tsx

@@ -163,7 +163,7 @@ export class Pointing extends StateNode {
 			const endHandle = handles.find((h) => h.id === 'end')!
 			const change = util.onHandleDrag?.(this.editor.getShape(shape)!, {
 				handle: { ...endHandle, x: point.x, y: point.y },
-				isPrecise: false,
+				isPrecise: this.isPrecise,
 				isCreatingShape: true,
 				initial: initial,
 			})

package/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx

@@ -13,7 +13,6 @@ import {
 	debounce,
 	getHashForString,
 	lerp,
-	markEventAsHandled,
 	tlenv,
 	toDomPrecision,
 	useEditor,
@@ -134,7 +133,7 @@ function BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {
 
 	const markAsHandledOnShiftKey = useCallback<PointerEventHandler>(
 		(e) => {
-			if (!editor.inputs.shiftKey) markEventAsHandled(e)
+			if (!editor.inputs.shiftKey) editor.markEventAsHandled(e)
 		},
 		[editor]
 	)

package/src/lib/shapes/frame/components/FrameLabelInput.tsx

@@ -1,4 +1,4 @@
-import { TLFrameShape, TLShapeId, markEventAsHandled, useEditor } from '@tldraw/editor'
+import { TLFrameShape, TLShapeId, useEditor } from '@tldraw/editor'
 import { forwardRef, useCallback } from 'react'
 import { defaultEmptyAs } from '../FrameShapeUtil'
 
@@ -8,12 +8,19 @@ export const FrameLabelInput = forwardRef<
 >(({ id, name, isEditing }, ref) => {
 	const editor = useEditor()
 
+	const handlePointerDown = useCallback(
+		(e: React.PointerEvent) => {
+			if (isEditing) editor.markEventAsHandled(e)
+		},
+		[editor, isEditing]
+	)
+
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent<HTMLInputElement>) => {
 			if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
 				// need to prevent the enter keydown making it's way up to the Idle state
 				// and sending us back into edit mode
-				markEventAsHandled(e)
+				editor.markEventAsHandled(e)
 				e.currentTarget.blur()
 				editor.setEditingShape(null)
 			}
@@ -74,7 +81,7 @@ export const FrameLabelInput = forwardRef<
 				onKeyDown={handleKeyDown}
 				onBlur={handleBlur}
 				onChange={handleChange}
-				onPointerDown={isEditing ? markEventAsHandled : undefined}
+				onPointerDown={handlePointerDown}
 				draggable={false}
 			/>
 			{defaultEmptyAs(name, 'Frame') + String.fromCharCode(8203)}

package/src/lib/shapes/shared/HyperlinkButton.tsx

@@ -1,4 +1,4 @@
-import { markEventAsHandled, useEditor, useValue } from '@tldraw/editor'
+import { useEditor, useValue } from '@tldraw/editor'
 import classNames from 'classnames'
 import { PointerEventHandler, useCallback } from 'react'
 
@@ -10,7 +10,7 @@ export function HyperlinkButton({ url }: { url: string }) {
 	const hideButton = useValue('zoomLevel', () => editor.getZoomLevel() < 0.32, [editor])
 	const markAsHandledOnShiftKey = useCallback<PointerEventHandler>(
 		(e) => {
-			if (!editor.inputs.shiftKey) markEventAsHandled(e)
+			if (!editor.inputs.shiftKey) editor.markEventAsHandled(e)
 		},
 		[editor]
 	)

package/src/lib/shapes/shared/useEditablePlainText.ts

@@ -3,7 +3,6 @@ import {
 	TLShapeId,
 	TLUnknownShape,
 	getPointerInfo,
-	markEventAsHandled,
 	noop,
 	preventDefault,
 	tlenv,
@@ -129,7 +128,7 @@ export function useEditableTextCommon(shapeId: TLShapeId) {
 			// partially if we didn't dispatch/stop below.
 
 			editor.dispatch({
-				...getPointerInfo(e),
+				...getPointerInfo(editor, e),
 				type: 'pointer',
 				name: 'pointer_down',
 				target: 'shape',
@@ -157,13 +156,11 @@ export function useEditableTextCommon(shapeId: TLShapeId) {
 		[editor, shapeId]
 	)
 
-	const handleDoubleClick: (e: React.MouseEvent) => void = markEventAsHandled
-
 	return {
 		handleFocus: noop,
 		handleBlur: noop,
 		handleInputPointerDown,
-		handleDoubleClick,
+		handleDoubleClick: editor.markEventAsHandled,
 		handlePaste,
 		isEditing,
 		isReadyForEditing,

package/src/lib/shapes/text/PlainTextArea.tsx

@@ -1,4 +1,4 @@
-import { markEventAsHandled, preventDefault } from '@tldraw/editor'
+import { preventDefault, useEditor } from '@tldraw/editor'
 import React from 'react'
 import { TextAreaProps } from './RichTextArea'
 
@@ -21,6 +21,7 @@ export const PlainTextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps
 	},
 	ref
 ) {
+	const editor = useEditor()
 	const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
 		handleChange({ plaintext: e.target.value })
 	}
@@ -46,7 +47,7 @@ export const PlainTextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps
 			onChange={onChange}
 			onKeyDown={(e) => handleKeyDown(e.nativeEvent)}
 			onBlur={handleBlur}
-			onTouchEnd={markEventAsHandled}
+			onTouchEnd={editor.markEventAsHandled}
 			onContextMenu={isEditing ? (e) => e.stopPropagation() : undefined}
 			onPointerDown={handleInputPointerDown}
 			onPaste={handlePaste}

package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx

@@ -13,6 +13,7 @@ import {
 	sortByIndex,
 	structuredClone,
 } from '@tldraw/editor'
+import { ArrowShapeUtil } from '../../../shapes/arrow/ArrowShapeUtil'
 import { clearArrowTargetState } from '../../../shapes/arrow/arrowTargetState'
 import { getArrowBindings } from '../../../shapes/arrow/shared'
 
@@ -135,10 +136,13 @@ export class DraggingHandle extends StateNode {
 	}
 
 	// Only relevant to arrows
-	private exactTimeout = -1 as any
+	private exactTimeout = -1
 
 	// Only relevant to arrows
 	private resetExactTimeout() {
+		const arrowUtil = this.editor.getShapeUtil<ArrowShapeUtil>('arrow')
+		const timeoutValue = arrowUtil.options.pointingPreciseTimeout
+
 		if (this.exactTimeout !== -1) {
 			this.clearExactTimeout()
 		}
@@ -150,7 +154,7 @@ export class DraggingHandle extends StateNode {
 				this.update()
 			}
 			this.exactTimeout = -1
-		}, 750)
+		}, timeoutValue)
 	}
 
 	// Only relevant to arrows

package/src/lib/ui/components/A11y.tsx

@@ -1,7 +1,6 @@
 import {
 	debugFlags,
 	Editor,
-	markEventAsHandled,
 	TLGeoShape,
 	TLShapeId,
 	unsafe__withoutCapture,
@@ -23,7 +22,7 @@ export function SkipToMainContent() {
 
 	const handleNavigateToFirstShape = useCallback(
 		(e: MouseEvent | KeyboardEvent) => {
-			markEventAsHandled(e)
+			editor.markEventAsHandled(e)
 			button.current?.blur()
 			const shapes = editor.getCurrentPageShapesInReadingOrder()
 			if (!shapes.length) return

package/src/lib/ui/components/AccessibilityMenu.tsx

@@ -1,7 +1,7 @@
 import {
+	ToggleEnhancedA11yModeItem,
 	ToggleKeyboardShortcutsItem,
 	ToggleReduceMotionItem,
-	ToggleUiLabelsItem,
 } from './menu-items'
 import { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'
 import { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'
@@ -13,7 +13,7 @@ export function AccessibilityMenu() {
 			<TldrawUiMenuGroup id="accessibility">
 				<ToggleReduceMotionItem />
 				<ToggleKeyboardShortcutsItem />
-				<ToggleUiLabelsItem />
+				<ToggleEnhancedA11yModeItem />
 			</TldrawUiMenuGroup>
 		</TldrawUiMenuSubmenu>
 	)

package/src/lib/ui/components/InputModeMenu.tsx

@@ -0,0 +1,65 @@
+import { useEditor, useValue } from '@tldraw/editor'
+import { useUiEvents } from '../context/events'
+import { TldrawUiMenuCheckboxItem } from './primitives/menus/TldrawUiMenuCheckboxItem'
+import { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'
+import { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'
+
+const MODES = ['auto', 'trackpad', 'mouse'] as const
+
+/** @public @react */
+export function InputModeMenu() {
+	const editor = useEditor()
+	const trackEvent = useUiEvents()
+
+	const inputMode = useValue('inputMode', () => editor.user.getUserPreferences().inputMode, [
+		editor,
+	])
+	const wheelBehavior = useValue('wheelBehavior', () => editor.getCameraOptions().wheelBehavior, [
+		editor,
+	])
+
+	const isModeChecked = (mode: string) => {
+		if (mode === 'auto') {
+			return inputMode === null
+		}
+		return inputMode === mode
+	}
+
+	const getLabel = (mode: string, wheelBehavior: 'zoom' | 'pan' | 'none') => {
+		if (mode === 'auto') {
+			return `action.toggle-auto-${wheelBehavior}`
+		}
+
+		return mode === 'trackpad' ? 'action.toggle-trackpad' : 'action.toggle-mouse'
+	}
+
+	return (
+		<TldrawUiMenuSubmenu id="help menu input-mode" label="menu.input-mode">
+			<TldrawUiMenuGroup id="peripheral-mode">
+				{MODES.map((mode) => (
+					<TldrawUiMenuCheckboxItem
+						id={`peripheral-mode-${mode}`}
+						key={mode}
+						label={getLabel(mode, wheelBehavior)}
+						checked={isModeChecked(mode)}
+						readonlyOk
+						onSelect={() => {
+							trackEvent('input-mode', { source: 'menu', value: mode })
+							switch (mode) {
+								case 'auto':
+									editor.user.updateUserPreferences({ inputMode: null })
+									break
+								case 'trackpad':
+									editor.user.updateUserPreferences({ inputMode: 'trackpad' })
+									break
+								case 'mouse':
+									editor.user.updateUserPreferences({ inputMode: 'mouse' })
+									break
+							}
+						}}
+					/>
+				))}
+			</TldrawUiMenuGroup>
+		</TldrawUiMenuSubmenu>
+	)
+}

package/src/lib/ui/components/LanguageMenu.tsx

@@ -18,6 +18,7 @@ export function LanguageMenu() {
 				{LANGUAGES.map(({ locale, label }) => (
 					<TldrawUiMenuCheckboxItem
 						id={`language-${locale}`}
+						lang={locale}
 						key={locale}
 						title={locale}
 						label={label}

package/src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx

@@ -2,6 +2,7 @@ import { useCanRedo, useCanUndo } from '../../hooks/menu-hooks'
 import { AccessibilityMenu } from '../AccessibilityMenu'
 import { ColorSchemeMenu } from '../ColorSchemeMenu'
 import { KeyboardShortcutsMenuItem } from '../HelpMenu/DefaultHelpMenuContent'
+import { InputModeMenu } from '../InputModeMenu'
 import { LanguageMenu } from '../LanguageMenu'
 import {
 	ClipboardMenuGroup,
@@ -164,6 +165,9 @@ export function PreferencesGroup() {
 					<TogglePasteAtCursorItem />
 					<ToggleDebugModeItem />
 				</TldrawUiMenuGroup>
+				<TldrawUiMenuGroup id="input-mode">
+					<InputModeMenu />
+				</TldrawUiMenuGroup>
 				<TldrawUiMenuGroup id="color-scheme">
 					<ColorSchemeMenu />
 				</TldrawUiMenuGroup>