tldraw 4.3.0-canary.9c474ef3fad5 → 4.3.0-canary.a2419250444e

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

@@ -6,7 +6,7 @@ import {
 	getNoteAdjacentPositions,
 	getNoteShapeForAdjacentPosition,
 } from '../../../shapes/note/noteHelpers'
-import { startEditingShapeWithLabel } from '../selectHelpers'
+import { startEditingShapeWithRichText } from '../selectHelpers'
 
 export class PointingHandle extends StateNode {
 	static override id = 'pointing_handle'
@@ -54,7 +54,7 @@ export class PointingHandle extends StateNode {
 			const { editor } = this
 			const nextNote = getNoteForAdjacentPosition(editor, shape, handle, false)
 			if (nextNote) {
-				startEditingShapeWithLabel(editor, nextNote, true /* selectAll */)
+				startEditingShapeWithRichText(editor, nextNote, { selectAll: true })
 				return
 			}
 		}
@@ -64,7 +64,7 @@ export class PointingHandle extends StateNode {
 
 	override onPointerMove(info: TLPointerEventInfo) {
 		const { editor } = this
-		if (editor.inputs.isDragging) {
+		if (editor.inputs.getIsDragging()) {
 			if (this.didCtrlOnEnter) {
 				this.parent.transition('brushing', info)
 			} else {
@@ -87,7 +87,7 @@ export class PointingHandle extends StateNode {
 			if (nextNote) {
 				// Center the shape on the current pointer
 				const centeredOnPointer = editor
-					.getPointInParentSpace(nextNote, editor.inputs.originPagePoint)
+					.getPointInParentSpace(nextNote, editor.inputs.getOriginPagePoint())
 					.sub(Vec.Rot(NOTE_CENTER_OFFSET.clone().mul(shape.props.scale), nextNote.rotation))
 				editor.updateShape({ ...nextNote, x: centeredOnPointer.x, y: centeredOnPointer.y })
 
@@ -103,7 +103,7 @@ export class PointingHandle extends StateNode {
 						isCreating: true,
 						onCreate: () => {
 							// When we're done, start editing it
-							startEditingShapeWithLabel(editor, nextNote, true /* selectAll */)
+							startEditingShapeWithRichText(editor, nextNote, { selectAll: true })
 						},
 					})
 				return

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

@@ -47,7 +47,7 @@ export class PointingResizeHandle extends StateNode {
 	}
 
 	override onPointerMove() {
-		if (this.editor.inputs.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			this.startResizing()
 		}
 	}

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

@@ -31,7 +31,7 @@ export class PointingRotateHandle extends StateNode {
 	}
 
 	override onPointerMove() {
-		if (this.editor.inputs.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			this.startRotating()
 		}
 	}

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

@@ -18,7 +18,7 @@ export class PointingSelection extends StateNode {
 	}
 
 	override onPointerMove(info: TLPointerEventInfo) {
-		if (this.editor.inputs.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			this.startTranslating(info)
 		}
 	}
@@ -37,7 +37,7 @@ export class PointingSelection extends StateNode {
 		const hitShape =
 			hoveredShape && !this.editor.isShapeOfType(hoveredShape, 'group')
 				? hoveredShape
-				: this.editor.getShapeAtPoint(this.editor.inputs.currentPagePoint, {
+				: this.editor.getShapeAtPoint(this.editor.inputs.getCurrentPagePoint(), {
 						hitInside: true,
 						margin: 0,
 						renderingOnly: true,

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

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

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

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

@@ -163,9 +163,8 @@ export class Rotating extends StateNode {
 	}
 
 	_getRotationFromPointerPosition({ snapToNearestDegree }: { snapToNearestDegree: boolean }) {
-		const {
-			inputs: { shiftKey, currentPagePoint },
-		} = this.editor
+		const shiftKey = this.editor.inputs.getShiftKey()
+		const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
 		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

@@ -22,7 +22,7 @@ export class ScribbleBrushing extends StateNode {
 
 	override onEnter() {
 		this.initialSelectedShapeIds = new Set<TLShapeId>(
-			this.editor.inputs.shiftKey ? this.editor.getSelectedShapeIds() : []
+			this.editor.inputs.getShiftKey() ? this.editor.getSelectedShapeIds() : []
 		)
 		this.newlySelectedShapeIds = new Set<TLShapeId>()
 		this.size = 0
@@ -58,7 +58,7 @@ export class ScribbleBrushing extends StateNode {
 	}
 
 	override onKeyUp() {
-		if (!this.editor.inputs.altKey) {
+		if (!this.editor.inputs.getAltKey()) {
 			this.parent.transition('brushing')
 		} else {
 			this.updateScribbleSelection(false)
@@ -74,7 +74,7 @@ export class ScribbleBrushing extends StateNode {
 	}
 
 	private pushPointToScribble() {
-		const { x, y } = this.editor.inputs.currentPagePoint
+		const { x, y } = this.editor.inputs.getCurrentPagePoint()
 		this.editor.scribbles.addPoint(this.scribbleId, x, y)
 	}
 
@@ -82,9 +82,10 @@ export class ScribbleBrushing extends StateNode {
 		const { editor } = this
 		// const zoomLevel = this.editor.getZoomLevel()
 		const currentPageShapes = this.editor.getCurrentPageRenderingShapesSorted()
-		const {
-			inputs: { shiftKey, originPagePoint, previousPagePoint, currentPagePoint },
-		} = this.editor
+		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 { newlySelectedShapeIds, initialSelectedShapeIds } = this
 

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.altKey) {
+			if (this.editor.inputs.getAltKey()) {
 				this.startCloning()
 				if (this.isCloning) return
 			}
@@ -122,7 +122,7 @@ export class Translating extends StateNode {
 	}
 
 	override onKeyDown() {
-		if (this.editor.inputs.altKey && !this.isCloning) {
+		if (this.editor.inputs.getAltKey() && !this.isCloning) {
 			this.startCloning()
 			if (this.isCloning) return
 		}
@@ -132,7 +132,7 @@ export class Translating extends StateNode {
 	}
 
 	override onKeyUp() {
-		if (!this.editor.inputs.altKey && this.isCloning) {
+		if (!this.editor.inputs.getAltKey() && 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.originPagePoint,
+			this.editor.inputs.getOriginPagePoint(),
 			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.originPagePoint,
+			this.editor.inputs.getOriginPagePoint(),
 			this.updateParentTransforms
 		)
 
@@ -404,7 +404,7 @@ function getTranslatingSnapshot(editor: Editor) {
 	let noteAdjacentPositions: Vec[] | undefined
 	let noteSnapshot: (MovingShapeSnapshot & { shape: TLNoteShape }) | undefined
 
-	const { originPagePoint } = editor.inputs
+	const originPagePoint = editor.inputs.getOriginPagePoint()
 
 	const allHoveredNotes = shapeSnapshots.filter(
 		(s) => editor.isShapeOfType(s.shape, 'note') && editor.isPointInShape(s.shape, originPagePoint)
@@ -473,13 +473,16 @@ 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.currentPagePoint, inputs.originPagePoint)
+	const delta = Vec.Sub(inputs.getCurrentPagePoint(), inputs.getOriginPagePoint())
 
-	const flatten: 'x' | 'y' | null = editor.inputs.shiftKey
+	const flatten: 'x' | 'y' | null = shiftKey
 		? Math.abs(delta.x) < Math.abs(delta.y)
 			? 'x'
 			: 'y'
@@ -495,9 +498,9 @@ export function moveShapesToPoint({
 	editor.snaps.clearIndicators()
 
 	// If the user isn't moving super quick
-	const isSnapping = editor.user.getIsSnapMode() ? !inputs.ctrlKey : inputs.ctrlKey
+	const isSnapping = editor.user.getIsSnapMode() ? !accelKey : accelKey
 	let snappedToPit = false
-	if (isSnapping && editor.inputs.pointerVelocity.len() < 0.5) {
+	if (isSnapping && editor.inputs.getPointerVelocity().len() < 0.5) {
 		// snapping
 		const { nudge } = editor.snaps.shapeBounds.snapTranslateShapes({
 			dragDelta: delta,
@@ -537,9 +540,9 @@ export function moveShapesToPoint({
 
 	const averageSnappedPoint = Vec.Add(averagePagePoint, delta)
 
-	// 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
+	// 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
 	const snapIndicators = editor.snaps.getIndicators()
-	if (isGridMode && !inputs.ctrlKey && !snappedToPit && snapIndicators.length === 0) {
+	if (isGridMode && !accelKey && !snappedToPit && snapIndicators.length === 0) {
 		averageSnappedPoint.snapToGrid(gridSize)
 	}
 

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

@@ -1,15 +1,50 @@
-import { Editor, TLShape } from '@tldraw/editor'
+import {
+	Editor,
+	ExtractShapeByProps,
+	richTextValidator,
+	TLEventInfo,
+	TLRichText,
+	TLShape,
+	TLShapeId,
+} from '@tldraw/editor'
 
 /** @internal */
-export function startEditingShapeWithLabel(editor: Editor, shape: TLShape, selectAll = false) {
+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')
+	}
 	// 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 (selectAll) {
+	if (options.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.altKey) {
+		if (this.editor.inputs.getAltKey()) {
 			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.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			this.parent.transition('zoom_brushing', this.info)
 		}
 	}
@@ -24,8 +24,8 @@ export class Pointing extends StateNode {
 	}
 
 	private complete() {
-		const { currentScreenPoint } = this.editor.inputs
-		if (this.editor.inputs.altKey) {
+		const currentScreenPoint = this.editor.inputs.getCurrentScreenPoint()
+		if (this.editor.inputs.getAltKey()) {
 			this.editor.zoomOut(currentScreenPoint, { animation: { duration: 220 } })
 		} else {
 			this.editor.zoomIn(currentScreenPoint, { animation: { duration: 220 } })

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

@@ -29,9 +29,8 @@ export class ZoomBrushing extends StateNode {
 	}
 
 	private update() {
-		const {
-			inputs: { originPagePoint, currentPagePoint },
-		} = this.editor
+		const originPagePoint = this.editor.inputs.getOriginPagePoint()
+		const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
 
 		this.zoomBrush.setTo(Box.FromPoints([originPagePoint, currentPagePoint]))
 		this.editor.updateInstanceState({ zoomBrush: this.zoomBrush.toJson() })
@@ -46,14 +45,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.currentScreenPoint
-			if (this.editor.inputs.altKey) {
+			const point = this.editor.inputs.getCurrentScreenPoint()
+			if (this.editor.inputs.getAltKey()) {
 				this.editor.zoomOut(point, { animation: { duration: 220 } })
 			} else {
 				this.editor.zoomIn(point, { animation: { duration: 220 } })
 			}
 		} else {
-			const targetZoom = this.editor.inputs.altKey ? this.editor.getZoomLevel() / 2 : undefined
+			const targetZoom = this.editor.inputs.getAltKey() ? this.editor.getZoomLevel() / 2 : undefined
 			this.editor.zoomToBounds(zoomBrush, { targetZoom, animation: { duration: 220 } })
 		}
 

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

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

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
+	const currentPagePoint = editor.inputs.getCurrentPagePoint()
 	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.currentPagePoint, {
+	const hitShape = editor.getShapeAtPoint(editor.inputs.getCurrentPagePoint(), {
 		hitInside: false,
 		hitLabels: false,
 		margin: editor.options.hitTestMargin / editor.getZoomLevel(),

package/src/lib/ui/TldrawUi.tsx

@@ -81,6 +81,11 @@ 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}
@@ -112,8 +117,6 @@ const TldrawUiContent = React.memo(function TldrawUI() {
 		A11y,
 	} = useTldrawUiComponents()
 
-	useKeyboardShortcuts()
-	useNativeClipboardEvents()
 	useEditorEvents()
 
 	const rIsEditingAnything = useRef(false)

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

@@ -66,9 +66,7 @@ export const DefaultContextMenu = memo(function DefaultContextMenu({
 				// Weird route: selecting locked shapes on long press
 				if (editor.getInstanceState().isCoarsePointer) {
 					const selectedShapes = editor.getSelectedShapes()
-					const {
-						inputs: { currentPagePoint },
-					} = editor
+					const currentPagePoint = editor.inputs.getCurrentPagePoint()
 
 					// 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>) {
+function usePositionBubble(ref: RefObject<HTMLInputElement | null>) {
 	const editor = useEditor()
 
 	useLayoutEffect(() => {
 		const elm = ref.current
 		if (!elm) return
 
-		const { x, y } = editor.inputs.currentScreenPoint
+		const { x, y } = editor.inputs.getCurrentScreenPoint()
 		ref.current?.style.setProperty('transform', `translate(${x}px, ${y}px)`)
 
 		// Positioning the chat bubble

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

@@ -1,12 +1,5 @@
-import {
-	debugFlags,
-	track,
-	useEditor,
-	usePassThroughWheelEvents,
-	useValue,
-	Vec,
-} from '@tldraw/editor'
-import { memo, useEffect, useRef, useState } from 'react'
+import { debugFlags, track, useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'
+import { memo, useEffect, useRef } from 'react'
 import { useTldrawUiComponents } from '../context/components'
 
 /** @internal */
@@ -25,42 +18,10 @@ 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()
-	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>
+	return <div className="tlui-debug-panel__current-state">{`${path}`}</div>
 })
 
 function FPS() {

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

@@ -18,7 +18,7 @@ export function BackToContent() {
 			const shapeIds = editor.getCurrentPageShapeIds()
 			let showBackToContentNow = false
 			if (shapeIds.size) {
-				showBackToContentNow = shapeIds.size === editor.getCulledShapes().size
+				showBackToContentNow = shapeIds.size === editor.getNotVisibleShapes().size
 			}
 
 			if (showBackToContentPrev !== showBackToContentNow) {

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 } from '../primitives/menus/TldrawUiMenuItem'
+import { TldrawUiMenuItem, type TLUiMenuItemProps } 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']} />
+	return <TldrawUiMenuItem {...(actions['stop-following'] as TLUiMenuItemProps)} />
 }

package/src/lib/ui/components/Minimap/DefaultMinimap.tsx

@@ -24,7 +24,7 @@ export function DefaultMinimap() {
 	const rCanvas = React.useRef<HTMLCanvasElement>(null!)
 	const rPointing = React.useRef(false)
 
-	const minimapRef = React.useRef<MinimapManager>()
+	const minimapRef = React.useRef<MinimapManager | undefined>(undefined)
 
 	React.useEffect(() => {
 		try {

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

@@ -1,15 +1,16 @@
-import classNames from 'classnames'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiIcon } from '../primitives/TldrawUiIcon'
+import { TldrawUiTooltip } from '../primitives/TldrawUiTooltip'
 
 /** @public @react */
 export function OfflineIndicator() {
 	const msg = useTranslation()
 
 	return (
-		<div className={classNames('tlui-offline-indicator')}>
-			{msg('status.offline')}
-			<TldrawUiIcon label={msg('status.offline')} icon="status-offline" small />
-		</div>
+		<TldrawUiTooltip content={msg('status.offline')}>
+			<div className="tlui-offline-indicator">
+				<TldrawUiIcon icon="status-offline" label={msg('status.offline')} small />
+			</div>
+		</TldrawUiTooltip>
 	)
 }

package/src/lib/ui/components/PageMenu/PageItemInput.tsx

@@ -48,7 +48,9 @@ export const PageItemInput = function PageItemInput({
 	return (
 		<TldrawUiInput
 			className="tlui-page-menu__item__input"
-			ref={(el) => (rInput.current = el)}
+			ref={(el) => {
+				rInput.current = el
+			}}
 			defaultValue={name}
 			onValueChange={handleChange}
 			onComplete={onComplete}