@tldraw/editor 4.6.0-next.fe1474dc57d8 → 5.0.0

package/src/lib/editor/overlays/ShapeIndicatorOverlayUtil.ts

@@ -0,0 +1,216 @@
+import { computed } from '@tldraw/state'
+import { createComputedCache } from '@tldraw/store'
+import { TLShape, TLShapeId } from '@tldraw/tlschema'
+import type { Editor } from '../Editor'
+import { OverlayUtil, TLOverlay } from './OverlayUtil'
+
+interface RelevantInstanceFlags {
+	isChangingStyle: boolean
+	isHoveringCanvas: boolean | null
+	isCoarsePointer: boolean
+}
+
+/** @public */
+export interface TLShapeIndicatorOverlay extends TLOverlay {
+	props: {
+		idsToDisplay: TLShapeId[]
+		hintingShapeIds: TLShapeId[]
+	}
+}
+
+const indicatorPathCache = createComputedCache(
+	'shapeIndicatorPath',
+	(editor: Editor, shape: TLShape) => {
+		const util = editor.getShapeUtil(shape)
+		return util.getIndicatorPath(shape)
+	},
+	{
+		areRecordsEqual(a, b) {
+			return a.props === b.props
+		},
+	}
+)
+
+/**
+ * Combine every batchable shape indicator into a single page-space `Path2D` and
+ * emit one stroke call. Shapes whose indicator needs an evenodd clip (e.g.
+ * arrows with labels or complex arrowheads) can't be batched — they still
+ * stroke individually inside a save/restore with `ctx.clip` applied.
+ *
+ * Shared by {@link ShapeIndicatorOverlayUtil} and any overlay util that paints
+ * shape indicators (e.g. collaborator selections).
+ *
+ * @public
+ */
+export function strokeShapeIndicators(
+	editor: Editor,
+	ctx: CanvasRenderingContext2D,
+	shapeIds: TLShapeId[]
+): void {
+	if (shapeIds.length === 0) return
+
+	const batched = new Path2D()
+
+	for (const shapeId of shapeIds) {
+		const shape = editor.getShape(shapeId)
+		if (!shape || shape.isLocked) continue
+
+		const pageTransform = editor.getShapePageTransform(shape)
+		if (!pageTransform) continue
+
+		const indicatorPath = indicatorPathCache.get(editor, shape.id)
+		if (!indicatorPath) continue
+
+		if (indicatorPath instanceof Path2D) {
+			batched.addPath(indicatorPath, pageTransform)
+			continue
+		}
+
+		const { path, clipPath, additionalPaths } = indicatorPath
+
+		if (!clipPath) {
+			batched.addPath(path, pageTransform)
+			if (additionalPaths) {
+				for (const p of additionalPaths) batched.addPath(p, pageTransform)
+			}
+			continue
+		}
+
+		// Clipped case: fall back to an individual stroke. Rare (arrows with
+		// labels / complex arrowheads), so the extra save/restore/stroke
+		// pair per such shape isn't worth batching away.
+		ctx.save()
+		ctx.transform(
+			pageTransform.a,
+			pageTransform.b,
+			pageTransform.c,
+			pageTransform.d,
+			pageTransform.e,
+			pageTransform.f
+		)
+		ctx.save()
+		ctx.clip(clipPath, 'evenodd')
+		ctx.stroke(path)
+		ctx.restore()
+		if (additionalPaths) {
+			for (const p of additionalPaths) ctx.stroke(p)
+		}
+		ctx.restore()
+	}
+
+	ctx.stroke(batched)
+}
+
+/**
+ * Overlay util for shape indicators — the selection / hover / hint outlines drawn
+ * under the selection foreground. Paints local indicators in the theme's
+ * selection color.
+ *
+ * Remote collaborator selection indicators are drawn by a separate overlay util
+ * (e.g. `CollaboratorShapeIndicatorOverlayUtil` from `tldraw`) that runs at a
+ * lower z-index so peer selections appear under the local indicators.
+ *
+ * Non-interactive: contributes no hit-test geometry.
+ *
+ * @public
+ */
+export class ShapeIndicatorOverlayUtil extends OverlayUtil<TLShapeIndicatorOverlay> {
+	static override type = 'shape_indicator'
+	override options = { zIndex: 50, lineWidth: 1.5, hintedLineWidth: 2.5 }
+
+	// Narrow projection of instance state. Reading the full record would
+	// re-fire getOverlays on every cursor move / brush update; gating on these
+	// three booleans means we only re-fire when one of them actually flips.
+	private _instanceFlags$ = computed<RelevantInstanceFlags>(
+		'shape indicator instance flags',
+		() => {
+			const i = this.editor.getInstanceState()
+			return {
+				isChangingStyle: i.isChangingStyle,
+				isHoveringCanvas: i.isHoveringCanvas,
+				isCoarsePointer: i.isCoarsePointer,
+			}
+		},
+		{
+			isEqual: (a, b) =>
+				a.isChangingStyle === b.isChangingStyle &&
+				a.isHoveringCanvas === b.isHoveringCanvas &&
+				a.isCoarsePointer === b.isCoarsePointer,
+		}
+	)
+
+	override isActive(): boolean {
+		return true
+	}
+
+	override getOverlays(): TLShapeIndicatorOverlay[] {
+		const editor = this.editor
+		const renderingShapeIds = new Set(editor.getRenderingShapes().map((s) => s.id))
+
+		// Local selected / hovered indicators.
+		const idsToDisplay: TLShapeId[] = []
+		const { isChangingStyle, isHoveringCanvas, isCoarsePointer } = this._instanceFlags$.get()
+		const isIdleOrEditing = editor.isInAny('select.idle', 'select.editing_shape')
+		const isInSelectState = editor.isInAny(
+			'select.brushing',
+			'select.scribble_brushing',
+			'select.pointing_shape',
+			'select.pointing_selection',
+			'select.pointing_handle'
+		)
+
+		if (!isChangingStyle && (isIdleOrEditing || isInSelectState)) {
+			for (const id of editor.getSelectedShapeIds()) {
+				if (renderingShapeIds.has(id)) idsToDisplay.push(id)
+			}
+			if (isIdleOrEditing && isHoveringCanvas && !isCoarsePointer) {
+				const hovered = editor.getHoveredShapeId()
+				if (hovered && renderingShapeIds.has(hovered) && !idsToDisplay.includes(hovered)) {
+					idsToDisplay.push(hovered)
+				}
+			}
+		}
+
+		// Hinted shapes (drawn thicker). Already deduped at write time in
+		// `updateHintingShapeIds`, so no need to dedupe again here.
+		const hintingShapeIds: TLShapeId[] = []
+		for (const id of editor.getHintingShapeIds()) {
+			if (renderingShapeIds.has(id)) hintingShapeIds.push(id)
+		}
+
+		if (idsToDisplay.length === 0 && hintingShapeIds.length === 0) {
+			return []
+		}
+
+		return [
+			{
+				id: 'shape_indicator',
+				type: 'shape_indicator',
+				props: { idsToDisplay, hintingShapeIds },
+			},
+		]
+	}
+
+	override render(ctx: CanvasRenderingContext2D, overlays: TLShapeIndicatorOverlay[]): void {
+		const overlay = overlays[0]
+		if (!overlay) return
+
+		const editor = this.editor
+		const zoom = editor.getZoomLevel()
+		const { idsToDisplay, hintingShapeIds } = overlay.props
+
+		ctx.lineCap = 'round'
+		ctx.lineJoin = 'round'
+
+		// Local selected / hovered indicators — one stroke call for the whole batch.
+		ctx.strokeStyle = editor.getCurrentTheme().colors[editor.getColorMode()].selectionStroke
+		ctx.lineWidth = this.options.lineWidth / zoom
+		strokeShapeIndicators(editor, ctx, idsToDisplay)
+
+		// Hinted shapes — thicker stroke, one call for the whole batch.
+		if (hintingShapeIds.length > 0) {
+			ctx.lineWidth = this.options.hintedLineWidth / zoom
+			strokeShapeIndicators(editor, ctx, hintingShapeIds)
+		}
+	}
+}

package/src/lib/editor/overlays/getOverlayDisplayValues.ts

@@ -0,0 +1,51 @@
+import { TLTheme } from '@tldraw/tlschema'
+import type { Editor } from '../Editor'
+import { TLOverlay } from './OverlayUtil'
+
+/** @public */
+export interface OverlayOptionsWithDisplayValues<
+	Overlay extends TLOverlay,
+	DisplayValues extends object,
+> {
+	getDefaultDisplayValues(
+		editor: Editor,
+		overlay: Overlay,
+		theme: TLTheme,
+		colorMode: 'light' | 'dark'
+	): DisplayValues
+	getCustomDisplayValues(
+		editor: Editor,
+		overlay: Overlay,
+		theme: TLTheme,
+		colorMode: 'light' | 'dark'
+	): Partial<DisplayValues>
+}
+
+const dvCache = new WeakMap<
+	TLOverlay,
+	{ theme: TLTheme; colorMode: 'light' | 'dark'; values: object }
+>()
+
+/**
+ * Get the resolved display values for an overlay, merging the base values with any overrides.
+ *
+ * @public
+ */
+export function getOverlayDisplayValues<Overlay extends TLOverlay, DisplayValues extends object>(
+	util: { editor: Editor; options: OverlayOptionsWithDisplayValues<Overlay, DisplayValues> },
+	overlay: Overlay,
+	colorMode?: 'light' | 'dark'
+): DisplayValues {
+	const theme = util.editor.getCurrentTheme()
+	const resolvedColorMode = colorMode ?? util.editor.getColorMode()
+	const cached = dvCache.get(overlay)
+	if (cached && cached.theme === theme && cached.colorMode === resolvedColorMode) {
+		return cached.values as DisplayValues
+	}
+	const values = {
+		...util.options.getDefaultDisplayValues(util.editor, overlay, theme, resolvedColorMode),
+		...util.options.getCustomDisplayValues(util.editor, overlay, theme, resolvedColorMode),
+	}
+	dvCache.set(overlay, { theme, colorMode: resolvedColorMode, values })
+	return values
+}

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

@@ -15,6 +15,7 @@ import { TLDragShapesInInfo, TLDragShapesOutInfo } from './ShapeUtil'
  * - `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
@@ -35,8 +36,10 @@ import { TLDragShapesInInfo, TLDragShapesOutInfo } from './ShapeUtil'
  *     return <SVGContainer>...</SVGContainer>
  *   }
  *
- *   override indicator(shape: MyContainerShape) {
- *     return <rect width={shape.props.w} height={shape.props.h} />
+ *   override getIndicatorPath(shape: MyContainerShape) {
+ *     const path = new Path2D()
+ *     path.rect(0, 0, shape.props.w, shape.props.h)
+ *     return path
  *   }
  * }
  * ```
@@ -58,6 +61,10 @@ export abstract class BaseFrameLikeShapeUtil<
 		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
 	}

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).
-	 *
-	 * @param shape - The shape.
-	 * @public
-	 */
-	abstract indicator(shape: Shape): any
-
-	/**
-	 * Whether to use the legacy React-based indicator rendering.
+	 * 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.
 	 *
-	 * 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
 	}
 
 	/**
@@ -556,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.
@@ -566,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/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

@@ -169,14 +169,19 @@ export function useCanvasEvents() {
 				// 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. The real
-				// browser contextmenu is always suppressed: right-click behavior has
-				// already been decided by our pointer handling (either we dispatched a
-				// synthetic to open the menu at the release position, or we panned and
-				// don't want a menu at all).
-				if (e.nativeEvent.isTrusted) {
-					preventDefault(e)
-				}
+				// 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 {

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,
 		}),