tldraw 4.2.0-next.f100cedfc45b → 4.3.0-canary.03ae87dcc44b

package/src/lib/shapes/frame/components/FrameLabelInput.tsx

@@ -1,5 +1,8 @@
-import { TLFrameShape, TLShapeId, useEditor } from '@tldraw/editor'
-import { forwardRef, useCallback } from 'react'
+import { TLFrameShape, TLShapeId, useEditor, useValue } from '@tldraw/editor'
+import { forwardRef, useCallback, useEffect, useRef } from 'react'
+import { PORTRAIT_BREAKPOINT } from '../../../ui/constants'
+import { useBreakpoint } from '../../../ui/context/breakpoints'
+import { useTranslation } from '../../../ui/hooks/useTranslation/useTranslation'
 import { defaultEmptyAs } from '../FrameShapeUtil'
 
 export const FrameLabelInput = forwardRef<
@@ -7,6 +10,15 @@ export const FrameLabelInput = forwardRef<
 	{ id: TLShapeId; name: string; isEditing: boolean }
 >(({ id, name, isEditing }, ref) => {
 	const editor = useEditor()
+	const breakpoint = useBreakpoint()
+	const isCoarsePointer = useValue(
+		'isCoarsePointer',
+		() => editor.getInstanceState().isCoarsePointer,
+		[editor]
+	)
+	const shouldUseWindowPrompt = breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && isCoarsePointer
+	const promptOpen = useRef<boolean>(false)
+	const msg = useTranslation()
 
 	const handlePointerDown = useCallback(
 		(e: React.PointerEvent) => {
@@ -28,13 +40,12 @@ export const FrameLabelInput = forwardRef<
 		[editor]
 	)
 
-	const handleBlur = useCallback(
-		(e: React.FocusEvent<HTMLInputElement>) => {
+	const renameFrame = useCallback(
+		(value: string) => {
 			const shape = editor.getShape<TLFrameShape>(id)
 			if (!shape) return
 
 			const name = shape.props.name
-			const value = e.currentTarget.value.trim()
 			if (name === value) return
 
 			editor.updateShapes([
@@ -48,36 +59,49 @@ export const FrameLabelInput = forwardRef<
 		[id, editor]
 	)
 
+	const handleBlur = useCallback(
+		(e: React.FocusEvent<HTMLInputElement>) => {
+			renameFrame(e.currentTarget.value)
+		},
+		[renameFrame]
+	)
+
 	const handleChange = useCallback(
 		(e: React.ChangeEvent<HTMLInputElement>) => {
-			const shape = editor.getShape<TLFrameShape>(id)
-			if (!shape) return
-
-			const name = shape.props.name
-			const value = e.currentTarget.value
-			if (name === value) return
-
-			editor.updateShapes([
-				{
-					id,
-					type: 'frame',
-					props: { name: value },
-				},
-			])
+			renameFrame(e.currentTarget.value)
 		},
-		[id, editor]
+		[renameFrame]
 	)
 
+	/* Mobile rename uses window.prompt */
+	useEffect(() => {
+		if (!isEditing) {
+			promptOpen.current = false
+			return
+		}
+		if (isEditing && shouldUseWindowPrompt && !promptOpen.current) {
+			promptOpen.current = true
+			const shape = editor.getShape<TLFrameShape>(id)
+			const currentName = shape?.props.name ?? ''
+			const newName = window.prompt(msg('action.rename'), currentName)
+			promptOpen.current = false
+			if (newName !== null) renameFrame(newName)
+			editor.setEditingShape(null)
+		}
+	}, [isEditing, shouldUseWindowPrompt, id, msg, renameFrame, editor])
+
 	return (
-		<div className={`tl-frame-label ${isEditing ? 'tl-frame-label__editing' : ''}`}>
+		<div
+			className={`tl-frame-label ${isEditing && !shouldUseWindowPrompt ? 'tl-frame-label__editing' : ''}`}
+		>
 			<input
 				className="tl-frame-name-input"
 				ref={ref}
-				disabled={!isEditing}
-				readOnly={!isEditing}
+				disabled={!isEditing || shouldUseWindowPrompt}
+				readOnly={!isEditing || shouldUseWindowPrompt}
 				style={{ display: isEditing ? undefined : 'none' }}
 				value={name}
-				autoFocus
+				autoFocus={!shouldUseWindowPrompt}
 				onKeyDown={handleKeyDown}
 				onBlur={handleBlur}
 				onChange={handleChange}

package/src/lib/shapes/geo/GeoShapeUtil.test.tsx

@@ -27,8 +27,16 @@ describe('Handle snapping', () => {
 		)
 	})
 
-	const geoShape = () => editor.getShape(ids.geo)!
-	const lineShape = () => editor.getShape(ids.line)!
+	const geoShape = () => {
+		const shape = editor.getShape(ids.geo)!
+		assert(editor.isShapeOfType(shape, 'geo'))
+		return shape
+	}
+	const lineShape = () => {
+		const shape = editor.getShape(ids.line)!
+		assert(editor.isShapeOfType(shape, 'line'))
+		return shape
+	}
 	const lineHandles = () => editor.getShapeUtil('line').getHandles!(lineShape())!
 
 	function startDraggingHandle() {

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<TLGeoShape>([
+				.createShapes([
 					{
 						id,
 						type: 'geo',
@@ -88,7 +88,7 @@ export class Pointing extends StateNode {
 					? { w: 300, h: 180 }
 					: { w: 200, h: 200 }
 
-		this.editor.createShapes<TLGeoShape>([
+		this.editor.createShapes([
 			{
 				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<TLGeoShape>({
+		this.editor.updateShape({
 			id: shape.id,
 			type: 'geo',
 			x: newPoint.x,

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

@@ -1,4 +1,4 @@
-import { TLLineShape, assert } from '@tldraw/editor'
+import { 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<TLLineShape>(line, 'line'))
+		assert(editor.isShapeOfType(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<TLLineShape>(line, 'line'))
+		assert(editor.isShapeOfType(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<TLLineShape>(line, 'line'))
+		assert(editor.isShapeOfType(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<TLLineShape>(line, 'line'))
+		assert(editor.isShapeOfType(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<TLLineShape>(line, 'line'))
+		assert(editor.isShapeOfType(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<TLLineShape>([
+		.createShapes([
 			{
 				id: id,
 				type: 'line',
@@ -168,10 +168,10 @@ describe('Snapping', () => {
 			type: 'line',
 			props: {
 				points: {
-					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 },
+					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 },
 				},
 			},
 		})

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<TLLineShape>([
+			this.editor.createShapes([
 				{
 					id,
 					type: 'line',

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

@@ -1,3 +1,4 @@
+import { TLNoteShape } from '@tldraw/editor'
 import { TestEditor } from '../../../test/TestEditor'
 import { NoteShapeTool } from './NoteShapeTool'
 
@@ -242,7 +243,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(),
+			...editor.getLastCreatedShape<TLNoteShape>(),
 			props: { growY: 100 },
 		})
 

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/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<TLNoteShape>(shape, 'note') ||
+			!editor.isShapeOfType(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<TLNoteShape>({
+		editor.createShape({
 			id,
 			type: 'note',
 			x: center.x,

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

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

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

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

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

@@ -41,6 +41,9 @@ export const ShapeFill = React.memo(function ShapeFill({
 		case 'pattern': {
 			return <PatternFill theme={theme} color={color} fill={fill} d={d} scale={scale} />
 		}
+		case 'lined-fill': {
+			return <path fill={getColorValue(theme, color, 'linedFill')} d={d} />
+		}
 	}
 })
 

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

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

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

@@ -1,10 +1,14 @@
-import { TLRichText, TLShapeId, TLUnknownShape, isAccelKey, useEditor } from '@tldraw/editor'
+import { ExtractShapeByProps, TLRichText, TLShapeId, 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: string, richText?: TLRichText) {
+export function useEditableRichText(
+	shapeId: TLShapeId,
+	type: ExtractShapeByProps<{ richText: TLRichText }>['type'],
+	richText?: TLRichText
+) {
 	const commonUseEditableTextHandlers = useEditableTextCommon(shapeId)
 	const isEditing = commonUseEditableTextHandlers.isEditing
 	const editor = useEditor()
@@ -39,7 +43,7 @@ export function useEditableRichText(shapeId: TLShapeId, type: string, richText?:
 		({ richText }: { richText: TLRichText }) => {
 			if (editor.getEditingShapeId() !== shapeId) return
 
-			editor.updateShape<TLUnknownShape & { props: { richText: TLRichText } }>({
+			editor.updateShape({
 				id: shapeId,
 				type,
 				props: { richText },

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

@@ -1,4 +1,4 @@
-import { DefaultTextAlignStyle, TLTextShape, toRichText } from '@tldraw/editor'
+import { DefaultTextAlignStyle, 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<TLTextShape>([
+		editor.updateShapes([
 			{
 				...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<TLTextShape>([
+		editor.updateShapes([
 			{
 				...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<TLTextShape>([
+		editor.updateShapes([
 			{
 				...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<TLTextShape>({
+		this.editor.createShape({
 			id,
 			type: 'text',
 			x: point.x,

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

@@ -1,7 +1,5 @@
 import {
 	StateNode,
-	TLFrameShape,
-	TLGroupShape,
 	TLPointerEventInfo,
 	TLShapeId,
 	isAccelKey,
@@ -37,8 +35,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<TLGroupShape>(shape, 'group') ||
-						this.editor.isShapeOfType<TLFrameShape>(shape, 'frame')
+						this.editor.isShapeOfType(shape, 'group') ||
+						this.editor.isShapeOfType(shape, 'frame')
 					) {
 						const pointInShapeShape = this.editor.getPointInShapeSpace(shape, originPagePoint)
 						const geometry = this.editor.getShapeGeometry(shape)
@@ -111,7 +109,7 @@ export class Erasing extends StateNode {
 		const minDist = this.editor.options.hitTestMargin / zoomLevel
 
 		for (const shape of currentPageShapes) {
-			if (editor.isShapeOfType<TLGroupShape>(shape, 'group')) continue
+			if (editor.isShapeOfType(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,11 +1,4 @@
-import {
-	isAccelKey,
-	StateNode,
-	TLFrameShape,
-	TLGroupShape,
-	TLPointerEventInfo,
-	TLShapeId,
-} from '@tldraw/editor'
+import { isAccelKey, StateNode, TLPointerEventInfo, TLShapeId } from '@tldraw/editor'
 
 export class Pointing extends StateNode {
 	static override id = 'pointing'
@@ -27,10 +20,7 @@ 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<TLGroupShape>(shape, 'group')
-			) {
+			if (this.editor.isShapeOrAncestorLocked(shape) || this.editor.isShapeOfType(shape, 'group')) {
 				continue
 			}
 
@@ -42,10 +32,7 @@ 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<TLFrameShape>(hitShape, 'frame') &&
-					erasing.size > initialSize
-				) {
+				if (this.editor.isShapeOfType(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<TLGroupShape>(parent, 'group')) {
+			if (parent && editor.isShapeOfType(parent, 'group')) {
 				if (!movingGroups.has(parent)) {
 					movingGroups.add(parent)
 				}
@@ -70,9 +70,7 @@ export class DragAndDropManager {
 			}
 			this.initialIndices.set(shape.id, shape.index)
 
-			const group = editor.findShapeAncestor(shape, (s) =>
-				editor.isShapeOfType<TLGroupShape>(s, 'group')
-			)
+			const group = editor.findShapeAncestor(shape, (s) => editor.isShapeOfType(s, 'group'))
 			if (group) {
 				this.initialGroupIds.set(shape.id, group.id)
 			}

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

@@ -3,8 +3,6 @@ import {
 	Mat,
 	StateNode,
 	TLCancelEventInfo,
-	TLFrameShape,
-	TLGroupShape,
 	TLKeyboardEventInfo,
 	TLPageId,
 	TLPointerEventInfo,
@@ -57,9 +55,7 @@ export class Brushing extends StateNode {
 			editor
 				.getCurrentPageShapes()
 				.filter(
-					(shape) =>
-						editor.isShapeOfType<TLGroupShape>(shape, 'group') ||
-						editor.isShapeOrAncestorLocked(shape)
+					(shape) => editor.isShapeOfType(shape, 'group') || editor.isShapeOrAncestorLocked(shape)
 				)
 				.map((shape) => shape.id)
 		)
@@ -177,7 +173,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<TLFrameShape>(shape, 'frame')) {
+			if (isWrapping || editor.isShapeOfType(shape, 'frame')) {
 				continue testAllShapes
 			}
 

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

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