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

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,
 			}
@@ -204,6 +204,7 @@ export function DefaultMinimap() {
 			<canvas
 				role="img"
 				aria-label={msg('navigation-zone.minimap')}
+				data-testid="minimap.canvas"
 				ref={rCanvas}
 				className="tlui-minimap__canvas"
 				onDoubleClick={onDoubleClick}

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/StylePanel/DefaultStylePanel.tsx

@@ -24,7 +24,9 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({
 	children,
 }: TLUiStylePanelProps) {
 	const editor = useEditor()
-	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
+	const enhancedA11yMode = useValue('enhancedA11yMode', () => editor.user.getEnhancedA11yMode(), [
+		editor,
+	])
 
 	const ref = useRef<HTMLDivElement>(null)
 	usePassThroughWheelEvents(ref)
@@ -62,7 +64,7 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({
 				data-testid="style.panel"
 				className={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}
 				data-ismobile={isMobile}
-				data-show-ui-labels={showUiLabels}
+				data-enhanced-a11y-mode={enhancedA11yMode}
 				onPointerLeave={handlePointerOut}
 			>
 				<StylePanelContextProvider styles={styles}>

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

@@ -91,7 +91,7 @@ const tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const
 /** @public @react */
 export function StylePanelOpacityPicker() {
 	const editor = useEditor()
-	const { onHistoryMark, showUiLabels } = useStylePanelContext()
+	const { onHistoryMark, enhancedA11yMode } = useStylePanelContext()
 
 	const opacity = useValue('opacity', () => editor.getSharedOpacity(), [editor])
 	const trackEvent = useUiEvents()
@@ -126,7 +126,9 @@ export function StylePanelOpacityPicker() {
 
 	return (
 		<>
-			{showUiLabels && <StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>}
+			{enhancedA11yMode && (
+				<StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>
+			)}
 			<TldrawUiSlider
 				data-testid="style.opacity"
 				value={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}

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

@@ -127,7 +127,7 @@ export const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T ext
 
 	return (
 		<>
-			{ctx.showUiLabels && <StylePanelSubheading>{title}</StylePanelSubheading>}
+			{ctx.enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}
 			<TldrawUiToolbar label={title}>
 				<TldrawUiToolbarToggleGroup
 					data-testid={`style.${uiType}`}
@@ -137,6 +137,7 @@ export const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T ext
 				>
 					<Layout>
 						{items.map((item) => {
+							const isActive = value.type === 'shared' && value.value === item.value
 							const label =
 								title + ' — ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
 							return (
@@ -145,10 +146,16 @@ export const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T ext
 									key={item.value}
 									data-id={item.value}
 									data-testid={`style.${uiType}.${item.value}`}
-									aria-label={label}
+									aria-label={label + (isActive ? ` (${msg('style-panel.selected')})` : '')}
+									tooltip={
+										<>
+											<div>{label}</div>
+											{isActive ? <div>({msg('style-panel.selected')})</div> : null}
+										</>
+									}
 									value={item.value}
 									data-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}
-									data-isactive={value.type === 'shared' && value.value === item.value}
+									data-isactive={isActive}
 									title={label}
 									style={
 										style === (DefaultColorStyle as StyleProp<unknown>)

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

@@ -5,7 +5,7 @@ import { useUiEvents } from '../../context/events'
 /** @public */
 export interface StylePanelContext {
 	styles: ReadonlySharedStyleMap
-	showUiLabels: boolean
+	enhancedA11yMode: boolean
 	onHistoryMark(id: string): void
 	onValueChange<T>(style: StyleProp<T>, value: T): void
 }
@@ -23,7 +23,9 @@ export function StylePanelContextProvider({ children, styles }: StylePanelContex
 	const trackEvent = useUiEvents()
 
 	const onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])
-	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
+	const enhancedA11yMode = useValue('enhancedA11yMode', () => editor.user.getEnhancedA11yMode(), [
+		editor,
+	])
 	const onValueChange = useCallback(
 		function <T>(style: StyleProp<T>, value: T) {
 			editor.run(() => {
@@ -43,7 +45,7 @@ export function StylePanelContextProvider({ children, styles }: StylePanelContex
 		<StylePanelContext.Provider
 			value={{
 				styles: styles,
-				showUiLabels,
+				enhancedA11yMode,
 				onHistoryMark,
 				onValueChange,
 			}}

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

@@ -2,9 +2,9 @@ import { preventDefault, TLShape, TLShapeId, useEditor } from '@tldraw/editor'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import { TldrawUiInput } from '../primitives/TldrawUiInput'
-import { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
 
 /** @public */
 export interface AltTextEditorProps {
@@ -70,13 +70,14 @@ export function AltTextEditor({ shapeId, onClose, source }: AltTextEditorProps)
 				data-testid="media-toolbar.alt-text-input"
 				value={altText}
 				placeholder={msg('tool.media-alt-text-desc')}
+				aria-label={msg('tool.media-alt-text-desc')}
 				onValueChange={handleValueChange}
 				onComplete={handleComplete}
 				onCancel={handleAltTextCancel}
 				disabled={isReadonly}
 			/>
 			{!isReadonly && (
-				<TldrawUiToolbarButton
+				<TldrawUiButton
 					title={msg('tool.media-alt-text-confirm')}
 					data-testid="tool.media-alt-text-confirm"
 					type="icon"
@@ -84,7 +85,7 @@ export function AltTextEditor({ shapeId, onClose, source }: AltTextEditorProps)
 					onClick={handleConfirm}
 				>
 					<TldrawUiButtonIcon small icon="check" />
-				</TldrawUiToolbarButton>
+				</TldrawUiButton>
 			)}
 		</>
 	)

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

@@ -2,9 +2,9 @@ import { preventDefault, TiptapEditor, useEditor } from '@tldraw/editor'
 import { useEffect, useRef, useState } from 'react'
 import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import { TldrawUiInput } from '../primitives/TldrawUiInput'
-import { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
 
 /** @public */
 export interface LinkEditorProps {
@@ -75,8 +75,9 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				onComplete={handleLinkComplete}
 				onCancel={handleLinkCancel}
 				placeholder="example.com"
+				aria-label="example.com"
 			/>
-			<TldrawUiToolbarButton
+			<TldrawUiButton
 				className="tlui-rich-text__toolbar-link-visit"
 				title={msg('tool.rich-text-link-visit')}
 				type="icon"
@@ -85,8 +86,8 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				disabled={!value}
 			>
 				<TldrawUiButtonIcon small icon="external-link" />
-			</TldrawUiToolbarButton>
-			<TldrawUiToolbarButton
+			</TldrawUiButton>
+			<TldrawUiButton
 				className="tlui-rich-text__toolbar-link-remove"
 				title={msg('tool.rich-text-link-remove')}
 				data-testid="rich-text.link-remove"
@@ -95,7 +96,7 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				onClick={handleRemoveLink}
 			>
 				<TldrawUiButtonIcon small icon="trash" />
-			</TldrawUiToolbarButton>
+			</TldrawUiButton>
 		</>
 	)
 }

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/menu-items.tsx

@@ -652,11 +652,13 @@ export function ToggleKeyboardShortcutsItem() {
 }
 
 /** @public @react */
-export function ToggleUiLabelsItem() {
+export function ToggleEnhancedA11yModeItem() {
 	const editor = useEditor()
-	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
+	const enhancedA11yMode = useValue('enhancedA11yMode', () => editor.user.getEnhancedA11yMode(), [
+		editor,
+	])
 
-	return <TldrawUiMenuActionCheckboxItem actionId="toggle-ui-labels" checked={showUiLabels} />
+	return <TldrawUiMenuActionCheckboxItem actionId="enhanced-a11y-mode" checked={enhancedA11yMode} />
 }
 
 /** @public @react */

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/TldrawUiInput.tsx

@@ -35,6 +35,7 @@ export interface TLUiInputProps {
 	shouldManuallyMaintainScrollPositionWhenFocused?: boolean
 	value?: string
 	'data-testid'?: string
+	'aria-label'?: string
 }
 
 /** @public @react */
@@ -60,6 +61,7 @@ export const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(
 			value,
 			'data-testid': dataTestId,
 			disabled,
+			'aria-label': ariaLabel,
 		},
 		ref
 	) {
@@ -198,6 +200,7 @@ export const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(
 					onCompositionStart={handleCompositionStart}
 					onCompositionEnd={handleCompositionEnd}
 					autoFocus={autoFocus}
+					aria-label={ariaLabel}
 					placeholder={placeholder}
 					value={value}
 					data-testid={dataTestId}

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

@@ -71,6 +71,7 @@ export const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToo
 				draggable={false}
 				data-isactive={isActive}
 				{...props}
+				aria-label={props.title}
 				// The tooltip takes care of this.
 				title={undefined}
 				className={classnames('tlui-button', `tlui-button__${type}`, props.className)}
@@ -127,7 +128,7 @@ export interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLBut
 	className?: string
 	type: 'icon' | 'tool'
 	value: string
-	tooltip?: string
+	tooltip?: React.ReactNode
 }
 
 /** @public @react */

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

@@ -171,6 +171,20 @@ function TooltipSingleton() {
 		}
 	}, [cameraState, isOpen, currentTooltip, editor])
 
+	useEffect(() => {
+		function handleKeyDown(event: KeyboardEvent) {
+			if (event.key === 'Escape' && currentTooltip && isOpen) {
+				tooltipManager.hideTooltip(editor, currentTooltip.id)
+				event.stopPropagation()
+			}
+		}
+
+		document.addEventListener('keydown', handleKeyDown, { capture: true })
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown, { capture: true })
+		}
+	}, [editor, currentTooltip, isOpen])
+
 	// Update open state and trigger position
 	useEffect(() => {
 		let timer: ReturnType<typeof setTimeout> | null = null
@@ -253,7 +267,11 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		const editor = useMaybeEditor()
 		const tooltipId = useRef<string>(uniqueId())
 		const hasProvider = useContext(TooltipSingletonContext)
-		const showUiLabels = useValue('showUiLabels', () => editor?.user.getShowUiLabels(), [editor])
+		const enhancedA11yMode = useValue(
+			'enhancedA11yMode',
+			() => editor?.user.getEnhancedA11yMode(),
+			[editor]
+		)
 
 		const orientationCtx = useTldrawUiOrientation()
 		const sideToUse = side ?? orientationCtx.tooltipSide
@@ -279,13 +297,13 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 			}
 		}, [content, sideToUse, sideOffset, showOnMobile, hasProvider])
 
-		// Don't show tooltip if disabled, no content, or UI labels are disabled
+		// Don't show tooltip if disabled, no content, or enhanced accessibility mode is disabled
 		if (disabled || !content) {
 			return <>{children}</>
 		}
 
 		let delayDurationToUse
-		if (showUiLabels) {
+		if (enhancedA11yMode) {
 			delayDurationToUse = 0
 		} else {
 			delayDurationToUse =
@@ -293,9 +311,12 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		}
 
 		// Fallback to old behavior if no provider
-		if (!hasProvider) {
+		if (!hasProvider || enhancedA11yMode) {
 			return (
-				<_Tooltip.Root delayDuration={delayDurationToUse} disableHoverableContent>
+				<_Tooltip.Root
+					delayDuration={delayDurationToUse}
+					disableHoverableContent={!enhancedA11yMode}
+				>
 					<_Tooltip.Trigger asChild ref={ref}>
 						{children}
 					</_Tooltip.Trigger>

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

@@ -19,6 +19,7 @@ export interface TLUiMenuCheckboxItemProps<
 	kbd?: string
 	title?: string
 	label?: TranslationKey | { [key: string]: TranslationKey }
+	lang?: string
 	readonlyOk?: boolean
 	onSelect(source: TLUiEventSource): Promise<void> | void
 	toggle?: boolean
@@ -34,6 +35,7 @@ export function TldrawUiMenuCheckboxItem<
 	id,
 	kbd,
 	label,
+	lang,
 	readonlyOk,
 	onSelect,
 	toggle = false,
@@ -55,6 +57,7 @@ export function TldrawUiMenuCheckboxItem<
 			return (
 				<_DropdownMenu.CheckboxItem
 					dir="ltr"
+					lang={lang}
 					className="tlui-button tlui-button__menu tlui-button__checkbox"
 					title={labelStr}
 					onSelect={(e) => {
@@ -84,6 +87,7 @@ export function TldrawUiMenuCheckboxItem<
 					key={id}
 					className="tlui-button tlui-button__menu tlui-button__checkbox"
 					dir="ltr"
+					lang={lang}
 					title={labelStr}
 					onSelect={(e) => {
 						onSelect(sourceId)

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/context/actions.tsx

@@ -1270,16 +1270,16 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				checkbox: true,
 			},
 			{
-				id: 'toggle-ui-labels',
+				id: 'enhanced-a11y-mode',
 				label: {
-					default: 'action.toggle-ui-labels',
-					menu: 'action.toggle-ui-labels.menu',
+					default: 'action.enhanced-a11y-mode',
+					menu: 'action.enhanced-a11y-mode.menu',
 				},
 				readonlyOk: true,
 				onSelect(source) {
-					trackEvent('toggle-ui-labels', { source })
+					trackEvent('enhanced-a11y-mode', { source })
 					editor.user.updateUserPreferences({
-						showUiLabels: !editor.user.getShowUiLabels(),
+						enhancedA11yMode: !editor.user.getEnhancedA11yMode(),
 					})
 				},
 				checkbox: true,
@@ -1344,28 +1344,6 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					}
 				},
 			},
-			{
-				id: 'toggle-focus-mode',
-				label: {
-					default: 'action.toggle-focus-mode',
-					menu: 'action.toggle-focus-mode.menu',
-				},
-				readonlyOk: true,
-				kbd: 'cmd+.,ctrl+.',
-				checkbox: true,
-				onSelect(source) {
-					// this needs to be deferred because it causes the menu
-					// UI to unmount which puts us in a dodgy state
-					editor.timers.requestAnimationFrame(() => {
-						editor.run(() => {
-							trackEvent('toggle-focus-mode', { source })
-							helpers.clearDialogs()
-							helpers.clearToasts()
-							editor.updateInstanceState({ isFocusMode: !editor.getInstanceState().isFocusMode })
-						})
-					})
-				},
-			},
 			{
 				id: 'toggle-grid',
 				label: {
@@ -1584,6 +1562,19 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				onSelect: async (source) => {
 					if (!canApplySelectionAction()) return
 
+					const onlySelectedShape = editor.getOnlySelectedShape()
+					if (
+						onlySelectedShape &&
+						(editor.isShapeOfType<TLImageShape>(onlySelectedShape, 'image') ||
+							editor.isShapeOfType<TLVideoShape>(onlySelectedShape, 'video'))
+					) {
+						const firstToolbarButton = editor
+							.getContainer()
+							.querySelector('.tlui-contextual-toolbar button:first-child') as HTMLElement | null
+						firstToolbarButton?.focus()
+						return
+					}
+
 					const firstButton = editor
 						.getContainer()
 						.querySelector('.tlui-style-panel button') as HTMLElement | null

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

@@ -102,13 +102,14 @@ export interface TLUiEventMap {
 	'toggle-grid-mode': null
 	'toggle-wrap-mode': null
 	'toggle-focus-mode': null
+	'input-mode': { value: string }
 	'toggle-debug-mode': null
 	'toggle-dynamic-size-mode': null
 	'toggle-paste-at-cursor': null
 	'toggle-lock': null
 	'toggle-reduce-motion': null
 	'toggle-keyboard-shortcuts': null
-	'toggle-ui-labels': null
+	'enhanced-a11y-mode': null
 	'toggle-edge-scrolling': null
 	'color-scheme': { value: string }
 	'exit-pen-mode': null

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/hooks/useTranslation/TLUiTranslationKey.ts

@@ -3,6 +3,11 @@
 
 /** @public */
 export type TLUiTranslationKey =
+	| 'action.toggle-auto-pan'
+	| 'action.toggle-auto-zoom'
+	| 'action.toggle-auto-none'
+	| 'action.toggle-mouse'
+	| 'action.toggle-trackpad'
 	| 'action.convert-to-bookmark'
 	| 'action.convert-to-embed'
 	| 'action.open-embed-link'
@@ -93,8 +98,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.enhanced-a11y-mode.menu'
+	| 'action.enhanced-a11y-mode'
 	| 'action.toggle-edge-scrolling.menu'
 	| 'action.toggle-edge-scrolling'
 	| 'action.toggle-debug-mode.menu'
@@ -122,6 +127,7 @@ export type TLUiTranslationKey =
 	| 'action.zoom-to-fit'
 	| 'action.zoom-to-selection'
 	| 'assets.files.size-too-big'
+	| 'assets.files.maximum-size'
 	| 'assets.files.type-not-allowed'
 	| 'assets.files.upload-failed'
 	| 'assets.files.amount-too-many'
@@ -310,6 +316,7 @@ export type TLUiTranslationKey =
 	| 'menu.language'
 	| 'menu.preferences'
 	| 'menu.view'
+	| 'menu.input-mode'
 	| 'context-menu.title'
 	| 'context-menu.edit'
 	| 'context-menu.arrange'
@@ -411,6 +418,7 @@ export type TLUiTranslationKey =
 	| 'style-panel.opacity'
 	| 'style-panel.size'
 	| 'style-panel.spline'
+	| 'style-panel.selected'
 	| 'tool-panel.title'
 	| 'tool-panel.more'
 	| 'navigation-zone.title'

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

@@ -3,6 +3,11 @@
 
 /** @internal */
 export const DEFAULT_TRANSLATION = {
+	'action.toggle-auto-pan': 'Auto (trackpad)',
+	'action.toggle-auto-zoom': 'Auto (mouse)',
+	'action.toggle-auto-none': 'Auto',
+	'action.toggle-mouse': 'Mouse',
+	'action.toggle-trackpad': 'Trackpad',
 	'action.convert-to-bookmark': 'Convert to Bookmark',
 	'action.convert-to-embed': 'Convert to Embed',
 	'action.open-embed-link': 'Open link',
@@ -94,8 +99,8 @@ export const DEFAULT_TRANSLATION = {
 	'action.toggle-reduce-motion': 'Toggle reduce motion',
 	'action.toggle-keyboard-shortcuts.menu': 'Enable keyboard shortcuts',
 	'action.toggle-keyboard-shortcuts': 'Toggle keyboard shortcuts',
-	'action.toggle-ui-labels.menu': 'Enable UI labels',
-	'action.toggle-ui-labels': 'Toggle UI labels',
+	'action.enhanced-a11y-mode.menu': 'Enhanced accessibility mode',
+	'action.enhanced-a11y-mode': 'Toggle enhanced accessibility mode',
 	'action.toggle-edge-scrolling.menu': 'Edge scrolling',
 	'action.toggle-edge-scrolling': 'Toggle edge scrolling',
 	'action.toggle-debug-mode.menu': 'Debug mode',
@@ -123,6 +128,7 @@ export const DEFAULT_TRANSLATION = {
 	'action.zoom-to-fit': 'Zoom to fit',
 	'action.zoom-to-selection': 'Zoom to selection',
 	'assets.files.size-too-big': 'File size is too big',
+	'assets.files.maximum-size': 'Maximum file size is {size}',
 	'assets.files.type-not-allowed': 'File type is not allowed',
 	'assets.files.upload-failed': 'Upload failed',
 	'assets.files.amount-too-many': 'Too many files',
@@ -311,6 +317,7 @@ export const DEFAULT_TRANSLATION = {
 	'menu.language': 'Language',
 	'menu.preferences': 'Preferences',
 	'menu.view': 'View',
+	'menu.input-mode': 'Input mode',
 	'context-menu.title': 'Context menu',
 	'context-menu.edit': 'Edit',
 	'context-menu.arrange': 'Arrange',
@@ -414,6 +421,7 @@ export const DEFAULT_TRANSLATION = {
 	'style-panel.opacity': 'Opacity',
 	'style-panel.size': 'Size',
 	'style-panel.spline': 'Spline',
+	'style-panel.selected': 'selected',
 	'tool-panel.title': 'Tools',
 	'tool-panel.more': 'More',
 	'navigation-zone.title': 'Navigation',