tldraw 4.2.2 → 4.2.3

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

@@ -16,7 +16,9 @@ export class PointingShape extends StateNode {
 		const selectedShapeIds = this.editor.getSelectedShapeIds()
 		const selectionBounds = this.editor.getSelectionRotatedPageBounds()
 		const focusedGroupId = this.editor.getFocusedGroupId()
-		const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
+		const {
+			inputs: { currentPagePoint },
+		} = this.editor
 		const { shiftKey, altKey, accelKey } = info
 
 		this.hitShape = info.shape
@@ -64,7 +66,9 @@ export class PointingShape extends StateNode {
 		const selectedShapeIds = this.editor.getSelectedShapeIds()
 		const focusedGroupId = this.editor.getFocusedGroupId()
 		const zoomLevel = this.editor.getZoomLevel()
-		const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
+		const {
+			inputs: { currentPagePoint },
+		} = this.editor
 
 		const additiveSelectionKey = info.shiftKey || info.accelKey
 
@@ -149,7 +153,13 @@ export class PointingShape extends StateNode {
 										this.editor.markHistoryStoppingPoint('editing on pointer up')
 										this.editor.select(selectingShape.id)
 
-										if (!this.editor.canEditShape(selectingShape)) return
+										const util = this.editor.getShapeUtil(selectingShape)
+										if (this.editor.getIsReadonly()) {
+											if (!util.canEditInReadonly(selectingShape)) {
+												return
+											}
+										}
+
 										this.editor.setEditingShape(selectingShape.id)
 										this.editor.setCurrentTool('select.editing_shape')
 
@@ -200,7 +210,7 @@ export class PointingShape extends StateNode {
 	}
 
 	override onPointerMove(info: TLPointerEventInfo) {
-		if (this.editor.inputs.getIsDragging()) {
+		if (this.editor.inputs.isDragging) {
 			if (isOverArrowLabel(this.editor, this.hitShape)) {
 				// We're moving the label on a shape.
 				this.parent.transition('pointing_arrow_label', { ...info, shape: this.hitShape })

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,
@@ -211,8 +213,7 @@ export class Resizing extends StateNode {
 	}
 
 	private updateShapes() {
-		const altKey = this.editor.inputs.getAltKey()
-		const shiftKey = this.editor.inputs.getShiftKey()
+		const { altKey, shiftKey } = this.editor.inputs
 		const {
 			frames,
 			shapeSnapshots,
@@ -227,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')
 			}
 		}
@@ -267,13 +268,12 @@ export class Resizing extends StateNode {
 
 		const isHoldingAccel = isAccelKey(this.editor.inputs)
 
-		const currentPagePoint = this.editor.inputs
-			.getCurrentPagePoint()
+		const currentPagePoint = this.editor.inputs.currentPagePoint
 			.clone()
 			.sub(cursorHandleOffset)
 			.sub(this.creationCursorOffset)
 
-		const originPagePoint = this.editor.inputs.getOriginPagePoint().clone().sub(cursorHandleOffset)
+		const originPagePoint = this.editor.inputs.originPagePoint.clone().sub(cursorHandleOffset)
 
 		if (this.editor.getInstanceState().isGridMode && !isHoldingAccel) {
 			const { gridSize } = this.editor.getDocumentSettings()
@@ -476,7 +476,9 @@ export class Resizing extends StateNode {
 		const { editor } = this
 		const selectedShapeIds = editor.getSelectedShapeIds()
 		const selectionRotation = editor.getSelectionRotation()
-		const originPagePoint = editor.inputs.getOriginPagePoint()
+		const {
+			inputs: { originPagePoint },
+		} = editor
 
 		const selectionBounds = editor.getSelectionRotatedPageBounds()
 		if (!selectionBounds) throw Error('Resizing but nothing is selected')
@@ -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(

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

@@ -163,8 +163,9 @@ export class Rotating extends StateNode {
 	}
 
 	_getRotationFromPointerPosition({ snapToNearestDegree }: { snapToNearestDegree: boolean }) {
-		const shiftKey = this.editor.inputs.getShiftKey()
-		const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
+		const {
+			inputs: { shiftKey, currentPagePoint },
+		} = this.editor
 		const { initialCursorAngle, initialShapesRotation, initialPageCenter } = this.snapshot
 
 		// The delta is the difference between the current angle and the initial angle

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

@@ -1,6 +1,8 @@
 import {
 	Geometry2d,
 	StateNode,
+	TLFrameShape,
+	TLGroupShape,
 	TLShape,
 	TLShapeId,
 	Vec,
@@ -22,7 +24,7 @@ export class ScribbleBrushing extends StateNode {
 
 	override onEnter() {
 		this.initialSelectedShapeIds = new Set<TLShapeId>(
-			this.editor.inputs.getShiftKey() ? this.editor.getSelectedShapeIds() : []
+			this.editor.inputs.shiftKey ? this.editor.getSelectedShapeIds() : []
 		)
 		this.newlySelectedShapeIds = new Set<TLShapeId>()
 		this.size = 0
@@ -58,7 +60,7 @@ export class ScribbleBrushing extends StateNode {
 	}
 
 	override onKeyUp() {
-		if (!this.editor.inputs.getAltKey()) {
+		if (!this.editor.inputs.altKey) {
 			this.parent.transition('brushing')
 		} else {
 			this.updateScribbleSelection(false)
@@ -74,7 +76,7 @@ export class ScribbleBrushing extends StateNode {
 	}
 
 	private pushPointToScribble() {
-		const { x, y } = this.editor.inputs.getCurrentPagePoint()
+		const { x, y } = this.editor.inputs.currentPagePoint
 		this.editor.scribbles.addPoint(this.scribbleId, x, y)
 	}
 
@@ -82,10 +84,9 @@ export class ScribbleBrushing extends StateNode {
 		const { editor } = this
 		// const zoomLevel = this.editor.getZoomLevel()
 		const currentPageShapes = this.editor.getCurrentPageRenderingShapesSorted()
-		const shiftKey = this.editor.inputs.getShiftKey()
-		const originPagePoint = this.editor.inputs.getOriginPagePoint()
-		const previousPagePoint = this.editor.inputs.getPreviousPagePoint()
-		const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
+		const {
+			inputs: { shiftKey, originPagePoint, previousPagePoint, currentPagePoint },
+		} = this.editor
 
 		const { newlySelectedShapeIds, initialSelectedShapeIds } = this
 
@@ -103,7 +104,7 @@ export class ScribbleBrushing extends StateNode {
 
 			// If the shape is a group or is already selected or locked, don't select it
 			if (
-				editor.isShapeOfType(shape, 'group') ||
+				editor.isShapeOfType<TLGroupShape>(shape, 'group') ||
 				newlySelectedShapeIds.has(shape.id) ||
 				editor.isShapeOrAncestorLocked(shape)
 			) {
@@ -114,7 +115,7 @@ export class ScribbleBrushing extends StateNode {
 
 			// If the scribble started inside of the frame, don't select it
 			if (
-				editor.isShapeOfType(shape, 'frame') &&
+				editor.isShapeOfType<TLFrameShape>(shape, 'frame') &&
 				geometry.bounds.containsPoint(editor.getPointInShapeSpace(shape, originPagePoint))
 			) {
 				continue

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

@@ -92,7 +92,7 @@ export class Translating extends StateNode {
 
 		// Don't clone on create; otherwise clone on altKey
 		if (!this.isCreating) {
-			if (this.editor.inputs.getAltKey()) {
+			if (this.editor.inputs.altKey) {
 				this.startCloning()
 				if (this.isCloning) return
 			}
@@ -122,7 +122,7 @@ export class Translating extends StateNode {
 	}
 
 	override onKeyDown() {
-		if (this.editor.inputs.getAltKey() && !this.isCloning) {
+		if (this.editor.inputs.altKey && !this.isCloning) {
 			this.startCloning()
 			if (this.isCloning) return
 		}
@@ -132,7 +132,7 @@ export class Translating extends StateNode {
 	}
 
 	override onKeyUp() {
-		if (!this.editor.inputs.getAltKey() && this.isCloning) {
+		if (!this.editor.inputs.altKey && this.isCloning) {
 			this.stopCloning()
 			return
 		}
@@ -258,7 +258,7 @@ export class Translating extends StateNode {
 			// Get fresh shapes from the snapshot, in case onTranslateStart mutates the shape
 			compact(this.snapshot.movingShapes.map((s) => this.editor.getShape(s.id))),
 			// Start from the place where the user started dragging
-			this.editor.inputs.getOriginPagePoint(),
+			this.editor.inputs.originPagePoint,
 			this.updateParentTransforms
 		)
 
@@ -305,7 +305,7 @@ export class Translating extends StateNode {
 		// We should have started already, but hey
 		this.dragAndDropManager.startDraggingShapes(
 			snapshot.movingShapes,
-			this.editor.inputs.getOriginPagePoint(),
+			this.editor.inputs.originPagePoint,
 			this.updateParentTransforms
 		)
 
@@ -404,10 +404,12 @@ function getTranslatingSnapshot(editor: Editor) {
 	let noteAdjacentPositions: Vec[] | undefined
 	let noteSnapshot: (MovingShapeSnapshot & { shape: TLNoteShape }) | undefined
 
-	const originPagePoint = editor.inputs.getOriginPagePoint()
+	const { originPagePoint } = editor.inputs
 
 	const allHoveredNotes = shapeSnapshots.filter(
-		(s) => editor.isShapeOfType(s.shape, 'note') && editor.isPointInShape(s.shape, originPagePoint)
+		(s) =>
+			editor.isShapeOfType<TLNoteShape>(s.shape, 'note') &&
+			editor.isPointInShape(s.shape, originPagePoint)
 	) as (MovingShapeSnapshot & { shape: TLNoteShape })[]
 
 	if (allHoveredNotes.length === 0) {
@@ -473,16 +475,13 @@ export function moveShapesToPoint({
 		averagePagePoint,
 	} = snapshot
 
-	const shiftKey = editor.inputs.getShiftKey()
-	const accelKey = editor.inputs.getAccelKey()
-
 	const isGridMode = editor.getInstanceState().isGridMode
 
 	const gridSize = editor.getDocumentSettings().gridSize
 
-	const delta = Vec.Sub(inputs.getCurrentPagePoint(), inputs.getOriginPagePoint())
+	const delta = Vec.Sub(inputs.currentPagePoint, inputs.originPagePoint)
 
-	const flatten: 'x' | 'y' | null = shiftKey
+	const flatten: 'x' | 'y' | null = editor.inputs.shiftKey
 		? Math.abs(delta.x) < Math.abs(delta.y)
 			? 'x'
 			: 'y'
@@ -498,9 +497,9 @@ export function moveShapesToPoint({
 	editor.snaps.clearIndicators()
 
 	// If the user isn't moving super quick
-	const isSnapping = editor.user.getIsSnapMode() ? !accelKey : accelKey
+	const isSnapping = editor.user.getIsSnapMode() ? !inputs.ctrlKey : inputs.ctrlKey
 	let snappedToPit = false
-	if (isSnapping && editor.inputs.getPointerVelocity().len() < 0.5) {
+	if (isSnapping && editor.inputs.pointerVelocity.len() < 0.5) {
 		// snapping
 		const { nudge } = editor.snaps.shapeBounds.snapTranslateShapes({
 			dragDelta: delta,
@@ -540,9 +539,9 @@ export function moveShapesToPoint({
 
 	const averageSnappedPoint = Vec.Add(averagePagePoint, delta)
 
-	// we don't want to snap to the grid if we're holding the accel key, if we've already snapped into a pit, or if we're showing snapping indicators
+	// we don't want to snap to the grid if we're holding the ctrl key, if we've already snapped into a pit, or if we're showing snapping indicators
 	const snapIndicators = editor.snaps.getIndicators()
-	if (isGridMode && !accelKey && !snappedToPit && snapIndicators.length === 0) {
+	if (isGridMode && !inputs.ctrlKey && !snappedToPit && snapIndicators.length === 0) {
 		averageSnappedPoint.snapToGrid(gridSize)
 	}
 

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

@@ -1,50 +1,15 @@
-import {
-	Editor,
-	ExtractShapeByProps,
-	richTextValidator,
-	TLEventInfo,
-	TLRichText,
-	TLShape,
-	TLShapeId,
-} from '@tldraw/editor'
+import { Editor, TLShape } from '@tldraw/editor'
 
 /** @internal */
-export function hasRichText(
-	shape: TLShape
-): shape is ExtractShapeByProps<{ richText: TLRichText }> {
-	return 'richText' in shape.props && richTextValidator.isValid(shape.props.richText)
-}
-/**
- * Start editing a shape that has rich text, such as text, note, geo, or arrow shapes.
- * This will enter the editing state for the shape and optionally select all the text.
- *
- * @param editor - The editor instance.
- * @param shapeOrId - The shape to start editing. This shape must have a richText property with a TLRichText value.
- * @param options - Options: selectAll or info (TLEventInfo)
- *
- * @public
- */
-export function startEditingShapeWithRichText(
-	editor: Editor,
-	shapeOrId: TLShape | TLShapeId,
-	options: { selectAll?: boolean; info?: TLEventInfo } = {}
-) {
-	const shape = typeof shapeOrId === 'string' ? editor.getShape(shapeOrId) : shapeOrId
-	if (!shape) return
-
-	if (!editor.canEditShape(shape)) return
-
-	if (!hasRichText(shape)) {
-		throw new Error('Shape does not have rich text')
-	}
+export function startEditingShapeWithLabel(editor: Editor, shape: TLShape, selectAll = false) {
 	// Finish this shape and start editing the next one
+	editor.select(shape)
 	editor.setEditingShape(shape)
 	editor.setCurrentTool('select.editing_shape', {
-		...options.info,
 		target: 'shape',
 		shape: shape,
 	})
-	if (options.selectAll) {
+	if (selectAll) {
 		editor.emit('select-all-text', { shapeId: shape.id })
 	}
 }

package/src/lib/tools/ZoomTool/ZoomTool.ts

@@ -57,7 +57,7 @@ export class ZoomTool extends StateNode {
 	}
 
 	private updateCursor() {
-		if (this.editor.inputs.getAltKey()) {
+		if (this.editor.inputs.altKey) {
 			this.editor.setCursor({ type: 'zoom-out', rotation: 0 })
 		} else {
 			this.editor.setCursor({ type: 'zoom-in', rotation: 0 })

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

@@ -14,7 +14,7 @@ export class Pointing extends StateNode {
 	}
 
 	override onPointerMove() {
-		if (this.editor.inputs.getIsDragging()) {
+		if (this.editor.inputs.isDragging) {
 			this.parent.transition('zoom_brushing', this.info)
 		}
 	}
@@ -24,8 +24,8 @@ export class Pointing extends StateNode {
 	}
 
 	private complete() {
-		const currentScreenPoint = this.editor.inputs.getCurrentScreenPoint()
-		if (this.editor.inputs.getAltKey()) {
+		const { currentScreenPoint } = this.editor.inputs
+		if (this.editor.inputs.altKey) {
 			this.editor.zoomOut(currentScreenPoint, { animation: { duration: 220 } })
 		} else {
 			this.editor.zoomIn(currentScreenPoint, { animation: { duration: 220 } })

package/src/lib/tools/ZoomTool/childStates/ZoomBrushing.ts

@@ -29,8 +29,9 @@ export class ZoomBrushing extends StateNode {
 	}
 
 	private update() {
-		const originPagePoint = this.editor.inputs.getOriginPagePoint()
-		const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
+		const {
+			inputs: { originPagePoint, currentPagePoint },
+		} = this.editor
 
 		this.zoomBrush.setTo(Box.FromPoints([originPagePoint, currentPagePoint]))
 		this.editor.updateInstanceState({ zoomBrush: this.zoomBrush.toJson() })
@@ -45,14 +46,14 @@ export class ZoomBrushing extends StateNode {
 		const threshold = 8 / this.editor.getZoomLevel()
 		// If the selected area is small then treat it as a click
 		if (zoomBrush.width < threshold && zoomBrush.height < threshold) {
-			const point = this.editor.inputs.getCurrentScreenPoint()
-			if (this.editor.inputs.getAltKey()) {
+			const point = this.editor.inputs.currentScreenPoint
+			if (this.editor.inputs.altKey) {
 				this.editor.zoomOut(point, { animation: { duration: 220 } })
 			} else {
 				this.editor.zoomIn(point, { animation: { duration: 220 } })
 			}
 		} else {
-			const targetZoom = this.editor.inputs.getAltKey() ? this.editor.getZoomLevel() / 2 : undefined
+			const targetZoom = this.editor.inputs.altKey ? this.editor.getZoomLevel() / 2 : undefined
 			this.editor.zoomToBounds(zoomBrush, { targetZoom, animation: { duration: 220 } })
 		}
 

package/src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts

@@ -6,7 +6,9 @@ export function getHitShapeOnCanvasPointerDown(
 	hitLabels = false
 ): TLShape | undefined {
 	const zoomLevel = editor.getZoomLevel()
-	const currentPagePoint = editor.inputs.getCurrentPagePoint()
+	const {
+		inputs: { currentPagePoint },
+	} = editor
 
 	return (
 		// hovered shape at point

package/src/lib/tools/selection-logic/getShouldEnterCropModeOnPointerDown.ts

@@ -0,0 +1,10 @@
+import { Editor } from '@tldraw/editor'
+
+export function getShouldEnterCropMode(editor: Editor): boolean {
+	const onlySelectedShape = editor.getOnlySelectedShape()
+	return !!(
+		onlySelectedShape &&
+		!editor.isShapeOrAncestorLocked(onlySelectedShape) &&
+		editor.getShapeUtil(onlySelectedShape).canCrop(onlySelectedShape)
+	)
+}

package/src/lib/tools/selection-logic/selectOnCanvasPointerUp.ts

@@ -5,7 +5,7 @@ export function selectOnCanvasPointerUp(
 	info: TLPointerEventInfo | TLClickEventInfo
 ) {
 	const selectedShapeIds = editor.getSelectedShapeIds()
-	const currentPagePoint = editor.inputs.getCurrentPagePoint()
+	const { currentPagePoint } = editor.inputs
 	const { shiftKey, altKey, accelKey } = info
 	const additiveSelectionKey = shiftKey || accelKey
 

package/src/lib/tools/selection-logic/updateHoveredShapeId.ts

@@ -2,7 +2,7 @@ import { Editor, TLShape, throttle } from '@tldraw/editor'
 
 function _updateHoveredShapeId(editor: Editor) {
 	// todo: consider replacing `get hoveredShapeId` with this; it would mean keeping hoveredShapeId in memory rather than in the store and possibly re-computing it more often than necessary
-	const hitShape = editor.getShapeAtPoint(editor.inputs.getCurrentPagePoint(), {
+	const hitShape = editor.getShapeAtPoint(editor.inputs.currentPagePoint, {
 		hitInside: false,
 		hitLabels: false,
 		margin: editor.options.hitTestMargin / editor.getZoomLevel(),

package/src/lib/ui/TldrawUi.tsx

@@ -81,11 +81,6 @@ const TldrawUiInner = React.memo(function TldrawUiInner({
 	// If we ever need want the UI to mount and preserve state, then
 	// we should change this behavior and hide the UI via CSS instead.
 
-	// Keyboard shortcuts and clipboard events should always be mounted,
-	// even when the UI is hidden.
-	useKeyboardShortcuts()
-	useNativeClipboardEvents()
-
 	return (
 		<>
 			{children}
@@ -117,6 +112,8 @@ const TldrawUiContent = React.memo(function TldrawUI() {
 		A11y,
 	} = useTldrawUiComponents()
 
+	useKeyboardShortcuts()
+	useNativeClipboardEvents()
 	useEditorEvents()
 
 	const rIsEditingAnything = useRef(false)

package/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx

@@ -1,3 +1,4 @@
+import { useEditor, useValue } from '@tldraw/editor'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import {
@@ -8,7 +9,6 @@ import {
 	useThreeStackableItems,
 	useUnlockedSelectedShapesCount,
 } from '../../hooks/menu-hooks'
-import { ZoomTo100MenuItem } from '../menu-items'
 import { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'
 
 /** @public @react */
@@ -99,6 +99,14 @@ export function ZoomOrRotateMenuItem() {
 }
 /** @public @react */
 
+export function ZoomTo100MenuItem() {
+	const editor = useEditor()
+	const isZoomedTo100 = useValue('zoom is 1', () => editor.getZoomLevel() === 1, [editor])
+
+	return <TldrawUiMenuActionItem actionId="zoom-to-100" disabled={isZoomedTo100} />
+}
+/** @public @react */
+
 export function RotateCCWMenuItem() {
 	const oneSelected = useUnlockedSelectedShapesCount(1)
 	const isInSelectState = useIsInSelectState()

package/src/lib/ui/components/ContextMenu/DefaultContextMenu.tsx

@@ -66,7 +66,9 @@ export const DefaultContextMenu = memo(function DefaultContextMenu({
 				// Weird route: selecting locked shapes on long press
 				if (editor.getInstanceState().isCoarsePointer) {
 					const selectedShapes = editor.getSelectedShapes()
-					const currentPagePoint = editor.inputs.getCurrentPagePoint()
+					const {
+						inputs: { currentPagePoint },
+					} = editor
 
 					// get all of the shapes under the current pointer
 					const shapesAtPoint = editor.getShapesAtPoint(currentPagePoint)

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

@@ -46,14 +46,14 @@ export const CursorChatBubble = track(function CursorChatBubble() {
 	return chatMessage.trim() ? <NotEditingChatMessage chatMessage={chatMessage} /> : null
 })
 
-function usePositionBubble(ref: RefObject<HTMLInputElement | null>) {
+function usePositionBubble(ref: RefObject<HTMLInputElement>) {
 	const editor = useEditor()
 
 	useLayoutEffect(() => {
 		const elm = ref.current
 		if (!elm) return
 
-		const { x, y } = editor.inputs.getCurrentScreenPoint()
+		const { x, y } = editor.inputs.currentScreenPoint
 		ref.current?.style.setProperty('transform', `translate(${x}px, ${y}px)`)
 
 		// Positioning the chat bubble

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

@@ -1,5 +1,12 @@
-import { debugFlags, track, useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'
-import { memo, useEffect, useRef } from 'react'
+import {
+	debugFlags,
+	track,
+	useEditor,
+	usePassThroughWheelEvents,
+	useValue,
+	Vec,
+} from '@tldraw/editor'
+import { memo, useEffect, useRef, useState } from 'react'
 import { useTldrawUiComponents } from '../context/components'
 
 /** @internal */
@@ -18,10 +25,42 @@ export const DefaultDebugPanel = memo(function DefaultDebugPanel() {
 	)
 })
 
+function useTick(isEnabled = true) {
+	const [_, setTick] = useState(0)
+	const editor = useEditor()
+	useEffect(() => {
+		if (!isEnabled) return
+		const update = () => setTick((tick) => tick + 1)
+		editor.on('tick', update)
+		return () => {
+			editor.off('tick', update)
+		}
+	}, [editor, isEnabled])
+}
+
 const CurrentState = track(function CurrentState() {
+	useTick()
+
 	const editor = useEditor()
+
 	const path = editor.getPath()
-	return <div className="tlui-debug-panel__current-state">{`${path}`}</div>
+	const hoverShape = editor.getHoveredShape()
+	const selectedShape = editor.getOnlySelectedShape()
+	const shape = path === 'select.idle' || !path.includes('select.') ? hoverShape : selectedShape
+	const shapeInfo =
+		shape && path.includes('select.')
+			? ` / ${shape.type || ''}${
+					'geo' in shape.props ? ' / ' + shape.props.geo : ''
+				} / [${Vec.ToInt(editor.getPointInShapeSpace(shape, editor.inputs.currentPagePoint))}]`
+			: ''
+	const ruler =
+		path.startsWith('select.') && !path.includes('.idle')
+			? ` / [${Vec.ToInt(editor.inputs.originPagePoint)}] → [${Vec.ToInt(
+					editor.inputs.currentPagePoint
+				)}] = ${Vec.Dist(editor.inputs.originPagePoint, editor.inputs.currentPagePoint).toFixed(0)}`
+			: ''
+
+	return <div className="tlui-debug-panel__current-state">{`${path}${shapeInfo}${ruler}`}</div>
 })
 
 function FPS() {

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

@@ -1,4 +1,4 @@
-import { ExtractShapeByProps, T, TLShape, track, useEditor } from '@tldraw/editor'
+import { T, TLBaseShape, track, useEditor } from '@tldraw/editor'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { TLUiDialogProps } from '../context/dialogs'
 import { useTranslation } from '../hooks/useTranslation/useTranslation'
@@ -25,28 +25,20 @@ function validateUrl(url: string) {
 	return { isValid: false, hasProtocol: false }
 }
 
-type ShapeWithUrl = ExtractShapeByProps<{ url: string }>
-
-function isShapeWithUrl(shape: TLShape | null | undefined): shape is ShapeWithUrl {
-	return !!(shape && 'url' in shape.props && typeof shape.props.url === 'string')
-}
-
-function assertShapeWithUrl(shape: TLShape | null | undefined): asserts shape is ShapeWithUrl {
-	if (!isShapeWithUrl(shape)) {
-		throw new Error('Shape is not a valid ShapeWithUrl')
-	}
-}
+type ShapeWithUrl = TLBaseShape<string, { url: string }>
 
 export const EditLinkDialog = track(function EditLinkDialog({ onClose }: TLUiDialogProps) {
 	const editor = useEditor()
 
 	const selectedShape = editor.getOnlySelectedShape()
 
-	if (!isShapeWithUrl(selectedShape)) {
+	if (
+		!(selectedShape && 'url' in selectedShape.props && typeof selectedShape.props.url === 'string')
+	) {
 		return null
 	}
 
-	return <EditLinkDialogInner onClose={onClose} selectedShape={selectedShape} />
+	return <EditLinkDialogInner onClose={onClose} selectedShape={selectedShape as ShapeWithUrl} />
 })
 
 export const EditLinkDialogInner = track(function EditLinkDialogInner({
@@ -106,7 +98,6 @@ export const EditLinkDialogInner = track(function EditLinkDialogInner({
 	const handleClear = useCallback(() => {
 		const onlySelectedShape = editor.getOnlySelectedShape()
 		if (!onlySelectedShape) return
-		assertShapeWithUrl(onlySelectedShape)
 		editor.updateShapes([
 			{ id: onlySelectedShape.id, type: onlySelectedShape.type, props: { url: '' } },
 		])
@@ -117,7 +108,6 @@ export const EditLinkDialogInner = track(function EditLinkDialogInner({
 		const onlySelectedShape = editor.getOnlySelectedShape()
 
 		if (!onlySelectedShape) return
-		assertShapeWithUrl(onlySelectedShape)
 
 		// ? URL is a magic value
 		if (onlySelectedShape && 'url' in onlySelectedShape.props) {

package/src/lib/ui/components/HelperButtons/StopFollowing.tsx

@@ -1,6 +1,6 @@
 import { useEditor, useValue } from '@tldraw/editor'
 import { useActions } from '../../context/actions'
-import { TldrawUiMenuItem, type TLUiMenuItemProps } from '../primitives/menus/TldrawUiMenuItem'
+import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
 
 export function StopFollowing() {
 	const editor = useEditor()
@@ -13,5 +13,5 @@ export function StopFollowing() {
 	)
 	if (!followingUser) return null
 
-	return <TldrawUiMenuItem {...(actions['stop-following'] as TLUiMenuItemProps)} />
+	return <TldrawUiMenuItem {...actions['stop-following']} />
 }