tldraw 3.15.0-canary.ee0606e7631e → 3.15.0-canary.f6f94b895c02

package/src/lib/tools/SelectTool/childStates/Translating.ts

@@ -203,6 +203,17 @@ export class Translating extends StateNode {
 	}
 
 	private cancel() {
+		// Call onTranslateCancel callback before resetting
+		const { movingShapes } = this.snapshot
+
+		movingShapes.forEach((shape) => {
+			const current = this.editor.getShape(shape.id)
+			if (current) {
+				const util = this.editor.getShapeUtil(shape)
+				util.onTranslateCancel?.(shape, current)
+			}
+		})
+
 		this.reset()
 		if (this.info.onInteractionEnd) {
 			this.editor.setCurrentTool(this.info.onInteractionEnd)

package/src/lib/ui/components/Spinner.tsx

@@ -1,3 +1,4 @@
+import { DefaultSpinner } from '@tldraw/editor'
 import React from 'react'
 import { useTranslation } from '../hooks/useTranslation/useTranslation'
 
@@ -5,28 +6,5 @@ import { useTranslation } from '../hooks/useTranslation/useTranslation'
 export function Spinner(props: React.SVGProps<SVGSVGElement>) {
 	const msg = useTranslation()
 
-	return (
-		<svg
-			width={16}
-			height={16}
-			viewBox="0 0 16 16"
-			{...props}
-			aria-label={msg('app.loading')}
-			aria-hidden="false"
-		>
-			<g strokeWidth={2} fill="none" fillRule="evenodd">
-				<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke="currentColor" />
-				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor">
-					<animateTransform
-						attributeName="transform"
-						type="rotate"
-						from="0 8 8"
-						to="360 8 8"
-						dur="1s"
-						repeatCount="indefinite"
-					/>
-				</path>
-			</g>
-		</svg>
-	)
+	return <DefaultSpinner aria-label={msg('app.loading')} {...props} />
 }

package/src/lib/ui/components/primitives/Button/TldrawUiButtonIcon.tsx

@@ -1,8 +1,8 @@
-import { TldrawUiIcon } from '../TldrawUiIcon'
+import { TldrawUiIcon, TLUiIconJsx } from '../TldrawUiIcon'
 
 /** @public */
 export interface TLUiButtonIconProps {
-	icon: string
+	icon: string | TLUiIconJsx
 	small?: boolean
 	invertIcon?: boolean
 }

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

@@ -1,11 +1,14 @@
 import classNames from 'classnames'
-import { memo, useLayoutEffect, useRef } from 'react'
+import { cloneElement, memo, ReactElement, useLayoutEffect, useRef } from 'react'
 import { useAssetUrls } from '../../context/asset-urls'
 import { TLUiIconType } from '../../icon-types'
 
+/** @public */
+export type TLUiIconJsx = ReactElement<React.HTMLAttributes<HTMLDivElement>>
+
 /** @public */
 export interface TLUiIconProps extends React.HTMLAttributes<HTMLDivElement> {
-	icon: TLUiIconType | Exclude<string, TLUiIconType>
+	icon: TLUiIconType | Exclude<string, TLUiIconType> | TLUiIconJsx
 	label: string
 	small?: boolean
 	color?: string
@@ -24,6 +27,41 @@ export const TldrawUiIcon = memo(function TldrawUiIcon({
 	className,
 	...props
 }: TLUiIconProps) {
+	if (typeof icon === 'string') {
+		return (
+			<TldrawUIIconInner
+				label={label}
+				small={small}
+				invertIcon={invertIcon}
+				icon={icon}
+				color={color}
+				className={className}
+				{...props}
+			/>
+		)
+	}
+
+	return cloneElement(icon, {
+		...props,
+		className: classNames({ 'tlui-icon__small': small }, className, icon.props.className),
+		'aria-label': label,
+		style: {
+			color,
+			transform: invertIcon ? 'scale(-1, 1)' : undefined,
+			...icon.props.style,
+		},
+	})
+})
+
+function TldrawUIIconInner({
+	label,
+	small,
+	invertIcon,
+	icon,
+	color,
+	className,
+	...props
+}: TLUiIconProps & { icon: TLUiIconType | Exclude<string, TLUiIconType> }) {
 	const assetUrls = useAssetUrls()
 	const asset = assetUrls.icons[icon as TLUiIconType] ?? assetUrls.icons['question-mark-circle']
 	const ref = useRef<HTMLDivElement>(null)
@@ -69,4 +107,4 @@ export const TldrawUiIcon = memo(function TldrawUiIcon({
 			}}
 		/>
 	)
-})
+}

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

@@ -5,7 +5,7 @@ import { TLUiEventSource } from '../../../context/events'
 import { useReadonly } from '../../../hooks/useReadonly'
 import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../../hooks/useTranslation/useTranslation'
-import { TldrawUiIcon } from '../TldrawUiIcon'
+import { TldrawUiIcon, TLUiIconJsx } from '../TldrawUiIcon'
 import { TldrawUiKbd } from '../TldrawUiKbd'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
@@ -14,7 +14,7 @@ export interface TLUiMenuCheckboxItemProps<
 	TranslationKey extends string = string,
 	IconType extends string = string,
 > {
-	icon?: IconType
+	icon?: IconType | TLUiIconJsx
 	id: string
 	kbd?: string
 	title?: string

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

@@ -12,6 +12,7 @@ import { TldrawUiButton } from '../Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../Button/TldrawUiButtonIcon'
 import { TldrawUiButtonLabel } from '../Button/TldrawUiButtonLabel'
 import { TldrawUiDropdownMenuItem } from '../TldrawUiDropdownMenu'
+import { TLUiIconJsx } from '../TldrawUiIcon'
 import { TldrawUiKbd } from '../TldrawUiKbd'
 import { TldrawUiToolbarButton } from '../TldrawUiToolbar'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
@@ -25,11 +26,11 @@ export interface TLUiMenuItemProps<
 	/**
 	 * The icon to display on the item. Icons are only shown in certain menu types.
 	 */
-	icon?: IconType
+	icon?: IconType | TLUiIconJsx
 	/**
 	 * An icon to display to the left of the menu item.
 	 */
-	iconLeft?: IconType
+	iconLeft?: IconType | TLUiIconJsx
 	/**
 	 * The keyboard shortcut to display on the item.
 	 */

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

@@ -43,7 +43,7 @@ export interface TLUiActionItem<
 	TransationKey extends string = string,
 	IconType extends string = string,
 > {
-	icon?: IconType
+	icon?: IconType | React.ReactElement
 	id: string
 	kbd?: string
 	label?: TransationKey | { [key: string]: TransationKey }

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/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-canary.ee0606e7631e'
+export const version = '3.15.0-canary.f6f94b895c02'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-07-14T15:28:44.028Z',
-	patch: '2025-07-14T15:28:44.028Z',
+	minor: '2025-07-25T09:38:18.431Z',
+	patch: '2025-07-25T09:38:18.431Z',
 }

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;
@@ -1365,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'] {
@@ -1382,7 +1382,7 @@
 	}
 
 	.tlui-toast__container[data-swipe='end'] {
-		animation: swipe-out 100ms ease-out;
+		animation: tlui-slide-out 100ms ease-out;
 	}
 }
 
@@ -1397,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;
@@ -1964,7 +1964,7 @@
 }
 
 /* ------------------- Animations ------------------- */
-@keyframes hide {
+@keyframes tlui-fade-out {
 	0% {
 		opacity: 1;
 	}
@@ -1973,7 +1973,7 @@
 	}
 }
 
-@keyframes slide-in {
+@keyframes tlui-slide-in {
 	from {
 		transform: translateX(calc(100% + var(--space-3)));
 	}
@@ -1982,7 +1982,7 @@
 	}
 }
 
-@keyframes swipe-out {
+@keyframes tlui-slide-out {
 	from {
 		transform: translateX(var(--radix-toast-swipe-end-x));
 	}

package/src/lib/utils/tldr/buildFromV1Document.ts

@@ -562,6 +562,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 										y: point.y,
 									},
 									isPrecise: point.x !== 0.5 || point.y !== 0.5,
+									isCreatingShape: true,
 								})
 
 								if (change) {

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([