tldraw 3.16.0-canary.67f438ba104b → 3.16.0-canary.856874107ebd

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

@@ -0,0 +1,332 @@
+import { assert, Editor, uniqueId, useMaybeEditor, Vec } from '@tldraw/editor'
+import { Tooltip as _Tooltip } from 'radix-ui'
+import React, { createContext, useContext, useEffect, useRef, useState } from 'react'
+import { usePrefersReducedMotion } from '../../../shapes/shared/usePrefersReducedMotion'
+
+const DEFAULT_TOOLTIP_DELAY_MS = 700
+
+/** @public */
+export interface TldrawUiTooltipProps {
+	children: React.ReactNode
+	content?: string | React.ReactNode
+	side?: 'top' | 'right' | 'bottom' | 'left'
+	sideOffset?: number
+	disabled?: boolean
+}
+
+// Singleton tooltip manager
+class TooltipManager {
+	private static instance: TooltipManager | null = null
+	private currentTooltipId: string | null = null
+	private currentContent: string | React.ReactNode = ''
+	private currentSide: 'top' | 'right' | 'bottom' | 'left' = 'bottom'
+	private currentSideOffset: number = 5
+	private destroyTimeoutId: number | null = null
+	private subscribers: Set<() => void> = new Set()
+	private activeElement: HTMLElement | null = null
+	private editor: Editor | null = null
+
+	static getInstance(): TooltipManager {
+		if (!TooltipManager.instance) {
+			TooltipManager.instance = new TooltipManager()
+		}
+		return TooltipManager.instance
+	}
+
+	setEditor(editor: Editor | null) {
+		this.editor = editor
+	}
+
+	subscribe(callback: () => void): () => void {
+		this.subscribers.add(callback)
+		return () => this.subscribers.delete(callback)
+	}
+
+	private notify() {
+		this.subscribers.forEach((callback) => callback())
+	}
+
+	showTooltip(
+		tooltipId: string,
+		content: string | React.ReactNode,
+		element: HTMLElement,
+		side: 'top' | 'right' | 'bottom' | 'left' = 'bottom',
+		sideOffset: number = 5
+	) {
+		// Clear any existing destroy timeout
+		if (this.destroyTimeoutId) {
+			clearTimeout(this.destroyTimeoutId)
+			this.destroyTimeoutId = null
+		}
+
+		// Update current tooltip
+		this.currentTooltipId = tooltipId
+		this.currentContent = content
+		this.currentSide = side
+		this.currentSideOffset = sideOffset
+		this.activeElement = element
+
+		this.notify()
+	}
+
+	hideTooltip(tooltipId: string, instant: boolean = false) {
+		const hide = () => {
+			// Only hide if this is the current tooltip
+			if (this.currentTooltipId === tooltipId) {
+				this.currentTooltipId = null
+				this.currentContent = ''
+				this.activeElement = null
+				this.destroyTimeoutId = null
+				this.notify()
+			}
+		}
+
+		if (instant) {
+			hide()
+		} else if (this.editor) {
+			// Start destroy timeout (1 second)
+			this.destroyTimeoutId = this.editor.timers.setTimeout(hide, 300)
+		}
+	}
+
+	hideAllTooltips() {
+		this.currentTooltipId = null
+		this.currentContent = ''
+		this.activeElement = null
+		this.destroyTimeoutId = null
+		this.notify()
+	}
+
+	getCurrentTooltipData() {
+		return {
+			id: this.currentTooltipId,
+			content: this.currentContent,
+			side: this.currentSide,
+			sideOffset: this.currentSideOffset,
+			element: this.activeElement,
+		}
+	}
+}
+
+export const tooltipManager = TooltipManager.getInstance()
+
+// Context for the tooltip singleton
+const TooltipSingletonContext = createContext<boolean>(false)
+
+/** @public */
+export interface TldrawUiTooltipProviderProps {
+	children: React.ReactNode
+}
+
+/** @public @react */
+export function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderProps) {
+	return (
+		<_Tooltip.Provider skipDelayDuration={700}>
+			<TooltipSingletonContext.Provider value={true}>
+				{children}
+				<TooltipSingleton />
+			</TooltipSingletonContext.Provider>
+		</_Tooltip.Provider>
+	)
+}
+
+// The singleton tooltip component that renders once
+function TooltipSingleton() {
+	const editor = useMaybeEditor()
+	const [, forceUpdate] = useState({})
+	const [isOpen, setIsOpen] = useState(false)
+	const triggerRef = useRef<HTMLDivElement>(null)
+	const previousPositionRef = useRef<{ x: number; y: number } | null>(null)
+	const prefersReducedMotion = usePrefersReducedMotion()
+	const [shouldAnimate, setShouldAnimate] = useState(false)
+	const isFirstShowRef = useRef(true)
+	const showTimeoutRef = useRef<number | null>(null)
+
+	// Set editor in tooltip manager
+	useEffect(() => {
+		tooltipManager.setEditor(editor)
+	}, [editor])
+
+	// Subscribe to tooltip manager updates
+	useEffect(() => {
+		const unsubscribe = tooltipManager.subscribe(() => {
+			forceUpdate({})
+		})
+		return unsubscribe
+	}, [])
+
+	const tooltipData = tooltipManager.getCurrentTooltipData()
+
+	// Update open state and trigger position
+	useEffect(() => {
+		const shouldBeOpen = Boolean(tooltipData.id && tooltipData.element)
+
+		// Clear any existing show timeout
+		if (showTimeoutRef.current) {
+			clearTimeout(showTimeoutRef.current)
+			showTimeoutRef.current = null
+		}
+
+		if (shouldBeOpen && tooltipData.element && triggerRef.current) {
+			// Position the invisible trigger element over the active element
+			const activeRect = tooltipData.element.getBoundingClientRect()
+			const trigger = triggerRef.current
+
+			const newPosition = {
+				x: activeRect.left + activeRect.width / 2,
+				y: activeRect.top + activeRect.height / 2,
+			}
+
+			// Determine if we should animate
+			let shouldAnimateCheck = false
+			if (previousPositionRef.current) {
+				const isNearPrevious = Vec.DistMin(previousPositionRef.current, newPosition, 200)
+				// Only animate if the distance is less than 200px (nearby tooltips)
+				shouldAnimateCheck =
+					!prefersReducedMotion &&
+					isNearPrevious &&
+					Math.abs(newPosition.y - previousPositionRef.current.y) < 50
+			}
+			// Don't animate on initial show (previousPositionRef.current is null)
+
+			setShouldAnimate(isFirstShowRef.current ? false : shouldAnimateCheck)
+			previousPositionRef.current = newPosition
+
+			trigger.style.position = 'fixed'
+			trigger.style.left = `${activeRect.left}px`
+			trigger.style.top = `${activeRect.top}px`
+			trigger.style.width = `${activeRect.width}px`
+			trigger.style.height = `${activeRect.height}px`
+			trigger.style.pointerEvents = 'none'
+			trigger.style.zIndex = '9999'
+
+			// Handle delay for first show
+			if (isFirstShowRef.current && editor) {
+				showTimeoutRef.current = editor.timers.setTimeout(() => {
+					setIsOpen(true)
+					isFirstShowRef.current = false
+				}, editor.options.tooltipDelayMs)
+			} else {
+				// Subsequent tooltips show immediately
+				setIsOpen(true)
+			}
+		} else if (!shouldBeOpen) {
+			// Hide tooltip immediately
+			setIsOpen(false)
+			// Reset position tracking when tooltip closes
+			previousPositionRef.current = null
+			setShouldAnimate(false)
+			// Reset first show state after tooltip is hidden
+			isFirstShowRef.current = true
+		}
+	}, [tooltipData.id, tooltipData.element, editor, prefersReducedMotion])
+
+	if (!tooltipData.id) {
+		return null
+	}
+
+	return (
+		<_Tooltip.Root open={isOpen} delayDuration={0}>
+			<_Tooltip.Trigger asChild>
+				<div ref={triggerRef} />
+			</_Tooltip.Trigger>
+			<_Tooltip.Content
+				className="tlui-tooltip"
+				data-should-animate={shouldAnimate}
+				side={tooltipData.side}
+				sideOffset={tooltipData.sideOffset}
+				avoidCollisions
+				collisionPadding={8}
+				dir="ltr"
+			>
+				{tooltipData.content}
+				<_Tooltip.Arrow className="tlui-tooltip__arrow" />
+			</_Tooltip.Content>
+		</_Tooltip.Root>
+	)
+}
+
+/** @public @react */
+export function TldrawUiTooltip({
+	children,
+	content,
+	side = 'bottom',
+	sideOffset = 5,
+	disabled = false,
+}: TldrawUiTooltipProps) {
+	const editor = useMaybeEditor()
+	const tooltipId = useRef<string>(uniqueId())
+	const hasProvider = useContext(TooltipSingletonContext)
+
+	// Don't show tooltip if disabled, no content, or UI labels are disabled
+	if (disabled || !content) {
+		return <>{children}</>
+	}
+
+	// Fallback to old behavior if no provider
+	if (!hasProvider) {
+		return (
+			<_Tooltip.Root
+				delayDuration={editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS}
+				disableHoverableContent
+			>
+				<_Tooltip.Trigger asChild>{children}</_Tooltip.Trigger>
+				<_Tooltip.Content
+					className="tlui-tooltip"
+					side={side}
+					sideOffset={sideOffset}
+					avoidCollisions
+					collisionPadding={8}
+					dir="ltr"
+				>
+					{content}
+					<_Tooltip.Arrow className="tlui-tooltip__arrow" />
+				</_Tooltip.Content>
+			</_Tooltip.Root>
+		)
+	}
+
+	const child = React.Children.only(children)
+	assert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')
+
+	const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
+		child.props.onMouseEnter?.(event)
+		tooltipManager.showTooltip(
+			tooltipId.current,
+			content,
+			event.currentTarget as HTMLElement,
+			side,
+			sideOffset
+		)
+	}
+
+	const handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {
+		child.props.onMouseLeave?.(event)
+		tooltipManager.hideTooltip(tooltipId.current)
+	}
+
+	const handleFocus = (event: React.FocusEvent<HTMLElement>) => {
+		child.props.onFocus?.(event)
+		tooltipManager.showTooltip(
+			tooltipId.current,
+			content,
+			event.currentTarget as HTMLElement,
+			side,
+			sideOffset
+		)
+	}
+
+	const handleBlur = (event: React.FocusEvent<HTMLElement>) => {
+		child.props.onBlur?.(event)
+		tooltipManager.hideTooltip(tooltipId.current)
+	}
+
+	const childrenWithHandlers = React.cloneElement(children as React.ReactElement, {
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+	})
+
+	return childrenWithHandlers
+}

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

@@ -0,0 +1,33 @@
+import classNames from 'classnames'
+import { Slot } from 'radix-ui'
+import { HTMLAttributes, ReactNode, forwardRef } from 'react'
+
+/** @public */
+export interface TLUiLayoutProps extends HTMLAttributes<HTMLDivElement> {
+	children: ReactNode
+	asChild?: boolean
+}
+
+/**
+ * A row, usually of UI controls like buttons, select dropdown, checkboxes, etc.
+ *
+ * @public @react
+ */
+export const TldrawUiRow = forwardRef<HTMLDivElement, TLUiLayoutProps>(
+	({ asChild, className, ...props }, ref) => {
+		const Component = asChild ? Slot.Root : 'div'
+		return <Component ref={ref} className={classNames('tlui-row', className)} {...props} />
+	}
+)
+
+/**
+ * A tight grid 4 elements wide, usually of UI controls like buttons, select dropdown, checkboxes,
+ * etc.
+ *
+ * @public @react */
+export const TldrawUiGrid = forwardRef<HTMLDivElement, TLUiLayoutProps>(
+	({ asChild, className, ...props }, ref) => {
+		const Component = asChild ? Slot.Root : 'div'
+		return <Component ref={ref} className={classNames('tlui-grid', className)} {...props} />
+	}
+)

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

@@ -5,6 +5,7 @@ import {
 	TLPointerEventInfo,
 	useEditor,
 	Vec,
+	VecModel,
 } from '@tldraw/editor'
 import { ContextMenu as _ContextMenu } from 'radix-ui'
 import { useMemo, useState } from 'react'
@@ -23,6 +24,7 @@ import { TldrawUiDropdownMenuItem } from '../TldrawUiDropdownMenu'
 import { TLUiIconJsx } from '../TldrawUiIcon'
 import { TldrawUiKbd } from '../TldrawUiKbd'
 import { TldrawUiToolbarButton } from '../TldrawUiToolbar'
+import { tooltipManager } from '../TldrawUiTooltip'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
 /** @public */
@@ -274,7 +276,6 @@ export function TldrawUiMenuItem<
 					aria-label={labelStr}
 					aria-pressed={isSelected ? 'true' : 'false'}
 					isActive={isSelected}
-					className="tlui-button-grid__button"
 					data-testid={`tools.more.${id}`}
 					data-value={id}
 					disabled={disabled}
@@ -304,11 +305,11 @@ function useDraggableEvents(
 			  }
 			| {
 					name: 'pointing'
-					start: Vec
+					screenSpaceStart: VecModel
 			  }
 			| {
 					name: 'dragging'
-					start: Vec
+					screenSpaceStart: VecModel
 			  }
 			| {
 					name: 'dragged'
@@ -317,7 +318,7 @@ function useDraggableEvents(
 		function handlePointerDown(e: React.PointerEvent<HTMLButtonElement>) {
 			state = {
 				name: 'pointing',
-				start: editor.inputs.currentPagePoint.clone(),
+				screenSpaceStart: { x: e.clientX, y: e.clientY },
 			}
 
 			e.currentTarget.setPointerCapture(e.pointerId)
@@ -327,17 +328,17 @@ function useDraggableEvents(
 			if ((e as any).isSpecialRedispatchedEvent) return
 
 			if (state.name === 'pointing') {
-				const distance = Vec.Dist2(state.start, editor.inputs.currentPagePoint)
+				const distanceSq = Vec.Dist2(state.screenSpaceStart, { x: e.clientX, y: e.clientY })
 				if (
-					distance >
+					distanceSq >
 					(editor.getInstanceState().isCoarsePointer
 						? editor.options.coarseDragDistanceSquared
 						: editor.options.dragDistanceSquared)
 				) {
-					const start = state.start
+					const screenSpaceStart = state.screenSpaceStart
 					state = {
 						name: 'dragging',
-						start,
+						screenSpaceStart,
 					}
 
 					editor.run(() => {
@@ -347,7 +348,7 @@ function useDraggableEvents(
 							target: 'canvas',
 							name: 'pointer_down',
 							...getPointerInfo(e),
-							point: start,
+							point: screenSpaceStart,
 						})
 
 						// Pointer down potentially selects shapes, so we need to deselect them.
@@ -359,7 +360,10 @@ function useDraggableEvents(
 							target: 'canvas',
 							name: 'pointer_move',
 							...getPointerInfo(e),
+							point: screenSpaceStart,
 						})
+
+						tooltipManager.hideAllTooltips()
 					})
 				}
 			}

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

@@ -1,6 +1,7 @@
 import { RecursivePartial, defaultUserPreferences, track, useMaybeEditor } from '@tldraw/editor'
 import { ReactNode } from 'react'
 import { TLUiAssetUrls, useDefaultUiAssetUrlsWithOverrides } from '../assetUrls'
+import { TldrawUiTooltipProvider } from '../components/primitives/TldrawUiTooltip'
 import { ToolsProvider } from '../hooks/useTools'
 import { TldrawUiTranslationProvider } from '../hooks/useTranslation/useTranslation'
 import {
@@ -72,26 +73,28 @@ export const TldrawUiContextProvider = track(function TldrawUiContextProvider({
 	const editor = useMaybeEditor()
 	return (
 		<MimeTypeContext.Provider value={mediaMimeTypes}>
-			<AssetUrlsProvider assetUrls={useDefaultUiAssetUrlsWithOverrides(assetUrls)}>
-				<TldrawUiTranslationProvider
-					overrides={useMergedTranslationOverrides(overrides)}
-					locale={editor?.user.getLocale() ?? defaultUserPreferences.locale}
-				>
-					<TldrawUiEventsProvider onEvent={onUiEvent}>
-						<TldrawUiToastsProvider>
-							<TldrawUiDialogsProvider context={'tla'}>
-								<TldrawUiA11yProvider>
-									<BreakPointProvider forceMobile={forceMobile}>
-										<TldrawUiComponentsProvider overrides={components}>
-											<InternalProviders overrides={overrides}>{children}</InternalProviders>
-										</TldrawUiComponentsProvider>
-									</BreakPointProvider>
-								</TldrawUiA11yProvider>
-							</TldrawUiDialogsProvider>
-						</TldrawUiToastsProvider>
-					</TldrawUiEventsProvider>
-				</TldrawUiTranslationProvider>
-			</AssetUrlsProvider>
+			<TldrawUiTooltipProvider>
+				<AssetUrlsProvider assetUrls={useDefaultUiAssetUrlsWithOverrides(assetUrls)}>
+					<TldrawUiTranslationProvider
+						overrides={useMergedTranslationOverrides(overrides)}
+						locale={editor?.user.getLocale() ?? defaultUserPreferences.locale}
+					>
+						<TldrawUiEventsProvider onEvent={onUiEvent}>
+							<TldrawUiToastsProvider>
+								<TldrawUiDialogsProvider context={'tla'}>
+									<TldrawUiA11yProvider>
+										<BreakPointProvider forceMobile={forceMobile}>
+											<TldrawUiComponentsProvider overrides={components}>
+												<InternalProviders overrides={overrides}>{children}</InternalProviders>
+											</TldrawUiComponentsProvider>
+										</BreakPointProvider>
+									</TldrawUiA11yProvider>
+								</TldrawUiDialogsProvider>
+							</TldrawUiToastsProvider>
+						</TldrawUiEventsProvider>
+					</TldrawUiTranslationProvider>
+				</AssetUrlsProvider>
+			</TldrawUiTooltipProvider>
 		</MimeTypeContext.Provider>
 	)
 })

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

@@ -1266,6 +1266,21 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				},
 				checkbox: true,
 			},
+			{
+				id: 'toggle-ui-labels',
+				label: {
+					default: 'action.toggle-ui-labels',
+					menu: 'action.toggle-ui-labels.menu',
+				},
+				readonlyOk: true,
+				onSelect(source) {
+					trackEvent('toggle-ui-labels', { source })
+					editor.user.updateUserPreferences({
+						showUiLabels: !editor.user.getShowUiLabels(),
+					})
+				},
+				checkbox: true,
+			},
 			{
 				id: 'toggle-edge-scrolling',
 				label: {

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

@@ -108,6 +108,7 @@ export interface TLUiEventMap {
 	'toggle-lock': null
 	'toggle-reduce-motion': null
 	'toggle-keyboard-shortcuts': null
+	'toggle-ui-labels': null
 	'toggle-edge-scrolling': null
 	'color-scheme': { value: string }
 	'exit-pen-mode': null

package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts

@@ -93,6 +93,8 @@ export type TLUiTranslationKey =
 	| 'action.toggle-reduce-motion'
 	| 'action.toggle-keyboard-shortcuts.menu'
 	| 'action.toggle-keyboard-shortcuts'
+	| 'action.toggle-ui-labels.menu'
+	| 'action.toggle-ui-labels'
 	| 'action.toggle-edge-scrolling.menu'
 	| 'action.toggle-edge-scrolling'
 	| 'action.toggle-debug-mode.menu'
@@ -298,6 +300,7 @@ export type TLUiTranslationKey =
 	| 'a11y.open-keyboard-shortcuts'
 	| 'menu.title'
 	| 'menu.theme'
+	| 'menu.accessibility'
 	| 'menu.copy-as'
 	| 'menu.edit'
 	| 'menu.export-as'

package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts

@@ -94,6 +94,8 @@ export const DEFAULT_TRANSLATION = {
 	'action.toggle-reduce-motion': 'Toggle reduce motion',
 	'action.toggle-keyboard-shortcuts.menu': 'Keyboard shortcuts',
 	'action.toggle-keyboard-shortcuts': 'Toggle keyboard shortcuts',
+	'action.toggle-ui-labels.menu': 'UI labels',
+	'action.toggle-ui-labels': 'Toggle UI labels',
 	'action.toggle-edge-scrolling.menu': 'Edge scrolling',
 	'action.toggle-edge-scrolling': 'Toggle edge scrolling',
 	'action.toggle-debug-mode.menu': 'Debug mode',
@@ -299,6 +301,7 @@ export const DEFAULT_TRANSLATION = {
 	'a11y.open-keyboard-shortcuts': 'Open keyboard shortcuts',
 	'menu.title': 'Menu',
 	'menu.theme': 'Theme',
+	'menu.accessibility': 'Accessibility',
 	'menu.copy-as': 'Copy as',
 	'menu.edit': 'Edit',
 	'menu.export-as': 'Export as',

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.67f438ba104b'
+export const version = '3.16.0-canary.856874107ebd'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-08-06T08:50:41.768Z',
-	patch: '2025-08-06T08:50:41.768Z',
+	minor: '2025-08-11T11:27:08.471Z',
+	patch: '2025-08-11T11:27:08.471Z',
 }