tldraw 4.2.0-canary.2bb634d0af63 → 4.2.0-canary.2d8f5e848e20

package/dist-esm/lib/ui/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/ui/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.2.0-canary.2bb634d0af63'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2025-10-21T13:14:44.760Z',\n\tpatch: '2025-10-21T13:14:44.760Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.2.0-canary.2d8f5e848e20'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2025-11-07T10:30:55.556Z',\n\tpatch: '2025-11-07T10:30:55.556Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tldraw",
   "description": "A tiny little drawing editor.",
-  "version": "4.2.0-canary.2bb634d0af63",
+  "version": "4.2.0-canary.2d8f5e848e20",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -62,8 +62,8 @@
     "@tiptap/pm": "3.6.2",
     "@tiptap/react": "3.6.2",
     "@tiptap/starter-kit": "3.6.2",
-    "@tldraw/editor": "4.2.0-canary.2bb634d0af63",
-    "@tldraw/store": "4.2.0-canary.2bb634d0af63",
+    "@tldraw/editor": "4.2.0-canary.2d8f5e848e20",
+    "@tldraw/store": "4.2.0-canary.2d8f5e848e20",
     "classnames": "^2.5.1",
     "hotkeys-js": "^3.13.9",
     "idb": "^7.1.1",

package/src/lib/shapes/note/NoteShapeUtil.tsx

@@ -31,9 +31,9 @@ import {
 	useEditor,
 	useValue,
 } from '@tldraw/editor'
-import { useCallback } from 'react'
+import { useCallback, useContext } from 'react'
 import { startEditingShapeWithLabel } from '../../tools/SelectTool/selectHelpers'
-import { useCurrentTranslation } from '../../ui/hooks/useTranslation/useTranslation'
+import { TranslationsContext } from '../../ui/hooks/useTranslation/useTranslation'
 import {
 	isEmptyRichText,
 	renderHtmlFromRichTextForMeasurement,
@@ -493,7 +493,8 @@ function getLabelSize(editor: Editor, shape: TLNoteShape) {
 
 function useNoteKeydownHandler(id: TLShapeId) {
 	const editor = useEditor()
-	const translation = useCurrentTranslation()
+	// Try to get the translation context, but fallback to ltr if it doesn't exist
+	const translation = useContext(TranslationsContext)
 
 	return useCallback(
 		(e: KeyboardEvent) => {
@@ -512,7 +513,7 @@ function useNoteKeydownHandler(id: TLShapeId) {
 				// tab controls x axis (shift inverts direction set by RTL)
 				// cmd enter is the y axis (shift inverts direction)
 				const isRTL = !!(
-					translation.dir === 'rtl' ||
+					translation?.dir === 'rtl' ||
 					// todo: can we check a partial of the text, so that we don't have to render the whole thing?
 					isRightToLeftLanguage(renderPlaintextFromRichText(editor, shape.props.richText))
 				)
@@ -540,7 +541,7 @@ function useNoteKeydownHandler(id: TLShapeId) {
 				}
 			}
 		},
-		[id, editor, translation.dir]
+		[id, editor, translation?.dir]
 	)
 }
 

package/src/lib/shapes/shared/RichTextLabel.tsx

@@ -8,6 +8,7 @@ import {
 	TLEventInfo,
 	TLRichText,
 	TLShapeId,
+	openWindow,
 	preventDefault,
 	useEditor,
 	useReactor,
@@ -112,7 +113,7 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 				if (e.name !== 'pointer_up' || !link) return
 
 				if (!isDragging.current) {
-					window.open(link, '_blank', 'noopener, noreferrer')
+					openWindow(link, '_blank', false)
 				}
 				editor.off('event', handlePointerUp)
 			}

package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx

@@ -83,24 +83,35 @@ export class DraggingHandle extends StateNode {
 		// Find the adjacent handle
 		this.initialAdjacentHandle = null
 
-		// Start from the handle and work forward
-		for (let i = index + 1; i < handles.length; i++) {
-			const handle = handles[i]
-			if (handle.type === 'vertex' && handle.id !== 'middle' && handle.id !== info.handle.id) {
-				this.initialAdjacentHandle = handle
-				break
+		// First, check if the handle specifies a custom reference handle
+		if (info.handle.snapReferenceHandleId) {
+			const customHandle = handles.find((h) => h.id === info.handle.snapReferenceHandleId)
+			if (customHandle) {
+				this.initialAdjacentHandle = customHandle
 			}
 		}
 
-		// If still no handle, start from the end and work backward
+		// If no custom reference handle, use default behavior
 		if (!this.initialAdjacentHandle) {
-			for (let i = handles.length - 1; i >= 0; i--) {
+			// Start from the handle and work forward
+			for (let i = index + 1; i < handles.length; i++) {
 				const handle = handles[i]
 				if (handle.type === 'vertex' && handle.id !== 'middle' && handle.id !== info.handle.id) {
 					this.initialAdjacentHandle = handle
 					break
 				}
 			}
+
+			// If still no handle, start from the end and work backward
+			if (!this.initialAdjacentHandle) {
+				for (let i = handles.length - 1; i >= 0; i--) {
+					const handle = handles[i]
+					if (handle.type === 'vertex' && handle.id !== 'middle' && handle.id !== info.handle.id) {
+						this.initialAdjacentHandle = handle
+						break
+					}
+				}
+			}
 		}
 
 		// <!-- Only relevant to arrows

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

@@ -507,7 +507,7 @@ export class Idle extends StateNode {
 			}
 			case 'Tab': {
 				const selectedShapes = this.editor.getSelectedShapes()
-				if (selectedShapes.length) {
+				if (selectedShapes.length && !info.altKey) {
 					this.editor.selectAdjacentShape(info.shiftKey ? 'prev' : 'next')
 				}
 				break
@@ -557,7 +557,7 @@ export class Idle extends StateNode {
 			}
 			case 'Tab': {
 				const selectedShapes = this.editor.getSelectedShapes()
-				if (selectedShapes.length) {
+				if (selectedShapes.length && !info.altKey) {
 					this.editor.selectAdjacentShape(info.shiftKey ? 'prev' : 'next')
 				}
 				break

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

@@ -110,7 +110,7 @@ function FPS() {
 					isSlow = !isSlow
 				}
 
-				fpsRef.current!.innerHTML = `FPS ${fps.toString()} (max: ${maxKnownFps})`
+				fpsRef.current!.innerHTML = `FPS ${fps.toString()}`
 				fpsRef.current!.className =
 					`tlui-debug-panel__fps` + (isSlow ? ` tlui-debug-panel__fps__slow` : ``)
 

package/src/lib/ui/components/Toolbar/DefaultRichTextToolbarContent.tsx

@@ -54,6 +54,9 @@ export function DefaultRichTextToolbarContent({
 	// todo: we could make this a prop
 	const actions = useMemo(() => {
 		function handleOp(name: string, op: string) {
+			// Check if the editor view is available before calling operations
+			if (!textEditor.view) return
+
 			trackEvent('rich-text', { operation: name as any, source })
 			// @ts-expect-error typing this is annoying at the moment.
 			textEditor.chain().focus()[op]().run()
@@ -109,7 +112,7 @@ export function DefaultRichTextToolbarContent({
 	}, [textEditor, trackEvent, onEditLinkStart])
 
 	return actions.map(({ name, attrs, onSelect }) => {
-		const isActive = textEditor.isActive(name, attrs)
+		const isActive = textEditor.view ? textEditor.isActive(name, attrs) : false
 		return (
 			<TldrawUiToolbarButton
 				key={name}

package/src/lib/ui/components/Toolbar/LinkEditor.tsx

@@ -1,4 +1,4 @@
-import { preventDefault, TiptapEditor, useEditor } from '@tldraw/editor'
+import { openWindow, preventDefault, TiptapEditor, useEditor } from '@tldraw/editor'
 import { useEffect, useRef, useState } from 'react'
 import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
@@ -44,7 +44,7 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 
 	const handleVisitLink = () => {
 		trackEvent('rich-text', { operation: 'link-visit', source })
-		window.open(linkifiedValue, '_blank', 'noopener, noreferrer')
+		openWindow(linkifiedValue, '_blank')
 		onClose()
 	}
 

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

@@ -24,6 +24,7 @@ export type TLUiEventSource =
 	| 'rich-text-menu'
 	| 'image-toolbar'
 	| 'video-toolbar'
+	| 'fairy-panel'
 	| 'unknown'
 
 /** @public */

package/src/lib/ui/getLocalFiles.ts

@@ -9,17 +9,34 @@ export function getLocalFiles(options?: {
 		input.type = 'file'
 		input.accept = mimeTypes?.join(',')
 		input.multiple = allowMultiple
+		input.style.display = 'none'
+
+		function dispose() {
+			input.removeEventListener('change', onchange)
+			input.removeEventListener('cancel', oncancel)
+			input.remove()
+		}
 
 		async function onchange(e: Event) {
 			const fileList = (e.target as HTMLInputElement).files
-			if (!fileList || fileList.length === 0) return
+			if (!fileList || fileList.length === 0) {
+				resolve([])
+				dispose()
+				return
+			}
 			const files = Array.from(fileList)
 			input.value = ''
 			resolve(files)
-			input.removeEventListener('change', onchange)
-			input.remove()
+			dispose()
+		}
+
+		function oncancel() {
+			resolve([])
+			dispose()
 		}
 
+		document.body.appendChild(input)
+		input.addEventListener('cancel', oncancel)
 		input.addEventListener('change', onchange)
 		input?.click()
 	})

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

@@ -586,6 +586,8 @@ async function handleClipboardThings(editor: Editor, things: ClipboardThing[], p
  * @public
  */
 const handleNativeOrMenuCopy = async (editor: Editor) => {
+	const navigator =
+		editor.getContainer().ownerDocument?.defaultView?.navigator ?? globalThis.navigator
 	const content = await editor.resolveAssetsInContent(
 		editor.getContentFromCurrentPage(editor.getSelectedShapeIds())
 	)
@@ -713,6 +715,7 @@ export function useMenuClipboardEvents() {
 /** @public */
 export function useNativeClipboardEvents() {
 	const editor = useEditor()
+	const ownerDocument = editor.getContainer().ownerDocument
 	const trackEvent = useUiEvents()
 
 	const appIsFocused = useValue('editor.isFocused', () => editor.getInstanceState().isFocused, [
@@ -817,16 +820,16 @@ export function useNativeClipboardEvents() {
 			trackEvent('paste', { source: 'kbd' })
 		}
 
-		document.addEventListener('copy', copy)
-		document.addEventListener('cut', cut)
-		document.addEventListener('paste', paste)
-		document.addEventListener('pointerup', pointerUpHandler)
+		ownerDocument?.addEventListener('copy', copy)
+		ownerDocument?.addEventListener('cut', cut)
+		ownerDocument?.addEventListener('paste', paste)
+		ownerDocument?.addEventListener('pointerup', pointerUpHandler)
 
 		return () => {
-			document.removeEventListener('copy', copy)
-			document.removeEventListener('cut', cut)
-			document.removeEventListener('paste', paste)
-			document.removeEventListener('pointerup', pointerUpHandler)
+			ownerDocument?.removeEventListener('copy', copy)
+			ownerDocument?.removeEventListener('cut', cut)
+			ownerDocument?.removeEventListener('paste', paste)
+			ownerDocument?.removeEventListener('pointerup', pointerUpHandler)
 		}
-	}, [editor, trackEvent, appIsFocused])
+	}, [editor, trackEvent, appIsFocused, ownerDocument])
 }

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

@@ -23,7 +23,8 @@ export interface TLUiTranslationProviderProps {
 /** @public */
 export type TLUiTranslationContextType = TLUiTranslation
 
-const TranslationsContext = React.createContext<TLUiTranslationContextType | null>(null)
+/** @internal */
+export const TranslationsContext = React.createContext<TLUiTranslationContextType | null>(null)
 
 /** @public */
 export function useCurrentTranslation() {

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 = '4.2.0-canary.2bb634d0af63'
+export const version = '4.2.0-canary.2d8f5e848e20'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-10-21T13:14:44.760Z',
-	patch: '2025-10-21T13:14:44.760Z',
+	minor: '2025-11-07T10:30:55.556Z',
+	patch: '2025-11-07T10:30:55.556Z',
 }

package/src/test/TldrawEditor.test.tsx

@@ -6,16 +6,17 @@ import {
 	HTMLContainer,
 	TLAssetStore,
 	TLBaseShape,
+	TLShapeId,
 	TldrawEditor,
 	createShapeId,
 	createTLStore,
 	noop,
+	toRichText,
 } from '@tldraw/editor'
 import { StrictMode } from 'react'
 import { vi } from 'vitest'
 import { defaultShapeUtils } from '../lib/defaultShapeUtils'
 import { defaultTools } from '../lib/defaultTools'
-import { GeoShapeUtil } from '../lib/shapes/geo/GeoShapeUtil'
 import { defaultAddFontsFromNode, tipTapDefaultExtensions } from '../lib/utils/text/richText'
 import {
 	renderTldrawComponent,
@@ -169,7 +170,7 @@ describe('<TldrawEditor />', () => {
 		let editor = {} as Editor
 		await renderTldrawComponent(
 			<TldrawEditor
-				shapeUtils={[GeoShapeUtil]}
+				shapeUtils={defaultShapeUtils}
 				initialState="select"
 				tools={defaultTools}
 				onMount={(editorApp) => {
@@ -185,39 +186,83 @@ describe('<TldrawEditor />', () => {
 			editor.updateInstanceState({ screenBounds: { x: 0, y: 0, w: 1080, h: 720 } })
 		})
 
-		const id = createShapeId()
-
-		await act(async () => {
-			editor.createShapes([
-				{
-					id,
-					type: 'geo',
-					props: { w: 100, h: 100 },
+		// Test all shape types except group
+		const shapeTypesToTest = [
+			{ type: 'arrow' as const, props: { start: { x: 0, y: 0 }, end: { x: 100, y: 100 } } },
+			{ type: 'bookmark' as const, props: { w: 100, h: 100, url: 'https://example.com' } },
+			{
+				type: 'draw' as const,
+				props: { segments: [{ type: 'free' as const, points: [{ x: 0, y: 0, z: 0.5 }] }] },
+			},
+			{ type: 'embed' as const, props: { w: 100, h: 100, url: 'https://example.com' } },
+			{ type: 'frame' as const, props: { w: 100, h: 100 } },
+			{ type: 'geo' as const, props: { w: 100, h: 100, geo: 'rectangle' } },
+			{
+				type: 'highlight' as const,
+				props: { segments: [{ type: 'free' as const, points: [{ x: 0, y: 0, z: 0.5 }] }] },
+			},
+			{ type: 'image' as const, props: { w: 100, h: 100 } },
+			{
+				type: 'line' as const,
+				props: {
+					points: {
+						a1: { id: 'a1', index: 'a1', x: 0, y: 0 },
+						a2: { id: 'a2', index: 'a2', x: 100, y: 100 },
+					},
 				},
-			])
-		})
+			},
+			{ type: 'note' as const, props: { richText: toRichText('test') } },
+			{ type: 'text' as const, props: { w: 100, richText: toRichText('test') } },
+			{ type: 'video' as const, props: { w: 100, h: 100 } },
+		]
+
+		const shapeIds: TLShapeId[] = []
+
+		for (let i = 0; i < shapeTypesToTest.length; i++) {
+			const shapeConfig = shapeTypesToTest[i]
+			const id = createShapeId()
+			shapeIds.push(id)
+
+			await act(async () => {
+				editor.createShapes([
+					{
+						id,
+						type: shapeConfig.type,
+						x: i * 150, // Space them out horizontally
+						y: 0,
+						props: shapeConfig.props,
+					},
+				])
+			})
+
+			// Does the shape exist?
+			const shape = editor.getShape(id)
+			expect(shape).toBeTruthy()
+			expect(shape?.type).toBe(shapeConfig.type)
+
+			// Check that all shapes rendered without error boundaries
+			expect(
+				document.querySelectorAll('.tl-shape-error-boundary'),
+				`${shapeConfig.type} had an error while rendering`
+			).toHaveLength(0)
+		}
 
-		// Does the shape exist?
-		expect(editor.getShape(id)).toMatchObject({
-			id,
-			type: 'geo',
-			x: 0,
-			y: 0,
-			opacity: 1,
-			props: { geo: 'rectangle', w: 100, h: 100 },
-		})
+		// Check that all shape components are rendering
+		expect(document.querySelectorAll('.tl-shape').length).toBeGreaterThanOrEqual(
+			shapeTypesToTest.length
+		)
 
-		// Is the shape's component rendering?
-		expect(document.querySelectorAll('.tl-shape')).toHaveLength(1)
-		// though indicator should be display none
-		expect(document.querySelectorAll('.tl-shape-indicator')).toHaveLength(1)
+		// Check that all shape indicators are present
+		expect(document.querySelectorAll('.tl-shape-indicator').length).toBeGreaterThanOrEqual(
+			shapeTypesToTest.length
+		)
 
-		// Select the shape
-		await act(async () => editor.select(id))
+		// Select one of the shapes (the note shape)
+		const noteShapeId = shapeIds[9] // note is at index 9
+		await act(async () => editor.select(noteShapeId))
 
 		expect(editor.getSelectedShapeIds().length).toBe(1)
-		// though indicator it should be visible
-		expect(document.querySelectorAll('.tl-shape-indicator')).toHaveLength(1)
+		expect(editor.getSelectedShapeIds()[0]).toBe(noteShapeId)
 
 		// Select the eraser tool...
 		await act(async () => editor.setCurrentTool('eraser'))

package/src/test/customSnapping.test.tsx

@@ -2,6 +2,7 @@ import {
 	BaseBoxShapeUtil,
 	IndexKey,
 	Polyline2d,
+	ShapeUtil,
 	TLAnyShapeUtilConstructor,
 	TLBaseShape,
 	TLHandle,
@@ -541,3 +542,187 @@ describe('custom handle snapping', () => {
 		})
 	})
 })
+
+describe('custom adjacent handle for shift snapping', () => {
+	type BezierShape = TLBaseShape<
+		'bezier',
+		{
+			start: VecModel
+			cp1: VecModel
+			cp2: VecModel
+			end: VecModel
+		}
+	>
+
+	class BezierShapeUtil extends ShapeUtil<BezierShape> {
+		static override type = 'bezier'
+		override getDefaultProps() {
+			return {
+				start: { x: 0, y: 0 },
+				cp1: { x: 50, y: 0 },
+				cp2: { x: 50, y: 100 },
+				end: { x: 100, y: 100 },
+			}
+		}
+		override component() {
+			throw new Error('Method not implemented.')
+		}
+		override indicator() {
+			throw new Error('Method not implemented.')
+		}
+		override getGeometry() {
+			return new Polyline2d({ points: [] })
+		}
+
+		override getHandles(shape: BezierShape): TLHandle[] {
+			return [
+				{
+					id: 'start',
+					type: 'vertex',
+					index: 'a0' as IndexKey,
+					x: shape.props.start.x,
+					y: shape.props.start.y,
+				},
+				{
+					id: 'cp1',
+					type: 'vertex',
+					index: 'a1' as IndexKey,
+					x: shape.props.cp1.x,
+					y: shape.props.cp1.y,
+					snapReferenceHandleId: 'start', // cp1 snaps relative to start
+				},
+				{
+					id: 'cp2',
+					type: 'vertex',
+					index: 'a2' as IndexKey,
+					x: shape.props.cp2.x,
+					y: shape.props.cp2.y,
+					snapReferenceHandleId: 'end', // cp2 snaps relative to end
+				},
+				{
+					id: 'end',
+					type: 'vertex',
+					index: 'a3' as IndexKey,
+					x: shape.props.end.x,
+					y: shape.props.end.y,
+				},
+			]
+		}
+
+		override onHandleDrag(shape: BezierShape, { handle }: TLHandleDragInfo<BezierShape>) {
+			return {
+				...shape,
+				props: {
+					...shape.props,
+					[handle.id]: { x: handle.x, y: handle.y },
+				},
+			}
+		}
+	}
+
+	const shapeUtils = [BezierShapeUtil] as TLAnyShapeUtilConstructor[]
+
+	let editor: TestEditor
+	let ids: Record<string, TLShapeId>
+
+	beforeEach(() => {
+		editor = new TestEditor({ shapeUtils })
+		ids = editor.createShapesFromJsx([
+			<TL.bezier
+				ref="bezier"
+				x={0}
+				y={0}
+				w={100}
+				h={100}
+				start={{ x: 0, y: 0 }}
+				cp1={{ x: 50, y: 0 }}
+				cp2={{ x: 50, y: 100 }}
+				end={{ x: 100, y: 100 }}
+			/>,
+		])
+	})
+
+	test('cp1 snaps angle relative to start point when using custom adjacent handle', () => {
+		editor.select(ids.bezier)
+		const bezier = editor.getShape<BezierShape>(ids.bezier)!
+		const cp1Handle = editor.getShapeHandles(bezier)!.find((h) => h.id === 'cp1')!
+
+		// Start dragging cp1 handle
+		editor.pointerDown(cp1Handle.x, cp1Handle.y, {
+			target: 'handle',
+			shape: bezier,
+			handle: cp1Handle,
+		})
+
+		// Move with shift key - should snap angle relative to start (0, 0) not cp2
+		editor.pointerMove(60, 20, { shiftKey: true })
+
+		const updatedBezier = editor.getShape<BezierShape>(ids.bezier)!
+		const cp1Pos = updatedBezier.props.cp1
+		const startPos = updatedBezier.props.start
+
+		// The angle from start to cp1 should be snapped to nearest 15 degrees
+		const angle = Math.atan2(cp1Pos.y - startPos.y, cp1Pos.x - startPos.x)
+		const degrees = (angle * 180) / Math.PI
+
+		// Should snap to a multiple of 15 degrees (snapAngle uses 24 divisions = 15 degrees)
+		const remainder = ((degrees % 15) + 15) % 15
+		expect(Math.min(remainder, 15 - remainder)).toBeLessThan(1)
+	})
+
+	test('cp2 snaps angle relative to end point when using custom adjacent handle', () => {
+		editor.select(ids.bezier)
+		const bezier = editor.getShape<BezierShape>(ids.bezier)!
+		const cp2Handle = editor.getShapeHandles(bezier)!.find((h) => h.id === 'cp2')!
+
+		// Start dragging cp2 handle
+		editor.pointerDown(cp2Handle.x, cp2Handle.y, {
+			target: 'handle',
+			shape: bezier,
+			handle: cp2Handle,
+		})
+
+		// Move with shift key - should snap angle relative to end (100, 100)
+		editor.pointerMove(80, 80, { shiftKey: true })
+
+		const updatedBezier = editor.getShape<BezierShape>(ids.bezier)!
+		const cp2Pos = updatedBezier.props.cp2
+		const endPos = updatedBezier.props.end
+
+		// The angle from end to cp2 should be snapped to nearest 15 degrees
+		const angle = Math.atan2(cp2Pos.y - endPos.y, cp2Pos.x - endPos.x)
+		const degrees = (angle * 180) / Math.PI
+
+		// Should snap to a multiple of 15 degrees
+		const remainder = ((degrees % 15) + 15) % 15
+		expect(Math.min(remainder, 15 - remainder)).toBeLessThan(1)
+	})
+
+	test('default handles use default adjacent handle logic', () => {
+		editor.select(ids.bezier)
+		const bezier = editor.getShape<BezierShape>(ids.bezier)!
+		const startHandle = editor.getShapeHandles(bezier)!.find((h) => h.id === 'start')!
+
+		// Start dragging start handle
+		editor.pointerDown(startHandle.x, startHandle.y, {
+			target: 'handle',
+			shape: bezier,
+			handle: startHandle,
+		})
+
+		// Move with shift key - should use default logic (next vertex handle = cp1)
+		editor.pointerMove(10, 10, { shiftKey: true })
+
+		const updatedBezier = editor.getShape<BezierShape>(ids.bezier)!
+		const startPos = updatedBezier.props.start
+		const cp1Pos = updatedBezier.props.cp1
+
+		// The angle from cp1 to start should be snapped to nearest 15 degrees
+		const angle = Math.atan2(startPos.y - cp1Pos.y, startPos.x - cp1Pos.x)
+		const degrees = (angle * 180) / Math.PI
+
+		// Should snap to a multiple of 15 degrees
+		const remainder = ((degrees % 15) + 15) % 15
+		expect(Math.min(remainder, 15 - remainder)).toBeLessThan(1)
+	})
+})