@tldraw/editor 4.6.0-canary.4e3f067c74e9 → 4.6.0-canary.4ea18eb3570c

package/dist-cjs/index.d.ts

@@ -19,7 +19,6 @@ import { JsonObject } from '@tldraw/utils';
 import { JSX } from 'react/jsx-runtime';
 import { LegacyMigrations } from '@tldraw/store';
 import { MigrationSequence } from '@tldraw/store';
-import { NamedExoticComponent } from 'react';
 import { Node as Node_2 } from '@tiptap/pm/model';
 import { PerformanceTracker } from '@tldraw/utils';
 import { PointerEvent as PointerEvent_2 } from 'react';
@@ -220,6 +219,56 @@ export declare abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> ext
     getInterpolatedProps(startShape: Shape, endShape: Shape, t: number): Shape['props'];
 }
 
+/**
+ * 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
+ * - `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 declare abstract class BaseFrameLikeShapeUtil<Shape extends TLBaseBoxShape> extends BaseBoxShapeUtil<Shape> {
+    isFrameLike(_shape: Shape): boolean;
+    providesBackgroundForChildren(): boolean;
+    canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']): boolean;
+    getClipPath(shape: Shape): undefined | Vec[];
+    onDragShapesIn(shape: Shape, draggingShapes: TLShape[], { initialParentIds, initialIndices }: TLDragShapesInInfo): void;
+    onDragShapesOut(shape: Shape, draggingShapes: TLShape[], info: TLDragShapesOutInfo): void;
+}
+
 /** @public */
 export declare interface BatchMeasurementRequest {
     html: string;
@@ -881,51 +930,21 @@ export declare const DEFAULT_THEME: TLTheme;
 /** @public @react */
 export declare function DefaultBackground(): JSX.Element;
 
-/** @public @react */
-export declare const DefaultBrush: ({ brush, color, opacity, className }: TLBrushProps) => JSX.Element;
-
 /** @public @react */
 export declare function DefaultCanvas({ className }: TLCanvasComponentProps): JSX.Element;
 
-/** @public @react */
-export declare function DefaultCollaboratorHint({ className, zoom, point, color, viewport, opacity }: TLCollaboratorHintProps): JSX.Element;
-
-/** @public @react */
-export declare const DefaultCursor: NamedExoticComponent<TLCursorProps>;
-
 /** @public @react */
 export declare const DefaultErrorFallback: TLErrorFallbackComponent;
 
 /** @public @react */
 export declare function DefaultGrid({ x, y, z, size }: TLGridProps): JSX.Element;
 
-/** @public @react */
-export declare function DefaultHandle({ handle, isCoarse, className, zoom }: TLHandleProps): JSX.Element;
-
-/** @public @react */
-export declare const DefaultHandles: ({ children }: TLHandlesProps) => JSX.Element;
-
-/** @public @react */
-export declare function DefaultScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps): JSX.Element | null;
-
 /** @public @react */
 export declare function DefaultSelectionBackground({ bounds, rotation }: TLSelectionBackgroundProps): JSX.Element;
 
-/** @public @react */
-export declare function DefaultSelectionForeground({ bounds, rotation }: TLSelectionForegroundProps): JSX.Element;
-
-/** @public @react */
-export declare const DefaultShapeIndicator: NamedExoticComponent<TLShapeIndicatorProps>;
-
-/** @public @react */
-export declare const DefaultShapeIndicators: NamedExoticComponent<TLShapeIndicatorsProps>;
-
 /** @public @react */
 export declare const DefaultShapeWrapper: ForwardRefExoticComponent<TLShapeWrapperProps & RefAttributes<HTMLDivElement>>;
 
-/** @public @react */
-export declare function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps): JSX.Element;
-
 /** @public @react */
 export declare function DefaultSpinner(props: React.SVGProps<SVGSVGElement>): JSX.Element;
 
@@ -996,6 +1015,7 @@ export declare const defaultTldrawOptions: {
     readonly onBeforePasteFromClipboard: undefined;
     readonly onClipboardPasteRaw: undefined;
     readonly quickZoomPreservesScreenBounds: true;
+    readonly rightClickPanning: true;
     readonly snapThreshold: 8;
     readonly spacebarPanning: true;
     readonly temporaryAssetPreviewLifetimeMs: 180000;
@@ -1103,7 +1123,7 @@ export declare class EdgeScrollManager {
 /** @public */
 export declare class Editor extends EventEmitter<TLEventMap> {
     readonly id: string;
-    constructor({ store, user, shapeUtils, bindingUtils, assetUtils: assetUtilConstructors, tools, getContainer, cameraOptions, initialState, autoFocus, options: _options, textOptions: _textOptions, getShapeVisibility, colorScheme, fontAssetUrls, themes, initialTheme }: TLEditorOptions);
+    constructor({ store, user, shapeUtils, bindingUtils, assetUtils: assetUtilConstructors, overlayUtils: overlayUtilConstructors, tools, getContainer, cameraOptions, initialState, autoFocus, options: _options, textOptions: _textOptions, getShapeVisibility, colorScheme, fontAssetUrls, themes, initialTheme }: TLEditorOptions);
     private readonly _getShapeVisibility?;
     private getIsShapeHiddenCache;
     isShapeHidden(shapeOrId: TLShape | TLShapeId): boolean;
@@ -1166,6 +1186,12 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     readonly snaps: SnapManager;
+    /**
+     * A manager for performance measurement hooks.
+     *
+     * @public
+     */
+    readonly performance: PerformanceManager;
     /* Excluded from this release type: _spatialIndex */
     /**
      * A manager for the any asynchronous events and making sure they're
@@ -1179,6 +1205,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
         setInterval: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number;
         setTimeout: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number;
     };
+    /* Excluded from this release type: _collaboratorVisibilityClock */
     /**
      * A manager for the user and their preferences.
      *
@@ -1204,6 +1231,12 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     readonly scribbles: ScribbleManager;
+    /**
+     * A manager for canvas overlay UI elements (selection handles, shape handles, etc.).
+     *
+     * @public
+     */
+    readonly overlays: OverlayManager;
     /**
      * A manager for side effects and correct state enforcement. See {@link @tldraw/store#StoreSideEffects} for details.
      *
@@ -2456,6 +2489,23 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getCollaboratorsOnCurrentPage(): TLInstancePresence[];
+    /**
+     * Returns a list of presence records for peer collaborators who should currently be
+     * shown in the UI. Filters {@link Editor.getCollaborators} by activity state
+     * (active / idle / inactive) and visibility rules such as following and highlighted
+     * users. Re-evaluates on the collaborator visibility clock, so callers don't need to
+     * drive their own activity timer.
+     *
+     * @public
+     */
+    getVisibleCollaborators(): TLInstancePresence[];
+    /**
+     * Returns a list of presence records for peer collaborators who should currently be
+     * shown in the UI, filtered to those on the current page.
+     *
+     * @public
+     */
+    getVisibleCollaboratorsOnCurrentPage(): TLInstancePresence[];
     /**
      * Get the current user's ID for attribution purposes.
      * Also ensures a `user:` record exists in the store for the current user.
@@ -3116,6 +3166,20 @@ export declare class Editor extends EventEmitter<TLEventMap> {
         type: T['type'];
     }>;
     isShapeOfType<T extends TLShape = TLShape>(shapeId: TLShapeId, type: T['type']): boolean;
+    /**
+     * Get whether a shape behaves like a frame — a container that has child
+     * shapes, requires full-brush selection, blocks erasure from inside, etc.
+     *
+     * @example
+     * ```ts
+     * const isFrameLike = editor.isShapeFrameLike(someShape)
+     * ```
+     *
+     * @param shape - The shape (or shape id) to test.
+     *
+     * @public
+     */
+    isShapeFrameLike(shape: TLShape | TLShapeId): boolean;
     /**
      * Get a shape by its id.
      *
@@ -4775,14 +4839,14 @@ export declare class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
     static type: "group";
     static props: RecordProps<TLGroupShape>;
     static migrations: TLPropsMigrations;
-    hideSelectionBoundsFg(): boolean;
+    hideSelectionBoundsFg(shape: TLGroupShape): boolean;
     canBind(): boolean;
     canResize(): boolean;
     canResizeChildren(): boolean;
     getDefaultProps(): TLGroupShape['props'];
     getGeometry(shape: TLGroupShape): Geometry2d;
     component(shape: TLGroupShape): JSX.Element | null;
-    indicator(shape: TLGroupShape): JSX.Element;
+    getIndicatorPath(shape: TLGroupShape): Path2D;
     onChildrenChange(group: TLGroupShape): void;
 }
 
@@ -5061,6 +5125,12 @@ export declare class InputsManager {
     get isPointing(): boolean;
     set isPointing(isPointing: boolean);
     /* Excluded from this release type: setIsPointing */
+    private _isRightPointing;
+    /**
+     * Whether the user is right-click pointing (before drag threshold).
+     */
+    getIsRightPointing(): boolean;
+    /* Excluded from this release type: setIsRightPointing */
     private _isPinching;
     /**
      * Whether the user is pinching.
@@ -5404,6 +5474,179 @@ export declare function openWindow(url: string, target?: string, allowReferrer?:
 /** @public */
 export declare type OptionalKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 
+/** @public */
+export declare class OverlayManager {
+    readonly editor: Editor;
+    constructor(editor: Editor);
+    /* Excluded from this release type: _overlayUtils */
+    /* Excluded from this release type: registerUtil */
+    /**
+     * Get an overlay util by type string, overlay instance, or by passing
+     * a util class as a generic parameter for type-safe lookup.
+     *
+     * @example
+     * ```ts
+     * const util = editor.overlays.getOverlayUtil('brush')
+     * const util = editor.overlays.getOverlayUtil<BrushOverlayUtil>('brush')
+     * const util = editor.overlays.getOverlayUtil(myOverlay)
+     * ```
+     *
+     * @public
+     */
+    getOverlayUtil<T extends OverlayUtil>(type: T extends OverlayUtil<infer O> ? O['type'] : string): T;
+    getOverlayUtil<O extends TLOverlay>(overlay: O): OverlayUtil<O>;
+    /**
+     * Returns all registered overlay utils in paint order (ascending zIndex).
+     * Utils with the same zIndex preserve their registration order.
+     *
+     * @public
+     */
+    getOverlayUtilsInZOrder(): OverlayUtil[];
+    /**
+     * Reactive list of active overlay utils paired with the overlays they
+     * produced for the current editor state, in paint order (ascending
+     * zIndex). Both the hit-test and render paths read from this single
+     * cached scan instead of each re-deriving the active set. Active utils
+     * are included even when their `getOverlays()` returns an empty array,
+     * since `render()` may still draw non-interactive UI (e.g. the selection
+     * bounding box during brushing).
+     *
+     * @public
+     */
+    getActiveOverlayEntries(): TLOverlayEntry[];
+    /**
+     * Reactively computed list of all currently active overlays, in paint order.
+     * @public
+     */
+    getCurrentOverlays(): TLOverlay[];
+    private _geometryCache;
+    /**
+     * Get hit-test geometry for an overlay, cached by overlay identity. Lets
+     * hit-testing on a pointermove storm skip the per-overlay geometry
+     * allocation that {@link OverlayUtil.getGeometry} would otherwise do on
+     * every call.
+     *
+     * @public
+     */
+    getOverlayGeometry(overlay: TLOverlay): Geometry2d | null;
+    /**
+     * The currently hovered overlay id.
+     * @public
+     */
+    private _hoveredOverlayId;
+    getHoveredOverlayId(): null | string;
+    getHoveredOverlay(): null | TLOverlay;
+    setHoveredOverlay(id: null | string): void;
+    /**
+     * Hit test all active overlays at a given page point.
+     * Returns the topmost overlay whose geometry contains the point, or null.
+     * Utils are walked from highest zIndex to lowest so the overlay painted on
+     * top also wins the hit test. Within a util, overlays are walked in
+     * array order: the first overlay whose geometry contains the point wins,
+     * so utils should place highest-priority overlays first in `getOverlays`.
+     * Interactive overlays (those with geometry) are checked; non-interactive are skipped.
+     *
+     * @param point - Point in page coordinates
+     * @param margin - Hit test margin
+     * @public
+     */
+    getOverlayAtPoint(point: VecLike, margin?: number): null | TLOverlay;
+}
+
+/**
+ * Base class for overlay utilities. Overlays are ephemeral UI elements rendered
+ * on top of the canvas (selection handles, rotation corners, shape handles, etc.).
+ *
+ * Each OverlayUtil defines a type of overlay and knows how to:
+ * - Determine when its overlays should be active (predicate)
+ * - Produce overlay instances from current editor state
+ * - Provide hit-test geometry for interactive overlays
+ * - Provide cursor style on hover
+ * - Render into a canvas 2D context
+ *
+ * @public
+ */
+export declare abstract class OverlayUtil<T extends TLOverlay = TLOverlay> {
+    editor: Editor;
+    constructor(editor: Editor);
+    static type: string;
+    /**
+     * Options for this overlay util. Override this to provide customization options.
+     * Use {@link OverlayUtil.configure} to customize existing overlay utils.
+     *
+     * `zIndex` controls paint and hit-test order across utils — higher numbers
+     * paint on top and are hit-tested first. Ties resolve by registration order.
+     * Defaults to `0`; built-in utils use larger integers (100, 200, …) with
+     * gaps so custom utils can slot between.
+     *
+     * @public
+     */
+    options: {
+        zIndex?: number;
+    };
+    /**
+     * Create a new overlay util class with the given options merged in.
+     *
+     * @example
+     * ```ts
+     * const MyBrush = BrushOverlayUtil.configure({ fill: 'rgba(0,0,255,0.1)' })
+     * ```
+     *
+     * @public
+     */
+    static configure<T extends TLOverlayUtilConstructor<any>>(this: T, options: T extends new (...args: any[]) => {
+        options: infer Options;
+    } ? Partial<Options> : never): T;
+    /**
+     * Whether this overlay util's overlays should currently be active.
+     * Checked reactively to determine which overlays exist at any given time.
+     */
+    abstract isActive(): boolean;
+    /**
+     * Returns the overlay instances that currently exist.
+     * Called only when `isActive()` returns true.
+     */
+    abstract getOverlays(): T[];
+    /**
+     * Returns hit-test geometry for an overlay instance, in page coordinates.
+     * Return null for non-interactive overlays (e.g. snap indicators, scribbles).
+     */
+    getGeometry(_overlay: T): Geometry2d | null;
+    /**
+     * Returns the cursor type to show when hovering this overlay.
+     */
+    getCursor(_overlay: T): TLCursorType | undefined;
+    /**
+     * Called when the user points down on this overlay, before the default
+     * routing runs. Acts as an interrupt: define it to take over the event.
+     *
+     * Return `false` to continue with the default behavior (e.g. the
+     * built-in rotate/resize handle transitions or shape-handle dispatch).
+     * Return `true` — or nothing at all — to skip the default. In other
+     * words, once you override this method you own the event unless you
+     * explicitly opt back in by returning `false`.
+     */
+    onPointerDown?(overlay: T, info: TLPointerEventInfo): boolean | void;
+    /**
+     * Render all active overlays into the canvas context.
+     * The context is already transformed to page space (camera transform applied).
+     * Called reactively when overlays or editor state changes.
+     */
+    render(_ctx: CanvasRenderingContext2D, _overlays: T[]): void;
+    /**
+     * Optional: render all active overlays into the minimap canvas.
+     * The context is already transformed to page space (minimap camera applied),
+     * so overlays can use the same page-space coordinates as in {@link OverlayUtil.render}.
+     *
+     * `zoom` is the minimap's screen-pixels-per-page-unit, analogous to
+     * `editor.getCamera().z`; use `1 / zoom` for one-minimap-pixel line widths.
+     *
+     * Most overlays should leave this blank — only overlays that are meaningful
+     * at minimap scale (e.g. brushes, collaborator cursors) should opt in.
+     */
+    renderMinimap(_ctx: CanvasRenderingContext2D, _overlays: T[], _zoom: number): void;
+}
+
 /**
  * Parses a string created by {@link createDeepLinkString} back into a deep link descriptor.
  *
@@ -5417,6 +5660,94 @@ export declare function parseDeepLinkString(deepLinkString: string): TLDeepLink;
 /** @public */
 export declare type PerfectDashTerminal = 'none' | 'outset' | 'skip';
 
+/**
+ * Optional adapter that pipes PerformanceManager events into browser
+ * `performance.mark()` / `performance.measure()` for DevTools integration.
+ *
+ * Tree-shakeable — only included if imported.
+ *
+ * @example
+ * ```ts
+ * const adapter = new PerformanceApiAdapter(editor.performance)
+ * // ... later
+ * adapter.dispose()
+ * ```
+ *
+ * @public
+ */
+export declare class PerformanceApiAdapter {
+    private cleanups;
+    constructor(perfManager: PerformanceManager);
+    /** Remove all listeners and stop piping events. @public */
+    dispose(): void;
+}
+
+/**
+ * Manages performance event subscriptions for the editor. Available as `editor.performance`.
+ *
+ * Listeners are lazy — internal editor hooks (frame, shape events) are only attached while
+ * at least one subscriber exists, so there is zero overhead when unused.
+ *
+ * @example
+ * ```ts
+ * const unsub = editor.performance.on('interaction-end', (event) => {
+ *   console.log(`${event.name}: ${event.fps.toFixed(1)} fps, p95=${event.p95FrameTime.toFixed(1)}ms`)
+ * })
+ * ```
+ *
+ * @public
+ */
+export declare class PerformanceManager {
+    /* Excluded from this release type: emitter */
+    private editor;
+    private activeInteraction;
+    private activeCamera;
+    private frameCleanup;
+    private shapeCreatedCleanup;
+    private shapeEditedCleanup;
+    private shapeDeletedCleanup;
+    private loafObserver;
+    constructor(editor: Editor);
+    /**
+     * Subscribe to a performance event. Returns an unsubscribe function.
+     *
+     * @example
+     * ```ts
+     * const unsub = editor.performance.on('interaction-end', (event) => {
+     *   sendToAnalytics({ name: event.name, fps: event.fps, p95: event.p95FrameTime })
+     * })
+     * // later: unsub()
+     * ```
+     *
+     * @public
+     */
+    on<K extends keyof TLPerfEventMap>(event: K, fn: (...args: TLPerfEventMap[K]) => void): () => void;
+    /**
+     * Subscribe to a performance event once. The listener is removed after the first invocation.
+     * Returns an unsubscribe function for early removal.
+     *
+     * @public
+     */
+    once<K extends keyof TLPerfEventMap>(event: K, fn: (...args: TLPerfEventMap[K]) => void): () => void;
+    /* Excluded from this release type: dispose */
+    /* Excluded from this release type: _notifyInteractionStart */
+    /* Excluded from this release type: _notifyInteractionEnd */
+    /* Excluded from this release type: _notifyCameraOperation */
+    /* Excluded from this release type: _notifyUndoRedo */
+    private _startCameraSession;
+    private _endCameraSession;
+    private _onFrame;
+    private _onShapesCreated;
+    private _onShapesEdited;
+    private _onShapesDeleted;
+    private _startLoafObserver;
+    private _stopLoafObserver;
+    private _needsFrameListener;
+    private _needsLoafObserver;
+    private _maybeAttachLazyListeners;
+    private _maybeDetachLazyListeners;
+}
+
 /**
  * Find the approximate perimeter of an ellipse.
  *
@@ -5848,6 +6179,28 @@ export declare function setRuntimeOverrides(input: Partial<typeof runtime>): voi
 /** @public */
 export declare function setUserPreferences(user: TLUserPreferences): void;
 
+/**
+ * Overlay util for shape indicators — the selection / hover / hint outlines drawn
+ * under the selection foreground. Paints local indicators in the theme's
+ * selection color and remote collaborator indicators in each peer's color.
+ *
+ * Non-interactive: contributes no hit-test geometry.
+ *
+ * @public
+ */
+export declare class ShapeIndicatorOverlayUtil extends OverlayUtil<TLShapeIndicatorOverlay> {
+    static type: string;
+    options: {
+        hintedLineWidth: number;
+        lineWidth: number;
+        zIndex: number;
+    };
+    isActive(): boolean;
+    getOverlays(): TLShapeIndicatorOverlay[];
+    render(ctx: CanvasRenderingContext2D, overlays: TLShapeIndicatorOverlay[]): void;
+    private _strokeIndicatorBatch;
+}
+
 /** @public */
 export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
     editor: Editor;
@@ -5944,37 +6297,30 @@ export declare 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;
+    abstract getIndicatorPath(shape: Shape): TLIndicatorPath | undefined;
     /**
-     * Get a Path2D for rendering the shape's indicator on the canvas.
+     * Get JSX describing the shape's indicator (as an SVG element).
      *
-     * 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}.
-     *
-     * 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;
+    indicator(_shape: Shape): any;
     /**
      * Get the font faces that should be rendered in the document in order for this shape to render
      * correctly.
@@ -6008,7 +6354,7 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
      *
      * @public
      */
-    canBind(_opts: TLShapeUtilCanBindOpts): boolean;
+    canBind(opts: TLShapeUtilCanBindOpts): boolean;
     /**
      * Whether the shape can be double clicked to edit.
      *
@@ -6142,6 +6488,14 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
      * @public
      */
     isAspectRatioLocked(shape: Shape): boolean;
+    /**
+     * 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;
     /**
      * 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
@@ -6189,7 +6543,7 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
      * @param type - The shape type.
      * @public
      */
-    canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']): boolean;
+    canReceiveNewChildrenOfType(shape: Shape, type: TLShape['type']): boolean;
     /**
      * Get the shape as an SVG object.
      *
@@ -6632,6 +6986,8 @@ export declare abstract class StateNode implements Partial<TLEventHandlers> {
     static children?: () => TLStateNodeConstructor[];
     static isLockable: boolean;
     static useCoalescedEvents: boolean;
+    /** Set to `true` in subclasses to emit interaction-start/end performance events when this state is entered/exited. */
+    static trackPerformance: boolean;
     id: string;
     type: 'branch' | 'leaf' | 'root';
     shapeType?: string;
@@ -6905,6 +7261,9 @@ export declare type TLAnyAssetUtilConstructor = TLAssetUtilConstructor<any>;
 /** @public */
 export declare type TLAnyBindingUtilConstructor = TLBindingUtilConstructor<any>;
 
+/** @public */
+export declare type TLAnyOverlayUtilConstructor = TLOverlayUtilConstructor<any>;
+
 /** @public */
 export declare type TLAnyShapeUtilConstructor = TLShapeUtilConstructor<any>;
 
@@ -6948,15 +7307,6 @@ export declare interface TLBindingUtilConstructor<T extends TLBinding, U extends
     migrations?: TLPropsMigrations;
 }
 
-/** @public */
-export declare interface TLBrushProps {
-    userId?: string;
-    brush: BoxModel;
-    color?: string;
-    opacity?: number;
-    className?: string;
-}
-
 /** @public */
 export declare interface TLCameraConstraints {
     /** The bounds (in page space) of the constrained space */
@@ -7005,6 +7355,29 @@ export declare interface TLCameraConstraints {
     };
 }
 
+/**
+ * Emitted when a camera operation ends (after a 50ms debounce), with aggregated frame time stats.
+ * @public
+ */
+export declare interface TLCameraEndPerfEvent extends TLPerfFrameTimeStats {
+    /** Whether this was a pan or zoom operation. */
+    type: 'panning' | 'zooming';
+    /** Total shapes on the current page. */
+    shapeCount: number;
+    /** Number of shapes visible (not culled) in the viewport. */
+    visibleShapeCount: number;
+    /** Number of shapes culled (off-screen) from rendering. */
+    culledShapeCount: number;
+    /** Viewport width in screen pixels. */
+    viewportWidth: number;
+    /** Viewport height in screen pixels. */
+    viewportHeight: number;
+    /** Camera zoom level (`camera.z`) at session end. */
+    zoomLevel: number;
+    /** `performance.now()` when the camera session ended. */
+    timestamp: number;
+}
+
 /** @public */
 export declare interface TLCameraMoveOptions {
     /** Whether to move the camera immediately, rather than on the next tick. */
@@ -7043,6 +7416,17 @@ export declare interface TLCameraOptions {
     constraints?: TLCameraConstraints;
 }
 
+/**
+ * Emitted when a camera operation (pan or zoom) begins.
+ * @public
+ */
+export declare interface TLCameraStartPerfEvent {
+    /** Whether this is a pan or zoom operation. */
+    type: 'panning' | 'zooming';
+    /** `performance.now()` when the camera session started. */
+    timestamp: number;
+}
+
 /** @public */
 export declare type TLCancelEvent = (info: TLCancelEventInfo) => void;
 
@@ -7110,17 +7494,6 @@ export declare interface TLClipboardWriteInfo {
     readonly source: 'menu' | 'native';
 }
 
-/** @public */
-export declare interface TLCollaboratorHintProps {
-    userId: string;
-    className?: string;
-    point: VecModel;
-    viewport: Box;
-    zoom: number;
-    opacity?: number;
-    color: string;
-}
-
 /** @public */
 export declare type TLCompleteEvent = (info: TLCompleteEventInfo) => void;
 
@@ -7165,17 +7538,6 @@ export declare interface TLCurrentUser {
     readonly setUserPreferences: (userPreferences: TLUserPreferences) => void;
 }
 
-/** @public */
-export declare interface TLCursorProps {
-    userId: string;
-    className?: string;
-    point: null | VecModel;
-    zoom: number;
-    color?: string;
-    name: null | string;
-    chatMessage: string;
-}
-
 /** @public */
 export declare type TLDeepLink = {
     bounds: BoxModel;
@@ -7269,6 +7631,10 @@ export declare interface TldrawEditorBaseProps {
      * An array of asset utils to use in the editor.
      */
     assetUtils?: readonly TLAnyAssetUtilConstructor[];
+    /**
+     * An array of overlay utils to use in the editor for canvas overlay UI elements.
+     */
+    overlayUtils?: readonly TLAnyOverlayUtilConstructor[];
     /**
      * An array of tools to add to the editor's state chart.
      */
@@ -7530,6 +7896,12 @@ export declare 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()`.
@@ -7659,34 +8031,17 @@ export declare interface TLDropShapesOverInfo {
 /** @public */
 export declare 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;
     ErrorFallback?: TLErrorFallbackComponent;
     ShapeErrorFallback?: TLShapeErrorFallbackComponent;
-    ShapeIndicatorErrorFallback?: TLShapeIndicatorErrorFallbackComponent;
 }
 
 /** @public */
@@ -7708,6 +8063,11 @@ export declare interface TLEditorOptions {
      * An array of asset utils to use in the editor. These will be used to handle asset-type-specific behavior.
      */
     assetUtils?: readonly TLAnyAssetUtilConstructor[];
+    /**
+     * An array of overlay utils to use in the editor. These define canvas overlay UI elements
+     * like selection handles, rotation corners, shape handles, etc.
+     */
+    overlayUtils?: readonly TLAnyOverlayUtilConstructor[];
     /**
      * An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor.
      */
@@ -7981,6 +8341,21 @@ export declare interface TLFilesExternalContent extends TLBaseExternalContent {
     ignoreParent?: boolean;
 }
 
+/**
+ * Emitted every animation frame when at least one `'frame'` listener is registered.
+ * @public
+ */
+export declare interface TLFramePerfEvent {
+    /** Time since the last frame in ms. */
+    elapsed: number;
+    /** Total shapes on the current page. */
+    shapeCount: number;
+    /** Number of shapes culled (off-screen) from rendering. */
+    culledShapeCount: number;
+    /** Number of shapes visible (not culled) in the viewport. */
+    visibleShapeCount: number;
+}
+
 /** Additional options for the {@link ShapeUtil.getGeometry} method.
  *
  * @public
@@ -8059,20 +8434,6 @@ export declare interface TLHandleDragInfo<T extends TLShape> {
     initial?: T | undefined;
 }
 
-/** @public */
-export declare interface TLHandleProps {
-    shapeId: TLShapeId;
-    handle: TLHandle;
-    zoom: number;
-    isCoarse: boolean;
-    className?: string;
-}
-
-/** @public */
-export declare interface TLHandlesProps {
-    children: ReactNode;
-}
-
 /** @public */
 export declare interface TLHistoryBatchOptions {
     /**
@@ -8123,6 +8484,38 @@ export declare type TLIndicatorPath = {
     path: Path2D;
 } | Path2D;
 
+/**
+ * Emitted when an interaction state is exited, with aggregated frame time stats.
+ * @public
+ */
+export declare interface TLInteractionEndPerfEvent extends TLPerfFrameTimeStats {
+    /** The state node id (e.g. `'translating'`). */
+    name: string;
+    /** Full tool path (e.g. `'select.translating'`). */
+    path: string;
+    /** Total shapes on the current page. */
+    shapeCount: number;
+    /** Breakdown of selected shape types at interaction start (e.g. `{ geo: 2, draw: 1 }`). */
+    selectedShapeTypes: Record<string, number>;
+    /** Camera zoom level (`camera.z`) at interaction end. */
+    zoomLevel: number;
+    /** `performance.now()` when the interaction ended. */
+    timestamp: number;
+}
+
+/**
+ * Emitted when an interaction state (e.g. translating, resizing) is entered.
+ * @public
+ */
+export declare interface TLInteractionStartPerfEvent {
+    /** The state node id (e.g. `'translating'`). */
+    name: string;
+    /** Full tool path (e.g. `'select.translating'`). */
+    path: string;
+    /** `performance.now()` when the interaction started. */
+    timestamp: number;
+}
+
 /** @public */
 export declare type TLInterruptEvent = (info: TLInterruptEventInfo) => void;
 
@@ -8370,6 +8763,130 @@ export declare const tlmenus: {
  */
 export declare type TLOnMountHandler = (editor: Editor) => (() => undefined | void) | undefined | void;
 
+/** @public */
+export declare interface TLOverlay<Props = Record<string, unknown>> {
+    /**
+     * Globally unique id for this overlay instance across all overlay utils.
+     * Hit-test and hover lookup key on `id` alone, so utils must namespace their
+     * ids (e.g. `'selection_fg:top_left'`, `'handle:<shapeId>:<handleId>'`) to
+     * avoid colliding with overlays from other utils.
+     */
+    id: string;
+    /** The overlay util type that owns this instance */
+    type: string;
+    /** Arbitrary props for the overlay (handle id, corner name, etc.) */
+    props: Props;
+}
+
+/**
+ * An active overlay util paired with the overlays it produced for the current
+ * editor state. Returned by {@link OverlayManager.getActiveOverlayEntries} so
+ * hit-test, render, and debug paths share a single scan per reactive tick.
+ *
+ * @public
+ */
+export declare interface TLOverlayEntry {
+    util: OverlayUtil;
+    overlays: TLOverlay[];
+}
+
+/** @public */
+export declare interface TLOverlayUtilConstructor<U extends OverlayUtil = OverlayUtil> {
+    new (editor: Editor): U;
+    type: string;
+    configure<T extends TLOverlayUtilConstructor<any>>(this: T, options: T extends new (...args: any[]) => {
+        options: infer Options;
+    } ? Partial<Options> : never): T;
+}
+
+/**
+ * Map of all performance event names to their payload types.
+ * Used with {@link PerformanceManager.on} and {@link PerformanceManager.once}.
+ * @public
+ */
+export declare interface TLPerfEventMap {
+    /** An interaction state was entered. */
+    'interaction-start': [TLInteractionStartPerfEvent];
+    /** An interaction state was exited, with aggregated frame time stats. */
+    'interaction-end': [TLInteractionEndPerfEvent];
+    /** A camera operation (pan/zoom) began. */
+    'camera-start': [TLCameraStartPerfEvent];
+    /** A camera operation ended (after debounce), with aggregated frame time stats. */
+    'camera-end': [TLCameraEndPerfEvent];
+    /** Shapes were created. */
+    'shapes-created': [TLShapeOperationPerfEvent];
+    /** Shapes were updated. */
+    'shapes-updated': [TLShapeOperationPerfEvent];
+    /** Shapes were deleted. */
+    'shapes-deleted': [TLShapeOperationPerfEvent];
+    /** An animation frame was rendered. Only fires when listeners are registered. */
+    frame: [TLFramePerfEvent];
+    /** An undo operation was performed. */
+    undo: [TLUndoRedoPerfEvent];
+    /** A redo operation was performed. */
+    redo: [TLUndoRedoPerfEvent];
+}
+
+/**
+ * Common frame time statistics shared by interaction and camera end events.
+ * @public
+ */
+export declare interface TLPerfFrameTimeStats {
+    /** Total duration of the session in ms. */
+    duration: number;
+    /** Average frames per second during the session. */
+    fps: number;
+    /** Total number of frames recorded. */
+    frameCount: number;
+    /** Mean frame duration in ms. */
+    avgFrameTime: number;
+    /** Median (p50) frame duration in ms. */
+    medianFrameTime: number;
+    /** 95th percentile frame duration in ms. */
+    p95FrameTime: number;
+    /** 99th percentile frame duration in ms. */
+    p99FrameTime: number;
+    /** Shortest frame duration in ms. */
+    minFrameTime: number;
+    /** Longest frame duration in ms. */
+    maxFrameTime: number;
+    /** Raw frame durations for local analysis. Exclude when sending to analytics. */
+    frameTimes: number[];
+    /**
+     * Long animation frames observed during this period (Chromium 123+).
+     * Only present when the browser supports the Long Animation Frames API and
+     * at least one long frame was observed.
+     * Exclude when sending to analytics — entries are large and contain script URLs.
+     */
+    longAnimationFrames?: TLPerfLongAnimationFrame[];
+}
+
+/**
+ * A long animation frame observed by the browser during an interaction.
+ * Available only in browsers that support the Long Animation Frames API (Chromium 123+).
+ * @public
+ */
+export declare interface TLPerfLongAnimationFrame {
+    /** Frame start time (relative to timeOrigin). */
+    startTime: number;
+    /** Total frame duration in ms. */
+    duration: number;
+    /** Time the main thread was blocked in ms. */
+    blockingDuration: number;
+    /** Scripts that contributed to the long frame. */
+    scripts: TLPerfLongAnimationFrameScript[];
+}
+
+/** A script attribution entry from a long animation frame. @public */
+export declare interface TLPerfLongAnimationFrameScript {
+    /** The script source URL (may be empty for inline scripts). */
+    sourceURL: string;
+    /** The function name or invoker description. */
+    invoker: string;
+    /** Time spent in this script in ms. */
+    duration: number;
+}
+
 /** @public */
 export declare type TLPinchEvent = (info: TLPinchEventInfo) => void;
 
@@ -8409,6 +8926,10 @@ export declare type TLPointerEventTarget = {
     handle?: TLSelectionHandle;
     shape?: undefined;
     target: 'selection';
+} | {
+    overlay: TLOverlay;
+    shape?: undefined;
+    target: 'overlay';
 } | {
     shape: TLShape;
     target: 'shape';
@@ -8479,28 +9000,12 @@ export declare type TLResizeShapeOptions = Partial<{
 
 /* Excluded from this release type: TLRotationSnapshot */
 
-/** @public */
-export declare interface TLScribbleProps {
-    userId?: string;
-    scribble: TLScribble;
-    zoom: number;
-    color?: string;
-    opacity?: number;
-    className?: string;
-}
-
 /** @public */
 export declare interface TLSelectionBackgroundProps {
     bounds: Box;
     rotation: number;
 }
 
-/** @public */
-export declare interface TLSelectionForegroundProps {
-    bounds: Box;
-    rotation: number;
-}
-
 /** @public */
 export declare type TLSelectionHandle = RotateCorner | SelectionCorner | SelectionEdge;
 
@@ -8535,26 +9040,30 @@ export declare type TLShapeErrorFallbackComponent = ComponentType<{
 }>;
 
 /** @public */
-export declare type TLShapeIndicatorErrorFallbackComponent = ComponentType<{
-    error: unknown;
-}>;
-
-/** @public */
-export declare interface TLShapeIndicatorProps {
-    userId?: string;
-    shapeId: TLShapeId;
-    color?: string | undefined;
-    opacity?: number;
-    className?: string;
-    hidden?: boolean;
+export declare interface TLShapeIndicatorOverlay extends TLOverlay {
+    props: {
+        collaboratorIndicators: Array<{
+            color: string;
+            shapeIds: TLShapeId[];
+        }>;
+        hintingShapeIds: TLShapeId[];
+        idsToDisplay: TLShapeId[];
+    };
 }
 
-/** @public */
-export declare interface TLShapeIndicatorsProps {
-    /** Whether to hide all of the indicators */
-    hideAll?: boolean;
-    /** Whether to show all of the indicators */
-    showAll?: boolean;
+/**
+ * Emitted when shapes are created, updated, or deleted.
+ * @public
+ */
+export declare interface TLShapeOperationPerfEvent {
+    /** The operation type. */
+    operation: 'create' | 'delete' | 'update';
+    /** Number of shapes affected. */
+    count: number;
+    /** Breakdown by shape type (e.g. `{ geo: 2, draw: 1 }`). */
+    shapeTypes: Record<string, number>;
+    /** `performance.now()` when the operation occurred. */
+    timestamp: number;
 }
 
 /**
@@ -8627,13 +9136,6 @@ export declare interface TLShapeWrapperProps extends React.HTMLAttributes<HTMLDi
     children: ReactNode;
 }
 
-/** @public */
-export declare interface TLSnapIndicatorProps {
-    className?: string;
-    line: SnapIndicator;
-    zoom: number;
-}
-
 /** @public */
 export declare interface TLStateNodeConstructor {
     new (editor: Editor, parent?: StateNode): StateNode;
@@ -8642,6 +9144,7 @@ export declare interface TLStateNodeConstructor {
     children?(): TLStateNodeConstructor[];
     isLockable: boolean;
     useCoalescedEvents: boolean;
+    trackPerformance: boolean;
 }
 
 /** @public */
@@ -8819,6 +9322,19 @@ export declare interface TLTldrawExternalContentSource {
     data: TLContent;
 }
 
+/**
+ * Emitted after an undo or redo operation.
+ * @public
+ */
+export declare interface TLUndoRedoPerfEvent {
+    /** Whether this was an undo or redo. */
+    type: 'redo' | 'undo';
+    /** Number of undo steps remaining. */
+    undoDepth: number;
+    /** Number of redo steps remaining. */
+    redoDepth: number;
+}
+
 /** @public */
 export declare interface TLUpdatePointerOptions {
     /** Whether to update the pointer immediately, rather than on the next tick. */
@@ -9008,6 +9524,10 @@ export declare function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement
 export declare function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>): void;
 
 /**
+ * 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
  */