tldraw 3.16.0-canary.39bd199a7aa6 → 3.16.0-canary.3c51fb02c6a5

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 (362) hide show
  1. package/dist-cjs/index.d.ts +213 -6
  2. package/dist-cjs/index.js +19 -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/defaultExternalContentHandlers.js +5 -4
  7. package/dist-cjs/lib/defaultExternalContentHandlers.js.map +2 -2
  8. package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.js +3 -3
  9. package/dist-cjs/lib/shapes/arrow/ArrowShapeUtil.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 +213 -6
  120. package/dist-esm/index.mjs +31 -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/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 +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 +24 -0
  238. package/src/lib/canvas/TldrawScribble.tsx +1 -1
  239. package/src/lib/defaultExternalContentHandlers.ts +12 -4
  240. package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts +2 -1
  241. package/src/lib/shapes/arrow/ArrowShapeTool.test.ts +4 -3
  242. package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts +7 -6
  243. package/src/lib/shapes/arrow/ArrowShapeUtil.tsx +4 -3
  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 +5 -4
  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/maxShapes.test.ts +3 -2
  352. package/src/test/modifiers.test.ts +5 -4
  353. package/src/test/navigation.test.ts +12 -11
  354. package/src/test/panning.test.ts +2 -1
  355. package/src/test/perf/perf.test.ts +2 -1
  356. package/src/test/registerDeepLinkListener.test.tsx +10 -9
  357. package/src/test/resizing.test.ts +39 -38
  358. package/src/test/select.test.tsx +4 -3
  359. package/src/test/selection-omnibus.test.ts +11 -10
  360. package/src/test/shapeutils.test.ts +4 -3
  361. package/src/test/translating.test.ts +9 -8
  362. 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
  *
@@ -2114,9 +2148,42 @@ export declare class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
2114
2148
  /** @public @react */
2115
2149
  export declare function NoteToolbarItem(): JSX_2.Element;
2116
2150
 
2151
+ /**
2152
+ * Checks if a file is allowed to be uploaded. If it is not, it will show a toast explaining why to the user.
2153
+ *
2154
+ * @param file - The file to check
2155
+ * @param options - The options for the external content handler
2156
+ * @returns True if the file is allowed, false otherwise
2157
+ * @public
2158
+ */
2159
+ export declare function notifyIfFileNotAllowed(file: File, options: TLDefaultExternalContentHandlerOpts): boolean;
2160
+
2117
2161
  /** @public @react */
2118
2162
  export declare function OfflineIndicator(): JSX_2.Element;
2119
2163
 
2164
+ /**
2165
+ * A helper method to use in {@link TLUiToolItem#onDragStart} to create a shape by dragging it from
2166
+ * the toolbar.
2167
+ * @public
2168
+ */
2169
+ export declare function onDragFromToolbarToCreateShape(editor: Editor, info: TLPointerEventInfo, opts: OnDragFromToolbarToCreateShapesOpts): void;
2170
+
2171
+ /**
2172
+ * Options for {@link onDragFromToolbarToCreateShape}.
2173
+ * @public
2174
+ */
2175
+ export declare interface OnDragFromToolbarToCreateShapesOpts {
2176
+ /**
2177
+ * Create the shape being dragged. You don't need to worry about positioning it, as it'll be
2178
+ * immediately updated with the correct position.
2179
+ */
2180
+ createShape(id: TLShapeId): void;
2181
+ /**
2182
+ * Called once the drag interaction has finished.
2183
+ */
2184
+ onDragEnd?(id: TLShapeId): void;
2185
+ }
2186
+
2120
2187
  /** @public @react */
2121
2188
  export declare function OpacitySlider(): JSX_2.Element | null;
2122
2189
 
@@ -2124,11 +2191,17 @@ export declare function OpacitySlider(): JSX_2.Element | null;
2124
2191
  export declare function OvalToolbarItem(): JSX_2.Element;
2125
2192
 
2126
2193
  /** @public @react */
2127
- export declare function OverflowingToolbar({ children }: OverflowingToolbarProps): JSX_2.Element;
2194
+ export declare function OverflowingToolbar({ children, orientation, sizingParentClassName, minItems, minSizePx, maxItems, maxSizePx, }: OverflowingToolbarProps): JSX_2.Element;
2128
2195
 
2129
2196
  /** @public */
2130
2197
  export declare interface OverflowingToolbarProps {
2131
2198
  children: React.ReactNode;
2199
+ orientation: 'horizontal' | 'vertical';
2200
+ sizingParentClassName: string;
2201
+ minItems: number;
2202
+ minSizePx: number;
2203
+ maxItems: number;
2204
+ maxSizePx: number;
2132
2205
  }
2133
2206
 
2134
2207
  /** @public @react */
@@ -2517,6 +2590,54 @@ export declare function StarToolbarItem(): JSX_2.Element;
2517
2590
  /** @public */
2518
2591
  export declare const STROKE_SIZES: Record<TLDefaultSizeStyle, number>;
2519
2592
 
2593
+ /**
2594
+ * The options object for `getStroke` or `getStrokePoints`.
2595
+ *
2596
+ * @public
2597
+ */
2598
+ export declare interface StrokeOptions {
2599
+ /** The base size (diameter) of the stroke. */
2600
+ size?: number;
2601
+ /** The effect of pressure on the stroke's size. */
2602
+ thinning?: number;
2603
+ /** How much to soften the stroke's edges. */
2604
+ smoothing?: number;
2605
+ streamline?: number;
2606
+ /** An easing function to apply to each point's pressure. */
2607
+ easing?(pressure: number): number;
2608
+ /** Whether to simulate pressure based on velocity. */
2609
+ simulatePressure?: boolean;
2610
+ /** Cap, taper and easing for the start of the line. */
2611
+ start?: {
2612
+ cap?: boolean;
2613
+ easing?(distance: number): number;
2614
+ taper?: boolean | number;
2615
+ };
2616
+ /** Cap, taper and easing for the end of the line. */
2617
+ end?: {
2618
+ cap?: boolean;
2619
+ easing?(distance: number): number;
2620
+ taper?: boolean | number;
2621
+ };
2622
+ /** Whether to handle the points as a completed stroke. */
2623
+ last?: boolean;
2624
+ }
2625
+
2626
+ /**
2627
+ * The points returned by `getStrokePoints`, and the input for `getStrokeOutlinePoints`
2628
+ *
2629
+ * @public
2630
+ */
2631
+ export declare interface StrokePoint {
2632
+ point: Vec;
2633
+ input: Vec;
2634
+ vector: Vec;
2635
+ pressure: number;
2636
+ distance: number;
2637
+ runningLength: number;
2638
+ radius: number;
2639
+ }
2640
+
2520
2641
  /** @public */
2521
2642
  export declare interface StylePickerSetProps {
2522
2643
  styles: ReadonlySharedStyleMap;
@@ -2915,6 +3036,13 @@ export declare function TldrawUiButtonLabel({ children }: TLUiButtonLabelProps):
2915
3036
  /** @public */
2916
3037
  export declare const TldrawUiButtonPicker: <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement;
2917
3038
 
3039
+ /**
3040
+ * A column, usually of UI controls like buttons, select dropdown, checkboxes, etc.
3041
+ *
3042
+ * @public @react
3043
+ */
3044
+ export declare const TldrawUiColumn: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;
3045
+
2918
3046
  /** @public @react */
2919
3047
  export declare function TldrawUiComponentsProvider({ overrides, children, }: TLUiComponentsProviderProps): JSX_2.Element;
2920
3048
 
@@ -2977,6 +3105,13 @@ export declare function TldrawUiDropdownMenuTrigger({ children, ...rest }: TLUiD
2977
3105
  /** @public @react */
2978
3106
  export declare function TldrawUiEventsProvider({ onEvent, children }: EventsProviderProps): JSX_2.Element;
2979
3107
 
3108
+ /**
3109
+ * A tight grid 4 elements wide, usually of UI controls like buttons, select dropdown, checkboxes,
3110
+ * etc.
3111
+ *
3112
+ * @public @react */
3113
+ export declare const TldrawUiGrid: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;
3114
+
2980
3115
  /** @public @react */
2981
3116
  export declare const TldrawUiIcon: NamedExoticComponent<TLUiIconProps>;
2982
3117
 
@@ -3002,7 +3137,7 @@ export declare function TldrawUiMenuContextProvider({ type, sourceId, children,
3002
3137
  export declare function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGroupProps): boolean | JSX_2.Element | Iterable<ReactNode> | null | number | string | undefined;
3003
3138
 
3004
3139
  /** @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;
3140
+ 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
3141
 
3007
3142
  /** @public @react */
3008
3143
  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 +3145,24 @@ export declare function TldrawUiMenuSubmenu<Translation extends string = string>
3010
3145
  /** @public @react */
3011
3146
  export declare function TldrawUiMenuToolItem({ toolId, ...rest }: TLUiMenuToolItemProps): JSX_2.Element | null;
3012
3147
 
3148
+ /** @public */
3149
+ export declare interface TldrawUiOrientationContext {
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 TldrawUiOrientationProvider({ children, orientation, tooltipSide, }: TldrawUiOrientationProviderProps): JSX_2.Element;
3156
+
3157
+ /** @public */
3158
+ export declare interface TldrawUiOrientationProviderProps {
3159
+ children: ReactNode;
3160
+ orientation: 'horizontal' | 'vertical';
3161
+ tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
3162
+ }
3163
+
3164
+ /** @public @react */
3165
+ export declare function TldrawUiPopover({ id, children, onOpenChange, open, className }: TLUiPopoverProps): JSX_2.Element;
3015
3166
 
3016
3167
  /** @public @react */
3017
3168
  export declare function TldrawUiPopoverContent({ side, children, align, sideOffset, alignOffset, disableEscapeKeyDown, autoFocusFirstButton, }: TLUiPopoverContentProps): JSX_2.Element;
@@ -3041,6 +3192,13 @@ export declare interface TldrawUiProps extends TLUiContextProviderProps {
3041
3192
  assetUrls?: TLUiAssetUrlOverrides;
3042
3193
  }
3043
3194
 
3195
+ /**
3196
+ * A row, usually of UI controls like buttons, select dropdown, checkboxes, etc.
3197
+ *
3198
+ * @public @react
3199
+ */
3200
+ export declare const TldrawUiRow: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;
3201
+
3044
3202
  /** @public @react */
3045
3203
  export declare const TldrawUiSlider: React_3.ForwardRefExoticComponent<TLUiSliderProps & React_3.RefAttributes<HTMLDivElement>>;
3046
3204
 
@@ -3057,7 +3215,29 @@ export declare const TldrawUiToolbarButton: React_3.ForwardRefExoticComponent<TL
3057
3215
  export declare const TldrawUiToolbarToggleGroup: ({ children, className, type, ...props }: TLUiToolbarToggleGroupProps) => JSX_2.Element;
3058
3216
 
3059
3217
  /** @public @react */
3060
- export declare const TldrawUiToolbarToggleItem: ({ children, className, type, value, ...props }: TLUiToolbarToggleItemProps) => JSX_2.Element;
3218
+ export declare const TldrawUiToolbarToggleItem: ({ children, className, type, value, tooltip, ...props }: TLUiToolbarToggleItemProps) => JSX_2.Element;
3219
+
3220
+ /** @public @react */
3221
+ export declare const TldrawUiTooltip: React_3.ForwardRefExoticComponent<TldrawUiTooltipProps & React_3.RefAttributes<HTMLButtonElement>>;
3222
+
3223
+ /** @public */
3224
+ export declare interface TldrawUiTooltipProps {
3225
+ children: React_3.ReactNode;
3226
+ content?: React_3.ReactNode | string;
3227
+ side?: 'bottom' | 'left' | 'right' | 'top';
3228
+ sideOffset?: number;
3229
+ disabled?: boolean;
3230
+ showOnMobile?: boolean;
3231
+ delayDuration?: number;
3232
+ }
3233
+
3234
+ /** @public @react */
3235
+ export declare function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderProps): JSX_2.Element;
3236
+
3237
+ /** @public */
3238
+ export declare interface TldrawUiTooltipProviderProps {
3239
+ children: React_3.ReactNode;
3240
+ }
3061
3241
 
3062
3242
  /* Excluded from this release type: TldrawUiTranslationProvider */
3063
3243
 
@@ -3572,6 +3752,7 @@ export declare interface TLUiEventMap {
3572
3752
  'toggle-lock': null;
3573
3753
  'toggle-reduce-motion': null;
3574
3754
  'toggle-keyboard-shortcuts': null;
3755
+ 'toggle-ui-labels': null;
3575
3756
  'toggle-edge-scrolling': null;
3576
3757
  'color-scheme': {
3577
3758
  value: string;
@@ -3594,6 +3775,9 @@ export declare interface TLUiEventMap {
3594
3775
  'open-context-menu': null;
3595
3776
  'adjust-shape-styles': null;
3596
3777
  'copy-link': null;
3778
+ 'drag-tool': {
3779
+ id: string;
3780
+ };
3597
3781
  'image-replace': null;
3598
3782
  'video-replace': null;
3599
3783
  'open-kbd-shortcuts': null;
@@ -3680,6 +3864,13 @@ export declare type TLUiKeyboardShortcutsDialogProps = TLUiDialogProps & {
3680
3864
  children?: ReactNode;
3681
3865
  };
3682
3866
 
3867
+ /** @public */
3868
+ export declare interface TLUiLayoutProps extends HTMLAttributes<HTMLDivElement> {
3869
+ children: ReactNode;
3870
+ tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
3871
+ asChild?: boolean;
3872
+ }
3873
+
3683
3874
  /** @public */
3684
3875
  export declare interface TLUiMainMenuProps {
3685
3876
  children?: ReactNode;
@@ -3719,7 +3910,7 @@ export declare interface TLUiMenuContextProviderProps {
3719
3910
  }
3720
3911
 
3721
3912
  /** @public */
3722
- export declare type TLUiMenuContextType = 'context-menu' | 'helper-buttons' | 'icons' | 'keyboard-shortcuts' | 'menu' | 'panel' | 'small-icons' | 'toolbar-overflow' | 'toolbar';
3913
+ export declare type TLUiMenuContextType = 'context-menu' | 'helper-buttons' | 'icons' | 'keyboard-shortcuts' | 'menu' | 'small-icons' | 'toolbar-overflow' | 'toolbar';
3723
3914
 
3724
3915
  /** @public */
3725
3916
  export declare interface TLUiMenuGroupProps<TranslationKey extends string = string> {
@@ -3779,6 +3970,10 @@ export declare interface TLUiMenuItemProps<TranslationKey extends string = strin
3779
3970
  * Whether the item is selected.
3780
3971
  */
3781
3972
  isSelected?: boolean;
3973
+ /**
3974
+ * The function to call when the item is dragged. If this is provided, the item will be draggable.
3975
+ */
3976
+ onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void;
3782
3977
  }
3783
3978
 
3784
3979
  /** @public */
@@ -3824,6 +4019,7 @@ export declare interface TLUiPopoverProps {
3824
4019
  open?: boolean;
3825
4020
  children: React_3.ReactNode;
3826
4021
  onOpenChange?(isOpen: boolean): void;
4022
+ className?: string;
3827
4023
  }
3828
4024
 
3829
4025
  /** @public */
@@ -3909,6 +4105,7 @@ export declare interface TLUiToolbarButtonProps extends React_3.HTMLAttributes<H
3909
4105
  disabled?: boolean;
3910
4106
  isActive?: boolean;
3911
4107
  type: 'icon' | 'menu' | 'tool';
4108
+ tooltip?: string;
3912
4109
  }
3913
4110
 
3914
4111
  /** @public */
@@ -3917,6 +4114,8 @@ export declare interface TLUiToolbarProps extends React_3.HTMLAttributes<HTMLDiv
3917
4114
  className?: string;
3918
4115
  dir?: 'ltr' | 'rtl';
3919
4116
  label: string;
4117
+ orientation?: 'grid' | 'horizontal' | 'vertical';
4118
+ tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
3920
4119
  }
3921
4120
 
3922
4121
  /** @public */
@@ -3935,6 +4134,7 @@ export declare interface TLUiToolbarToggleItemProps extends React_3.HTMLAttribut
3935
4134
  className?: string;
3936
4135
  type: 'icon' | 'tool';
3937
4136
  value: string;
4137
+ tooltip?: string;
3938
4138
  }
3939
4139
 
3940
4140
  /** @public */
@@ -3944,6 +4144,7 @@ export declare interface TLUiToolItem<TranslationKey extends string = string, Ic
3944
4144
  shortcutsLabel?: TranslationKey;
3945
4145
  icon: IconType | TLUiIconJsx;
3946
4146
  onSelect(source: TLUiEventSource): void;
4147
+ onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void;
3947
4148
  /**
3948
4149
  * The keyboard shortcut for this tool. This is a string that can be a single key,
3949
4150
  * or a combination of keys.
@@ -3979,7 +4180,7 @@ export declare interface TLUiTranslation {
3979
4180
  export declare type TLUiTranslationContextType = TLUiTranslation;
3980
4181
 
3981
4182
  /** @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';
4183
+ 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
4184
 
3984
4185
  /** @public */
3985
4186
  export declare interface TLUiTranslationProviderProps {
@@ -4120,6 +4321,9 @@ export declare function ToggleToolLockItem(): JSX_2.Element;
4120
4321
  /** @public @react */
4121
4322
  export declare function ToggleTransparentBgMenuItem(): JSX_2.Element;
4122
4323
 
4324
+ /** @public @react */
4325
+ export declare function ToggleUiLabelsItem(): JSX_2.Element;
4326
+
4123
4327
  /** @public @react */
4124
4328
  export declare function ToggleWrapModeItem(): JSX_2.Element;
4125
4329
 
@@ -4353,6 +4557,9 @@ export declare function useShowCollaborationUi(): boolean;
4353
4557
  /** @public */
4354
4558
  export declare function useTldrawUiComponents(): TLUiComponents;
4355
4559
 
4560
+ /** @public */
4561
+ export declare function useTldrawUiOrientation(): TldrawUiOrientationContext;
4562
+
4356
4563
  /** @public */
4357
4564
  export declare function useToasts(): TLUiToastsContextType;
4358
4565
 
@@ -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";
@@ -48,6 +56,7 @@ import {
48
56
  defaultHandleExternalUrlContent,
49
57
  getAssetInfo,
50
58
  getMediaAssetInfoPartial,
59
+ notifyIfFileNotAllowed,
51
60
  registerDefaultExternalContentHandlers
52
61
  } from "./lib/defaultExternalContentHandlers.mjs";
53
62
  import { defaultShapeTools } from "./lib/defaultShapeTools.mjs";
@@ -97,6 +106,8 @@ import {
97
106
  allDefaultFontFaces,
98
107
  DefaultFontFaces
99
108
  } from "./lib/shapes/shared/defaultFonts.mjs";
109
+ import { getStrokePoints } from "./lib/shapes/shared/freehand/getStrokePoints.mjs";
110
+ import { getSvgPathFromStrokePoints } from "./lib/shapes/shared/freehand/svg.mjs";
100
111
  import {
101
112
  PlainTextLabel,
102
113
  TextLabel
@@ -221,6 +232,7 @@ import {
221
232
  ToggleSnapModeItem,
222
233
  ToggleToolLockItem,
223
234
  ToggleTransparentBgMenuItem,
235
+ ToggleUiLabelsItem,
224
236
  ToggleWrapModeItem,
225
237
  UngroupMenuItem,
226
238
  UnlockAllMenuItem,
@@ -305,6 +317,10 @@ import {
305
317
  TldrawUiToolbarToggleGroup,
306
318
  TldrawUiToolbarToggleItem
307
319
  } from "./lib/ui/components/primitives/TldrawUiToolbar.mjs";
320
+ import {
321
+ TldrawUiTooltip,
322
+ TldrawUiTooltipProvider
323
+ } from "./lib/ui/components/primitives/TldrawUiTooltip.mjs";
308
324
  import {
309
325
  DefaultQuickActions
310
326
  } from "./lib/ui/components/QuickActions/DefaultQuickActions.mjs";
@@ -440,6 +456,7 @@ import { useMenuIsOpen } from "./lib/ui/hooks/useMenuIsOpen.mjs";
440
456
  import { useReadonly } from "./lib/ui/hooks/useReadonly.mjs";
441
457
  import { useRelevantStyles } from "./lib/ui/hooks/useRelevantStyles.mjs";
442
458
  import {
459
+ onDragFromToolbarToCreateShape,
443
460
  useTools
444
461
  } from "./lib/ui/hooks/useTools.mjs";
445
462
  import {
@@ -491,13 +508,14 @@ import {
491
508
  } from "./lib/utils/tldr/file.mjs";
492
509
  registerTldrawLibraryVersion(
493
510
  "tldraw",
494
- "3.16.0-canary.39bd199a7aa6",
511
+ "3.16.0-canary.3c51fb02c6a5",
495
512
  "esm"
496
513
  );
497
514
  export {
498
515
  ARROW_LABEL_FONT_SIZES,
499
516
  ASPECT_RATIO_OPTIONS,
500
517
  ASPECT_RATIO_TO_VALUE,
518
+ AccessibilityMenu,
501
519
  AlignMenuItems,
502
520
  ArrangeMenuSubmenu,
503
521
  ArrowBindingUtil,
@@ -686,6 +704,7 @@ export {
686
704
  TldrawUiButtonIcon,
687
705
  TldrawUiButtonLabel,
688
706
  TldrawUiButtonPicker,
707
+ TldrawUiColumn,
689
708
  TldrawUiComponentsProvider,
690
709
  TldrawUiContextProvider,
691
710
  TldrawUiContextualToolbar,
@@ -705,6 +724,7 @@ export {
705
724
  TldrawUiDropdownMenuSubTrigger,
706
725
  TldrawUiDropdownMenuTrigger,
707
726
  TldrawUiEventsProvider,
727
+ TldrawUiGrid,
708
728
  TldrawUiIcon,
709
729
  TldrawUiInput,
710
730
  TldrawUiKbd,
@@ -716,15 +736,19 @@ export {
716
736
  TldrawUiMenuItem,
717
737
  TldrawUiMenuSubmenu,
718
738
  TldrawUiMenuToolItem,
739
+ TldrawUiOrientationProvider,
719
740
  TldrawUiPopover,
720
741
  TldrawUiPopoverContent,
721
742
  TldrawUiPopoverTrigger,
743
+ TldrawUiRow,
722
744
  TldrawUiSlider,
723
745
  TldrawUiToastsProvider,
724
746
  TldrawUiToolbar,
725
747
  TldrawUiToolbarButton,
726
748
  TldrawUiToolbarToggleGroup,
727
749
  TldrawUiToolbarToggleItem,
750
+ TldrawUiTooltip,
751
+ TldrawUiTooltipProvider,
728
752
  TldrawUiTranslationProvider,
729
753
  ToggleAutoSizeMenuItem,
730
754
  ToggleDebugModeItem,
@@ -740,6 +764,7 @@ export {
740
764
  ToggleToolLockItem,
741
765
  ToggleToolLockedButton,
742
766
  ToggleTransparentBgMenuItem,
767
+ ToggleUiLabelsItem,
743
768
  ToggleWrapModeItem,
744
769
  ToolbarItem,
745
770
  TrapezoidToolbarItem,
@@ -792,7 +817,11 @@ export {
792
817
  getEmbedInfo,
793
818
  getHitShapeOnCanvasPointerDown,
794
819
  getMediaAssetInfoPartial,
820
+ getStrokePoints,
821
+ getSvgPathFromStrokePoints,
795
822
  getUncroppedSize,
823
+ notifyIfFileNotAllowed,
824
+ onDragFromToolbarToCreateShape,
796
825
  parseAndLoadDocument,
797
826
  parseTldrawJsonFile,
798
827
  preloadFont,
@@ -841,6 +870,7 @@ export {
841
870
  useSelectedShapesAnnouncer,
842
871
  useShowCollaborationUi,
843
872
  useTldrawUiComponents,
873
+ useTldrawUiOrientation,
844
874
  useToasts,
845
875
  useTools,
846
876
  useTranslation,