tldraw 3.16.0-canary.c1bcdabc9513 → 3.16.0-canary.c349490eaef0

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 (300) hide show
  1. package/dist-cjs/index.d.ts +164 -107
  2. package/dist-cjs/index.js +29 -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/arrowLabel.js +6 -0
  9. package/dist-cjs/lib/shapes/arrow/arrowLabel.js.map +3 -3
  10. package/dist-cjs/lib/shapes/bookmark/BookmarkShapeUtil.js +4 -4
  11. package/dist-cjs/lib/shapes/bookmark/BookmarkShapeUtil.js.map +2 -2
  12. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +8 -1
  13. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
  14. package/dist-cjs/lib/shapes/frame/components/FrameLabelInput.js +8 -2
  15. package/dist-cjs/lib/shapes/frame/components/FrameLabelInput.js.map +2 -2
  16. package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js +1 -0
  17. package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js.map +2 -2
  18. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js +3 -0
  19. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js.map +2 -2
  20. package/dist-cjs/lib/shapes/note/NoteShapeUtil.js +2 -1
  21. package/dist-cjs/lib/shapes/note/NoteShapeUtil.js.map +2 -2
  22. package/dist-cjs/lib/shapes/shared/HyperlinkButton.js +4 -4
  23. package/dist-cjs/lib/shapes/shared/HyperlinkButton.js.map +2 -2
  24. package/dist-cjs/lib/shapes/shared/PlainTextLabel.js +1 -3
  25. package/dist-cjs/lib/shapes/shared/PlainTextLabel.js.map +2 -2
  26. package/dist-cjs/lib/shapes/shared/useEditablePlainText.js +3 -5
  27. package/dist-cjs/lib/shapes/shared/useEditablePlainText.js.map +2 -2
  28. package/dist-cjs/lib/shapes/shared/useImageOrVideoAsset.js +0 -2
  29. package/dist-cjs/lib/shapes/shared/useImageOrVideoAsset.js.map +2 -2
  30. package/dist-cjs/lib/shapes/text/PlainTextArea.js +3 -2
  31. package/dist-cjs/lib/shapes/text/PlainTextArea.js.map +2 -2
  32. package/dist-cjs/lib/shapes/text/RichTextArea.js +3 -3
  33. package/dist-cjs/lib/shapes/text/RichTextArea.js.map +2 -2
  34. package/dist-cjs/lib/ui/TldrawUi.js +13 -12
  35. package/dist-cjs/lib/ui/TldrawUi.js.map +2 -2
  36. package/dist-cjs/lib/ui/assetUrls.js +13 -10
  37. package/dist-cjs/lib/ui/assetUrls.js.map +2 -2
  38. package/dist-cjs/lib/ui/components/A11y.js +1 -1
  39. package/dist-cjs/lib/ui/components/A11y.js.map +2 -2
  40. package/dist-cjs/lib/ui/components/{FollowingIndicator.js → DefaultFollowingIndicator.js} +6 -6
  41. package/dist-cjs/lib/ui/components/DefaultFollowingIndicator.js.map +7 -0
  42. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js +6 -6
  43. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map +1 -1
  44. package/dist-cjs/lib/ui/components/LanguageMenu.js +1 -0
  45. package/dist-cjs/lib/ui/components/LanguageMenu.js.map +2 -2
  46. package/dist-cjs/lib/ui/components/Minimap/DefaultMinimap.js +2 -1
  47. package/dist-cjs/lib/ui/components/Minimap/DefaultMinimap.js.map +2 -2
  48. package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js +1 -1
  49. package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js.map +2 -2
  50. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js +9 -4
  51. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js.map +2 -2
  52. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +255 -316
  53. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
  54. package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js +147 -0
  55. package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js.map +7 -0
  56. package/dist-cjs/lib/ui/components/StylePanel/StylePanelContext.js +68 -0
  57. package/dist-cjs/lib/ui/components/StylePanel/StylePanelContext.js.map +7 -0
  58. package/dist-cjs/lib/ui/components/StylePanel/{DoubleDropdownPicker.js → StylePanelDoubleDropdownPicker.js} +23 -22
  59. package/dist-cjs/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.js.map +7 -0
  60. package/dist-cjs/lib/ui/components/StylePanel/{DropdownPicker.js → StylePanelDropdownPicker.js} +24 -21
  61. package/dist-cjs/lib/ui/components/StylePanel/StylePanelDropdownPicker.js.map +7 -0
  62. package/dist-cjs/lib/ui/components/StylePanel/StylePanelSubheading.js +28 -0
  63. package/dist-cjs/lib/ui/components/StylePanel/StylePanelSubheading.js.map +7 -0
  64. package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js +2 -0
  65. package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js.map +2 -2
  66. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js +38 -9
  67. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map +2 -2
  68. package/dist-cjs/lib/ui/components/Toolbar/DefaultVideoToolbarContent.js +15 -3
  69. package/dist-cjs/lib/ui/components/Toolbar/DefaultVideoToolbarContent.js.map +2 -2
  70. package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js +2 -1
  71. package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js.map +2 -2
  72. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js +1 -1
  73. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js.map +2 -2
  74. package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js +6 -2
  75. package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js.map +2 -2
  76. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js +11 -2
  77. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js.map +2 -2
  78. package/dist-cjs/lib/ui/components/primitives/TldrawUiInput.js +5 -3
  79. package/dist-cjs/lib/ui/components/primitives/TldrawUiInput.js.map +2 -2
  80. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js +18 -5
  81. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map +2 -2
  82. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +3 -0
  83. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
  84. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +75 -37
  85. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
  86. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.js +3 -0
  87. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.js.map +2 -2
  88. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +8 -8
  89. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
  90. package/dist-cjs/lib/ui/context/actions.js +29 -10
  91. package/dist-cjs/lib/ui/context/actions.js.map +2 -2
  92. package/dist-cjs/lib/ui/context/components.js +2 -0
  93. package/dist-cjs/lib/ui/context/components.js.map +2 -2
  94. package/dist-cjs/lib/ui/context/events.js.map +1 -1
  95. package/dist-cjs/lib/ui/hooks/useClipboardEvents.js +1 -1
  96. package/dist-cjs/lib/ui/hooks/useClipboardEvents.js.map +2 -2
  97. package/dist-cjs/lib/ui/hooks/useExportAs.js +3 -2
  98. package/dist-cjs/lib/ui/hooks/useExportAs.js.map +2 -2
  99. package/dist-cjs/lib/ui/hooks/useTools.js +1 -1
  100. package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
  101. package/dist-cjs/lib/ui/hooks/useTranslation/TLUiTranslationKey.js.map +1 -1
  102. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js +6 -2
  103. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +2 -2
  104. package/dist-cjs/lib/ui/kbd-utils.js +9 -3
  105. package/dist-cjs/lib/ui/kbd-utils.js.map +2 -2
  106. package/dist-cjs/lib/ui/version.js +3 -3
  107. package/dist-cjs/lib/ui/version.js.map +1 -1
  108. package/dist-cjs/lib/utils/export/copyAs.js +1 -2
  109. package/dist-cjs/lib/utils/export/copyAs.js.map +2 -2
  110. package/dist-cjs/lib/utils/export/export.js +0 -20
  111. package/dist-cjs/lib/utils/export/export.js.map +2 -2
  112. package/dist-cjs/lib/utils/export/exportAs.js +1 -2
  113. package/dist-cjs/lib/utils/export/exportAs.js.map +2 -2
  114. package/dist-esm/index.d.mts +164 -107
  115. package/dist-esm/index.mjs +57 -29
  116. package/dist-esm/index.mjs.map +2 -2
  117. package/dist-esm/lib/Tldraw.mjs +14 -4
  118. package/dist-esm/lib/Tldraw.mjs.map +2 -2
  119. package/dist-esm/lib/defaultExternalContentHandlers.mjs +15 -4
  120. package/dist-esm/lib/defaultExternalContentHandlers.mjs.map +2 -2
  121. package/dist-esm/lib/shapes/arrow/arrowLabel.mjs +6 -0
  122. package/dist-esm/lib/shapes/arrow/arrowLabel.mjs.map +3 -3
  123. package/dist-esm/lib/shapes/bookmark/BookmarkShapeUtil.mjs +4 -5
  124. package/dist-esm/lib/shapes/bookmark/BookmarkShapeUtil.mjs.map +2 -2
  125. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +8 -1
  126. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
  127. package/dist-esm/lib/shapes/frame/components/FrameLabelInput.mjs +9 -3
  128. package/dist-esm/lib/shapes/frame/components/FrameLabelInput.mjs.map +2 -2
  129. package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs +1 -0
  130. package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs.map +2 -2
  131. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs +3 -0
  132. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs.map +2 -2
  133. package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs +2 -1
  134. package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs.map +2 -2
  135. package/dist-esm/lib/shapes/shared/HyperlinkButton.mjs +5 -5
  136. package/dist-esm/lib/shapes/shared/HyperlinkButton.mjs.map +2 -2
  137. package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs +1 -3
  138. package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs.map +2 -2
  139. package/dist-esm/lib/shapes/shared/useEditablePlainText.mjs +3 -6
  140. package/dist-esm/lib/shapes/shared/useEditablePlainText.mjs.map +2 -2
  141. package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs +0 -2
  142. package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs.map +2 -2
  143. package/dist-esm/lib/shapes/text/PlainTextArea.mjs +4 -3
  144. package/dist-esm/lib/shapes/text/PlainTextArea.mjs.map +2 -2
  145. package/dist-esm/lib/shapes/text/RichTextArea.mjs +3 -4
  146. package/dist-esm/lib/shapes/text/RichTextArea.mjs.map +2 -2
  147. package/dist-esm/lib/ui/TldrawUi.mjs +13 -12
  148. package/dist-esm/lib/ui/TldrawUi.mjs.map +2 -2
  149. package/dist-esm/lib/ui/assetUrls.mjs +13 -10
  150. package/dist-esm/lib/ui/assetUrls.mjs.map +2 -2
  151. package/dist-esm/lib/ui/components/A11y.mjs +1 -2
  152. package/dist-esm/lib/ui/components/A11y.mjs.map +2 -2
  153. package/dist-esm/lib/ui/components/{FollowingIndicator.mjs → DefaultFollowingIndicator.mjs} +3 -3
  154. package/dist-esm/lib/ui/components/DefaultFollowingIndicator.mjs.map +7 -0
  155. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs +6 -6
  156. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.map +1 -1
  157. package/dist-esm/lib/ui/components/LanguageMenu.mjs +1 -0
  158. package/dist-esm/lib/ui/components/LanguageMenu.mjs.map +2 -2
  159. package/dist-esm/lib/ui/components/Minimap/DefaultMinimap.mjs +2 -1
  160. package/dist-esm/lib/ui/components/Minimap/DefaultMinimap.mjs.map +2 -2
  161. package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs +1 -2
  162. package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs.map +2 -2
  163. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs +14 -5
  164. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs.map +2 -2
  165. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +257 -320
  166. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
  167. package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs +135 -0
  168. package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs.map +7 -0
  169. package/dist-esm/lib/ui/components/StylePanel/StylePanelContext.mjs +48 -0
  170. package/dist-esm/lib/ui/components/StylePanel/StylePanelContext.mjs.map +7 -0
  171. package/dist-esm/lib/ui/components/StylePanel/{DoubleDropdownPicker.mjs → StylePanelDoubleDropdownPicker.mjs} +20 -19
  172. package/dist-esm/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.mjs.map +7 -0
  173. package/dist-esm/lib/ui/components/StylePanel/{DropdownPicker.mjs → StylePanelDropdownPicker.mjs} +21 -18
  174. package/dist-esm/lib/ui/components/StylePanel/StylePanelDropdownPicker.mjs.map +7 -0
  175. package/dist-esm/lib/ui/components/StylePanel/StylePanelSubheading.mjs +8 -0
  176. package/dist-esm/lib/ui/components/StylePanel/StylePanelSubheading.mjs.map +7 -0
  177. package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs +2 -0
  178. package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs.map +2 -2
  179. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs +38 -9
  180. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs.map +2 -2
  181. package/dist-esm/lib/ui/components/Toolbar/DefaultVideoToolbarContent.mjs +15 -3
  182. package/dist-esm/lib/ui/components/Toolbar/DefaultVideoToolbarContent.mjs.map +2 -2
  183. package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs +2 -1
  184. package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs.map +2 -2
  185. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs +1 -1
  186. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs.map +2 -2
  187. package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs +6 -2
  188. package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs.map +2 -2
  189. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs +11 -3
  190. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs.map +2 -2
  191. package/dist-esm/lib/ui/components/primitives/TldrawUiInput.mjs +6 -4
  192. package/dist-esm/lib/ui/components/primitives/TldrawUiInput.mjs.map +2 -2
  193. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs +18 -5
  194. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map +2 -2
  195. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +3 -0
  196. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
  197. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +76 -37
  198. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
  199. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs +3 -0
  200. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs.map +2 -2
  201. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +8 -8
  202. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
  203. package/dist-esm/lib/ui/context/actions.mjs +29 -10
  204. package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
  205. package/dist-esm/lib/ui/context/components.mjs +2 -0
  206. package/dist-esm/lib/ui/context/components.mjs.map +2 -2
  207. package/dist-esm/lib/ui/context/events.mjs.map +1 -1
  208. package/dist-esm/lib/ui/hooks/useClipboardEvents.mjs +1 -2
  209. package/dist-esm/lib/ui/hooks/useClipboardEvents.mjs.map +2 -2
  210. package/dist-esm/lib/ui/hooks/useExportAs.mjs +3 -2
  211. package/dist-esm/lib/ui/hooks/useExportAs.mjs.map +2 -2
  212. package/dist-esm/lib/ui/hooks/useTools.mjs +1 -1
  213. package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
  214. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +6 -2
  215. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
  216. package/dist-esm/lib/ui/kbd-utils.mjs +9 -3
  217. package/dist-esm/lib/ui/kbd-utils.mjs.map +2 -2
  218. package/dist-esm/lib/ui/version.mjs +3 -3
  219. package/dist-esm/lib/ui/version.mjs.map +1 -1
  220. package/dist-esm/lib/utils/export/copyAs.mjs +1 -2
  221. package/dist-esm/lib/utils/export/copyAs.mjs.map +2 -2
  222. package/dist-esm/lib/utils/export/export.mjs +0 -20
  223. package/dist-esm/lib/utils/export/export.mjs.map +2 -2
  224. package/dist-esm/lib/utils/export/exportAs.mjs +1 -2
  225. package/dist-esm/lib/utils/export/exportAs.mjs.map +2 -2
  226. package/package.json +3 -3
  227. package/src/index.ts +41 -22
  228. package/src/lib/Tldraw.tsx +15 -2
  229. package/src/lib/defaultExternalContentHandlers.ts +26 -4
  230. package/src/lib/shapes/arrow/ArrowShapeTool.test.ts +2 -2
  231. package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts +41 -0
  232. package/src/lib/shapes/arrow/arrowLabel.ts +8 -0
  233. package/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx +4 -5
  234. package/src/lib/shapes/frame/FrameShapeUtil.tsx +9 -0
  235. package/src/lib/shapes/frame/components/FrameLabelInput.tsx +10 -3
  236. package/src/lib/shapes/geo/GeoShapeUtil.tsx +1 -0
  237. package/src/lib/shapes/image/ImageShapeUtil.tsx +3 -0
  238. package/src/lib/shapes/note/NoteShapeUtil.tsx +1 -0
  239. package/src/lib/shapes/shared/HyperlinkButton.tsx +5 -5
  240. package/src/lib/shapes/shared/PlainTextLabel.tsx +0 -6
  241. package/src/lib/shapes/shared/useEditablePlainText.ts +3 -10
  242. package/src/lib/shapes/shared/useImageOrVideoAsset.ts +0 -7
  243. package/src/lib/shapes/text/PlainTextArea.tsx +4 -3
  244. package/src/lib/shapes/text/RichTextArea.tsx +3 -4
  245. package/src/lib/ui/TldrawUi.tsx +16 -10
  246. package/src/lib/ui/assetUrls.ts +13 -10
  247. package/src/lib/ui/components/A11y.tsx +1 -2
  248. package/src/lib/ui/components/{FollowingIndicator.tsx → DefaultFollowingIndicator.tsx} +2 -1
  249. package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +6 -6
  250. package/src/lib/ui/components/LanguageMenu.tsx +1 -0
  251. package/src/lib/ui/components/Minimap/DefaultMinimap.tsx +2 -1
  252. package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx +1 -2
  253. package/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx +27 -13
  254. package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +260 -381
  255. package/src/lib/ui/components/{primitives/TldrawUiButtonPicker.tsx → StylePanel/StylePanelButtonPicker.tsx} +70 -50
  256. package/src/lib/ui/components/StylePanel/StylePanelContext.tsx +63 -0
  257. package/src/lib/ui/components/StylePanel/{DoubleDropdownPicker.tsx → StylePanelDoubleDropdownPicker.tsx} +28 -19
  258. package/src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx +119 -0
  259. package/src/lib/ui/components/StylePanel/StylePanelSubheading.tsx +9 -0
  260. package/src/lib/ui/components/Toolbar/AltTextEditor.tsx +2 -0
  261. package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx +32 -15
  262. package/src/lib/ui/components/Toolbar/DefaultVideoToolbarContent.tsx +12 -4
  263. package/src/lib/ui/components/Toolbar/LinkEditor.tsx +1 -0
  264. package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx +1 -1
  265. package/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx +9 -2
  266. package/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx +7 -3
  267. package/src/lib/ui/components/primitives/TldrawUiInput.tsx +6 -3
  268. package/src/lib/ui/components/primitives/TldrawUiSlider.tsx +52 -32
  269. package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +5 -1
  270. package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +82 -30
  271. package/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx +4 -0
  272. package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +9 -9
  273. package/src/lib/ui/context/actions.tsx +36 -10
  274. package/src/lib/ui/context/components.tsx +3 -0
  275. package/src/lib/ui/context/events.tsx +1 -1
  276. package/src/lib/ui/hooks/useClipboardEvents.ts +1 -2
  277. package/src/lib/ui/hooks/useExportAs.ts +3 -2
  278. package/src/lib/ui/hooks/useTools.tsx +1 -1
  279. package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +4 -0
  280. package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +6 -2
  281. package/src/lib/ui/kbd-utils.ts +10 -3
  282. package/src/lib/ui/version.ts +3 -3
  283. package/src/lib/ui.css +29 -2
  284. package/src/lib/utils/export/copyAs.ts +1 -24
  285. package/src/lib/utils/export/export.ts +0 -36
  286. package/src/lib/utils/export/exportAs.ts +1 -32
  287. package/src/test/custom-clipping.test.ts +436 -0
  288. package/src/test/getCulledShapes.test.tsx +71 -2
  289. package/tldraw.css +45 -5
  290. package/dist-cjs/lib/ui/components/FollowingIndicator.js.map +0 -7
  291. package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js.map +0 -7
  292. package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js.map +0 -7
  293. package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js +0 -131
  294. package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js.map +0 -7
  295. package/dist-esm/lib/ui/components/FollowingIndicator.mjs.map +0 -7
  296. package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs.map +0 -7
  297. package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map +0 -7
  298. package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs +0 -115
  299. package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs.map +0 -7
  300. package/src/lib/ui/components/StylePanel/DropdownPicker.tsx +0 -110
@@ -68,7 +68,6 @@ import { TLClickEventInfo } from '@tldraw/editor';
68
68
  import { TLContent } from '@tldraw/editor';
69
69
  import { TLCropInfo } from '@tldraw/editor';
70
70
  import { TLDefaultColorStyle } from '@tldraw/editor';
71
- import { TLDefaultColorTheme } from '@tldraw/editor';
72
71
  import { TLDefaultColorThemeColor } from '@tldraw/editor';
73
72
  import { TLDefaultDashStyle } from '@tldraw/editor';
74
73
  import { TLDefaultFillStyle } from '@tldraw/editor';
@@ -193,9 +192,6 @@ export declare class ArrowBindingUtil extends BindingUtil<TLArrowBinding> {
193
192
  /** @public @react */
194
193
  export declare function ArrowDownToolbarItem(): JSX_2.Element;
195
194
 
196
- /** @public @react */
197
- export declare function ArrowheadStylePickerSet({ styles }: StylePickerSetProps): JSX_2.Element | null;
198
-
199
195
  /** @public @react */
200
196
  export declare function ArrowLeftToolbarItem(): JSX_2.Element;
201
197
 
@@ -500,9 +496,6 @@ export declare function CloudToolbarItem(): JSX_2.Element;
500
496
  /** @public @react */
501
497
  export declare function ColorSchemeMenu(): JSX_2.Element;
502
498
 
503
- /** @public @react */
504
- export declare function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps): JSX_2.Element;
505
-
506
499
  /**
507
500
  * Contains the size within the given box size
508
501
  *
@@ -534,14 +527,6 @@ export declare function ConvertToEmbedMenuItem(): JSX_2.Element | null;
534
527
  */
535
528
  export declare function copyAs(editor: Editor, ids: TLShapeId[], opts: CopyAsOptions): Promise<void>;
536
529
 
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
530
  /** @public @react */
546
531
  export declare function CopyAsMenuGroup(): JSX_2.Element;
547
532
 
@@ -853,6 +838,9 @@ export declare let defaultEditorAssetUrls: TLEditorAssetUrls;
853
838
  /** @public */
854
839
  export declare type DefaultEmbedDefinitionType = (typeof DEFAULT_EMBED_DEFINITIONS)[number]['type'];
855
840
 
841
+ /** @public @react */
842
+ export declare function DefaultFollowingIndicator(): JSX_2.Element | null;
843
+
856
844
  /** @public */
857
845
  export declare const DefaultFontFaces: TLDefaultFonts;
858
846
 
@@ -996,7 +984,7 @@ export declare function DefaultSharePanel(): JSX_2.Element;
996
984
  export declare const DefaultStylePanel: NamedExoticComponent<TLUiStylePanelProps>;
997
985
 
998
986
  /** @public @react */
999
- export declare function DefaultStylePanelContent({ styles }: TLUiStylePanelContentProps): JSX_2.Element | null;
987
+ export declare function DefaultStylePanelContent(): JSX_2.Element;
1000
988
 
1001
989
  /** @public @react */
1002
990
  export declare const DefaultToasts: NamedExoticComponent<object>;
@@ -1489,12 +1477,6 @@ export declare interface ExampleDialogProps {
1489
1477
  */
1490
1478
  export declare function exportAs(editor: Editor, ids: TLShapeId[], opts: ExportAsOptions): Promise<void>;
1491
1479
 
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
1480
  /** @public */
1499
1481
  export declare interface ExportAsOptions extends TLImageExportOptions {
1500
1482
  /** {@inheritdoc @tldraw/editor#TLImageExportOptions.format} */
@@ -1506,23 +1488,6 @@ export declare interface ExportAsOptions extends TLImageExportOptions {
1506
1488
  /** @public @react */
1507
1489
  export declare function ExportFileContentSubMenu(): JSX_2.Element;
1508
1490
 
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
1491
  /** @public @react */
1527
1492
  export declare function ExtrasGroup(): JSX_2.Element;
1528
1493
 
@@ -1579,6 +1544,7 @@ export declare class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
1579
1544
  canEdit(): boolean;
1580
1545
  canResize(): boolean;
1581
1546
  canResizeChildren(): boolean;
1547
+ isExportBoundsContainer(): boolean;
1582
1548
  getDefaultProps(): TLFrameShape['props'];
1583
1549
  getAriaDescriptor(shape: TLFrameShape): string;
1584
1550
  getGeometry(shape: TLFrameShape): Geometry2d;
@@ -1587,6 +1553,7 @@ export declare class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
1587
1553
  toSvg(shape: TLFrameShape, ctx: SvgExportContext): JSX_2.Element;
1588
1554
  indicator(shape: TLFrameShape): JSX_2.Element;
1589
1555
  providesBackgroundForChildren(): boolean;
1556
+ getClipPath(shape: TLFrameShape): Vec[];
1590
1557
  canReceiveNewChildrenOfType(shape: TLShape): boolean;
1591
1558
  onResize(shape: any, info: TLResizeInfo<any>): any;
1592
1559
  getInterpolatedProps(startShape: TLFrameShape, endShape: TLFrameShape, t: number): TLFrameShapeProps;
@@ -1735,9 +1702,6 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
1735
1702
  getInterpolatedProps(startShape: TLGeoShape, endShape: TLGeoShape, t: number): TLGeoShapeProps;
1736
1703
  }
1737
1704
 
1738
- /** @public @react */
1739
- export declare function GeoStylePickerSet({ styles }: StylePickerSetProps): JSX_2.Element | null;
1740
-
1741
1705
  /** @public */
1742
1706
  export declare function getArrowBindings(editor: Editor, shape: TLArrowShape): TLArrowBindings;
1743
1707
 
@@ -1898,6 +1862,7 @@ export declare class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
1898
1862
  static migrations: TLPropsMigrations;
1899
1863
  isAspectRatioLocked(): boolean;
1900
1864
  canCrop(): boolean;
1865
+ isExportBoundsContainer(): boolean;
1901
1866
  getDefaultProps(): TLImageShape['props'];
1902
1867
  getGeometry(shape: TLImageShape): Geometry2d;
1903
1868
  getAriaDescriptor(shape: TLImageShape): string;
@@ -2148,6 +2113,16 @@ export declare class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
2148
2113
  /** @public @react */
2149
2114
  export declare function NoteToolbarItem(): JSX_2.Element;
2150
2115
 
2116
+ /**
2117
+ * Checks if a file is allowed to be uploaded. If it is not, it will show a toast explaining why to the user.
2118
+ *
2119
+ * @param file - The file to check
2120
+ * @param options - The options for the external content handler
2121
+ * @returns True if the file is allowed, false otherwise
2122
+ * @public
2123
+ */
2124
+ export declare function notifyIfFileNotAllowed(file: File, options: TLDefaultExternalContentHandlerOpts): boolean;
2125
+
2151
2126
  /** @public @react */
2152
2127
  export declare function OfflineIndicator(): JSX_2.Element;
2153
2128
 
@@ -2174,9 +2149,6 @@ export declare interface OnDragFromToolbarToCreateShapesOpts {
2174
2149
  onDragEnd?(id: TLShapeId): void;
2175
2150
  }
2176
2151
 
2177
- /** @public @react */
2178
- export declare function OpacitySlider(): JSX_2.Element | null;
2179
-
2180
2152
  /** @public @react */
2181
2153
  export declare function OvalToolbarItem(): JSX_2.Element;
2182
2154
 
@@ -2568,9 +2540,6 @@ export declare interface SolidPathBuilderOpts extends BasePathBuilderOpts {
2568
2540
 
2569
2541
  /* Excluded from this release type: Spinner */
2570
2542
 
2571
- /** @public @react */
2572
- export declare function SplineStylePickerSet({ styles }: StylePickerSetProps): JSX_2.Element | null;
2573
-
2574
2543
  /** @public @react */
2575
2544
  export declare function StackMenuItems(): JSX_2.Element;
2576
2545
 
@@ -2628,11 +2597,124 @@ export declare interface StrokePoint {
2628
2597
  radius: number;
2629
2598
  }
2630
2599
 
2600
+ /** @public @react */
2601
+ export declare function StylePanelArrowheadPicker(): JSX_2.Element | null;
2602
+
2603
+ /** @public @react */
2604
+ export declare function StylePanelArrowKindPicker(): JSX_2.Element | null;
2605
+
2631
2606
  /** @public */
2632
- export declare interface StylePickerSetProps {
2607
+ export declare const StylePanelButtonPicker: <T extends string>(props: StylePanelButtonPickerProps<T>) => ReactElement;
2608
+
2609
+ /** @public */
2610
+ export declare interface StylePanelButtonPickerProps<T extends string> {
2611
+ title: string;
2612
+ uiType: string;
2613
+ style: StyleProp<T>;
2614
+ value: SharedStyle<T>;
2615
+ items: StyleValuesForUi<T>;
2616
+ onValueChange?(style: StyleProp<T>, value: T): void;
2617
+ onHistoryMark?(id: string): void;
2618
+ }
2619
+
2620
+ /** @public @react */
2621
+ export declare function StylePanelColorPicker(): JSX_2.Element | null;
2622
+
2623
+ /** @public */
2624
+ export declare interface StylePanelContext {
2633
2625
  styles: ReadonlySharedStyleMap;
2626
+ showUiLabels: boolean;
2627
+ onHistoryMark(id: string): void;
2628
+ onValueChange<T>(style: StyleProp<T>, value: T): void;
2634
2629
  }
2635
2630
 
2631
+ /** @public @react */
2632
+ export declare function StylePanelContextProvider({ children, styles }: StylePanelContextProviderProps): JSX_2.Element;
2633
+
2634
+ /** @public */
2635
+ export declare interface StylePanelContextProviderProps {
2636
+ children: React.ReactNode;
2637
+ styles: ReadonlySharedStyleMap;
2638
+ }
2639
+
2640
+ /** @public @react */
2641
+ export declare function StylePanelDashPicker(): JSX_2.Element | null;
2642
+
2643
+ /** @public @react */
2644
+ export declare const StylePanelDoubleDropdownPicker: <T extends string>(props: StylePanelDoubleDropdownPickerProps<T>) => React_2.JSX.Element;
2645
+
2646
+ /** @public */
2647
+ export declare interface StylePanelDoubleDropdownPickerProps<T extends string> {
2648
+ uiTypeA: string;
2649
+ uiTypeB: string;
2650
+ label: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
2651
+ labelA: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
2652
+ labelB: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
2653
+ itemsA: StyleValuesForUi<T>;
2654
+ itemsB: StyleValuesForUi<T>;
2655
+ styleA: StyleProp<T>;
2656
+ styleB: StyleProp<T>;
2657
+ valueA: SharedStyle<T>;
2658
+ valueB: SharedStyle<T>;
2659
+ onValueChange?(style: StyleProp<T>, value: T): void;
2660
+ }
2661
+
2662
+ /** @public @react */
2663
+ export declare const StylePanelDropdownPicker: <T extends string>(props: StylePanelDropdownPickerProps<T>) => React_2.JSX.Element;
2664
+
2665
+ /** @public */
2666
+ export declare interface StylePanelDropdownPickerProps<T extends string> {
2667
+ id: string;
2668
+ label?: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
2669
+ uiType: string;
2670
+ stylePanelType: string;
2671
+ style: StyleProp<T>;
2672
+ value: SharedStyle<T>;
2673
+ items: StyleValuesForUi<T>;
2674
+ type: 'icon' | 'menu' | 'tool';
2675
+ onValueChange?(style: StyleProp<T>, value: T): void;
2676
+ }
2677
+
2678
+ /** @public @react */
2679
+ export declare function StylePanelFillPicker(): JSX_2.Element | null;
2680
+
2681
+ /** @public @react */
2682
+ export declare function StylePanelFontPicker(): JSX_2.Element | null;
2683
+
2684
+ /** @public @react */
2685
+ export declare function StylePanelGeoShapePicker(): JSX_2.Element | null;
2686
+
2687
+ /** @public @react */
2688
+ export declare function StylePanelLabelAlignPicker(): JSX_2.Element | null;
2689
+
2690
+ /** @public @react */
2691
+ export declare function StylePanelOpacityPicker(): JSX_2.Element | null;
2692
+
2693
+ /** @public @react */
2694
+ export declare function StylePanelSection({ children }: StylePanelSectionProps): JSX_2.Element;
2695
+
2696
+ /** @public */
2697
+ export declare interface StylePanelSectionProps {
2698
+ children: React_3.ReactNode;
2699
+ }
2700
+
2701
+ /** @public @react */
2702
+ export declare function StylePanelSizePicker(): JSX_2.Element | null;
2703
+
2704
+ /** @public @react */
2705
+ export declare function StylePanelSplinePicker(): JSX_2.Element | null;
2706
+
2707
+ /** @public @react */
2708
+ export declare function StylePanelSubheading({ children }: StylePanelSubheadingProps): JSX_2.Element;
2709
+
2710
+ /** @public */
2711
+ export declare interface StylePanelSubheadingProps {
2712
+ children: React.ReactNode;
2713
+ }
2714
+
2715
+ /** @public @react */
2716
+ export declare function StylePanelTextAlignPicker(): JSX_2.Element | null;
2717
+
2636
2718
  /** @public */
2637
2719
  export declare type StyleValuesForUi<T> = readonly {
2638
2720
  readonly icon: string | TLUiIconJsx;
@@ -2672,12 +2754,6 @@ export declare interface TextAreaProps {
2672
2754
  */
2673
2755
  export declare const TextDirection: Extension<any, any>;
2674
2756
 
2675
- /**
2676
- * @deprecated Use `PlainTextLabel` instead.
2677
- * @public
2678
- */
2679
- export declare const TextLabel: React_3.NamedExoticComponent<PlainTextLabelProps>;
2680
-
2681
2757
  /** @public */
2682
2758
  export declare interface TextShapeOptions {
2683
2759
  /** How much addition padding should be added to the horizontal geometry of the shape when binding to an arrow? */
@@ -2755,18 +2831,9 @@ export declare class TextShapeUtil extends ShapeUtil<TLTextShape> {
2755
2831
  } | undefined;
2756
2832
  }
2757
2833
 
2758
- /** @public @react */
2759
- export declare function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps): JSX_2.Element | null;
2760
-
2761
2834
  /** @public @react */
2762
2835
  export declare function TextToolbarItem(): JSX_2.Element;
2763
2836
 
2764
- /** @public */
2765
- export declare interface ThemeStylePickerSetProps {
2766
- styles: ReadonlySharedStyleMap;
2767
- theme: TLDefaultColorTheme;
2768
- }
2769
-
2770
2837
  /**
2771
2838
  * Default extensions for the TipTap editor.
2772
2839
  *
@@ -3023,9 +3090,6 @@ export declare function TldrawUiButtonIcon({ icon, small, invertIcon }: TLUiButt
3023
3090
  /** @public @react */
3024
3091
  export declare function TldrawUiButtonLabel({ children }: TLUiButtonLabelProps): JSX_2.Element;
3025
3092
 
3026
- /** @public */
3027
- export declare const TldrawUiButtonPicker: <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement;
3028
-
3029
3093
  /**
3030
3094
  * A column, usually of UI controls like buttons, select dropdown, checkboxes, etc.
3031
3095
  *
@@ -3105,6 +3169,9 @@ export declare const TldrawUiGrid: ForwardRefExoticComponent<TLUiLayoutProps & R
3105
3169
  /** @public @react */
3106
3170
  export declare const TldrawUiIcon: NamedExoticComponent<TLUiIconProps>;
3107
3171
 
3172
+ /** @public @react */
3173
+ export declare function TldrawUiInFrontOfTheCanvas(): JSX_2.Element;
3174
+
3108
3175
  /** @public @react */
3109
3176
  export declare const TldrawUiInput: React_2.ForwardRefExoticComponent<TLUiInputProps & React_2.RefAttributes<HTMLInputElement>>;
3110
3177
 
@@ -3118,7 +3185,7 @@ export declare function TldrawUiMenuActionCheckboxItem({ actionId, ...rest }: TL
3118
3185
  export declare function TldrawUiMenuActionItem({ actionId, ...rest }: TLUiMenuActionItemProps): JSX_2.Element | null;
3119
3186
 
3120
3187
  /** @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;
3188
+ 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
3189
 
3123
3190
  /** @public @react */
3124
3191
  export declare function TldrawUiMenuContextProvider({ type, sourceId, children, }: TLUiMenuContextProviderProps): JSX_2.Element;
@@ -3202,7 +3269,7 @@ export declare const TldrawUiToolbar: React_3.ForwardRefExoticComponent<TLUiTool
3202
3269
  export declare const TldrawUiToolbarButton: React_3.ForwardRefExoticComponent<TLUiToolbarButtonProps & React_3.RefAttributes<HTMLButtonElement>>;
3203
3270
 
3204
3271
  /** @public @react */
3205
- export declare const TldrawUiToolbarToggleGroup: ({ children, className, type, ...props }: TLUiToolbarToggleGroupProps) => JSX_2.Element;
3272
+ export declare const TldrawUiToolbarToggleGroup: ({ children, className, type, asChild, ...props }: TLUiToolbarToggleGroupProps) => JSX_2.Element;
3206
3273
 
3207
3274
  /** @public @react */
3208
3275
  export declare const TldrawUiToolbarToggleItem: ({ children, className, type, value, tooltip, ...props }: TLUiToolbarToggleItemProps) => JSX_2.Element;
@@ -3389,18 +3456,6 @@ export declare interface TLUiButtonLabelProps {
3389
3456
  children?: ReactNode;
3390
3457
  }
3391
3458
 
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
3459
  /** @public */
3405
3460
  export declare interface TLUiButtonProps extends React_2.HTMLAttributes<HTMLButtonElement> {
3406
3461
  disabled?: boolean;
@@ -3435,6 +3490,7 @@ export declare interface TLUiComponents {
3435
3490
  Dialogs?: ComponentType | null;
3436
3491
  Toasts?: ComponentType | null;
3437
3492
  A11y?: ComponentType | null;
3493
+ FollowingIndicator?: ComponentType | null;
3438
3494
  }
3439
3495
 
3440
3496
  /** @public */
@@ -3760,7 +3816,7 @@ export declare interface TLUiEventMap {
3760
3816
  'flatten-to-image': null;
3761
3817
  'a11y-repeat-shape-announce': null;
3762
3818
  'open-url': {
3763
- url: string;
3819
+ destinationUrl: string;
3764
3820
  };
3765
3821
  'open-context-menu': null;
3766
3822
  'adjust-shape-styles': null;
@@ -3841,6 +3897,7 @@ export declare interface TLUiInputProps {
3841
3897
  shouldManuallyMaintainScrollPositionWhenFocused?: boolean;
3842
3898
  value?: string;
3843
3899
  'data-testid'?: string;
3900
+ 'aria-label'?: string;
3844
3901
  }
3845
3902
 
3846
3903
  /** @public */
@@ -3885,6 +3942,7 @@ export declare interface TLUiMenuCheckboxItemProps<TranslationKey extends string
3885
3942
  label?: {
3886
3943
  [key: string]: TranslationKey;
3887
3944
  } | TranslationKey;
3945
+ lang?: string;
3888
3946
  readonlyOk?: boolean;
3889
3947
  onSelect(source: TLUiEventSource): Promise<void> | void;
3890
3948
  toggle?: boolean;
@@ -4035,19 +4093,15 @@ export declare interface TLUiSliderProps {
4035
4093
  label: string;
4036
4094
  title: string;
4037
4095
  onValueChange(value: number): void;
4038
- onHistoryMark(id: string): void;
4096
+ onHistoryMark?(id: string): void;
4039
4097
  'data-testid'?: string;
4040
4098
  ariaValueModifier?: number;
4041
4099
  }
4042
4100
 
4043
- /** @public */
4044
- export declare interface TLUiStylePanelContentProps {
4045
- styles: ReturnType<typeof useRelevantStyles>;
4046
- }
4047
-
4048
4101
  /** @public */
4049
4102
  export declare interface TLUiStylePanelProps {
4050
4103
  isMobile?: boolean;
4104
+ styles?: null | ReadonlySharedStyleMap;
4051
4105
  children?: ReactNode;
4052
4106
  }
4053
4107
 
@@ -4116,6 +4170,7 @@ export declare interface TLUiToolbarToggleGroupProps extends React_3.HTMLAttribu
4116
4170
  value: any;
4117
4171
  defaultValue?: any;
4118
4172
  type: 'multiple' | 'single';
4173
+ asChild?: boolean;
4119
4174
  }
4120
4175
 
4121
4176
  /** @public */
@@ -4124,7 +4179,7 @@ export declare interface TLUiToolbarToggleItemProps extends React_3.HTMLAttribut
4124
4179
  className?: string;
4125
4180
  type: 'icon' | 'tool';
4126
4181
  value: string;
4127
- tooltip?: string;
4182
+ tooltip?: React_3.ReactNode;
4128
4183
  }
4129
4184
 
4130
4185
  /** @public */
@@ -4170,7 +4225,7 @@ export declare interface TLUiTranslation {
4170
4225
  export declare type TLUiTranslationContextType = TLUiTranslation;
4171
4226
 
4172
4227
  /** @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';
4228
+ 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
4229
 
4175
4230
  /** @public */
4176
4231
  export declare interface TLUiTranslationProviderProps {
@@ -4352,13 +4407,6 @@ export declare function useA11y(): TLUiA11yContextType;
4352
4407
  /** @public */
4353
4408
  export declare function useActions(): TLUiActionsContextType;
4354
4409
 
4355
- /**
4356
- * @deprecated Use {@link useImageOrVideoAsset} instead.
4357
- *
4358
- * @public
4359
- */
4360
- export declare const useAsset: typeof useImageOrVideoAsset;
4361
-
4362
4410
  /* Excluded from this release type: useAssetUrls */
4363
4411
 
4364
4412
  /** @public */
@@ -4413,7 +4461,11 @@ export declare function useDefaultHelpers(): {
4413
4461
  copy: (source: TLUiEventSource) => Promise<void>;
4414
4462
  copyAs: (ids: TLShapeId[], format?: TLCopyType) => void;
4415
4463
  cut: (source: TLUiEventSource) => Promise<void>;
4416
- exportAs: (ids: TLShapeId[], format: TLExportType | undefined, name: string | undefined) => void;
4464
+ exportAs: (ids: TLShapeId[], opts?: {
4465
+ format?: TLExportType;
4466
+ name?: string;
4467
+ scale?: number;
4468
+ }) => void;
4417
4469
  getEmbedDefinition: (url: string) => TLEmbedResult;
4418
4470
  insertMedia: () => Promise<void>;
4419
4471
  isMobile: boolean;
@@ -4435,7 +4487,9 @@ export declare function useEditablePlainText(shapeId: TLShapeId, type: string, t
4435
4487
  handleChange: ({ plaintext }: {
4436
4488
  plaintext: string;
4437
4489
  }) => void;
4438
- handleDoubleClick: (e: any) => any;
4490
+ handleDoubleClick: (e: {
4491
+ nativeEvent: Event;
4492
+ } | Event) => void;
4439
4493
  handleFocus: () => void;
4440
4494
  handleInputPointerDown: (e: React_3.PointerEvent) => void;
4441
4495
  handleKeyDown: (e: KeyboardEvent) => void;
@@ -4452,7 +4506,9 @@ export declare function useEditableRichText(shapeId: TLShapeId, type: string, ri
4452
4506
  handleChange: ({ richText }: {
4453
4507
  richText: TLRichText;
4454
4508
  }) => void;
4455
- handleDoubleClick: (e: any) => any;
4509
+ handleDoubleClick: (e: {
4510
+ nativeEvent: Event;
4511
+ } | Event) => void;
4456
4512
  handleFocus: () => void;
4457
4513
  handleInputPointerDown: (e: React.PointerEvent) => void;
4458
4514
  handleKeyDown: (e: KeyboardEvent) => void;
@@ -4463,14 +4519,12 @@ export declare function useEditableRichText(shapeId: TLShapeId, type: string, ri
4463
4519
  rInput: RefObject<HTMLDivElement>;
4464
4520
  };
4465
4521
 
4466
- /**
4467
- * @deprecated Use `useEditablePlainText` instead.
4468
- * @public
4469
- */
4470
- export declare const useEditableText: typeof useEditablePlainText;
4471
-
4472
4522
  /** @public */
4473
- export declare function useExportAs(): (ids: TLShapeId[], format: TLExportType | undefined, name: string | undefined) => void;
4523
+ export declare function useExportAs(): (ids: TLShapeId[], opts?: {
4524
+ format?: TLExportType;
4525
+ name?: string;
4526
+ scale?: number;
4527
+ }) => void;
4474
4528
 
4475
4529
  /**
4476
4530
  * This is a handy helper hook that resolves an asset to an optimized URL for a given shape, or its
@@ -4544,6 +4598,9 @@ export declare const useSelectedShapesAnnouncer: () => void;
4544
4598
  /** @public */
4545
4599
  export declare function useShowCollaborationUi(): boolean;
4546
4600
 
4601
+ /** @public */
4602
+ export declare function useStylePanelContext(): StylePanelContext;
4603
+
4547
4604
  /** @public */
4548
4605
  export declare function useTldrawUiComponents(): TLUiComponents;
4549
4606