@tldraw/editor 4.6.0-canary.7e9dd241bb89 → 4.6.0-canary.7ea68e5d3c36

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 (473) hide show
  1. package/dist-cjs/index.d.ts +1344 -289
  2. package/dist-cjs/index.js +33 -28
  3. package/dist-cjs/index.js.map +3 -3
  4. package/dist-cjs/lib/TldrawEditor.js +62 -14
  5. package/dist-cjs/lib/TldrawEditor.js.map +3 -3
  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 +46 -248
  11. package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +3 -3
  12. package/dist-cjs/lib/components/default-components/DefaultErrorFallback.js.map +2 -2
  13. package/dist-cjs/lib/config/{createTLUser.js → createTLCurrentUser.js} +9 -9
  14. package/dist-cjs/lib/config/createTLCurrentUser.js.map +7 -0
  15. package/dist-cjs/lib/config/createTLStore.js +31 -1
  16. package/dist-cjs/lib/config/createTLStore.js.map +2 -2
  17. package/dist-cjs/lib/{components/default-components/DefaultShapeIndicatorErrorFallback.js → config/defaultAssets.js} +17 -9
  18. package/dist-cjs/lib/config/defaultAssets.js.map +7 -0
  19. package/dist-cjs/lib/config/defaultShapes.js.map +2 -2
  20. package/dist-cjs/lib/editor/Editor.js +921 -386
  21. package/dist-cjs/lib/editor/Editor.js.map +3 -3
  22. package/dist-cjs/lib/editor/assets/AssetUtil.js +67 -0
  23. package/dist-cjs/lib/editor/assets/AssetUtil.js.map +7 -0
  24. package/dist-cjs/lib/editor/bindings/BindingUtil.js +1 -0
  25. package/dist-cjs/lib/editor/bindings/BindingUtil.js.map +1 -1
  26. package/dist-cjs/lib/editor/managers/ClickManager/ClickManager.js +26 -64
  27. package/dist-cjs/lib/editor/managers/ClickManager/ClickManager.js.map +2 -2
  28. package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js +98 -0
  29. package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js.map +7 -0
  30. package/dist-cjs/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.js +2 -1
  31. package/dist-cjs/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.js.map +2 -2
  32. package/dist-cjs/lib/editor/managers/FocusManager/FocusManager.js +15 -53
  33. package/dist-cjs/lib/editor/managers/FocusManager/FocusManager.js.map +1 -1
  34. package/dist-cjs/lib/editor/managers/FontManager/FontManager.js +2 -0
  35. package/dist-cjs/lib/editor/managers/FontManager/FontManager.js.map +2 -2
  36. package/dist-cjs/lib/editor/managers/HistoryManager/HistoryManager.js +2 -0
  37. package/dist-cjs/lib/editor/managers/HistoryManager/HistoryManager.js.map +1 -1
  38. package/dist-cjs/lib/editor/managers/InputsManager/InputsManager.js +83 -112
  39. package/dist-cjs/lib/editor/managers/InputsManager/InputsManager.js.map +2 -2
  40. package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.js +80 -0
  41. package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.js.map +7 -0
  42. package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceManager.js +466 -0
  43. package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceManager.js.map +7 -0
  44. package/dist-cjs/lib/{components/default-components/DefaultHandles.js → editor/managers/PerformanceManager/perf-types.js} +3 -14
  45. package/dist-cjs/lib/editor/managers/PerformanceManager/perf-types.js.map +7 -0
  46. package/dist-cjs/lib/editor/managers/ScribbleManager/ScribbleManager.js +1 -0
  47. package/dist-cjs/lib/editor/managers/ScribbleManager/ScribbleManager.js.map +1 -1
  48. package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js +22 -56
  49. package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js.map +2 -2
  50. package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js +12 -52
  51. package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js.map +2 -2
  52. package/dist-cjs/lib/editor/managers/SnapManager/SnapManager.js +21 -57
  53. package/dist-cjs/lib/editor/managers/SnapManager/SnapManager.js.map +2 -2
  54. package/dist-cjs/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.js +5 -4
  55. package/dist-cjs/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.js.map +2 -2
  56. package/dist-cjs/lib/editor/managers/TextManager/TextManager.js +103 -30
  57. package/dist-cjs/lib/editor/managers/TextManager/TextManager.js.map +2 -2
  58. package/dist-cjs/lib/editor/managers/ThemeManager/ThemeManager.js +107 -0
  59. package/dist-cjs/lib/editor/managers/ThemeManager/ThemeManager.js.map +7 -0
  60. package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js +600 -0
  61. package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js.map +7 -0
  62. package/dist-cjs/lib/editor/managers/TickManager/TickManager.js +17 -55
  63. package/dist-cjs/lib/editor/managers/TickManager/TickManager.js.map +1 -1
  64. package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js +65 -72
  65. package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js.map +2 -2
  66. package/dist-cjs/lib/editor/overlays/OverlayManager.js +154 -0
  67. package/dist-cjs/lib/editor/overlays/OverlayManager.js.map +7 -0
  68. package/dist-cjs/lib/editor/overlays/OverlayUtil.js +92 -0
  69. package/dist-cjs/lib/editor/overlays/OverlayUtil.js.map +7 -0
  70. package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js +161 -0
  71. package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js.map +7 -0
  72. package/dist-cjs/lib/editor/overlays/getOverlayDisplayValues.js +39 -0
  73. package/dist-cjs/lib/editor/overlays/getOverlayDisplayValues.js.map +7 -0
  74. package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js +79 -0
  75. package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js.map +7 -0
  76. package/dist-cjs/lib/editor/shapes/ShapeUtil.js +53 -21
  77. package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
  78. package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js +33 -3
  79. package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js.map +2 -2
  80. package/dist-cjs/lib/editor/shapes/shared/getPerfectDashProps.js +6 -0
  81. package/dist-cjs/lib/editor/shapes/shared/getPerfectDashProps.js.map +2 -2
  82. package/dist-cjs/lib/editor/tools/StateNode.js +15 -17
  83. package/dist-cjs/lib/editor/tools/StateNode.js.map +2 -2
  84. package/dist-cjs/lib/editor/types/SvgExportContext.js.map +2 -2
  85. package/dist-cjs/lib/editor/types/clipboard-types.js.map +1 -1
  86. package/dist-cjs/lib/editor/types/event-types.js.map +2 -2
  87. package/dist-cjs/lib/editor/types/external-content.js.map +1 -1
  88. package/dist-cjs/lib/exports/ExportDelay.js +13 -53
  89. package/dist-cjs/lib/exports/ExportDelay.js.map +1 -1
  90. package/dist-cjs/lib/exports/FontEmbedder.js +14 -57
  91. package/dist-cjs/lib/exports/FontEmbedder.js.map +1 -1
  92. package/dist-cjs/lib/exports/StyleEmbedder.js +2 -1
  93. package/dist-cjs/lib/exports/StyleEmbedder.js.map +2 -2
  94. package/dist-cjs/lib/exports/fetchCache.js +1 -1
  95. package/dist-cjs/lib/exports/fetchCache.js.map +2 -2
  96. package/dist-cjs/lib/exports/getSvgJsx.js +14 -8
  97. package/dist-cjs/lib/exports/getSvgJsx.js.map +2 -2
  98. package/dist-cjs/lib/globals/environment.js +18 -1
  99. package/dist-cjs/lib/globals/environment.js.map +2 -2
  100. package/dist-cjs/lib/hooks/EditorComponentsContext.js.map +2 -2
  101. package/dist-cjs/lib/hooks/useCanvasEvents.js +25 -4
  102. package/dist-cjs/lib/hooks/useCanvasEvents.js.map +2 -2
  103. package/dist-cjs/lib/hooks/{useIsDarkMode.js → useColorMode.js} +14 -10
  104. package/dist-cjs/lib/hooks/useColorMode.js.map +7 -0
  105. package/dist-cjs/lib/hooks/useCursor.js +3 -7
  106. package/dist-cjs/lib/hooks/useCursor.js.map +2 -2
  107. package/dist-cjs/lib/hooks/useDarkMode.js +4 -4
  108. package/dist-cjs/lib/hooks/useDarkMode.js.map +2 -2
  109. package/dist-cjs/lib/hooks/useEditorComponents.js +0 -28
  110. package/dist-cjs/lib/hooks/useEditorComponents.js.map +2 -2
  111. package/dist-cjs/lib/hooks/useGestureEvents.js +171 -127
  112. package/dist-cjs/lib/hooks/useGestureEvents.js.map +3 -3
  113. package/dist-cjs/lib/hooks/useLocalStore.js.map +2 -2
  114. package/dist-cjs/lib/hooks/usePeerIds.js +1 -36
  115. package/dist-cjs/lib/hooks/usePeerIds.js.map +2 -2
  116. package/dist-cjs/lib/hooks/useShapeCulling.js +2 -1
  117. package/dist-cjs/lib/hooks/useShapeCulling.js.map +2 -2
  118. package/dist-cjs/lib/options.js +4 -0
  119. package/dist-cjs/lib/options.js.map +2 -2
  120. package/dist-cjs/lib/primitives/Box.js +26 -26
  121. package/dist-cjs/lib/primitives/Box.js.map +2 -2
  122. package/dist-cjs/lib/primitives/Vec.js +4 -1
  123. package/dist-cjs/lib/primitives/Vec.js.map +2 -2
  124. package/dist-cjs/lib/primitives/geometry/Arc2d.js +2 -2
  125. package/dist-cjs/lib/primitives/geometry/Arc2d.js.map +2 -2
  126. package/dist-cjs/lib/primitives/geometry/Circle2d.js +3 -2
  127. package/dist-cjs/lib/primitives/geometry/Circle2d.js.map +2 -2
  128. package/dist-cjs/lib/primitives/geometry/CubicSpline2d.js +1 -1
  129. package/dist-cjs/lib/primitives/geometry/CubicSpline2d.js.map +1 -1
  130. package/dist-cjs/lib/primitives/geometry/Ellipse2d.js +4 -3
  131. package/dist-cjs/lib/primitives/geometry/Ellipse2d.js.map +2 -2
  132. package/dist-cjs/lib/primitives/geometry/Geometry2d.js +12 -9
  133. package/dist-cjs/lib/primitives/geometry/Geometry2d.js.map +2 -2
  134. package/dist-cjs/lib/primitives/geometry/Polyline2d.js +2 -2
  135. package/dist-cjs/lib/primitives/geometry/Polyline2d.js.map +2 -2
  136. package/dist-cjs/lib/primitives/geometry/Stadium2d.js +2 -1
  137. package/dist-cjs/lib/primitives/geometry/Stadium2d.js.map +2 -2
  138. package/dist-cjs/lib/utils/EditorAtom.js +2 -0
  139. package/dist-cjs/lib/utils/EditorAtom.js.map +1 -1
  140. package/dist-cjs/lib/utils/SharedStylesMap.js +1 -1
  141. package/dist-cjs/lib/utils/SharedStylesMap.js.map +1 -1
  142. package/dist-cjs/lib/utils/getSvgPathFromPoints.js.map +2 -2
  143. package/dist-cjs/lib/utils/reparenting.js +22 -8
  144. package/dist-cjs/lib/utils/reparenting.js.map +2 -2
  145. package/dist-cjs/lib/utils/richText.js.map +2 -2
  146. package/dist-cjs/lib/utils/runtime.js +2 -1
  147. package/dist-cjs/lib/utils/runtime.js.map +2 -2
  148. package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js +8 -2
  149. package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js.map +2 -2
  150. package/dist-cjs/lib/utils/sync/hardReset.js +0 -8
  151. package/dist-cjs/lib/utils/sync/hardReset.js.map +2 -2
  152. package/dist-cjs/version.js +3 -3
  153. package/dist-cjs/version.js.map +1 -1
  154. package/dist-esm/index.d.mts +1344 -289
  155. package/dist-esm/index.mjs +48 -50
  156. package/dist-esm/index.mjs.map +2 -2
  157. package/dist-esm/lib/TldrawEditor.mjs +65 -14
  158. package/dist-esm/lib/TldrawEditor.mjs.map +3 -3
  159. package/dist-esm/lib/components/MenuClickCapture.mjs +100 -39
  160. package/dist-esm/lib/components/MenuClickCapture.mjs.map +2 -2
  161. package/dist-esm/lib/components/default-components/CanvasOverlays.mjs +160 -0
  162. package/dist-esm/lib/components/default-components/CanvasOverlays.mjs.map +7 -0
  163. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +47 -249
  164. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +3 -3
  165. package/dist-esm/lib/components/default-components/DefaultErrorFallback.mjs.map +2 -2
  166. package/dist-esm/lib/config/{createTLUser.mjs → createTLCurrentUser.mjs} +6 -6
  167. package/dist-esm/lib/config/createTLCurrentUser.mjs.map +7 -0
  168. package/dist-esm/lib/config/createTLStore.mjs +37 -2
  169. package/dist-esm/lib/config/createTLStore.mjs.map +2 -2
  170. package/dist-esm/lib/config/defaultAssets.mjs +16 -0
  171. package/dist-esm/lib/config/defaultAssets.mjs.map +7 -0
  172. package/dist-esm/lib/config/defaultShapes.mjs.map +2 -2
  173. package/dist-esm/lib/editor/Editor.mjs +924 -389
  174. package/dist-esm/lib/editor/Editor.mjs.map +3 -3
  175. package/dist-esm/lib/editor/assets/AssetUtil.mjs +47 -0
  176. package/dist-esm/lib/editor/assets/AssetUtil.mjs.map +7 -0
  177. package/dist-esm/lib/editor/bindings/BindingUtil.mjs +1 -0
  178. package/dist-esm/lib/editor/bindings/BindingUtil.mjs.map +1 -1
  179. package/dist-esm/lib/editor/managers/ClickManager/ClickManager.mjs +26 -64
  180. package/dist-esm/lib/editor/managers/ClickManager/ClickManager.mjs.map +2 -2
  181. package/dist-esm/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.mjs +83 -0
  182. package/dist-esm/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.mjs.map +7 -0
  183. package/dist-esm/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.mjs +2 -1
  184. package/dist-esm/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.mjs.map +2 -2
  185. package/dist-esm/lib/editor/managers/FocusManager/FocusManager.mjs +15 -53
  186. package/dist-esm/lib/editor/managers/FocusManager/FocusManager.mjs.map +1 -1
  187. package/dist-esm/lib/editor/managers/FontManager/FontManager.mjs +2 -0
  188. package/dist-esm/lib/editor/managers/FontManager/FontManager.mjs.map +2 -2
  189. package/dist-esm/lib/editor/managers/HistoryManager/HistoryManager.mjs +2 -0
  190. package/dist-esm/lib/editor/managers/HistoryManager/HistoryManager.mjs.map +1 -1
  191. package/dist-esm/lib/editor/managers/InputsManager/InputsManager.mjs +83 -112
  192. package/dist-esm/lib/editor/managers/InputsManager/InputsManager.mjs.map +2 -2
  193. package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.mjs +60 -0
  194. package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.mjs.map +7 -0
  195. package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceManager.mjs +438 -0
  196. package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceManager.mjs.map +7 -0
  197. package/dist-esm/lib/editor/managers/PerformanceManager/perf-types.mjs +1 -0
  198. package/dist-esm/lib/editor/managers/PerformanceManager/perf-types.mjs.map +7 -0
  199. package/dist-esm/lib/editor/managers/ScribbleManager/ScribbleManager.mjs +1 -0
  200. package/dist-esm/lib/editor/managers/ScribbleManager/ScribbleManager.mjs.map +1 -1
  201. package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs +22 -56
  202. package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs.map +2 -2
  203. package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs +12 -52
  204. package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs.map +2 -2
  205. package/dist-esm/lib/editor/managers/SnapManager/SnapManager.mjs +21 -57
  206. package/dist-esm/lib/editor/managers/SnapManager/SnapManager.mjs.map +2 -2
  207. package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs +5 -4
  208. package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs.map +2 -2
  209. package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs +103 -30
  210. package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs.map +2 -2
  211. package/dist-esm/lib/editor/managers/ThemeManager/ThemeManager.mjs +89 -0
  212. package/dist-esm/lib/editor/managers/ThemeManager/ThemeManager.mjs.map +7 -0
  213. package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs +582 -0
  214. package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs.map +7 -0
  215. package/dist-esm/lib/editor/managers/TickManager/TickManager.mjs +17 -55
  216. package/dist-esm/lib/editor/managers/TickManager/TickManager.mjs.map +1 -1
  217. package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs +65 -72
  218. package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs.map +2 -2
  219. package/dist-esm/lib/editor/overlays/OverlayManager.mjs +136 -0
  220. package/dist-esm/lib/editor/overlays/OverlayManager.mjs.map +7 -0
  221. package/dist-esm/lib/editor/overlays/OverlayUtil.mjs +72 -0
  222. package/dist-esm/lib/editor/overlays/OverlayUtil.mjs.map +7 -0
  223. package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs +141 -0
  224. package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs.map +7 -0
  225. package/dist-esm/lib/editor/overlays/getOverlayDisplayValues.mjs +19 -0
  226. package/dist-esm/lib/editor/overlays/getOverlayDisplayValues.mjs.map +7 -0
  227. package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs +59 -0
  228. package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs.map +7 -0
  229. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +53 -21
  230. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
  231. package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs +33 -3
  232. package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs.map +2 -2
  233. package/dist-esm/lib/editor/shapes/shared/getPerfectDashProps.mjs +6 -0
  234. package/dist-esm/lib/editor/shapes/shared/getPerfectDashProps.mjs.map +2 -2
  235. package/dist-esm/lib/editor/tools/StateNode.mjs +15 -17
  236. package/dist-esm/lib/editor/tools/StateNode.mjs.map +2 -2
  237. package/dist-esm/lib/editor/types/SvgExportContext.mjs.map +2 -2
  238. package/dist-esm/lib/editor/types/event-types.mjs.map +2 -2
  239. package/dist-esm/lib/exports/ExportDelay.mjs +13 -53
  240. package/dist-esm/lib/exports/ExportDelay.mjs.map +1 -1
  241. package/dist-esm/lib/exports/FontEmbedder.mjs +14 -57
  242. package/dist-esm/lib/exports/FontEmbedder.mjs.map +1 -1
  243. package/dist-esm/lib/exports/StyleEmbedder.mjs +2 -1
  244. package/dist-esm/lib/exports/StyleEmbedder.mjs.map +2 -2
  245. package/dist-esm/lib/exports/fetchCache.mjs +2 -2
  246. package/dist-esm/lib/exports/fetchCache.mjs.map +2 -2
  247. package/dist-esm/lib/exports/getSvgJsx.mjs +14 -11
  248. package/dist-esm/lib/exports/getSvgJsx.mjs.map +2 -2
  249. package/dist-esm/lib/globals/environment.mjs +18 -1
  250. package/dist-esm/lib/globals/environment.mjs.map +2 -2
  251. package/dist-esm/lib/hooks/EditorComponentsContext.mjs.map +2 -2
  252. package/dist-esm/lib/hooks/useCanvasEvents.mjs +25 -4
  253. package/dist-esm/lib/hooks/useCanvasEvents.mjs.map +2 -2
  254. package/dist-esm/lib/hooks/useColorMode.mjs +19 -0
  255. package/dist-esm/lib/hooks/useColorMode.mjs.map +7 -0
  256. package/dist-esm/lib/hooks/useCursor.mjs +3 -7
  257. package/dist-esm/lib/hooks/useCursor.mjs.map +2 -2
  258. package/dist-esm/lib/hooks/useDarkMode.mjs +4 -4
  259. package/dist-esm/lib/hooks/useDarkMode.mjs.map +2 -2
  260. package/dist-esm/lib/hooks/useEditorComponents.mjs +0 -28
  261. package/dist-esm/lib/hooks/useEditorComponents.mjs.map +2 -2
  262. package/dist-esm/lib/hooks/useGestureEvents.mjs +171 -127
  263. package/dist-esm/lib/hooks/useGestureEvents.mjs.map +3 -3
  264. package/dist-esm/lib/hooks/useLocalStore.mjs.map +2 -2
  265. package/dist-esm/lib/hooks/usePeerIds.mjs +2 -40
  266. package/dist-esm/lib/hooks/usePeerIds.mjs.map +2 -2
  267. package/dist-esm/lib/hooks/useShapeCulling.mjs +2 -1
  268. package/dist-esm/lib/hooks/useShapeCulling.mjs.map +2 -2
  269. package/dist-esm/lib/options.mjs +4 -0
  270. package/dist-esm/lib/options.mjs.map +2 -2
  271. package/dist-esm/lib/primitives/Box.mjs +26 -26
  272. package/dist-esm/lib/primitives/Box.mjs.map +2 -2
  273. package/dist-esm/lib/primitives/Vec.mjs +4 -1
  274. package/dist-esm/lib/primitives/Vec.mjs.map +2 -2
  275. package/dist-esm/lib/primitives/geometry/Arc2d.mjs +2 -2
  276. package/dist-esm/lib/primitives/geometry/Arc2d.mjs.map +2 -2
  277. package/dist-esm/lib/primitives/geometry/Circle2d.mjs +3 -2
  278. package/dist-esm/lib/primitives/geometry/Circle2d.mjs.map +2 -2
  279. package/dist-esm/lib/primitives/geometry/CubicSpline2d.mjs +1 -1
  280. package/dist-esm/lib/primitives/geometry/CubicSpline2d.mjs.map +1 -1
  281. package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs +4 -3
  282. package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs.map +2 -2
  283. package/dist-esm/lib/primitives/geometry/Geometry2d.mjs +12 -9
  284. package/dist-esm/lib/primitives/geometry/Geometry2d.mjs.map +2 -2
  285. package/dist-esm/lib/primitives/geometry/Polyline2d.mjs +2 -2
  286. package/dist-esm/lib/primitives/geometry/Polyline2d.mjs.map +2 -2
  287. package/dist-esm/lib/primitives/geometry/Stadium2d.mjs +2 -1
  288. package/dist-esm/lib/primitives/geometry/Stadium2d.mjs.map +2 -2
  289. package/dist-esm/lib/utils/EditorAtom.mjs +2 -0
  290. package/dist-esm/lib/utils/EditorAtom.mjs.map +1 -1
  291. package/dist-esm/lib/utils/SharedStylesMap.mjs +1 -1
  292. package/dist-esm/lib/utils/SharedStylesMap.mjs.map +1 -1
  293. package/dist-esm/lib/utils/getSvgPathFromPoints.mjs.map +2 -2
  294. package/dist-esm/lib/utils/reparenting.mjs +22 -8
  295. package/dist-esm/lib/utils/reparenting.mjs.map +2 -2
  296. package/dist-esm/lib/utils/richText.mjs.map +2 -2
  297. package/dist-esm/lib/utils/runtime.mjs +2 -1
  298. package/dist-esm/lib/utils/runtime.mjs.map +2 -2
  299. package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs +8 -2
  300. package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs.map +2 -2
  301. package/dist-esm/lib/utils/sync/hardReset.mjs +0 -8
  302. package/dist-esm/lib/utils/sync/hardReset.mjs.map +2 -2
  303. package/dist-esm/version.mjs +3 -3
  304. package/dist-esm/version.mjs.map +1 -1
  305. package/editor.css +17 -276
  306. package/package.json +7 -8
  307. package/src/index.ts +62 -53
  308. package/src/lib/TldrawEditor.tsx +108 -20
  309. package/src/lib/components/MenuClickCapture.tsx +129 -49
  310. package/src/lib/components/default-components/CanvasOverlays.tsx +208 -0
  311. package/src/lib/components/default-components/DefaultCanvas.tsx +51 -322
  312. package/src/lib/components/default-components/DefaultErrorFallback.tsx +1 -0
  313. package/src/lib/config/TLEditorSnapshot.test.ts +1 -1
  314. package/src/lib/config/{createTLUser.ts → createTLCurrentUser.ts} +9 -9
  315. package/src/lib/config/createTLStore.ts +58 -3
  316. package/src/lib/config/defaultAssets.ts +19 -0
  317. package/src/lib/config/defaultShapes.ts +1 -1
  318. package/src/lib/editor/Editor.test.ts +3 -1
  319. package/src/lib/editor/Editor.ts +610 -69
  320. package/src/lib/editor/assets/AssetUtil.ts +85 -0
  321. package/src/lib/editor/managers/ClickManager/ClickManager.ts +1 -1
  322. package/src/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.ts +98 -0
  323. package/src/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.ts +1 -1
  324. package/src/lib/editor/managers/FontManager/FontManager.test.ts +9 -2
  325. package/src/lib/editor/managers/FontManager/FontManager.ts +1 -67
  326. package/src/lib/editor/managers/InputsManager/InputsManager.ts +42 -30
  327. package/src/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.ts +82 -0
  328. package/src/lib/editor/managers/PerformanceManager/PerformanceManager.test.ts +522 -0
  329. package/src/lib/editor/managers/PerformanceManager/PerformanceManager.ts +583 -0
  330. package/src/lib/editor/managers/PerformanceManager/perf-types.ts +196 -0
  331. package/src/lib/editor/managers/SnapManager/BoundsSnaps.ts +1 -1
  332. package/src/lib/editor/managers/SnapManager/HandleSnaps.ts +1 -1
  333. package/src/lib/editor/managers/SnapManager/SnapManager.test.ts +13 -2
  334. package/src/lib/editor/managers/SnapManager/SnapManager.ts +1 -1
  335. package/src/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.ts +5 -5
  336. package/src/lib/editor/managers/TextManager/TextManager.test.ts +18 -4
  337. package/src/lib/editor/managers/TextManager/TextManager.ts +140 -34
  338. package/src/lib/editor/managers/ThemeManager/ThemeManager.ts +116 -0
  339. package/src/lib/editor/managers/ThemeManager/defaultThemes.ts +619 -0
  340. package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.test.ts +25 -31
  341. package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.ts +7 -5
  342. package/src/lib/editor/overlays/OverlayManager.ts +183 -0
  343. package/src/lib/editor/overlays/OverlayUtil.ts +143 -0
  344. package/src/lib/editor/overlays/ShapeIndicatorOverlayUtil.ts +216 -0
  345. package/src/lib/editor/overlays/getOverlayDisplayValues.ts +51 -0
  346. package/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx +128 -0
  347. package/src/lib/editor/shapes/ShapeUtil.ts +86 -31
  348. package/src/lib/editor/shapes/group/GroupShapeUtil.tsx +41 -4
  349. package/src/lib/editor/shapes/shared/getPerfectDashProps.ts +7 -0
  350. package/src/lib/editor/tools/StateNode.ts +16 -18
  351. package/src/lib/editor/types/SvgExportContext.tsx +5 -0
  352. package/src/lib/editor/types/clipboard-types.ts +2 -1
  353. package/src/lib/editor/types/event-types.ts +2 -0
  354. package/src/lib/editor/types/external-content.ts +1 -0
  355. package/src/lib/exports/StyleEmbedder.ts +1 -1
  356. package/src/lib/exports/fetchCache.ts +2 -4
  357. package/src/lib/exports/getSvgJsx.test.ts +3 -1
  358. package/src/lib/exports/getSvgJsx.tsx +24 -17
  359. package/src/lib/globals/environment.ts +18 -0
  360. package/src/lib/hooks/EditorComponentsContext.tsx +0 -27
  361. package/src/lib/hooks/useCanvasEvents.ts +45 -3
  362. package/src/lib/hooks/{useIsDarkMode.ts → useColorMode.ts} +9 -5
  363. package/src/lib/hooks/useCursor.ts +3 -7
  364. package/src/lib/hooks/useDarkMode.ts +4 -4
  365. package/src/lib/hooks/useEditorComponents.tsx +1 -29
  366. package/src/lib/hooks/useGestureEvents.ts +240 -168
  367. package/src/lib/hooks/useLocalStore.ts +1 -1
  368. package/src/lib/hooks/usePeerIds.ts +6 -55
  369. package/src/lib/hooks/useShapeCulling.tsx +3 -1
  370. package/src/lib/options.ts +115 -0
  371. package/src/lib/primitives/Box.test.ts +30 -0
  372. package/src/lib/primitives/Box.ts +26 -26
  373. package/src/lib/primitives/Vec.ts +1 -1
  374. package/src/lib/primitives/geometry/Arc2d.ts +2 -2
  375. package/src/lib/primitives/geometry/Circle2d.ts +2 -2
  376. package/src/lib/primitives/geometry/CubicSpline2d.ts +1 -1
  377. package/src/lib/primitives/geometry/Ellipse2d.ts +3 -3
  378. package/src/lib/primitives/geometry/Geometry2d.test.ts +21 -0
  379. package/src/lib/primitives/geometry/Geometry2d.ts +10 -9
  380. package/src/lib/primitives/geometry/Polyline2d.ts +2 -2
  381. package/src/lib/primitives/geometry/Stadium2d.ts +1 -1
  382. package/src/lib/utils/SharedStylesMap.ts +1 -1
  383. package/src/lib/utils/getSvgPathFromPoints.ts +1 -1
  384. package/src/lib/utils/reparenting.ts +28 -11
  385. package/src/lib/utils/richText.ts +1 -1
  386. package/src/lib/utils/runtime.ts +3 -1
  387. package/src/lib/utils/sync/TLLocalSyncClient.test.ts +1 -1
  388. package/src/lib/utils/sync/TLLocalSyncClient.ts +5 -1
  389. package/src/lib/utils/sync/hardReset.ts +0 -8
  390. package/src/version.ts +3 -3
  391. package/dist-cjs/lib/components/GeometryDebuggingView.js +0 -115
  392. package/dist-cjs/lib/components/GeometryDebuggingView.js.map +0 -7
  393. package/dist-cjs/lib/components/LiveCollaborators.js +0 -151
  394. package/dist-cjs/lib/components/LiveCollaborators.js.map +0 -7
  395. package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js +0 -227
  396. package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js.map +0 -7
  397. package/dist-cjs/lib/components/default-components/DefaultBrush.js +0 -38
  398. package/dist-cjs/lib/components/default-components/DefaultBrush.js.map +0 -7
  399. package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js +0 -71
  400. package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js.map +0 -7
  401. package/dist-cjs/lib/components/default-components/DefaultCursor.js +0 -59
  402. package/dist-cjs/lib/components/default-components/DefaultCursor.js.map +0 -7
  403. package/dist-cjs/lib/components/default-components/DefaultHandle.js +0 -56
  404. package/dist-cjs/lib/components/default-components/DefaultHandle.js.map +0 -7
  405. package/dist-cjs/lib/components/default-components/DefaultHandles.js.map +0 -7
  406. package/dist-cjs/lib/components/default-components/DefaultScribble.js +0 -51
  407. package/dist-cjs/lib/components/default-components/DefaultScribble.js.map +0 -7
  408. package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js +0 -69
  409. package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js.map +0 -7
  410. package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js +0 -107
  411. package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js.map +0 -7
  412. package/dist-cjs/lib/components/default-components/DefaultShapeIndicatorErrorFallback.js.map +0 -7
  413. package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js +0 -101
  414. package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js.map +0 -7
  415. package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js +0 -170
  416. package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js.map +0 -7
  417. package/dist-cjs/lib/config/createTLUser.js.map +0 -7
  418. package/dist-cjs/lib/hooks/useHandleEvents.js +0 -100
  419. package/dist-cjs/lib/hooks/useHandleEvents.js.map +0 -7
  420. package/dist-cjs/lib/hooks/useIsDarkMode.js.map +0 -7
  421. package/dist-cjs/lib/hooks/useSelectionEvents.js +0 -98
  422. package/dist-cjs/lib/hooks/useSelectionEvents.js.map +0 -7
  423. package/dist-esm/lib/components/GeometryDebuggingView.mjs +0 -95
  424. package/dist-esm/lib/components/GeometryDebuggingView.mjs.map +0 -7
  425. package/dist-esm/lib/components/LiveCollaborators.mjs +0 -134
  426. package/dist-esm/lib/components/LiveCollaborators.mjs.map +0 -7
  427. package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs +0 -207
  428. package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs.map +0 -7
  429. package/dist-esm/lib/components/default-components/DefaultBrush.mjs +0 -18
  430. package/dist-esm/lib/components/default-components/DefaultBrush.mjs.map +0 -7
  431. package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs +0 -41
  432. package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs.map +0 -7
  433. package/dist-esm/lib/components/default-components/DefaultCursor.mjs +0 -29
  434. package/dist-esm/lib/components/default-components/DefaultCursor.mjs.map +0 -7
  435. package/dist-esm/lib/components/default-components/DefaultHandle.mjs +0 -26
  436. package/dist-esm/lib/components/default-components/DefaultHandle.mjs.map +0 -7
  437. package/dist-esm/lib/components/default-components/DefaultHandles.mjs +0 -8
  438. package/dist-esm/lib/components/default-components/DefaultHandles.mjs.map +0 -7
  439. package/dist-esm/lib/components/default-components/DefaultScribble.mjs +0 -21
  440. package/dist-esm/lib/components/default-components/DefaultScribble.mjs.map +0 -7
  441. package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs +0 -39
  442. package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs.map +0 -7
  443. package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs +0 -77
  444. package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs.map +0 -7
  445. package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs +0 -8
  446. package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs.map +0 -7
  447. package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs +0 -81
  448. package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs.map +0 -7
  449. package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs +0 -142
  450. package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs.map +0 -7
  451. package/dist-esm/lib/config/createTLUser.mjs.map +0 -7
  452. package/dist-esm/lib/hooks/useHandleEvents.mjs +0 -70
  453. package/dist-esm/lib/hooks/useHandleEvents.mjs.map +0 -7
  454. package/dist-esm/lib/hooks/useIsDarkMode.mjs +0 -15
  455. package/dist-esm/lib/hooks/useIsDarkMode.mjs.map +0 -7
  456. package/dist-esm/lib/hooks/useSelectionEvents.mjs +0 -78
  457. package/dist-esm/lib/hooks/useSelectionEvents.mjs.map +0 -7
  458. package/src/lib/components/GeometryDebuggingView.tsx +0 -108
  459. package/src/lib/components/LiveCollaborators.tsx +0 -174
  460. package/src/lib/components/default-components/CanvasShapeIndicators.tsx +0 -289
  461. package/src/lib/components/default-components/DefaultBrush.tsx +0 -35
  462. package/src/lib/components/default-components/DefaultCollaboratorHint.tsx +0 -52
  463. package/src/lib/components/default-components/DefaultCursor.tsx +0 -59
  464. package/src/lib/components/default-components/DefaultHandle.tsx +0 -42
  465. package/src/lib/components/default-components/DefaultHandles.tsx +0 -15
  466. package/src/lib/components/default-components/DefaultScribble.tsx +0 -31
  467. package/src/lib/components/default-components/DefaultSelectionForeground.tsx +0 -50
  468. package/src/lib/components/default-components/DefaultShapeIndicator.tsx +0 -104
  469. package/src/lib/components/default-components/DefaultShapeIndicatorErrorFallback.tsx +0 -9
  470. package/src/lib/components/default-components/DefaultShapeIndicators.tsx +0 -116
  471. package/src/lib/components/default-components/DefaultSnapIndictor.tsx +0 -174
  472. package/src/lib/hooks/useHandleEvents.ts +0 -88
  473. package/src/lib/hooks/useSelectionEvents.ts +0 -97
@@ -1,5 +1,6 @@
1
1
  import { Atom } from '@tldraw/state';
2
2
  import { AtomSet } from '@tldraw/store';
3
+ import { Awaitable } from '@tldraw/utils';
3
4
  import { BoxModel } from '@tldraw/tlschema';
4
5
  import { ComponentType } from 'react';
5
6
  import { Computed } from '@tldraw/state';
@@ -18,11 +19,8 @@ import { JsonObject } from '@tldraw/utils';
18
19
  import { JSX } from 'react/jsx-runtime';
19
20
  import { LegacyMigrations } from '@tldraw/store';
20
21
  import { MigrationSequence } from '@tldraw/store';
21
- import { NamedExoticComponent } from 'react';
22
22
  import { Node as Node_2 } from '@tiptap/pm/model';
23
23
  import { PerformanceTracker } from '@tldraw/utils';
24
- import { PointerEvent as PointerEvent_2 } from 'react';
25
- import { PointerEventHandler } from 'react';
26
24
  import * as React_2 from 'react';
27
25
  import { default as React_3 } from 'react';
28
26
  import { ReactElement } from 'react';
@@ -56,9 +54,12 @@ import { TLCamera } from '@tldraw/tlschema';
56
54
  import { TLCreateShapePartial } from '@tldraw/tlschema';
57
55
  import { TLCursor } from '@tldraw/tlschema';
58
56
  import { TLCursorType } from '@tldraw/tlschema';
57
+ import { TLDefaultColor } from '@tldraw/tlschema';
58
+ import { TLDefaultColorStyle } from '@tldraw/tlschema';
59
59
  import { TLDefaultDashStyle } from '@tldraw/tlschema';
60
60
  import { TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema';
61
61
  import { TLDocument } from '@tldraw/tlschema';
62
+ import { TLFontFace } from '@tldraw/tlschema';
62
63
  import { TLGroupShape } from '@tldraw/tlschema';
63
64
  import { TLHandle } from '@tldraw/tlschema';
64
65
  import { TLImageAsset } from '@tldraw/tlschema';
@@ -80,8 +81,15 @@ import { TLStore } from '@tldraw/tlschema';
80
81
  import { TLStoreProps } from '@tldraw/tlschema';
81
82
  import { TLStoreSchema } from '@tldraw/tlschema';
82
83
  import { TLStoreSnapshot } from '@tldraw/tlschema';
84
+ import { TLTheme } from '@tldraw/tlschema';
85
+ import { TLThemeColors } from '@tldraw/tlschema';
86
+ import { TLThemeId } from '@tldraw/tlschema';
87
+ import { TLThemes } from '@tldraw/tlschema';
88
+ import { TLUnknownAsset } from '@tldraw/tlschema';
83
89
  import { TLUnknownBinding } from '@tldraw/tlschema';
84
90
  import { TLUnknownShape } from '@tldraw/tlschema';
91
+ import { TLUser } from '@tldraw/tlschema';
92
+ import { TLUserStore } from '@tldraw/tlschema';
85
93
  import { TLVideoAsset } from '@tldraw/tlschema';
86
94
  import { UnknownRecord } from '@tldraw/store';
87
95
  import { VecModel } from '@tldraw/tlschema';
@@ -144,6 +152,51 @@ export declare class Arc2d extends Geometry2d {
144
152
  */
145
153
  export declare function areAnglesCompatible(a: number, b: number): boolean;
146
154
 
155
+ /**
156
+ * Abstract base class for defining asset-type-specific behavior.
157
+ *
158
+ * Each asset type (image, video, bookmark, etc.) has a corresponding AssetUtil that handles
159
+ * type-specific operations like determining supported MIME types and creating assets from files.
160
+ *
161
+ * @public
162
+ */
163
+ export declare abstract class AssetUtil<Asset extends TLAsset = TLAsset> {
164
+ editor: Editor;
165
+ /** Configure this asset util's {@link AssetUtil.options | `options`}. */
166
+ static configure<T extends TLAssetUtilConstructor<any, any>>(this: T, options: T extends new (...args: any[]) => {
167
+ options: infer Options;
168
+ } ? Partial<Options> : never): T;
169
+ constructor(editor: Editor);
170
+ /**
171
+ * Options for this asset util. Override this to provide customization options for your asset.
172
+ * Use {@link AssetUtil.configure} to customize existing asset utils.
173
+ */
174
+ options: {};
175
+ static props?: RecordProps<TLUnknownAsset>;
176
+ static migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
177
+ /**
178
+ * The type of the asset util, which should match the asset's type.
179
+ */
180
+ static type: string;
181
+ /**
182
+ * Get the default props for an asset of this type.
183
+ */
184
+ abstract getDefaultProps(): Asset['props'];
185
+ /**
186
+ * Get the MIME types that this asset type supports.
187
+ * Return an empty array if this asset type doesn't support files (e.g. bookmarks).
188
+ */
189
+ getSupportedMimeTypes(): readonly string[];
190
+ /**
191
+ * Check whether this asset type accepts a given MIME type.
192
+ */
193
+ acceptsMimeType(mimeType: string): boolean;
194
+ /**
195
+ * Create an asset from a file. Return null if this asset type can't handle the file.
196
+ */
197
+ getAssetFromFile(_file: File, _assetId: TLAssetId): Promise<Asset | null>;
198
+ }
199
+
147
200
  /** @public */
148
201
  export declare function average(A: VecLike, B: VecLike): string;
149
202
 
@@ -164,6 +217,64 @@ export declare abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> ext
164
217
  getInterpolatedProps(startShape: Shape, endShape: Shape, t: number): Shape['props'];
165
218
  }
166
219
 
220
+ /**
221
+ * A base class for frame-like shapes — containers that clip their children,
222
+ * require full-brush selection, block erasure from inside, and support
223
+ * drag-and-drop reparenting.
224
+ *
225
+ * Extending this class is the easiest way to create a custom frame-like shape.
226
+ * It provides sensible defaults for all frame-like behaviors:
227
+ *
228
+ * - `isFrameLike()` returns `true`
229
+ * - `providesBackgroundForChildren()` returns `true`
230
+ * - `canReceiveNewChildrenOfType()` returns `true` unless the container is locked
231
+ * - `canRemoveChildrenOfType()` returns `true` unless the container is locked
232
+ * - `getClipPath()` returns the shape geometry's vertices
233
+ * - `onDragShapesIn()` reparents shapes into the frame (with index restoration)
234
+ * - `onDragShapesOut()` reparents shapes back to the page
235
+ *
236
+ * All methods can be overridden for custom behavior.
237
+ *
238
+ * @example
239
+ * ```ts
240
+ * class MyContainerUtil extends BaseFrameLikeShapeUtil<MyContainerShape> {
241
+ * static override type = 'my-container' as const
242
+ * static override props = myContainerShapeProps
243
+ *
244
+ * override getDefaultProps() {
245
+ * return { w: 300, h: 200 }
246
+ * }
247
+ *
248
+ * override component(shape: MyContainerShape) {
249
+ * return <SVGContainer>...</SVGContainer>
250
+ * }
251
+ *
252
+ * override getIndicatorPath(shape: MyContainerShape) {
253
+ * const path = new Path2D()
254
+ * path.rect(0, 0, shape.props.w, shape.props.h)
255
+ * return path
256
+ * }
257
+ * }
258
+ * ```
259
+ *
260
+ * @public
261
+ */
262
+ export declare abstract class BaseFrameLikeShapeUtil<Shape extends TLBaseBoxShape> extends BaseBoxShapeUtil<Shape> {
263
+ isFrameLike(_shape: Shape): boolean;
264
+ providesBackgroundForChildren(): boolean;
265
+ canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']): boolean;
266
+ canRemoveChildrenOfType(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
+
272
+ /** @public */
273
+ export declare interface BatchMeasurementRequest {
274
+ html: string;
275
+ opts: TLMeasureTextOpts;
276
+ }
277
+
167
278
  /**
168
279
  * Options passed to {@link BindingUtil.onBeforeChange} and {@link BindingUtil.onAfterChange},
169
280
  * describing the data associated with a binding being changed.
@@ -657,6 +768,49 @@ export declare class ClickManager {
657
768
  */
658
769
  export declare function clockwiseAngleDist(a0: number, a1: number): number;
659
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
+
660
814
  /**
661
815
  * @public
662
816
  * @react
@@ -711,6 +865,12 @@ export declare function createDeepLinkString(deepLink: TLDeepLink): string;
711
865
  */
712
866
  export declare function createSessionStateSnapshotSignal(store: TLStore): Signal<null | TLSessionStateSnapshot>;
713
867
 
868
+ /** @public */
869
+ export declare function createTLCurrentUser(opts?: {
870
+ setUserPreferences?: ((userPreferences: TLUserPreferences) => void) | undefined;
871
+ userPreferences?: Signal<TLUserPreferences, unknown> | undefined;
872
+ }): TLCurrentUser;
873
+
714
874
  /**
715
875
  * A helper for creating a TLStore schema from either an object with shapeUtils, bindingUtils, and
716
876
  * migrations, or a schema.
@@ -728,13 +888,7 @@ export declare function createTLSchemaFromUtils(opts: TLStoreSchemaOptions): Sto
728
888
  *
729
889
  * @public
730
890
  */
731
- export declare function createTLStore({ initialData, defaultName, id, assets, onMount, collaboration, ...rest }?: TLStoreOptions): TLStore;
732
-
733
- /** @public */
734
- export declare function createTLUser(opts?: {
735
- setUserPreferences?: ((userPreferences: TLUserPreferences) => void) | undefined;
736
- userPreferences?: Signal<TLUserPreferences, unknown> | undefined;
737
- }): TLUser;
891
+ export declare function createTLStore({ initialData, defaultName, id, assets, users, onMount, collaboration, themes, ...rest }?: TLStoreOptions): TLStore;
738
892
 
739
893
  /** @public */
740
894
  export declare class CubicBezier2d extends Polyline2d {
@@ -809,54 +963,31 @@ export declare interface DebugFlagDefaults<T> {
809
963
 
810
964
  /* Excluded from this release type: DEFAULT_CAMERA_OPTIONS */
811
965
 
812
- /** @public @react */
813
- export declare function DefaultBackground(): JSX.Element;
966
+ /**
967
+ * The default theme definition containing color palettes for both light and dark modes.
968
+ *
969
+ * @public
970
+ */
971
+ export declare const DEFAULT_THEME: TLTheme;
814
972
 
815
973
  /** @public @react */
816
- export declare const DefaultBrush: ({ brush, color, opacity, className }: TLBrushProps) => JSX.Element;
974
+ export declare function DefaultBackground(): JSX.Element;
817
975
 
818
976
  /** @public @react */
819
977
  export declare function DefaultCanvas({ className }: TLCanvasComponentProps): JSX.Element;
820
978
 
821
- /** @public @react */
822
- export declare function DefaultCollaboratorHint({ className, zoom, point, color, viewport, opacity }: TLCollaboratorHintProps): JSX.Element;
823
-
824
- /** @public @react */
825
- export declare const DefaultCursor: NamedExoticComponent<TLCursorProps>;
826
-
827
979
  /** @public @react */
828
980
  export declare const DefaultErrorFallback: TLErrorFallbackComponent;
829
981
 
830
982
  /** @public @react */
831
983
  export declare function DefaultGrid({ x, y, z, size }: TLGridProps): JSX.Element;
832
984
 
833
- /** @public @react */
834
- export declare function DefaultHandle({ handle, isCoarse, className, zoom }: TLHandleProps): JSX.Element;
835
-
836
- /** @public @react */
837
- export declare const DefaultHandles: ({ children }: TLHandlesProps) => JSX.Element;
838
-
839
- /** @public @react */
840
- export declare function DefaultScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps): JSX.Element | null;
841
-
842
985
  /** @public @react */
843
986
  export declare function DefaultSelectionBackground({ bounds, rotation }: TLSelectionBackgroundProps): JSX.Element;
844
987
 
845
- /** @public @react */
846
- export declare function DefaultSelectionForeground({ bounds, rotation }: TLSelectionForegroundProps): JSX.Element;
847
-
848
- /** @public @react */
849
- export declare const DefaultShapeIndicator: NamedExoticComponent<TLShapeIndicatorProps>;
850
-
851
- /** @public @react */
852
- export declare const DefaultShapeIndicators: NamedExoticComponent<TLShapeIndicatorsProps>;
853
-
854
988
  /** @public @react */
855
989
  export declare const DefaultShapeWrapper: ForwardRefExoticComponent<TLShapeWrapperProps & RefAttributes<HTMLDivElement>>;
856
990
 
857
- /** @public @react */
858
- export declare function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps): JSX.Element;
859
-
860
991
  /** @public @react */
861
992
  export declare function DefaultSpinner(props: React.SVGProps<SVGSVGElement>): JSX.Element;
862
993
 
@@ -923,7 +1054,11 @@ export declare const defaultTldrawOptions: {
923
1054
  readonly maxShapesPerPage: 4000;
924
1055
  readonly multiClickDurationMs: 200;
925
1056
  readonly nonce: undefined;
1057
+ readonly onBeforeCopyToClipboard: undefined;
1058
+ readonly onBeforePasteFromClipboard: undefined;
1059
+ readonly onClipboardPasteRaw: undefined;
926
1060
  readonly quickZoomPreservesScreenBounds: true;
1061
+ readonly rightClickPanning: true;
927
1062
  readonly snapThreshold: 8;
928
1063
  readonly spacebarPanning: true;
929
1064
  readonly temporaryAssetPreviewLifetimeMs: 180000;
@@ -953,6 +1088,9 @@ export declare const defaultUserPreferences: Readonly<{
953
1088
  name: "";
954
1089
  }>;
955
1090
 
1091
+ /** @public */
1092
+ export declare const defaultUserStore: TLUserStore;
1093
+
956
1094
  /**
957
1095
  * Convert degrees to radians.
958
1096
  *
@@ -1028,7 +1166,7 @@ export declare class EdgeScrollManager {
1028
1166
  /** @public */
1029
1167
  export declare class Editor extends EventEmitter<TLEventMap> {
1030
1168
  readonly id: string;
1031
- constructor({ store, user, shapeUtils, bindingUtils, tools, getContainer, cameraOptions, initialState, autoFocus, inferDarkMode, options: _options, textOptions: _textOptions, getShapeVisibility, fontAssetUrls }: 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);
1032
1170
  private readonly _getShapeVisibility?;
1033
1171
  private getIsShapeHiddenCache;
1034
1172
  isShapeHidden(shapeOrId: TLShape | TLShapeId): boolean;
@@ -1091,7 +1229,13 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1091
1229
  * @public
1092
1230
  */
1093
1231
  readonly snaps: SnapManager;
1094
- private readonly _spatialIndex;
1232
+ /**
1233
+ * A manager for performance measurement hooks.
1234
+ *
1235
+ * @public
1236
+ */
1237
+ readonly performance: PerformanceManager;
1238
+ /* Excluded from this release type: _spatialIndex */
1095
1239
  /**
1096
1240
  * A manager for the any asynchronous events and making sure they're
1097
1241
  * cleaned up upon disposal.
@@ -1104,12 +1248,19 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1104
1248
  setInterval: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number;
1105
1249
  setTimeout: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number;
1106
1250
  };
1251
+ /**
1252
+ * A manager for remote peer collaborators connected to this editor.
1253
+ *
1254
+ * @public
1255
+ */
1256
+ readonly collaborators: CollaboratorsManager;
1107
1257
  /**
1108
1258
  * A manager for the user and their preferences.
1109
1259
  *
1110
1260
  * @public
1111
1261
  */
1112
1262
  readonly user: UserPreferencesManager;
1263
+ /* Excluded from this release type: _themeManager */
1113
1264
  /**
1114
1265
  * A helper for measuring text.
1115
1266
  *
@@ -1128,6 +1279,12 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1128
1279
  * @public
1129
1280
  */
1130
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;
1131
1288
  /**
1132
1289
  * A manager for side effects and correct state enforcement. See {@link @tldraw/store#StoreSideEffects} for details.
1133
1290
  *
@@ -1160,6 +1317,83 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1160
1317
  * @public
1161
1318
  */
1162
1319
  dispose(): void;
1320
+ /**
1321
+ * Get the current color mode (`'light'` or `'dark'`), based on the user's dark mode preference.
1322
+ *
1323
+ * @public
1324
+ */
1325
+ getColorMode(): 'dark' | 'light';
1326
+ /**
1327
+ * Set the color mode. Note that this is a convenience method that passes the mode to
1328
+ * `user.updateUserPreferences`, which is the source of truth for the user's color mode preference.
1329
+ *
1330
+ * @public
1331
+ */
1332
+ setColorMode(mode: 'dark' | 'light'): this;
1333
+ /**
1334
+ * Get the id of the current theme.
1335
+ *
1336
+ * @public
1337
+ */
1338
+ getCurrentThemeId(): TLThemeId;
1339
+ /**
1340
+ * Get the current theme definition.
1341
+ *
1342
+ * @public
1343
+ */
1344
+ getCurrentTheme(): TLTheme;
1345
+ /**
1346
+ * Set the current theme by id.
1347
+ *
1348
+ * @public
1349
+ */
1350
+ setCurrentTheme(id: TLThemeId): this;
1351
+ /**
1352
+ * Get all registered theme definitions.
1353
+ *
1354
+ * @public
1355
+ */
1356
+ getThemes(): TLThemes;
1357
+ /**
1358
+ * Get a single theme definition by id.
1359
+ *
1360
+ * @public
1361
+ */
1362
+ getTheme(id: TLThemeId): TLTheme | undefined;
1363
+ /**
1364
+ * Replace all theme definitions, or update them via a callback that receives a deep copy.
1365
+ * The `'default'` theme must always be present in the result.
1366
+ *
1367
+ * @example
1368
+ * ```ts
1369
+ * // Replace all themes
1370
+ * editor.updateThemes({ default: myDefaultTheme, ocean: myOceanTheme })
1371
+ *
1372
+ * // Update via callback
1373
+ * editor.updateThemes((themes) => {
1374
+ * delete themes.ocean
1375
+ * return themes
1376
+ * })
1377
+ * ```
1378
+ *
1379
+ * @public
1380
+ */
1381
+ updateThemes(themes: ((themes: TLThemes) => TLThemes) | TLThemes): this;
1382
+ /**
1383
+ * Register or update a single theme definition. The theme is keyed by its `id` property.
1384
+ *
1385
+ * @example
1386
+ * ```ts
1387
+ * // Override a property on the default theme
1388
+ * editor.updateTheme({ ...editor.getTheme('default')!, fontSize: 24 })
1389
+ *
1390
+ * // Register a new theme
1391
+ * editor.updateTheme({ id: 'ocean', ...myOceanTheme })
1392
+ * ```
1393
+ *
1394
+ * @public
1395
+ */
1396
+ updateTheme(theme: TLTheme): this;
1163
1397
  /**
1164
1398
  * A map of shape utility classes (TLShapeUtils) by shape type.
1165
1399
  *
@@ -1168,6 +1402,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1168
1402
  shapeUtils: {
1169
1403
  readonly [K in string]?: ShapeUtil<TLShape>;
1170
1404
  };
1405
+ /* Excluded from this release type: _shapeUtilsByAssetType */
1171
1406
  styleProps: {
1172
1407
  [key: string]: Map<StyleProp<any>, string>;
1173
1408
  };
@@ -1199,6 +1434,15 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1199
1434
  hasShapeUtil(shape: TLShape | TLShapePartial<TLShape>): boolean;
1200
1435
  hasShapeUtil(type: TLShape['type']): boolean;
1201
1436
  hasShapeUtil<T extends ShapeUtil>(type: T extends ShapeUtil<infer R> ? R['type'] : string): boolean;
1437
+ /**
1438
+ * Get the shape util that handles the given asset type.
1439
+ * Returns the shape util whose {@link ShapeUtil.handledAssetTypes} includes
1440
+ * the given asset type, or undefined if none matches.
1441
+ *
1442
+ * @param assetType - The asset type string.
1443
+ * @public
1444
+ */
1445
+ getShapeUtilForAssetType(assetType: string): ShapeUtil | undefined;
1202
1446
  /**
1203
1447
  * A map of shape utility classes (TLShapeUtils) by shape type.
1204
1448
  *
@@ -1229,6 +1473,40 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1229
1473
  type: S['type'];
1230
1474
  } | S): BindingUtil<S>;
1231
1475
  getBindingUtil<T extends BindingUtil>(type: T extends BindingUtil<infer R> ? R['type'] : string): T;
1476
+ /**
1477
+ * A map of asset utility classes by asset type.
1478
+ *
1479
+ * @public
1480
+ */
1481
+ assetUtils: {
1482
+ readonly [K in string]?: AssetUtil<TLAsset>;
1483
+ };
1484
+ /**
1485
+ * Get an asset util from an asset or asset type.
1486
+ *
1487
+ * @param arg - An asset, asset type string, or object with type.
1488
+ *
1489
+ * @public
1490
+ */
1491
+ getAssetUtil<S extends TLAsset>(asset: {
1492
+ type: S['type'];
1493
+ } | S): AssetUtil<S>;
1494
+ getAssetUtil(type: string): AssetUtil;
1495
+ /**
1496
+ * Returns true if the editor has an asset util for the given asset type.
1497
+ *
1498
+ * @public
1499
+ */
1500
+ hasAssetUtil(arg: {
1501
+ type: string;
1502
+ } | string): boolean;
1503
+ /**
1504
+ * Get the asset util that accepts the given MIME type.
1505
+ * Returns null if no registered asset util accepts the MIME type.
1506
+ *
1507
+ * @public
1508
+ */
1509
+ getAssetUtilForMimeType(mimeType: string): AssetUtil | null;
1232
1510
  /**
1233
1511
  * A manager for the editor's history.
1234
1512
  *
@@ -1485,6 +1763,11 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1485
1763
  /**
1486
1764
  * Set the cursor.
1487
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
+ *
1488
1771
  * @param cursor - The cursor to set.
1489
1772
  * @public
1490
1773
  */
@@ -2244,11 +2527,12 @@ export declare class Editor extends EventEmitter<TLEventMap> {
2244
2527
  * @public
2245
2528
  */
2246
2529
  pageToViewport(point: VecLike): Vec;
2247
- private _getCollaboratorsQuery;
2248
2530
  /**
2249
2531
  * Returns a list of presence records for all peer collaborators.
2250
2532
  * This will return the latest presence record for each connected user.
2251
2533
  *
2534
+ * Convenience wrapper for {@link CollaboratorsManager.getCollaborators}.
2535
+ *
2252
2536
  * @public
2253
2537
  */
2254
2538
  getCollaborators(): TLInstancePresence[];
@@ -2256,9 +2540,58 @@ export declare class Editor extends EventEmitter<TLEventMap> {
2256
2540
  * Returns a list of presence records for all peer collaborators on the current page.
2257
2541
  * This will return the latest presence record for each connected user.
2258
2542
  *
2543
+ * Convenience wrapper for {@link CollaboratorsManager.getCollaboratorsOnCurrentPage}.
2544
+ *
2259
2545
  * @public
2260
2546
  */
2261
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[];
2569
+ /**
2570
+ * Get the current user's ID for attribution purposes.
2571
+ * Also ensures a `user:` record exists in the store for the current user.
2572
+ * Returns `null` when the user store has no current user.
2573
+ *
2574
+ * @public
2575
+ */
2576
+ getAttributionUserId(): null | string;
2577
+ /* Excluded from this release type: _ensureUserRecord */
2578
+ /**
2579
+ * Resolve a display name for a user ID. Asks the
2580
+ * {@link @tldraw/tlschema#TLUserStore} first (the app's source of truth),
2581
+ * falling back to the `user:` record in the store.
2582
+ *
2583
+ * @public
2584
+ */
2585
+ getAttributionDisplayName(userId: null | string): null | string;
2586
+ /**
2587
+ * Resolve a user record by ID. Asks the
2588
+ * {@link @tldraw/tlschema#TLUserStore} first (the app's source of truth),
2589
+ * falling back to the `user:` record in the store.
2590
+ *
2591
+ * @public
2592
+ */
2593
+ getAttributionUser(userId: null | string): null | TLUser;
2594
+ /* Excluded from this release type: _getReferencedUserIds */
2262
2595
  private _isLockedOnFollowingUser;
2263
2596
  /**
2264
2597
  * Start viewport-following a user.
@@ -2893,6 +3226,20 @@ export declare class Editor extends EventEmitter<TLEventMap> {
2893
3226
  type: T['type'];
2894
3227
  }>;
2895
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;
2896
3243
  /**
2897
3244
  * Get a shape by its id.
2898
3245
  *
@@ -4353,6 +4700,35 @@ export declare interface Geometry2dOptions extends TransformedGeometry2dOptions
4353
4700
  */
4354
4701
  export declare function getArcMeasure(A: number, B: number, sweepFlag: number, largeArcFlag: number): number;
4355
4702
 
4703
+ /**
4704
+ * Resolves a color style value to its actual CSS color string for a given theme and variant.
4705
+ * If the color is not a default theme color, returns the color value as-is.
4706
+ *
4707
+ * @param colors - The color palette for the current color mode (e.g. `theme.colors[colorMode]`)
4708
+ * @param color - The color style value to resolve
4709
+ * @param variant - Which variant of the color to return (solid, fill, pattern, etc.)
4710
+ * @returns The CSS color string for the specified color and variant
4711
+ *
4712
+ * @example
4713
+ * ```ts
4714
+ * import { getColorValue } from 'tldraw'
4715
+ *
4716
+ * const colors = editor.getCurrentTheme().colors[editor.getColorMode()]
4717
+ *
4718
+ * // Get the solid variant of red
4719
+ * const redSolid = getColorValue(colors, 'red', 'solid') // '#e03131'
4720
+ *
4721
+ * // Get the fill variant of blue
4722
+ * const blueFill = getColorValue(colors, 'blue', 'fill') // '#4465e9'
4723
+ *
4724
+ * // Custom color passes through unchanged
4725
+ * const customColor = getColorValue(colors, '#ff0000', 'solid') // '#ff0000'
4726
+ * ```
4727
+ *
4728
+ * @public
4729
+ */
4730
+ export declare function getColorValue(colors: TLThemeColors, color: string | TLDefaultColorStyle, variant: keyof TLDefaultColor): string;
4731
+
4356
4732
  /** @public */
4357
4733
  export declare function getCursor(cursor: TLCursorType, rotation?: number, color?: string): string;
4358
4734
 
@@ -4397,6 +4773,16 @@ export declare function getFreshUserPreferences(): TLUserPreferences;
4397
4773
  */
4398
4774
  export declare function getIncrementedName(name: string, others: string[]): string;
4399
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
+
4400
4786
  /* Excluded from this release type: getOwnerDocument */
4401
4787
 
4402
4788
  /* Excluded from this release type: getOwnerWindow */
@@ -4523,14 +4909,14 @@ export declare class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
4523
4909
  static type: "group";
4524
4910
  static props: RecordProps<TLGroupShape>;
4525
4911
  static migrations: TLPropsMigrations;
4526
- hideSelectionBoundsFg(): boolean;
4912
+ hideSelectionBoundsFg(shape: TLGroupShape): boolean;
4527
4913
  canBind(): boolean;
4528
4914
  canResize(): boolean;
4529
4915
  canResizeChildren(): boolean;
4530
4916
  getDefaultProps(): TLGroupShape['props'];
4531
4917
  getGeometry(shape: TLGroupShape): Geometry2d;
4532
4918
  component(shape: TLGroupShape): JSX.Element | null;
4533
- indicator(shape: TLGroupShape): JSX.Element;
4919
+ getIndicatorPath(shape: TLGroupShape): Path2D;
4534
4920
  onChildrenChange(group: TLGroupShape): void;
4535
4921
  }
4536
4922
 
@@ -4809,6 +5195,12 @@ export declare class InputsManager {
4809
5195
  get isPointing(): boolean;
4810
5196
  set isPointing(isPointing: boolean);
4811
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 */
4812
5204
  private _isPinching;
4813
5205
  /**
4814
5206
  * Whether the user is pinching.
@@ -5152,19 +5544,286 @@ export declare function openWindow(url: string, target?: string, allowReferrer?:
5152
5544
  /** @public */
5153
5545
  export declare type OptionalKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
5154
5546
 
5155
- /**
5156
- * Parses a string created by {@link createDeepLinkString} back into a deep link descriptor.
5157
- *
5158
- * @param deepLinkString - the deep link string
5159
- * @returns a deep link descriptor
5160
- *
5161
- * @public
5162
- */
5163
- export declare function parseDeepLinkString(deepLinkString: string): TLDeepLink;
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
+
5726
+ /**
5727
+ * Parses a string created by {@link createDeepLinkString} back into a deep link descriptor.
5728
+ *
5729
+ * @param deepLinkString - the deep link string
5730
+ * @returns a deep link descriptor
5731
+ *
5732
+ * @public
5733
+ */
5734
+ export declare function parseDeepLinkString(deepLinkString: string): TLDeepLink;
5164
5735
 
5165
5736
  /** @public */
5166
5737
  export declare type PerfectDashTerminal = 'none' | 'outset' | 'skip';
5167
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
+
5168
5827
  /**
5169
5828
  * Find the approximate perimeter of an ellipse.
5170
5829
  *
@@ -5359,6 +6018,16 @@ export declare function resizeScaled(shape: TLBaseShape<any, {
5359
6018
  y: number;
5360
6019
  };
5361
6020
 
6021
+ /**
6022
+ * Resolve a partial set of user-provided themes into a complete `TLThemes`
6023
+ * record by merging with `DEFAULT_THEME`. The result is suitable for passing to
6024
+ * `registerColorsFromThemes`, `registerFontsFromThemes`, and the
6025
+ * `ThemeManager` constructor.
6026
+ *
6027
+ * @public
6028
+ */
6029
+ export declare function resolveThemes(themes?: Partial<TLThemes>): TLThemes;
6030
+
5362
6031
  /** @public */
5363
6032
  export declare type RichTextFontVisitor = (node: TiptapNode, state: RichTextFontVisitorState, addFont: (font: TLFontFace) => void) => RichTextFontVisitorState;
5364
6033
 
@@ -5586,6 +6255,32 @@ export declare function setRuntimeOverrides(input: Partial<typeof runtime>): voi
5586
6255
  /** @public */
5587
6256
  export declare function setUserPreferences(user: TLUserPreferences): void;
5588
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
+
5589
6284
  /** @public */
5590
6285
  export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5591
6286
  editor: Editor;
@@ -5640,12 +6335,32 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5640
6335
  * @public
5641
6336
  */
5642
6337
  static type: string;
6338
+ /**
6339
+ * The asset types that this shape can be created from.
6340
+ * When a file is dropped on the canvas, the editor finds the shape util
6341
+ * whose `handledAssetTypes` includes the asset's type and calls
6342
+ * {@link ShapeUtil.createShapeForAsset} to produce the shape.
6343
+ *
6344
+ * @public
6345
+ */
6346
+ static handledAssetTypes?: readonly string[];
5643
6347
  /**
5644
6348
  * Get the default props for a shape.
5645
6349
  *
5646
6350
  * @public
5647
6351
  */
5648
6352
  abstract getDefaultProps(): Shape['props'];
6353
+ /**
6354
+ * Create a shape partial for placing an asset on the canvas.
6355
+ * Only called for shapes whose constructor declares matching
6356
+ * {@link ShapeUtil.handledAssetTypes | `handledAssetTypes`}.
6357
+ *
6358
+ * @param asset - The asset to create a shape for.
6359
+ * @param position - Where to place the shape.
6360
+ * @returns A shape partial, or null if this shape can't be created for the asset.
6361
+ * @public
6362
+ */
6363
+ createShapeForAsset?(asset: TLAsset, position: VecModel): null | TLShapePartial;
5649
6364
  /**
5650
6365
  * Get the shape's geometry.
5651
6366
  *
@@ -5662,37 +6377,30 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5662
6377
  */
5663
6378
  abstract component(shape: Shape): any;
5664
6379
  /**
5665
- * Get JSX describing the shape's indicator (as an SVG element).
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.
5666
6383
  *
5667
- * @param shape - The shape.
5668
- * @public
5669
- */
5670
- abstract indicator(shape: Shape): any;
5671
- /**
5672
- * Whether to use the legacy React-based indicator rendering.
5673
- *
5674
- * Override this to return `false` if your shape implements {@link ShapeUtil.getIndicatorPath}
5675
- * 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.
5676
6386
  *
5677
- * @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.
5678
6389
  * @public
5679
6390
  */
5680
- useLegacyIndicator(): boolean;
6391
+ abstract getIndicatorPath(shape: Shape): TLIndicatorPath | undefined;
5681
6392
  /**
5682
- * Get a Path2D for rendering the shape's indicator on the canvas.
6393
+ * Get JSX describing the shape's indicator (as an SVG element).
5683
6394
  *
5684
- * When implemented, this is used instead of {@link ShapeUtil.indicator} for more
5685
- * efficient canvas-based indicator rendering. Shapes that return `undefined` will
5686
- * fall back to SVG-based rendering via {@link ShapeUtil.indicator}.
5687
- *
5688
- * For complex indicators that need clipping (e.g., arrows with labels), return an
5689
- * 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.
5690
6399
  *
5691
6400
  * @param shape - The shape.
5692
- * @returns A Path2D to stroke, or an object with clipping info, or undefined to use SVG fallback.
5693
6401
  * @public
5694
6402
  */
5695
- getIndicatorPath(shape: Shape): TLIndicatorPath | undefined;
6403
+ indicator(_shape: Shape): any;
5696
6404
  /**
5697
6405
  * Get the font faces that should be rendered in the document in order for this shape to render
5698
6406
  * correctly.
@@ -5726,7 +6434,7 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5726
6434
  *
5727
6435
  * @public
5728
6436
  */
5729
- canBind(_opts: TLShapeUtilCanBindOpts): boolean;
6437
+ canBind(opts: TLShapeUtilCanBindOpts): boolean;
5730
6438
  /**
5731
6439
  * Whether the shape can be double clicked to edit.
5732
6440
  *
@@ -5860,6 +6568,14 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5860
6568
  * @public
5861
6569
  */
5862
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;
5863
6579
  /**
5864
6580
  * By default, the bounds of an image export are the bounds of all the shapes it contains, plus
5865
6581
  * some padding. If an export includes a shape where `isExportBoundsContainer` is true, then the
@@ -5901,13 +6617,28 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5901
6617
  */
5902
6618
  getHandles?(shape: Shape): TLHandle[];
5903
6619
  /**
5904
- * Get whether the shape can receive children of a given type.
6620
+ * Get whether the shape can receive children of a given type. Used by the drag and drop system
6621
+ * to decide whether {@link ShapeUtil.onDragShapesIn} should fire when a shape of the given type
6622
+ * is dragged over this one.
5905
6623
  *
5906
6624
  * @param shape - The shape.
5907
6625
  * @param type - The shape type.
5908
6626
  * @public
5909
6627
  */
5910
- canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']): boolean;
6628
+ canReceiveNewChildrenOfType(shape: Shape, type: TLShape['type']): boolean;
6629
+ /**
6630
+ * Get whether children of a given type can be removed from this shape. Used by the drag and
6631
+ * drop system to decide whether {@link ShapeUtil.onDragShapesOut} should fire when a child of
6632
+ * the given type is dragged out of this shape, and by `kickoutOccludedShapes` to decide
6633
+ * whether to auto-reparent a child of the given type when it has moved outside this shape's
6634
+ * geometry. Returning `false` therefore "pins" matching children — they stay parented to this
6635
+ * shape even when dragged or moved outside it. Defaults to `true`.
6636
+ *
6637
+ * @param shape - The shape.
6638
+ * @param type - The shape type.
6639
+ * @public
6640
+ */
6641
+ canRemoveChildrenOfType(shape: Shape, type: TLShape['type']): boolean;
5911
6642
  /**
5912
6643
  * Get the shape as an SVG object.
5913
6644
  *
@@ -5947,6 +6678,14 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5947
6678
  */
5948
6679
  getHandleSnapGeometry(shape: Shape): HandleSnapGeometry;
5949
6680
  getText(shape: Shape): string | undefined;
6681
+ /**
6682
+ * Return user IDs referenced in shape-specific props.
6683
+ * Used when copying shapes to include referenced users on the clipboard.
6684
+ * Override this if your shape stores user IDs in custom props.
6685
+ *
6686
+ * @public
6687
+ */
6688
+ getReferencedUserIds(shape: Shape): string[];
5950
6689
  getAriaDescriptor(shape: Shape): string | undefined;
5951
6690
  /**
5952
6691
  * A callback called just before a shape is created. This method provides a last chance to modify
@@ -6342,6 +7081,8 @@ export declare abstract class StateNode implements Partial<TLEventHandlers> {
6342
7081
  static children?: () => TLStateNodeConstructor[];
6343
7082
  static isLockable: boolean;
6344
7083
  static useCoalescedEvents: boolean;
7084
+ /** Set to `true` in subclasses to emit interaction-start/end performance events when this state is entered/exited. */
7085
+ static trackPerformance: boolean;
6345
7086
  id: string;
6346
7087
  type: 'branch' | 'leaf' | 'root';
6347
7088
  shapeType?: string;
@@ -6441,6 +7182,19 @@ export declare const stopEventPropagation: (e: any) => any;
6441
7182
 
6442
7183
  /* Excluded from this release type: StoreName */
6443
7184
 
7185
+ /**
7186
+ * Combine every batchable shape indicator into a single page-space `Path2D` and
7187
+ * emit one stroke call. Shapes whose indicator needs an evenodd clip (e.g.
7188
+ * arrows with labels or complex arrowheads) can't be batched — they still
7189
+ * stroke individually inside a save/restore with `ctx.clip` applied.
7190
+ *
7191
+ * Shared by {@link ShapeIndicatorOverlayUtil} and any overlay util that paints
7192
+ * shape indicators (e.g. collaborator selections).
7193
+ *
7194
+ * @public
7195
+ */
7196
+ export declare function strokeShapeIndicators(editor: Editor, ctx: CanvasRenderingContext2D, shapeIds: TLShapeId[]): void;
7197
+
6444
7198
  /** @public */
6445
7199
  export declare function suffixSafeId(id: SafeId, suffix: string): SafeId;
6446
7200
 
@@ -6476,6 +7230,10 @@ export declare interface SvgExportContext {
6476
7230
  * Whether the export should be in dark mode.
6477
7231
  */
6478
7232
  readonly isDarkMode: boolean;
7233
+ /**
7234
+ * The color mode to use for this export.
7235
+ */
7236
+ readonly colorMode: 'dark' | 'light';
6479
7237
  /**
6480
7238
  * The scale of the export - how much CSS pixels will be scaled up/down by.
6481
7239
  */
@@ -6507,15 +7265,18 @@ export declare const TAB_ID: string;
6507
7265
  export declare class TextManager {
6508
7266
  editor: Editor;
6509
7267
  private elm;
7268
+ private poolElms;
6510
7269
  constructor(editor: Editor);
7270
+ private createMeasurementEl;
7271
+ private resetElementStyles;
6511
7272
  private setElementStyles;
7273
+ private getMeasureStyles;
6512
7274
  dispose(): void;
6513
- measureText(textToMeasure: string, opts: TLMeasureTextOpts): BoxModel & {
6514
- scrollWidth: number;
6515
- };
6516
- measureHtml(html: string, opts: TLMeasureTextOpts): BoxModel & {
6517
- scrollWidth: number;
6518
- };
7275
+ private ensurePoolSize;
7276
+ private getPoolItem;
7277
+ measureHtmlBatch(requests: BatchMeasurementRequest[]): TLMeasuredTextSize[];
7278
+ measureText(textToMeasure: string, opts: TLMeasureTextOpts): TLMeasuredTextSize;
7279
+ measureHtml(html: string, opts: TLMeasureTextOpts): TLMeasuredTextSize;
6519
7280
  /**
6520
7281
  * Given an html element, measure the position of each span of unbroken
6521
7282
  * word/white-space characters within any text nodes it contains.
@@ -6543,6 +7304,47 @@ export declare class TextManager {
6543
7304
  }[];
6544
7305
  }
6545
7306
 
7307
+ /**
7308
+ * Manages the editor's color themes.
7309
+ *
7310
+ * Stores named theme definitions (each containing light and dark color palettes
7311
+ * alongside shared properties like font size). The current theme is resolved by
7312
+ * combining the current theme name with the user's color mode preference.
7313
+ *
7314
+ * **Terminology:**
7315
+ * - **Theme** (`TLTheme`): A named set of colors and typographic values for both light and dark modes.
7316
+ * - **Color mode** (`'light' | 'dark'`): The resolved appearance mode, derived from the user's
7317
+ * `colorScheme` preference (`'light' | 'dark' | 'system'`). Access via `getColorMode()`.
7318
+ *
7319
+ * @public
7320
+ */
7321
+ export declare class ThemeManager {
7322
+ private readonly editor;
7323
+ private readonly _themes;
7324
+ private readonly _currentThemeId;
7325
+ constructor(editor: Editor, options: {
7326
+ initial: TLThemeId;
7327
+ themes: TLThemes;
7328
+ });
7329
+ /** Get the current color mode based on the user's dark mode preference. */
7330
+ getColorMode(): 'dark' | 'light';
7331
+ /** Get all registered theme definitions. */
7332
+ getThemes(): TLThemes;
7333
+ /** Get a single theme definition by id. */
7334
+ getTheme(id: TLThemeId): TLTheme | undefined;
7335
+ /** Get the id of the current theme. */
7336
+ getCurrentThemeId(): TLThemeId;
7337
+ getCurrentTheme(): TLTheme;
7338
+ /** Set the current theme by id. The theme must have been previously registered. */
7339
+ setCurrentTheme(id: TLThemeId): void;
7340
+ /** Replace all theme definitions, or update them via a callback that receives a deep copy. */
7341
+ updateThemes(themes: ((themes: TLThemes) => TLThemes) | TLThemes): void;
7342
+ /** Register or update a named theme definition. */
7343
+ updateTheme(theme: TLTheme): void;
7344
+ /** Clean up any resources held by the manager. */
7345
+ dispose(): void;
7346
+ }
7347
+
6546
7348
  /* Excluded from this release type: TickManager */
6547
7349
 
6548
7350
  /**
@@ -6561,12 +7363,26 @@ export declare type TiptapNode = Node_2;
6561
7363
  /** @public */
6562
7364
  export declare type TLAdjacentDirection = 'down' | 'left' | 'next' | 'prev' | 'right' | 'up';
6563
7365
 
7366
+ /** @public */
7367
+ export declare type TLAnyAssetUtilConstructor = TLAssetUtilConstructor<any>;
7368
+
6564
7369
  /** @public */
6565
7370
  export declare type TLAnyBindingUtilConstructor = TLBindingUtilConstructor<any>;
6566
7371
 
7372
+ /** @public */
7373
+ export declare type TLAnyOverlayUtilConstructor = TLOverlayUtilConstructor<any>;
7374
+
6567
7375
  /** @public */
6568
7376
  export declare type TLAnyShapeUtilConstructor = TLShapeUtilConstructor<any>;
6569
7377
 
7378
+ /** @public */
7379
+ export declare interface TLAssetUtilConstructor<T extends TLAsset = TLAsset, U extends AssetUtil<T> = AssetUtil<T>> {
7380
+ new (editor: Editor): U;
7381
+ type: T['type'];
7382
+ props?: RecordProps<T>;
7383
+ migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
7384
+ }
7385
+
6570
7386
  /** @public */
6571
7387
  export declare type TLBaseBoxShape = ExtractShapeByProps<{
6572
7388
  h: number;
@@ -6599,15 +7415,6 @@ export declare interface TLBindingUtilConstructor<T extends TLBinding, U extends
6599
7415
  migrations?: TLPropsMigrations;
6600
7416
  }
6601
7417
 
6602
- /** @public */
6603
- export declare interface TLBrushProps {
6604
- userId?: string;
6605
- brush: BoxModel;
6606
- color?: string;
6607
- opacity?: number;
6608
- className?: string;
6609
- }
6610
-
6611
7418
  /** @public */
6612
7419
  export declare interface TLCameraConstraints {
6613
7420
  /** The bounds (in page space) of the constrained space */
@@ -6656,6 +7463,29 @@ export declare interface TLCameraConstraints {
6656
7463
  };
6657
7464
  }
6658
7465
 
7466
+ /**
7467
+ * Emitted when a camera operation ends (after a 50ms debounce), with aggregated frame time stats.
7468
+ * @public
7469
+ */
7470
+ export declare interface TLCameraEndPerfEvent extends TLPerfFrameTimeStats {
7471
+ /** Whether this was a pan or zoom operation. */
7472
+ type: 'panning' | 'zooming';
7473
+ /** Total shapes on the current page. */
7474
+ shapeCount: number;
7475
+ /** Number of shapes visible (not culled) in the viewport. */
7476
+ visibleShapeCount: number;
7477
+ /** Number of shapes culled (off-screen) from rendering. */
7478
+ culledShapeCount: number;
7479
+ /** Viewport width in screen pixels. */
7480
+ viewportWidth: number;
7481
+ /** Viewport height in screen pixels. */
7482
+ viewportHeight: number;
7483
+ /** Camera zoom level (`camera.z`) at session end. */
7484
+ zoomLevel: number;
7485
+ /** `performance.now()` when the camera session ended. */
7486
+ timestamp: number;
7487
+ }
7488
+
6659
7489
  /** @public */
6660
7490
  export declare interface TLCameraMoveOptions {
6661
7491
  /** Whether to move the camera immediately, rather than on the next tick. */
@@ -6694,6 +7524,17 @@ export declare interface TLCameraOptions {
6694
7524
  constraints?: TLCameraConstraints;
6695
7525
  }
6696
7526
 
7527
+ /**
7528
+ * Emitted when a camera operation (pan or zoom) begins.
7529
+ * @public
7530
+ */
7531
+ export declare interface TLCameraStartPerfEvent {
7532
+ /** Whether this is a pan or zoom operation. */
7533
+ type: 'panning' | 'zooming';
7534
+ /** `performance.now()` when the camera session started. */
7535
+ timestamp: number;
7536
+ }
7537
+
6697
7538
  /** @public */
6698
7539
  export declare type TLCancelEvent = (info: TLCancelEventInfo) => void;
6699
7540
 
@@ -6727,15 +7568,38 @@ export declare type TLCLickEventName = 'double_click' | 'quadruple_click' | 'tri
6727
7568
  /** @public */
6728
7569
  export declare type TLClickState = 'idle' | 'overflow' | 'pendingDouble' | 'pendingOverflow' | 'pendingQuadruple' | 'pendingTriple';
6729
7570
 
6730
- /** @public */
6731
- export declare interface TLCollaboratorHintProps {
6732
- userId: string;
6733
- className?: string;
6734
- point: VecModel;
6735
- viewport: Box;
6736
- zoom: number;
6737
- opacity?: number;
6738
- color: string;
7571
+ /**
7572
+ * Raw clipboard paste payload, before tldraw parses clipboard contents into {@link TLExternalContent}.
7573
+ *
7574
+ * - `native-event`: from the `paste` event — `clipboardData` is available synchronously (unlike async
7575
+ * `navigator.clipboard.read()`).
7576
+ * - `clipboard-read`: from an explicit `navigator.clipboard.read()` call — only `ClipboardItem[]`
7577
+ * exists
7578
+ * (no `DataTransfer`).
7579
+ *
7580
+ * @public
7581
+ */
7582
+ export declare type TLClipboardPasteRawInfo = {
7583
+ readonly clipboardData: DataTransfer | null;
7584
+ readonly editor: Editor;
7585
+ readonly event: ClipboardEvent;
7586
+ readonly point: undefined | VecLike;
7587
+ readonly source: 'native-event';
7588
+ } | {
7589
+ readonly clipboardItems: readonly ClipboardItem[];
7590
+ readonly editor: Editor;
7591
+ readonly point: undefined | VecLike;
7592
+ readonly source: 'clipboard-read';
7593
+ };
7594
+
7595
+ /**
7596
+ * Identifies how a clipboard write was triggered (copy vs cut, keyboard vs menu).
7597
+ *
7598
+ * @public
7599
+ */
7600
+ export declare interface TLClipboardWriteInfo {
7601
+ readonly operation: 'copy' | 'cut';
7602
+ readonly source: 'menu' | 'native';
6739
7603
  }
6740
7604
 
6741
7605
  /** @public */
@@ -6754,6 +7618,7 @@ export declare interface TLContent {
6754
7618
  rootShapeIds: TLShapeId[];
6755
7619
  assets: TLAsset[];
6756
7620
  schema: SerializedSchema;
7621
+ users?: TLUser[];
6757
7622
  }
6758
7623
 
6759
7624
  /**
@@ -6776,14 +7641,9 @@ export declare interface TLCropInfo<T extends TLShape> {
6776
7641
  }
6777
7642
 
6778
7643
  /** @public */
6779
- export declare interface TLCursorProps {
6780
- userId: string;
6781
- className?: string;
6782
- point: null | VecModel;
6783
- zoom: number;
6784
- color?: string;
6785
- name: null | string;
6786
- chatMessage: string;
7644
+ export declare interface TLCurrentUser {
7645
+ readonly userPreferences: Signal<TLUserPreferences>;
7646
+ readonly setUserPreferences: (userPreferences: TLUserPreferences) => void;
6787
7647
  }
6788
7648
 
6789
7649
  /** @public */
@@ -6875,6 +7735,14 @@ export declare interface TldrawEditorBaseProps {
6875
7735
  * An array of binding utils to use in the editor.
6876
7736
  */
6877
7737
  bindingUtils?: readonly TLAnyBindingUtilConstructor[];
7738
+ /**
7739
+ * An array of asset utils to use in the editor.
7740
+ */
7741
+ assetUtils?: readonly TLAnyAssetUtilConstructor[];
7742
+ /**
7743
+ * An array of overlay utils to use in the editor for canvas overlay UI elements.
7744
+ */
7745
+ overlayUtils?: readonly TLAnyOverlayUtilConstructor[];
6878
7746
  /**
6879
7747
  * An array of tools to add to the editor's state chart.
6880
7748
  */
@@ -6902,11 +7770,23 @@ export declare interface TldrawEditorBaseProps {
6902
7770
  /**
6903
7771
  * The user interacting with the editor.
6904
7772
  */
6905
- user?: TLUser;
7773
+ user?: TLCurrentUser;
7774
+ /**
7775
+ * The editor's color scheme. Defaults to `'light'`.
7776
+ *
7777
+ * - `'light'` - Always use light mode.
7778
+ * - `'dark'` - Always use dark mode.
7779
+ * - `'system'` - Follow the OS color scheme preference.
7780
+ */
7781
+ colorScheme?: 'dark' | 'light' | 'system';
7782
+ /**
7783
+ * Named themes for the editor.
7784
+ */
7785
+ themes?: Partial<TLThemes>;
6906
7786
  /**
6907
- * Whether to infer dark mode from the user's OS. Defaults to false.
7787
+ * The id of the initially active theme. Defaults to `'default'`.
6908
7788
  */
6909
- inferDarkMode?: boolean;
7789
+ initialTheme?: TLThemeId;
6910
7790
  /**
6911
7791
  * Camera options for the editor.
6912
7792
  *
@@ -7124,6 +8004,12 @@ export declare interface TldrawOptions {
7124
8004
  * When false, the spacebar will not pan the camera.
7125
8005
  */
7126
8006
  readonly spacebarPanning: boolean;
8007
+ /**
8008
+ * Whether to allow right-click + drag to pan the camera. When true, right-click + drag pans the
8009
+ * camera and a static right-click opens the context menu at the release position. When false,
8010
+ * right-click opens the context menu on press (no drag-to-pan).
8011
+ */
8012
+ readonly rightClickPanning: boolean;
7127
8013
  /**
7128
8014
  * The default padding (in pixels) used when zooming to fit content in the viewport.
7129
8015
  * This affects methods like `zoomToFit()`, `zoomToSelection()`, and `zoomToBounds()`.
@@ -7166,6 +8052,72 @@ export declare interface TldrawOptions {
7166
8052
  * viewport's page dimensions regardless of overview zoom changes.
7167
8053
  */
7168
8054
  readonly quickZoomPreservesScreenBounds: boolean;
8055
+ /**
8056
+ * Called before content is written to the clipboard during a copy or cut operation.
8057
+ * Receives the serialized content (shapes, bindings, assets) and can filter or transform
8058
+ * it before it reaches the clipboard.
8059
+ *
8060
+ * Return a modified `TLContent` object to change what is copied or cut. Return `false` to
8061
+ * cancel the clipboard write (for cut, the selected shapes are not removed). Return `void`
8062
+ * (or `undefined`) to pass through unchanged. You may return a `Promise` of those values if
8063
+ * the hook is async.
8064
+ *
8065
+ * @example
8066
+ * ```tsx
8067
+ * // Filter out "locked" shapes from copy
8068
+ * onBeforeCopyToClipboard({ content, operation }) {
8069
+ * return {
8070
+ * ...content,
8071
+ * shapes: content.shapes.filter(s => !s.meta.locked),
8072
+ * rootShapeIds: content.rootShapeIds.filter(id =>
8073
+ * content.shapes.find(s => s.id === id && !s.meta.locked)
8074
+ * ),
8075
+ * }
8076
+ * }
8077
+ * ```
8078
+ */
8079
+ onBeforeCopyToClipboard?(info: {
8080
+ content: TLContent;
8081
+ editor: Editor;
8082
+ } & TLClipboardWriteInfo): Awaitable<false | TLContent | void>;
8083
+ /**
8084
+ * Called before pasted content is processed and shapes are created. Receives the parsed
8085
+ * external content from the clipboard and can filter, transform, or cancel it.
8086
+ *
8087
+ * Return `false` to cancel the paste. Return a modified content object to transform it.
8088
+ * Return `void` (or `undefined`) to pass through unchanged. You may return a `Promise` of
8089
+ * those values if the hook is async.
8090
+ *
8091
+ * This only fires for clipboard paste operations (keyboard shortcuts and menu actions),
8092
+ * not for file drops or programmatic `putExternalContent` calls.
8093
+ *
8094
+ * @example
8095
+ * ```tsx
8096
+ * // Block pasting of image files
8097
+ * onBeforePasteFromClipboard({ content }) {
8098
+ * if (content.type === 'files') {
8099
+ * const nonImages = content.files.filter(f => !f.type.startsWith('image/'))
8100
+ * if (nonImages.length === 0) return false
8101
+ * return { ...content, files: nonImages }
8102
+ * }
8103
+ * }
8104
+ * ```
8105
+ */
8106
+ onBeforePasteFromClipboard?(info: {
8107
+ content: TLExternalContent<unknown>;
8108
+ editor: Editor;
8109
+ point?: VecLike;
8110
+ source: 'clipboard-read' | 'native-event';
8111
+ }): Awaitable<false | TLExternalContent<unknown> | void>;
8112
+ /**
8113
+ * Called first for keyboard and menu paste, **before** tldraw handles or parses clipboard data
8114
+ * (and before {@link TldrawOptions.onBeforePasteFromClipboard}).
8115
+ *
8116
+ * Return `false` to cancel tldraw's default paste handling for this gesture (same convention as
8117
+ * {@link TldrawOptions.onBeforePasteFromClipboard}). Use this when you handle paste yourself from
8118
+ * raw clipboard data, or to block the gesture entirely. Return `void` (or `undefined`) to continue.
8119
+ */
8120
+ onClipboardPasteRaw?(info: TLClipboardPasteRawInfo): false | void;
7169
8121
  /**
7170
8122
  * Called when content is dropped on the canvas. Provides the page position
7171
8123
  * where the drop occurred and the underlying drag event object.
@@ -7187,34 +8139,17 @@ export declare interface TLDropShapesOverInfo {
7187
8139
  /** @public */
7188
8140
  export declare interface TLEditorComponents {
7189
8141
  Background?: ComponentType | null;
7190
- Brush?: ComponentType<TLBrushProps> | null;
7191
8142
  Canvas?: ComponentType<TLCanvasComponentProps> | null;
7192
- CollaboratorBrush?: ComponentType<TLBrushProps> | null;
7193
- CollaboratorCursor?: ComponentType<TLCursorProps> | null;
7194
- CollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null;
7195
- CollaboratorScribble?: ComponentType<TLScribbleProps> | null;
7196
- CollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null;
7197
- Cursor?: ComponentType<TLCursorProps> | null;
7198
8143
  Grid?: ComponentType<TLGridProps> | null;
7199
- Handle?: ComponentType<TLHandleProps> | null;
7200
- Handles?: ComponentType<TLHandlesProps> | null;
7201
8144
  InFrontOfTheCanvas?: ComponentType | null;
7202
8145
  LoadingScreen?: ComponentType | null;
7203
8146
  OnTheCanvas?: ComponentType | null;
7204
- Overlays?: ComponentType | null;
7205
- Scribble?: ComponentType<TLScribbleProps> | null;
7206
8147
  SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null;
7207
- SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null;
7208
- ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null;
7209
- ShapeIndicators?: ComponentType | null;
7210
8148
  ShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null;
7211
- SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null;
7212
8149
  Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null;
7213
8150
  SvgDefs?: ComponentType | null;
7214
- ZoomBrush?: ComponentType<TLBrushProps> | null;
7215
8151
  ErrorFallback?: TLErrorFallbackComponent;
7216
8152
  ShapeErrorFallback?: TLShapeErrorFallbackComponent;
7217
- ShapeIndicatorErrorFallback?: TLShapeIndicatorErrorFallbackComponent;
7218
8153
  }
7219
8154
 
7220
8155
  /** @public */
@@ -7233,18 +8168,22 @@ export declare interface TLEditorOptions {
7233
8168
  */
7234
8169
  bindingUtils: readonly TLAnyBindingUtilConstructor[];
7235
8170
  /**
7236
- * An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor.
8171
+ * An array of asset utils to use in the editor. These will be used to handle asset-type-specific behavior.
7237
8172
  */
7238
- tools: readonly TLStateNodeConstructor[];
8173
+ assetUtils?: readonly TLAnyAssetUtilConstructor[];
7239
8174
  /**
7240
- * Should return a containing html element which has all the styles applied to the editor. If not
7241
- * given, the body element will be used.
8175
+ * An array of overlay utils to use in the editor. These define canvas overlay UI elements
8176
+ * like selection handles, rotation corners, shape handles, etc.
7242
8177
  */
7243
- getContainer(): HTMLElement;
8178
+ overlayUtils?: readonly TLAnyOverlayUtilConstructor[];
8179
+ /**
8180
+ * An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor.
8181
+ */
8182
+ tools: readonly TLStateNodeConstructor[];
7244
8183
  /**
7245
8184
  * A user defined externally to replace the default user.
7246
8185
  */
7247
- user?: TLUser;
8186
+ user?: TLCurrentUser;
7248
8187
  /**
7249
8188
  * The editor's initial active tool (or other state node id).
7250
8189
  */
@@ -7253,27 +8192,15 @@ export declare interface TLEditorOptions {
7253
8192
  * Whether to automatically focus the editor when it mounts.
7254
8193
  */
7255
8194
  autoFocus?: boolean;
7256
- /**
7257
- * Whether to infer dark mode from the user's system preferences. Defaults to false.
7258
- */
7259
- inferDarkMode?: boolean;
7260
- /**
7261
- * Options for the editor's camera.
7262
- *
7263
- * @deprecated Use `options.cameraOptions` instead. This will be removed in a future release.
7264
- */
7265
- cameraOptions?: Partial<TLCameraOptions>;
7266
- options?: Partial<TldrawOptions>;
7267
- /**
7268
- * Text options for the editor.
7269
- *
7270
- * @deprecated Use `options.text` instead. This prop will be removed in a future release.
7271
- */
7272
- textOptions?: TLTextOptions;
7273
8195
  licenseKey?: string;
7274
8196
  fontAssetUrls?: {
7275
8197
  [key: string]: string | undefined;
7276
8198
  };
8199
+ /**
8200
+ * Should return a containing html element which has all the styles applied to the editor. If not
8201
+ * given, the body element will be used.
8202
+ */
8203
+ getContainer(): HTMLElement;
7277
8204
  /**
7278
8205
  * Provides a way to hide shapes.
7279
8206
  *
@@ -7290,6 +8217,40 @@ export declare interface TLEditorOptions {
7290
8217
  * @param editor - The editor instance.
7291
8218
  */
7292
8219
  getShapeVisibility?(shape: TLShape, editor: Editor): 'hidden' | 'inherit' | 'visible' | null | undefined;
8220
+ /**
8221
+ * Named theme definitions for the editor. Each theme contains shared
8222
+ * properties (font size, line height, stroke width) and color palettes
8223
+ * for both light and dark modes.
8224
+ */
8225
+ themes?: Partial<TLThemes>;
8226
+ /**
8227
+ * The id of the initially active theme. Defaults to `'default'`.
8228
+ */
8229
+ initialTheme?: TLThemeId;
8230
+ /**
8231
+ * The editor's color scheme preference, controls the default color mode. Defaults to `'light'`.
8232
+ *
8233
+ * - `'light'` - Always use light mode.
8234
+ * - `'dark'` - Always use dark mode.
8235
+ * - `'system'` - Follow the OS color scheme preference.
8236
+ */
8237
+ colorScheme?: 'dark' | 'light' | 'system';
8238
+ /**
8239
+ * Additional configuration options for the tldraw editor.
8240
+ */
8241
+ options?: Partial<TldrawOptions>;
8242
+ /**
8243
+ * Options for the editor's camera.
8244
+ *
8245
+ * @deprecated Use `options.cameraOptions` instead. This will be removed in a future release.
8246
+ */
8247
+ cameraOptions?: Partial<TLCameraOptions>;
8248
+ /**
8249
+ * Text options for the editor.
8250
+ *
8251
+ * @deprecated Use `options.text` instead. This prop will be removed in a future release.
8252
+ */
8253
+ textOptions?: TLTextOptions;
7293
8254
  }
7294
8255
 
7295
8256
  /**
@@ -7348,6 +8309,7 @@ export declare const tlenv: {
7348
8309
  */
7349
8310
  export declare const tlenvReactive: Atom< {
7350
8311
  isCoarsePointer: boolean;
8312
+ supportsP3ColorSpace: boolean;
7351
8313
  }, unknown>;
7352
8314
 
7353
8315
  /** @public */
@@ -7476,6 +8438,7 @@ export declare interface TLFileReplaceExternalContent extends TLBaseExternalCont
7476
8438
  type: 'file-replace';
7477
8439
  file: File;
7478
8440
  shapeId: TLShapeId;
8441
+ /** @deprecated This field is no longer used by the default handler. It may be removed in a future version. */
7479
8442
  isImage: boolean;
7480
8443
  }
7481
8444
 
@@ -7487,69 +8450,18 @@ export declare interface TLFilesExternalContent extends TLBaseExternalContent {
7487
8450
  }
7488
8451
 
7489
8452
  /**
7490
- * A font face that can be used in the editor. The properties of this are largely the same as the
7491
- * ones in the
7492
- * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face | css `@font-face` rule}.
8453
+ * Emitted every animation frame when at least one `'frame'` listener is registered.
7493
8454
  * @public
7494
8455
  */
7495
- export declare interface TLFontFace {
7496
- /**
7497
- * How this font can be referred to in CSS.
7498
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family | `font-family`}.
7499
- */
7500
- readonly family: string;
7501
- /**
7502
- * The source of the font. This
7503
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`}.
7504
- */
7505
- readonly src: TLFontFaceSource;
7506
- /**
7507
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override | `ascent-override`}.
7508
- */
7509
- readonly ascentOverride?: string;
7510
- /**
7511
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override | `descent-override`}.
7512
- */
7513
- readonly descentOverride?: string;
7514
- /**
7515
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch | `font-stretch`}.
7516
- */
7517
- readonly stretch?: string;
7518
- /**
7519
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style | `font-style`}.
7520
- */
7521
- readonly style?: string;
7522
- /**
7523
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight | `font-weight`}.
7524
- */
7525
- readonly weight?: string;
7526
- /**
7527
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-feature-settings | `font-feature-settings`}.
7528
- */
7529
- readonly featureSettings?: string;
7530
- /**
7531
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/line-gap-override | `line-gap-override`}.
7532
- */
7533
- readonly lineGapOverride?: string;
7534
- /**
7535
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range | `unicode-range`}.
7536
- */
7537
- readonly unicodeRange?: string;
7538
- }
7539
-
7540
- /**
7541
- * Represents the `src` property of a {@link TLFontFace}.
7542
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`} for details of the properties here.
7543
- * @public
7544
- */
7545
- export declare interface TLFontFaceSource {
7546
- /**
7547
- * A URL from which to load the font. If the value here is a key in
7548
- * {@link tldraw#TLEditorAssetUrls.fonts}, the value from there will be used instead.
7549
- */
7550
- url: string;
7551
- format?: string;
7552
- tech?: string;
8456
+ export declare interface TLFramePerfEvent {
8457
+ /** Time since the last frame in ms. */
8458
+ elapsed: number;
8459
+ /** Total shapes on the current page. */
8460
+ shapeCount: number;
8461
+ /** Number of shapes culled (off-screen) from rendering. */
8462
+ culledShapeCount: number;
8463
+ /** Number of shapes visible (not culled) in the viewport. */
8464
+ visibleShapeCount: number;
7553
8465
  }
7554
8466
 
7555
8467
  /** Additional options for the {@link ShapeUtil.getGeometry} method.
@@ -7630,20 +8542,6 @@ export declare interface TLHandleDragInfo<T extends TLShape> {
7630
8542
  initial?: T | undefined;
7631
8543
  }
7632
8544
 
7633
- /** @public */
7634
- export declare interface TLHandleProps {
7635
- shapeId: TLShapeId;
7636
- handle: TLHandle;
7637
- zoom: number;
7638
- isCoarse: boolean;
7639
- className?: string;
7640
- }
7641
-
7642
- /** @public */
7643
- export declare interface TLHandlesProps {
7644
- children: ReactNode;
7645
- }
7646
-
7647
8545
  /** @public */
7648
8546
  export declare interface TLHistoryBatchOptions {
7649
8547
  /**
@@ -7694,6 +8592,38 @@ export declare type TLIndicatorPath = {
7694
8592
  path: Path2D;
7695
8593
  } | Path2D;
7696
8594
 
8595
+ /**
8596
+ * Emitted when an interaction state is exited, with aggregated frame time stats.
8597
+ * @public
8598
+ */
8599
+ export declare interface TLInteractionEndPerfEvent extends TLPerfFrameTimeStats {
8600
+ /** The state node id (e.g. `'translating'`). */
8601
+ name: string;
8602
+ /** Full tool path (e.g. `'select.translating'`). */
8603
+ path: string;
8604
+ /** Total shapes on the current page. */
8605
+ shapeCount: number;
8606
+ /** Breakdown of selected shape types at interaction start (e.g. `{ geo: 2, draw: 1 }`). */
8607
+ selectedShapeTypes: Record<string, number>;
8608
+ /** Camera zoom level (`camera.z`) at interaction end. */
8609
+ zoomLevel: number;
8610
+ /** `performance.now()` when the interaction ended. */
8611
+ timestamp: number;
8612
+ }
8613
+
8614
+ /**
8615
+ * Emitted when an interaction state (e.g. translating, resizing) is entered.
8616
+ * @public
8617
+ */
8618
+ export declare interface TLInteractionStartPerfEvent {
8619
+ /** The state node id (e.g. `'translating'`). */
8620
+ name: string;
8621
+ /** Full tool path (e.g. `'select.translating'`). */
8622
+ path: string;
8623
+ /** `performance.now()` when the interaction started. */
8624
+ timestamp: number;
8625
+ }
8626
+
7697
8627
  /** @public */
7698
8628
  export declare type TLInterruptEvent = (info: TLInterruptEventInfo) => void;
7699
8629
 
@@ -7743,6 +8673,11 @@ export declare interface TLLoadSnapshotOptions {
7743
8673
  forceOverwriteSessionState?: boolean;
7744
8674
  }
7745
8675
 
8676
+ /** @public */
8677
+ export declare type TLMeasuredTextSize = BoxModel & {
8678
+ scrollWidth: number;
8679
+ };
8680
+
7746
8681
  /** @public */
7747
8682
  export declare interface TLMeasureTextOpts {
7748
8683
  fontStyle: string;
@@ -7936,6 +8871,130 @@ export declare const tlmenus: {
7936
8871
  */
7937
8872
  export declare type TLOnMountHandler = (editor: Editor) => (() => undefined | void) | undefined | void;
7938
8873
 
8874
+ /** @public */
8875
+ export declare interface TLOverlay<Props = Record<string, unknown>> {
8876
+ /**
8877
+ * Globally unique id for this overlay instance across all overlay utils.
8878
+ * Hit-test and hover lookup key on `id` alone, so utils must namespace their
8879
+ * ids (e.g. `'selection_fg:top_left'`, `'handle:<shapeId>:<handleId>'`) to
8880
+ * avoid colliding with overlays from other utils.
8881
+ */
8882
+ id: string;
8883
+ /** The overlay util type that owns this instance */
8884
+ type: string;
8885
+ /** Arbitrary props for the overlay (handle id, corner name, etc.) */
8886
+ props: Props;
8887
+ }
8888
+
8889
+ /**
8890
+ * An active overlay util paired with the overlays it produced for the current
8891
+ * editor state. Returned by {@link OverlayManager.getActiveOverlayEntries} so
8892
+ * hit-test, render, and debug paths share a single scan per reactive tick.
8893
+ *
8894
+ * @public
8895
+ */
8896
+ export declare interface TLOverlayEntry {
8897
+ util: OverlayUtil;
8898
+ overlays: TLOverlay[];
8899
+ }
8900
+
8901
+ /** @public */
8902
+ export declare interface TLOverlayUtilConstructor<U extends OverlayUtil = OverlayUtil> {
8903
+ new (editor: Editor): U;
8904
+ type: string;
8905
+ configure<T extends TLOverlayUtilConstructor<any>>(this: T, options: T extends new (...args: any[]) => {
8906
+ options: infer Options;
8907
+ } ? Partial<Options> : never): T;
8908
+ }
8909
+
8910
+ /**
8911
+ * Map of all performance event names to their payload types.
8912
+ * Used with {@link PerformanceManager.on} and {@link PerformanceManager.once}.
8913
+ * @public
8914
+ */
8915
+ export declare interface TLPerfEventMap {
8916
+ /** An interaction state was entered. */
8917
+ 'interaction-start': [TLInteractionStartPerfEvent];
8918
+ /** An interaction state was exited, with aggregated frame time stats. */
8919
+ 'interaction-end': [TLInteractionEndPerfEvent];
8920
+ /** A camera operation (pan/zoom) began. */
8921
+ 'camera-start': [TLCameraStartPerfEvent];
8922
+ /** A camera operation ended (after debounce), with aggregated frame time stats. */
8923
+ 'camera-end': [TLCameraEndPerfEvent];
8924
+ /** Shapes were created. */
8925
+ 'shapes-created': [TLShapeOperationPerfEvent];
8926
+ /** Shapes were updated. */
8927
+ 'shapes-updated': [TLShapeOperationPerfEvent];
8928
+ /** Shapes were deleted. */
8929
+ 'shapes-deleted': [TLShapeOperationPerfEvent];
8930
+ /** An animation frame was rendered. Only fires when listeners are registered. */
8931
+ frame: [TLFramePerfEvent];
8932
+ /** An undo operation was performed. */
8933
+ undo: [TLUndoRedoPerfEvent];
8934
+ /** A redo operation was performed. */
8935
+ redo: [TLUndoRedoPerfEvent];
8936
+ }
8937
+
8938
+ /**
8939
+ * Common frame time statistics shared by interaction and camera end events.
8940
+ * @public
8941
+ */
8942
+ export declare interface TLPerfFrameTimeStats {
8943
+ /** Total duration of the session in ms. */
8944
+ duration: number;
8945
+ /** Average frames per second during the session. */
8946
+ fps: number;
8947
+ /** Total number of frames recorded. */
8948
+ frameCount: number;
8949
+ /** Mean frame duration in ms. */
8950
+ avgFrameTime: number;
8951
+ /** Median (p50) frame duration in ms. */
8952
+ medianFrameTime: number;
8953
+ /** 95th percentile frame duration in ms. */
8954
+ p95FrameTime: number;
8955
+ /** 99th percentile frame duration in ms. */
8956
+ p99FrameTime: number;
8957
+ /** Shortest frame duration in ms. */
8958
+ minFrameTime: number;
8959
+ /** Longest frame duration in ms. */
8960
+ maxFrameTime: number;
8961
+ /** Raw frame durations for local analysis. Exclude when sending to analytics. */
8962
+ frameTimes: number[];
8963
+ /**
8964
+ * Long animation frames observed during this period (Chromium 123+).
8965
+ * Only present when the browser supports the Long Animation Frames API and
8966
+ * at least one long frame was observed.
8967
+ * Exclude when sending to analytics — entries are large and contain script URLs.
8968
+ */
8969
+ longAnimationFrames?: TLPerfLongAnimationFrame[];
8970
+ }
8971
+
8972
+ /**
8973
+ * A long animation frame observed by the browser during an interaction.
8974
+ * Available only in browsers that support the Long Animation Frames API (Chromium 123+).
8975
+ * @public
8976
+ */
8977
+ export declare interface TLPerfLongAnimationFrame {
8978
+ /** Frame start time (relative to timeOrigin). */
8979
+ startTime: number;
8980
+ /** Total frame duration in ms. */
8981
+ duration: number;
8982
+ /** Time the main thread was blocked in ms. */
8983
+ blockingDuration: number;
8984
+ /** Scripts that contributed to the long frame. */
8985
+ scripts: TLPerfLongAnimationFrameScript[];
8986
+ }
8987
+
8988
+ /** A script attribution entry from a long animation frame. @public */
8989
+ export declare interface TLPerfLongAnimationFrameScript {
8990
+ /** The script source URL (may be empty for inline scripts). */
8991
+ sourceURL: string;
8992
+ /** The function name or invoker description. */
8993
+ invoker: string;
8994
+ /** Time spent in this script in ms. */
8995
+ duration: number;
8996
+ }
8997
+
7939
8998
  /** @public */
7940
8999
  export declare type TLPinchEvent = (info: TLPinchEventInfo) => void;
7941
9000
 
@@ -7975,6 +9034,10 @@ export declare type TLPointerEventTarget = {
7975
9034
  handle?: TLSelectionHandle;
7976
9035
  shape?: undefined;
7977
9036
  target: 'selection';
9037
+ } | {
9038
+ overlay: TLOverlay;
9039
+ shape?: undefined;
9040
+ target: 'overlay';
7978
9041
  } | {
7979
9042
  shape: TLShape;
7980
9043
  target: 'shape';
@@ -8045,28 +9108,12 @@ export declare type TLResizeShapeOptions = Partial<{
8045
9108
 
8046
9109
  /* Excluded from this release type: TLRotationSnapshot */
8047
9110
 
8048
- /** @public */
8049
- export declare interface TLScribbleProps {
8050
- userId?: string;
8051
- scribble: TLScribble;
8052
- zoom: number;
8053
- color?: string;
8054
- opacity?: number;
8055
- className?: string;
8056
- }
8057
-
8058
9111
  /** @public */
8059
9112
  export declare interface TLSelectionBackgroundProps {
8060
9113
  bounds: Box;
8061
9114
  rotation: number;
8062
9115
  }
8063
9116
 
8064
- /** @public */
8065
- export declare interface TLSelectionForegroundProps {
8066
- bounds: Box;
8067
- rotation: number;
8068
- }
8069
-
8070
9117
  /** @public */
8071
9118
  export declare type TLSelectionHandle = RotateCorner | SelectionCorner | SelectionEdge;
8072
9119
 
@@ -8101,26 +9148,26 @@ export declare type TLShapeErrorFallbackComponent = ComponentType<{
8101
9148
  }>;
8102
9149
 
8103
9150
  /** @public */
8104
- export declare type TLShapeIndicatorErrorFallbackComponent = ComponentType<{
8105
- error: unknown;
8106
- }>;
8107
-
8108
- /** @public */
8109
- export declare interface TLShapeIndicatorProps {
8110
- userId?: string;
8111
- shapeId: TLShapeId;
8112
- color?: string | undefined;
8113
- opacity?: number;
8114
- className?: string;
8115
- hidden?: boolean;
9151
+ export declare interface TLShapeIndicatorOverlay extends TLOverlay {
9152
+ props: {
9153
+ hintingShapeIds: TLShapeId[];
9154
+ idsToDisplay: TLShapeId[];
9155
+ };
8116
9156
  }
8117
9157
 
8118
- /** @public */
8119
- export declare interface TLShapeIndicatorsProps {
8120
- /** Whether to hide all of the indicators */
8121
- hideAll?: boolean;
8122
- /** Whether to show all of the indicators */
8123
- showAll?: boolean;
9158
+ /**
9159
+ * Emitted when shapes are created, updated, or deleted.
9160
+ * @public
9161
+ */
9162
+ export declare interface TLShapeOperationPerfEvent {
9163
+ /** The operation type. */
9164
+ operation: 'create' | 'delete' | 'update';
9165
+ /** Number of shapes affected. */
9166
+ count: number;
9167
+ /** Breakdown by shape type (e.g. `{ geo: 2, draw: 1 }`). */
9168
+ shapeTypes: Record<string, number>;
9169
+ /** `performance.now()` when the operation occurred. */
9170
+ timestamp: number;
8124
9171
  }
8125
9172
 
8126
9173
  /**
@@ -8180,6 +9227,7 @@ export declare interface TLShapeUtilConstructor<T extends TLShape, U extends Sha
8180
9227
  type: T['type'];
8181
9228
  props?: RecordProps<T>;
8182
9229
  migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
9230
+ handledAssetTypes?: readonly string[];
8183
9231
  }
8184
9232
 
8185
9233
  /** @public */
@@ -8192,13 +9240,6 @@ export declare interface TLShapeWrapperProps extends React.HTMLAttributes<HTMLDi
8192
9240
  children: ReactNode;
8193
9241
  }
8194
9242
 
8195
- /** @public */
8196
- export declare interface TLSnapIndicatorProps {
8197
- className?: string;
8198
- line: SnapIndicator;
8199
- zoom: number;
8200
- }
8201
-
8202
9243
  /** @public */
8203
9244
  export declare interface TLStateNodeConstructor {
8204
9245
  new (editor: Editor, parent?: StateNode): StateNode;
@@ -8207,6 +9248,7 @@ export declare interface TLStateNodeConstructor {
8207
9248
  children?(): TLStateNodeConstructor[];
8208
9249
  isLockable: boolean;
8209
9250
  useCoalescedEvents: boolean;
9251
+ trackPerformance: boolean;
8210
9252
  }
8211
9253
 
8212
9254
  /** @public */
@@ -8219,6 +9261,14 @@ export declare interface TLStoreBaseOptions {
8219
9261
  defaultName?: string;
8220
9262
  /** How should this store upload & resolve assets? */
8221
9263
  assets?: TLAssetStore;
9264
+ /**
9265
+ * Named theme definitions. When provided, custom color names are automatically
9266
+ * registered before the store is constructed so persisted data with those
9267
+ * colors passes validation on load.
9268
+ */
9269
+ themes?: Partial<TLThemes>;
9270
+ /** How should this store resolve users for attribution? */
9271
+ users?: TLUserStore;
8222
9272
  /** Called when the store is connected to an {@link @tldraw/editor#Editor}. */
8223
9273
  onMount?(editor: Editor): (() => void) | void;
8224
9274
  }
@@ -8238,6 +9288,7 @@ export declare type TLStoreOptions = TLStoreBaseOptions & {
8238
9288
 
8239
9289
  /** @public */
8240
9290
  export declare type TLStoreSchemaOptions = {
9291
+ assetUtils?: readonly TLAnyAssetUtilConstructor[];
8241
9292
  bindingUtils?: readonly TLAnyBindingUtilConstructor[];
8242
9293
  migrations?: readonly MigrationSequence[];
8243
9294
  records?: Record<string, CustomRecordInfo>;
@@ -8375,6 +9426,19 @@ export declare interface TLTldrawExternalContentSource {
8375
9426
  data: TLContent;
8376
9427
  }
8377
9428
 
9429
+ /**
9430
+ * Emitted after an undo or redo operation.
9431
+ * @public
9432
+ */
9433
+ export declare interface TLUndoRedoPerfEvent {
9434
+ /** Whether this was an undo or redo. */
9435
+ type: 'redo' | 'undo';
9436
+ /** Number of undo steps remaining. */
9437
+ undoDepth: number;
9438
+ /** Number of redo steps remaining. */
9439
+ redoDepth: number;
9440
+ }
9441
+
8378
9442
  /** @public */
8379
9443
  export declare interface TLUpdatePointerOptions {
8380
9444
  /** Whether to update the pointer immediately, rather than on the next tick. */
@@ -8406,12 +9470,6 @@ export declare interface TLUrlExternalContent extends TLBaseExternalContent {
8406
9470
  url: string;
8407
9471
  }
8408
9472
 
8409
- /** @public */
8410
- export declare interface TLUser {
8411
- readonly userPreferences: Signal<TLUserPreferences>;
8412
- readonly setUserPreferences: (userPreferences: TLUserPreferences) => void;
8413
- }
8414
-
8415
9473
  /**
8416
9474
  * A user of tldraw
8417
9475
  *
@@ -8512,6 +9570,9 @@ export declare function uniq<T>(array: {
8512
9570
  readonly length: number;
8513
9571
  } | null | undefined): T[];
8514
9572
 
9573
+ /** @public */
9574
+ export declare function useColorMode(): 'dark' | 'light';
9575
+
8515
9576
  /** @public */
8516
9577
  export declare function useContainer(): HTMLElement;
8517
9578
 
@@ -8550,9 +9611,6 @@ export declare function useGlobalMenuIsOpen(id: string, onChange?: (isOpen: bool
8550
9611
  /** @public */
8551
9612
  export declare function useIsCropping(shapeId: TLShapeId): boolean;
8552
9613
 
8553
- /** @public */
8554
- export declare function useIsDarkMode(): boolean;
8555
-
8556
9614
  /** @public */
8557
9615
  export declare function useIsEditing(shapeId: TLShapeId): boolean;
8558
9616
 
@@ -8570,6 +9628,10 @@ export declare function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement
8570
9628
  export declare function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>): void;
8571
9629
 
8572
9630
  /**
9631
+ * Reactive list of peer user IDs for collaborators currently shown in the UI.
9632
+ * Mirrors {@link Editor.getVisibleCollaborators} — peers fade out as they
9633
+ * transition to idle/inactive, without requiring a manual re-render.
9634
+ *
8573
9635
  * @returns The list of peer UserIDs
8574
9636
  * @public
8575
9637
  */
@@ -8590,11 +9652,11 @@ export declare function usePresence(userId: string): null | TLInstancePresence;
8590
9652
  /** @public */
8591
9653
  export declare class UserPreferencesManager {
8592
9654
  private readonly user;
8593
- private readonly inferDarkMode;
9655
+ private readonly colorScheme;
8594
9656
  systemColorScheme: Atom<"dark" | "light", unknown>;
8595
9657
  disposables: Set<() => void>;
8596
9658
  dispose(): void;
8597
- constructor(user: TLUser, inferDarkMode: boolean);
9659
+ constructor(user: TLCurrentUser, colorScheme: 'dark' | 'light' | 'system');
8598
9660
  updateUserPreferences(userPreferences: Partial<TLUserPreferences>): void;
8599
9661
  getUserPreferences(): {
8600
9662
  animationSpeed: number;
@@ -8635,13 +9697,6 @@ export declare class UserPreferencesManager {
8635
9697
  /** @public */
8636
9698
  export declare const userTypeValidator: T.Validator<TLUserPreferences>;
8637
9699
 
8638
- /** @public */
8639
- export declare function useSelectionEvents(handle: TLSelectionHandle): {
8640
- onPointerDown: PointerEventHandler<Element>;
8641
- onPointerMove: (e: PointerEvent_2<Element>) => void;
8642
- onPointerUp: PointerEventHandler<Element>;
8643
- };
8644
-
8645
9700
  /* Excluded from this release type: useShallowArrayIdentity */
8646
9701
 
8647
9702
  /* Excluded from this release type: useShallowObjectIdentity */
@@ -8665,10 +9720,10 @@ export declare function useSvgExportContext(): null | SvgExportContext;
8665
9720
  /**
8666
9721
  * @public
8667
9722
  */
8668
- export declare function useTldrawUser(opts: {
9723
+ export declare function useTldrawCurrentUser(opts: {
8669
9724
  setUserPreferences?: (userPreferences: TLUserPreferences) => void;
8670
9725
  userPreferences?: Signal<TLUserPreferences> | TLUserPreferences;
8671
- }): TLUser;
9726
+ }): TLCurrentUser;
8672
9727
 
8673
9728
  /** @public */
8674
9729
  export declare function useTLSchemaFromUtils(opts: TLStoreSchemaOptions): StoreSchema<TLRecord, TLStoreProps>;