tldraw 4.3.0-canary.e52fa5385f86 → 4.3.0-canary.ea88b223b83a

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/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/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

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

@@ -182,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} />
 }

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

@@ -52,8 +52,8 @@ export const TldrawUiContextualToolbar = ({
 	const editor = useEditor()
 	const toolbarRef = useRef<HTMLDivElement>(null)
 
-	usePassThroughWheelEvents(toolbarRef as RefObject<HTMLDivElement>)
-	usePassThroughMouseOverEvents(toolbarRef as RefObject<HTMLDivElement>)
+	usePassThroughWheelEvents(toolbarRef as RefObject<HTMLDivElement | null>)
+	usePassThroughMouseOverEvents(toolbarRef as RefObject<HTMLDivElement | null>)
 
 	const { isVisible, isInteractive, hide, show, position, move } =
 		useToolbarVisibilityStateMachine(changeOnlyWhenYChanges)
@@ -105,7 +105,9 @@ export const TldrawUiContextualToolbar = ({
 					// to have the last updated position in page space, so that we could convert
 					// it to screen space and update it here
 					const elm = toolbarRef.current
-					elm.style.setProperty('transform', `translate(${position.x}px, ${position.y}px)`)
+					if (elm) {
+						elm.style.setProperty('transform', `translate(${position.x}px, ${position.y}px)`)
+					}
 				} else {
 					const moveImmediately = lastContentSizeUpdateCounter !== nextContentSizeUpdateCounter
 					// Schedule a move to its next location

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

@@ -410,8 +410,15 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		const child = React.Children.only(children)
 		assert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')
 
+		const childElement = child as React.ReactElement<{
+			onMouseEnter?(event: React.MouseEvent<HTMLElement>): void
+			onMouseLeave?(event: React.MouseEvent<HTMLElement>): void
+			onFocus?(event: React.FocusEvent<HTMLElement>): void
+			onBlur?(event: React.FocusEvent<HTMLElement>): void
+		}>
+
 		const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
-			child.props.onMouseEnter?.(event)
+			childElement.props.onMouseEnter?.(event)
 			tooltipManager.handleEvent({
 				type: 'show',
 				tooltip: {
@@ -427,7 +434,7 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		}
 
 		const handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {
-			child.props.onMouseLeave?.(event)
+			childElement.props.onMouseLeave?.(event)
 			tooltipManager.handleEvent({
 				type: 'hide',
 				tooltipId: tooltipId.current,
@@ -437,7 +444,7 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		}
 
 		const handleFocus = (event: React.FocusEvent<HTMLElement>) => {
-			child.props.onFocus?.(event)
+			childElement.props.onFocus?.(event)
 			tooltipManager.handleEvent({
 				type: 'show',
 				tooltip: {
@@ -453,7 +460,7 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		}
 
 		const handleBlur = (event: React.FocusEvent<HTMLElement>) => {
-			child.props.onBlur?.(event)
+			childElement.props.onBlur?.(event)
 			tooltipManager.handleEvent({
 				type: 'hide',
 				tooltipId: tooltipId.current,
@@ -462,7 +469,7 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 			})
 		}
 
-		const childrenWithHandlers = React.cloneElement(children as React.ReactElement, {
+		const childrenWithHandlers = React.cloneElement(childElement, {
 			onMouseEnter: handleMouseEnter,
 			onMouseLeave: handleMouseLeave,
 			onFocus: handleFocus,

package/src/lib/ui/components/primitives/menus/TldrawUiMenuActionCheckboxItem.tsx

@@ -17,5 +17,5 @@ export function TldrawUiMenuActionCheckboxItem({
 	const actions = useActions()
 	const action = actions[actionId]
 	if (!action) return null
-	return <TldrawUiMenuCheckboxItem {...action} {...rest} />
+	return <TldrawUiMenuCheckboxItem {...(action as TLUiMenuCheckboxItemProps)} {...rest} />
 }

package/src/lib/ui/components/primitives/menus/TldrawUiMenuActionItem.tsx

@@ -11,5 +11,5 @@ export function TldrawUiMenuActionItem({ actionId = '', ...rest }: TLUiMenuActio
 	const actions = useActions()
 	const action = actions[actionId]
 	if (!action) return null
-	return <TldrawUiMenuItem {...action} {...rest} />
+	return <TldrawUiMenuItem {...(action as TLUiMenuItemProps)} {...rest} />
 }

package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx

@@ -134,7 +134,6 @@ export function TldrawUiMenuItem<
 						{iconLeft && <TldrawUiButtonIcon icon={iconLeft} small />}
 						<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>
 						{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}
-						{icon && <TldrawUiButtonIcon icon={icon} small />}
 					</TldrawUiButton>
 				</TldrawUiDropdownMenuItem>
 			)

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

@@ -375,7 +375,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					if (editor.root.getCurrent()?.id === 'zoom') return
 
 					trackEvent('zoom-tool', { source })
-					if (!(editor.inputs.shiftKey || editor.inputs.ctrlKey)) {
+					if (!(editor.inputs.getShiftKey() || editor.inputs.getCtrlKey())) {
 						const currentTool = editor.root.getCurrent()
 						if (currentTool && currentTool.getCurrent()?.id === 'idle') {
 							editor.setCurrentTool('zoom', { onInteractionEnd: currentTool.id, maskAs: 'zoom' })
@@ -973,7 +973,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 							helpers.paste(
 								clipboardItems,
 								source,
-								source === 'context-menu' ? editor.inputs.currentPagePoint : undefined
+								source === 'context-menu' ? editor.inputs.getCurrentPagePoint() : undefined
 							)
 						})
 						.catch(() => {
@@ -1037,7 +1037,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					if (!canApplySelectionAction()) return
 					if (mustGoBackToSelectToolFirst()) return
 
-					const isFine = editor.inputs.altKey
+					const isFine = editor.inputs.getAltKey()
 					trackEvent('rotate-cw', { source, fine: isFine })
 					editor.markHistoryStoppingPoint('rotate-cw')
 					editor.run(() => {
@@ -1060,7 +1060,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					if (!canApplySelectionAction()) return
 					if (mustGoBackToSelectToolFirst()) return
 
-					const isFine = editor.inputs.altKey
+					const isFine = editor.inputs.getAltKey()
 					trackEvent('rotate-ccw', { source, fine: isFine })
 					editor.markHistoryStoppingPoint('rotate-ccw')
 					editor.run(() => {
@@ -1092,7 +1092,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				readonlyOk: true,
 				onSelect(source) {
 					trackEvent('zoom-in', { source, towardsCursor: true })
-					editor.zoomIn(editor.inputs.currentScreenPoint, {
+					editor.zoomIn(editor.inputs.getCurrentScreenPoint(), {
 						animation: { duration: editor.options.animationMediumMs },
 					})
 				},
@@ -1116,7 +1116,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				readonlyOk: true,
 				onSelect(source) {
 					trackEvent('zoom-out', { source, towardsCursor: true })
-					editor.zoomOut(editor.inputs.currentScreenPoint, {
+					editor.zoomOut(editor.inputs.getCurrentScreenPoint(), {
 						animation: { duration: editor.options.animationMediumMs },
 					})
 				},

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

@@ -42,7 +42,6 @@ import {
 } from '../components/Toolbar/DefaultRichTextToolbar'
 import { DefaultToolbar } from '../components/Toolbar/DefaultToolbar'
 import { DefaultVideoToolbar } from '../components/Toolbar/DefaultVideoToolbar'
-import { DefaultTopPanel } from '../components/TopPanel/DefaultTopPanel'
 import { DefaultZoomMenu, TLUiZoomMenuProps } from '../components/ZoomMenu/DefaultZoomMenu'
 import { useShowCollaborationUi } from '../hooks/useCollaborationStatus'
 
@@ -117,7 +116,7 @@ export function TldrawUiComponentsProvider({
 					MenuPanel: DefaultMenuPanel,
 					SharePanel: showCollaborationUi ? DefaultSharePanel : null,
 					CursorChatBubble: showCollaborationUi ? CursorChatBubble : null,
-					TopPanel: showCollaborationUi ? DefaultTopPanel : null,
+					TopPanel: null,
 					Dialogs: DefaultDialogs,
 					Toasts: DefaultToasts,
 					A11y: DefaultA11yAnnouncer,

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

@@ -783,9 +783,9 @@ export function useNativeClipboardEvents() {
 			// |    Y 		|         N            |       Y 				 |
 			// |    N 		|         Y            |       Y 				 |
 			// |    Y 		|         Y            |       N 				 |
-			if (editor.inputs.shiftKey) pasteAtCursor = true
+			if (editor.inputs.getShiftKey()) pasteAtCursor = true
 			if (editor.user.getIsPasteAtCursorMode()) pasteAtCursor = !pasteAtCursor
-			if (pasteAtCursor) point = editor.inputs.currentPagePoint
+			if (pasteAtCursor) point = editor.inputs.getCurrentPagePoint()
 
 			const pasteFromEvent = () => {
 				if (e.clipboardData) {

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

@@ -93,7 +93,7 @@ export function useKeyboardShortcuts() {
 
 			editor.inputs.keys.add('Comma')
 
-			const { x, y, z } = editor.inputs.currentPagePoint
+			const { x, y, z } = editor.inputs.getCurrentPagePoint()
 			const screenpoints = editor.pageToScreen({ x, y })
 
 			const info: TLPointerEventInfo = {
@@ -120,7 +120,7 @@ export function useKeyboardShortcuts() {
 
 			editor.inputs.keys.delete('Comma')
 
-			const { x, y, z } = editor.inputs.currentScreenPoint
+			const { x, y, z } = editor.inputs.getCurrentScreenPoint()
 			const info: TLPointerEventInfo = {
 				type: 'pointer',
 				name: 'pointer_up',