@tldraw/editor 4.6.0-next.fecc64eee134 → 5.0.0

package/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx

@@ -0,0 +1,128 @@
+import { TLShape, TLShapeId } from '@tldraw/tlschema'
+import { IndexKey, compact } from '@tldraw/utils'
+import { Vec } from '../../primitives/Vec'
+import { BaseBoxShapeUtil, TLBaseBoxShape } from './BaseBoxShapeUtil'
+import { TLDragShapesInInfo, TLDragShapesOutInfo } from './ShapeUtil'
+
+/**
+ * A base class for frame-like shapes — containers that clip their children,
+ * require full-brush selection, block erasure from inside, and support
+ * drag-and-drop reparenting.
+ *
+ * Extending this class is the easiest way to create a custom frame-like shape.
+ * It provides sensible defaults for all frame-like behaviors:
+ *
+ * - `isFrameLike()` returns `true`
+ * - `providesBackgroundForChildren()` returns `true`
+ * - `canReceiveNewChildrenOfType()` returns `true` unless the container is locked
+ * - `canRemoveChildrenOfType()` returns `true` unless the container is locked
+ * - `getClipPath()` returns the shape geometry's vertices
+ * - `onDragShapesIn()` reparents shapes into the frame (with index restoration)
+ * - `onDragShapesOut()` reparents shapes back to the page
+ *
+ * All methods can be overridden for custom behavior.
+ *
+ * @example
+ * ```ts
+ * class MyContainerUtil extends BaseFrameLikeShapeUtil<MyContainerShape> {
+ *   static override type = 'my-container' as const
+ *   static override props = myContainerShapeProps
+ *
+ *   override getDefaultProps() {
+ *     return { w: 300, h: 200 }
+ *   }
+ *
+ *   override component(shape: MyContainerShape) {
+ *     return <SVGContainer>...</SVGContainer>
+ *   }
+ *
+ *   override getIndicatorPath(shape: MyContainerShape) {
+ *     const path = new Path2D()
+ *     path.rect(0, 0, shape.props.w, shape.props.h)
+ *     return path
+ *   }
+ * }
+ * ```
+ *
+ * @public
+ */
+export abstract class BaseFrameLikeShapeUtil<
+	Shape extends TLBaseBoxShape,
+> extends BaseBoxShapeUtil<Shape> {
+	override isFrameLike(_shape: Shape): boolean {
+		return true
+	}
+
+	override providesBackgroundForChildren(): boolean {
+		return true
+	}
+
+	override canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']): boolean {
+		return !shape.isLocked
+	}
+
+	override canRemoveChildrenOfType(shape: Shape, _type: TLShape['type']): boolean {
+		return !shape.isLocked
+	}
+
+	override getClipPath(shape: Shape): Vec[] | undefined {
+		return this.editor.getShapeGeometry(shape.id).vertices
+	}
+
+	override onDragShapesIn(
+		shape: Shape,
+		draggingShapes: TLShape[],
+		{ initialParentIds, initialIndices }: TLDragShapesInInfo
+	): void {
+		const { editor } = this
+
+		if (draggingShapes.every((s) => s.parentId === shape.id)) return
+
+		// Check to see whether any of the shapes can have their old index restored
+		let canRestoreOriginalIndices = false
+		const previousChildren = draggingShapes.filter(
+			(s) => shape.id === (initialParentIds.get(s.id) as TLShapeId)
+		)
+
+		if (previousChildren.length > 0) {
+			const currentChildren = compact(
+				editor.getSortedChildIdsForParent(shape).map((id) => editor.getShape(id))
+			)
+			if (previousChildren.every((s) => !currentChildren.find((c) => c.index === s.index))) {
+				canRestoreOriginalIndices = true
+			}
+		}
+
+		// If any of the children are the ancestor of the frame, quit here
+		if (draggingShapes.some((s) => editor.hasAncestor(shape, s.id))) return
+
+		editor.reparentShapes(draggingShapes, shape.id)
+
+		if (canRestoreOriginalIndices) {
+			for (const s of previousChildren) {
+				editor.updateShape({
+					id: s.id,
+					type: s.type,
+					index: initialIndices.get(s.id) as IndexKey,
+				})
+			}
+		}
+	}
+
+	override onDragShapesOut(
+		shape: Shape,
+		draggingShapes: TLShape[],
+		info: TLDragShapesOutInfo
+	): void {
+		const { editor } = this
+		// When a user drags shapes out and we're not dragging into a new shape,
+		// reparent the dragging shapes onto the current page instead
+		if (!info.nextDraggingOverShapeId) {
+			// Locked shapes are already filtered out upstream by DragAndDropManager.
+			editor.reparentShapes(
+				draggingShapes.filter((s) => s.parentId === shape.id),
+				editor.getCurrentPageId()
+			)
+		}
+	}
+}

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -218,42 +218,32 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	abstract component(shape: Shape): any
 
 	/**
-	 * Get JSX describing the shape's indicator (as an SVG element).
+	 * Get a Path2D (or a richer object with clip/additional paths) for rendering the
+	 * shape's indicator on the canvas. Shapes that return `undefined` will not render
+	 * an indicator.
 	 *
-	 * @param shape - The shape.
-	 * @public
-	 */
-	abstract indicator(shape: Shape): any
-
-	/**
-	 * Whether to use the legacy React-based indicator rendering.
-	 *
-	 * Override this to return `false` if your shape implements {@link ShapeUtil.getIndicatorPath}
-	 * for canvas-based indicator rendering.
+	 * For complex indicators that need clipping (e.g., arrows with labels), return an
+	 * object with `path`, `clipPath`, and `additionalPaths` properties.
 	 *
-	 * @returns `true` to use SVG indicators (default), `false` to use canvas indicators.
+	 * @param shape - The shape.
+	 * @returns A Path2D to stroke, or an object with clipping info, or undefined to skip.
 	 * @public
 	 */
-	useLegacyIndicator(): boolean {
-		return true
-	}
+	abstract getIndicatorPath(shape: Shape): TLIndicatorPath | undefined
 
 	/**
-	 * Get a Path2D for rendering the shape's indicator on the canvas.
-	 *
-	 * When implemented, this is used instead of {@link ShapeUtil.indicator} for more
-	 * efficient canvas-based indicator rendering. Shapes that return `undefined` will
-	 * fall back to SVG-based rendering via {@link ShapeUtil.indicator}.
+	 * Get JSX describing the shape's indicator (as an SVG element).
 	 *
-	 * For complex indicators that need clipping (e.g., arrows with labels), return an
-	 * object with `path`, `clipPath`, and `additionalPaths` properties.
+	 * @deprecated SVG indicators are no longer rendered. Override
+	 * {@link ShapeUtil.getIndicatorPath} instead. This stub is retained so legacy
+	 * subclasses that still call `super.indicator()` keep type-checking; new shapes
+	 * should not implement it.
 	 *
 	 * @param shape - The shape.
-	 * @returns A Path2D to stroke, or an object with clipping info, or undefined to use SVG fallback.
 	 * @public
 	 */
-	getIndicatorPath(shape: Shape): TLIndicatorPath | undefined {
-		return undefined
+	indicator(_shape: Shape): any {
+		return null
 	}
 
 	/**
@@ -492,6 +482,17 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 		return false
 	}
 
+	/**
+	 * Whether the shape behaves like a frame — a container that has child shapes,
+	 * requires full-brush selection, blocks erasure from inside, etc.
+	 *
+	 * @param shape - The shape.
+	 * @public
+	 */
+	isFrameLike(_shape: Shape): boolean {
+		return false
+	}
+
 	/**
 	 * By default, the bounds of an image export are the bounds of all the shapes it contains, plus
 	 * some padding. If an export includes a shape where `isExportBoundsContainer` is true, then the
@@ -545,7 +546,9 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	getHandles?(shape: Shape): TLHandle[]
 
 	/**
-	 * Get whether the shape can receive children of a given type.
+	 * Get whether the shape can receive children of a given type. Used by the drag and drop system
+	 * to decide whether {@link ShapeUtil.onDragShapesIn} should fire when a shape of the given type
+	 * is dragged over this one.
 	 *
 	 * @param shape - The shape.
 	 * @param type - The shape type.
@@ -555,6 +558,22 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 		return false
 	}
 
+	/**
+	 * Get whether children of a given type can be removed from this shape. Used by the drag and
+	 * drop system to decide whether {@link ShapeUtil.onDragShapesOut} should fire when a child of
+	 * the given type is dragged out of this shape, and by `kickoutOccludedShapes` to decide
+	 * whether to auto-reparent a child of the given type when it has moved outside this shape's
+	 * geometry. Returning `false` therefore "pins" matching children — they stay parented to this
+	 * shape even when dragged or moved outside it. Defaults to `true`.
+	 *
+	 * @param shape - The shape.
+	 * @param type - The shape type.
+	 * @public
+	 */
+	canRemoveChildrenOfType(shape: Shape, type: TLShape['type']) {
+		return true
+	}
+
 	/**
 	 * Get the shape as an SVG object.
 	 *

package/src/lib/editor/shapes/group/GroupShapeUtil.tsx

@@ -4,6 +4,7 @@ import { Geometry2d } from '../../../primitives/geometry/Geometry2d'
 import { Group2d } from '../../../primitives/geometry/Group2d'
 import { Rectangle2d } from '../../../primitives/geometry/Rectangle2d'
 import { ShapeUtil } from '../ShapeUtil'
+import { getPerfectDashProps } from '../shared/getPerfectDashProps'
 import { DashedOutlineBox } from './DashedOutlineBox'
 
 /** @public */
@@ -78,10 +79,46 @@ export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
 		)
 	}
 
-	indicator(shape: TLGroupShape) {
-		// Not a class component, but eslint can't tell that :(
+	override getIndicatorPath(shape: TLGroupShape): Path2D {
 		const bounds = this.editor.getShapeGeometry(shape).bounds
-		return <DashedOutlineBox className="" bounds={bounds} />
+		const zoomLevel = this.editor.getEfficientZoomLevel()
+		const path = new Path2D()
+
+		for (const side of bounds.sides) {
+			const [start, end] = side
+			const length = start.dist(end)
+			if (length <= 0) continue
+
+			const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(length, 1 / zoomLevel, {
+				style: 'dashed',
+				lengthRatio: 4,
+			})
+
+			if (strokeDasharray === 'none') {
+				path.moveTo(start.x, start.y)
+				path.lineTo(end.x, end.y)
+				continue
+			}
+
+			const [dashLength, gapLength] = strokeDasharray.split(' ').map(Number)
+			const dashOffset = Number(strokeDashoffset)
+			const period = dashLength + gapLength
+			if (!Number.isFinite(period) || period <= 0) continue
+
+			const dx = (end.x - start.x) / length
+			const dy = (end.y - start.y) / length
+
+			for (let dashStart = -dashOffset; dashStart < length; dashStart += period) {
+				const dashEnd = Math.min(length, dashStart + dashLength)
+				const clippedDashStart = Math.max(0, dashStart)
+				if (dashEnd <= clippedDashStart) continue
+
+				path.moveTo(start.x + dx * clippedDashStart, start.y + dy * clippedDashStart)
+				path.lineTo(start.x + dx * dashEnd, start.y + dy * dashEnd)
+			}
+		}
+
+		return path
 	}
 
 	override onChildrenChange(group: TLGroupShape) {

package/src/lib/editor/types/event-types.ts

@@ -1,5 +1,6 @@
 import { TLHandle, TLShape, VecModel } from '@tldraw/tlschema'
 import { VecLike } from '../../primitives/Vec'
+import { TLOverlay } from '../overlays/OverlayUtil'
 import { TLSelectionHandle } from './selection-types'
 
 /** @public */
@@ -11,6 +12,7 @@ export type TLPointerEventTarget =
 	| { target: 'selection'; handle?: TLSelectionHandle; shape?: undefined }
 	| { target: 'shape'; shape: TLShape }
 	| { target: 'handle'; shape: TLShape; handle: TLHandle }
+	| { target: 'overlay'; overlay: TLOverlay; shape?: undefined }
 
 /** @public */
 export type TLPointerEventName =

package/src/lib/exports/fetchCache.ts

@@ -1,9 +1,7 @@
-import { FileHelpers, assert, fetch } from '@tldraw/utils'
+import { FileHelpers, LruCache, assert, fetch } from '@tldraw/utils'
 
-// TODO(alex): currently, this cache will grow unbounded. we should come up with a better strategy
-// for clearing items from the cache over time.
 export function fetchCache<T>(cb: (response: Response) => Promise<T>, init?: RequestInit) {
-	const cache = new Map<string, Promise<T | null>>()
+	const cache = new LruCache<string, Promise<T | null>>(100)
 
 	return async function fetchCached(url: string): Promise<T | null> {
 		const existing = cache.get(url)

package/src/lib/exports/getSvgJsx.test.ts

@@ -46,7 +46,9 @@ class TestShape extends ShapeUtil<ITestShape> {
 		return shape.props.isContainer ?? false
 	}
 
-	indicator() {}
+	getIndicatorPath() {
+		return undefined
+	}
 	component() {}
 }
 

package/src/lib/exports/getSvgJsx.tsx

@@ -60,8 +60,9 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 		.filter(({ id }) => shapeIdsToInclude.has(id))
 
 	// --- Common bounding box of all shapes
+	const singleFrameShape = ids.length === 1 ? editor.getShape(ids[0]) : null
 	const singleFrameShapeId =
-		ids.length === 1 && editor.isShapeOfType(editor.getShape(ids[0])!, 'frame') ? ids[0] : null
+		singleFrameShape && editor.isShapeFrameLike(singleFrameShape) ? ids[0] : null
 
 	let bbox: null | Box = null
 	let paddingWasApplied = false

package/src/lib/hooks/EditorComponentsContext.tsx

@@ -1,54 +1,27 @@
 import { ComponentType, RefAttributes, createContext, useContext } from 'react'
-import type { TLBrushProps } from '../components/default-components/DefaultBrush'
 import type { TLCanvasComponentProps } from '../components/default-components/DefaultCanvas'
-import type { TLCollaboratorHintProps } from '../components/default-components/DefaultCollaboratorHint'
-import type { TLCursorProps } from '../components/default-components/DefaultCursor'
 import type { TLErrorFallbackComponent } from '../components/default-components/DefaultErrorFallback'
 import type { TLGridProps } from '../components/default-components/DefaultGrid'
-import type { TLHandleProps } from '../components/default-components/DefaultHandle'
-import type { TLHandlesProps } from '../components/default-components/DefaultHandles'
-import type { TLScribbleProps } from '../components/default-components/DefaultScribble'
 import type { TLSelectionBackgroundProps } from '../components/default-components/DefaultSelectionBackground'
-import type { TLSelectionForegroundProps } from '../components/default-components/DefaultSelectionForeground'
 import type { TLShapeErrorFallbackComponent } from '../components/default-components/DefaultShapeErrorFallback'
-import type { TLShapeIndicatorProps } from '../components/default-components/DefaultShapeIndicator'
-import type { TLShapeIndicatorErrorFallbackComponent } from '../components/default-components/DefaultShapeIndicatorErrorFallback'
 import type { TLShapeWrapperProps } from '../components/default-components/DefaultShapeWrapper'
-import type { TLSnapIndicatorProps } from '../components/default-components/DefaultSnapIndictor'
 
 /** @public */
 export interface TLEditorComponents {
 	Background?: ComponentType | null
-	Brush?: ComponentType<TLBrushProps> | null
 	Canvas?: ComponentType<TLCanvasComponentProps> | null
-	CollaboratorBrush?: ComponentType<TLBrushProps> | null
-	CollaboratorCursor?: ComponentType<TLCursorProps> | null
-	CollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null
-	CollaboratorScribble?: ComponentType<TLScribbleProps> | null
-	CollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
-	Cursor?: ComponentType<TLCursorProps> | null
 	Grid?: ComponentType<TLGridProps> | null
-	Handle?: ComponentType<TLHandleProps> | null
-	Handles?: ComponentType<TLHandlesProps> | null
 	InFrontOfTheCanvas?: ComponentType | null
 	LoadingScreen?: ComponentType | null
 	OnTheCanvas?: ComponentType | null
-	Overlays?: ComponentType | null
-	Scribble?: ComponentType<TLScribbleProps> | null
 	SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null
-	SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null
-	ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
-	ShapeIndicators?: ComponentType | null
 	ShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null
-	SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null
 	Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null
 	SvgDefs?: ComponentType | null
-	ZoomBrush?: ComponentType<TLBrushProps> | null
 
 	// These will always have defaults
 	ErrorFallback?: TLErrorFallbackComponent
 	ShapeErrorFallback?: TLShapeErrorFallbackComponent
-	ShapeIndicatorErrorFallback?: TLShapeIndicatorErrorFallbackComponent
 }
 
 export const EditorComponentsContext = createContext<null | Required<TLEditorComponents>>(null)

package/src/lib/hooks/useCanvasEvents.ts

@@ -1,6 +1,5 @@
 import { useValue } from '@tldraw/state-react'
 import React, { useEffect, useMemo } from 'react'
-import { RIGHT_MOUSE_BUTTON } from '../constants'
 import { tlenv } from '../globals/environment'
 import {
 	elementShouldCaptureKeys,
@@ -21,7 +20,9 @@ export function useCanvasEvents() {
 			function onPointerDown(e: React.PointerEvent) {
 				if (editor.wasEventAlreadyHandled(e)) return
 
-				if (e.button === RIGHT_MOUSE_BUTTON) {
+				// With right-click panning disabled, fire right_click on press and let the
+				// native contextmenu through so the menu opens at the pointer-down location.
+				if (e.button === 2 && !editor.options.rightClickPanning) {
 					editor.dispatch({
 						type: 'pointer',
 						target: 'canvas',
@@ -31,7 +32,7 @@ export function useCanvasEvents() {
 					return
 				}
 
-				if (e.button !== 0 && e.button !== 1 && e.button !== 5) return
+				if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return
 
 				setPointerCapture(e.currentTarget, e)
 
@@ -47,6 +48,11 @@ export function useCanvasEvents() {
 				if (editor.wasEventAlreadyHandled(e)) return
 				if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return
 
+				const rightClickPanning = editor.options.rightClickPanning
+				// Check before dispatch (which resets isPanning)
+				const wasRightClickPanning =
+					rightClickPanning && e.button === 2 && editor.inputs.getIsPanning()
+
 				releasePointerCapture(e.currentTarget, e)
 
 				editor.dispatch({
@@ -55,6 +61,21 @@ export function useCanvasEvents() {
 					name: 'pointer_up',
 					...getPointerInfo(editor, e),
 				})
+
+				// Static right-click: fire contextmenu at the pointer-up location
+				if (rightClickPanning && e.button === 2 && !wasRightClickPanning) {
+					const contextMenuEvent = new PointerEvent('contextmenu', {
+						bubbles: true,
+						clientX: e.clientX,
+						clientY: e.clientY,
+						button: 2,
+						buttons: 0,
+						pointerId: e.pointerId,
+						pointerType: e.pointerType,
+						isPrimary: e.isPrimary,
+					})
+					e.currentTarget.dispatchEvent(contextMenuEvent)
+				}
 			}
 
 			function onPointerEnter(e: React.PointerEvent) {
@@ -143,6 +164,26 @@ export function useCanvasEvents() {
 				e.stopPropagation()
 			}
 
+			function onContextMenu(e: React.MouseEvent) {
+				// With right-click panning disabled, let the native contextmenu through so the
+				// menu opens on press.
+				if (!editor.options.rightClickPanning) return
+				// Synthetic events — our own dispatch from onPointerUp, or tests using
+				// fireEvent.contextMenu — pass through so Radix can open the menu.
+				if (!e.nativeEvent.isTrusted) return
+				// Only suppress the native browser contextmenu when it follows a real
+				// right-click (button=2 with no ctrl modifier). For those, our pointer
+				// handling has already decided what to do (either we'll dispatch a
+				// synthetic contextmenu on pointerup to open the menu at the release
+				// position, or we panned and don't want a menu at all).
+				//
+				// Other contextmenu sources must reach Radix so the menu opens:
+				// - ctrl+click on macOS (button=0, or button=2 with ctrlKey=true)
+				// - long-press on touch devices (button=0, pointerType=touch)
+				if (e.button !== 2 || e.ctrlKey) return
+				preventDefault(e)
+			}
+
 			return {
 				onPointerDown,
 				onPointerUp,
@@ -153,6 +194,7 @@ export function useCanvasEvents() {
 				onTouchStart,
 				onTouchEnd,
 				onClick,
+				onContextMenu,
 			}
 		},
 		[editor]

package/src/lib/hooks/useEditorComponents.tsx

@@ -1,22 +1,11 @@
 import { ReactNode, useMemo } from 'react'
 import { DefaultBackground } from '../components/default-components/DefaultBackground'
-import { DefaultBrush } from '../components/default-components/DefaultBrush'
 import { DefaultCanvas } from '../components/default-components/DefaultCanvas'
-import { DefaultCollaboratorHint } from '../components/default-components/DefaultCollaboratorHint'
-import { DefaultCursor } from '../components/default-components/DefaultCursor'
 import { DefaultErrorFallback } from '../components/default-components/DefaultErrorFallback'
 import { DefaultGrid } from '../components/default-components/DefaultGrid'
-import { DefaultHandle } from '../components/default-components/DefaultHandle'
-import { DefaultHandles } from '../components/default-components/DefaultHandles'
 import { DefaultLoadingScreen } from '../components/default-components/DefaultLoadingScreen'
-import { DefaultScribble } from '../components/default-components/DefaultScribble'
-import { DefaultSelectionForeground } from '../components/default-components/DefaultSelectionForeground'
 import { DefaultShapeErrorFallback } from '../components/default-components/DefaultShapeErrorFallback'
-import { DefaultShapeIndicator } from '../components/default-components/DefaultShapeIndicator'
-import { DefaultShapeIndicatorErrorFallback } from '../components/default-components/DefaultShapeIndicatorErrorFallback'
-import { DefaultShapeIndicators } from '../components/default-components/DefaultShapeIndicators'
 import { DefaultShapeWrapper } from '../components/default-components/DefaultShapeWrapper'
-import { DefaultSnapIndicator } from '../components/default-components/DefaultSnapIndictor'
 import { DefaultSpinner } from '../components/default-components/DefaultSpinner'
 import { DefaultSvgDefs } from '../components/default-components/DefaultSvgDefs'
 import { EditorComponentsContext } from './EditorComponentsContext'
@@ -39,35 +28,18 @@ export function EditorComponentsProvider({
 	const value = useMemo(
 		(): Required<TLEditorComponents> => ({
 			Background: DefaultBackground,
-			Brush: DefaultBrush,
 			Canvas: DefaultCanvas,
-			CollaboratorBrush: DefaultBrush,
-			CollaboratorCursor: DefaultCursor,
-			CollaboratorHint: DefaultCollaboratorHint,
-			CollaboratorScribble: DefaultScribble,
-			CollaboratorShapeIndicator: DefaultShapeIndicator,
-			Cursor: DefaultCursor,
 			Grid: DefaultGrid,
-			Handle: DefaultHandle,
-			Handles: DefaultHandles,
 			InFrontOfTheCanvas: null,
 			LoadingScreen: DefaultLoadingScreen,
 			OnTheCanvas: null,
-			Overlays: null,
-			Scribble: DefaultScribble,
 			SelectionBackground: null,
-			SelectionForeground: DefaultSelectionForeground,
-			ShapeIndicator: DefaultShapeIndicator,
-			ShapeIndicators: DefaultShapeIndicators,
 			ShapeWrapper: DefaultShapeWrapper,
-			SnapIndicator: DefaultSnapIndicator,
 			Spinner: DefaultSpinner,
 			SvgDefs: DefaultSvgDefs,
-			ZoomBrush: DefaultBrush,
 
 			ErrorFallback: DefaultErrorFallback,
 			ShapeErrorFallback: DefaultShapeErrorFallback,
-			ShapeIndicatorErrorFallback: DefaultShapeIndicatorErrorFallback,
 
 			..._overrides,
 		}),

package/src/lib/hooks/usePeerIds.ts

@@ -1,22 +1,12 @@
-import { useAtom, useComputed, useValue } from '@tldraw/state-react'
-import { useEffect } from 'react'
-import {
-	getCollaboratorStateFromElapsedTime,
-	shouldShowCollaborator,
-} from '../utils/collaboratorState'
+import { useComputed, useValue } from '@tldraw/state-react'
 import { uniq } from '../utils/uniq'
 import { useEditor } from './useEditor'
 
-function setsEqual<T>(a: Set<T>, b: Set<T>): boolean {
-	if (a.size !== b.size) return false
-	for (const item of a) {
-		if (!b.has(item)) return false
-	}
-	return true
-}
-
-// TODO: maybe move this to a computed property on the App class?
 /**
+ * Reactive list of peer user IDs for collaborators currently shown in the UI.
+ * Mirrors {@link Editor.getVisibleCollaborators} — peers fade out as they
+ * transition to idle/inactive, without requiring a manual re-render.
+ *
  * @returns The list of peer UserIDs
  * @public
  */
@@ -25,49 +15,10 @@ export function usePeerIds() {
 
 	const $userIds = useComputed(
 		'userIds',
-		() => uniq(editor.getCollaborators().map((p) => p.userId)).sort(),
+		() => uniq(editor.getVisibleCollaborators().map((p) => p.userId)).sort(),
 		{ isEqual: (a, b) => a.join(',') === b.join?.(',') },
 		[editor]
 	)
 
 	return useValue($userIds)
 }
-
-/**
- * Returns a computed signal of active peer user IDs that should be shown.
- * Automatically re-evaluates on an interval to handle time-based state transitions
- * (active -> idle -> inactive).
- *
- * @returns A computed signal containing a Set of active peer user IDs
- * @internal
- */
-export function useActivePeerIds$() {
-	const $time = useAtom('peerIdsTime', Date.now())
-	const editor = useEditor()
-	useEffect(() => {
-		const interval = editor.timers.setInterval(() => {
-			$time.set(Date.now())
-		}, editor.options.collaboratorCheckIntervalMs)
-
-		return () => clearInterval(interval)
-	}, [editor, $time])
-
-	return useComputed(
-		'activePeerIds',
-		() => {
-			const now = $time.get()
-			return new Set(
-				editor
-					.getCollaborators()
-					.filter((p) => {
-						const elapsed = Math.max(0, now - (p.lastActivityTimestamp ?? Infinity))
-						const state = getCollaboratorStateFromElapsedTime(editor, elapsed)
-						return shouldShowCollaborator(editor, p, state)
-					})
-					.map((p) => p.userId)
-			)
-		},
-		{ isEqual: setsEqual },
-		[editor]
-	)
-}

package/src/lib/hooks/useShapeCulling.tsx

@@ -61,8 +61,10 @@ export function ShapeCullingProvider({ children }: ShapeCullingProviderProps) {
 	}, [])
 
 	const updateCulling = useCallback((culledShapes: Set<TLShapeId>) => {
+		let shouldBeCulled: boolean
+
 		for (const [id, entry] of containersRef.current) {
-			const shouldBeCulled = culledShapes.has(id)
+			shouldBeCulled = culledShapes.has(id)
 			if (shouldBeCulled !== entry.isCulled) {
 				const display = shouldBeCulled ? 'none' : 'block'
 				setStyleProperty(entry.container, 'display', display)

package/src/lib/options.ts

@@ -154,6 +154,12 @@ export interface TldrawOptions {
 	 * When false, the spacebar will not pan the camera.
 	 */
 	readonly spacebarPanning: boolean
+	/**
+	 * Whether to allow right-click + drag to pan the camera. When true, right-click + drag pans the
+	 * camera and a static right-click opens the context menu at the release position. When false,
+	 * right-click opens the context menu on press (no drag-to-pan).
+	 */
+	readonly rightClickPanning: boolean
 	/**
 	 * The default padding (in pixels) used when zooming to fit content in the viewport.
 	 * This affects methods like `zoomToFit()`, `zoomToSelection()`, and `zoomToBounds()`.
@@ -326,6 +332,7 @@ export const defaultTldrawOptions = {
 	debouncedZoom: true,
 	debouncedZoomThreshold: 500,
 	spacebarPanning: true,
+	rightClickPanning: true,
 	zoomToFitPadding: 128,
 	snapThreshold: 8,
 	camera: DEFAULT_CAMERA_OPTIONS,