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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (150) hide show
  1. package/dist-cjs/index.d.ts +304 -168
  2. package/dist-cjs/index.js +7 -21
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/lib/TldrawEditor.js +3 -0
  5. package/dist-cjs/lib/TldrawEditor.js.map +2 -2
  6. package/dist-cjs/lib/components/default-components/CanvasOverlays.js +159 -0
  7. package/dist-cjs/lib/components/default-components/CanvasOverlays.js.map +7 -0
  8. package/dist-cjs/lib/components/default-components/DefaultCanvas.js +3 -214
  9. package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +3 -3
  10. package/dist-cjs/lib/editor/Editor.js +40 -0
  11. package/dist-cjs/lib/editor/Editor.js.map +2 -2
  12. package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js +14 -0
  13. package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js.map +2 -2
  14. package/dist-cjs/lib/editor/overlays/OverlayManager.js +154 -0
  15. package/dist-cjs/lib/editor/overlays/OverlayManager.js.map +7 -0
  16. package/dist-cjs/lib/editor/overlays/OverlayUtil.js +92 -0
  17. package/dist-cjs/lib/editor/overlays/OverlayUtil.js.map +7 -0
  18. package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js +158 -0
  19. package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js.map +7 -0
  20. package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js.map +2 -2
  21. package/dist-cjs/lib/editor/shapes/ShapeUtil.js +7 -22
  22. package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
  23. package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js +32 -2
  24. package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js.map +2 -2
  25. package/dist-cjs/lib/editor/types/event-types.js.map +2 -2
  26. package/dist-cjs/lib/hooks/EditorComponentsContext.js.map +2 -2
  27. package/dist-cjs/lib/hooks/useEditorComponents.js +0 -28
  28. package/dist-cjs/lib/hooks/useEditorComponents.js.map +2 -2
  29. package/dist-cjs/lib/hooks/usePeerIds.js +1 -36
  30. package/dist-cjs/lib/hooks/usePeerIds.js.map +2 -2
  31. package/dist-cjs/lib/options.js +0 -1
  32. package/dist-cjs/lib/options.js.map +2 -2
  33. package/dist-cjs/version.js +3 -3
  34. package/dist-cjs/version.js.map +1 -1
  35. package/dist-esm/index.d.mts +304 -168
  36. package/dist-esm/index.mjs +11 -39
  37. package/dist-esm/index.mjs.map +2 -2
  38. package/dist-esm/lib/TldrawEditor.mjs +3 -0
  39. package/dist-esm/lib/TldrawEditor.mjs.map +2 -2
  40. package/dist-esm/lib/components/default-components/CanvasOverlays.mjs +139 -0
  41. package/dist-esm/lib/components/default-components/CanvasOverlays.mjs.map +7 -0
  42. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +4 -215
  43. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +3 -3
  44. package/dist-esm/lib/editor/Editor.mjs +43 -0
  45. package/dist-esm/lib/editor/Editor.mjs.map +2 -2
  46. package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs +14 -0
  47. package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs.map +2 -2
  48. package/dist-esm/lib/editor/overlays/OverlayManager.mjs +136 -0
  49. package/dist-esm/lib/editor/overlays/OverlayManager.mjs.map +7 -0
  50. package/dist-esm/lib/editor/overlays/OverlayUtil.mjs +72 -0
  51. package/dist-esm/lib/editor/overlays/OverlayUtil.mjs.map +7 -0
  52. package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs +138 -0
  53. package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs.map +7 -0
  54. package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs.map +2 -2
  55. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +7 -22
  56. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
  57. package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs +32 -2
  58. package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs.map +2 -2
  59. package/dist-esm/lib/editor/types/event-types.mjs.map +2 -2
  60. package/dist-esm/lib/hooks/EditorComponentsContext.mjs.map +2 -2
  61. package/dist-esm/lib/hooks/useEditorComponents.mjs +0 -28
  62. package/dist-esm/lib/hooks/useEditorComponents.mjs.map +2 -2
  63. package/dist-esm/lib/hooks/usePeerIds.mjs +2 -40
  64. package/dist-esm/lib/hooks/usePeerIds.mjs.map +2 -2
  65. package/dist-esm/lib/options.mjs +0 -1
  66. package/dist-esm/lib/options.mjs.map +2 -2
  67. package/dist-esm/version.mjs +3 -3
  68. package/dist-esm/version.mjs.map +1 -1
  69. package/editor.css +3 -219
  70. package/package.json +7 -7
  71. package/src/index.ts +11 -38
  72. package/src/lib/TldrawEditor.tsx +9 -0
  73. package/src/lib/components/default-components/CanvasOverlays.tsx +165 -0
  74. package/src/lib/components/default-components/DefaultCanvas.tsx +5 -289
  75. package/src/lib/editor/Editor.test.ts +3 -1
  76. package/src/lib/editor/Editor.ts +66 -0
  77. package/src/lib/editor/managers/ThemeManager/defaultThemes.ts +14 -0
  78. package/src/lib/editor/overlays/OverlayManager.ts +183 -0
  79. package/src/lib/editor/overlays/OverlayUtil.ts +143 -0
  80. package/src/lib/editor/overlays/ShapeIndicatorOverlayUtil.ts +197 -0
  81. package/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx +4 -2
  82. package/src/lib/editor/shapes/ShapeUtil.ts +15 -25
  83. package/src/lib/editor/shapes/group/GroupShapeUtil.tsx +40 -3
  84. package/src/lib/editor/types/event-types.ts +2 -0
  85. package/src/lib/exports/getSvgJsx.test.ts +3 -1
  86. package/src/lib/hooks/EditorComponentsContext.tsx +0 -27
  87. package/src/lib/hooks/useEditorComponents.tsx +0 -28
  88. package/src/lib/hooks/usePeerIds.ts +6 -55
  89. package/src/lib/options.ts +0 -7
  90. package/src/version.ts +3 -3
  91. package/dist-cjs/lib/components/LiveCollaborators.js +0 -152
  92. package/dist-cjs/lib/components/LiveCollaborators.js.map +0 -7
  93. package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js +0 -234
  94. package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js.map +0 -7
  95. package/dist-cjs/lib/components/default-components/DefaultBrush.js +0 -38
  96. package/dist-cjs/lib/components/default-components/DefaultBrush.js.map +0 -7
  97. package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js +0 -71
  98. package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js.map +0 -7
  99. package/dist-cjs/lib/components/default-components/DefaultHandle.js +0 -56
  100. package/dist-cjs/lib/components/default-components/DefaultHandle.js.map +0 -7
  101. package/dist-cjs/lib/components/default-components/DefaultHandles.js +0 -28
  102. package/dist-cjs/lib/components/default-components/DefaultHandles.js.map +0 -7
  103. package/dist-cjs/lib/components/default-components/DefaultScribble.js +0 -51
  104. package/dist-cjs/lib/components/default-components/DefaultScribble.js.map +0 -7
  105. package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js +0 -69
  106. package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js.map +0 -7
  107. package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js +0 -107
  108. package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js.map +0 -7
  109. package/dist-cjs/lib/components/default-components/DefaultShapeIndicatorErrorFallback.js +0 -28
  110. package/dist-cjs/lib/components/default-components/DefaultShapeIndicatorErrorFallback.js.map +0 -7
  111. package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js +0 -102
  112. package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js.map +0 -7
  113. package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js +0 -170
  114. package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js.map +0 -7
  115. package/dist-esm/lib/components/LiveCollaborators.mjs +0 -135
  116. package/dist-esm/lib/components/LiveCollaborators.mjs.map +0 -7
  117. package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs +0 -214
  118. package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs.map +0 -7
  119. package/dist-esm/lib/components/default-components/DefaultBrush.mjs +0 -18
  120. package/dist-esm/lib/components/default-components/DefaultBrush.mjs.map +0 -7
  121. package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs +0 -41
  122. package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs.map +0 -7
  123. package/dist-esm/lib/components/default-components/DefaultHandle.mjs +0 -26
  124. package/dist-esm/lib/components/default-components/DefaultHandle.mjs.map +0 -7
  125. package/dist-esm/lib/components/default-components/DefaultHandles.mjs +0 -8
  126. package/dist-esm/lib/components/default-components/DefaultHandles.mjs.map +0 -7
  127. package/dist-esm/lib/components/default-components/DefaultScribble.mjs +0 -21
  128. package/dist-esm/lib/components/default-components/DefaultScribble.mjs.map +0 -7
  129. package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs +0 -39
  130. package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs.map +0 -7
  131. package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs +0 -77
  132. package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs.map +0 -7
  133. package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs +0 -8
  134. package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs.map +0 -7
  135. package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs +0 -82
  136. package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs.map +0 -7
  137. package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs +0 -142
  138. package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs.map +0 -7
  139. package/src/lib/components/LiveCollaborators.tsx +0 -180
  140. package/src/lib/components/default-components/CanvasShapeIndicators.tsx +0 -300
  141. package/src/lib/components/default-components/DefaultBrush.tsx +0 -35
  142. package/src/lib/components/default-components/DefaultCollaboratorHint.tsx +0 -52
  143. package/src/lib/components/default-components/DefaultHandle.tsx +0 -42
  144. package/src/lib/components/default-components/DefaultHandles.tsx +0 -15
  145. package/src/lib/components/default-components/DefaultScribble.tsx +0 -31
  146. package/src/lib/components/default-components/DefaultSelectionForeground.tsx +0 -50
  147. package/src/lib/components/default-components/DefaultShapeIndicator.tsx +0 -104
  148. package/src/lib/components/default-components/DefaultShapeIndicatorErrorFallback.tsx +0 -9
  149. package/src/lib/components/default-components/DefaultShapeIndicators.tsx +0 -118
  150. package/src/lib/components/default-components/DefaultSnapIndictor.tsx +0 -174
@@ -19,7 +19,6 @@ import { JsonObject } from '@tldraw/utils';
19
19
  import { JSX } from 'react/jsx-runtime';
20
20
  import { LegacyMigrations } from '@tldraw/store';
21
21
  import { MigrationSequence } from '@tldraw/store';
22
- import { NamedExoticComponent } from 'react';
23
22
  import { Node as Node_2 } from '@tiptap/pm/model';
24
23
  import { PerformanceTracker } from '@tldraw/utils';
25
24
  import { PointerEvent as PointerEvent_2 } from 'react';
@@ -251,8 +250,10 @@ export declare abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> ext
251
250
  * return <SVGContainer>...</SVGContainer>
252
251
  * }
253
252
  *
254
- * override indicator(shape: MyContainerShape) {
255
- * return <rect width={shape.props.w} height={shape.props.h} />
253
+ * override getIndicatorPath(shape: MyContainerShape) {
254
+ * const path = new Path2D()
255
+ * path.rect(0, 0, shape.props.w, shape.props.h)
256
+ * return path
256
257
  * }
257
258
  * }
258
259
  * ```
@@ -929,51 +930,21 @@ export declare const DEFAULT_THEME: TLTheme;
929
930
  /** @public @react */
930
931
  export declare function DefaultBackground(): JSX.Element;
931
932
 
932
- /** @public @react */
933
- export declare const DefaultBrush: ({ brush, color, opacity, className }: TLBrushProps) => JSX.Element;
934
-
935
933
  /** @public @react */
936
934
  export declare function DefaultCanvas({ className }: TLCanvasComponentProps): JSX.Element;
937
935
 
938
- /** @public @react */
939
- export declare function DefaultCollaboratorHint({ className, zoom, point, color, viewport, opacity }: TLCollaboratorHintProps): JSX.Element;
940
-
941
- /** @public @react */
942
- export declare const DefaultCursor: NamedExoticComponent<TLCursorProps>;
943
-
944
936
  /** @public @react */
945
937
  export declare const DefaultErrorFallback: TLErrorFallbackComponent;
946
938
 
947
939
  /** @public @react */
948
940
  export declare function DefaultGrid({ x, y, z, size }: TLGridProps): JSX.Element;
949
941
 
950
- /** @public @react */
951
- export declare function DefaultHandle({ handle, isCoarse, className, zoom }: TLHandleProps): JSX.Element;
952
-
953
- /** @public @react */
954
- export declare const DefaultHandles: ({ children }: TLHandlesProps) => JSX.Element;
955
-
956
- /** @public @react */
957
- export declare function DefaultScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps): JSX.Element | null;
958
-
959
942
  /** @public @react */
960
943
  export declare function DefaultSelectionBackground({ bounds, rotation }: TLSelectionBackgroundProps): JSX.Element;
961
944
 
962
- /** @public @react */
963
- export declare function DefaultSelectionForeground({ bounds, rotation }: TLSelectionForegroundProps): JSX.Element;
964
-
965
- /** @public @react */
966
- export declare const DefaultShapeIndicator: NamedExoticComponent<TLShapeIndicatorProps>;
967
-
968
- /** @public @react */
969
- export declare const DefaultShapeIndicators: NamedExoticComponent<TLShapeIndicatorsProps>;
970
-
971
945
  /** @public @react */
972
946
  export declare const DefaultShapeWrapper: ForwardRefExoticComponent<TLShapeWrapperProps & RefAttributes<HTMLDivElement>>;
973
947
 
974
- /** @public @react */
975
- export declare function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps): JSX.Element;
976
-
977
948
  /** @public @react */
978
949
  export declare function DefaultSpinner(props: React.SVGProps<SVGSVGElement>): JSX.Element;
979
950
 
@@ -1053,7 +1024,6 @@ export declare const defaultTldrawOptions: {
1053
1024
  readonly tooltipDelayMs: 700;
1054
1025
  readonly uiCoarseDragDistanceSquared: 625;
1055
1026
  readonly uiDragDistanceSquared: 16;
1056
- readonly useCanvasIndicators: true;
1057
1027
  readonly zoomToFitPadding: 128;
1058
1028
  };
1059
1029
 
@@ -1153,7 +1123,7 @@ export declare class EdgeScrollManager {
1153
1123
  /** @public */
1154
1124
  export declare class Editor extends EventEmitter<TLEventMap> {
1155
1125
  readonly id: string;
1156
- constructor({ store, user, shapeUtils, bindingUtils, assetUtils: assetUtilConstructors, tools, getContainer, cameraOptions, initialState, autoFocus, options: _options, textOptions: _textOptions, getShapeVisibility, colorScheme, fontAssetUrls, themes, initialTheme }: TLEditorOptions);
1126
+ constructor({ store, user, shapeUtils, bindingUtils, assetUtils: assetUtilConstructors, overlayUtils: overlayUtilConstructors, tools, getContainer, cameraOptions, initialState, autoFocus, options: _options, textOptions: _textOptions, getShapeVisibility, colorScheme, fontAssetUrls, themes, initialTheme }: TLEditorOptions);
1157
1127
  private readonly _getShapeVisibility?;
1158
1128
  private getIsShapeHiddenCache;
1159
1129
  isShapeHidden(shapeOrId: TLShape | TLShapeId): boolean;
@@ -1235,6 +1205,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1235
1205
  setInterval: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number;
1236
1206
  setTimeout: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number;
1237
1207
  };
1208
+ /* Excluded from this release type: _collaboratorVisibilityClock */
1238
1209
  /**
1239
1210
  * A manager for the user and their preferences.
1240
1211
  *
@@ -1260,6 +1231,12 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1260
1231
  * @public
1261
1232
  */
1262
1233
  readonly scribbles: ScribbleManager;
1234
+ /**
1235
+ * A manager for canvas overlay UI elements (selection handles, shape handles, etc.).
1236
+ *
1237
+ * @public
1238
+ */
1239
+ readonly overlays: OverlayManager;
1263
1240
  /**
1264
1241
  * A manager for side effects and correct state enforcement. See {@link @tldraw/store#StoreSideEffects} for details.
1265
1242
  *
@@ -2512,6 +2489,23 @@ export declare class Editor extends EventEmitter<TLEventMap> {
2512
2489
  * @public
2513
2490
  */
2514
2491
  getCollaboratorsOnCurrentPage(): TLInstancePresence[];
2492
+ /**
2493
+ * Returns a list of presence records for peer collaborators who should currently be
2494
+ * shown in the UI. Filters {@link Editor.getCollaborators} by activity state
2495
+ * (active / idle / inactive) and visibility rules such as following and highlighted
2496
+ * users. Re-evaluates on the collaborator visibility clock, so callers don't need to
2497
+ * drive their own activity timer.
2498
+ *
2499
+ * @public
2500
+ */
2501
+ getVisibleCollaborators(): TLInstancePresence[];
2502
+ /**
2503
+ * Returns a list of presence records for peer collaborators who should currently be
2504
+ * shown in the UI, filtered to those on the current page.
2505
+ *
2506
+ * @public
2507
+ */
2508
+ getVisibleCollaboratorsOnCurrentPage(): TLInstancePresence[];
2515
2509
  /**
2516
2510
  * Get the current user's ID for attribution purposes.
2517
2511
  * Also ensures a `user:` record exists in the store for the current user.
@@ -4852,7 +4846,7 @@ export declare class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
4852
4846
  getDefaultProps(): TLGroupShape['props'];
4853
4847
  getGeometry(shape: TLGroupShape): Geometry2d;
4854
4848
  component(shape: TLGroupShape): JSX.Element | null;
4855
- indicator(shape: TLGroupShape): JSX.Element;
4849
+ getIndicatorPath(shape: TLGroupShape): Path2D;
4856
4850
  onChildrenChange(group: TLGroupShape): void;
4857
4851
  }
4858
4852
 
@@ -5480,6 +5474,179 @@ export declare function openWindow(url: string, target?: string, allowReferrer?:
5480
5474
  /** @public */
5481
5475
  export declare type OptionalKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
5482
5476
 
5477
+ /** @public */
5478
+ export declare class OverlayManager {
5479
+ readonly editor: Editor;
5480
+ constructor(editor: Editor);
5481
+ /* Excluded from this release type: _overlayUtils */
5482
+ /* Excluded from this release type: registerUtil */
5483
+ /**
5484
+ * Get an overlay util by type string, overlay instance, or by passing
5485
+ * a util class as a generic parameter for type-safe lookup.
5486
+ *
5487
+ * @example
5488
+ * ```ts
5489
+ * const util = editor.overlays.getOverlayUtil('brush')
5490
+ * const util = editor.overlays.getOverlayUtil<BrushOverlayUtil>('brush')
5491
+ * const util = editor.overlays.getOverlayUtil(myOverlay)
5492
+ * ```
5493
+ *
5494
+ * @public
5495
+ */
5496
+ getOverlayUtil<T extends OverlayUtil>(type: T extends OverlayUtil<infer O> ? O['type'] : string): T;
5497
+ getOverlayUtil<O extends TLOverlay>(overlay: O): OverlayUtil<O>;
5498
+ /**
5499
+ * Returns all registered overlay utils in paint order (ascending zIndex).
5500
+ * Utils with the same zIndex preserve their registration order.
5501
+ *
5502
+ * @public
5503
+ */
5504
+ getOverlayUtilsInZOrder(): OverlayUtil[];
5505
+ /**
5506
+ * Reactive list of active overlay utils paired with the overlays they
5507
+ * produced for the current editor state, in paint order (ascending
5508
+ * zIndex). Both the hit-test and render paths read from this single
5509
+ * cached scan instead of each re-deriving the active set. Active utils
5510
+ * are included even when their `getOverlays()` returns an empty array,
5511
+ * since `render()` may still draw non-interactive UI (e.g. the selection
5512
+ * bounding box during brushing).
5513
+ *
5514
+ * @public
5515
+ */
5516
+ getActiveOverlayEntries(): TLOverlayEntry[];
5517
+ /**
5518
+ * Reactively computed list of all currently active overlays, in paint order.
5519
+ * @public
5520
+ */
5521
+ getCurrentOverlays(): TLOverlay[];
5522
+ private _geometryCache;
5523
+ /**
5524
+ * Get hit-test geometry for an overlay, cached by overlay identity. Lets
5525
+ * hit-testing on a pointermove storm skip the per-overlay geometry
5526
+ * allocation that {@link OverlayUtil.getGeometry} would otherwise do on
5527
+ * every call.
5528
+ *
5529
+ * @public
5530
+ */
5531
+ getOverlayGeometry(overlay: TLOverlay): Geometry2d | null;
5532
+ /**
5533
+ * The currently hovered overlay id.
5534
+ * @public
5535
+ */
5536
+ private _hoveredOverlayId;
5537
+ getHoveredOverlayId(): null | string;
5538
+ getHoveredOverlay(): null | TLOverlay;
5539
+ setHoveredOverlay(id: null | string): void;
5540
+ /**
5541
+ * Hit test all active overlays at a given page point.
5542
+ * Returns the topmost overlay whose geometry contains the point, or null.
5543
+ * Utils are walked from highest zIndex to lowest so the overlay painted on
5544
+ * top also wins the hit test. Within a util, overlays are walked in
5545
+ * array order: the first overlay whose geometry contains the point wins,
5546
+ * so utils should place highest-priority overlays first in `getOverlays`.
5547
+ * Interactive overlays (those with geometry) are checked; non-interactive are skipped.
5548
+ *
5549
+ * @param point - Point in page coordinates
5550
+ * @param margin - Hit test margin
5551
+ * @public
5552
+ */
5553
+ getOverlayAtPoint(point: VecLike, margin?: number): null | TLOverlay;
5554
+ }
5555
+
5556
+ /**
5557
+ * Base class for overlay utilities. Overlays are ephemeral UI elements rendered
5558
+ * on top of the canvas (selection handles, rotation corners, shape handles, etc.).
5559
+ *
5560
+ * Each OverlayUtil defines a type of overlay and knows how to:
5561
+ * - Determine when its overlays should be active (predicate)
5562
+ * - Produce overlay instances from current editor state
5563
+ * - Provide hit-test geometry for interactive overlays
5564
+ * - Provide cursor style on hover
5565
+ * - Render into a canvas 2D context
5566
+ *
5567
+ * @public
5568
+ */
5569
+ export declare abstract class OverlayUtil<T extends TLOverlay = TLOverlay> {
5570
+ editor: Editor;
5571
+ constructor(editor: Editor);
5572
+ static type: string;
5573
+ /**
5574
+ * Options for this overlay util. Override this to provide customization options.
5575
+ * Use {@link OverlayUtil.configure} to customize existing overlay utils.
5576
+ *
5577
+ * `zIndex` controls paint and hit-test order across utils — higher numbers
5578
+ * paint on top and are hit-tested first. Ties resolve by registration order.
5579
+ * Defaults to `0`; built-in utils use larger integers (100, 200, …) with
5580
+ * gaps so custom utils can slot between.
5581
+ *
5582
+ * @public
5583
+ */
5584
+ options: {
5585
+ zIndex?: number;
5586
+ };
5587
+ /**
5588
+ * Create a new overlay util class with the given options merged in.
5589
+ *
5590
+ * @example
5591
+ * ```ts
5592
+ * const MyBrush = BrushOverlayUtil.configure({ fill: 'rgba(0,0,255,0.1)' })
5593
+ * ```
5594
+ *
5595
+ * @public
5596
+ */
5597
+ static configure<T extends TLOverlayUtilConstructor<any>>(this: T, options: T extends new (...args: any[]) => {
5598
+ options: infer Options;
5599
+ } ? Partial<Options> : never): T;
5600
+ /**
5601
+ * Whether this overlay util's overlays should currently be active.
5602
+ * Checked reactively to determine which overlays exist at any given time.
5603
+ */
5604
+ abstract isActive(): boolean;
5605
+ /**
5606
+ * Returns the overlay instances that currently exist.
5607
+ * Called only when `isActive()` returns true.
5608
+ */
5609
+ abstract getOverlays(): T[];
5610
+ /**
5611
+ * Returns hit-test geometry for an overlay instance, in page coordinates.
5612
+ * Return null for non-interactive overlays (e.g. snap indicators, scribbles).
5613
+ */
5614
+ getGeometry(_overlay: T): Geometry2d | null;
5615
+ /**
5616
+ * Returns the cursor type to show when hovering this overlay.
5617
+ */
5618
+ getCursor(_overlay: T): TLCursorType | undefined;
5619
+ /**
5620
+ * Called when the user points down on this overlay, before the default
5621
+ * routing runs. Acts as an interrupt: define it to take over the event.
5622
+ *
5623
+ * Return `false` to continue with the default behavior (e.g. the
5624
+ * built-in rotate/resize handle transitions or shape-handle dispatch).
5625
+ * Return `true` — or nothing at all — to skip the default. In other
5626
+ * words, once you override this method you own the event unless you
5627
+ * explicitly opt back in by returning `false`.
5628
+ */
5629
+ onPointerDown?(overlay: T, info: TLPointerEventInfo): boolean | void;
5630
+ /**
5631
+ * Render all active overlays into the canvas context.
5632
+ * The context is already transformed to page space (camera transform applied).
5633
+ * Called reactively when overlays or editor state changes.
5634
+ */
5635
+ render(_ctx: CanvasRenderingContext2D, _overlays: T[]): void;
5636
+ /**
5637
+ * Optional: render all active overlays into the minimap canvas.
5638
+ * The context is already transformed to page space (minimap camera applied),
5639
+ * so overlays can use the same page-space coordinates as in {@link OverlayUtil.render}.
5640
+ *
5641
+ * `zoom` is the minimap's screen-pixels-per-page-unit, analogous to
5642
+ * `editor.getCamera().z`; use `1 / zoom` for one-minimap-pixel line widths.
5643
+ *
5644
+ * Most overlays should leave this blank — only overlays that are meaningful
5645
+ * at minimap scale (e.g. brushes, collaborator cursors) should opt in.
5646
+ */
5647
+ renderMinimap(_ctx: CanvasRenderingContext2D, _overlays: T[], _zoom: number): void;
5648
+ }
5649
+
5483
5650
  /**
5484
5651
  * Parses a string created by {@link createDeepLinkString} back into a deep link descriptor.
5485
5652
  *
@@ -6012,6 +6179,28 @@ export declare function setRuntimeOverrides(input: Partial<typeof runtime>): voi
6012
6179
  /** @public */
6013
6180
  export declare function setUserPreferences(user: TLUserPreferences): void;
6014
6181
 
6182
+ /**
6183
+ * Overlay util for shape indicators — the selection / hover / hint outlines drawn
6184
+ * under the selection foreground. Paints local indicators in the theme's
6185
+ * selection color and remote collaborator indicators in each peer's color.
6186
+ *
6187
+ * Non-interactive: contributes no hit-test geometry.
6188
+ *
6189
+ * @public
6190
+ */
6191
+ export declare class ShapeIndicatorOverlayUtil extends OverlayUtil<TLShapeIndicatorOverlay> {
6192
+ static type: string;
6193
+ options: {
6194
+ hintedLineWidth: number;
6195
+ lineWidth: number;
6196
+ zIndex: number;
6197
+ };
6198
+ isActive(): boolean;
6199
+ getOverlays(): TLShapeIndicatorOverlay[];
6200
+ render(ctx: CanvasRenderingContext2D, overlays: TLShapeIndicatorOverlay[]): void;
6201
+ private _strokeIndicatorBatch;
6202
+ }
6203
+
6015
6204
  /** @public */
6016
6205
  export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
6017
6206
  editor: Editor;
@@ -6108,37 +6297,30 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
6108
6297
  */
6109
6298
  abstract component(shape: Shape): any;
6110
6299
  /**
6111
- * Get JSX describing the shape's indicator (as an SVG element).
6112
- *
6113
- * @param shape - The shape.
6114
- * @public
6115
- */
6116
- abstract indicator(shape: Shape): any;
6117
- /**
6118
- * Whether to use the legacy React-based indicator rendering.
6300
+ * Get a Path2D (or a richer object with clip/additional paths) for rendering the
6301
+ * shape's indicator on the canvas. Shapes that return `undefined` will not render
6302
+ * an indicator.
6119
6303
  *
6120
- * Override this to return `false` if your shape implements {@link ShapeUtil.getIndicatorPath}
6121
- * for canvas-based indicator rendering.
6304
+ * For complex indicators that need clipping (e.g., arrows with labels), return an
6305
+ * object with `path`, `clipPath`, and `additionalPaths` properties.
6122
6306
  *
6123
- * @returns `true` to use SVG indicators (default), `false` to use canvas indicators.
6307
+ * @param shape - The shape.
6308
+ * @returns A Path2D to stroke, or an object with clipping info, or undefined to skip.
6124
6309
  * @public
6125
6310
  */
6126
- useLegacyIndicator(): boolean;
6311
+ abstract getIndicatorPath(shape: Shape): TLIndicatorPath | undefined;
6127
6312
  /**
6128
- * Get a Path2D for rendering the shape's indicator on the canvas.
6129
- *
6130
- * When implemented, this is used instead of {@link ShapeUtil.indicator} for more
6131
- * efficient canvas-based indicator rendering. Shapes that return `undefined` will
6132
- * fall back to SVG-based rendering via {@link ShapeUtil.indicator}.
6313
+ * Get JSX describing the shape's indicator (as an SVG element).
6133
6314
  *
6134
- * For complex indicators that need clipping (e.g., arrows with labels), return an
6135
- * object with `path`, `clipPath`, and `additionalPaths` properties.
6315
+ * @deprecated SVG indicators are no longer rendered. Override
6316
+ * {@link ShapeUtil.getIndicatorPath} instead. This stub is retained so legacy
6317
+ * subclasses that still call `super.indicator()` keep type-checking; new shapes
6318
+ * should not implement it.
6136
6319
  *
6137
6320
  * @param shape - The shape.
6138
- * @returns A Path2D to stroke, or an object with clipping info, or undefined to use SVG fallback.
6139
6321
  * @public
6140
6322
  */
6141
- getIndicatorPath(shape: Shape): TLIndicatorPath | undefined;
6323
+ indicator(_shape: Shape): any;
6142
6324
  /**
6143
6325
  * Get the font faces that should be rendered in the document in order for this shape to render
6144
6326
  * correctly.
@@ -7079,6 +7261,9 @@ export declare type TLAnyAssetUtilConstructor = TLAssetUtilConstructor<any>;
7079
7261
  /** @public */
7080
7262
  export declare type TLAnyBindingUtilConstructor = TLBindingUtilConstructor<any>;
7081
7263
 
7264
+ /** @public */
7265
+ export declare type TLAnyOverlayUtilConstructor = TLOverlayUtilConstructor<any>;
7266
+
7082
7267
  /** @public */
7083
7268
  export declare type TLAnyShapeUtilConstructor = TLShapeUtilConstructor<any>;
7084
7269
 
@@ -7122,15 +7307,6 @@ export declare interface TLBindingUtilConstructor<T extends TLBinding, U extends
7122
7307
  migrations?: TLPropsMigrations;
7123
7308
  }
7124
7309
 
7125
- /** @public */
7126
- export declare interface TLBrushProps {
7127
- userId?: string;
7128
- brush: BoxModel;
7129
- color?: string;
7130
- opacity?: number;
7131
- className?: string;
7132
- }
7133
-
7134
7310
  /** @public */
7135
7311
  export declare interface TLCameraConstraints {
7136
7312
  /** The bounds (in page space) of the constrained space */
@@ -7318,17 +7494,6 @@ export declare interface TLClipboardWriteInfo {
7318
7494
  readonly source: 'menu' | 'native';
7319
7495
  }
7320
7496
 
7321
- /** @public */
7322
- export declare interface TLCollaboratorHintProps {
7323
- userId: string;
7324
- className?: string;
7325
- point: VecModel;
7326
- viewport: Box;
7327
- zoom: number;
7328
- opacity?: number;
7329
- color: string;
7330
- }
7331
-
7332
7497
  /** @public */
7333
7498
  export declare type TLCompleteEvent = (info: TLCompleteEventInfo) => void;
7334
7499
 
@@ -7373,17 +7538,6 @@ export declare interface TLCurrentUser {
7373
7538
  readonly setUserPreferences: (userPreferences: TLUserPreferences) => void;
7374
7539
  }
7375
7540
 
7376
- /** @public */
7377
- export declare interface TLCursorProps {
7378
- userId: string;
7379
- className?: string;
7380
- point: null | VecModel;
7381
- zoom: number;
7382
- color?: string;
7383
- name: null | string;
7384
- chatMessage: string;
7385
- }
7386
-
7387
7541
  /** @public */
7388
7542
  export declare type TLDeepLink = {
7389
7543
  bounds: BoxModel;
@@ -7477,6 +7631,10 @@ export declare interface TldrawEditorBaseProps {
7477
7631
  * An array of asset utils to use in the editor.
7478
7632
  */
7479
7633
  assetUtils?: readonly TLAnyAssetUtilConstructor[];
7634
+ /**
7635
+ * An array of overlay utils to use in the editor for canvas overlay UI elements.
7636
+ */
7637
+ overlayUtils?: readonly TLAnyOverlayUtilConstructor[];
7480
7638
  /**
7481
7639
  * An array of tools to add to the editor's state chart.
7482
7640
  */
@@ -7786,12 +7944,6 @@ export declare interface TldrawOptions {
7786
7944
  * viewport's page dimensions regardless of overview zoom changes.
7787
7945
  */
7788
7946
  readonly quickZoomPreservesScreenBounds: boolean;
7789
- /**
7790
- * Whether to use 2D canvas rendering for shape indicators. When true (default),
7791
- * shapes that support it will render indicators on a 2D canvas for better
7792
- * performance. When false, all indicators use legacy SVG rendering.
7793
- */
7794
- readonly useCanvasIndicators: boolean;
7795
7947
  /**
7796
7948
  * Called before content is written to the clipboard during a copy or cut operation.
7797
7949
  * Receives the serialized content (shapes, bindings, assets) and can filter or transform
@@ -7879,34 +8031,17 @@ export declare interface TLDropShapesOverInfo {
7879
8031
  /** @public */
7880
8032
  export declare interface TLEditorComponents {
7881
8033
  Background?: ComponentType | null;
7882
- Brush?: ComponentType<TLBrushProps> | null;
7883
8034
  Canvas?: ComponentType<TLCanvasComponentProps> | null;
7884
- CollaboratorBrush?: ComponentType<TLBrushProps> | null;
7885
- CollaboratorCursor?: ComponentType<TLCursorProps> | null;
7886
- CollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null;
7887
- CollaboratorScribble?: ComponentType<TLScribbleProps> | null;
7888
- CollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null;
7889
- Cursor?: ComponentType<TLCursorProps> | null;
7890
8035
  Grid?: ComponentType<TLGridProps> | null;
7891
- Handle?: ComponentType<TLHandleProps> | null;
7892
- Handles?: ComponentType<TLHandlesProps> | null;
7893
8036
  InFrontOfTheCanvas?: ComponentType | null;
7894
8037
  LoadingScreen?: ComponentType | null;
7895
8038
  OnTheCanvas?: ComponentType | null;
7896
- Overlays?: ComponentType | null;
7897
- Scribble?: ComponentType<TLScribbleProps> | null;
7898
8039
  SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null;
7899
- SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null;
7900
- ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null;
7901
- ShapeIndicators?: ComponentType | null;
7902
8040
  ShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null;
7903
- SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null;
7904
8041
  Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null;
7905
8042
  SvgDefs?: ComponentType | null;
7906
- ZoomBrush?: ComponentType<TLBrushProps> | null;
7907
8043
  ErrorFallback?: TLErrorFallbackComponent;
7908
8044
  ShapeErrorFallback?: TLShapeErrorFallbackComponent;
7909
- ShapeIndicatorErrorFallback?: TLShapeIndicatorErrorFallbackComponent;
7910
8045
  }
7911
8046
 
7912
8047
  /** @public */
@@ -7928,6 +8063,11 @@ export declare interface TLEditorOptions {
7928
8063
  * An array of asset utils to use in the editor. These will be used to handle asset-type-specific behavior.
7929
8064
  */
7930
8065
  assetUtils?: readonly TLAnyAssetUtilConstructor[];
8066
+ /**
8067
+ * An array of overlay utils to use in the editor. These define canvas overlay UI elements
8068
+ * like selection handles, rotation corners, shape handles, etc.
8069
+ */
8070
+ overlayUtils?: readonly TLAnyOverlayUtilConstructor[];
7931
8071
  /**
7932
8072
  * An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor.
7933
8073
  */
@@ -8294,20 +8434,6 @@ export declare interface TLHandleDragInfo<T extends TLShape> {
8294
8434
  initial?: T | undefined;
8295
8435
  }
8296
8436
 
8297
- /** @public */
8298
- export declare interface TLHandleProps {
8299
- shapeId: TLShapeId;
8300
- handle: TLHandle;
8301
- zoom: number;
8302
- isCoarse: boolean;
8303
- className?: string;
8304
- }
8305
-
8306
- /** @public */
8307
- export declare interface TLHandlesProps {
8308
- children: ReactNode;
8309
- }
8310
-
8311
8437
  /** @public */
8312
8438
  export declare interface TLHistoryBatchOptions {
8313
8439
  /**
@@ -8637,6 +8763,42 @@ export declare const tlmenus: {
8637
8763
  */
8638
8764
  export declare type TLOnMountHandler = (editor: Editor) => (() => undefined | void) | undefined | void;
8639
8765
 
8766
+ /** @public */
8767
+ export declare interface TLOverlay<Props = Record<string, unknown>> {
8768
+ /**
8769
+ * Globally unique id for this overlay instance across all overlay utils.
8770
+ * Hit-test and hover lookup key on `id` alone, so utils must namespace their
8771
+ * ids (e.g. `'selection_fg:top_left'`, `'handle:<shapeId>:<handleId>'`) to
8772
+ * avoid colliding with overlays from other utils.
8773
+ */
8774
+ id: string;
8775
+ /** The overlay util type that owns this instance */
8776
+ type: string;
8777
+ /** Arbitrary props for the overlay (handle id, corner name, etc.) */
8778
+ props: Props;
8779
+ }
8780
+
8781
+ /**
8782
+ * An active overlay util paired with the overlays it produced for the current
8783
+ * editor state. Returned by {@link OverlayManager.getActiveOverlayEntries} so
8784
+ * hit-test, render, and debug paths share a single scan per reactive tick.
8785
+ *
8786
+ * @public
8787
+ */
8788
+ export declare interface TLOverlayEntry {
8789
+ util: OverlayUtil;
8790
+ overlays: TLOverlay[];
8791
+ }
8792
+
8793
+ /** @public */
8794
+ export declare interface TLOverlayUtilConstructor<U extends OverlayUtil = OverlayUtil> {
8795
+ new (editor: Editor): U;
8796
+ type: string;
8797
+ configure<T extends TLOverlayUtilConstructor<any>>(this: T, options: T extends new (...args: any[]) => {
8798
+ options: infer Options;
8799
+ } ? Partial<Options> : never): T;
8800
+ }
8801
+
8640
8802
  /**
8641
8803
  * Map of all performance event names to their payload types.
8642
8804
  * Used with {@link PerformanceManager.on} and {@link PerformanceManager.once}.
@@ -8764,6 +8926,10 @@ export declare type TLPointerEventTarget = {
8764
8926
  handle?: TLSelectionHandle;
8765
8927
  shape?: undefined;
8766
8928
  target: 'selection';
8929
+ } | {
8930
+ overlay: TLOverlay;
8931
+ shape?: undefined;
8932
+ target: 'overlay';
8767
8933
  } | {
8768
8934
  shape: TLShape;
8769
8935
  target: 'shape';
@@ -8834,28 +9000,12 @@ export declare type TLResizeShapeOptions = Partial<{
8834
9000
 
8835
9001
  /* Excluded from this release type: TLRotationSnapshot */
8836
9002
 
8837
- /** @public */
8838
- export declare interface TLScribbleProps {
8839
- userId?: string;
8840
- scribble: TLScribble;
8841
- zoom: number;
8842
- color?: string;
8843
- opacity?: number;
8844
- className?: string;
8845
- }
8846
-
8847
9003
  /** @public */
8848
9004
  export declare interface TLSelectionBackgroundProps {
8849
9005
  bounds: Box;
8850
9006
  rotation: number;
8851
9007
  }
8852
9008
 
8853
- /** @public */
8854
- export declare interface TLSelectionForegroundProps {
8855
- bounds: Box;
8856
- rotation: number;
8857
- }
8858
-
8859
9009
  /** @public */
8860
9010
  export declare type TLSelectionHandle = RotateCorner | SelectionCorner | SelectionEdge;
8861
9011
 
@@ -8890,26 +9040,15 @@ export declare type TLShapeErrorFallbackComponent = ComponentType<{
8890
9040
  }>;
8891
9041
 
8892
9042
  /** @public */
8893
- export declare type TLShapeIndicatorErrorFallbackComponent = ComponentType<{
8894
- error: unknown;
8895
- }>;
8896
-
8897
- /** @public */
8898
- export declare interface TLShapeIndicatorProps {
8899
- userId?: string;
8900
- shapeId: TLShapeId;
8901
- color?: string | undefined;
8902
- opacity?: number;
8903
- className?: string;
8904
- hidden?: boolean;
8905
- }
8906
-
8907
- /** @public */
8908
- export declare interface TLShapeIndicatorsProps {
8909
- /** Whether to hide all of the indicators */
8910
- hideAll?: boolean;
8911
- /** Whether to show all of the indicators */
8912
- showAll?: boolean;
9043
+ export declare interface TLShapeIndicatorOverlay extends TLOverlay {
9044
+ props: {
9045
+ collaboratorIndicators: Array<{
9046
+ color: string;
9047
+ shapeIds: TLShapeId[];
9048
+ }>;
9049
+ hintingShapeIds: TLShapeId[];
9050
+ idsToDisplay: TLShapeId[];
9051
+ };
8913
9052
  }
8914
9053
 
8915
9054
  /**
@@ -8997,13 +9136,6 @@ export declare interface TLShapeWrapperProps extends React.HTMLAttributes<HTMLDi
8997
9136
  children: ReactNode;
8998
9137
  }
8999
9138
 
9000
- /** @public */
9001
- export declare interface TLSnapIndicatorProps {
9002
- className?: string;
9003
- line: SnapIndicator;
9004
- zoom: number;
9005
- }
9006
-
9007
9139
  /** @public */
9008
9140
  export declare interface TLStateNodeConstructor {
9009
9141
  new (editor: Editor, parent?: StateNode): StateNode;
@@ -9392,6 +9524,10 @@ export declare function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement
9392
9524
  export declare function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>): void;
9393
9525
 
9394
9526
  /**
9527
+ * Reactive list of peer user IDs for collaborators currently shown in the UI.
9528
+ * Mirrors {@link Editor.getVisibleCollaborators} — peers fade out as they
9529
+ * transition to idle/inactive, without requiring a manual re-render.
9530
+ *
9395
9531
  * @returns The list of peer UserIDs
9396
9532
  * @public
9397
9533
  */