tldraw 4.2.2 → 4.2.3

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

@@ -24,7 +24,7 @@ import { TldrawUiDropdownMenuItem } from '../TldrawUiDropdownMenu'
 import { TLUiIconJsx } from '../TldrawUiIcon'
 import { TldrawUiKbd } from '../TldrawUiKbd'
 import { TldrawUiToolbarButton } from '../TldrawUiToolbar'
-import { hideAllTooltips } from '../TldrawUiTooltip'
+import { tooltipManager } from '../TldrawUiTooltip'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
 /** @public */
@@ -349,7 +349,7 @@ function useDraggableEvents(
 							point: screenSpaceStart,
 						})
 
-						hideAllTooltips()
+						tooltipManager.hideAllTooltips()
 						editor.getContainer().focus()
 					})
 				}

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

@@ -6,7 +6,10 @@ import {
 	HALF_PI,
 	PageRecordType,
 	Result,
+	TLBookmarkShape,
 	TLEmbedShape,
+	TLFrameShape,
+	TLGroupShape,
 	TLImageShape,
 	TLShape,
 	TLShapeId,
@@ -324,7 +327,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 							.getSelectedShapes()
 							.filter(
 								(shape): shape is TLTextShape =>
-									editor.isShapeOfType(shape, 'text') && shape.props.autoSize === false
+									editor.isShapeOfType<TLTextShape>(shape, 'text') && shape.props.autoSize === false
 							)
 						editor.updateShapes(
 							shapes.map((shape) => {
@@ -359,7 +362,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 						return
 					}
 					const shape = editor.getShape(ids[0])
-					if (!shape || !editor.isShapeOfType(shape, 'embed')) {
+					if (!shape || !editor.isShapeOfType<TLEmbedShape>(shape, 'embed')) {
 						console.error(warnMsg)
 						return
 					}
@@ -375,7 +378,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					if (editor.root.getCurrent()?.id === 'zoom') return
 
 					trackEvent('zoom-tool', { source })
-					if (!(editor.inputs.getShiftKey() || editor.inputs.getCtrlKey())) {
+					if (!(editor.inputs.shiftKey || editor.inputs.ctrlKey)) {
 						const currentTool = editor.root.getCurrent()
 						if (currentTool && currentTool.getCurrent()?.id === 'idle') {
 							editor.setCurrentTool('zoom', { onInteractionEnd: currentTool.id, maskAs: 'zoom' })
@@ -398,7 +401,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					const creationPromises: Promise<Result<any, any>>[] = []
 
 					for (const shape of shapes) {
-						if (!shape || !editor.isShapeOfType(shape, 'embed') || !shape.props.url) continue
+						if (!shape || !editor.isShapeOfType<TLEmbedShape>(shape, 'embed') || !shape.props.url)
+							continue
 
 						const center = editor.getShapePageBounds(shape)?.center
 
@@ -437,7 +441,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 						const createList: TLShapePartial[] = []
 						const deleteList: TLShapeId[] = []
 						for (const shape of shapes) {
-							if (!editor.isShapeOfType(shape, 'bookmark')) continue
+							if (!editor.isShapeOfType<TLBookmarkShape>(shape, 'bookmark')) continue
 
 							const { url } = shape.props
 
@@ -548,7 +552,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 
 					trackEvent('group-shapes', { source })
 					const onlySelectedShape = editor.getOnlySelectedShape()
-					if (onlySelectedShape && editor.isShapeOfType(onlySelectedShape, 'group')) {
+					if (onlySelectedShape && editor.isShapeOfType<TLGroupShape>(onlySelectedShape, 'group')) {
 						editor.markHistoryStoppingPoint('ungroup')
 						editor.ungroupShapes(editor.getSelectedShapeIds())
 					} else {
@@ -568,7 +572,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					const selectedShapes = editor.getSelectedShapes()
 					if (
 						selectedShapes.length > 0 &&
-						selectedShapes.every((shape) => editor.isShapeOfType(shape, 'frame'))
+						selectedShapes.every((shape) => editor.isShapeOfType<TLFrameShape>(shape, 'frame'))
 					) {
 						editor.markHistoryStoppingPoint('remove-frame')
 						removeFrame(
@@ -586,7 +590,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 
 					trackEvent('fit-frame-to-content', { source })
 					const onlySelectedShape = editor.getOnlySelectedShape()
-					if (onlySelectedShape && editor.isShapeOfType(onlySelectedShape, 'frame')) {
+					if (onlySelectedShape && editor.isShapeOfType<TLFrameShape>(onlySelectedShape, 'frame')) {
 						editor.markHistoryStoppingPoint('fit-frame-to-content')
 						fitFrameToContent(editor, onlySelectedShape.id)
 					}
@@ -973,7 +977,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 							helpers.paste(
 								clipboardItems,
 								source,
-								source === 'context-menu' ? editor.inputs.getCurrentPagePoint() : undefined
+								source === 'context-menu' ? editor.inputs.currentPagePoint : undefined
 							)
 						})
 						.catch(() => {
@@ -1037,7 +1041,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					if (!canApplySelectionAction()) return
 					if (mustGoBackToSelectToolFirst()) return
 
-					const isFine = editor.inputs.getAltKey()
+					const isFine = editor.inputs.altKey
 					trackEvent('rotate-cw', { source, fine: isFine })
 					editor.markHistoryStoppingPoint('rotate-cw')
 					editor.run(() => {
@@ -1060,7 +1064,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					if (!canApplySelectionAction()) return
 					if (mustGoBackToSelectToolFirst()) return
 
-					const isFine = editor.inputs.getAltKey()
+					const isFine = editor.inputs.altKey
 					trackEvent('rotate-ccw', { source, fine: isFine })
 					editor.markHistoryStoppingPoint('rotate-ccw')
 					editor.run(() => {
@@ -1092,7 +1096,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				readonlyOk: true,
 				onSelect(source) {
 					trackEvent('zoom-in', { source, towardsCursor: true })
-					editor.zoomIn(editor.inputs.getCurrentScreenPoint(), {
+					editor.zoomIn(editor.inputs.currentScreenPoint, {
 						animation: { duration: editor.options.animationMediumMs },
 					})
 				},
@@ -1116,7 +1120,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				readonlyOk: true,
 				onSelect(source) {
 					trackEvent('zoom-out', { source, towardsCursor: true })
-					editor.zoomOut(editor.inputs.getCurrentScreenPoint(), {
+					editor.zoomOut(editor.inputs.currentScreenPoint, {
 						animation: { duration: editor.options.animationMediumMs },
 					})
 				},
@@ -1595,8 +1599,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					const onlySelectedShape = editor.getOnlySelectedShape()
 					if (
 						onlySelectedShape &&
-						(editor.isShapeOfType(onlySelectedShape, 'image') ||
-							editor.isShapeOfType(onlySelectedShape, 'video'))
+						(editor.isShapeOfType<TLImageShape>(onlySelectedShape, 'image') ||
+							editor.isShapeOfType<TLVideoShape>(onlySelectedShape, 'video'))
 					) {
 						const firstToolbarButton = editor
 							.getContainer()

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

@@ -42,6 +42,7 @@ import {
 } from '../components/Toolbar/DefaultRichTextToolbar'
 import { DefaultToolbar } from '../components/Toolbar/DefaultToolbar'
 import { DefaultVideoToolbar } from '../components/Toolbar/DefaultVideoToolbar'
+import { DefaultTopPanel } from '../components/TopPanel/DefaultTopPanel'
 import { DefaultZoomMenu, TLUiZoomMenuProps } from '../components/ZoomMenu/DefaultZoomMenu'
 import { useShowCollaborationUi } from '../hooks/useCollaborationStatus'
 
@@ -116,7 +117,7 @@ export function TldrawUiComponentsProvider({
 					MenuPanel: DefaultMenuPanel,
 					SharePanel: showCollaborationUi ? DefaultSharePanel : null,
 					CursorChatBubble: showCollaborationUi ? CursorChatBubble : null,
-					TopPanel: null,
+					TopPanel: showCollaborationUi ? DefaultTopPanel : null,
 					Dialogs: DefaultDialogs,
 					Toasts: DefaultToasts,
 					A11y: DefaultA11yAnnouncer,

package/src/lib/ui/hooks/menu-hooks.ts

@@ -1,4 +1,14 @@
-import { Editor, useEditor, useValue } from '@tldraw/editor'
+import {
+	Editor,
+	TLArrowShape,
+	TLDrawShape,
+	TLGroupShape,
+	TLImageShape,
+	TLLineShape,
+	TLTextShape,
+	useEditor,
+	useValue,
+} from '@tldraw/editor'
 import { getArrowBindings } from '../../shapes/arrow/shared'
 
 function shapesWithUnboundArrows(editor: Editor) {
@@ -9,7 +19,7 @@ function shapesWithUnboundArrows(editor: Editor) {
 
 	return selectedShapes.filter((shape) => {
 		if (!shape) return false
-		if (editor.isShapeOfType(shape, 'arrow')) {
+		if (editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
 			const bindings = getArrowBindings(editor, shape)
 			if (bindings.start || bindings.end) return false
 		}
@@ -42,7 +52,7 @@ export const useAllowGroup = () => {
 			if (selectedShapes.length < 2) return false
 
 			for (const shape of selectedShapes) {
-				if (editor.isShapeOfType(shape, 'arrow')) {
+				if (editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
 					const bindings = getArrowBindings(editor, shape)
 					if (bindings.start) {
 						// if the other shape is not among the selected shapes...
@@ -153,7 +163,7 @@ export function useShowAutoSizeToggle() {
 			const selectedShapes = editor.getSelectedShapes()
 			return (
 				selectedShapes.length === 1 &&
-				editor.isShapeOfType(selectedShapes[0], 'text') &&
+				editor.isShapeOfType<TLTextShape>(selectedShapes[0], 'text') &&
 				selectedShapes[0].props.autoSize === false
 			)
 		},
@@ -186,11 +196,11 @@ export function useOnlyFlippableShape() {
 			const shape = editor.getOnlySelectedShape()
 			return (
 				shape &&
-				(editor.isShapeOfType(shape, 'group') ||
-					editor.isShapeOfType(shape, 'image') ||
-					editor.isShapeOfType(shape, 'arrow') ||
-					editor.isShapeOfType(shape, 'line') ||
-					editor.isShapeOfType(shape, 'draw'))
+				(editor.isShapeOfType<TLGroupShape>(shape, 'group') ||
+					editor.isShapeOfType<TLImageShape>(shape, 'image') ||
+					editor.isShapeOfType<TLArrowShape>(shape, 'arrow') ||
+					editor.isShapeOfType<TLLineShape>(shape, 'line') ||
+					editor.isShapeOfType<TLDrawShape>(shape, 'draw'))
 			)
 		},
 		[editor]

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

@@ -783,9 +783,9 @@ export function useNativeClipboardEvents() {
 			// |    Y 		|         N            |       Y 				 |
 			// |    N 		|         Y            |       Y 				 |
 			// |    Y 		|         Y            |       N 				 |
-			if (editor.inputs.getShiftKey()) pasteAtCursor = true
+			if (editor.inputs.shiftKey) pasteAtCursor = true
 			if (editor.user.getIsPasteAtCursorMode()) pasteAtCursor = !pasteAtCursor
-			if (pasteAtCursor) point = editor.inputs.getCurrentPagePoint()
+			if (pasteAtCursor) point = editor.inputs.currentPagePoint
 
 			const pasteFromEvent = () => {
 				if (e.clipboardData) {

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

@@ -3,6 +3,7 @@ import {
 	Editor,
 	IndexKey,
 	TLImageAsset,
+	TLImageShape,
 	TLShape,
 	TLShapeId,
 	Vec,
@@ -165,7 +166,7 @@ export async function flattenShapesToImages(
 			const shapeId = createShapeId()
 
 			// create an image shape in the same place as the shapes
-			editor.createShape({
+			editor.createShape<TLImageShape>({
 				id: shapeId,
 				type: 'image',
 				index,

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

@@ -93,7 +93,7 @@ export function useKeyboardShortcuts() {
 
 			editor.inputs.keys.add('Comma')
 
-			const { x, y, z } = editor.inputs.getCurrentPagePoint()
+			const { x, y, z } = editor.inputs.currentPagePoint
 			const screenpoints = editor.pageToScreen({ x, y })
 
 			const info: TLPointerEventInfo = {
@@ -120,7 +120,7 @@ export function useKeyboardShortcuts() {
 
 			editor.inputs.keys.delete('Comma')
 
-			const { x, y, z } = editor.inputs.getCurrentScreenPoint()
+			const { x, y, z } = editor.inputs.currentScreenPoint
 			const info: TLPointerEventInfo = {
 				type: 'pointer',
 				name: 'pointer_up',

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

@@ -4,13 +4,13 @@ import {
 	Editor,
 	GeoShapeGeoStyle,
 	getIndicesBetween,
+	TLLineShape,
 	TLPointerEventInfo,
 	TLShapeId,
 	toRichText,
 	useMaybeEditor,
 } from '@tldraw/editor'
 import * as React from 'react'
-import { startEditingShapeWithRichText } from '../../tools/SelectTool/selectHelpers'
 import { EmbedDialog } from '../components/EmbedDialog'
 import { TLUiIconJsx } from '../components/primitives/TldrawUiIcon'
 import { useA11y } from '../context/a11y'
@@ -195,7 +195,7 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					onDragFromToolbarToCreateShape(editor, info, {
 						createShape: (id) => {
 							const [start, end] = getIndicesBetween(null, null, 2)
-							editor.createShape({
+							editor.createShape<TLLineShape>({
 								id,
 								type: 'line',
 								props: {
@@ -240,7 +240,8 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 						createShape: (id) =>
 							editor.createShape({ id, type: 'text', props: { richText: toRichText('Text') } }),
 						onDragEnd: (id) => {
-							startEditingShapeWithRichText(editor, id, { selectAll: true })
+							editor.setEditingShape(id)
+							editor.emit('select-all-text', { shapeId: id })
 						},
 					})
 					trackEvent('drag-tool', { source, id: 'text' })
@@ -269,7 +270,8 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					onDragFromToolbarToCreateShape(editor, info, {
 						createShape: (id) => editor.createShape({ id, type: 'note' }),
 						onDragEnd: (id) => {
-							startEditingShapeWithRichText(editor, id, { selectAll: true })
+							editor.setEditingShape(id)
+							editor.emit('select-all-text', { shapeId: id })
 						},
 					})
 					trackEvent('drag-tool', { source, id: 'note' })
@@ -359,7 +361,7 @@ export function onDragFromToolbarToCreateShape(
 	info: TLPointerEventInfo,
 	opts: OnDragFromToolbarToCreateShapesOpts
 ) {
-	const { x, y } = editor.inputs.getCurrentPagePoint()
+	const { x, y } = editor.inputs.currentPagePoint
 
 	const stoppingPoint = editor.markHistoryStoppingPoint('drag shape tool')
 	editor.setCurrentTool('select.translating')

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.2'
+export const version = '4.2.3'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-11-19T11:53:58.692Z',
-	patch: '2026-01-07T11:19:27.083Z',
+	minor: '2025-11-19T11:47:45.748Z',
+	patch: '2026-01-08T10:11:20.530Z',
 }

package/src/lib/ui.css

@@ -514,10 +514,12 @@
 /* If mobile use 16px as font size */
 /* On iOS, font size under 16px in an input will make the page zoom into the input 🤦‍♂️ */
 /* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */
-@supports (-webkit-touch-callout: none) {
-	/* CSS specific to iOS devices */
-	.tlui-input {
-		font-size: 16px;
+@media (max-width: 600px) {
+	@supports (-webkit-touch-callout: none) {
+		/* CSS specific to iOS devices */
+		.tlui-input {
+			font-size: 16px;
+		}
 	}
 }
 
@@ -609,31 +611,25 @@
 
 /* Submenu triggers */
 
-.tlui-menu__submenu__trigger {
-	--gradient-angle: 90deg;
-}
-
-.tlui-menu__submenu__trigger[data-direction='left'] {
-	--gradient-angle: 270deg;
+.tlui-menu__submenu__trigger[data-state='open']::after {
+	opacity: 1;
+	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 }
 
-.tlui-menu__submenu__trigger[data-state='open']::after {
+.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']::after {
 	opacity: 1;
-	background: linear-gradient(
-		var(--gradient-angle),
-		rgba(144, 144, 144, 0) 0%,
-		var(--tl-color-muted-2) 100%
-	);
+	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 }
 
 @media (hover: hover) {
-	.tlui-menu__submenu__trigger:is(:hover, [data-state='open'])::after {
+	.tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after {
 		opacity: 1;
-		background: linear-gradient(
-			var(--gradient-angle),
-			rgba(144, 144, 144, 0) 0%,
-			var(--tl-color-muted-2) 100%
-		);
+		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+	}
+
+	.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']:not(:hover)::after {
+		opacity: 1;
+		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 	}
 }
 
@@ -912,8 +908,10 @@
 	}
 }
 
-.tl-container[data-coarse='true'] .tlui-page_menu__item__submenu > .tlui-button {
-	opacity: 1;
+@media (any-pointer: coarse) {
+	.tlui-page_menu__item__submenu > .tlui-button {
+		opacity: 1;
+	}
 }
 
 .tlui-button__icon {
@@ -952,15 +950,16 @@
 
 .tlui-offline-indicator {
 	display: flex;
-	color: var(--tl-color-background);
-	background-color: var(--tl-color-text);
-	border: none;
-	width: 32px;
-	height: 32px;
+	flex-direction: row;
+	gap: var(--tl-space-3);
+	color: var(--tl-color-text);
+	background-color: var(--tl-color-low);
+	border: 3px solid var(--tl-color-background);
+	padding: 0px var(--tl-space-5);
+	height: 42px;
 	align-items: center;
 	justify-content: center;
 	border-radius: 99px;
-	cursor: default;
 	opacity: 0;
 	animation: tl-fade-in;
 	animation-duration: 0.12s;
@@ -1278,7 +1277,6 @@ tldraw? probably.
 	position: relative;
 	background: var(--tl-color-panel);
 	box-shadow: var(--tl-shadow-2);
-	contain: layout style paint;
 }
 
 .tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {

package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap

@@ -730,11 +730,20 @@ exports[`putExcalidrawContent test fixtures > line-drawing.json 1`] = `
       "isComplete": false,
       "isPen": false,
       "scale": 1,
-      "scaleX": 1,
-      "scaleY": 1,
       "segments": [
         {
-          "points": "AAAAAAA4jgaOBgA4",
+          "points": [
+            {
+              "x": 0,
+              "y": 0,
+              "z": 0.5,
+            },
+            {
+              "x": 0.0001,
+              "y": 0.0001,
+              "z": 0.5,
+            },
+          ],
           "type": "free",
         },
       ],
@@ -761,11 +770,20 @@ exports[`putExcalidrawContent test fixtures > line-drawing.json 1`] = `
       "isComplete": false,
       "isPen": false,
       "scale": 1,
-      "scaleX": 1,
-      "scaleY": 1,
       "segments": [
         {
-          "points": "AAAAAAA4jgaOBgA4",
+          "points": [
+            {
+              "x": 0,
+              "y": 0,
+              "z": 0.5,
+            },
+            {
+              "x": 0.0001,
+              "y": 0.0001,
+              "z": 0.5,
+            },
+          ],
           "type": "free",
         },
       ],
@@ -1375,11 +1393,20 @@ exports[`putExcalidrawContent test fixtures > line-drawing.json 1`] = `
       "isComplete": false,
       "isPen": false,
       "scale": 1,
-      "scaleX": 1,
-      "scaleY": 1,
       "segments": [
         {
-          "points": "AAAAAAA4jgaOBgA4",
+          "points": [
+            {
+              "x": 0,
+              "y": 0,
+              "z": 0.5,
+            },
+            {
+              "x": 0.0001,
+              "y": 0.0001,
+              "z": 0.5,
+            },
+          ],
           "type": "free",
         },
       ],
@@ -1406,11 +1433,20 @@ exports[`putExcalidrawContent test fixtures > line-drawing.json 1`] = `
       "isComplete": false,
       "isPen": false,
       "scale": 1,
-      "scaleX": 1,
-      "scaleY": 1,
       "segments": [
         {
-          "points": "AAAAAAA4jgaOBgA4",
+          "points": [
+            {
+              "x": 0,
+              "y": 0,
+              "z": 0.5,
+            },
+            {
+              "x": 0.0001,
+              "y": 0.0001,
+              "z": 0.5,
+            },
+          ],
           "type": "free",
         },
       ],

package/src/lib/utils/excalidraw/putExcalidrawContent.ts

@@ -16,9 +16,7 @@ import {
 	TLShapeId,
 	Vec,
 	VecLike,
-	VecModel,
 	ZERO_INDEX_KEY,
-	b64Vecs,
 	compact,
 	createBindingId,
 	createShapeId,
@@ -135,7 +133,6 @@ export async function putExcalidrawContent(
 					...base,
 					type: 'geo',
 					props: {
-						...editor.getShapeUtil('geo').getDefaultProps(),
 						geo: element.type,
 						url: element.link ?? '',
 						w: element.width,
@@ -151,25 +148,21 @@ export async function putExcalidrawContent(
 				break
 			}
 			case 'freedraw': {
-				const points: VecModel[] = element.points.map(([x, y, z = 0.5]: number[]) => ({
-					x,
-					y,
-					z,
-				}))
-				const base64Points = b64Vecs.encodePoints(points)
-
 				tldrawContent.shapes.push({
 					...base,
 					type: 'draw',
 					props: {
-						...editor.getShapeUtil('draw').getDefaultProps(),
 						dash: getDash(element),
 						size: strokeWidthsToSizes[element.strokeWidth],
 						color: colorsToColors[element.strokeColor] ?? 'black',
 						segments: [
 							{
 								type: 'free',
-								points: base64Points,
+								points: element.points.map(([x, y, z = 0.5]: number[]) => ({
+									x,
+									y,
+									z,
+								})),
 							},
 						],
 					},
@@ -187,7 +180,6 @@ export async function putExcalidrawContent(
 					...base,
 					type: 'line',
 					props: {
-						...editor.getShapeUtil('line').getDefaultProps(),
 						dash: getDash(element),
 						size: strokeWidthsToSizes[element.strokeWidth],
 						color: colorsToColors[element.strokeColor] ?? 'black',
@@ -229,7 +221,6 @@ export async function putExcalidrawContent(
 					...base,
 					type: 'arrow',
 					props: {
-						...editor.getShapeUtil('arrow').getDefaultProps(),
 						richText: toRichText(text),
 						kind: element.elbowed ? 'elbow' : 'arc',
 						bend: getBend(element, start, end),
@@ -252,7 +243,6 @@ export async function putExcalidrawContent(
 						toId: startTargetId,
 						props: {
 							terminal: 'start',
-							snap: 'none',
 							normalizedAnchor: { x: 0.5, y: 0.5 },
 							isPrecise: false,
 							isExact: false,
@@ -269,7 +259,6 @@ export async function putExcalidrawContent(
 						toId: endTargetId,
 						props: {
 							terminal: 'end',
-							snap: 'none',
 							normalizedAnchor: { x: 0.5, y: 0.5 },
 							isPrecise: false,
 							isExact: false,
@@ -286,7 +275,6 @@ export async function putExcalidrawContent(
 					...base,
 					type: 'text',
 					props: {
-						...editor.getShapeUtil('text').getDefaultProps(),
 						size,
 						scale,
 						font: fontFamilyToFontType[element.fontFamily] ?? 'draw',
@@ -322,7 +310,6 @@ export async function putExcalidrawContent(
 					...base,
 					type: 'image',
 					props: {
-						...editor.getShapeUtil('image').getDefaultProps(),
 						w: element.width,
 						h: element.height,
 						assetId,
@@ -334,7 +321,7 @@ export async function putExcalidrawContent(
 		index = getIndexAbove(index)
 	}
 
-	const p = point ?? (editor.inputs.getShiftKey() ? editor.inputs.getCurrentPagePoint() : undefined)
+	const p = point ?? (editor.inputs.shiftKey ? editor.inputs.currentPagePoint : undefined)
 
 	editor.putContentOntoCurrentPage(tldrawContent, {
 		point: p,

package/src/lib/utils/export/exportAs.ts

@@ -1,4 +1,11 @@
-import { Editor, sanitizeId, TLExportType, TLImageExportOptions, TLShapeId } from '@tldraw/editor'
+import {
+	Editor,
+	sanitizeId,
+	TLExportType,
+	TLFrameShape,
+	TLImageExportOptions,
+	TLShapeId,
+} from '@tldraw/editor'
 
 /** @public */
 export interface ExportAsOptions extends TLImageExportOptions {
@@ -28,7 +35,7 @@ export async function exportAs(
 		name = `shapes at ${getTimestamp()}`
 		if (ids.length === 1) {
 			const first = editor.getShape(ids[0])!
-			if (editor.isShapeOfType(first, 'frame')) {
+			if (editor.isShapeOfType<TLFrameShape>(first, 'frame')) {
 				name = first.props.name || 'frame'
 			} else {
 				name = `${sanitizeId(first.id)} at ${getTimestamp()}`