tldraw 4.3.0-next.82cfddd7ee89 → 4.3.0-next.842fb21476f2

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

@@ -1,8 +1,6 @@
 import {
 	Geometry2d,
 	StateNode,
-	TLFrameShape,
-	TLGroupShape,
 	TLShape,
 	TLShapeId,
 	Vec,
@@ -24,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
@@ -60,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)
@@ -76,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)
 	}
 
@@ -84,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
 
@@ -104,7 +103,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<TLGroupShape>(shape, 'group') ||
+				editor.isShapeOfType(shape, 'group') ||
 				newlySelectedShapeIds.has(shape.id) ||
 				editor.isShapeOrAncestorLocked(shape)
 			) {
@@ -115,7 +114,7 @@ export class ScribbleBrushing extends StateNode {
 
 			// If the scribble started inside of the frame, don't select it
 			if (
-				editor.isShapeOfType<TLFrameShape>(shape, 'frame') &&
+				editor.isShapeOfType(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.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,12 +404,10 @@ 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<TLNoteShape>(s.shape, 'note') &&
-			editor.isPointInShape(s.shape, originPagePoint)
+		(s) => editor.isShapeOfType(s.shape, 'note') && editor.isPointInShape(s.shape, originPagePoint)
 	) as (MovingShapeSnapshot & { shape: TLNoteShape })[]
 
 	if (allHoveredNotes.length === 0) {
@@ -475,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'
@@ -497,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,
@@ -539,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/ActionsMenu/DefaultActionsMenuContent.tsx

@@ -1,4 +1,3 @@
-import { useEditor, useValue } from '@tldraw/editor'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import {
@@ -9,6 +8,7 @@ import {
 	useThreeStackableItems,
 	useUnlockedSelectedShapesCount,
 } from '../../hooks/menu-hooks'
+import { ZoomTo100MenuItem } from '../menu-items'
 import { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'
 
 /** @public @react */
@@ -99,14 +99,6 @@ 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,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/EditLinkDialog.tsx

@@ -1,4 +1,4 @@
-import { T, TLBaseShape, track, useEditor } from '@tldraw/editor'
+import { ExtractShapeByProps, T, TLShape, track, useEditor } from '@tldraw/editor'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { TLUiDialogProps } from '../context/dialogs'
 import { useTranslation } from '../hooks/useTranslation/useTranslation'
@@ -25,20 +25,28 @@ function validateUrl(url: string) {
 	return { isValid: false, hasProtocol: false }
 }
 
-type ShapeWithUrl = TLBaseShape<string, { url: string }>
+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')
+	}
+}
 
 export const EditLinkDialog = track(function EditLinkDialog({ onClose }: TLUiDialogProps) {
 	const editor = useEditor()
 
 	const selectedShape = editor.getOnlySelectedShape()
 
-	if (
-		!(selectedShape && 'url' in selectedShape.props && typeof selectedShape.props.url === 'string')
-	) {
+	if (!isShapeWithUrl(selectedShape)) {
 		return null
 	}
 
-	return <EditLinkDialogInner onClose={onClose} selectedShape={selectedShape as ShapeWithUrl} />
+	return <EditLinkDialogInner onClose={onClose} selectedShape={selectedShape} />
 })
 
 export const EditLinkDialogInner = track(function EditLinkDialogInner({
@@ -98,6 +106,7 @@ 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: '' } },
 		])
@@ -108,6 +117,7 @@ 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/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}

package/src/lib/ui/components/SharePanel/PeopleMenu.tsx

@@ -3,8 +3,10 @@ import { Popover as _Popover } from 'radix-ui'
 import { ReactNode } from 'react'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
+import { useCollaborationStatus } from '../../hooks/useCollaborationStatus'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { OfflineIndicator } from '../OfflineIndicator/OfflineIndicator'
 import { PeopleMenuAvatar } from './PeopleMenuAvatar'
 import { PeopleMenuItem } from './PeopleMenuItem'
 import { PeopleMenuMore } from './PeopleMenuMore'
@@ -30,6 +32,12 @@ export function PeopleMenu({ children }: PeopleMenuProps) {
 	const breakpoint = useBreakpoint()
 	const maxAvatars = breakpoint <= PORTRAIT_BREAKPOINT.MOBILE_XS ? 1 : 5
 
+	const collaborationStatus = useCollaborationStatus()
+
+	if (collaborationStatus === 'offline') {
+		return <OfflineIndicator />
+	}
+
 	if (!userIds.length) return null
 
 	return (

package/src/lib/ui/components/Toolbar/AltTextEditor.tsx

@@ -1,4 +1,4 @@
-import { preventDefault, TLShape, TLShapeId, useEditor } from '@tldraw/editor'
+import { ExtractShapeByProps, preventDefault, TLShape, TLShapeId, useEditor } from '@tldraw/editor'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
@@ -31,7 +31,7 @@ export function AltTextEditor({ shapeId, onClose, source }: AltTextEditorProps)
 
 	const handleComplete = () => {
 		trackEvent('set-alt-text', { source })
-		const shape = editor.getShape<TLShape & { props: { altText: string } }>(shapeId)
+		const shape = editor.getShape<ExtractShapeByProps<{ altText: string }>>(shapeId)
 		if (!shape) return
 		editor.updateShapes([
 			{

package/src/lib/ui/components/Toolbar/DefaultImageToolbar.tsx

@@ -63,7 +63,7 @@ function ContextualToolbarInner({
 	)
 	const camera = useValue('camera', () => editor.getCamera(), [editor])
 	const isInCropTool = useValue('editor path', () => editor.isIn('select.crop.'), [editor])
-	const previousSelectionBounds = useRef<Box | undefined>()
+	const previousSelectionBounds = useRef<Box | undefined>(undefined)
 	const handleManipulatingEnd = useCallback(() => {
 		editor.setCroppingShape(null)
 		editor.setCurrentTool('select.idle')

package/src/lib/ui/components/Toolbar/DefaultRichTextToolbar.tsx

@@ -38,7 +38,7 @@ function ContextualToolbarInner({
 }) {
 	const { isEditingLink, onEditLinkStart, onEditLinkClose } = useEditingLinkBehavior(textEditor)
 	const [currentSelection, setCurrentSelection] = useState<Range | null>(null)
-	const previousSelectionBounds = useRef<Box | undefined>()
+	const previousSelectionBounds = useRef<Box | undefined>(undefined)
 	const isMousingDown = useIsMousingDownOnTextEditor(textEditor)
 	const msg = useTranslation()
 

package/src/lib/ui/components/TopPanel/CenteredTopPanelContainer.tsx

@@ -3,7 +3,7 @@ import { useBreakpoint } from '../../context/breakpoints'
 
 /** @public */
 export interface CenteredTopPanelContainerProps {
-	children: ReactNode
+	children?: ReactNode
 	maxWidth?: number
 	ignoreRightWidth?: number
 	stylePanelWidth?: number