tldraw 3.16.0-canary.0e0fb8bde89d → 3.16.0-canary.13ee933ed97f

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

@@ -3,6 +3,8 @@ import {
 	createShapeId,
 	Editor,
 	GeoShapeGeoStyle,
+	getIndicesBetween,
+	TLLineShape,
 	TLPointerEventInfo,
 	TLShapeId,
 	toRichText,
@@ -153,7 +155,8 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 				},
 				onDragStart(source: TLUiEventSource, info: TLPointerEventInfo) {
 					onDragFromToolbarToCreateShape(editor, info, {
-						createShape: (id) => editor.createShape({ id, type: 'geo', props: { geo } }),
+						createShape: (id) =>
+							editor.createShape({ id, type: 'geo', props: { w: 200, h: 200, geo } }),
 					})
 					trackEvent('drag-tool', { source, id: 'geo' })
 				},
@@ -173,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' })
@@ -188,6 +191,24 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('line')
 					onToolSelect(source, this)
 				},
+				onDragStart(source, info) {
+					onDragFromToolbarToCreateShape(editor, info, {
+						createShape: (id) => {
+							const [start, end] = getIndicesBetween(null, null, 2)
+							editor.createShape<TLLineShape>({
+								id,
+								type: 'line',
+								props: {
+									points: {
+										[start]: { id: start, index: start, x: 0, y: 200 },
+										[end]: { id: end, index: end, x: 200, y: 0 },
+									},
+								},
+							})
+						},
+					})
+					trackEvent('drag-tool', { source, id: 'line' })
+				},
 			},
 			{
 				id: 'frame',
@@ -219,8 +240,8 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 						createShape: (id) =>
 							editor.createShape({ id, type: 'text', props: { richText: toRichText('Text') } }),
 						onDragEnd: (id) => {
-							editor.emit('select-all-text', { shapeId: id })
 							editor.setEditingShape(id)
+							editor.emit('select-all-text', { shapeId: id })
 						},
 					})
 					trackEvent('drag-tool', { source, id: 'text' })
@@ -249,8 +270,8 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					onDragFromToolbarToCreateShape(editor, info, {
 						createShape: (id) => editor.createShape({ id, type: 'note' }),
 						onDragEnd: (id) => {
-							editor.emit('select-all-text', { shapeId: id })
 							editor.setEditingShape(id)
+							editor.emit('select-all-text', { shapeId: id })
 						},
 					})
 					trackEvent('drag-tool', { source, id: 'note' })
@@ -365,5 +386,6 @@ export function onDragFromToolbarToCreateShape(
 			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'
@@ -120,6 +122,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'
@@ -184,6 +187,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'
@@ -258,6 +262,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'
@@ -298,6 +303,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

@@ -92,8 +92,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': 'Enable 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',
@@ -121,6 +123,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',
@@ -185,6 +188,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',
@@ -259,6 +263,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',
@@ -299,6 +304,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/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-canary.0e0fb8bde89d'
+export const version = '3.16.0-canary.13ee933ed97f'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-07-31T14:45:19.563Z',
-	patch: '2025-07-31T14:45:19.563Z',
+	minor: '2025-09-16T09:21:06.120Z',
+	patch: '2025-09-16T09:21:06.120Z',
 }