tldraw 3.16.0-next.eafb52d15064 → 3.16.0-next.fe14f1b4181f

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 (359) hide show
  1. package/dist-cjs/index.d.ts +193 -6
  2. package/dist-cjs/index.js +16 -1
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/lib/Tldraw.js +12 -2
  5. package/dist-cjs/lib/Tldraw.js.map +2 -2
  6. package/dist-cjs/lib/canvas/TldrawScribble.js +1 -1
  7. package/dist-cjs/lib/canvas/TldrawScribble.js.map +2 -2
  8. package/dist-cjs/lib/defaultExternalContentHandlers.js +5 -4
  9. package/dist-cjs/lib/defaultExternalContentHandlers.js.map +2 -2
  10. package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js +3 -3
  11. package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js.map +2 -2
  12. package/dist-cjs/lib/shapes/arrow/elbow/ElbowArrowDebug.js +3 -3
  13. package/dist-cjs/lib/shapes/arrow/elbow/ElbowArrowDebug.js.map +1 -1
  14. package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js +3 -3
  15. package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js.map +2 -2
  16. package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js +1 -1
  17. package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js.map +1 -1
  18. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +15 -12
  19. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
  20. package/dist-cjs/lib/shapes/frame/components/FrameHeading.js +1 -1
  21. package/dist-cjs/lib/shapes/frame/components/FrameHeading.js.map +2 -2
  22. package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js +2 -2
  23. package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js.map +2 -2
  24. package/dist-cjs/lib/shapes/geo/components/GeoShapeBody.js +2 -1
  25. package/dist-cjs/lib/shapes/geo/components/GeoShapeBody.js.map +2 -2
  26. package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js +5 -1
  27. package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js.map +2 -2
  28. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js +6 -3
  29. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js.map +2 -2
  30. package/dist-cjs/lib/shapes/line/LineShapeUtil.js +5 -1
  31. package/dist-cjs/lib/shapes/line/LineShapeUtil.js.map +2 -2
  32. package/dist-cjs/lib/shapes/note/NoteShapeUtil.js +4 -4
  33. package/dist-cjs/lib/shapes/note/NoteShapeUtil.js.map +2 -2
  34. package/dist-cjs/lib/shapes/shared/ShapeFill.js +4 -4
  35. package/dist-cjs/lib/shapes/shared/ShapeFill.js.map +2 -2
  36. package/dist-cjs/lib/shapes/shared/freehand/svg.js.map +2 -2
  37. package/dist-cjs/lib/shapes/text/TextShapeUtil.js +2 -2
  38. package/dist-cjs/lib/shapes/text/TextShapeUtil.js.map +2 -2
  39. package/dist-cjs/lib/shapes/video/VideoShapeUtil.js +3 -3
  40. package/dist-cjs/lib/shapes/video/VideoShapeUtil.js.map +1 -1
  41. package/dist-cjs/lib/tools/EraserTool/childStates/Erasing.js +25 -1
  42. package/dist-cjs/lib/tools/EraserTool/childStates/Erasing.js.map +2 -2
  43. package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.js +12 -0
  44. package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.js.map +2 -2
  45. package/dist-cjs/lib/tools/SelectTool/childStates/Translating.js.map +2 -2
  46. package/dist-cjs/lib/ui/TldrawUi.js +27 -12
  47. package/dist-cjs/lib/ui/TldrawUi.js.map +3 -3
  48. package/dist-cjs/lib/ui/assetUrls.js +13 -10
  49. package/dist-cjs/lib/ui/assetUrls.js.map +2 -2
  50. package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js +12 -3
  51. package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js.map +2 -2
  52. package/dist-cjs/lib/ui/components/{FollowingIndicator.js → DefaultFollowingIndicator.js} +6 -6
  53. package/dist-cjs/lib/ui/components/DefaultFollowingIndicator.js.map +7 -0
  54. package/dist-cjs/lib/ui/components/DefaultMenuPanel.js +3 -2
  55. package/dist-cjs/lib/ui/components/DefaultMenuPanel.js.map +2 -2
  56. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js +6 -6
  57. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map +1 -1
  58. package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js +4 -4
  59. package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js.map +2 -2
  60. package/dist-cjs/lib/ui/components/MobileStylePanel.js +5 -3
  61. package/dist-cjs/lib/ui/components/MobileStylePanel.js.map +2 -2
  62. package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js +1 -1
  63. package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js.map +2 -2
  64. package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js +2 -1
  65. package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js.map +2 -2
  66. package/dist-cjs/lib/ui/components/SharePanel/PeopleMenuItem.js +3 -2
  67. package/dist-cjs/lib/ui/components/SharePanel/PeopleMenuItem.js.map +2 -2
  68. package/dist-cjs/lib/ui/components/SharePanel/UserPresenceColorPicker.js +2 -2
  69. package/dist-cjs/lib/ui/components/SharePanel/UserPresenceColorPicker.js.map +2 -2
  70. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +14 -14
  71. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
  72. package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js +3 -3
  73. package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js.map +2 -2
  74. package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js +26 -25
  75. package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js.map +3 -3
  76. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js +1 -1
  77. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map +2 -2
  78. package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbar.js +66 -21
  79. package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbar.js.map +3 -3
  80. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js +189 -80
  81. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js.map +3 -3
  82. package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js +2 -2
  83. package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js.map +2 -2
  84. package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js +5 -16
  85. package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js.map +3 -3
  86. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js +1 -1
  87. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js.map +2 -2
  88. package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js +3 -2
  89. package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js.map +3 -3
  90. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js +6 -4
  91. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map +2 -2
  92. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +19 -4
  93. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
  94. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +155 -160
  95. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
  96. package/dist-cjs/lib/ui/components/primitives/layout.js +76 -0
  97. package/dist-cjs/lib/ui/components/primitives/layout.js.map +7 -0
  98. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuContext.js.map +2 -2
  99. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js +25 -12
  100. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js.map +2 -2
  101. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +154 -20
  102. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
  103. package/dist-cjs/lib/ui/context/actions.js +16 -2
  104. package/dist-cjs/lib/ui/context/actions.js.map +2 -2
  105. package/dist-cjs/lib/ui/context/components.js +2 -0
  106. package/dist-cjs/lib/ui/context/components.js.map +2 -2
  107. package/dist-cjs/lib/ui/context/events.js.map +2 -2
  108. package/dist-cjs/lib/ui/hooks/useTools.js +94 -9
  109. package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
  110. package/dist-cjs/lib/ui/hooks/useTranslation/TLUiTranslationKey.js.map +1 -1
  111. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js +1 -0
  112. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +2 -2
  113. package/dist-cjs/lib/ui/kbd-utils.js +9 -3
  114. package/dist-cjs/lib/ui/kbd-utils.js.map +2 -2
  115. package/dist-cjs/lib/ui/version.js +3 -3
  116. package/dist-cjs/lib/ui/version.js.map +1 -1
  117. package/dist-esm/index.d.mts +193 -6
  118. package/dist-esm/index.mjs +25 -2
  119. package/dist-esm/index.mjs.map +2 -2
  120. package/dist-esm/lib/Tldraw.mjs +14 -4
  121. package/dist-esm/lib/Tldraw.mjs.map +2 -2
  122. package/dist-esm/lib/canvas/TldrawScribble.mjs +1 -1
  123. package/dist-esm/lib/canvas/TldrawScribble.mjs.map +2 -2
  124. package/dist-esm/lib/defaultExternalContentHandlers.mjs +5 -4
  125. package/dist-esm/lib/defaultExternalContentHandlers.mjs.map +2 -2
  126. package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.mjs +4 -3
  127. package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.mjs.map +2 -2
  128. package/dist-esm/lib/shapes/arrow/elbow/ElbowArrowDebug.mjs +3 -3
  129. package/dist-esm/lib/shapes/arrow/elbow/ElbowArrowDebug.mjs.map +1 -1
  130. package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs +4 -3
  131. package/dist-esm/lib/shapes/draw/DrawShapeUtil.mjs.map +2 -2
  132. package/dist-esm/lib/shapes/embed/EmbedShapeUtil.mjs +1 -1
  133. package/dist-esm/lib/shapes/embed/EmbedShapeUtil.mjs.map +1 -1
  134. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +16 -12
  135. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
  136. package/dist-esm/lib/shapes/frame/components/FrameHeading.mjs +1 -1
  137. package/dist-esm/lib/shapes/frame/components/FrameHeading.mjs.map +2 -2
  138. package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs +3 -2
  139. package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs.map +2 -2
  140. package/dist-esm/lib/shapes/geo/components/GeoShapeBody.mjs +2 -1
  141. package/dist-esm/lib/shapes/geo/components/GeoShapeBody.mjs.map +2 -2
  142. package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs +6 -1
  143. package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs.map +2 -2
  144. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs +6 -3
  145. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs.map +2 -2
  146. package/dist-esm/lib/shapes/line/LineShapeUtil.mjs +6 -1
  147. package/dist-esm/lib/shapes/line/LineShapeUtil.mjs.map +2 -2
  148. package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs +5 -4
  149. package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs.map +2 -2
  150. package/dist-esm/lib/shapes/shared/ShapeFill.mjs +5 -4
  151. package/dist-esm/lib/shapes/shared/ShapeFill.mjs.map +2 -2
  152. package/dist-esm/lib/shapes/shared/freehand/svg.mjs.map +2 -2
  153. package/dist-esm/lib/shapes/text/TextShapeUtil.mjs +3 -2
  154. package/dist-esm/lib/shapes/text/TextShapeUtil.mjs.map +2 -2
  155. package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs +3 -3
  156. package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs.map +1 -1
  157. package/dist-esm/lib/tools/EraserTool/childStates/Erasing.mjs +26 -1
  158. package/dist-esm/lib/tools/EraserTool/childStates/Erasing.mjs.map +2 -2
  159. package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs +13 -0
  160. package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs.map +2 -2
  161. package/dist-esm/lib/tools/SelectTool/childStates/Translating.mjs.map +2 -2
  162. package/dist-esm/lib/ui/TldrawUi.mjs +29 -14
  163. package/dist-esm/lib/ui/TldrawUi.mjs.map +3 -3
  164. package/dist-esm/lib/ui/assetUrls.mjs +13 -10
  165. package/dist-esm/lib/ui/assetUrls.mjs.map +2 -2
  166. package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenu.mjs +12 -3
  167. package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenu.mjs.map +2 -2
  168. package/dist-esm/lib/ui/components/{FollowingIndicator.mjs → DefaultFollowingIndicator.mjs} +3 -3
  169. package/dist-esm/lib/ui/components/DefaultFollowingIndicator.mjs.map +7 -0
  170. package/dist-esm/lib/ui/components/DefaultMenuPanel.mjs +3 -2
  171. package/dist-esm/lib/ui/components/DefaultMenuPanel.mjs.map +2 -2
  172. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs +6 -6
  173. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.map +1 -1
  174. package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs +4 -4
  175. package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs.map +2 -2
  176. package/dist-esm/lib/ui/components/MobileStylePanel.mjs +6 -3
  177. package/dist-esm/lib/ui/components/MobileStylePanel.mjs.map +2 -2
  178. package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs +1 -1
  179. package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs.map +2 -2
  180. package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs +2 -1
  181. package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs.map +2 -2
  182. package/dist-esm/lib/ui/components/SharePanel/PeopleMenuItem.mjs +3 -2
  183. package/dist-esm/lib/ui/components/SharePanel/PeopleMenuItem.mjs.map +2 -2
  184. package/dist-esm/lib/ui/components/SharePanel/UserPresenceColorPicker.mjs +2 -2
  185. package/dist-esm/lib/ui/components/SharePanel/UserPresenceColorPicker.mjs.map +2 -2
  186. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +14 -14
  187. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
  188. package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs +3 -3
  189. package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs.map +2 -2
  190. package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs +26 -25
  191. package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map +2 -2
  192. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs +1 -1
  193. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs.map +2 -2
  194. package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs +56 -21
  195. package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs.map +2 -2
  196. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs +192 -81
  197. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs.map +3 -3
  198. package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs +2 -2
  199. package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs.map +2 -2
  200. package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs +6 -6
  201. package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs.map +2 -2
  202. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs +1 -1
  203. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs.map +2 -2
  204. package/dist-esm/lib/ui/components/primitives/TldrawUiPopover.mjs +3 -2
  205. package/dist-esm/lib/ui/components/primitives/TldrawUiPopover.mjs.map +2 -2
  206. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs +6 -4
  207. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map +2 -2
  208. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +19 -4
  209. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
  210. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +164 -162
  211. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
  212. package/dist-esm/lib/ui/components/primitives/layout.mjs +46 -0
  213. package/dist-esm/lib/ui/components/primitives/layout.mjs.map +7 -0
  214. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuContext.mjs.map +2 -2
  215. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs +25 -12
  216. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs.map +2 -2
  217. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +162 -22
  218. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
  219. package/dist-esm/lib/ui/context/actions.mjs +16 -2
  220. package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
  221. package/dist-esm/lib/ui/context/components.mjs +2 -0
  222. package/dist-esm/lib/ui/context/components.mjs.map +2 -2
  223. package/dist-esm/lib/ui/context/events.mjs.map +2 -2
  224. package/dist-esm/lib/ui/hooks/useTools.mjs +102 -10
  225. package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
  226. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +1 -0
  227. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
  228. package/dist-esm/lib/ui/kbd-utils.mjs +9 -3
  229. package/dist-esm/lib/ui/kbd-utils.mjs.map +2 -2
  230. package/dist-esm/lib/ui/version.mjs +3 -3
  231. package/dist-esm/lib/ui/version.mjs.map +1 -1
  232. package/package.json +11 -34
  233. package/src/index.ts +18 -1
  234. package/src/lib/Tldraw.tsx +15 -2
  235. package/src/lib/canvas/TldrawScribble.tsx +1 -1
  236. package/src/lib/defaultExternalContentHandlers.ts +12 -4
  237. package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts +2 -1
  238. package/src/lib/shapes/arrow/ArrowShapeTool.test.ts +4 -3
  239. package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts +7 -6
  240. package/src/lib/shapes/arrow/ArrowShapeUtil.tsx +4 -3
  241. package/src/lib/shapes/arrow/elbow/ElbowArrowDebug.tsx +3 -3
  242. package/src/lib/shapes/draw/DrawShapeTool.test.ts +0 -5
  243. package/src/lib/shapes/draw/DrawShapeUtil.tsx +4 -3
  244. package/src/lib/shapes/embed/EmbedShapeUtil.tsx +1 -1
  245. package/src/lib/shapes/frame/FrameShapeUtil.tsx +25 -14
  246. package/src/lib/shapes/frame/components/FrameHeading.tsx +1 -1
  247. package/src/lib/shapes/geo/GeoShapeUtil.tsx +3 -2
  248. package/src/lib/shapes/geo/components/GeoShapeBody.tsx +2 -2
  249. package/src/lib/shapes/highlight/HighlightShapeUtil.tsx +7 -1
  250. package/src/lib/shapes/image/ImageShapeUtil.tsx +6 -3
  251. package/src/lib/shapes/line/LineShapeUtil.test.tsx +4 -3
  252. package/src/lib/shapes/line/LineShapeUtil.tsx +6 -1
  253. package/src/lib/shapes/line/__snapshots__/LineShapeUtil.test.tsx.snap +2 -2
  254. package/src/lib/shapes/note/NoteShapeUtil.tsx +9 -4
  255. package/src/lib/shapes/shared/ShapeFill.tsx +5 -4
  256. package/src/lib/shapes/shared/freehand/svg.ts +2 -0
  257. package/src/lib/shapes/text/TextShapeTool.test.ts +6 -5
  258. package/src/lib/shapes/text/TextShapeUtil.tsx +3 -2
  259. package/src/lib/shapes/video/VideoShapeUtil.tsx +3 -3
  260. package/src/lib/tools/EraserTool/childStates/Erasing.ts +34 -1
  261. package/src/lib/tools/EraserTool/childStates/Pointing.ts +20 -0
  262. package/src/lib/tools/SelectTool/childStates/Translating.ts +0 -1
  263. package/src/lib/ui/TldrawUi.tsx +33 -12
  264. package/src/lib/ui/assetUrls.ts +13 -10
  265. package/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx +15 -3
  266. package/src/lib/ui/components/{FollowingIndicator.tsx → DefaultFollowingIndicator.tsx} +2 -1
  267. package/src/lib/ui/components/DefaultMenuPanel.tsx +4 -3
  268. package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +6 -6
  269. package/src/lib/ui/components/Minimap/MinimapManager.ts +4 -4
  270. package/src/lib/ui/components/MobileStylePanel.tsx +9 -6
  271. package/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx +1 -1
  272. package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx +3 -2
  273. package/src/lib/ui/components/SharePanel/PeopleMenuItem.tsx +4 -3
  274. package/src/lib/ui/components/SharePanel/UserPresenceColorPicker.tsx +3 -3
  275. package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +39 -43
  276. package/src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx +3 -3
  277. package/src/lib/ui/components/StylePanel/DropdownPicker.tsx +7 -6
  278. package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx +1 -1
  279. package/src/lib/ui/components/Toolbar/DefaultToolbar.tsx +55 -23
  280. package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx +212 -61
  281. package/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx +2 -2
  282. package/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx +40 -37
  283. package/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx +1 -1
  284. package/src/lib/ui/components/primitives/TldrawUiPopover.tsx +4 -2
  285. package/src/lib/ui/components/primitives/TldrawUiSlider.tsx +35 -30
  286. package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +32 -9
  287. package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +196 -184
  288. package/src/lib/ui/components/primitives/layout.tsx +107 -0
  289. package/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx +0 -1
  290. package/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx +29 -16
  291. package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +221 -19
  292. package/src/lib/ui/context/actions.tsx +16 -2
  293. package/src/lib/ui/context/components.tsx +3 -0
  294. package/src/lib/ui/context/events.tsx +1 -0
  295. package/src/lib/ui/hooks/useTools.tsx +140 -10
  296. package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +1 -0
  297. package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +1 -0
  298. package/src/lib/ui/kbd-utils.ts +10 -3
  299. package/src/lib/ui/version.ts +3 -3
  300. package/src/lib/ui.css +366 -305
  301. package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap +5 -5
  302. package/src/lib/utils/tldr/__snapshots__/buildFromV1Document.test.ts.snap +4 -4
  303. package/src/test/A11y.test.tsx +3 -2
  304. package/src/test/ClickManager.test.ts +7 -6
  305. package/src/test/Editor.test.tsx +20 -19
  306. package/src/test/EraserTool.test.ts +184 -13
  307. package/src/test/HandTool.test.ts +10 -9
  308. package/src/test/HighlightShape.test.ts +2 -1
  309. package/src/test/SelectTool.test.ts +3 -2
  310. package/src/test/TLUserPreferences.test.ts +4 -3
  311. package/src/test/TestEditor.ts +13 -15
  312. package/src/test/TldrawEditor.test.tsx +11 -10
  313. package/src/test/ZoomTool.test.ts +7 -6
  314. package/src/test/__snapshots__/drawing.test.ts.snap +2 -2
  315. package/src/test/__snapshots__/groups.test.tsx.snap +6 -6
  316. package/src/test/__snapshots__/resizing.test.ts.snap +2 -2
  317. package/src/test/arrows-megabus.test.tsx +5 -4
  318. package/src/test/bindings.test.tsx +24 -37
  319. package/src/test/bookmark-shapes.test.ts +1 -8
  320. package/src/test/commands/__snapshots__/getSvgString.test.ts.snap +23 -7
  321. package/src/test/commands/__snapshots__/packShapes.test.ts.snap +8 -8
  322. package/src/test/commands/__snapshots__/zoomToFit.test.ts.snap +2 -2
  323. package/src/test/commands/alignShapes.test.tsx +25 -24
  324. package/src/test/commands/animationSpeed.test.ts +2 -1
  325. package/src/test/commands/centerOnPoint.test.ts +3 -2
  326. package/src/test/commands/clipboard.test.ts +3 -2
  327. package/src/test/commands/createShapes.test.ts +2 -1
  328. package/src/test/commands/deleteShapes.test.ts +2 -1
  329. package/src/test/commands/distributeShapes.test.tsx +11 -10
  330. package/src/test/commands/getSvgString.test.ts +2 -1
  331. package/src/test/commands/packShapes.test.ts +5 -4
  332. package/src/test/commands/resizeShape.test.ts +2 -1
  333. package/src/test/commands/rotateShapes.test.ts +7 -6
  334. package/src/test/commands/setCamera.test.ts +4 -3
  335. package/src/test/commands/setCurrentPage.test.ts +3 -2
  336. package/src/test/commands/stackShapes.test.ts +11 -10
  337. package/src/test/commands/stretch.test.tsx +13 -12
  338. package/src/test/createDeepLink.test.tsx +2 -1
  339. package/src/test/cropping.test.ts +3 -2
  340. package/src/test/drawing.test.ts +2 -1
  341. package/src/test/flipShapes.test.ts +4 -3
  342. package/src/test/frames.test.ts +25 -24
  343. package/src/test/getCulledShapes.test.tsx +3 -2
  344. package/src/test/groups.test.tsx +1 -1
  345. package/src/test/handleDeepLink.test.tsx +2 -1
  346. package/src/test/maxShapes.test.ts +3 -2
  347. package/src/test/modifiers.test.ts +5 -4
  348. package/src/test/navigation.test.ts +12 -11
  349. package/src/test/panning.test.ts +2 -1
  350. package/src/test/perf/perf.test.ts +2 -1
  351. package/src/test/registerDeepLinkListener.test.tsx +10 -9
  352. package/src/test/resizing.test.ts +39 -38
  353. package/src/test/select.test.tsx +4 -3
  354. package/src/test/selection-omnibus.test.ts +11 -10
  355. package/src/test/shapeutils.test.ts +4 -3
  356. package/src/test/translating.test.ts +9 -8
  357. package/tldraw.css +667 -595
  358. package/dist-cjs/lib/ui/components/FollowingIndicator.js.map +0 -7
  359. package/dist-esm/lib/ui/components/FollowingIndicator.mjs.map +0 -7
@@ -13,11 +13,13 @@ import { CSSProperties } from 'react';
13
13
  import { Editor } from '@tldraw/editor';
14
14
  import { Extension } from '@tiptap/core';
15
15
  import { Extensions } from '@tiptap/core';
16
+ import { ForwardRefExoticComponent } from 'react';
16
17
  import { Geometry2d } from '@tldraw/editor';
17
18
  import { Geometry2dFilters } from '@tldraw/editor';
18
19
  import { Geometry2dOptions } from '@tldraw/editor';
19
20
  import { Group2d } from '@tldraw/editor';
20
21
  import { HandleSnapGeometry } from '@tldraw/editor';
22
+ import { HTMLAttributes } from 'react';
21
23
  import { IndexKey } from '@tldraw/editor';
22
24
  import { JsonObject } from '@tldraw/editor';
23
25
  import { JSX as JSX_2 } from 'react/jsx-runtime';
@@ -37,6 +39,7 @@ import { ReadonlySharedStyleMap } from '@tldraw/editor';
37
39
  import { RecordProps } from '@tldraw/editor';
38
40
  import { Rectangle2d } from '@tldraw/editor';
39
41
  import { RecursivePartial } from '@tldraw/editor';
42
+ import { RefAttributes } from 'react';
40
43
  import { RefObject } from 'react';
41
44
  import { Result } from '@tldraw/editor';
42
45
  import { RichTextFontVisitorState } from '@tldraw/editor';
@@ -850,6 +853,9 @@ export declare let defaultEditorAssetUrls: TLEditorAssetUrls;
850
853
  /** @public */
851
854
  export declare type DefaultEmbedDefinitionType = (typeof DEFAULT_EMBED_DEFINITIONS)[number]['type'];
852
855
 
856
+ /** @public @react */
857
+ export declare function DefaultFollowingIndicator(): JSX_2.Element | null;
858
+
853
859
  /** @public */
854
860
  export declare const DefaultFontFaces: TLDefaultFonts;
855
861
 
@@ -1014,6 +1020,11 @@ export declare function DefaultToolbarContent(): JSX_2.Element;
1014
1020
  /** @public */
1015
1021
  export declare interface DefaultToolbarProps {
1016
1022
  children?: ReactNode;
1023
+ orientation?: 'horizontal' | 'vertical';
1024
+ minItems?: number;
1025
+ minSizePx?: number;
1026
+ maxItems?: number;
1027
+ maxSizePx?: number;
1017
1028
  }
1018
1029
 
1019
1030
  /** @public */
@@ -1571,6 +1582,7 @@ export declare class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
1571
1582
  canEdit(): boolean;
1572
1583
  canResize(): boolean;
1573
1584
  canResizeChildren(): boolean;
1585
+ isExportBoundsContainer(): boolean;
1574
1586
  getDefaultProps(): TLFrameShape['props'];
1575
1587
  getAriaDescriptor(shape: TLFrameShape): string;
1576
1588
  getGeometry(shape: TLFrameShape): Geometry2d;
@@ -1772,6 +1784,29 @@ export declare function getHitShapeOnCanvasPointerDown(editor: Editor, hitLabels
1772
1784
  /** @public */
1773
1785
  export declare function getMediaAssetInfoPartial(file: File, assetId: TLAssetId, isImageType: boolean, isVideoType: boolean, maxImageDimension?: number): Promise<TLImageAsset | TLVideoAsset>;
1774
1786
 
1787
+ /**
1788
+ * ## getStrokePoints
1789
+ *
1790
+ * Get an array of points as objects with an adjusted point, pressure, vector, distance, and
1791
+ * runningLength.
1792
+ *
1793
+ * @param points - An array of points (as `[x, y, pressure]` or `{x, y, pressure}`). Pressure is
1794
+ * optional in both cases.
1795
+ * @param options - An object with options.
1796
+ * @public
1797
+ */
1798
+ export declare function getStrokePoints(rawInputPoints: VecLike[], options?: StrokeOptions): StrokePoint[];
1799
+
1800
+ /**
1801
+ * Turn an array of stroke points into a path of quadradic curves.
1802
+ *
1803
+ * @param points - The stroke points returned from perfect-freehand
1804
+ * @param closed - Whether the shape is closed
1805
+ *
1806
+ * @public
1807
+ */
1808
+ export declare function getSvgPathFromStrokePoints(points: StrokePoint[], closed?: boolean): string;
1809
+
1775
1810
  /**
1776
1811
  * Original (uncropped) width and height of shape.
1777
1812
  *
@@ -1867,6 +1902,7 @@ export declare class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
1867
1902
  static migrations: TLPropsMigrations;
1868
1903
  isAspectRatioLocked(): boolean;
1869
1904
  canCrop(): boolean;
1905
+ isExportBoundsContainer(): boolean;
1870
1906
  getDefaultProps(): TLImageShape['props'];
1871
1907
  getGeometry(shape: TLImageShape): Geometry2d;
1872
1908
  getAriaDescriptor(shape: TLImageShape): string;
@@ -2117,9 +2153,42 @@ export declare class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
2117
2153
  /** @public @react */
2118
2154
  export declare function NoteToolbarItem(): JSX_2.Element;
2119
2155
 
2156
+ /**
2157
+ * Checks if a file is allowed to be uploaded. If it is not, it will show a toast explaining why to the user.
2158
+ *
2159
+ * @param file - The file to check
2160
+ * @param options - The options for the external content handler
2161
+ * @returns True if the file is allowed, false otherwise
2162
+ * @public
2163
+ */
2164
+ export declare function notifyIfFileNotAllowed(file: File, options: TLDefaultExternalContentHandlerOpts): boolean;
2165
+
2120
2166
  /** @public @react */
2121
2167
  export declare function OfflineIndicator(): JSX_2.Element;
2122
2168
 
2169
+ /**
2170
+ * A helper method to use in {@link TLUiToolItem#onDragStart} to create a shape by dragging it from
2171
+ * the toolbar.
2172
+ * @public
2173
+ */
2174
+ export declare function onDragFromToolbarToCreateShape(editor: Editor, info: TLPointerEventInfo, opts: OnDragFromToolbarToCreateShapesOpts): void;
2175
+
2176
+ /**
2177
+ * Options for {@link onDragFromToolbarToCreateShape}.
2178
+ * @public
2179
+ */
2180
+ export declare interface OnDragFromToolbarToCreateShapesOpts {
2181
+ /**
2182
+ * Create the shape being dragged. You don't need to worry about positioning it, as it'll be
2183
+ * immediately updated with the correct position.
2184
+ */
2185
+ createShape(id: TLShapeId): void;
2186
+ /**
2187
+ * Called once the drag interaction has finished.
2188
+ */
2189
+ onDragEnd?(id: TLShapeId): void;
2190
+ }
2191
+
2123
2192
  /** @public @react */
2124
2193
  export declare function OpacitySlider(): JSX_2.Element | null;
2125
2194
 
@@ -2127,11 +2196,17 @@ export declare function OpacitySlider(): JSX_2.Element | null;
2127
2196
  export declare function OvalToolbarItem(): JSX_2.Element;
2128
2197
 
2129
2198
  /** @public @react */
2130
- export declare function OverflowingToolbar({ children }: OverflowingToolbarProps): JSX_2.Element;
2199
+ export declare function OverflowingToolbar({ children, orientation, sizingParentClassName, minItems, minSizePx, maxItems, maxSizePx, }: OverflowingToolbarProps): JSX_2.Element;
2131
2200
 
2132
2201
  /** @public */
2133
2202
  export declare interface OverflowingToolbarProps {
2134
2203
  children: React.ReactNode;
2204
+ orientation: 'horizontal' | 'vertical';
2205
+ sizingParentClassName: string;
2206
+ minItems: number;
2207
+ minSizePx: number;
2208
+ maxItems: number;
2209
+ maxSizePx: number;
2135
2210
  }
2136
2211
 
2137
2212
  /** @public @react */
@@ -2520,6 +2595,54 @@ export declare function StarToolbarItem(): JSX_2.Element;
2520
2595
  /** @public */
2521
2596
  export declare const STROKE_SIZES: Record<TLDefaultSizeStyle, number>;
2522
2597
 
2598
+ /**
2599
+ * The options object for `getStroke` or `getStrokePoints`.
2600
+ *
2601
+ * @public
2602
+ */
2603
+ export declare interface StrokeOptions {
2604
+ /** The base size (diameter) of the stroke. */
2605
+ size?: number;
2606
+ /** The effect of pressure on the stroke's size. */
2607
+ thinning?: number;
2608
+ /** How much to soften the stroke's edges. */
2609
+ smoothing?: number;
2610
+ streamline?: number;
2611
+ /** An easing function to apply to each point's pressure. */
2612
+ easing?(pressure: number): number;
2613
+ /** Whether to simulate pressure based on velocity. */
2614
+ simulatePressure?: boolean;
2615
+ /** Cap, taper and easing for the start of the line. */
2616
+ start?: {
2617
+ cap?: boolean;
2618
+ easing?(distance: number): number;
2619
+ taper?: boolean | number;
2620
+ };
2621
+ /** Cap, taper and easing for the end of the line. */
2622
+ end?: {
2623
+ cap?: boolean;
2624
+ easing?(distance: number): number;
2625
+ taper?: boolean | number;
2626
+ };
2627
+ /** Whether to handle the points as a completed stroke. */
2628
+ last?: boolean;
2629
+ }
2630
+
2631
+ /**
2632
+ * The points returned by `getStrokePoints`, and the input for `getStrokeOutlinePoints`
2633
+ *
2634
+ * @public
2635
+ */
2636
+ export declare interface StrokePoint {
2637
+ point: Vec;
2638
+ input: Vec;
2639
+ vector: Vec;
2640
+ pressure: number;
2641
+ distance: number;
2642
+ runningLength: number;
2643
+ radius: number;
2644
+ }
2645
+
2523
2646
  /** @public */
2524
2647
  export declare interface StylePickerSetProps {
2525
2648
  styles: ReadonlySharedStyleMap;
@@ -2918,6 +3041,13 @@ export declare function TldrawUiButtonLabel({ children }: TLUiButtonLabelProps):
2918
3041
  /** @public */
2919
3042
  export declare const TldrawUiButtonPicker: <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement;
2920
3043
 
3044
+ /**
3045
+ * A column, usually of UI controls like buttons, select dropdown, checkboxes, etc.
3046
+ *
3047
+ * @public @react
3048
+ */
3049
+ export declare const TldrawUiColumn: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;
3050
+
2921
3051
  /** @public @react */
2922
3052
  export declare function TldrawUiComponentsProvider({ overrides, children, }: TLUiComponentsProviderProps): JSX_2.Element;
2923
3053
 
@@ -2980,9 +3110,19 @@ export declare function TldrawUiDropdownMenuTrigger({ children, ...rest }: TLUiD
2980
3110
  /** @public @react */
2981
3111
  export declare function TldrawUiEventsProvider({ onEvent, children }: EventsProviderProps): JSX_2.Element;
2982
3112
 
3113
+ /**
3114
+ * A tight grid 4 elements wide, usually of UI controls like buttons, select dropdown, checkboxes,
3115
+ * etc.
3116
+ *
3117
+ * @public @react */
3118
+ export declare const TldrawUiGrid: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;
3119
+
2983
3120
  /** @public @react */
2984
3121
  export declare const TldrawUiIcon: NamedExoticComponent<TLUiIconProps>;
2985
3122
 
3123
+ /** @public @react */
3124
+ export declare function TldrawUiInFrontOfTheCanvas(): JSX_2.Element;
3125
+
2986
3126
  /** @public @react */
2987
3127
  export declare const TldrawUiInput: React_2.ForwardRefExoticComponent<TLUiInputProps & React_2.RefAttributes<HTMLInputElement>>;
2988
3128
 
@@ -3005,7 +3145,7 @@ export declare function TldrawUiMenuContextProvider({ type, sourceId, children,
3005
3145
  export declare function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGroupProps): boolean | JSX_2.Element | Iterable<ReactNode> | null | number | string | undefined;
3006
3146
 
3007
3147
  /** @public @react */
3008
- export declare function TldrawUiMenuItem<TranslationKey extends string = string, IconType extends string = string>({ disabled, spinner, readonlyOk, id, kbd, label, icon, iconLeft, onSelect, noClose, isSelected, }: TLUiMenuItemProps<TranslationKey, IconType>): JSX_2.Element | null;
3148
+ export declare function TldrawUiMenuItem<TranslationKey extends string = string, IconType extends string = string>({ disabled, spinner, readonlyOk, id, kbd, label, icon, iconLeft, onSelect, noClose, isSelected, onDragStart, }: TLUiMenuItemProps<TranslationKey, IconType>): JSX_2.Element | null;
3009
3149
 
3010
3150
  /** @public @react */
3011
3151
  export declare function TldrawUiMenuSubmenu<Translation extends string = string>({ id, disabled, label, size, children, }: TLUiMenuSubmenuProps<Translation>): boolean | JSX_2.Element | Iterable<ReactNode> | null | number | string | undefined;
@@ -3013,8 +3153,24 @@ export declare function TldrawUiMenuSubmenu<Translation extends string = string>
3013
3153
  /** @public @react */
3014
3154
  export declare function TldrawUiMenuToolItem({ toolId, ...rest }: TLUiMenuToolItemProps): JSX_2.Element | null;
3015
3155
 
3156
+ /** @public */
3157
+ export declare interface TldrawUiOrientationContext {
3158
+ orientation: 'horizontal' | 'vertical';
3159
+ tooltipSide: 'bottom' | 'left' | 'right' | 'top';
3160
+ }
3161
+
3162
+ /** @public @react */
3163
+ export declare function TldrawUiOrientationProvider({ children, orientation, tooltipSide, }: TldrawUiOrientationProviderProps): JSX_2.Element;
3164
+
3165
+ /** @public */
3166
+ export declare interface TldrawUiOrientationProviderProps {
3167
+ children: ReactNode;
3168
+ orientation: 'horizontal' | 'vertical';
3169
+ tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
3170
+ }
3171
+
3016
3172
  /** @public @react */
3017
- export declare function TldrawUiPopover({ id, children, onOpenChange, open }: TLUiPopoverProps): JSX_2.Element;
3173
+ export declare function TldrawUiPopover({ id, children, onOpenChange, open, className }: TLUiPopoverProps): JSX_2.Element;
3018
3174
 
3019
3175
  /** @public @react */
3020
3176
  export declare function TldrawUiPopoverContent({ side, children, align, sideOffset, alignOffset, disableEscapeKeyDown, autoFocusFirstButton, }: TLUiPopoverContentProps): JSX_2.Element;
@@ -3044,6 +3200,13 @@ export declare interface TldrawUiProps extends TLUiContextProviderProps {
3044
3200
  assetUrls?: TLUiAssetUrlOverrides;
3045
3201
  }
3046
3202
 
3203
+ /**
3204
+ * A row, usually of UI controls like buttons, select dropdown, checkboxes, etc.
3205
+ *
3206
+ * @public @react
3207
+ */
3208
+ export declare const TldrawUiRow: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;
3209
+
3047
3210
  /** @public @react */
3048
3211
  export declare const TldrawUiSlider: React_3.ForwardRefExoticComponent<TLUiSliderProps & React_3.RefAttributes<HTMLDivElement>>;
3049
3212
 
@@ -3063,7 +3226,7 @@ export declare const TldrawUiToolbarToggleGroup: ({ children, className, type, .
3063
3226
  export declare const TldrawUiToolbarToggleItem: ({ children, className, type, value, tooltip, ...props }: TLUiToolbarToggleItemProps) => JSX_2.Element;
3064
3227
 
3065
3228
  /** @public @react */
3066
- export declare function TldrawUiTooltip({ children, content, side, sideOffset, disabled, }: TldrawUiTooltipProps): JSX_2.Element;
3229
+ export declare const TldrawUiTooltip: React_3.ForwardRefExoticComponent<TldrawUiTooltipProps & React_3.RefAttributes<HTMLButtonElement>>;
3067
3230
 
3068
3231
  /** @public */
3069
3232
  export declare interface TldrawUiTooltipProps {
@@ -3072,6 +3235,8 @@ export declare interface TldrawUiTooltipProps {
3072
3235
  side?: 'bottom' | 'left' | 'right' | 'top';
3073
3236
  sideOffset?: number;
3074
3237
  disabled?: boolean;
3238
+ showOnMobile?: boolean;
3239
+ delayDuration?: number;
3075
3240
  }
3076
3241
 
3077
3242
  /** @public @react */
@@ -3288,6 +3453,7 @@ export declare interface TLUiComponents {
3288
3453
  Dialogs?: ComponentType | null;
3289
3454
  Toasts?: ComponentType | null;
3290
3455
  A11y?: ComponentType | null;
3456
+ FollowingIndicator?: ComponentType | null;
3291
3457
  }
3292
3458
 
3293
3459
  /** @public */
@@ -3618,6 +3784,9 @@ export declare interface TLUiEventMap {
3618
3784
  'open-context-menu': null;
3619
3785
  'adjust-shape-styles': null;
3620
3786
  'copy-link': null;
3787
+ 'drag-tool': {
3788
+ id: string;
3789
+ };
3621
3790
  'image-replace': null;
3622
3791
  'video-replace': null;
3623
3792
  'open-kbd-shortcuts': null;
@@ -3704,6 +3873,13 @@ export declare type TLUiKeyboardShortcutsDialogProps = TLUiDialogProps & {
3704
3873
  children?: ReactNode;
3705
3874
  };
3706
3875
 
3876
+ /** @public */
3877
+ export declare interface TLUiLayoutProps extends HTMLAttributes<HTMLDivElement> {
3878
+ children: ReactNode;
3879
+ tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
3880
+ asChild?: boolean;
3881
+ }
3882
+
3707
3883
  /** @public */
3708
3884
  export declare interface TLUiMainMenuProps {
3709
3885
  children?: ReactNode;
@@ -3743,7 +3919,7 @@ export declare interface TLUiMenuContextProviderProps {
3743
3919
  }
3744
3920
 
3745
3921
  /** @public */
3746
- export declare type TLUiMenuContextType = 'context-menu' | 'helper-buttons' | 'icons' | 'keyboard-shortcuts' | 'menu' | 'panel' | 'small-icons' | 'toolbar-overflow' | 'toolbar';
3922
+ export declare type TLUiMenuContextType = 'context-menu' | 'helper-buttons' | 'icons' | 'keyboard-shortcuts' | 'menu' | 'small-icons' | 'toolbar-overflow' | 'toolbar';
3747
3923
 
3748
3924
  /** @public */
3749
3925
  export declare interface TLUiMenuGroupProps<TranslationKey extends string = string> {
@@ -3803,6 +3979,10 @@ export declare interface TLUiMenuItemProps<TranslationKey extends string = strin
3803
3979
  * Whether the item is selected.
3804
3980
  */
3805
3981
  isSelected?: boolean;
3982
+ /**
3983
+ * The function to call when the item is dragged. If this is provided, the item will be draggable.
3984
+ */
3985
+ onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void;
3806
3986
  }
3807
3987
 
3808
3988
  /** @public */
@@ -3848,6 +4028,7 @@ export declare interface TLUiPopoverProps {
3848
4028
  open?: boolean;
3849
4029
  children: React_3.ReactNode;
3850
4030
  onOpenChange?(isOpen: boolean): void;
4031
+ className?: string;
3851
4032
  }
3852
4033
 
3853
4034
  /** @public */
@@ -3942,6 +4123,8 @@ export declare interface TLUiToolbarProps extends React_3.HTMLAttributes<HTMLDiv
3942
4123
  className?: string;
3943
4124
  dir?: 'ltr' | 'rtl';
3944
4125
  label: string;
4126
+ orientation?: 'grid' | 'horizontal' | 'vertical';
4127
+ tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
3945
4128
  }
3946
4129
 
3947
4130
  /** @public */
@@ -3970,6 +4153,7 @@ export declare interface TLUiToolItem<TranslationKey extends string = string, Ic
3970
4153
  shortcutsLabel?: TranslationKey;
3971
4154
  icon: IconType | TLUiIconJsx;
3972
4155
  onSelect(source: TLUiEventSource): void;
4156
+ onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void;
3973
4157
  /**
3974
4158
  * The keyboard shortcut for this tool. This is a string that can be a single key,
3975
4159
  * or a combination of keys.
@@ -4005,7 +4189,7 @@ export declare interface TLUiTranslation {
4005
4189
  export declare type TLUiTranslationContextType = TLUiTranslation;
4006
4190
 
4007
4191
  /** @public */
4008
- export declare type TLUiTranslationKey = 'a11y.adjust-shape-styles' | 'a11y.enlarge-shape' | 'a11y.enter-leave-container' | 'a11y.move-shape-faster' | 'a11y.move-shape' | 'a11y.multiple-shapes' | 'a11y.open-context-menu' | 'a11y.open-keyboard-shortcuts' | 'a11y.pan-camera' | 'a11y.repeat-shape' | 'a11y.rotate-shape-ccw-fine' | 'a11y.rotate-shape-ccw' | 'a11y.rotate-shape-cw-fine' | 'a11y.rotate-shape-cw' | 'a11y.select-shape-direction' | 'a11y.select-shape' | 'a11y.shape-image' | 'a11y.shape-index' | 'a11y.shape-video' | 'a11y.shrink-shape' | 'a11y.skip-to-main-content' | 'a11y.status' | 'action.align-bottom' | 'action.align-center-horizontal.short' | 'action.align-center-horizontal' | 'action.align-center-vertical.short' | 'action.align-center-vertical' | 'action.align-left' | 'action.align-right' | 'action.align-top' | 'action.back-to-content' | 'action.bring-forward' | 'action.bring-to-front' | 'action.convert-to-bookmark' | 'action.convert-to-embed' | 'action.copy-as-png.short' | 'action.copy-as-png' | 'action.copy-as-svg.short' | 'action.copy-as-svg' | 'action.copy' | 'action.cut' | 'action.delete' | 'action.distribute-horizontal.short' | 'action.distribute-horizontal' | 'action.distribute-vertical.short' | 'action.distribute-vertical' | 'action.download-original' | 'action.duplicate' | 'action.edit-link' | 'action.exit-pen-mode' | 'action.export-all-as-png.short' | 'action.export-all-as-png' | 'action.export-all-as-svg.short' | 'action.export-all-as-svg' | 'action.export-as-png.short' | 'action.export-as-png' | 'action.export-as-svg.short' | 'action.export-as-svg' | 'action.fit-frame-to-content' | 'action.flatten-to-image' | 'action.flip-horizontal.short' | 'action.flip-horizontal' | 'action.flip-vertical.short' | 'action.flip-vertical' | 'action.fork-project-on-tldraw' | 'action.fork-project' | 'action.group' | 'action.insert-embed' | 'action.insert-media' | 'action.leave-shared-project' | 'action.new-project' | 'action.new-shared-project' | 'action.open-cursor-chat' | 'action.open-embed-link' | 'action.open-file' | 'action.open-kbd-shortcuts' | 'action.pack' | 'action.paste-error-description' | 'action.paste-error-title' | 'action.paste' | 'action.print' | 'action.redo' | 'action.remove-frame' | 'action.rename' | 'action.rotate-ccw' | 'action.rotate-cw' | 'action.save-copy' | 'action.select-all' | 'action.select-none' | 'action.send-backward' | 'action.send-to-back' | 'action.share-project' | 'action.stack-horizontal.short' | 'action.stack-horizontal' | 'action.stack-vertical.short' | 'action.stack-vertical' | 'action.stop-following' | 'action.stretch-horizontal.short' | 'action.stretch-horizontal' | 'action.stretch-vertical.short' | 'action.stretch-vertical' | 'action.toggle-auto-size' | 'action.toggle-dark-mode.menu' | 'action.toggle-dark-mode' | 'action.toggle-debug-mode.menu' | 'action.toggle-debug-mode' | 'action.toggle-dynamic-size-mode.menu' | 'action.toggle-dynamic-size-mode' | 'action.toggle-edge-scrolling.menu' | 'action.toggle-edge-scrolling' | 'action.toggle-focus-mode.menu' | 'action.toggle-focus-mode' | 'action.toggle-grid.menu' | 'action.toggle-grid' | 'action.toggle-keyboard-shortcuts.menu' | 'action.toggle-keyboard-shortcuts' | 'action.toggle-lock' | 'action.toggle-paste-at-cursor.menu' | 'action.toggle-paste-at-cursor' | 'action.toggle-reduce-motion.menu' | 'action.toggle-reduce-motion' | 'action.toggle-snap-mode.menu' | 'action.toggle-snap-mode' | 'action.toggle-tool-lock.menu' | 'action.toggle-tool-lock' | 'action.toggle-transparent.context-menu' | 'action.toggle-transparent.menu' | 'action.toggle-transparent' | 'action.toggle-ui-labels.menu' | 'action.toggle-ui-labels' | 'action.toggle-wrap-mode.menu' | 'action.toggle-wrap-mode' | 'action.undo' | 'action.ungroup' | 'action.unlock-all' | 'action.zoom-in' | 'action.zoom-out' | 'action.zoom-to-100' | 'action.zoom-to-fit' | 'action.zoom-to-selection' | 'actions-menu.title' | 'align-style.end' | 'align-style.justify' | 'align-style.middle' | 'align-style.start' | 'app.loading' | 'arrow-kind-style.arc' | 'arrow-kind-style.elbow' | 'arrowheadEnd-style.arrow' | 'arrowheadEnd-style.bar' | 'arrowheadEnd-style.diamond' | 'arrowheadEnd-style.dot' | 'arrowheadEnd-style.inverted' | 'arrowheadEnd-style.none' | 'arrowheadEnd-style.pipe' | 'arrowheadEnd-style.square' | 'arrowheadEnd-style.triangle' | 'arrowheadStart-style.arrow' | 'arrowheadStart-style.bar' | 'arrowheadStart-style.diamond' | 'arrowheadStart-style.dot' | 'arrowheadStart-style.inverted' | 'arrowheadStart-style.none' | 'arrowheadStart-style.pipe' | 'arrowheadStart-style.square' | 'arrowheadStart-style.triangle' | 'assets.files.amount-too-many' | 'assets.files.size-too-big' | 'assets.files.type-not-allowed' | 'assets.files.upload-failed' | 'assets.url.failed' | 'color-style.black' | 'color-style.blue' | 'color-style.green' | 'color-style.grey' | 'color-style.light-blue' | 'color-style.light-green' | 'color-style.light-red' | 'color-style.light-violet' | 'color-style.orange' | 'color-style.red' | 'color-style.violet' | 'color-style.white' | 'color-style.yellow' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.edit' | 'context-menu.export-all-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context-menu.title' | 'context.pages.new-page' | 'cursor-chat.type-to-chat' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'document-name-menu.copy-link' | 'document.default-name' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.external-link' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | 'embed-dialog.back' | 'embed-dialog.cancel' | 'embed-dialog.create' | 'embed-dialog.instruction' | 'embed-dialog.invalid-url' | 'embed-dialog.title' | 'embed-dialog.url' | 'file-system.confirm-clear.cancel' | 'file-system.confirm-clear.continue' | 'file-system.confirm-clear.description' | 'file-system.confirm-clear.dont-show-again' | 'file-system.confirm-clear.title' | 'file-system.confirm-open.cancel' | 'file-system.confirm-open.description' | 'file-system.confirm-open.dont-show-again' | 'file-system.confirm-open.open' | 'file-system.confirm-open.title' | 'file-system.file-open-error.file-format-version-too-new' | 'file-system.file-open-error.generic-corrupted-file' | 'file-system.file-open-error.not-a-tldraw-file' | 'file-system.file-open-error.title' | 'file-system.shared-document-file-open-error.description' | 'file-system.shared-document-file-open-error.title' | 'fill-style.fill' | 'fill-style.none' | 'fill-style.pattern' | 'fill-style.semi' | 'fill-style.solid' | 'focus-mode.toggle-focus-mode' | 'font-style.draw' | 'font-style.mono' | 'font-style.sans' | 'font-style.serif' | 'geo-style.arrow-down' | 'geo-style.arrow-left' | 'geo-style.arrow-right' | 'geo-style.arrow-up' | 'geo-style.check-box' | 'geo-style.cloud' | 'geo-style.diamond' | 'geo-style.ellipse' | 'geo-style.heart' | 'geo-style.hexagon' | 'geo-style.octagon' | 'geo-style.oval' | 'geo-style.pentagon' | 'geo-style.rectangle' | 'geo-style.rhombus' | 'geo-style.star' | 'geo-style.trapezoid' | 'geo-style.triangle' | 'geo-style.x-box' | 'handle.crop.bottom-left' | 'handle.crop.bottom-right' | 'handle.crop.bottom' | 'handle.crop.left' | 'handle.crop.right' | 'handle.crop.top-left' | 'handle.crop.top-right' | 'handle.crop.top' | 'handle.resize-bottom-left' | 'handle.resize-bottom-right' | 'handle.resize-bottom' | 'handle.resize-left' | 'handle.resize-right' | 'handle.resize-top-left' | 'handle.resize-top-right' | 'handle.resize-top' | 'handle.rotate.bottom_left_rotate' | 'handle.rotate.bottom_right_rotate' | 'handle.rotate.mobile_rotate' | 'handle.rotate.top_left_rotate' | 'handle.rotate.top_right_rotate' | 'help-menu.about' | 'help-menu.discord' | 'help-menu.github' | 'help-menu.import-tldr-file' | 'help-menu.keyboard-shortcuts' | 'help-menu.privacy' | 'help-menu.terms' | 'help-menu.title' | 'help-menu.twitter' | 'menu.accessibility' | 'menu.copy-as' | 'menu.edit' | 'menu.export-as' | 'menu.file' | 'menu.language' | 'menu.preferences' | 'menu.theme' | 'menu.title' | 'menu.view' | 'navigation-zone.minimap' | 'navigation-zone.title' | 'navigation-zone.toggle-minimap' | 'navigation-zone.zoom' | 'opacity-style.0.1' | 'opacity-style.0.25' | 'opacity-style.0.5' | 'opacity-style.0.75' | 'opacity-style.1' | 'page-menu.create-new-page' | 'page-menu.edit-done' | 'page-menu.edit-start' | 'page-menu.go-to-page' | 'page-menu.max-page-count-reached' | 'page-menu.new-page-initial-name' | 'page-menu.submenu.delete' | 'page-menu.submenu.duplicate-page' | 'page-menu.submenu.move-down' | 'page-menu.submenu.move-up' | 'page-menu.submenu.rename' | 'page-menu.submenu.title' | 'page-menu.title' | 'people-menu.anonymous-user' | 'people-menu.avatar-color' | 'people-menu.change-color' | 'people-menu.change-name' | 'people-menu.follow' | 'people-menu.following' | 'people-menu.invite' | 'people-menu.leading' | 'people-menu.title' | 'people-menu.user' | 'share-menu.copied' | 'share-menu.copy-link-note' | 'share-menu.copy-link' | 'share-menu.copy-readonly-link-note' | 'share-menu.copy-readonly-link' | 'share-menu.create-snapshot-link' | 'share-menu.creating-project' | 'share-menu.fork-note' | 'share-menu.offline-note' | 'share-menu.project-too-large' | 'share-menu.save-note' | 'share-menu.share-project' | 'share-menu.snapshot-link-note' | 'share-menu.title' | 'share-menu.upload-failed' | 'sharing.confirm-leave.cancel' | 'sharing.confirm-leave.description' | 'sharing.confirm-leave.dont-show-again' | 'sharing.confirm-leave.leave' | 'sharing.confirm-leave.title' | 'shortcuts-dialog.a11y' | 'shortcuts-dialog.collaboration' | 'shortcuts-dialog.edit' | 'shortcuts-dialog.file' | 'shortcuts-dialog.preferences' | 'shortcuts-dialog.text-formatting' | 'shortcuts-dialog.title' | 'shortcuts-dialog.tools' | 'shortcuts-dialog.transform' | 'shortcuts-dialog.view' | 'size-style.l' | 'size-style.m' | 'size-style.s' | 'size-style.xl' | 'spline-style.cubic' | 'spline-style.line' | 'status.offline' | 'style-panel.align' | 'style-panel.arrow-kind' | 'style-panel.arrowhead-end' | 'style-panel.arrowhead-start' | 'style-panel.arrowheads' | 'style-panel.color' | 'style-panel.dash' | 'style-panel.fill' | 'style-panel.font' | 'style-panel.geo' | 'style-panel.label-align' | 'style-panel.mixed' | 'style-panel.opacity' | 'style-panel.position' | 'style-panel.size' | 'style-panel.spline' | 'style-panel.title' | 'style-panel.vertical-align' | 'theme.dark' | 'theme.light' | 'theme.system' | 'toast.close' | 'toast.error.copy-fail.desc' | 'toast.error.copy-fail.title' | 'toast.error.export-fail.desc' | 'toast.error.export-fail.title' | 'toast.error' | 'toast.info' | 'toast.success' | 'toast.warning' | 'tool-panel.more' | 'tool-panel.title' | 'tool.arrow-down' | 'tool.arrow-left' | 'tool.arrow-right' | 'tool.arrow-up' | 'tool.arrow' | 'tool.aspect-ratio.circle' | 'tool.aspect-ratio.landscape' | 'tool.aspect-ratio.original' | 'tool.aspect-ratio.portrait' | 'tool.aspect-ratio.square' | 'tool.aspect-ratio.wide' | 'tool.aspect-ratio' | 'tool.bookmark' | 'tool.check-box' | 'tool.cloud' | 'tool.diamond' | 'tool.draw' | 'tool.ellipse' | 'tool.embed' | 'tool.eraser' | 'tool.flip-horz' | 'tool.flip-vert' | 'tool.frame' | 'tool.hand' | 'tool.heart' | 'tool.hexagon' | 'tool.highlight' | 'tool.image-crop' | 'tool.image-toolbar-title' | 'tool.image-zoom' | 'tool.laser' | 'tool.line' | 'tool.media-alt-text-confirm' | 'tool.media-alt-text-desc' | 'tool.media-alt-text' | 'tool.media' | 'tool.note' | 'tool.octagon' | 'tool.oval' | 'tool.pentagon' | 'tool.pointer-down' | 'tool.rectangle' | 'tool.replace-media' | 'tool.rhombus' | 'tool.rich-text-bold' | 'tool.rich-text-bulletList' | 'tool.rich-text-code' | 'tool.rich-text-header' | 'tool.rich-text-highlight' | 'tool.rich-text-italic' | 'tool.rich-text-link-remove' | 'tool.rich-text-link-visit' | 'tool.rich-text-link' | 'tool.rich-text-orderedList' | 'tool.rich-text-strikethrough' | 'tool.rich-text-toolbar-title' | 'tool.rotate-cw' | 'tool.select' | 'tool.star' | 'tool.text' | 'tool.trapezoid' | 'tool.triangle' | 'tool.x-box' | 'ui.checked' | 'ui.close' | 'ui.unchecked' | 'verticalAlign-style.end' | 'verticalAlign-style.middle' | 'verticalAlign-style.start' | 'vscode.file-open.backup-failed' | 'vscode.file-open.backup-saved' | 'vscode.file-open.backup' | 'vscode.file-open.desc' | 'vscode.file-open.dont-show-again' | 'vscode.file-open.open';
4192
+ export declare type TLUiTranslationKey = 'a11y.adjust-shape-styles' | 'a11y.enlarge-shape' | 'a11y.enter-leave-container' | 'a11y.move-shape-faster' | 'a11y.move-shape' | 'a11y.multiple-shapes' | 'a11y.open-context-menu' | 'a11y.open-keyboard-shortcuts' | 'a11y.pan-camera' | 'a11y.repeat-shape' | 'a11y.rotate-shape-ccw-fine' | 'a11y.rotate-shape-ccw' | 'a11y.rotate-shape-cw-fine' | 'a11y.rotate-shape-cw' | 'a11y.select-shape-direction' | 'a11y.select-shape' | 'a11y.shape-image' | 'a11y.shape-index' | 'a11y.shape-video' | 'a11y.shrink-shape' | 'a11y.skip-to-main-content' | 'a11y.status' | 'action.align-bottom' | 'action.align-center-horizontal.short' | 'action.align-center-horizontal' | 'action.align-center-vertical.short' | 'action.align-center-vertical' | 'action.align-left' | 'action.align-right' | 'action.align-top' | 'action.back-to-content' | 'action.bring-forward' | 'action.bring-to-front' | 'action.convert-to-bookmark' | 'action.convert-to-embed' | 'action.copy-as-png.short' | 'action.copy-as-png' | 'action.copy-as-svg.short' | 'action.copy-as-svg' | 'action.copy' | 'action.cut' | 'action.delete' | 'action.distribute-horizontal.short' | 'action.distribute-horizontal' | 'action.distribute-vertical.short' | 'action.distribute-vertical' | 'action.download-original' | 'action.duplicate' | 'action.edit-link' | 'action.exit-pen-mode' | 'action.export-all-as-png.short' | 'action.export-all-as-png' | 'action.export-all-as-svg.short' | 'action.export-all-as-svg' | 'action.export-as-png.short' | 'action.export-as-png' | 'action.export-as-svg.short' | 'action.export-as-svg' | 'action.fit-frame-to-content' | 'action.flatten-to-image' | 'action.flip-horizontal.short' | 'action.flip-horizontal' | 'action.flip-vertical.short' | 'action.flip-vertical' | 'action.fork-project-on-tldraw' | 'action.fork-project' | 'action.group' | 'action.insert-embed' | 'action.insert-media' | 'action.leave-shared-project' | 'action.new-project' | 'action.new-shared-project' | 'action.open-cursor-chat' | 'action.open-embed-link' | 'action.open-file' | 'action.open-kbd-shortcuts' | 'action.pack' | 'action.paste-error-description' | 'action.paste-error-title' | 'action.paste' | 'action.print' | 'action.redo' | 'action.remove-frame' | 'action.rename' | 'action.rotate-ccw' | 'action.rotate-cw' | 'action.save-copy' | 'action.select-all' | 'action.select-none' | 'action.send-backward' | 'action.send-to-back' | 'action.share-project' | 'action.stack-horizontal.short' | 'action.stack-horizontal' | 'action.stack-vertical.short' | 'action.stack-vertical' | 'action.stop-following' | 'action.stretch-horizontal.short' | 'action.stretch-horizontal' | 'action.stretch-vertical.short' | 'action.stretch-vertical' | 'action.toggle-auto-size' | 'action.toggle-dark-mode.menu' | 'action.toggle-dark-mode' | 'action.toggle-debug-mode.menu' | 'action.toggle-debug-mode' | 'action.toggle-dynamic-size-mode.menu' | 'action.toggle-dynamic-size-mode' | 'action.toggle-edge-scrolling.menu' | 'action.toggle-edge-scrolling' | 'action.toggle-focus-mode.menu' | 'action.toggle-focus-mode' | 'action.toggle-grid.menu' | 'action.toggle-grid' | 'action.toggle-keyboard-shortcuts.menu' | 'action.toggle-keyboard-shortcuts' | 'action.toggle-lock' | 'action.toggle-paste-at-cursor.menu' | 'action.toggle-paste-at-cursor' | 'action.toggle-reduce-motion.menu' | 'action.toggle-reduce-motion' | 'action.toggle-snap-mode.menu' | 'action.toggle-snap-mode' | 'action.toggle-tool-lock.menu' | 'action.toggle-tool-lock' | 'action.toggle-transparent.context-menu' | 'action.toggle-transparent.menu' | 'action.toggle-transparent' | 'action.toggle-ui-labels.menu' | 'action.toggle-ui-labels' | 'action.toggle-wrap-mode.menu' | 'action.toggle-wrap-mode' | 'action.undo' | 'action.ungroup' | 'action.unlock-all' | 'action.zoom-in' | 'action.zoom-out' | 'action.zoom-to-100' | 'action.zoom-to-fit' | 'action.zoom-to-selection' | 'actions-menu.title' | 'align-style.end' | 'align-style.justify' | 'align-style.middle' | 'align-style.start' | 'app.loading' | 'arrow-kind-style.arc' | 'arrow-kind-style.elbow' | 'arrowheadEnd-style.arrow' | 'arrowheadEnd-style.bar' | 'arrowheadEnd-style.diamond' | 'arrowheadEnd-style.dot' | 'arrowheadEnd-style.inverted' | 'arrowheadEnd-style.none' | 'arrowheadEnd-style.pipe' | 'arrowheadEnd-style.square' | 'arrowheadEnd-style.triangle' | 'arrowheadStart-style.arrow' | 'arrowheadStart-style.bar' | 'arrowheadStart-style.diamond' | 'arrowheadStart-style.dot' | 'arrowheadStart-style.inverted' | 'arrowheadStart-style.none' | 'arrowheadStart-style.pipe' | 'arrowheadStart-style.square' | 'arrowheadStart-style.triangle' | 'assets.files.amount-too-many' | 'assets.files.size-too-big' | 'assets.files.type-not-allowed' | 'assets.files.upload-failed' | 'assets.url.failed' | 'color-style.black' | 'color-style.blue' | 'color-style.green' | 'color-style.grey' | 'color-style.light-blue' | 'color-style.light-green' | 'color-style.light-red' | 'color-style.light-violet' | 'color-style.orange' | 'color-style.red' | 'color-style.violet' | 'color-style.white' | 'color-style.yellow' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.edit' | 'context-menu.export-all-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context-menu.title' | 'context.pages.new-page' | 'cursor-chat.type-to-chat' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'document-name-menu.copy-link' | 'document.default-name' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.external-link' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | 'embed-dialog.back' | 'embed-dialog.cancel' | 'embed-dialog.create' | 'embed-dialog.instruction' | 'embed-dialog.invalid-url' | 'embed-dialog.title' | 'embed-dialog.url' | 'file-system.confirm-clear.cancel' | 'file-system.confirm-clear.continue' | 'file-system.confirm-clear.description' | 'file-system.confirm-clear.dont-show-again' | 'file-system.confirm-clear.title' | 'file-system.confirm-open.cancel' | 'file-system.confirm-open.description' | 'file-system.confirm-open.dont-show-again' | 'file-system.confirm-open.open' | 'file-system.confirm-open.title' | 'file-system.file-open-error.file-format-version-too-new' | 'file-system.file-open-error.generic-corrupted-file' | 'file-system.file-open-error.not-a-tldraw-file' | 'file-system.file-open-error.title' | 'file-system.shared-document-file-open-error.description' | 'file-system.shared-document-file-open-error.title' | 'fill-style.fill' | 'fill-style.none' | 'fill-style.pattern' | 'fill-style.semi' | 'fill-style.solid' | 'focus-mode.toggle-focus-mode' | 'font-style.draw' | 'font-style.mono' | 'font-style.sans' | 'font-style.serif' | 'geo-style.arrow-down' | 'geo-style.arrow-left' | 'geo-style.arrow-right' | 'geo-style.arrow-up' | 'geo-style.check-box' | 'geo-style.cloud' | 'geo-style.diamond' | 'geo-style.ellipse' | 'geo-style.heart' | 'geo-style.hexagon' | 'geo-style.octagon' | 'geo-style.oval' | 'geo-style.pentagon' | 'geo-style.rectangle' | 'geo-style.rhombus-2' | 'geo-style.rhombus' | 'geo-style.star' | 'geo-style.trapezoid' | 'geo-style.triangle' | 'geo-style.x-box' | 'handle.crop.bottom-left' | 'handle.crop.bottom-right' | 'handle.crop.bottom' | 'handle.crop.left' | 'handle.crop.right' | 'handle.crop.top-left' | 'handle.crop.top-right' | 'handle.crop.top' | 'handle.resize-bottom-left' | 'handle.resize-bottom-right' | 'handle.resize-bottom' | 'handle.resize-left' | 'handle.resize-right' | 'handle.resize-top-left' | 'handle.resize-top-right' | 'handle.resize-top' | 'handle.rotate.bottom_left_rotate' | 'handle.rotate.bottom_right_rotate' | 'handle.rotate.mobile_rotate' | 'handle.rotate.top_left_rotate' | 'handle.rotate.top_right_rotate' | 'help-menu.about' | 'help-menu.discord' | 'help-menu.github' | 'help-menu.import-tldr-file' | 'help-menu.keyboard-shortcuts' | 'help-menu.privacy' | 'help-menu.terms' | 'help-menu.title' | 'help-menu.twitter' | 'menu.accessibility' | 'menu.copy-as' | 'menu.edit' | 'menu.export-as' | 'menu.file' | 'menu.language' | 'menu.preferences' | 'menu.theme' | 'menu.title' | 'menu.view' | 'navigation-zone.minimap' | 'navigation-zone.title' | 'navigation-zone.toggle-minimap' | 'navigation-zone.zoom' | 'opacity-style.0.1' | 'opacity-style.0.25' | 'opacity-style.0.5' | 'opacity-style.0.75' | 'opacity-style.1' | 'page-menu.create-new-page' | 'page-menu.edit-done' | 'page-menu.edit-start' | 'page-menu.go-to-page' | 'page-menu.max-page-count-reached' | 'page-menu.new-page-initial-name' | 'page-menu.submenu.delete' | 'page-menu.submenu.duplicate-page' | 'page-menu.submenu.move-down' | 'page-menu.submenu.move-up' | 'page-menu.submenu.rename' | 'page-menu.submenu.title' | 'page-menu.title' | 'people-menu.anonymous-user' | 'people-menu.avatar-color' | 'people-menu.change-color' | 'people-menu.change-name' | 'people-menu.follow' | 'people-menu.following' | 'people-menu.invite' | 'people-menu.leading' | 'people-menu.title' | 'people-menu.user' | 'share-menu.copied' | 'share-menu.copy-link-note' | 'share-menu.copy-link' | 'share-menu.copy-readonly-link-note' | 'share-menu.copy-readonly-link' | 'share-menu.create-snapshot-link' | 'share-menu.creating-project' | 'share-menu.fork-note' | 'share-menu.offline-note' | 'share-menu.project-too-large' | 'share-menu.save-note' | 'share-menu.share-project' | 'share-menu.snapshot-link-note' | 'share-menu.title' | 'share-menu.upload-failed' | 'sharing.confirm-leave.cancel' | 'sharing.confirm-leave.description' | 'sharing.confirm-leave.dont-show-again' | 'sharing.confirm-leave.leave' | 'sharing.confirm-leave.title' | 'shortcuts-dialog.a11y' | 'shortcuts-dialog.collaboration' | 'shortcuts-dialog.edit' | 'shortcuts-dialog.file' | 'shortcuts-dialog.preferences' | 'shortcuts-dialog.text-formatting' | 'shortcuts-dialog.title' | 'shortcuts-dialog.tools' | 'shortcuts-dialog.transform' | 'shortcuts-dialog.view' | 'size-style.l' | 'size-style.m' | 'size-style.s' | 'size-style.xl' | 'spline-style.cubic' | 'spline-style.line' | 'status.offline' | 'style-panel.align' | 'style-panel.arrow-kind' | 'style-panel.arrowhead-end' | 'style-panel.arrowhead-start' | 'style-panel.arrowheads' | 'style-panel.color' | 'style-panel.dash' | 'style-panel.fill' | 'style-panel.font' | 'style-panel.geo' | 'style-panel.label-align' | 'style-panel.mixed' | 'style-panel.opacity' | 'style-panel.position' | 'style-panel.size' | 'style-panel.spline' | 'style-panel.title' | 'style-panel.vertical-align' | 'theme.dark' | 'theme.light' | 'theme.system' | 'toast.close' | 'toast.error.copy-fail.desc' | 'toast.error.copy-fail.title' | 'toast.error.export-fail.desc' | 'toast.error.export-fail.title' | 'toast.error' | 'toast.info' | 'toast.success' | 'toast.warning' | 'tool-panel.more' | 'tool-panel.title' | 'tool.arrow-down' | 'tool.arrow-left' | 'tool.arrow-right' | 'tool.arrow-up' | 'tool.arrow' | 'tool.aspect-ratio.circle' | 'tool.aspect-ratio.landscape' | 'tool.aspect-ratio.original' | 'tool.aspect-ratio.portrait' | 'tool.aspect-ratio.square' | 'tool.aspect-ratio.wide' | 'tool.aspect-ratio' | 'tool.bookmark' | 'tool.check-box' | 'tool.cloud' | 'tool.diamond' | 'tool.draw' | 'tool.ellipse' | 'tool.embed' | 'tool.eraser' | 'tool.flip-horz' | 'tool.flip-vert' | 'tool.frame' | 'tool.hand' | 'tool.heart' | 'tool.hexagon' | 'tool.highlight' | 'tool.image-crop' | 'tool.image-toolbar-title' | 'tool.image-zoom' | 'tool.laser' | 'tool.line' | 'tool.media-alt-text-confirm' | 'tool.media-alt-text-desc' | 'tool.media-alt-text' | 'tool.media' | 'tool.note' | 'tool.octagon' | 'tool.oval' | 'tool.pentagon' | 'tool.pointer-down' | 'tool.rectangle' | 'tool.replace-media' | 'tool.rhombus' | 'tool.rich-text-bold' | 'tool.rich-text-bulletList' | 'tool.rich-text-code' | 'tool.rich-text-header' | 'tool.rich-text-highlight' | 'tool.rich-text-italic' | 'tool.rich-text-link-remove' | 'tool.rich-text-link-visit' | 'tool.rich-text-link' | 'tool.rich-text-orderedList' | 'tool.rich-text-strikethrough' | 'tool.rich-text-toolbar-title' | 'tool.rotate-cw' | 'tool.select' | 'tool.star' | 'tool.text' | 'tool.trapezoid' | 'tool.triangle' | 'tool.x-box' | 'ui.checked' | 'ui.close' | 'ui.unchecked' | 'verticalAlign-style.end' | 'verticalAlign-style.middle' | 'verticalAlign-style.start' | 'vscode.file-open.backup-failed' | 'vscode.file-open.backup-saved' | 'vscode.file-open.backup' | 'vscode.file-open.desc' | 'vscode.file-open.dont-show-again' | 'vscode.file-open.open';
4009
4193
 
4010
4194
  /** @public */
4011
4195
  export declare interface TLUiTranslationProviderProps {
@@ -4382,6 +4566,9 @@ export declare function useShowCollaborationUi(): boolean;
4382
4566
  /** @public */
4383
4567
  export declare function useTldrawUiComponents(): TLUiComponents;
4384
4568
 
4569
+ /** @public */
4570
+ export declare function useTldrawUiOrientation(): TldrawUiOrientationContext;
4571
+
4385
4572
  /** @public */
4386
4573
  export declare function useToasts(): TLUiToastsContextType;
4387
4574
 
@@ -7,7 +7,15 @@ import { usePrefersReducedMotion } from "./lib/shapes/shared/usePrefersReducedMo
7
7
  import { DefaultA11yAnnouncer, useSelectedShapesAnnouncer } from "./lib/ui/components/A11y.mjs";
8
8
  import { AccessibilityMenu } from "./lib/ui/components/AccessibilityMenu.mjs";
9
9
  import { ColorSchemeMenu } from "./lib/ui/components/ColorSchemeMenu.mjs";
10
+ import { DefaultFollowingIndicator } from "./lib/ui/components/DefaultFollowingIndicator.mjs";
10
11
  import { DefaultDialogs } from "./lib/ui/components/Dialogs.mjs";
12
+ import {
13
+ TldrawUiColumn,
14
+ TldrawUiGrid,
15
+ TldrawUiOrientationProvider,
16
+ TldrawUiRow,
17
+ useTldrawUiOrientation
18
+ } from "./lib/ui/components/primitives/layout.mjs";
11
19
  import {
12
20
  TldrawUiMenuActionCheckboxItem
13
21
  } from "./lib/ui/components/primitives/menus/TldrawUiMenuActionCheckboxItem.mjs";
@@ -49,6 +57,7 @@ import {
49
57
  defaultHandleExternalUrlContent,
50
58
  getAssetInfo,
51
59
  getMediaAssetInfoPartial,
60
+ notifyIfFileNotAllowed,
52
61
  registerDefaultExternalContentHandlers
53
62
  } from "./lib/defaultExternalContentHandlers.mjs";
54
63
  import { defaultShapeTools } from "./lib/defaultShapeTools.mjs";
@@ -98,6 +107,8 @@ import {
98
107
  allDefaultFontFaces,
99
108
  DefaultFontFaces
100
109
  } from "./lib/shapes/shared/defaultFonts.mjs";
110
+ import { getStrokePoints } from "./lib/shapes/shared/freehand/getStrokePoints.mjs";
111
+ import { getSvgPathFromStrokePoints } from "./lib/shapes/shared/freehand/svg.mjs";
101
112
  import {
102
113
  PlainTextLabel,
103
114
  TextLabel
@@ -446,6 +457,7 @@ import { useMenuIsOpen } from "./lib/ui/hooks/useMenuIsOpen.mjs";
446
457
  import { useReadonly } from "./lib/ui/hooks/useReadonly.mjs";
447
458
  import { useRelevantStyles } from "./lib/ui/hooks/useRelevantStyles.mjs";
448
459
  import {
460
+ onDragFromToolbarToCreateShape,
449
461
  useTools
450
462
  } from "./lib/ui/hooks/useTools.mjs";
451
463
  import {
@@ -453,7 +465,7 @@ import {
453
465
  useTranslation
454
466
  } from "./lib/ui/hooks/useTranslation/useTranslation.mjs";
455
467
  import { useDefaultHelpers } from "./lib/ui/overrides.mjs";
456
- import { TldrawUi } from "./lib/ui/TldrawUi.mjs";
468
+ import { TldrawUi, TldrawUiInFrontOfTheCanvas } from "./lib/ui/TldrawUi.mjs";
457
469
  import { containBoxSize, downsizeImage } from "./lib/utils/assets/assets.mjs";
458
470
  import { preloadFont } from "./lib/utils/assets/preload-font.mjs";
459
471
  import { getEmbedInfo } from "./lib/utils/embeds/embeds.mjs";
@@ -497,7 +509,7 @@ import {
497
509
  } from "./lib/utils/tldr/file.mjs";
498
510
  registerTldrawLibraryVersion(
499
511
  "tldraw",
500
- "3.16.0-next.eafb52d15064",
512
+ "3.16.0-next.fe14f1b4181f",
501
513
  "esm"
502
514
  );
503
515
  export {
@@ -546,6 +558,7 @@ export {
546
558
  DefaultDebugMenu,
547
559
  DefaultDebugMenuContent,
548
560
  DefaultDialogs,
561
+ DefaultFollowingIndicator,
549
562
  DefaultFontFaces,
550
563
  DefaultHelpMenu,
551
564
  DefaultHelpMenuContent,
@@ -693,6 +706,7 @@ export {
693
706
  TldrawUiButtonIcon,
694
707
  TldrawUiButtonLabel,
695
708
  TldrawUiButtonPicker,
709
+ TldrawUiColumn,
696
710
  TldrawUiComponentsProvider,
697
711
  TldrawUiContextProvider,
698
712
  TldrawUiContextualToolbar,
@@ -712,7 +726,9 @@ export {
712
726
  TldrawUiDropdownMenuSubTrigger,
713
727
  TldrawUiDropdownMenuTrigger,
714
728
  TldrawUiEventsProvider,
729
+ TldrawUiGrid,
715
730
  TldrawUiIcon,
731
+ TldrawUiInFrontOfTheCanvas,
716
732
  TldrawUiInput,
717
733
  TldrawUiKbd,
718
734
  TldrawUiMenuActionCheckboxItem,
@@ -723,9 +739,11 @@ export {
723
739
  TldrawUiMenuItem,
724
740
  TldrawUiMenuSubmenu,
725
741
  TldrawUiMenuToolItem,
742
+ TldrawUiOrientationProvider,
726
743
  TldrawUiPopover,
727
744
  TldrawUiPopoverContent,
728
745
  TldrawUiPopoverTrigger,
746
+ TldrawUiRow,
729
747
  TldrawUiSlider,
730
748
  TldrawUiToastsProvider,
731
749
  TldrawUiToolbar,
@@ -802,7 +820,11 @@ export {
802
820
  getEmbedInfo,
803
821
  getHitShapeOnCanvasPointerDown,
804
822
  getMediaAssetInfoPartial,
823
+ getStrokePoints,
824
+ getSvgPathFromStrokePoints,
805
825
  getUncroppedSize,
826
+ notifyIfFileNotAllowed,
827
+ onDragFromToolbarToCreateShape,
806
828
  parseAndLoadDocument,
807
829
  parseTldrawJsonFile,
808
830
  preloadFont,
@@ -851,6 +873,7 @@ export {
851
873
  useSelectedShapesAnnouncer,
852
874
  useShowCollaborationUi,
853
875
  useTldrawUiComponents,
876
+ useTldrawUiOrientation,
854
877
  useToasts,
855
878
  useTools,
856
879
  useTranslation,