@tldraw/editor 4.6.0-canary.4ea2b430d7bb → 4.6.0-canary.5031fbed79c3

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 (330) hide show
  1. package/dist-cjs/index.d.ts +770 -161
  2. package/dist-cjs/index.js +18 -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/MenuClickCapture.js +99 -38
  7. package/dist-cjs/lib/components/MenuClickCapture.js.map +2 -2
  8. package/dist-cjs/lib/components/default-components/CanvasOverlays.js +180 -0
  9. package/dist-cjs/lib/components/default-components/CanvasOverlays.js.map +7 -0
  10. package/dist-cjs/lib/components/default-components/DefaultCanvas.js +33 -236
  11. package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +3 -3
  12. package/dist-cjs/lib/editor/Editor.js +157 -33
  13. package/dist-cjs/lib/editor/Editor.js.map +2 -2
  14. package/dist-cjs/lib/editor/assets/AssetUtil.js +1 -0
  15. package/dist-cjs/lib/editor/assets/AssetUtil.js.map +1 -1
  16. package/dist-cjs/lib/editor/bindings/BindingUtil.js +1 -0
  17. package/dist-cjs/lib/editor/bindings/BindingUtil.js.map +1 -1
  18. package/dist-cjs/lib/editor/managers/ClickManager/ClickManager.js +1 -0
  19. package/dist-cjs/lib/editor/managers/ClickManager/ClickManager.js.map +1 -1
  20. package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js +98 -0
  21. package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js.map +7 -0
  22. package/dist-cjs/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.js +1 -0
  23. package/dist-cjs/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.js.map +1 -1
  24. package/dist-cjs/lib/editor/managers/FocusManager/FocusManager.js +1 -0
  25. package/dist-cjs/lib/editor/managers/FocusManager/FocusManager.js.map +1 -1
  26. package/dist-cjs/lib/editor/managers/FontManager/FontManager.js +2 -0
  27. package/dist-cjs/lib/editor/managers/FontManager/FontManager.js.map +1 -1
  28. package/dist-cjs/lib/editor/managers/HistoryManager/HistoryManager.js +2 -0
  29. package/dist-cjs/lib/editor/managers/HistoryManager/HistoryManager.js.map +1 -1
  30. package/dist-cjs/lib/editor/managers/InputsManager/InputsManager.js +12 -0
  31. package/dist-cjs/lib/editor/managers/InputsManager/InputsManager.js.map +2 -2
  32. package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.js +80 -0
  33. package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.js.map +7 -0
  34. package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceManager.js +466 -0
  35. package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceManager.js.map +7 -0
  36. package/dist-cjs/lib/{components/default-components/DefaultHandles.js → editor/managers/PerformanceManager/perf-types.js} +3 -14
  37. package/dist-cjs/lib/editor/managers/PerformanceManager/perf-types.js.map +7 -0
  38. package/dist-cjs/lib/editor/managers/ScribbleManager/ScribbleManager.js +1 -0
  39. package/dist-cjs/lib/editor/managers/ScribbleManager/ScribbleManager.js.map +1 -1
  40. package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js +1 -0
  41. package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js.map +1 -1
  42. package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js +1 -0
  43. package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js.map +1 -1
  44. package/dist-cjs/lib/editor/managers/SnapManager/SnapManager.js +2 -1
  45. package/dist-cjs/lib/editor/managers/SnapManager/SnapManager.js.map +2 -2
  46. package/dist-cjs/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.js +1 -0
  47. package/dist-cjs/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.js.map +1 -1
  48. package/dist-cjs/lib/editor/managers/TextManager/TextManager.js +1 -0
  49. package/dist-cjs/lib/editor/managers/TextManager/TextManager.js.map +1 -1
  50. package/dist-cjs/lib/editor/managers/ThemeManager/ThemeManager.js +1 -0
  51. package/dist-cjs/lib/editor/managers/ThemeManager/ThemeManager.js.map +1 -1
  52. package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js +14 -0
  53. package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js.map +2 -2
  54. package/dist-cjs/lib/editor/managers/TickManager/TickManager.js +1 -0
  55. package/dist-cjs/lib/editor/managers/TickManager/TickManager.js.map +1 -1
  56. package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js +2 -0
  57. package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js.map +1 -1
  58. package/dist-cjs/lib/editor/overlays/OverlayManager.js +154 -0
  59. package/dist-cjs/lib/editor/overlays/OverlayManager.js.map +7 -0
  60. package/dist-cjs/lib/editor/overlays/OverlayUtil.js +92 -0
  61. package/dist-cjs/lib/editor/overlays/OverlayUtil.js.map +7 -0
  62. package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js +161 -0
  63. package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js.map +7 -0
  64. package/dist-cjs/lib/editor/overlays/getOverlayDisplayValues.js +39 -0
  65. package/dist-cjs/lib/editor/overlays/getOverlayDisplayValues.js.map +7 -0
  66. package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js +76 -0
  67. package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js.map +7 -0
  68. package/dist-cjs/lib/editor/shapes/ShapeUtil.js +20 -24
  69. package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
  70. package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js +33 -3
  71. package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js.map +2 -2
  72. package/dist-cjs/lib/editor/shapes/shared/getPerfectDashProps.js +6 -0
  73. package/dist-cjs/lib/editor/shapes/shared/getPerfectDashProps.js.map +2 -2
  74. package/dist-cjs/lib/editor/tools/StateNode.js +15 -17
  75. package/dist-cjs/lib/editor/tools/StateNode.js.map +2 -2
  76. package/dist-cjs/lib/editor/types/event-types.js.map +2 -2
  77. package/dist-cjs/lib/exports/ExportDelay.js +1 -0
  78. package/dist-cjs/lib/exports/ExportDelay.js.map +1 -1
  79. package/dist-cjs/lib/exports/StyleEmbedder.js +1 -0
  80. package/dist-cjs/lib/exports/StyleEmbedder.js.map +1 -1
  81. package/dist-cjs/lib/exports/fetchCache.js +1 -1
  82. package/dist-cjs/lib/exports/fetchCache.js.map +2 -2
  83. package/dist-cjs/lib/exports/getSvgJsx.js +2 -1
  84. package/dist-cjs/lib/exports/getSvgJsx.js.map +2 -2
  85. package/dist-cjs/lib/hooks/EditorComponentsContext.js.map +2 -2
  86. package/dist-cjs/lib/hooks/useCanvasEvents.js +25 -4
  87. package/dist-cjs/lib/hooks/useCanvasEvents.js.map +2 -2
  88. package/dist-cjs/lib/hooks/useEditorComponents.js +0 -28
  89. package/dist-cjs/lib/hooks/useEditorComponents.js.map +2 -2
  90. package/dist-cjs/lib/hooks/usePeerIds.js +1 -36
  91. package/dist-cjs/lib/hooks/usePeerIds.js.map +2 -2
  92. package/dist-cjs/lib/hooks/useShapeCulling.js +2 -1
  93. package/dist-cjs/lib/hooks/useShapeCulling.js.map +2 -2
  94. package/dist-cjs/lib/options.js +1 -0
  95. package/dist-cjs/lib/options.js.map +2 -2
  96. package/dist-cjs/lib/primitives/Vec.js +3 -0
  97. package/dist-cjs/lib/primitives/Vec.js.map +1 -1
  98. package/dist-cjs/lib/primitives/geometry/Circle2d.js +1 -0
  99. package/dist-cjs/lib/primitives/geometry/Circle2d.js.map +1 -1
  100. package/dist-cjs/lib/primitives/geometry/Ellipse2d.js +1 -0
  101. package/dist-cjs/lib/primitives/geometry/Ellipse2d.js.map +1 -1
  102. package/dist-cjs/lib/primitives/geometry/Geometry2d.js +2 -0
  103. package/dist-cjs/lib/primitives/geometry/Geometry2d.js.map +1 -1
  104. package/dist-cjs/lib/primitives/geometry/Stadium2d.js +1 -0
  105. package/dist-cjs/lib/primitives/geometry/Stadium2d.js.map +1 -1
  106. package/dist-cjs/lib/utils/EditorAtom.js +2 -0
  107. package/dist-cjs/lib/utils/EditorAtom.js.map +1 -1
  108. package/dist-cjs/lib/utils/runtime.js +2 -1
  109. package/dist-cjs/lib/utils/runtime.js.map +2 -2
  110. package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js +5 -0
  111. package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js.map +2 -2
  112. package/dist-cjs/lib/utils/sync/hardReset.js +0 -8
  113. package/dist-cjs/lib/utils/sync/hardReset.js.map +2 -2
  114. package/dist-cjs/version.js +3 -3
  115. package/dist-cjs/version.js.map +1 -1
  116. package/dist-esm/index.d.mts +770 -161
  117. package/dist-esm/index.mjs +25 -39
  118. package/dist-esm/index.mjs.map +2 -2
  119. package/dist-esm/lib/TldrawEditor.mjs +3 -0
  120. package/dist-esm/lib/TldrawEditor.mjs.map +2 -2
  121. package/dist-esm/lib/components/MenuClickCapture.mjs +100 -39
  122. package/dist-esm/lib/components/MenuClickCapture.mjs.map +2 -2
  123. package/dist-esm/lib/components/default-components/CanvasOverlays.mjs +160 -0
  124. package/dist-esm/lib/components/default-components/CanvasOverlays.mjs.map +7 -0
  125. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +34 -237
  126. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +3 -3
  127. package/dist-esm/lib/editor/Editor.mjs +158 -35
  128. package/dist-esm/lib/editor/Editor.mjs.map +2 -2
  129. package/dist-esm/lib/editor/assets/AssetUtil.mjs +1 -0
  130. package/dist-esm/lib/editor/assets/AssetUtil.mjs.map +1 -1
  131. package/dist-esm/lib/editor/bindings/BindingUtil.mjs +1 -0
  132. package/dist-esm/lib/editor/bindings/BindingUtil.mjs.map +1 -1
  133. package/dist-esm/lib/editor/managers/ClickManager/ClickManager.mjs +1 -0
  134. package/dist-esm/lib/editor/managers/ClickManager/ClickManager.mjs.map +1 -1
  135. package/dist-esm/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.mjs +83 -0
  136. package/dist-esm/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.mjs.map +7 -0
  137. package/dist-esm/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.mjs +1 -0
  138. package/dist-esm/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.mjs.map +1 -1
  139. package/dist-esm/lib/editor/managers/FocusManager/FocusManager.mjs +1 -0
  140. package/dist-esm/lib/editor/managers/FocusManager/FocusManager.mjs.map +1 -1
  141. package/dist-esm/lib/editor/managers/FontManager/FontManager.mjs +2 -0
  142. package/dist-esm/lib/editor/managers/FontManager/FontManager.mjs.map +1 -1
  143. package/dist-esm/lib/editor/managers/HistoryManager/HistoryManager.mjs +2 -0
  144. package/dist-esm/lib/editor/managers/HistoryManager/HistoryManager.mjs.map +1 -1
  145. package/dist-esm/lib/editor/managers/InputsManager/InputsManager.mjs +12 -0
  146. package/dist-esm/lib/editor/managers/InputsManager/InputsManager.mjs.map +2 -2
  147. package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.mjs +60 -0
  148. package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.mjs.map +7 -0
  149. package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceManager.mjs +438 -0
  150. package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceManager.mjs.map +7 -0
  151. package/dist-esm/lib/editor/managers/PerformanceManager/perf-types.mjs +1 -0
  152. package/dist-esm/lib/editor/managers/PerformanceManager/perf-types.mjs.map +7 -0
  153. package/dist-esm/lib/editor/managers/ScribbleManager/ScribbleManager.mjs +1 -0
  154. package/dist-esm/lib/editor/managers/ScribbleManager/ScribbleManager.mjs.map +1 -1
  155. package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs +1 -0
  156. package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs.map +1 -1
  157. package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs +1 -0
  158. package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs.map +1 -1
  159. package/dist-esm/lib/editor/managers/SnapManager/SnapManager.mjs +2 -1
  160. package/dist-esm/lib/editor/managers/SnapManager/SnapManager.mjs.map +2 -2
  161. package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs +1 -0
  162. package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs.map +1 -1
  163. package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs +1 -0
  164. package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs.map +1 -1
  165. package/dist-esm/lib/editor/managers/ThemeManager/ThemeManager.mjs +1 -0
  166. package/dist-esm/lib/editor/managers/ThemeManager/ThemeManager.mjs.map +1 -1
  167. package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs +14 -0
  168. package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs.map +2 -2
  169. package/dist-esm/lib/editor/managers/TickManager/TickManager.mjs +1 -0
  170. package/dist-esm/lib/editor/managers/TickManager/TickManager.mjs.map +1 -1
  171. package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs +2 -0
  172. package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs.map +1 -1
  173. package/dist-esm/lib/editor/overlays/OverlayManager.mjs +136 -0
  174. package/dist-esm/lib/editor/overlays/OverlayManager.mjs.map +7 -0
  175. package/dist-esm/lib/editor/overlays/OverlayUtil.mjs +72 -0
  176. package/dist-esm/lib/editor/overlays/OverlayUtil.mjs.map +7 -0
  177. package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs +141 -0
  178. package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs.map +7 -0
  179. package/dist-esm/lib/editor/overlays/getOverlayDisplayValues.mjs +19 -0
  180. package/dist-esm/lib/editor/overlays/getOverlayDisplayValues.mjs.map +7 -0
  181. package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs +56 -0
  182. package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs.map +7 -0
  183. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +20 -24
  184. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
  185. package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs +33 -3
  186. package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs.map +2 -2
  187. package/dist-esm/lib/editor/shapes/shared/getPerfectDashProps.mjs +6 -0
  188. package/dist-esm/lib/editor/shapes/shared/getPerfectDashProps.mjs.map +2 -2
  189. package/dist-esm/lib/editor/tools/StateNode.mjs +15 -17
  190. package/dist-esm/lib/editor/tools/StateNode.mjs.map +2 -2
  191. package/dist-esm/lib/editor/types/event-types.mjs.map +2 -2
  192. package/dist-esm/lib/exports/ExportDelay.mjs +1 -0
  193. package/dist-esm/lib/exports/ExportDelay.mjs.map +1 -1
  194. package/dist-esm/lib/exports/StyleEmbedder.mjs +1 -0
  195. package/dist-esm/lib/exports/StyleEmbedder.mjs.map +1 -1
  196. package/dist-esm/lib/exports/fetchCache.mjs +2 -2
  197. package/dist-esm/lib/exports/fetchCache.mjs.map +2 -2
  198. package/dist-esm/lib/exports/getSvgJsx.mjs +2 -1
  199. package/dist-esm/lib/exports/getSvgJsx.mjs.map +2 -2
  200. package/dist-esm/lib/hooks/EditorComponentsContext.mjs.map +2 -2
  201. package/dist-esm/lib/hooks/useCanvasEvents.mjs +25 -4
  202. package/dist-esm/lib/hooks/useCanvasEvents.mjs.map +2 -2
  203. package/dist-esm/lib/hooks/useEditorComponents.mjs +0 -28
  204. package/dist-esm/lib/hooks/useEditorComponents.mjs.map +2 -2
  205. package/dist-esm/lib/hooks/usePeerIds.mjs +2 -40
  206. package/dist-esm/lib/hooks/usePeerIds.mjs.map +2 -2
  207. package/dist-esm/lib/hooks/useShapeCulling.mjs +2 -1
  208. package/dist-esm/lib/hooks/useShapeCulling.mjs.map +2 -2
  209. package/dist-esm/lib/options.mjs +1 -0
  210. package/dist-esm/lib/options.mjs.map +2 -2
  211. package/dist-esm/lib/primitives/Vec.mjs +3 -0
  212. package/dist-esm/lib/primitives/Vec.mjs.map +1 -1
  213. package/dist-esm/lib/primitives/geometry/Circle2d.mjs +1 -0
  214. package/dist-esm/lib/primitives/geometry/Circle2d.mjs.map +1 -1
  215. package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs +1 -0
  216. package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs.map +1 -1
  217. package/dist-esm/lib/primitives/geometry/Geometry2d.mjs +2 -0
  218. package/dist-esm/lib/primitives/geometry/Geometry2d.mjs.map +1 -1
  219. package/dist-esm/lib/primitives/geometry/Stadium2d.mjs +1 -0
  220. package/dist-esm/lib/primitives/geometry/Stadium2d.mjs.map +1 -1
  221. package/dist-esm/lib/utils/EditorAtom.mjs +2 -0
  222. package/dist-esm/lib/utils/EditorAtom.mjs.map +1 -1
  223. package/dist-esm/lib/utils/runtime.mjs +2 -1
  224. package/dist-esm/lib/utils/runtime.mjs.map +2 -2
  225. package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs +5 -0
  226. package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs.map +2 -2
  227. package/dist-esm/lib/utils/sync/hardReset.mjs +0 -8
  228. package/dist-esm/lib/utils/sync/hardReset.mjs.map +2 -2
  229. package/dist-esm/version.mjs +3 -3
  230. package/dist-esm/version.mjs.map +1 -1
  231. package/editor.css +3 -223
  232. package/package.json +7 -7
  233. package/src/index.ts +33 -38
  234. package/src/lib/TldrawEditor.tsx +9 -0
  235. package/src/lib/components/MenuClickCapture.tsx +129 -49
  236. package/src/lib/components/default-components/CanvasOverlays.tsx +208 -0
  237. package/src/lib/components/default-components/DefaultCanvas.tsx +38 -310
  238. package/src/lib/editor/Editor.test.ts +3 -1
  239. package/src/lib/editor/Editor.ts +183 -38
  240. package/src/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.ts +98 -0
  241. package/src/lib/editor/managers/InputsManager/InputsManager.ts +12 -0
  242. package/src/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.ts +82 -0
  243. package/src/lib/editor/managers/PerformanceManager/PerformanceManager.test.ts +522 -0
  244. package/src/lib/editor/managers/PerformanceManager/PerformanceManager.ts +583 -0
  245. package/src/lib/editor/managers/PerformanceManager/perf-types.ts +196 -0
  246. package/src/lib/editor/managers/SnapManager/SnapManager.test.ts +13 -2
  247. package/src/lib/editor/managers/SnapManager/SnapManager.ts +1 -1
  248. package/src/lib/editor/managers/ThemeManager/defaultThemes.ts +14 -0
  249. package/src/lib/editor/overlays/OverlayManager.ts +183 -0
  250. package/src/lib/editor/overlays/OverlayUtil.ts +143 -0
  251. package/src/lib/editor/overlays/ShapeIndicatorOverlayUtil.ts +216 -0
  252. package/src/lib/editor/overlays/getOverlayDisplayValues.ts +51 -0
  253. package/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx +123 -0
  254. package/src/lib/editor/shapes/ShapeUtil.ts +28 -27
  255. package/src/lib/editor/shapes/group/GroupShapeUtil.tsx +41 -4
  256. package/src/lib/editor/shapes/shared/getPerfectDashProps.ts +7 -0
  257. package/src/lib/editor/tools/StateNode.ts +16 -18
  258. package/src/lib/editor/types/event-types.ts +2 -0
  259. package/src/lib/exports/fetchCache.ts +2 -4
  260. package/src/lib/exports/getSvgJsx.test.ts +3 -1
  261. package/src/lib/exports/getSvgJsx.tsx +2 -1
  262. package/src/lib/hooks/EditorComponentsContext.tsx +0 -27
  263. package/src/lib/hooks/useCanvasEvents.ts +40 -3
  264. package/src/lib/hooks/useEditorComponents.tsx +0 -28
  265. package/src/lib/hooks/usePeerIds.ts +6 -55
  266. package/src/lib/hooks/useShapeCulling.tsx +3 -1
  267. package/src/lib/options.ts +7 -0
  268. package/src/lib/utils/runtime.ts +3 -1
  269. package/src/lib/utils/sync/TLLocalSyncClient.ts +3 -0
  270. package/src/lib/utils/sync/hardReset.ts +0 -8
  271. package/src/version.ts +3 -3
  272. package/dist-cjs/lib/components/LiveCollaborators.js +0 -151
  273. package/dist-cjs/lib/components/LiveCollaborators.js.map +0 -7
  274. package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js +0 -227
  275. package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js.map +0 -7
  276. package/dist-cjs/lib/components/default-components/DefaultBrush.js +0 -38
  277. package/dist-cjs/lib/components/default-components/DefaultBrush.js.map +0 -7
  278. package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js +0 -71
  279. package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js.map +0 -7
  280. package/dist-cjs/lib/components/default-components/DefaultHandle.js +0 -56
  281. package/dist-cjs/lib/components/default-components/DefaultHandle.js.map +0 -7
  282. package/dist-cjs/lib/components/default-components/DefaultHandles.js.map +0 -7
  283. package/dist-cjs/lib/components/default-components/DefaultScribble.js +0 -51
  284. package/dist-cjs/lib/components/default-components/DefaultScribble.js.map +0 -7
  285. package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js +0 -69
  286. package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js.map +0 -7
  287. package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js +0 -107
  288. package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js.map +0 -7
  289. package/dist-cjs/lib/components/default-components/DefaultShapeIndicatorErrorFallback.js +0 -28
  290. package/dist-cjs/lib/components/default-components/DefaultShapeIndicatorErrorFallback.js.map +0 -7
  291. package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js +0 -101
  292. package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js.map +0 -7
  293. package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js +0 -170
  294. package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js.map +0 -7
  295. package/dist-esm/lib/components/LiveCollaborators.mjs +0 -134
  296. package/dist-esm/lib/components/LiveCollaborators.mjs.map +0 -7
  297. package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs +0 -207
  298. package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs.map +0 -7
  299. package/dist-esm/lib/components/default-components/DefaultBrush.mjs +0 -18
  300. package/dist-esm/lib/components/default-components/DefaultBrush.mjs.map +0 -7
  301. package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs +0 -41
  302. package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs.map +0 -7
  303. package/dist-esm/lib/components/default-components/DefaultHandle.mjs +0 -26
  304. package/dist-esm/lib/components/default-components/DefaultHandle.mjs.map +0 -7
  305. package/dist-esm/lib/components/default-components/DefaultHandles.mjs +0 -8
  306. package/dist-esm/lib/components/default-components/DefaultHandles.mjs.map +0 -7
  307. package/dist-esm/lib/components/default-components/DefaultScribble.mjs +0 -21
  308. package/dist-esm/lib/components/default-components/DefaultScribble.mjs.map +0 -7
  309. package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs +0 -39
  310. package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs.map +0 -7
  311. package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs +0 -77
  312. package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs.map +0 -7
  313. package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs +0 -8
  314. package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs.map +0 -7
  315. package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs +0 -81
  316. package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs.map +0 -7
  317. package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs +0 -142
  318. package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs.map +0 -7
  319. package/src/lib/components/LiveCollaborators.tsx +0 -174
  320. package/src/lib/components/default-components/CanvasShapeIndicators.tsx +0 -289
  321. package/src/lib/components/default-components/DefaultBrush.tsx +0 -35
  322. package/src/lib/components/default-components/DefaultCollaboratorHint.tsx +0 -52
  323. package/src/lib/components/default-components/DefaultHandle.tsx +0 -42
  324. package/src/lib/components/default-components/DefaultHandles.tsx +0 -15
  325. package/src/lib/components/default-components/DefaultScribble.tsx +0 -31
  326. package/src/lib/components/default-components/DefaultSelectionForeground.tsx +0 -50
  327. package/src/lib/components/default-components/DefaultShapeIndicator.tsx +0 -104
  328. package/src/lib/components/default-components/DefaultShapeIndicatorErrorFallback.tsx +0 -9
  329. package/src/lib/components/default-components/DefaultShapeIndicators.tsx +0 -116
  330. 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';
@@ -220,6 +219,56 @@ export declare abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> ext
220
219
  getInterpolatedProps(startShape: Shape, endShape: Shape, t: number): Shape['props'];
221
220
  }
222
221
 
222
+ /**
223
+ * A base class for frame-like shapes — containers that clip their children,
224
+ * require full-brush selection, block erasure from inside, and support
225
+ * drag-and-drop reparenting.
226
+ *
227
+ * Extending this class is the easiest way to create a custom frame-like shape.
228
+ * It provides sensible defaults for all frame-like behaviors:
229
+ *
230
+ * - `isFrameLike()` returns `true`
231
+ * - `providesBackgroundForChildren()` returns `true`
232
+ * - `canReceiveNewChildrenOfType()` returns `true` unless the container is locked
233
+ * - `getClipPath()` returns the shape geometry's vertices
234
+ * - `onDragShapesIn()` reparents shapes into the frame (with index restoration)
235
+ * - `onDragShapesOut()` reparents shapes back to the page
236
+ *
237
+ * All methods can be overridden for custom behavior.
238
+ *
239
+ * @example
240
+ * ```ts
241
+ * class MyContainerUtil extends BaseFrameLikeShapeUtil<MyContainerShape> {
242
+ * static override type = 'my-container' as const
243
+ * static override props = myContainerShapeProps
244
+ *
245
+ * override getDefaultProps() {
246
+ * return { w: 300, h: 200 }
247
+ * }
248
+ *
249
+ * override component(shape: MyContainerShape) {
250
+ * return <SVGContainer>...</SVGContainer>
251
+ * }
252
+ *
253
+ * override getIndicatorPath(shape: MyContainerShape) {
254
+ * const path = new Path2D()
255
+ * path.rect(0, 0, shape.props.w, shape.props.h)
256
+ * return path
257
+ * }
258
+ * }
259
+ * ```
260
+ *
261
+ * @public
262
+ */
263
+ export declare abstract class BaseFrameLikeShapeUtil<Shape extends TLBaseBoxShape> extends BaseBoxShapeUtil<Shape> {
264
+ isFrameLike(_shape: Shape): boolean;
265
+ providesBackgroundForChildren(): boolean;
266
+ canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']): boolean;
267
+ getClipPath(shape: Shape): undefined | Vec[];
268
+ onDragShapesIn(shape: Shape, draggingShapes: TLShape[], { initialParentIds, initialIndices }: TLDragShapesInInfo): void;
269
+ onDragShapesOut(shape: Shape, draggingShapes: TLShape[], info: TLDragShapesOutInfo): void;
270
+ }
271
+
223
272
  /** @public */
224
273
  export declare interface BatchMeasurementRequest {
225
274
  html: string;
@@ -719,6 +768,49 @@ export declare class ClickManager {
719
768
  */
720
769
  export declare function clockwiseAngleDist(a0: number, a1: number): number;
721
770
 
771
+ /**
772
+ * Tracks remote peers and exposes the collaborator-related queries used by the
773
+ * editor and its overlays. Encapsulates the visibility clock that periodically
774
+ * re-evaluates which collaborators should be visible based on activity.
775
+ *
776
+ * Accessed via {@link Editor.collaborators}.
777
+ *
778
+ * @public
779
+ */
780
+ export declare class CollaboratorsManager {
781
+ private readonly editor;
782
+ constructor(editor: Editor);
783
+ /**
784
+ * Drives reactive re-evaluation of {@link CollaboratorsManager.getVisibleCollaborators}.
785
+ * Ticked on a fixed interval so callers don't need to manage their own activity timers.
786
+ */
787
+ private readonly _visibilityClock;
788
+ private _getCollaboratorsQuery;
789
+ /**
790
+ * Returns a list of presence records for all peer collaborators.
791
+ * This will return the latest presence record for each connected user.
792
+ */
793
+ getCollaborators(): TLInstancePresence[];
794
+ /**
795
+ * Returns a list of presence records for all peer collaborators on the current page.
796
+ * This will return the latest presence record for each connected user.
797
+ */
798
+ getCollaboratorsOnCurrentPage(): TLInstancePresence[];
799
+ /**
800
+ * Returns a list of presence records for peer collaborators who should currently be
801
+ * shown in the UI. Filters {@link CollaboratorsManager.getCollaborators} by activity
802
+ * state (active / idle / inactive) and visibility rules such as following and
803
+ * highlighted users. Re-evaluates on the visibility clock, so callers don't need to
804
+ * drive their own activity timer.
805
+ */
806
+ getVisibleCollaborators(): TLInstancePresence[];
807
+ /**
808
+ * Returns a list of presence records for peer collaborators who should currently be
809
+ * shown in the UI, filtered to those on the current page.
810
+ */
811
+ getVisibleCollaboratorsOnCurrentPage(): TLInstancePresence[];
812
+ }
813
+
722
814
  /**
723
815
  * @public
724
816
  * @react
@@ -881,51 +973,21 @@ export declare const DEFAULT_THEME: TLTheme;
881
973
  /** @public @react */
882
974
  export declare function DefaultBackground(): JSX.Element;
883
975
 
884
- /** @public @react */
885
- export declare const DefaultBrush: ({ brush, color, opacity, className }: TLBrushProps) => JSX.Element;
886
-
887
976
  /** @public @react */
888
977
  export declare function DefaultCanvas({ className }: TLCanvasComponentProps): JSX.Element;
889
978
 
890
- /** @public @react */
891
- export declare function DefaultCollaboratorHint({ className, zoom, point, color, viewport, opacity }: TLCollaboratorHintProps): JSX.Element;
892
-
893
- /** @public @react */
894
- export declare const DefaultCursor: NamedExoticComponent<TLCursorProps>;
895
-
896
979
  /** @public @react */
897
980
  export declare const DefaultErrorFallback: TLErrorFallbackComponent;
898
981
 
899
982
  /** @public @react */
900
983
  export declare function DefaultGrid({ x, y, z, size }: TLGridProps): JSX.Element;
901
984
 
902
- /** @public @react */
903
- export declare function DefaultHandle({ handle, isCoarse, className, zoom }: TLHandleProps): JSX.Element;
904
-
905
- /** @public @react */
906
- export declare const DefaultHandles: ({ children }: TLHandlesProps) => JSX.Element;
907
-
908
- /** @public @react */
909
- export declare function DefaultScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps): JSX.Element | null;
910
-
911
985
  /** @public @react */
912
986
  export declare function DefaultSelectionBackground({ bounds, rotation }: TLSelectionBackgroundProps): JSX.Element;
913
987
 
914
- /** @public @react */
915
- export declare function DefaultSelectionForeground({ bounds, rotation }: TLSelectionForegroundProps): JSX.Element;
916
-
917
- /** @public @react */
918
- export declare const DefaultShapeIndicator: NamedExoticComponent<TLShapeIndicatorProps>;
919
-
920
- /** @public @react */
921
- export declare const DefaultShapeIndicators: NamedExoticComponent<TLShapeIndicatorsProps>;
922
-
923
988
  /** @public @react */
924
989
  export declare const DefaultShapeWrapper: ForwardRefExoticComponent<TLShapeWrapperProps & RefAttributes<HTMLDivElement>>;
925
990
 
926
- /** @public @react */
927
- export declare function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps): JSX.Element;
928
-
929
991
  /** @public @react */
930
992
  export declare function DefaultSpinner(props: React.SVGProps<SVGSVGElement>): JSX.Element;
931
993
 
@@ -996,6 +1058,7 @@ export declare const defaultTldrawOptions: {
996
1058
  readonly onBeforePasteFromClipboard: undefined;
997
1059
  readonly onClipboardPasteRaw: undefined;
998
1060
  readonly quickZoomPreservesScreenBounds: true;
1061
+ readonly rightClickPanning: true;
999
1062
  readonly snapThreshold: 8;
1000
1063
  readonly spacebarPanning: true;
1001
1064
  readonly temporaryAssetPreviewLifetimeMs: 180000;
@@ -1103,7 +1166,7 @@ export declare class EdgeScrollManager {
1103
1166
  /** @public */
1104
1167
  export declare class Editor extends EventEmitter<TLEventMap> {
1105
1168
  readonly id: string;
1106
- constructor({ store, user, shapeUtils, bindingUtils, assetUtils: assetUtilConstructors, tools, getContainer, cameraOptions, initialState, autoFocus, options: _options, textOptions: _textOptions, getShapeVisibility, colorScheme, fontAssetUrls, themes, initialTheme }: TLEditorOptions);
1169
+ constructor({ store, user, shapeUtils, bindingUtils, assetUtils: assetUtilConstructors, overlayUtils: overlayUtilConstructors, tools, getContainer, cameraOptions, initialState, autoFocus, options: _options, textOptions: _textOptions, getShapeVisibility, colorScheme, fontAssetUrls, themes, initialTheme }: TLEditorOptions);
1107
1170
  private readonly _getShapeVisibility?;
1108
1171
  private getIsShapeHiddenCache;
1109
1172
  isShapeHidden(shapeOrId: TLShape | TLShapeId): boolean;
@@ -1166,6 +1229,12 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1166
1229
  * @public
1167
1230
  */
1168
1231
  readonly snaps: SnapManager;
1232
+ /**
1233
+ * A manager for performance measurement hooks.
1234
+ *
1235
+ * @public
1236
+ */
1237
+ readonly performance: PerformanceManager;
1169
1238
  /* Excluded from this release type: _spatialIndex */
1170
1239
  /**
1171
1240
  * A manager for the any asynchronous events and making sure they're
@@ -1179,6 +1248,12 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1179
1248
  setInterval: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number;
1180
1249
  setTimeout: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number;
1181
1250
  };
1251
+ /**
1252
+ * A manager for remote peer collaborators connected to this editor.
1253
+ *
1254
+ * @public
1255
+ */
1256
+ readonly collaborators: CollaboratorsManager;
1182
1257
  /**
1183
1258
  * A manager for the user and their preferences.
1184
1259
  *
@@ -1204,6 +1279,12 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1204
1279
  * @public
1205
1280
  */
1206
1281
  readonly scribbles: ScribbleManager;
1282
+ /**
1283
+ * A manager for canvas overlay UI elements (selection handles, shape handles, etc.).
1284
+ *
1285
+ * @public
1286
+ */
1287
+ readonly overlays: OverlayManager;
1207
1288
  /**
1208
1289
  * A manager for side effects and correct state enforcement. See {@link @tldraw/store#StoreSideEffects} for details.
1209
1290
  *
@@ -1682,6 +1763,11 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1682
1763
  /**
1683
1764
  * Set the cursor.
1684
1765
  *
1766
+ * No-op when the partial wouldn't change the current cursor — `setCursor`
1767
+ * is called from pointer-move hot paths (see `updateHoveredOverlayId`,
1768
+ * various tool states) and skipping redundant writes avoids needlessly
1769
+ * dirtying instance state.
1770
+ *
1685
1771
  * @param cursor - The cursor to set.
1686
1772
  * @public
1687
1773
  */
@@ -2441,11 +2527,12 @@ export declare class Editor extends EventEmitter<TLEventMap> {
2441
2527
  * @public
2442
2528
  */
2443
2529
  pageToViewport(point: VecLike): Vec;
2444
- private _getCollaboratorsQuery;
2445
2530
  /**
2446
2531
  * Returns a list of presence records for all peer collaborators.
2447
2532
  * This will return the latest presence record for each connected user.
2448
2533
  *
2534
+ * Convenience wrapper for {@link CollaboratorsManager.getCollaborators}.
2535
+ *
2449
2536
  * @public
2450
2537
  */
2451
2538
  getCollaborators(): TLInstancePresence[];
@@ -2453,9 +2540,32 @@ export declare class Editor extends EventEmitter<TLEventMap> {
2453
2540
  * Returns a list of presence records for all peer collaborators on the current page.
2454
2541
  * This will return the latest presence record for each connected user.
2455
2542
  *
2543
+ * Convenience wrapper for {@link CollaboratorsManager.getCollaboratorsOnCurrentPage}.
2544
+ *
2456
2545
  * @public
2457
2546
  */
2458
2547
  getCollaboratorsOnCurrentPage(): TLInstancePresence[];
2548
+ /**
2549
+ * Returns a list of presence records for peer collaborators who should currently be
2550
+ * shown in the UI. Filters {@link Editor.getCollaborators} by activity state
2551
+ * (active / idle / inactive) and visibility rules such as following and highlighted
2552
+ * users. Re-evaluates on the collaborator visibility clock, so callers don't need to
2553
+ * drive their own activity timer.
2554
+ *
2555
+ * Convenience wrapper for {@link CollaboratorsManager.getVisibleCollaborators}.
2556
+ *
2557
+ * @public
2558
+ */
2559
+ getVisibleCollaborators(): TLInstancePresence[];
2560
+ /**
2561
+ * Returns a list of presence records for peer collaborators who should currently be
2562
+ * shown in the UI, filtered to those on the current page.
2563
+ *
2564
+ * Convenience wrapper for {@link CollaboratorsManager.getVisibleCollaboratorsOnCurrentPage}.
2565
+ *
2566
+ * @public
2567
+ */
2568
+ getVisibleCollaboratorsOnCurrentPage(): TLInstancePresence[];
2459
2569
  /**
2460
2570
  * Get the current user's ID for attribution purposes.
2461
2571
  * Also ensures a `user:` record exists in the store for the current user.
@@ -3116,6 +3226,20 @@ export declare class Editor extends EventEmitter<TLEventMap> {
3116
3226
  type: T['type'];
3117
3227
  }>;
3118
3228
  isShapeOfType<T extends TLShape = TLShape>(shapeId: TLShapeId, type: T['type']): boolean;
3229
+ /**
3230
+ * Get whether a shape behaves like a frame — a container that has child
3231
+ * shapes, requires full-brush selection, blocks erasure from inside, etc.
3232
+ *
3233
+ * @example
3234
+ * ```ts
3235
+ * const isFrameLike = editor.isShapeFrameLike(someShape)
3236
+ * ```
3237
+ *
3238
+ * @param shape - The shape (or shape id) to test.
3239
+ *
3240
+ * @public
3241
+ */
3242
+ isShapeFrameLike(shape: TLShape | TLShapeId): boolean;
3119
3243
  /**
3120
3244
  * Get a shape by its id.
3121
3245
  *
@@ -4649,6 +4773,16 @@ export declare function getFreshUserPreferences(): TLUserPreferences;
4649
4773
  */
4650
4774
  export declare function getIncrementedName(name: string, others: string[]): string;
4651
4775
 
4776
+ /**
4777
+ * Get the resolved display values for an overlay, merging the base values with any overrides.
4778
+ *
4779
+ * @public
4780
+ */
4781
+ export declare function getOverlayDisplayValues<Overlay extends TLOverlay, DisplayValues extends object>(util: {
4782
+ editor: Editor;
4783
+ options: OverlayOptionsWithDisplayValues<Overlay, DisplayValues>;
4784
+ }, overlay: Overlay, colorMode?: 'dark' | 'light'): DisplayValues;
4785
+
4652
4786
  /* Excluded from this release type: getOwnerDocument */
4653
4787
 
4654
4788
  /* Excluded from this release type: getOwnerWindow */
@@ -4775,14 +4909,14 @@ export declare class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
4775
4909
  static type: "group";
4776
4910
  static props: RecordProps<TLGroupShape>;
4777
4911
  static migrations: TLPropsMigrations;
4778
- hideSelectionBoundsFg(): boolean;
4912
+ hideSelectionBoundsFg(shape: TLGroupShape): boolean;
4779
4913
  canBind(): boolean;
4780
4914
  canResize(): boolean;
4781
4915
  canResizeChildren(): boolean;
4782
4916
  getDefaultProps(): TLGroupShape['props'];
4783
4917
  getGeometry(shape: TLGroupShape): Geometry2d;
4784
4918
  component(shape: TLGroupShape): JSX.Element | null;
4785
- indicator(shape: TLGroupShape): JSX.Element;
4919
+ getIndicatorPath(shape: TLGroupShape): Path2D;
4786
4920
  onChildrenChange(group: TLGroupShape): void;
4787
4921
  }
4788
4922
 
@@ -5061,6 +5195,12 @@ export declare class InputsManager {
5061
5195
  get isPointing(): boolean;
5062
5196
  set isPointing(isPointing: boolean);
5063
5197
  /* Excluded from this release type: setIsPointing */
5198
+ private _isRightPointing;
5199
+ /**
5200
+ * Whether the user is right-click pointing (before drag threshold).
5201
+ */
5202
+ getIsRightPointing(): boolean;
5203
+ /* Excluded from this release type: setIsRightPointing */
5064
5204
  private _isPinching;
5065
5205
  /**
5066
5206
  * Whether the user is pinching.
@@ -5404,6 +5544,185 @@ export declare function openWindow(url: string, target?: string, allowReferrer?:
5404
5544
  /** @public */
5405
5545
  export declare type OptionalKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
5406
5546
 
5547
+ /** @public */
5548
+ export declare class OverlayManager {
5549
+ readonly editor: Editor;
5550
+ constructor(editor: Editor);
5551
+ /* Excluded from this release type: _overlayUtils */
5552
+ /* Excluded from this release type: registerUtil */
5553
+ /**
5554
+ * Get an overlay util by type string, overlay instance, or by passing
5555
+ * a util class as a generic parameter for type-safe lookup.
5556
+ *
5557
+ * @example
5558
+ * ```ts
5559
+ * const util = editor.overlays.getOverlayUtil('brush')
5560
+ * const util = editor.overlays.getOverlayUtil<BrushOverlayUtil>('brush')
5561
+ * const util = editor.overlays.getOverlayUtil(myOverlay)
5562
+ * ```
5563
+ *
5564
+ * @public
5565
+ */
5566
+ getOverlayUtil<T extends OverlayUtil>(type: T extends OverlayUtil<infer O> ? O['type'] : string): T;
5567
+ getOverlayUtil<O extends TLOverlay>(overlay: O): OverlayUtil<O>;
5568
+ /**
5569
+ * Returns all registered overlay utils in paint order (ascending zIndex).
5570
+ * Utils with the same zIndex preserve their registration order.
5571
+ *
5572
+ * @public
5573
+ */
5574
+ getOverlayUtilsInZOrder(): OverlayUtil[];
5575
+ /**
5576
+ * Reactive list of active overlay utils paired with the overlays they
5577
+ * produced for the current editor state, in paint order (ascending
5578
+ * zIndex). Both the hit-test and render paths read from this single
5579
+ * cached scan instead of each re-deriving the active set. Active utils
5580
+ * are included even when their `getOverlays()` returns an empty array,
5581
+ * since `render()` may still draw non-interactive UI (e.g. the selection
5582
+ * bounding box during brushing).
5583
+ *
5584
+ * @public
5585
+ */
5586
+ getActiveOverlayEntries(): TLOverlayEntry[];
5587
+ /**
5588
+ * Reactively computed list of all currently active overlays, in paint order.
5589
+ * @public
5590
+ */
5591
+ getCurrentOverlays(): TLOverlay[];
5592
+ private _geometryCache;
5593
+ /**
5594
+ * Get hit-test geometry for an overlay, cached by overlay identity. Lets
5595
+ * hit-testing on a pointermove storm skip the per-overlay geometry
5596
+ * allocation that {@link OverlayUtil.getGeometry} would otherwise do on
5597
+ * every call.
5598
+ *
5599
+ * @public
5600
+ */
5601
+ getOverlayGeometry(overlay: TLOverlay): Geometry2d | null;
5602
+ /**
5603
+ * The currently hovered overlay id.
5604
+ * @public
5605
+ */
5606
+ private _hoveredOverlayId;
5607
+ getHoveredOverlayId(): null | string;
5608
+ getHoveredOverlay(): null | TLOverlay;
5609
+ setHoveredOverlay(id: null | string): void;
5610
+ /**
5611
+ * Hit test all active overlays at a given page point.
5612
+ * Returns the topmost overlay whose geometry contains the point, or null.
5613
+ * Utils are walked from highest zIndex to lowest so the overlay painted on
5614
+ * top also wins the hit test. Within a util, overlays are walked in
5615
+ * array order: the first overlay whose geometry contains the point wins,
5616
+ * so utils should place highest-priority overlays first in `getOverlays`.
5617
+ * Interactive overlays (those with geometry) are checked; non-interactive are skipped.
5618
+ *
5619
+ * @param point - Point in page coordinates
5620
+ * @param margin - Hit test margin
5621
+ * @public
5622
+ */
5623
+ getOverlayAtPoint(point: VecLike, margin?: number): null | TLOverlay;
5624
+ }
5625
+
5626
+ /** @public */
5627
+ export declare interface OverlayOptionsWithDisplayValues<Overlay extends TLOverlay, DisplayValues extends object> {
5628
+ getDefaultDisplayValues(editor: Editor, overlay: Overlay, theme: TLTheme, colorMode: 'dark' | 'light'): DisplayValues;
5629
+ getCustomDisplayValues(editor: Editor, overlay: Overlay, theme: TLTheme, colorMode: 'dark' | 'light'): Partial<DisplayValues>;
5630
+ }
5631
+
5632
+ /**
5633
+ * Base class for overlay utilities. Overlays are ephemeral UI elements rendered
5634
+ * on top of the canvas (selection handles, rotation corners, shape handles, etc.).
5635
+ *
5636
+ * Each OverlayUtil defines a type of overlay and knows how to:
5637
+ * - Determine when its overlays should be active (predicate)
5638
+ * - Produce overlay instances from current editor state
5639
+ * - Provide hit-test geometry for interactive overlays
5640
+ * - Provide cursor style on hover
5641
+ * - Render into a canvas 2D context
5642
+ *
5643
+ * @public
5644
+ */
5645
+ export declare abstract class OverlayUtil<T extends TLOverlay = TLOverlay> {
5646
+ editor: Editor;
5647
+ constructor(editor: Editor);
5648
+ static type: string;
5649
+ /**
5650
+ * Options for this overlay util. Override this to provide customization options.
5651
+ * Use {@link OverlayUtil.configure} to customize existing overlay utils.
5652
+ *
5653
+ * `zIndex` controls paint and hit-test order across utils — higher numbers
5654
+ * paint on top and are hit-tested first. Ties resolve by registration order.
5655
+ * Defaults to `0`; built-in utils use larger integers (100, 200, …) with
5656
+ * gaps so custom utils can slot between.
5657
+ *
5658
+ * @public
5659
+ */
5660
+ options: {
5661
+ zIndex?: number;
5662
+ };
5663
+ /**
5664
+ * Create a new overlay util class with the given options merged in.
5665
+ *
5666
+ * @example
5667
+ * ```ts
5668
+ * const MyBrush = BrushOverlayUtil.configure({ fill: 'rgba(0,0,255,0.1)' })
5669
+ * ```
5670
+ *
5671
+ * @public
5672
+ */
5673
+ static configure<T extends TLOverlayUtilConstructor<any>>(this: T, options: T extends new (...args: any[]) => {
5674
+ options: infer Options;
5675
+ } ? Partial<Options> : never): T;
5676
+ /**
5677
+ * Whether this overlay util's overlays should currently be active.
5678
+ * Checked reactively to determine which overlays exist at any given time.
5679
+ */
5680
+ abstract isActive(): boolean;
5681
+ /**
5682
+ * Returns the overlay instances that currently exist.
5683
+ * Called only when `isActive()` returns true.
5684
+ */
5685
+ abstract getOverlays(): T[];
5686
+ /**
5687
+ * Returns hit-test geometry for an overlay instance, in page coordinates.
5688
+ * Return null for non-interactive overlays (e.g. snap indicators, scribbles).
5689
+ */
5690
+ getGeometry(_overlay: T): Geometry2d | null;
5691
+ /**
5692
+ * Returns the cursor type to show when hovering this overlay.
5693
+ */
5694
+ getCursor(_overlay: T): TLCursorType | undefined;
5695
+ /**
5696
+ * Called when the user points down on this overlay, before the default
5697
+ * routing runs. Acts as an interrupt: define it to take over the event.
5698
+ *
5699
+ * Return `false` to continue with the default behavior (e.g. the
5700
+ * built-in rotate/resize handle transitions or shape-handle dispatch).
5701
+ * Return `true` — or nothing at all — to skip the default. In other
5702
+ * words, once you override this method you own the event unless you
5703
+ * explicitly opt back in by returning `false`.
5704
+ */
5705
+ onPointerDown?(overlay: T, info: TLPointerEventInfo): boolean | void;
5706
+ /**
5707
+ * Render all active overlays into the canvas context.
5708
+ * The context is already transformed to page space (camera transform applied).
5709
+ * Called reactively when overlays or editor state changes.
5710
+ */
5711
+ render(_ctx: CanvasRenderingContext2D, _overlays: T[]): void;
5712
+ /**
5713
+ * Optional: render all active overlays into the minimap canvas.
5714
+ * The context is already transformed to page space (minimap camera applied),
5715
+ * so overlays can use the same page-space coordinates as in {@link OverlayUtil.render}.
5716
+ *
5717
+ * `zoom` is the minimap's screen-pixels-per-page-unit, analogous to
5718
+ * `editor.getCamera().z`; use `1 / zoom` for one-minimap-pixel line widths.
5719
+ *
5720
+ * Most overlays should leave this blank — only overlays that are meaningful
5721
+ * at minimap scale (e.g. brushes, collaborator cursors) should opt in.
5722
+ */
5723
+ renderMinimap(_ctx: CanvasRenderingContext2D, _overlays: T[], _zoom: number): void;
5724
+ }
5725
+
5407
5726
  /**
5408
5727
  * Parses a string created by {@link createDeepLinkString} back into a deep link descriptor.
5409
5728
  *
@@ -5417,6 +5736,94 @@ export declare function parseDeepLinkString(deepLinkString: string): TLDeepLink;
5417
5736
  /** @public */
5418
5737
  export declare type PerfectDashTerminal = 'none' | 'outset' | 'skip';
5419
5738
 
5739
+ /**
5740
+ * Optional adapter that pipes PerformanceManager events into browser
5741
+ * `performance.mark()` / `performance.measure()` for DevTools integration.
5742
+ *
5743
+ * Tree-shakeable — only included if imported.
5744
+ *
5745
+ * @example
5746
+ * ```ts
5747
+ * const adapter = new PerformanceApiAdapter(editor.performance)
5748
+ * // ... later
5749
+ * adapter.dispose()
5750
+ * ```
5751
+ *
5752
+ * @public
5753
+ */
5754
+ export declare class PerformanceApiAdapter {
5755
+ private cleanups;
5756
+ constructor(perfManager: PerformanceManager);
5757
+ /** Remove all listeners and stop piping events. @public */
5758
+ dispose(): void;
5759
+ }
5760
+
5761
+ /**
5762
+ * Manages performance event subscriptions for the editor. Available as `editor.performance`.
5763
+ *
5764
+ * Listeners are lazy — internal editor hooks (frame, shape events) are only attached while
5765
+ * at least one subscriber exists, so there is zero overhead when unused.
5766
+ *
5767
+ * @example
5768
+ * ```ts
5769
+ * const unsub = editor.performance.on('interaction-end', (event) => {
5770
+ * console.log(`${event.name}: ${event.fps.toFixed(1)} fps, p95=${event.p95FrameTime.toFixed(1)}ms`)
5771
+ * })
5772
+ * ```
5773
+ *
5774
+ * @public
5775
+ */
5776
+ export declare class PerformanceManager {
5777
+ /* Excluded from this release type: emitter */
5778
+ private editor;
5779
+ private activeInteraction;
5780
+ private activeCamera;
5781
+ private frameCleanup;
5782
+ private shapeCreatedCleanup;
5783
+ private shapeEditedCleanup;
5784
+ private shapeDeletedCleanup;
5785
+ private loafObserver;
5786
+ constructor(editor: Editor);
5787
+ /**
5788
+ * Subscribe to a performance event. Returns an unsubscribe function.
5789
+ *
5790
+ * @example
5791
+ * ```ts
5792
+ * const unsub = editor.performance.on('interaction-end', (event) => {
5793
+ * sendToAnalytics({ name: event.name, fps: event.fps, p95: event.p95FrameTime })
5794
+ * })
5795
+ * // later: unsub()
5796
+ * ```
5797
+ *
5798
+ * @public
5799
+ */
5800
+ on<K extends keyof TLPerfEventMap>(event: K, fn: (...args: TLPerfEventMap[K]) => void): () => void;
5801
+ /**
5802
+ * Subscribe to a performance event once. The listener is removed after the first invocation.
5803
+ * Returns an unsubscribe function for early removal.
5804
+ *
5805
+ * @public
5806
+ */
5807
+ once<K extends keyof TLPerfEventMap>(event: K, fn: (...args: TLPerfEventMap[K]) => void): () => void;
5808
+ /* Excluded from this release type: dispose */
5809
+ /* Excluded from this release type: _notifyInteractionStart */
5810
+ /* Excluded from this release type: _notifyInteractionEnd */
5811
+ /* Excluded from this release type: _notifyCameraOperation */
5812
+ /* Excluded from this release type: _notifyUndoRedo */
5813
+ private _startCameraSession;
5814
+ private _endCameraSession;
5815
+ private _onFrame;
5816
+ private _onShapesCreated;
5817
+ private _onShapesEdited;
5818
+ private _onShapesDeleted;
5819
+ private _startLoafObserver;
5820
+ private _stopLoafObserver;
5821
+ private _needsFrameListener;
5822
+ private _needsLoafObserver;
5823
+ private _maybeAttachLazyListeners;
5824
+ private _maybeDetachLazyListeners;
5825
+ }
5826
+
5420
5827
  /**
5421
5828
  * Find the approximate perimeter of an ellipse.
5422
5829
  *
@@ -5848,6 +6255,32 @@ export declare function setRuntimeOverrides(input: Partial<typeof runtime>): voi
5848
6255
  /** @public */
5849
6256
  export declare function setUserPreferences(user: TLUserPreferences): void;
5850
6257
 
6258
+ /**
6259
+ * Overlay util for shape indicators — the selection / hover / hint outlines drawn
6260
+ * under the selection foreground. Paints local indicators in the theme's
6261
+ * selection color.
6262
+ *
6263
+ * Remote collaborator selection indicators are drawn by a separate overlay util
6264
+ * (e.g. `CollaboratorShapeIndicatorOverlayUtil` from `tldraw`) that runs at a
6265
+ * lower z-index so peer selections appear under the local indicators.
6266
+ *
6267
+ * Non-interactive: contributes no hit-test geometry.
6268
+ *
6269
+ * @public
6270
+ */
6271
+ export declare class ShapeIndicatorOverlayUtil extends OverlayUtil<TLShapeIndicatorOverlay> {
6272
+ static type: string;
6273
+ options: {
6274
+ hintedLineWidth: number;
6275
+ lineWidth: number;
6276
+ zIndex: number;
6277
+ };
6278
+ private _instanceFlags$;
6279
+ isActive(): boolean;
6280
+ getOverlays(): TLShapeIndicatorOverlay[];
6281
+ render(ctx: CanvasRenderingContext2D, overlays: TLShapeIndicatorOverlay[]): void;
6282
+ }
6283
+
5851
6284
  /** @public */
5852
6285
  export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5853
6286
  editor: Editor;
@@ -5944,37 +6377,30 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5944
6377
  */
5945
6378
  abstract component(shape: Shape): any;
5946
6379
  /**
5947
- * Get JSX describing the shape's indicator (as an SVG element).
5948
- *
5949
- * @param shape - The shape.
5950
- * @public
5951
- */
5952
- abstract indicator(shape: Shape): any;
5953
- /**
5954
- * Whether to use the legacy React-based indicator rendering.
6380
+ * Get a Path2D (or a richer object with clip/additional paths) for rendering the
6381
+ * shape's indicator on the canvas. Shapes that return `undefined` will not render
6382
+ * an indicator.
5955
6383
  *
5956
- * Override this to return `false` if your shape implements {@link ShapeUtil.getIndicatorPath}
5957
- * for canvas-based indicator rendering.
6384
+ * For complex indicators that need clipping (e.g., arrows with labels), return an
6385
+ * object with `path`, `clipPath`, and `additionalPaths` properties.
5958
6386
  *
5959
- * @returns `true` to use SVG indicators (default), `false` to use canvas indicators.
6387
+ * @param shape - The shape.
6388
+ * @returns A Path2D to stroke, or an object with clipping info, or undefined to skip.
5960
6389
  * @public
5961
6390
  */
5962
- useLegacyIndicator(): boolean;
6391
+ abstract getIndicatorPath(shape: Shape): TLIndicatorPath | undefined;
5963
6392
  /**
5964
- * Get a Path2D for rendering the shape's indicator on the canvas.
5965
- *
5966
- * When implemented, this is used instead of {@link ShapeUtil.indicator} for more
5967
- * efficient canvas-based indicator rendering. Shapes that return `undefined` will
5968
- * fall back to SVG-based rendering via {@link ShapeUtil.indicator}.
6393
+ * Get JSX describing the shape's indicator (as an SVG element).
5969
6394
  *
5970
- * For complex indicators that need clipping (e.g., arrows with labels), return an
5971
- * object with `path`, `clipPath`, and `additionalPaths` properties.
6395
+ * @deprecated SVG indicators are no longer rendered. Override
6396
+ * {@link ShapeUtil.getIndicatorPath} instead. This stub is retained so legacy
6397
+ * subclasses that still call `super.indicator()` keep type-checking; new shapes
6398
+ * should not implement it.
5972
6399
  *
5973
6400
  * @param shape - The shape.
5974
- * @returns A Path2D to stroke, or an object with clipping info, or undefined to use SVG fallback.
5975
6401
  * @public
5976
6402
  */
5977
- getIndicatorPath(shape: Shape): TLIndicatorPath | undefined;
6403
+ indicator(_shape: Shape): any;
5978
6404
  /**
5979
6405
  * Get the font faces that should be rendered in the document in order for this shape to render
5980
6406
  * correctly.
@@ -6008,7 +6434,7 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
6008
6434
  *
6009
6435
  * @public
6010
6436
  */
6011
- canBind(_opts: TLShapeUtilCanBindOpts): boolean;
6437
+ canBind(opts: TLShapeUtilCanBindOpts): boolean;
6012
6438
  /**
6013
6439
  * Whether the shape can be double clicked to edit.
6014
6440
  *
@@ -6142,6 +6568,14 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
6142
6568
  * @public
6143
6569
  */
6144
6570
  isAspectRatioLocked(shape: Shape): boolean;
6571
+ /**
6572
+ * Whether the shape behaves like a frame — a container that has child shapes,
6573
+ * requires full-brush selection, blocks erasure from inside, etc.
6574
+ *
6575
+ * @param shape - The shape.
6576
+ * @public
6577
+ */
6578
+ isFrameLike(_shape: Shape): boolean;
6145
6579
  /**
6146
6580
  * By default, the bounds of an image export are the bounds of all the shapes it contains, plus
6147
6581
  * some padding. If an export includes a shape where `isExportBoundsContainer` is true, then the
@@ -6189,7 +6623,7 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
6189
6623
  * @param type - The shape type.
6190
6624
  * @public
6191
6625
  */
6192
- canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']): boolean;
6626
+ canReceiveNewChildrenOfType(shape: Shape, type: TLShape['type']): boolean;
6193
6627
  /**
6194
6628
  * Get the shape as an SVG object.
6195
6629
  *
@@ -6632,6 +7066,8 @@ export declare abstract class StateNode implements Partial<TLEventHandlers> {
6632
7066
  static children?: () => TLStateNodeConstructor[];
6633
7067
  static isLockable: boolean;
6634
7068
  static useCoalescedEvents: boolean;
7069
+ /** Set to `true` in subclasses to emit interaction-start/end performance events when this state is entered/exited. */
7070
+ static trackPerformance: boolean;
6635
7071
  id: string;
6636
7072
  type: 'branch' | 'leaf' | 'root';
6637
7073
  shapeType?: string;
@@ -6731,6 +7167,19 @@ export declare const stopEventPropagation: (e: any) => any;
6731
7167
 
6732
7168
  /* Excluded from this release type: StoreName */
6733
7169
 
7170
+ /**
7171
+ * Combine every batchable shape indicator into a single page-space `Path2D` and
7172
+ * emit one stroke call. Shapes whose indicator needs an evenodd clip (e.g.
7173
+ * arrows with labels or complex arrowheads) can't be batched — they still
7174
+ * stroke individually inside a save/restore with `ctx.clip` applied.
7175
+ *
7176
+ * Shared by {@link ShapeIndicatorOverlayUtil} and any overlay util that paints
7177
+ * shape indicators (e.g. collaborator selections).
7178
+ *
7179
+ * @public
7180
+ */
7181
+ export declare function strokeShapeIndicators(editor: Editor, ctx: CanvasRenderingContext2D, shapeIds: TLShapeId[]): void;
7182
+
6734
7183
  /** @public */
6735
7184
  export declare function suffixSafeId(id: SafeId, suffix: string): SafeId;
6736
7185
 
@@ -6905,6 +7354,9 @@ export declare type TLAnyAssetUtilConstructor = TLAssetUtilConstructor<any>;
6905
7354
  /** @public */
6906
7355
  export declare type TLAnyBindingUtilConstructor = TLBindingUtilConstructor<any>;
6907
7356
 
7357
+ /** @public */
7358
+ export declare type TLAnyOverlayUtilConstructor = TLOverlayUtilConstructor<any>;
7359
+
6908
7360
  /** @public */
6909
7361
  export declare type TLAnyShapeUtilConstructor = TLShapeUtilConstructor<any>;
6910
7362
 
@@ -6948,15 +7400,6 @@ export declare interface TLBindingUtilConstructor<T extends TLBinding, U extends
6948
7400
  migrations?: TLPropsMigrations;
6949
7401
  }
6950
7402
 
6951
- /** @public */
6952
- export declare interface TLBrushProps {
6953
- userId?: string;
6954
- brush: BoxModel;
6955
- color?: string;
6956
- opacity?: number;
6957
- className?: string;
6958
- }
6959
-
6960
7403
  /** @public */
6961
7404
  export declare interface TLCameraConstraints {
6962
7405
  /** The bounds (in page space) of the constrained space */
@@ -7005,6 +7448,29 @@ export declare interface TLCameraConstraints {
7005
7448
  };
7006
7449
  }
7007
7450
 
7451
+ /**
7452
+ * Emitted when a camera operation ends (after a 50ms debounce), with aggregated frame time stats.
7453
+ * @public
7454
+ */
7455
+ export declare interface TLCameraEndPerfEvent extends TLPerfFrameTimeStats {
7456
+ /** Whether this was a pan or zoom operation. */
7457
+ type: 'panning' | 'zooming';
7458
+ /** Total shapes on the current page. */
7459
+ shapeCount: number;
7460
+ /** Number of shapes visible (not culled) in the viewport. */
7461
+ visibleShapeCount: number;
7462
+ /** Number of shapes culled (off-screen) from rendering. */
7463
+ culledShapeCount: number;
7464
+ /** Viewport width in screen pixels. */
7465
+ viewportWidth: number;
7466
+ /** Viewport height in screen pixels. */
7467
+ viewportHeight: number;
7468
+ /** Camera zoom level (`camera.z`) at session end. */
7469
+ zoomLevel: number;
7470
+ /** `performance.now()` when the camera session ended. */
7471
+ timestamp: number;
7472
+ }
7473
+
7008
7474
  /** @public */
7009
7475
  export declare interface TLCameraMoveOptions {
7010
7476
  /** Whether to move the camera immediately, rather than on the next tick. */
@@ -7043,6 +7509,17 @@ export declare interface TLCameraOptions {
7043
7509
  constraints?: TLCameraConstraints;
7044
7510
  }
7045
7511
 
7512
+ /**
7513
+ * Emitted when a camera operation (pan or zoom) begins.
7514
+ * @public
7515
+ */
7516
+ export declare interface TLCameraStartPerfEvent {
7517
+ /** Whether this is a pan or zoom operation. */
7518
+ type: 'panning' | 'zooming';
7519
+ /** `performance.now()` when the camera session started. */
7520
+ timestamp: number;
7521
+ }
7522
+
7046
7523
  /** @public */
7047
7524
  export declare type TLCancelEvent = (info: TLCancelEventInfo) => void;
7048
7525
 
@@ -7110,17 +7587,6 @@ export declare interface TLClipboardWriteInfo {
7110
7587
  readonly source: 'menu' | 'native';
7111
7588
  }
7112
7589
 
7113
- /** @public */
7114
- export declare interface TLCollaboratorHintProps {
7115
- userId: string;
7116
- className?: string;
7117
- point: VecModel;
7118
- viewport: Box;
7119
- zoom: number;
7120
- opacity?: number;
7121
- color: string;
7122
- }
7123
-
7124
7590
  /** @public */
7125
7591
  export declare type TLCompleteEvent = (info: TLCompleteEventInfo) => void;
7126
7592
 
@@ -7165,17 +7631,6 @@ export declare interface TLCurrentUser {
7165
7631
  readonly setUserPreferences: (userPreferences: TLUserPreferences) => void;
7166
7632
  }
7167
7633
 
7168
- /** @public */
7169
- export declare interface TLCursorProps {
7170
- userId: string;
7171
- className?: string;
7172
- point: null | VecModel;
7173
- zoom: number;
7174
- color?: string;
7175
- name: null | string;
7176
- chatMessage: string;
7177
- }
7178
-
7179
7634
  /** @public */
7180
7635
  export declare type TLDeepLink = {
7181
7636
  bounds: BoxModel;
@@ -7269,6 +7724,10 @@ export declare interface TldrawEditorBaseProps {
7269
7724
  * An array of asset utils to use in the editor.
7270
7725
  */
7271
7726
  assetUtils?: readonly TLAnyAssetUtilConstructor[];
7727
+ /**
7728
+ * An array of overlay utils to use in the editor for canvas overlay UI elements.
7729
+ */
7730
+ overlayUtils?: readonly TLAnyOverlayUtilConstructor[];
7272
7731
  /**
7273
7732
  * An array of tools to add to the editor's state chart.
7274
7733
  */
@@ -7530,6 +7989,12 @@ export declare interface TldrawOptions {
7530
7989
  * When false, the spacebar will not pan the camera.
7531
7990
  */
7532
7991
  readonly spacebarPanning: boolean;
7992
+ /**
7993
+ * Whether to allow right-click + drag to pan the camera. When true, right-click + drag pans the
7994
+ * camera and a static right-click opens the context menu at the release position. When false,
7995
+ * right-click opens the context menu on press (no drag-to-pan).
7996
+ */
7997
+ readonly rightClickPanning: boolean;
7533
7998
  /**
7534
7999
  * The default padding (in pixels) used when zooming to fit content in the viewport.
7535
8000
  * This affects methods like `zoomToFit()`, `zoomToSelection()`, and `zoomToBounds()`.
@@ -7659,34 +8124,17 @@ export declare interface TLDropShapesOverInfo {
7659
8124
  /** @public */
7660
8125
  export declare interface TLEditorComponents {
7661
8126
  Background?: ComponentType | null;
7662
- Brush?: ComponentType<TLBrushProps> | null;
7663
8127
  Canvas?: ComponentType<TLCanvasComponentProps> | null;
7664
- CollaboratorBrush?: ComponentType<TLBrushProps> | null;
7665
- CollaboratorCursor?: ComponentType<TLCursorProps> | null;
7666
- CollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null;
7667
- CollaboratorScribble?: ComponentType<TLScribbleProps> | null;
7668
- CollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null;
7669
- Cursor?: ComponentType<TLCursorProps> | null;
7670
8128
  Grid?: ComponentType<TLGridProps> | null;
7671
- Handle?: ComponentType<TLHandleProps> | null;
7672
- Handles?: ComponentType<TLHandlesProps> | null;
7673
8129
  InFrontOfTheCanvas?: ComponentType | null;
7674
8130
  LoadingScreen?: ComponentType | null;
7675
8131
  OnTheCanvas?: ComponentType | null;
7676
- Overlays?: ComponentType | null;
7677
- Scribble?: ComponentType<TLScribbleProps> | null;
7678
8132
  SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null;
7679
- SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null;
7680
- ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null;
7681
- ShapeIndicators?: ComponentType | null;
7682
8133
  ShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null;
7683
- SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null;
7684
8134
  Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null;
7685
8135
  SvgDefs?: ComponentType | null;
7686
- ZoomBrush?: ComponentType<TLBrushProps> | null;
7687
8136
  ErrorFallback?: TLErrorFallbackComponent;
7688
8137
  ShapeErrorFallback?: TLShapeErrorFallbackComponent;
7689
- ShapeIndicatorErrorFallback?: TLShapeIndicatorErrorFallbackComponent;
7690
8138
  }
7691
8139
 
7692
8140
  /** @public */
@@ -7708,6 +8156,11 @@ export declare interface TLEditorOptions {
7708
8156
  * An array of asset utils to use in the editor. These will be used to handle asset-type-specific behavior.
7709
8157
  */
7710
8158
  assetUtils?: readonly TLAnyAssetUtilConstructor[];
8159
+ /**
8160
+ * An array of overlay utils to use in the editor. These define canvas overlay UI elements
8161
+ * like selection handles, rotation corners, shape handles, etc.
8162
+ */
8163
+ overlayUtils?: readonly TLAnyOverlayUtilConstructor[];
7711
8164
  /**
7712
8165
  * An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor.
7713
8166
  */
@@ -7981,6 +8434,21 @@ export declare interface TLFilesExternalContent extends TLBaseExternalContent {
7981
8434
  ignoreParent?: boolean;
7982
8435
  }
7983
8436
 
8437
+ /**
8438
+ * Emitted every animation frame when at least one `'frame'` listener is registered.
8439
+ * @public
8440
+ */
8441
+ export declare interface TLFramePerfEvent {
8442
+ /** Time since the last frame in ms. */
8443
+ elapsed: number;
8444
+ /** Total shapes on the current page. */
8445
+ shapeCount: number;
8446
+ /** Number of shapes culled (off-screen) from rendering. */
8447
+ culledShapeCount: number;
8448
+ /** Number of shapes visible (not culled) in the viewport. */
8449
+ visibleShapeCount: number;
8450
+ }
8451
+
7984
8452
  /** Additional options for the {@link ShapeUtil.getGeometry} method.
7985
8453
  *
7986
8454
  * @public
@@ -8059,20 +8527,6 @@ export declare interface TLHandleDragInfo<T extends TLShape> {
8059
8527
  initial?: T | undefined;
8060
8528
  }
8061
8529
 
8062
- /** @public */
8063
- export declare interface TLHandleProps {
8064
- shapeId: TLShapeId;
8065
- handle: TLHandle;
8066
- zoom: number;
8067
- isCoarse: boolean;
8068
- className?: string;
8069
- }
8070
-
8071
- /** @public */
8072
- export declare interface TLHandlesProps {
8073
- children: ReactNode;
8074
- }
8075
-
8076
8530
  /** @public */
8077
8531
  export declare interface TLHistoryBatchOptions {
8078
8532
  /**
@@ -8123,6 +8577,38 @@ export declare type TLIndicatorPath = {
8123
8577
  path: Path2D;
8124
8578
  } | Path2D;
8125
8579
 
8580
+ /**
8581
+ * Emitted when an interaction state is exited, with aggregated frame time stats.
8582
+ * @public
8583
+ */
8584
+ export declare interface TLInteractionEndPerfEvent extends TLPerfFrameTimeStats {
8585
+ /** The state node id (e.g. `'translating'`). */
8586
+ name: string;
8587
+ /** Full tool path (e.g. `'select.translating'`). */
8588
+ path: string;
8589
+ /** Total shapes on the current page. */
8590
+ shapeCount: number;
8591
+ /** Breakdown of selected shape types at interaction start (e.g. `{ geo: 2, draw: 1 }`). */
8592
+ selectedShapeTypes: Record<string, number>;
8593
+ /** Camera zoom level (`camera.z`) at interaction end. */
8594
+ zoomLevel: number;
8595
+ /** `performance.now()` when the interaction ended. */
8596
+ timestamp: number;
8597
+ }
8598
+
8599
+ /**
8600
+ * Emitted when an interaction state (e.g. translating, resizing) is entered.
8601
+ * @public
8602
+ */
8603
+ export declare interface TLInteractionStartPerfEvent {
8604
+ /** The state node id (e.g. `'translating'`). */
8605
+ name: string;
8606
+ /** Full tool path (e.g. `'select.translating'`). */
8607
+ path: string;
8608
+ /** `performance.now()` when the interaction started. */
8609
+ timestamp: number;
8610
+ }
8611
+
8126
8612
  /** @public */
8127
8613
  export declare type TLInterruptEvent = (info: TLInterruptEventInfo) => void;
8128
8614
 
@@ -8370,6 +8856,130 @@ export declare const tlmenus: {
8370
8856
  */
8371
8857
  export declare type TLOnMountHandler = (editor: Editor) => (() => undefined | void) | undefined | void;
8372
8858
 
8859
+ /** @public */
8860
+ export declare interface TLOverlay<Props = Record<string, unknown>> {
8861
+ /**
8862
+ * Globally unique id for this overlay instance across all overlay utils.
8863
+ * Hit-test and hover lookup key on `id` alone, so utils must namespace their
8864
+ * ids (e.g. `'selection_fg:top_left'`, `'handle:<shapeId>:<handleId>'`) to
8865
+ * avoid colliding with overlays from other utils.
8866
+ */
8867
+ id: string;
8868
+ /** The overlay util type that owns this instance */
8869
+ type: string;
8870
+ /** Arbitrary props for the overlay (handle id, corner name, etc.) */
8871
+ props: Props;
8872
+ }
8873
+
8874
+ /**
8875
+ * An active overlay util paired with the overlays it produced for the current
8876
+ * editor state. Returned by {@link OverlayManager.getActiveOverlayEntries} so
8877
+ * hit-test, render, and debug paths share a single scan per reactive tick.
8878
+ *
8879
+ * @public
8880
+ */
8881
+ export declare interface TLOverlayEntry {
8882
+ util: OverlayUtil;
8883
+ overlays: TLOverlay[];
8884
+ }
8885
+
8886
+ /** @public */
8887
+ export declare interface TLOverlayUtilConstructor<U extends OverlayUtil = OverlayUtil> {
8888
+ new (editor: Editor): U;
8889
+ type: string;
8890
+ configure<T extends TLOverlayUtilConstructor<any>>(this: T, options: T extends new (...args: any[]) => {
8891
+ options: infer Options;
8892
+ } ? Partial<Options> : never): T;
8893
+ }
8894
+
8895
+ /**
8896
+ * Map of all performance event names to their payload types.
8897
+ * Used with {@link PerformanceManager.on} and {@link PerformanceManager.once}.
8898
+ * @public
8899
+ */
8900
+ export declare interface TLPerfEventMap {
8901
+ /** An interaction state was entered. */
8902
+ 'interaction-start': [TLInteractionStartPerfEvent];
8903
+ /** An interaction state was exited, with aggregated frame time stats. */
8904
+ 'interaction-end': [TLInteractionEndPerfEvent];
8905
+ /** A camera operation (pan/zoom) began. */
8906
+ 'camera-start': [TLCameraStartPerfEvent];
8907
+ /** A camera operation ended (after debounce), with aggregated frame time stats. */
8908
+ 'camera-end': [TLCameraEndPerfEvent];
8909
+ /** Shapes were created. */
8910
+ 'shapes-created': [TLShapeOperationPerfEvent];
8911
+ /** Shapes were updated. */
8912
+ 'shapes-updated': [TLShapeOperationPerfEvent];
8913
+ /** Shapes were deleted. */
8914
+ 'shapes-deleted': [TLShapeOperationPerfEvent];
8915
+ /** An animation frame was rendered. Only fires when listeners are registered. */
8916
+ frame: [TLFramePerfEvent];
8917
+ /** An undo operation was performed. */
8918
+ undo: [TLUndoRedoPerfEvent];
8919
+ /** A redo operation was performed. */
8920
+ redo: [TLUndoRedoPerfEvent];
8921
+ }
8922
+
8923
+ /**
8924
+ * Common frame time statistics shared by interaction and camera end events.
8925
+ * @public
8926
+ */
8927
+ export declare interface TLPerfFrameTimeStats {
8928
+ /** Total duration of the session in ms. */
8929
+ duration: number;
8930
+ /** Average frames per second during the session. */
8931
+ fps: number;
8932
+ /** Total number of frames recorded. */
8933
+ frameCount: number;
8934
+ /** Mean frame duration in ms. */
8935
+ avgFrameTime: number;
8936
+ /** Median (p50) frame duration in ms. */
8937
+ medianFrameTime: number;
8938
+ /** 95th percentile frame duration in ms. */
8939
+ p95FrameTime: number;
8940
+ /** 99th percentile frame duration in ms. */
8941
+ p99FrameTime: number;
8942
+ /** Shortest frame duration in ms. */
8943
+ minFrameTime: number;
8944
+ /** Longest frame duration in ms. */
8945
+ maxFrameTime: number;
8946
+ /** Raw frame durations for local analysis. Exclude when sending to analytics. */
8947
+ frameTimes: number[];
8948
+ /**
8949
+ * Long animation frames observed during this period (Chromium 123+).
8950
+ * Only present when the browser supports the Long Animation Frames API and
8951
+ * at least one long frame was observed.
8952
+ * Exclude when sending to analytics — entries are large and contain script URLs.
8953
+ */
8954
+ longAnimationFrames?: TLPerfLongAnimationFrame[];
8955
+ }
8956
+
8957
+ /**
8958
+ * A long animation frame observed by the browser during an interaction.
8959
+ * Available only in browsers that support the Long Animation Frames API (Chromium 123+).
8960
+ * @public
8961
+ */
8962
+ export declare interface TLPerfLongAnimationFrame {
8963
+ /** Frame start time (relative to timeOrigin). */
8964
+ startTime: number;
8965
+ /** Total frame duration in ms. */
8966
+ duration: number;
8967
+ /** Time the main thread was blocked in ms. */
8968
+ blockingDuration: number;
8969
+ /** Scripts that contributed to the long frame. */
8970
+ scripts: TLPerfLongAnimationFrameScript[];
8971
+ }
8972
+
8973
+ /** A script attribution entry from a long animation frame. @public */
8974
+ export declare interface TLPerfLongAnimationFrameScript {
8975
+ /** The script source URL (may be empty for inline scripts). */
8976
+ sourceURL: string;
8977
+ /** The function name or invoker description. */
8978
+ invoker: string;
8979
+ /** Time spent in this script in ms. */
8980
+ duration: number;
8981
+ }
8982
+
8373
8983
  /** @public */
8374
8984
  export declare type TLPinchEvent = (info: TLPinchEventInfo) => void;
8375
8985
 
@@ -8409,6 +9019,10 @@ export declare type TLPointerEventTarget = {
8409
9019
  handle?: TLSelectionHandle;
8410
9020
  shape?: undefined;
8411
9021
  target: 'selection';
9022
+ } | {
9023
+ overlay: TLOverlay;
9024
+ shape?: undefined;
9025
+ target: 'overlay';
8412
9026
  } | {
8413
9027
  shape: TLShape;
8414
9028
  target: 'shape';
@@ -8479,28 +9093,12 @@ export declare type TLResizeShapeOptions = Partial<{
8479
9093
 
8480
9094
  /* Excluded from this release type: TLRotationSnapshot */
8481
9095
 
8482
- /** @public */
8483
- export declare interface TLScribbleProps {
8484
- userId?: string;
8485
- scribble: TLScribble;
8486
- zoom: number;
8487
- color?: string;
8488
- opacity?: number;
8489
- className?: string;
8490
- }
8491
-
8492
9096
  /** @public */
8493
9097
  export declare interface TLSelectionBackgroundProps {
8494
9098
  bounds: Box;
8495
9099
  rotation: number;
8496
9100
  }
8497
9101
 
8498
- /** @public */
8499
- export declare interface TLSelectionForegroundProps {
8500
- bounds: Box;
8501
- rotation: number;
8502
- }
8503
-
8504
9102
  /** @public */
8505
9103
  export declare type TLSelectionHandle = RotateCorner | SelectionCorner | SelectionEdge;
8506
9104
 
@@ -8535,26 +9133,26 @@ export declare type TLShapeErrorFallbackComponent = ComponentType<{
8535
9133
  }>;
8536
9134
 
8537
9135
  /** @public */
8538
- export declare type TLShapeIndicatorErrorFallbackComponent = ComponentType<{
8539
- error: unknown;
8540
- }>;
8541
-
8542
- /** @public */
8543
- export declare interface TLShapeIndicatorProps {
8544
- userId?: string;
8545
- shapeId: TLShapeId;
8546
- color?: string | undefined;
8547
- opacity?: number;
8548
- className?: string;
8549
- hidden?: boolean;
9136
+ export declare interface TLShapeIndicatorOverlay extends TLOverlay {
9137
+ props: {
9138
+ hintingShapeIds: TLShapeId[];
9139
+ idsToDisplay: TLShapeId[];
9140
+ };
8550
9141
  }
8551
9142
 
8552
- /** @public */
8553
- export declare interface TLShapeIndicatorsProps {
8554
- /** Whether to hide all of the indicators */
8555
- hideAll?: boolean;
8556
- /** Whether to show all of the indicators */
8557
- showAll?: boolean;
9143
+ /**
9144
+ * Emitted when shapes are created, updated, or deleted.
9145
+ * @public
9146
+ */
9147
+ export declare interface TLShapeOperationPerfEvent {
9148
+ /** The operation type. */
9149
+ operation: 'create' | 'delete' | 'update';
9150
+ /** Number of shapes affected. */
9151
+ count: number;
9152
+ /** Breakdown by shape type (e.g. `{ geo: 2, draw: 1 }`). */
9153
+ shapeTypes: Record<string, number>;
9154
+ /** `performance.now()` when the operation occurred. */
9155
+ timestamp: number;
8558
9156
  }
8559
9157
 
8560
9158
  /**
@@ -8627,13 +9225,6 @@ export declare interface TLShapeWrapperProps extends React.HTMLAttributes<HTMLDi
8627
9225
  children: ReactNode;
8628
9226
  }
8629
9227
 
8630
- /** @public */
8631
- export declare interface TLSnapIndicatorProps {
8632
- className?: string;
8633
- line: SnapIndicator;
8634
- zoom: number;
8635
- }
8636
-
8637
9228
  /** @public */
8638
9229
  export declare interface TLStateNodeConstructor {
8639
9230
  new (editor: Editor, parent?: StateNode): StateNode;
@@ -8642,6 +9233,7 @@ export declare interface TLStateNodeConstructor {
8642
9233
  children?(): TLStateNodeConstructor[];
8643
9234
  isLockable: boolean;
8644
9235
  useCoalescedEvents: boolean;
9236
+ trackPerformance: boolean;
8645
9237
  }
8646
9238
 
8647
9239
  /** @public */
@@ -8819,6 +9411,19 @@ export declare interface TLTldrawExternalContentSource {
8819
9411
  data: TLContent;
8820
9412
  }
8821
9413
 
9414
+ /**
9415
+ * Emitted after an undo or redo operation.
9416
+ * @public
9417
+ */
9418
+ export declare interface TLUndoRedoPerfEvent {
9419
+ /** Whether this was an undo or redo. */
9420
+ type: 'redo' | 'undo';
9421
+ /** Number of undo steps remaining. */
9422
+ undoDepth: number;
9423
+ /** Number of redo steps remaining. */
9424
+ redoDepth: number;
9425
+ }
9426
+
8822
9427
  /** @public */
8823
9428
  export declare interface TLUpdatePointerOptions {
8824
9429
  /** Whether to update the pointer immediately, rather than on the next tick. */
@@ -9008,6 +9613,10 @@ export declare function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement
9008
9613
  export declare function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>): void;
9009
9614
 
9010
9615
  /**
9616
+ * Reactive list of peer user IDs for collaborators currently shown in the UI.
9617
+ * Mirrors {@link Editor.getVisibleCollaborators} — peers fade out as they
9618
+ * transition to idle/inactive, without requiring a manual re-render.
9619
+ *
9011
9620
  * @returns The list of peer UserIDs
9012
9621
  * @public
9013
9622
  */