tldraw 3.16.0-next.fe14f1b4181f → 4.0.1

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 (299) hide show
  1. package/dist-cjs/index.d.ts +232 -114
  2. package/dist-cjs/index.js +30 -15
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/lib/defaultExternalContentHandlers.js +10 -0
  5. package/dist-cjs/lib/defaultExternalContentHandlers.js.map +2 -2
  6. package/dist-cjs/lib/shapes/arrow/arrow-types.js.map +1 -1
  7. package/dist-cjs/lib/shapes/arrow/arrowLabel.js +6 -0
  8. package/dist-cjs/lib/shapes/arrow/arrowLabel.js.map +3 -3
  9. package/dist-cjs/lib/shapes/arrow/arrowTargetState.js +3 -2
  10. package/dist-cjs/lib/shapes/arrow/arrowTargetState.js.map +2 -2
  11. package/dist-cjs/lib/shapes/arrow/toolStates/Pointing.js +1 -1
  12. package/dist-cjs/lib/shapes/arrow/toolStates/Pointing.js.map +2 -2
  13. package/dist-cjs/lib/shapes/bookmark/BookmarkShapeUtil.js +4 -4
  14. package/dist-cjs/lib/shapes/bookmark/BookmarkShapeUtil.js.map +2 -2
  15. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +5 -1
  16. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
  17. package/dist-cjs/lib/shapes/frame/components/FrameLabelInput.js +8 -2
  18. package/dist-cjs/lib/shapes/frame/components/FrameLabelInput.js.map +2 -2
  19. package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js +1 -0
  20. package/dist-cjs/lib/shapes/geo/GeoShapeUtil.js.map +2 -2
  21. package/dist-cjs/lib/shapes/note/NoteShapeUtil.js +2 -1
  22. package/dist-cjs/lib/shapes/note/NoteShapeUtil.js.map +2 -2
  23. package/dist-cjs/lib/shapes/shared/HyperlinkButton.js +4 -4
  24. package/dist-cjs/lib/shapes/shared/HyperlinkButton.js.map +2 -2
  25. package/dist-cjs/lib/shapes/shared/PlainTextLabel.js +1 -3
  26. package/dist-cjs/lib/shapes/shared/PlainTextLabel.js.map +2 -2
  27. package/dist-cjs/lib/shapes/shared/useEditablePlainText.js +3 -5
  28. package/dist-cjs/lib/shapes/shared/useEditablePlainText.js.map +2 -2
  29. package/dist-cjs/lib/shapes/shared/useImageOrVideoAsset.js +0 -2
  30. package/dist-cjs/lib/shapes/shared/useImageOrVideoAsset.js.map +2 -2
  31. package/dist-cjs/lib/shapes/text/PlainTextArea.js +3 -2
  32. package/dist-cjs/lib/shapes/text/PlainTextArea.js.map +2 -2
  33. package/dist-cjs/lib/shapes/text/RichTextArea.js +3 -3
  34. package/dist-cjs/lib/shapes/text/RichTextArea.js.map +2 -2
  35. package/dist-cjs/lib/tools/SelectTool/childStates/DraggingHandle.js +3 -1
  36. package/dist-cjs/lib/tools/SelectTool/childStates/DraggingHandle.js.map +2 -2
  37. package/dist-cjs/lib/ui/components/A11y.js +1 -1
  38. package/dist-cjs/lib/ui/components/A11y.js.map +2 -2
  39. package/dist-cjs/lib/ui/components/AccessibilityMenu.js +1 -1
  40. package/dist-cjs/lib/ui/components/AccessibilityMenu.js.map +2 -2
  41. package/dist-cjs/lib/ui/components/InputModeMenu.js +77 -0
  42. package/dist-cjs/lib/ui/components/InputModeMenu.js.map +7 -0
  43. package/dist-cjs/lib/ui/components/LanguageMenu.js +1 -0
  44. package/dist-cjs/lib/ui/components/LanguageMenu.js.map +2 -2
  45. package/dist-cjs/lib/ui/components/MainMenu/DefaultMainMenuContent.js +6 -2
  46. package/dist-cjs/lib/ui/components/MainMenu/DefaultMainMenuContent.js.map +2 -2
  47. package/dist-cjs/lib/ui/components/Minimap/DefaultMinimap.js +2 -1
  48. package/dist-cjs/lib/ui/components/Minimap/DefaultMinimap.js.map +2 -2
  49. package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js +1 -1
  50. package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js.map +2 -2
  51. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js +13 -6
  52. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js.map +2 -2
  53. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +255 -316
  54. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
  55. package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js +147 -0
  56. package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js.map +7 -0
  57. package/dist-cjs/lib/ui/components/StylePanel/StylePanelContext.js +70 -0
  58. package/dist-cjs/lib/ui/components/StylePanel/StylePanelContext.js.map +7 -0
  59. package/dist-cjs/lib/ui/components/StylePanel/{DoubleDropdownPicker.js → StylePanelDoubleDropdownPicker.js} +23 -22
  60. package/dist-cjs/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.js.map +7 -0
  61. package/dist-cjs/lib/ui/components/StylePanel/{DropdownPicker.js → StylePanelDropdownPicker.js} +23 -20
  62. package/dist-cjs/lib/ui/components/StylePanel/StylePanelDropdownPicker.js.map +7 -0
  63. package/dist-cjs/lib/ui/components/StylePanel/StylePanelSubheading.js +28 -0
  64. package/dist-cjs/lib/ui/components/StylePanel/StylePanelSubheading.js.map +7 -0
  65. package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js +2 -0
  66. package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js.map +2 -2
  67. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js +38 -9
  68. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map +2 -2
  69. package/dist-cjs/lib/ui/components/Toolbar/DefaultVideoToolbarContent.js +15 -3
  70. package/dist-cjs/lib/ui/components/Toolbar/DefaultVideoToolbarContent.js.map +2 -2
  71. package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js +2 -1
  72. package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js.map +2 -2
  73. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js +1 -1
  74. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js.map +2 -2
  75. package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js +6 -2
  76. package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js.map +2 -2
  77. package/dist-cjs/lib/ui/components/menu-items.js +6 -4
  78. package/dist-cjs/lib/ui/components/menu-items.js.map +2 -2
  79. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js +11 -2
  80. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js.map +2 -2
  81. package/dist-cjs/lib/ui/components/primitives/TldrawUiInput.js +5 -3
  82. package/dist-cjs/lib/ui/components/primitives/TldrawUiInput.js.map +2 -2
  83. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js +13 -2
  84. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map +2 -2
  85. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +3 -0
  86. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
  87. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +75 -20
  88. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
  89. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.js +3 -0
  90. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.js.map +2 -2
  91. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +8 -8
  92. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
  93. package/dist-cjs/lib/ui/context/actions.js +18 -33
  94. package/dist-cjs/lib/ui/context/actions.js.map +2 -2
  95. package/dist-cjs/lib/ui/context/events.js.map +2 -2
  96. package/dist-cjs/lib/ui/hooks/useClipboardEvents.js +1 -1
  97. package/dist-cjs/lib/ui/hooks/useClipboardEvents.js.map +2 -2
  98. package/dist-cjs/lib/ui/hooks/useExportAs.js +3 -2
  99. package/dist-cjs/lib/ui/hooks/useExportAs.js.map +2 -2
  100. package/dist-cjs/lib/ui/hooks/useTools.js +1 -1
  101. package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
  102. package/dist-cjs/lib/ui/hooks/useTranslation/TLUiTranslationKey.js.map +1 -1
  103. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js +12 -3
  104. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +2 -2
  105. package/dist-cjs/lib/ui/version.js +4 -4
  106. package/dist-cjs/lib/ui/version.js.map +1 -1
  107. package/dist-cjs/lib/utils/export/copyAs.js +1 -2
  108. package/dist-cjs/lib/utils/export/copyAs.js.map +2 -2
  109. package/dist-cjs/lib/utils/export/export.js +0 -20
  110. package/dist-cjs/lib/utils/export/export.js.map +2 -2
  111. package/dist-cjs/lib/utils/export/exportAs.js +1 -2
  112. package/dist-cjs/lib/utils/export/exportAs.js.map +2 -2
  113. package/dist-esm/index.d.mts +232 -114
  114. package/dist-esm/index.mjs +61 -30
  115. package/dist-esm/index.mjs.map +2 -2
  116. package/dist-esm/lib/defaultExternalContentHandlers.mjs +10 -0
  117. package/dist-esm/lib/defaultExternalContentHandlers.mjs.map +2 -2
  118. package/dist-esm/lib/shapes/arrow/arrowLabel.mjs +6 -0
  119. package/dist-esm/lib/shapes/arrow/arrowLabel.mjs.map +3 -3
  120. package/dist-esm/lib/shapes/arrow/arrowTargetState.mjs +3 -2
  121. package/dist-esm/lib/shapes/arrow/arrowTargetState.mjs.map +2 -2
  122. package/dist-esm/lib/shapes/arrow/toolStates/Pointing.mjs +1 -1
  123. package/dist-esm/lib/shapes/arrow/toolStates/Pointing.mjs.map +2 -2
  124. package/dist-esm/lib/shapes/bookmark/BookmarkShapeUtil.mjs +4 -5
  125. package/dist-esm/lib/shapes/bookmark/BookmarkShapeUtil.mjs.map +2 -2
  126. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +5 -1
  127. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
  128. package/dist-esm/lib/shapes/frame/components/FrameLabelInput.mjs +9 -3
  129. package/dist-esm/lib/shapes/frame/components/FrameLabelInput.mjs.map +2 -2
  130. package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs +1 -0
  131. package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs.map +2 -2
  132. package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs +2 -1
  133. package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs.map +2 -2
  134. package/dist-esm/lib/shapes/shared/HyperlinkButton.mjs +5 -5
  135. package/dist-esm/lib/shapes/shared/HyperlinkButton.mjs.map +2 -2
  136. package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs +1 -3
  137. package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs.map +2 -2
  138. package/dist-esm/lib/shapes/shared/useEditablePlainText.mjs +3 -6
  139. package/dist-esm/lib/shapes/shared/useEditablePlainText.mjs.map +2 -2
  140. package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs +0 -2
  141. package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs.map +2 -2
  142. package/dist-esm/lib/shapes/text/PlainTextArea.mjs +4 -3
  143. package/dist-esm/lib/shapes/text/PlainTextArea.mjs.map +2 -2
  144. package/dist-esm/lib/shapes/text/RichTextArea.mjs +3 -4
  145. package/dist-esm/lib/shapes/text/RichTextArea.mjs.map +2 -2
  146. package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs +3 -1
  147. package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs.map +2 -2
  148. package/dist-esm/lib/ui/components/A11y.mjs +1 -2
  149. package/dist-esm/lib/ui/components/A11y.mjs.map +2 -2
  150. package/dist-esm/lib/ui/components/AccessibilityMenu.mjs +3 -3
  151. package/dist-esm/lib/ui/components/AccessibilityMenu.mjs.map +2 -2
  152. package/dist-esm/lib/ui/components/InputModeMenu.mjs +57 -0
  153. package/dist-esm/lib/ui/components/InputModeMenu.mjs.map +7 -0
  154. package/dist-esm/lib/ui/components/LanguageMenu.mjs +1 -0
  155. package/dist-esm/lib/ui/components/LanguageMenu.mjs.map +2 -2
  156. package/dist-esm/lib/ui/components/MainMenu/DefaultMainMenuContent.mjs +6 -2
  157. package/dist-esm/lib/ui/components/MainMenu/DefaultMainMenuContent.mjs.map +2 -2
  158. package/dist-esm/lib/ui/components/Minimap/DefaultMinimap.mjs +2 -1
  159. package/dist-esm/lib/ui/components/Minimap/DefaultMinimap.mjs.map +2 -2
  160. package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs +1 -2
  161. package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs.map +2 -2
  162. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs +18 -7
  163. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs.map +2 -2
  164. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +257 -320
  165. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
  166. package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs +135 -0
  167. package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs.map +7 -0
  168. package/dist-esm/lib/ui/components/StylePanel/StylePanelContext.mjs +50 -0
  169. package/dist-esm/lib/ui/components/StylePanel/StylePanelContext.mjs.map +7 -0
  170. package/dist-esm/lib/ui/components/StylePanel/{DoubleDropdownPicker.mjs → StylePanelDoubleDropdownPicker.mjs} +20 -19
  171. package/dist-esm/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.mjs.map +7 -0
  172. package/dist-esm/lib/ui/components/StylePanel/{DropdownPicker.mjs → StylePanelDropdownPicker.mjs} +20 -17
  173. package/dist-esm/lib/ui/components/StylePanel/StylePanelDropdownPicker.mjs.map +7 -0
  174. package/dist-esm/lib/ui/components/StylePanel/StylePanelSubheading.mjs +8 -0
  175. package/dist-esm/lib/ui/components/StylePanel/StylePanelSubheading.mjs.map +7 -0
  176. package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs +2 -0
  177. package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs.map +2 -2
  178. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs +38 -9
  179. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs.map +2 -2
  180. package/dist-esm/lib/ui/components/Toolbar/DefaultVideoToolbarContent.mjs +15 -3
  181. package/dist-esm/lib/ui/components/Toolbar/DefaultVideoToolbarContent.mjs.map +2 -2
  182. package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs +2 -1
  183. package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs.map +2 -2
  184. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs +1 -1
  185. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs.map +2 -2
  186. package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs +6 -2
  187. package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs.map +2 -2
  188. package/dist-esm/lib/ui/components/menu-items.mjs +6 -4
  189. package/dist-esm/lib/ui/components/menu-items.mjs.map +2 -2
  190. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs +11 -3
  191. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs.map +2 -2
  192. package/dist-esm/lib/ui/components/primitives/TldrawUiInput.mjs +6 -4
  193. package/dist-esm/lib/ui/components/primitives/TldrawUiInput.mjs.map +2 -2
  194. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs +13 -2
  195. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map +2 -2
  196. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +3 -0
  197. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
  198. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +76 -20
  199. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
  200. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs +3 -0
  201. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs.map +2 -2
  202. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +8 -8
  203. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
  204. package/dist-esm/lib/ui/context/actions.mjs +18 -33
  205. package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
  206. package/dist-esm/lib/ui/context/events.mjs.map +2 -2
  207. package/dist-esm/lib/ui/hooks/useClipboardEvents.mjs +1 -2
  208. package/dist-esm/lib/ui/hooks/useClipboardEvents.mjs.map +2 -2
  209. package/dist-esm/lib/ui/hooks/useExportAs.mjs +3 -2
  210. package/dist-esm/lib/ui/hooks/useExportAs.mjs.map +2 -2
  211. package/dist-esm/lib/ui/hooks/useTools.mjs +1 -1
  212. package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
  213. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +12 -3
  214. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
  215. package/dist-esm/lib/ui/version.mjs +4 -4
  216. package/dist-esm/lib/ui/version.mjs.map +1 -1
  217. package/dist-esm/lib/utils/export/copyAs.mjs +1 -2
  218. package/dist-esm/lib/utils/export/copyAs.mjs.map +2 -2
  219. package/dist-esm/lib/utils/export/export.mjs +0 -20
  220. package/dist-esm/lib/utils/export/export.mjs.map +2 -2
  221. package/dist-esm/lib/utils/export/exportAs.mjs +1 -2
  222. package/dist-esm/lib/utils/export/exportAs.mjs.map +2 -2
  223. package/package.json +3 -3
  224. package/src/index.ts +46 -22
  225. package/src/lib/defaultExternalContentHandlers.ts +14 -0
  226. package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts +83 -13
  227. package/src/lib/shapes/arrow/ArrowShapeTool.test.ts +99 -5
  228. package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts +41 -0
  229. package/src/lib/shapes/arrow/arrow-types.ts +3 -5
  230. package/src/lib/shapes/arrow/arrowLabel.ts +8 -0
  231. package/src/lib/shapes/arrow/arrowTargetState.ts +34 -3
  232. package/src/lib/shapes/arrow/toolStates/Pointing.tsx +1 -1
  233. package/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx +4 -5
  234. package/src/lib/shapes/frame/FrameShapeUtil.tsx +5 -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/note/NoteShapeUtil.tsx +1 -0
  238. package/src/lib/shapes/shared/HyperlinkButton.tsx +5 -5
  239. package/src/lib/shapes/shared/PlainTextLabel.tsx +0 -6
  240. package/src/lib/shapes/shared/useEditablePlainText.ts +3 -10
  241. package/src/lib/shapes/shared/useImageOrVideoAsset.ts +0 -7
  242. package/src/lib/shapes/text/PlainTextArea.tsx +4 -3
  243. package/src/lib/shapes/text/RichTextArea.tsx +3 -4
  244. package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx +6 -2
  245. package/src/lib/ui/components/A11y.tsx +1 -2
  246. package/src/lib/ui/components/AccessibilityMenu.tsx +2 -2
  247. package/src/lib/ui/components/InputModeMenu.tsx +65 -0
  248. package/src/lib/ui/components/LanguageMenu.tsx +1 -0
  249. package/src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx +3 -3
  250. package/src/lib/ui/components/Minimap/DefaultMinimap.tsx +2 -1
  251. package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx +1 -2
  252. package/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx +30 -14
  253. package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +262 -381
  254. package/src/lib/ui/components/{primitives/TldrawUiButtonPicker.tsx → StylePanel/StylePanelButtonPicker.tsx} +70 -50
  255. package/src/lib/ui/components/StylePanel/StylePanelContext.tsx +65 -0
  256. package/src/lib/ui/components/StylePanel/{DoubleDropdownPicker.tsx → StylePanelDoubleDropdownPicker.tsx} +28 -19
  257. package/src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx +119 -0
  258. package/src/lib/ui/components/StylePanel/StylePanelSubheading.tsx +9 -0
  259. package/src/lib/ui/components/Toolbar/AltTextEditor.tsx +2 -0
  260. package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx +32 -15
  261. package/src/lib/ui/components/Toolbar/DefaultVideoToolbarContent.tsx +12 -4
  262. package/src/lib/ui/components/Toolbar/LinkEditor.tsx +1 -0
  263. package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx +1 -1
  264. package/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx +9 -2
  265. package/src/lib/ui/components/menu-items.tsx +5 -3
  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 +19 -4
  269. package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +5 -1
  270. package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +75 -14
  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 +25 -35
  274. package/src/lib/ui/context/events.tsx +3 -2
  275. package/src/lib/ui/hooks/useClipboardEvents.ts +1 -2
  276. package/src/lib/ui/hooks/useExportAs.ts +3 -2
  277. package/src/lib/ui/hooks/useTools.tsx +1 -1
  278. package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +11 -2
  279. package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +12 -3
  280. package/src/lib/ui/version.ts +4 -4
  281. package/src/lib/ui.css +41 -4
  282. package/src/lib/utils/export/copyAs.ts +1 -24
  283. package/src/lib/utils/export/export.ts +0 -36
  284. package/src/lib/utils/export/exportAs.ts +1 -32
  285. package/src/test/TestEditor.ts +8 -2
  286. package/src/test/commands/setCamera.test.ts +13 -0
  287. package/src/test/custom-clipping.test.ts +436 -0
  288. package/src/test/frames.test.ts +15 -0
  289. package/src/test/getCulledShapes.test.tsx +71 -2
  290. package/tldraw.css +49 -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/StylePanel/DoubleDropdownPicker.mjs.map +0 -7
  296. package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map +0 -7
  297. package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs +0 -115
  298. package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs.map +0 -7
  299. 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
 
@@ -999,7 +1030,7 @@ export declare function DefaultSharePanel(): JSX_2.Element;
999
1030
  export declare const DefaultStylePanel: NamedExoticComponent<TLUiStylePanelProps>;
1000
1031
 
1001
1032
  /** @public @react */
1002
- export declare function DefaultStylePanelContent({ styles }: TLUiStylePanelContentProps): JSX_2.Element | null;
1033
+ export declare function DefaultStylePanelContent(): JSX_2.Element;
1003
1034
 
1004
1035
  /** @public @react */
1005
1036
  export declare const DefaultToasts: NamedExoticComponent<object>;
@@ -1492,12 +1523,6 @@ export declare interface ExampleDialogProps {
1492
1523
  */
1493
1524
  export declare function exportAs(editor: Editor, ids: TLShapeId[], opts: ExportAsOptions): Promise<void>;
1494
1525
 
1495
- /**
1496
- * @deprecated The format & name parameters are now part of the opts object.
1497
- * @public
1498
- */
1499
- export declare function exportAs(editor: Editor, ids: TLShapeId[], format?: TLExportType, name?: string, opts?: TLImageExportOptions): Promise<void>;
1500
-
1501
1526
  /** @public */
1502
1527
  export declare interface ExportAsOptions extends TLImageExportOptions {
1503
1528
  /** {@inheritdoc @tldraw/editor#TLImageExportOptions.format} */
@@ -1509,23 +1534,6 @@ export declare interface ExportAsOptions extends TLImageExportOptions {
1509
1534
  /** @public @react */
1510
1535
  export declare function ExportFileContentSubMenu(): JSX_2.Element;
1511
1536
 
1512
- /**
1513
- * Export the given shapes as a blob.
1514
- * @param editor - The editor instance.
1515
- * @param ids - The ids of the shapes to export.
1516
- * @param format - The format to export as.
1517
- * @param opts - Rendering options.
1518
- * @returns A promise that resolves to a blob.
1519
- * @deprecated Use {@link @tldraw/editor#Editor.toImage} instead.
1520
- * @public
1521
- */
1522
- export declare function exportToBlob({ editor, ids, format, opts, }: {
1523
- editor: Editor;
1524
- format: TLExportType;
1525
- ids: TLShapeId[];
1526
- opts?: TLImageExportOptions;
1527
- }): Promise<Blob>;
1528
-
1529
1537
  /** @public @react */
1530
1538
  export declare function ExtrasGroup(): JSX_2.Element;
1531
1539
 
@@ -1591,6 +1599,7 @@ export declare class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
1591
1599
  toSvg(shape: TLFrameShape, ctx: SvgExportContext): JSX_2.Element;
1592
1600
  indicator(shape: TLFrameShape): JSX_2.Element;
1593
1601
  providesBackgroundForChildren(): boolean;
1602
+ getClipPath(shape: TLFrameShape): Vec[];
1594
1603
  canReceiveNewChildrenOfType(shape: TLShape): boolean;
1595
1604
  onResize(shape: any, info: TLResizeInfo<any>): any;
1596
1605
  getInterpolatedProps(startShape: TLFrameShape, endShape: TLFrameShape, t: number): TLFrameShapeProps;
@@ -1739,15 +1748,20 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
1739
1748
  getInterpolatedProps(startShape: TLGeoShape, endShape: TLGeoShape, t: number): TLGeoShapeProps;
1740
1749
  }
1741
1750
 
1742
- /** @public @react */
1743
- export declare function GeoStylePickerSet({ styles }: StylePickerSetProps): JSX_2.Element | null;
1744
-
1745
1751
  /** @public */
1746
1752
  export declare function getArrowBindings(editor: Editor, shape: TLArrowShape): TLArrowBindings;
1747
1753
 
1748
1754
  /** @public */
1749
1755
  export declare function getArrowInfo(editor: Editor, shape: TLArrowShape | TLShapeId): TLArrowInfo | undefined;
1750
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
+
1751
1765
  /** @public */
1752
1766
  export declare function getArrowTerminalsInArrowSpace(editor: Editor, shape: TLArrowShape, bindings: TLArrowBindings): {
1753
1767
  end: Vec;
@@ -2189,9 +2203,6 @@ export declare interface OnDragFromToolbarToCreateShapesOpts {
2189
2203
  onDragEnd?(id: TLShapeId): void;
2190
2204
  }
2191
2205
 
2192
- /** @public @react */
2193
- export declare function OpacitySlider(): JSX_2.Element | null;
2194
-
2195
2206
  /** @public @react */
2196
2207
  export declare function OvalToolbarItem(): JSX_2.Element;
2197
2208
 
@@ -2583,9 +2594,6 @@ export declare interface SolidPathBuilderOpts extends BasePathBuilderOpts {
2583
2594
 
2584
2595
  /* Excluded from this release type: Spinner */
2585
2596
 
2586
- /** @public @react */
2587
- export declare function SplineStylePickerSet({ styles }: StylePickerSetProps): JSX_2.Element | null;
2588
-
2589
2597
  /** @public @react */
2590
2598
  export declare function StackMenuItems(): JSX_2.Element;
2591
2599
 
@@ -2643,11 +2651,124 @@ export declare interface StrokePoint {
2643
2651
  radius: number;
2644
2652
  }
2645
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
+
2646
2663
  /** @public */
2647
- export declare interface StylePickerSetProps {
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
+
2677
+ /** @public */
2678
+ export declare interface StylePanelContext {
2648
2679
  styles: ReadonlySharedStyleMap;
2680
+ enhancedA11yMode: boolean;
2681
+ onHistoryMark(id: string): void;
2682
+ onValueChange<T>(style: StyleProp<T>, value: T): void;
2649
2683
  }
2650
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;
2753
+ }
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
+
2651
2772
  /** @public */
2652
2773
  export declare type StyleValuesForUi<T> = readonly {
2653
2774
  readonly icon: string | TLUiIconJsx;
@@ -2687,12 +2808,6 @@ export declare interface TextAreaProps {
2687
2808
  */
2688
2809
  export declare const TextDirection: Extension<any, any>;
2689
2810
 
2690
- /**
2691
- * @deprecated Use `PlainTextLabel` instead.
2692
- * @public
2693
- */
2694
- export declare const TextLabel: React_3.NamedExoticComponent<PlainTextLabelProps>;
2695
-
2696
2811
  /** @public */
2697
2812
  export declare interface TextShapeOptions {
2698
2813
  /** How much addition padding should be added to the horizontal geometry of the shape when binding to an arrow? */
@@ -2770,18 +2885,9 @@ export declare class TextShapeUtil extends ShapeUtil<TLTextShape> {
2770
2885
  } | undefined;
2771
2886
  }
2772
2887
 
2773
- /** @public @react */
2774
- export declare function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps): JSX_2.Element | null;
2775
-
2776
2888
  /** @public @react */
2777
2889
  export declare function TextToolbarItem(): JSX_2.Element;
2778
2890
 
2779
- /** @public */
2780
- export declare interface ThemeStylePickerSetProps {
2781
- styles: ReadonlySharedStyleMap;
2782
- theme: TLDefaultColorTheme;
2783
- }
2784
-
2785
2891
  /**
2786
2892
  * Default extensions for the TipTap editor.
2787
2893
  *
@@ -3038,9 +3144,6 @@ export declare function TldrawUiButtonIcon({ icon, small, invertIcon }: TLUiButt
3038
3144
  /** @public @react */
3039
3145
  export declare function TldrawUiButtonLabel({ children }: TLUiButtonLabelProps): JSX_2.Element;
3040
3146
 
3041
- /** @public */
3042
- export declare const TldrawUiButtonPicker: <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement;
3043
-
3044
3147
  /**
3045
3148
  * A column, usually of UI controls like buttons, select dropdown, checkboxes, etc.
3046
3149
  *
@@ -3136,7 +3239,7 @@ export declare function TldrawUiMenuActionCheckboxItem({ actionId, ...rest }: TL
3136
3239
  export declare function TldrawUiMenuActionItem({ actionId, ...rest }: TLUiMenuActionItemProps): JSX_2.Element | null;
3137
3240
 
3138
3241
  /** @public @react */
3139
- 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;
3140
3243
 
3141
3244
  /** @public @react */
3142
3245
  export declare function TldrawUiMenuContextProvider({ type, sourceId, children, }: TLUiMenuContextProviderProps): JSX_2.Element;
@@ -3220,7 +3323,7 @@ export declare const TldrawUiToolbar: React_3.ForwardRefExoticComponent<TLUiTool
3220
3323
  export declare const TldrawUiToolbarButton: React_3.ForwardRefExoticComponent<TLUiToolbarButtonProps & React_3.RefAttributes<HTMLButtonElement>>;
3221
3324
 
3222
3325
  /** @public @react */
3223
- 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;
3224
3327
 
3225
3328
  /** @public @react */
3226
3329
  export declare const TldrawUiToolbarToggleItem: ({ children, className, type, value, tooltip, ...props }: TLUiToolbarToggleItemProps) => JSX_2.Element;
@@ -3407,18 +3510,6 @@ export declare interface TLUiButtonLabelProps {
3407
3510
  children?: ReactNode;
3408
3511
  }
3409
3512
 
3410
- /** @public */
3411
- export declare interface TLUiButtonPickerProps<T extends string> {
3412
- title: string;
3413
- uiType: string;
3414
- style: StyleProp<T>;
3415
- value: SharedStyle<T>;
3416
- items: StyleValuesForUi<T>;
3417
- theme: TLDefaultColorTheme;
3418
- onValueChange(style: StyleProp<T>, value: T): void;
3419
- onHistoryMark?(id: string): void;
3420
- }
3421
-
3422
3513
  /** @public */
3423
3514
  export declare interface TLUiButtonProps extends React_2.HTMLAttributes<HTMLButtonElement> {
3424
3515
  disabled?: boolean;
@@ -3755,13 +3846,16 @@ export declare interface TLUiEventMap {
3755
3846
  'toggle-grid-mode': null;
3756
3847
  'toggle-wrap-mode': null;
3757
3848
  'toggle-focus-mode': null;
3849
+ 'input-mode': {
3850
+ value: string;
3851
+ };
3758
3852
  'toggle-debug-mode': null;
3759
3853
  'toggle-dynamic-size-mode': null;
3760
3854
  'toggle-paste-at-cursor': null;
3761
3855
  'toggle-lock': null;
3762
3856
  'toggle-reduce-motion': null;
3763
3857
  'toggle-keyboard-shortcuts': null;
3764
- 'toggle-ui-labels': null;
3858
+ 'enhanced-a11y-mode': null;
3765
3859
  'toggle-edge-scrolling': null;
3766
3860
  'color-scheme': {
3767
3861
  value: string;
@@ -3779,7 +3873,7 @@ export declare interface TLUiEventMap {
3779
3873
  'flatten-to-image': null;
3780
3874
  'a11y-repeat-shape-announce': null;
3781
3875
  'open-url': {
3782
- url: string;
3876
+ destinationUrl: string;
3783
3877
  };
3784
3878
  'open-context-menu': null;
3785
3879
  'adjust-shape-styles': null;
@@ -3860,6 +3954,7 @@ export declare interface TLUiInputProps {
3860
3954
  shouldManuallyMaintainScrollPositionWhenFocused?: boolean;
3861
3955
  value?: string;
3862
3956
  'data-testid'?: string;
3957
+ 'aria-label'?: string;
3863
3958
  }
3864
3959
 
3865
3960
  /** @public */
@@ -3904,6 +3999,7 @@ export declare interface TLUiMenuCheckboxItemProps<TranslationKey extends string
3904
3999
  label?: {
3905
4000
  [key: string]: TranslationKey;
3906
4001
  } | TranslationKey;
4002
+ lang?: string;
3907
4003
  readonlyOk?: boolean;
3908
4004
  onSelect(source: TLUiEventSource): Promise<void> | void;
3909
4005
  toggle?: boolean;
@@ -4054,19 +4150,15 @@ export declare interface TLUiSliderProps {
4054
4150
  label: string;
4055
4151
  title: string;
4056
4152
  onValueChange(value: number): void;
4057
- onHistoryMark(id: string): void;
4153
+ onHistoryMark?(id: string): void;
4058
4154
  'data-testid'?: string;
4059
4155
  ariaValueModifier?: number;
4060
4156
  }
4061
4157
 
4062
- /** @public */
4063
- export declare interface TLUiStylePanelContentProps {
4064
- styles: ReturnType<typeof useRelevantStyles>;
4065
- }
4066
-
4067
4158
  /** @public */
4068
4159
  export declare interface TLUiStylePanelProps {
4069
4160
  isMobile?: boolean;
4161
+ styles?: null | ReadonlySharedStyleMap;
4070
4162
  children?: ReactNode;
4071
4163
  }
4072
4164
 
@@ -4135,6 +4227,7 @@ export declare interface TLUiToolbarToggleGroupProps extends React_3.HTMLAttribu
4135
4227
  value: any;
4136
4228
  defaultValue?: any;
4137
4229
  type: 'multiple' | 'single';
4230
+ asChild?: boolean;
4138
4231
  }
4139
4232
 
4140
4233
  /** @public */
@@ -4143,7 +4236,7 @@ export declare interface TLUiToolbarToggleItemProps extends React_3.HTMLAttribut
4143
4236
  className?: string;
4144
4237
  type: 'icon' | 'tool';
4145
4238
  value: string;
4146
- tooltip?: string;
4239
+ tooltip?: React_3.ReactNode;
4147
4240
  }
4148
4241
 
4149
4242
  /** @public */
@@ -4189,7 +4282,7 @@ export declare interface TLUiTranslation {
4189
4282
  export declare type TLUiTranslationContextType = TLUiTranslation;
4190
4283
 
4191
4284
  /** @public */
4192
- export declare type TLUiTranslationKey = 'a11y.adjust-shape-styles' | 'a11y.enlarge-shape' | 'a11y.enter-leave-container' | 'a11y.move-shape-faster' | 'a11y.move-shape' | 'a11y.multiple-shapes' | 'a11y.open-context-menu' | 'a11y.open-keyboard-shortcuts' | 'a11y.pan-camera' | 'a11y.repeat-shape' | 'a11y.rotate-shape-ccw-fine' | 'a11y.rotate-shape-ccw' | 'a11y.rotate-shape-cw-fine' | 'a11y.rotate-shape-cw' | 'a11y.select-shape-direction' | 'a11y.select-shape' | 'a11y.shape-image' | 'a11y.shape-index' | 'a11y.shape-video' | 'a11y.shrink-shape' | 'a11y.skip-to-main-content' | 'a11y.status' | 'action.align-bottom' | 'action.align-center-horizontal.short' | 'action.align-center-horizontal' | 'action.align-center-vertical.short' | 'action.align-center-vertical' | 'action.align-left' | 'action.align-right' | 'action.align-top' | 'action.back-to-content' | 'action.bring-forward' | 'action.bring-to-front' | 'action.convert-to-bookmark' | 'action.convert-to-embed' | 'action.copy-as-png.short' | 'action.copy-as-png' | 'action.copy-as-svg.short' | 'action.copy-as-svg' | 'action.copy' | 'action.cut' | 'action.delete' | 'action.distribute-horizontal.short' | 'action.distribute-horizontal' | 'action.distribute-vertical.short' | 'action.distribute-vertical' | 'action.download-original' | 'action.duplicate' | 'action.edit-link' | 'action.exit-pen-mode' | 'action.export-all-as-png.short' | 'action.export-all-as-png' | 'action.export-all-as-svg.short' | 'action.export-all-as-svg' | 'action.export-as-png.short' | 'action.export-as-png' | 'action.export-as-svg.short' | 'action.export-as-svg' | 'action.fit-frame-to-content' | 'action.flatten-to-image' | 'action.flip-horizontal.short' | 'action.flip-horizontal' | 'action.flip-vertical.short' | 'action.flip-vertical' | 'action.fork-project-on-tldraw' | 'action.fork-project' | 'action.group' | 'action.insert-embed' | 'action.insert-media' | 'action.leave-shared-project' | 'action.new-project' | 'action.new-shared-project' | 'action.open-cursor-chat' | 'action.open-embed-link' | 'action.open-file' | 'action.open-kbd-shortcuts' | 'action.pack' | 'action.paste-error-description' | 'action.paste-error-title' | 'action.paste' | 'action.print' | 'action.redo' | 'action.remove-frame' | 'action.rename' | 'action.rotate-ccw' | 'action.rotate-cw' | 'action.save-copy' | 'action.select-all' | 'action.select-none' | 'action.send-backward' | 'action.send-to-back' | 'action.share-project' | 'action.stack-horizontal.short' | 'action.stack-horizontal' | 'action.stack-vertical.short' | 'action.stack-vertical' | 'action.stop-following' | 'action.stretch-horizontal.short' | 'action.stretch-horizontal' | 'action.stretch-vertical.short' | 'action.stretch-vertical' | 'action.toggle-auto-size' | 'action.toggle-dark-mode.menu' | 'action.toggle-dark-mode' | 'action.toggle-debug-mode.menu' | 'action.toggle-debug-mode' | 'action.toggle-dynamic-size-mode.menu' | 'action.toggle-dynamic-size-mode' | 'action.toggle-edge-scrolling.menu' | 'action.toggle-edge-scrolling' | 'action.toggle-focus-mode.menu' | 'action.toggle-focus-mode' | 'action.toggle-grid.menu' | 'action.toggle-grid' | 'action.toggle-keyboard-shortcuts.menu' | 'action.toggle-keyboard-shortcuts' | 'action.toggle-lock' | 'action.toggle-paste-at-cursor.menu' | 'action.toggle-paste-at-cursor' | 'action.toggle-reduce-motion.menu' | 'action.toggle-reduce-motion' | 'action.toggle-snap-mode.menu' | 'action.toggle-snap-mode' | 'action.toggle-tool-lock.menu' | 'action.toggle-tool-lock' | 'action.toggle-transparent.context-menu' | 'action.toggle-transparent.menu' | 'action.toggle-transparent' | 'action.toggle-ui-labels.menu' | 'action.toggle-ui-labels' | 'action.toggle-wrap-mode.menu' | 'action.toggle-wrap-mode' | 'action.undo' | 'action.ungroup' | 'action.unlock-all' | 'action.zoom-in' | 'action.zoom-out' | 'action.zoom-to-100' | 'action.zoom-to-fit' | 'action.zoom-to-selection' | 'actions-menu.title' | 'align-style.end' | 'align-style.justify' | 'align-style.middle' | 'align-style.start' | 'app.loading' | 'arrow-kind-style.arc' | 'arrow-kind-style.elbow' | 'arrowheadEnd-style.arrow' | 'arrowheadEnd-style.bar' | 'arrowheadEnd-style.diamond' | 'arrowheadEnd-style.dot' | 'arrowheadEnd-style.inverted' | 'arrowheadEnd-style.none' | 'arrowheadEnd-style.pipe' | 'arrowheadEnd-style.square' | 'arrowheadEnd-style.triangle' | 'arrowheadStart-style.arrow' | 'arrowheadStart-style.bar' | 'arrowheadStart-style.diamond' | 'arrowheadStart-style.dot' | 'arrowheadStart-style.inverted' | 'arrowheadStart-style.none' | 'arrowheadStart-style.pipe' | 'arrowheadStart-style.square' | 'arrowheadStart-style.triangle' | 'assets.files.amount-too-many' | 'assets.files.size-too-big' | 'assets.files.type-not-allowed' | 'assets.files.upload-failed' | 'assets.url.failed' | 'color-style.black' | 'color-style.blue' | 'color-style.green' | 'color-style.grey' | 'color-style.light-blue' | 'color-style.light-green' | 'color-style.light-red' | 'color-style.light-violet' | 'color-style.orange' | 'color-style.red' | 'color-style.violet' | 'color-style.white' | 'color-style.yellow' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.edit' | 'context-menu.export-all-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context-menu.title' | 'context.pages.new-page' | 'cursor-chat.type-to-chat' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'document-name-menu.copy-link' | 'document.default-name' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.external-link' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | 'embed-dialog.back' | 'embed-dialog.cancel' | 'embed-dialog.create' | 'embed-dialog.instruction' | 'embed-dialog.invalid-url' | 'embed-dialog.title' | 'embed-dialog.url' | 'file-system.confirm-clear.cancel' | 'file-system.confirm-clear.continue' | 'file-system.confirm-clear.description' | 'file-system.confirm-clear.dont-show-again' | 'file-system.confirm-clear.title' | 'file-system.confirm-open.cancel' | 'file-system.confirm-open.description' | 'file-system.confirm-open.dont-show-again' | 'file-system.confirm-open.open' | 'file-system.confirm-open.title' | 'file-system.file-open-error.file-format-version-too-new' | 'file-system.file-open-error.generic-corrupted-file' | 'file-system.file-open-error.not-a-tldraw-file' | 'file-system.file-open-error.title' | 'file-system.shared-document-file-open-error.description' | 'file-system.shared-document-file-open-error.title' | 'fill-style.fill' | 'fill-style.none' | 'fill-style.pattern' | 'fill-style.semi' | 'fill-style.solid' | 'focus-mode.toggle-focus-mode' | 'font-style.draw' | 'font-style.mono' | 'font-style.sans' | 'font-style.serif' | 'geo-style.arrow-down' | 'geo-style.arrow-left' | 'geo-style.arrow-right' | 'geo-style.arrow-up' | 'geo-style.check-box' | 'geo-style.cloud' | 'geo-style.diamond' | 'geo-style.ellipse' | 'geo-style.heart' | 'geo-style.hexagon' | 'geo-style.octagon' | 'geo-style.oval' | 'geo-style.pentagon' | 'geo-style.rectangle' | 'geo-style.rhombus-2' | 'geo-style.rhombus' | 'geo-style.star' | 'geo-style.trapezoid' | 'geo-style.triangle' | 'geo-style.x-box' | 'handle.crop.bottom-left' | 'handle.crop.bottom-right' | 'handle.crop.bottom' | 'handle.crop.left' | 'handle.crop.right' | 'handle.crop.top-left' | 'handle.crop.top-right' | 'handle.crop.top' | 'handle.resize-bottom-left' | 'handle.resize-bottom-right' | 'handle.resize-bottom' | 'handle.resize-left' | 'handle.resize-right' | 'handle.resize-top-left' | 'handle.resize-top-right' | 'handle.resize-top' | 'handle.rotate.bottom_left_rotate' | 'handle.rotate.bottom_right_rotate' | 'handle.rotate.mobile_rotate' | 'handle.rotate.top_left_rotate' | 'handle.rotate.top_right_rotate' | 'help-menu.about' | 'help-menu.discord' | 'help-menu.github' | 'help-menu.import-tldr-file' | 'help-menu.keyboard-shortcuts' | 'help-menu.privacy' | 'help-menu.terms' | 'help-menu.title' | 'help-menu.twitter' | 'menu.accessibility' | 'menu.copy-as' | 'menu.edit' | 'menu.export-as' | 'menu.file' | 'menu.language' | 'menu.preferences' | 'menu.theme' | 'menu.title' | 'menu.view' | 'navigation-zone.minimap' | 'navigation-zone.title' | 'navigation-zone.toggle-minimap' | 'navigation-zone.zoom' | 'opacity-style.0.1' | 'opacity-style.0.25' | 'opacity-style.0.5' | 'opacity-style.0.75' | 'opacity-style.1' | 'page-menu.create-new-page' | 'page-menu.edit-done' | 'page-menu.edit-start' | 'page-menu.go-to-page' | 'page-menu.max-page-count-reached' | 'page-menu.new-page-initial-name' | 'page-menu.submenu.delete' | 'page-menu.submenu.duplicate-page' | 'page-menu.submenu.move-down' | 'page-menu.submenu.move-up' | 'page-menu.submenu.rename' | 'page-menu.submenu.title' | 'page-menu.title' | 'people-menu.anonymous-user' | 'people-menu.avatar-color' | 'people-menu.change-color' | 'people-menu.change-name' | 'people-menu.follow' | 'people-menu.following' | 'people-menu.invite' | 'people-menu.leading' | 'people-menu.title' | 'people-menu.user' | 'share-menu.copied' | 'share-menu.copy-link-note' | 'share-menu.copy-link' | 'share-menu.copy-readonly-link-note' | 'share-menu.copy-readonly-link' | 'share-menu.create-snapshot-link' | 'share-menu.creating-project' | 'share-menu.fork-note' | 'share-menu.offline-note' | 'share-menu.project-too-large' | 'share-menu.save-note' | 'share-menu.share-project' | 'share-menu.snapshot-link-note' | 'share-menu.title' | 'share-menu.upload-failed' | 'sharing.confirm-leave.cancel' | 'sharing.confirm-leave.description' | 'sharing.confirm-leave.dont-show-again' | 'sharing.confirm-leave.leave' | 'sharing.confirm-leave.title' | 'shortcuts-dialog.a11y' | 'shortcuts-dialog.collaboration' | 'shortcuts-dialog.edit' | 'shortcuts-dialog.file' | 'shortcuts-dialog.preferences' | 'shortcuts-dialog.text-formatting' | 'shortcuts-dialog.title' | 'shortcuts-dialog.tools' | 'shortcuts-dialog.transform' | 'shortcuts-dialog.view' | 'size-style.l' | 'size-style.m' | 'size-style.s' | 'size-style.xl' | 'spline-style.cubic' | 'spline-style.line' | 'status.offline' | 'style-panel.align' | 'style-panel.arrow-kind' | 'style-panel.arrowhead-end' | 'style-panel.arrowhead-start' | 'style-panel.arrowheads' | 'style-panel.color' | 'style-panel.dash' | 'style-panel.fill' | 'style-panel.font' | 'style-panel.geo' | 'style-panel.label-align' | 'style-panel.mixed' | 'style-panel.opacity' | 'style-panel.position' | 'style-panel.size' | 'style-panel.spline' | 'style-panel.title' | 'style-panel.vertical-align' | 'theme.dark' | 'theme.light' | 'theme.system' | 'toast.close' | 'toast.error.copy-fail.desc' | 'toast.error.copy-fail.title' | 'toast.error.export-fail.desc' | 'toast.error.export-fail.title' | 'toast.error' | 'toast.info' | 'toast.success' | 'toast.warning' | 'tool-panel.more' | 'tool-panel.title' | 'tool.arrow-down' | 'tool.arrow-left' | 'tool.arrow-right' | 'tool.arrow-up' | 'tool.arrow' | 'tool.aspect-ratio.circle' | 'tool.aspect-ratio.landscape' | 'tool.aspect-ratio.original' | 'tool.aspect-ratio.portrait' | 'tool.aspect-ratio.square' | 'tool.aspect-ratio.wide' | 'tool.aspect-ratio' | 'tool.bookmark' | 'tool.check-box' | 'tool.cloud' | 'tool.diamond' | 'tool.draw' | 'tool.ellipse' | 'tool.embed' | 'tool.eraser' | 'tool.flip-horz' | 'tool.flip-vert' | 'tool.frame' | 'tool.hand' | 'tool.heart' | 'tool.hexagon' | 'tool.highlight' | 'tool.image-crop' | 'tool.image-toolbar-title' | 'tool.image-zoom' | 'tool.laser' | 'tool.line' | 'tool.media-alt-text-confirm' | 'tool.media-alt-text-desc' | 'tool.media-alt-text' | 'tool.media' | 'tool.note' | 'tool.octagon' | 'tool.oval' | 'tool.pentagon' | 'tool.pointer-down' | 'tool.rectangle' | 'tool.replace-media' | 'tool.rhombus' | 'tool.rich-text-bold' | 'tool.rich-text-bulletList' | 'tool.rich-text-code' | 'tool.rich-text-header' | 'tool.rich-text-highlight' | 'tool.rich-text-italic' | 'tool.rich-text-link-remove' | 'tool.rich-text-link-visit' | 'tool.rich-text-link' | 'tool.rich-text-orderedList' | 'tool.rich-text-strikethrough' | 'tool.rich-text-toolbar-title' | 'tool.rotate-cw' | 'tool.select' | 'tool.star' | 'tool.text' | 'tool.trapezoid' | 'tool.triangle' | 'tool.x-box' | 'ui.checked' | 'ui.close' | 'ui.unchecked' | 'verticalAlign-style.end' | 'verticalAlign-style.middle' | 'verticalAlign-style.start' | 'vscode.file-open.backup-failed' | 'vscode.file-open.backup-saved' | 'vscode.file-open.backup' | 'vscode.file-open.desc' | 'vscode.file-open.dont-show-again' | 'vscode.file-open.open';
4285
+ 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.enhanced-a11y-mode.menu' | 'action.enhanced-a11y-mode' | '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-none' | 'action.toggle-auto-pan' | 'action.toggle-auto-size' | 'action.toggle-auto-zoom' | '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-mouse' | '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-trackpad' | 'action.toggle-transparent.context-menu' | 'action.toggle-transparent.menu' | 'action.toggle-transparent' | 'action.toggle-wrap-mode.menu' | 'action.toggle-wrap-mode' | 'action.undo' | 'action.ungroup' | 'action.unlock-all' | 'action.zoom-in' | 'action.zoom-out' | 'action.zoom-to-100' | 'action.zoom-to-fit' | 'action.zoom-to-selection' | 'actions-menu.title' | 'align-style.end' | 'align-style.justify' | 'align-style.middle' | 'align-style.start' | 'app.loading' | 'arrow-kind-style.arc' | 'arrow-kind-style.elbow' | 'arrowheadEnd-style.arrow' | 'arrowheadEnd-style.bar' | 'arrowheadEnd-style.diamond' | 'arrowheadEnd-style.dot' | 'arrowheadEnd-style.inverted' | 'arrowheadEnd-style.none' | 'arrowheadEnd-style.pipe' | 'arrowheadEnd-style.square' | 'arrowheadEnd-style.triangle' | 'arrowheadStart-style.arrow' | 'arrowheadStart-style.bar' | 'arrowheadStart-style.diamond' | 'arrowheadStart-style.dot' | 'arrowheadStart-style.inverted' | 'arrowheadStart-style.none' | 'arrowheadStart-style.pipe' | 'arrowheadStart-style.square' | 'arrowheadStart-style.triangle' | 'assets.files.amount-too-many' | 'assets.files.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.input-mode' | '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';
4193
4286
 
4194
4287
  /** @public */
4195
4288
  export declare interface TLUiTranslationProviderProps {
@@ -4295,6 +4388,9 @@ export declare function ToggleDynamicSizeModeItem(): JSX_2.Element;
4295
4388
  /** @public @react */
4296
4389
  export declare function ToggleEdgeScrollingItem(): JSX_2.Element;
4297
4390
 
4391
+ /** @public @react */
4392
+ export declare function ToggleEnhancedA11yModeItem(): JSX_2.Element;
4393
+
4298
4394
  /** @public @react */
4299
4395
  export declare function ToggleFocusModeItem(): JSX_2.Element;
4300
4396
 
@@ -4330,9 +4426,6 @@ export declare function ToggleToolLockItem(): JSX_2.Element;
4330
4426
  /** @public @react */
4331
4427
  export declare function ToggleTransparentBgMenuItem(): JSX_2.Element;
4332
4428
 
4333
- /** @public @react */
4334
- export declare function ToggleUiLabelsItem(): JSX_2.Element;
4335
-
4336
4429
  /** @public @react */
4337
4430
  export declare function ToggleWrapModeItem(): JSX_2.Element;
4338
4431
 
@@ -4365,18 +4458,34 @@ export declare function UnlockAllMenuItem(): JSX_2.Element;
4365
4458
  /** @public */
4366
4459
  export declare function unwrapLabel(label?: TLUiActionItem['label'], menuType?: string): string | undefined;
4367
4460
 
4368
- /** @public */
4369
- export declare function useA11y(): TLUiA11yContextType;
4370
-
4371
- /** @public */
4372
- export declare function useActions(): TLUiActionsContextType;
4461
+ /**
4462
+ * Update the current arrow target state for an editor. See {@link ArrowTargetState} for more
4463
+ * information.
4464
+ *
4465
+ * @public
4466
+ */
4467
+ export declare function updateArrowTargetState({ editor, pointInPageSpace, arrow, isPrecise, currentBinding, oppositeBinding, }: UpdateArrowTargetStateOpts): ArrowTargetState | null;
4373
4468
 
4374
4469
  /**
4375
- * @deprecated Use {@link useImageOrVideoAsset} instead.
4470
+ * Options passed to {@link updateArrowTargetState}.
4376
4471
  *
4377
4472
  * @public
4378
4473
  */
4379
- export declare const useAsset: typeof useImageOrVideoAsset;
4474
+ export declare interface UpdateArrowTargetStateOpts {
4475
+ editor: Editor;
4476
+ pointInPageSpace: VecLike;
4477
+ arrow: TLArrowShape | undefined;
4478
+ isPrecise: boolean;
4479
+ currentBinding: TLArrowBinding | undefined;
4480
+ /** The binding from the opposite end of the arrow, if one exists. */
4481
+ oppositeBinding: TLArrowBinding | undefined;
4482
+ }
4483
+
4484
+ /** @public */
4485
+ export declare function useA11y(): TLUiA11yContextType;
4486
+
4487
+ /** @public */
4488
+ export declare function useActions(): TLUiActionsContextType;
4380
4489
 
4381
4490
  /* Excluded from this release type: useAssetUrls */
4382
4491
 
@@ -4432,7 +4541,11 @@ export declare function useDefaultHelpers(): {
4432
4541
  copy: (source: TLUiEventSource) => Promise<void>;
4433
4542
  copyAs: (ids: TLShapeId[], format?: TLCopyType) => void;
4434
4543
  cut: (source: TLUiEventSource) => Promise<void>;
4435
- exportAs: (ids: TLShapeId[], format: TLExportType | undefined, name: string | undefined) => void;
4544
+ exportAs: (ids: TLShapeId[], opts?: {
4545
+ format?: TLExportType;
4546
+ name?: string;
4547
+ scale?: number;
4548
+ }) => void;
4436
4549
  getEmbedDefinition: (url: string) => TLEmbedResult;
4437
4550
  insertMedia: () => Promise<void>;
4438
4551
  isMobile: boolean;
@@ -4454,7 +4567,9 @@ export declare function useEditablePlainText(shapeId: TLShapeId, type: string, t
4454
4567
  handleChange: ({ plaintext }: {
4455
4568
  plaintext: string;
4456
4569
  }) => void;
4457
- handleDoubleClick: (e: any) => any;
4570
+ handleDoubleClick: (e: {
4571
+ nativeEvent: Event;
4572
+ } | Event) => void;
4458
4573
  handleFocus: () => void;
4459
4574
  handleInputPointerDown: (e: React_3.PointerEvent) => void;
4460
4575
  handleKeyDown: (e: KeyboardEvent) => void;
@@ -4471,7 +4586,9 @@ export declare function useEditableRichText(shapeId: TLShapeId, type: string, ri
4471
4586
  handleChange: ({ richText }: {
4472
4587
  richText: TLRichText;
4473
4588
  }) => void;
4474
- handleDoubleClick: (e: any) => any;
4589
+ handleDoubleClick: (e: {
4590
+ nativeEvent: Event;
4591
+ } | Event) => void;
4475
4592
  handleFocus: () => void;
4476
4593
  handleInputPointerDown: (e: React.PointerEvent) => void;
4477
4594
  handleKeyDown: (e: KeyboardEvent) => void;
@@ -4482,14 +4599,12 @@ export declare function useEditableRichText(shapeId: TLShapeId, type: string, ri
4482
4599
  rInput: RefObject<HTMLDivElement>;
4483
4600
  };
4484
4601
 
4485
- /**
4486
- * @deprecated Use `useEditablePlainText` instead.
4487
- * @public
4488
- */
4489
- export declare const useEditableText: typeof useEditablePlainText;
4490
-
4491
4602
  /** @public */
4492
- export declare function useExportAs(): (ids: TLShapeId[], format: TLExportType | undefined, name: string | undefined) => void;
4603
+ export declare function useExportAs(): (ids: TLShapeId[], opts?: {
4604
+ format?: TLExportType;
4605
+ name?: string;
4606
+ scale?: number;
4607
+ }) => void;
4493
4608
 
4494
4609
  /**
4495
4610
  * This is a handy helper hook that resolves an asset to an optimized URL for a given shape, or its
@@ -4563,6 +4678,9 @@ export declare const useSelectedShapesAnnouncer: () => void;
4563
4678
  /** @public */
4564
4679
  export declare function useShowCollaborationUi(): boolean;
4565
4680
 
4681
+ /** @public */
4682
+ export declare function useStylePanelContext(): StylePanelContext;
4683
+
4566
4684
  /** @public */
4567
4685
  export declare function useTldrawUiComponents(): TLUiComponents;
4568
4686