tldraw 3.16.0-next.6611943ca24a → 3.16.0-next.8eb6d5c2d8f4

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/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
@@ -123,7 +124,7 @@ export interface TLUiEventMap {
 	'shrink-shapes': null
 	'flatten-to-image': null
 	'a11y-repeat-shape-announce': null
-	'open-url': { url: string }
+	'open-url': { destinationUrl: string }
 	'open-context-menu': null
 	'adjust-shape-styles': null
 	'copy-link': null

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

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

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

@@ -11,12 +11,13 @@ export function useExportAs() {
 	const msg = useTranslation()
 
 	return useCallback(
-		(ids: TLShapeId[], format: TLExportType = 'png', name: string | undefined) => {
+		(ids: TLShapeId[], opts: { format?: TLExportType; name?: string; scale?: number } = {}) => {
 			assert(editor, 'useExportAs: editor is required')
+			const { format = 'png', name, scale = 1 } = opts
 			exportAs(editor, ids, {
 				format,
 				name,
-				scale: 1,
+				scale,
 			}).catch((e) => {
 				console.error(e.message)
 				addToast({

package/src/lib/ui/hooks/useTools.tsx

@@ -176,7 +176,7 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 							editor.createShape({
 								id,
 								type: 'arrow',
-								props: { start: { x: 0, y: 0 }, end: { x: 200, y: 0 } },
+								props: { start: { x: 0, y: 200 }, end: { x: 200, y: 0 } },
 							}),
 					})
 					trackEvent('drag-tool', { source, id: 'arrow' })

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'
@@ -186,6 +192,7 @@ export type TLUiTranslationKey =
 	| 'geo-style.pentagon'
 	| 'geo-style.rectangle'
 	| 'geo-style.rhombus'
+	| 'geo-style.rhombus-2'
 	| 'geo-style.star'
 	| 'geo-style.trapezoid'
 	| 'geo-style.triangle'
@@ -260,6 +267,7 @@ export type TLUiTranslationKey =
 	| 'tool.aspect-ratio.wide'
 	| 'tool.image-toolbar-title'
 	| 'tool.image-crop'
+	| 'tool.image-crop-confirm'
 	| 'tool.media-alt-text'
 	| 'tool.media-alt-text-desc'
 	| 'tool.media-alt-text-confirm'
@@ -308,6 +316,7 @@ export type TLUiTranslationKey =
 	| 'menu.language'
 	| 'menu.preferences'
 	| 'menu.view'
+	| 'menu.input-mode'
 	| 'context-menu.title'
 	| 'context-menu.edit'
 	| 'context-menu.arrange'
@@ -409,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',
@@ -92,10 +97,10 @@ export const DEFAULT_TRANSLATION = {
 	'action.toggle-wrap-mode': 'Toggle Select on wrap',
 	'action.toggle-reduce-motion.menu': 'Reduce motion',
 	'action.toggle-reduce-motion': 'Toggle reduce motion',
-	'action.toggle-keyboard-shortcuts.menu': 'Keyboard shortcuts',
+	'action.toggle-keyboard-shortcuts.menu': 'Enable keyboard shortcuts',
 	'action.toggle-keyboard-shortcuts': 'Toggle keyboard shortcuts',
-	'action.toggle-ui-labels.menu': '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',
@@ -187,6 +193,7 @@ export const DEFAULT_TRANSLATION = {
 	'geo-style.pentagon': 'Pentagon',
 	'geo-style.rectangle': 'Rectangle',
 	'geo-style.rhombus': 'Rhombus',
+	'geo-style.rhombus-2': 'Rhombus left',
 	'geo-style.star': 'Star',
 	'geo-style.trapezoid': 'Trapezoid',
 	'geo-style.triangle': 'Triangle',
@@ -261,6 +268,7 @@ export const DEFAULT_TRANSLATION = {
 	'tool.aspect-ratio.wide': 'Wide (16:9)',
 	'tool.image-toolbar-title': 'Image tools',
 	'tool.image-crop': 'Crop image',
+	'tool.image-crop-confirm': 'Confirm',
 	'tool.media-alt-text': 'Alternative text',
 	'tool.media-alt-text-desc': 'Give a description…',
 	'tool.media-alt-text-confirm': 'Confirm',
@@ -309,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',
@@ -412,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',

package/src/lib/ui/kbd-utils.ts

@@ -31,9 +31,16 @@ export function kbd(str: string) {
 			)
 			.flat()
 			.map((sub, index) => {
-				if (sub === '__CTRL__') return 'Ctrl'
-				if (sub === '__ALT__') return 'Alt'
-				const modifiedKey = sub[0].toUpperCase() + sub.slice(1)
+				if (sub[0] === '+') return []
+
+				let modifiedKey
+				if (sub === '__CTRL__') {
+					modifiedKey = 'Ctrl'
+				} else if (sub === '__ALT__') {
+					modifiedKey = 'Alt'
+				} else {
+					modifiedKey = sub[0].toUpperCase() + sub.slice(1)
+				}
 				return tlenv.isDarwin || !index ? modifiedKey : ['+', modifiedKey]
 			})
 			.flat()

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-next.6611943ca24a'
+export const version = '3.16.0-next.8eb6d5c2d8f4'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-08-20T10:14:38.875Z',
-	patch: '2025-08-20T10:14:38.875Z',
+	minor: '2025-09-18T14:19:10.006Z',
+	patch: '2025-09-18T14:19:10.006Z',
 }

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 {
@@ -494,6 +494,10 @@
 	-webkit-user-select: auto !important;
 }
 
+.tlui-input::placeholder {
+	color: var(--tl-color-text-3);
+}
+
 .tlui-input__wrapper {
 	width: 100%;
 	height: 44px;
@@ -578,6 +582,12 @@
 	box-shadow: var(--tl-shadow-3);
 }
 
+@media (max-height: 600px) {
+	.tlui-menu {
+		max-height: 70vh;
+	}
+}
+
 .tlui-menu::-webkit-scrollbar {
 	display: none;
 }
@@ -987,7 +997,7 @@
 	max-width: 148px;
 }
 
-.tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
+.tlui-style-panel[data-enhanced-a11y-mode='true'] .tlui-button[data-isactive='true'] {
 	border-radius: 10px;
 	outline: 2px solid var(--tl-color-text);
 	outline-offset: -5px;
@@ -1007,21 +1017,48 @@
 	flex-direction: column;
 }
 
-.tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) {
+/*
+add a border to the bottom of all but the last section. we have to handle empty sections too, which
+are hidden and shouldn't be counted
+*/
+.tlui-style-panel__section:not(:nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))) {
 	border-bottom: 1px solid var(--tl-color-divider);
 }
+/*
+if a section ends with a slider and we're adding a border, we need some extra space for visual
+balance. we need to handle empty sections as above. is this the most complex css selector in all of
+tldraw? probably.
+*/
+.tlui-style-panel__section:has(.tlui-slider__container:last-child):not(
+		:nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))
+	) {
+	margin-bottom: 7px;
+}
 
 .tlui-style-panel__section:empty {
 	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);
 }
 
 .tlui-style-panel__dropdown-picker:only-child {
-	width: 100%;
+	flex: 1;
 }
 
 .tlui-style-panel__double-select-picker {

package/src/lib/utils/export/copyAs.ts

@@ -31,30 +31,7 @@ export interface CopyAsOptions extends TLImageExportOptions {
  *
  * @public
  */
-export function copyAs(editor: Editor, ids: TLShapeId[], opts: CopyAsOptions): Promise<void>
-/**
- * @deprecated The format parameter is now part of the opts object.
- * @public
- */
-export function copyAs(
-	editor: Editor,
-	ids: TLShapeId[],
-	format: TLCopyType,
-	opts?: TLImageExportOptions & { format?: undefined }
-): Promise<void>
-export function copyAs(
-	...args:
-		| [editor: Editor, ids: TLShapeId[], opts: TLImageExportOptions & { format: TLCopyType }]
-		| [
-				editor: Editor,
-				ids: TLShapeId[],
-				format: TLCopyType,
-				opts?: TLImageExportOptions & { format?: undefined },
-		  ]
-) {
-	const [editor, ids, opts] =
-		typeof args[2] === 'string' ? [args[0], args[1], { ...args[3], format: args[2] }] : args
-
+export function copyAs(editor: Editor, ids: TLShapeId[], opts: CopyAsOptions): Promise<void> {
 	// Note:  it's important that this function itself isn't async and doesn't really use promises -
 	// we need to create the relevant `ClipboardItem`s and call navigator.clipboard.write
 	// synchronously to make sure safari knows that the user _wants_ to copy See

package/src/lib/utils/export/export.ts

@@ -1,7 +1,6 @@
 import {
 	Editor,
 	FileHelpers,
-	TLExportType,
 	TLImageExportOptions,
 	TLShapeId,
 	exhaustiveSwitchError,
@@ -35,41 +34,6 @@ export async function exportToString(
 	}
 }
 
-/**
- * Export the given shapes as a blob.
- * @param editor - The editor instance.
- * @param ids - The ids of the shapes to export.
- * @param format - The format to export as.
- * @param opts - Rendering options.
- * @returns A promise that resolves to a blob.
- * @deprecated Use {@link @tldraw/editor#Editor.toImage} instead.
- * @public
- */
-export async function exportToBlob({
-	editor,
-	ids,
-	format,
-	opts = {},
-}: {
-	editor: Editor
-	ids: TLShapeId[]
-	format: TLExportType
-	opts?: TLImageExportOptions
-}): Promise<Blob> {
-	const idsToUse = ids?.length ? ids : [...editor.getCurrentPageShapeIds()]
-	switch (format) {
-		case 'jpeg':
-		case 'png':
-		case 'webp':
-		case 'svg': {
-			return (await editor.toImage(idsToUse, { ...opts, format })).blob
-		}
-		default: {
-			exhaustiveSwitchError(format)
-		}
-	}
-}
-
 const clipboardMimeTypesByFormat = {
 	jpeg: 'image/jpeg',
 	png: 'image/png',

package/src/lib/utils/export/exportAs.ts

@@ -28,38 +28,7 @@ export async function exportAs(
 	editor: Editor,
 	ids: TLShapeId[],
 	opts: ExportAsOptions
-): Promise<void>
-/**
- * @deprecated The format & name parameters are now part of the opts object.
- * @public
- */
-export async function exportAs(
-	editor: Editor,
-	ids: TLShapeId[],
-	format?: TLExportType,
-	name?: string,
-	opts?: TLImageExportOptions
-): Promise<void>
-export async function exportAs(
-	...args:
-		| [
-				editor: Editor,
-				ids: TLShapeId[],
-				opts: TLImageExportOptions & { format: TLExportType; name?: string },
-		  ]
-		| [
-				editor: Editor,
-				ids: TLShapeId[],
-				format?: TLExportType,
-				name?: string,
-				opts?: TLImageExportOptions,
-		  ]
-) {
-	const [editor, ids, opts] =
-		typeof args[2] === 'object'
-			? args
-			: [args[0], args[1], { ...args[4], format: args[2] ?? 'png', name: args[3] }]
-
+): Promise<void> {
 	// If we don't get name then use a predefined one
 	let name = opts.name
 	if (!name) {

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/commands/setCamera.test.ts

@@ -12,6 +12,7 @@ beforeEach(() => {
 		},
 	})
 	editor.updateViewportScreenBounds(new Box(0, 0, 1600, 900))
+	editor.user.updateUserPreferences({ inputMode: null })
 })
 
 const wheelEvent = {
@@ -204,6 +205,18 @@ describe('CameraOptions.wheelBehavior', () => {
 			.forceTick()
 		expect(editor.getCamera()).toMatchObject({ x: 0, y: 5, z: 1 })
 	})
+
+	it('When input mode is set, camera wheel behavior is ignored', () => {
+		editor.user.updateUserPreferences({ inputMode: 'trackpad' })
+		editor
+			.setCameraOptions({ ...DEFAULT_CAMERA_OPTIONS, wheelBehavior: 'zoom' })
+			.dispatch({
+				...wheelEvent,
+				delta: new Vec(0, 5, 0.01),
+			})
+			.forceTick()
+		expect(editor.getCamera()).toMatchObject({ x: 0, y: 5, z: 1 })
+	})
 })
 
 describe('CameraOptions.panSpeed', () => {