tldraw 4.4.0-next.f2df7e20ec7b → 4.5.0-canary.034ea85352da

package/dist-cjs/index.d.ts

@@ -8,6 +8,7 @@ import { BindingOnShapeIsolateOptions } from '@tldraw/editor';
 import { BindingUtil } from '@tldraw/editor';
 import { Box } from '@tldraw/editor';
 import { Circle2d } from '@tldraw/editor';
+import { ClipboardEvent as ClipboardEvent_2 } from 'react';
 import { ComponentType } from 'react';
 import { CSSProperties } from 'react';
 import { DebugFlag } from '@tldraw/editor';
@@ -23,16 +24,19 @@ import { Geometry2dOptions } from '@tldraw/editor';
 import { Group2d } from '@tldraw/editor';
 import { HandleSnapGeometry } from '@tldraw/editor';
 import { HTMLAttributes } from 'react';
-import { IndexKey } from '@tldraw/editor';
-import { JsonObject } from '@tldraw/editor';
+import { IndexKey } from '@tldraw/utils';
+import { IndexKey as IndexKey_2 } from '@tldraw/editor';
+import { JsonObject } from '@tldraw/utils';
 import { JSX } from 'react/jsx-runtime';
+import { JSX as JSX_2 } from 'react';
 import { JSXElementConstructor } from 'react';
 import { LANGUAGES } from '@tldraw/editor';
 import { MigrationFailureReason } from '@tldraw/editor';
-import { MigrationSequence } from '@tldraw/editor';
+import { MigrationSequence } from '@tldraw/store';
 import { NamedExoticComponent } from 'react';
 import { Node as Node_2 } from '@tiptap/pm/model';
 import { PerfectDashTerminal } from '@tldraw/editor';
+import { PointerEvent as PointerEvent_2 } from 'react';
 import { Polygon2d } from '@tldraw/editor';
 import { Polyline2d } from '@tldraw/editor';
 import * as React_2 from 'react';
@@ -41,7 +45,7 @@ import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
 import { ReadonlySharedStyleMap } from '@tldraw/editor';
-import { RecordProps } from '@tldraw/editor';
+import { RecordProps } from '@tldraw/tlschema';
 import { Rectangle2d } from '@tldraw/editor';
 import { RecursivePartial } from '@tldraw/editor';
 import { RefAttributes } from 'react';
@@ -73,14 +77,11 @@ import { TLBookmarkShapeProps } from '@tldraw/editor';
 import { TLClickEventInfo } from '@tldraw/editor';
 import { TLContent } from '@tldraw/editor';
 import { TLCropInfo } from '@tldraw/editor';
-import { TLDefaultColorStyle } from '@tldraw/editor';
-import { TLDefaultColorThemeColor } from '@tldraw/editor';
-import { TLDefaultDashStyle } from '@tldraw/editor';
+import { TLDefaultColorThemeColor } from '@tldraw/tlschema';
 import { TLDefaultFillStyle } from '@tldraw/editor';
 import { TLDefaultFontStyle } from '@tldraw/editor';
 import { TLDefaultHorizontalAlignStyle } from '@tldraw/editor';
 import { TLDefaultSizeStyle } from '@tldraw/editor';
-import { TLDefaultTextAlignStyle } from '@tldraw/editor';
 import { TLDefaultVerticalAlignStyle } from '@tldraw/editor';
 import { TLDragShapesOutInfo } from '@tldraw/editor';
 import { TLDragShapesOverInfo } from '@tldraw/editor';
@@ -103,7 +104,6 @@ import { TLFrameShape } from '@tldraw/editor';
 import { TLFrameShapeProps } from '@tldraw/editor';
 import { TLGeometryOpts } from '@tldraw/editor';
 import { TLGeoShape } from '@tldraw/editor';
-import { TLGeoShapeGeoStyle } from '@tldraw/editor';
 import { TLGeoShapeProps } from '@tldraw/editor';
 import { TLHandle } from '@tldraw/editor';
 import { TLHandleDragInfo } from '@tldraw/editor';
@@ -117,14 +117,12 @@ import { TLImageShapeProps } from '@tldraw/editor';
 import { TLKeyboardEventInfo } from '@tldraw/editor';
 import { TLLineShape } from '@tldraw/editor';
 import { TLLineShapePoint } from '@tldraw/editor';
-import { TLLineShapeSplineStyle } from '@tldraw/editor';
 import { TLNoteShape } from '@tldraw/editor';
 import { TLNoteShapeProps } from '@tldraw/editor';
-import { TLOpacityType } from '@tldraw/editor';
 import { TLPageId } from '@tldraw/editor';
-import { TLParentId } from '@tldraw/editor';
+import { TLParentId } from '@tldraw/tlschema';
 import { TLPointerEventInfo } from '@tldraw/editor';
-import { TLPropsMigrations } from '@tldraw/editor';
+import { TLPropsMigrations } from '@tldraw/tlschema';
 import { TLResizeInfo } from '@tldraw/editor';
 import { TLRichText } from '@tldraw/editor';
 import { TLSchema } from '@tldraw/editor';
@@ -133,6 +131,7 @@ import { TLSelectionForegroundProps } from '@tldraw/editor';
 import { TLShape } from '@tldraw/editor';
 import { TLShapeCrop } from '@tldraw/editor';
 import { TLShapeId } from '@tldraw/editor';
+import { TLShapeId as TLShapeId_2 } from '@tldraw/tlschema';
 import { TLShapePartial } from '@tldraw/editor';
 import { TLShapeUtilCanBeLaidOutOpts } from '@tldraw/editor';
 import { TLShapeUtilCanBindOpts } from '@tldraw/editor';
@@ -150,6 +149,7 @@ import { UnknownRecord } from '@tldraw/editor';
 import { Vec } from '@tldraw/editor';
 import { VecLike } from '@tldraw/editor';
 import { VecModel } from '@tldraw/editor';
+import { VecModel as VecModel_2 } from '@tldraw/tlschema';
 
 /** @public */
 export declare type A11yPriority = 'assertive' | 'polite';
@@ -193,9 +193,9 @@ export declare class ArrowBindingUtil extends BindingUtil<TLArrowBinding> {
     getDefaultProps(): Partial<TLArrowBindingProps>;
     onAfterCreate({ binding }: BindingOnCreateOptions<TLArrowBinding>): void;
     onAfterChange({ bindingAfter }: BindingOnChangeOptions<TLArrowBinding>): void;
-    onAfterChangeFromShape({ shapeBefore, shapeAfter, reason, }: BindingOnShapeChangeOptions<TLArrowBinding>): void;
-    onAfterChangeToShape({ binding, shapeBefore, shapeAfter, reason, }: BindingOnShapeChangeOptions<TLArrowBinding>): void;
-    onBeforeIsolateFromShape({ binding, }: BindingOnShapeIsolateOptions<TLArrowBinding>): void;
+    onAfterChangeFromShape({ shapeBefore, shapeAfter, reason }: BindingOnShapeChangeOptions<TLArrowBinding>): void;
+    onAfterChangeToShape({ binding, shapeBefore, shapeAfter, reason }: BindingOnShapeChangeOptions<TLArrowBinding>): void;
+    onBeforeIsolateFromShape({ binding }: BindingOnShapeIsolateOptions<TLArrowBinding>): void;
 }
 
 /** @public @react */
@@ -329,18 +329,18 @@ export declare class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
     getHandles(shape: TLArrowShape): TLHandle[];
     getText(shape: TLArrowShape): string;
     onHandleDrag(shape: TLArrowShape, info: TLHandleDragInfo<TLArrowShape>): ({
-        id: TLShapeId;
+        id: TLShapeId_2;
         meta?: Partial<JsonObject> | undefined;
         props?: Partial<TLArrowShapeProps> | undefined;
         type: "arrow";
     } & Partial<Omit<TLArrowShape, "id" | "meta" | "props" | "type">>) | {
-        id: TLShapeId;
+        id: TLShapeId_2;
         props: {
             bend: number;
         };
         type: "arrow";
     } | {
-        id: TLShapeId;
+        id: TLShapeId_2;
         props: {
             elbowMidPoint: number;
         };
@@ -350,7 +350,7 @@ export declare class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
     private onElbowMidpointHandleDrag;
     private onTerminalHandleDrag;
     onTranslateStart(shape: TLArrowShape): ({
-        id: TLShapeId;
+        id: TLShapeId_2;
         meta?: Partial<JsonObject> | undefined;
         props?: Partial<TLArrowShapeProps> | undefined;
         type: "arrow";
@@ -360,8 +360,8 @@ export declare class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
     onResize(shape: TLArrowShape, info: TLResizeInfo<TLArrowShape>): {
         props: {
             bend: number;
-            end: VecModel;
-            start: VecModel;
+            end: VecModel_2;
+            start: VecModel_2;
         };
     };
     onDoubleClickHandle(shape: TLArrowShape, handle: TLHandle): TLShapePartial<TLArrowShape> | void;
@@ -458,11 +458,11 @@ export declare class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape>
     useLegacyIndicator(): boolean;
     getIndicatorPath(shape: TLBookmarkShape): Path2D;
     onBeforeCreate(next: TLBookmarkShape): {
-        id: TLShapeId;
+        id: TLShapeId_2;
         index: IndexKey;
         isLocked: boolean;
         meta: JsonObject;
-        opacity: TLOpacityType;
+        opacity: number;
         parentId: TLParentId;
         props: {
             assetId: null | TLAssetId;
@@ -477,11 +477,11 @@ export declare class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape>
         y: number;
     };
     onBeforeUpdate(prev: TLBookmarkShape, shape: TLBookmarkShape): {
-        id: TLShapeId;
+        id: TLShapeId_2;
         index: IndexKey;
         isLocked: boolean;
         meta: JsonObject;
-        opacity: TLOpacityType;
+        opacity: number;
         parentId: TLParentId;
         props: {
             assetId: null | TLAssetId;
@@ -516,7 +516,7 @@ export declare interface BreakPointProviderProps {
 /* Excluded from this release type: buildFromV1Document */
 
 /** @public @react */
-export declare function CenteredTopPanelContainer({ maxWidth, ignoreRightWidth, stylePanelWidth, marginBetweenZones, squeezeAmount, children, }: CenteredTopPanelContainerProps): JSX.Element;
+export declare function CenteredTopPanelContainer({ maxWidth, ignoreRightWidth, stylePanelWidth, marginBetweenZones, squeezeAmount, children }: CenteredTopPanelContainerProps): JSX.Element;
 
 /** @public */
 export declare interface CenteredTopPanelContainerProps {
@@ -609,7 +609,7 @@ export declare function CopyMenuItem(): JSX.Element;
  * @returns A Result containing the created bookmark shape or an error
  * @public
  */
-export declare function createBookmarkFromUrl(editor: Editor, { url, center, }: {
+export declare function createBookmarkFromUrl(editor: Editor, { url, center }: {
     center?: {
         x: number;
         y: number;
@@ -923,7 +923,7 @@ export declare function DefaultContextMenuContent(): JSX.Element | null;
 export declare function DefaultDebugMenu({ children }: TLUiDebugMenuProps): JSX.Element;
 
 /** @public @react */
-export declare function DefaultDebugMenuContent({ customDebugFlags, customFeatureFlags, }: CustomDebugFlags): JSX.Element;
+export declare function DefaultDebugMenuContent({ customDebugFlags, customFeatureFlags }: CustomDebugFlags): JSX.Element;
 
 /** @public @react */
 export declare const DefaultDialogs: NamedExoticComponent<object>;
@@ -1059,7 +1059,7 @@ export declare const DefaultRichTextToolbar: React_3.NamedExoticComponent<TLUiRi
  *
  * @public @react
  */
-export declare function DefaultRichTextToolbarContent({ textEditor, onEditLinkStart, }: DefaultRichTextToolbarContentProps): JSX.Element[];
+export declare function DefaultRichTextToolbarContent({ textEditor, onEditLinkStart }: DefaultRichTextToolbarContentProps): JSX.Element[];
 
 /** @public */
 export declare interface DefaultRichTextToolbarContentProps {
@@ -1157,8 +1157,8 @@ export declare function DistributeMenuItems(): JSX.Element;
  * @public
  */
 export declare function downsizeImage(blob: Blob, width: number, height: number, opts?: {
-    quality?: number;
-    type?: string;
+    quality?: number | undefined;
+    type?: string | undefined;
 }): Promise<Blob>;
 
 /** @public */
@@ -1554,7 +1554,7 @@ export declare interface EventsProviderProps {
 }
 
 /** @public @react */
-export declare function ExampleDialog({ title, body, cancel, confirm, displayDontShowAgain, maxWidth, onCancel, onContinue, }: ExampleDialogProps): JSX.Element;
+export declare function ExampleDialog({ title, body, cancel, confirm, displayDontShowAgain, maxWidth, onCancel, onContinue }: ExampleDialogProps): JSX.Element;
 
 /** @public */
 export declare interface ExampleDialogProps {
@@ -1671,7 +1671,7 @@ export declare class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
     onResize(shape: any, info: TLResizeInfo<any>): any;
     getInterpolatedProps(startShape: TLFrameShape, endShape: TLFrameShape, t: number): TLFrameShapeProps;
     onDoubleClickEdge(shape: TLFrameShape, info: TLClickEventInfo): {
-        id: TLShapeId;
+        id: TLShapeId_2;
         props: {
             h: number;
             w: number;
@@ -1679,7 +1679,7 @@ export declare class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
         type: "frame";
     } | undefined;
     onDoubleClickCorner(shape: TLFrameShape): {
-        id: TLShapeId;
+        id: TLShapeId_2;
         type: "frame";
     };
     onDragShapesIn(shape: TLFrameShape, draggingShapes: TLShape[], { initialParentIds, initialIndices }: TLDragShapesOverInfo): void;
@@ -1727,27 +1727,31 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
         y: number;
     };
     onBeforeCreate(shape: TLGeoShape): {
-        id: TLShapeId;
+        id: TLShapeId_2;
         index: IndexKey;
         isLocked: boolean;
         meta: JsonObject;
-        opacity: TLOpacityType;
+        opacity: number;
         parentId: TLParentId;
         props: {
-            align: TLDefaultHorizontalAlignStyle;
-            color: TLDefaultColorStyle;
-            dash: TLDefaultDashStyle;
-            fill: TLDefaultFillStyle;
-            font: TLDefaultFontStyle;
-            geo: TLGeoShapeGeoStyle;
+            align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
+            color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
+            dash: "dashed" | "dotted" | "draw" | "solid";
+            fill: "fill" | "lined-fill" | "none" | "pattern" | "semi" | "solid";
+            font: "draw" | "mono" | "sans" | "serif";
+            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";
             growY: number;
             h: number;
-            labelColor: TLDefaultColorStyle;
-            richText: TLRichText;
+            labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
+            richText: {
+                attrs?: any;
+                content: unknown[];
+                type: string;
+            };
             scale: number;
-            size: TLDefaultSizeStyle;
+            size: "l" | "m" | "s" | "xl";
             url: string;
-            verticalAlign: TLDefaultVerticalAlignStyle;
+            verticalAlign: "end" | "middle" | "start";
             w: number;
         };
         rotation: number;
@@ -1757,27 +1761,31 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
         y: number;
     } | undefined;
     onBeforeUpdate(prev: TLGeoShape, next: TLGeoShape): {
-        id: TLShapeId;
+        id: TLShapeId_2;
         index: IndexKey;
         isLocked: boolean;
         meta: JsonObject;
-        opacity: TLOpacityType;
+        opacity: number;
         parentId: TLParentId;
         props: {
-            align: TLDefaultHorizontalAlignStyle;
-            color: TLDefaultColorStyle;
-            dash: TLDefaultDashStyle;
-            fill: TLDefaultFillStyle;
-            font: TLDefaultFontStyle;
-            geo: TLGeoShapeGeoStyle;
+            align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
+            color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
+            dash: "dashed" | "dotted" | "draw" | "solid";
+            fill: "fill" | "lined-fill" | "none" | "pattern" | "semi" | "solid";
+            font: "draw" | "mono" | "sans" | "serif";
+            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";
             growY: number;
             h: number;
-            labelColor: TLDefaultColorStyle;
-            richText: TLRichText;
+            labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
+            richText: {
+                attrs?: any;
+                content: unknown[];
+                type: string;
+            };
             scale: number;
-            size: TLDefaultSizeStyle;
+            size: "l" | "m" | "s" | "xl";
             url: string;
-            verticalAlign: TLDefaultVerticalAlignStyle;
+            verticalAlign: "end" | "middle" | "start";
             w: number;
         };
         rotation: number;
@@ -1787,11 +1795,11 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
         y: number;
     } | undefined;
     onDoubleClick(shape: TLGeoShape): {
-        id: TLShapeId;
+        id: TLShapeId_2;
         index: IndexKey;
         isLocked: boolean;
         meta: JsonObject;
-        opacity: TLOpacityType;
+        opacity: number;
         parentId: TLParentId;
         props: {
             geo: "check-box";
@@ -1802,11 +1810,11 @@ export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
         x: number;
         y: number;
     } | {
-        id: TLShapeId;
+        id: TLShapeId_2;
         index: IndexKey;
         isLocked: boolean;
         meta: JsonObject;
-        opacity: TLOpacityType;
+        opacity: number;
         parentId: TLParentId;
         props: {
             geo: "rectangle";
@@ -1913,7 +1921,7 @@ export declare function getStrokeOutlinePoints(strokePoints: StrokePoint[], opti
 export declare function getStrokePoints(rawInputPoints: VecLike[], options?: StrokeOptions): StrokePoint[];
 
 /**
- * Turn an array of stroke points into a path of quadradic curves.
+ * Turn an array of stroke points into a path of quadratic curves.
  *
  * @param points - The stroke points returned from perfect-freehand
  * @param closed - Whether the shape is closed
@@ -2106,15 +2114,15 @@ export declare class LineShapeUtil extends ShapeUtil<TLLineShape> {
     };
     onBeforeCreate(next: TLLineShape): TLLineShape | void;
     onHandleDrag(shape: TLLineShape, { handle }: TLHandleDragInfo<TLLineShape>): {
-        id: TLShapeId;
+        id: TLShapeId_2;
         index: IndexKey;
         isLocked: boolean;
         meta: JsonObject;
-        opacity: TLOpacityType;
+        opacity: number;
         parentId: TLParentId;
         props: {
-            color: TLDefaultColorStyle;
-            dash: TLDefaultDashStyle;
+            color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
+            dash: "dashed" | "dotted" | "draw" | "solid";
             points: {
                 [x: string]: {
                     id: string;
@@ -2124,8 +2132,8 @@ export declare class LineShapeUtil extends ShapeUtil<TLLineShape> {
                 } | TLLineShapePoint;
             };
             scale: number;
-            size: TLDefaultSizeStyle;
-            spline: TLLineShapeSplineStyle;
+            size: "l" | "m" | "s" | "xl";
+            spline: "cubic" | "line";
         };
         rotation: number;
         type: "line";
@@ -2134,15 +2142,15 @@ export declare class LineShapeUtil extends ShapeUtil<TLLineShape> {
         y: number;
     };
     onHandleDragStart(shape: TLLineShape, { handle }: TLHandleDragInfo<TLLineShape>): {
-        id: TLShapeId;
+        id: TLShapeId_2;
         index: IndexKey;
         isLocked: boolean;
         meta: JsonObject;
-        opacity: TLOpacityType;
+        opacity: number;
         parentId: TLParentId;
         props: {
-            color: TLDefaultColorStyle;
-            dash: TLDefaultDashStyle;
+            color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
+            dash: "dashed" | "dotted" | "draw" | "solid";
             points: {
                 [x: string]: {
                     id: IndexKey;
@@ -2152,8 +2160,8 @@ export declare class LineShapeUtil extends ShapeUtil<TLLineShape> {
                 } | TLLineShapePoint;
             };
             scale: number;
-            size: TLDefaultSizeStyle;
-            spline: TLLineShapeSplineStyle;
+            size: "l" | "m" | "s" | "xl";
+            spline: "cubic" | "line";
         };
         rotation: number;
         type: "line";
@@ -2235,23 +2243,27 @@ export declare class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
     toSvg(shape: TLNoteShape, ctx: SvgExportContext): JSX.Element;
     onBeforeCreate(next: TLNoteShape): {
         id: TLShapeId;
-        index: IndexKey;
+        index: IndexKey_2;
         isLocked: boolean;
         meta: JsonObject;
-        opacity: TLOpacityType;
+        opacity: number;
         parentId: TLParentId;
         props: {
-            align: TLDefaultHorizontalAlignStyle;
-            color: TLDefaultColorStyle;
-            font: TLDefaultFontStyle;
+            align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
+            color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
+            font: "draw" | "mono" | "sans" | "serif";
             fontSizeAdjustment: number;
             growY: number;
-            labelColor: TLDefaultColorStyle;
-            richText: TLRichText;
+            labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
+            richText: {
+                attrs?: any;
+                content: unknown[];
+                type: string;
+            };
             scale: number;
-            size: TLDefaultSizeStyle;
+            size: "l" | "m" | "s" | "xl";
             url: string;
-            verticalAlign: TLDefaultVerticalAlignStyle;
+            verticalAlign: "end" | "middle" | "start";
         };
         rotation: number;
         type: "note";
@@ -2261,23 +2273,27 @@ export declare class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
     } | undefined;
     onBeforeUpdate(prev: TLNoteShape, next: TLNoteShape): {
         id: TLShapeId;
-        index: IndexKey;
+        index: IndexKey_2;
         isLocked: boolean;
         meta: JsonObject;
-        opacity: TLOpacityType;
+        opacity: number;
         parentId: TLParentId;
         props: {
-            align: TLDefaultHorizontalAlignStyle;
-            color: TLDefaultColorStyle;
-            font: TLDefaultFontStyle;
+            align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
+            color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
+            font: "draw" | "mono" | "sans" | "serif";
             fontSizeAdjustment: number;
             growY: number;
-            labelColor: TLDefaultColorStyle;
-            richText: TLRichText;
+            labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
+            richText: {
+                attrs?: any;
+                content: unknown[];
+                type: string;
+            };
             scale: number;
-            size: TLDefaultSizeStyle;
+            size: "l" | "m" | "s" | "xl";
             url: string;
-            verticalAlign: TLDefaultVerticalAlignStyle;
+            verticalAlign: "end" | "middle" | "start";
         };
         rotation: number;
         type: "note";
@@ -2331,7 +2347,7 @@ export declare interface OnDragFromToolbarToCreateShapesOpts {
 export declare function OvalToolbarItem(): JSX.Element;
 
 /** @public @react */
-export declare function OverflowingToolbar({ children, orientation, sizingParentClassName, minItems, minSizePx, maxItems, maxSizePx, }: OverflowingToolbarProps): JSX.Element;
+export declare function OverflowingToolbar({ children, orientation, sizingParentClassName, minItems, minSizePx, maxItems, maxSizePx }: OverflowingToolbarProps): JSX.Element;
 
 /** @public */
 export declare interface OverflowingToolbarProps {
@@ -2373,7 +2389,7 @@ export declare interface PageItemSubmenuProps {
 /* Excluded from this release type: parseAndLoadDocument */
 
 /** @public */
-export declare function parseTldrawJsonFile({ json, schema, }: {
+export declare function parseTldrawJsonFile({ json, schema }: {
     json: string;
     schema: TLSchema;
 }): Result<TLStore, TldrawFileParseError>;
@@ -2668,7 +2684,7 @@ export declare interface RichTextLabelProps {
  *
  * @public @react
  */
-export declare function RichTextSVG({ bounds, richText, fontSize, font, align, verticalAlign, wrap, labelColor, padding, showTextOutline, }: RichTextSVGProps): JSX.Element;
+export declare function RichTextSVG({ bounds, richText, fontSize, font, align, verticalAlign, wrap, labelColor, padding, showTextOutline }: RichTextSVGProps): JSX.Element;
 
 /** @public */
 export declare interface RichTextSVGProps {
@@ -2804,10 +2820,10 @@ export declare function StylePanelArrowheadPicker(): JSX.Element | null;
 export declare function StylePanelArrowKindPicker(): JSX.Element | null;
 
 /** @public @react */
-export declare const StylePanelButtonPicker: <T extends string>(props: StylePanelButtonPickerProps<T>) => React.JSX.Element;
+export declare const StylePanelButtonPicker: <T extends string>(props: StylePanelButtonPickerProps<T>) => JSX_2.Element;
 
 /** @public @react*/
-export declare const StylePanelButtonPickerInline: <T extends string>(props: StylePanelButtonPickerProps<T>) => React.JSX.Element;
+export declare const StylePanelButtonPickerInline: <T extends string>(props: StylePanelButtonPickerProps<T>) => JSX_2.Element;
 
 /** @public */
 export declare interface StylePanelButtonPickerProps<T extends string> {
@@ -2882,6 +2898,8 @@ export declare interface StylePanelDropdownPickerProps<T extends string> {
     items: StyleValuesForUi<T>;
     type: 'icon' | 'menu' | 'tool';
     onValueChange?(style: StyleProp<T>, value: T): void;
+    /** Override the test ID prefix. Defaults to uiType. */
+    testIdType?: string;
 }
 
 /** @public @react */
@@ -3019,16 +3037,20 @@ export declare class TextShapeUtil extends ShapeUtil<TLTextShape> {
         index: IndexKey;
         isLocked: boolean;
         meta: JsonObject;
-        opacity: TLOpacityType;
+        opacity: number;
         parentId: TLParentId;
         props: {
             autoSize: boolean;
-            color: TLDefaultColorStyle;
-            font: TLDefaultFontStyle;
-            richText: TLRichText;
+            color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
+            font: "draw" | "mono" | "sans" | "serif";
+            richText: {
+                attrs?: any;
+                content: unknown[];
+                type: string;
+            };
             scale: number;
-            size: TLDefaultSizeStyle;
-            textAlign: TLDefaultTextAlignStyle;
+            size: "l" | "m" | "s" | "xl";
+            textAlign: "end" | "middle" | "start";
             w: number;
         };
         rotation: number;
@@ -3174,7 +3196,7 @@ export declare interface TldrawBaseProps extends TldrawUiProps, TldrawEditorBase
 }
 
 /** @public @react */
-export declare function TldrawCropHandles({ size, width, height, hideAlternateHandles, }: TldrawCropHandlesProps): JSX.Element;
+export declare function TldrawCropHandles({ size, width, height, hideAlternateHandles }: TldrawCropHandlesProps): JSX.Element;
 
 /** @public */
 export declare interface TldrawCropHandlesProps {
@@ -3318,7 +3340,7 @@ export declare function TldrawUiButtonLabel({ children }: TLUiButtonLabelProps):
 export declare const TldrawUiColumn: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;
 
 /** @public @react */
-export declare function TldrawUiComponentsProvider({ overrides, children, }: TLUiComponentsProviderProps): JSX.Element;
+export declare function TldrawUiComponentsProvider({ overrides, children }: TLUiComponentsProviderProps): JSX.Element;
 
 /** @public @react */
 export declare const TldrawUiContextProvider: NamedExoticComponent<TLUiContextProviderProps>;
@@ -3353,7 +3375,7 @@ export declare function TldrawUiDialogTitle({ className, children, style }: TLUi
 export declare function TldrawUiDropdownMenuCheckboxItem({ children, onSelect, ...rest }: TLUiDropdownMenuCheckboxItemProps): JSX.Element;
 
 /** @public @react */
-export declare function TldrawUiDropdownMenuContent({ className, side, align, sideOffset, alignOffset, children, }: TLUiDropdownMenuContentProps): JSX.Element;
+export declare function TldrawUiDropdownMenuContent({ className, side, align, sideOffset, alignOffset, children }: TLUiDropdownMenuContentProps): JSX.Element;
 
 /** @public @react */
 export declare function TldrawUiDropdownMenuGroup({ className, children }: TLUiDropdownMenuGroupProps): JSX.Element;
@@ -3365,16 +3387,16 @@ export declare function TldrawUiDropdownMenuIndicator(): JSX.Element;
 export declare function TldrawUiDropdownMenuItem({ noClose, children }: TLUiDropdownMenuItemProps): JSX.Element;
 
 /** @public @react */
-export declare function TldrawUiDropdownMenuRoot({ id, children, modal, debugOpen, }: TLUiDropdownMenuRootProps): JSX.Element;
+export declare function TldrawUiDropdownMenuRoot({ id, children, modal, debugOpen }: TLUiDropdownMenuRootProps): JSX.Element;
 
 /** @public @react */
 export declare function TldrawUiDropdownMenuSub({ id, children }: TLUiDropdownMenuSubProps): JSX.Element;
 
 /** @public @react */
-export declare function TldrawUiDropdownMenuSubContent({ id, alignOffset, sideOffset, size, children, }: TLUiDropdownMenuSubContentProps): JSX.Element;
+export declare function TldrawUiDropdownMenuSubContent({ id, alignOffset, sideOffset, size, children }: TLUiDropdownMenuSubContentProps): JSX.Element;
 
 /** @public @react */
-export declare function TldrawUiDropdownMenuSubTrigger({ id, label, title, disabled, }: TLUiDropdownMenuSubTriggerProps): JSX.Element;
+export declare function TldrawUiDropdownMenuSubTrigger({ id, label, title, disabled }: TLUiDropdownMenuSubTriggerProps): JSX.Element;
 
 /** @public @react */
 export declare function TldrawUiDropdownMenuTrigger({ children, ...rest }: TLUiDropdownMenuTriggerProps): JSX.Element;
@@ -3408,19 +3430,19 @@ export declare function TldrawUiMenuActionCheckboxItem({ actionId, ...rest }: TL
 export declare function TldrawUiMenuActionItem({ actionId, ...rest }: TLUiMenuActionItemProps): JSX.Element | null;
 
 /** @public @react */
-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.Element | null;
+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.Element | null;
 
 /** @public @react */
-export declare function TldrawUiMenuContextProvider({ type, sourceId, children, }: TLUiMenuContextProviderProps): JSX.Element;
+export declare function TldrawUiMenuContextProvider({ type, sourceId, children }: TLUiMenuContextProviderProps): JSX.Element;
 
 /** @public @react */
 export declare function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGroupProps): bigint | boolean | JSX.Element | Iterable<ReactNode> | null | number | Promise<bigint | boolean | ReactElement<unknown, JSXElementConstructor<any> | string> | ReactPortal | Iterable<ReactNode> | null | number | string | undefined> | string | undefined;
 
 /** @public @react */
-export declare function TldrawUiMenuItem<TranslationKey extends string = string, IconType extends string = string>({ disabled, spinner, readonlyOk, id, kbd, label, icon, iconLeft, onSelect, noClose, isSelected, onDragStart, }: TLUiMenuItemProps<TranslationKey, IconType>): JSX.Element | null;
+export declare function TldrawUiMenuItem<TranslationKey extends string = string, IconType extends string = string>({ disabled, spinner, readonlyOk, id, kbd, label, icon, iconLeft, onSelect, noClose, isSelected, onDragStart }: TLUiMenuItemProps<TranslationKey, IconType>): JSX.Element | null;
 
 /** @public @react */
-export declare function TldrawUiMenuSubmenu<Translation extends string = string>({ id, disabled, label, size, children, }: TLUiMenuSubmenuProps<Translation>): bigint | boolean | JSX.Element | Iterable<ReactNode> | null | number | Promise<bigint | boolean | ReactElement<unknown, JSXElementConstructor<any> | string> | ReactPortal | Iterable<ReactNode> | null | number | string | undefined> | string | undefined;
+export declare function TldrawUiMenuSubmenu<Translation extends string = string>({ id, disabled, label, size, children }: TLUiMenuSubmenuProps<Translation>): bigint | boolean | JSX.Element | Iterable<ReactNode> | null | number | Promise<bigint | boolean | ReactElement<unknown, JSXElementConstructor<any> | string> | ReactPortal | Iterable<ReactNode> | null | number | string | undefined> | string | undefined;
 
 /** @public @react */
 export declare function TldrawUiMenuToolItem({ toolId, ...rest }: TLUiMenuToolItemProps): JSX.Element | null;
@@ -3432,7 +3454,7 @@ export declare interface TldrawUiOrientationContext {
 }
 
 /** @public @react */
-export declare function TldrawUiOrientationProvider({ children, orientation, tooltipSide, }: TldrawUiOrientationProviderProps): JSX.Element;
+export declare function TldrawUiOrientationProvider({ children, orientation, tooltipSide }: TldrawUiOrientationProviderProps): JSX.Element;
 
 /** @public */
 export declare interface TldrawUiOrientationProviderProps {
@@ -3445,7 +3467,7 @@ export declare interface TldrawUiOrientationProviderProps {
 export declare function TldrawUiPopover({ id, children, onOpenChange, open, className }: TLUiPopoverProps): JSX.Element;
 
 /** @public @react */
-export declare function TldrawUiPopoverContent({ side, children, align, sideOffset, alignOffset, disableEscapeKeyDown, autoFocusFirstButton, }: TLUiPopoverContentProps): JSX.Element;
+export declare function TldrawUiPopoverContent({ side, children, align, sideOffset, alignOffset, disableEscapeKeyDown, autoFocusFirstButton }: TLUiPopoverContentProps): JSX.Element;
 
 /** @public @react */
 export declare function TldrawUiPopoverTrigger({ children }: TLUiPopoverTriggerProps): JSX.Element;
@@ -3498,7 +3520,7 @@ export declare const TldrawUiRow: ForwardRefExoticComponent<TLUiLayoutProps & Re
  * @public
  * @react
  */
-export declare function TldrawUiSelect({ id, value, onValueChange, onOpenChange, disabled, className, children, 'data-testid': dataTestId, 'aria-label': ariaLabel, }: TLUiSelectProps): JSX.Element;
+export declare function TldrawUiSelect({ id, value, onValueChange, onOpenChange, disabled, className, children, 'data-testid': dataTestId, 'aria-label': ariaLabel }: TLUiSelectProps): JSX.Element;
 
 /**
  * The dropdown content container for select items.
@@ -3506,7 +3528,7 @@ export declare function TldrawUiSelect({ id, value, onValueChange, onOpenChange,
  * @public
  * @react
  */
-export declare function TldrawUiSelectContent({ children, side, align, className, }: TLUiSelectContentProps): JSX.Element;
+export declare function TldrawUiSelectContent({ children, side, align, className }: TLUiSelectContentProps): JSX.Element;
 
 /**
  * An item in the select dropdown. Styled to match TldrawUiMenuCheckboxItem.
@@ -3514,7 +3536,7 @@ export declare function TldrawUiSelectContent({ children, side, align, className
  * @public
  * @react
  */
-export declare function TldrawUiSelectItem({ value, label, icon, disabled, className, }: TLUiSelectItemProps): JSX.Element;
+export declare function TldrawUiSelectItem({ value, label, icon, disabled, className }: TLUiSelectItemProps): JSX.Element;
 
 /**
  * The trigger button for the select dropdown.
@@ -4743,7 +4765,7 @@ export declare function unwrapLabel(label?: TLUiActionItem['label'], menuType?:
  *
  * @public
  */
-export declare function updateArrowTargetState({ editor, pointInPageSpace, arrow, isPrecise, currentBinding, oppositeBinding, }: UpdateArrowTargetStateOpts): ArrowTargetState | null;
+export declare function updateArrowTargetState({ editor, pointInPageSpace, arrow, isPrecise, currentBinding, oppositeBinding }: UpdateArrowTargetStateOpts): ArrowTargetState | null;
 
 /**
  * Options passed to {@link updateArrowTargetState}.
@@ -4817,29 +4839,29 @@ export declare function useDefaultColorTheme(): {
 /** @public */
 export declare function useDefaultHelpers(): {
     addDialog: (dialog: Omit<TLUiDialog, "id"> & {
-        id?: string;
+        id?: string | undefined;
     }) => string;
     addToast: (toast: Omit<TLUiToast, "id"> & {
-        id?: string;
+        id?: string | undefined;
     }) => string;
     clearDialogs: () => void;
     clearToasts: () => void;
     copy: (source: TLUiEventSource) => Promise<void>;
-    copyAs: (ids: TLShapeId[], format?: TLCopyType) => void;
+    copyAs: (ids: TLShapeId_2[], format?: TLCopyType) => void;
     cut: (source: TLUiEventSource) => Promise<void>;
-    exportAs: (ids: TLShapeId[], opts?: {
-        format?: TLExportType;
-        name?: string;
-        scale?: number;
+    exportAs: (ids: TLShapeId_2[], opts?: {
+        format?: TLExportType | undefined;
+        name?: string | undefined;
+        scale?: number | undefined;
     }) => void;
     getEmbedDefinition: (url: string) => TLEmbedResult;
     insertMedia: () => Promise<void>;
     isMobile: boolean;
-    msg: (id?: Exclude<string, TLUiTranslationKey> | string) => string;
-    paste: (data: ClipboardItem[] | DataTransfer, source: TLUiEventSource, point?: VecLike) => Promise<void>;
+    msg: (id?: string | undefined) => string;
+    paste: (data: ClipboardItem[] | DataTransfer, source: TLUiEventSource, point?: VecLike | undefined) => Promise<void>;
     printSelectionOrPages: () => Promise<void>;
     removeDialog: (id: string) => string;
-    removeToast: (id: TLUiToast["id"]) => string;
+    removeToast: (id: string) => string;
     replaceImage: () => Promise<void>;
     replaceVideo: () => Promise<void>;
 };
@@ -4859,7 +4881,7 @@ export declare function useEditablePlainText(shapeId: TLShapeId, type: ExtractSh
         nativeEvent: Event;
     } | Event) => void;
     handleFocus: () => void;
-    handleInputPointerDown: (e: React_3.PointerEvent) => void;
+    handleInputPointerDown: (e: React_3.PointerEvent<Element>) => void;
     handleKeyDown: (e: KeyboardEvent) => void;
     handlePaste: (e: ClipboardEvent | React_3.ClipboardEvent<HTMLTextAreaElement>) => void;
     isEditing: boolean;
@@ -4874,15 +4896,19 @@ export declare function useEditableRichText(shapeId: TLShapeId, type: ExtractSha
 }>['type'], richText?: TLRichText): {
     handleBlur: () => void;
     handleChange: ({ richText }: {
-        richText: TLRichText;
+        richText: {
+            attrs?: any;
+            content: unknown[];
+            type: string;
+        };
     }) => void;
     handleDoubleClick: (e: {
         nativeEvent: Event;
     } | Event) => void;
     handleFocus: () => void;
-    handleInputPointerDown: (e: React.PointerEvent) => void;
+    handleInputPointerDown: (e: PointerEvent_2<Element>) => void;
     handleKeyDown: (e: KeyboardEvent) => void;
-    handlePaste: (e: ClipboardEvent | React.ClipboardEvent<HTMLTextAreaElement>) => void;
+    handlePaste: (e: ClipboardEvent | ClipboardEvent_2<HTMLTextAreaElement>) => void;
     isEditing: boolean;
     isEmpty: boolean | undefined;
     isReadyForEditing: boolean;
@@ -4891,9 +4917,9 @@ export declare function useEditableRichText(shapeId: TLShapeId, type: ExtractSha
 
 /** @public */
 export declare function useExportAs(): (ids: TLShapeId[], opts?: {
-    format?: TLExportType;
-    name?: string;
-    scale?: number;
+    format?: TLExportType | undefined;
+    name?: string | undefined;
+    scale?: number | undefined;
 }) => void;
 
 /**
@@ -4908,7 +4934,7 @@ export declare function useExportAs(): (ids: TLShapeId[], opts?: {
  * @public
  */
 export declare function useImageOrVideoAsset({ shapeId, assetId, width }: UseImageOrVideoAssetOptions): {
-    asset: (TLImageAsset | TLVideoAsset) | null;
+    asset: null | TLImageAsset | TLVideoAsset;
     url: null | string;
 };
 
@@ -4944,7 +4970,7 @@ export declare function useLocalStorageState<T = any>(key: string, defaultValue:
 export declare function useMenuClipboardEvents(): {
     copy: (source: TLUiEventSource) => Promise<void>;
     cut: (source: TLUiEventSource) => Promise<void>;
-    paste: (data: ClipboardItem[] | DataTransfer, source: TLUiEventSource, point?: VecLike) => Promise<void>;
+    paste: (data: ClipboardItem[] | DataTransfer, source: TLUiEventSource, point?: undefined | VecLike) => Promise<void>;
 };
 
 /** @public */
@@ -4995,7 +5021,7 @@ export declare function useTools(): TLUiToolsContextType;
  *
  * @public
  */
-export declare function useTranslation(): (id?: Exclude<string, TLUiTranslationKey> | string) => string;
+export declare function useTranslation(): (id?: string | undefined) => string;
 
 /** @public */
 export declare function useUiEvents(): TLUiEventContextType;
@@ -5053,7 +5079,7 @@ export declare class ZoomTool extends StateNode {
     static children(): TLStateNodeConstructor[];
     static isLockable: boolean;
     info: TLPointerEventInfo & {
-        onInteractionEnd?: string;
+        onInteractionEnd?: string | undefined;
     };
     onEnter(info: TLPointerEventInfo & {
         onInteractionEnd: string;