tldraw 3.15.0-next.f1dfcef63951 → 3.15.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 (162) hide show
  1. package/dist-cjs/index.d.ts +93 -92
  2. package/dist-cjs/index.js +32 -30
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/lib/TldrawImage.js +5 -2
  5. package/dist-cjs/lib/TldrawImage.js.map +3 -3
  6. package/dist-cjs/lib/canvas/TldrawCropHandles.js +1 -1
  7. package/dist-cjs/lib/canvas/TldrawCropHandles.js.map +2 -2
  8. package/dist-cjs/lib/canvas/TldrawHandles.js +1 -1
  9. package/dist-cjs/lib/canvas/TldrawHandles.js.map +2 -2
  10. package/dist-cjs/lib/canvas/TldrawOverlays.js +1 -1
  11. package/dist-cjs/lib/canvas/TldrawOverlays.js.map +2 -2
  12. package/dist-cjs/lib/canvas/TldrawSelectionForeground.js +279 -271
  13. package/dist-cjs/lib/canvas/TldrawSelectionForeground.js.map +2 -2
  14. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +5 -5
  15. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
  16. package/dist-cjs/lib/shapes/shared/PathBuilder.js +21 -3
  17. package/dist-cjs/lib/shapes/shared/PathBuilder.js.map +2 -2
  18. package/dist-cjs/lib/shapes/shared/PlainTextLabel.js +1 -0
  19. package/dist-cjs/lib/shapes/shared/PlainTextLabel.js.map +2 -2
  20. package/dist-cjs/lib/shapes/shared/RichTextLabel.js +1 -0
  21. package/dist-cjs/lib/shapes/shared/RichTextLabel.js.map +2 -2
  22. package/dist-cjs/lib/shapes/text/TextShapeUtil.js +5 -11
  23. package/dist-cjs/lib/shapes/text/TextShapeUtil.js.map +2 -2
  24. package/dist-cjs/lib/styles.js.map +2 -2
  25. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js +11 -1
  26. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map +2 -2
  27. package/dist-cjs/lib/ui/components/MainMenu/DefaultMainMenuContent.js +1 -0
  28. package/dist-cjs/lib/ui/components/MainMenu/DefaultMainMenuContent.js.map +2 -2
  29. package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js +3 -4
  30. package/dist-cjs/lib/ui/components/NavigationPanel/DefaultNavigationPanel.js.map +2 -2
  31. package/dist-cjs/lib/ui/components/Spinner.js +2 -25
  32. package/dist-cjs/lib/ui/components/Spinner.js.map +2 -2
  33. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +2 -1
  34. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
  35. package/dist-cjs/lib/ui/components/menu-items.js +16 -0
  36. package/dist-cjs/lib/ui/components/menu-items.js.map +2 -2
  37. package/dist-cjs/lib/ui/components/primitives/Button/TldrawUiButtonIcon.js.map +2 -2
  38. package/dist-cjs/lib/ui/components/primitives/TldrawUiDialog.js +1 -1
  39. package/dist-cjs/lib/ui/components/primitives/TldrawUiDialog.js.map +2 -2
  40. package/dist-cjs/lib/ui/components/primitives/TldrawUiIcon.js +35 -1
  41. package/dist-cjs/lib/ui/components/primitives/TldrawUiIcon.js.map +2 -2
  42. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js +5 -2
  43. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map +2 -2
  44. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +1 -0
  45. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
  46. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.js.map +2 -2
  47. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +0 -2
  48. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
  49. package/dist-cjs/lib/ui/context/actions.js +28 -1
  50. package/dist-cjs/lib/ui/context/actions.js.map +2 -2
  51. package/dist-cjs/lib/ui/context/events.js.map +2 -2
  52. package/dist-cjs/lib/ui/hooks/useClipboardEvents.js +24 -7
  53. package/dist-cjs/lib/ui/hooks/useClipboardEvents.js.map +2 -2
  54. package/dist-cjs/lib/ui/hooks/useKeyboardShortcuts.js +2 -2
  55. package/dist-cjs/lib/ui/hooks/useKeyboardShortcuts.js.map +2 -2
  56. package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
  57. package/dist-cjs/lib/ui/hooks/useTranslation/TLUiTranslationKey.js.map +1 -1
  58. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js +4 -0
  59. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +2 -2
  60. package/dist-cjs/lib/ui/version.js +3 -3
  61. package/dist-cjs/lib/ui/version.js.map +1 -1
  62. package/dist-esm/index.d.mts +93 -92
  63. package/dist-esm/index.mjs +139 -133
  64. package/dist-esm/index.mjs.map +2 -2
  65. package/dist-esm/lib/TldrawImage.mjs +5 -2
  66. package/dist-esm/lib/TldrawImage.mjs.map +2 -2
  67. package/dist-esm/lib/canvas/TldrawCropHandles.mjs +1 -1
  68. package/dist-esm/lib/canvas/TldrawCropHandles.mjs.map +2 -2
  69. package/dist-esm/lib/canvas/TldrawHandles.mjs +1 -1
  70. package/dist-esm/lib/canvas/TldrawHandles.mjs.map +2 -2
  71. package/dist-esm/lib/canvas/TldrawOverlays.mjs +1 -1
  72. package/dist-esm/lib/canvas/TldrawOverlays.mjs.map +2 -2
  73. package/dist-esm/lib/canvas/TldrawSelectionForeground.mjs +279 -271
  74. package/dist-esm/lib/canvas/TldrawSelectionForeground.mjs.map +2 -2
  75. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +5 -5
  76. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
  77. package/dist-esm/lib/shapes/shared/PathBuilder.mjs +22 -3
  78. package/dist-esm/lib/shapes/shared/PathBuilder.mjs.map +2 -2
  79. package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs +1 -0
  80. package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs.map +2 -2
  81. package/dist-esm/lib/shapes/shared/RichTextLabel.mjs +1 -0
  82. package/dist-esm/lib/shapes/shared/RichTextLabel.mjs.map +2 -2
  83. package/dist-esm/lib/shapes/text/TextShapeUtil.mjs +5 -11
  84. package/dist-esm/lib/shapes/text/TextShapeUtil.mjs.map +2 -2
  85. package/dist-esm/lib/styles.mjs.map +2 -2
  86. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs +11 -1
  87. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.map +2 -2
  88. package/dist-esm/lib/ui/components/MainMenu/DefaultMainMenuContent.mjs +2 -0
  89. package/dist-esm/lib/ui/components/MainMenu/DefaultMainMenuContent.mjs.map +2 -2
  90. package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs +3 -4
  91. package/dist-esm/lib/ui/components/NavigationPanel/DefaultNavigationPanel.mjs.map +2 -2
  92. package/dist-esm/lib/ui/components/Spinner.mjs +3 -26
  93. package/dist-esm/lib/ui/components/Spinner.mjs.map +2 -2
  94. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +2 -1
  95. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
  96. package/dist-esm/lib/ui/components/menu-items.mjs +16 -0
  97. package/dist-esm/lib/ui/components/menu-items.mjs.map +2 -2
  98. package/dist-esm/lib/ui/components/primitives/Button/TldrawUiButtonIcon.mjs.map +2 -2
  99. package/dist-esm/lib/ui/components/primitives/TldrawUiDialog.mjs +1 -1
  100. package/dist-esm/lib/ui/components/primitives/TldrawUiDialog.mjs.map +2 -2
  101. package/dist-esm/lib/ui/components/primitives/TldrawUiIcon.mjs +36 -2
  102. package/dist-esm/lib/ui/components/primitives/TldrawUiIcon.mjs.map +2 -2
  103. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs +5 -2
  104. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map +2 -2
  105. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +1 -0
  106. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
  107. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.mjs.map +2 -2
  108. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +0 -2
  109. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
  110. package/dist-esm/lib/ui/context/actions.mjs +28 -1
  111. package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
  112. package/dist-esm/lib/ui/context/events.mjs.map +2 -2
  113. package/dist-esm/lib/ui/hooks/useClipboardEvents.mjs +24 -7
  114. package/dist-esm/lib/ui/hooks/useClipboardEvents.mjs.map +2 -2
  115. package/dist-esm/lib/ui/hooks/useKeyboardShortcuts.mjs +2 -2
  116. package/dist-esm/lib/ui/hooks/useKeyboardShortcuts.mjs.map +2 -2
  117. package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
  118. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +4 -0
  119. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
  120. package/dist-esm/lib/ui/version.mjs +3 -3
  121. package/dist-esm/lib/ui/version.mjs.map +1 -1
  122. package/package.json +4 -3
  123. package/src/index.ts +165 -159
  124. package/src/lib/TldrawImage.tsx +6 -2
  125. package/src/lib/canvas/TldrawCropHandles.tsx +1 -1
  126. package/src/lib/canvas/TldrawHandles.tsx +5 -1
  127. package/src/lib/canvas/TldrawOverlays.tsx +1 -1
  128. package/src/lib/canvas/TldrawSelectionForeground.tsx +5 -1
  129. package/src/lib/shapes/frame/FrameShapeUtil.tsx +5 -7
  130. package/src/lib/shapes/shared/PathBuilder.test.tsx +1 -1
  131. package/src/lib/shapes/shared/PathBuilder.tsx +35 -1
  132. package/src/lib/shapes/shared/PlainTextLabel.tsx +1 -0
  133. package/src/lib/shapes/shared/RichTextLabel.tsx +1 -0
  134. package/src/lib/shapes/text/TextShapeUtil.tsx +5 -12
  135. package/src/lib/styles.tsx +3 -1
  136. package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +8 -0
  137. package/src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx +2 -0
  138. package/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx +3 -4
  139. package/src/lib/ui/components/Spinner.tsx +2 -24
  140. package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +1 -0
  141. package/src/lib/ui/components/menu-items.tsx +17 -0
  142. package/src/lib/ui/components/primitives/Button/TldrawUiButtonIcon.tsx +2 -2
  143. package/src/lib/ui/components/primitives/TldrawUiDialog.tsx +1 -1
  144. package/src/lib/ui/components/primitives/TldrawUiIcon.tsx +41 -3
  145. package/src/lib/ui/components/primitives/TldrawUiSlider.tsx +5 -1
  146. package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +4 -0
  147. package/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx +2 -2
  148. package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +3 -4
  149. package/src/lib/ui/context/actions.tsx +30 -2
  150. package/src/lib/ui/context/events.tsx +2 -0
  151. package/src/lib/ui/hooks/useClipboardEvents.ts +31 -10
  152. package/src/lib/ui/hooks/useKeyboardShortcuts.ts +3 -2
  153. package/src/lib/ui/hooks/useTools.tsx +2 -1
  154. package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +4 -0
  155. package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +4 -0
  156. package/src/lib/ui/version.ts +3 -3
  157. package/src/lib/ui.css +8 -22
  158. package/src/test/Editor.test.tsx +68 -1
  159. package/src/test/commands/clipboard.test.ts +1 -1
  160. package/src/test/navigation.test.ts +254 -0
  161. package/tldraw.css +25 -26
  162. package/src/test/editor.test.ts +0 -77
@@ -1,5 +1,3 @@
1
- /// <reference types="react" />
2
-
3
1
  import { Atom } from '@tldraw/editor';
4
2
  import { BaseBoxShapeTool } from '@tldraw/editor';
5
3
  import { BaseBoxShapeUtil } from '@tldraw/editor';
@@ -10,7 +8,6 @@ import { BindingOnShapeIsolateOptions } from '@tldraw/editor';
10
8
  import { BindingUtil } from '@tldraw/editor';
11
9
  import { Box } from '@tldraw/editor';
12
10
  import { Circle2d } from '@tldraw/editor';
13
- import { ClipboardEvent as ClipboardEvent_2 } from 'react';
14
11
  import { ComponentType } from 'react';
15
12
  import { CSSProperties } from 'react';
16
13
  import { Editor } from '@tldraw/editor';
@@ -30,7 +27,6 @@ import { MigrationSequence } from '@tldraw/editor';
30
27
  import { NamedExoticComponent } from 'react';
31
28
  import { Node as Node_2 } from '@tiptap/pm/model';
32
29
  import { PerfectDashTerminal } from '@tldraw/editor';
33
- import { PointerEvent as PointerEvent_2 } from 'react';
34
30
  import { Polygon2d } from '@tldraw/editor';
35
31
  import { Polyline2d } from '@tldraw/editor';
36
32
  import * as React_2 from 'react';
@@ -68,12 +64,15 @@ import { TLBookmarkShapeProps } from '@tldraw/editor';
68
64
  import { TLClickEventInfo } from '@tldraw/editor';
69
65
  import { TLContent } from '@tldraw/editor';
70
66
  import { TLCropInfo } from '@tldraw/editor';
67
+ import { TLDefaultColorStyle } from '@tldraw/editor';
71
68
  import { TLDefaultColorTheme } from '@tldraw/editor';
72
69
  import { TLDefaultColorThemeColor } from '@tldraw/editor';
70
+ import { TLDefaultDashStyle } from '@tldraw/editor';
73
71
  import { TLDefaultFillStyle } from '@tldraw/editor';
74
72
  import { TLDefaultFontStyle } from '@tldraw/editor';
75
73
  import { TLDefaultHorizontalAlignStyle } from '@tldraw/editor';
76
74
  import { TLDefaultSizeStyle } from '@tldraw/editor';
75
+ import { TLDefaultTextAlignStyle } from '@tldraw/editor';
77
76
  import { TLDefaultVerticalAlignStyle } from '@tldraw/editor';
78
77
  import { TLDragShapesOutInfo } from '@tldraw/editor';
79
78
  import { TLDragShapesOverInfo } from '@tldraw/editor';
@@ -93,6 +92,7 @@ import { TLFrameShape } from '@tldraw/editor';
93
92
  import { TLFrameShapeProps } from '@tldraw/editor';
94
93
  import { TLGeometryOpts } from '@tldraw/editor';
95
94
  import { TLGeoShape } from '@tldraw/editor';
95
+ import { TLGeoShapeGeoStyle } from '@tldraw/editor';
96
96
  import { TLGeoShapeProps } from '@tldraw/editor';
97
97
  import { TLHandle } from '@tldraw/editor';
98
98
  import { TLHandleDragInfo } from '@tldraw/editor';
@@ -106,8 +106,10 @@ import { TLImageShapeProps } from '@tldraw/editor';
106
106
  import { TLKeyboardEventInfo } from '@tldraw/editor';
107
107
  import { TLLineShape } from '@tldraw/editor';
108
108
  import { TLLineShapePoint } from '@tldraw/editor';
109
+ import { TLLineShapeSplineStyle } from '@tldraw/editor';
109
110
  import { TLNoteShape } from '@tldraw/editor';
110
111
  import { TLNoteShapeProps } from '@tldraw/editor';
112
+ import { TLOpacityType } from '@tldraw/editor';
111
113
  import { TLPageId } from '@tldraw/editor';
112
114
  import { TLParentId } from '@tldraw/editor';
113
115
  import { TLPointerEventInfo } from '@tldraw/editor';
@@ -403,7 +405,7 @@ export declare class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape>
403
405
  index: IndexKey;
404
406
  isLocked: boolean;
405
407
  meta: JsonObject;
406
- opacity: number;
408
+ opacity: TLOpacityType;
407
409
  parentId: TLParentId;
408
410
  props: {
409
411
  assetId: null | TLAssetId;
@@ -422,7 +424,7 @@ export declare class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape>
422
424
  index: IndexKey;
423
425
  isLocked: boolean;
424
426
  meta: JsonObject;
425
- opacity: number;
427
+ opacity: TLOpacityType;
426
428
  parentId: TLParentId;
427
429
  props: {
428
430
  assetId: null | TLAssetId;
@@ -1064,8 +1066,8 @@ export declare function DistributeMenuItems(): JSX_2.Element;
1064
1066
  * @public
1065
1067
  */
1066
1068
  export declare function downsizeImage(blob: Blob, width: number, height: number, opts?: {
1067
- quality?: number | undefined;
1068
- type?: string | undefined;
1069
+ quality?: number;
1070
+ type?: string;
1069
1071
  }): Promise<Blob>;
1070
1072
 
1071
1073
  /** @public */
@@ -1634,26 +1636,23 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
1634
1636
  index: IndexKey;
1635
1637
  isLocked: boolean;
1636
1638
  meta: JsonObject;
1637
- opacity: number;
1639
+ opacity: TLOpacityType;
1638
1640
  parentId: TLParentId;
1639
1641
  props: {
1640
- align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
1641
- color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
1642
- dash: "dashed" | "dotted" | "draw" | "solid";
1643
- fill: "fill" | "none" | "pattern" | "semi" | "solid";
1644
- font: "draw" | "mono" | "sans" | "serif";
1645
- geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box";
1642
+ align: TLDefaultHorizontalAlignStyle;
1643
+ color: TLDefaultColorStyle;
1644
+ dash: TLDefaultDashStyle;
1645
+ fill: TLDefaultFillStyle;
1646
+ font: TLDefaultFontStyle;
1647
+ geo: TLGeoShapeGeoStyle;
1646
1648
  growY: number;
1647
1649
  h: number;
1648
- labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
1649
- richText: {
1650
- content: unknown[];
1651
- type: string;
1652
- };
1650
+ labelColor: TLDefaultColorStyle;
1651
+ richText: TLRichText;
1653
1652
  scale: number;
1654
- size: "l" | "m" | "s" | "xl";
1653
+ size: TLDefaultSizeStyle;
1655
1654
  url: string;
1656
- verticalAlign: "end" | "middle" | "start";
1655
+ verticalAlign: TLDefaultVerticalAlignStyle;
1657
1656
  w: number;
1658
1657
  };
1659
1658
  rotation: number;
@@ -1667,26 +1666,23 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
1667
1666
  index: IndexKey;
1668
1667
  isLocked: boolean;
1669
1668
  meta: JsonObject;
1670
- opacity: number;
1669
+ opacity: TLOpacityType;
1671
1670
  parentId: TLParentId;
1672
1671
  props: {
1673
- align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
1674
- color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
1675
- dash: "dashed" | "dotted" | "draw" | "solid";
1676
- fill: "fill" | "none" | "pattern" | "semi" | "solid";
1677
- font: "draw" | "mono" | "sans" | "serif";
1678
- geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box";
1672
+ align: TLDefaultHorizontalAlignStyle;
1673
+ color: TLDefaultColorStyle;
1674
+ dash: TLDefaultDashStyle;
1675
+ fill: TLDefaultFillStyle;
1676
+ font: TLDefaultFontStyle;
1677
+ geo: TLGeoShapeGeoStyle;
1679
1678
  growY: number;
1680
1679
  h: number;
1681
- labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
1682
- richText: {
1683
- content: unknown[];
1684
- type: string;
1685
- };
1680
+ labelColor: TLDefaultColorStyle;
1681
+ richText: TLRichText;
1686
1682
  scale: number;
1687
- size: "l" | "m" | "s" | "xl";
1683
+ size: TLDefaultSizeStyle;
1688
1684
  url: string;
1689
- verticalAlign: "end" | "middle" | "start";
1685
+ verticalAlign: TLDefaultVerticalAlignStyle;
1690
1686
  w: number;
1691
1687
  };
1692
1688
  rotation: number;
@@ -1700,7 +1696,7 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
1700
1696
  index: IndexKey;
1701
1697
  isLocked: boolean;
1702
1698
  meta: JsonObject;
1703
- opacity: number;
1699
+ opacity: TLOpacityType;
1704
1700
  parentId: TLParentId;
1705
1701
  props: {
1706
1702
  geo: "check-box";
@@ -1715,7 +1711,7 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
1715
1711
  index: IndexKey;
1716
1712
  isLocked: boolean;
1717
1713
  meta: JsonObject;
1718
- opacity: number;
1714
+ opacity: TLOpacityType;
1719
1715
  parentId: TLParentId;
1720
1716
  props: {
1721
1717
  geo: "rectangle";
@@ -1801,6 +1797,9 @@ export declare class HandTool extends StateNode {
1801
1797
  /** @public @react */
1802
1798
  export declare function HandToolbarItem(): JSX_2.Element;
1803
1799
 
1800
+ /** @public @react */
1801
+ export declare function HeartToolbarItem(): JSX_2.Element;
1802
+
1804
1803
  /** @public @react */
1805
1804
  export declare function HexagonToolbarItem(): JSX_2.Element;
1806
1805
 
@@ -1933,11 +1932,11 @@ export declare class LineShapeUtil extends ShapeUtil<TLLineShape> {
1933
1932
  index: IndexKey;
1934
1933
  isLocked: boolean;
1935
1934
  meta: JsonObject;
1936
- opacity: number;
1935
+ opacity: TLOpacityType;
1937
1936
  parentId: TLParentId;
1938
1937
  props: {
1939
- color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
1940
- dash: "dashed" | "dotted" | "draw" | "solid";
1938
+ color: TLDefaultColorStyle;
1939
+ dash: TLDefaultDashStyle;
1941
1940
  points: {
1942
1941
  [x: string]: {
1943
1942
  id: string;
@@ -1947,8 +1946,8 @@ export declare class LineShapeUtil extends ShapeUtil<TLLineShape> {
1947
1946
  } | TLLineShapePoint;
1948
1947
  };
1949
1948
  scale: number;
1950
- size: "l" | "m" | "s" | "xl";
1951
- spline: "cubic" | "line";
1949
+ size: TLDefaultSizeStyle;
1950
+ spline: TLLineShapeSplineStyle;
1952
1951
  };
1953
1952
  rotation: number;
1954
1953
  type: "line";
@@ -2026,23 +2025,20 @@ export declare class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
2026
2025
  index: IndexKey;
2027
2026
  isLocked: boolean;
2028
2027
  meta: JsonObject;
2029
- opacity: number;
2028
+ opacity: TLOpacityType;
2030
2029
  parentId: TLParentId;
2031
2030
  props: {
2032
- align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
2033
- color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
2034
- font: "draw" | "mono" | "sans" | "serif";
2031
+ align: TLDefaultHorizontalAlignStyle;
2032
+ color: TLDefaultColorStyle;
2033
+ font: TLDefaultFontStyle;
2035
2034
  fontSizeAdjustment: number;
2036
2035
  growY: number;
2037
- labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
2038
- richText: {
2039
- content: unknown[];
2040
- type: string;
2041
- };
2036
+ labelColor: TLDefaultColorStyle;
2037
+ richText: TLRichText;
2042
2038
  scale: number;
2043
- size: "l" | "m" | "s" | "xl";
2039
+ size: TLDefaultSizeStyle;
2044
2040
  url: string;
2045
- verticalAlign: "end" | "middle" | "start";
2041
+ verticalAlign: TLDefaultVerticalAlignStyle;
2046
2042
  };
2047
2043
  rotation: number;
2048
2044
  type: "note";
@@ -2055,23 +2051,20 @@ export declare class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
2055
2051
  index: IndexKey;
2056
2052
  isLocked: boolean;
2057
2053
  meta: JsonObject;
2058
- opacity: number;
2054
+ opacity: TLOpacityType;
2059
2055
  parentId: TLParentId;
2060
2056
  props: {
2061
- align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
2062
- color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
2063
- font: "draw" | "mono" | "sans" | "serif";
2057
+ align: TLDefaultHorizontalAlignStyle;
2058
+ color: TLDefaultColorStyle;
2059
+ font: TLDefaultFontStyle;
2064
2060
  fontSizeAdjustment: number;
2065
2061
  growY: number;
2066
- labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
2067
- richText: {
2068
- content: unknown[];
2069
- type: string;
2070
- };
2062
+ labelColor: TLDefaultColorStyle;
2063
+ richText: TLRichText;
2071
2064
  scale: number;
2072
- size: "l" | "m" | "s" | "xl";
2065
+ size: TLDefaultSizeStyle;
2073
2066
  url: string;
2074
- verticalAlign: "end" | "middle" | "start";
2067
+ verticalAlign: TLDefaultVerticalAlignStyle;
2075
2068
  };
2076
2069
  rotation: number;
2077
2070
  type: "note";
@@ -2156,6 +2149,7 @@ export declare class PathBuilder {
2156
2149
  circularArcTo(radius: number, largeArcFlag: boolean, sweepFlag: boolean, x2: number, y2: number, opts?: PathBuilderCommandOpts): this;
2157
2150
  arcTo(rx: number, ry: number, largeArcFlag: boolean, sweepFlag: boolean, xAxisRotationRadians: number, x2: number, y2: number, opts?: PathBuilderCommandOpts): this;
2158
2151
  cubicBezierTo(x: number, y: number, cp1X: number, cp1Y: number, cp2X: number, cp2Y: number, opts?: PathBuilderCommandOpts): this;
2152
+ private cubicBezierToWithResolution;
2159
2153
  close(): this;
2160
2154
  toD(opts?: PathBuilderToDOpts): string;
2161
2155
  toSvg(opts: PathBuilderOpts): JSX_2.Element;
@@ -2494,7 +2488,7 @@ export declare interface StylePickerSetProps {
2494
2488
 
2495
2489
  /** @public */
2496
2490
  export declare type StyleValuesForUi<T> = readonly {
2497
- readonly icon: string;
2491
+ readonly icon: string | TLUiIconJsx;
2498
2492
  readonly value: T;
2499
2493
  }[];
2500
2494
 
@@ -2594,19 +2588,16 @@ export declare class TextShapeUtil extends ShapeUtil<TLTextShape> {
2594
2588
  index: IndexKey;
2595
2589
  isLocked: boolean;
2596
2590
  meta: JsonObject;
2597
- opacity: number;
2591
+ opacity: TLOpacityType;
2598
2592
  parentId: TLParentId;
2599
2593
  props: {
2600
2594
  autoSize: boolean;
2601
- color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
2602
- font: "draw" | "mono" | "sans" | "serif";
2603
- richText: {
2604
- content: unknown[];
2605
- type: string;
2606
- };
2595
+ color: TLDefaultColorStyle;
2596
+ font: TLDefaultFontStyle;
2597
+ richText: TLRichText;
2607
2598
  scale: number;
2608
- size: "l" | "m" | "s" | "xl";
2609
- textAlign: "end" | "middle" | "start";
2599
+ size: TLDefaultSizeStyle;
2600
+ textAlign: TLDefaultTextAlignStyle;
2610
2601
  w: number;
2611
2602
  };
2612
2603
  rotation: number;
@@ -3134,7 +3125,7 @@ export declare interface TLUiA11yContextType {
3134
3125
 
3135
3126
  /** @public */
3136
3127
  export declare interface TLUiActionItem<TransationKey extends string = string, IconType extends string = string> {
3137
- icon?: IconType;
3128
+ icon?: IconType | React_2.ReactElement;
3138
3129
  id: string;
3139
3130
  kbd?: string;
3140
3131
  label?: {
@@ -3142,6 +3133,7 @@ export declare interface TLUiActionItem<TransationKey extends string = string, I
3142
3133
  } | TransationKey;
3143
3134
  readonlyOk?: boolean;
3144
3135
  checkbox?: boolean;
3136
+ isRequiredA11yAction?: boolean;
3145
3137
  onSelect(source: TLUiEventSource): Promise<void> | void;
3146
3138
  }
3147
3139
 
@@ -3170,7 +3162,7 @@ export declare interface TLUiButtonCheckProps {
3170
3162
 
3171
3163
  /** @public */
3172
3164
  export declare interface TLUiButtonIconProps {
3173
- icon: string;
3165
+ icon: string | TLUiIconJsx;
3174
3166
  small?: boolean;
3175
3167
  invertIcon?: boolean;
3176
3168
  }
@@ -3528,6 +3520,7 @@ export declare interface TLUiEventMap {
3528
3520
  'toggle-paste-at-cursor': null;
3529
3521
  'toggle-lock': null;
3530
3522
  'toggle-reduce-motion': null;
3523
+ 'toggle-keyboard-shortcuts': null;
3531
3524
  'toggle-edge-scrolling': null;
3532
3525
  'color-scheme': {
3533
3526
  value: string;
@@ -3552,6 +3545,7 @@ export declare interface TLUiEventMap {
3552
3545
  'copy-link': null;
3553
3546
  'image-replace': null;
3554
3547
  'video-replace': null;
3548
+ 'open-kbd-shortcuts': null;
3555
3549
  'rich-text': {
3556
3550
  operation: 'bold' | 'bulletList' | 'heading' | 'link-edit' | 'link-remove' | 'link-visit' | 'link' | 'strike';
3557
3551
  };
@@ -3571,9 +3565,12 @@ export declare interface TLUiHelpMenuProps {
3571
3565
  children?: ReactNode;
3572
3566
  }
3573
3567
 
3568
+ /** @public */
3569
+ export declare type TLUiIconJsx = ReactElement<React.HTMLAttributes<HTMLDivElement>>;
3570
+
3574
3571
  /** @public */
3575
3572
  export declare interface TLUiIconProps extends React.HTMLAttributes<HTMLDivElement> {
3576
- icon: Exclude<string, TLUiIconType> | TLUiIconType;
3573
+ icon: Exclude<string, TLUiIconType> | TLUiIconJsx | TLUiIconType;
3577
3574
  label: string;
3578
3575
  small?: boolean;
3579
3576
  color?: string;
@@ -3649,7 +3646,7 @@ export declare type TLUiMenuActionItemProps = {
3649
3646
 
3650
3647
  /** @public */
3651
3648
  export declare interface TLUiMenuCheckboxItemProps<TranslationKey extends string = string, IconType extends string = string> {
3652
- icon?: IconType;
3649
+ icon?: IconType | TLUiIconJsx;
3653
3650
  id: string;
3654
3651
  kbd?: string;
3655
3652
  title?: string;
@@ -3692,11 +3689,11 @@ export declare interface TLUiMenuItemProps<TranslationKey extends string = strin
3692
3689
  /**
3693
3690
  * The icon to display on the item. Icons are only shown in certain menu types.
3694
3691
  */
3695
- icon?: IconType;
3692
+ icon?: IconType | TLUiIconJsx;
3696
3693
  /**
3697
3694
  * An icon to display to the left of the menu item.
3698
3695
  */
3699
- iconLeft?: IconType;
3696
+ iconLeft?: IconType | TLUiIconJsx;
3700
3697
  /**
3701
3698
  * The keyboard shortcut to display on the item.
3702
3699
  */
@@ -3803,6 +3800,7 @@ export declare interface TLUiSliderProps {
3803
3800
  onValueChange(value: number): void;
3804
3801
  onHistoryMark(id: string): void;
3805
3802
  'data-testid'?: string;
3803
+ ariaValueModifier?: number;
3806
3804
  }
3807
3805
 
3808
3806
  /** @public */
@@ -3893,7 +3891,7 @@ export declare interface TLUiToolItem<TranslationKey extends string = string, Ic
3893
3891
  id: string;
3894
3892
  label: TranslationKey;
3895
3893
  shortcutsLabel?: TranslationKey;
3896
- icon: IconType;
3894
+ icon: IconType | TLUiIconJsx;
3897
3895
  onSelect(source: TLUiEventSource): void;
3898
3896
  /**
3899
3897
  * The keyboard shortcut for this tool. This is a string that can be a single key,
@@ -3930,7 +3928,7 @@ export declare interface TLUiTranslation {
3930
3928
  export declare type TLUiTranslationContextType = TLUiTranslation;
3931
3929
 
3932
3930
  /** @public */
3933
- 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.pan-camera' | 'a11y.repeat-shape' | '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.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-lock' | 'action.toggle-paste-at-cursor.menu' | 'action.toggle-paste-at-cursor' | 'action.toggle-reduce-motion.menu' | 'action.toggle-reduce-motion' | 'action.toggle-snap-mode.menu' | 'action.toggle-snap-mode' | 'action.toggle-tool-lock.menu' | 'action.toggle-tool-lock' | 'action.toggle-transparent.context-menu' | 'action.toggle-transparent.menu' | 'action.toggle-transparent' | 'action.toggle-wrap-mode.menu' | 'action.toggle-wrap-mode' | 'action.undo' | 'action.ungroup' | 'action.unlock-all' | 'action.zoom-in' | 'action.zoom-out' | 'action.zoom-to-100' | 'action.zoom-to-fit' | 'action.zoom-to-selection' | 'actions-menu.title' | 'align-style.end' | 'align-style.justify' | 'align-style.middle' | 'align-style.start' | 'app.loading' | 'arrow-kind-style.arc' | 'arrow-kind-style.elbow' | 'arrowheadEnd-style.arrow' | 'arrowheadEnd-style.bar' | 'arrowheadEnd-style.diamond' | 'arrowheadEnd-style.dot' | 'arrowheadEnd-style.inverted' | 'arrowheadEnd-style.none' | 'arrowheadEnd-style.pipe' | 'arrowheadEnd-style.square' | 'arrowheadEnd-style.triangle' | 'arrowheadStart-style.arrow' | 'arrowheadStart-style.bar' | 'arrowheadStart-style.diamond' | 'arrowheadStart-style.dot' | 'arrowheadStart-style.inverted' | 'arrowheadStart-style.none' | 'arrowheadStart-style.pipe' | 'arrowheadStart-style.square' | 'arrowheadStart-style.triangle' | 'assets.files.amount-too-many' | 'assets.files.size-too-big' | 'assets.files.type-not-allowed' | 'assets.files.upload-failed' | 'assets.url.failed' | 'color-style.black' | 'color-style.blue' | 'color-style.green' | 'color-style.grey' | 'color-style.light-blue' | 'color-style.light-green' | 'color-style.light-red' | 'color-style.light-violet' | 'color-style.orange' | 'color-style.red' | 'color-style.violet' | 'color-style.white' | 'color-style.yellow' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.edit' | 'context-menu.export-all-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context-menu.title' | 'context.pages.new-page' | 'cursor-chat.type-to-chat' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'document-name-menu.copy-link' | 'document.default-name' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.external-link' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | 'embed-dialog.back' | 'embed-dialog.cancel' | 'embed-dialog.create' | 'embed-dialog.instruction' | 'embed-dialog.invalid-url' | 'embed-dialog.title' | 'embed-dialog.url' | 'file-system.confirm-clear.cancel' | 'file-system.confirm-clear.continue' | 'file-system.confirm-clear.description' | 'file-system.confirm-clear.dont-show-again' | 'file-system.confirm-clear.title' | 'file-system.confirm-open.cancel' | 'file-system.confirm-open.description' | 'file-system.confirm-open.dont-show-again' | 'file-system.confirm-open.open' | 'file-system.confirm-open.title' | 'file-system.file-open-error.file-format-version-too-new' | 'file-system.file-open-error.generic-corrupted-file' | 'file-system.file-open-error.not-a-tldraw-file' | 'file-system.file-open-error.title' | 'file-system.shared-document-file-open-error.description' | 'file-system.shared-document-file-open-error.title' | 'fill-style.fill' | 'fill-style.none' | 'fill-style.pattern' | 'fill-style.semi' | 'fill-style.solid' | 'focus-mode.toggle-focus-mode' | 'font-style.draw' | 'font-style.mono' | 'font-style.sans' | 'font-style.serif' | 'geo-style.arrow-down' | 'geo-style.arrow-left' | 'geo-style.arrow-right' | 'geo-style.arrow-up' | 'geo-style.check-box' | 'geo-style.cloud' | 'geo-style.diamond' | 'geo-style.ellipse' | 'geo-style.heart' | 'geo-style.hexagon' | 'geo-style.octagon' | 'geo-style.oval' | 'geo-style.pentagon' | 'geo-style.rectangle' | 'geo-style.rhombus' | 'geo-style.star' | 'geo-style.trapezoid' | 'geo-style.triangle' | 'geo-style.x-box' | 'handle.crop.bottom-left' | 'handle.crop.bottom-right' | 'handle.crop.bottom' | 'handle.crop.left' | 'handle.crop.right' | 'handle.crop.top-left' | 'handle.crop.top-right' | 'handle.crop.top' | 'handle.resize-bottom-left' | 'handle.resize-bottom-right' | 'handle.resize-bottom' | 'handle.resize-left' | 'handle.resize-right' | 'handle.resize-top-left' | 'handle.resize-top-right' | 'handle.resize-top' | 'handle.rotate.bottom_left_rotate' | 'handle.rotate.bottom_right_rotate' | 'handle.rotate.mobile_rotate' | 'handle.rotate.top_left_rotate' | 'handle.rotate.top_right_rotate' | 'help-menu.about' | 'help-menu.discord' | 'help-menu.github' | 'help-menu.import-tldr-file' | 'help-menu.keyboard-shortcuts' | 'help-menu.privacy' | 'help-menu.terms' | 'help-menu.title' | 'help-menu.twitter' | 'menu.copy-as' | 'menu.edit' | 'menu.export-as' | 'menu.file' | 'menu.language' | 'menu.preferences' | 'menu.theme' | 'menu.title' | 'menu.view' | 'navigation-zone.minimap' | 'navigation-zone.title' | 'navigation-zone.toggle-minimap' | 'navigation-zone.zoom' | 'opacity-style.0.1' | 'opacity-style.0.25' | 'opacity-style.0.5' | 'opacity-style.0.75' | 'opacity-style.1' | 'page-menu.create-new-page' | 'page-menu.edit-done' | 'page-menu.edit-start' | 'page-menu.go-to-page' | 'page-menu.max-page-count-reached' | 'page-menu.new-page-initial-name' | 'page-menu.submenu.delete' | 'page-menu.submenu.duplicate-page' | 'page-menu.submenu.move-down' | 'page-menu.submenu.move-up' | 'page-menu.submenu.rename' | 'page-menu.submenu.title' | 'page-menu.title' | 'people-menu.anonymous-user' | 'people-menu.avatar-color' | 'people-menu.change-color' | 'people-menu.change-name' | 'people-menu.follow' | 'people-menu.following' | 'people-menu.invite' | 'people-menu.leading' | 'people-menu.title' | 'people-menu.user' | 'share-menu.copied' | 'share-menu.copy-link-note' | 'share-menu.copy-link' | 'share-menu.copy-readonly-link-note' | 'share-menu.copy-readonly-link' | 'share-menu.create-snapshot-link' | 'share-menu.creating-project' | 'share-menu.fork-note' | 'share-menu.offline-note' | 'share-menu.project-too-large' | 'share-menu.save-note' | 'share-menu.share-project' | 'share-menu.snapshot-link-note' | 'share-menu.title' | 'share-menu.upload-failed' | 'sharing.confirm-leave.cancel' | 'sharing.confirm-leave.description' | 'sharing.confirm-leave.dont-show-again' | 'sharing.confirm-leave.leave' | 'sharing.confirm-leave.title' | 'shortcuts-dialog.a11y' | 'shortcuts-dialog.collaboration' | 'shortcuts-dialog.edit' | 'shortcuts-dialog.file' | 'shortcuts-dialog.preferences' | 'shortcuts-dialog.text-formatting' | 'shortcuts-dialog.title' | 'shortcuts-dialog.tools' | 'shortcuts-dialog.transform' | 'shortcuts-dialog.view' | 'size-style.l' | 'size-style.m' | 'size-style.s' | 'size-style.xl' | 'spline-style.cubic' | 'spline-style.line' | 'status.offline' | 'style-panel.align' | 'style-panel.arrow-kind' | 'style-panel.arrowhead-end' | 'style-panel.arrowhead-start' | 'style-panel.arrowheads' | 'style-panel.color' | 'style-panel.dash' | 'style-panel.fill' | 'style-panel.font' | 'style-panel.geo' | 'style-panel.label-align' | 'style-panel.mixed' | 'style-panel.opacity' | 'style-panel.position' | 'style-panel.size' | 'style-panel.spline' | 'style-panel.title' | 'style-panel.vertical-align' | 'theme.dark' | 'theme.light' | 'theme.system' | 'toast.close' | 'toast.error.copy-fail.desc' | 'toast.error.copy-fail.title' | 'toast.error.export-fail.desc' | 'toast.error.export-fail.title' | 'toast.error' | 'toast.info' | 'toast.success' | 'toast.warning' | 'tool-panel.more' | 'tool-panel.title' | 'tool.arrow-down' | 'tool.arrow-left' | 'tool.arrow-right' | 'tool.arrow-up' | 'tool.arrow' | 'tool.aspect-ratio.circle' | 'tool.aspect-ratio.landscape' | 'tool.aspect-ratio.original' | 'tool.aspect-ratio.portrait' | 'tool.aspect-ratio.square' | 'tool.aspect-ratio.wide' | 'tool.aspect-ratio' | 'tool.bookmark' | 'tool.check-box' | 'tool.cloud' | 'tool.diamond' | 'tool.draw' | 'tool.ellipse' | 'tool.embed' | 'tool.eraser' | 'tool.flip-horz' | 'tool.flip-vert' | 'tool.frame' | 'tool.hand' | 'tool.heart' | 'tool.hexagon' | 'tool.highlight' | 'tool.image-crop' | 'tool.image-toolbar-title' | 'tool.image-zoom' | 'tool.laser' | 'tool.line' | 'tool.media-alt-text-confirm' | 'tool.media-alt-text-desc' | 'tool.media-alt-text' | 'tool.media' | 'tool.note' | 'tool.octagon' | 'tool.oval' | 'tool.pentagon' | 'tool.pointer-down' | 'tool.rectangle' | 'tool.replace-media' | 'tool.rhombus' | 'tool.rich-text-bold' | 'tool.rich-text-bulletList' | 'tool.rich-text-code' | 'tool.rich-text-header' | 'tool.rich-text-highlight' | 'tool.rich-text-italic' | 'tool.rich-text-link-remove' | 'tool.rich-text-link-visit' | 'tool.rich-text-link' | 'tool.rich-text-orderedList' | 'tool.rich-text-strikethrough' | 'tool.rich-text-toolbar-title' | 'tool.rotate-cw' | 'tool.select' | 'tool.star' | 'tool.text' | 'tool.trapezoid' | 'tool.triangle' | 'tool.x-box' | 'ui.checked' | 'ui.close' | 'ui.unchecked' | 'verticalAlign-style.end' | 'verticalAlign-style.middle' | 'verticalAlign-style.start' | 'vscode.file-open.backup-failed' | 'vscode.file-open.backup-saved' | 'vscode.file-open.backup' | 'vscode.file-open.desc' | 'vscode.file-open.dont-show-again' | 'vscode.file-open.open';
3931
+ 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.select-shape-direction' | 'a11y.select-shape' | 'a11y.shape-image' | 'a11y.shape-index' | 'a11y.shape-video' | 'a11y.shrink-shape' | 'a11y.skip-to-main-content' | 'a11y.status' | 'action.align-bottom' | 'action.align-center-horizontal.short' | 'action.align-center-horizontal' | 'action.align-center-vertical.short' | 'action.align-center-vertical' | 'action.align-left' | 'action.align-right' | 'action.align-top' | 'action.back-to-content' | 'action.bring-forward' | 'action.bring-to-front' | 'action.convert-to-bookmark' | 'action.convert-to-embed' | 'action.copy-as-png.short' | 'action.copy-as-png' | 'action.copy-as-svg.short' | 'action.copy-as-svg' | 'action.copy' | 'action.cut' | 'action.delete' | 'action.distribute-horizontal.short' | 'action.distribute-horizontal' | 'action.distribute-vertical.short' | 'action.distribute-vertical' | 'action.download-original' | 'action.duplicate' | 'action.edit-link' | 'action.exit-pen-mode' | 'action.export-all-as-png.short' | 'action.export-all-as-png' | 'action.export-all-as-svg.short' | 'action.export-all-as-svg' | 'action.export-as-png.short' | 'action.export-as-png' | 'action.export-as-svg.short' | 'action.export-as-svg' | 'action.fit-frame-to-content' | 'action.flatten-to-image' | 'action.flip-horizontal.short' | 'action.flip-horizontal' | 'action.flip-vertical.short' | 'action.flip-vertical' | 'action.fork-project-on-tldraw' | 'action.fork-project' | 'action.group' | 'action.insert-embed' | 'action.insert-media' | 'action.leave-shared-project' | 'action.new-project' | 'action.new-shared-project' | 'action.open-cursor-chat' | 'action.open-embed-link' | 'action.open-file' | 'action.open-kbd-shortcuts' | 'action.pack' | 'action.paste-error-description' | 'action.paste-error-title' | 'action.paste' | 'action.print' | 'action.redo' | 'action.remove-frame' | 'action.rename' | 'action.rotate-ccw' | 'action.rotate-cw' | 'action.save-copy' | 'action.select-all' | 'action.select-none' | 'action.send-backward' | 'action.send-to-back' | 'action.share-project' | 'action.stack-horizontal.short' | 'action.stack-horizontal' | 'action.stack-vertical.short' | 'action.stack-vertical' | 'action.stop-following' | 'action.stretch-horizontal.short' | 'action.stretch-horizontal' | 'action.stretch-vertical.short' | 'action.stretch-vertical' | 'action.toggle-auto-size' | 'action.toggle-dark-mode.menu' | 'action.toggle-dark-mode' | 'action.toggle-debug-mode.menu' | 'action.toggle-debug-mode' | 'action.toggle-dynamic-size-mode.menu' | 'action.toggle-dynamic-size-mode' | 'action.toggle-edge-scrolling.menu' | 'action.toggle-edge-scrolling' | 'action.toggle-focus-mode.menu' | 'action.toggle-focus-mode' | 'action.toggle-grid.menu' | 'action.toggle-grid' | 'action.toggle-keyboard-shortcuts.menu' | 'action.toggle-keyboard-shortcuts' | 'action.toggle-lock' | 'action.toggle-paste-at-cursor.menu' | 'action.toggle-paste-at-cursor' | 'action.toggle-reduce-motion.menu' | 'action.toggle-reduce-motion' | 'action.toggle-snap-mode.menu' | 'action.toggle-snap-mode' | 'action.toggle-tool-lock.menu' | 'action.toggle-tool-lock' | 'action.toggle-transparent.context-menu' | 'action.toggle-transparent.menu' | 'action.toggle-transparent' | 'action.toggle-wrap-mode.menu' | 'action.toggle-wrap-mode' | 'action.undo' | 'action.ungroup' | 'action.unlock-all' | 'action.zoom-in' | 'action.zoom-out' | 'action.zoom-to-100' | 'action.zoom-to-fit' | 'action.zoom-to-selection' | 'actions-menu.title' | 'align-style.end' | 'align-style.justify' | 'align-style.middle' | 'align-style.start' | 'app.loading' | 'arrow-kind-style.arc' | 'arrow-kind-style.elbow' | 'arrowheadEnd-style.arrow' | 'arrowheadEnd-style.bar' | 'arrowheadEnd-style.diamond' | 'arrowheadEnd-style.dot' | 'arrowheadEnd-style.inverted' | 'arrowheadEnd-style.none' | 'arrowheadEnd-style.pipe' | 'arrowheadEnd-style.square' | 'arrowheadEnd-style.triangle' | 'arrowheadStart-style.arrow' | 'arrowheadStart-style.bar' | 'arrowheadStart-style.diamond' | 'arrowheadStart-style.dot' | 'arrowheadStart-style.inverted' | 'arrowheadStart-style.none' | 'arrowheadStart-style.pipe' | 'arrowheadStart-style.square' | 'arrowheadStart-style.triangle' | 'assets.files.amount-too-many' | 'assets.files.size-too-big' | 'assets.files.type-not-allowed' | 'assets.files.upload-failed' | 'assets.url.failed' | 'color-style.black' | 'color-style.blue' | 'color-style.green' | 'color-style.grey' | 'color-style.light-blue' | 'color-style.light-green' | 'color-style.light-red' | 'color-style.light-violet' | 'color-style.orange' | 'color-style.red' | 'color-style.violet' | 'color-style.white' | 'color-style.yellow' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.edit' | 'context-menu.export-all-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context-menu.title' | 'context.pages.new-page' | 'cursor-chat.type-to-chat' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'document-name-menu.copy-link' | 'document.default-name' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.external-link' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | 'embed-dialog.back' | 'embed-dialog.cancel' | 'embed-dialog.create' | 'embed-dialog.instruction' | 'embed-dialog.invalid-url' | 'embed-dialog.title' | 'embed-dialog.url' | 'file-system.confirm-clear.cancel' | 'file-system.confirm-clear.continue' | 'file-system.confirm-clear.description' | 'file-system.confirm-clear.dont-show-again' | 'file-system.confirm-clear.title' | 'file-system.confirm-open.cancel' | 'file-system.confirm-open.description' | 'file-system.confirm-open.dont-show-again' | 'file-system.confirm-open.open' | 'file-system.confirm-open.title' | 'file-system.file-open-error.file-format-version-too-new' | 'file-system.file-open-error.generic-corrupted-file' | 'file-system.file-open-error.not-a-tldraw-file' | 'file-system.file-open-error.title' | 'file-system.shared-document-file-open-error.description' | 'file-system.shared-document-file-open-error.title' | 'fill-style.fill' | 'fill-style.none' | 'fill-style.pattern' | 'fill-style.semi' | 'fill-style.solid' | 'focus-mode.toggle-focus-mode' | 'font-style.draw' | 'font-style.mono' | 'font-style.sans' | 'font-style.serif' | 'geo-style.arrow-down' | 'geo-style.arrow-left' | 'geo-style.arrow-right' | 'geo-style.arrow-up' | 'geo-style.check-box' | 'geo-style.cloud' | 'geo-style.diamond' | 'geo-style.ellipse' | 'geo-style.heart' | 'geo-style.hexagon' | 'geo-style.octagon' | 'geo-style.oval' | 'geo-style.pentagon' | 'geo-style.rectangle' | 'geo-style.rhombus' | 'geo-style.star' | 'geo-style.trapezoid' | 'geo-style.triangle' | 'geo-style.x-box' | 'handle.crop.bottom-left' | 'handle.crop.bottom-right' | 'handle.crop.bottom' | 'handle.crop.left' | 'handle.crop.right' | 'handle.crop.top-left' | 'handle.crop.top-right' | 'handle.crop.top' | 'handle.resize-bottom-left' | 'handle.resize-bottom-right' | 'handle.resize-bottom' | 'handle.resize-left' | 'handle.resize-right' | 'handle.resize-top-left' | 'handle.resize-top-right' | 'handle.resize-top' | 'handle.rotate.bottom_left_rotate' | 'handle.rotate.bottom_right_rotate' | 'handle.rotate.mobile_rotate' | 'handle.rotate.top_left_rotate' | 'handle.rotate.top_right_rotate' | 'help-menu.about' | 'help-menu.discord' | 'help-menu.github' | 'help-menu.import-tldr-file' | 'help-menu.keyboard-shortcuts' | 'help-menu.privacy' | 'help-menu.terms' | 'help-menu.title' | 'help-menu.twitter' | 'menu.copy-as' | 'menu.edit' | 'menu.export-as' | 'menu.file' | 'menu.language' | 'menu.preferences' | 'menu.theme' | 'menu.title' | 'menu.view' | 'navigation-zone.minimap' | 'navigation-zone.title' | 'navigation-zone.toggle-minimap' | 'navigation-zone.zoom' | 'opacity-style.0.1' | 'opacity-style.0.25' | 'opacity-style.0.5' | 'opacity-style.0.75' | 'opacity-style.1' | 'page-menu.create-new-page' | 'page-menu.edit-done' | 'page-menu.edit-start' | 'page-menu.go-to-page' | 'page-menu.max-page-count-reached' | 'page-menu.new-page-initial-name' | 'page-menu.submenu.delete' | 'page-menu.submenu.duplicate-page' | 'page-menu.submenu.move-down' | 'page-menu.submenu.move-up' | 'page-menu.submenu.rename' | 'page-menu.submenu.title' | 'page-menu.title' | 'people-menu.anonymous-user' | 'people-menu.avatar-color' | 'people-menu.change-color' | 'people-menu.change-name' | 'people-menu.follow' | 'people-menu.following' | 'people-menu.invite' | 'people-menu.leading' | 'people-menu.title' | 'people-menu.user' | 'share-menu.copied' | 'share-menu.copy-link-note' | 'share-menu.copy-link' | 'share-menu.copy-readonly-link-note' | 'share-menu.copy-readonly-link' | 'share-menu.create-snapshot-link' | 'share-menu.creating-project' | 'share-menu.fork-note' | 'share-menu.offline-note' | 'share-menu.project-too-large' | 'share-menu.save-note' | 'share-menu.share-project' | 'share-menu.snapshot-link-note' | 'share-menu.title' | 'share-menu.upload-failed' | 'sharing.confirm-leave.cancel' | 'sharing.confirm-leave.description' | 'sharing.confirm-leave.dont-show-again' | 'sharing.confirm-leave.leave' | 'sharing.confirm-leave.title' | 'shortcuts-dialog.a11y' | 'shortcuts-dialog.collaboration' | 'shortcuts-dialog.edit' | 'shortcuts-dialog.file' | 'shortcuts-dialog.preferences' | 'shortcuts-dialog.text-formatting' | 'shortcuts-dialog.title' | 'shortcuts-dialog.tools' | 'shortcuts-dialog.transform' | 'shortcuts-dialog.view' | 'size-style.l' | 'size-style.m' | 'size-style.s' | 'size-style.xl' | 'spline-style.cubic' | 'spline-style.line' | 'status.offline' | 'style-panel.align' | 'style-panel.arrow-kind' | 'style-panel.arrowhead-end' | 'style-panel.arrowhead-start' | 'style-panel.arrowheads' | 'style-panel.color' | 'style-panel.dash' | 'style-panel.fill' | 'style-panel.font' | 'style-panel.geo' | 'style-panel.label-align' | 'style-panel.mixed' | 'style-panel.opacity' | 'style-panel.position' | 'style-panel.size' | 'style-panel.spline' | 'style-panel.title' | 'style-panel.vertical-align' | 'theme.dark' | 'theme.light' | 'theme.system' | 'toast.close' | 'toast.error.copy-fail.desc' | 'toast.error.copy-fail.title' | 'toast.error.export-fail.desc' | 'toast.error.export-fail.title' | 'toast.error' | 'toast.info' | 'toast.success' | 'toast.warning' | 'tool-panel.more' | 'tool-panel.title' | 'tool.arrow-down' | 'tool.arrow-left' | 'tool.arrow-right' | 'tool.arrow-up' | 'tool.arrow' | 'tool.aspect-ratio.circle' | 'tool.aspect-ratio.landscape' | 'tool.aspect-ratio.original' | 'tool.aspect-ratio.portrait' | 'tool.aspect-ratio.square' | 'tool.aspect-ratio.wide' | 'tool.aspect-ratio' | 'tool.bookmark' | 'tool.check-box' | 'tool.cloud' | 'tool.diamond' | 'tool.draw' | 'tool.ellipse' | 'tool.embed' | 'tool.eraser' | 'tool.flip-horz' | 'tool.flip-vert' | 'tool.frame' | 'tool.hand' | 'tool.heart' | 'tool.hexagon' | 'tool.highlight' | 'tool.image-crop' | 'tool.image-toolbar-title' | 'tool.image-zoom' | 'tool.laser' | 'tool.line' | 'tool.media-alt-text-confirm' | 'tool.media-alt-text-desc' | 'tool.media-alt-text' | 'tool.media' | 'tool.note' | 'tool.octagon' | 'tool.oval' | 'tool.pentagon' | 'tool.pointer-down' | 'tool.rectangle' | 'tool.replace-media' | 'tool.rhombus' | 'tool.rich-text-bold' | 'tool.rich-text-bulletList' | 'tool.rich-text-code' | 'tool.rich-text-header' | 'tool.rich-text-highlight' | 'tool.rich-text-italic' | 'tool.rich-text-link-remove' | 'tool.rich-text-link-visit' | 'tool.rich-text-link' | 'tool.rich-text-orderedList' | 'tool.rich-text-strikethrough' | 'tool.rich-text-toolbar-title' | 'tool.rotate-cw' | 'tool.select' | 'tool.star' | 'tool.text' | 'tool.trapezoid' | 'tool.triangle' | 'tool.x-box' | 'ui.checked' | 'ui.close' | 'ui.unchecked' | 'verticalAlign-style.end' | 'verticalAlign-style.middle' | 'verticalAlign-style.start' | 'vscode.file-open.backup-failed' | 'vscode.file-open.backup-saved' | 'vscode.file-open.backup' | 'vscode.file-open.desc' | 'vscode.file-open.dont-show-again' | 'vscode.file-open.open';
3934
3932
 
3935
3933
  /** @public */
3936
3934
  export declare interface TLUiTranslationProviderProps {
@@ -4042,6 +4040,9 @@ export declare function ToggleFocusModeItem(): JSX_2.Element;
4042
4040
  /** @public @react */
4043
4041
  export declare function ToggleGridItem(): JSX_2.Element;
4044
4042
 
4043
+ /** @public @react */
4044
+ export declare function ToggleKeyboardShortcutsItem(): JSX_2.Element;
4045
+
4045
4046
  /** @public @react */
4046
4047
  export declare function ToggleLockMenuItem(): JSX_2.Element | null;
4047
4048
 
@@ -4149,10 +4150,10 @@ export declare function useDefaultColorTheme(): {
4149
4150
  /** @public */
4150
4151
  export declare function useDefaultHelpers(): {
4151
4152
  addDialog: (dialog: Omit<TLUiDialog, "id"> & {
4152
- id?: string | undefined;
4153
+ id?: string;
4153
4154
  }) => string;
4154
4155
  addToast: (toast: Omit<TLUiToast, "id"> & {
4155
- id?: string | undefined;
4156
+ id?: string;
4156
4157
  }) => string;
4157
4158
  clearDialogs: () => void;
4158
4159
  clearToasts: () => void;
@@ -4163,11 +4164,11 @@ export declare function useDefaultHelpers(): {
4163
4164
  getEmbedDefinition: (url: string) => TLEmbedResult;
4164
4165
  insertMedia: () => Promise<void>;
4165
4166
  isMobile: boolean;
4166
- msg: (id?: string | undefined) => string;
4167
- paste: (data: ClipboardItem[] | DataTransfer, source: TLUiEventSource, point?: VecLike | undefined) => Promise<void>;
4167
+ msg: (id?: Exclude<string, TLUiTranslationKey> | string) => string;
4168
+ paste: (data: ClipboardItem[] | DataTransfer, source: TLUiEventSource, point?: VecLike) => Promise<void>;
4168
4169
  printSelectionOrPages: () => Promise<void>;
4169
4170
  removeDialog: (id: string) => string;
4170
- removeToast: (id: string) => string;
4171
+ removeToast: (id: TLUiToast["id"]) => string;
4171
4172
  replaceImage: () => Promise<void>;
4172
4173
  replaceVideo: () => Promise<void>;
4173
4174
  };
@@ -4183,7 +4184,7 @@ export declare function useEditablePlainText(shapeId: TLShapeId, type: string, t
4183
4184
  }) => void;
4184
4185
  handleDoubleClick: (e: any) => any;
4185
4186
  handleFocus: () => void;
4186
- handleInputPointerDown: (e: React_3.PointerEvent<Element>) => void;
4187
+ handleInputPointerDown: (e: React_3.PointerEvent) => void;
4187
4188
  handleKeyDown: (e: KeyboardEvent) => void;
4188
4189
  handlePaste: (e: ClipboardEvent | React_3.ClipboardEvent<HTMLTextAreaElement>) => void;
4189
4190
  isEditing: boolean;
@@ -4200,9 +4201,9 @@ export declare function useEditableRichText(shapeId: TLShapeId, type: string, ri
4200
4201
  }) => void;
4201
4202
  handleDoubleClick: (e: any) => any;
4202
4203
  handleFocus: () => void;
4203
- handleInputPointerDown: (e: PointerEvent_2<Element>) => void;
4204
+ handleInputPointerDown: (e: React.PointerEvent) => void;
4204
4205
  handleKeyDown: (e: KeyboardEvent) => void;
4205
- handlePaste: (e: ClipboardEvent | ClipboardEvent_2<HTMLTextAreaElement>) => void;
4206
+ handlePaste: (e: ClipboardEvent | React.ClipboardEvent<HTMLTextAreaElement>) => void;
4206
4207
  isEditing: boolean;
4207
4208
  isEmpty: boolean | undefined;
4208
4209
  isReadyForEditing: boolean;
@@ -4361,7 +4362,7 @@ export declare class ZoomTool extends StateNode {
4361
4362
  static children(): TLStateNodeConstructor[];
4362
4363
  static isLockable: boolean;
4363
4364
  info: TLPointerEventInfo & {
4364
- onInteractionEnd?: string | undefined;
4365
+ onInteractionEnd?: string;
4365
4366
  };
4366
4367
  onEnter(info: TLPointerEventInfo & {
4367
4368
  onInteractionEnd: string;