tldraw 3.16.0-canary.f56a36d13420 → 3.16.0-canary.f5bf2b535ea7

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 (274) hide show
  1. package/dist-cjs/index.d.ts +223 -109
  2. package/dist-cjs/index.js +29 -14
  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 +2 -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/LanguageMenu.js +1 -0
  40. package/dist-cjs/lib/ui/components/LanguageMenu.js.map +2 -2
  41. package/dist-cjs/lib/ui/components/Minimap/DefaultMinimap.js +2 -1
  42. package/dist-cjs/lib/ui/components/Minimap/DefaultMinimap.js.map +2 -2
  43. package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js +1 -1
  44. package/dist-cjs/lib/ui/components/PageMenu/DefaultPageMenu.js.map +2 -2
  45. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js +9 -4
  46. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js.map +2 -2
  47. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +255 -316
  48. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
  49. package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js +147 -0
  50. package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js.map +7 -0
  51. package/dist-cjs/lib/ui/components/StylePanel/StylePanelContext.js +68 -0
  52. package/dist-cjs/lib/ui/components/StylePanel/StylePanelContext.js.map +7 -0
  53. package/dist-cjs/lib/ui/components/StylePanel/{DoubleDropdownPicker.js → StylePanelDoubleDropdownPicker.js} +23 -22
  54. package/dist-cjs/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.js.map +7 -0
  55. package/dist-cjs/lib/ui/components/StylePanel/{DropdownPicker.js → StylePanelDropdownPicker.js} +23 -20
  56. package/dist-cjs/lib/ui/components/StylePanel/StylePanelDropdownPicker.js.map +7 -0
  57. package/dist-cjs/lib/ui/components/StylePanel/StylePanelSubheading.js +28 -0
  58. package/dist-cjs/lib/ui/components/StylePanel/StylePanelSubheading.js.map +7 -0
  59. package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js +2 -0
  60. package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js.map +2 -2
  61. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js +38 -9
  62. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map +2 -2
  63. package/dist-cjs/lib/ui/components/Toolbar/DefaultVideoToolbarContent.js +15 -3
  64. package/dist-cjs/lib/ui/components/Toolbar/DefaultVideoToolbarContent.js.map +2 -2
  65. package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js +2 -1
  66. package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js.map +2 -2
  67. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js +1 -1
  68. package/dist-cjs/lib/ui/components/Toolbar/OverflowingToolbar.js.map +2 -2
  69. package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js +6 -2
  70. package/dist-cjs/lib/ui/components/Toolbar/ToggleToolLockedButton.js.map +2 -2
  71. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js +11 -2
  72. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js.map +2 -2
  73. package/dist-cjs/lib/ui/components/primitives/TldrawUiInput.js +5 -3
  74. package/dist-cjs/lib/ui/components/primitives/TldrawUiInput.js.map +2 -2
  75. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js +18 -5
  76. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map +2 -2
  77. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +3 -0
  78. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
  79. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +47 -3
  80. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
  81. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.js +3 -0
  82. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.js.map +2 -2
  83. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +8 -8
  84. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
  85. package/dist-cjs/lib/ui/context/actions.js +13 -8
  86. package/dist-cjs/lib/ui/context/actions.js.map +2 -2
  87. package/dist-cjs/lib/ui/hooks/useClipboardEvents.js +1 -1
  88. package/dist-cjs/lib/ui/hooks/useClipboardEvents.js.map +2 -2
  89. package/dist-cjs/lib/ui/hooks/useExportAs.js +3 -2
  90. package/dist-cjs/lib/ui/hooks/useExportAs.js.map +2 -2
  91. package/dist-cjs/lib/ui/hooks/useTools.js +1 -1
  92. package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
  93. package/dist-cjs/lib/ui/hooks/useTranslation/TLUiTranslationKey.js.map +1 -1
  94. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js +5 -2
  95. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +2 -2
  96. package/dist-cjs/lib/ui/version.js +3 -3
  97. package/dist-cjs/lib/ui/version.js.map +1 -1
  98. package/dist-cjs/lib/utils/export/copyAs.js +1 -2
  99. package/dist-cjs/lib/utils/export/copyAs.js.map +2 -2
  100. package/dist-cjs/lib/utils/export/export.js +0 -20
  101. package/dist-cjs/lib/utils/export/export.js.map +2 -2
  102. package/dist-cjs/lib/utils/export/exportAs.js +1 -2
  103. package/dist-cjs/lib/utils/export/exportAs.js.map +2 -2
  104. package/dist-esm/index.d.mts +223 -109
  105. package/dist-esm/index.mjs +59 -28
  106. package/dist-esm/index.mjs.map +2 -2
  107. package/dist-esm/lib/defaultExternalContentHandlers.mjs +10 -0
  108. package/dist-esm/lib/defaultExternalContentHandlers.mjs.map +2 -2
  109. package/dist-esm/lib/shapes/arrow/arrowLabel.mjs +6 -0
  110. package/dist-esm/lib/shapes/arrow/arrowLabel.mjs.map +3 -3
  111. package/dist-esm/lib/shapes/arrow/arrowTargetState.mjs +3 -2
  112. package/dist-esm/lib/shapes/arrow/arrowTargetState.mjs.map +2 -2
  113. package/dist-esm/lib/shapes/arrow/toolStates/Pointing.mjs +1 -1
  114. package/dist-esm/lib/shapes/arrow/toolStates/Pointing.mjs.map +2 -2
  115. package/dist-esm/lib/shapes/bookmark/BookmarkShapeUtil.mjs +4 -5
  116. package/dist-esm/lib/shapes/bookmark/BookmarkShapeUtil.mjs.map +2 -2
  117. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +2 -1
  118. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
  119. package/dist-esm/lib/shapes/frame/components/FrameLabelInput.mjs +9 -3
  120. package/dist-esm/lib/shapes/frame/components/FrameLabelInput.mjs.map +2 -2
  121. package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs +1 -0
  122. package/dist-esm/lib/shapes/geo/GeoShapeUtil.mjs.map +2 -2
  123. package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs +2 -1
  124. package/dist-esm/lib/shapes/note/NoteShapeUtil.mjs.map +2 -2
  125. package/dist-esm/lib/shapes/shared/HyperlinkButton.mjs +5 -5
  126. package/dist-esm/lib/shapes/shared/HyperlinkButton.mjs.map +2 -2
  127. package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs +1 -3
  128. package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs.map +2 -2
  129. package/dist-esm/lib/shapes/shared/useEditablePlainText.mjs +3 -6
  130. package/dist-esm/lib/shapes/shared/useEditablePlainText.mjs.map +2 -2
  131. package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs +0 -2
  132. package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs.map +2 -2
  133. package/dist-esm/lib/shapes/text/PlainTextArea.mjs +4 -3
  134. package/dist-esm/lib/shapes/text/PlainTextArea.mjs.map +2 -2
  135. package/dist-esm/lib/shapes/text/RichTextArea.mjs +3 -4
  136. package/dist-esm/lib/shapes/text/RichTextArea.mjs.map +2 -2
  137. package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs +3 -1
  138. package/dist-esm/lib/tools/SelectTool/childStates/DraggingHandle.mjs.map +2 -2
  139. package/dist-esm/lib/ui/components/A11y.mjs +1 -2
  140. package/dist-esm/lib/ui/components/A11y.mjs.map +2 -2
  141. package/dist-esm/lib/ui/components/LanguageMenu.mjs +1 -0
  142. package/dist-esm/lib/ui/components/LanguageMenu.mjs.map +2 -2
  143. package/dist-esm/lib/ui/components/Minimap/DefaultMinimap.mjs +2 -1
  144. package/dist-esm/lib/ui/components/Minimap/DefaultMinimap.mjs.map +2 -2
  145. package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs +1 -2
  146. package/dist-esm/lib/ui/components/PageMenu/DefaultPageMenu.mjs.map +2 -2
  147. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs +14 -5
  148. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs.map +2 -2
  149. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +257 -320
  150. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
  151. package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs +135 -0
  152. package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs.map +7 -0
  153. package/dist-esm/lib/ui/components/StylePanel/StylePanelContext.mjs +48 -0
  154. package/dist-esm/lib/ui/components/StylePanel/StylePanelContext.mjs.map +7 -0
  155. package/dist-esm/lib/ui/components/StylePanel/{DoubleDropdownPicker.mjs → StylePanelDoubleDropdownPicker.mjs} +20 -19
  156. package/dist-esm/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.mjs.map +7 -0
  157. package/dist-esm/lib/ui/components/StylePanel/{DropdownPicker.mjs → StylePanelDropdownPicker.mjs} +20 -17
  158. package/dist-esm/lib/ui/components/StylePanel/StylePanelDropdownPicker.mjs.map +7 -0
  159. package/dist-esm/lib/ui/components/StylePanel/StylePanelSubheading.mjs +8 -0
  160. package/dist-esm/lib/ui/components/StylePanel/StylePanelSubheading.mjs.map +7 -0
  161. package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs +2 -0
  162. package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs.map +2 -2
  163. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs +38 -9
  164. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs.map +2 -2
  165. package/dist-esm/lib/ui/components/Toolbar/DefaultVideoToolbarContent.mjs +15 -3
  166. package/dist-esm/lib/ui/components/Toolbar/DefaultVideoToolbarContent.mjs.map +2 -2
  167. package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs +2 -1
  168. package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs.map +2 -2
  169. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs +1 -1
  170. package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs.map +2 -2
  171. package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs +6 -2
  172. package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs.map +2 -2
  173. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs +11 -3
  174. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs.map +2 -2
  175. package/dist-esm/lib/ui/components/primitives/TldrawUiInput.mjs +6 -4
  176. package/dist-esm/lib/ui/components/primitives/TldrawUiInput.mjs.map +2 -2
  177. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs +18 -5
  178. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map +2 -2
  179. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +3 -0
  180. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
  181. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +48 -3
  182. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
  183. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs +3 -0
  184. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs.map +2 -2
  185. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +8 -8
  186. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
  187. package/dist-esm/lib/ui/context/actions.mjs +13 -8
  188. package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
  189. package/dist-esm/lib/ui/hooks/useClipboardEvents.mjs +1 -2
  190. package/dist-esm/lib/ui/hooks/useClipboardEvents.mjs.map +2 -2
  191. package/dist-esm/lib/ui/hooks/useExportAs.mjs +3 -2
  192. package/dist-esm/lib/ui/hooks/useExportAs.mjs.map +2 -2
  193. package/dist-esm/lib/ui/hooks/useTools.mjs +1 -1
  194. package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
  195. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +5 -2
  196. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
  197. package/dist-esm/lib/ui/version.mjs +3 -3
  198. package/dist-esm/lib/ui/version.mjs.map +1 -1
  199. package/dist-esm/lib/utils/export/copyAs.mjs +1 -2
  200. package/dist-esm/lib/utils/export/copyAs.mjs.map +2 -2
  201. package/dist-esm/lib/utils/export/export.mjs +0 -20
  202. package/dist-esm/lib/utils/export/export.mjs.map +2 -2
  203. package/dist-esm/lib/utils/export/exportAs.mjs +1 -2
  204. package/dist-esm/lib/utils/export/exportAs.mjs.map +2 -2
  205. package/package.json +3 -3
  206. package/src/index.ts +45 -21
  207. package/src/lib/defaultExternalContentHandlers.ts +14 -0
  208. package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts +83 -13
  209. package/src/lib/shapes/arrow/ArrowShapeTool.test.ts +99 -5
  210. package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts +41 -0
  211. package/src/lib/shapes/arrow/arrow-types.ts +3 -5
  212. package/src/lib/shapes/arrow/arrowLabel.ts +8 -0
  213. package/src/lib/shapes/arrow/arrowTargetState.ts +34 -3
  214. package/src/lib/shapes/arrow/toolStates/Pointing.tsx +1 -1
  215. package/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx +4 -5
  216. package/src/lib/shapes/frame/FrameShapeUtil.tsx +1 -0
  217. package/src/lib/shapes/frame/components/FrameLabelInput.tsx +10 -3
  218. package/src/lib/shapes/geo/GeoShapeUtil.tsx +1 -0
  219. package/src/lib/shapes/note/NoteShapeUtil.tsx +1 -0
  220. package/src/lib/shapes/shared/HyperlinkButton.tsx +5 -5
  221. package/src/lib/shapes/shared/PlainTextLabel.tsx +0 -6
  222. package/src/lib/shapes/shared/useEditablePlainText.ts +3 -10
  223. package/src/lib/shapes/shared/useImageOrVideoAsset.ts +0 -7
  224. package/src/lib/shapes/text/PlainTextArea.tsx +4 -3
  225. package/src/lib/shapes/text/RichTextArea.tsx +3 -4
  226. package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx +6 -2
  227. package/src/lib/ui/components/A11y.tsx +1 -2
  228. package/src/lib/ui/components/LanguageMenu.tsx +1 -0
  229. package/src/lib/ui/components/Minimap/DefaultMinimap.tsx +2 -1
  230. package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx +1 -2
  231. package/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx +27 -13
  232. package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +260 -381
  233. package/src/lib/ui/components/{primitives/TldrawUiButtonPicker.tsx → StylePanel/StylePanelButtonPicker.tsx} +70 -50
  234. package/src/lib/ui/components/StylePanel/StylePanelContext.tsx +63 -0
  235. package/src/lib/ui/components/StylePanel/{DoubleDropdownPicker.tsx → StylePanelDoubleDropdownPicker.tsx} +28 -19
  236. package/src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx +119 -0
  237. package/src/lib/ui/components/StylePanel/StylePanelSubheading.tsx +9 -0
  238. package/src/lib/ui/components/Toolbar/AltTextEditor.tsx +2 -0
  239. package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx +32 -15
  240. package/src/lib/ui/components/Toolbar/DefaultVideoToolbarContent.tsx +12 -4
  241. package/src/lib/ui/components/Toolbar/LinkEditor.tsx +1 -0
  242. package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx +1 -1
  243. package/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx +9 -2
  244. package/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx +7 -3
  245. package/src/lib/ui/components/primitives/TldrawUiInput.tsx +6 -3
  246. package/src/lib/ui/components/primitives/TldrawUiSlider.tsx +52 -32
  247. package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +5 -1
  248. package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +67 -13
  249. package/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx +4 -0
  250. package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +9 -9
  251. package/src/lib/ui/context/actions.tsx +20 -8
  252. package/src/lib/ui/hooks/useClipboardEvents.ts +1 -2
  253. package/src/lib/ui/hooks/useExportAs.ts +3 -2
  254. package/src/lib/ui/hooks/useTools.tsx +1 -1
  255. package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +3 -0
  256. package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +5 -2
  257. package/src/lib/ui/version.ts +3 -3
  258. package/src/lib/ui.css +40 -3
  259. package/src/lib/utils/export/copyAs.ts +1 -24
  260. package/src/lib/utils/export/export.ts +0 -36
  261. package/src/lib/utils/export/exportAs.ts +1 -32
  262. package/src/test/TestEditor.ts +8 -2
  263. package/src/test/frames.test.ts +15 -0
  264. package/src/test/getCulledShapes.test.tsx +71 -2
  265. package/tldraw.css +48 -6
  266. package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js.map +0 -7
  267. package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js.map +0 -7
  268. package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js +0 -131
  269. package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js.map +0 -7
  270. package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs.map +0 -7
  271. package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map +0 -7
  272. package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs +0 -115
  273. package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs.map +0 -7
  274. 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
 
@@ -1740,15 +1748,20 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
1740
1748
  getInterpolatedProps(startShape: TLGeoShape, endShape: TLGeoShape, t: number): TLGeoShapeProps;
1741
1749
  }
1742
1750
 
1743
- /** @public @react */
1744
- export declare function GeoStylePickerSet({ styles }: StylePickerSetProps): JSX_2.Element | null;
1745
-
1746
1751
  /** @public */
1747
1752
  export declare function getArrowBindings(editor: Editor, shape: TLArrowShape): TLArrowBindings;
1748
1753
 
1749
1754
  /** @public */
1750
1755
  export declare function getArrowInfo(editor: Editor, shape: TLArrowShape | TLShapeId): TLArrowInfo | undefined;
1751
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
+
1752
1765
  /** @public */
1753
1766
  export declare function getArrowTerminalsInArrowSpace(editor: Editor, shape: TLArrowShape, bindings: TLArrowBindings): {
1754
1767
  end: Vec;
@@ -2190,9 +2203,6 @@ export declare interface OnDragFromToolbarToCreateShapesOpts {
2190
2203
  onDragEnd?(id: TLShapeId): void;
2191
2204
  }
2192
2205
 
2193
- /** @public @react */
2194
- export declare function OpacitySlider(): JSX_2.Element | null;
2195
-
2196
2206
  /** @public @react */
2197
2207
  export declare function OvalToolbarItem(): JSX_2.Element;
2198
2208
 
@@ -2584,9 +2594,6 @@ export declare interface SolidPathBuilderOpts extends BasePathBuilderOpts {
2584
2594
 
2585
2595
  /* Excluded from this release type: Spinner */
2586
2596
 
2587
- /** @public @react */
2588
- export declare function SplineStylePickerSet({ styles }: StylePickerSetProps): JSX_2.Element | null;
2589
-
2590
2597
  /** @public @react */
2591
2598
  export declare function StackMenuItems(): JSX_2.Element;
2592
2599
 
@@ -2644,11 +2651,124 @@ export declare interface StrokePoint {
2644
2651
  radius: number;
2645
2652
  }
2646
2653
 
2654
+ /** @public @react */
2655
+ export declare function StylePanelArrowheadPicker(): JSX_2.Element | null;
2656
+
2657
+ /** @public @react */
2658
+ export declare function StylePanelArrowKindPicker(): JSX_2.Element | null;
2659
+
2660
+ /** @public */
2661
+ export declare const StylePanelButtonPicker: <T extends string>(props: StylePanelButtonPickerProps<T>) => ReactElement;
2662
+
2663
+ /** @public */
2664
+ export declare interface StylePanelButtonPickerProps<T extends string> {
2665
+ title: string;
2666
+ uiType: string;
2667
+ style: StyleProp<T>;
2668
+ value: SharedStyle<T>;
2669
+ items: StyleValuesForUi<T>;
2670
+ onValueChange?(style: StyleProp<T>, value: T): void;
2671
+ onHistoryMark?(id: string): void;
2672
+ }
2673
+
2674
+ /** @public @react */
2675
+ export declare function StylePanelColorPicker(): JSX_2.Element | null;
2676
+
2677
+ /** @public */
2678
+ export declare interface StylePanelContext {
2679
+ styles: ReadonlySharedStyleMap;
2680
+ showUiLabels: boolean;
2681
+ onHistoryMark(id: string): void;
2682
+ onValueChange<T>(style: StyleProp<T>, value: T): void;
2683
+ }
2684
+
2685
+ /** @public @react */
2686
+ export declare function StylePanelContextProvider({ children, styles }: StylePanelContextProviderProps): JSX_2.Element;
2687
+
2647
2688
  /** @public */
2648
- export declare interface StylePickerSetProps {
2689
+ export declare interface StylePanelContextProviderProps {
2690
+ children: React.ReactNode;
2649
2691
  styles: ReadonlySharedStyleMap;
2650
2692
  }
2651
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
+
2652
2772
  /** @public */
2653
2773
  export declare type StyleValuesForUi<T> = readonly {
2654
2774
  readonly icon: string | TLUiIconJsx;
@@ -2688,12 +2808,6 @@ export declare interface TextAreaProps {
2688
2808
  */
2689
2809
  export declare const TextDirection: Extension<any, any>;
2690
2810
 
2691
- /**
2692
- * @deprecated Use `PlainTextLabel` instead.
2693
- * @public
2694
- */
2695
- export declare const TextLabel: React_3.NamedExoticComponent<PlainTextLabelProps>;
2696
-
2697
2811
  /** @public */
2698
2812
  export declare interface TextShapeOptions {
2699
2813
  /** How much addition padding should be added to the horizontal geometry of the shape when binding to an arrow? */
@@ -2771,18 +2885,9 @@ export declare class TextShapeUtil extends ShapeUtil<TLTextShape> {
2771
2885
  } | undefined;
2772
2886
  }
2773
2887
 
2774
- /** @public @react */
2775
- export declare function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps): JSX_2.Element | null;
2776
-
2777
2888
  /** @public @react */
2778
2889
  export declare function TextToolbarItem(): JSX_2.Element;
2779
2890
 
2780
- /** @public */
2781
- export declare interface ThemeStylePickerSetProps {
2782
- styles: ReadonlySharedStyleMap;
2783
- theme: TLDefaultColorTheme;
2784
- }
2785
-
2786
2891
  /**
2787
2892
  * Default extensions for the TipTap editor.
2788
2893
  *
@@ -3039,9 +3144,6 @@ export declare function TldrawUiButtonIcon({ icon, small, invertIcon }: TLUiButt
3039
3144
  /** @public @react */
3040
3145
  export declare function TldrawUiButtonLabel({ children }: TLUiButtonLabelProps): JSX_2.Element;
3041
3146
 
3042
- /** @public */
3043
- export declare const TldrawUiButtonPicker: <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement;
3044
-
3045
3147
  /**
3046
3148
  * A column, usually of UI controls like buttons, select dropdown, checkboxes, etc.
3047
3149
  *
@@ -3137,7 +3239,7 @@ export declare function TldrawUiMenuActionCheckboxItem({ actionId, ...rest }: TL
3137
3239
  export declare function TldrawUiMenuActionItem({ actionId, ...rest }: TLUiMenuActionItemProps): JSX_2.Element | null;
3138
3240
 
3139
3241
  /** @public @react */
3140
- 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;
3141
3243
 
3142
3244
  /** @public @react */
3143
3245
  export declare function TldrawUiMenuContextProvider({ type, sourceId, children, }: TLUiMenuContextProviderProps): JSX_2.Element;
@@ -3221,7 +3323,7 @@ export declare const TldrawUiToolbar: React_3.ForwardRefExoticComponent<TLUiTool
3221
3323
  export declare const TldrawUiToolbarButton: React_3.ForwardRefExoticComponent<TLUiToolbarButtonProps & React_3.RefAttributes<HTMLButtonElement>>;
3222
3324
 
3223
3325
  /** @public @react */
3224
- 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;
3225
3327
 
3226
3328
  /** @public @react */
3227
3329
  export declare const TldrawUiToolbarToggleItem: ({ children, className, type, value, tooltip, ...props }: TLUiToolbarToggleItemProps) => JSX_2.Element;
@@ -3408,18 +3510,6 @@ export declare interface TLUiButtonLabelProps {
3408
3510
  children?: ReactNode;
3409
3511
  }
3410
3512
 
3411
- /** @public */
3412
- export declare interface TLUiButtonPickerProps<T extends string> {
3413
- title: string;
3414
- uiType: string;
3415
- style: StyleProp<T>;
3416
- value: SharedStyle<T>;
3417
- items: StyleValuesForUi<T>;
3418
- theme: TLDefaultColorTheme;
3419
- onValueChange(style: StyleProp<T>, value: T): void;
3420
- onHistoryMark?(id: string): void;
3421
- }
3422
-
3423
3513
  /** @public */
3424
3514
  export declare interface TLUiButtonProps extends React_2.HTMLAttributes<HTMLButtonElement> {
3425
3515
  disabled?: boolean;
@@ -3861,6 +3951,7 @@ export declare interface TLUiInputProps {
3861
3951
  shouldManuallyMaintainScrollPositionWhenFocused?: boolean;
3862
3952
  value?: string;
3863
3953
  'data-testid'?: string;
3954
+ 'aria-label'?: string;
3864
3955
  }
3865
3956
 
3866
3957
  /** @public */
@@ -3905,6 +3996,7 @@ export declare interface TLUiMenuCheckboxItemProps<TranslationKey extends string
3905
3996
  label?: {
3906
3997
  [key: string]: TranslationKey;
3907
3998
  } | TranslationKey;
3999
+ lang?: string;
3908
4000
  readonlyOk?: boolean;
3909
4001
  onSelect(source: TLUiEventSource): Promise<void> | void;
3910
4002
  toggle?: boolean;
@@ -4055,19 +4147,15 @@ export declare interface TLUiSliderProps {
4055
4147
  label: string;
4056
4148
  title: string;
4057
4149
  onValueChange(value: number): void;
4058
- onHistoryMark(id: string): void;
4150
+ onHistoryMark?(id: string): void;
4059
4151
  'data-testid'?: string;
4060
4152
  ariaValueModifier?: number;
4061
4153
  }
4062
4154
 
4063
- /** @public */
4064
- export declare interface TLUiStylePanelContentProps {
4065
- styles: ReturnType<typeof useRelevantStyles>;
4066
- }
4067
-
4068
4155
  /** @public */
4069
4156
  export declare interface TLUiStylePanelProps {
4070
4157
  isMobile?: boolean;
4158
+ styles?: null | ReadonlySharedStyleMap;
4071
4159
  children?: ReactNode;
4072
4160
  }
4073
4161
 
@@ -4136,6 +4224,7 @@ export declare interface TLUiToolbarToggleGroupProps extends React_3.HTMLAttribu
4136
4224
  value: any;
4137
4225
  defaultValue?: any;
4138
4226
  type: 'multiple' | 'single';
4227
+ asChild?: boolean;
4139
4228
  }
4140
4229
 
4141
4230
  /** @public */
@@ -4144,7 +4233,7 @@ export declare interface TLUiToolbarToggleItemProps extends React_3.HTMLAttribut
4144
4233
  className?: string;
4145
4234
  type: 'icon' | 'tool';
4146
4235
  value: string;
4147
- tooltip?: string;
4236
+ tooltip?: React_3.ReactNode;
4148
4237
  }
4149
4238
 
4150
4239
  /** @public */
@@ -4190,7 +4279,7 @@ export declare interface TLUiTranslation {
4190
4279
  export declare type TLUiTranslationContextType = TLUiTranslation;
4191
4280
 
4192
4281
  /** @public */
4193
- 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';
4282
+ export declare type TLUiTranslationKey = 'a11y.adjust-shape-styles' | 'a11y.enlarge-shape' | 'a11y.enter-leave-container' | 'a11y.move-shape-faster' | 'a11y.move-shape' | 'a11y.multiple-shapes' | 'a11y.open-context-menu' | 'a11y.open-keyboard-shortcuts' | 'a11y.pan-camera' | 'a11y.repeat-shape' | 'a11y.rotate-shape-ccw-fine' | 'a11y.rotate-shape-ccw' | 'a11y.rotate-shape-cw-fine' | 'a11y.rotate-shape-cw' | 'a11y.select-shape-direction' | 'a11y.select-shape' | 'a11y.shape-image' | 'a11y.shape-index' | 'a11y.shape-video' | 'a11y.shrink-shape' | 'a11y.skip-to-main-content' | 'a11y.status' | 'action.align-bottom' | 'action.align-center-horizontal.short' | 'action.align-center-horizontal' | 'action.align-center-vertical.short' | 'action.align-center-vertical' | 'action.align-left' | 'action.align-right' | 'action.align-top' | 'action.back-to-content' | 'action.bring-forward' | 'action.bring-to-front' | 'action.convert-to-bookmark' | 'action.convert-to-embed' | 'action.copy-as-png.short' | 'action.copy-as-png' | 'action.copy-as-svg.short' | 'action.copy-as-svg' | 'action.copy' | 'action.cut' | 'action.delete' | 'action.distribute-horizontal.short' | 'action.distribute-horizontal' | 'action.distribute-vertical.short' | 'action.distribute-vertical' | 'action.download-original' | 'action.duplicate' | 'action.edit-link' | 'action.exit-pen-mode' | 'action.export-all-as-png.short' | 'action.export-all-as-png' | 'action.export-all-as-svg.short' | 'action.export-all-as-svg' | 'action.export-as-png.short' | 'action.export-as-png' | 'action.export-as-svg.short' | 'action.export-as-svg' | 'action.fit-frame-to-content' | 'action.flatten-to-image' | 'action.flip-horizontal.short' | 'action.flip-horizontal' | 'action.flip-vertical.short' | 'action.flip-vertical' | 'action.fork-project-on-tldraw' | 'action.fork-project' | 'action.group' | 'action.insert-embed' | 'action.insert-media' | 'action.leave-shared-project' | 'action.new-project' | 'action.new-shared-project' | 'action.open-cursor-chat' | 'action.open-embed-link' | 'action.open-file' | 'action.open-kbd-shortcuts' | 'action.pack' | 'action.paste-error-description' | 'action.paste-error-title' | 'action.paste' | 'action.print' | 'action.redo' | 'action.remove-frame' | 'action.rename' | 'action.rotate-ccw' | 'action.rotate-cw' | 'action.save-copy' | 'action.select-all' | 'action.select-none' | 'action.send-backward' | 'action.send-to-back' | 'action.share-project' | 'action.stack-horizontal.short' | 'action.stack-horizontal' | 'action.stack-vertical.short' | 'action.stack-vertical' | 'action.stop-following' | 'action.stretch-horizontal.short' | 'action.stretch-horizontal' | 'action.stretch-vertical.short' | 'action.stretch-vertical' | 'action.toggle-auto-size' | 'action.toggle-dark-mode.menu' | 'action.toggle-dark-mode' | 'action.toggle-debug-mode.menu' | 'action.toggle-debug-mode' | 'action.toggle-dynamic-size-mode.menu' | 'action.toggle-dynamic-size-mode' | 'action.toggle-edge-scrolling.menu' | 'action.toggle-edge-scrolling' | 'action.toggle-focus-mode.menu' | 'action.toggle-focus-mode' | 'action.toggle-grid.menu' | 'action.toggle-grid' | 'action.toggle-keyboard-shortcuts.menu' | 'action.toggle-keyboard-shortcuts' | 'action.toggle-lock' | 'action.toggle-paste-at-cursor.menu' | 'action.toggle-paste-at-cursor' | 'action.toggle-reduce-motion.menu' | 'action.toggle-reduce-motion' | 'action.toggle-snap-mode.menu' | 'action.toggle-snap-mode' | 'action.toggle-tool-lock.menu' | 'action.toggle-tool-lock' | 'action.toggle-transparent.context-menu' | 'action.toggle-transparent.menu' | 'action.toggle-transparent' | 'action.toggle-ui-labels.menu' | 'action.toggle-ui-labels' | 'action.toggle-wrap-mode.menu' | 'action.toggle-wrap-mode' | 'action.undo' | 'action.ungroup' | 'action.unlock-all' | 'action.zoom-in' | 'action.zoom-out' | 'action.zoom-to-100' | 'action.zoom-to-fit' | 'action.zoom-to-selection' | 'actions-menu.title' | 'align-style.end' | 'align-style.justify' | 'align-style.middle' | 'align-style.start' | 'app.loading' | 'arrow-kind-style.arc' | 'arrow-kind-style.elbow' | 'arrowheadEnd-style.arrow' | 'arrowheadEnd-style.bar' | 'arrowheadEnd-style.diamond' | 'arrowheadEnd-style.dot' | 'arrowheadEnd-style.inverted' | 'arrowheadEnd-style.none' | 'arrowheadEnd-style.pipe' | 'arrowheadEnd-style.square' | 'arrowheadEnd-style.triangle' | 'arrowheadStart-style.arrow' | 'arrowheadStart-style.bar' | 'arrowheadStart-style.diamond' | 'arrowheadStart-style.dot' | 'arrowheadStart-style.inverted' | 'arrowheadStart-style.none' | 'arrowheadStart-style.pipe' | 'arrowheadStart-style.square' | 'arrowheadStart-style.triangle' | 'assets.files.amount-too-many' | 'assets.files.maximum-size' | 'assets.files.size-too-big' | 'assets.files.type-not-allowed' | 'assets.files.upload-failed' | 'assets.url.failed' | 'color-style.black' | 'color-style.blue' | 'color-style.green' | 'color-style.grey' | 'color-style.light-blue' | 'color-style.light-green' | 'color-style.light-red' | 'color-style.light-violet' | 'color-style.orange' | 'color-style.red' | 'color-style.violet' | 'color-style.white' | 'color-style.yellow' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.edit' | 'context-menu.export-all-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context-menu.title' | 'context.pages.new-page' | 'cursor-chat.type-to-chat' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'document-name-menu.copy-link' | 'document.default-name' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.external-link' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | 'embed-dialog.back' | 'embed-dialog.cancel' | 'embed-dialog.create' | 'embed-dialog.instruction' | 'embed-dialog.invalid-url' | 'embed-dialog.title' | 'embed-dialog.url' | 'file-system.confirm-clear.cancel' | 'file-system.confirm-clear.continue' | 'file-system.confirm-clear.description' | 'file-system.confirm-clear.dont-show-again' | 'file-system.confirm-clear.title' | 'file-system.confirm-open.cancel' | 'file-system.confirm-open.description' | 'file-system.confirm-open.dont-show-again' | 'file-system.confirm-open.open' | 'file-system.confirm-open.title' | 'file-system.file-open-error.file-format-version-too-new' | 'file-system.file-open-error.generic-corrupted-file' | 'file-system.file-open-error.not-a-tldraw-file' | 'file-system.file-open-error.title' | 'file-system.shared-document-file-open-error.description' | 'file-system.shared-document-file-open-error.title' | 'fill-style.fill' | 'fill-style.none' | 'fill-style.pattern' | 'fill-style.semi' | 'fill-style.solid' | 'focus-mode.toggle-focus-mode' | 'font-style.draw' | 'font-style.mono' | 'font-style.sans' | 'font-style.serif' | 'geo-style.arrow-down' | 'geo-style.arrow-left' | 'geo-style.arrow-right' | 'geo-style.arrow-up' | 'geo-style.check-box' | 'geo-style.cloud' | 'geo-style.diamond' | 'geo-style.ellipse' | 'geo-style.heart' | 'geo-style.hexagon' | 'geo-style.octagon' | 'geo-style.oval' | 'geo-style.pentagon' | 'geo-style.rectangle' | 'geo-style.rhombus-2' | 'geo-style.rhombus' | 'geo-style.star' | 'geo-style.trapezoid' | 'geo-style.triangle' | 'geo-style.x-box' | 'handle.crop.bottom-left' | 'handle.crop.bottom-right' | 'handle.crop.bottom' | 'handle.crop.left' | 'handle.crop.right' | 'handle.crop.top-left' | 'handle.crop.top-right' | 'handle.crop.top' | 'handle.resize-bottom-left' | 'handle.resize-bottom-right' | 'handle.resize-bottom' | 'handle.resize-left' | 'handle.resize-right' | 'handle.resize-top-left' | 'handle.resize-top-right' | 'handle.resize-top' | 'handle.rotate.bottom_left_rotate' | 'handle.rotate.bottom_right_rotate' | 'handle.rotate.mobile_rotate' | 'handle.rotate.top_left_rotate' | 'handle.rotate.top_right_rotate' | 'help-menu.about' | 'help-menu.discord' | 'help-menu.github' | 'help-menu.import-tldr-file' | 'help-menu.keyboard-shortcuts' | 'help-menu.privacy' | 'help-menu.terms' | 'help-menu.title' | 'help-menu.twitter' | 'menu.accessibility' | 'menu.copy-as' | 'menu.edit' | 'menu.export-as' | 'menu.file' | 'menu.language' | 'menu.preferences' | 'menu.theme' | 'menu.title' | 'menu.view' | 'navigation-zone.minimap' | 'navigation-zone.title' | 'navigation-zone.toggle-minimap' | 'navigation-zone.zoom' | 'opacity-style.0.1' | 'opacity-style.0.25' | 'opacity-style.0.5' | 'opacity-style.0.75' | 'opacity-style.1' | 'page-menu.create-new-page' | 'page-menu.edit-done' | 'page-menu.edit-start' | 'page-menu.go-to-page' | 'page-menu.max-page-count-reached' | 'page-menu.new-page-initial-name' | 'page-menu.submenu.delete' | 'page-menu.submenu.duplicate-page' | 'page-menu.submenu.move-down' | 'page-menu.submenu.move-up' | 'page-menu.submenu.rename' | 'page-menu.submenu.title' | 'page-menu.title' | 'people-menu.anonymous-user' | 'people-menu.avatar-color' | 'people-menu.change-color' | 'people-menu.change-name' | 'people-menu.follow' | 'people-menu.following' | 'people-menu.invite' | 'people-menu.leading' | 'people-menu.title' | 'people-menu.user' | 'share-menu.copied' | 'share-menu.copy-link-note' | 'share-menu.copy-link' | 'share-menu.copy-readonly-link-note' | 'share-menu.copy-readonly-link' | 'share-menu.create-snapshot-link' | 'share-menu.creating-project' | 'share-menu.fork-note' | 'share-menu.offline-note' | 'share-menu.project-too-large' | 'share-menu.save-note' | 'share-menu.share-project' | 'share-menu.snapshot-link-note' | 'share-menu.title' | 'share-menu.upload-failed' | 'sharing.confirm-leave.cancel' | 'sharing.confirm-leave.description' | 'sharing.confirm-leave.dont-show-again' | 'sharing.confirm-leave.leave' | 'sharing.confirm-leave.title' | 'shortcuts-dialog.a11y' | 'shortcuts-dialog.collaboration' | 'shortcuts-dialog.edit' | 'shortcuts-dialog.file' | 'shortcuts-dialog.preferences' | 'shortcuts-dialog.text-formatting' | 'shortcuts-dialog.title' | 'shortcuts-dialog.tools' | 'shortcuts-dialog.transform' | 'shortcuts-dialog.view' | 'size-style.l' | 'size-style.m' | 'size-style.s' | 'size-style.xl' | 'spline-style.cubic' | 'spline-style.line' | 'status.offline' | 'style-panel.align' | 'style-panel.arrow-kind' | 'style-panel.arrowhead-end' | 'style-panel.arrowhead-start' | 'style-panel.arrowheads' | 'style-panel.color' | 'style-panel.dash' | 'style-panel.fill' | 'style-panel.font' | 'style-panel.geo' | 'style-panel.label-align' | 'style-panel.mixed' | 'style-panel.opacity' | 'style-panel.position' | 'style-panel.selected' | 'style-panel.size' | 'style-panel.spline' | 'style-panel.title' | 'style-panel.vertical-align' | 'theme.dark' | 'theme.light' | 'theme.system' | 'toast.close' | 'toast.error.copy-fail.desc' | 'toast.error.copy-fail.title' | 'toast.error.export-fail.desc' | 'toast.error.export-fail.title' | 'toast.error' | 'toast.info' | 'toast.success' | 'toast.warning' | 'tool-panel.more' | 'tool-panel.title' | 'tool.arrow-down' | 'tool.arrow-left' | 'tool.arrow-right' | 'tool.arrow-up' | 'tool.arrow' | 'tool.aspect-ratio.circle' | 'tool.aspect-ratio.landscape' | 'tool.aspect-ratio.original' | 'tool.aspect-ratio.portrait' | 'tool.aspect-ratio.square' | 'tool.aspect-ratio.wide' | 'tool.aspect-ratio' | 'tool.bookmark' | 'tool.check-box' | 'tool.cloud' | 'tool.diamond' | 'tool.draw' | 'tool.ellipse' | 'tool.embed' | 'tool.eraser' | 'tool.flip-horz' | 'tool.flip-vert' | 'tool.frame' | 'tool.hand' | 'tool.heart' | 'tool.hexagon' | 'tool.highlight' | 'tool.image-crop-confirm' | 'tool.image-crop' | 'tool.image-toolbar-title' | 'tool.image-zoom' | 'tool.laser' | 'tool.line' | 'tool.media-alt-text-confirm' | 'tool.media-alt-text-desc' | 'tool.media-alt-text' | 'tool.media' | 'tool.note' | 'tool.octagon' | 'tool.oval' | 'tool.pentagon' | 'tool.pointer-down' | 'tool.rectangle' | 'tool.replace-media' | 'tool.rhombus' | 'tool.rich-text-bold' | 'tool.rich-text-bulletList' | 'tool.rich-text-code' | 'tool.rich-text-header' | 'tool.rich-text-highlight' | 'tool.rich-text-italic' | 'tool.rich-text-link-remove' | 'tool.rich-text-link-visit' | 'tool.rich-text-link' | 'tool.rich-text-orderedList' | 'tool.rich-text-strikethrough' | 'tool.rich-text-toolbar-title' | 'tool.rotate-cw' | 'tool.select' | 'tool.star' | 'tool.text' | 'tool.trapezoid' | 'tool.triangle' | 'tool.x-box' | 'ui.checked' | 'ui.close' | 'ui.unchecked' | 'verticalAlign-style.end' | 'verticalAlign-style.middle' | 'verticalAlign-style.start' | 'vscode.file-open.backup-failed' | 'vscode.file-open.backup-saved' | 'vscode.file-open.backup' | 'vscode.file-open.desc' | 'vscode.file-open.dont-show-again' | 'vscode.file-open.open';
4194
4283
 
4195
4284
  /** @public */
4196
4285
  export declare interface TLUiTranslationProviderProps {
@@ -4366,18 +4455,34 @@ export declare function UnlockAllMenuItem(): JSX_2.Element;
4366
4455
  /** @public */
4367
4456
  export declare function unwrapLabel(label?: TLUiActionItem['label'], menuType?: string): string | undefined;
4368
4457
 
4369
- /** @public */
4370
- export declare function useA11y(): TLUiA11yContextType;
4371
-
4372
- /** @public */
4373
- export declare function useActions(): TLUiActionsContextType;
4458
+ /**
4459
+ * Update the current arrow target state for an editor. See {@link ArrowTargetState} for more
4460
+ * information.
4461
+ *
4462
+ * @public
4463
+ */
4464
+ export declare function updateArrowTargetState({ editor, pointInPageSpace, arrow, isPrecise, currentBinding, oppositeBinding, }: UpdateArrowTargetStateOpts): ArrowTargetState | null;
4374
4465
 
4375
4466
  /**
4376
- * @deprecated Use {@link useImageOrVideoAsset} instead.
4467
+ * Options passed to {@link updateArrowTargetState}.
4377
4468
  *
4378
4469
  * @public
4379
4470
  */
4380
- export declare const useAsset: typeof useImageOrVideoAsset;
4471
+ export declare interface UpdateArrowTargetStateOpts {
4472
+ editor: Editor;
4473
+ pointInPageSpace: VecLike;
4474
+ arrow: TLArrowShape | undefined;
4475
+ isPrecise: boolean;
4476
+ currentBinding: TLArrowBinding | undefined;
4477
+ /** The binding from the opposite end of the arrow, if one exists. */
4478
+ oppositeBinding: TLArrowBinding | undefined;
4479
+ }
4480
+
4481
+ /** @public */
4482
+ export declare function useA11y(): TLUiA11yContextType;
4483
+
4484
+ /** @public */
4485
+ export declare function useActions(): TLUiActionsContextType;
4381
4486
 
4382
4487
  /* Excluded from this release type: useAssetUrls */
4383
4488
 
@@ -4433,7 +4538,11 @@ export declare function useDefaultHelpers(): {
4433
4538
  copy: (source: TLUiEventSource) => Promise<void>;
4434
4539
  copyAs: (ids: TLShapeId[], format?: TLCopyType) => void;
4435
4540
  cut: (source: TLUiEventSource) => Promise<void>;
4436
- exportAs: (ids: TLShapeId[], format: TLExportType | undefined, name: string | undefined) => void;
4541
+ exportAs: (ids: TLShapeId[], opts?: {
4542
+ format?: TLExportType;
4543
+ name?: string;
4544
+ scale?: number;
4545
+ }) => void;
4437
4546
  getEmbedDefinition: (url: string) => TLEmbedResult;
4438
4547
  insertMedia: () => Promise<void>;
4439
4548
  isMobile: boolean;
@@ -4455,7 +4564,9 @@ export declare function useEditablePlainText(shapeId: TLShapeId, type: string, t
4455
4564
  handleChange: ({ plaintext }: {
4456
4565
  plaintext: string;
4457
4566
  }) => void;
4458
- handleDoubleClick: (e: any) => any;
4567
+ handleDoubleClick: (e: {
4568
+ nativeEvent: Event;
4569
+ } | Event) => void;
4459
4570
  handleFocus: () => void;
4460
4571
  handleInputPointerDown: (e: React_3.PointerEvent) => void;
4461
4572
  handleKeyDown: (e: KeyboardEvent) => void;
@@ -4472,7 +4583,9 @@ export declare function useEditableRichText(shapeId: TLShapeId, type: string, ri
4472
4583
  handleChange: ({ richText }: {
4473
4584
  richText: TLRichText;
4474
4585
  }) => void;
4475
- handleDoubleClick: (e: any) => any;
4586
+ handleDoubleClick: (e: {
4587
+ nativeEvent: Event;
4588
+ } | Event) => void;
4476
4589
  handleFocus: () => void;
4477
4590
  handleInputPointerDown: (e: React.PointerEvent) => void;
4478
4591
  handleKeyDown: (e: KeyboardEvent) => void;
@@ -4483,14 +4596,12 @@ export declare function useEditableRichText(shapeId: TLShapeId, type: string, ri
4483
4596
  rInput: RefObject<HTMLDivElement>;
4484
4597
  };
4485
4598
 
4486
- /**
4487
- * @deprecated Use `useEditablePlainText` instead.
4488
- * @public
4489
- */
4490
- export declare const useEditableText: typeof useEditablePlainText;
4491
-
4492
4599
  /** @public */
4493
- export declare function useExportAs(): (ids: TLShapeId[], format: TLExportType | undefined, name: string | undefined) => void;
4600
+ export declare function useExportAs(): (ids: TLShapeId[], opts?: {
4601
+ format?: TLExportType;
4602
+ name?: string;
4603
+ scale?: number;
4604
+ }) => void;
4494
4605
 
4495
4606
  /**
4496
4607
  * This is a handy helper hook that resolves an asset to an optimized URL for a given shape, or its
@@ -4564,6 +4675,9 @@ export declare const useSelectedShapesAnnouncer: () => void;
4564
4675
  /** @public */
4565
4676
  export declare function useShowCollaborationUi(): boolean;
4566
4677
 
4678
+ /** @public */
4679
+ export declare function useStylePanelContext(): StylePanelContext;
4680
+
4567
4681
  /** @public */
4568
4682
  export declare function useTldrawUiComponents(): TLUiComponents;
4569
4683