tldraw 3.16.0-canary.b5a35402e79e → 3.16.0-canary.bf9fb05eb8ef

package/src/lib/ui/components/{FollowingIndicator.tsx → DefaultFollowingIndicator.tsx}

@@ -1,6 +1,7 @@
 import { useEditor, usePresence, useValue } from '@tldraw/editor'
 
-export function FollowingIndicator() {
+/** @public @react */
+export function DefaultFollowingIndicator() {
 	const editor = useEditor()
 	const followingUserId = useValue('follow', () => editor.getInstanceState().followingUserId, [
 		editor,

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

@@ -34,7 +34,7 @@ class TooltipManager {
 		sideOffset: number
 		showOnMobile: boolean
 		targetElement: HTMLElement
-		delayDuration: number | undefined
+		delayDuration: number
 	} | null>('current tooltip', null)
 	private destroyTimeoutId: number | null = null
 
@@ -52,7 +52,7 @@ class TooltipManager {
 		side: 'top' | 'right' | 'bottom' | 'left',
 		sideOffset: number,
 		showOnMobile: boolean,
-		delayDuration: number | undefined
+		delayDuration: number
 	) {
 		// Clear any existing destroy timeout
 		if (this.destroyTimeoutId) {
@@ -139,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',
@@ -153,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()
@@ -173,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
-				}, currentTooltip.delayDuration ?? editor.options.tooltipDelayMs)
+				}, currentTooltip.delayDuration)
 			} else {
 				// Subsequent tooltips show immediately
 				setIsOpen(true)
@@ -188,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
@@ -249,15 +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={
-						delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
-					}
-					disableHoverableContent
-				>
+				<_Tooltip.Root delayDuration={delayDurationToUse} disableHoverableContent>
 					<_Tooltip.Trigger asChild ref={ref}>
 						{children}
 					</_Tooltip.Trigger>
@@ -288,7 +286,7 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 				sideToUse,
 				sideOffset,
 				showOnMobile,
-				delayDuration
+				delayDurationToUse
 			)
 		}
 
@@ -306,7 +304,7 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 				sideToUse,
 				sideOffset,
 				showOnMobile,
-				delayDuration
+				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()
 					})
 				}
 			}

package/src/lib/ui/context/actions.tsx

@@ -36,6 +36,7 @@ import { useTranslation } from '../hooks/useTranslation/useTranslation'
 import { TLUiIconType } from '../icon-types'
 import { TLUiOverrideHelpers, useDefaultHelpers } from '../overrides'
 import { useA11y } from './a11y'
+import { useTldrawUiComponents } from './components'
 import { TLUiEventSource, useUiEvents } from './events'
 
 /** @public */
@@ -98,6 +99,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 	const _editor = useMaybeEditor()
 	const showCollaborationUi = useShowCollaborationUi()
 	const helpers = useDefaultHelpers()
+	const components = useTldrawUiComponents()
 	const trackEvent = useUiEvents()
 	const a11y = useA11y()
 	const msg = useTranslation()
@@ -176,7 +178,9 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				kbd: 'cmd+alt+/,ctrl+alt+/',
 				onSelect(source) {
 					trackEvent('open-kbd-shortcuts', { source })
-					helpers.addDialog({ component: DefaultKeyboardShortcutsDialog })
+					helpers.addDialog({
+						component: components.KeyboardShortcutsDialog ?? DefaultKeyboardShortcutsDialog,
+					})
 				},
 			},
 			{
@@ -1755,7 +1759,17 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 		}
 
 		return actions
-	}, [helpers, _editor, trackEvent, overrides, defaultDocumentName, showCollaborationUi, msg, a11y])
+	}, [
+		helpers,
+		_editor,
+		trackEvent,
+		overrides,
+		defaultDocumentName,
+		showCollaborationUi,
+		msg,
+		a11y,
+		components,
+	])
 
 	return <ActionsContext.Provider value={asActions(actions)}>{children}</ActionsContext.Provider>
 }

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

@@ -12,6 +12,7 @@ import {
 import { CursorChatBubble } from '../components/CursorChatBubble'
 import { DefaultDebugMenu } from '../components/DebugMenu/DefaultDebugMenu'
 import { DefaultDebugPanel } from '../components/DefaultDebugPanel'
+import { DefaultFollowingIndicator } from '../components/DefaultFollowingIndicator'
 import { DefaultMenuPanel } from '../components/DefaultMenuPanel'
 import { DefaultDialogs } from '../components/Dialogs'
 import { TLUiHelpMenuProps } from '../components/HelpMenu/DefaultHelpMenu'
@@ -72,6 +73,7 @@ export interface TLUiComponents {
 	Dialogs?: ComponentType | null
 	Toasts?: ComponentType | null
 	A11y?: ComponentType | null
+	FollowingIndicator?: ComponentType | null
 }
 
 const TldrawUiComponentsContext = createContext<TLUiComponents | null>(null)
@@ -119,6 +121,7 @@ export function TldrawUiComponentsProvider({
 					Dialogs: DefaultDialogs,
 					Toasts: DefaultToasts,
 					A11y: DefaultA11yAnnouncer,
+					FollowingIndicator: DefaultFollowingIndicator,
 					..._overrides,
 				}),
 				[_overrides, showCollaborationUi]

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.b5a35402e79e'
+export const version = '3.16.0-canary.bf9fb05eb8ef'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-08-14T09:46:05.301Z',
-	patch: '2025-08-14T09:46:05.301Z',
+	minor: '2025-08-26T14:23:01.958Z',
+	patch: '2025-08-26T14:23:01.958Z',
 }

package/src/lib/ui.css

@@ -1047,6 +1047,9 @@
 }
 
 @media (hover: hover) {
+	.tlui-style-panel .tlui-button[aria-expanded='true'] {
+		background: none;
+	}
 	.tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
 		opacity: 1;
 		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);

package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`putExcalidrawContent test fixtures bound-arrows.json 1`] = `
+exports[`putExcalidrawContent test fixtures > bound-arrows.json 1`] = `
 {
   "binding:8": {
     "fromId": "shape:7",
@@ -173,7 +173,7 @@ exports[`putExcalidrawContent test fixtures bound-arrows.json 1`] = `
 }
 `;
 
-exports[`putExcalidrawContent test fixtures bound-elbow-arrows.json 1`] = `
+exports[`putExcalidrawContent test fixtures > bound-elbow-arrows.json 1`] = `
 {
   "binding:7": {
     "fromId": "shape:6",
@@ -346,7 +346,7 @@ exports[`putExcalidrawContent test fixtures bound-elbow-arrows.json 1`] = `
 }
 `;
 
-exports[`putExcalidrawContent test fixtures image.json 1`] = `
+exports[`putExcalidrawContent test fixtures > image.json 1`] = `
 {
   "asset:5": {
     "id": "asset:5",
@@ -404,7 +404,7 @@ exports[`putExcalidrawContent test fixtures image.json 1`] = `
 }
 `;
 
-exports[`putExcalidrawContent test fixtures line-drawing.json 1`] = `
+exports[`putExcalidrawContent test fixtures > line-drawing.json 1`] = `
 {
   "document:document": {
     "gridSize": 10,

package/src/lib/utils/tldr/__snapshots__/buildFromV1Document.test.ts.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`buildFromV1Document test fixtures arrow-binding.tldr 1`] = `
+exports[`buildFromV1Document test fixtures > arrow-binding.tldr 1`] = `
 {
   "binding:12": {
     "fromId": "shape:11",
@@ -173,7 +173,7 @@ exports[`buildFromV1Document test fixtures arrow-binding.tldr 1`] = `
 }
 `;
 
-exports[`buildFromV1Document test fixtures exact-arrow-binding.tldr 1`] = `
+exports[`buildFromV1Document test fixtures > exact-arrow-binding.tldr 1`] = `
 {
   "binding:11": {
     "fromId": "shape:10",
@@ -346,7 +346,7 @@ exports[`buildFromV1Document test fixtures exact-arrow-binding.tldr 1`] = `
 }
 `;
 
-exports[`buildFromV1Document test fixtures incorrect-arrow-binding.tldr 1`] = `
+exports[`buildFromV1Document test fixtures > incorrect-arrow-binding.tldr 1`] = `
 {
   "binding:11": {
     "fromId": "shape:10",

package/src/test/A11y.test.tsx

@@ -1,16 +1,17 @@
 import { createShapeId, toRichText } from '@tldraw/editor'
+import { Mock, vi } from 'vitest'
 import { generateShapeAnnouncementMessage } from '../lib/ui/components/A11y'
 import { TestEditor } from './TestEditor'
 
 describe('A11y Shape Announcements', () => {
 	let editor: TestEditor
-	let mockTranslate: jest.Mock
+	let mockTranslate: Mock
 
 	beforeEach(() => {
 		editor = new TestEditor()
 
 		// Create a simple translation mock
-		mockTranslate = jest.fn((key) => {
+		mockTranslate = vi.fn((key) => {
 			if (key === 'a11y.multiple-shapes') return '{num} shapes selected'
 			if (key === 'a11y.shape') return 'Shape'
 			if (key === 'a11y.text') return 'Text'

package/src/test/ClickManager.test.ts

@@ -1,3 +1,4 @@
+import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -10,7 +11,7 @@ beforeEach(() => {
 	editor._transformPointerUpSpy.mockRestore()
 })
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 describe('Handles events', () => {
 	it('Emits single click events', () => {
@@ -23,7 +24,7 @@ describe('Handles events', () => {
 		const eventsBeforeSettle = [{ name: 'pointer_down' }, { name: 'pointer_up' }]
 
 		// allow time for settle
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		// nothing should have settled
 		expect(events).toMatchObject(eventsBeforeSettle)
@@ -64,7 +65,7 @@ describe('Handles events', () => {
 		}
 
 		// allow double click to settle
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		expect(events).toMatchObject([
 			...eventsBeforeSettle,
@@ -110,7 +111,7 @@ describe('Handles events', () => {
 		expect(eventsBeforeSettle).toMatchObject(eventsBeforeSettle)
 
 		// allow double click to settle
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		expect(events).toMatchObject([
 			...eventsBeforeSettle,
@@ -162,7 +163,7 @@ describe('Handles events', () => {
 		expect(events).toMatchObject(eventsBeforeSettle)
 
 		// allow double click to settle
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		expect(events).toMatchObject([
 			...eventsBeforeSettle,
@@ -218,7 +219,7 @@ describe('Handles events', () => {
 		expect(events).toMatchObject(eventsBeforeSettle)
 
 		// allow double click to settle
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		expect(events).toMatchObject(eventsBeforeSettle)
 

package/src/test/Editor.test.tsx

@@ -14,6 +14,7 @@ import {
 	loadSnapshot,
 	react,
 } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
 
@@ -415,24 +416,24 @@ describe('isFocused', () => {
 	})
 
 	it('becomes true when the container div receives a focus event', () => {
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(false)
 
 		editor.elm.focus()
 
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(true)
 	})
 
 	it('becomes false when the container div receives a blur event', () => {
 		editor.elm.focus()
 
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(true)
 
 		editor.elm.blur()
 
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(false)
 	})
 
@@ -444,13 +445,13 @@ describe('isFocused', () => {
 		editor.elm.blur()
 		const child = document.createElement('div')
 		editor.elm.appendChild(child)
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(false)
 		child.dispatchEvent(new FocusEvent('focusin', { bubbles: true }))
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(true)
 		child.dispatchEvent(new FocusEvent('focusout', { bubbles: true }))
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(false)
 	})
 
@@ -466,7 +467,7 @@ describe('isFocused', () => {
 
 		child.dispatchEvent(new FocusEvent('focusout', { bubbles: true }))
 
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getInstanceState().isFocused).toBe(false)
 	})
 })
@@ -520,13 +521,13 @@ describe('getShapeUtil', () => {
 	it('throws if that shape type isnt registered', () => {
 		const myMissingShape = { type: 'missing' } as TLShape
 		expect(() => editor.getShapeUtil(myMissingShape)).toThrowErrorMatchingInlineSnapshot(
-			`"No shape util found for type "missing""`
+			`[Error: No shape util found for type "missing"]`
 		)
 	})
 
 	it('throws if that type isnt registered', () => {
 		expect(() => editor.getShapeUtil('missing')).toThrowErrorMatchingInlineSnapshot(
-			`"No shape util found for type "missing""`
+			`[Error: No shape util found for type "missing"]`
 		)
 	})
 })
@@ -603,14 +604,14 @@ describe('snapshots', () => {
 
 describe('when the user prefers dark UI', () => {
 	beforeEach(() => {
-		window.matchMedia = jest.fn().mockImplementation((query) => {
+		window.matchMedia = vi.fn().mockImplementation((query) => {
 			return {
 				matches: query === '(prefers-color-scheme: dark)',
 				media: query,
 				onchange: null,
-				addEventListener: jest.fn(),
-				removeEventListener: jest.fn(),
-				dispatchEvent: jest.fn(),
+				addEventListener: vi.fn(),
+				removeEventListener: vi.fn(),
+				dispatchEvent: vi.fn(),
 			}
 		})
 	})
@@ -630,14 +631,14 @@ describe('when the user prefers dark UI', () => {
 
 describe('when the user prefers light UI', () => {
 	beforeEach(() => {
-		window.matchMedia = jest.fn().mockImplementation((query) => {
+		window.matchMedia = vi.fn().mockImplementation((query) => {
 			return {
 				matches: false,
 				media: query,
 				onchange: null,
-				addEventListener: jest.fn(),
-				removeEventListener: jest.fn(),
-				dispatchEvent: jest.fn(),
+				addEventListener: vi.fn(),
+				removeEventListener: vi.fn(),
+				dispatchEvent: vi.fn(),
 			}
 		})
 	})
@@ -722,7 +723,7 @@ describe('dragging', () => {
 })
 
 describe('getShapeVisibility', () => {
-	const getShapeVisibility = jest.fn(((shape: TLShape) => {
+	const getShapeVisibility = vi.fn(((shape: TLShape) => {
 		return shape.meta.visibility as any
 	}) satisfies TldrawEditorProps['getShapeVisibility'])