tldraw 3.16.0-canary.ed8bd30c0f28 → 3.16.0-canary.f293c3bb58f5

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 (363) hide show
  1. package/dist-cjs/index.d.ts +203 -6
  2. package/dist-cjs/index.js +18 -1
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/lib/canvas/TldrawScribble.js +1 -1
  5. package/dist-cjs/lib/canvas/TldrawScribble.js.map +2 -2
  6. package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js +3 -3
  7. package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js.map +2 -2
  8. package/dist-cjs/lib/shapes/arrow/arrowTargetState.js +1 -1
  9. package/dist-cjs/lib/shapes/arrow/arrowTargetState.js.map +2 -2
  10. package/dist-cjs/lib/shapes/arrow/elbow/ElbowArrowDebug.js +3 -3
  11. package/dist-cjs/lib/shapes/arrow/elbow/ElbowArrowDebug.js.map +1 -1
  12. package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js +3 -3
  13. package/dist-cjs/lib/shapes/draw/DrawShapeUtil.js.map +2 -2
  14. package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js +1 -1
  15. package/dist-cjs/lib/shapes/embed/EmbedShapeUtil.js.map +1 -1
  16. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +12 -12
  17. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
  18. package/dist-cjs/lib/shapes/frame/components/FrameHeading.js +1 -1
  19. package/dist-cjs/lib/shapes/frame/components/FrameHeading.js.map +2 -2
  20. package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js +2 -2
  21. package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js.map +2 -2
  22. package/dist-cjs/lib/shapes/geo/components/GeoShapeBody.js +2 -1
  23. package/dist-cjs/lib/shapes/geo/components/GeoShapeBody.js.map +2 -2
  24. package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js +5 -1
  25. package/dist-cjs/lib/shapes/highlight/HighlightShapeUtil.js.map +2 -2
  26. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js +3 -3
  27. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js.map +1 -1
  28. package/dist-cjs/lib/shapes/line/LineShapeUtil.js +5 -1
  29. package/dist-cjs/lib/shapes/line/LineShapeUtil.js.map +2 -2
  30. package/dist-cjs/lib/shapes/note/NoteShapeUtil.js +4 -4
  31. package/dist-cjs/lib/shapes/note/NoteShapeUtil.js.map +2 -2
  32. package/dist-cjs/lib/shapes/shared/ShapeFill.js +4 -4
  33. package/dist-cjs/lib/shapes/shared/ShapeFill.js.map +2 -2
  34. package/dist-cjs/lib/shapes/shared/freehand/svg.js.map +2 -2
  35. package/dist-cjs/lib/shapes/shared/usePrefersReducedMotion.js +10 -1
  36. package/dist-cjs/lib/shapes/shared/usePrefersReducedMotion.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 +14 -0
  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/AccessibilityMenu.js +35 -0
  51. package/dist-cjs/lib/ui/components/AccessibilityMenu.js.map +7 -0
  52. package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js +12 -3
  53. package/dist-cjs/lib/ui/components/ActionsMenu/DefaultActionsMenu.js.map +2 -2
  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 +1 -1
  57. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map +1 -1
  58. package/dist-cjs/lib/ui/components/MainMenu/DefaultMainMenuContent.js +3 -3
  59. package/dist-cjs/lib/ui/components/MainMenu/DefaultMainMenuContent.js.map +2 -2
  60. package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js +4 -4
  61. package/dist-cjs/lib/ui/components/Minimap/MinimapManager.js.map +2 -2
  62. package/dist-cjs/lib/ui/components/MobileStylePanel.js +5 -3
  63. package/dist-cjs/lib/ui/components/MobileStylePanel.js.map +2 -2
  64. package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js +1 -1
  65. package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js.map +2 -2
  66. package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js +2 -1
  67. package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js.map +2 -2
  68. package/dist-cjs/lib/ui/components/SharePanel/PeopleMenuItem.js +3 -2
  69. package/dist-cjs/lib/ui/components/SharePanel/PeopleMenuItem.js.map +2 -2
  70. package/dist-cjs/lib/ui/components/SharePanel/UserPresenceColorPicker.js +2 -2
  71. package/dist-cjs/lib/ui/components/SharePanel/UserPresenceColorPicker.js.map +2 -2
  72. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js +2 -0
  73. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js.map +2 -2
  74. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +171 -140
  75. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
  76. package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js +3 -3
  77. package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js.map +2 -2
  78. package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js +26 -25
  79. package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js.map +3 -3
  80. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js +1 -1
  81. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map +2 -2
  82. package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbar.js +66 -21
  83. package/dist-cjs/lib/ui/components/Toolbar/DefaultToolbar.js.map +3 -3
  84. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js +189 -80
  85. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js.map +3 -3
  86. package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js +5 -4
  87. package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js.map +2 -2
  88. package/dist-cjs/lib/ui/components/menu-items.js +6 -0
  89. package/dist-cjs/lib/ui/components/menu-items.js.map +2 -2
  90. package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js +5 -16
  91. package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js.map +3 -3
  92. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js +1 -1
  93. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js.map +2 -2
  94. package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js +3 -2
  95. package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js.map +3 -3
  96. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +30 -7
  97. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
  98. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +262 -0
  99. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +7 -0
  100. package/dist-cjs/lib/ui/components/primitives/layout.js +76 -0
  101. package/dist-cjs/lib/ui/components/primitives/layout.js.map +7 -0
  102. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuContext.js.map +2 -2
  103. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js +25 -12
  104. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js.map +2 -2
  105. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +154 -20
  106. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
  107. package/dist-cjs/lib/ui/context/TldrawUiContextProvider.js +3 -2
  108. package/dist-cjs/lib/ui/context/TldrawUiContextProvider.js.map +2 -2
  109. package/dist-cjs/lib/ui/context/actions.js +31 -2
  110. package/dist-cjs/lib/ui/context/actions.js.map +2 -2
  111. package/dist-cjs/lib/ui/context/events.js.map +2 -2
  112. package/dist-cjs/lib/ui/hooks/useTools.js +94 -9
  113. package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
  114. package/dist-cjs/lib/ui/hooks/useTranslation/TLUiTranslationKey.js.map +1 -1
  115. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js +3 -0
  116. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +2 -2
  117. package/dist-cjs/lib/ui/version.js +3 -3
  118. package/dist-cjs/lib/ui/version.js.map +1 -1
  119. package/dist-esm/index.d.mts +203 -6
  120. package/dist-esm/index.mjs +29 -1
  121. package/dist-esm/index.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/shapes/arrow/ArrowShapeUtil.mjs +4 -3
  125. package/dist-esm/lib/shapes/arrow/ArrowShapeUtil.mjs.map +2 -2
  126. package/dist-esm/lib/shapes/arrow/arrowTargetState.mjs +1 -1
  127. package/dist-esm/lib/shapes/arrow/arrowTargetState.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 +13 -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 +3 -3
  145. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs.map +1 -1
  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/shared/usePrefersReducedMotion.mjs +10 -1
  154. package/dist-esm/lib/shapes/shared/usePrefersReducedMotion.mjs.map +2 -2
  155. package/dist-esm/lib/shapes/text/TextShapeUtil.mjs +3 -2
  156. package/dist-esm/lib/shapes/text/TextShapeUtil.mjs.map +2 -2
  157. package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs +3 -3
  158. package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs.map +1 -1
  159. package/dist-esm/lib/tools/EraserTool/childStates/Erasing.mjs +26 -1
  160. package/dist-esm/lib/tools/EraserTool/childStates/Erasing.mjs.map +2 -2
  161. package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs +13 -0
  162. package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs.map +2 -2
  163. package/dist-esm/lib/tools/SelectTool/childStates/Translating.mjs.map +2 -2
  164. package/dist-esm/lib/ui/TldrawUi.mjs +16 -2
  165. package/dist-esm/lib/ui/TldrawUi.mjs.map +3 -3
  166. package/dist-esm/lib/ui/assetUrls.mjs +13 -10
  167. package/dist-esm/lib/ui/assetUrls.mjs.map +2 -2
  168. package/dist-esm/lib/ui/components/AccessibilityMenu.mjs +19 -0
  169. package/dist-esm/lib/ui/components/AccessibilityMenu.mjs.map +7 -0
  170. package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenu.mjs +12 -3
  171. package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenu.mjs.map +2 -2
  172. package/dist-esm/lib/ui/components/DefaultMenuPanel.mjs +3 -2
  173. package/dist-esm/lib/ui/components/DefaultMenuPanel.mjs.map +2 -2
  174. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs +1 -1
  175. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.map +1 -1
  176. package/dist-esm/lib/ui/components/MainMenu/DefaultMainMenuContent.mjs +3 -5
  177. package/dist-esm/lib/ui/components/MainMenu/DefaultMainMenuContent.mjs.map +2 -2
  178. package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs +4 -4
  179. package/dist-esm/lib/ui/components/Minimap/MinimapManager.mjs.map +2 -2
  180. package/dist-esm/lib/ui/components/MobileStylePanel.mjs +6 -3
  181. package/dist-esm/lib/ui/components/MobileStylePanel.mjs.map +2 -2
  182. package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs +1 -1
  183. package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs.map +2 -2
  184. package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs +2 -1
  185. package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs.map +2 -2
  186. package/dist-esm/lib/ui/components/SharePanel/PeopleMenuItem.mjs +3 -2
  187. package/dist-esm/lib/ui/components/SharePanel/PeopleMenuItem.mjs.map +2 -2
  188. package/dist-esm/lib/ui/components/SharePanel/UserPresenceColorPicker.mjs +2 -2
  189. package/dist-esm/lib/ui/components/SharePanel/UserPresenceColorPicker.mjs.map +2 -2
  190. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs +3 -1
  191. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs.map +2 -2
  192. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +171 -140
  193. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
  194. package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs +3 -3
  195. package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs.map +2 -2
  196. package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs +26 -25
  197. package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map +2 -2
  198. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs +1 -1
  199. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs.map +2 -2
  200. package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs +56 -21
  201. package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs.map +2 -2
  202. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs +192 -81
  203. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs.map +3 -3
  204. package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs +5 -4
  205. package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs.map +2 -2
  206. package/dist-esm/lib/ui/components/menu-items.mjs +6 -0
  207. package/dist-esm/lib/ui/components/menu-items.mjs.map +2 -2
  208. package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs +6 -6
  209. package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs.map +2 -2
  210. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs +1 -1
  211. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs.map +2 -2
  212. package/dist-esm/lib/ui/components/primitives/TldrawUiPopover.mjs +3 -2
  213. package/dist-esm/lib/ui/components/primitives/TldrawUiPopover.mjs.map +2 -2
  214. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +30 -7
  215. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
  216. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +239 -0
  217. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +7 -0
  218. package/dist-esm/lib/ui/components/primitives/layout.mjs +46 -0
  219. package/dist-esm/lib/ui/components/primitives/layout.mjs.map +7 -0
  220. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuContext.mjs.map +2 -2
  221. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs +25 -12
  222. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs.map +2 -2
  223. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +162 -22
  224. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
  225. package/dist-esm/lib/ui/context/TldrawUiContextProvider.mjs +3 -2
  226. package/dist-esm/lib/ui/context/TldrawUiContextProvider.mjs.map +2 -2
  227. package/dist-esm/lib/ui/context/actions.mjs +31 -2
  228. package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
  229. package/dist-esm/lib/ui/context/events.mjs.map +2 -2
  230. package/dist-esm/lib/ui/hooks/useTools.mjs +102 -10
  231. package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
  232. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +3 -0
  233. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
  234. package/dist-esm/lib/ui/version.mjs +3 -3
  235. package/dist-esm/lib/ui/version.mjs.map +1 -1
  236. package/package.json +11 -34
  237. package/src/index.ts +23 -0
  238. package/src/lib/canvas/TldrawScribble.tsx +1 -1
  239. package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts +2 -1
  240. package/src/lib/shapes/arrow/ArrowShapeTool.test.ts +4 -3
  241. package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts +7 -6
  242. package/src/lib/shapes/arrow/ArrowShapeUtil.tsx +4 -3
  243. package/src/lib/shapes/arrow/arrowTargetState.ts +2 -1
  244. package/src/lib/shapes/arrow/elbow/ElbowArrowDebug.tsx +3 -3
  245. package/src/lib/shapes/draw/DrawShapeTool.test.ts +0 -5
  246. package/src/lib/shapes/draw/DrawShapeUtil.tsx +4 -3
  247. package/src/lib/shapes/embed/EmbedShapeUtil.tsx +1 -1
  248. package/src/lib/shapes/frame/FrameShapeUtil.tsx +21 -14
  249. package/src/lib/shapes/frame/components/FrameHeading.tsx +1 -1
  250. package/src/lib/shapes/geo/GeoShapeUtil.tsx +3 -2
  251. package/src/lib/shapes/geo/components/GeoShapeBody.tsx +2 -2
  252. package/src/lib/shapes/highlight/HighlightShapeUtil.tsx +7 -1
  253. package/src/lib/shapes/image/ImageShapeUtil.tsx +3 -3
  254. package/src/lib/shapes/line/LineShapeUtil.test.tsx +4 -3
  255. package/src/lib/shapes/line/LineShapeUtil.tsx +6 -1
  256. package/src/lib/shapes/line/__snapshots__/LineShapeUtil.test.tsx.snap +2 -2
  257. package/src/lib/shapes/note/NoteShapeUtil.tsx +9 -4
  258. package/src/lib/shapes/shared/ShapeFill.tsx +5 -4
  259. package/src/lib/shapes/shared/freehand/svg.ts +2 -0
  260. package/src/lib/shapes/shared/usePrefersReducedMotion.tsx +11 -1
  261. package/src/lib/shapes/text/TextShapeTool.test.ts +6 -5
  262. package/src/lib/shapes/text/TextShapeUtil.tsx +3 -2
  263. package/src/lib/shapes/video/VideoShapeUtil.tsx +3 -3
  264. package/src/lib/tools/EraserTool/childStates/Erasing.ts +34 -1
  265. package/src/lib/tools/EraserTool/childStates/Pointing.ts +20 -0
  266. package/src/lib/tools/SelectTool/childStates/Translating.ts +0 -1
  267. package/src/lib/ui/TldrawUi.tsx +17 -2
  268. package/src/lib/ui/assetUrls.ts +13 -10
  269. package/src/lib/ui/components/AccessibilityMenu.tsx +20 -0
  270. package/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx +15 -3
  271. package/src/lib/ui/components/DefaultMenuPanel.tsx +4 -3
  272. package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +1 -1
  273. package/src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx +4 -4
  274. package/src/lib/ui/components/Minimap/MinimapManager.ts +4 -4
  275. package/src/lib/ui/components/MobileStylePanel.tsx +9 -6
  276. package/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx +1 -1
  277. package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx +3 -2
  278. package/src/lib/ui/components/SharePanel/PeopleMenuItem.tsx +4 -3
  279. package/src/lib/ui/components/SharePanel/UserPresenceColorPicker.tsx +3 -3
  280. package/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx +3 -1
  281. package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +146 -107
  282. package/src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx +3 -3
  283. package/src/lib/ui/components/StylePanel/DropdownPicker.tsx +7 -6
  284. package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx +1 -1
  285. package/src/lib/ui/components/Toolbar/DefaultToolbar.tsx +55 -23
  286. package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx +212 -61
  287. package/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx +14 -11
  288. package/src/lib/ui/components/menu-items.tsx +8 -0
  289. package/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx +40 -37
  290. package/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx +1 -1
  291. package/src/lib/ui/components/primitives/TldrawUiPopover.tsx +4 -2
  292. package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +51 -12
  293. package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +325 -0
  294. package/src/lib/ui/components/primitives/layout.tsx +107 -0
  295. package/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx +0 -1
  296. package/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx +29 -16
  297. package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +221 -19
  298. package/src/lib/ui/context/TldrawUiContextProvider.tsx +23 -20
  299. package/src/lib/ui/context/actions.tsx +31 -2
  300. package/src/lib/ui/context/events.tsx +2 -0
  301. package/src/lib/ui/hooks/useTools.tsx +140 -10
  302. package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +3 -0
  303. package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +3 -0
  304. package/src/lib/ui/version.ts +3 -3
  305. package/src/lib/ui.css +409 -292
  306. package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap +5 -5
  307. package/src/lib/utils/tldr/__snapshots__/buildFromV1Document.test.ts.snap +4 -4
  308. package/src/test/A11y.test.tsx +3 -2
  309. package/src/test/ClickManager.test.ts +7 -6
  310. package/src/test/Editor.test.tsx +20 -19
  311. package/src/test/EraserTool.test.ts +184 -13
  312. package/src/test/HandTool.test.ts +10 -9
  313. package/src/test/HighlightShape.test.ts +2 -1
  314. package/src/test/SelectTool.test.ts +3 -2
  315. package/src/test/TLUserPreferences.test.ts +4 -3
  316. package/src/test/TestEditor.ts +13 -15
  317. package/src/test/TldrawEditor.test.tsx +11 -10
  318. package/src/test/ZoomTool.test.ts +7 -6
  319. package/src/test/__snapshots__/drawing.test.ts.snap +2 -2
  320. package/src/test/__snapshots__/groups.test.tsx.snap +6 -6
  321. package/src/test/__snapshots__/resizing.test.ts.snap +2 -2
  322. package/src/test/arrows-megabus.test.tsx +17 -10
  323. package/src/test/bindings.test.tsx +24 -37
  324. package/src/test/bookmark-shapes.test.ts +1 -8
  325. package/src/test/commands/__snapshots__/getSvgString.test.ts.snap +23 -7
  326. package/src/test/commands/__snapshots__/packShapes.test.ts.snap +8 -8
  327. package/src/test/commands/__snapshots__/zoomToFit.test.ts.snap +2 -2
  328. package/src/test/commands/alignShapes.test.tsx +25 -24
  329. package/src/test/commands/animationSpeed.test.ts +2 -1
  330. package/src/test/commands/centerOnPoint.test.ts +3 -2
  331. package/src/test/commands/clipboard.test.ts +3 -2
  332. package/src/test/commands/createShapes.test.ts +2 -1
  333. package/src/test/commands/deleteShapes.test.ts +2 -1
  334. package/src/test/commands/distributeShapes.test.tsx +11 -10
  335. package/src/test/commands/getSvgString.test.ts +2 -1
  336. package/src/test/commands/packShapes.test.ts +5 -4
  337. package/src/test/commands/resizeShape.test.ts +2 -1
  338. package/src/test/commands/rotateShapes.test.ts +7 -6
  339. package/src/test/commands/setCamera.test.ts +4 -3
  340. package/src/test/commands/setCurrentPage.test.ts +3 -2
  341. package/src/test/commands/stackShapes.test.ts +11 -10
  342. package/src/test/commands/stretch.test.tsx +13 -12
  343. package/src/test/createDeepLink.test.tsx +2 -1
  344. package/src/test/cropping.test.ts +3 -2
  345. package/src/test/drawing.test.ts +2 -1
  346. package/src/test/flipShapes.test.ts +4 -3
  347. package/src/test/frames.test.ts +25 -24
  348. package/src/test/getCulledShapes.test.tsx +3 -2
  349. package/src/test/groups.test.tsx +1 -1
  350. package/src/test/handleDeepLink.test.tsx +2 -1
  351. package/src/test/inner-outer-margin.test.ts +315 -0
  352. package/src/test/maxShapes.test.ts +3 -2
  353. package/src/test/modifiers.test.ts +5 -4
  354. package/src/test/navigation.test.ts +12 -11
  355. package/src/test/panning.test.ts +2 -1
  356. package/src/test/perf/perf.test.ts +2 -1
  357. package/src/test/registerDeepLinkListener.test.tsx +10 -9
  358. package/src/test/resizing.test.ts +39 -38
  359. package/src/test/select.test.tsx +4 -3
  360. package/src/test/selection-omnibus.test.ts +11 -10
  361. package/src/test/shapeutils.test.ts +4 -3
  362. package/src/test/translating.test.ts +9 -8
  363. package/tldraw.css +702 -580
@@ -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';
@@ -148,6 +151,9 @@ export declare interface A11yProviderProps {
148
151
  children: React.ReactNode;
149
152
  }
150
153
 
154
+ /** @public @react */
155
+ export declare function AccessibilityMenu(): JSX_2.Element;
156
+
151
157
  /** @public */
152
158
  export declare interface ActionsProviderProps {
153
159
  overrides?(editor: Editor, actions: TLUiActionsContextType, helpers: TLUiOverrideHelpers): TLUiActionsContextType;
@@ -1011,6 +1017,11 @@ export declare function DefaultToolbarContent(): JSX_2.Element;
1011
1017
  /** @public */
1012
1018
  export declare interface DefaultToolbarProps {
1013
1019
  children?: ReactNode;
1020
+ orientation?: 'horizontal' | 'vertical';
1021
+ minItems?: number;
1022
+ minSizePx?: number;
1023
+ maxItems?: number;
1024
+ maxSizePx?: number;
1014
1025
  }
1015
1026
 
1016
1027
  /** @public */
@@ -1769,6 +1780,29 @@ export declare function getHitShapeOnCanvasPointerDown(editor: Editor, hitLabels
1769
1780
  /** @public */
1770
1781
  export declare function getMediaAssetInfoPartial(file: File, assetId: TLAssetId, isImageType: boolean, isVideoType: boolean, maxImageDimension?: number): Promise<TLImageAsset | TLVideoAsset>;
1771
1782
 
1783
+ /**
1784
+ * ## getStrokePoints
1785
+ *
1786
+ * Get an array of points as objects with an adjusted point, pressure, vector, distance, and
1787
+ * runningLength.
1788
+ *
1789
+ * @param points - An array of points (as `[x, y, pressure]` or `{x, y, pressure}`). Pressure is
1790
+ * optional in both cases.
1791
+ * @param options - An object with options.
1792
+ * @public
1793
+ */
1794
+ export declare function getStrokePoints(rawInputPoints: VecLike[], options?: StrokeOptions): StrokePoint[];
1795
+
1796
+ /**
1797
+ * Turn an array of stroke points into a path of quadradic curves.
1798
+ *
1799
+ * @param points - The stroke points returned from perfect-freehand
1800
+ * @param closed - Whether the shape is closed
1801
+ *
1802
+ * @public
1803
+ */
1804
+ export declare function getSvgPathFromStrokePoints(points: StrokePoint[], closed?: boolean): string;
1805
+
1772
1806
  /**
1773
1807
  * Original (uncropped) width and height of shape.
1774
1808
  *
@@ -2117,6 +2151,29 @@ export declare function NoteToolbarItem(): JSX_2.Element;
2117
2151
  /** @public @react */
2118
2152
  export declare function OfflineIndicator(): JSX_2.Element;
2119
2153
 
2154
+ /**
2155
+ * A helper method to use in {@link TLUiToolItem#onDragStart} to create a shape by dragging it from
2156
+ * the toolbar.
2157
+ * @public
2158
+ */
2159
+ export declare function onDragFromToolbarToCreateShape(editor: Editor, info: TLPointerEventInfo, opts: OnDragFromToolbarToCreateShapesOpts): void;
2160
+
2161
+ /**
2162
+ * Options for {@link onDragFromToolbarToCreateShape}.
2163
+ * @public
2164
+ */
2165
+ export declare interface OnDragFromToolbarToCreateShapesOpts {
2166
+ /**
2167
+ * Create the shape being dragged. You don't need to worry about positioning it, as it'll be
2168
+ * immediately updated with the correct position.
2169
+ */
2170
+ createShape(id: TLShapeId): void;
2171
+ /**
2172
+ * Called once the drag interaction has finished.
2173
+ */
2174
+ onDragEnd?(id: TLShapeId): void;
2175
+ }
2176
+
2120
2177
  /** @public @react */
2121
2178
  export declare function OpacitySlider(): JSX_2.Element | null;
2122
2179
 
@@ -2124,11 +2181,17 @@ export declare function OpacitySlider(): JSX_2.Element | null;
2124
2181
  export declare function OvalToolbarItem(): JSX_2.Element;
2125
2182
 
2126
2183
  /** @public @react */
2127
- export declare function OverflowingToolbar({ children }: OverflowingToolbarProps): JSX_2.Element;
2184
+ export declare function OverflowingToolbar({ children, orientation, sizingParentClassName, minItems, minSizePx, maxItems, maxSizePx, }: OverflowingToolbarProps): JSX_2.Element;
2128
2185
 
2129
2186
  /** @public */
2130
2187
  export declare interface OverflowingToolbarProps {
2131
2188
  children: React.ReactNode;
2189
+ orientation: 'horizontal' | 'vertical';
2190
+ sizingParentClassName: string;
2191
+ minItems: number;
2192
+ minSizePx: number;
2193
+ maxItems: number;
2194
+ maxSizePx: number;
2132
2195
  }
2133
2196
 
2134
2197
  /** @public @react */
@@ -2517,6 +2580,54 @@ export declare function StarToolbarItem(): JSX_2.Element;
2517
2580
  /** @public */
2518
2581
  export declare const STROKE_SIZES: Record<TLDefaultSizeStyle, number>;
2519
2582
 
2583
+ /**
2584
+ * The options object for `getStroke` or `getStrokePoints`.
2585
+ *
2586
+ * @public
2587
+ */
2588
+ export declare interface StrokeOptions {
2589
+ /** The base size (diameter) of the stroke. */
2590
+ size?: number;
2591
+ /** The effect of pressure on the stroke's size. */
2592
+ thinning?: number;
2593
+ /** How much to soften the stroke's edges. */
2594
+ smoothing?: number;
2595
+ streamline?: number;
2596
+ /** An easing function to apply to each point's pressure. */
2597
+ easing?(pressure: number): number;
2598
+ /** Whether to simulate pressure based on velocity. */
2599
+ simulatePressure?: boolean;
2600
+ /** Cap, taper and easing for the start of the line. */
2601
+ start?: {
2602
+ cap?: boolean;
2603
+ easing?(distance: number): number;
2604
+ taper?: boolean | number;
2605
+ };
2606
+ /** Cap, taper and easing for the end of the line. */
2607
+ end?: {
2608
+ cap?: boolean;
2609
+ easing?(distance: number): number;
2610
+ taper?: boolean | number;
2611
+ };
2612
+ /** Whether to handle the points as a completed stroke. */
2613
+ last?: boolean;
2614
+ }
2615
+
2616
+ /**
2617
+ * The points returned by `getStrokePoints`, and the input for `getStrokeOutlinePoints`
2618
+ *
2619
+ * @public
2620
+ */
2621
+ export declare interface StrokePoint {
2622
+ point: Vec;
2623
+ input: Vec;
2624
+ vector: Vec;
2625
+ pressure: number;
2626
+ distance: number;
2627
+ runningLength: number;
2628
+ radius: number;
2629
+ }
2630
+
2520
2631
  /** @public */
2521
2632
  export declare interface StylePickerSetProps {
2522
2633
  styles: ReadonlySharedStyleMap;
@@ -2915,6 +3026,13 @@ export declare function TldrawUiButtonLabel({ children }: TLUiButtonLabelProps):
2915
3026
  /** @public */
2916
3027
  export declare const TldrawUiButtonPicker: <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement;
2917
3028
 
3029
+ /**
3030
+ * A column, usually of UI controls like buttons, select dropdown, checkboxes, etc.
3031
+ *
3032
+ * @public @react
3033
+ */
3034
+ export declare const TldrawUiColumn: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;
3035
+
2918
3036
  /** @public @react */
2919
3037
  export declare function TldrawUiComponentsProvider({ overrides, children, }: TLUiComponentsProviderProps): JSX_2.Element;
2920
3038
 
@@ -2977,6 +3095,13 @@ export declare function TldrawUiDropdownMenuTrigger({ children, ...rest }: TLUiD
2977
3095
  /** @public @react */
2978
3096
  export declare function TldrawUiEventsProvider({ onEvent, children }: EventsProviderProps): JSX_2.Element;
2979
3097
 
3098
+ /**
3099
+ * A tight grid 4 elements wide, usually of UI controls like buttons, select dropdown, checkboxes,
3100
+ * etc.
3101
+ *
3102
+ * @public @react */
3103
+ export declare const TldrawUiGrid: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;
3104
+
2980
3105
  /** @public @react */
2981
3106
  export declare const TldrawUiIcon: NamedExoticComponent<TLUiIconProps>;
2982
3107
 
@@ -3002,7 +3127,7 @@ export declare function TldrawUiMenuContextProvider({ type, sourceId, children,
3002
3127
  export declare function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGroupProps): boolean | JSX_2.Element | Iterable<ReactNode> | null | number | string | undefined;
3003
3128
 
3004
3129
  /** @public @react */
3005
- 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;
3130
+ 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;
3006
3131
 
3007
3132
  /** @public @react */
3008
3133
  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;
@@ -3010,8 +3135,24 @@ export declare function TldrawUiMenuSubmenu<Translation extends string = string>
3010
3135
  /** @public @react */
3011
3136
  export declare function TldrawUiMenuToolItem({ toolId, ...rest }: TLUiMenuToolItemProps): JSX_2.Element | null;
3012
3137
 
3138
+ /** @public */
3139
+ export declare interface TldrawUiOrientationContext {
3140
+ orientation: 'horizontal' | 'vertical';
3141
+ tooltipSide: 'bottom' | 'left' | 'right' | 'top';
3142
+ }
3143
+
3144
+ /** @public @react */
3145
+ export declare function TldrawUiOrientationProvider({ children, orientation, tooltipSide, }: TldrawUiOrientationProviderProps): JSX_2.Element;
3146
+
3147
+ /** @public */
3148
+ export declare interface TldrawUiOrientationProviderProps {
3149
+ children: ReactNode;
3150
+ orientation: 'horizontal' | 'vertical';
3151
+ tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
3152
+ }
3153
+
3013
3154
  /** @public @react */
3014
- export declare function TldrawUiPopover({ id, children, onOpenChange, open }: TLUiPopoverProps): JSX_2.Element;
3155
+ export declare function TldrawUiPopover({ id, children, onOpenChange, open, className }: TLUiPopoverProps): JSX_2.Element;
3015
3156
 
3016
3157
  /** @public @react */
3017
3158
  export declare function TldrawUiPopoverContent({ side, children, align, sideOffset, alignOffset, disableEscapeKeyDown, autoFocusFirstButton, }: TLUiPopoverContentProps): JSX_2.Element;
@@ -3041,6 +3182,13 @@ export declare interface TldrawUiProps extends TLUiContextProviderProps {
3041
3182
  assetUrls?: TLUiAssetUrlOverrides;
3042
3183
  }
3043
3184
 
3185
+ /**
3186
+ * A row, usually of UI controls like buttons, select dropdown, checkboxes, etc.
3187
+ *
3188
+ * @public @react
3189
+ */
3190
+ export declare const TldrawUiRow: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;
3191
+
3044
3192
  /** @public @react */
3045
3193
  export declare const TldrawUiSlider: React_3.ForwardRefExoticComponent<TLUiSliderProps & React_3.RefAttributes<HTMLDivElement>>;
3046
3194
 
@@ -3057,7 +3205,29 @@ export declare const TldrawUiToolbarButton: React_3.ForwardRefExoticComponent<TL
3057
3205
  export declare const TldrawUiToolbarToggleGroup: ({ children, className, type, ...props }: TLUiToolbarToggleGroupProps) => JSX_2.Element;
3058
3206
 
3059
3207
  /** @public @react */
3060
- export declare const TldrawUiToolbarToggleItem: ({ children, className, type, value, ...props }: TLUiToolbarToggleItemProps) => JSX_2.Element;
3208
+ export declare const TldrawUiToolbarToggleItem: ({ children, className, type, value, tooltip, ...props }: TLUiToolbarToggleItemProps) => JSX_2.Element;
3209
+
3210
+ /** @public @react */
3211
+ export declare const TldrawUiTooltip: React_3.ForwardRefExoticComponent<TldrawUiTooltipProps & React_3.RefAttributes<HTMLButtonElement>>;
3212
+
3213
+ /** @public */
3214
+ export declare interface TldrawUiTooltipProps {
3215
+ children: React_3.ReactNode;
3216
+ content?: React_3.ReactNode | string;
3217
+ side?: 'bottom' | 'left' | 'right' | 'top';
3218
+ sideOffset?: number;
3219
+ disabled?: boolean;
3220
+ showOnMobile?: boolean;
3221
+ delayDuration?: number;
3222
+ }
3223
+
3224
+ /** @public @react */
3225
+ export declare function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderProps): JSX_2.Element;
3226
+
3227
+ /** @public */
3228
+ export declare interface TldrawUiTooltipProviderProps {
3229
+ children: React_3.ReactNode;
3230
+ }
3061
3231
 
3062
3232
  /* Excluded from this release type: TldrawUiTranslationProvider */
3063
3233
 
@@ -3572,6 +3742,7 @@ export declare interface TLUiEventMap {
3572
3742
  'toggle-lock': null;
3573
3743
  'toggle-reduce-motion': null;
3574
3744
  'toggle-keyboard-shortcuts': null;
3745
+ 'toggle-ui-labels': null;
3575
3746
  'toggle-edge-scrolling': null;
3576
3747
  'color-scheme': {
3577
3748
  value: string;
@@ -3594,6 +3765,9 @@ export declare interface TLUiEventMap {
3594
3765
  'open-context-menu': null;
3595
3766
  'adjust-shape-styles': null;
3596
3767
  'copy-link': null;
3768
+ 'drag-tool': {
3769
+ id: string;
3770
+ };
3597
3771
  'image-replace': null;
3598
3772
  'video-replace': null;
3599
3773
  'open-kbd-shortcuts': null;
@@ -3680,6 +3854,13 @@ export declare type TLUiKeyboardShortcutsDialogProps = TLUiDialogProps & {
3680
3854
  children?: ReactNode;
3681
3855
  };
3682
3856
 
3857
+ /** @public */
3858
+ export declare interface TLUiLayoutProps extends HTMLAttributes<HTMLDivElement> {
3859
+ children: ReactNode;
3860
+ tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
3861
+ asChild?: boolean;
3862
+ }
3863
+
3683
3864
  /** @public */
3684
3865
  export declare interface TLUiMainMenuProps {
3685
3866
  children?: ReactNode;
@@ -3719,7 +3900,7 @@ export declare interface TLUiMenuContextProviderProps {
3719
3900
  }
3720
3901
 
3721
3902
  /** @public */
3722
- export declare type TLUiMenuContextType = 'context-menu' | 'helper-buttons' | 'icons' | 'keyboard-shortcuts' | 'menu' | 'panel' | 'small-icons' | 'toolbar-overflow' | 'toolbar';
3903
+ export declare type TLUiMenuContextType = 'context-menu' | 'helper-buttons' | 'icons' | 'keyboard-shortcuts' | 'menu' | 'small-icons' | 'toolbar-overflow' | 'toolbar';
3723
3904
 
3724
3905
  /** @public */
3725
3906
  export declare interface TLUiMenuGroupProps<TranslationKey extends string = string> {
@@ -3779,6 +3960,10 @@ export declare interface TLUiMenuItemProps<TranslationKey extends string = strin
3779
3960
  * Whether the item is selected.
3780
3961
  */
3781
3962
  isSelected?: boolean;
3963
+ /**
3964
+ * The function to call when the item is dragged. If this is provided, the item will be draggable.
3965
+ */
3966
+ onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void;
3782
3967
  }
3783
3968
 
3784
3969
  /** @public */
@@ -3824,6 +4009,7 @@ export declare interface TLUiPopoverProps {
3824
4009
  open?: boolean;
3825
4010
  children: React_3.ReactNode;
3826
4011
  onOpenChange?(isOpen: boolean): void;
4012
+ className?: string;
3827
4013
  }
3828
4014
 
3829
4015
  /** @public */
@@ -3909,6 +4095,7 @@ export declare interface TLUiToolbarButtonProps extends React_3.HTMLAttributes<H
3909
4095
  disabled?: boolean;
3910
4096
  isActive?: boolean;
3911
4097
  type: 'icon' | 'menu' | 'tool';
4098
+ tooltip?: string;
3912
4099
  }
3913
4100
 
3914
4101
  /** @public */
@@ -3917,6 +4104,8 @@ export declare interface TLUiToolbarProps extends React_3.HTMLAttributes<HTMLDiv
3917
4104
  className?: string;
3918
4105
  dir?: 'ltr' | 'rtl';
3919
4106
  label: string;
4107
+ orientation?: 'grid' | 'horizontal' | 'vertical';
4108
+ tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
3920
4109
  }
3921
4110
 
3922
4111
  /** @public */
@@ -3935,6 +4124,7 @@ export declare interface TLUiToolbarToggleItemProps extends React_3.HTMLAttribut
3935
4124
  className?: string;
3936
4125
  type: 'icon' | 'tool';
3937
4126
  value: string;
4127
+ tooltip?: string;
3938
4128
  }
3939
4129
 
3940
4130
  /** @public */
@@ -3944,6 +4134,7 @@ export declare interface TLUiToolItem<TranslationKey extends string = string, Ic
3944
4134
  shortcutsLabel?: TranslationKey;
3945
4135
  icon: IconType | TLUiIconJsx;
3946
4136
  onSelect(source: TLUiEventSource): void;
4137
+ onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void;
3947
4138
  /**
3948
4139
  * The keyboard shortcut for this tool. This is a string that can be a single key,
3949
4140
  * or a combination of keys.
@@ -3979,7 +4170,7 @@ export declare interface TLUiTranslation {
3979
4170
  export declare type TLUiTranslationContextType = TLUiTranslation;
3980
4171
 
3981
4172
  /** @public */
3982
- 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-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.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';
4173
+ 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';
3983
4174
 
3984
4175
  /** @public */
3985
4176
  export declare interface TLUiTranslationProviderProps {
@@ -4120,6 +4311,9 @@ export declare function ToggleToolLockItem(): JSX_2.Element;
4120
4311
  /** @public @react */
4121
4312
  export declare function ToggleTransparentBgMenuItem(): JSX_2.Element;
4122
4313
 
4314
+ /** @public @react */
4315
+ export declare function ToggleUiLabelsItem(): JSX_2.Element;
4316
+
4123
4317
  /** @public @react */
4124
4318
  export declare function ToggleWrapModeItem(): JSX_2.Element;
4125
4319
 
@@ -4353,6 +4547,9 @@ export declare function useShowCollaborationUi(): boolean;
4353
4547
  /** @public */
4354
4548
  export declare function useTldrawUiComponents(): TLUiComponents;
4355
4549
 
4550
+ /** @public */
4551
+ export declare function useTldrawUiOrientation(): TldrawUiOrientationContext;
4552
+
4356
4553
  /** @public */
4357
4554
  export declare function useToasts(): TLUiToastsContextType;
4358
4555
 
@@ -5,8 +5,16 @@ import {
5
5
  } from "./lib/shapes/shared/PathBuilder.mjs";
6
6
  import { usePrefersReducedMotion } from "./lib/shapes/shared/usePrefersReducedMotion.mjs";
7
7
  import { DefaultA11yAnnouncer, useSelectedShapesAnnouncer } from "./lib/ui/components/A11y.mjs";
8
+ import { AccessibilityMenu } from "./lib/ui/components/AccessibilityMenu.mjs";
8
9
  import { ColorSchemeMenu } from "./lib/ui/components/ColorSchemeMenu.mjs";
9
10
  import { DefaultDialogs } from "./lib/ui/components/Dialogs.mjs";
11
+ import {
12
+ TldrawUiColumn,
13
+ TldrawUiGrid,
14
+ TldrawUiOrientationProvider,
15
+ TldrawUiRow,
16
+ useTldrawUiOrientation
17
+ } from "./lib/ui/components/primitives/layout.mjs";
10
18
  import {
11
19
  TldrawUiMenuActionCheckboxItem
12
20
  } from "./lib/ui/components/primitives/menus/TldrawUiMenuActionCheckboxItem.mjs";
@@ -97,6 +105,8 @@ import {
97
105
  allDefaultFontFaces,
98
106
  DefaultFontFaces
99
107
  } from "./lib/shapes/shared/defaultFonts.mjs";
108
+ import { getStrokePoints } from "./lib/shapes/shared/freehand/getStrokePoints.mjs";
109
+ import { getSvgPathFromStrokePoints } from "./lib/shapes/shared/freehand/svg.mjs";
100
110
  import {
101
111
  PlainTextLabel,
102
112
  TextLabel
@@ -221,6 +231,7 @@ import {
221
231
  ToggleSnapModeItem,
222
232
  ToggleToolLockItem,
223
233
  ToggleTransparentBgMenuItem,
234
+ ToggleUiLabelsItem,
224
235
  ToggleWrapModeItem,
225
236
  UngroupMenuItem,
226
237
  UnlockAllMenuItem,
@@ -305,6 +316,10 @@ import {
305
316
  TldrawUiToolbarToggleGroup,
306
317
  TldrawUiToolbarToggleItem
307
318
  } from "./lib/ui/components/primitives/TldrawUiToolbar.mjs";
319
+ import {
320
+ TldrawUiTooltip,
321
+ TldrawUiTooltipProvider
322
+ } from "./lib/ui/components/primitives/TldrawUiTooltip.mjs";
308
323
  import {
309
324
  DefaultQuickActions
310
325
  } from "./lib/ui/components/QuickActions/DefaultQuickActions.mjs";
@@ -440,6 +455,7 @@ import { useMenuIsOpen } from "./lib/ui/hooks/useMenuIsOpen.mjs";
440
455
  import { useReadonly } from "./lib/ui/hooks/useReadonly.mjs";
441
456
  import { useRelevantStyles } from "./lib/ui/hooks/useRelevantStyles.mjs";
442
457
  import {
458
+ onDragFromToolbarToCreateShape,
443
459
  useTools
444
460
  } from "./lib/ui/hooks/useTools.mjs";
445
461
  import {
@@ -491,13 +507,14 @@ import {
491
507
  } from "./lib/utils/tldr/file.mjs";
492
508
  registerTldrawLibraryVersion(
493
509
  "tldraw",
494
- "3.16.0-canary.ed8bd30c0f28",
510
+ "3.16.0-canary.f293c3bb58f5",
495
511
  "esm"
496
512
  );
497
513
  export {
498
514
  ARROW_LABEL_FONT_SIZES,
499
515
  ASPECT_RATIO_OPTIONS,
500
516
  ASPECT_RATIO_TO_VALUE,
517
+ AccessibilityMenu,
501
518
  AlignMenuItems,
502
519
  ArrangeMenuSubmenu,
503
520
  ArrowBindingUtil,
@@ -686,6 +703,7 @@ export {
686
703
  TldrawUiButtonIcon,
687
704
  TldrawUiButtonLabel,
688
705
  TldrawUiButtonPicker,
706
+ TldrawUiColumn,
689
707
  TldrawUiComponentsProvider,
690
708
  TldrawUiContextProvider,
691
709
  TldrawUiContextualToolbar,
@@ -705,6 +723,7 @@ export {
705
723
  TldrawUiDropdownMenuSubTrigger,
706
724
  TldrawUiDropdownMenuTrigger,
707
725
  TldrawUiEventsProvider,
726
+ TldrawUiGrid,
708
727
  TldrawUiIcon,
709
728
  TldrawUiInput,
710
729
  TldrawUiKbd,
@@ -716,15 +735,19 @@ export {
716
735
  TldrawUiMenuItem,
717
736
  TldrawUiMenuSubmenu,
718
737
  TldrawUiMenuToolItem,
738
+ TldrawUiOrientationProvider,
719
739
  TldrawUiPopover,
720
740
  TldrawUiPopoverContent,
721
741
  TldrawUiPopoverTrigger,
742
+ TldrawUiRow,
722
743
  TldrawUiSlider,
723
744
  TldrawUiToastsProvider,
724
745
  TldrawUiToolbar,
725
746
  TldrawUiToolbarButton,
726
747
  TldrawUiToolbarToggleGroup,
727
748
  TldrawUiToolbarToggleItem,
749
+ TldrawUiTooltip,
750
+ TldrawUiTooltipProvider,
728
751
  TldrawUiTranslationProvider,
729
752
  ToggleAutoSizeMenuItem,
730
753
  ToggleDebugModeItem,
@@ -740,6 +763,7 @@ export {
740
763
  ToggleToolLockItem,
741
764
  ToggleToolLockedButton,
742
765
  ToggleTransparentBgMenuItem,
766
+ ToggleUiLabelsItem,
743
767
  ToggleWrapModeItem,
744
768
  ToolbarItem,
745
769
  TrapezoidToolbarItem,
@@ -792,7 +816,10 @@ export {
792
816
  getEmbedInfo,
793
817
  getHitShapeOnCanvasPointerDown,
794
818
  getMediaAssetInfoPartial,
819
+ getStrokePoints,
820
+ getSvgPathFromStrokePoints,
795
821
  getUncroppedSize,
822
+ onDragFromToolbarToCreateShape,
796
823
  parseAndLoadDocument,
797
824
  parseTldrawJsonFile,
798
825
  preloadFont,
@@ -841,6 +868,7 @@ export {
841
868
  useSelectedShapesAnnouncer,
842
869
  useShowCollaborationUi,
843
870
  useTldrawUiComponents,
871
+ useTldrawUiOrientation,
844
872
  useToasts,
845
873
  useTools,
846
874
  useTranslation,