tldraw 3.16.0-canary.da857364642e → 3.16.0-canary.df865b5492aa

package/src/lib/defaultExternalContentHandlers.ts

@@ -144,7 +144,7 @@ export async function defaultHandleExternalFileAsset(
 	{ file, assetId }: TLFileExternalAsset,
 	options: TLDefaultExternalContentHandlerOpts
 ) {
-	const isSuccess = runFileChecks(file, options)
+	const isSuccess = notifyIfFileNotAllowed(file, options)
 	if (!isSuccess) assert(false, 'File checks failed')
 
 	const assetInfo = await getAssetInfo(file, options, assetId)
@@ -161,7 +161,7 @@ export async function defaultHandleExternalFileReplaceContent(
 	{ file, shapeId, isImage }: TLFileReplaceExternalContent,
 	options: TLDefaultExternalContentHandlerOpts
 ) {
-	const isSuccess = runFileChecks(file, options)
+	const isSuccess = notifyIfFileNotAllowed(file, options)
 	if (!isSuccess) assert(false, 'File checks failed')
 
 	const shape = editor.getShape(shapeId)
@@ -399,7 +399,7 @@ export async function defaultHandleExternalFileContent(
 		file: File
 	}[] = []
 	for (const file of files) {
-		const isSuccess = runFileChecks(file, options)
+		const isSuccess = notifyIfFileNotAllowed(file, options)
 		if (!isSuccess) continue
 
 		const assetInfo = await getAssetInfo(file, options)
@@ -873,7 +873,15 @@ export function createEmptyBookmarkShape(
 	return editor.getShape(partial.id) as TLBookmarkShape
 }
 
-function runFileChecks(file: File, options: TLDefaultExternalContentHandlerOpts) {
+/**
+ * Checks if a file is allowed to be uploaded. If it is not, it will show a toast explaining why to the user.
+ *
+ * @param file - The file to check
+ * @param options - The options for the external content handler
+ * @returns True if the file is allowed, false otherwise
+ * @public
+ */
+export function notifyIfFileNotAllowed(file: File, options: TLDefaultExternalContentHandlerOpts) {
 	const {
 		acceptedImageMimeTypes = DEFAULT_SUPPORTED_IMAGE_TYPES,
 		acceptedVideoMimeTypes = DEFAULT_SUPPORT_VIDEO_TYPES,

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

@@ -1,4 +1,5 @@
 import { TLArrowShape, createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { ArrowShapeUtil } from './ArrowShapeUtil'
 import { updateArrowTargetState } from './arrowTargetState'
@@ -12,7 +13,7 @@ const ids = {
 	arrow1: createShapeId('arrow1'),
 }
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 window.requestAnimationFrame = function requestAnimationFrame(cb) {
 	return setTimeout(cb, 1000 / 60)

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

@@ -1,4 +1,5 @@
 import { IndexKey, TLArrowShape, TLShapeId, Vec, createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { getArrowTargetState } from './arrowTargetState'
 import { getArrowBindings } from './shared'
@@ -13,7 +14,7 @@ global.cancelAnimationFrame = function cancelAnimationFrame(id) {
 	clearTimeout(id)
 }
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 const ids = {
 	box1: createShapeId('box1'),
@@ -242,7 +243,7 @@ describe('When pointing an end shape', () => {
 			},
 		})
 
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
 
@@ -306,7 +307,7 @@ describe('When pointing an end shape', () => {
 		})
 
 		// Give time for the velocity to die down
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
 

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

@@ -1,4 +1,5 @@
 import { HALF_PI, TLArrowShape, TLShapeId, createShapeId, toRichText } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { createOrUpdateArrowBinding, getArrowBindings } from './shared'
 
@@ -12,7 +13,7 @@ const ids = {
 	arrow1: createShapeId('arrow1'),
 }
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 window.requestAnimationFrame = function requestAnimationFrame(cb) {
 	return setTimeout(cb, 1000 / 60)
@@ -217,7 +218,7 @@ describe('Other cases when arrow are moved', () => {
 		// When box one is not selected, unbinds box1 and keeps binding to box2
 		editor.select(ids.arrow1, ids.box2, ids.box3)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'right')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		expect(bindings()).toMatchObject({
 			start: { toId: ids.box1, props: { isPrecise: false } },
@@ -227,7 +228,7 @@ describe('Other cases when arrow are moved', () => {
 		// maintains bindings if they would still be over the same shape (but makes them precise), but unbinds others
 		editor.select(ids.arrow1, ids.box3)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'top')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		expect(bindings()).toMatchObject({
 			start: { toId: ids.box1, props: { isPrecise: true } },
@@ -244,7 +245,7 @@ describe('Other cases when arrow are moved', () => {
 		// When box one is not selected, unbinds box1 and keeps binding to box2
 		editor.select(ids.arrow1, ids.box2, ids.box3)
 		editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		expect(bindings()).toMatchObject({
 			start: { toId: ids.box1, props: { isPrecise: false } },
@@ -254,7 +255,7 @@ describe('Other cases when arrow are moved', () => {
 		// unbinds when only the arrow is selected (not its bound shapes) if the arrow itself has moved
 		editor.select(ids.arrow1, ids.box3, ids.box4)
 		editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		// The arrow didn't actually move
 		expect(bindings()).toMatchObject({
@@ -265,7 +266,7 @@ describe('Other cases when arrow are moved', () => {
 		// The arrow will not move because it is still bound to another shape
 		editor.updateShapes([{ id: ids.box4, type: 'geo', y: -600 }])
 		editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		expect(bindings()).toMatchObject({
 			start: undefined,

package/src/lib/shapes/draw/DrawShapeTool.test.ts

@@ -1,5 +1,4 @@
 import { TestEditor } from '../../../test/TestEditor'
-import { DrawShapeTool } from './DrawShapeTool'
 
 let editor: TestEditor
 
@@ -10,10 +9,6 @@ afterEach(() => {
 	editor?.dispose()
 })
 
-describe(DrawShapeTool, () => {
-	return
-})
-
 describe('When in the idle state', () => {
 	it('Returns to select on cancel', () => {
 		editor.setCurrentTool('draw')

package/src/lib/shapes/line/LineShapeUtil.test.tsx

@@ -7,6 +7,7 @@ import {
 	sortByIndex,
 	structuredClone,
 } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { TL } from '../../../test/test-jsx'
 
@@ -16,7 +17,7 @@ mockUniqueId(() => 'id' + nextId++)
 let editor: TestEditor
 const id = createShapeId('line1')
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()
@@ -338,12 +339,12 @@ describe('Misc', () => {
 
 		expect(editor.getShapePageBounds(box)!.maxX).not.toEqual(editor.getShapePageBounds(line)!.maxX)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'right')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		expect(editor.getShapePageBounds(box)!.maxX).toEqual(editor.getShapePageBounds(line)!.maxX)
 
 		expect(editor.getShapePageBounds(box)!.maxY).not.toEqual(editor.getShapePageBounds(line)!.maxY)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'bottom')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		expect(editor.getShapePageBounds(box)!.maxY).toEqual(editor.getShapePageBounds(line)!.maxY)
 	})
 

package/src/lib/shapes/line/__snapshots__/LineShapeUtil.test.tsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Misc resizes: line shape after resize 1`] = `
+exports[`Misc > resizes > line shape after resize 1`] = `
 {
   "id": "shape:line1",
   "index": "a1",

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

@@ -33,7 +33,7 @@ export const ShapeFill = React.memo(function ShapeFill({
 			return <path fill={getColorValue(theme, color, 'semi')} d={d} />
 		}
 		case 'semi': {
-			return <path fill={getColorValue(theme, color, 'solid')} d={d} />
+			return <path fill={theme.solid} d={d} />
 		}
 		case 'fill': {
 			return <path fill={getColorValue(theme, color, 'fill')} d={d} />

package/src/lib/shapes/shared/freehand/svg.ts

@@ -6,6 +6,8 @@ import { StrokePoint } from './types'
  *
  * @param points - The stroke points returned from perfect-freehand
  * @param closed - Whether the shape is closed
+ *
+ * @public
  */
 export function getSvgPathFromStrokePoints(points: StrokePoint[], closed = false): string {
 	const len = points.length

package/src/lib/shapes/text/TextShapeTool.test.ts

@@ -1,9 +1,10 @@
 import { DefaultTextAlignStyle, TLTextShape, toRichText } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { TextShapeTool } from './TextShapeTool'
 
 let editor: TestEditor
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()
@@ -115,7 +116,7 @@ describe('When in the pointing state', () => {
 
 		// Go back to start and wait a little to satisfy the time requirement
 		editor.pointerMove(0, 0)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 
 		// y axis doesn't matter
 		editor.pointerMove(0, 100)
@@ -187,7 +188,7 @@ describe('When resizing', () => {
 	it('bails on escape while resizing and returns to text.idle', () => {
 		editor.setCurrentTool('text')
 		editor.pointerDown(0, 0)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		editor.pointerMove(100, 100)
 		editor.expectToBeIn('select.resizing')
 		editor.cancel()
@@ -198,7 +199,7 @@ describe('When resizing', () => {
 	it('does not bails on interrupt while resizing', () => {
 		editor.setCurrentTool('text')
 		editor.pointerDown(0, 0)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		editor.pointerMove(100, 100)
 		editor.expectToBeIn('select.resizing')
 		editor.interrupt()
@@ -210,7 +211,7 @@ describe('When resizing', () => {
 		const x = 0
 		const y = 0
 		editor.pointerDown(x, y)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		editor.pointerMove(x + 100, y + 100)
 		expect(editor.getCurrentPageShapes()[0]).toMatchObject({
 			x,

package/src/lib/tools/EraserTool/childStates/Erasing.ts

@@ -4,6 +4,7 @@ import {
 	TLGroupShape,
 	TLPointerEventInfo,
 	TLShapeId,
+	isAccelKey,
 	pointInPolygon,
 } from '@tldraw/editor'
 
@@ -15,7 +16,15 @@ export class Erasing extends StateNode {
 	private markId = ''
 	private excludedShapeIds = new Set<TLShapeId>()
 
+	_isHoldingAccelKey = false
+	_firstErasingShapeId: TLShapeId | null = null
+	_erasingShapeIds: TLShapeId[] = []
+
 	override onEnter(info: TLPointerEventInfo) {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+		this._firstErasingShapeId = this.editor.getErasingShapeIds()[0] // the first one should be the first one we hit... is it?
+		this._erasingShapeIds = this.editor.getErasingShapeIds()
+
 		this.markId = this.editor.markHistoryStoppingPoint('erase scribble begin')
 		this.info = info
 
@@ -76,6 +85,16 @@ export class Erasing extends StateNode {
 		this.complete()
 	}
 
+	override onKeyUp() {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+		this.update()
+	}
+
+	override onKeyDown() {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+		this.update()
+	}
+
 	update() {
 		const { editor, excludedShapeIds } = this
 		const erasingShapeIds = editor.getErasingShapeIds()
@@ -87,6 +106,7 @@ export class Erasing extends StateNode {
 
 		this.pushPointToScribble()
 
+		// Otherwise, erasing shapes are all the shapes that were hit before plus any new shapes that are hit
 		const erasing = new Set<TLShapeId>(erasingShapeIds)
 		const minDist = this.editor.options.hitTestMargin / zoomLevel
 
@@ -121,18 +141,31 @@ export class Erasing extends StateNode {
 			if (geometry.hitTestLineSegment(A, B, minDist)) {
 				erasing.add(editor.getOutermostSelectableShape(shape).id)
 			}
+
+			this._erasingShapeIds = [...erasing]
+		}
+
+		// If the user is holding the meta / ctrl key, we should only erase the first shape we hit
+		if (this._isHoldingAccelKey && this._firstErasingShapeId) {
+			const erasingShapeId = this._firstErasingShapeId
+			if (erasingShapeId && this.editor.getShape(erasingShapeId)) {
+				editor.setErasingShapes([erasingShapeId])
+			}
+			return
 		}
 
 		// Remove the hit shapes, except if they're in the list of excluded shapes
 		// (these excluded shapes will be any frames or groups the pointer was inside of
 		// when the user started erasing)
-		this.editor.setErasingShapes([...erasing].filter((id) => !excludedShapeIds.has(id)))
+		this.editor.setErasingShapes(this._erasingShapeIds.filter((id) => !excludedShapeIds.has(id)))
 	}
 
 	complete() {
 		const { editor } = this
 		editor.deleteShapes(editor.getCurrentPageState().erasingShapeIds)
 		this.parent.transition('idle')
+		this._erasingShapeIds = []
+		this._firstErasingShapeId = null
 	}
 
 	cancel() {

package/src/lib/tools/EraserTool/childStates/Pointing.ts

@@ -1,4 +1,5 @@
 import {
+	isAccelKey,
 	StateNode,
 	TLFrameShape,
 	TLGroupShape,
@@ -9,7 +10,11 @@ import {
 export class Pointing extends StateNode {
 	static override id = 'pointing'
 
+	_isHoldingAccelKey = false
+
 	override onEnter() {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+
 		const zoomLevel = this.editor.getZoomLevel()
 		const currentPageShapesSorted = this.editor.getCurrentPageRenderingShapesSorted()
 		const {
@@ -45,12 +50,25 @@ export class Pointing extends StateNode {
 				}
 
 				erasing.add(hitShape.id)
+
+				// If the user is holding the meta / ctrl key, stop after the first shape
+				if (this._isHoldingAccelKey) {
+					break
+				}
 			}
 		}
 
 		this.editor.setErasingShapes([...erasing])
 	}
 
+	override onKeyUp() {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+	}
+
+	override onKeyDown() {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+	}
+
 	override onLongPress(info: TLPointerEventInfo) {
 		this.startErasing(info)
 	}
@@ -62,6 +80,8 @@ export class Pointing extends StateNode {
 	}
 
 	override onPointerMove(info: TLPointerEventInfo) {
+		if (this._isHoldingAccelKey) return
+
 		if (this.editor.inputs.isDragging) {
 			this.startErasing(info)
 		}

package/src/lib/ui/assetUrls.ts

@@ -1,4 +1,5 @@
 import { LANGUAGES, RecursivePartial, getDefaultCdnBaseUrl } from '@tldraw/editor'
+import { useMemo } from 'react'
 import { DEFAULT_EMBED_DEFINITIONS } from '../defaultEmbedDefinitions'
 import { TLEditorAssetUrls, defaultEditorAssetUrls } from '../utils/static-assets/assetUrls'
 import { TLUiIconType, iconTypes } from './icon-types'
@@ -41,15 +42,17 @@ export function setDefaultUiAssetUrls(urls: TLUiAssetUrls) {
 export function useDefaultUiAssetUrlsWithOverrides(
 	overrides?: TLUiAssetUrlOverrides
 ): TLUiAssetUrls {
-	if (!overrides) return defaultUiAssetUrls
+	return useMemo(() => {
+		if (!overrides) return defaultUiAssetUrls
 
-	return {
-		fonts: Object.assign({ ...defaultUiAssetUrls.fonts }, { ...overrides?.fonts }),
-		icons: Object.assign({ ...defaultUiAssetUrls.icons }, { ...overrides?.icons }),
-		embedIcons: Object.assign({ ...defaultUiAssetUrls.embedIcons }, { ...overrides?.embedIcons }),
-		translations: Object.assign(
-			{ ...defaultUiAssetUrls.translations },
-			{ ...overrides?.translations }
-		),
-	}
+		return {
+			fonts: Object.assign({ ...defaultUiAssetUrls.fonts }, { ...overrides?.fonts }),
+			icons: Object.assign({ ...defaultUiAssetUrls.icons }, { ...overrides?.icons }),
+			embedIcons: Object.assign({ ...defaultUiAssetUrls.embedIcons }, { ...overrides?.embedIcons }),
+			translations: Object.assign(
+				{ ...defaultUiAssetUrls.translations },
+				{ ...overrides?.translations }
+			),
+		}
+	}, [overrides])
 }

package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx

@@ -123,7 +123,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="text-header"
 					label="tool.rich-text-header"
-					kbd="cmd+shift+[[1-6]]"
+					kbd="cmd+alt+[[1-6]]"
 					onSelect={() => {
 						/* do nothing */
 					}}

package/src/lib/ui/components/StylePanel/DropdownPicker.tsx

@@ -74,7 +74,7 @@ function DropdownPickerInner<T extends string>({
 				</TldrawUiToolbarButton>
 			</TldrawUiPopoverTrigger>
 			<TldrawUiPopoverContent side="left" align="center">
-				<TldrawUiToolbar orientation="grid" label={labelStr}>
+				<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>
 					<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
 						{items.map((item) => {
 							return (

package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx

@@ -20,6 +20,8 @@ export interface TldrawUiTooltipProps {
 	side?: 'top' | 'right' | 'bottom' | 'left'
 	sideOffset?: number
 	disabled?: boolean
+	showOnMobile?: boolean
+	delayDuration?: number
 }
 
 // Singleton tooltip manager
@@ -30,10 +32,11 @@ class TooltipManager {
 		content: ReactNode
 		side: 'top' | 'right' | 'bottom' | 'left'
 		sideOffset: number
+		showOnMobile: boolean
 		targetElement: HTMLElement
+		delayDuration: number
 	} | null>('current tooltip', null)
 	private destroyTimeoutId: number | null = null
-	private subscribers: Set<() => void> = new Set()
 
 	static getInstance(): TooltipManager {
 		if (!TooltipManager.instance) {
@@ -46,8 +49,10 @@ class TooltipManager {
 		tooltipId: string,
 		content: string | React.ReactNode,
 		targetElement: HTMLElement,
-		side: 'top' | 'right' | 'bottom' | 'left' = 'bottom',
-		sideOffset: number = 5
+		side: 'top' | 'right' | 'bottom' | 'left',
+		sideOffset: number,
+		showOnMobile: boolean,
+		delayDuration: number
 	) {
 		// Clear any existing destroy timeout
 		if (this.destroyTimeoutId) {
@@ -61,7 +66,9 @@ class TooltipManager {
 			content,
 			side,
 			sideOffset,
+			showOnMobile,
 			targetElement,
+			delayDuration,
 		})
 	}
 
@@ -88,8 +95,10 @@ class TooltipManager {
 	}
 
 	getCurrentTooltipData() {
-		if (!this.supportsHover()) return null
-		return this.currentTooltip.get()
+		const currentTooltip = this.currentTooltip.get()
+		if (!currentTooltip) return null
+		if (!this.supportsHover() && !currentTooltip.showOnMobile) return null
+		return currentTooltip
 	}
 
 	private supportsHoverAtom: Atom<boolean> | null = null
@@ -130,11 +139,9 @@ export function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderPro
 
 // The singleton tooltip component that renders once
 function TooltipSingleton() {
-	const editor = useMaybeEditor()
 	const [isOpen, setIsOpen] = useState(false)
 	const triggerRef = useRef<HTMLDivElement>(null)
 	const isFirstShowRef = useRef(true)
-	const showTimeoutRef = useRef<number | null>(null)
 
 	const currentTooltip = useValue(
 		'current tooltip',
@@ -144,12 +151,7 @@ function TooltipSingleton() {
 
 	// Update open state and trigger position
 	useEffect(() => {
-		// Clear any existing show timeout
-		if (showTimeoutRef.current) {
-			clearTimeout(showTimeoutRef.current)
-			showTimeoutRef.current = null
-		}
-
+		let timer: ReturnType<typeof setTimeout> | null = null
 		if (currentTooltip && triggerRef.current) {
 			// Position the invisible trigger element over the active element
 			const activeRect = currentTooltip.targetElement.getBoundingClientRect()
@@ -164,11 +166,12 @@ function TooltipSingleton() {
 			trigger.style.zIndex = '9999'
 
 			// Handle delay for first show
-			if (isFirstShowRef.current && editor) {
-				showTimeoutRef.current = editor.timers.setTimeout(() => {
+			if (isFirstShowRef.current) {
+				// eslint-disable-next-line no-restricted-globals
+				timer = setTimeout(() => {
 					setIsOpen(true)
 					isFirstShowRef.current = false
-				}, editor.options.tooltipDelayMs)
+				}, currentTooltip.delayDuration)
 			} else {
 				// Subsequent tooltips show immediately
 				setIsOpen(true)
@@ -179,7 +182,13 @@ function TooltipSingleton() {
 			// Reset first show state after tooltip is hidden
 			isFirstShowRef.current = true
 		}
-	}, [editor, currentTooltip])
+
+		return () => {
+			if (timer !== null) {
+				clearTimeout(timer)
+			}
+		}
+	}, [currentTooltip])
 
 	if (!currentTooltip) {
 		return null
@@ -207,7 +216,18 @@ function TooltipSingleton() {
 
 /** @public @react */
 export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProps>(
-	({ children, content, side, sideOffset = 5, disabled = false }, ref) => {
+	(
+		{
+			children,
+			content,
+			side,
+			sideOffset = 5,
+			disabled = false,
+			showOnMobile = false,
+			delayDuration,
+		},
+		ref
+	) => {
 		const editor = useMaybeEditor()
 		const tooltipId = useRef<string>(uniqueId())
 		const hasProvider = useContext(TooltipSingletonContext)
@@ -229,13 +249,13 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 			return <>{children}</>
 		}
 
+		const delayDurationToUse =
+			delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
+
 		// Fallback to old behavior if no provider
 		if (!hasProvider) {
 			return (
-				<_Tooltip.Root
-					delayDuration={editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS}
-					disableHoverableContent
-				>
+				<_Tooltip.Root delayDuration={delayDurationToUse} disableHoverableContent>
 					<_Tooltip.Trigger asChild ref={ref}>
 						{children}
 					</_Tooltip.Trigger>
@@ -264,7 +284,9 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 				content,
 				event.currentTarget as HTMLElement,
 				sideToUse,
-				sideOffset
+				sideOffset,
+				showOnMobile,
+				delayDurationToUse
 			)
 		}
 
@@ -280,7 +302,9 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 				content,
 				event.currentTarget as HTMLElement,
 				sideToUse,
-				sideOffset
+				sideOffset,
+				showOnMobile,
+				delayDurationToUse
 			)
 		}
 

package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx

@@ -316,8 +316,8 @@ function useDraggableEvents(
 				if (
 					distanceSq >
 					(editor.getInstanceState().isCoarsePointer
-						? editor.options.coarseDragDistanceSquared
-						: editor.options.dragDistanceSquared)
+						? editor.options.uiCoarseDragDistanceSquared
+						: editor.options.uiDragDistanceSquared)
 				) {
 					const screenSpaceStart = state.screenSpaceStart
 					state = {
@@ -350,6 +350,7 @@ function useDraggableEvents(
 						})
 
 						tooltipManager.hideAllTooltips()
+						editor.getContainer().focus()
 					})
 				}
 			}