tldraw 3.16.0-canary.1efac4751756 → 3.16.0-canary.1f09406e5b86

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/Minimap/DefaultMinimap.tsx

@@ -159,7 +159,7 @@ export function DefaultMinimap() {
 				type: 'pointer',
 				target: 'canvas',
 				name: 'pointer_move',
-				...getPointerInfo(e),
+				...getPointerInfo(editor, e),
 				point: screenPoint,
 				isPen: editor.getInstanceState().isPenMode,
 			}

package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx

@@ -1,7 +1,6 @@
 import {
 	PageRecordType,
 	TLPageId,
-	markEventAsHandled,
 	releasePointerCapture,
 	setPointerCapture,
 	tlenv,
@@ -451,7 +450,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 											if (e.key === 'Enter') {
 												if (page.id === currentPage.id) {
 													toggleEditing()
-													markEventAsHandled(e)
+													editor.markEventAsHandled(e)
 												}
 											}
 										}}

package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx

@@ -101,7 +101,7 @@ export function OverflowingToolbar({
 						items: collectItems(child.children),
 						element: child as HTMLElement,
 					})
-				} else {
+				} else if (!child.hasAttribute('data-radix-popper-content-wrapper')) {
 					items.push({ type: 'item', element: child as HTMLElement })
 				}
 			}

package/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx

@@ -1,8 +1,10 @@
 import { useEditor, useValue } from '@tldraw/editor'
 import classNames from 'classnames'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
+import { useActions } from '../../context/actions'
 import { useBreakpoint } from '../../context/breakpoints'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { kbdStr } from '../../kbd-utils'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import { TldrawUiTooltip } from '../primitives/TldrawUiTooltip'
@@ -17,6 +19,7 @@ export function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonP
 	const editor = useEditor()
 	const breakpoint = useBreakpoint()
 	const msg = useTranslation()
+	const actions = useActions()
 
 	const isToolLocked = useValue('is tool locked', () => editor.getInstanceState().isToolLocked, [
 		editor,
@@ -25,11 +28,15 @@ export function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonP
 
 	if (!activeToolId || !tool.isLockable) return null
 
+	const toggleLockAction = actions['toggle-tool-lock']
+	const tooltipContent = toggleLockAction?.kbd
+		? `${msg('action.toggle-tool-lock')} ${kbdStr(toggleLockAction.kbd)}`
+		: msg('action.toggle-tool-lock')
+
 	return (
-		<TldrawUiTooltip content={msg('action.toggle-tool-lock')}>
+		<TldrawUiTooltip content={tooltipContent}>
 			<TldrawUiButton
 				type="normal"
-				title={msg('action.toggle-tool-lock')}
 				data-testid="tool-lock"
 				className={classNames('tlui-main-toolbar__lock-button', {
 					'tlui-main-toolbar__lock-button__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,

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

@@ -3,7 +3,6 @@ import {
 	Box,
 	clamp,
 	Editor,
-	markEventAsHandled,
 	react,
 	useAtom,
 	useEditor,
@@ -170,7 +169,7 @@ export const TldrawUiContextualToolbar = ({
 			data-visible={false}
 			data-testid="contextual-toolbar"
 			className={classNames('tlui-contextual-toolbar', className)}
-			onPointerDown={markEventAsHandled}
+			onPointerDown={editor.markEventAsHandled}
 		>
 			<TldrawUiToolbar
 				orientation="horizontal"

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

@@ -307,9 +307,9 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		}
 
 		// Fallback to old behavior if no provider
-		if (!hasProvider) {
+		if (!hasProvider || showUiLabels) {
 			return (
-				<_Tooltip.Root delayDuration={delayDurationToUse} disableHoverableContent>
+				<_Tooltip.Root delayDuration={delayDurationToUse} disableHoverableContent={!showUiLabels}>
 					<_Tooltip.Trigger asChild ref={ref}>
 						{children}
 					</_Tooltip.Trigger>

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

@@ -333,7 +333,7 @@ function useDraggableEvents(
 							type: 'pointer',
 							target: 'canvas',
 							name: 'pointer_down',
-							...getPointerInfo(e),
+							...getPointerInfo(editor, e),
 							point: screenSpaceStart,
 						})
 
@@ -345,7 +345,7 @@ function useDraggableEvents(
 							type: 'pointer',
 							target: 'canvas',
 							name: 'pointer_move',
-							...getPointerInfo(e),
+							...getPointerInfo(editor, e),
 							point: screenSpaceStart,
 						})
 
@@ -365,7 +365,7 @@ function useDraggableEvents(
 				type: 'pointer',
 				target: 'canvas',
 				name: 'pointer_up',
-				...getPointerInfo(e),
+				...getPointerInfo(editor, e),
 			})
 		}
 

package/src/lib/ui/hooks/useClipboardEvents.ts

@@ -7,7 +7,6 @@ import {
 	assert,
 	compact,
 	isDefined,
-	markEventAsHandled,
 	preventDefault,
 	uniq,
 	useEditor,
@@ -763,7 +762,7 @@ export function useNativeClipboardEvents() {
 
 		const paste = (e: ClipboardEvent) => {
 			if (disablingMiddleClickPaste) {
-				markEventAsHandled(e)
+				editor.markEventAsHandled(e)
 				return
 			}
 

package/src/lib/ui/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '3.16.0-canary.1efac4751756'
+export const version = '3.16.0-canary.1f09406e5b86'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-09-16T22:07:50.660Z',
-	patch: '2025-09-16T22:07:50.660Z',
+	minor: '2025-09-18T13:28:56.456Z',
+	patch: '2025-09-18T13:28:56.456Z',
 }

package/src/lib/ui.css

@@ -168,7 +168,7 @@
 	min-height: 40px;
 	width: 100%;
 	gap: 8px;
-	margin: -4px 0px;
+	margin-top: -4px;
 }
 
 .tlui-button__menu::after {
@@ -1039,6 +1039,19 @@ tldraw? probably.
 	display: none;
 }
 
+/*
+ * This is used in a couple places, like Align and Vertical Align.
+ * It's because we have a toolbar with a Toggle Group but then an adjacent button
+ * next to it that opens a popup.
+ */
+.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) {
+	flex-wrap: wrap;
+}
+
+.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) .tlui-style-panel__subheading {
+	margin-left: -2px;
+}
+
 .tlui-style-panel__section__common:not(:only-child) {
 	margin-bottom: 7px;
 	border-bottom: 1px solid var(--tl-color-divider);

package/src/test/TestEditor.ts

@@ -86,8 +86,14 @@ export class TestEditor extends Editor {
 		elm.tabIndex = 0
 		elm.getBoundingClientRect = () => bounds as DOMRect
 
-		const shapeUtilsWithDefaults = [...defaultShapeUtils, ...(options.shapeUtils ?? [])]
-		const bindingUtilsWithDefaults = [...defaultBindingUtils, ...(options.bindingUtils ?? [])]
+		const shapeUtilsWithDefaults = [
+			...defaultShapeUtils.filter((s) => !options.shapeUtils?.some((su) => su.type === s.type)),
+			...(options.shapeUtils ?? []),
+		]
+		const bindingUtilsWithDefaults = [
+			...defaultBindingUtils.filter((b) => !options.bindingUtils?.some((bu) => bu.type === b.type)),
+			...(options.bindingUtils ?? []),
+		]
 
 		super({
 			...options,

package/src/test/frames.test.ts

@@ -1680,3 +1680,18 @@ it('drops into the top-most frame, if there is one', () => {
 
 	expect(editor.getShape(rect)?.parentId).toBe(editor.getCurrentPageId())
 })
+
+it('does not get drop children of nested frame if they are occluded from the outer frame', () => {
+	const frame1Id = dragCreateFrame({ down: [100, 100], move: [300, 300], up: [300, 300] })
+	const frame2Id = dragCreateFrame({ down: [150, 150], move: [290, 290], up: [290, 290] })
+
+	const rect1 = createRect({ pos: [280, 160], size: [10, 30] })
+
+	expect(editor.getShape(rect1)?.parentId).toBe(frame2Id)
+	expect(editor.getShape(frame2Id)?.parentId).toBe(frame1Id)
+
+	editor.select(frame2Id)
+	editor.translateSelection(30, 0)
+
+	expect(editor.getShape(rect1)?.parentId).toBe(frame2Id)
+})

package/tldraw.css

@@ -1964,7 +1964,7 @@ it from receiving any pointer events or affecting the cursor. */
 	min-height: 40px;
 	width: 100%;
 	gap: 8px;
-	margin: -4px 0px;
+	margin-top: -4px;
 }
 
 .tlui-button__menu::after {
@@ -2835,6 +2835,19 @@ tldraw? probably.
 	display: none;
 }
 
+/*
+ * This is used in a couple places, like Align and Vertical Align.
+ * It's because we have a toolbar with a Toggle Group but then an adjacent button
+ * next to it that opens a popup.
+ */
+.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) {
+	flex-wrap: wrap;
+}
+
+.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) .tlui-style-panel__subheading {
+	margin-left: -2px;
+}
+
 .tlui-style-panel__section__common:not(:only-child) {
 	margin-bottom: 7px;
 	border-bottom: 1px solid var(--tl-color-divider);