@tldraw/editor 4.6.0-internal.c7df3c92455a → 4.6.0-next.0a51207761bb

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 (320) hide show
  1. package/dist-cjs/index.d.ts +850 -118
  2. package/dist-cjs/index.js +20 -6
  3. package/dist-cjs/index.js.map +3 -3
  4. package/dist-cjs/lib/TldrawEditor.js +59 -14
  5. package/dist-cjs/lib/TldrawEditor.js.map +3 -3
  6. package/dist-cjs/lib/components/MenuClickCapture.js +16 -1
  7. package/dist-cjs/lib/components/MenuClickCapture.js.map +2 -2
  8. package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js +3 -3
  9. package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js.map +2 -2
  10. package/dist-cjs/lib/components/default-components/DefaultCanvas.js +1 -1
  11. package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +2 -2
  12. package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js +1 -1
  13. package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js.map +2 -2
  14. package/dist-cjs/lib/components/default-components/DefaultErrorFallback.js.map +2 -2
  15. package/dist-cjs/lib/config/{createTLUser.js → createTLCurrentUser.js} +9 -9
  16. package/dist-cjs/lib/config/createTLCurrentUser.js.map +7 -0
  17. package/dist-cjs/lib/config/createTLStore.js +31 -1
  18. package/dist-cjs/lib/config/createTLStore.js.map +2 -2
  19. package/dist-cjs/lib/config/defaultAssets.js +36 -0
  20. package/dist-cjs/lib/config/defaultAssets.js.map +7 -0
  21. package/dist-cjs/lib/config/defaultShapes.js.map +2 -2
  22. package/dist-cjs/lib/editor/Editor.js +788 -362
  23. package/dist-cjs/lib/editor/Editor.js.map +3 -3
  24. package/dist-cjs/lib/editor/assets/AssetUtil.js +66 -0
  25. package/dist-cjs/lib/editor/assets/AssetUtil.js.map +7 -0
  26. package/dist-cjs/lib/editor/managers/ClickManager/ClickManager.js +25 -64
  27. package/dist-cjs/lib/editor/managers/ClickManager/ClickManager.js.map +2 -2
  28. package/dist-cjs/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.js +1 -1
  29. package/dist-cjs/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.js.map +2 -2
  30. package/dist-cjs/lib/editor/managers/FocusManager/FocusManager.js +14 -53
  31. package/dist-cjs/lib/editor/managers/FocusManager/FocusManager.js.map +1 -1
  32. package/dist-cjs/lib/editor/managers/FontManager/FontManager.js.map +2 -2
  33. package/dist-cjs/lib/editor/managers/InputsManager/InputsManager.js +71 -112
  34. package/dist-cjs/lib/editor/managers/InputsManager/InputsManager.js.map +2 -2
  35. package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.js +80 -0
  36. package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.js.map +7 -0
  37. package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceManager.js +466 -0
  38. package/dist-cjs/lib/editor/managers/PerformanceManager/PerformanceManager.js.map +7 -0
  39. package/dist-cjs/lib/editor/managers/PerformanceManager/perf-types.js +17 -0
  40. package/dist-cjs/lib/editor/managers/PerformanceManager/perf-types.js.map +7 -0
  41. package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js +21 -56
  42. package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js.map +2 -2
  43. package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js +11 -52
  44. package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js.map +2 -2
  45. package/dist-cjs/lib/editor/managers/SnapManager/SnapManager.js +19 -56
  46. package/dist-cjs/lib/editor/managers/SnapManager/SnapManager.js.map +1 -1
  47. package/dist-cjs/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.js +4 -4
  48. package/dist-cjs/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.js.map +2 -2
  49. package/dist-cjs/lib/editor/managers/TextManager/TextManager.js +102 -30
  50. package/dist-cjs/lib/editor/managers/TextManager/TextManager.js.map +2 -2
  51. package/dist-cjs/lib/editor/managers/ThemeManager/ThemeManager.js +106 -0
  52. package/dist-cjs/lib/editor/managers/ThemeManager/ThemeManager.js.map +7 -0
  53. package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js +586 -0
  54. package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js.map +7 -0
  55. package/dist-cjs/lib/editor/managers/TickManager/TickManager.js +16 -55
  56. package/dist-cjs/lib/editor/managers/TickManager/TickManager.js.map +1 -1
  57. package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js +63 -72
  58. package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js.map +2 -2
  59. package/dist-cjs/lib/editor/shapes/ShapeUtil.js +21 -2
  60. package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
  61. package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js +1 -1
  62. package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js.map +2 -2
  63. package/dist-cjs/lib/editor/shapes/shared/getPerfectDashProps.js +6 -0
  64. package/dist-cjs/lib/editor/shapes/shared/getPerfectDashProps.js.map +2 -2
  65. package/dist-cjs/lib/editor/tools/StateNode.js +14 -17
  66. package/dist-cjs/lib/editor/tools/StateNode.js.map +2 -2
  67. package/dist-cjs/lib/editor/types/SvgExportContext.js.map +2 -2
  68. package/dist-cjs/lib/editor/types/clipboard-types.js.map +1 -1
  69. package/dist-cjs/lib/editor/types/external-content.js.map +1 -1
  70. package/dist-cjs/lib/exports/ExportDelay.js +12 -53
  71. package/dist-cjs/lib/exports/ExportDelay.js.map +1 -1
  72. package/dist-cjs/lib/exports/FontEmbedder.js +14 -57
  73. package/dist-cjs/lib/exports/FontEmbedder.js.map +1 -1
  74. package/dist-cjs/lib/exports/StyleEmbedder.js +1 -1
  75. package/dist-cjs/lib/exports/StyleEmbedder.js.map +2 -2
  76. package/dist-cjs/lib/exports/getSvgJsx.js +12 -7
  77. package/dist-cjs/lib/exports/getSvgJsx.js.map +2 -2
  78. package/dist-cjs/lib/globals/environment.js +18 -1
  79. package/dist-cjs/lib/globals/environment.js.map +2 -2
  80. package/dist-cjs/lib/hooks/{useIsDarkMode.js → useColorMode.js} +14 -10
  81. package/dist-cjs/lib/hooks/useColorMode.js.map +7 -0
  82. package/dist-cjs/lib/hooks/useCursor.js +3 -7
  83. package/dist-cjs/lib/hooks/useCursor.js.map +2 -2
  84. package/dist-cjs/lib/hooks/useDarkMode.js +4 -4
  85. package/dist-cjs/lib/hooks/useDarkMode.js.map +2 -2
  86. package/dist-cjs/lib/hooks/useEditorComponents.js.map +2 -2
  87. package/dist-cjs/lib/hooks/useGestureEvents.js +171 -127
  88. package/dist-cjs/lib/hooks/useGestureEvents.js.map +3 -3
  89. package/dist-cjs/lib/hooks/useLocalStore.js.map +2 -2
  90. package/dist-cjs/lib/options.js +3 -0
  91. package/dist-cjs/lib/options.js.map +2 -2
  92. package/dist-cjs/lib/primitives/Box.js +26 -26
  93. package/dist-cjs/lib/primitives/Box.js.map +2 -2
  94. package/dist-cjs/lib/primitives/Vec.js +1 -1
  95. package/dist-cjs/lib/primitives/Vec.js.map +1 -1
  96. package/dist-cjs/lib/primitives/geometry/Arc2d.js +2 -2
  97. package/dist-cjs/lib/primitives/geometry/Arc2d.js.map +2 -2
  98. package/dist-cjs/lib/primitives/geometry/Circle2d.js +2 -2
  99. package/dist-cjs/lib/primitives/geometry/Circle2d.js.map +2 -2
  100. package/dist-cjs/lib/primitives/geometry/CubicSpline2d.js +1 -1
  101. package/dist-cjs/lib/primitives/geometry/CubicSpline2d.js.map +1 -1
  102. package/dist-cjs/lib/primitives/geometry/Ellipse2d.js +3 -3
  103. package/dist-cjs/lib/primitives/geometry/Ellipse2d.js.map +2 -2
  104. package/dist-cjs/lib/primitives/geometry/Geometry2d.js +10 -9
  105. package/dist-cjs/lib/primitives/geometry/Geometry2d.js.map +2 -2
  106. package/dist-cjs/lib/primitives/geometry/Polyline2d.js +2 -2
  107. package/dist-cjs/lib/primitives/geometry/Polyline2d.js.map +2 -2
  108. package/dist-cjs/lib/primitives/geometry/Stadium2d.js +1 -1
  109. package/dist-cjs/lib/primitives/geometry/Stadium2d.js.map +2 -2
  110. package/dist-cjs/lib/utils/SharedStylesMap.js +1 -1
  111. package/dist-cjs/lib/utils/SharedStylesMap.js.map +1 -1
  112. package/dist-cjs/lib/utils/getSvgPathFromPoints.js.map +2 -2
  113. package/dist-cjs/lib/utils/reparenting.js +2 -1
  114. package/dist-cjs/lib/utils/reparenting.js.map +2 -2
  115. package/dist-cjs/lib/utils/richText.js.map +2 -2
  116. package/dist-cjs/lib/utils/runtime.js +2 -1
  117. package/dist-cjs/lib/utils/runtime.js.map +2 -2
  118. package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js +3 -2
  119. package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js.map +2 -2
  120. package/dist-cjs/lib/utils/sync/hardReset.js +0 -8
  121. package/dist-cjs/lib/utils/sync/hardReset.js.map +2 -2
  122. package/dist-cjs/version.js +3 -3
  123. package/dist-cjs/version.js.map +1 -1
  124. package/dist-esm/index.d.mts +850 -118
  125. package/dist-esm/index.mjs +28 -10
  126. package/dist-esm/index.mjs.map +2 -2
  127. package/dist-esm/lib/TldrawEditor.mjs +62 -14
  128. package/dist-esm/lib/TldrawEditor.mjs.map +3 -3
  129. package/dist-esm/lib/components/MenuClickCapture.mjs +16 -1
  130. package/dist-esm/lib/components/MenuClickCapture.mjs.map +2 -2
  131. package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs +3 -3
  132. package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs.map +2 -2
  133. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +1 -1
  134. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +2 -2
  135. package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs +1 -1
  136. package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs.map +2 -2
  137. package/dist-esm/lib/components/default-components/DefaultErrorFallback.mjs.map +2 -2
  138. package/dist-esm/lib/config/{createTLUser.mjs → createTLCurrentUser.mjs} +6 -6
  139. package/dist-esm/lib/config/createTLCurrentUser.mjs.map +7 -0
  140. package/dist-esm/lib/config/createTLStore.mjs +37 -2
  141. package/dist-esm/lib/config/createTLStore.mjs.map +2 -2
  142. package/dist-esm/lib/config/defaultAssets.mjs +16 -0
  143. package/dist-esm/lib/config/defaultAssets.mjs.map +7 -0
  144. package/dist-esm/lib/config/defaultShapes.mjs.map +2 -2
  145. package/dist-esm/lib/editor/Editor.mjs +791 -364
  146. package/dist-esm/lib/editor/Editor.mjs.map +3 -3
  147. package/dist-esm/lib/editor/assets/AssetUtil.mjs +46 -0
  148. package/dist-esm/lib/editor/assets/AssetUtil.mjs.map +7 -0
  149. package/dist-esm/lib/editor/managers/ClickManager/ClickManager.mjs +25 -64
  150. package/dist-esm/lib/editor/managers/ClickManager/ClickManager.mjs.map +2 -2
  151. package/dist-esm/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.mjs +1 -1
  152. package/dist-esm/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.mjs.map +2 -2
  153. package/dist-esm/lib/editor/managers/FocusManager/FocusManager.mjs +14 -53
  154. package/dist-esm/lib/editor/managers/FocusManager/FocusManager.mjs.map +1 -1
  155. package/dist-esm/lib/editor/managers/FontManager/FontManager.mjs.map +2 -2
  156. package/dist-esm/lib/editor/managers/InputsManager/InputsManager.mjs +71 -112
  157. package/dist-esm/lib/editor/managers/InputsManager/InputsManager.mjs.map +2 -2
  158. package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.mjs +60 -0
  159. package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.mjs.map +7 -0
  160. package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceManager.mjs +438 -0
  161. package/dist-esm/lib/editor/managers/PerformanceManager/PerformanceManager.mjs.map +7 -0
  162. package/dist-esm/lib/editor/managers/PerformanceManager/perf-types.mjs +1 -0
  163. package/dist-esm/lib/editor/managers/PerformanceManager/perf-types.mjs.map +7 -0
  164. package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs +21 -56
  165. package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs.map +2 -2
  166. package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs +11 -52
  167. package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs.map +2 -2
  168. package/dist-esm/lib/editor/managers/SnapManager/SnapManager.mjs +19 -56
  169. package/dist-esm/lib/editor/managers/SnapManager/SnapManager.mjs.map +1 -1
  170. package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs +4 -4
  171. package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs.map +2 -2
  172. package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs +102 -30
  173. package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs.map +2 -2
  174. package/dist-esm/lib/editor/managers/ThemeManager/ThemeManager.mjs +88 -0
  175. package/dist-esm/lib/editor/managers/ThemeManager/ThemeManager.mjs.map +7 -0
  176. package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs +568 -0
  177. package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs.map +7 -0
  178. package/dist-esm/lib/editor/managers/TickManager/TickManager.mjs +16 -55
  179. package/dist-esm/lib/editor/managers/TickManager/TickManager.mjs.map +1 -1
  180. package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs +63 -72
  181. package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs.map +2 -2
  182. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +21 -2
  183. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
  184. package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs +1 -1
  185. package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs.map +2 -2
  186. package/dist-esm/lib/editor/shapes/shared/getPerfectDashProps.mjs +6 -0
  187. package/dist-esm/lib/editor/shapes/shared/getPerfectDashProps.mjs.map +2 -2
  188. package/dist-esm/lib/editor/tools/StateNode.mjs +14 -17
  189. package/dist-esm/lib/editor/tools/StateNode.mjs.map +2 -2
  190. package/dist-esm/lib/editor/types/SvgExportContext.mjs.map +2 -2
  191. package/dist-esm/lib/exports/ExportDelay.mjs +12 -53
  192. package/dist-esm/lib/exports/ExportDelay.mjs.map +1 -1
  193. package/dist-esm/lib/exports/FontEmbedder.mjs +14 -57
  194. package/dist-esm/lib/exports/FontEmbedder.mjs.map +1 -1
  195. package/dist-esm/lib/exports/StyleEmbedder.mjs +1 -1
  196. package/dist-esm/lib/exports/StyleEmbedder.mjs.map +2 -2
  197. package/dist-esm/lib/exports/getSvgJsx.mjs +12 -10
  198. package/dist-esm/lib/exports/getSvgJsx.mjs.map +2 -2
  199. package/dist-esm/lib/globals/environment.mjs +18 -1
  200. package/dist-esm/lib/globals/environment.mjs.map +2 -2
  201. package/dist-esm/lib/hooks/useColorMode.mjs +19 -0
  202. package/dist-esm/lib/hooks/useColorMode.mjs.map +7 -0
  203. package/dist-esm/lib/hooks/useCursor.mjs +3 -7
  204. package/dist-esm/lib/hooks/useCursor.mjs.map +2 -2
  205. package/dist-esm/lib/hooks/useDarkMode.mjs +4 -4
  206. package/dist-esm/lib/hooks/useDarkMode.mjs.map +2 -2
  207. package/dist-esm/lib/hooks/useEditorComponents.mjs.map +2 -2
  208. package/dist-esm/lib/hooks/useGestureEvents.mjs +171 -127
  209. package/dist-esm/lib/hooks/useGestureEvents.mjs.map +3 -3
  210. package/dist-esm/lib/hooks/useLocalStore.mjs.map +2 -2
  211. package/dist-esm/lib/options.mjs +3 -0
  212. package/dist-esm/lib/options.mjs.map +2 -2
  213. package/dist-esm/lib/primitives/Box.mjs +26 -26
  214. package/dist-esm/lib/primitives/Box.mjs.map +2 -2
  215. package/dist-esm/lib/primitives/Vec.mjs +1 -1
  216. package/dist-esm/lib/primitives/Vec.mjs.map +1 -1
  217. package/dist-esm/lib/primitives/geometry/Arc2d.mjs +2 -2
  218. package/dist-esm/lib/primitives/geometry/Arc2d.mjs.map +2 -2
  219. package/dist-esm/lib/primitives/geometry/Circle2d.mjs +2 -2
  220. package/dist-esm/lib/primitives/geometry/Circle2d.mjs.map +2 -2
  221. package/dist-esm/lib/primitives/geometry/CubicSpline2d.mjs +1 -1
  222. package/dist-esm/lib/primitives/geometry/CubicSpline2d.mjs.map +1 -1
  223. package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs +3 -3
  224. package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs.map +2 -2
  225. package/dist-esm/lib/primitives/geometry/Geometry2d.mjs +10 -9
  226. package/dist-esm/lib/primitives/geometry/Geometry2d.mjs.map +2 -2
  227. package/dist-esm/lib/primitives/geometry/Polyline2d.mjs +2 -2
  228. package/dist-esm/lib/primitives/geometry/Polyline2d.mjs.map +2 -2
  229. package/dist-esm/lib/primitives/geometry/Stadium2d.mjs +1 -1
  230. package/dist-esm/lib/primitives/geometry/Stadium2d.mjs.map +2 -2
  231. package/dist-esm/lib/utils/SharedStylesMap.mjs +1 -1
  232. package/dist-esm/lib/utils/SharedStylesMap.mjs.map +1 -1
  233. package/dist-esm/lib/utils/getSvgPathFromPoints.mjs.map +2 -2
  234. package/dist-esm/lib/utils/reparenting.mjs +2 -1
  235. package/dist-esm/lib/utils/reparenting.mjs.map +2 -2
  236. package/dist-esm/lib/utils/richText.mjs.map +2 -2
  237. package/dist-esm/lib/utils/runtime.mjs +2 -1
  238. package/dist-esm/lib/utils/runtime.mjs.map +2 -2
  239. package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs +3 -2
  240. package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs.map +2 -2
  241. package/dist-esm/lib/utils/sync/hardReset.mjs +0 -8
  242. package/dist-esm/lib/utils/sync/hardReset.mjs.map +2 -2
  243. package/dist-esm/version.mjs +3 -3
  244. package/dist-esm/version.mjs.map +1 -1
  245. package/editor.css +13 -33
  246. package/package.json +7 -8
  247. package/src/index.ts +44 -14
  248. package/src/lib/TldrawEditor.tsx +99 -20
  249. package/src/lib/components/MenuClickCapture.tsx +20 -0
  250. package/src/lib/components/default-components/CanvasShapeIndicators.tsx +3 -3
  251. package/src/lib/components/default-components/DefaultCanvas.tsx +1 -1
  252. package/src/lib/components/default-components/DefaultCollaboratorHint.tsx +1 -1
  253. package/src/lib/components/default-components/DefaultErrorFallback.tsx +1 -0
  254. package/src/lib/config/TLEditorSnapshot.test.ts +1 -1
  255. package/src/lib/config/{createTLUser.ts → createTLCurrentUser.ts} +9 -9
  256. package/src/lib/config/createTLStore.ts +58 -3
  257. package/src/lib/config/defaultAssets.ts +19 -0
  258. package/src/lib/config/defaultShapes.ts +1 -1
  259. package/src/lib/editor/Editor.ts +448 -36
  260. package/src/lib/editor/assets/AssetUtil.ts +85 -0
  261. package/src/lib/editor/managers/ClickManager/ClickManager.ts +1 -1
  262. package/src/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.ts +1 -1
  263. package/src/lib/editor/managers/FontManager/FontManager.test.ts +9 -2
  264. package/src/lib/editor/managers/FontManager/FontManager.ts +1 -67
  265. package/src/lib/editor/managers/InputsManager/InputsManager.ts +30 -30
  266. package/src/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.ts +82 -0
  267. package/src/lib/editor/managers/PerformanceManager/PerformanceManager.test.ts +522 -0
  268. package/src/lib/editor/managers/PerformanceManager/PerformanceManager.ts +583 -0
  269. package/src/lib/editor/managers/PerformanceManager/perf-types.ts +196 -0
  270. package/src/lib/editor/managers/SnapManager/BoundsSnaps.ts +1 -1
  271. package/src/lib/editor/managers/SnapManager/HandleSnaps.ts +1 -1
  272. package/src/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.ts +5 -5
  273. package/src/lib/editor/managers/TextManager/TextManager.test.ts +18 -4
  274. package/src/lib/editor/managers/TextManager/TextManager.ts +140 -34
  275. package/src/lib/editor/managers/ThemeManager/ThemeManager.ts +116 -0
  276. package/src/lib/editor/managers/ThemeManager/defaultThemes.ts +605 -0
  277. package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.test.ts +25 -31
  278. package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.ts +7 -5
  279. package/src/lib/editor/shapes/ShapeUtil.ts +41 -5
  280. package/src/lib/editor/shapes/group/GroupShapeUtil.tsx +1 -1
  281. package/src/lib/editor/shapes/shared/getPerfectDashProps.ts +7 -0
  282. package/src/lib/editor/tools/StateNode.ts +16 -18
  283. package/src/lib/editor/types/SvgExportContext.tsx +5 -0
  284. package/src/lib/editor/types/clipboard-types.ts +2 -1
  285. package/src/lib/editor/types/external-content.ts +1 -0
  286. package/src/lib/exports/StyleEmbedder.ts +1 -1
  287. package/src/lib/exports/getSvgJsx.tsx +22 -16
  288. package/src/lib/globals/environment.ts +18 -0
  289. package/src/lib/hooks/{useIsDarkMode.ts → useColorMode.ts} +9 -5
  290. package/src/lib/hooks/useCursor.ts +3 -7
  291. package/src/lib/hooks/useDarkMode.ts +4 -4
  292. package/src/lib/hooks/useEditorComponents.tsx +1 -1
  293. package/src/lib/hooks/useGestureEvents.ts +240 -168
  294. package/src/lib/hooks/useLocalStore.ts +1 -1
  295. package/src/lib/options.ts +108 -0
  296. package/src/lib/primitives/Box.test.ts +30 -0
  297. package/src/lib/primitives/Box.ts +26 -26
  298. package/src/lib/primitives/Vec.ts +1 -1
  299. package/src/lib/primitives/geometry/Arc2d.ts +2 -2
  300. package/src/lib/primitives/geometry/Circle2d.ts +2 -2
  301. package/src/lib/primitives/geometry/CubicSpline2d.ts +1 -1
  302. package/src/lib/primitives/geometry/Ellipse2d.ts +3 -3
  303. package/src/lib/primitives/geometry/Geometry2d.test.ts +21 -0
  304. package/src/lib/primitives/geometry/Geometry2d.ts +10 -9
  305. package/src/lib/primitives/geometry/Polyline2d.ts +2 -2
  306. package/src/lib/primitives/geometry/Stadium2d.ts +1 -1
  307. package/src/lib/utils/SharedStylesMap.ts +1 -1
  308. package/src/lib/utils/getSvgPathFromPoints.ts +1 -1
  309. package/src/lib/utils/reparenting.ts +6 -2
  310. package/src/lib/utils/richText.ts +1 -1
  311. package/src/lib/utils/runtime.ts +3 -1
  312. package/src/lib/utils/sync/TLLocalSyncClient.test.ts +1 -1
  313. package/src/lib/utils/sync/TLLocalSyncClient.ts +2 -1
  314. package/src/lib/utils/sync/hardReset.ts +0 -8
  315. package/src/version.ts +3 -3
  316. package/dist-cjs/lib/config/createTLUser.js.map +0 -7
  317. package/dist-cjs/lib/hooks/useIsDarkMode.js.map +0 -7
  318. package/dist-esm/lib/config/createTLUser.mjs.map +0 -7
  319. package/dist-esm/lib/hooks/useIsDarkMode.mjs +0 -15
  320. package/dist-esm/lib/hooks/useIsDarkMode.mjs.map +0 -7
@@ -1,5 +1,6 @@
1
1
  import { Atom } from '@tldraw/state';
2
2
  import { AtomSet } from '@tldraw/store';
3
+ import { Awaitable } from '@tldraw/utils';
3
4
  import { BoxModel } from '@tldraw/tlschema';
4
5
  import { ComponentType } from 'react';
5
6
  import { Computed } from '@tldraw/state';
@@ -56,9 +57,12 @@ import { TLCamera } from '@tldraw/tlschema';
56
57
  import { TLCreateShapePartial } from '@tldraw/tlschema';
57
58
  import { TLCursor } from '@tldraw/tlschema';
58
59
  import { TLCursorType } from '@tldraw/tlschema';
60
+ import { TLDefaultColor } from '@tldraw/tlschema';
61
+ import { TLDefaultColorStyle } from '@tldraw/tlschema';
59
62
  import { TLDefaultDashStyle } from '@tldraw/tlschema';
60
63
  import { TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema';
61
64
  import { TLDocument } from '@tldraw/tlschema';
65
+ import { TLFontFace } from '@tldraw/tlschema';
62
66
  import { TLGroupShape } from '@tldraw/tlschema';
63
67
  import { TLHandle } from '@tldraw/tlschema';
64
68
  import { TLImageAsset } from '@tldraw/tlschema';
@@ -80,8 +84,15 @@ import { TLStore } from '@tldraw/tlschema';
80
84
  import { TLStoreProps } from '@tldraw/tlschema';
81
85
  import { TLStoreSchema } from '@tldraw/tlschema';
82
86
  import { TLStoreSnapshot } from '@tldraw/tlschema';
87
+ import { TLTheme } from '@tldraw/tlschema';
88
+ import { TLThemeColors } from '@tldraw/tlschema';
89
+ import { TLThemeId } from '@tldraw/tlschema';
90
+ import { TLThemes } from '@tldraw/tlschema';
91
+ import { TLUnknownAsset } from '@tldraw/tlschema';
83
92
  import { TLUnknownBinding } from '@tldraw/tlschema';
84
93
  import { TLUnknownShape } from '@tldraw/tlschema';
94
+ import { TLUser } from '@tldraw/tlschema';
95
+ import { TLUserStore } from '@tldraw/tlschema';
85
96
  import { TLVideoAsset } from '@tldraw/tlschema';
86
97
  import { UnknownRecord } from '@tldraw/store';
87
98
  import { VecModel } from '@tldraw/tlschema';
@@ -144,6 +155,51 @@ export declare class Arc2d extends Geometry2d {
144
155
  */
145
156
  export declare function areAnglesCompatible(a: number, b: number): boolean;
146
157
 
158
+ /**
159
+ * Abstract base class for defining asset-type-specific behavior.
160
+ *
161
+ * Each asset type (image, video, bookmark, etc.) has a corresponding AssetUtil that handles
162
+ * type-specific operations like determining supported MIME types and creating assets from files.
163
+ *
164
+ * @public
165
+ */
166
+ export declare abstract class AssetUtil<Asset extends TLAsset = TLAsset> {
167
+ editor: Editor;
168
+ /** Configure this asset util's {@link AssetUtil.options | `options`}. */
169
+ static configure<T extends TLAssetUtilConstructor<any, any>>(this: T, options: T extends new (...args: any[]) => {
170
+ options: infer Options;
171
+ } ? Partial<Options> : never): T;
172
+ constructor(editor: Editor);
173
+ /**
174
+ * Options for this asset util. Override this to provide customization options for your asset.
175
+ * Use {@link AssetUtil.configure} to customize existing asset utils.
176
+ */
177
+ options: {};
178
+ static props?: RecordProps<TLUnknownAsset>;
179
+ static migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
180
+ /**
181
+ * The type of the asset util, which should match the asset's type.
182
+ */
183
+ static type: string;
184
+ /**
185
+ * Get the default props for an asset of this type.
186
+ */
187
+ abstract getDefaultProps(): Asset['props'];
188
+ /**
189
+ * Get the MIME types that this asset type supports.
190
+ * Return an empty array if this asset type doesn't support files (e.g. bookmarks).
191
+ */
192
+ getSupportedMimeTypes(): readonly string[];
193
+ /**
194
+ * Check whether this asset type accepts a given MIME type.
195
+ */
196
+ acceptsMimeType(mimeType: string): boolean;
197
+ /**
198
+ * Create an asset from a file. Return null if this asset type can't handle the file.
199
+ */
200
+ getAssetFromFile(_file: File, _assetId: TLAssetId): Promise<Asset | null>;
201
+ }
202
+
147
203
  /** @public */
148
204
  export declare function average(A: VecLike, B: VecLike): string;
149
205
 
@@ -164,6 +220,12 @@ export declare abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> ext
164
220
  getInterpolatedProps(startShape: Shape, endShape: Shape, t: number): Shape['props'];
165
221
  }
166
222
 
223
+ /** @public */
224
+ export declare interface BatchMeasurementRequest {
225
+ html: string;
226
+ opts: TLMeasureTextOpts;
227
+ }
228
+
167
229
  /**
168
230
  * Options passed to {@link BindingUtil.onBeforeChange} and {@link BindingUtil.onAfterChange},
169
231
  * describing the data associated with a binding being changed.
@@ -711,6 +773,12 @@ export declare function createDeepLinkString(deepLink: TLDeepLink): string;
711
773
  */
712
774
  export declare function createSessionStateSnapshotSignal(store: TLStore): Signal<null | TLSessionStateSnapshot>;
713
775
 
776
+ /** @public */
777
+ export declare function createTLCurrentUser(opts?: {
778
+ setUserPreferences?: ((userPreferences: TLUserPreferences) => void) | undefined;
779
+ userPreferences?: Signal<TLUserPreferences, unknown> | undefined;
780
+ }): TLCurrentUser;
781
+
714
782
  /**
715
783
  * A helper for creating a TLStore schema from either an object with shapeUtils, bindingUtils, and
716
784
  * migrations, or a schema.
@@ -728,13 +796,7 @@ export declare function createTLSchemaFromUtils(opts: TLStoreSchemaOptions): Sto
728
796
  *
729
797
  * @public
730
798
  */
731
- export declare function createTLStore({ initialData, defaultName, id, assets, onMount, collaboration, ...rest }?: TLStoreOptions): TLStore;
732
-
733
- /** @public */
734
- export declare function createTLUser(opts?: {
735
- setUserPreferences?: ((userPreferences: TLUserPreferences) => void) | undefined;
736
- userPreferences?: Signal<TLUserPreferences, unknown> | undefined;
737
- }): TLUser;
799
+ export declare function createTLStore({ initialData, defaultName, id, assets, users, onMount, collaboration, themes, ...rest }?: TLStoreOptions): TLStore;
738
800
 
739
801
  /** @public */
740
802
  export declare class CubicBezier2d extends Polyline2d {
@@ -809,6 +871,13 @@ export declare interface DebugFlagDefaults<T> {
809
871
 
810
872
  /* Excluded from this release type: DEFAULT_CAMERA_OPTIONS */
811
873
 
874
+ /**
875
+ * The default theme definition containing color palettes for both light and dark modes.
876
+ *
877
+ * @public
878
+ */
879
+ export declare const DEFAULT_THEME: TLTheme;
880
+
812
881
  /** @public @react */
813
882
  export declare function DefaultBackground(): JSX.Element;
814
883
 
@@ -923,6 +992,9 @@ export declare const defaultTldrawOptions: {
923
992
  readonly maxShapesPerPage: 4000;
924
993
  readonly multiClickDurationMs: 200;
925
994
  readonly nonce: undefined;
995
+ readonly onBeforeCopyToClipboard: undefined;
996
+ readonly onBeforePasteFromClipboard: undefined;
997
+ readonly onClipboardPasteRaw: undefined;
926
998
  readonly quickZoomPreservesScreenBounds: true;
927
999
  readonly snapThreshold: 8;
928
1000
  readonly spacebarPanning: true;
@@ -953,6 +1025,9 @@ export declare const defaultUserPreferences: Readonly<{
953
1025
  name: "";
954
1026
  }>;
955
1027
 
1028
+ /** @public */
1029
+ export declare const defaultUserStore: TLUserStore;
1030
+
956
1031
  /**
957
1032
  * Convert degrees to radians.
958
1033
  *
@@ -1028,7 +1103,7 @@ export declare class EdgeScrollManager {
1028
1103
  /** @public */
1029
1104
  export declare class Editor extends EventEmitter<TLEventMap> {
1030
1105
  readonly id: string;
1031
- constructor({ store, user, shapeUtils, bindingUtils, tools, getContainer, cameraOptions, initialState, autoFocus, inferDarkMode, options: _options, textOptions: _textOptions, getShapeVisibility, fontAssetUrls }: TLEditorOptions);
1106
+ constructor({ store, user, shapeUtils, bindingUtils, assetUtils: assetUtilConstructors, tools, getContainer, cameraOptions, initialState, autoFocus, options: _options, textOptions: _textOptions, getShapeVisibility, colorScheme, fontAssetUrls, themes, initialTheme }: TLEditorOptions);
1032
1107
  private readonly _getShapeVisibility?;
1033
1108
  private getIsShapeHiddenCache;
1034
1109
  isShapeHidden(shapeOrId: TLShape | TLShapeId): boolean;
@@ -1091,7 +1166,13 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1091
1166
  * @public
1092
1167
  */
1093
1168
  readonly snaps: SnapManager;
1094
- private readonly _spatialIndex;
1169
+ /**
1170
+ * A manager for performance measurement hooks.
1171
+ *
1172
+ * @public
1173
+ */
1174
+ readonly performance: PerformanceManager;
1175
+ /* Excluded from this release type: _spatialIndex */
1095
1176
  /**
1096
1177
  * A manager for the any asynchronous events and making sure they're
1097
1178
  * cleaned up upon disposal.
@@ -1110,6 +1191,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1110
1191
  * @public
1111
1192
  */
1112
1193
  readonly user: UserPreferencesManager;
1194
+ /* Excluded from this release type: _themeManager */
1113
1195
  /**
1114
1196
  * A helper for measuring text.
1115
1197
  *
@@ -1160,6 +1242,83 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1160
1242
  * @public
1161
1243
  */
1162
1244
  dispose(): void;
1245
+ /**
1246
+ * Get the current color mode (`'light'` or `'dark'`), based on the user's dark mode preference.
1247
+ *
1248
+ * @public
1249
+ */
1250
+ getColorMode(): 'dark' | 'light';
1251
+ /**
1252
+ * Set the color mode. Note that this is a convenience method that passes the mode to
1253
+ * `user.updateUserPreferences`, which is the source of truth for the user's color mode preference.
1254
+ *
1255
+ * @public
1256
+ */
1257
+ setColorMode(mode: 'dark' | 'light'): this;
1258
+ /**
1259
+ * Get the id of the current theme.
1260
+ *
1261
+ * @public
1262
+ */
1263
+ getCurrentThemeId(): TLThemeId;
1264
+ /**
1265
+ * Get the current theme definition.
1266
+ *
1267
+ * @public
1268
+ */
1269
+ getCurrentTheme(): TLTheme;
1270
+ /**
1271
+ * Set the current theme by id.
1272
+ *
1273
+ * @public
1274
+ */
1275
+ setCurrentTheme(id: TLThemeId): this;
1276
+ /**
1277
+ * Get all registered theme definitions.
1278
+ *
1279
+ * @public
1280
+ */
1281
+ getThemes(): TLThemes;
1282
+ /**
1283
+ * Get a single theme definition by id.
1284
+ *
1285
+ * @public
1286
+ */
1287
+ getTheme(id: TLThemeId): TLTheme | undefined;
1288
+ /**
1289
+ * Replace all theme definitions, or update them via a callback that receives a deep copy.
1290
+ * The `'default'` theme must always be present in the result.
1291
+ *
1292
+ * @example
1293
+ * ```ts
1294
+ * // Replace all themes
1295
+ * editor.updateThemes({ default: myDefaultTheme, ocean: myOceanTheme })
1296
+ *
1297
+ * // Update via callback
1298
+ * editor.updateThemes((themes) => {
1299
+ * delete themes.ocean
1300
+ * return themes
1301
+ * })
1302
+ * ```
1303
+ *
1304
+ * @public
1305
+ */
1306
+ updateThemes(themes: ((themes: TLThemes) => TLThemes) | TLThemes): this;
1307
+ /**
1308
+ * Register or update a single theme definition. The theme is keyed by its `id` property.
1309
+ *
1310
+ * @example
1311
+ * ```ts
1312
+ * // Override a property on the default theme
1313
+ * editor.updateTheme({ ...editor.getTheme('default')!, fontSize: 24 })
1314
+ *
1315
+ * // Register a new theme
1316
+ * editor.updateTheme({ id: 'ocean', ...myOceanTheme })
1317
+ * ```
1318
+ *
1319
+ * @public
1320
+ */
1321
+ updateTheme(theme: TLTheme): this;
1163
1322
  /**
1164
1323
  * A map of shape utility classes (TLShapeUtils) by shape type.
1165
1324
  *
@@ -1168,6 +1327,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1168
1327
  shapeUtils: {
1169
1328
  readonly [K in string]?: ShapeUtil<TLShape>;
1170
1329
  };
1330
+ /* Excluded from this release type: _shapeUtilsByAssetType */
1171
1331
  styleProps: {
1172
1332
  [key: string]: Map<StyleProp<any>, string>;
1173
1333
  };
@@ -1199,6 +1359,15 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1199
1359
  hasShapeUtil(shape: TLShape | TLShapePartial<TLShape>): boolean;
1200
1360
  hasShapeUtil(type: TLShape['type']): boolean;
1201
1361
  hasShapeUtil<T extends ShapeUtil>(type: T extends ShapeUtil<infer R> ? R['type'] : string): boolean;
1362
+ /**
1363
+ * Get the shape util that handles the given asset type.
1364
+ * Returns the shape util whose {@link ShapeUtil.handledAssetTypes} includes
1365
+ * the given asset type, or undefined if none matches.
1366
+ *
1367
+ * @param assetType - The asset type string.
1368
+ * @public
1369
+ */
1370
+ getShapeUtilForAssetType(assetType: string): ShapeUtil | undefined;
1202
1371
  /**
1203
1372
  * A map of shape utility classes (TLShapeUtils) by shape type.
1204
1373
  *
@@ -1229,6 +1398,40 @@ export declare class Editor extends EventEmitter<TLEventMap> {
1229
1398
  type: S['type'];
1230
1399
  } | S): BindingUtil<S>;
1231
1400
  getBindingUtil<T extends BindingUtil>(type: T extends BindingUtil<infer R> ? R['type'] : string): T;
1401
+ /**
1402
+ * A map of asset utility classes by asset type.
1403
+ *
1404
+ * @public
1405
+ */
1406
+ assetUtils: {
1407
+ readonly [K in string]?: AssetUtil<TLAsset>;
1408
+ };
1409
+ /**
1410
+ * Get an asset util from an asset or asset type.
1411
+ *
1412
+ * @param arg - An asset, asset type string, or object with type.
1413
+ *
1414
+ * @public
1415
+ */
1416
+ getAssetUtil<S extends TLAsset>(asset: {
1417
+ type: S['type'];
1418
+ } | S): AssetUtil<S>;
1419
+ getAssetUtil(type: string): AssetUtil;
1420
+ /**
1421
+ * Returns true if the editor has an asset util for the given asset type.
1422
+ *
1423
+ * @public
1424
+ */
1425
+ hasAssetUtil(arg: {
1426
+ type: string;
1427
+ } | string): boolean;
1428
+ /**
1429
+ * Get the asset util that accepts the given MIME type.
1430
+ * Returns null if no registered asset util accepts the MIME type.
1431
+ *
1432
+ * @public
1433
+ */
1434
+ getAssetUtilForMimeType(mimeType: string): AssetUtil | null;
1232
1435
  /**
1233
1436
  * A manager for the editor's history.
1234
1437
  *
@@ -2259,6 +2462,32 @@ export declare class Editor extends EventEmitter<TLEventMap> {
2259
2462
  * @public
2260
2463
  */
2261
2464
  getCollaboratorsOnCurrentPage(): TLInstancePresence[];
2465
+ /**
2466
+ * Get the current user's ID for attribution purposes.
2467
+ * Also ensures a `user:` record exists in the store for the current user.
2468
+ * Returns `null` when the user store has no current user.
2469
+ *
2470
+ * @public
2471
+ */
2472
+ getAttributionUserId(): null | string;
2473
+ /* Excluded from this release type: _ensureUserRecord */
2474
+ /**
2475
+ * Resolve a display name for a user ID. Asks the
2476
+ * {@link @tldraw/tlschema#TLUserStore} first (the app's source of truth),
2477
+ * falling back to the `user:` record in the store.
2478
+ *
2479
+ * @public
2480
+ */
2481
+ getAttributionDisplayName(userId: null | string): null | string;
2482
+ /**
2483
+ * Resolve a user record by ID. Asks the
2484
+ * {@link @tldraw/tlschema#TLUserStore} first (the app's source of truth),
2485
+ * falling back to the `user:` record in the store.
2486
+ *
2487
+ * @public
2488
+ */
2489
+ getAttributionUser(userId: null | string): null | TLUser;
2490
+ /* Excluded from this release type: _getReferencedUserIds */
2262
2491
  private _isLockedOnFollowingUser;
2263
2492
  /**
2264
2493
  * Start viewport-following a user.
@@ -4353,6 +4582,35 @@ export declare interface Geometry2dOptions extends TransformedGeometry2dOptions
4353
4582
  */
4354
4583
  export declare function getArcMeasure(A: number, B: number, sweepFlag: number, largeArcFlag: number): number;
4355
4584
 
4585
+ /**
4586
+ * Resolves a color style value to its actual CSS color string for a given theme and variant.
4587
+ * If the color is not a default theme color, returns the color value as-is.
4588
+ *
4589
+ * @param colors - The color palette for the current color mode (e.g. `theme.colors[colorMode]`)
4590
+ * @param color - The color style value to resolve
4591
+ * @param variant - Which variant of the color to return (solid, fill, pattern, etc.)
4592
+ * @returns The CSS color string for the specified color and variant
4593
+ *
4594
+ * @example
4595
+ * ```ts
4596
+ * import { getColorValue } from 'tldraw'
4597
+ *
4598
+ * const colors = editor.getCurrentTheme().colors[editor.getColorMode()]
4599
+ *
4600
+ * // Get the solid variant of red
4601
+ * const redSolid = getColorValue(colors, 'red', 'solid') // '#e03131'
4602
+ *
4603
+ * // Get the fill variant of blue
4604
+ * const blueFill = getColorValue(colors, 'blue', 'fill') // '#4465e9'
4605
+ *
4606
+ * // Custom color passes through unchanged
4607
+ * const customColor = getColorValue(colors, '#ff0000', 'solid') // '#ff0000'
4608
+ * ```
4609
+ *
4610
+ * @public
4611
+ */
4612
+ export declare function getColorValue(colors: TLThemeColors, color: string | TLDefaultColorStyle, variant: keyof TLDefaultColor): string;
4613
+
4356
4614
  /** @public */
4357
4615
  export declare function getCursor(cursor: TLCursorType, rotation?: number, color?: string): string;
4358
4616
 
@@ -4523,7 +4781,7 @@ export declare class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
4523
4781
  static type: "group";
4524
4782
  static props: RecordProps<TLGroupShape>;
4525
4783
  static migrations: TLPropsMigrations;
4526
- hideSelectionBoundsFg(): boolean;
4784
+ hideSelectionBoundsFg(shape: TLGroupShape): boolean;
4527
4785
  canBind(): boolean;
4528
4786
  canResize(): boolean;
4529
4787
  canResizeChildren(): boolean;
@@ -5165,6 +5423,94 @@ export declare function parseDeepLinkString(deepLinkString: string): TLDeepLink;
5165
5423
  /** @public */
5166
5424
  export declare type PerfectDashTerminal = 'none' | 'outset' | 'skip';
5167
5425
 
5426
+ /**
5427
+ * Optional adapter that pipes PerformanceManager events into browser
5428
+ * `performance.mark()` / `performance.measure()` for DevTools integration.
5429
+ *
5430
+ * Tree-shakeable — only included if imported.
5431
+ *
5432
+ * @example
5433
+ * ```ts
5434
+ * const adapter = new PerformanceApiAdapter(editor.performance)
5435
+ * // ... later
5436
+ * adapter.dispose()
5437
+ * ```
5438
+ *
5439
+ * @public
5440
+ */
5441
+ export declare class PerformanceApiAdapter {
5442
+ private cleanups;
5443
+ constructor(perfManager: PerformanceManager);
5444
+ /** Remove all listeners and stop piping events. @public */
5445
+ dispose(): void;
5446
+ }
5447
+
5448
+ /**
5449
+ * Manages performance event subscriptions for the editor. Available as `editor.performance`.
5450
+ *
5451
+ * Listeners are lazy — internal editor hooks (frame, shape events) are only attached while
5452
+ * at least one subscriber exists, so there is zero overhead when unused.
5453
+ *
5454
+ * @example
5455
+ * ```ts
5456
+ * const unsub = editor.performance.on('interaction-end', (event) => {
5457
+ * console.log(`${event.name}: ${event.fps.toFixed(1)} fps, p95=${event.p95FrameTime.toFixed(1)}ms`)
5458
+ * })
5459
+ * ```
5460
+ *
5461
+ * @public
5462
+ */
5463
+ export declare class PerformanceManager {
5464
+ /* Excluded from this release type: emitter */
5465
+ private editor;
5466
+ private activeInteraction;
5467
+ private activeCamera;
5468
+ private frameCleanup;
5469
+ private shapeCreatedCleanup;
5470
+ private shapeEditedCleanup;
5471
+ private shapeDeletedCleanup;
5472
+ private loafObserver;
5473
+ constructor(editor: Editor);
5474
+ /**
5475
+ * Subscribe to a performance event. Returns an unsubscribe function.
5476
+ *
5477
+ * @example
5478
+ * ```ts
5479
+ * const unsub = editor.performance.on('interaction-end', (event) => {
5480
+ * sendToAnalytics({ name: event.name, fps: event.fps, p95: event.p95FrameTime })
5481
+ * })
5482
+ * // later: unsub()
5483
+ * ```
5484
+ *
5485
+ * @public
5486
+ */
5487
+ on<K extends keyof TLPerfEventMap>(event: K, fn: (...args: TLPerfEventMap[K]) => void): () => void;
5488
+ /**
5489
+ * Subscribe to a performance event once. The listener is removed after the first invocation.
5490
+ * Returns an unsubscribe function for early removal.
5491
+ *
5492
+ * @public
5493
+ */
5494
+ once<K extends keyof TLPerfEventMap>(event: K, fn: (...args: TLPerfEventMap[K]) => void): () => void;
5495
+ /* Excluded from this release type: dispose */
5496
+ /* Excluded from this release type: _notifyInteractionStart */
5497
+ /* Excluded from this release type: _notifyInteractionEnd */
5498
+ /* Excluded from this release type: _notifyCameraOperation */
5499
+ /* Excluded from this release type: _notifyUndoRedo */
5500
+ private _startCameraSession;
5501
+ private _endCameraSession;
5502
+ private _onFrame;
5503
+ private _onShapesCreated;
5504
+ private _onShapesEdited;
5505
+ private _onShapesDeleted;
5506
+ private _startLoafObserver;
5507
+ private _stopLoafObserver;
5508
+ private _needsFrameListener;
5509
+ private _needsLoafObserver;
5510
+ private _maybeAttachLazyListeners;
5511
+ private _maybeDetachLazyListeners;
5512
+ }
5513
+
5168
5514
  /**
5169
5515
  * Find the approximate perimeter of an ellipse.
5170
5516
  *
@@ -5359,6 +5705,16 @@ export declare function resizeScaled(shape: TLBaseShape<any, {
5359
5705
  y: number;
5360
5706
  };
5361
5707
 
5708
+ /**
5709
+ * Resolve a partial set of user-provided themes into a complete `TLThemes`
5710
+ * record by merging with `DEFAULT_THEME`. The result is suitable for passing to
5711
+ * `registerColorsFromThemes`, `registerFontsFromThemes`, and the
5712
+ * `ThemeManager` constructor.
5713
+ *
5714
+ * @public
5715
+ */
5716
+ export declare function resolveThemes(themes?: Partial<TLThemes>): TLThemes;
5717
+
5362
5718
  /** @public */
5363
5719
  export declare type RichTextFontVisitor = (node: TiptapNode, state: RichTextFontVisitorState, addFont: (font: TLFontFace) => void) => RichTextFontVisitorState;
5364
5720
 
@@ -5640,12 +5996,32 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5640
5996
  * @public
5641
5997
  */
5642
5998
  static type: string;
5999
+ /**
6000
+ * The asset types that this shape can be created from.
6001
+ * When a file is dropped on the canvas, the editor finds the shape util
6002
+ * whose `handledAssetTypes` includes the asset's type and calls
6003
+ * {@link ShapeUtil.createShapeForAsset} to produce the shape.
6004
+ *
6005
+ * @public
6006
+ */
6007
+ static handledAssetTypes?: readonly string[];
5643
6008
  /**
5644
6009
  * Get the default props for a shape.
5645
6010
  *
5646
6011
  * @public
5647
6012
  */
5648
6013
  abstract getDefaultProps(): Shape['props'];
6014
+ /**
6015
+ * Create a shape partial for placing an asset on the canvas.
6016
+ * Only called for shapes whose constructor declares matching
6017
+ * {@link ShapeUtil.handledAssetTypes | `handledAssetTypes`}.
6018
+ *
6019
+ * @param asset - The asset to create a shape for.
6020
+ * @param position - Where to place the shape.
6021
+ * @returns A shape partial, or null if this shape can't be created for the asset.
6022
+ * @public
6023
+ */
6024
+ createShapeForAsset?(asset: TLAsset, position: VecModel): null | TLShapePartial;
5649
6025
  /**
5650
6026
  * Get the shape's geometry.
5651
6027
  *
@@ -5726,7 +6102,7 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5726
6102
  *
5727
6103
  * @public
5728
6104
  */
5729
- canBind(_opts: TLShapeUtilCanBindOpts): boolean;
6105
+ canBind(opts: TLShapeUtilCanBindOpts): boolean;
5730
6106
  /**
5731
6107
  * Whether the shape can be double clicked to edit.
5732
6108
  *
@@ -5907,7 +6283,7 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5907
6283
  * @param type - The shape type.
5908
6284
  * @public
5909
6285
  */
5910
- canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']): boolean;
6286
+ canReceiveNewChildrenOfType(shape: Shape, type: TLShape['type']): boolean;
5911
6287
  /**
5912
6288
  * Get the shape as an SVG object.
5913
6289
  *
@@ -5947,6 +6323,14 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
5947
6323
  */
5948
6324
  getHandleSnapGeometry(shape: Shape): HandleSnapGeometry;
5949
6325
  getText(shape: Shape): string | undefined;
6326
+ /**
6327
+ * Return user IDs referenced in shape-specific props.
6328
+ * Used when copying shapes to include referenced users on the clipboard.
6329
+ * Override this if your shape stores user IDs in custom props.
6330
+ *
6331
+ * @public
6332
+ */
6333
+ getReferencedUserIds(shape: Shape): string[];
5950
6334
  getAriaDescriptor(shape: Shape): string | undefined;
5951
6335
  /**
5952
6336
  * A callback called just before a shape is created. This method provides a last chance to modify
@@ -6342,6 +6726,8 @@ export declare abstract class StateNode implements Partial<TLEventHandlers> {
6342
6726
  static children?: () => TLStateNodeConstructor[];
6343
6727
  static isLockable: boolean;
6344
6728
  static useCoalescedEvents: boolean;
6729
+ /** Set to `true` in subclasses to emit interaction-start/end performance events when this state is entered/exited. */
6730
+ static trackPerformance: boolean;
6345
6731
  id: string;
6346
6732
  type: 'branch' | 'leaf' | 'root';
6347
6733
  shapeType?: string;
@@ -6476,6 +6862,10 @@ export declare interface SvgExportContext {
6476
6862
  * Whether the export should be in dark mode.
6477
6863
  */
6478
6864
  readonly isDarkMode: boolean;
6865
+ /**
6866
+ * The color mode to use for this export.
6867
+ */
6868
+ readonly colorMode: 'dark' | 'light';
6479
6869
  /**
6480
6870
  * The scale of the export - how much CSS pixels will be scaled up/down by.
6481
6871
  */
@@ -6507,15 +6897,18 @@ export declare const TAB_ID: string;
6507
6897
  export declare class TextManager {
6508
6898
  editor: Editor;
6509
6899
  private elm;
6900
+ private poolElms;
6510
6901
  constructor(editor: Editor);
6902
+ private createMeasurementEl;
6903
+ private resetElementStyles;
6511
6904
  private setElementStyles;
6905
+ private getMeasureStyles;
6512
6906
  dispose(): void;
6513
- measureText(textToMeasure: string, opts: TLMeasureTextOpts): BoxModel & {
6514
- scrollWidth: number;
6515
- };
6516
- measureHtml(html: string, opts: TLMeasureTextOpts): BoxModel & {
6517
- scrollWidth: number;
6518
- };
6907
+ private ensurePoolSize;
6908
+ private getPoolItem;
6909
+ measureHtmlBatch(requests: BatchMeasurementRequest[]): TLMeasuredTextSize[];
6910
+ measureText(textToMeasure: string, opts: TLMeasureTextOpts): TLMeasuredTextSize;
6911
+ measureHtml(html: string, opts: TLMeasureTextOpts): TLMeasuredTextSize;
6519
6912
  /**
6520
6913
  * Given an html element, measure the position of each span of unbroken
6521
6914
  * word/white-space characters within any text nodes it contains.
@@ -6543,6 +6936,47 @@ export declare class TextManager {
6543
6936
  }[];
6544
6937
  }
6545
6938
 
6939
+ /**
6940
+ * Manages the editor's color themes.
6941
+ *
6942
+ * Stores named theme definitions (each containing light and dark color palettes
6943
+ * alongside shared properties like font size). The current theme is resolved by
6944
+ * combining the current theme name with the user's color mode preference.
6945
+ *
6946
+ * **Terminology:**
6947
+ * - **Theme** (`TLTheme`): A named set of colors and typographic values for both light and dark modes.
6948
+ * - **Color mode** (`'light' | 'dark'`): The resolved appearance mode, derived from the user's
6949
+ * `colorScheme` preference (`'light' | 'dark' | 'system'`). Access via `getColorMode()`.
6950
+ *
6951
+ * @public
6952
+ */
6953
+ export declare class ThemeManager {
6954
+ private readonly editor;
6955
+ private readonly _themes;
6956
+ private readonly _currentThemeId;
6957
+ constructor(editor: Editor, options: {
6958
+ initial: TLThemeId;
6959
+ themes: TLThemes;
6960
+ });
6961
+ /** Get the current color mode based on the user's dark mode preference. */
6962
+ getColorMode(): 'dark' | 'light';
6963
+ /** Get all registered theme definitions. */
6964
+ getThemes(): TLThemes;
6965
+ /** Get a single theme definition by id. */
6966
+ getTheme(id: TLThemeId): TLTheme | undefined;
6967
+ /** Get the id of the current theme. */
6968
+ getCurrentThemeId(): TLThemeId;
6969
+ getCurrentTheme(): TLTheme;
6970
+ /** Set the current theme by id. The theme must have been previously registered. */
6971
+ setCurrentTheme(id: TLThemeId): void;
6972
+ /** Replace all theme definitions, or update them via a callback that receives a deep copy. */
6973
+ updateThemes(themes: ((themes: TLThemes) => TLThemes) | TLThemes): void;
6974
+ /** Register or update a named theme definition. */
6975
+ updateTheme(theme: TLTheme): void;
6976
+ /** Clean up any resources held by the manager. */
6977
+ dispose(): void;
6978
+ }
6979
+
6546
6980
  /* Excluded from this release type: TickManager */
6547
6981
 
6548
6982
  /**
@@ -6561,12 +6995,23 @@ export declare type TiptapNode = Node_2;
6561
6995
  /** @public */
6562
6996
  export declare type TLAdjacentDirection = 'down' | 'left' | 'next' | 'prev' | 'right' | 'up';
6563
6997
 
6998
+ /** @public */
6999
+ export declare type TLAnyAssetUtilConstructor = TLAssetUtilConstructor<any>;
7000
+
6564
7001
  /** @public */
6565
7002
  export declare type TLAnyBindingUtilConstructor = TLBindingUtilConstructor<any>;
6566
7003
 
6567
7004
  /** @public */
6568
7005
  export declare type TLAnyShapeUtilConstructor = TLShapeUtilConstructor<any>;
6569
7006
 
7007
+ /** @public */
7008
+ export declare interface TLAssetUtilConstructor<T extends TLAsset = TLAsset, U extends AssetUtil<T> = AssetUtil<T>> {
7009
+ new (editor: Editor): U;
7010
+ type: T['type'];
7011
+ props?: RecordProps<T>;
7012
+ migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
7013
+ }
7014
+
6570
7015
  /** @public */
6571
7016
  export declare type TLBaseBoxShape = ExtractShapeByProps<{
6572
7017
  h: number;
@@ -6656,6 +7101,29 @@ export declare interface TLCameraConstraints {
6656
7101
  };
6657
7102
  }
6658
7103
 
7104
+ /**
7105
+ * Emitted when a camera operation ends (after a 50ms debounce), with aggregated frame time stats.
7106
+ * @public
7107
+ */
7108
+ export declare interface TLCameraEndPerfEvent extends TLPerfFrameTimeStats {
7109
+ /** Whether this was a pan or zoom operation. */
7110
+ type: 'panning' | 'zooming';
7111
+ /** Total shapes on the current page. */
7112
+ shapeCount: number;
7113
+ /** Number of shapes visible (not culled) in the viewport. */
7114
+ visibleShapeCount: number;
7115
+ /** Number of shapes culled (off-screen) from rendering. */
7116
+ culledShapeCount: number;
7117
+ /** Viewport width in screen pixels. */
7118
+ viewportWidth: number;
7119
+ /** Viewport height in screen pixels. */
7120
+ viewportHeight: number;
7121
+ /** Camera zoom level (`camera.z`) at session end. */
7122
+ zoomLevel: number;
7123
+ /** `performance.now()` when the camera session ended. */
7124
+ timestamp: number;
7125
+ }
7126
+
6659
7127
  /** @public */
6660
7128
  export declare interface TLCameraMoveOptions {
6661
7129
  /** Whether to move the camera immediately, rather than on the next tick. */
@@ -6694,6 +7162,17 @@ export declare interface TLCameraOptions {
6694
7162
  constraints?: TLCameraConstraints;
6695
7163
  }
6696
7164
 
7165
+ /**
7166
+ * Emitted when a camera operation (pan or zoom) begins.
7167
+ * @public
7168
+ */
7169
+ export declare interface TLCameraStartPerfEvent {
7170
+ /** Whether this is a pan or zoom operation. */
7171
+ type: 'panning' | 'zooming';
7172
+ /** `performance.now()` when the camera session started. */
7173
+ timestamp: number;
7174
+ }
7175
+
6697
7176
  /** @public */
6698
7177
  export declare type TLCancelEvent = (info: TLCancelEventInfo) => void;
6699
7178
 
@@ -6727,6 +7206,40 @@ export declare type TLCLickEventName = 'double_click' | 'quadruple_click' | 'tri
6727
7206
  /** @public */
6728
7207
  export declare type TLClickState = 'idle' | 'overflow' | 'pendingDouble' | 'pendingOverflow' | 'pendingQuadruple' | 'pendingTriple';
6729
7208
 
7209
+ /**
7210
+ * Raw clipboard paste payload, before tldraw parses clipboard contents into {@link TLExternalContent}.
7211
+ *
7212
+ * - `native-event`: from the `paste` event — `clipboardData` is available synchronously (unlike async
7213
+ * `navigator.clipboard.read()`).
7214
+ * - `clipboard-read`: from an explicit `navigator.clipboard.read()` call — only `ClipboardItem[]`
7215
+ * exists
7216
+ * (no `DataTransfer`).
7217
+ *
7218
+ * @public
7219
+ */
7220
+ export declare type TLClipboardPasteRawInfo = {
7221
+ readonly clipboardData: DataTransfer | null;
7222
+ readonly editor: Editor;
7223
+ readonly event: ClipboardEvent;
7224
+ readonly point: undefined | VecLike;
7225
+ readonly source: 'native-event';
7226
+ } | {
7227
+ readonly clipboardItems: readonly ClipboardItem[];
7228
+ readonly editor: Editor;
7229
+ readonly point: undefined | VecLike;
7230
+ readonly source: 'clipboard-read';
7231
+ };
7232
+
7233
+ /**
7234
+ * Identifies how a clipboard write was triggered (copy vs cut, keyboard vs menu).
7235
+ *
7236
+ * @public
7237
+ */
7238
+ export declare interface TLClipboardWriteInfo {
7239
+ readonly operation: 'copy' | 'cut';
7240
+ readonly source: 'menu' | 'native';
7241
+ }
7242
+
6730
7243
  /** @public */
6731
7244
  export declare interface TLCollaboratorHintProps {
6732
7245
  userId: string;
@@ -6754,6 +7267,7 @@ export declare interface TLContent {
6754
7267
  rootShapeIds: TLShapeId[];
6755
7268
  assets: TLAsset[];
6756
7269
  schema: SerializedSchema;
7270
+ users?: TLUser[];
6757
7271
  }
6758
7272
 
6759
7273
  /**
@@ -6775,6 +7289,12 @@ export declare interface TLCropInfo<T extends TLShape> {
6775
7289
  aspectRatioLocked?: boolean;
6776
7290
  }
6777
7291
 
7292
+ /** @public */
7293
+ export declare interface TLCurrentUser {
7294
+ readonly userPreferences: Signal<TLUserPreferences>;
7295
+ readonly setUserPreferences: (userPreferences: TLUserPreferences) => void;
7296
+ }
7297
+
6778
7298
  /** @public */
6779
7299
  export declare interface TLCursorProps {
6780
7300
  userId: string;
@@ -6875,6 +7395,10 @@ export declare interface TldrawEditorBaseProps {
6875
7395
  * An array of binding utils to use in the editor.
6876
7396
  */
6877
7397
  bindingUtils?: readonly TLAnyBindingUtilConstructor[];
7398
+ /**
7399
+ * An array of asset utils to use in the editor.
7400
+ */
7401
+ assetUtils?: readonly TLAnyAssetUtilConstructor[];
6878
7402
  /**
6879
7403
  * An array of tools to add to the editor's state chart.
6880
7404
  */
@@ -6902,11 +7426,23 @@ export declare interface TldrawEditorBaseProps {
6902
7426
  /**
6903
7427
  * The user interacting with the editor.
6904
7428
  */
6905
- user?: TLUser;
7429
+ user?: TLCurrentUser;
7430
+ /**
7431
+ * The editor's color scheme. Defaults to `'light'`.
7432
+ *
7433
+ * - `'light'` - Always use light mode.
7434
+ * - `'dark'` - Always use dark mode.
7435
+ * - `'system'` - Follow the OS color scheme preference.
7436
+ */
7437
+ colorScheme?: 'dark' | 'light' | 'system';
7438
+ /**
7439
+ * Named themes for the editor.
7440
+ */
7441
+ themes?: Partial<TLThemes>;
6906
7442
  /**
6907
- * Whether to infer dark mode from the user's OS. Defaults to false.
7443
+ * The id of the initially active theme. Defaults to `'default'`.
6908
7444
  */
6909
- inferDarkMode?: boolean;
7445
+ initialTheme?: TLThemeId;
6910
7446
  /**
6911
7447
  * Camera options for the editor.
6912
7448
  *
@@ -7166,6 +7702,72 @@ export declare interface TldrawOptions {
7166
7702
  * viewport's page dimensions regardless of overview zoom changes.
7167
7703
  */
7168
7704
  readonly quickZoomPreservesScreenBounds: boolean;
7705
+ /**
7706
+ * Called before content is written to the clipboard during a copy or cut operation.
7707
+ * Receives the serialized content (shapes, bindings, assets) and can filter or transform
7708
+ * it before it reaches the clipboard.
7709
+ *
7710
+ * Return a modified `TLContent` object to change what is copied or cut. Return `false` to
7711
+ * cancel the clipboard write (for cut, the selected shapes are not removed). Return `void`
7712
+ * (or `undefined`) to pass through unchanged. You may return a `Promise` of those values if
7713
+ * the hook is async.
7714
+ *
7715
+ * @example
7716
+ * ```tsx
7717
+ * // Filter out "locked" shapes from copy
7718
+ * onBeforeCopyToClipboard({ content, operation }) {
7719
+ * return {
7720
+ * ...content,
7721
+ * shapes: content.shapes.filter(s => !s.meta.locked),
7722
+ * rootShapeIds: content.rootShapeIds.filter(id =>
7723
+ * content.shapes.find(s => s.id === id && !s.meta.locked)
7724
+ * ),
7725
+ * }
7726
+ * }
7727
+ * ```
7728
+ */
7729
+ onBeforeCopyToClipboard?(info: {
7730
+ content: TLContent;
7731
+ editor: Editor;
7732
+ } & TLClipboardWriteInfo): Awaitable<false | TLContent | void>;
7733
+ /**
7734
+ * Called before pasted content is processed and shapes are created. Receives the parsed
7735
+ * external content from the clipboard and can filter, transform, or cancel it.
7736
+ *
7737
+ * Return `false` to cancel the paste. Return a modified content object to transform it.
7738
+ * Return `void` (or `undefined`) to pass through unchanged. You may return a `Promise` of
7739
+ * those values if the hook is async.
7740
+ *
7741
+ * This only fires for clipboard paste operations (keyboard shortcuts and menu actions),
7742
+ * not for file drops or programmatic `putExternalContent` calls.
7743
+ *
7744
+ * @example
7745
+ * ```tsx
7746
+ * // Block pasting of image files
7747
+ * onBeforePasteFromClipboard({ content }) {
7748
+ * if (content.type === 'files') {
7749
+ * const nonImages = content.files.filter(f => !f.type.startsWith('image/'))
7750
+ * if (nonImages.length === 0) return false
7751
+ * return { ...content, files: nonImages }
7752
+ * }
7753
+ * }
7754
+ * ```
7755
+ */
7756
+ onBeforePasteFromClipboard?(info: {
7757
+ content: TLExternalContent<unknown>;
7758
+ editor: Editor;
7759
+ point?: VecLike;
7760
+ source: 'clipboard-read' | 'native-event';
7761
+ }): Awaitable<false | TLExternalContent<unknown> | void>;
7762
+ /**
7763
+ * Called first for keyboard and menu paste, **before** tldraw handles or parses clipboard data
7764
+ * (and before {@link TldrawOptions.onBeforePasteFromClipboard}).
7765
+ *
7766
+ * Return `false` to cancel tldraw's default paste handling for this gesture (same convention as
7767
+ * {@link TldrawOptions.onBeforePasteFromClipboard}). Use this when you handle paste yourself from
7768
+ * raw clipboard data, or to block the gesture entirely. Return `void` (or `undefined`) to continue.
7769
+ */
7770
+ onClipboardPasteRaw?(info: TLClipboardPasteRawInfo): false | void;
7169
7771
  /**
7170
7772
  * Called when content is dropped on the canvas. Provides the page position
7171
7773
  * where the drop occurred and the underlying drag event object.
@@ -7233,18 +7835,17 @@ export declare interface TLEditorOptions {
7233
7835
  */
7234
7836
  bindingUtils: readonly TLAnyBindingUtilConstructor[];
7235
7837
  /**
7236
- * An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor.
7838
+ * An array of asset utils to use in the editor. These will be used to handle asset-type-specific behavior.
7237
7839
  */
7238
- tools: readonly TLStateNodeConstructor[];
7840
+ assetUtils?: readonly TLAnyAssetUtilConstructor[];
7239
7841
  /**
7240
- * Should return a containing html element which has all the styles applied to the editor. If not
7241
- * given, the body element will be used.
7842
+ * An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor.
7242
7843
  */
7243
- getContainer(): HTMLElement;
7844
+ tools: readonly TLStateNodeConstructor[];
7244
7845
  /**
7245
7846
  * A user defined externally to replace the default user.
7246
7847
  */
7247
- user?: TLUser;
7848
+ user?: TLCurrentUser;
7248
7849
  /**
7249
7850
  * The editor's initial active tool (or other state node id).
7250
7851
  */
@@ -7253,27 +7854,15 @@ export declare interface TLEditorOptions {
7253
7854
  * Whether to automatically focus the editor when it mounts.
7254
7855
  */
7255
7856
  autoFocus?: boolean;
7256
- /**
7257
- * Whether to infer dark mode from the user's system preferences. Defaults to false.
7258
- */
7259
- inferDarkMode?: boolean;
7260
- /**
7261
- * Options for the editor's camera.
7262
- *
7263
- * @deprecated Use `options.cameraOptions` instead. This will be removed in a future release.
7264
- */
7265
- cameraOptions?: Partial<TLCameraOptions>;
7266
- options?: Partial<TldrawOptions>;
7267
- /**
7268
- * Text options for the editor.
7269
- *
7270
- * @deprecated Use `options.text` instead. This prop will be removed in a future release.
7271
- */
7272
- textOptions?: TLTextOptions;
7273
7857
  licenseKey?: string;
7274
7858
  fontAssetUrls?: {
7275
7859
  [key: string]: string | undefined;
7276
7860
  };
7861
+ /**
7862
+ * Should return a containing html element which has all the styles applied to the editor. If not
7863
+ * given, the body element will be used.
7864
+ */
7865
+ getContainer(): HTMLElement;
7277
7866
  /**
7278
7867
  * Provides a way to hide shapes.
7279
7868
  *
@@ -7290,6 +7879,40 @@ export declare interface TLEditorOptions {
7290
7879
  * @param editor - The editor instance.
7291
7880
  */
7292
7881
  getShapeVisibility?(shape: TLShape, editor: Editor): 'hidden' | 'inherit' | 'visible' | null | undefined;
7882
+ /**
7883
+ * Named theme definitions for the editor. Each theme contains shared
7884
+ * properties (font size, line height, stroke width) and color palettes
7885
+ * for both light and dark modes.
7886
+ */
7887
+ themes?: Partial<TLThemes>;
7888
+ /**
7889
+ * The id of the initially active theme. Defaults to `'default'`.
7890
+ */
7891
+ initialTheme?: TLThemeId;
7892
+ /**
7893
+ * The editor's color scheme preference, controls the default color mode. Defaults to `'light'`.
7894
+ *
7895
+ * - `'light'` - Always use light mode.
7896
+ * - `'dark'` - Always use dark mode.
7897
+ * - `'system'` - Follow the OS color scheme preference.
7898
+ */
7899
+ colorScheme?: 'dark' | 'light' | 'system';
7900
+ /**
7901
+ * Additional configuration options for the tldraw editor.
7902
+ */
7903
+ options?: Partial<TldrawOptions>;
7904
+ /**
7905
+ * Options for the editor's camera.
7906
+ *
7907
+ * @deprecated Use `options.cameraOptions` instead. This will be removed in a future release.
7908
+ */
7909
+ cameraOptions?: Partial<TLCameraOptions>;
7910
+ /**
7911
+ * Text options for the editor.
7912
+ *
7913
+ * @deprecated Use `options.text` instead. This prop will be removed in a future release.
7914
+ */
7915
+ textOptions?: TLTextOptions;
7293
7916
  }
7294
7917
 
7295
7918
  /**
@@ -7348,6 +7971,7 @@ export declare const tlenv: {
7348
7971
  */
7349
7972
  export declare const tlenvReactive: Atom< {
7350
7973
  isCoarsePointer: boolean;
7974
+ supportsP3ColorSpace: boolean;
7351
7975
  }, unknown>;
7352
7976
 
7353
7977
  /** @public */
@@ -7476,6 +8100,7 @@ export declare interface TLFileReplaceExternalContent extends TLBaseExternalCont
7476
8100
  type: 'file-replace';
7477
8101
  file: File;
7478
8102
  shapeId: TLShapeId;
8103
+ /** @deprecated This field is no longer used by the default handler. It may be removed in a future version. */
7479
8104
  isImage: boolean;
7480
8105
  }
7481
8106
 
@@ -7487,69 +8112,18 @@ export declare interface TLFilesExternalContent extends TLBaseExternalContent {
7487
8112
  }
7488
8113
 
7489
8114
  /**
7490
- * A font face that can be used in the editor. The properties of this are largely the same as the
7491
- * ones in the
7492
- * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face | css `@font-face` rule}.
7493
- * @public
7494
- */
7495
- export declare interface TLFontFace {
7496
- /**
7497
- * How this font can be referred to in CSS.
7498
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family | `font-family`}.
7499
- */
7500
- readonly family: string;
7501
- /**
7502
- * The source of the font. This
7503
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`}.
7504
- */
7505
- readonly src: TLFontFaceSource;
7506
- /**
7507
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override | `ascent-override`}.
7508
- */
7509
- readonly ascentOverride?: string;
7510
- /**
7511
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override | `descent-override`}.
7512
- */
7513
- readonly descentOverride?: string;
7514
- /**
7515
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch | `font-stretch`}.
7516
- */
7517
- readonly stretch?: string;
7518
- /**
7519
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style | `font-style`}.
7520
- */
7521
- readonly style?: string;
7522
- /**
7523
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight | `font-weight`}.
7524
- */
7525
- readonly weight?: string;
7526
- /**
7527
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-feature-settings | `font-feature-settings`}.
7528
- */
7529
- readonly featureSettings?: string;
7530
- /**
7531
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/line-gap-override | `line-gap-override`}.
7532
- */
7533
- readonly lineGapOverride?: string;
7534
- /**
7535
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range | `unicode-range`}.
7536
- */
7537
- readonly unicodeRange?: string;
7538
- }
7539
-
7540
- /**
7541
- * Represents the `src` property of a {@link TLFontFace}.
7542
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`} for details of the properties here.
8115
+ * Emitted every animation frame when at least one `'frame'` listener is registered.
7543
8116
  * @public
7544
8117
  */
7545
- export declare interface TLFontFaceSource {
7546
- /**
7547
- * A URL from which to load the font. If the value here is a key in
7548
- * {@link tldraw#TLEditorAssetUrls.fonts}, the value from there will be used instead.
7549
- */
7550
- url: string;
7551
- format?: string;
7552
- tech?: string;
8118
+ export declare interface TLFramePerfEvent {
8119
+ /** Time since the last frame in ms. */
8120
+ elapsed: number;
8121
+ /** Total shapes on the current page. */
8122
+ shapeCount: number;
8123
+ /** Number of shapes culled (off-screen) from rendering. */
8124
+ culledShapeCount: number;
8125
+ /** Number of shapes visible (not culled) in the viewport. */
8126
+ visibleShapeCount: number;
7553
8127
  }
7554
8128
 
7555
8129
  /** Additional options for the {@link ShapeUtil.getGeometry} method.
@@ -7694,6 +8268,38 @@ export declare type TLIndicatorPath = {
7694
8268
  path: Path2D;
7695
8269
  } | Path2D;
7696
8270
 
8271
+ /**
8272
+ * Emitted when an interaction state is exited, with aggregated frame time stats.
8273
+ * @public
8274
+ */
8275
+ export declare interface TLInteractionEndPerfEvent extends TLPerfFrameTimeStats {
8276
+ /** The state node id (e.g. `'translating'`). */
8277
+ name: string;
8278
+ /** Full tool path (e.g. `'select.translating'`). */
8279
+ path: string;
8280
+ /** Total shapes on the current page. */
8281
+ shapeCount: number;
8282
+ /** Breakdown of selected shape types at interaction start (e.g. `{ geo: 2, draw: 1 }`). */
8283
+ selectedShapeTypes: Record<string, number>;
8284
+ /** Camera zoom level (`camera.z`) at interaction end. */
8285
+ zoomLevel: number;
8286
+ /** `performance.now()` when the interaction ended. */
8287
+ timestamp: number;
8288
+ }
8289
+
8290
+ /**
8291
+ * Emitted when an interaction state (e.g. translating, resizing) is entered.
8292
+ * @public
8293
+ */
8294
+ export declare interface TLInteractionStartPerfEvent {
8295
+ /** The state node id (e.g. `'translating'`). */
8296
+ name: string;
8297
+ /** Full tool path (e.g. `'select.translating'`). */
8298
+ path: string;
8299
+ /** `performance.now()` when the interaction started. */
8300
+ timestamp: number;
8301
+ }
8302
+
7697
8303
  /** @public */
7698
8304
  export declare type TLInterruptEvent = (info: TLInterruptEventInfo) => void;
7699
8305
 
@@ -7743,6 +8349,11 @@ export declare interface TLLoadSnapshotOptions {
7743
8349
  forceOverwriteSessionState?: boolean;
7744
8350
  }
7745
8351
 
8352
+ /** @public */
8353
+ export declare type TLMeasuredTextSize = BoxModel & {
8354
+ scrollWidth: number;
8355
+ };
8356
+
7746
8357
  /** @public */
7747
8358
  export declare interface TLMeasureTextOpts {
7748
8359
  fontStyle: string;
@@ -7936,6 +8547,94 @@ export declare const tlmenus: {
7936
8547
  */
7937
8548
  export declare type TLOnMountHandler = (editor: Editor) => (() => undefined | void) | undefined | void;
7938
8549
 
8550
+ /**
8551
+ * Map of all performance event names to their payload types.
8552
+ * Used with {@link PerformanceManager.on} and {@link PerformanceManager.once}.
8553
+ * @public
8554
+ */
8555
+ export declare interface TLPerfEventMap {
8556
+ /** An interaction state was entered. */
8557
+ 'interaction-start': [TLInteractionStartPerfEvent];
8558
+ /** An interaction state was exited, with aggregated frame time stats. */
8559
+ 'interaction-end': [TLInteractionEndPerfEvent];
8560
+ /** A camera operation (pan/zoom) began. */
8561
+ 'camera-start': [TLCameraStartPerfEvent];
8562
+ /** A camera operation ended (after debounce), with aggregated frame time stats. */
8563
+ 'camera-end': [TLCameraEndPerfEvent];
8564
+ /** Shapes were created. */
8565
+ 'shapes-created': [TLShapeOperationPerfEvent];
8566
+ /** Shapes were updated. */
8567
+ 'shapes-updated': [TLShapeOperationPerfEvent];
8568
+ /** Shapes were deleted. */
8569
+ 'shapes-deleted': [TLShapeOperationPerfEvent];
8570
+ /** An animation frame was rendered. Only fires when listeners are registered. */
8571
+ frame: [TLFramePerfEvent];
8572
+ /** An undo operation was performed. */
8573
+ undo: [TLUndoRedoPerfEvent];
8574
+ /** A redo operation was performed. */
8575
+ redo: [TLUndoRedoPerfEvent];
8576
+ }
8577
+
8578
+ /**
8579
+ * Common frame time statistics shared by interaction and camera end events.
8580
+ * @public
8581
+ */
8582
+ export declare interface TLPerfFrameTimeStats {
8583
+ /** Total duration of the session in ms. */
8584
+ duration: number;
8585
+ /** Average frames per second during the session. */
8586
+ fps: number;
8587
+ /** Total number of frames recorded. */
8588
+ frameCount: number;
8589
+ /** Mean frame duration in ms. */
8590
+ avgFrameTime: number;
8591
+ /** Median (p50) frame duration in ms. */
8592
+ medianFrameTime: number;
8593
+ /** 95th percentile frame duration in ms. */
8594
+ p95FrameTime: number;
8595
+ /** 99th percentile frame duration in ms. */
8596
+ p99FrameTime: number;
8597
+ /** Shortest frame duration in ms. */
8598
+ minFrameTime: number;
8599
+ /** Longest frame duration in ms. */
8600
+ maxFrameTime: number;
8601
+ /** Raw frame durations for local analysis. Exclude when sending to analytics. */
8602
+ frameTimes: number[];
8603
+ /**
8604
+ * Long animation frames observed during this period (Chromium 123+).
8605
+ * Only present when the browser supports the Long Animation Frames API and
8606
+ * at least one long frame was observed.
8607
+ * Exclude when sending to analytics — entries are large and contain script URLs.
8608
+ */
8609
+ longAnimationFrames?: TLPerfLongAnimationFrame[];
8610
+ }
8611
+
8612
+ /**
8613
+ * A long animation frame observed by the browser during an interaction.
8614
+ * Available only in browsers that support the Long Animation Frames API (Chromium 123+).
8615
+ * @public
8616
+ */
8617
+ export declare interface TLPerfLongAnimationFrame {
8618
+ /** Frame start time (relative to timeOrigin). */
8619
+ startTime: number;
8620
+ /** Total frame duration in ms. */
8621
+ duration: number;
8622
+ /** Time the main thread was blocked in ms. */
8623
+ blockingDuration: number;
8624
+ /** Scripts that contributed to the long frame. */
8625
+ scripts: TLPerfLongAnimationFrameScript[];
8626
+ }
8627
+
8628
+ /** A script attribution entry from a long animation frame. @public */
8629
+ export declare interface TLPerfLongAnimationFrameScript {
8630
+ /** The script source URL (may be empty for inline scripts). */
8631
+ sourceURL: string;
8632
+ /** The function name or invoker description. */
8633
+ invoker: string;
8634
+ /** Time spent in this script in ms. */
8635
+ duration: number;
8636
+ }
8637
+
7939
8638
  /** @public */
7940
8639
  export declare type TLPinchEvent = (info: TLPinchEventInfo) => void;
7941
8640
 
@@ -8123,6 +8822,21 @@ export declare interface TLShapeIndicatorsProps {
8123
8822
  showAll?: boolean;
8124
8823
  }
8125
8824
 
8825
+ /**
8826
+ * Emitted when shapes are created, updated, or deleted.
8827
+ * @public
8828
+ */
8829
+ export declare interface TLShapeOperationPerfEvent {
8830
+ /** The operation type. */
8831
+ operation: 'create' | 'delete' | 'update';
8832
+ /** Number of shapes affected. */
8833
+ count: number;
8834
+ /** Breakdown by shape type (e.g. `{ geo: 2, draw: 1 }`). */
8835
+ shapeTypes: Record<string, number>;
8836
+ /** `performance.now()` when the operation occurred. */
8837
+ timestamp: number;
8838
+ }
8839
+
8126
8840
  /**
8127
8841
  * Options passed to {@link ShapeUtil.canBeLaidOut}.
8128
8842
  *
@@ -8180,6 +8894,7 @@ export declare interface TLShapeUtilConstructor<T extends TLShape, U extends Sha
8180
8894
  type: T['type'];
8181
8895
  props?: RecordProps<T>;
8182
8896
  migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations;
8897
+ handledAssetTypes?: readonly string[];
8183
8898
  }
8184
8899
 
8185
8900
  /** @public */
@@ -8207,6 +8922,7 @@ export declare interface TLStateNodeConstructor {
8207
8922
  children?(): TLStateNodeConstructor[];
8208
8923
  isLockable: boolean;
8209
8924
  useCoalescedEvents: boolean;
8925
+ trackPerformance: boolean;
8210
8926
  }
8211
8927
 
8212
8928
  /** @public */
@@ -8219,6 +8935,14 @@ export declare interface TLStoreBaseOptions {
8219
8935
  defaultName?: string;
8220
8936
  /** How should this store upload & resolve assets? */
8221
8937
  assets?: TLAssetStore;
8938
+ /**
8939
+ * Named theme definitions. When provided, custom color names are automatically
8940
+ * registered before the store is constructed so persisted data with those
8941
+ * colors passes validation on load.
8942
+ */
8943
+ themes?: Partial<TLThemes>;
8944
+ /** How should this store resolve users for attribution? */
8945
+ users?: TLUserStore;
8222
8946
  /** Called when the store is connected to an {@link @tldraw/editor#Editor}. */
8223
8947
  onMount?(editor: Editor): (() => void) | void;
8224
8948
  }
@@ -8238,6 +8962,7 @@ export declare type TLStoreOptions = TLStoreBaseOptions & {
8238
8962
 
8239
8963
  /** @public */
8240
8964
  export declare type TLStoreSchemaOptions = {
8965
+ assetUtils?: readonly TLAnyAssetUtilConstructor[];
8241
8966
  bindingUtils?: readonly TLAnyBindingUtilConstructor[];
8242
8967
  migrations?: readonly MigrationSequence[];
8243
8968
  records?: Record<string, CustomRecordInfo>;
@@ -8375,6 +9100,19 @@ export declare interface TLTldrawExternalContentSource {
8375
9100
  data: TLContent;
8376
9101
  }
8377
9102
 
9103
+ /**
9104
+ * Emitted after an undo or redo operation.
9105
+ * @public
9106
+ */
9107
+ export declare interface TLUndoRedoPerfEvent {
9108
+ /** Whether this was an undo or redo. */
9109
+ type: 'redo' | 'undo';
9110
+ /** Number of undo steps remaining. */
9111
+ undoDepth: number;
9112
+ /** Number of redo steps remaining. */
9113
+ redoDepth: number;
9114
+ }
9115
+
8378
9116
  /** @public */
8379
9117
  export declare interface TLUpdatePointerOptions {
8380
9118
  /** Whether to update the pointer immediately, rather than on the next tick. */
@@ -8406,12 +9144,6 @@ export declare interface TLUrlExternalContent extends TLBaseExternalContent {
8406
9144
  url: string;
8407
9145
  }
8408
9146
 
8409
- /** @public */
8410
- export declare interface TLUser {
8411
- readonly userPreferences: Signal<TLUserPreferences>;
8412
- readonly setUserPreferences: (userPreferences: TLUserPreferences) => void;
8413
- }
8414
-
8415
9147
  /**
8416
9148
  * A user of tldraw
8417
9149
  *
@@ -8512,6 +9244,9 @@ export declare function uniq<T>(array: {
8512
9244
  readonly length: number;
8513
9245
  } | null | undefined): T[];
8514
9246
 
9247
+ /** @public */
9248
+ export declare function useColorMode(): 'dark' | 'light';
9249
+
8515
9250
  /** @public */
8516
9251
  export declare function useContainer(): HTMLElement;
8517
9252
 
@@ -8550,9 +9285,6 @@ export declare function useGlobalMenuIsOpen(id: string, onChange?: (isOpen: bool
8550
9285
  /** @public */
8551
9286
  export declare function useIsCropping(shapeId: TLShapeId): boolean;
8552
9287
 
8553
- /** @public */
8554
- export declare function useIsDarkMode(): boolean;
8555
-
8556
9288
  /** @public */
8557
9289
  export declare function useIsEditing(shapeId: TLShapeId): boolean;
8558
9290
 
@@ -8590,11 +9322,11 @@ export declare function usePresence(userId: string): null | TLInstancePresence;
8590
9322
  /** @public */
8591
9323
  export declare class UserPreferencesManager {
8592
9324
  private readonly user;
8593
- private readonly inferDarkMode;
9325
+ private readonly colorScheme;
8594
9326
  systemColorScheme: Atom<"dark" | "light", unknown>;
8595
9327
  disposables: Set<() => void>;
8596
9328
  dispose(): void;
8597
- constructor(user: TLUser, inferDarkMode: boolean);
9329
+ constructor(user: TLCurrentUser, colorScheme: 'dark' | 'light' | 'system');
8598
9330
  updateUserPreferences(userPreferences: Partial<TLUserPreferences>): void;
8599
9331
  getUserPreferences(): {
8600
9332
  animationSpeed: number;
@@ -8665,10 +9397,10 @@ export declare function useSvgExportContext(): null | SvgExportContext;
8665
9397
  /**
8666
9398
  * @public
8667
9399
  */
8668
- export declare function useTldrawUser(opts: {
9400
+ export declare function useTldrawCurrentUser(opts: {
8669
9401
  setUserPreferences?: (userPreferences: TLUserPreferences) => void;
8670
9402
  userPreferences?: Signal<TLUserPreferences> | TLUserPreferences;
8671
- }): TLUser;
9403
+ }): TLCurrentUser;
8672
9404
 
8673
9405
  /** @public */
8674
9406
  export declare function useTLSchemaFromUtils(opts: TLStoreSchemaOptions): StoreSchema<TLRecord, TLStoreProps>;