tldraw 4.3.0-canary.d8da2a99f394 → 4.3.0-canary.e1766dd4eab3

package/src/lib/ui/components/ZoomMenu/DefaultZoomMenu.tsx

@@ -48,7 +48,7 @@ export const DefaultZoomMenu = memo(function DefaultZoomMenu({ children }: TLUiZ
 const ZoomTriggerButton = () => {
 	const editor = useEditor()
 	const breakpoint = useBreakpoint()
-	const zoom = useValue('zoom', () => editor.getZoomLevel(), [editor])
+	const zoom = useValue('zoom', () => editor.getEfficientZoomLevel(), [editor])
 	const msg = useTranslation()
 
 	const handleDoubleClick = useCallback(() => {

package/src/lib/ui/components/menu-items.tsx

@@ -1,12 +1,4 @@
-import {
-	TLBookmarkShape,
-	TLEmbedShape,
-	TLFrameShape,
-	TLImageShape,
-	TLPageId,
-	useEditor,
-	useValue,
-} from '@tldraw/editor'
+import { TLPageId, useEditor, useValue } from '@tldraw/editor'
 import { supportsDownloadingOriginal } from '../context/actions'
 import { useUiEvents } from '../context/events'
 import { useToasts } from '../context/toasts'
@@ -64,7 +56,7 @@ export function FlattenMenuItem() {
 			const selectedShapeIds = editor.getSelectedShapeIds()
 			if (selectedShapeIds.length === 0) return false
 			const onlySelectedShape = editor.getOnlySelectedShape()
-			if (onlySelectedShape && editor.isShapeOfType<TLImageShape>(onlySelectedShape, 'image')) {
+			if (onlySelectedShape && editor.isShapeOfType(onlySelectedShape, 'image')) {
 				return false
 			}
 			return true
@@ -117,7 +109,7 @@ export function RemoveFrameMenuItem() {
 		() => {
 			const selectedShapes = editor.getSelectedShapes()
 			if (selectedShapes.length === 0) return false
-			return selectedShapes.every((shape) => editor.isShapeOfType<TLFrameShape>(shape, 'frame'))
+			return selectedShapes.every((shape) => editor.isShapeOfType(shape, 'frame'))
 		},
 		[editor]
 	)
@@ -135,7 +127,7 @@ export function FitFrameToContentMenuItem() {
 			const onlySelectedShape = editor.getOnlySelectedShape()
 			if (!onlySelectedShape) return false
 			return (
-				editor.isShapeOfType<TLFrameShape>(onlySelectedShape, 'frame') &&
+				editor.isShapeOfType(onlySelectedShape, 'frame') &&
 				editor.getSortedChildIdsForParent(onlySelectedShape).length > 0
 			)
 		},
@@ -190,7 +182,9 @@ export function UnlockAllMenuItem() {
 /** @public @react */
 export function ZoomTo100MenuItem() {
 	const editor = useEditor()
-	const isZoomedTo100 = useValue('zoomed to 100', () => editor.getZoomLevel() === 1, [editor])
+	const isZoomedTo100 = useValue('zoomed to 100', () => editor.getEfficientZoomLevel() === 1, [
+		editor,
+	])
 
 	return <TldrawUiMenuActionItem actionId="zoom-to-100" noClose disabled={isZoomedTo100} />
 }
@@ -518,7 +512,7 @@ export function ConvertToBookmarkMenuItem() {
 			const onlySelectedShape = editor.getOnlySelectedShape()
 			if (!onlySelectedShape) return false
 			return !!(
-				editor.isShapeOfType<TLEmbedShape>(onlySelectedShape, 'embed') &&
+				editor.isShapeOfType(onlySelectedShape, 'embed') &&
 				onlySelectedShape.props.url &&
 				!editor.isShapeOrAncestorLocked(onlySelectedShape)
 			)
@@ -542,7 +536,7 @@ export function ConvertToEmbedMenuItem() {
 			const onlySelectedShape = editor.getOnlySelectedShape()
 			if (!onlySelectedShape) return false
 			return !!(
-				editor.isShapeOfType<TLBookmarkShape>(onlySelectedShape, 'bookmark') &&
+				editor.isShapeOfType(onlySelectedShape, 'bookmark') &&
 				onlySelectedShape.props.url &&
 				getEmbedDefinition(onlySelectedShape.props.url) &&
 				!editor.isShapeOrAncestorLocked(onlySelectedShape)

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

@@ -3,7 +3,7 @@ import { Slider as _Slider } from 'radix-ui'
 import React, { useCallback, useEffect, useState } from 'react'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiTooltip, tooltipManager } from './TldrawUiTooltip'
+import { hideAllTooltips, TldrawUiTooltip } from './TldrawUiTooltip'
 
 /** @public */
 export interface TLUiSliderProps {
@@ -52,7 +52,7 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 	)
 
 	const handlePointerDown = useCallback(() => {
-		tooltipManager.hideAllTooltips()
+		hideAllTooltips()
 		onHistoryMark?.('click slider')
 	}, [onHistoryMark])
 

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

@@ -1,4 +1,12 @@
-import { assert, Atom, atom, Editor, uniqueId, useMaybeEditor, useValue } from '@tldraw/editor'
+import {
+	assert,
+	atom,
+	Editor,
+	tlenvReactive,
+	uniqueId,
+	useMaybeEditor,
+	useValue,
+} from '@tldraw/editor'
 import { Tooltip as _Tooltip } from 'radix-ui'
 import React, {
 	createContext,
@@ -6,7 +14,6 @@ import React, {
 	ReactNode,
 	useContext,
 	useEffect,
-	useLayoutEffect,
 	useRef,
 	useState,
 } from 'react'
@@ -25,7 +32,7 @@ export interface TldrawUiTooltipProps {
 	delayDuration?: number
 }
 
-interface CurrentTooltip {
+interface TooltipData {
 	id: string
 	content: ReactNode
 	side: 'top' | 'right' | 'bottom' | 'left'
@@ -35,11 +42,25 @@ interface CurrentTooltip {
 	delayDuration: number
 }
 
-// Singleton tooltip manager
+// State machine states
+type TooltipState =
+	| { name: 'idle' }
+	| { name: 'pointer_down' }
+	| { name: 'showing'; tooltip: TooltipData }
+	| { name: 'waiting_to_hide'; tooltip: TooltipData; timeoutId: number }
+
+// State machine events
+type TooltipEvent =
+	| { type: 'pointer_down' }
+	| { type: 'pointer_up' }
+	| { type: 'show'; tooltip: TooltipData }
+	| { type: 'hide'; tooltipId: string; editor: Editor | null; instant: boolean }
+	| { type: 'hide_all' }
+
+// Singleton tooltip manager using explicit state machine
 class TooltipManager {
 	private static instance: TooltipManager | null = null
-	private currentTooltip = atom<CurrentTooltip | null>('current tooltip', null)
-	private destroyTimeoutId: number | null = null
+	private state = atom<TooltipState>('tooltip state', { name: 'idle' })
 
 	static getInstance(): TooltipManager {
 		if (!TooltipManager.instance) {
@@ -48,86 +69,117 @@ class TooltipManager {
 		return TooltipManager.instance
 	}
 
-	showTooltip(
-		tooltipId: string,
-		content: string | React.ReactNode,
-		targetElement: HTMLElement,
-		side: 'top' | 'right' | 'bottom' | 'left',
-		sideOffset: number,
-		showOnMobile: boolean,
-		delayDuration: number
-	) {
-		// Clear any existing destroy timeout
-		if (this.destroyTimeoutId) {
-			clearTimeout(this.destroyTimeoutId)
-			this.destroyTimeoutId = null
-		}
-
-		// Update current tooltip
-		this.currentTooltip.set({
-			id: tooltipId,
-			content,
-			side,
-			sideOffset,
-			showOnMobile,
-			targetElement,
-			delayDuration,
-		})
+	hideAllTooltips() {
+		this.handleEvent({ type: 'hide_all' })
 	}
 
-	updateCurrentTooltip(tooltipId: string, update: (tooltip: CurrentTooltip) => CurrentTooltip) {
-		this.currentTooltip.update((tooltip) => {
-			if (tooltip?.id === tooltipId) {
-				return update(tooltip)
+	handleEvent(event: TooltipEvent) {
+		const currentState = this.state.get()
+
+		switch (event.type) {
+			case 'pointer_down': {
+				// Transition to pointer_down from any state
+				if (currentState.name === 'waiting_to_hide') {
+					clearTimeout(currentState.timeoutId)
+				}
+				this.state.set({ name: 'pointer_down' })
+				break
 			}
-			return tooltip
-		})
-	}
 
-	hideTooltip(editor: Editor | null, tooltipId: string, instant: boolean = false) {
-		const hide = () => {
-			// Only hide if this is the current tooltip
-			if (this.currentTooltip.get()?.id === tooltipId) {
-				this.currentTooltip.set(null)
-				this.destroyTimeoutId = null
+			case 'pointer_up': {
+				// Only transition from pointer_down to idle
+				if (currentState.name === 'pointer_down') {
+					this.state.set({ name: 'idle' })
+				}
+				break
 			}
-		}
 
-		if (editor && !instant) {
-			// Start destroy timeout (1 second)
-			this.destroyTimeoutId = editor.timers.setTimeout(hide, 300)
-		} else {
-			hide()
-		}
-	}
+			case 'show': {
+				// Don't show tooltips while pointer is down
+				if (currentState.name === 'pointer_down') {
+					return
+				}
 
-	hideAllTooltips() {
-		this.currentTooltip.set(null)
-		this.destroyTimeoutId = null
-	}
+				// Clear any existing timeout if transitioning from waiting_to_hide
+				if (currentState.name === 'waiting_to_hide') {
+					clearTimeout(currentState.timeoutId)
+				}
+
+				// Transition to showing state
+				this.state.set({ name: 'showing', tooltip: event.tooltip })
+				break
+			}
+
+			case 'hide': {
+				const { tooltipId, editor, instant } = event
+
+				// Only hide if the tooltip matches
+				if (currentState.name === 'showing' && currentState.tooltip.id === tooltipId) {
+					if (editor && !instant) {
+						// Transition to waiting_to_hide state
+						const timeoutId = editor.timers.setTimeout(() => {
+							const state = this.state.get()
+							if (state.name === 'waiting_to_hide' && state.tooltip.id === tooltipId) {
+								this.state.set({ name: 'idle' })
+							}
+						}, 300)
+						this.state.set({
+							name: 'waiting_to_hide',
+							tooltip: currentState.tooltip,
+							timeoutId,
+						})
+					} else {
+						this.state.set({ name: 'idle' })
+					}
+				} else if (
+					currentState.name === 'waiting_to_hide' &&
+					currentState.tooltip.id === tooltipId
+				) {
+					// Already waiting to hide, make it instant if requested
+					if (instant) {
+						clearTimeout(currentState.timeoutId)
+						this.state.set({ name: 'idle' })
+					}
+				}
+				break
+			}
 
-	getCurrentTooltipData() {
-		const currentTooltip = this.currentTooltip.get()
-		if (!currentTooltip) return null
-		if (!this.supportsHover() && !currentTooltip.showOnMobile) return null
-		return currentTooltip
+			case 'hide_all': {
+				if (currentState.name === 'waiting_to_hide') {
+					clearTimeout(currentState.timeoutId)
+				}
+				// Preserve pointer_down state if that's the current state
+				if (currentState.name === 'pointer_down') {
+					return
+				}
+				this.state.set({ name: 'idle' })
+				break
+			}
+		}
 	}
 
-	private supportsHoverAtom: Atom<boolean> | null = null
-	supportsHover() {
-		if (!this.supportsHoverAtom) {
-			const mediaQuery = window.matchMedia('(hover: hover)')
-			const supportsHover = atom('has hover', mediaQuery.matches)
-			this.supportsHoverAtom = supportsHover
-			mediaQuery.addEventListener('change', (e) => {
-				supportsHover.set(e.matches)
-			})
+	getCurrentTooltipData(): TooltipData | null {
+		const currentState = this.state.get()
+		let tooltip: TooltipData | null = null
+
+		if (currentState.name === 'showing') {
+			tooltip = currentState.tooltip
+		} else if (currentState.name === 'waiting_to_hide') {
+			tooltip = currentState.tooltip
 		}
-		return this.supportsHoverAtom.get()
+
+		if (!tooltip) return null
+		if (tlenvReactive.get().isCoarsePointer && !tooltip.showOnMobile) return null
+		return tooltip
 	}
 }
 
-export const tooltipManager = TooltipManager.getInstance()
+const tooltipManager = TooltipManager.getInstance()
+
+/** @public */
+export function hideAllTooltips() {
+	tooltipManager.hideAllTooltips()
+}
 
 // Context for the tooltip singleton
 const TooltipSingletonContext = createContext<boolean>(false)
@@ -167,14 +219,19 @@ function TooltipSingleton() {
 	// Hide tooltip when camera is moving (panning/zooming)
 	useEffect(() => {
 		if (cameraState === 'moving' && isOpen && currentTooltip) {
-			tooltipManager.hideTooltip(editor, currentTooltip.id, true)
+			tooltipManager.handleEvent({
+				type: 'hide',
+				tooltipId: currentTooltip.id,
+				editor,
+				instant: true,
+			})
 		}
 	}, [cameraState, isOpen, currentTooltip, editor])
 
 	useEffect(() => {
 		function handleKeyDown(event: KeyboardEvent) {
 			if (event.key === 'Escape' && currentTooltip && isOpen) {
-				tooltipManager.hideTooltip(editor, currentTooltip.id)
+				hideAllTooltips()
 				event.stopPropagation()
 			}
 		}
@@ -183,7 +240,29 @@ function TooltipSingleton() {
 		return () => {
 			document.removeEventListener('keydown', handleKeyDown, { capture: true })
 		}
-	}, [editor, currentTooltip, isOpen])
+	}, [currentTooltip, isOpen])
+
+	// Hide tooltip and prevent new ones from opening while pointer is down
+	useEffect(() => {
+		function handlePointerDown() {
+			tooltipManager.handleEvent({ type: 'pointer_down' })
+		}
+
+		function handlePointerUp() {
+			tooltipManager.handleEvent({ type: 'pointer_up' })
+		}
+
+		document.addEventListener('pointerdown', handlePointerDown, { capture: true })
+		document.addEventListener('pointerup', handlePointerUp, { capture: true })
+		document.addEventListener('pointercancel', handlePointerUp, { capture: true })
+		return () => {
+			document.removeEventListener('pointerdown', handlePointerDown, { capture: true })
+			document.removeEventListener('pointerup', handlePointerUp, { capture: true })
+			document.removeEventListener('pointercancel', handlePointerUp, { capture: true })
+			// Reset pointer state on unmount to prevent stuck state
+			tooltipManager.handleEvent({ type: 'pointer_up' })
+		}
+	}, [])
 
 	// Update open state and trigger position
 	useEffect(() => {
@@ -280,23 +359,16 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 			const currentTooltipId = tooltipId.current
 			return () => {
 				if (hasProvider) {
-					tooltipManager.hideTooltip(editor, currentTooltipId, true)
+					tooltipManager.handleEvent({
+						type: 'hide',
+						tooltipId: currentTooltipId,
+						editor,
+						instant: true,
+					})
 				}
 			}
 		}, [editor, hasProvider])
 
-		useLayoutEffect(() => {
-			if (hasProvider && tooltipManager.getCurrentTooltipData()?.id === tooltipId.current) {
-				tooltipManager.updateCurrentTooltip(tooltipId.current, (tooltip) => ({
-					...tooltip,
-					content,
-					side: sideToUse,
-					sideOffset,
-					showOnMobile,
-				}))
-			}
-		}, [content, sideToUse, sideOffset, showOnMobile, hasProvider])
-
 		// Don't show tooltip if disabled, no content, or enhanced accessibility mode is disabled
 		if (disabled || !content) {
 			return <>{children}</>
@@ -340,38 +412,54 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 
 		const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
 			child.props.onMouseEnter?.(event)
-			tooltipManager.showTooltip(
-				tooltipId.current,
-				content,
-				event.currentTarget as HTMLElement,
-				sideToUse,
-				sideOffset,
-				showOnMobile,
-				delayDurationToUse
-			)
+			tooltipManager.handleEvent({
+				type: 'show',
+				tooltip: {
+					id: tooltipId.current,
+					content,
+					targetElement: event.currentTarget as HTMLElement,
+					side: sideToUse,
+					sideOffset,
+					showOnMobile,
+					delayDuration: delayDurationToUse,
+				},
+			})
 		}
 
 		const handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {
 			child.props.onMouseLeave?.(event)
-			tooltipManager.hideTooltip(editor, tooltipId.current)
+			tooltipManager.handleEvent({
+				type: 'hide',
+				tooltipId: tooltipId.current,
+				editor,
+				instant: false,
+			})
 		}
 
 		const handleFocus = (event: React.FocusEvent<HTMLElement>) => {
 			child.props.onFocus?.(event)
-			tooltipManager.showTooltip(
-				tooltipId.current,
-				content,
-				event.currentTarget as HTMLElement,
-				sideToUse,
-				sideOffset,
-				showOnMobile,
-				delayDurationToUse
-			)
+			tooltipManager.handleEvent({
+				type: 'show',
+				tooltip: {
+					id: tooltipId.current,
+					content,
+					targetElement: event.currentTarget as HTMLElement,
+					side: sideToUse,
+					sideOffset,
+					showOnMobile,
+					delayDuration: delayDurationToUse,
+				},
+			})
 		}
 
 		const handleBlur = (event: React.FocusEvent<HTMLElement>) => {
 			child.props.onBlur?.(event)
-			tooltipManager.hideTooltip(editor, tooltipId.current)
+			tooltipManager.handleEvent({
+				type: 'hide',
+				tooltipId: tooltipId.current,
+				editor,
+				instant: false,
+			})
 		}
 
 		const childrenWithHandlers = React.cloneElement(children as React.ReactElement, {

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 { tooltipManager } from '../TldrawUiTooltip'
+import { hideAllTooltips } from '../TldrawUiTooltip'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
 /** @public */
@@ -350,7 +350,7 @@ function useDraggableEvents(
 							point: screenSpaceStart,
 						})
 
-						tooltipManager.hideAllTooltips()
+						hideAllTooltips()
 						editor.getContainer().focus()
 					})
 				}

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

@@ -6,10 +6,7 @@ import {
 	HALF_PI,
 	PageRecordType,
 	Result,
-	TLBookmarkShape,
 	TLEmbedShape,
-	TLFrameShape,
-	TLGroupShape,
 	TLImageShape,
 	TLShape,
 	TLShapeId,
@@ -327,7 +324,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 							.getSelectedShapes()
 							.filter(
 								(shape): shape is TLTextShape =>
-									editor.isShapeOfType<TLTextShape>(shape, 'text') && shape.props.autoSize === false
+									editor.isShapeOfType(shape, 'text') && shape.props.autoSize === false
 							)
 						editor.updateShapes(
 							shapes.map((shape) => {
@@ -362,7 +359,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 						return
 					}
 					const shape = editor.getShape(ids[0])
-					if (!shape || !editor.isShapeOfType<TLEmbedShape>(shape, 'embed')) {
+					if (!shape || !editor.isShapeOfType(shape, 'embed')) {
 						console.error(warnMsg)
 						return
 					}
@@ -401,8 +398,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					const creationPromises: Promise<Result<any, any>>[] = []
 
 					for (const shape of shapes) {
-						if (!shape || !editor.isShapeOfType<TLEmbedShape>(shape, 'embed') || !shape.props.url)
-							continue
+						if (!shape || !editor.isShapeOfType(shape, 'embed') || !shape.props.url) continue
 
 						const center = editor.getShapePageBounds(shape)?.center
 
@@ -441,7 +437,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 						const createList: TLShapePartial[] = []
 						const deleteList: TLShapeId[] = []
 						for (const shape of shapes) {
-							if (!editor.isShapeOfType<TLBookmarkShape>(shape, 'bookmark')) continue
+							if (!editor.isShapeOfType(shape, 'bookmark')) continue
 
 							const { url } = shape.props
 
@@ -552,7 +548,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 
 					trackEvent('group-shapes', { source })
 					const onlySelectedShape = editor.getOnlySelectedShape()
-					if (onlySelectedShape && editor.isShapeOfType<TLGroupShape>(onlySelectedShape, 'group')) {
+					if (onlySelectedShape && editor.isShapeOfType(onlySelectedShape, 'group')) {
 						editor.markHistoryStoppingPoint('ungroup')
 						editor.ungroupShapes(editor.getSelectedShapeIds())
 					} else {
@@ -572,7 +568,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					const selectedShapes = editor.getSelectedShapes()
 					if (
 						selectedShapes.length > 0 &&
-						selectedShapes.every((shape) => editor.isShapeOfType<TLFrameShape>(shape, 'frame'))
+						selectedShapes.every((shape) => editor.isShapeOfType(shape, 'frame'))
 					) {
 						editor.markHistoryStoppingPoint('remove-frame')
 						removeFrame(
@@ -590,7 +586,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 
 					trackEvent('fit-frame-to-content', { source })
 					const onlySelectedShape = editor.getOnlySelectedShape()
-					if (onlySelectedShape && editor.isShapeOfType<TLFrameShape>(onlySelectedShape, 'frame')) {
+					if (onlySelectedShape && editor.isShapeOfType(onlySelectedShape, 'frame')) {
 						editor.markHistoryStoppingPoint('fit-frame-to-content')
 						fitFrameToContent(editor, onlySelectedShape.id)
 					}
@@ -1599,8 +1595,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					const onlySelectedShape = editor.getOnlySelectedShape()
 					if (
 						onlySelectedShape &&
-						(editor.isShapeOfType<TLImageShape>(onlySelectedShape, 'image') ||
-							editor.isShapeOfType<TLVideoShape>(onlySelectedShape, 'video'))
+						(editor.isShapeOfType(onlySelectedShape, 'image') ||
+							editor.isShapeOfType(onlySelectedShape, 'video'))
 					) {
 						const firstToolbarButton = editor
 							.getContainer()

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

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

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

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