tldraw 3.16.0-canary.cb97f41de62b → 3.16.0-canary.cd822ae4ebee

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 (319) hide show
  1. package/dist-cjs/index.d.ts +244 -110
  2. package/dist-cjs/index.js +33 -14
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/lib/Tldraw.js +12 -2
  5. package/dist-cjs/lib/Tldraw.js.map +2 -2
  6. package/dist-cjs/lib/defaultExternalContentHandlers.js +15 -4
  7. package/dist-cjs/lib/defaultExternalContentHandlers.js.map +2 -2
  8. package/dist-cjs/lib/shapes/arrow/arrow-types.js.map +1 -1
  9. package/dist-cjs/lib/shapes/arrow/arrowLabel.js +6 -0
  10. package/dist-cjs/lib/shapes/arrow/arrowLabel.js.map +3 -3
  11. package/dist-cjs/lib/shapes/arrow/arrowTargetState.js +3 -2
  12. package/dist-cjs/lib/shapes/arrow/arrowTargetState.js.map +2 -2
  13. package/dist-cjs/lib/shapes/arrow/toolStates/Pointing.js +1 -1
  14. package/dist-cjs/lib/shapes/arrow/toolStates/Pointing.js.map +2 -2
  15. package/dist-cjs/lib/shapes/bookmark/BookmarkShapeUtil.js +4 -4
  16. package/dist-cjs/lib/shapes/bookmark/BookmarkShapeUtil.js.map +2 -2
  17. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +8 -1
  18. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
  19. package/dist-cjs/lib/shapes/frame/components/FrameLabelInput.js +8 -2
  20. package/dist-cjs/lib/shapes/frame/components/FrameLabelInput.js.map +2 -2
  21. package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js +1 -0
  22. package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js.map +2 -2
  23. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js +3 -0
  24. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js.map +2 -2
  25. package/dist-cjs/lib/shapes/note/NoteShapeUtil.js +2 -1
  26. package/dist-cjs/lib/shapes/note/NoteShapeUtil.js.map +2 -2
  27. package/dist-cjs/lib/shapes/shared/HyperlinkButton.js +4 -4
  28. package/dist-cjs/lib/shapes/shared/HyperlinkButton.js.map +2 -2
  29. package/dist-cjs/lib/shapes/shared/PlainTextLabel.js +1 -3
  30. package/dist-cjs/lib/shapes/shared/PlainTextLabel.js.map +2 -2
  31. package/dist-cjs/lib/shapes/shared/useEditablePlainText.js +3 -5
  32. package/dist-cjs/lib/shapes/shared/useEditablePlainText.js.map +2 -2
  33. package/dist-cjs/lib/shapes/shared/useImageOrVideoAsset.js +0 -2
  34. package/dist-cjs/lib/shapes/shared/useImageOrVideoAsset.js.map +2 -2
  35. package/dist-cjs/lib/shapes/text/PlainTextArea.js +3 -2
  36. package/dist-cjs/lib/shapes/text/PlainTextArea.js.map +2 -2
  37. package/dist-cjs/lib/shapes/text/RichTextArea.js +3 -3
  38. package/dist-cjs/lib/shapes/text/RichTextArea.js.map +2 -2
  39. package/dist-cjs/lib/tools/SelectTool/childStates/DraggingHandle.js +3 -1
  40. package/dist-cjs/lib/tools/SelectTool/childStates/DraggingHandle.js.map +2 -2
  41. package/dist-cjs/lib/ui/TldrawUi.js +13 -12
  42. package/dist-cjs/lib/ui/TldrawUi.js.map +2 -2
  43. package/dist-cjs/lib/ui/assetUrls.js +13 -10
  44. package/dist-cjs/lib/ui/assetUrls.js.map +2 -2
  45. package/dist-cjs/lib/ui/components/A11y.js +1 -1
  46. package/dist-cjs/lib/ui/components/A11y.js.map +2 -2
  47. package/dist-cjs/lib/ui/components/{FollowingIndicator.js → DefaultFollowingIndicator.js} +6 -6
  48. package/dist-cjs/lib/ui/components/DefaultFollowingIndicator.js.map +7 -0
  49. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js +6 -6
  50. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map +1 -1
  51. package/dist-cjs/lib/ui/components/LanguageMenu.js +1 -0
  52. package/dist-cjs/lib/ui/components/LanguageMenu.js.map +2 -2
  53. package/dist-cjs/lib/ui/components/Minimap/DefaultMinimap.js +2 -1
  54. package/dist-cjs/lib/ui/components/Minimap/DefaultMinimap.js.map +2 -2
  55. package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js +1 -1
  56. package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js.map +2 -2
  57. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js +9 -4
  58. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js.map +2 -2
  59. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +255 -316
  60. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
  61. package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js +147 -0
  62. package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js.map +7 -0
  63. package/dist-cjs/lib/ui/components/StylePanel/StylePanelContext.js +68 -0
  64. package/dist-cjs/lib/ui/components/StylePanel/StylePanelContext.js.map +7 -0
  65. package/dist-cjs/lib/ui/components/StylePanel/{DoubleDropdownPicker.js → StylePanelDoubleDropdownPicker.js} +23 -22
  66. package/dist-cjs/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.js.map +7 -0
  67. package/dist-cjs/lib/ui/components/StylePanel/{DropdownPicker.js → StylePanelDropdownPicker.js} +24 -21
  68. package/dist-cjs/lib/ui/components/StylePanel/StylePanelDropdownPicker.js.map +7 -0
  69. package/dist-cjs/lib/ui/components/StylePanel/StylePanelSubheading.js +28 -0
  70. package/dist-cjs/lib/ui/components/StylePanel/StylePanelSubheading.js.map +7 -0
  71. package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js +2 -0
  72. package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js.map +2 -2
  73. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js +38 -9
  74. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map +2 -2
  75. package/dist-cjs/lib/ui/components/Toolbar/DefaultVideoToolbarContent.js +15 -3
  76. package/dist-cjs/lib/ui/components/Toolbar/DefaultVideoToolbarContent.js.map +2 -2
  77. package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js +2 -1
  78. package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js.map +2 -2
  79. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js +1 -1
  80. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js.map +2 -2
  81. package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js +6 -2
  82. package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js.map +2 -2
  83. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js +11 -2
  84. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js.map +2 -2
  85. package/dist-cjs/lib/ui/components/primitives/TldrawUiInput.js +5 -3
  86. package/dist-cjs/lib/ui/components/primitives/TldrawUiInput.js.map +2 -2
  87. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js +18 -5
  88. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map +2 -2
  89. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +3 -0
  90. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
  91. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +75 -37
  92. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
  93. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.js +3 -0
  94. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.js.map +2 -2
  95. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +8 -8
  96. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
  97. package/dist-cjs/lib/ui/context/actions.js +29 -10
  98. package/dist-cjs/lib/ui/context/actions.js.map +2 -2
  99. package/dist-cjs/lib/ui/context/components.js +2 -0
  100. package/dist-cjs/lib/ui/context/components.js.map +2 -2
  101. package/dist-cjs/lib/ui/context/events.js.map +1 -1
  102. package/dist-cjs/lib/ui/hooks/useClipboardEvents.js +1 -1
  103. package/dist-cjs/lib/ui/hooks/useClipboardEvents.js.map +2 -2
  104. package/dist-cjs/lib/ui/hooks/useExportAs.js +3 -2
  105. package/dist-cjs/lib/ui/hooks/useExportAs.js.map +2 -2
  106. package/dist-cjs/lib/ui/hooks/useTools.js +1 -1
  107. package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
  108. package/dist-cjs/lib/ui/hooks/useTranslation/TLUiTranslationKey.js.map +1 -1
  109. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js +6 -2
  110. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +2 -2
  111. package/dist-cjs/lib/ui/kbd-utils.js +9 -3
  112. package/dist-cjs/lib/ui/kbd-utils.js.map +2 -2
  113. package/dist-cjs/lib/ui/version.js +3 -3
  114. package/dist-cjs/lib/ui/version.js.map +1 -1
  115. package/dist-cjs/lib/utils/export/copyAs.js +1 -2
  116. package/dist-cjs/lib/utils/export/copyAs.js.map +2 -2
  117. package/dist-cjs/lib/utils/export/export.js +0 -20
  118. package/dist-cjs/lib/utils/export/export.js.map +2 -2
  119. package/dist-cjs/lib/utils/export/exportAs.js +1 -2
  120. package/dist-cjs/lib/utils/export/exportAs.js.map +2 -2
  121. package/dist-esm/index.d.mts +244 -110
  122. package/dist-esm/index.mjs +65 -29
  123. package/dist-esm/index.mjs.map +2 -2
  124. package/dist-esm/lib/Tldraw.mjs +14 -4
  125. package/dist-esm/lib/Tldraw.mjs.map +2 -2
  126. package/dist-esm/lib/defaultExternalContentHandlers.mjs +15 -4
  127. package/dist-esm/lib/defaultExternalContentHandlers.mjs.map +2 -2
  128. package/dist-esm/lib/shapes/arrow/arrowLabel.mjs +6 -0
  129. package/dist-esm/lib/shapes/arrow/arrowLabel.mjs.map +3 -3
  130. package/dist-esm/lib/shapes/arrow/arrowTargetState.mjs +3 -2
  131. package/dist-esm/lib/shapes/arrow/arrowTargetState.mjs.map +2 -2
  132. package/dist-esm/lib/shapes/arrow/toolStates/Pointing.mjs +1 -1
  133. package/dist-esm/lib/shapes/arrow/toolStates/Pointing.mjs.map +2 -2
  134. package/dist-esm/lib/shapes/bookmark/BookmarkShapeUtil.mjs +4 -5
  135. package/dist-esm/lib/shapes/bookmark/BookmarkShapeUtil.mjs.map +2 -2
  136. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +8 -1
  137. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
  138. package/dist-esm/lib/shapes/frame/components/FrameLabelInput.mjs +9 -3
  139. package/dist-esm/lib/shapes/frame/components/FrameLabelInput.mjs.map +2 -2
  140. package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs +1 -0
  141. package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs.map +2 -2
  142. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs +3 -0
  143. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs.map +2 -2
  144. package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs +2 -1
  145. package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs.map +2 -2
  146. package/dist-esm/lib/shapes/shared/HyperlinkButton.mjs +5 -5
  147. package/dist-esm/lib/shapes/shared/HyperlinkButton.mjs.map +2 -2
  148. package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs +1 -3
  149. package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs.map +2 -2
  150. package/dist-esm/lib/shapes/shared/useEditablePlainText.mjs +3 -6
  151. package/dist-esm/lib/shapes/shared/useEditablePlainText.mjs.map +2 -2
  152. package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs +0 -2
  153. package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs.map +2 -2
  154. package/dist-esm/lib/shapes/text/PlainTextArea.mjs +4 -3
  155. package/dist-esm/lib/shapes/text/PlainTextArea.mjs.map +2 -2
  156. package/dist-esm/lib/shapes/text/RichTextArea.mjs +3 -4
  157. package/dist-esm/lib/shapes/text/RichTextArea.mjs.map +2 -2
  158. package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs +3 -1
  159. package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs.map +2 -2
  160. package/dist-esm/lib/ui/TldrawUi.mjs +13 -12
  161. package/dist-esm/lib/ui/TldrawUi.mjs.map +2 -2
  162. package/dist-esm/lib/ui/assetUrls.mjs +13 -10
  163. package/dist-esm/lib/ui/assetUrls.mjs.map +2 -2
  164. package/dist-esm/lib/ui/components/A11y.mjs +1 -2
  165. package/dist-esm/lib/ui/components/A11y.mjs.map +2 -2
  166. package/dist-esm/lib/ui/components/{FollowingIndicator.mjs → DefaultFollowingIndicator.mjs} +3 -3
  167. package/dist-esm/lib/ui/components/DefaultFollowingIndicator.mjs.map +7 -0
  168. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs +6 -6
  169. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.map +1 -1
  170. package/dist-esm/lib/ui/components/LanguageMenu.mjs +1 -0
  171. package/dist-esm/lib/ui/components/LanguageMenu.mjs.map +2 -2
  172. package/dist-esm/lib/ui/components/Minimap/DefaultMinimap.mjs +2 -1
  173. package/dist-esm/lib/ui/components/Minimap/DefaultMinimap.mjs.map +2 -2
  174. package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs +1 -2
  175. package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs.map +2 -2
  176. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs +14 -5
  177. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs.map +2 -2
  178. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +257 -320
  179. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
  180. package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs +135 -0
  181. package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs.map +7 -0
  182. package/dist-esm/lib/ui/components/StylePanel/StylePanelContext.mjs +48 -0
  183. package/dist-esm/lib/ui/components/StylePanel/StylePanelContext.mjs.map +7 -0
  184. package/dist-esm/lib/ui/components/StylePanel/{DoubleDropdownPicker.mjs → StylePanelDoubleDropdownPicker.mjs} +20 -19
  185. package/dist-esm/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.mjs.map +7 -0
  186. package/dist-esm/lib/ui/components/StylePanel/{DropdownPicker.mjs → StylePanelDropdownPicker.mjs} +21 -18
  187. package/dist-esm/lib/ui/components/StylePanel/StylePanelDropdownPicker.mjs.map +7 -0
  188. package/dist-esm/lib/ui/components/StylePanel/StylePanelSubheading.mjs +8 -0
  189. package/dist-esm/lib/ui/components/StylePanel/StylePanelSubheading.mjs.map +7 -0
  190. package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs +2 -0
  191. package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs.map +2 -2
  192. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs +38 -9
  193. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs.map +2 -2
  194. package/dist-esm/lib/ui/components/Toolbar/DefaultVideoToolbarContent.mjs +15 -3
  195. package/dist-esm/lib/ui/components/Toolbar/DefaultVideoToolbarContent.mjs.map +2 -2
  196. package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs +2 -1
  197. package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs.map +2 -2
  198. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs +1 -1
  199. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs.map +2 -2
  200. package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs +6 -2
  201. package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs.map +2 -2
  202. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs +11 -3
  203. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs.map +2 -2
  204. package/dist-esm/lib/ui/components/primitives/TldrawUiInput.mjs +6 -4
  205. package/dist-esm/lib/ui/components/primitives/TldrawUiInput.mjs.map +2 -2
  206. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs +18 -5
  207. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map +2 -2
  208. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +3 -0
  209. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
  210. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +76 -37
  211. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
  212. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs +3 -0
  213. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs.map +2 -2
  214. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +8 -8
  215. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
  216. package/dist-esm/lib/ui/context/actions.mjs +29 -10
  217. package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
  218. package/dist-esm/lib/ui/context/components.mjs +2 -0
  219. package/dist-esm/lib/ui/context/components.mjs.map +2 -2
  220. package/dist-esm/lib/ui/context/events.mjs.map +1 -1
  221. package/dist-esm/lib/ui/hooks/useClipboardEvents.mjs +1 -2
  222. package/dist-esm/lib/ui/hooks/useClipboardEvents.mjs.map +2 -2
  223. package/dist-esm/lib/ui/hooks/useExportAs.mjs +3 -2
  224. package/dist-esm/lib/ui/hooks/useExportAs.mjs.map +2 -2
  225. package/dist-esm/lib/ui/hooks/useTools.mjs +1 -1
  226. package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
  227. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +6 -2
  228. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
  229. package/dist-esm/lib/ui/kbd-utils.mjs +9 -3
  230. package/dist-esm/lib/ui/kbd-utils.mjs.map +2 -2
  231. package/dist-esm/lib/ui/version.mjs +3 -3
  232. package/dist-esm/lib/ui/version.mjs.map +1 -1
  233. package/dist-esm/lib/utils/export/copyAs.mjs +1 -2
  234. package/dist-esm/lib/utils/export/copyAs.mjs.map +2 -2
  235. package/dist-esm/lib/utils/export/export.mjs +0 -20
  236. package/dist-esm/lib/utils/export/export.mjs.map +2 -2
  237. package/dist-esm/lib/utils/export/exportAs.mjs +1 -2
  238. package/dist-esm/lib/utils/export/exportAs.mjs.map +2 -2
  239. package/package.json +3 -3
  240. package/src/index.ts +48 -22
  241. package/src/lib/Tldraw.tsx +15 -2
  242. package/src/lib/defaultExternalContentHandlers.ts +26 -4
  243. package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts +83 -13
  244. package/src/lib/shapes/arrow/ArrowShapeTool.test.ts +99 -5
  245. package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts +41 -0
  246. package/src/lib/shapes/arrow/arrow-types.ts +3 -5
  247. package/src/lib/shapes/arrow/arrowLabel.ts +8 -0
  248. package/src/lib/shapes/arrow/arrowTargetState.ts +34 -3
  249. package/src/lib/shapes/arrow/toolStates/Pointing.tsx +1 -1
  250. package/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx +4 -5
  251. package/src/lib/shapes/frame/FrameShapeUtil.tsx +9 -0
  252. package/src/lib/shapes/frame/components/FrameLabelInput.tsx +10 -3
  253. package/src/lib/shapes/geo/GeoShapeUtil.tsx +1 -0
  254. package/src/lib/shapes/image/ImageShapeUtil.tsx +3 -0
  255. package/src/lib/shapes/note/NoteShapeUtil.tsx +1 -0
  256. package/src/lib/shapes/shared/HyperlinkButton.tsx +5 -5
  257. package/src/lib/shapes/shared/PlainTextLabel.tsx +0 -6
  258. package/src/lib/shapes/shared/useEditablePlainText.ts +3 -10
  259. package/src/lib/shapes/shared/useImageOrVideoAsset.ts +0 -7
  260. package/src/lib/shapes/text/PlainTextArea.tsx +4 -3
  261. package/src/lib/shapes/text/RichTextArea.tsx +3 -4
  262. package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx +6 -2
  263. package/src/lib/ui/TldrawUi.tsx +16 -10
  264. package/src/lib/ui/assetUrls.ts +13 -10
  265. package/src/lib/ui/components/A11y.tsx +1 -2
  266. package/src/lib/ui/components/{FollowingIndicator.tsx → DefaultFollowingIndicator.tsx} +2 -1
  267. package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +6 -6
  268. package/src/lib/ui/components/LanguageMenu.tsx +1 -0
  269. package/src/lib/ui/components/Minimap/DefaultMinimap.tsx +2 -1
  270. package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx +1 -2
  271. package/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx +27 -13
  272. package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +260 -381
  273. package/src/lib/ui/components/{primitives/TldrawUiButtonPicker.tsx → StylePanel/StylePanelButtonPicker.tsx} +70 -50
  274. package/src/lib/ui/components/StylePanel/StylePanelContext.tsx +63 -0
  275. package/src/lib/ui/components/StylePanel/{DoubleDropdownPicker.tsx → StylePanelDoubleDropdownPicker.tsx} +28 -19
  276. package/src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx +119 -0
  277. package/src/lib/ui/components/StylePanel/StylePanelSubheading.tsx +9 -0
  278. package/src/lib/ui/components/Toolbar/AltTextEditor.tsx +2 -0
  279. package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx +32 -15
  280. package/src/lib/ui/components/Toolbar/DefaultVideoToolbarContent.tsx +12 -4
  281. package/src/lib/ui/components/Toolbar/LinkEditor.tsx +1 -0
  282. package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx +1 -1
  283. package/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx +9 -2
  284. package/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx +7 -3
  285. package/src/lib/ui/components/primitives/TldrawUiInput.tsx +6 -3
  286. package/src/lib/ui/components/primitives/TldrawUiSlider.tsx +52 -32
  287. package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +5 -1
  288. package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +82 -30
  289. package/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx +4 -0
  290. package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +9 -9
  291. package/src/lib/ui/context/actions.tsx +36 -10
  292. package/src/lib/ui/context/components.tsx +3 -0
  293. package/src/lib/ui/context/events.tsx +1 -1
  294. package/src/lib/ui/hooks/useClipboardEvents.ts +1 -2
  295. package/src/lib/ui/hooks/useExportAs.ts +3 -2
  296. package/src/lib/ui/hooks/useTools.tsx +1 -1
  297. package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +4 -0
  298. package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +6 -2
  299. package/src/lib/ui/kbd-utils.ts +10 -3
  300. package/src/lib/ui/version.ts +3 -3
  301. package/src/lib/ui.css +43 -3
  302. package/src/lib/utils/export/copyAs.ts +1 -24
  303. package/src/lib/utils/export/export.ts +0 -36
  304. package/src/lib/utils/export/exportAs.ts +1 -32
  305. package/src/test/TestEditor.ts +8 -2
  306. package/src/test/custom-clipping.test.ts +436 -0
  307. package/src/test/getCulledShapes.test.tsx +71 -2
  308. package/tldraw.css +59 -6
  309. package/dist-cjs/lib/ui/components/FollowingIndicator.js.map +0 -7
  310. package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js.map +0 -7
  311. package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js.map +0 -7
  312. package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js +0 -131
  313. package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js.map +0 -7
  314. package/dist-esm/lib/ui/components/FollowingIndicator.mjs.map +0 -7
  315. package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs.map +0 -7
  316. package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map +0 -7
  317. package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs +0 -115
  318. package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs.map +0 -7
  319. package/src/lib/ui/components/StylePanel/DropdownPicker.tsx +0 -110
@@ -11,6 +11,7 @@ import { Circle2d } from '@tldraw/editor';
11
11
  import { ComponentType } from 'react';
12
12
  import { CSSProperties } from 'react';
13
13
  import { Editor } from '@tldraw/editor';
14
+ import { ElbowArrowSnap } from '@tldraw/editor';
14
15
  import { Extension } from '@tiptap/core';
15
16
  import { Extensions } from '@tiptap/core';
16
17
  import { ForwardRefExoticComponent } from 'react';
@@ -58,6 +59,7 @@ import { TLArrowBinding } from '@tldraw/editor';
58
59
  import { TLArrowBindingProps } from '@tldraw/editor';
59
60
  import { TLArrowShape } from '@tldraw/editor';
60
61
  import { TLArrowShapeArrowheadStyle } from '@tldraw/editor';
62
+ import { TLArrowShapeKind } from '@tldraw/editor';
61
63
  import { TLArrowShapeProps } from '@tldraw/editor';
62
64
  import { TLAsset } from '@tldraw/editor';
63
65
  import { TLAssetId } from '@tldraw/editor';
@@ -68,7 +70,6 @@ import { TLClickEventInfo } from '@tldraw/editor';
68
70
  import { TLContent } from '@tldraw/editor';
69
71
  import { TLCropInfo } from '@tldraw/editor';
70
72
  import { TLDefaultColorStyle } from '@tldraw/editor';
71
- import { TLDefaultColorTheme } from '@tldraw/editor';
72
73
  import { TLDefaultColorThemeColor } from '@tldraw/editor';
73
74
  import { TLDefaultDashStyle } from '@tldraw/editor';
74
75
  import { TLDefaultFillStyle } from '@tldraw/editor';
@@ -193,9 +194,6 @@ export declare class ArrowBindingUtil extends BindingUtil<TLArrowBinding> {
193
194
  /** @public @react */
194
195
  export declare function ArrowDownToolbarItem(): JSX_2.Element;
195
196
 
196
- /** @public @react */
197
- export declare function ArrowheadStylePickerSet({ styles }: StylePickerSetProps): JSX_2.Element | null;
198
-
199
197
  /** @public @react */
200
198
  export declare function ArrowLeftToolbarItem(): JSX_2.Element;
201
199
 
@@ -278,7 +276,7 @@ export declare interface ArrowShapeOptions {
278
276
  */
279
277
  readonly hoverPreciseTimeout: number;
280
278
  /**
281
- * When pointing at a shape using the arrow tool or draggin an arrow terminal handle, how long
279
+ * When pointing at a shape using the arrow tool or dragging an arrow terminal handle, how long
282
280
  * should we wait before we assume the user is targeting precisely instead of imprecisely.
283
281
  */
284
282
  readonly pointingPreciseTimeout: number;
@@ -286,11 +284,11 @@ export declare interface ArrowShapeOptions {
286
284
  * When creating an arrow, should it stop exactly at the pointer, or should
287
285
  * it stop at the edge of the target shape.
288
286
  */
289
- readonly shouldBeExact: (editor: Editor) => boolean;
287
+ shouldBeExact(editor: Editor, isPrecise: boolean): boolean;
290
288
  /**
291
289
  * When creating an arrow, should it bind to the target shape.
292
290
  */
293
- readonly shouldIgnoreTargets: (editor: Editor) => boolean;
291
+ shouldIgnoreTargets(editor: Editor): boolean;
294
292
  }
295
293
 
296
294
  /** @public */
@@ -365,6 +363,42 @@ export declare class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
365
363
  getInterpolatedProps(startShape: TLArrowShape, endShape: TLArrowShape, progress: number): TLArrowShapeProps;
366
364
  }
367
365
 
366
+ /**
367
+ * State representing what we're pointing to when drawing or updating an arrow. You can get this
368
+ * state using {@link getArrowTargetState}, and update it as part of an arrow interaction with
369
+ * {@link updateArrowTargetState} or {@link clearArrowTargetState}.
370
+ *
371
+ * @public
372
+ */
373
+ export declare interface ArrowTargetState {
374
+ target: TLShape;
375
+ arrowKind: TLArrowShapeKind;
376
+ handlesInPageSpace: {
377
+ bottom: {
378
+ isEnabled: boolean;
379
+ point: VecLike;
380
+ };
381
+ left: {
382
+ isEnabled: boolean;
383
+ point: VecLike;
384
+ };
385
+ right: {
386
+ isEnabled: boolean;
387
+ point: VecLike;
388
+ };
389
+ top: {
390
+ isEnabled: boolean;
391
+ point: VecLike;
392
+ };
393
+ };
394
+ isExact: boolean;
395
+ isPrecise: boolean;
396
+ centerInPageSpace: VecLike;
397
+ anchorInPageSpace: VecLike;
398
+ snap: ElbowArrowSnap;
399
+ normalizedAnchor: VecLike;
400
+ }
401
+
368
402
  /** @public @react */
369
403
  export declare function ArrowToolbarItem(): JSX_2.Element;
370
404
 
@@ -491,6 +525,14 @@ export declare function centerSelectionAroundPoint(editor: Editor, position: Vec
491
525
  /** @public @react */
492
526
  export declare function CheckBoxToolbarItem(): JSX_2.Element;
493
527
 
528
+ /**
529
+ * Clear the current arrow target state for an editor. See {@link ArrowTargetState} for more
530
+ * information.
531
+ *
532
+ * @public
533
+ */
534
+ export declare function clearArrowTargetState(editor: Editor): void;
535
+
494
536
  /** @public @react */
495
537
  export declare function ClipboardMenuGroup(): JSX_2.Element;
496
538
 
@@ -500,9 +542,6 @@ export declare function CloudToolbarItem(): JSX_2.Element;
500
542
  /** @public @react */
501
543
  export declare function ColorSchemeMenu(): JSX_2.Element;
502
544
 
503
- /** @public @react */
504
- export declare function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps): JSX_2.Element;
505
-
506
545
  /**
507
546
  * Contains the size within the given box size
508
547
  *
@@ -534,14 +573,6 @@ export declare function ConvertToEmbedMenuItem(): JSX_2.Element | null;
534
573
  */
535
574
  export declare function copyAs(editor: Editor, ids: TLShapeId[], opts: CopyAsOptions): Promise<void>;
536
575
 
537
- /**
538
- * @deprecated The format parameter is now part of the opts object.
539
- * @public
540
- */
541
- export declare function copyAs(editor: Editor, ids: TLShapeId[], format: TLCopyType, opts?: TLImageExportOptions & {
542
- format?: undefined;
543
- }): Promise<void>;
544
-
545
576
  /** @public @react */
546
577
  export declare function CopyAsMenuGroup(): JSX_2.Element;
547
578
 
@@ -853,6 +884,9 @@ export declare let defaultEditorAssetUrls: TLEditorAssetUrls;
853
884
  /** @public */
854
885
  export declare type DefaultEmbedDefinitionType = (typeof DEFAULT_EMBED_DEFINITIONS)[number]['type'];
855
886
 
887
+ /** @public @react */
888
+ export declare function DefaultFollowingIndicator(): JSX_2.Element | null;
889
+
856
890
  /** @public */
857
891
  export declare const DefaultFontFaces: TLDefaultFonts;
858
892
 
@@ -996,7 +1030,7 @@ export declare function DefaultSharePanel(): JSX_2.Element;
996
1030
  export declare const DefaultStylePanel: NamedExoticComponent<TLUiStylePanelProps>;
997
1031
 
998
1032
  /** @public @react */
999
- export declare function DefaultStylePanelContent({ styles }: TLUiStylePanelContentProps): JSX_2.Element | null;
1033
+ export declare function DefaultStylePanelContent(): JSX_2.Element;
1000
1034
 
1001
1035
  /** @public @react */
1002
1036
  export declare const DefaultToasts: NamedExoticComponent<object>;
@@ -1489,12 +1523,6 @@ export declare interface ExampleDialogProps {
1489
1523
  */
1490
1524
  export declare function exportAs(editor: Editor, ids: TLShapeId[], opts: ExportAsOptions): Promise<void>;
1491
1525
 
1492
- /**
1493
- * @deprecated The format & name parameters are now part of the opts object.
1494
- * @public
1495
- */
1496
- export declare function exportAs(editor: Editor, ids: TLShapeId[], format?: TLExportType, name?: string, opts?: TLImageExportOptions): Promise<void>;
1497
-
1498
1526
  /** @public */
1499
1527
  export declare interface ExportAsOptions extends TLImageExportOptions {
1500
1528
  /** {@inheritdoc @tldraw/editor#TLImageExportOptions.format} */
@@ -1506,23 +1534,6 @@ export declare interface ExportAsOptions extends TLImageExportOptions {
1506
1534
  /** @public @react */
1507
1535
  export declare function ExportFileContentSubMenu(): JSX_2.Element;
1508
1536
 
1509
- /**
1510
- * Export the given shapes as a blob.
1511
- * @param editor - The editor instance.
1512
- * @param ids - The ids of the shapes to export.
1513
- * @param format - The format to export as.
1514
- * @param opts - Rendering options.
1515
- * @returns A promise that resolves to a blob.
1516
- * @deprecated Use {@link @tldraw/editor#Editor.toImage} instead.
1517
- * @public
1518
- */
1519
- export declare function exportToBlob({ editor, ids, format, opts, }: {
1520
- editor: Editor;
1521
- format: TLExportType;
1522
- ids: TLShapeId[];
1523
- opts?: TLImageExportOptions;
1524
- }): Promise<Blob>;
1525
-
1526
1537
  /** @public @react */
1527
1538
  export declare function ExtrasGroup(): JSX_2.Element;
1528
1539
 
@@ -1579,6 +1590,7 @@ export declare class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
1579
1590
  canEdit(): boolean;
1580
1591
  canResize(): boolean;
1581
1592
  canResizeChildren(): boolean;
1593
+ isExportBoundsContainer(): boolean;
1582
1594
  getDefaultProps(): TLFrameShape['props'];
1583
1595
  getAriaDescriptor(shape: TLFrameShape): string;
1584
1596
  getGeometry(shape: TLFrameShape): Geometry2d;
@@ -1587,6 +1599,7 @@ export declare class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
1587
1599
  toSvg(shape: TLFrameShape, ctx: SvgExportContext): JSX_2.Element;
1588
1600
  indicator(shape: TLFrameShape): JSX_2.Element;
1589
1601
  providesBackgroundForChildren(): boolean;
1602
+ getClipPath(shape: TLFrameShape): Vec[];
1590
1603
  canReceiveNewChildrenOfType(shape: TLShape): boolean;
1591
1604
  onResize(shape: any, info: TLResizeInfo<any>): any;
1592
1605
  getInterpolatedProps(startShape: TLFrameShape, endShape: TLFrameShape, t: number): TLFrameShapeProps;
@@ -1735,15 +1748,20 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
1735
1748
  getInterpolatedProps(startShape: TLGeoShape, endShape: TLGeoShape, t: number): TLGeoShapeProps;
1736
1749
  }
1737
1750
 
1738
- /** @public @react */
1739
- export declare function GeoStylePickerSet({ styles }: StylePickerSetProps): JSX_2.Element | null;
1740
-
1741
1751
  /** @public */
1742
1752
  export declare function getArrowBindings(editor: Editor, shape: TLArrowShape): TLArrowBindings;
1743
1753
 
1744
1754
  /** @public */
1745
1755
  export declare function getArrowInfo(editor: Editor, shape: TLArrowShape | TLShapeId): TLArrowInfo | undefined;
1746
1756
 
1757
+ /**
1758
+ * Get the current arrow target state for an editor. See {@link ArrowTargetState} for more
1759
+ * information.
1760
+ *
1761
+ * @public
1762
+ */
1763
+ export declare function getArrowTargetState(editor: Editor): ArrowTargetState | null;
1764
+
1747
1765
  /** @public */
1748
1766
  export declare function getArrowTerminalsInArrowSpace(editor: Editor, shape: TLArrowShape, bindings: TLArrowBindings): {
1749
1767
  end: Vec;
@@ -1898,6 +1916,7 @@ export declare class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
1898
1916
  static migrations: TLPropsMigrations;
1899
1917
  isAspectRatioLocked(): boolean;
1900
1918
  canCrop(): boolean;
1919
+ isExportBoundsContainer(): boolean;
1901
1920
  getDefaultProps(): TLImageShape['props'];
1902
1921
  getGeometry(shape: TLImageShape): Geometry2d;
1903
1922
  getAriaDescriptor(shape: TLImageShape): string;
@@ -2148,6 +2167,16 @@ export declare class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
2148
2167
  /** @public @react */
2149
2168
  export declare function NoteToolbarItem(): JSX_2.Element;
2150
2169
 
2170
+ /**
2171
+ * Checks if a file is allowed to be uploaded. If it is not, it will show a toast explaining why to the user.
2172
+ *
2173
+ * @param file - The file to check
2174
+ * @param options - The options for the external content handler
2175
+ * @returns True if the file is allowed, false otherwise
2176
+ * @public
2177
+ */
2178
+ export declare function notifyIfFileNotAllowed(file: File, options: TLDefaultExternalContentHandlerOpts): boolean;
2179
+
2151
2180
  /** @public @react */
2152
2181
  export declare function OfflineIndicator(): JSX_2.Element;
2153
2182
 
@@ -2174,9 +2203,6 @@ export declare interface OnDragFromToolbarToCreateShapesOpts {
2174
2203
  onDragEnd?(id: TLShapeId): void;
2175
2204
  }
2176
2205
 
2177
- /** @public @react */
2178
- export declare function OpacitySlider(): JSX_2.Element | null;
2179
-
2180
2206
  /** @public @react */
2181
2207
  export declare function OvalToolbarItem(): JSX_2.Element;
2182
2208
 
@@ -2568,9 +2594,6 @@ export declare interface SolidPathBuilderOpts extends BasePathBuilderOpts {
2568
2594
 
2569
2595
  /* Excluded from this release type: Spinner */
2570
2596
 
2571
- /** @public @react */
2572
- export declare function SplineStylePickerSet({ styles }: StylePickerSetProps): JSX_2.Element | null;
2573
-
2574
2597
  /** @public @react */
2575
2598
  export declare function StackMenuItems(): JSX_2.Element;
2576
2599
 
@@ -2628,11 +2651,124 @@ export declare interface StrokePoint {
2628
2651
  radius: number;
2629
2652
  }
2630
2653
 
2654
+ /** @public @react */
2655
+ export declare function StylePanelArrowheadPicker(): JSX_2.Element | null;
2656
+
2657
+ /** @public @react */
2658
+ export declare function StylePanelArrowKindPicker(): JSX_2.Element | null;
2659
+
2660
+ /** @public */
2661
+ export declare const StylePanelButtonPicker: <T extends string>(props: StylePanelButtonPickerProps<T>) => ReactElement;
2662
+
2663
+ /** @public */
2664
+ export declare interface StylePanelButtonPickerProps<T extends string> {
2665
+ title: string;
2666
+ uiType: string;
2667
+ style: StyleProp<T>;
2668
+ value: SharedStyle<T>;
2669
+ items: StyleValuesForUi<T>;
2670
+ onValueChange?(style: StyleProp<T>, value: T): void;
2671
+ onHistoryMark?(id: string): void;
2672
+ }
2673
+
2674
+ /** @public @react */
2675
+ export declare function StylePanelColorPicker(): JSX_2.Element | null;
2676
+
2631
2677
  /** @public */
2632
- export declare interface StylePickerSetProps {
2678
+ export declare interface StylePanelContext {
2633
2679
  styles: ReadonlySharedStyleMap;
2680
+ showUiLabels: boolean;
2681
+ onHistoryMark(id: string): void;
2682
+ onValueChange<T>(style: StyleProp<T>, value: T): void;
2683
+ }
2684
+
2685
+ /** @public @react */
2686
+ export declare function StylePanelContextProvider({ children, styles }: StylePanelContextProviderProps): JSX_2.Element;
2687
+
2688
+ /** @public */
2689
+ export declare interface StylePanelContextProviderProps {
2690
+ children: React.ReactNode;
2691
+ styles: ReadonlySharedStyleMap;
2692
+ }
2693
+
2694
+ /** @public @react */
2695
+ export declare function StylePanelDashPicker(): JSX_2.Element | null;
2696
+
2697
+ /** @public @react */
2698
+ export declare const StylePanelDoubleDropdownPicker: <T extends string>(props: StylePanelDoubleDropdownPickerProps<T>) => React_2.JSX.Element;
2699
+
2700
+ /** @public */
2701
+ export declare interface StylePanelDoubleDropdownPickerProps<T extends string> {
2702
+ uiTypeA: string;
2703
+ uiTypeB: string;
2704
+ label: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
2705
+ labelA: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
2706
+ labelB: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
2707
+ itemsA: StyleValuesForUi<T>;
2708
+ itemsB: StyleValuesForUi<T>;
2709
+ styleA: StyleProp<T>;
2710
+ styleB: StyleProp<T>;
2711
+ valueA: SharedStyle<T>;
2712
+ valueB: SharedStyle<T>;
2713
+ onValueChange?(style: StyleProp<T>, value: T): void;
2714
+ }
2715
+
2716
+ /** @public @react */
2717
+ export declare const StylePanelDropdownPicker: <T extends string>(props: StylePanelDropdownPickerProps<T>) => React_2.JSX.Element;
2718
+
2719
+ /** @public */
2720
+ export declare interface StylePanelDropdownPickerProps<T extends string> {
2721
+ id: string;
2722
+ label?: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
2723
+ uiType: string;
2724
+ stylePanelType: string;
2725
+ style: StyleProp<T>;
2726
+ value: SharedStyle<T>;
2727
+ items: StyleValuesForUi<T>;
2728
+ type: 'icon' | 'menu' | 'tool';
2729
+ onValueChange?(style: StyleProp<T>, value: T): void;
2730
+ }
2731
+
2732
+ /** @public @react */
2733
+ export declare function StylePanelFillPicker(): JSX_2.Element | null;
2734
+
2735
+ /** @public @react */
2736
+ export declare function StylePanelFontPicker(): JSX_2.Element | null;
2737
+
2738
+ /** @public @react */
2739
+ export declare function StylePanelGeoShapePicker(): JSX_2.Element | null;
2740
+
2741
+ /** @public @react */
2742
+ export declare function StylePanelLabelAlignPicker(): JSX_2.Element | null;
2743
+
2744
+ /** @public @react */
2745
+ export declare function StylePanelOpacityPicker(): JSX_2.Element | null;
2746
+
2747
+ /** @public @react */
2748
+ export declare function StylePanelSection({ children }: StylePanelSectionProps): JSX_2.Element;
2749
+
2750
+ /** @public */
2751
+ export declare interface StylePanelSectionProps {
2752
+ children: React_3.ReactNode;
2634
2753
  }
2635
2754
 
2755
+ /** @public @react */
2756
+ export declare function StylePanelSizePicker(): JSX_2.Element | null;
2757
+
2758
+ /** @public @react */
2759
+ export declare function StylePanelSplinePicker(): JSX_2.Element | null;
2760
+
2761
+ /** @public @react */
2762
+ export declare function StylePanelSubheading({ children }: StylePanelSubheadingProps): JSX_2.Element;
2763
+
2764
+ /** @public */
2765
+ export declare interface StylePanelSubheadingProps {
2766
+ children: React.ReactNode;
2767
+ }
2768
+
2769
+ /** @public @react */
2770
+ export declare function StylePanelTextAlignPicker(): JSX_2.Element | null;
2771
+
2636
2772
  /** @public */
2637
2773
  export declare type StyleValuesForUi<T> = readonly {
2638
2774
  readonly icon: string | TLUiIconJsx;
@@ -2672,12 +2808,6 @@ export declare interface TextAreaProps {
2672
2808
  */
2673
2809
  export declare const TextDirection: Extension<any, any>;
2674
2810
 
2675
- /**
2676
- * @deprecated Use `PlainTextLabel` instead.
2677
- * @public
2678
- */
2679
- export declare const TextLabel: React_3.NamedExoticComponent<PlainTextLabelProps>;
2680
-
2681
2811
  /** @public */
2682
2812
  export declare interface TextShapeOptions {
2683
2813
  /** How much addition padding should be added to the horizontal geometry of the shape when binding to an arrow? */
@@ -2755,18 +2885,9 @@ export declare class TextShapeUtil extends ShapeUtil<TLTextShape> {
2755
2885
  } | undefined;
2756
2886
  }
2757
2887
 
2758
- /** @public @react */
2759
- export declare function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps): JSX_2.Element | null;
2760
-
2761
2888
  /** @public @react */
2762
2889
  export declare function TextToolbarItem(): JSX_2.Element;
2763
2890
 
2764
- /** @public */
2765
- export declare interface ThemeStylePickerSetProps {
2766
- styles: ReadonlySharedStyleMap;
2767
- theme: TLDefaultColorTheme;
2768
- }
2769
-
2770
2891
  /**
2771
2892
  * Default extensions for the TipTap editor.
2772
2893
  *
@@ -3023,9 +3144,6 @@ export declare function TldrawUiButtonIcon({ icon, small, invertIcon }: TLUiButt
3023
3144
  /** @public @react */
3024
3145
  export declare function TldrawUiButtonLabel({ children }: TLUiButtonLabelProps): JSX_2.Element;
3025
3146
 
3026
- /** @public */
3027
- export declare const TldrawUiButtonPicker: <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement;
3028
-
3029
3147
  /**
3030
3148
  * A column, usually of UI controls like buttons, select dropdown, checkboxes, etc.
3031
3149
  *
@@ -3105,6 +3223,9 @@ export declare const TldrawUiGrid: ForwardRefExoticComponent<TLUiLayoutProps & R
3105
3223
  /** @public @react */
3106
3224
  export declare const TldrawUiIcon: NamedExoticComponent<TLUiIconProps>;
3107
3225
 
3226
+ /** @public @react */
3227
+ export declare function TldrawUiInFrontOfTheCanvas(): JSX_2.Element;
3228
+
3108
3229
  /** @public @react */
3109
3230
  export declare const TldrawUiInput: React_2.ForwardRefExoticComponent<TLUiInputProps & React_2.RefAttributes<HTMLInputElement>>;
3110
3231
 
@@ -3118,7 +3239,7 @@ export declare function TldrawUiMenuActionCheckboxItem({ actionId, ...rest }: TL
3118
3239
  export declare function TldrawUiMenuActionItem({ actionId, ...rest }: TLUiMenuActionItemProps): JSX_2.Element | null;
3119
3240
 
3120
3241
  /** @public @react */
3121
- export declare function TldrawUiMenuCheckboxItem<TranslationKey extends string = string, IconType extends string = string>({ id, kbd, label, readonlyOk, onSelect, toggle, disabled, checked, }: TLUiMenuCheckboxItemProps<TranslationKey, IconType>): JSX_2.Element | null;
3242
+ export declare function TldrawUiMenuCheckboxItem<TranslationKey extends string = string, IconType extends string = string>({ id, kbd, label, lang, readonlyOk, onSelect, toggle, disabled, checked, }: TLUiMenuCheckboxItemProps<TranslationKey, IconType>): JSX_2.Element | null;
3122
3243
 
3123
3244
  /** @public @react */
3124
3245
  export declare function TldrawUiMenuContextProvider({ type, sourceId, children, }: TLUiMenuContextProviderProps): JSX_2.Element;
@@ -3202,7 +3323,7 @@ export declare const TldrawUiToolbar: React_3.ForwardRefExoticComponent<TLUiTool
3202
3323
  export declare const TldrawUiToolbarButton: React_3.ForwardRefExoticComponent<TLUiToolbarButtonProps & React_3.RefAttributes<HTMLButtonElement>>;
3203
3324
 
3204
3325
  /** @public @react */
3205
- export declare const TldrawUiToolbarToggleGroup: ({ children, className, type, ...props }: TLUiToolbarToggleGroupProps) => JSX_2.Element;
3326
+ export declare const TldrawUiToolbarToggleGroup: ({ children, className, type, asChild, ...props }: TLUiToolbarToggleGroupProps) => JSX_2.Element;
3206
3327
 
3207
3328
  /** @public @react */
3208
3329
  export declare const TldrawUiToolbarToggleItem: ({ children, className, type, value, tooltip, ...props }: TLUiToolbarToggleItemProps) => JSX_2.Element;
@@ -3389,18 +3510,6 @@ export declare interface TLUiButtonLabelProps {
3389
3510
  children?: ReactNode;
3390
3511
  }
3391
3512
 
3392
- /** @public */
3393
- export declare interface TLUiButtonPickerProps<T extends string> {
3394
- title: string;
3395
- uiType: string;
3396
- style: StyleProp<T>;
3397
- value: SharedStyle<T>;
3398
- items: StyleValuesForUi<T>;
3399
- theme: TLDefaultColorTheme;
3400
- onValueChange(style: StyleProp<T>, value: T): void;
3401
- onHistoryMark?(id: string): void;
3402
- }
3403
-
3404
3513
  /** @public */
3405
3514
  export declare interface TLUiButtonProps extends React_2.HTMLAttributes<HTMLButtonElement> {
3406
3515
  disabled?: boolean;
@@ -3435,6 +3544,7 @@ export declare interface TLUiComponents {
3435
3544
  Dialogs?: ComponentType | null;
3436
3545
  Toasts?: ComponentType | null;
3437
3546
  A11y?: ComponentType | null;
3547
+ FollowingIndicator?: ComponentType | null;
3438
3548
  }
3439
3549
 
3440
3550
  /** @public */
@@ -3760,7 +3870,7 @@ export declare interface TLUiEventMap {
3760
3870
  'flatten-to-image': null;
3761
3871
  'a11y-repeat-shape-announce': null;
3762
3872
  'open-url': {
3763
- url: string;
3873
+ destinationUrl: string;
3764
3874
  };
3765
3875
  'open-context-menu': null;
3766
3876
  'adjust-shape-styles': null;
@@ -3841,6 +3951,7 @@ export declare interface TLUiInputProps {
3841
3951
  shouldManuallyMaintainScrollPositionWhenFocused?: boolean;
3842
3952
  value?: string;
3843
3953
  'data-testid'?: string;
3954
+ 'aria-label'?: string;
3844
3955
  }
3845
3956
 
3846
3957
  /** @public */
@@ -3885,6 +3996,7 @@ export declare interface TLUiMenuCheckboxItemProps<TranslationKey extends string
3885
3996
  label?: {
3886
3997
  [key: string]: TranslationKey;
3887
3998
  } | TranslationKey;
3999
+ lang?: string;
3888
4000
  readonlyOk?: boolean;
3889
4001
  onSelect(source: TLUiEventSource): Promise<void> | void;
3890
4002
  toggle?: boolean;
@@ -4035,19 +4147,15 @@ export declare interface TLUiSliderProps {
4035
4147
  label: string;
4036
4148
  title: string;
4037
4149
  onValueChange(value: number): void;
4038
- onHistoryMark(id: string): void;
4150
+ onHistoryMark?(id: string): void;
4039
4151
  'data-testid'?: string;
4040
4152
  ariaValueModifier?: number;
4041
4153
  }
4042
4154
 
4043
- /** @public */
4044
- export declare interface TLUiStylePanelContentProps {
4045
- styles: ReturnType<typeof useRelevantStyles>;
4046
- }
4047
-
4048
4155
  /** @public */
4049
4156
  export declare interface TLUiStylePanelProps {
4050
4157
  isMobile?: boolean;
4158
+ styles?: null | ReadonlySharedStyleMap;
4051
4159
  children?: ReactNode;
4052
4160
  }
4053
4161
 
@@ -4116,6 +4224,7 @@ export declare interface TLUiToolbarToggleGroupProps extends React_3.HTMLAttribu
4116
4224
  value: any;
4117
4225
  defaultValue?: any;
4118
4226
  type: 'multiple' | 'single';
4227
+ asChild?: boolean;
4119
4228
  }
4120
4229
 
4121
4230
  /** @public */
@@ -4124,7 +4233,7 @@ export declare interface TLUiToolbarToggleItemProps extends React_3.HTMLAttribut
4124
4233
  className?: string;
4125
4234
  type: 'icon' | 'tool';
4126
4235
  value: string;
4127
- tooltip?: string;
4236
+ tooltip?: React_3.ReactNode;
4128
4237
  }
4129
4238
 
4130
4239
  /** @public */
@@ -4170,7 +4279,7 @@ export declare interface TLUiTranslation {
4170
4279
  export declare type TLUiTranslationContextType = TLUiTranslation;
4171
4280
 
4172
4281
  /** @public */
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';
4282
+ 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.maximum-size' | 'assets.files.size-too-big' | 'assets.files.type-not-allowed' | 'assets.files.upload-failed' | 'assets.url.failed' | 'color-style.black' | 'color-style.blue' | 'color-style.green' | 'color-style.grey' | 'color-style.light-blue' | 'color-style.light-green' | 'color-style.light-red' | 'color-style.light-violet' | 'color-style.orange' | 'color-style.red' | 'color-style.violet' | 'color-style.white' | 'color-style.yellow' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.edit' | 'context-menu.export-all-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context-menu.title' | 'context.pages.new-page' | 'cursor-chat.type-to-chat' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'document-name-menu.copy-link' | 'document.default-name' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.external-link' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | 'embed-dialog.back' | 'embed-dialog.cancel' | 'embed-dialog.create' | 'embed-dialog.instruction' | 'embed-dialog.invalid-url' | 'embed-dialog.title' | 'embed-dialog.url' | 'file-system.confirm-clear.cancel' | 'file-system.confirm-clear.continue' | 'file-system.confirm-clear.description' | 'file-system.confirm-clear.dont-show-again' | 'file-system.confirm-clear.title' | 'file-system.confirm-open.cancel' | 'file-system.confirm-open.description' | 'file-system.confirm-open.dont-show-again' | 'file-system.confirm-open.open' | 'file-system.confirm-open.title' | 'file-system.file-open-error.file-format-version-too-new' | 'file-system.file-open-error.generic-corrupted-file' | 'file-system.file-open-error.not-a-tldraw-file' | 'file-system.file-open-error.title' | 'file-system.shared-document-file-open-error.description' | 'file-system.shared-document-file-open-error.title' | 'fill-style.fill' | 'fill-style.none' | 'fill-style.pattern' | 'fill-style.semi' | 'fill-style.solid' | 'focus-mode.toggle-focus-mode' | 'font-style.draw' | 'font-style.mono' | 'font-style.sans' | 'font-style.serif' | 'geo-style.arrow-down' | 'geo-style.arrow-left' | 'geo-style.arrow-right' | 'geo-style.arrow-up' | 'geo-style.check-box' | 'geo-style.cloud' | 'geo-style.diamond' | 'geo-style.ellipse' | 'geo-style.heart' | 'geo-style.hexagon' | 'geo-style.octagon' | 'geo-style.oval' | 'geo-style.pentagon' | 'geo-style.rectangle' | 'geo-style.rhombus-2' | 'geo-style.rhombus' | 'geo-style.star' | 'geo-style.trapezoid' | 'geo-style.triangle' | 'geo-style.x-box' | 'handle.crop.bottom-left' | 'handle.crop.bottom-right' | 'handle.crop.bottom' | 'handle.crop.left' | 'handle.crop.right' | 'handle.crop.top-left' | 'handle.crop.top-right' | 'handle.crop.top' | 'handle.resize-bottom-left' | 'handle.resize-bottom-right' | 'handle.resize-bottom' | 'handle.resize-left' | 'handle.resize-right' | 'handle.resize-top-left' | 'handle.resize-top-right' | 'handle.resize-top' | 'handle.rotate.bottom_left_rotate' | 'handle.rotate.bottom_right_rotate' | 'handle.rotate.mobile_rotate' | 'handle.rotate.top_left_rotate' | 'handle.rotate.top_right_rotate' | 'help-menu.about' | 'help-menu.discord' | 'help-menu.github' | 'help-menu.import-tldr-file' | 'help-menu.keyboard-shortcuts' | 'help-menu.privacy' | 'help-menu.terms' | 'help-menu.title' | 'help-menu.twitter' | 'menu.accessibility' | 'menu.copy-as' | 'menu.edit' | 'menu.export-as' | 'menu.file' | 'menu.language' | 'menu.preferences' | 'menu.theme' | 'menu.title' | 'menu.view' | 'navigation-zone.minimap' | 'navigation-zone.title' | 'navigation-zone.toggle-minimap' | 'navigation-zone.zoom' | 'opacity-style.0.1' | 'opacity-style.0.25' | 'opacity-style.0.5' | 'opacity-style.0.75' | 'opacity-style.1' | 'page-menu.create-new-page' | 'page-menu.edit-done' | 'page-menu.edit-start' | 'page-menu.go-to-page' | 'page-menu.max-page-count-reached' | 'page-menu.new-page-initial-name' | 'page-menu.submenu.delete' | 'page-menu.submenu.duplicate-page' | 'page-menu.submenu.move-down' | 'page-menu.submenu.move-up' | 'page-menu.submenu.rename' | 'page-menu.submenu.title' | 'page-menu.title' | 'people-menu.anonymous-user' | 'people-menu.avatar-color' | 'people-menu.change-color' | 'people-menu.change-name' | 'people-menu.follow' | 'people-menu.following' | 'people-menu.invite' | 'people-menu.leading' | 'people-menu.title' | 'people-menu.user' | 'share-menu.copied' | 'share-menu.copy-link-note' | 'share-menu.copy-link' | 'share-menu.copy-readonly-link-note' | 'share-menu.copy-readonly-link' | 'share-menu.create-snapshot-link' | 'share-menu.creating-project' | 'share-menu.fork-note' | 'share-menu.offline-note' | 'share-menu.project-too-large' | 'share-menu.save-note' | 'share-menu.share-project' | 'share-menu.snapshot-link-note' | 'share-menu.title' | 'share-menu.upload-failed' | 'sharing.confirm-leave.cancel' | 'sharing.confirm-leave.description' | 'sharing.confirm-leave.dont-show-again' | 'sharing.confirm-leave.leave' | 'sharing.confirm-leave.title' | 'shortcuts-dialog.a11y' | 'shortcuts-dialog.collaboration' | 'shortcuts-dialog.edit' | 'shortcuts-dialog.file' | 'shortcuts-dialog.preferences' | 'shortcuts-dialog.text-formatting' | 'shortcuts-dialog.title' | 'shortcuts-dialog.tools' | 'shortcuts-dialog.transform' | 'shortcuts-dialog.view' | 'size-style.l' | 'size-style.m' | 'size-style.s' | 'size-style.xl' | 'spline-style.cubic' | 'spline-style.line' | 'status.offline' | 'style-panel.align' | 'style-panel.arrow-kind' | 'style-panel.arrowhead-end' | 'style-panel.arrowhead-start' | 'style-panel.arrowheads' | 'style-panel.color' | 'style-panel.dash' | 'style-panel.fill' | 'style-panel.font' | 'style-panel.geo' | 'style-panel.label-align' | 'style-panel.mixed' | 'style-panel.opacity' | 'style-panel.position' | 'style-panel.selected' | '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-confirm' | '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';
4174
4283
 
4175
4284
  /** @public */
4176
4285
  export declare interface TLUiTranslationProviderProps {
@@ -4346,18 +4455,34 @@ export declare function UnlockAllMenuItem(): JSX_2.Element;
4346
4455
  /** @public */
4347
4456
  export declare function unwrapLabel(label?: TLUiActionItem['label'], menuType?: string): string | undefined;
4348
4457
 
4349
- /** @public */
4350
- export declare function useA11y(): TLUiA11yContextType;
4351
-
4352
- /** @public */
4353
- export declare function useActions(): TLUiActionsContextType;
4458
+ /**
4459
+ * Update the current arrow target state for an editor. See {@link ArrowTargetState} for more
4460
+ * information.
4461
+ *
4462
+ * @public
4463
+ */
4464
+ export declare function updateArrowTargetState({ editor, pointInPageSpace, arrow, isPrecise, currentBinding, oppositeBinding, }: UpdateArrowTargetStateOpts): ArrowTargetState | null;
4354
4465
 
4355
4466
  /**
4356
- * @deprecated Use {@link useImageOrVideoAsset} instead.
4467
+ * Options passed to {@link updateArrowTargetState}.
4357
4468
  *
4358
4469
  * @public
4359
4470
  */
4360
- export declare const useAsset: typeof useImageOrVideoAsset;
4471
+ export declare interface UpdateArrowTargetStateOpts {
4472
+ editor: Editor;
4473
+ pointInPageSpace: VecLike;
4474
+ arrow: TLArrowShape | undefined;
4475
+ isPrecise: boolean;
4476
+ currentBinding: TLArrowBinding | undefined;
4477
+ /** The binding from the opposite end of the arrow, if one exists. */
4478
+ oppositeBinding: TLArrowBinding | undefined;
4479
+ }
4480
+
4481
+ /** @public */
4482
+ export declare function useA11y(): TLUiA11yContextType;
4483
+
4484
+ /** @public */
4485
+ export declare function useActions(): TLUiActionsContextType;
4361
4486
 
4362
4487
  /* Excluded from this release type: useAssetUrls */
4363
4488
 
@@ -4413,7 +4538,11 @@ export declare function useDefaultHelpers(): {
4413
4538
  copy: (source: TLUiEventSource) => Promise<void>;
4414
4539
  copyAs: (ids: TLShapeId[], format?: TLCopyType) => void;
4415
4540
  cut: (source: TLUiEventSource) => Promise<void>;
4416
- exportAs: (ids: TLShapeId[], format: TLExportType | undefined, name: string | undefined) => void;
4541
+ exportAs: (ids: TLShapeId[], opts?: {
4542
+ format?: TLExportType;
4543
+ name?: string;
4544
+ scale?: number;
4545
+ }) => void;
4417
4546
  getEmbedDefinition: (url: string) => TLEmbedResult;
4418
4547
  insertMedia: () => Promise<void>;
4419
4548
  isMobile: boolean;
@@ -4435,7 +4564,9 @@ export declare function useEditablePlainText(shapeId: TLShapeId, type: string, t
4435
4564
  handleChange: ({ plaintext }: {
4436
4565
  plaintext: string;
4437
4566
  }) => void;
4438
- handleDoubleClick: (e: any) => any;
4567
+ handleDoubleClick: (e: {
4568
+ nativeEvent: Event;
4569
+ } | Event) => void;
4439
4570
  handleFocus: () => void;
4440
4571
  handleInputPointerDown: (e: React_3.PointerEvent) => void;
4441
4572
  handleKeyDown: (e: KeyboardEvent) => void;
@@ -4452,7 +4583,9 @@ export declare function useEditableRichText(shapeId: TLShapeId, type: string, ri
4452
4583
  handleChange: ({ richText }: {
4453
4584
  richText: TLRichText;
4454
4585
  }) => void;
4455
- handleDoubleClick: (e: any) => any;
4586
+ handleDoubleClick: (e: {
4587
+ nativeEvent: Event;
4588
+ } | Event) => void;
4456
4589
  handleFocus: () => void;
4457
4590
  handleInputPointerDown: (e: React.PointerEvent) => void;
4458
4591
  handleKeyDown: (e: KeyboardEvent) => void;
@@ -4463,14 +4596,12 @@ export declare function useEditableRichText(shapeId: TLShapeId, type: string, ri
4463
4596
  rInput: RefObject<HTMLDivElement>;
4464
4597
  };
4465
4598
 
4466
- /**
4467
- * @deprecated Use `useEditablePlainText` instead.
4468
- * @public
4469
- */
4470
- export declare const useEditableText: typeof useEditablePlainText;
4471
-
4472
4599
  /** @public */
4473
- export declare function useExportAs(): (ids: TLShapeId[], format: TLExportType | undefined, name: string | undefined) => void;
4600
+ export declare function useExportAs(): (ids: TLShapeId[], opts?: {
4601
+ format?: TLExportType;
4602
+ name?: string;
4603
+ scale?: number;
4604
+ }) => void;
4474
4605
 
4475
4606
  /**
4476
4607
  * This is a handy helper hook that resolves an asset to an optimized URL for a given shape, or its
@@ -4544,6 +4675,9 @@ export declare const useSelectedShapesAnnouncer: () => void;
4544
4675
  /** @public */
4545
4676
  export declare function useShowCollaborationUi(): boolean;
4546
4677
 
4678
+ /** @public */
4679
+ export declare function useStylePanelContext(): StylePanelContext;
4680
+
4547
4681
  /** @public */
4548
4682
  export declare function useTldrawUiComponents(): TLUiComponents;
4549
4683