@tldraw/editor 4.6.0-next.b3995657a659 → 4.6.0-next.c198a1009190

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 (401) hide show
  1. package/dist-cjs/index.d.ts +1192 -297
  2. package/dist-cjs/index.js +29 -25
  3. package/dist-cjs/index.js.map +3 -3
  4. package/dist-cjs/lib/TldrawEditor.js +58 -12
  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/config/createTLStore.js +7 -0
  13. package/dist-cjs/lib/config/createTLStore.js.map +2 -2
  14. package/dist-cjs/lib/{components/default-components/DefaultShapeIndicatorErrorFallback.js → config/defaultAssets.js} +17 -9
  15. package/dist-cjs/lib/config/defaultAssets.js.map +7 -0
  16. package/dist-cjs/lib/editor/Editor.js +357 -38
  17. package/dist-cjs/lib/editor/Editor.js.map +2 -2
  18. package/dist-cjs/lib/editor/assets/AssetUtil.js +67 -0
  19. package/dist-cjs/lib/editor/assets/AssetUtil.js.map +7 -0
  20. package/dist-cjs/lib/editor/bindings/BindingUtil.js +1 -0
  21. package/dist-cjs/lib/editor/bindings/BindingUtil.js.map +1 -1
  22. package/dist-cjs/lib/editor/managers/ClickManager/ClickManager.js +1 -0
  23. package/dist-cjs/lib/editor/managers/ClickManager/ClickManager.js.map +1 -1
  24. package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js +98 -0
  25. package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js.map +7 -0
  26. package/dist-cjs/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.js +1 -0
  27. package/dist-cjs/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.js.map +1 -1
  28. package/dist-cjs/lib/editor/managers/FocusManager/FocusManager.js +1 -0
  29. package/dist-cjs/lib/editor/managers/FocusManager/FocusManager.js.map +1 -1
  30. package/dist-cjs/lib/editor/managers/FontManager/FontManager.js +2 -0
  31. package/dist-cjs/lib/editor/managers/FontManager/FontManager.js.map +2 -2
  32. package/dist-cjs/lib/editor/managers/HistoryManager/HistoryManager.js +2 -0
  33. package/dist-cjs/lib/editor/managers/HistoryManager/HistoryManager.js.map +1 -1
  34. package/dist-cjs/lib/editor/managers/InputsManager/InputsManager.js +12 -0
  35. package/dist-cjs/lib/editor/managers/InputsManager/InputsManager.js.map +2 -2
  36. package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.js +80 -0
  37. package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.js.map +7 -0
  38. package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceManager.js +466 -0
  39. package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceManager.js.map +7 -0
  40. package/dist-cjs/lib/{components/default-components/DefaultHandles.js → editor/managers/PerformanceManager/perf-types.js} +3 -14
  41. package/dist-cjs/lib/editor/managers/PerformanceManager/perf-types.js.map +7 -0
  42. package/dist-cjs/lib/editor/managers/ScribbleManager/ScribbleManager.js +1 -0
  43. package/dist-cjs/lib/editor/managers/ScribbleManager/ScribbleManager.js.map +1 -1
  44. package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js +1 -0
  45. package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js.map +1 -1
  46. package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js +1 -0
  47. package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js.map +1 -1
  48. package/dist-cjs/lib/editor/managers/SnapManager/SnapManager.js +2 -1
  49. package/dist-cjs/lib/editor/managers/SnapManager/SnapManager.js.map +2 -2
  50. package/dist-cjs/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.js +1 -0
  51. package/dist-cjs/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.js.map +1 -1
  52. package/dist-cjs/lib/editor/managers/TextManager/TextManager.js +1 -0
  53. package/dist-cjs/lib/editor/managers/TextManager/TextManager.js.map +1 -1
  54. package/dist-cjs/lib/editor/managers/ThemeManager/ThemeManager.js +107 -0
  55. package/dist-cjs/lib/editor/managers/ThemeManager/ThemeManager.js.map +7 -0
  56. package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js +600 -0
  57. package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js.map +7 -0
  58. package/dist-cjs/lib/editor/managers/TickManager/TickManager.js +1 -0
  59. package/dist-cjs/lib/editor/managers/TickManager/TickManager.js.map +1 -1
  60. package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js +8 -4
  61. package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js.map +2 -2
  62. package/dist-cjs/lib/editor/overlays/OverlayManager.js +154 -0
  63. package/dist-cjs/lib/editor/overlays/OverlayManager.js.map +7 -0
  64. package/dist-cjs/lib/editor/overlays/OverlayUtil.js +92 -0
  65. package/dist-cjs/lib/editor/overlays/OverlayUtil.js.map +7 -0
  66. package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js +161 -0
  67. package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js.map +7 -0
  68. package/dist-cjs/lib/editor/overlays/getOverlayDisplayValues.js +39 -0
  69. package/dist-cjs/lib/editor/overlays/getOverlayDisplayValues.js.map +7 -0
  70. package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js +79 -0
  71. package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js.map +7 -0
  72. package/dist-cjs/lib/editor/shapes/ShapeUtil.js +43 -21
  73. package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
  74. package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js +33 -3
  75. package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js.map +2 -2
  76. package/dist-cjs/lib/editor/shapes/shared/getPerfectDashProps.js +6 -0
  77. package/dist-cjs/lib/editor/shapes/shared/getPerfectDashProps.js.map +2 -2
  78. package/dist-cjs/lib/editor/tools/StateNode.js +15 -17
  79. package/dist-cjs/lib/editor/tools/StateNode.js.map +2 -2
  80. package/dist-cjs/lib/editor/types/SvgExportContext.js.map +2 -2
  81. package/dist-cjs/lib/editor/types/event-types.js.map +2 -2
  82. package/dist-cjs/lib/editor/types/external-content.js.map +1 -1
  83. package/dist-cjs/lib/exports/ExportDelay.js +1 -0
  84. package/dist-cjs/lib/exports/ExportDelay.js.map +1 -1
  85. package/dist-cjs/lib/exports/StyleEmbedder.js +1 -0
  86. package/dist-cjs/lib/exports/StyleEmbedder.js.map +1 -1
  87. package/dist-cjs/lib/exports/fetchCache.js +1 -1
  88. package/dist-cjs/lib/exports/fetchCache.js.map +2 -2
  89. package/dist-cjs/lib/exports/getSvgJsx.js +14 -8
  90. package/dist-cjs/lib/exports/getSvgJsx.js.map +2 -2
  91. package/dist-cjs/lib/globals/environment.js +18 -1
  92. package/dist-cjs/lib/globals/environment.js.map +2 -2
  93. package/dist-cjs/lib/hooks/EditorComponentsContext.js.map +2 -2
  94. package/dist-cjs/lib/hooks/useCanvasEvents.js +25 -4
  95. package/dist-cjs/lib/hooks/useCanvasEvents.js.map +2 -2
  96. package/dist-cjs/lib/hooks/{useIsDarkMode.js → useColorMode.js} +14 -10
  97. package/dist-cjs/lib/hooks/useColorMode.js.map +7 -0
  98. package/dist-cjs/lib/hooks/useCursor.js +3 -7
  99. package/dist-cjs/lib/hooks/useCursor.js.map +2 -2
  100. package/dist-cjs/lib/hooks/useDarkMode.js +4 -4
  101. package/dist-cjs/lib/hooks/useDarkMode.js.map +2 -2
  102. package/dist-cjs/lib/hooks/useEditorComponents.js +0 -28
  103. package/dist-cjs/lib/hooks/useEditorComponents.js.map +2 -2
  104. package/dist-cjs/lib/hooks/usePeerIds.js +1 -36
  105. package/dist-cjs/lib/hooks/usePeerIds.js.map +2 -2
  106. package/dist-cjs/lib/hooks/useShapeCulling.js +2 -1
  107. package/dist-cjs/lib/hooks/useShapeCulling.js.map +2 -2
  108. package/dist-cjs/lib/options.js +1 -0
  109. package/dist-cjs/lib/options.js.map +2 -2
  110. package/dist-cjs/lib/primitives/Vec.js +3 -0
  111. package/dist-cjs/lib/primitives/Vec.js.map +1 -1
  112. package/dist-cjs/lib/primitives/geometry/Circle2d.js +1 -0
  113. package/dist-cjs/lib/primitives/geometry/Circle2d.js.map +1 -1
  114. package/dist-cjs/lib/primitives/geometry/Ellipse2d.js +1 -0
  115. package/dist-cjs/lib/primitives/geometry/Ellipse2d.js.map +1 -1
  116. package/dist-cjs/lib/primitives/geometry/Geometry2d.js +2 -0
  117. package/dist-cjs/lib/primitives/geometry/Geometry2d.js.map +1 -1
  118. package/dist-cjs/lib/primitives/geometry/Stadium2d.js +1 -0
  119. package/dist-cjs/lib/primitives/geometry/Stadium2d.js.map +1 -1
  120. package/dist-cjs/lib/utils/EditorAtom.js +2 -0
  121. package/dist-cjs/lib/utils/EditorAtom.js.map +1 -1
  122. package/dist-cjs/lib/utils/reparenting.js +22 -8
  123. package/dist-cjs/lib/utils/reparenting.js.map +2 -2
  124. package/dist-cjs/lib/utils/richText.js.map +2 -2
  125. package/dist-cjs/lib/utils/runtime.js +2 -1
  126. package/dist-cjs/lib/utils/runtime.js.map +2 -2
  127. package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js +5 -0
  128. package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js.map +2 -2
  129. package/dist-cjs/lib/utils/sync/hardReset.js +0 -8
  130. package/dist-cjs/lib/utils/sync/hardReset.js.map +2 -2
  131. package/dist-cjs/version.js +3 -3
  132. package/dist-cjs/version.js.map +1 -1
  133. package/dist-esm/index.d.mts +1192 -297
  134. package/dist-esm/index.mjs +37 -46
  135. package/dist-esm/index.mjs.map +2 -2
  136. package/dist-esm/lib/TldrawEditor.mjs +61 -12
  137. package/dist-esm/lib/TldrawEditor.mjs.map +3 -3
  138. package/dist-esm/lib/components/MenuClickCapture.mjs +100 -39
  139. package/dist-esm/lib/components/MenuClickCapture.mjs.map +2 -2
  140. package/dist-esm/lib/components/default-components/CanvasOverlays.mjs +160 -0
  141. package/dist-esm/lib/components/default-components/CanvasOverlays.mjs.map +7 -0
  142. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +47 -249
  143. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +3 -3
  144. package/dist-esm/lib/config/createTLStore.mjs +10 -1
  145. package/dist-esm/lib/config/createTLStore.mjs.map +2 -2
  146. package/dist-esm/lib/config/defaultAssets.mjs +16 -0
  147. package/dist-esm/lib/config/defaultAssets.mjs.map +7 -0
  148. package/dist-esm/lib/editor/Editor.mjs +357 -39
  149. package/dist-esm/lib/editor/Editor.mjs.map +2 -2
  150. package/dist-esm/lib/editor/assets/AssetUtil.mjs +47 -0
  151. package/dist-esm/lib/editor/assets/AssetUtil.mjs.map +7 -0
  152. package/dist-esm/lib/editor/bindings/BindingUtil.mjs +1 -0
  153. package/dist-esm/lib/editor/bindings/BindingUtil.mjs.map +1 -1
  154. package/dist-esm/lib/editor/managers/ClickManager/ClickManager.mjs +1 -0
  155. package/dist-esm/lib/editor/managers/ClickManager/ClickManager.mjs.map +1 -1
  156. package/dist-esm/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.mjs +83 -0
  157. package/dist-esm/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.mjs.map +7 -0
  158. package/dist-esm/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.mjs +1 -0
  159. package/dist-esm/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.mjs.map +1 -1
  160. package/dist-esm/lib/editor/managers/FocusManager/FocusManager.mjs +1 -0
  161. package/dist-esm/lib/editor/managers/FocusManager/FocusManager.mjs.map +1 -1
  162. package/dist-esm/lib/editor/managers/FontManager/FontManager.mjs +2 -0
  163. package/dist-esm/lib/editor/managers/FontManager/FontManager.mjs.map +2 -2
  164. package/dist-esm/lib/editor/managers/HistoryManager/HistoryManager.mjs +2 -0
  165. package/dist-esm/lib/editor/managers/HistoryManager/HistoryManager.mjs.map +1 -1
  166. package/dist-esm/lib/editor/managers/InputsManager/InputsManager.mjs +12 -0
  167. package/dist-esm/lib/editor/managers/InputsManager/InputsManager.mjs.map +2 -2
  168. package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.mjs +60 -0
  169. package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.mjs.map +7 -0
  170. package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceManager.mjs +438 -0
  171. package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceManager.mjs.map +7 -0
  172. package/dist-esm/lib/editor/managers/PerformanceManager/perf-types.mjs +1 -0
  173. package/dist-esm/lib/editor/managers/PerformanceManager/perf-types.mjs.map +7 -0
  174. package/dist-esm/lib/editor/managers/ScribbleManager/ScribbleManager.mjs +1 -0
  175. package/dist-esm/lib/editor/managers/ScribbleManager/ScribbleManager.mjs.map +1 -1
  176. package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs +1 -0
  177. package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs.map +1 -1
  178. package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs +1 -0
  179. package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs.map +1 -1
  180. package/dist-esm/lib/editor/managers/SnapManager/SnapManager.mjs +2 -1
  181. package/dist-esm/lib/editor/managers/SnapManager/SnapManager.mjs.map +2 -2
  182. package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs +1 -0
  183. package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs.map +1 -1
  184. package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs +1 -0
  185. package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs.map +1 -1
  186. package/dist-esm/lib/editor/managers/ThemeManager/ThemeManager.mjs +89 -0
  187. package/dist-esm/lib/editor/managers/ThemeManager/ThemeManager.mjs.map +7 -0
  188. package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs +582 -0
  189. package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs.map +7 -0
  190. package/dist-esm/lib/editor/managers/TickManager/TickManager.mjs +1 -0
  191. package/dist-esm/lib/editor/managers/TickManager/TickManager.mjs.map +1 -1
  192. package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs +8 -4
  193. package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs.map +2 -2
  194. package/dist-esm/lib/editor/overlays/OverlayManager.mjs +136 -0
  195. package/dist-esm/lib/editor/overlays/OverlayManager.mjs.map +7 -0
  196. package/dist-esm/lib/editor/overlays/OverlayUtil.mjs +72 -0
  197. package/dist-esm/lib/editor/overlays/OverlayUtil.mjs.map +7 -0
  198. package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs +141 -0
  199. package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs.map +7 -0
  200. package/dist-esm/lib/editor/overlays/getOverlayDisplayValues.mjs +19 -0
  201. package/dist-esm/lib/editor/overlays/getOverlayDisplayValues.mjs.map +7 -0
  202. package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs +59 -0
  203. package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs.map +7 -0
  204. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +43 -21
  205. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
  206. package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs +33 -3
  207. package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs.map +2 -2
  208. package/dist-esm/lib/editor/shapes/shared/getPerfectDashProps.mjs +6 -0
  209. package/dist-esm/lib/editor/shapes/shared/getPerfectDashProps.mjs.map +2 -2
  210. package/dist-esm/lib/editor/tools/StateNode.mjs +15 -17
  211. package/dist-esm/lib/editor/tools/StateNode.mjs.map +2 -2
  212. package/dist-esm/lib/editor/types/SvgExportContext.mjs.map +2 -2
  213. package/dist-esm/lib/editor/types/event-types.mjs.map +2 -2
  214. package/dist-esm/lib/exports/ExportDelay.mjs +1 -0
  215. package/dist-esm/lib/exports/ExportDelay.mjs.map +1 -1
  216. package/dist-esm/lib/exports/StyleEmbedder.mjs +1 -0
  217. package/dist-esm/lib/exports/StyleEmbedder.mjs.map +1 -1
  218. package/dist-esm/lib/exports/fetchCache.mjs +2 -2
  219. package/dist-esm/lib/exports/fetchCache.mjs.map +2 -2
  220. package/dist-esm/lib/exports/getSvgJsx.mjs +14 -11
  221. package/dist-esm/lib/exports/getSvgJsx.mjs.map +2 -2
  222. package/dist-esm/lib/globals/environment.mjs +18 -1
  223. package/dist-esm/lib/globals/environment.mjs.map +2 -2
  224. package/dist-esm/lib/hooks/EditorComponentsContext.mjs.map +2 -2
  225. package/dist-esm/lib/hooks/useCanvasEvents.mjs +25 -4
  226. package/dist-esm/lib/hooks/useCanvasEvents.mjs.map +2 -2
  227. package/dist-esm/lib/hooks/useColorMode.mjs +19 -0
  228. package/dist-esm/lib/hooks/useColorMode.mjs.map +7 -0
  229. package/dist-esm/lib/hooks/useCursor.mjs +3 -7
  230. package/dist-esm/lib/hooks/useCursor.mjs.map +2 -2
  231. package/dist-esm/lib/hooks/useDarkMode.mjs +4 -4
  232. package/dist-esm/lib/hooks/useDarkMode.mjs.map +2 -2
  233. package/dist-esm/lib/hooks/useEditorComponents.mjs +0 -28
  234. package/dist-esm/lib/hooks/useEditorComponents.mjs.map +2 -2
  235. package/dist-esm/lib/hooks/usePeerIds.mjs +2 -40
  236. package/dist-esm/lib/hooks/usePeerIds.mjs.map +2 -2
  237. package/dist-esm/lib/hooks/useShapeCulling.mjs +2 -1
  238. package/dist-esm/lib/hooks/useShapeCulling.mjs.map +2 -2
  239. package/dist-esm/lib/options.mjs +1 -0
  240. package/dist-esm/lib/options.mjs.map +2 -2
  241. package/dist-esm/lib/primitives/Vec.mjs +3 -0
  242. package/dist-esm/lib/primitives/Vec.mjs.map +1 -1
  243. package/dist-esm/lib/primitives/geometry/Circle2d.mjs +1 -0
  244. package/dist-esm/lib/primitives/geometry/Circle2d.mjs.map +1 -1
  245. package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs +1 -0
  246. package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs.map +1 -1
  247. package/dist-esm/lib/primitives/geometry/Geometry2d.mjs +2 -0
  248. package/dist-esm/lib/primitives/geometry/Geometry2d.mjs.map +1 -1
  249. package/dist-esm/lib/primitives/geometry/Stadium2d.mjs +1 -0
  250. package/dist-esm/lib/primitives/geometry/Stadium2d.mjs.map +1 -1
  251. package/dist-esm/lib/utils/EditorAtom.mjs +2 -0
  252. package/dist-esm/lib/utils/EditorAtom.mjs.map +1 -1
  253. package/dist-esm/lib/utils/reparenting.mjs +22 -8
  254. package/dist-esm/lib/utils/reparenting.mjs.map +2 -2
  255. package/dist-esm/lib/utils/richText.mjs.map +2 -2
  256. package/dist-esm/lib/utils/runtime.mjs +2 -1
  257. package/dist-esm/lib/utils/runtime.mjs.map +2 -2
  258. package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs +5 -0
  259. package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs.map +2 -2
  260. package/dist-esm/lib/utils/sync/hardReset.mjs +0 -8
  261. package/dist-esm/lib/utils/sync/hardReset.mjs.map +2 -2
  262. package/dist-esm/version.mjs +3 -3
  263. package/dist-esm/version.mjs.map +1 -1
  264. package/editor.css +4 -276
  265. package/package.json +7 -7
  266. package/src/index.ts +41 -45
  267. package/src/lib/TldrawEditor.tsx +99 -13
  268. package/src/lib/components/MenuClickCapture.tsx +129 -49
  269. package/src/lib/components/default-components/CanvasOverlays.tsx +208 -0
  270. package/src/lib/components/default-components/DefaultCanvas.tsx +51 -322
  271. package/src/lib/config/createTLStore.ts +22 -1
  272. package/src/lib/config/defaultAssets.ts +19 -0
  273. package/src/lib/editor/Editor.test.ts +3 -1
  274. package/src/lib/editor/Editor.ts +467 -64
  275. package/src/lib/editor/assets/AssetUtil.ts +85 -0
  276. package/src/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.ts +98 -0
  277. package/src/lib/editor/managers/FontManager/FontManager.test.ts +9 -2
  278. package/src/lib/editor/managers/FontManager/FontManager.ts +1 -67
  279. package/src/lib/editor/managers/InputsManager/InputsManager.ts +12 -0
  280. package/src/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.ts +82 -0
  281. package/src/lib/editor/managers/PerformanceManager/PerformanceManager.test.ts +522 -0
  282. package/src/lib/editor/managers/PerformanceManager/PerformanceManager.ts +583 -0
  283. package/src/lib/editor/managers/PerformanceManager/perf-types.ts +196 -0
  284. package/src/lib/editor/managers/SnapManager/SnapManager.test.ts +13 -2
  285. package/src/lib/editor/managers/SnapManager/SnapManager.ts +1 -1
  286. package/src/lib/editor/managers/ThemeManager/ThemeManager.ts +116 -0
  287. package/src/lib/editor/managers/ThemeManager/defaultThemes.ts +619 -0
  288. package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.test.ts +23 -29
  289. package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.ts +5 -3
  290. package/src/lib/editor/overlays/OverlayManager.ts +183 -0
  291. package/src/lib/editor/overlays/OverlayUtil.ts +143 -0
  292. package/src/lib/editor/overlays/ShapeIndicatorOverlayUtil.ts +216 -0
  293. package/src/lib/editor/overlays/getOverlayDisplayValues.ts +51 -0
  294. package/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx +128 -0
  295. package/src/lib/editor/shapes/ShapeUtil.ts +73 -29
  296. package/src/lib/editor/shapes/group/GroupShapeUtil.tsx +41 -4
  297. package/src/lib/editor/shapes/shared/getPerfectDashProps.ts +7 -0
  298. package/src/lib/editor/tools/StateNode.ts +16 -18
  299. package/src/lib/editor/types/SvgExportContext.tsx +5 -0
  300. package/src/lib/editor/types/event-types.ts +2 -0
  301. package/src/lib/editor/types/external-content.ts +1 -0
  302. package/src/lib/exports/fetchCache.ts +2 -4
  303. package/src/lib/exports/getSvgJsx.test.ts +3 -1
  304. package/src/lib/exports/getSvgJsx.tsx +23 -16
  305. package/src/lib/globals/environment.ts +18 -0
  306. package/src/lib/hooks/EditorComponentsContext.tsx +0 -27
  307. package/src/lib/hooks/useCanvasEvents.ts +45 -3
  308. package/src/lib/hooks/{useIsDarkMode.ts → useColorMode.ts} +9 -5
  309. package/src/lib/hooks/useCursor.ts +3 -7
  310. package/src/lib/hooks/useDarkMode.ts +4 -4
  311. package/src/lib/hooks/useEditorComponents.tsx +0 -28
  312. package/src/lib/hooks/usePeerIds.ts +6 -55
  313. package/src/lib/hooks/useShapeCulling.tsx +3 -1
  314. package/src/lib/options.ts +7 -0
  315. package/src/lib/utils/reparenting.ts +28 -11
  316. package/src/lib/utils/richText.ts +1 -1
  317. package/src/lib/utils/runtime.ts +3 -1
  318. package/src/lib/utils/sync/TLLocalSyncClient.ts +3 -0
  319. package/src/lib/utils/sync/hardReset.ts +0 -8
  320. package/src/version.ts +3 -3
  321. package/dist-cjs/lib/components/GeometryDebuggingView.js +0 -115
  322. package/dist-cjs/lib/components/GeometryDebuggingView.js.map +0 -7
  323. package/dist-cjs/lib/components/LiveCollaborators.js +0 -151
  324. package/dist-cjs/lib/components/LiveCollaborators.js.map +0 -7
  325. package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js +0 -227
  326. package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js.map +0 -7
  327. package/dist-cjs/lib/components/default-components/DefaultBrush.js +0 -38
  328. package/dist-cjs/lib/components/default-components/DefaultBrush.js.map +0 -7
  329. package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js +0 -71
  330. package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js.map +0 -7
  331. package/dist-cjs/lib/components/default-components/DefaultCursor.js +0 -59
  332. package/dist-cjs/lib/components/default-components/DefaultCursor.js.map +0 -7
  333. package/dist-cjs/lib/components/default-components/DefaultHandle.js +0 -56
  334. package/dist-cjs/lib/components/default-components/DefaultHandle.js.map +0 -7
  335. package/dist-cjs/lib/components/default-components/DefaultHandles.js.map +0 -7
  336. package/dist-cjs/lib/components/default-components/DefaultScribble.js +0 -51
  337. package/dist-cjs/lib/components/default-components/DefaultScribble.js.map +0 -7
  338. package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js +0 -69
  339. package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js.map +0 -7
  340. package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js +0 -107
  341. package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js.map +0 -7
  342. package/dist-cjs/lib/components/default-components/DefaultShapeIndicatorErrorFallback.js.map +0 -7
  343. package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js +0 -101
  344. package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js.map +0 -7
  345. package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js +0 -170
  346. package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js.map +0 -7
  347. package/dist-cjs/lib/hooks/useHandleEvents.js +0 -100
  348. package/dist-cjs/lib/hooks/useHandleEvents.js.map +0 -7
  349. package/dist-cjs/lib/hooks/useIsDarkMode.js.map +0 -7
  350. package/dist-cjs/lib/hooks/useSelectionEvents.js +0 -98
  351. package/dist-cjs/lib/hooks/useSelectionEvents.js.map +0 -7
  352. package/dist-esm/lib/components/GeometryDebuggingView.mjs +0 -95
  353. package/dist-esm/lib/components/GeometryDebuggingView.mjs.map +0 -7
  354. package/dist-esm/lib/components/LiveCollaborators.mjs +0 -134
  355. package/dist-esm/lib/components/LiveCollaborators.mjs.map +0 -7
  356. package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs +0 -207
  357. package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs.map +0 -7
  358. package/dist-esm/lib/components/default-components/DefaultBrush.mjs +0 -18
  359. package/dist-esm/lib/components/default-components/DefaultBrush.mjs.map +0 -7
  360. package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs +0 -41
  361. package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs.map +0 -7
  362. package/dist-esm/lib/components/default-components/DefaultCursor.mjs +0 -29
  363. package/dist-esm/lib/components/default-components/DefaultCursor.mjs.map +0 -7
  364. package/dist-esm/lib/components/default-components/DefaultHandle.mjs +0 -26
  365. package/dist-esm/lib/components/default-components/DefaultHandle.mjs.map +0 -7
  366. package/dist-esm/lib/components/default-components/DefaultHandles.mjs +0 -8
  367. package/dist-esm/lib/components/default-components/DefaultHandles.mjs.map +0 -7
  368. package/dist-esm/lib/components/default-components/DefaultScribble.mjs +0 -21
  369. package/dist-esm/lib/components/default-components/DefaultScribble.mjs.map +0 -7
  370. package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs +0 -39
  371. package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs.map +0 -7
  372. package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs +0 -77
  373. package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs.map +0 -7
  374. package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs +0 -8
  375. package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs.map +0 -7
  376. package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs +0 -81
  377. package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs.map +0 -7
  378. package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs +0 -142
  379. package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs.map +0 -7
  380. package/dist-esm/lib/hooks/useHandleEvents.mjs +0 -70
  381. package/dist-esm/lib/hooks/useHandleEvents.mjs.map +0 -7
  382. package/dist-esm/lib/hooks/useIsDarkMode.mjs +0 -15
  383. package/dist-esm/lib/hooks/useIsDarkMode.mjs.map +0 -7
  384. package/dist-esm/lib/hooks/useSelectionEvents.mjs +0 -78
  385. package/dist-esm/lib/hooks/useSelectionEvents.mjs.map +0 -7
  386. package/src/lib/components/GeometryDebuggingView.tsx +0 -108
  387. package/src/lib/components/LiveCollaborators.tsx +0 -174
  388. package/src/lib/components/default-components/CanvasShapeIndicators.tsx +0 -289
  389. package/src/lib/components/default-components/DefaultBrush.tsx +0 -35
  390. package/src/lib/components/default-components/DefaultCollaboratorHint.tsx +0 -52
  391. package/src/lib/components/default-components/DefaultCursor.tsx +0 -59
  392. package/src/lib/components/default-components/DefaultHandle.tsx +0 -42
  393. package/src/lib/components/default-components/DefaultHandles.tsx +0 -15
  394. package/src/lib/components/default-components/DefaultScribble.tsx +0 -31
  395. package/src/lib/components/default-components/DefaultSelectionForeground.tsx +0 -50
  396. package/src/lib/components/default-components/DefaultShapeIndicator.tsx +0 -104
  397. package/src/lib/components/default-components/DefaultShapeIndicatorErrorFallback.tsx +0 -9
  398. package/src/lib/components/default-components/DefaultShapeIndicators.tsx +0 -116
  399. package/src/lib/components/default-components/DefaultSnapIndictor.tsx +0 -174
  400. package/src/lib/hooks/useHandleEvents.ts +0 -88
  401. package/src/lib/hooks/useSelectionEvents.ts +0 -97
@@ -19,11 +19,8 @@ import { JsonObject } from '@tldraw/utils';
19
19
  import { JSX } from 'react/jsx-runtime';
20
20
  import { LegacyMigrations } from '@tldraw/store';
21
21
  import { MigrationSequence } from '@tldraw/store';
22
- import { NamedExoticComponent } from 'react';
23
22
  import { Node as Node_2 } from '@tiptap/pm/model';
24
23
  import { PerformanceTracker } from '@tldraw/utils';
25
- import { PointerEvent as PointerEvent_2 } from 'react';
26
- import { PointerEventHandler } from 'react';
27
24
  import * as React_2 from 'react';
28
25
  import { default as React_3 } from 'react';
29
26
  import { ReactElement } from 'react';
@@ -57,9 +54,12 @@ import { TLCamera } from '@tldraw/tlschema';
57
54
  import { TLCreateShapePartial } from '@tldraw/tlschema';
58
55
  import { TLCursor } from '@tldraw/tlschema';
59
56
  import { TLCursorType } from '@tldraw/tlschema';
57
+ import { TLDefaultColor } from '@tldraw/tlschema';
58
+ import { TLDefaultColorStyle } from '@tldraw/tlschema';
60
59
  import { TLDefaultDashStyle } from '@tldraw/tlschema';
61
60
  import { TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema';
62
61
  import { TLDocument } from '@tldraw/tlschema';
62
+ import { TLFontFace } from '@tldraw/tlschema';
63
63
  import { TLGroupShape } from '@tldraw/tlschema';
64
64
  import { TLHandle } from '@tldraw/tlschema';
65
65
  import { TLImageAsset } from '@tldraw/tlschema';
@@ -81,6 +81,11 @@ import { TLStore } from '@tldraw/tlschema';
81
81
  import { TLStoreProps } from '@tldraw/tlschema';
82
82
  import { TLStoreSchema } from '@tldraw/tlschema';
83
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';
84
89
  import { TLUnknownBinding } from '@tldraw/tlschema';
85
90
  import { TLUnknownShape } from '@tldraw/tlschema';
86
91
  import { TLUser } from '@tldraw/tlschema';
@@ -147,6 +152,51 @@ export declare class Arc2d extends Geometry2d {
147
152
  */
148
153
  export declare function areAnglesCompatible(a: number, b: number): boolean;
149
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
+
150
200
  /** @public */
151
201
  export declare function average(A: VecLike, B: VecLike): string;
152
202
 
@@ -167,6 +217,58 @@ export declare abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> ext
167
217
  getInterpolatedProps(startShape: Shape, endShape: Shape, t: number): Shape['props'];
168
218
  }
169
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
+
170
272
  /** @public */
171
273
  export declare interface BatchMeasurementRequest {
172
274
  html: string;
@@ -666,6 +768,49 @@ export declare class ClickManager {
666
768
  */
667
769
  export declare function clockwiseAngleDist(a0: number, a1: number): number;
668
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
+
669
814
  /**
670
815
  * @public
671
816
  * @react
@@ -743,7 +888,7 @@ export declare function createTLSchemaFromUtils(opts: TLStoreSchemaOptions): Sto
743
888
  *
744
889
  * @public
745
890
  */
746
- export declare function createTLStore({ initialData, defaultName, id, assets, users, onMount, collaboration, ...rest }?: TLStoreOptions): TLStore;
891
+ export declare function createTLStore({ initialData, defaultName, id, assets, users, onMount, collaboration, themes, ...rest }?: TLStoreOptions): TLStore;
747
892
 
748
893
  /** @public */
749
894
  export declare class CubicBezier2d extends Polyline2d {
@@ -818,54 +963,31 @@ export declare interface DebugFlagDefaults<T> {
818
963
 
819
964
  /* Excluded from this release type: DEFAULT_CAMERA_OPTIONS */
820
965
 
821
- /** @public @react */
822
- 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;
823
972
 
824
973
  /** @public @react */
825
- export declare const DefaultBrush: ({ brush, color, opacity, className }: TLBrushProps) => JSX.Element;
974
+ export declare function DefaultBackground(): JSX.Element;
826
975
 
827
976
  /** @public @react */
828
977
  export declare function DefaultCanvas({ className }: TLCanvasComponentProps): JSX.Element;
829
978
 
830
- /** @public @react */
831
- export declare function DefaultCollaboratorHint({ className, zoom, point, color, viewport, opacity }: TLCollaboratorHintProps): JSX.Element;
832
-
833
- /** @public @react */
834
- export declare const DefaultCursor: NamedExoticComponent<TLCursorProps>;
835
-
836
979
  /** @public @react */
837
980
  export declare const DefaultErrorFallback: TLErrorFallbackComponent;
838
981
 
839
982
  /** @public @react */
840
983
  export declare function DefaultGrid({ x, y, z, size }: TLGridProps): JSX.Element;
841
984
 
842
- /** @public @react */
843
- export declare function DefaultHandle({ handle, isCoarse, className, zoom }: TLHandleProps): JSX.Element;
844
-
845
- /** @public @react */
846
- export declare const DefaultHandles: ({ children }: TLHandlesProps) => JSX.Element;
847
-
848
- /** @public @react */
849
- export declare function DefaultScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps): JSX.Element | null;
850
-
851
985
  /** @public @react */
852
986
  export declare function DefaultSelectionBackground({ bounds, rotation }: TLSelectionBackgroundProps): JSX.Element;
853
987
 
854
- /** @public @react */
855
- export declare function DefaultSelectionForeground({ bounds, rotation }: TLSelectionForegroundProps): JSX.Element;
856
-
857
- /** @public @react */
858
- export declare const DefaultShapeIndicator: NamedExoticComponent<TLShapeIndicatorProps>;
859
-
860
- /** @public @react */
861
- export declare const DefaultShapeIndicators: NamedExoticComponent<TLShapeIndicatorsProps>;
862
-
863
988
  /** @public @react */
864
989
  export declare const DefaultShapeWrapper: ForwardRefExoticComponent<TLShapeWrapperProps & RefAttributes<HTMLDivElement>>;
865
990
 
866
- /** @public @react */
867
- export declare function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps): JSX.Element;
868
-
869
991
  /** @public @react */
870
992
  export declare function DefaultSpinner(props: React.SVGProps<SVGSVGElement>): JSX.Element;
871
993
 
@@ -936,6 +1058,7 @@ export declare const defaultTldrawOptions: {
936
1058
  readonly onBeforePasteFromClipboard: undefined;
937
1059
  readonly onClipboardPasteRaw: undefined;
938
1060
  readonly quickZoomPreservesScreenBounds: true;
1061
+ readonly rightClickPanning: true;
939
1062
  readonly snapThreshold: 8;
940
1063
  readonly spacebarPanning: true;
941
1064
  readonly temporaryAssetPreviewLifetimeMs: 180000;
@@ -1043,7 +1166,7 @@ export declare class EdgeScrollManager {
1043
1166
  /** @public */
1044
1167
  export declare class Editor extends EventEmitter<TLEventMap> {
1045
1168
  readonly id: string;
1046
- 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);
1047
1170
  private readonly _getShapeVisibility?;
1048
1171
  private getIsShapeHiddenCache;
1049
1172
  isShapeHidden(shapeOrId: TLShape | TLShapeId): boolean;
@@ -1106,7 +1229,13 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1106
1229
  * @public
1107
1230
  */
1108
1231
  readonly snaps: SnapManager;
1109
- 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 */
1110
1239
  /**
1111
1240
  * A manager for the any asynchronous events and making sure they're
1112
1241
  * cleaned up upon disposal.
@@ -1119,12 +1248,19 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1119
1248
  setInterval: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number;
1120
1249
  setTimeout: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number;
1121
1250
  };
1251
+ /**
1252
+ * A manager for remote peer collaborators connected to this editor.
1253
+ *
1254
+ * @public
1255
+ */
1256
+ readonly collaborators: CollaboratorsManager;
1122
1257
  /**
1123
1258
  * A manager for the user and their preferences.
1124
1259
  *
1125
1260
  * @public
1126
1261
  */
1127
1262
  readonly user: UserPreferencesManager;
1263
+ /* Excluded from this release type: _themeManager */
1128
1264
  /**
1129
1265
  * A helper for measuring text.
1130
1266
  *
@@ -1143,6 +1279,12 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1143
1279
  * @public
1144
1280
  */
1145
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;
1146
1288
  /**
1147
1289
  * A manager for side effects and correct state enforcement. See {@link @tldraw/store#StoreSideEffects} for details.
1148
1290
  *
@@ -1175,6 +1317,83 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1175
1317
  * @public
1176
1318
  */
1177
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;
1178
1397
  /**
1179
1398
  * A map of shape utility classes (TLShapeUtils) by shape type.
1180
1399
  *
@@ -1183,6 +1402,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1183
1402
  shapeUtils: {
1184
1403
  readonly [K in string]?: ShapeUtil<TLShape>;
1185
1404
  };
1405
+ /* Excluded from this release type: _shapeUtilsByAssetType */
1186
1406
  styleProps: {
1187
1407
  [key: string]: Map<StyleProp<any>, string>;
1188
1408
  };
@@ -1214,6 +1434,15 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1214
1434
  hasShapeUtil(shape: TLShape | TLShapePartial<TLShape>): boolean;
1215
1435
  hasShapeUtil(type: TLShape['type']): boolean;
1216
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;
1217
1446
  /**
1218
1447
  * A map of shape utility classes (TLShapeUtils) by shape type.
1219
1448
  *
@@ -1244,6 +1473,40 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1244
1473
  type: S['type'];
1245
1474
  } | S): BindingUtil<S>;
1246
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;
1247
1510
  /**
1248
1511
  * A manager for the editor's history.
1249
1512
  *
@@ -1500,6 +1763,11 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1500
1763
  /**
1501
1764
  * Set the cursor.
1502
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
+ *
1503
1771
  * @param cursor - The cursor to set.
1504
1772
  * @public
1505
1773
  */
@@ -2259,11 +2527,12 @@ export declare class Editor extends EventEmitter<TLEventMap> {
2259
2527
  * @public
2260
2528
  */
2261
2529
  pageToViewport(point: VecLike): Vec;
2262
- private _getCollaboratorsQuery;
2263
2530
  /**
2264
2531
  * Returns a list of presence records for all peer collaborators.
2265
2532
  * This will return the latest presence record for each connected user.
2266
2533
  *
2534
+ * Convenience wrapper for {@link CollaboratorsManager.getCollaborators}.
2535
+ *
2267
2536
  * @public
2268
2537
  */
2269
2538
  getCollaborators(): TLInstancePresence[];
@@ -2271,9 +2540,32 @@ export declare class Editor extends EventEmitter<TLEventMap> {
2271
2540
  * Returns a list of presence records for all peer collaborators on the current page.
2272
2541
  * This will return the latest presence record for each connected user.
2273
2542
  *
2543
+ * Convenience wrapper for {@link CollaboratorsManager.getCollaboratorsOnCurrentPage}.
2544
+ *
2274
2545
  * @public
2275
2546
  */
2276
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[];
2277
2569
  /**
2278
2570
  * Get the current user's ID for attribution purposes.
2279
2571
  * Also ensures a `user:` record exists in the store for the current user.
@@ -2934,6 +3226,20 @@ export declare class Editor extends EventEmitter<TLEventMap> {
2934
3226
  type: T['type'];
2935
3227
  }>;
2936
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;
2937
3243
  /**
2938
3244
  * Get a shape by its id.
2939
3245
  *
@@ -4394,6 +4700,35 @@ export declare interface Geometry2dOptions extends TransformedGeometry2dOptions
4394
4700
  */
4395
4701
  export declare function getArcMeasure(A: number, B: number, sweepFlag: number, largeArcFlag: number): number;
4396
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
+
4397
4732
  /** @public */
4398
4733
  export declare function getCursor(cursor: TLCursorType, rotation?: number, color?: string): string;
4399
4734
 
@@ -4438,6 +4773,16 @@ export declare function getFreshUserPreferences(): TLUserPreferences;
4438
4773
  */
4439
4774
  export declare function getIncrementedName(name: string, others: string[]): string;
4440
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
+
4441
4786
  /* Excluded from this release type: getOwnerDocument */
4442
4787
 
4443
4788
  /* Excluded from this release type: getOwnerWindow */
@@ -4564,14 +4909,14 @@ export declare class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
4564
4909
  static type: "group";
4565
4910
  static props: RecordProps<TLGroupShape>;
4566
4911
  static migrations: TLPropsMigrations;
4567
- hideSelectionBoundsFg(): boolean;
4912
+ hideSelectionBoundsFg(shape: TLGroupShape): boolean;
4568
4913
  canBind(): boolean;
4569
4914
  canResize(): boolean;
4570
4915
  canResizeChildren(): boolean;
4571
4916
  getDefaultProps(): TLGroupShape['props'];
4572
4917
  getGeometry(shape: TLGroupShape): Geometry2d;
4573
4918
  component(shape: TLGroupShape): JSX.Element | null;
4574
- indicator(shape: TLGroupShape): JSX.Element;
4919
+ getIndicatorPath(shape: TLGroupShape): Path2D;
4575
4920
  onChildrenChange(group: TLGroupShape): void;
4576
4921
  }
4577
4922
 
@@ -4850,6 +5195,12 @@ export declare class InputsManager {
4850
5195
  get isPointing(): boolean;
4851
5196
  set isPointing(isPointing: boolean);
4852
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 */
4853
5204
  private _isPinching;
4854
5205
  /**
4855
5206
  * Whether the user is pinching.
@@ -5193,41 +5544,308 @@ export declare function openWindow(url: string, target?: string, allowReferrer?:
5193
5544
  /** @public */
5194
5545
  export declare type OptionalKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
5195
5546
 
5196
- /**
5197
- * Parses a string created by {@link createDeepLinkString} back into a deep link descriptor.
5198
- *
5199
- * @param deepLinkString - the deep link string
5200
- * @returns a deep link descriptor
5201
- *
5202
- * @public
5203
- */
5204
- export declare function parseDeepLinkString(deepLinkString: string): TLDeepLink;
5205
-
5206
- /** @public */
5207
- export declare type PerfectDashTerminal = 'none' | 'outset' | 'skip';
5208
-
5209
- /**
5210
- * Find the approximate perimeter of an ellipse.
5211
- *
5212
- * @param rx - The ellipse's x radius.
5213
- * @param ry - The ellipse's y radius.
5214
- * @public
5215
- */
5216
- export declare function perimeterOfEllipse(rx: number, ry: number): number;
5217
-
5218
- /** @public */
5219
- export declare const PI: number;
5220
-
5221
- /** @public */
5222
- export declare const PI2: number;
5223
-
5224
5547
  /** @public */
5225
- export declare class Point2d extends Geometry2d {
5226
- private _point;
5227
- constructor(config: Omit<Geometry2dOptions, 'isClosed' | 'isFilled'> & {
5228
- margin: number;
5229
- point: Vec;
5230
- });
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;
5735
+
5736
+ /** @public */
5737
+ export declare type PerfectDashTerminal = 'none' | 'outset' | 'skip';
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
+
5827
+ /**
5828
+ * Find the approximate perimeter of an ellipse.
5829
+ *
5830
+ * @param rx - The ellipse's x radius.
5831
+ * @param ry - The ellipse's y radius.
5832
+ * @public
5833
+ */
5834
+ export declare function perimeterOfEllipse(rx: number, ry: number): number;
5835
+
5836
+ /** @public */
5837
+ export declare const PI: number;
5838
+
5839
+ /** @public */
5840
+ export declare const PI2: number;
5841
+
5842
+ /** @public */
5843
+ export declare class Point2d extends Geometry2d {
5844
+ private _point;
5845
+ constructor(config: Omit<Geometry2dOptions, 'isClosed' | 'isFilled'> & {
5846
+ margin: number;
5847
+ point: Vec;
5848
+ });
5231
5849
  getVertices(): Vec[];
5232
5850
  nearestPoint(): Vec;
5233
5851
  hitTestLineSegment(A: VecLike, B: VecLike, margin: number): boolean;
@@ -5400,6 +6018,16 @@ export declare function resizeScaled(shape: TLBaseShape<any, {
5400
6018
  y: number;
5401
6019
  };
5402
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
+
5403
6031
  /** @public */
5404
6032
  export declare type RichTextFontVisitor = (node: TiptapNode, state: RichTextFontVisitorState, addFont: (font: TLFontFace) => void) => RichTextFontVisitorState;
5405
6033
 
@@ -5627,6 +6255,32 @@ export declare function setRuntimeOverrides(input: Partial<typeof runtime>): voi
5627
6255
  /** @public */
5628
6256
  export declare function setUserPreferences(user: TLUserPreferences): void;
5629
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
+
5630
6284
  /** @public */
5631
6285
  export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5632
6286
  editor: Editor;
@@ -5681,12 +6335,32 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5681
6335
  * @public
5682
6336
  */
5683
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[];
5684
6347
  /**
5685
6348
  * Get the default props for a shape.
5686
6349
  *
5687
6350
  * @public
5688
6351
  */
5689
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;
5690
6364
  /**
5691
6365
  * Get the shape's geometry.
5692
6366
  *
@@ -5703,37 +6377,30 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5703
6377
  */
5704
6378
  abstract component(shape: Shape): any;
5705
6379
  /**
5706
- * Get JSX describing the shape's indicator (as an SVG element).
5707
- *
5708
- * @param shape - The shape.
5709
- * @public
5710
- */
5711
- abstract indicator(shape: Shape): any;
5712
- /**
5713
- * Whether to use the legacy React-based indicator rendering.
6380
+ * Get a Path2D (or a richer object with clip/additional paths) for rendering the
6381
+ * shape's indicator on the canvas. Shapes that return `undefined` will not render
6382
+ * an indicator.
5714
6383
  *
5715
- * Override this to return `false` if your shape implements {@link ShapeUtil.getIndicatorPath}
5716
- * 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.
5717
6386
  *
5718
- * @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.
5719
6389
  * @public
5720
6390
  */
5721
- useLegacyIndicator(): boolean;
6391
+ abstract getIndicatorPath(shape: Shape): TLIndicatorPath | undefined;
5722
6392
  /**
5723
- * Get a Path2D for rendering the shape's indicator on the canvas.
5724
- *
5725
- * When implemented, this is used instead of {@link ShapeUtil.indicator} for more
5726
- * efficient canvas-based indicator rendering. Shapes that return `undefined` will
5727
- * fall back to SVG-based rendering via {@link ShapeUtil.indicator}.
6393
+ * Get JSX describing the shape's indicator (as an SVG element).
5728
6394
  *
5729
- * For complex indicators that need clipping (e.g., arrows with labels), return an
5730
- * 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.
5731
6399
  *
5732
6400
  * @param shape - The shape.
5733
- * @returns A Path2D to stroke, or an object with clipping info, or undefined to use SVG fallback.
5734
6401
  * @public
5735
6402
  */
5736
- getIndicatorPath(shape: Shape): TLIndicatorPath | undefined;
6403
+ indicator(_shape: Shape): any;
5737
6404
  /**
5738
6405
  * Get the font faces that should be rendered in the document in order for this shape to render
5739
6406
  * correctly.
@@ -5767,7 +6434,7 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5767
6434
  *
5768
6435
  * @public
5769
6436
  */
5770
- canBind(_opts: TLShapeUtilCanBindOpts): boolean;
6437
+ canBind(opts: TLShapeUtilCanBindOpts): boolean;
5771
6438
  /**
5772
6439
  * Whether the shape can be double clicked to edit.
5773
6440
  *
@@ -5901,6 +6568,14 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5901
6568
  * @public
5902
6569
  */
5903
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;
5904
6579
  /**
5905
6580
  * By default, the bounds of an image export are the bounds of all the shapes it contains, plus
5906
6581
  * some padding. If an export includes a shape where `isExportBoundsContainer` is true, then the
@@ -5942,13 +6617,28 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5942
6617
  */
5943
6618
  getHandles?(shape: Shape): TLHandle[];
5944
6619
  /**
5945
- * 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.
5946
6623
  *
5947
6624
  * @param shape - The shape.
5948
6625
  * @param type - The shape type.
5949
6626
  * @public
5950
6627
  */
5951
- 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;
5952
6642
  /**
5953
6643
  * Get the shape as an SVG object.
5954
6644
  *
@@ -6391,6 +7081,8 @@ export declare abstract class StateNode implements Partial<TLEventHandlers> {
6391
7081
  static children?: () => TLStateNodeConstructor[];
6392
7082
  static isLockable: boolean;
6393
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;
6394
7086
  id: string;
6395
7087
  type: 'branch' | 'leaf' | 'root';
6396
7088
  shapeType?: string;
@@ -6490,6 +7182,19 @@ export declare const stopEventPropagation: (e: any) => any;
6490
7182
 
6491
7183
  /* Excluded from this release type: StoreName */
6492
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
+
6493
7198
  /** @public */
6494
7199
  export declare function suffixSafeId(id: SafeId, suffix: string): SafeId;
6495
7200
 
@@ -6525,6 +7230,10 @@ export declare interface SvgExportContext {
6525
7230
  * Whether the export should be in dark mode.
6526
7231
  */
6527
7232
  readonly isDarkMode: boolean;
7233
+ /**
7234
+ * The color mode to use for this export.
7235
+ */
7236
+ readonly colorMode: 'dark' | 'light';
6528
7237
  /**
6529
7238
  * The scale of the export - how much CSS pixels will be scaled up/down by.
6530
7239
  */
@@ -6595,6 +7304,47 @@ export declare class TextManager {
6595
7304
  }[];
6596
7305
  }
6597
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
+
6598
7348
  /* Excluded from this release type: TickManager */
6599
7349
 
6600
7350
  /**
@@ -6613,12 +7363,26 @@ export declare type TiptapNode = Node_2;
6613
7363
  /** @public */
6614
7364
  export declare type TLAdjacentDirection = 'down' | 'left' | 'next' | 'prev' | 'right' | 'up';
6615
7365
 
7366
+ /** @public */
7367
+ export declare type TLAnyAssetUtilConstructor = TLAssetUtilConstructor<any>;
7368
+
6616
7369
  /** @public */
6617
7370
  export declare type TLAnyBindingUtilConstructor = TLBindingUtilConstructor<any>;
6618
7371
 
7372
+ /** @public */
7373
+ export declare type TLAnyOverlayUtilConstructor = TLOverlayUtilConstructor<any>;
7374
+
6619
7375
  /** @public */
6620
7376
  export declare type TLAnyShapeUtilConstructor = TLShapeUtilConstructor<any>;
6621
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
+
6622
7386
  /** @public */
6623
7387
  export declare type TLBaseBoxShape = ExtractShapeByProps<{
6624
7388
  h: number;
@@ -6651,15 +7415,6 @@ export declare interface TLBindingUtilConstructor<T extends TLBinding, U extends
6651
7415
  migrations?: TLPropsMigrations;
6652
7416
  }
6653
7417
 
6654
- /** @public */
6655
- export declare interface TLBrushProps {
6656
- userId?: string;
6657
- brush: BoxModel;
6658
- color?: string;
6659
- opacity?: number;
6660
- className?: string;
6661
- }
6662
-
6663
7418
  /** @public */
6664
7419
  export declare interface TLCameraConstraints {
6665
7420
  /** The bounds (in page space) of the constrained space */
@@ -6708,6 +7463,29 @@ export declare interface TLCameraConstraints {
6708
7463
  };
6709
7464
  }
6710
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
+
6711
7489
  /** @public */
6712
7490
  export declare interface TLCameraMoveOptions {
6713
7491
  /** Whether to move the camera immediately, rather than on the next tick. */
@@ -6746,6 +7524,17 @@ export declare interface TLCameraOptions {
6746
7524
  constraints?: TLCameraConstraints;
6747
7525
  }
6748
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
+
6749
7538
  /** @public */
6750
7539
  export declare type TLCancelEvent = (info: TLCancelEventInfo) => void;
6751
7540
 
@@ -6813,17 +7602,6 @@ export declare interface TLClipboardWriteInfo {
6813
7602
  readonly source: 'menu' | 'native';
6814
7603
  }
6815
7604
 
6816
- /** @public */
6817
- export declare interface TLCollaboratorHintProps {
6818
- userId: string;
6819
- className?: string;
6820
- point: VecModel;
6821
- viewport: Box;
6822
- zoom: number;
6823
- opacity?: number;
6824
- color: string;
6825
- }
6826
-
6827
7605
  /** @public */
6828
7606
  export declare type TLCompleteEvent = (info: TLCompleteEventInfo) => void;
6829
7607
 
@@ -6868,17 +7646,6 @@ export declare interface TLCurrentUser {
6868
7646
  readonly setUserPreferences: (userPreferences: TLUserPreferences) => void;
6869
7647
  }
6870
7648
 
6871
- /** @public */
6872
- export declare interface TLCursorProps {
6873
- userId: string;
6874
- className?: string;
6875
- point: null | VecModel;
6876
- zoom: number;
6877
- color?: string;
6878
- name: null | string;
6879
- chatMessage: string;
6880
- }
6881
-
6882
7649
  /** @public */
6883
7650
  export declare type TLDeepLink = {
6884
7651
  bounds: BoxModel;
@@ -6968,6 +7735,14 @@ export declare interface TldrawEditorBaseProps {
6968
7735
  * An array of binding utils to use in the editor.
6969
7736
  */
6970
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[];
6971
7746
  /**
6972
7747
  * An array of tools to add to the editor's state chart.
6973
7748
  */
@@ -6997,9 +7772,21 @@ export declare interface TldrawEditorBaseProps {
6997
7772
  */
6998
7773
  user?: TLCurrentUser;
6999
7774
  /**
7000
- * Whether to infer dark mode from the user's OS. Defaults to false.
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.
7001
7784
  */
7002
- inferDarkMode?: boolean;
7785
+ themes?: Partial<TLThemes>;
7786
+ /**
7787
+ * The id of the initially active theme. Defaults to `'default'`.
7788
+ */
7789
+ initialTheme?: TLThemeId;
7003
7790
  /**
7004
7791
  * Camera options for the editor.
7005
7792
  *
@@ -7217,6 +8004,12 @@ export declare interface TldrawOptions {
7217
8004
  * When false, the spacebar will not pan the camera.
7218
8005
  */
7219
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;
7220
8013
  /**
7221
8014
  * The default padding (in pixels) used when zooming to fit content in the viewport.
7222
8015
  * This affects methods like `zoomToFit()`, `zoomToSelection()`, and `zoomToBounds()`.
@@ -7346,34 +8139,17 @@ export declare interface TLDropShapesOverInfo {
7346
8139
  /** @public */
7347
8140
  export declare interface TLEditorComponents {
7348
8141
  Background?: ComponentType | null;
7349
- Brush?: ComponentType<TLBrushProps> | null;
7350
8142
  Canvas?: ComponentType<TLCanvasComponentProps> | null;
7351
- CollaboratorBrush?: ComponentType<TLBrushProps> | null;
7352
- CollaboratorCursor?: ComponentType<TLCursorProps> | null;
7353
- CollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null;
7354
- CollaboratorScribble?: ComponentType<TLScribbleProps> | null;
7355
- CollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null;
7356
- Cursor?: ComponentType<TLCursorProps> | null;
7357
8143
  Grid?: ComponentType<TLGridProps> | null;
7358
- Handle?: ComponentType<TLHandleProps> | null;
7359
- Handles?: ComponentType<TLHandlesProps> | null;
7360
8144
  InFrontOfTheCanvas?: ComponentType | null;
7361
8145
  LoadingScreen?: ComponentType | null;
7362
8146
  OnTheCanvas?: ComponentType | null;
7363
- Overlays?: ComponentType | null;
7364
- Scribble?: ComponentType<TLScribbleProps> | null;
7365
8147
  SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null;
7366
- SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null;
7367
- ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null;
7368
- ShapeIndicators?: ComponentType | null;
7369
8148
  ShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null;
7370
- SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null;
7371
8149
  Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null;
7372
8150
  SvgDefs?: ComponentType | null;
7373
- ZoomBrush?: ComponentType<TLBrushProps> | null;
7374
8151
  ErrorFallback?: TLErrorFallbackComponent;
7375
8152
  ShapeErrorFallback?: TLShapeErrorFallbackComponent;
7376
- ShapeIndicatorErrorFallback?: TLShapeIndicatorErrorFallbackComponent;
7377
8153
  }
7378
8154
 
7379
8155
  /** @public */
@@ -7392,14 +8168,18 @@ export declare interface TLEditorOptions {
7392
8168
  */
7393
8169
  bindingUtils: readonly TLAnyBindingUtilConstructor[];
7394
8170
  /**
7395
- * 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.
7396
8172
  */
7397
- tools: readonly TLStateNodeConstructor[];
8173
+ assetUtils?: readonly TLAnyAssetUtilConstructor[];
7398
8174
  /**
7399
- * Should return a containing html element which has all the styles applied to the editor. If not
7400
- * 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.
7401
8177
  */
7402
- 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[];
7403
8183
  /**
7404
8184
  * A user defined externally to replace the default user.
7405
8185
  */
@@ -7412,27 +8192,15 @@ export declare interface TLEditorOptions {
7412
8192
  * Whether to automatically focus the editor when it mounts.
7413
8193
  */
7414
8194
  autoFocus?: boolean;
7415
- /**
7416
- * Whether to infer dark mode from the user's system preferences. Defaults to false.
7417
- */
7418
- inferDarkMode?: boolean;
7419
- /**
7420
- * Options for the editor's camera.
7421
- *
7422
- * @deprecated Use `options.cameraOptions` instead. This will be removed in a future release.
7423
- */
7424
- cameraOptions?: Partial<TLCameraOptions>;
7425
- options?: Partial<TldrawOptions>;
7426
- /**
7427
- * Text options for the editor.
7428
- *
7429
- * @deprecated Use `options.text` instead. This prop will be removed in a future release.
7430
- */
7431
- textOptions?: TLTextOptions;
7432
8195
  licenseKey?: string;
7433
8196
  fontAssetUrls?: {
7434
8197
  [key: string]: string | undefined;
7435
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;
7436
8204
  /**
7437
8205
  * Provides a way to hide shapes.
7438
8206
  *
@@ -7449,6 +8217,40 @@ export declare interface TLEditorOptions {
7449
8217
  * @param editor - The editor instance.
7450
8218
  */
7451
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;
7452
8254
  }
7453
8255
 
7454
8256
  /**
@@ -7507,6 +8309,7 @@ export declare const tlenv: {
7507
8309
  */
7508
8310
  export declare const tlenvReactive: Atom< {
7509
8311
  isCoarsePointer: boolean;
8312
+ supportsP3ColorSpace: boolean;
7510
8313
  }, unknown>;
7511
8314
 
7512
8315
  /** @public */
@@ -7635,6 +8438,7 @@ export declare interface TLFileReplaceExternalContent extends TLBaseExternalCont
7635
8438
  type: 'file-replace';
7636
8439
  file: File;
7637
8440
  shapeId: TLShapeId;
8441
+ /** @deprecated This field is no longer used by the default handler. It may be removed in a future version. */
7638
8442
  isImage: boolean;
7639
8443
  }
7640
8444
 
@@ -7646,69 +8450,18 @@ export declare interface TLFilesExternalContent extends TLBaseExternalContent {
7646
8450
  }
7647
8451
 
7648
8452
  /**
7649
- * A font face that can be used in the editor. The properties of this are largely the same as the
7650
- * ones in the
7651
- * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face | css `@font-face` rule}.
7652
- * @public
7653
- */
7654
- export declare interface TLFontFace {
7655
- /**
7656
- * How this font can be referred to in CSS.
7657
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family | `font-family`}.
7658
- */
7659
- readonly family: string;
7660
- /**
7661
- * The source of the font. This
7662
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`}.
7663
- */
7664
- readonly src: TLFontFaceSource;
7665
- /**
7666
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override | `ascent-override`}.
7667
- */
7668
- readonly ascentOverride?: string;
7669
- /**
7670
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override | `descent-override`}.
7671
- */
7672
- readonly descentOverride?: string;
7673
- /**
7674
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch | `font-stretch`}.
7675
- */
7676
- readonly stretch?: string;
7677
- /**
7678
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style | `font-style`}.
7679
- */
7680
- readonly style?: string;
7681
- /**
7682
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight | `font-weight`}.
7683
- */
7684
- readonly weight?: string;
7685
- /**
7686
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-feature-settings | `font-feature-settings`}.
7687
- */
7688
- readonly featureSettings?: string;
7689
- /**
7690
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/line-gap-override | `line-gap-override`}.
7691
- */
7692
- readonly lineGapOverride?: string;
7693
- /**
7694
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range | `unicode-range`}.
7695
- */
7696
- readonly unicodeRange?: string;
7697
- }
7698
-
7699
- /**
7700
- * Represents the `src` property of a {@link TLFontFace}.
7701
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`} for details of the properties here.
8453
+ * Emitted every animation frame when at least one `'frame'` listener is registered.
7702
8454
  * @public
7703
8455
  */
7704
- export declare interface TLFontFaceSource {
7705
- /**
7706
- * A URL from which to load the font. If the value here is a key in
7707
- * {@link tldraw#TLEditorAssetUrls.fonts}, the value from there will be used instead.
7708
- */
7709
- url: string;
7710
- format?: string;
7711
- 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;
7712
8465
  }
7713
8466
 
7714
8467
  /** Additional options for the {@link ShapeUtil.getGeometry} method.
@@ -7789,20 +8542,6 @@ export declare interface TLHandleDragInfo<T extends TLShape> {
7789
8542
  initial?: T | undefined;
7790
8543
  }
7791
8544
 
7792
- /** @public */
7793
- export declare interface TLHandleProps {
7794
- shapeId: TLShapeId;
7795
- handle: TLHandle;
7796
- zoom: number;
7797
- isCoarse: boolean;
7798
- className?: string;
7799
- }
7800
-
7801
- /** @public */
7802
- export declare interface TLHandlesProps {
7803
- children: ReactNode;
7804
- }
7805
-
7806
8545
  /** @public */
7807
8546
  export declare interface TLHistoryBatchOptions {
7808
8547
  /**
@@ -7853,6 +8592,38 @@ export declare type TLIndicatorPath = {
7853
8592
  path: Path2D;
7854
8593
  } | Path2D;
7855
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
+
7856
8627
  /** @public */
7857
8628
  export declare type TLInterruptEvent = (info: TLInterruptEventInfo) => void;
7858
8629
 
@@ -8100,6 +8871,130 @@ export declare const tlmenus: {
8100
8871
  */
8101
8872
  export declare type TLOnMountHandler = (editor: Editor) => (() => undefined | void) | undefined | void;
8102
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
+
8103
8998
  /** @public */
8104
8999
  export declare type TLPinchEvent = (info: TLPinchEventInfo) => void;
8105
9000
 
@@ -8139,6 +9034,10 @@ export declare type TLPointerEventTarget = {
8139
9034
  handle?: TLSelectionHandle;
8140
9035
  shape?: undefined;
8141
9036
  target: 'selection';
9037
+ } | {
9038
+ overlay: TLOverlay;
9039
+ shape?: undefined;
9040
+ target: 'overlay';
8142
9041
  } | {
8143
9042
  shape: TLShape;
8144
9043
  target: 'shape';
@@ -8209,28 +9108,12 @@ export declare type TLResizeShapeOptions = Partial<{
8209
9108
 
8210
9109
  /* Excluded from this release type: TLRotationSnapshot */
8211
9110
 
8212
- /** @public */
8213
- export declare interface TLScribbleProps {
8214
- userId?: string;
8215
- scribble: TLScribble;
8216
- zoom: number;
8217
- color?: string;
8218
- opacity?: number;
8219
- className?: string;
8220
- }
8221
-
8222
9111
  /** @public */
8223
9112
  export declare interface TLSelectionBackgroundProps {
8224
9113
  bounds: Box;
8225
9114
  rotation: number;
8226
9115
  }
8227
9116
 
8228
- /** @public */
8229
- export declare interface TLSelectionForegroundProps {
8230
- bounds: Box;
8231
- rotation: number;
8232
- }
8233
-
8234
9117
  /** @public */
8235
9118
  export declare type TLSelectionHandle = RotateCorner | SelectionCorner | SelectionEdge;
8236
9119
 
@@ -8265,26 +9148,26 @@ export declare type TLShapeErrorFallbackComponent = ComponentType<{
8265
9148
  }>;
8266
9149
 
8267
9150
  /** @public */
8268
- export declare type TLShapeIndicatorErrorFallbackComponent = ComponentType<{
8269
- error: unknown;
8270
- }>;
8271
-
8272
- /** @public */
8273
- export declare interface TLShapeIndicatorProps {
8274
- userId?: string;
8275
- shapeId: TLShapeId;
8276
- color?: string | undefined;
8277
- opacity?: number;
8278
- className?: string;
8279
- hidden?: boolean;
9151
+ export declare interface TLShapeIndicatorOverlay extends TLOverlay {
9152
+ props: {
9153
+ hintingShapeIds: TLShapeId[];
9154
+ idsToDisplay: TLShapeId[];
9155
+ };
8280
9156
  }
8281
9157
 
8282
- /** @public */
8283
- export declare interface TLShapeIndicatorsProps {
8284
- /** Whether to hide all of the indicators */
8285
- hideAll?: boolean;
8286
- /** Whether to show all of the indicators */
8287
- 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;
8288
9171
  }
8289
9172
 
8290
9173
  /**
@@ -8344,6 +9227,7 @@ export declare interface TLShapeUtilConstructor<T extends TLShape, U extends Sha
8344
9227
  type: T['type'];
8345
9228
  props?: RecordProps<T>;
8346
9229
  migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
9230
+ handledAssetTypes?: readonly string[];
8347
9231
  }
8348
9232
 
8349
9233
  /** @public */
@@ -8356,13 +9240,6 @@ export declare interface TLShapeWrapperProps extends React.HTMLAttributes<HTMLDi
8356
9240
  children: ReactNode;
8357
9241
  }
8358
9242
 
8359
- /** @public */
8360
- export declare interface TLSnapIndicatorProps {
8361
- className?: string;
8362
- line: SnapIndicator;
8363
- zoom: number;
8364
- }
8365
-
8366
9243
  /** @public */
8367
9244
  export declare interface TLStateNodeConstructor {
8368
9245
  new (editor: Editor, parent?: StateNode): StateNode;
@@ -8371,6 +9248,7 @@ export declare interface TLStateNodeConstructor {
8371
9248
  children?(): TLStateNodeConstructor[];
8372
9249
  isLockable: boolean;
8373
9250
  useCoalescedEvents: boolean;
9251
+ trackPerformance: boolean;
8374
9252
  }
8375
9253
 
8376
9254
  /** @public */
@@ -8383,6 +9261,12 @@ export declare interface TLStoreBaseOptions {
8383
9261
  defaultName?: string;
8384
9262
  /** How should this store upload & resolve assets? */
8385
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>;
8386
9270
  /** How should this store resolve users for attribution? */
8387
9271
  users?: TLUserStore;
8388
9272
  /** Called when the store is connected to an {@link @tldraw/editor#Editor}. */
@@ -8404,6 +9288,7 @@ export declare type TLStoreOptions = TLStoreBaseOptions & {
8404
9288
 
8405
9289
  /** @public */
8406
9290
  export declare type TLStoreSchemaOptions = {
9291
+ assetUtils?: readonly TLAnyAssetUtilConstructor[];
8407
9292
  bindingUtils?: readonly TLAnyBindingUtilConstructor[];
8408
9293
  migrations?: readonly MigrationSequence[];
8409
9294
  records?: Record<string, CustomRecordInfo>;
@@ -8541,6 +9426,19 @@ export declare interface TLTldrawExternalContentSource {
8541
9426
  data: TLContent;
8542
9427
  }
8543
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
+
8544
9442
  /** @public */
8545
9443
  export declare interface TLUpdatePointerOptions {
8546
9444
  /** Whether to update the pointer immediately, rather than on the next tick. */
@@ -8672,6 +9570,9 @@ export declare function uniq<T>(array: {
8672
9570
  readonly length: number;
8673
9571
  } | null | undefined): T[];
8674
9572
 
9573
+ /** @public */
9574
+ export declare function useColorMode(): 'dark' | 'light';
9575
+
8675
9576
  /** @public */
8676
9577
  export declare function useContainer(): HTMLElement;
8677
9578
 
@@ -8710,9 +9611,6 @@ export declare function useGlobalMenuIsOpen(id: string, onChange?: (isOpen: bool
8710
9611
  /** @public */
8711
9612
  export declare function useIsCropping(shapeId: TLShapeId): boolean;
8712
9613
 
8713
- /** @public */
8714
- export declare function useIsDarkMode(): boolean;
8715
-
8716
9614
  /** @public */
8717
9615
  export declare function useIsEditing(shapeId: TLShapeId): boolean;
8718
9616
 
@@ -8730,6 +9628,10 @@ export declare function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement
8730
9628
  export declare function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>): void;
8731
9629
 
8732
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
+ *
8733
9635
  * @returns The list of peer UserIDs
8734
9636
  * @public
8735
9637
  */
@@ -8750,11 +9652,11 @@ export declare function usePresence(userId: string): null | TLInstancePresence;
8750
9652
  /** @public */
8751
9653
  export declare class UserPreferencesManager {
8752
9654
  private readonly user;
8753
- private readonly inferDarkMode;
9655
+ private readonly colorScheme;
8754
9656
  systemColorScheme: Atom<"dark" | "light", unknown>;
8755
9657
  disposables: Set<() => void>;
8756
9658
  dispose(): void;
8757
- constructor(user: TLCurrentUser, inferDarkMode: boolean);
9659
+ constructor(user: TLCurrentUser, colorScheme: 'dark' | 'light' | 'system');
8758
9660
  updateUserPreferences(userPreferences: Partial<TLUserPreferences>): void;
8759
9661
  getUserPreferences(): {
8760
9662
  animationSpeed: number;
@@ -8795,13 +9697,6 @@ export declare class UserPreferencesManager {
8795
9697
  /** @public */
8796
9698
  export declare const userTypeValidator: T.Validator<TLUserPreferences>;
8797
9699
 
8798
- /** @public */
8799
- export declare function useSelectionEvents(handle: TLSelectionHandle): {
8800
- onPointerDown: PointerEventHandler<Element>;
8801
- onPointerMove: (e: PointerEvent_2<Element>) => void;
8802
- onPointerUp: PointerEventHandler<Element>;
8803
- };
8804
-
8805
9700
  /* Excluded from this release type: useShallowArrayIdentity */
8806
9701
 
8807
9702
  /* Excluded from this release type: useShallowObjectIdentity */