tldraw 3.16.0-canary.f60032f16651 → 3.16.0-canary.ffdf566dd0a8

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

@@ -1,13 +1,4 @@
-import {
-	assertExists,
-	createShapeId,
-	Editor,
-	GeoShapeGeoStyle,
-	TLPointerEventInfo,
-	TLShapeId,
-	toRichText,
-	useMaybeEditor,
-} from '@tldraw/editor'
+import { Editor, GeoShapeGeoStyle, useMaybeEditor } from '@tldraw/editor'
 import * as React from 'react'
 import { EmbedDialog } from '../components/EmbedDialog'
 import { TLUiIconJsx } from '../components/primitives/TldrawUiIcon'
@@ -28,7 +19,6 @@ export interface TLUiToolItem<
 	shortcutsLabel?: TranslationKey
 	icon: IconType | TLUiIconJsx
 	onSelect(source: TLUiEventSource): void
-	onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void
 	/**
 	 * The keyboard shortcut for this tool. This is a string that can be a single key,
 	 * or a combination of keys.
@@ -136,27 +126,21 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					onToolSelect(source, this)
 				},
 			},
-			...[...GeoShapeGeoStyle.values].map((geo) => ({
-				id: geo,
-				label: `tool.${geo}` as TLUiTranslationKey,
+			...[...GeoShapeGeoStyle.values].map((id) => ({
+				id,
+				label: `tool.${id}` as TLUiTranslationKey,
 				meta: {
-					geo,
+					geo: id,
 				},
-				kbd: geo === 'rectangle' ? 'r' : geo === 'ellipse' ? 'o' : undefined,
-				icon: ('geo-' + geo) as TLUiIconType,
+				kbd: id === 'rectangle' ? 'r' : id === 'ellipse' ? 'o' : undefined,
+				icon: ('geo-' + id) as TLUiIconType,
 				onSelect(source: TLUiEventSource) {
 					editor.run(() => {
-						editor.setStyleForNextShapes(GeoShapeGeoStyle, geo)
+						editor.setStyleForNextShapes(GeoShapeGeoStyle, id)
 						editor.setCurrentTool('geo')
-						onToolSelect(source, this, `geo-${geo}`)
+						onToolSelect(source, this, `geo-${id}`)
 					})
 				},
-				onDragStart(source: TLUiEventSource, info: TLPointerEventInfo) {
-					onDragFromToolbarToCreateShape(editor, info, {
-						createShape: (id) => editor.createShape({ id, type: 'geo', props: { geo } }),
-					})
-					trackEvent('drag-tool', { source, id: 'geo' })
-				},
 			})),
 			{
 				id: 'arrow',
@@ -167,17 +151,6 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('arrow')
 					onToolSelect(source, this)
 				},
-				onDragStart(source: TLUiEventSource, info: TLPointerEventInfo) {
-					onDragFromToolbarToCreateShape(editor, info, {
-						createShape: (id) =>
-							editor.createShape({
-								id,
-								type: 'arrow',
-								props: { start: { x: 0, y: 0 }, end: { x: 200, y: 0 } },
-							}),
-					})
-					trackEvent('drag-tool', { source, id: 'arrow' })
-				},
 			},
 			{
 				id: 'line',
@@ -198,12 +171,6 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('frame')
 					onToolSelect(source, this)
 				},
-				onDragStart(source, info) {
-					onDragFromToolbarToCreateShape(editor, info, {
-						createShape: (id) => editor.createShape({ id, type: 'frame' }),
-					})
-					trackEvent('drag-tool', { source, id: 'frame' })
-				},
 			},
 			{
 				id: 'text',
@@ -214,17 +181,6 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('text')
 					onToolSelect(source, this)
 				},
-				onDragStart(source, info) {
-					onDragFromToolbarToCreateShape(editor, info, {
-						createShape: (id) =>
-							editor.createShape({ id, type: 'text', props: { richText: toRichText('Text') } }),
-						onDragEnd: (id) => {
-							editor.emit('select-all-text', { shapeId: id })
-							editor.setEditingShape(id)
-						},
-					})
-					trackEvent('drag-tool', { source, id: 'text' })
-				},
 			},
 			{
 				id: 'asset',
@@ -245,16 +201,6 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('note')
 					onToolSelect(source, this)
 				},
-				onDragStart(source, info) {
-					onDragFromToolbarToCreateShape(editor, info, {
-						createShape: (id) => editor.createShape({ id, type: 'note' }),
-						onDragEnd: (id) => {
-							editor.emit('select-all-text', { shapeId: id })
-							editor.setEditingShape(id)
-						},
-					})
-					trackEvent('drag-tool', { source, id: 'note' })
-				},
 			},
 			{
 				id: 'laser',
@@ -298,7 +244,7 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 		}
 
 		return tools
-	}, [overrides, editor, helpers, onToolSelect, trackEvent])
+	}, [overrides, editor, helpers, onToolSelect])
 
 	return <ToolsContext.Provider value={tools}>{children}</ToolsContext.Provider>
 }
@@ -313,57 +259,3 @@ export function useTools() {
 
 	return ctx
 }
-
-/**
- * Options for {@link onDragFromToolbarToCreateShape}.
- * @public
- */
-export interface OnDragFromToolbarToCreateShapesOpts {
-	/**
-	 * Create the shape being dragged. You don't need to worry about positioning it, as it'll be
-	 * immediately updated with the correct position.
-	 */
-	createShape(id: TLShapeId): void
-	/**
-	 * Called once the drag interaction has finished.
-	 */
-	onDragEnd?(id: TLShapeId): void
-}
-
-/**
- * A helper method to use in {@link TLUiToolItem#onDragStart} to create a shape by dragging it from
- * the toolbar.
- * @public
- */
-export function onDragFromToolbarToCreateShape(
-	editor: Editor,
-	info: TLPointerEventInfo,
-	opts: OnDragFromToolbarToCreateShapesOpts
-) {
-	const { x, y } = editor.inputs.currentPagePoint
-
-	const stoppingPoint = editor.markHistoryStoppingPoint('drag shape tool')
-	editor.setCurrentTool('select.translating')
-
-	const id = createShapeId()
-	opts.createShape(id)
-	const shape = assertExists(editor.getShape(id), 'Shape not found')
-
-	const { w, h } = editor.getShapePageBounds(id)!
-	editor.updateShape({ id, type: shape.type, x: x - w / 2, y: y - h / 2 })
-	editor.select(id)
-
-	editor.setCurrentTool('select.translating', {
-		...info,
-		target: 'shape',
-		shape: editor.getShape(id),
-		isCreating: true,
-		creatingMarkId: stoppingPoint,
-		onCreate() {
-			editor.setCurrentTool('select.idle')
-			editor.select(id)
-			opts.onDragEnd?.(id)
-		},
-	})
-	editor.getCurrentTool().setCurrentToolIdMask(shape.type)
-}

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.f60032f16651'
+export const version = '3.16.0-canary.ffdf566dd0a8'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-08-06T09:18:23.766Z',
-	patch: '2025-08-06T09:18:23.766Z',
+	minor: '2025-08-06T13:55:07.190Z',
+	patch: '2025-08-06T13:55:07.190Z',
 }

package/src/lib/ui.css

@@ -97,7 +97,7 @@
 	opacity: 1;
 }
 
-.tlui-button[aria-expanded='true'][data-direction='left']::after {
+.tlui-button[aria-expanded='true'][data-direction='left'] {
 	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 	opacity: 1;
 }
@@ -1000,6 +1000,12 @@
 	max-width: 148px;
 }
 
+.tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
+	border-radius: 10px;
+	outline: 2px solid var(--color-text);
+	outline-offset: -5px;
+}
+
 .tlui-style-panel::-webkit-scrollbar {
 	display: none;
 }
@@ -1064,6 +1070,26 @@
 	}
 }
 
+/* Accessibility subheadings */
+
+.tlui-style-panel__section .tlui-style-panel__subheading,
+.tlui-style-panel__section__common .tlui-style-panel__subheading,
+.tlui-style-panel__subheading + .tlui-slider__container {
+	margin: 0;
+	padding: var(--space-2) var(--space-3) 0px var(--space-4);
+	font-size: 12px;
+	font-weight: inherit;
+	line-height: inherit;
+}
+
+.tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {
+	padding-top: var(--space-3);
+}
+
+.tlui-style-panel__subheading + .tlui-slider__container {
+	padding-top: 0px;
+}
+
 /* --------------------- Bottom --------------------- */
 
 .tlui-layout__bottom {
@@ -1222,6 +1248,36 @@
 	transition: transform 0.15s ease-out 0.05s;
 }
 
+/* ------------------- Tooltip -------------------- */
+
+.tlui-tooltip {
+	font-size: 12px;
+	padding: 2px 8px;
+	border-radius: 4px;
+	background-color: var(--color-tooltip);
+	box-shadow: none;
+	color: var(--color-text-shadow);
+	max-width: 400px;
+	width: fit-content;
+	text-align: center;
+	pointer-events: none;
+	will-change: transform, opacity;
+	z-index: 2;
+}
+
+.tlui-tooltip__arrow {
+	fill: var(--color-tooltip);
+	will-change: opacity;
+}
+
+[data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
+	z-index: var(--layer-toasts) !important;
+}
+
+[data-radix-popper-content-wrapper]:has(.tlui-tooltip[data-should-animate='true']) {
+	transition: all 0.1s ease-out;
+}
+
 /* ------------------- Debug panel ------------------ */
 
 .tlui-debug-panel {

package/tldraw.css

@@ -167,6 +167,7 @@
 	--color-selected: hsl(214, 84%, 56%);
 	--color-selected-contrast: hsl(0, 0%, 100%);
 	--color-focus: hsl(219, 65%, 50%);
+	--color-tooltip: hsla(200, 14%, 4%, 1);
 	/* Text */
 	--color-text: hsl(0, 0%, 0%);
 	--color-text-0: hsl(0, 0%, 11%);
@@ -222,6 +223,7 @@
 	--color-selected: hsl(217, 89%, 61%);
 	--color-selected-contrast: hsl(0, 0%, 100%);
 	--color-focus: hsl(217, 76%, 80%);
+	--color-tooltip: hsla(0, 0%, 100%, 1);
 	/* Text */
 	--color-text: hsl(210, 17%, 98%);
 	--color-text-0: hsl(0, 9%, 94%);
@@ -1875,7 +1877,7 @@ it from receiving any pointer events or affecting the cursor. */
 	opacity: 1;
 }
 
-.tlui-button[aria-expanded='true'][data-direction='left']::after {
+.tlui-button[aria-expanded='true'][data-direction='left'] {
 	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 	opacity: 1;
 }
@@ -2778,6 +2780,12 @@ it from receiving any pointer events or affecting the cursor. */
 	max-width: 148px;
 }
 
+.tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
+	border-radius: 10px;
+	outline: 2px solid var(--color-text);
+	outline-offset: -5px;
+}
+
 .tlui-style-panel::-webkit-scrollbar {
 	display: none;
 }
@@ -2842,6 +2850,26 @@ it from receiving any pointer events or affecting the cursor. */
 	}
 }
 
+/* Accessibility subheadings */
+
+.tlui-style-panel__section .tlui-style-panel__subheading,
+.tlui-style-panel__section__common .tlui-style-panel__subheading,
+.tlui-style-panel__subheading + .tlui-slider__container {
+	margin: 0;
+	padding: var(--space-2) var(--space-3) 0px var(--space-4);
+	font-size: 12px;
+	font-weight: inherit;
+	line-height: inherit;
+}
+
+.tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {
+	padding-top: var(--space-3);
+}
+
+.tlui-style-panel__subheading + .tlui-slider__container {
+	padding-top: 0px;
+}
+
 /* --------------------- Bottom --------------------- */
 
 .tlui-layout__bottom {
@@ -3000,6 +3028,36 @@ it from receiving any pointer events or affecting the cursor. */
 	transition: transform 0.15s ease-out 0.05s;
 }
 
+/* ------------------- Tooltip -------------------- */
+
+.tlui-tooltip {
+	font-size: 12px;
+	padding: 2px 8px;
+	border-radius: 4px;
+	background-color: var(--color-tooltip);
+	box-shadow: none;
+	color: var(--color-text-shadow);
+	max-width: 400px;
+	width: fit-content;
+	text-align: center;
+	pointer-events: none;
+	will-change: transform, opacity;
+	z-index: 2;
+}
+
+.tlui-tooltip__arrow {
+	fill: var(--color-tooltip);
+	will-change: opacity;
+}
+
+[data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
+	z-index: var(--layer-toasts) !important;
+}
+
+[data-radix-popper-content-wrapper]:has(.tlui-tooltip[data-should-animate='true']) {
+	transition: all 0.1s ease-out;
+}
+
 /* ------------------- Debug panel ------------------ */
 
 .tlui-debug-panel {