tldraw 4.3.0-canary.fd6b7f2a8adc → 4.3.0-next.2b3bfbba757b

package/src/lib/shapes/geo/toolStates/Pointing.ts

@@ -24,7 +24,7 @@ export class Pointing extends StateNode {
 			const creatingMarkId = this.editor.markHistoryStoppingPoint(`creating_geo:${id}`)
 			const newPoint = maybeSnapToGrid(originPagePoint, this.editor)
 			this.editor
-				.createShapes([
+				.createShapes<TLGeoShape>([
 					{
 						id,
 						type: 'geo',
@@ -88,7 +88,7 @@ export class Pointing extends StateNode {
 					? { w: 300, h: 180 }
 					: { w: 200, h: 200 }
 
-		this.editor.createShapes([
+		this.editor.createShapes<TLGeoShape>([
 			{
 				id,
 				type: 'geo',
@@ -115,7 +115,7 @@ export class Pointing extends StateNode {
 		if (parentTransform) delta.rot(-parentTransform.rotation())
 		const newPoint = maybeSnapToGrid(new Vec(shape.x - delta.x, shape.y - delta.y), this.editor)
 		this.editor.select(id)
-		this.editor.updateShape({
+		this.editor.updateShape<TLGeoShape>({
 			id: shape.id,
 			type: 'geo',
 			x: newPoint.x,

package/src/lib/shapes/line/LineShapeTool.test.ts

@@ -1,4 +1,4 @@
-import { assert } from '@tldraw/editor'
+import { TLLineShape, assert } from '@tldraw/editor'
 import { TestEditor } from '../../../test/TestEditor'
 
 let editor: TestEditor
@@ -127,7 +127,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => {
 			.pointerUp(20, 10)
 
 		const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
-		assert(editor.isShapeOfType(line, 'line'))
+		assert(editor.isShapeOfType<TLLineShape>(line, 'line'))
 		expect(Object.keys(line.props.points).length).toBe(3)
 	})
 
@@ -143,7 +143,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => {
 			.pointerUp(30, 10)
 
 		const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
-		assert(editor.isShapeOfType(line, 'line'))
+		assert(editor.isShapeOfType<TLLineShape>(line, 'line'))
 		expect(Object.keys(line.props.points).length).toBe(2)
 	})
 
@@ -160,7 +160,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => {
 			.pointerUp(30, 10)
 
 		const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
-		assert(editor.isShapeOfType(line, 'line'))
+		assert(editor.isShapeOfType<TLLineShape>(line, 'line'))
 		expect(Object.keys(line.props.points).length).toBe(3)
 	})
 
@@ -179,7 +179,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => {
 			.pointerUp(30, 10)
 
 		const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
-		assert(editor.isShapeOfType(line, 'line'))
+		assert(editor.isShapeOfType<TLLineShape>(line, 'line'))
 		expect(Object.keys(line.props.points).length).toBe(3)
 	})
 
@@ -200,7 +200,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => {
 			.pointerUp(40, 10)
 
 		const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
-		assert(editor.isShapeOfType(line, 'line'))
+		assert(editor.isShapeOfType<TLLineShape>(line, 'line'))
 		expect(Object.keys(line.props.points).length).toBe(3)
 	})
 })

package/src/lib/shapes/line/LineShapeUtil.test.tsx

@@ -24,7 +24,7 @@ beforeEach(() => {
 	editor
 		.selectAll()
 		.deleteShapes(editor.getSelectedShapeIds())
-		.createShapes([
+		.createShapes<TLLineShape>([
 			{
 				id: id,
 				type: 'line',
@@ -168,10 +168,10 @@ describe('Snapping', () => {
 			type: 'line',
 			props: {
 				points: {
-					a1: { id: 'a1', index: 'a1' as IndexKey, x: 0, y: 0 },
-					a2: { id: 'a2', index: 'a2' as IndexKey, x: 100, y: 0 },
-					a3: { id: 'a3', index: 'a3' as IndexKey, x: 100, y: 100 },
-					a4: { id: 'a4', index: 'a4' as IndexKey, x: 0, y: 100 },
+					a1: { id: 'a1', index: 'a1', x: 0, y: 0 },
+					a2: { id: 'a2', index: 'a2', x: 100, y: 0 },
+					a3: { id: 'a3', index: 'a3', x: 100, y: 100 },
+					a4: { id: 'a4', index: 'a4', x: 0, y: 100 },
 				},
 			},
 		})

package/src/lib/shapes/line/toolStates/Pointing.ts

@@ -89,7 +89,7 @@ export class Pointing extends StateNode {
 
 			const newPoint = maybeSnapToGrid(currentPagePoint, this.editor)
 
-			this.editor.createShapes([
+			this.editor.createShapes<TLLineShape>([
 				{
 					id,
 					type: 'line',

package/src/lib/shapes/note/NoteShapeTool.test.ts

@@ -1,4 +1,3 @@
-import { TLNoteShape } from '@tldraw/editor'
 import { TestEditor } from '../../../test/TestEditor'
 import { NoteShapeTool } from './NoteShapeTool'
 
@@ -243,7 +242,7 @@ describe('Adjacent note position helpers (sticky pits)', () => {
 
 	it('Falls into correct pit below notes with growY', () => {
 		editor.createShape({ type: 'note', x: 0, y: 0 }).updateShape({
-			...editor.getLastCreatedShape<TLNoteShape>(),
+			...editor.getLastCreatedShape(),
 			props: { growY: 100 },
 		})
 

package/src/lib/shapes/note/noteHelpers.ts

@@ -104,7 +104,7 @@ export function getAvailableNoteAdjacentPositions(
 	// Get all the positions that are adjacent to the selected note shapes
 	for (const shape of editor.getCurrentPageShapes()) {
 		if (
-			!editor.isShapeOfType(shape, 'note') ||
+			!editor.isShapeOfType<TLNoteShape>(shape, 'note') ||
 			scale !== shape.props.scale ||
 			selectedShapeIds.has(shape.id)
 		) {
@@ -204,7 +204,7 @@ export function getNoteShapeForAdjacentPosition(
 
 		// We create it at the center first, so that it becomes
 		// the child of whatever parent was at that center
-		editor.createShape({
+		editor.createShape<TLNoteShape>({
 			id,
 			type: 'note',
 			x: center.x,

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

@@ -1,6 +1,5 @@
 import {
 	Box,
-	ExtractShapeByProps,
 	TLDefaultFillStyle,
 	TLDefaultFontStyle,
 	TLDefaultHorizontalAlignStyle,
@@ -16,7 +15,7 @@ import { useEditablePlainText } from './useEditablePlainText'
 /** @public */
 export interface PlainTextLabelProps {
 	shapeId: TLShapeId
-	type: ExtractShapeByProps<{ text: string }>['type']
+	type: string
 	font: TLDefaultFontStyle
 	fontSize: number
 	lineHeight: number

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

@@ -1,7 +1,6 @@
 import {
 	Box,
 	DefaultFontFamilies,
-	ExtractShapeByProps,
 	TLDefaultFillStyle,
 	TLDefaultFontStyle,
 	TLDefaultHorizontalAlignStyle,
@@ -25,7 +24,7 @@ import { useEditableRichText } from './useEditableRichText'
 /** @public */
 export interface RichTextLabelProps {
 	shapeId: TLShapeId
-	type: ExtractShapeByProps<{ richText: TLRichText }>['type']
+	type: string
 	font: TLDefaultFontStyle
 	fontSize: number
 	lineHeight: number

package/src/lib/shapes/shared/crop.ts

@@ -361,7 +361,6 @@ export function getCropBox<T extends ShapeWithCrop>(
 		x: newPoint.x,
 		y: newPoint.y,
 		props: {
-			...shape.props,
 			w: tempBox.w,
 			h: tempBox.h,
 			crop: newCrop,

package/src/lib/shapes/shared/useEditablePlainText.ts

@@ -1,7 +1,7 @@
 import {
 	Editor,
-	ExtractShapeByProps,
 	TLShapeId,
+	TLUnknownShape,
 	getPointerInfo,
 	noop,
 	preventDefault,
@@ -13,11 +13,7 @@ import React, { useCallback, useEffect, useRef } from 'react'
 import { TextHelpers } from './TextHelpers'
 
 /** @public */
-export function useEditablePlainText(
-	shapeId: TLShapeId,
-	type: ExtractShapeByProps<{ text: string }>['type'],
-	text?: string
-) {
+export function useEditablePlainText(shapeId: TLShapeId, type: string, text?: string) {
 	const commonUseEditableTextHandlers = useEditableTextCommon(shapeId)
 	const isEditing = commonUseEditableTextHandlers.isEditing
 	const editor = useEditor()
@@ -79,7 +75,7 @@ export function useEditablePlainText(
 			if (editor.getEditingShapeId() !== shapeId) return
 
 			const normalizedPlaintext = TextHelpers.normalizeText(plaintext || '')
-			editor.updateShape({
+			editor.updateShape<TLUnknownShape & { props: { text: string } }>({
 				id: shapeId,
 				type,
 				props: { text: normalizedPlaintext },

package/src/lib/shapes/shared/useEditableRichText.ts

@@ -1,14 +1,10 @@
-import { ExtractShapeByProps, TLRichText, TLShapeId, isAccelKey, useEditor } from '@tldraw/editor'
+import { TLRichText, TLShapeId, TLUnknownShape, isAccelKey, useEditor } from '@tldraw/editor'
 import { useCallback, useEffect, useRef } from 'react'
 import { isEmptyRichText } from '../../utils/text/richText'
 import { useEditableTextCommon } from './useEditablePlainText'
 
 /** @public */
-export function useEditableRichText(
-	shapeId: TLShapeId,
-	type: ExtractShapeByProps<{ richText: TLRichText }>['type'],
-	richText?: TLRichText
-) {
+export function useEditableRichText(shapeId: TLShapeId, type: string, richText?: TLRichText) {
 	const commonUseEditableTextHandlers = useEditableTextCommon(shapeId)
 	const isEditing = commonUseEditableTextHandlers.isEditing
 	const editor = useEditor()
@@ -43,7 +39,7 @@ export function useEditableRichText(
 		({ richText }: { richText: TLRichText }) => {
 			if (editor.getEditingShapeId() !== shapeId) return
 
-			editor.updateShape({
+			editor.updateShape<TLUnknownShape & { props: { richText: TLRichText } }>({
 				id: shapeId,
 				type,
 				props: { richText },

package/src/lib/shapes/text/TextShapeTool.test.ts

@@ -1,4 +1,4 @@
-import { DefaultTextAlignStyle, toRichText } from '@tldraw/editor'
+import { DefaultTextAlignStyle, TLTextShape, toRichText } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { TextShapeTool } from './TextShapeTool'
@@ -24,7 +24,7 @@ describe(TextShapeTool, () => {
 		editor.pointerUp()
 		editor.expectToBeIn('select.editing_shape')
 		// This comes from the component, not the state chart
-		editor.updateShapes([
+		editor.updateShapes<TLTextShape>([
 			{
 				...editor.getCurrentPageShapes()[0]!,
 				type: 'text',
@@ -96,7 +96,7 @@ describe('When in idle state', () => {
 		editor.expectToBeIn('select.editing_shape')
 
 		// Update the text shape with some content
-		editor.updateShapes([
+		editor.updateShapes<TLTextShape>([
 			{
 				...editor.getCurrentPageShapes()[0]!,
 				type: 'text',
@@ -133,7 +133,7 @@ describe('When in idle state', () => {
 		editor.expectToBeIn('select.editing_shape')
 
 		// Update the text shape with some content
-		editor.updateShapes([
+		editor.updateShapes<TLTextShape>([
 			{
 				...editor.getCurrentPageShapes()[0]!,
 				type: 'text',

package/src/lib/shapes/text/toolStates/Pointing.ts

@@ -124,7 +124,7 @@ export class Pointing extends StateNode {
 	}
 
 	private createTextShape(id: TLShapeId, point: Vec, autoSize: boolean, width: number) {
-		this.editor.createShape({
+		this.editor.createShape<TLTextShape>({
 			id,
 			type: 'text',
 			x: point.x,

package/src/lib/tools/EraserTool/childStates/Erasing.ts

@@ -1,5 +1,7 @@
 import {
 	StateNode,
+	TLFrameShape,
+	TLGroupShape,
 	TLPointerEventInfo,
 	TLShapeId,
 	isAccelKey,
@@ -35,8 +37,8 @@ export class Erasing extends StateNode {
 					if (this.editor.isShapeOrAncestorLocked(shape)) return true
 					//If the shape is a group or frame, check we're inside it when we start erasing
 					if (
-						this.editor.isShapeOfType(shape, 'group') ||
-						this.editor.isShapeOfType(shape, 'frame')
+						this.editor.isShapeOfType<TLGroupShape>(shape, 'group') ||
+						this.editor.isShapeOfType<TLFrameShape>(shape, 'frame')
 					) {
 						const pointInShapeShape = this.editor.getPointInShapeSpace(shape, originPagePoint)
 						const geometry = this.editor.getShapeGeometry(shape)
@@ -109,7 +111,7 @@ export class Erasing extends StateNode {
 		const minDist = this.editor.options.hitTestMargin / zoomLevel
 
 		for (const shape of currentPageShapes) {
-			if (editor.isShapeOfType(shape, 'group')) continue
+			if (editor.isShapeOfType<TLGroupShape>(shape, 'group')) continue
 
 			// Avoid testing masked shapes, unless the pointer is inside the mask
 			const pageMask = editor.getShapeMask(shape.id)

package/src/lib/tools/EraserTool/childStates/Pointing.ts

@@ -1,4 +1,11 @@
-import { isAccelKey, StateNode, TLPointerEventInfo, TLShapeId } from '@tldraw/editor'
+import {
+	isAccelKey,
+	StateNode,
+	TLFrameShape,
+	TLGroupShape,
+	TLPointerEventInfo,
+	TLShapeId,
+} from '@tldraw/editor'
 
 export class Pointing extends StateNode {
 	static override id = 'pointing'
@@ -20,7 +27,10 @@ export class Pointing extends StateNode {
 
 		for (let n = currentPageShapesSorted.length, i = n - 1; i >= 0; i--) {
 			const shape = currentPageShapesSorted[i]
-			if (this.editor.isShapeOrAncestorLocked(shape) || this.editor.isShapeOfType(shape, 'group')) {
+			if (
+				this.editor.isShapeOrAncestorLocked(shape) ||
+				this.editor.isShapeOfType<TLGroupShape>(shape, 'group')
+			) {
 				continue
 			}
 
@@ -32,7 +42,10 @@ export class Pointing extends StateNode {
 			) {
 				const hitShape = this.editor.getOutermostSelectableShape(shape)
 				// If we've hit a frame after hitting any other shape, stop here
-				if (this.editor.isShapeOfType(hitShape, 'frame') && erasing.size > initialSize) {
+				if (
+					this.editor.isShapeOfType<TLFrameShape>(hitShape, 'frame') &&
+					erasing.size > initialSize
+				) {
 					break
 				}
 

package/src/lib/tools/SelectTool/DragAndDropManager.ts

@@ -44,7 +44,7 @@ export class DragAndDropManager {
 
 		for (const shape of shapesToActuallyMove) {
 			const parent = editor.getShapeParent(shape)
-			if (parent && editor.isShapeOfType(parent, 'group')) {
+			if (parent && editor.isShapeOfType<TLGroupShape>(parent, 'group')) {
 				if (!movingGroups.has(parent)) {
 					movingGroups.add(parent)
 				}
@@ -70,7 +70,9 @@ export class DragAndDropManager {
 			}
 			this.initialIndices.set(shape.id, shape.index)
 
-			const group = editor.findShapeAncestor(shape, (s) => editor.isShapeOfType(s, 'group'))
+			const group = editor.findShapeAncestor(shape, (s) =>
+				editor.isShapeOfType<TLGroupShape>(s, 'group')
+			)
 			if (group) {
 				this.initialGroupIds.set(shape.id, group.id)
 			}

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

@@ -3,6 +3,8 @@ import {
 	Mat,
 	StateNode,
 	TLCancelEventInfo,
+	TLFrameShape,
+	TLGroupShape,
 	TLKeyboardEventInfo,
 	TLPageId,
 	TLPointerEventInfo,
@@ -55,7 +57,9 @@ export class Brushing extends StateNode {
 			editor
 				.getCurrentPageShapes()
 				.filter(
-					(shape) => editor.isShapeOfType(shape, 'group') || editor.isShapeOrAncestorLocked(shape)
+					(shape) =>
+						editor.isShapeOfType<TLGroupShape>(shape, 'group') ||
+						editor.isShapeOrAncestorLocked(shape)
 				)
 				.map((shape) => shape.id)
 		)
@@ -173,7 +177,7 @@ export class Brushing extends StateNode {
 
 			// If we're in wrap mode and the brush did not fully encloses the shape, it's a miss
 			// We also skip frames unless we've completely selected the frame.
-			if (isWrapping || editor.isShapeOfType(shape, 'frame')) {
+			if (isWrapping || editor.isShapeOfType<TLFrameShape>(shape, 'frame')) {
 				continue testAllShapes
 			}
 

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

@@ -2,6 +2,7 @@ import {
 	ShapeWithCrop,
 	StateNode,
 	TLClickEventInfo,
+	TLGroupShape,
 	TLKeyboardEventInfo,
 	TLPointerEventInfo,
 	Vec,
@@ -42,7 +43,7 @@ export class Idle extends StateNode {
 		switch (info.target) {
 			case 'canvas': {
 				const hitShape = getHitShapeOnCanvasPointerDown(this.editor)
-				if (hitShape && !this.editor.isShapeOfType(hitShape, 'group')) {
+				if (hitShape && !this.editor.isShapeOfType<TLGroupShape>(hitShape, 'group')) {
 					this.onPointerDown({
 						...info,
 						shape: hitShape,
@@ -190,7 +191,7 @@ export class Idle extends StateNode {
 				this.editor.markHistoryStoppingPoint('translate crop')
 			}
 
-			this.editor.updateShapes([partial])
+			this.editor.updateShapes<ShapeWithCrop>([partial])
 		}
 	}
 }

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

@@ -115,7 +115,7 @@ export class DraggingHandle extends StateNode {
 		}
 
 		// <!-- Only relevant to arrows
-		if (this.editor.isShapeOfType(shape, 'arrow')) {
+		if (this.editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
 			const initialBinding = getArrowBindings(this.editor, shape)[info.handle.id as 'start' | 'end']
 
 			this.isPrecise = false
@@ -228,7 +228,7 @@ export class DraggingHandle extends StateNode {
 			}
 			const endChanges = util.onHandleDragEnd?.(shape, handleDragInfo)
 			if (endChanges) {
-				this.editor.updateShapes([{ ...endChanges, id: shape.id }])
+				this.editor.updateShapes([{ ...endChanges, id: shape.id, type: shape.type }])
 			}
 		}
 
@@ -295,7 +295,7 @@ export class DraggingHandle extends StateNode {
 		if (!shape) return
 		const util = editor.getShapeUtil(shape)
 
-		const initialBinding = editor.isShapeOfType(shape, 'arrow')
+		const initialBinding = editor.isShapeOfType<TLArrowShape>(shape, 'arrow')
 			? getArrowBindings(editor, shape)[initialHandle.id as 'start' | 'end']
 			: undefined
 
@@ -352,7 +352,10 @@ export class DraggingHandle extends StateNode {
 		const next: TLShapePartial<any> = { id: shape.id, type: shape.type, ...changes }
 
 		// Arrows
-		if (initialHandle.type === 'vertex' && this.editor.isShapeOfType(shape, 'arrow')) {
+		if (
+			initialHandle.type === 'vertex' &&
+			this.editor.isShapeOfType<TLArrowShape>(shape, 'arrow')
+		) {
 			const bindingAfter = getArrowBindings(editor, shape)[initialHandle.id as 'start' | 'end']
 
 			if (bindingAfter) {

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

@@ -3,8 +3,10 @@ import {
 	TLCancelEventInfo,
 	TLCompleteEventInfo,
 	tlenv,
+	TLFrameShape,
 	TLPointerEventInfo,
 	TLShape,
+	TLTextShape,
 } from '@tldraw/editor'
 import { getTextLabels } from '../../../utils/shapes/shapes'
 import { renderPlaintextFromRichText } from '../../../utils/text/richText'
@@ -107,7 +109,7 @@ export class EditingShape extends StateNode {
 				const textLabel = textLabels.length === 1 ? textLabels[0] : undefined
 				// N.B. One nuance here is that we want empty text fields to be removed from the canvas when the user clicks away from them.
 				const isEmptyTextShape =
-					this.editor.isShapeOfType(editingShape, 'text') &&
+					this.editor.isShapeOfType<TLTextShape>(editingShape, 'text') &&
 					renderPlaintextFromRichText(this.editor, editingShape.props.richText).trim() === ''
 				if (textLabel && !isEmptyTextShape) {
 					const pointInShapeSpace = this.editor.getPointInShapeSpace(
@@ -133,7 +135,7 @@ export class EditingShape extends StateNode {
 				} else {
 					if (selectingShape.id === editingShape.id) {
 						// If we clicked on a frame, while editing its heading, cancel editing
-						if (this.editor.isShapeOfType(selectingShape, 'frame')) {
+						if (this.editor.isShapeOfType<TLFrameShape>(selectingShape, 'frame')) {
 							this.editor.setEditingShape(null)
 							this.parent.transition('idle', info)
 						}

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

@@ -3,9 +3,11 @@ import {
 	StateNode,
 	TLAdjacentDirection,
 	TLClickEventInfo,
+	TLGroupShape,
 	TLKeyboardEventInfo,
 	TLPointerEventInfo,
 	TLShape,
+	TLTextShape,
 	Vec,
 	VecLike,
 	createShapeId,
@@ -188,7 +190,7 @@ export class Idle extends StateNode {
 				// unexpected results when working "inside of" a hollow shape.
 
 				const hitShape =
-					hoveredShape && !this.editor.isShapeOfType(hoveredShape, 'group')
+					hoveredShape && !this.editor.isShapeOfType<TLGroupShape>(hoveredShape, 'group')
 						? hoveredShape
 						: (this.editor.getSelectedShapeAtPoint(this.editor.inputs.currentPagePoint) ??
 							this.editor.getShapeAtPoint(this.editor.inputs.currentPagePoint, {
@@ -199,13 +201,13 @@ export class Idle extends StateNode {
 				const focusedGroupId = this.editor.getFocusedGroupId()
 
 				if (hitShape) {
-					if (this.editor.isShapeOfType(hitShape, 'group')) {
+					if (this.editor.isShapeOfType<TLGroupShape>(hitShape, 'group')) {
 						// Probably select the shape
 						selectOnCanvasPointerUp(this.editor, info)
 						return
 					} else {
 						const parent = this.editor.getShape(hitShape.parentId)
-						if (parent && this.editor.isShapeOfType(parent, 'group')) {
+						if (parent && this.editor.isShapeOfType<TLGroupShape>(parent, 'group')) {
 							// The shape is the direct child of a group. If the group is
 							// selected, then we can select the shape. If the group is the
 							// focus layer id, then we can double click into it as usual.
@@ -354,7 +356,7 @@ export class Idle extends StateNode {
 			case 'canvas': {
 				const hoveredShape = this.editor.getHoveredShape()
 				const hitShape =
-					hoveredShape && !this.editor.isShapeOfType(hoveredShape, 'group')
+					hoveredShape && !this.editor.isShapeOfType<TLGroupShape>(hoveredShape, 'group')
 						? hoveredShape
 						: this.editor.getShapeAtPoint(this.editor.inputs.currentPagePoint, {
 								margin: this.editor.options.hitTestMargin / this.editor.getZoomLevel(),
@@ -523,7 +525,9 @@ export class Idle extends StateNode {
 				const selectedShapes = this.editor.getSelectedShapes()
 
 				// On enter, if every selected shape is a group, then select all of the children of the groups
-				if (selectedShapes.every((shape) => this.editor.isShapeOfType(shape, 'group'))) {
+				if (
+					selectedShapes.every((shape) => this.editor.isShapeOfType<TLGroupShape>(shape, 'group'))
+				) {
 					this.editor.setSelectedShapes(
 						selectedShapes.flatMap((shape) => this.editor.getSortedChildIdsForParent(shape.id))
 					)
@@ -600,7 +604,7 @@ export class Idle extends StateNode {
 		const { x, y } = this.editor.inputs.currentPagePoint
 
 		// Allow this to trigger the max shapes reached alert
-		this.editor.createShapes([
+		this.editor.createShapes<TLTextShape>([
 			{
 				id,
 				type: 'text',

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

@@ -124,7 +124,7 @@ export class PointingArrowLabel extends StateNode {
 		}
 
 		this.didDrag = true
-		this.editor.updateShape({
+		this.editor.updateShape<TLArrowShape>({
 			id: shape.id,
 			type: shape.type,
 			props: { labelPosition: nextLabelPosition },

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

@@ -1,4 +1,12 @@
-import { Editor, StateNode, TLHandle, TLNoteShape, TLPointerEventInfo, Vec } from '@tldraw/editor'
+import {
+	Editor,
+	StateNode,
+	TLArrowShape,
+	TLHandle,
+	TLNoteShape,
+	TLPointerEventInfo,
+	Vec,
+} from '@tldraw/editor'
 import { updateArrowTargetState } from '../../../shapes/arrow/arrowTargetState'
 import { getArrowBindings } from '../../../shapes/arrow/shared'
 import {
@@ -21,7 +29,7 @@ export class PointingHandle extends StateNode {
 		this.didCtrlOnEnter = info.accelKey
 
 		const { shape } = info
-		if (this.editor.isShapeOfType(shape, 'arrow')) {
+		if (this.editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
 			const initialBindings = getArrowBindings(this.editor, shape)
 			const currentBinding = initialBindings[info.handle.id as 'start' | 'end']
 			const oppositeBinding = initialBindings[info.handle.id === 'start' ? 'end' : 'start']
@@ -50,7 +58,7 @@ export class PointingHandle extends StateNode {
 	override onPointerUp() {
 		const { shape, handle } = this.info
 
-		if (this.editor.isShapeOfType(shape, 'note')) {
+		if (this.editor.isShapeOfType<TLNoteShape>(shape, 'note')) {
 			const { editor } = this
 			const nextNote = getNoteForAdjacentPosition(editor, shape, handle, false)
 			if (nextNote) {
@@ -82,7 +90,7 @@ export class PointingHandle extends StateNode {
 		if (editor.getIsReadonly()) return
 		const { shape, handle } = this.info
 
-		if (editor.isShapeOfType(shape, 'note')) {
+		if (editor.isShapeOfType<TLNoteShape>(shape, 'note')) {
 			const nextNote = getNoteForAdjacentPosition(editor, shape, handle, true)
 			if (nextNote) {
 				// Center the shape on the current pointer

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

@@ -1,4 +1,4 @@
-import { StateNode, TLClickEventInfo, TLPointerEventInfo } from '@tldraw/editor'
+import { StateNode, TLClickEventInfo, TLGroupShape, TLPointerEventInfo } from '@tldraw/editor'
 import { selectOnCanvasPointerUp } from '../../selection-logic/selectOnCanvasPointerUp'
 
 export class PointingSelection extends StateNode {
@@ -35,7 +35,7 @@ export class PointingSelection extends StateNode {
 	override onDoubleClick?(info: TLClickEventInfo) {
 		const hoveredShape = this.editor.getHoveredShape()
 		const hitShape =
-			hoveredShape && !this.editor.isShapeOfType(hoveredShape, 'group')
+			hoveredShape && !this.editor.isShapeOfType<TLGroupShape>(hoveredShape, 'group')
 				? hoveredShape
 				: this.editor.getShapeAtPoint(this.editor.inputs.currentPagePoint, {
 						hitInside: true,

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

@@ -7,10 +7,12 @@ import {
 	SelectionCorner,
 	SelectionEdge,
 	StateNode,
+	TLFrameShape,
 	TLPointerEventInfo,
 	TLShape,
 	TLShapeId,
 	TLShapePartial,
+	TLTextShape,
 	TLTickEventInfo,
 	Vec,
 	VecLike,
@@ -226,7 +228,7 @@ export class Resizing extends StateNode {
 
 		if (shapeSnapshots.size === 1) {
 			const onlySnapshot = [...shapeSnapshots.values()][0]!
-			if (this.editor.isShapeOfType(onlySnapshot.shape, 'text')) {
+			if (this.editor.isShapeOfType<TLTextShape>(onlySnapshot.shape, 'text')) {
 				isAspectRatioLocked = !(this.info.handle === 'left' || this.info.handle === 'right')
 			}
 		}
@@ -526,7 +528,7 @@ export class Resizing extends StateNode {
 			// descendants (easy) but also flagging with behavior like "resize" or "keep absolute position" or "reposition only with accel key",
 			// though I'm not sure where that would be defined; perhaps better handled with onResizeStart / onResize callbacks on the util, and
 			// pass `accelKeyIsPressed` as well as `accelKeyWasPressed`?
-			if (editor.isShapeOfType(shape, 'frame')) {
+			if (editor.isShapeOfType<TLFrameShape>(shape, 'frame')) {
 				frames.push({
 					id: shape.id,
 					children: compact(