tldraw 3.15.0-next.f1dfcef63951 → 3.15.0

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

@@ -1,6 +1,7 @@
 import { Editor, GeoShapeGeoStyle, useMaybeEditor } from '@tldraw/editor'
 import * as React from 'react'
 import { EmbedDialog } from '../components/EmbedDialog'
+import { TLUiIconJsx } from '../components/primitives/TldrawUiIcon'
 import { useA11y } from '../context/a11y'
 import { TLUiEventSource, useUiEvents } from '../context/events'
 import { TLUiIconType } from '../icon-types'
@@ -16,7 +17,7 @@ export interface TLUiToolItem<
 	id: string
 	label: TranslationKey
 	shortcutsLabel?: TranslationKey
-	icon: IconType
+	icon: IconType | TLUiIconJsx
 	onSelect(source: TLUiEventSource): void
 	/**
 	 * The keyboard shortcut for this tool. This is a string that can be a single key,

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

@@ -55,6 +55,7 @@ export type TLUiTranslationKey =
 	| 'action.new-project'
 	| 'action.new-shared-project'
 	| 'action.open-cursor-chat'
+	| 'action.open-kbd-shortcuts'
 	| 'action.open-file'
 	| 'action.pack'
 	| 'action.paste'
@@ -90,6 +91,8 @@ export type TLUiTranslationKey =
 	| 'action.toggle-wrap-mode'
 	| 'action.toggle-reduce-motion.menu'
 	| 'action.toggle-reduce-motion'
+	| 'action.toggle-keyboard-shortcuts.menu'
+	| 'action.toggle-keyboard-shortcuts'
 	| 'action.toggle-edge-scrolling.menu'
 	| 'action.toggle-edge-scrolling'
 	| 'action.toggle-debug-mode.menu'
@@ -288,6 +291,7 @@ export type TLUiTranslationKey =
 	| 'a11y.pan-camera'
 	| 'a11y.adjust-shape-styles'
 	| 'a11y.open-context-menu'
+	| 'a11y.open-keyboard-shortcuts'
 	| 'menu.title'
 	| 'menu.theme'
 	| 'menu.copy-as'

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

@@ -55,6 +55,7 @@ export const DEFAULT_TRANSLATION = {
 	'action.new-project': 'New project',
 	'action.new-shared-project': 'New shared project',
 	'action.open-cursor-chat': 'Cursor chat',
+	'action.open-kbd-shortcuts': 'Open keyboard shortcuts',
 	'action.open-file': 'Open file',
 	'action.pack': 'Pack',
 	'action.paste': 'Paste',
@@ -91,6 +92,8 @@ 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': 'Toggle keyboard shortcuts',
 	'action.toggle-edge-scrolling.menu': 'Edge scrolling',
 	'action.toggle-edge-scrolling': 'Toggle edge scrolling',
 	'action.toggle-debug-mode.menu': 'Debug mode',
@@ -289,6 +292,7 @@ export const DEFAULT_TRANSLATION = {
 	'a11y.pan-camera': 'Pan camera',
 	'a11y.adjust-shape-styles': 'Adjust shape styles',
 	'a11y.open-context-menu': 'Open context menu',
+	'a11y.open-keyboard-shortcuts': 'Open keyboard shortcuts',
 	'menu.title': 'Menu',
 	'menu.theme': 'Theme',
 	'menu.copy-as': 'Copy 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.15.0-next.f1dfcef63951'
+export const version = '3.15.0'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-07-03T10:22:18.515Z',
-	patch: '2025-07-03T10:22:18.515Z',
+	minor: '2025-07-30T09:07:27.887Z',
+	patch: '2025-07-30T09:07:27.887Z',
 }

package/src/lib/ui.css

@@ -964,7 +964,7 @@
 	justify-content: center;
 	border-radius: 99px;
 	opacity: 0;
-	animation: fade-in;
+	animation: tl-fade-in;
 	animation-duration: 0.12s;
 	animation-delay: 2s;
 	animation-fill-mode: forwards;
@@ -1108,20 +1108,6 @@
 	display: none;
 }
 
-.tlui-navigation-panel__toggle .tlui-icon {
-	opacity: 0.24;
-}
-
-.tlui-navigation-panel__toggle:active .tlui-icon {
-	opacity: 1;
-}
-
-@media (hover: hover) {
-	.tlui-navigation-panel__toggle:hover .tlui-icon {
-		opacity: 1;
-	}
-}
-
 /* Minimap */
 
 .tlui-minimap {
@@ -1379,11 +1365,11 @@
 
 @media (prefers-reduced-motion: no-preference) {
 	.tlui-toast__container[data-state='open'] {
-		animation: slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
+		animation: tlui-slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
 	}
 
 	.tlui-toast__container[data-state='closed'] {
-		animation: hide 100ms ease-in;
+		animation: tlui-fade-out 100ms ease-in;
 	}
 
 	.tlui-toast__container[data-swipe='move'] {
@@ -1396,7 +1382,7 @@
 	}
 
 	.tlui-toast__container[data-swipe='end'] {
-		animation: swipe-out 100ms ease-out;
+		animation: tlui-slide-out 100ms ease-out;
 	}
 }
 
@@ -1411,7 +1397,7 @@
 	z-index: var(--layer-canvas-overlays);
 	background-color: var(--color-overlay);
 	pointer-events: all;
-	animation: fadeIn 0.12s ease-out;
+	animation: tl-fade-in 0.12s ease-out;
 	display: grid;
 	place-items: center;
 	overflow-y: auto;
@@ -1978,7 +1964,7 @@
 }
 
 /* ------------------- Animations ------------------- */
-@keyframes hide {
+@keyframes tlui-fade-out {
 	0% {
 		opacity: 1;
 	}
@@ -1987,7 +1973,7 @@
 	}
 }
 
-@keyframes slide-in {
+@keyframes tlui-slide-in {
 	from {
 		transform: translateX(calc(100% + var(--space-3)));
 	}
@@ -1996,7 +1982,7 @@
 	}
 }
 
-@keyframes swipe-out {
+@keyframes tlui-slide-out {
 	from {
 		transform: translateX(var(--radix-toast-swipe-end-x));
 	}

package/src/test/Editor.test.tsx

@@ -49,7 +49,7 @@ beforeEach(() => {
 })
 
 const moveShapesToPage2 = () => {
-	// directly maniuplate parentId like would happen in multiplayer situations
+	// directly manipulate parentId like would happen in multiplayer situations
 
 	editor.updateShapes([
 		{ id: ids.box1, type: 'geo', parentId: ids.page2 },
@@ -899,3 +899,70 @@ describe('the geometry cache', () => {
 		expect(editor.getShapePageBounds(A)!.width).toBe(200)
 	})
 })
+describe('editor.getShapePageBounds', () => {
+	it('calculates axis aligned bounds correctly', () => {
+		editor.createShape({
+			type: 'geo',
+			x: 99,
+			y: 88,
+			props: {
+				w: 199,
+				h: 188,
+			},
+		})
+		const shape = editor.getLastCreatedShape()
+		expect(editor.getShapePageBounds(shape)!).toMatchInlineSnapshot(`
+	Box {
+	  "h": 188,
+	  "w": 199,
+	  "x": 99,
+	  "y": 88,
+	}
+`)
+	})
+
+	it('calculates rotated bounds correctly', () => {
+		editor.createShape({
+			type: 'geo',
+			x: 99,
+			y: 88,
+			rotation: Math.PI / 4,
+			props: {
+				w: 199,
+				h: 188,
+			},
+		})
+		const shape = editor.getLastCreatedShape()
+		expect(editor.getShapePageBounds(shape)!).toMatchInlineSnapshot(`
+	Box {
+	  "h": 273.65032431919394,
+	  "w": 273.6503243191939,
+	  "x": -33.93607486307093,
+	  "y": 88,
+	}
+`)
+	})
+
+	it('calculates bounds based on vertices, not corners', () => {
+		editor.createShape({
+			type: 'geo',
+			x: 99,
+			y: 88,
+			rotation: Math.PI / 4,
+			props: {
+				geo: 'ellipse',
+				w: 199,
+				h: 188,
+			},
+		})
+		const shape = editor.getLastCreatedShape()
+		expect(editor.getShapePageBounds(shape)!).toMatchInlineSnapshot(`
+	Box {
+	  "h": 193.49999999999997,
+	  "w": 193.50000000000003,
+	  "x": 6.139087296526014,
+	  "y": 128.07516215959694,
+	}
+`)
+	})
+})

package/src/test/commands/clipboard.test.ts

@@ -33,7 +33,7 @@ const doMockClipboard = () => {
 		},
 	})
 
-	globalThis.ClipboardItem = jest.fn((payload: any) => payload)
+	globalThis.ClipboardItem = jest.fn((payload: any) => payload) as any
 
 	return context
 }

package/src/test/navigation.test.ts

@@ -414,6 +414,260 @@ describe('Shape navigation', () => {
 			expect(editor.getSelectedShapeIds()).toEqual([])
 		})
 
+		it('respects container boundaries when navigating with left/right', () => {
+			// Create a frame with shapes inside and shapes outside
+			editor.createShapes([
+				{
+					id: ids.frame1,
+					type: 'frame',
+					x: 0,
+					y: 0,
+					props: {
+						w: 200,
+						h: 200,
+					},
+				},
+				// Shapes inside frame
+				{
+					id: ids.box1,
+					type: 'geo',
+					x: 10,
+					y: 100,
+					parentId: ids.frame1,
+					props: {
+						w: 30,
+						h: 30,
+					},
+				},
+				{
+					id: ids.box2,
+					type: 'geo',
+					x: 50,
+					y: 100,
+					parentId: ids.frame1,
+					props: {
+						w: 30,
+						h: 30,
+					},
+				},
+				{
+					id: ids.box3,
+					type: 'geo',
+					x: 90,
+					y: 100,
+					parentId: ids.frame1,
+					props: {
+						w: 30,
+						h: 30,
+					},
+				},
+				// Shapes outside frame
+				{
+					id: ids.box4,
+					type: 'geo',
+					x: 300,
+					y: 100,
+					props: {
+						w: 30,
+						h: 30,
+					},
+				},
+				{
+					id: ids.box5,
+					type: 'geo',
+					x: 350,
+					y: 100,
+					props: {
+						w: 30,
+						h: 30,
+					},
+				},
+			])
+
+			// Setup shape centers for consistent testing
+			jest.spyOn(editor, 'getShapePageBounds').mockImplementation((shape: any) => {
+				const positions = {
+					[ids.box1]: { x: 25, y: 115 },
+					[ids.box2]: { x: 65, y: 115 },
+					[ids.box3]: { x: 105, y: 115 },
+					[ids.box4]: { x: 315, y: 115 },
+					[ids.box5]: { x: 365, y: 115 },
+				}
+				const pos = positions[shape?.id as keyof typeof positions]
+				return pos ? ({ center: pos } as any) : ({ center: { x: 0, y: 0 } } as any)
+			})
+
+			// Select a shape inside the frame
+			editor.select(ids.box1)
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
+
+			// Navigate right - should stay within the frame
+			editor.selectAdjacentShape('right')
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box2])
+
+			// Continue navigating right - should still stay within the frame
+			editor.selectAdjacentShape('right')
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box3])
+
+			// Navigate right again - should not leave the frame to go to box4
+			editor.selectAdjacentShape('right')
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box3]) // Should stay at box3
+
+			// Now navigate left to test the other direction
+			editor.selectAdjacentShape('left')
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box2])
+
+			editor.selectAdjacentShape('left')
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
+
+			// Navigate left again - should not leave the frame
+			editor.selectAdjacentShape('left')
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box1]) // Should stay at box1
+
+			// Now test navigation outside the frame
+			editor.select(ids.box4)
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box4])
+
+			// Navigate right - should move to box5
+			editor.selectAdjacentShape('right')
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box5])
+
+			// Navigate left - should move back to box4
+			editor.selectAdjacentShape('left')
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box4])
+
+			// Navigate left again - should select the frame (nearest shape to the left)
+			editor.selectAdjacentShape('left')
+			expect(editor.getSelectedShapeIds()).toEqual([ids.frame1]) // Should select frame1
+		})
+
+		it('respects container boundaries when navigating with up/down', () => {
+			// Create a frame with shapes inside and shapes outside
+			editor.createShapes([
+				{
+					id: ids.frame1,
+					type: 'frame',
+					x: 0,
+					y: 0,
+					props: {
+						w: 200,
+						h: 200,
+					},
+				},
+				// Shapes inside frame - vertically arranged
+				{
+					id: ids.box1,
+					type: 'geo',
+					x: 100,
+					y: 10,
+					parentId: ids.frame1,
+					props: {
+						w: 30,
+						h: 30,
+					},
+				},
+				{
+					id: ids.box2,
+					type: 'geo',
+					x: 100,
+					y: 50,
+					parentId: ids.frame1,
+					props: {
+						w: 30,
+						h: 30,
+					},
+				},
+				{
+					id: ids.box3,
+					type: 'geo',
+					x: 100,
+					y: 90,
+					parentId: ids.frame1,
+					props: {
+						w: 30,
+						h: 30,
+					},
+				},
+				// Shapes outside frame - vertically arranged
+				{
+					id: ids.box4,
+					type: 'geo',
+					x: 300,
+					y: 10,
+					props: {
+						w: 30,
+						h: 30,
+					},
+				},
+				{
+					id: ids.box5,
+					type: 'geo',
+					x: 300,
+					y: 50,
+					props: {
+						w: 30,
+						h: 30,
+					},
+				},
+			])
+
+			// Setup shape centers for consistent testing
+			jest.spyOn(editor, 'getShapePageBounds').mockImplementation((shape: any) => {
+				const positions = {
+					[ids.box1]: { x: 115, y: 25 },
+					[ids.box2]: { x: 115, y: 65 },
+					[ids.box3]: { x: 115, y: 105 },
+					[ids.box4]: { x: 315, y: 25 },
+					[ids.box5]: { x: 315, y: 65 },
+				}
+				const pos = positions[shape?.id as keyof typeof positions]
+				return pos ? ({ center: pos } as any) : ({ center: { x: 0, y: 0 } } as any)
+			})
+
+			// Select a shape inside the frame
+			editor.select(ids.box1)
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
+
+			// Navigate down - should stay within the frame
+			editor.selectAdjacentShape('down')
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box2])
+
+			// Continue navigating down - should still stay within the frame
+			editor.selectAdjacentShape('down')
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box3])
+
+			// Navigate down again - should not leave the frame
+			editor.selectAdjacentShape('down')
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box3]) // Should stay at box3
+
+			// Now navigate up to test the other direction
+			editor.selectAdjacentShape('up')
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box2])
+
+			editor.selectAdjacentShape('up')
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
+
+			// Navigate up again - should not leave the frame
+			editor.selectAdjacentShape('up')
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box1]) // Should stay at box1
+
+			// Now test navigation outside the frame
+			editor.select(ids.box4)
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box4])
+
+			// Navigate down - should move to box5
+			editor.selectAdjacentShape('down')
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box5])
+
+			// Navigate up - should move back to box4
+			editor.selectAdjacentShape('up')
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box4])
+
+			// Navigate up again - should not enter the frame
+			editor.selectAdjacentShape('up')
+			expect(editor.getSelectedShapeIds()).toEqual([ids.box4]) // Should stay at box4
+		})
+
 		it('respects container boundaries when navigating with Tab', () => {
 			// Create a frame with shapes inside and shapes outside
 			editor.createShapes([

package/tldraw.css

@@ -171,7 +171,7 @@
 	--color-text: hsl(0, 0%, 0%);
 	--color-text-0: hsl(0, 0%, 11%);
 	--color-text-1: hsl(0, 0%, 18%);
-	--color-text-3: hsl(220, 2%, 65%);
+	--color-text-3: hsl(204, 4%, 45%);
 	--color-text-shadow: hsl(0, 0%, 100%);
 	--color-text-highlight: hsl(52, 100%, 50%);
 	--color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
@@ -226,7 +226,7 @@
 	--color-text: hsl(210, 17%, 98%);
 	--color-text-0: hsl(0, 9%, 94%);
 	--color-text-1: hsl(0, 0%, 85%);
-	--color-text-3: hsl(210, 6%, 45%);
+	--color-text-3: hsl(204, 4%, 75%);
 	--color-text-shadow: hsl(210, 13%, 18%);
 	--color-text-highlight: hsl(52, 100%, 41%);
 	--color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
@@ -972,14 +972,14 @@ input,
 	font-size: 14px;
 	font-weight: 500;
 	opacity: 0;
-	animation: fade-in 0.2s ease-in-out forwards;
+	animation: tl-fade-in 0.2s ease-in-out forwards;
 	animation-delay: 0.2s;
 	position: absolute;
 	inset: 0px;
 	z-index: var(--layer-canvas-blocker);
 }
 
-@keyframes fade-in {
+@keyframes tl-fade-in {
 	0% {
 		opacity: 0;
 	}
@@ -988,6 +988,19 @@ input,
 	}
 }
 
+.tl-spinner {
+	animation: tl-spin 1s linear infinite;
+}
+
+@keyframes tl-spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
 /* ---------------------- Brush --------------------- */
 
 .tl-brush {
@@ -2748,7 +2761,7 @@ it from receiving any pointer events or affecting the cursor. */
 	justify-content: center;
 	border-radius: 99px;
 	opacity: 0;
-	animation: fade-in;
+	animation: tl-fade-in;
 	animation-duration: 0.12s;
 	animation-delay: 2s;
 	animation-fill-mode: forwards;
@@ -2892,20 +2905,6 @@ it from receiving any pointer events or affecting the cursor. */
 	display: none;
 }
 
-.tlui-navigation-panel__toggle .tlui-icon {
-	opacity: 0.24;
-}
-
-.tlui-navigation-panel__toggle:active .tlui-icon {
-	opacity: 1;
-}
-
-@media (hover: hover) {
-	.tlui-navigation-panel__toggle:hover .tlui-icon {
-		opacity: 1;
-	}
-}
-
 /* Minimap */
 
 .tlui-minimap {
@@ -3163,11 +3162,11 @@ it from receiving any pointer events or affecting the cursor. */
 
 @media (prefers-reduced-motion: no-preference) {
 	.tlui-toast__container[data-state='open'] {
-		animation: slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
+		animation: tlui-slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
 	}
 
 	.tlui-toast__container[data-state='closed'] {
-		animation: hide 100ms ease-in;
+		animation: tlui-fade-out 100ms ease-in;
 	}
 
 	.tlui-toast__container[data-swipe='move'] {
@@ -3180,7 +3179,7 @@ it from receiving any pointer events or affecting the cursor. */
 	}
 
 	.tlui-toast__container[data-swipe='end'] {
-		animation: swipe-out 100ms ease-out;
+		animation: tlui-slide-out 100ms ease-out;
 	}
 }
 
@@ -3195,7 +3194,7 @@ it from receiving any pointer events or affecting the cursor. */
 	z-index: var(--layer-canvas-overlays);
 	background-color: var(--color-overlay);
 	pointer-events: all;
-	animation: fadeIn 0.12s ease-out;
+	animation: tl-fade-in 0.12s ease-out;
 	display: grid;
 	place-items: center;
 	overflow-y: auto;
@@ -3762,7 +3761,7 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 /* ------------------- Animations ------------------- */
-@keyframes hide {
+@keyframes tlui-fade-out {
 	0% {
 		opacity: 1;
 	}
@@ -3771,7 +3770,7 @@ it from receiving any pointer events or affecting the cursor. */
 	}
 }
 
-@keyframes slide-in {
+@keyframes tlui-slide-in {
 	from {
 		transform: translateX(calc(100% + var(--space-3)));
 	}
@@ -3780,7 +3779,7 @@ it from receiving any pointer events or affecting the cursor. */
 	}
 }
 
-@keyframes swipe-out {
+@keyframes tlui-slide-out {
 	from {
 		transform: translateX(var(--radix-toast-swipe-end-x));
 	}